/* ==========================================================================
   KDS Toast — el aviso que aparece arriba a la derecha y se va solo.
   ==========================================================================

   Vivia adentro de `js/lib/kds-save-flow.js`, como un string de CSS que el
   componente se inyectaba en el <head> al arrancar, y con prefijo `kf2-`. Dos
   cosas mal por el mismo motivo: no era del DS. No se podia abrir, no se podia
   tocar sin editar JavaScript, y ninguna auditoria de estilos lo veia.

   La libreria es la unica fuente: si un componente falta, se agrega aca.
   ========================================================================== */

.kds-toaster {
    position:fixed;
    top:1.125rem;
    right:1.125rem;
    z-index:2000;
    display:flex;
    flex-direction:column;
    gap:.65rem;
    max-width:27.5rem;
}

/* Con el estilo del cartel de confirmación (#2029): el mismo borde de colores que gira, la misma tarjeta y el mismo
   cuadrado del ícono. El borde son dos fondos (la superficie adentro, el arcoíris debajo del borde transparente), así
   no hace falta otra caja. El color de cada tipo va en variables del aviso: la piel de la tienda las pisa con su
   misma especificidad de siempre. */
@property --kds-toast-angle {
    syntax:"<angle>";
    inherits:false;
    initial-value:0deg;
}

.kds-toast {
    --kds-toast-c1:var(--kds-acento-hover,#1FA090);
    --kds-toast-c2:var(--kds-acento-texto,#17786c);
    --kds-toast-glifo:var(--kds-texto-invertido,#fff);
    --kds-toast-tono:var(--kds-acento,#2EB8A8);
    --kds-toast-rotulo:var(--kds-acento-texto,#17786c);
    display:flex;
    align-items:center;
    gap:.9rem;
    border:.1875rem solid transparent;
    border-radius:1.375rem;
    background:
        linear-gradient(var(--ds-surface,#fff),var(--ds-surface,#fff)) padding-box,
        conic-gradient(from var(--kds-toast-angle),var(--kds-arcoiris,#2EB8A8,#77b65d,#E8B30E,#E6607B,#2EB8A8)) border-box;
    box-shadow:0 1.375rem 3.5rem rgba(17,24,39,.28);
    padding:.95rem 1.15rem 1rem .95rem;
    position:relative;
    overflow:hidden;
    min-width:21.75rem;
    transform:translateX(118%) scale(.98);
    opacity:0;
    transition:transform .34s cubic-bezier(.2,.9,.25,1),opacity .34s;
    animation:kdsToastSpin 4.5s linear infinite;
}

.kds-toast.on {
    transform:none;
    opacity:1;
}

@keyframes kdsToastSpin {
    to {
        --kds-toast-angle:360deg;
    }
}

.kds-toast__icon {
    width:2.875rem;
    height:2.875rem;
    border-radius:.875rem;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--kds-toast-glifo);
    flex:0 0 auto;
    font-size:1.25rem;
    background:linear-gradient(135deg,var(--kds-toast-c1),var(--kds-toast-c2));
}

.kds-toast__body {
    flex:1;
    min-width:0;
    padding-right:.3rem;
}

.kds-toast__eyebrow {
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--kds-toast-rotulo);
    line-height:1;
    margin-bottom:.24rem;
}

.kds-toast__title {
    font-weight:800;
    font-size:1rem;
    color:var(--ds-text,#212529);
    line-height:1.3;
}

.kds-toast__close {
    border:0;
    background:none;
    color:var(--ds-text-subtle,#9aa3ad);
    cursor:pointer;
    font-size:1.15rem;
    line-height:1;
    padding:0 .15rem;
    align-self:flex-start;
    transition:color .15s;
}

.kds-toast__close:hover {
    color:var(--ds-text,#212529);
}

.kds-toast__bar {
    position:absolute;
    left:.82rem;
    right:.82rem;
    bottom:.44rem;
    height:.1875rem;
    border-radius:.1875rem;
    transform-origin:left;
    background:var(--kds-toast-tono);
    opacity:.5;
    animation:kdsToastBar linear forwards;
}

/* Cada tipo: el cuadrado (del tono de botón al profundo, el ícono a 3 a 1 o más), la barrita y el rótulo chico.
   El amarillo siempre lleva el ícono oscuro. El de información es el verde agua de arriba. */
.kds-toast.is-success {
    --kds-toast-c1:var(--kds-exito,#459b40);
    --kds-toast-c2:var(--kds-exito-texto,#306c2d);
    --kds-toast-tono:var(--kds-exito,#459b40);
    --kds-toast-rotulo:var(--kds-exito-texto,#306c2d);
}

.kds-toast.is-error {
    --kds-toast-c1:var(--kds-peligro,#D03355);
    --kds-toast-c2:var(--kds-peligro-texto,#b8294a);
    --kds-toast-glifo:var(--kds-sobre-peligro,#fff);
    --kds-toast-tono:var(--kds-peligro,#D03355);
    --kds-toast-rotulo:var(--kds-peligro-texto,#b8294a);
}

.kds-toast.is-warning {
    --kds-toast-c1:var(--kds-aviso,#E8B30E);
    --kds-toast-c2:var(--kds-paleta-ambar-oscuro,#C4960A);
    --kds-toast-glifo:#212529;
    --kds-toast-tono:var(--kds-aviso,#E8B30E);
    --kds-toast-rotulo:var(--kds-aviso-texto,#334155);
}

@keyframes kdsToastBar {
    from {
        transform:scaleX(1);
    }
    to {
        transform:scaleX(0);
    }
}

@media(prefers-reduced-motion:reduce) {
    .kds-toast {
        transition:opacity .2s;
        animation:none;
    }
}

/* En un teléfono el aviso ocupa el ancho con un margen: con su ancho mínimo de 348px se salía
   de la pantalla por la izquierda en uno de 360 (#907, tienda). */
@media (max-width: 480px) {
    .kds-toaster {
        top: .75rem;
        left: .75rem;
        right: .75rem;
        max-width: none;
    }
    .kds-toast {
        min-width: 0;
    }
}

/* Detalle y acción opcionales (#1022): KdsToast.show(texto, tipo, ms, { eyebrow, detail, action: { label, href | onClick } }).
   Para avisos que llevan a algún lado, como "Nuevo pedido · Ver". El aviso se cierra al usar la acción. */
.kds-toast__detail {
    margin-top:.2rem;
    font-size:.82rem;
    color:var(--ds-text-muted,#606060);
    line-height:1.35;
}

.kds-toast__action {
    display:inline-block;
    margin-top:.45rem;
    padding:0;
    border:0;
    background:none;
    font:inherit;
    font-size:.82rem;
    font-weight:700;
    color:var(--kds-enlace,#17786c);
    text-decoration:none;
    cursor:pointer;
}

.kds-toast__action:hover {
    text-decoration:underline;
}