/* ==========================================================================
   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;
}

.kds-toast {
    display:flex;
    align-items:center;
    gap:.9rem;
    background:var(--ds-surface,#fff);
    border:1px solid var(--ds-border,#e9edf2);
    border-radius:1rem;
    box-shadow:0 1rem 2.5rem rgba(17,24,39,.18),0 2px .375rem rgba(17,24,39,.06);
    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;
}

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

.kds-toast__icon {
    width:2.875rem;
    height:2.875rem;
    border-radius:.875rem;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    flex:0 0 auto;
    font-size:1.25rem;
    background:var(--color-teal,#2EB8A8);
    box-shadow:0 .375rem .9375rem rgba(46,184,168,.4);
}

.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(--color-teal,#2EB8A8);
    line-height:1;
    margin-bottom:.24rem;
}

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

.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(--color-teal,#2EB8A8);
    opacity:.5;
    animation:kdsToastBar linear forwards;
}

.kds-toast.is-success .kds-toast__icon {
    background:var(--color-green,#77b65d);
    box-shadow:0 .375rem .9375rem rgba(119,182,93,.4);
}

.kds-toast.is-success .kds-toast__eyebrow {
    color:var(--color-green,#77b65d);
}

.kds-toast.is-success .kds-toast__bar {
    background:var(--color-green,#77b65d);
}

.kds-toast.is-error .kds-toast__icon {
    background:var(--color-rose,#E6607B);
    box-shadow:0 .375rem .9375rem rgba(230,96,123,.4);
}

.kds-toast.is-error .kds-toast__eyebrow {
    color:var(--color-rose,#E6607B);
}

.kds-toast.is-error .kds-toast__bar {
    background:var(--color-rose,#E6607B);
}

.kds-toast.is-warning .kds-toast__icon {
    background:var(--color-amber,#E8B30E);
    box-shadow:0 .375rem .9375rem rgba(232,179,14,.4);
}

.kds-toast.is-warning .kds-toast__eyebrow {
    color:var(--ds-text-on-warning, #334155);
}

.kds-toast.is-warning .kds-toast__bar {
    background:var(--color-amber,#E8B30E);
}

.kds-toast.is-info .kds-toast__icon {
    background:var(--color-teal,#2EB8A8);
}

.kds-toast.is-info .kds-toast__eyebrow {
    color:var(--color-teal,#2EB8A8);
}

.kds-toast.is-info .kds-toast__bar {
    background:var(--color-teal,#2EB8A8);
}

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

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

/* 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(--color-teal-dark,#1FA090);
    text-decoration:none;
    cursor:pointer;
}

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