/* ==========================================================================
   Avisos (toastr) con la cara del sitio
   ==========================================================================
   El de la libreria es un rectangulo verde con opacidad y una sombra gris: no
   se parece a nada del resto de la tienda, y el mensaje que mas se ve —"Añadido
   al carro de compras"— es justamente el momento en que conviene que el sitio
   se vea cuidado.

   Se carga DESPUES de toastr.min.css, que trae sus reglas con !important en la
   imagen de fondo; de ahi los !important de aca. */

/* En escritorio se queda donde lo pone la libreria: arriba a la derecha, que es
   donde se espera un aviso y donde no tapa nada de lo que se estaba mirando.
   Lo unico que se le da es aire respecto del borde. El centrado es solo para el
   telefono, mas abajo. */
#toast-container {
    pointer-events: none;
}

/* Un poco mas de aire que los 12px de la libreria: pegado al borde el aviso
   parece cortado. */
#toast-container.toast-top-right {
    top: 20px;
    right: 20px;
}

#toast-container > div {
    pointer-events: auto;
    /* fit-content y no auto: el contenedor ocupa el ancho de la pantalla para
       poder centrar, y un bloque con width:auto adentro se estira hasta
       llenarlo. En un notebook el aviso cruzaba la pagina entera. */
    width: fit-content;
    min-width: 260px;
    max-width: min(460px, calc(100vw - 32px));
    /* Sin auto: en escritorio el contenedor se ajusta al aviso y esta pegado a
       la derecha, asi que centrar no significa nada. El centrado del telefono
       va en su media query. */
    margin: 0 0 10px;
    padding: 16px 22px 16px 60px;
    border-radius: 28px;
    box-shadow: 0 10px 28px rgba(23, 34, 59, .16);
    opacity: 1;
    filter: none;
    background-position: 20px center;
    background-size: 26px 26px;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    text-align: center;
}

#toast-container > div:hover {
    box-shadow: 0 12px 32px rgba(23, 34, 59, .22);
    opacity: 1;
}

#toast-container .toast-message {
    /* El padding izquierdo deja lugar al circulo; el texto se centra en lo que
       queda, no en la caja entera, para que no baile segun el largo. */
    display: block;
}

/* --------------------------------------------------------------------------
   Exito: crema con el circulo naranja del sitio
   -------------------------------------------------------------------------- */

/* Crema y naranja elegidos por el owner para este aviso. El texto usa #363432,
   que es el color de texto del sitio.

   El selector lleva el #toast-container adelante a proposito: la imagen de la
   libreria es "#toast-container>.toast-success" con !important, y entre dos
   !important gana la especificidad. Sin el ID ganaba el tilde blanco del PNG
   verde y el circulo naranja no se veia nunca. */
#toast-container > .toast-success {
    background-color: #fff4e2 !important;
    color: #363432 !important;
    /* Circulo naranja con el tilde blanco, dibujado aca mismo: la libreria trae
       un PNG verde de 24px que no combina con nada. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23e89f21'/%3E%3Cpath d='M6.8 12.4l3.2 3.2 7-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* El aviso neutro comparte el crema; el error se separa a proposito, que es lo
   unico que no puede confundirse con "salio bien". */
.toast-info,
.toast-warning {
    background-color: #fff4e2 !important;
    color: #363432 !important;
}

.toast-error {
    background-color: #fdeceb !important;
    color: #363432 !important;
}

/* La X de cerrar es gris sobre fondo claro: la de la libreria es blanca y
   desaparece. */
#toast-container .toast-close-button {
    color: #696763;
    opacity: .7;
    text-shadow: none;
    font-weight: 400;
}

/* En un telefono el aviso va arriba del todo y ocupa el ancho util. */
/* En el telefono, arriba a la derecha es medio aviso asomando por un costado y
   encima del carro. Ahi va centrado, debajo del encabezado y con el ancho util:
   el texto entra en una linea y se lee de un vistazo. */
@media (max-width: 767px) {
    #toast-container.toast-top-right,
    #toast-container.toast-top-left,
    #toast-container.toast-top-center {
        top: 74px;
        right: 0;
        left: 0;
        width: 100%;
    }

    #toast-container > div {
        width: calc(100vw - 32px);
        max-width: none;
        margin: 0 auto 10px;
    }
}