/* 3. Variables de marca (Para botones y enlaces dentro del artículo) */
:root {
    --cassiopeia-color-primary: #2f6206;
    --cassiopeia-color-link: #2f6206;
    --cassiopeia-color-hover: #f4ee07;
}


/* =========================================================================
   ENFOQUE DE PRECISIÓN: FONDO TRADICIONAL & HEADER MANTECADO
   ========================================================================= */

/* 1. TEXTURA DE FONDO GENERAL (Para que el sitio no se vea blanco completo) */
body {
    background-image: url('../images/page_gl.png') !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: center top !important;
    background-color: #1a331a !important; /* Verde de respaldo */
}

/* 2. EL HEADER PRINCIPAL DEL SITIO (Cambiamos el azul original #010156) */
header.header, 
.header,
.container-header {
    background-color: #3c7b06 !important; /* Color Crema/Mantecado Fino */
    background-image: none !important;    /* Eliminamos cualquier degradado viejo */
    border-bottom: 3px solid #2b5928 !important; /* Línea de división en Verde Grama */
}

/* 3. TEXTOS DEL LOGO Y MENÚ (Oscuros para que se lean sobre el crema) */
.header .navbar-brand, 
.header .navbar-brand a, 
.header .logo-text,
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
    color: #1e3f1c !important; /* Verde Grama Profundo para máxima lectura */
}

/* Subrayado decorativo del menú de Cassiopeia en Verde Grama */
@media (width >= 992px) {
    .container-header .metismenu > li > a:hover:after,
    .container-header .mod-menu > li.active:after, 
    .container-header .mod-menu > li:hover:after {
        background: #2b5928 !important;
    }
}

/* Puedes cambiar el valor #b0b0b0 por cualquier otro gris si lo quieres más claro */
.breadcrumbs, 
nav[aria-label="Breadcrumbs"], 
p.small, 
.small {
    color: #b0b0b0 !important; 
}


/* Aclarar los elementos del camino de migas de pan y sus barras separadoras */
.breadcrumb-item, 
.breadcrumb-item + .breadcrumb-item::before,
.breadcrumb-item.active {
    color: #ffffff !important; /* Tu gris claro de prueba */
}



/* Cambia el #1e3f1c por el verde exacto que quieras para la cabecera de la tabla */
.table thead th, 
.table th {
    background-color: #b0b0b0 !important; /* Fondo Verde Grama Oscuro */
    color: #ffffff !important;            /* Texto Blanco */
}


/* Color en estado normal */
.btn-primary {
    background-color: #2b5928 !important; /* Tu Verde principal */
    border-color: #2b5928 !important;
    color: #ffffff !important;            /* Texto Blanco/Mantecado */
}

/* Color cuando pones el cursor encima (Hover) */
.btn-primary:hover {
    background-color: #1e3f1c !important; /* Un verde un pelo más oscuro al apuntar */
    border-color: #1e3f1c !important;
}


/* =========================================================================
   LA CLAVE DEL MENÚ LATERAL (QUITAR EL AZUL)
   ========================================================================= */

/* Color normal de los enlaces del menú lateral */
.mod-list li a,
.sidebar-right .metismenu a,
.sidebar-right a {
    color: #1e3f1c !important; /* Cámbialo por tu Verde Principal o el color que desees probar */
    text-decoration: none !important;
}

/* Color cuando pasas el mouse por encima (Hover) */
.mod-list li a:hover,
.sidebar-right .metismenu a:hover,
.sidebar-right a:hover {
    color: #1e3f1c !important; /* Un verde más oscuro al apuntar */
    text-decoration: underline !important;
}

/* Color del cuadrito cuando está seleccionado (Checked) */
.form-check-input:checked {
    background-color: #2b5928 !important; /* Tu Verde principal */
    border-color: #2b5928 !important;     /* Borde Verde */
}

/* Color del borde cuando pasas el cursor o haces foco en la casilla */
.form-check-input:focus {
    border-color: #1e3f1c !important;
    box-shadow: 0 0 0 .25rem rgba(43, 89, 40, 0.25) !important; /* Brillo sutil verde */
    

    
}




