/* Variables de color */
:root {
    --color-primario: #1e3a8a; /* Azul oscuro principal */
    --color-secundario: #3b82f6; /* Azul más claro para acentos */
    --color-fondo: #f8fafc; /* Gris muy claro para el fondo */
    --color-borde: #e2e8f0; /* Borde sutil */
    --color-texto-principal: #1e293b;
    --color-texto-secundario: #475569;
    --color-blanco: #ffffff;

    /* Nuevos colores para títulos de menú */
    --color-admin: #8B0000; /* Rojo oscuro */
    --color-gestion: #D2691E; /* Naranja oscuro (chocolate) */
    --color-docencia: #00008B; /* Azul oscuro */
    --color-informes: #006400; /* Verde oscuro */
}

/* Reseteo y estilos base */
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    height: 100%;
    overflow: hidden;
    background-color: var(--color-fondo);
    color: var(--color-texto-principal);
}

.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Cabecera */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: var(--color-blanco);
    border-bottom: 1px solid var(--color-borde);
    flex-shrink: 0;
}

.logo { display: flex; align-items: baseline; }
.logo h1 { margin: 0; color: var(--color-primario); font-size: 1.8rem; }
.logo span { margin-left: 0.75rem; color: var(--color-texto-secundario); font-weight: 500; }
.user-menu { display: flex; align-items: center; }
.user-menu span { margin-right: 1.5rem; font-weight: 500; }
.user-menu a { margin-left: 1.5rem; text-decoration: none; color: var(--color-primario); font-weight: 500; }

/* Cuerpo principal */
.app-body {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
}

/* Barra Lateral */
.sidebar {
    width: 260px;
    background-color: var(--color-blanco);
    padding: 1.5rem 0;
    border-right: 1px solid var(--color-borde);
    flex-shrink: 0;
    overflow-y: auto;
}

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

.sidebar a {
    display: block;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    color: var(--color-texto-principal);
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

.sidebar a:hover, .sidebar a.active {
    background-color: #f0f5ff;
    color: var(--color-primario);
    border-left-color: var(--color-primario);
}


/* --- NUEVOS ESTILOS PARA MENÚ DESPLEGABLE --- */

.menu-section {
    border-bottom: 1px solid var(--color-borde);
}
.menu-section:last-of-type {
    border-bottom: none;
}

/* Estilo de los títulos H3 de cada sección */
.menu-title {
    font-size: 0.9rem;
    text-transform: uppercase;
    padding: 1rem 1.5rem;
    letter-spacing: 1px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    user-select: none; /* Evita que el texto se seleccione al hacer clic */
    transition: background-color 0.3s ease;
}
.menu-title:hover {
    background-color: #f8f9fa;
}

/* Colores específicos para cada título */
.menu-title-admin { color: var(--color-admin); }
.menu-title-gestion { color: var(--color-gestion); }
.menu-title-docencia { color: var(--color-docencia); }
.menu-title-informes { color: var(--color-informes); }

/* Icono de despliegue (+/-) */
.menu-title::after {
    content: '+';
    position: absolute;
    right: 1.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    transition: transform 0.3s ease;
}

/* Cuando el menú está activo (desplegado), rota el icono */
.menu-title.active::after {
    content: '−'; /* Carácter de resta, no guion */
    transform: rotate(180deg);
}

/* Estilo de los submenús (listas de enlaces) */
.submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0; /* Oculto por defecto */
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    background-color: #fdfdfd; /* Un fondo ligeramente distinto */
}

/* Los enlaces dentro del submenu tienen un poco más de sangría */
.submenu a {
    padding-left: 2.5rem;
    font-size: 0.9rem;
    font-weight: 400; /* Menos peso que el enlace de Inicio */
}


/* Contenido Principal */
.content {
    flex-grow: 1;
    padding: 0;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
}

.content iframe {
    width: 100%;
    height: 100%;
    border: none;
    flex-grow: 1;
}