/* Notificaciones de la tienda (showToast). Abajo al centro, apilables. */
.tt-region {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
    z-index: 100000; display: flex; flex-direction: column; align-items: center; gap: 10px;
    width: min(420px, calc(100vw - 24px)); pointer-events: none;
}
.tt {
    --tt-color: var(--tu-primario, #2095CE);
    --tt-fondo: #e6f4fb;
    position: relative; width: 100%; pointer-events: auto; overflow: hidden;
    display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;
    background: #fff; color: #2b2f33; border-radius: 14px; padding: 12px 12px 14px 14px;
    box-shadow: 0 18px 40px -12px #1b2b3a40, 0 4px 12px #0000000f; border: 1px solid #00000008;
    font-family: 'Wix Madefor Display', system-ui, sans-serif;
    touch-action: pan-y;
    will-change: transform, opacity;
}
.tt.saliendo { pointer-events: none; }
.tt-success { --tt-color: #1e9e62; --tt-fondo: #e8f6ef; }
.tt-danger { --tt-color: #e5384f; --tt-fondo: #fdecef; }
.tt-warning { --tt-color: #d97706; --tt-fondo: #fff4e5; }
.tt-info, .tt-mcd { --tt-color: var(--tu-secundario, #186489); --tt-fondo: #e6f1f6; }
.tt-cart { --tt-color: var(--tu-primario, #2095CE); --tt-fondo: #e6f4fb; }

.tt-icono { width: 40px; height: 40px; border-radius: 12px; background: var(--tt-fondo); color: var(--tt-color); display: flex; align-items: center; justify-content: center; }
.tt-icono svg { width: 20px; height: 20px; }
.tt-cuerpo { min-width: 0; line-height: 1.3; }
.tt-titulo { display: block; font-weight: 700; font-size: .92rem; }
.tt-texto { display: block; font-size: .84rem; color: #667085; margin-top: 1px; }
.tt-acciones { display: flex; align-items: center; gap: 4px; }
.tt-accion {
    font-size: .8rem; font-weight: 700; color: var(--tt-color); background: var(--tt-fondo);
    border-radius: 8px; padding: 7px 10px; white-space: nowrap; text-decoration: none !important; border: 0;
}
.tt-accion:hover { filter: brightness(.96); color: var(--tt-color); }
.tt-cerrar { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: #98a2b3; display: flex; align-items: center; justify-content: center; padding: 0; }
.tt-cerrar:hover { background: #f2f4f7; color: #475467; }
.tt-cerrar svg { width: 16px; height: 16px; }
.tt-progreso { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--tt-color); opacity: .85; transform-origin: left; animation: tt-progreso linear forwards; border-radius: 0 3px 3px 0; }
.tt:hover .tt-progreso, .tt.pausado .tt-progreso { animation-play-state: paused; }

@keyframes tt-progreso { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* En celulares van arriba, debajo del header, para no tapar las barras fijas de compra de abajo */
@media (max-width: 575.98px) {
    .tt-region { top: calc(env(safe-area-inset-top, 0px) + 74px); bottom: auto; flex-direction: column-reverse; }
    .tt { grid-template-columns: 36px 1fr auto; padding: 10px 10px 12px 12px; border-radius: 12px; }
    .tt-icono { width: 36px; height: 36px; border-radius: 10px; }
}
/* Las animaciones de entrada/salida las hace tienda-toast.js (Web Animations) */
.tt-icono svg path { transform-origin: center; }

/* Indicador +N / −N del contador del carrito */
.tu-chip-carrito, .cart-icon-wrapper { overflow: visible; }
.tb-delta {
    position: absolute; left: 50%; top: 100%; pointer-events: none; z-index: 5;
    font: 700 .72rem/1 'Wix Madefor Display', system-ui, sans-serif; padding: 3px 6px; border-radius: 10px;
    color: #fff; background: var(--tu-acento, #00B1F0); box-shadow: 0 4px 10px #00000026; white-space: nowrap;
}
.tb-delta.menos { background: #667085; }
.tu-navbar .cart-badge { transform-origin: center; will-change: transform; }