/*
 * Archivo CSS para el diseño y comportamiento de las ventanas modales de The Julgebass Project.
 * Contiene estilos para el overlay, el contenedor de la modal, y sus elementos internos.
 */

/*
 * Coherencia de Fuente y Reseteo Básico:
 * Asegura que 'html' y 'body' ocupen toda la altura para 'position: fixed' y un reseteo de márgenes/paddings.
 * La fuente 'Comfortaa' se aplica globalmente al body. Idealmente, esta regla también debería estar en tu 'style.css'
 * para todo el sitio si 'Comfortaa' es la fuente principal.
 */
html, body {
    height: 100%; /* Fundamental para que position: fixed funcione bien en todo el viewport */
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Comfortaa', sans-serif;
}

/* --- Estilos para el Overlay (fondo oscuro detrás de la modal) --- */
.modal-overlay {
    position: fixed; /* Fija el overlay en la ventana del navegador */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro semitransparente */

    /* Centrado de la modal: Usa Flexbox para alinear el contenido al centro */
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;    /* Centra verticalmente */

    opacity: 0;             /* Inicialmente transparente */
    visibility: hidden;     /* Inicialmente oculto y no interactuable */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Transición suave para aparecer/desaparecer */
    z-index: 9999;          /* ¡MUY IMPORTANTE! Asegura que esté por encima de casi todo el contenido de la página */
}

/* Estado activo del overlay (cuando la modal está abierta) */
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* --- Estilos para el Contenedor de la Modal en sí --- */
.modal-container {
    background-color: #fff; /* Fondo blanco para el contenido de la modal */
    padding: 30px; /* Espacio interno alrededor del contenido. Considera reducirlo en el body si se duplica. */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Sombra para dar profundidad */
    max-width: 600px; /* Ancho máximo para la modal en pantallas grandes */
    width: 90%;      /* Ancho responsivo: 90% del viewport hasta el max-width */

    /* ¡CAMBIO CLAVE AQUÍ! Usamos Flexbox para organizar header, body y actions */
    display: flex;
    flex-direction: column; /* Apila los elementos hijos verticalmente */
    max-height: 90vh; /* Altura máxima de la modal (90% del viewport height) */
    /* ¡ELIMINADO! overflow-y: auto; YA NO VA AQUÍ, AHORA VA EN .modal-body */

    /* Animación de entrada/salida (inicialmente desliza hacia arriba y se desvanece) */
    transform: translateY(-50px); /* Posición inicial: 50px por encima de su lugar final */
    opacity: 0;                   /* Estado inicial: invisible */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Transición para la animación */

    z-index: 10000; /* ¡MUY IMPORTANTE! Por encima del overlay (9999) */

    /* Coherencia de Fuente: Asegura que todo dentro de la modal use Comfortaa */
    font-family: 'Comfortaa', sans-serif;
    color: #333; /* Color de texto general para la modal */
}

/* Estado activo del contenedor de la modal (cuando está abierta) */
.modal-container.active {
    opacity: 1;             /* Estado final: visible */
    transform: translateY(0); /* Estado final: en su posición normal */
}

/* --- Estilos para el Encabezado de la Modal (fijo) --- */
.modal-header {
    display: flex;
    justify-content: space-between; /* Espacia el título y el botón de cierre */
    align-items: center;
    padding-bottom: 10px; /* Espacio debajo del contenido del header */
    margin-bottom: 20px; /* Espacio entre el header y el body */
    border-bottom: 1px solid #eee; /* Línea divisoria sutil */
    
    /* Asegura que el header no haga scroll con el body */
    flex-shrink: 0; /* Previene que el header se encoja */
}

.modal-header h2 {
    margin: 0;
    font-size: 1.8em;
    color: #333;
}

/* Botón de cierre (la 'x') */
.modal-header .close-button {
    background: none; /* Sin fondo */
    border: none;     /* Sin borde */
    font-size: 2em;   /* Tamaño grande para la 'x' */
    cursor: pointer;  /* Muestra que es clickeable */
    color: #666;      /* Color del icono */
    transition: color 0.2s ease; /* Efecto al pasar el ratón */
    line-height: 1; /* Asegura que la 'x' se alinee bien */
    padding: 0; /* Elimina padding por defecto que puede mover el icono */
}

