/* =========================================
   SISTEMA DE NOTIFICACIONES & MODALES 120BEAT
   Estilo: Neon Pulse (Notificaciones) + Dashboard UI (Modales)
   ========================================= */

/* ------------------------------------------------------
   SECCIÓN A: NOTIFICACIONES FLOTANTES (SMART TOASTS)
   ------------------------------------------------------ */

/* Contenedor (Opcional, pero recomendado para apilar) */
.toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2147483647; /* Z-Index Máximo Seguro */
    width: 95%;
    max-width: 400px;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* La Tarjeta de Notificación */
.smart-toast {
    /* Posicionamiento Fijo de respaldo */
    position: fixed;
    top: 20px;
    /* ✅ FIX MOBILE: Respetar el Notch/Isla Dinámica del iPhone */
    top: max(20px, env(safe-area-inset-top));
    
    left: 50%;
    /* El transform inicial se sobreescribe por la animación, pero lo dejamos por si acaso */
    transform: translateX(-50%);
    
    /* ✅ FIX Z-INDEX: Valor máximo posible en navegadores de 32-bit */
    z-index: 2147483647;
    
    /* Dimensiones */
    width: 90%;
    max-width: 380px;
    
    /* ✅ FIX BOX-SIZING: Evita que el padding rompa el ancho en móviles */
    box-sizing: border-box;
    
    /* Estética Visual Premium */
    background: #121214; /* Fondo sólido oscuro */
    border-radius: 12px;
    padding: 16px;
    
    /* Flexbox para alineación */
    display: flex;
    align-items: flex-start;
    gap: 16px;
    
    /* Sombra de Elevación */
    box-shadow: 0 15px 40px rgba(0,0,0,0.9); /* Sombra más fuerte para contraste */
    
    /* Animación de Entrada AUTOMÁTICA */
    animation: slideDownFade 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    
    font-family: 'Inter', sans-serif;
    color: white;
    pointer-events: auto;
}

/* Animaciones de Entrada/Salida */
@keyframes slideDownFade {
    0% { opacity: 0; transform: translate(-50%, -30px) scale(0.95); }
    100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes fadeOutUp { 
    0% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -20px) scale(0.9); }
}

/* Animaciones de Neón (Latido del Borde) */
@keyframes redPulseBorder {
    0% { border-color: rgba(220, 38, 38, 0.5); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
    50% { border-color: rgba(220, 38, 38, 1); box-shadow: 0 0 15px rgba(220, 38, 38, 0.3); }
    100% { border-color: rgba(220, 38, 38, 0.5); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

@keyframes goldPulseBorder {
    0% { border-color: rgba(255, 215, 0, 0.5); box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
    50% { border-color: rgba(255, 215, 0, 1); box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); }
    100% { border-color: rgba(255, 215, 0, 0.5); box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

/* Estados (Colores) */
.smart-toast.rejected {
    border: 1px solid #dc2626;
    border-left: 4px solid #dc2626;
    animation: slideDownFade 0.5s ease forwards, redPulseBorder 2s infinite;
}

.smart-toast.accepted {
    border: 1px solid #FFD700;
    border-left: 4px solid #FFD700;
    animation: slideDownFade 0.5s ease forwards, goldPulseBorder 2s infinite;
}

/* Elementos Internos */
.smart-toast .icon {
    font-size: 24px;
    line-height: 1;
    padding-top: 2px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.toast-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.smart-toast.rejected .toast-title { color: #ff4d4d; }
.smart-toast.accepted .toast-title { color: #FFD700; }

.toast-msg {
    font-size: 13px;
    line-height: 1.4;
    color: #e0e0e0;
}

.toast-sub {
    margin-top: 6px;
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: 4px;
    width: fit-content;
    border-left: 2px solid #666;
}

.toast-close {
    background: transparent;
    border: none;
    color: #666;
    font-size: 20px;
    cursor: pointer;
    padding: 0 0 0 8px;
    line-height: 1;
    align-self: flex-start;
}


/* ------------------------------------------------------
   SECCIÓN B: MODAL DE RECHAZO (DJ DASHBOARD)
   ------------------------------------------------------ */

.rejection-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9); /* Fondo más oscuro para resaltar el modal */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 9999;
    display: none; /* Oculto por defecto */
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.rejection-modal-overlay.active {
    display: flex;
}

.rejection-modal-content {
    background: #1a1a1a; /* Fondo plano Onyx */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px; /* Bordes menos redondeados, más tech */
    padding: 32px;
    width: 90%;
    max-width: 600px; /* AUMENTADO: Más ancho para dar aire a los botones grandes */
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
    text-align: center;
}

.rejection-modal-content h3 {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.6em; /* AUMENTADO: Título más grande */
    letter-spacing: -0.5px;
}

/* Subtítulo del modal */
.rejection-subtitle {
    color: #b0b0b0;
    font-size: 1.1rem; /* AUMENTADO: Mucho más legible que 0.9em */
    margin-bottom: 24px;
    line-height: 1.5;
}

.rejection-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas para botones grandes */
    gap: 16px; /* Más espacio entre botones */
    margin: 24px 0;
}

/* --- NUEVO ESTILO "MINIMAL TECH" --- */
.btn-reject-reason {
    background: transparent; /* Ghost Button */
    border: 1px solid #333;
    color: #888; /* Texto gris en reposo */
    padding: 24px 16px; /* AUMENTADO: Botones más altos y clicables */
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-reject-reason:hover {
    background: rgba(255, 215, 0, 0.05); /* Sutil tinte dorado */
    border-color: #FFD700; /* Borde Dorado */
    color: #fff; /* Texto Blanco */
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.btn-reject-reason:active {
    transform: scale(0.98);
    background: rgba(255, 215, 0, 0.1);
    border-color: #b39700;
}

/* Estilos para los iconos SVG */
.btn-reject-reason .icon-svg {
    width: 34px; /* AUMENTADO: Iconos más grandes y visibles */
    height: 34px;
    stroke: currentColor; /* Hereda el color del texto (gris -> blanco/dorado) */
    stroke-width: 1.5;
    fill: none;
    transition: stroke 0.2s ease;
}

/* Texto del botón */
.btn-reject-reason .label { 
    font-size: 0.9rem; /* AUMENTADO: De 0.75em a 0.9rem (~14px) */
    font-weight: 600; 
    text-transform: uppercase; /* Estilo Tech */
    letter-spacing: 1px;
}

.btn-modal-cancel {
    background: transparent;
    border: none;
    color: #666;
    padding: 12px;
    cursor: pointer;
    font-size: 0.95em; /* Ligeramente más grande */
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.2s;
    margin-top: 16px;
}

.btn-modal-cancel:hover {
    color: #fff;
}

/* Animaciones Utilitarias */
@keyframes fadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }

/* Responsive Móvil */
@media (max-width: 480px) {
    .smart-toast {
        width: 95%; /* Un poco más ancho en móvil */
        
        /* ✅ FIX MOBILE: Aseguramos que baje lo suficiente en pantallas pequeñas */
        top: max(16px, env(safe-area-inset-top)); 
        
        padding: 14px;
        box-sizing: border-box; /* Re-aseguramos */
    }
    
    .toast-title { font-size: 13px; }
    .toast-msg { font-size: 12px; }
    
    .rejection-modal-content {
        padding: 20px;
        width: 95%;
    }
    .rejection-grid {
        gap: 8px;
        grid-template-columns: repeat(2, 1fr); /* Mantener 2 columnas incluso en móvil para ahorrar espacio vertical */
    }
    .btn-reject-reason {
        padding: 16px 8px;
    }
}