/* ==========================================================================
   Brasender Toast — Sistema unificado estilo pill flotante top-center
   --------------------------------------------------------------------------
   Pill compacto centrado arriba, fondo dark con backdrop-blur, icono
   coloreado según tipo. Animación spring scale+fade.

   El target principal es `.island-toast`. El sistema también overridea
   los selectores legacy `.notification`, `.notification-item`, `.toast`
   (Bootstrap) para que cualquier función JS existente que use esos
   selectores renderee con la misma estética unificada.

   Cargar este archivo en cualquier base que necesite toasts. Lo trae
   el partial `templates/includes/_toast_styles.html`.
   ========================================================================== */

:root {
    /* Forma */
    --toast-bg:          rgba(28, 28, 30, .94);
    --toast-color:       #fff;
    --toast-radius:      100px;      /* pill */
    --toast-padding:     11px 18px;
    --toast-shadow:      0 12px 36px rgba(0, 0, 0, .30),
                         0 0 0 1px rgba(255, 255, 255, .06) inset;
    --toast-blur:        blur(20px) saturate(180%);
    --toast-gap:         10px;
    --toast-font-size:   14px;
    --toast-font-weight: 500;
    --toast-icon-size:   16px;
    --toast-max-width:   min(92vw, 480px);

    /* Posición.
       Sumamos `env(safe-area-inset-top)` para que en PWA standalone
       iOS los toasts no queden bajo la Dynamic Island / notch — en
       navegador normal env() resuelve a 0 y el comportamiento es el
       mismo de antes. */
    --toast-top:         calc(12px + env(safe-area-inset-top));
    --z-toast:           1090;       /* canónico — siempre sobre modales */

    /* Stack */
    --toast-stack-gap:   8px;

    /* Color del icono según tipo (el fondo se queda dark, solo cambia
       el ícono coloreado por estado) */
    --toast-success-icon: #34d399;   /* verde mint */
    --toast-error-icon:   #f87171;   /* rojo claro */
    --toast-warning-icon: #fbbf24;   /* ámbar */
    --toast-info-icon:    #60a5fa;   /* azul cielo */

    /* Animación */
    --toast-enter-duration: .42s;
    --toast-exit-duration:  .28s;
    --toast-enter-easing:   cubic-bezier(.34, 1.56, .64, 1); /* spring */
    --toast-exit-easing:    cubic-bezier(.4, 0, .2, 1);

    /* Duración default (JS la lee si quiere — el sistema lo respeta) */
    --toast-duration:    5000ms;
}


/* =============================================================================
   Container — wrapper top-center que aloja todos los toasts del momento
   ========================================================================== */

.island-container {
    position: fixed;
    top: var(--toast-top);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--toast-stack-gap);
    pointer-events: none;
    width: max-content;
    max-width: var(--toast-max-width);
}


/* =============================================================================
   .island-toast — clase nueva canónica (target principal)
   --------------------------------------------------------------------------
   La función showNotification idealmente agrega esta clase. Pero los
   sistemas legacy (.notification, .toast) también se ven igual gracias
   al override más abajo.
   ========================================================================== */

.island-toast {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--toast-gap);
    max-width: 100%;
    padding: var(--toast-padding);
    border-radius: var(--toast-radius);
    background: var(--toast-bg);
    color: var(--toast-color);
    font-size: var(--toast-font-size);
    font-weight: var(--toast-font-weight);
    line-height: 1.35;
    box-shadow: var(--toast-shadow);
    backdrop-filter: var(--toast-blur);
    -webkit-backdrop-filter: var(--toast-blur);
    cursor: pointer;
    user-select: none;
    will-change: transform, opacity;
    transform-origin: top center;
    opacity: 0;
    transform: scale(.5) translateY(-12px);
    transition:
        transform var(--toast-enter-duration) var(--toast-enter-easing),
        opacity var(--toast-exit-duration) ease-out;
}

