@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');

/* ==========================================================================
   1. VARIABLES GLOBALES (Design System)
   ========================================================================== */
:root {
    /* Paleta de colores institucionales */
    --tecnm-blue: #0E3A6D;
    --itq-orange: #CD5700;
    --bg-light: #f8f9fa;
    --text-dark: #2c3e50;
    --text-muted: #6c757d;

    /* Semántica de colores */
    --color-primario: var(--tecnm-blue);
    --color-secundario: var(--itq-orange);
    --color-fondo: var(--bg-light);
    --color-texto: var(--text-dark);
    
    /* ---> AGREGA ESTAS DOS LÍNEAS <--- */
    --color-hombres: #1f4e79; 
    --color-mujeres: #f28e2b;
    
    /* Layout */
    --topbar-height: 64px;
    --sidebar-width: 280px;
    
    /* Sombras y Bordes */
    --shadow-sm: 0 2px 8px rgba(14, 58, 109, 0.05);
    --shadow-md: 0 4px 12px rgba(14, 58, 109, 0.1);
    --border-radius-md: 0.5rem;
    --border-radius-lg: 0.75rem;
    --border-color: rgba(14, 58, 109, 0.15);
}

/* ==========================================================================
   2. ESTILOS BASE
   ========================================================================== */
body {
    font-family: 'Inter', 'Montserrat', sans-serif;
    background-image: url('/assets/img/img/portada.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0;
}

/* Overlays para legibilidad del contenido sobre la imagen */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(245, 247, 250, 0.92);
    z-index: 0;
    pointer-events: none;
}

body::after {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 180px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), transparent);
    z-index: 0;
    pointer-events: none;
}

