/* * IllanWeb Core Alerts System
 * Prefijo estricto: illan-alerts-
 * Ubicación: modules/alerts/assets/css/
 */
:root {
    /* Z-Index sigue siendo alto por seguridad, aunque Top Layer gana siempre */
    --illan-alerts-z-index: 2147483647;
    
    --illan-alerts-bg: var(--color-surface, #ffffff);
    --illan-alerts-text: var(--color-text, #2d2d2d);
    --illan-alerts-border: var(--color-border, #e5e5e5);
    --illan-alerts-color-success: #10b981;
    --illan-alerts-color-error: #ef4444;
    --illan-alerts-color-info: #3b82f6;
}

/* --- TOASTS (Notificaciones via Popover API) --- */
#illan-alerts-feed {
    /* Posicionamiento Fijo Estricto */
    position: fixed;
    
    /* CORRECCIÓN: Orden de coordenadas
       Eliminamos 'inset: auto' que estaba reseteando la posición.
       Forzamos derecha y arriba explícitamente. */
    top: 20px;
    right: 20px;
    bottom: auto;
    left: auto;
    
    z-index: var(--illan-alerts-z-index);
    
    /* Layout */
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* Clics traspasan el contenedor vacío */

    /* RESET POPOVER (Vital para evitar estilos nativos del navegador) */
    background: transparent;
    border: none;
    padding: 0;
    margin: 0; /* Vital: anula el 'margin: auto' que centra los popovers */
    width: auto;
    height: auto;
    overflow: visible;
}

/* El backdrop del popover debe ser invisible */
#illan-alerts-feed::backdrop {
    background: transparent;
}

.illan-alerts-toast {
    position: relative !important; 
    pointer-events: auto; /* Reactivar clics en las tarjetas */
    background: var(--illan-alerts-bg);
    color: var(--illan-alerts-text);
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border: 1px solid var(--illan-alerts-border);
    border-left: 4px solid var(--illan-alerts-color-info);
    min-width: 280px;
    max-width: 400px;
    font-size: 0.95rem;
    animation: illanAlertsSlideIn 0.3s ease forwards;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: inherit;
}

.illan-alerts-toast.illan-alerts-success { border-left-color: var(--illan-alerts-color-success); }
.illan-alerts-toast.illan-alerts-error { border-left-color: var(--illan-alerts-color-error); }
.illan-alerts-toast.illan-alerts-hiding { animation: illanAlertsSlideOut 0.3s ease forwards; }

@keyframes illanAlertsSlideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes illanAlertsSlideOut { to { opacity: 0; transform: translateX(20px); } }

/* --- MODALES NATIVOS (<dialog>) --- */

.illan-alerts-modal-native {
    border: none;
    background: transparent;
    padding: 0;
    margin: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    color: inherit;
}

.illan-alerts-modal-native::backdrop {
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    animation: illanAlertsFadeIn 0.2s forwards;
}

.illan-alerts-modal-card {
    background: var(--illan-alerts-bg);
    width: 90vw;
    max-width: 420px;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    animation: illanAlertsPopUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    border: 1px solid var(--illan-alerts-border);
}

.illan-alerts-modal-title { margin: 0 0 10px 0; font-size: 1.25rem; font-weight: 700; color: var(--illan-alerts-text); }
.illan-alerts-modal-text { margin-bottom: 25px; color: #666; line-height: 1.5; }

.illan-alerts-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

.illan-alerts-btn { border: none; padding: 8px 16px; border-radius: 6px; font-weight: 500; cursor: pointer; transition: opacity 0.2s; font-family: inherit; }
.illan-alerts-btn:hover { opacity: 0.8; }

.illan-alerts-btn-cancel { background: transparent; border: 1px solid var(--illan-alerts-border); color: #666; }
.illan-alerts-btn-confirm { background: var(--color-text, #000); color: #fff; }

/* Animaciones de Salida */
.illan-alerts-modal-native.closing::backdrop { animation: illanAlertsFadeOut 0.2s forwards; }
.illan-alerts-modal-native.closing .illan-alerts-modal-card { animation: illanAlertsPopDown 0.2s forwards; }

@keyframes illanAlertsFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes illanAlertsFadeOut { to { opacity: 0; } }
@keyframes illanAlertsPopUp { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes illanAlertsPopDown { to { transform: scale(0.9); opacity: 0; } }