/* --- ESTILOS GENERALES Y VARIABLES --- */
:root {
    /* Variables de color (se asume que se establecen dinámicamente en el header o PHP) */
    --primary-color: #5cb85c; /* Verde por defecto */
    --secondary-color: #333333; /* Gris oscuro por defecto */
    --text-color: #333333;
    --background-color: #f4f4f4;
    --card-background-color: #ffffff;
    --link-color: #1a0dab;
    --header-text-color: #ffffff;
    /* --header-bg-url: url('../path/to/default/header.jpg'); */ /* URL de fondo de cabecera */
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    background-color: var(--background-color); 
    color: var(--text-color); 
}
main a {
    color: var(--link-color);
    text-decoration: underline;
}
main a:hover { text-decoration: none; }
main a.btn { color: #fff; text-decoration: none; }

/* --- CABECERA Y NAVEGACIÓN --- */
header {
    /* Usamos la variable --header-bg-url si está definida, sino solo el color secundario */
    background-image: var(--header-bg-url);
    background-color: var(--secondary-color);
    background-size: cover;
    background-position: center;
    color: var(--header-text-color);
    padding: 2rem 10%;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
header a { color: var(--header-text-color); text-decoration: none; }
header .logo { margin-bottom: 20px; }
header nav ul { list-style: none; padding: 10px; margin: 0; text-align: right; background-color: rgba(0, 0, 0, 0.4); border-radius: 5px; }
header nav ul li { display: inline; margin-left: 20px; }

/* --- CONTENEDORES GENERALES --- */
.container { 
    width: 90%; /* Ajustado para mejor uso con el sidebar */
    max-width: 1200px;
    margin: auto; 
    overflow: hidden; 
    padding: 20px 0; 
}
.area-card, .curso-card, form, .documentos-requeridos-container, .curso-detalle-container {
    background: var(--card-background-color);
}

/* --- ÁREAS, CURSOS Y TARJETAS --- */
.areas-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; margin-top: 20px; }
.area-card { display: block; text-decoration: none; color: inherit; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
.area-card:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); }
.area-card-image { height: 180px; background-size: cover; background-position: center; }
.area-card-content { padding: 20px; }
.area-card-content h3 { margin-top: 0; font-size: 1.4em; color: var(--text-color); }
.area-card-content p { color: #666; font-size: 0.9em; }
.cursos-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.curso-card { border: 1px solid #ddd; padding: 15px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.curso-card img { max-width: 100%; height: 150px; object-fit: cover; margin-bottom: 10px; }

/* --- FICHA DETALLADA DEL CURSO --- */
.curso-detalle-container { display: flex; flex-wrap: wrap; gap: 30px; padding: 20px; border-radius: 8px; }
.curso-imagen { flex: 1; min-width: 300px; }
.curso-imagen img { width: 100%; height: auto; border-radius: 8px; }
.curso-info { flex: 2; min-width: 300px; }
.curso-area { font-size: 0.9em; color: #888; text-transform: uppercase; margin: 0; }
.curso-info h1 { margin-top: 5px; font-size: 2.2em; }
.curso-descripcion { margin-top: 20px; line-height: 1.7; }
.inscripcion-box { background-color: #f9f9f9; padding: 20px; border-radius: 5px; margin: 20px 0; text-align: center; }
.info-inscrito { font-weight: bold; color: #31708f; background-color: #d9edf7; border: 1px solid #bce8f1; padding: 15px; border-radius: 4px; }

/* Estilo para la duración en la tarjeta del listado */
.curso-card .curso-duracion {
    font-size: 0.9em;
    font-weight: bold;
    color: #666;
    margin: 5px 0 10px 0;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

/* Estilo para la duración en la página de detalle */
.curso-info .info-destacada {
    background-color: #f2f2f2;
    padding: 10px 15px;
    border-radius: 5px;
    margin: 15px 0;
    display: inline-block;
    border-left: 4px solid var(--primary-color);
}

/* Estilo para las nuevas secciones de texto */
.curso-seccion-contenido {
    margin-top: 10px;
    padding-left: 15px;
    border-left: 2px solid #f0f0f0;
    line-height: 1.7;
}

/* --- ESTILOS PARA EL MODAL (POPUP) --- */
.modal-overlay {
    display: none; /* Oculto por defecto, se controla con JS */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
    justify-content: center; /* Centrar horizontalmente si display es flex */
    align-items: center;   /* Centrar verticalmente si display es flex */
}
.modal-content {
    background-color: var(--card-background-color); /* Usamos la variable de fondo de tarjeta */
    margin: auto; /* Para centrar si display no es flex */
    padding: 30px;
    border: 1px solid #888;
    width: 90%;
    max-width: 500px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    text-align: center; /* Centra el texto por defecto, ajustamos elementos internos si es necesario */
}
.modal-close-btn {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.modal-close-btn:hover, .modal-close-btn:focus { color: black; }
.modal-actions { 
    margin-top: 20px; 
    display: flex; 
    justify-content: center; 
    gap: 15px; 
}

/* Estilos específicos para el contenido de la modal de fechas */
.modal-content h3 {
    color: var(--secondary-color); /* Un color que contraste con el fondo */
    margin-bottom: 20px;
}
.modal-content p {
    color: var(--text-color);
    margin-bottom: 25px;
    line-height: 1.5;
}
.modal-content label {
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--text-color);
    text-align: left; /* Override parent text-align: center */
}
.modal-content input[type="date"] {
    width: calc(100% - 22px); /* Ajuste para padding y border, para que no desborde */
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc; /* Consistente con otros inputs */
    border-radius: 4px; /* Consistente con otros inputs */
    box-sizing: border-box; /* Asegura que padding y border se incluyan en el ancho */
}

/* --- BOTONES Y MENSAJES --- */
.btn { display: inline-block; background: var(--primary-color); color: #fff; padding: 8px 12px; text-decoration: none; border-radius: 5px; border: none; cursor: pointer; }
.btn:hover { opacity: 0.9; } /* Añadido hover para todos los botones .btn */
.btn-inscribir { font-size: 1.2em; padding: 15px 30px; }
.btn-secondary { 
    background-color: #6c757d; /* Gris para botones secundarios */
    border-color: #6c757d;
}
.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

button { background: var(--secondary-color); color: #fff; padding: 10px 15px; border: none; cursor: pointer; margin-top: 10px; border-radius: 4px; }
button:hover { opacity: 0.9; }

.error { color: #a94442; background: #f2dede; padding: 10px; border: 1px solid #ebccd1; border-radius: 4px; }
.success { color: #3c763d; background: #dff0d8; padding: 10px; border: 1px solid #d6e9c6; border-radius: 4px; }
.warning { color: #8a6d3b; background: #fcf8e3; padding: 10px; border: 1px solid #faebcc; border-radius: 4px; }


/* --- FORMULARIOS Y TABLAS --- */
form { border: 1px solid #ddd; padding: 20px; border-radius: 8px; background: var(--card-background-color); }
.form-group { margin-bottom: 15px; }
label { display: block; margin-top: 10px; font-weight: bold; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"], input[type="color"], textarea, select { 
    width: 100%; 
    padding: 10px; 
    box-sizing: border-box; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    margin-top: 5px;
}
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
table, th, td { border: 1px solid #ddd; }
th, td { padding: 12px; text-align: left; }
th { background-color: #e9ecef; color: var(--secondary-color); }
td .estado.aprobada { background-color: #dff0d8; color: #3c763d; padding: 5px; border-radius: 3px; }
td .estado.denegada { background-color: #f2dede; color: #a94442; padding: 5px; border-radius: 3px; }
td .estado.pendiente { background-color: #fcf8e3; color: #8a6d3b; padding: 5px; border-radius: 3px; }


/* --- FOOTER --- */
footer { 
    text-align: center; 
    padding: 20px; 
    margin-top: 20px; 
    background: var(--secondary-color); 
    color: var(--header-text-color); 
}
footer a { color: var(--header-text-color); }
.footer-links { margin-bottom: 10px; }


/* ================================================= */
/* --- ESTILOS PARA EL MENÚ LATERAL DE ADMINISTRACIÓN --- */
/* ================================================= */

/* Contenedor principal para el layout de dos columnas */
.admin-dashboard {
    display: flex;
    /* Usamos calc(100vh - altura_header - altura_footer) para que ocupe el espacio restante */
    min-height: calc(100vh - 200px); 
    transition: margin-left 0.3s ease; /* Transición para el contenido si el sidebar es fijo */
}

/* Estilos del Menú Lateral (Sidebar) - Estado Abierto */
.sidebar {
    width: 250px; /* Ancho por defecto (abierto) */
    background-color: var(--secondary-color);
    color: var(--header-text-color);
    padding: 20px 0;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    flex-shrink: 0; 
    transition: width 0.3s ease; /* Transición para el ancho */
    overflow-x: hidden; /* Oculta el texto cuando se encoge */
}

.sidebar h2 {
    color: #fff;
    font-size: 1.1em;
    padding: 0 20px 10px;
    margin-top: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    white-space: nowrap; /* Asegurar que no se rompa la línea */
    transition: opacity 0.3s ease;
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar li {
    margin: 0;
}

.sidebar a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    text-decoration: none;
    color: var(--header-text-color);
    transition: background-color 0.2s, color 0.2s;
    font-size: 0.95em;
}

.sidebar a i {
    margin-right: 10px;
    width: 20px; 
    text-align: center;
}

.sidebar a:hover, .sidebar a.active {
    background-color: var(--primary-color);
    color: #fff;
}

/* Estilos para el Contenido Principal */
.admin-content {
    flex-grow: 1; 
    padding: 20px 30px;
    background-color: var(--background-color);
}

/* Estilos para los separadores en el menú lateral */
.sidebar .separator {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 10px 20px;
}
/* ================================================= */
/* --- ESTILOS PARA EL MENÚ LATERAL DE ADMINISTRACIÓN --- */
/* ================================================= */


/* Estilos para el botón de colapsar */
.sidebar-toggle {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2em;
    cursor: pointer;
    padding: 10px 20px;
    width: 100%;
    text-align: right;
    transition: color 0.2s;
}
.sidebar-toggle:hover {
    color: var(--primary-color);
}

/* Ocultar el texto de bienvenida en el sidebar */
.sidebar .welcome-text {
    padding: 0 20px; 
    font-size: 0.9em; 
    opacity: 0.8;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

/* --- ESTADO COLAPSADO (Añadido al body o al admin-dashboard) --- */

.admin-dashboard.collapsed .sidebar {
    width: 60px; /* Ancho minimizado, solo para iconos */
}

.admin-dashboard.collapsed .sidebar .welcome-text,
.admin-dashboard.collapsed .sidebar h2 {
    opacity: 0; /* Oculta el texto */
    padding: 0;
    height: 0;
    margin: 0;
}

.admin-dashboard.collapsed .sidebar .separator {
    margin: 10px 5px; /* Ajusta el margen del separador */
}

.admin-dashboard.collapsed .sidebar a {
    justify-content: center; /* Centra el icono */
    padding: 12px 0;
}

.admin-dashboard.collapsed .sidebar a i {
    margin: 0; /* Elimina el margen del icono */
}

/* Ocultar el texto del enlace cuando está colapsado */
.admin-dashboard.collapsed .sidebar a span {
    display: none; 
}

/* Ajustar el botón de toggle para que se vea bien en modo colapsado */
.admin-dashboard.collapsed .sidebar .sidebar-toggle {
    text-align: center;
    padding: 10px 0;
}