/* ====================================================
VARIABLES PALETA DE COLORES
=======================================================*/
:root {
    /* Paleta de colores extraída de tu imagen */
    --naranja-fuerte: #df482b;
    --salmon: #e17f64;
    --azul-oscuro: #3465a3;
    --azul-claro: #6486b3;
    --beige-fondo: #c7d0b5; /* Lo usaremos suavemente o como base */
    --carbon:  #333333;
    
    --blanco: #ffffff;
    --gris-texto: #333333;
}

/* ====================================================
ESTILOS CRUCIALES PARA EL CUADRO DE ALERTA PERSONALIZADO
=======================================================*/
/* EL FONDO OSCURO FLOTANTE */
.custom-alert-overlay {
    position: fixed !important; /* Lo hace flotar sobre la pantalla */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: var(--blanco) !important;
    z-index: 1000 !important; /* Asegura que esté por encima del header y el resto */
    
    /* Centra la caja blanca en el medio de la pantalla */
    display: none; 
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* LA CLASE QUE JS USA PARA HACERLO VISIBLE */
.custom-alert-overlay.mostrar {
    display: flex !important; /* Forza a que se muestre como Flexbox para centrar */
}

/* LA CAJA BLANCA DE LA ALERTA */
.custom-alert-container {
    background-color: var(--blanco) !important;
    border: 1px solid var(--azul-oscuro) !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 460px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4) !important;
    overflow: hidden !important;
}
/* 1. TÍTULO SOBRE UNA BANDA AZUL CLARO */
.custom-alert-header {
    background-color: var(--azul-claro) !important; /* Azul claro de tu paleta */
    padding: 15px 20px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}
.custom-alert-header h2 {
    color: var(--blanco) !important; /* Texto blanco para contraste */
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    margin: 0 !important;
    text-align: left !important;
}

/* 2 y 3. LOGO A LA IZQUIERDA Y MENSAJE A LA DERECHA CENTRADO VERTICALMENTE */
.custom-alert-body {
    display: flex !important;
    flex-direction: row !important;    /* Fuerza fila: uno al lado del otro */
    align-items: center !important;    /* Centrado vertical perfecto */
    padding: 25px 20px !important;
    gap: 20px !important;              /* Separación entre logo y texto */
    background-color: var(--blanco) !important;
}

/* Contenedor del Logo (Izquierda) */
.custom-alert-icon-container {
    width: 85px !important;   
    height: auto !important;         /* Ancho fijo para que no se deforme */
    flex-shrink: 0 !important;         /* Evita que el texto aplaste la imagen */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.custom-alert-icon-container img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Contenedor del Mensaje (Derecha) */
#custom-alert-message {
    flex: 1 !important;
    color: var(--carbon) !important;
    font-size: 1.2rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    text-align: center !important;
}

/* 4. BOTÓN CERRAR CENTRADO EN EL CENTRO */
.custom-alert-footer {
    padding: 0 20px 25px 20px !important;
    text-align: center !important;    /* Centra el contenido horizontalmente */
    background-color: var(--blanco) !important;
    display: flex !important;
    justify-content: center !important; /* Asegura el centrado en layouts flex */
}

#custom-alert-close {
    background-color: #3465a3 !important; /* Azul oscuro corporativo */
    color: var(--blanco) !important;
    border: none !important;
    padding: 10px 45px !important;     /* Botón estilizado y ancho */
    border-radius: 6px !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}
#custom-alert-close:hover {
    background-color: var(--naranja-fuerte) !important; /* Cambio a naranja al pasar el mouse */
}