.modal-header .close-button:hover {
    color: #000; /* Color más oscuro al pasar el ratón */
}

/* --- Estilos para el Cuerpo de la Modal (contenido principal, AHORA SCROLLABLE) --- */
.modal-body {
    font-size: 1.1em;
    line-height: 1.6; /* Espacio entre líneas para legibilidad */
    color: #555;
    
    /* ¡CAMBIO CLAVE AQUÍ! Permite que el body crezca y tenga scroll interno */
    flex-grow: 1; /* Permite que el cuerpo crezca y ocupe el espacio disponible */
    overflow-y: auto; /* ¡AÑADIDO AQUÍ! Activa el scroll vertical solo en el cuerpo */
    padding-right: 15px; /* Opcional: añade espacio para que el contenido no pegue con la barra de scroll */
    /* Puedes ajustar el padding-bottom para el espacio antes del footer si es necesario, pero margin-top en modal-actions suele ser suficiente */
}

.modal-body p {
    margin-bottom: 15px; /* Espacio entre párrafos */
}

.modal-body ul {
    list-style-type: disc; /* Vuelven las viñetas */
    margin-left: 20px;
    margin-bottom: 15px;
}

.modal-body li {
    margin-bottom: 5px;
}

/* Enlaces dentro del cuerpo de la modal */
.modal-body a {
    color: #007bff; /* Un azul común para enlaces */
    text-decoration: underline;
    transition: color 0.2s ease;
}

.modal-body a:hover {
    color: #0056b3;
}

/* Contenedor para agrupar los botones de acción (ej. Entendido, Aceptar) (fijo) --- */
.modal-actions {
    display: flex;
    justify-content: flex-end; /* Alinea los botones a la derecha */
    gap: 10px; /* Espacio entre botones */
    margin-top: 25px; /* Espacio superior */
    padding-top: 15px; /* Espacio por encima de los botones */
    border-top: 1px solid #eee; /* Línea divisoria sutil */
    
    /* Asegura que las acciones no hagan scroll con el body */
    flex-shrink: 0; /* Previene que la sección de acciones se encoja */
}

/* Estilos básicos para los botones dentro de la modal */
/* Nota: Se mantiene .modal-body .btn para especificidad, aunque se podría usar solo .btn si son únicos */
.modal-body .btn {
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500; /* Ajuste de peso de la fuente Comfortaa */
    text-align: center;
}

.modal-body .btn-primary {
    background-color: #007bff; /* Color principal (azul Bootstrap) */
    color: #fff;
    border: 1px solid #007bff;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.modal-body .btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.modal-body .btn-secondary {
    background-color: #6c757d; /* Color secundario (gris Bootstrap) */
    color: #fff;
    border: 1px solid #6c757d;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.modal-body .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

/*
 * MEDIA QUERIES (Ajustes para responsividad en pantallas pequeñas)
 */
@media (max-width: 768px) {
    .modal-container {
        width: 95%; /* Un poco más de ancho en móviles para aprovechar el espacio */
        padding: 20px; /* Reducir padding en móviles */
    }

    .modal-header {
        margin-bottom: 15px; /* Ajuste de espacio */
    }

    .modal-header h2 {
        font-size: 1.5em; /* Títulos más pequeños en móviles */
    }

    .modal-header .close-button {
        font-size: 1.8em;
    }

    .modal-body {
        font-size: 1em; /* Texto ligeramente más pequeño para adaptarse */
    }

    .modal-actions {
        flex-direction: column; /* Apila los botones verticalmente */
        align-items: stretch; /* Estira los botones a todo el ancho */
        margin-top: 15px; /* Ajuste de espacio */
    }

    .modal-body .btn {
        width: 100%; /* Botones de ancho completo */
        margin-bottom: 10px; /* Espacio entre botones apilados */
    }
    /* Elimina el margen inferior del último botón para evitar espacio extra */
    .modal-body .btn:last-child {
        margin-bottom: 0;
    }
}