/* 1. Estado en reposo (Bordes redondeados y sin fondo) */
.mi-pestana-custom {
  border-radius: 50px !important; /* Bordes completamente redondeados estilo píldora */
  border: 2px solid #6c757d !important; /* Borde gris en reposo */
  color: #6c757d !important;
  background: transparent !important;
}

/* 2. Estado Hover (Al pasar el mouse se rellena de un color, ej: amarillo) */
.mi-pestana-custom:hover {
  background-color: #fcee07 !important;
  border-color: #6c757d !important;
  color: white !important;
}

/* 3. Estado Activo (Cuando la pestaña está seleccionada, ej: Verde) */
.mi-pestana-custom.active {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: white !important;
}



/* 1. Estado Normal (Bordes redondeados, sin fondo, texto gris/azul) */
.pestanas-botones .nav-link {
    border: 2px solid #c4c4c4 !important;      /* Borde amarillo inicial */
    color: #ffffff !important;                 /* Texto azul inicial */
    background-color: #c4c4c4 !important;  /* Sin fondo */
    border-radius: 70px !important;            /* Bordes completamente redondeados */
    margin-right: 8px !important;              /* Separación entre botones */
    margin-bottom: 8px !important;             /* Separación por si se bajan en móvil */
    transition: all 0.2s ease-in-out !important; /* Animación suave al pasar el mouse */
}

/* 2. Estado HOVER (Al pasar el mouse por encima) */
.pestanas-botones .nav-link:hover {
    background-color: #fcee07 !important;      /* Fondo amarillo */
    border-color: #6c757d !important;
    color: white !important;                   /* Texto cambia a blanco */
}

/* 3. Estado ACTIVO (La pestaña que está actualmente seleccionada) */
.pestanas-botones .nav-link.active {
    background-color: #fcee07 !important;      /* Fondo Verde cuando está activo */
    border-color: #198754 !important;          /* Borde Verde */
    color: white !important;                   /* Texto blanco */
}












/* ==========================================================================
   1. CONTENEDOR DEL ARTÍCULO (Evitar que se estire por culpa del menú lateral)
   ========================================================================== */
main,
.container-component,
div[role="main"],
#content {
    background-color: #eeeccc !important;
    padding: 40px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    
    /* Corta el fondo exactamente donde termina el texto, ignorando el largo del menú derecho */
    align-self: start !important; 
}

/* ==========================================================================
   2. CONTROL DEL LOGO EN EL MENÚ LATERAL (Ajuste quirúrgico)
   ========================================================================== */
/* Apunta a cualquier imagen dentro de los menús de módulos laterales */
.mod-menu img,
.mod-menu a img,
aside img {
    max-width: 40px !important;  /* Tamaño controlado para el logo de LIBA (puedes cambiarlo a 24px si lo quieres más chico) */
    height: auto !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
    display: inline-block !important;
}

/* Evita que el texto del enlace se vaya para abajo del logo */
.mod-menu a, 
.sidebar-right a {
    display: flex !important;
    align-items: center !important;
}

/* ==========================================================================
   3. TÍTULO EN VERDE
   ========================================================================== */
h2 a, h1 a, .page-header h2 a, .com-content-featured__item h2 a, .item-page h2 a {
    color: #2f6206 !important; 
    text-decoration: none !important;
    font-weight: 700 !important;
}
h2 a:hover, h1 a:hover {
    color: #f4ee07 !important; 
    text-decoration: underline !important;
}

/* ==========================================================================
   4. FRANJA OSCURA DE METADATOS
   ========================================================================== */
.article-info, .article-info-muted, dl.article-info {
    background-color: #1a3003 !important; 
    padding: 15px 25px !important;
    border-radius: 6px !important;
    margin-bottom: 35px !important; 
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}
.article-info *, dl.article-info dt, dl.article-info dd {
    color: #ffffff !important;
    margin: 0 !important;
    display: inline-block !important;
    font-size: 0.9rem !important;
}

/* ==========================================================================
   5. TEXTO DE LOS PÁRRAFOS
   ========================================================================== */
p, span, div[itemprop="articleBody"] {
    color: #222222 !important;
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
}