body > * {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   3. TIPOGRAFÍA: TÍTULOS Y SUBTÍTULOS
   ========================================================================== */
/* Título principal de la vista (Ej. "Portal de indicadores") */
.titulo-seccion {
    color: var(--color-primario);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
    padding-left: 0.75rem;
    border-left: 0.25rem solid var(--color-secundario);
}

/* Título secundario para bloques o gráficas dentro del dashboard */
.titulo-dashboard {
    color: var(--color-primario);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid rgba(205, 87, 0, 0.25);
}

/* Subtítulos generales o descripciones breves */
.subtitulo-seccion {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

/* ==========================================================================
   4. FORMULARIOS Y CONTROLES (Select, Inputs)
   ========================================================================== */
/* Estandarización de elementos Select para filtros históricos/periodos */
.form-select, 
select.select-institucional {
    display: block;
    width: 100%;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-primario);
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    appearance: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-select:focus, 
select.select-institucional:focus {
    border-color: var(--color-secundario);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(205, 87, 0, 0.25);
}

/* ==========================================================================
   5. CONTENEDORES Y LAYOUT
   ========================================================================== */
.contenedor-dashboard {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    padding: 1.5rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
}

/* ==========================================================================
   6. COMPONENTES: TARJETAS (Cards)
   ========================================================================== */
/* Tarjeta genérica para contenedores de tablas y gráficas */
.card-dashboard {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    height: 100%;
}

/* Quita el subrayado y color por defecto de los enlaces que envuelven los KPI */
.card-kpi-link,
.card-kpi-link:hover,
.card-kpi-link:focus {
    text-decoration: none !important;
    color: inherit;
    display: block; /* Asegura que el enlace respete el 100% del ancho (w-100) */
}

/* Tarjetas exclusivas para KPIs (Indicadores) */
.card-kpi {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    border-left: 4px solid var(--color-primario);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-kpi:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Contenido interno de las tarjetas KPI */
.card-kpi .kpi-titulo {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    /* text-transform: uppercase; */
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.card-kpi .kpi-value {
    color: var(--color-primario);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.card-kpi .kpi-secondary {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* ==========================================================================
   7. COMPONENTES: TABLAS
   ========================================================================== */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tabla-dashboard {
    width: 100%;
    background-color: #ffffff;
    color: var(--color-texto);
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
}

/* Cabecera estandarizada */
.tabla-dashboard thead th {
    background-color: var(--color-primario);
    color: #ffffff;
    font-weight: 600;
    padding: 1rem 0.75rem;
    border: none;
    vertical-align: middle;
    white-space: nowrap;
}

.tabla-dashboard thead th:first-child {
    border-top-left-radius: var(--border-radius-md);
}

.tabla-dashboard thead th:last-child {
    border-top-right-radius: var(--border-radius-md);
}

/* Cuerpo de la tabla */
.tabla-dashboard tbody td {
    padding: 0.85rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
}

/* Efecto Zebra y Hover */
.tabla-dashboard tbody tr:nth-child(even) {
    background-color: rgba(248, 249, 250, 0.6);
}

.tabla-dashboard tbody tr:hover {
    background-color: rgba(205, 87, 0, 0.05);
}

/* Fila de Totales Generales */
.tabla-dashboard .fila-total th,
.tabla-dashboard .fila-total td {
    background-color: rgba(14, 58, 109, 0.06);
    color: var(--color-primario);
    font-weight: 700;
    border-top: 2px solid var(--color-primario);
    border-bottom: none;
    padding: 1rem 0.75rem;
}

/*======================================================================
   7.1.  Altura estandarizada para contenedores de gráficas */
.grafica-container {
    position: relative;
    width: 100%;
    height: 450px; /* Altura óptima para legibilidad */
    min-height: 400px;
}

.grafica-container-fixed {
    position: relative;
    width: 100%;
    height: 480px; /* Mayor espacio para barras con etiquetas de programa */
    min-height: 420px;
}
  /* ========================================================================== */


/* ==========================================================================
   8. COMPONENTES: PESTAÑAS (Tabs)
   ========================================================================== */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.tab {
    cursor: pointer;
    padding: 0.6rem 1.25rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted);
    background-color: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    transition: all 0.2s ease;
}

.tab:hover {
    background-color: rgba(14, 58, 109, 0.05);
    color: var(--color-primario);
}

.tab.active {
    background-color: var(--color-primario);
    color: #ffffff;
    border-color: var(--color-primario);
}

/* ==========================================================================
   9. ESTRUCTURA PRINCIPAL (Header, App Shell, Layout)
   ========================================================================== */

/* BARRA SUPERIOR (Topbar) Fondo Azul Institucional */
.topbar-institucional {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height, 64px);
    background-color: var(--color-primario); /* Fondo azul institucional */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1030;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    border-bottom: none; /* Sin borde inferior */
}

.topbar-inner {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.topbar-brand-group {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Espaciado entre la hamburguesa, el logo y el texto */
}

/* Botón hamburguesa SIEMPRE VISIBLE y en BLANCO */
.btn-sidebar-toggle {
    background: none;
    border: none;
    font-size: 1.75rem;
    color: #ffffff; /* Icono blanco */
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 0.25rem;
    transition: color 0.2s ease;
}

.btn-sidebar-toggle:hover {
    color: rgba(255, 255, 255, 0.75);
}

.header-brand-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-logo {
    max-height: 45px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.header-brand-texts {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.header-brand-title {
    font-weight: 700;
    color: #ffffff; /* Texto Blanco */
    font-size: 1.1rem;
}

.header-brand-subtitle {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8); /* Texto Blanco semitransparente */
}

/* Badge del periodo ajustado para contrastar con el fondo azul */
.periodo-badge {
    background-color: rgba(255, 255, 255, 0.15); 
    color: #ffffff; 
    padding: 0.4rem 0.75rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* APP SHELL Y ÁREA DE CONTENIDO */
.app-shell {
    display: flex;
    padding-top: var(--topbar-height, 64px);
    min-height: 100vh;
}

.content-area {
    flex-grow: 1;
    margin-left: 0; /* Como el menú está oculto, el contenido ocupa todo */
    padding: 1.5rem;
    width: 100%;
}

/* ==========================================================================
   10. MENÚ LATERAL TIPO HAMBURGUESA (Sidebar Oculto)
   ========================================================================== */
.sidebar-institucional {
    width: var(--sidebar-width, 280px);
    background-color: #ffffff;
    position: fixed;
    top: var(--topbar-height, 64px);
    bottom: 0;
    left: 0;
    z-index: 1020;
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
    box-shadow: 4px 0 10px rgba(0,0,0,0.05);
    
    /* ESTADO INICIAL: OCULTO FUERA DE LA PANTALLA */
    transform: translateX(-100%); 
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* CUANDO EL JS ACTIVA LA CLASE, EL MENÚ ENTRA A LA PANTALLA */
body.sidebar-open .sidebar-institucional {
    transform: translateX(0);
}

/* Fondo oscuro transparente cuando el menú está abierto */
.sidebar-overlay {
    position: fixed;
    top: var(--topbar-height, 64px);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1010;
    display: none; /* Oculto por defecto */
    backdrop-filter: blur(2px);
}

body.sidebar-open .sidebar-overlay {
    display: block; /* Se muestra al abrir el menú */
    opacity: 1;
}

/* Estilos internos del menú lateral (Texto oscuro sobre fondo blanco) */
.sidebar-institucional .nav-link {
    color: var(--text-dark);
    font-weight: 500;
    font-size: 0.85rem;
    border-radius: var(--border-radius-md);
    transition: all 0.2s ease;
}

.sidebar-institucional .nav-link:hover {
    background-color: rgba(14, 58, 109, 0.05);
    color: var(--color-primario);
}

.sidebar-institucional .nav-link.active {
    color: var(--color-primario);
    font-weight: 700;
    background-color: rgba(14, 58, 109, 0.08);
}

.sidebar-institucional .nav-link[data-bs-toggle="collapse"] .bi-chevron-down {
    transition: transform 0.3s ease;
}

.sidebar-institucional .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg); /* Animación de la flechita */
}

/* Botón de usuario */
.btn-usuario {
    background-color: rgba(205, 87, 0, 0.1);
    color: var(--color-secundario);
    transition: all 0.2s ease;
}
.btn-usuario:hover {
    background-color: var(--color-secundario);
    color: #ffffff;
}

/* ==========================================================================
   11. RESPONSIVE (Ajustes para celulares y pantallas pequeñas)
   ========================================================================== */
@media (max-width: 767.98px) {
    /* 1. Reducimos márgenes laterales del header */
    .topbar-institucional {
        padding: 0 0.5rem;
    }

    /* 2. Flexibilidad para los contenedores */
    .topbar-brand-group {
        gap: 0.4rem; /* Menor espacio entre hamburguesa, logo y texto */
        min-width: 0;
        flex: 1;
    }

    .header-brand-link {
        gap: 0.4rem;
        min-width: 0;
    }

    .header-brand-texts {
        min-width: 0;
        flex: 1;
    }

    /* 3. Logo un poco más compacto en móviles */
    .header-logo {
        max-height: 32px;
        flex-shrink: 0;
    }

    /* 4. Ocultamos elementos secundarios */
    .header-brand-subtitle,
    .periodo-badge {
        display: none !important;
    }

    /* 5. Título adaptable a 1 o 2 líneas limpias */
    .header-brand-title {
        font-size: 0.82rem; /* Tamaño óptimo para pantallas de ~400px */
        line-height: 1.15;
        font-weight: 600;
        white-space: normal; /* Permite salto de línea automático */
        word-break: break-word; /* Evita que palabras largas se desborden */
    }
}

/* Ajuste fino para teléfonos con pantallas muy estrechas (< 360px) */
@media (max-width: 360px) {
    .header-brand-title {
        font-size: 0.75rem;
    }
    
    .header-logo {
        max-height: 28px;
    }
}

/* fin de regla extra para pantallas muy estrechas */

/* Texto de última actualización en el menú */
.header-meta-text {
    font-size: 0.75rem; /* Tamaño más pequeño (aprox 12px) */
    color: var(--text-muted, #6c757d); /* Color gris sutil para que no compita con el menú */
    text-align: center; /* Opcional: para que se vea centrado */
}

/* Contenedor de la sección del mapa */
.map-container {
    width: 100%;
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Sombra sutil tipo tarjeta premium */
}

/* Estilo del título del mapa */
.map-title {
    font-size: 1.5rem;
    color: #1B396A; /* Azul institucional según tu script de colores */
    margin-bottom: 1rem;
    font-weight: bold;
    text-align: center;
}

/* EL CONTENEDOR DEL MAPA (Aquí está la solución principal) */
#queretaro-map {
    width: 100%;
    height: 500px; /* ¡ESTA ES LA CLAVE! El mapa necesita una altura explícita para renderizarse */
    min-height: 400px;
    background-color: #e5e3df; /* Color de fondo temporal mientras cargan los tiles */
    border-radius: 6px;
    border: 1px solid #dee2e6;
    z-index: 1; /* Previene que el mapa se sobreponga a menús desplegables del header */
}

.legend-toggle {
	background-color: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 6px;
	padding: 4px 12px;
	font-size: 0.8rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
}

.legend-toggle:hover {
	background-color: rgba(255, 255, 255, 0.3);
	border-color: rgba(255, 255, 255, 0.5);
	transform: translateY(-1px);
}

.legend-toggle:active {
	transform: translateY(0);
}


/* Estilos para el panel flotante de municipios en el mapa */
.info.legend,
.legend-collapsible {
	background-color: #ffffff;
	padding: 0;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(27, 57, 106, 0.15);
	border: 1px solid rgba(27, 57, 106, 0.1);
	min-width: 260px;
	max-width: 320px;
	font-family: 'Montserrat', sans-serif;
	overflow: hidden;
}

.legend-header {
	background: linear-gradient(135deg, var(--tecnm-blue) 0%, #2b4a7a 100%);
	color: #ffffff;
	padding: 14px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 2px solid var(--itq-orange);
}

.legend-header strong {
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.3px;
}

.legend-toggle {
	background-color: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 6px;
	padding: 4px 12px;
	font-size: 0.8rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
}

.legend-toggle:hover {
	background-color: rgba(255, 255, 255, 0.3);
	border-color: rgba(255, 255, 255, 0.5);
	transform: translateY(-1px);
}

.legend-toggle:active {
	transform: translateY(0);
}

.legend-content {
	max-height: 380px;
	overflow-y: auto;
	padding: 12px;
	transition: max-height 0.3s ease, padding 0.3s ease;
}

.legend-collapsible.is-collapsed .legend-content {
	max-height: 0;
	padding: 0 12px;
	overflow: hidden;
}

.legend-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	margin-bottom: 6px;
	border-radius: 8px;
	background-color: rgba(248, 249, 250, 0.6);
	border-left: 3px solid transparent;
	transition: all 0.2s ease;
	cursor: pointer;
}

.legend-item:hover {
	background-color: rgba(27, 57, 106, 0.08);
	border-left-color: var(--itq-orange);
	transform: translateX(4px);
}

.legend-item:last-child {
	margin-bottom: 0;
}

.legend-swatch {
	width: 24px;
	height: 24px;
	border-radius: 6px;
	flex-shrink: 0;
	border: 2px solid rgba(27, 57, 106, 0.2);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.legend-text {
	font-size: 0.85rem;
	color: var(--color-texto-principal);
	line-height: 1.4;
	flex: 1;
}

.legend-text strong {
	color: var(--tecnm-blue);
	font-weight: 600;
}

.header-user-name {
    color: #ffffff; /* Color blanco, puedes cambiar a otro color */
    font-weight: 600;
}