.island-toast.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.island-toast.is-leaving {
    opacity: 0;
    transform: scale(.5) translateY(-12px);
    transition:
        transform var(--toast-exit-duration) var(--toast-exit-easing),
        opacity .2s ease-in;
}

/* Color del icono por tipo. El fondo del pill se queda dark; solo
   cambia el color del ícono que va al inicio del toast. */
.island-toast-success .island-toast-icon { color: var(--toast-success-icon); }
.island-toast-error   .island-toast-icon { color: var(--toast-error-icon); }
.island-toast-warning .island-toast-icon { color: var(--toast-warning-icon); }
.island-toast-info    .island-toast-icon { color: var(--toast-info-icon); }

.island-toast-icon {
    flex-shrink: 0;
    font-size: var(--toast-icon-size);
    line-height: 1;
}

.island-toast-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Si el mensaje es largo, permitir wrap (max 3 líneas con ellipsis). */
.island-toast.is-multiline .island-toast-text {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}


/* =============================================================================
   Mobile — padding y font ligeramente reducidos
   ========================================================================== */

@media (max-width: 480px) {
    .island-container {
        top: calc(10px + env(safe-area-inset-top));
        max-width: calc(100vw - 24px);
    }
    .island-toast {
        padding: 10px 16px;
        font-size: 13px;
    }
    .island-toast-icon {
        font-size: 15px;
    }
}


/* =============================================================================
   Reduce motion — anular spring para usuarios con esa preferencia
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .island-toast,
    .island-toast.is-leaving {
        transition: opacity .15s linear;
        transform: none !important;
    }
}


/* =============================================================================
   OVERRIDE DE SELECTORES LEGACY
   --------------------------------------------------------------------------
   Las funciones JS existentes (showNotification, showToast, etc.) ya agregan
   al toast clases como `.notification`, `.notification-item`, `.toast`
   (Bootstrap). Acá overrideamos esos selectores para que se vean idénticos
   a `.island-toast` SIN tocar las funciones JS.

   Verificado con grep que esas clases NO se usan en templates fuera del
   sistema de toasts (el bell del header y el dropdown usan otras clases
   con prefijo `.notification-bell` o `.notifications-dropdown`).
   ========================================================================== */

/* Container legacy: forzar posición top-center (algunos sistemas crearon
   containers propios con `.notification-container` o `.notifications-container`
   en posición top-right). */
.notification-container,
.notifications-container,
.toast-container {
    position: fixed !important;
    top: var(--toast-top) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: var(--z-toast) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--toast-stack-gap) !important;
    pointer-events: none !important;
    width: max-content !important;
    max-width: var(--toast-max-width) !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Toast legacy individual: anular estilos viejos y aplicar pill island.
   Aplicamos a `.notification` (sistema A, B, D), `.notification-item`
   (sistema messages.html), `.toast` (Bootstrap, sistemas C, E). */
.notification,
.notification-item,
.toast {
    pointer-events: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--toast-gap) !important;
    max-width: 100% !important;
    width: auto !important;
    padding: var(--toast-padding) !important;
    margin: 0 !important;
    border-radius: var(--toast-radius) !important;
    border: 0 !important;
    background: var(--toast-bg) !important;
    color: var(--toast-color) !important;
    font-size: var(--toast-font-size) !important;
    font-weight: var(--toast-font-weight) !important;
    line-height: 1.35 !important;
    box-shadow: var(--toast-shadow) !important;
    backdrop-filter: var(--toast-blur) !important;
    -webkit-backdrop-filter: var(--toast-blur) !important;
    cursor: pointer;
    transform-origin: top center;
}

/* Estado inicial + entrada animada (cuando JS lo crea en DOM) */
.notification:not(.hiding):not(.dismissing),
.notification-item:not(.hiding):not(.dismissing),
.toast.showing,
.toast.show {
    animation: islandAppear var(--toast-enter-duration) var(--toast-enter-easing) both;
}

