/* ==========================================================================
   SISTEMA DE DISEÑO: TRANSPARENCIA (Alineado a Gráfica Base gob.mx v3)
   ========================================================================== */

:root {
    --gob-guinda: #9D2449;
    --gob-dorado: #B38E5D;
    --gob-gris-oscuro: #282D31;
    --gob-gris-texto: #404041;
    --gob-gris-claro: #F4F6F9;
    --gob-blanco: #FFFFFF;
    --font-titulos: Patria, "Noto Sans", Helvetica, Arial, sans-serif;
    --font-textos: "Noto Sans", "Noto Sans", serif;
}

body {
    background-color: var(--gob-gris-claro);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--font-textos);
    color: var(--gob-gris-texto);
}  

main.page {
    flex: 1;
    margin-top: 0 !important;
    padding-bottom: 4rem;
}

/* =========================================
   BARRA INSTITUCIONAL DORADA
   ========================================= */
body nav.barra-institucional {
    background-color: var(--gob-dorado) !important;
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

body nav.barra-institucional ul.lista-institucional {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 50px !important;
}

body nav.barra-institucional ul.lista-institucional li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

body nav.barra-institucional ul.lista-institucional li::before {
    content: none !important;
}

body nav.barra-institucional ul.lista-institucional li a {
    color: var(--gob-blanco) !important;
    text-decoration: none !important;
    background: transparent !important;
    padding: 0 15px !important;
    line-height: 50px !important;
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
    outline: none !important;
}

body nav.barra-institucional ul.lista-institucional li a:hover {
    background-color: rgba(255,255,255,0.1) !important;
}
@media (min-width: 991px) {
 .menu .sub-navbar {
        margin-right: 0rem !important;
    }
}
/* =========================================
   MIGAS DE PAN (BREADCRUMBS)
   ========================================= */
.breadcrumb-gob, .breadcrumb {
    background: transparent;
    padding: 1rem 0;
    margin: 0;
    font-size: 1.4rem; 
    font-family: var(--font-textos);
}

.breadcrumb-gob a, .breadcrumb a { 
    color: var(--gob-guinda) !important; 
    text-decoration: none !important; 
    font-weight: 600; 
}

.breadcrumb-gob a:hover, .breadcrumb a:hover { 
    text-decoration: underline !important; 
}

.breadcrumb > li { color: var(--gob-gris-oscuro); }
.breadcrumb > li+li:before { content: ""; }
.text-breadcrumb { color: #6c757d; text-decoration: none; }
.text-breadcrumb-active { font-weight: 600; color: #343a40; }

/* =========================================
   TIPOGRAFÍA Y TÍTULOS (JERARQUÍA H1, H2, H3)
   ========================================= */

/* H1: Título principal de la vista (¡SÓLO 1 POR PÁGINA!) */
h1, .titulo-principal { 
    color: var(--gob-gris-oscuro); 
    font-size: 3rem; 
    letter-spacing: -0.5px; 
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-family: var(--font-titulos);
}

/* H2: Títulos de sección (Puedes usar todos los que quieras) */
h2, .titulo-limpio { 
    color: var(--gob-guinda); 
    font-family: var(--font-titulos); 
    font-weight: 700; 
    border-bottom: 2px solid var(--gob-dorado); 
    padding-bottom: 10px; 
    margin-bottom: 20px; 
    font-size: 2rem; 
}

/* Variante de H2 en oscuro (Para Gobierno Abierto) */
h2.titulo-seccion-gob {
    color: var(--gob-gris-oscuro);
    font-size: 2.2rem;
    border-bottom: none;
}

/* Variante de H2 Gigante y centrado */
h2.titulo-vertiente {
    color: var(--gob-gris-oscuro);
    font-family: var(--font-titulos);
    font-size: 2.6rem;
    letter-spacing: -0.5px;
    font-weight: 700;
    border: none;
    padding-bottom: 0;
}
.titulo-vertiente {
    color: var(--gob-gris-oscuro);
    font-family: var(--font-titulos);
    font-size: 2.4rem;
    letter-spacing: -0.5px;
    font-weight: 700;
    border: none;
    padding-bottom: 0;
}

/* H3: Subtítulos dentro de las secciones (Múltiples permitidos) */
h3, .titulo-variable, .subtitulo-apertura { 
    color: var(--gob-gris-oscuro); 
    font-family: var(--font-titulos);
    font-size: 1.8rem; 
    font-weight: 700;
    margin-bottom: 1rem;
    border-bottom: 1px solid #ddd; 
    padding-bottom: 10px; 
}

/* Separadores decorativos (Usar debajo de H1 o H2) */
.separador-izq-guinda {
    border-top: 3px solid var(--gob-guinda);
    width: 50px;
    margin-left: 0;
    margin-top: 10px;
    margin-bottom: 30px;
}

.linea-centrada-oscura {
    height: 4px;
    width: 40px;
    background-color: var(--gob-gris-oscuro);
    margin: 0.5rem auto 2rem auto;
    border-radius: 2px;
}

.titulo-secundario { color: #2d3748; letter-spacing: -0.5px; }

/* =========================================
   TEXTOS, TABLAS Y LISTAS
   ========================================= */
.texto-amplio { font-size: 1.6rem; line-height: 1.8; }
.texto-oscuro { color: var(--gob-gris-oscuro) !important; }
.texto-gris { color: #555; }
.lista-espaciada { line-height: 2; }

/* Tablas */
.table-custom-rounded { font-size: 1.6rem; }
.table-custom-rounded th { font-size: 1.3rem; }

/* Enlaces */
.link-guinda, .link-guinda-animado { 
    color: var(--gob-guinda); 
    text-decoration: none; 
    transition: color 0.2s, transform 0.2s; 
    display: inline-block; 
}
.link-guinda:hover, .link-guinda-animado:hover { 
    color: #6F1C32; 
    text-decoration: underline; 
    transform: translateX(3px); 
}
.link-gris { color: #9D2449; text-decoration: none; transition: color 0.2s; }
.link-gris:hover { color: var(--gob-guinda); text-decoration: underline; }

.icono-enlace-dorado { font-size: 1rem; color: var(--gob-dorado); }

/* =========================================
   TARJETAS DEL INDEX PRINCIPAL
   ========================================= */
.grid-transparencia { display: flex; flex-wrap: wrap; margin-top: 90px; }

.card-modulo-gob,
a.card-modulo-gob {
    background: var(--gob-blanco);
    border-radius: 6px;
    padding: 2.5rem 1.5rem;
    text-align: left !important; 
    border: 1px solid #EAEAEA;
    border-top: 4px solid var(--gob-guinda);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none !important; 
    color: var(--gob-gris-oscuro) !important; 
}

.card-modulo-gob:hover,
a.card-modulo-gob:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(157, 36, 73, 0.12);
    border-color: var(--gob-guinda);
    text-decoration: none !important;
    color: var(--gob-gris-oscuro) !important;
}

.card-modulo-gob .titulo-card,
.card-modulo-gob .titulo-card * { 
    color: var(--gob-gris-oscuro) !important; 
    font-size: 2.5rem; 
    font-weight: 600; 
    margin-bottom: 20px; 
    text-decoration: none !important; 
}

.card-modulo-gob .desc-card,
.card-modulo-gob .desc-card * { 
    color: var(--gob-gris-texto) !important; 
    font-size: 1.9rem; 
    line-height: 1.6; 
    flex-grow: 1; 
    text-decoration: none !important; 
}

.card-modulo-gob .icono-gob {
    font-size: 3.5rem;
    color: var(--gob-dorado);
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
    text-align: center;
    transition: transform 0.3s ease, color 0.3s ease;
}

.card-modulo-gob:hover .icono-gob { 
    transform: scale(1.1); 
    color: var(--gob-guinda); 
}

/* =========================================
   CLASES DE APOYO PARA VISTAS 
   ========================================= */

/* Animación para las tarjetas interiores */
.card-animada {
    transition: all 0.3s ease;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background-color: var(--gob-blanco);
}
.card-animada:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
    border-color: var(--gob-guinda) !important;
}
.card-animada .texto-enlace { transition: color 0.3s ease; }
.card-animada:hover .texto-enlace { color: var(--gob-guinda) !important; }

/* ESTILOS PARA LISTA DE EXPEDIENTES (NUEVO) */
.lista-expedientes {
    border-radius: 8px;
    overflow: hidden;
}
.item-expediente {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.25rem;
    border-left: 4px solid #10312B !important; /* Verde institucional por defecto */
    transition: all 0.2s ease-in-out;
}
.item-expediente:hover {
    border-color: var(--gob-guinda) !important;
    border-left: 4px solid var(--gob-guinda) !important;
    background-color: #FCF8F9; /* Gris con tono rojizo muy tenue */
    z-index: 2; /* Superpone el borde guinda a los demás items */
}
.fecha-expediente {
    text-align: right;
    color: #6c757d;
    font-size: 1.1rem;
    flex-shrink: 0; /* Evita que la fecha se colapse si el título es largo */
}

/* Fecha de actualización limpia */
.texto-actualizacion {
    color: #929292;
    font-size: 1.4rem;
    font-weight: 400;
}

.texto-etiqueta {
    font-size: 0.95rem;
    color: #6c757d;
    font-weight: 700;
    display: block;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.texto-valor {
    font-size: 1.3rem;
    color: var(--gob-gris-oscuro);
}

/* Tarjetas Visuales (Directorio) */
.img-directorio {
    height: 180px;
    object-fit: cover;
    border-bottom: 3px solid var(--gob-dorado);
    width: 100%;
}

.nota-tarjeta {
    letter-spacing: 0.5px;
    color: #6c757d;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
}

.titulo-tarjeta {
    font-size: 1.4rem;
    font-family: var(--font-titulos);
    color: var(--gob-gris-oscuro);
    font-weight: 700;
    margin-bottom: 1rem;
}

.desc-tarjeta { font-size: 1.15rem; color: #6c757d; }

/* Bordes institucionales */
.borde-izq-guinda { border-left: 4px solid var(--gob-guinda) !important; }
.borde-izq-dorado { border-left: 4px solid var(--gob-dorado) !important; }
.borde-izq-verde  { border-left: 4px solid #10312B !important; }

/* Tamaños de texto específicos */
.texto-1-2 { font-size: 1.4rem; }
.texto-1-3 { font-size: 1.4rem; }
.texto-1-5 { font-size: 1.5rem; }
.texto-1-8 { font-size: 1.8rem; }

/* =========================================
   MEDIA QUERIES
   ========================================= */
@media (max-width: 768px) {
    h1, .titulo-principal { font-size: 2.5rem; }
    h2, .titulo-limpio, h2.titulo-seccion-gob { font-size: 1.8rem; }
    h3, .titulo-variable, .subtitulo-apertura { font-size: 1.5rem; }
    
    .alerta-institucional { padding: 1.5rem; }
    .item-expediente { flex-direction: column; align-items: flex-start; }
    .fecha-expediente { text-align: left; margin-top: 10px; }
}