.notification.hiding,
.notification-item.hiding,
.notification-item.dismissing,
.toast.hide,
.toast:not(.show) {
    animation: islandDisappear var(--toast-exit-duration) var(--toast-exit-easing) both;
}

@keyframes islandAppear {
    from { opacity: 0; transform: scale(.5) translateY(-12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes islandDisappear {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to   { opacity: 0; transform: scale(.5) translateY(-12px); }
}

/* Estructura interna del toast legacy — aplanar margenes/padding internos
   que se desbordan del pill compacto. */
.notification > *,
.notification-item > *,
.toast > * {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.notification-content,
.notification-item .notification-content,
.toast-body,
.toast .d-flex {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--toast-gap) !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--toast-color) !important;
    background: transparent !important;
}

/* Icono dentro del toast legacy: aplicar tamaño + color por tipo */
.notification i,
.notification-icon,
.notification-icon i,
.notification-item i,
.toast i {
    flex-shrink: 0;
    font-size: var(--toast-icon-size) !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: inline-block !important;
}

/* Color del icono según tipo legacy (clase del padre) */
.notification.success i, .notification-success i,
.notification.success .notification-icon, .notification-success .notification-icon,
.toast.bg-success i {
    color: var(--toast-success-icon) !important;
}
.notification.error i, .notification-error i, .notification-danger i,
.notification.error .notification-icon, .notification-error .notification-icon, .notification-danger .notification-icon,
.toast.bg-danger i, .toast.bg-error i {
    color: var(--toast-error-icon) !important;
}
.notification.warning i, .notification-warning i,
.notification.warning .notification-icon, .notification-warning .notification-icon,
.toast.bg-warning i {
    color: var(--toast-warning-icon) !important;
}
.notification.info i, .notification-info i,
.notification.info .notification-icon, .notification-info .notification-icon,
.toast.bg-info i, .toast.bg-primary i {
    color: var(--toast-info-icon) !important;
}

/* Texto del mensaje legacy */
.notification span,
.notification-message,
.notification-item .notification-message,
.toast-body span {
    color: var(--toast-color) !important;
    font-size: var(--toast-font-size) !important;
    font-weight: var(--toast-font-weight) !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}

/* Botón cerrar legacy — invisible/colapsado (el click sobre el pill cierra) */
.notification-close,
.notification-item .notification-close,
.toast .btn-close,
.toast button[data-bs-dismiss] {
    background: transparent !important;
    border: 0 !important;
    color: rgba(255, 255, 255, .7) !important;
    width: auto !important;
    height: auto !important;
    padding: 0 0 0 4px !important;
    margin: 0 !important;
    font-size: 14px !important;
    cursor: pointer;
    filter: none !important;
    box-shadow: none !important;
    opacity: .7;
}
.notification-close:hover,
.notification-item .notification-close:hover,
.toast .btn-close:hover,
.toast button[data-bs-dismiss]:hover {
    opacity: 1;
}

/* Progress bar del sistema B (messages.html): oculta — el pill no usa
   barra de progreso visual, el auto-dismiss es invisible. */
.notification-progress {
    display: none !important;
}

/* Forzar tamaño pequeño del Bootstrap btn-close (estaba diseñado para
   modal grande) */
.toast .btn-close {
    background-image: none !important;
}
.toast .btn-close::before {
    content: '×';
    font-size: 18px;
    line-height: 1;
}

/* En modo PWA standalone iOS, la Dynamic Island es físicamente más
   alta que la status bar plana. Aunque `safe-area-inset-top` ya da
   el inset correcto, sumamos respiro extra para que el toast no quede
   visualmente pegado al pill flotante. Solo aplica cuando la app
   corre como PWA (no toca el navegador normal). */
@media (display-mode: standalone) {
    :root {
        --toast-top: calc(20px + env(safe-area-inset-top));
    }
    .island-container {
        top: calc(20px + env(safe-area-inset-top));
    }
}