/*:root {
  /* Paleta Violeta: Elegancia Sofisticada 
  --cassiopeia-color-primary: #C795DE;   /* Violeta Oscuro/Ciruela 
  --cassiopeia-color-link: #8c6da6;      /* Violeta Medio: Enlaces 
  --link-color: #8c6da6;
  --link-color-rgb: 140, 109, 166;
  --cassiopeia-color-hover: #a78cc3;     /* Lavanda Apagado: Hover 
  --link-hover-color: #a78cc3;
  --link-hover-color-rgb: 167, 140, 195;
  
}*/



/* Establece un Gris Pizarra muy oscuro para el fondo de toda la página 
body {
    background-color: #e9e9e9;
}*/


:root {
  /* ==== PALETA VIOLETA PROFESIONAL ==== */
  --cassiopeia-color-primary: #9B5DE5;       /* Violeta principal */
  --cassiopeia-color-primary-dark: #5D2E9E;  /* Violeta más oscuro: títulos */
  --cassiopeia-bg-card: #F4ECFB;             /* Fondo de tarjetas */
  --cassiopeia-border: #D3C1E5;              /* Bordes suaves */
  --cassiopeia-text-dark: #322B3A;           /* Texto general */
}

/* ==== MÓDULOS EN BARRAS LATERALES ==== */
.sidebar-left .moduletable.card.outline,
.sidebar-right .moduletable.card.outline {
  background-color: var(--cassiopeia-bg-card);
  border: 1px solid var(--cassiopeia-border);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(93, 46, 158, 0.08);
  margin-bottom: 1rem;
}

/* ==== TÍTULOS DE LOS MÓDULOS ==== */
.sidebar-left .moduletable.card.outline > h3,
.sidebar-right .moduletable.card.outline > h3,
.card.outline .card-header {
  background-color: var(--cassiopeia-color-primary-dark);
  color: #fff !important;
  font-weight: 700; /* Negrita */
  text-transform: uppercase;
  font-size: 1rem;
  padding: 0.6rem 1rem;
  border-radius: 8px 8px 0 0;
  margin: 0;
  position: relative;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); /* sombra difuminada */
  border-bottom: 3px solid rgba(255, 255, 255, 0.15); /* línea sutil brillante */
}

/* ==== LISTAS DE MENÚ ==== */
.sidebar-left ul,
.sidebar-right ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-left li,
.sidebar-right li {
  border-bottom: 1px solid var(--cassiopeia-border);
}

.sidebar-left li a,
.sidebar-right li a {
  display: block;
  color: var(--cassiopeia-text-dark);
  text-decoration: none;
  padding: 0.6rem 1rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar-left li a:hover,
.sidebar-right li a:hover {
  background-color: var(--cassiopeia-color-primary);
  color: #fff;
  border-radius: 6px;
}
/* ==== TÍTULOS DE MENÚS LATERALES (Noticias y Eventos, Reglamentaciones, etc.) ==== */
.mod-menu__heading.nav-header {
  background-color: #5D2E9E !important; /* Fondo violeta oscuro fijo */
  color: #ffffff !important;            /* Texto blanco */
  font-weight: 700 !important;          /* Negrita */
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  display: block;                       /* Hace que ocupe toda la fila */
  border-radius: 8px 8px 0 0;
  margin-bottom: 0.5rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  border-bottom: 3px solid rgba(255, 255, 255, 0.15);
}


/* ==== ESTILOS PARA EL MENÚ PRINCIPAL ==== */
nav a {
  display: block;
  color: var(--cassiopeia-text-dark);
  text-decoration: none;
  padding: 0.6rem 1rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

nav a:hover {
  background-color: var(--cassiopeia-color-primary);
  color: #fff;
  border-radius: 6px;
}
/* ==== ESTILOS PARA LOS BOTONES (Ej. La Institución) ==== */
.mod-menu__separator {
  background-color: var(--cassiopeia-bg-card);
  color: var(--cassiopeia-text-dark);
  border: 1px solid var(--cassiopeia-border);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  text-transform: uppercase;
  font-weight: 700;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  margin-bottom: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.mod-menu__separator:hover {
  background-color: var(--cassiopeia-color-primary);
  color: #fff;
  border-radius: 6px;
}
/* ==== ESTILOS PARA TÍTULOS DE SUBMENÚS ==== */
nav .mod-menu__heading {
  background-color: var(--cassiopeia-color-primary-dark);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  display: block;
  border-radius: 8px 8px 0 0;
  margin-bottom: 0.5rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  border-bottom: 3px solid rgba(255, 255, 255, 0.15);
}
/* ==== ESTILOS PARA EL CONTENEDOR DEL MENÚ PRINCIPAL (COLOR SÓLIDO) ==== */
nav {
  background-color: var(--cassiopeia-color-primary-dark);  /* Usando el violeta oscuro como color de fondo */
  border-radius: 8px;  /* Bordes redondeados */
  margin-bottom: 1rem;  /* Espacio inferior */
}
/* ==== HACER LOS ENLACES DEL MENÚ PRINCIPAL EN NEGRITA ==== */
nav a {
  font-weight: 700;  /* Esto pone el texto en negrita */
}

/* ============================================== */
/* ==== SUBMENÚ DESPLEGABLE CON HOVER EN 'LA INSTITUCIÓN' (SOLO ESCRITORIO) ==== */
/* ============================================== */
@media (min-width: 992px) {
    /* 1. Muestra el submenú (ul.dropdown-menu) al hacer hover en el elemento padre (li.nav-item) */
    /* El elemento padre del botón es el <li> que contiene el submenú */
    .container-header .mod-menu .nav-item:hover > .dropdown-menu {
        display: block !important; /* Fuerza la visualización anulando Bootstrap */
        margin-top: 0;
        /* Puedes agregar estilos de borde si lo deseas */
    }

    /* 2. Estiliza el botón principal al hacer hover (opcional, pero mejora la UX) */
    .container-header .mod-menu .nav-item:hover > .mm-toggler-nolink {
        background-color: var(--cassiopeia-color-primary);
        color: #fff !important;
        border-radius: 8px 8px 0 0;
        box-shadow: none; /* Elimina sombras para una transición limpia */
    }
    
    /* 3. Evita que la flecha gire (opcional) */
    .container-header .mod-menu .mm-toggler-nolink::after {
        transform: none !important;
    }
}

/* ============================================== */
/* ==== FUERZA NEGRITA EN TODOS LOS ENLACES DE MENÚS Y SUBMENÚS ==== */
/* ============================================== */

/* Asegura negrita para los enlaces de submenú desplegables */
.container-header .mod-menu .dropdown-menu a {
    font-weight: 700 !important;
}

/* Nota: Tu regla 'nav a { font-weight: 700; }' ya cubre los enlaces principales. */
/* Esta nueva regla asegura que los submenús también lo hagan. */

/* Selecciona el 'grid-child' que contiene el logo DENTRO del encabezado */
/* Esto lo hace muy específico para no afectar otros 'grid-child' */
.container-header > .grid-child {
    /* 1. Fuerza el ancho al máximo para que ocupe toda la fila */
    width: 100% !important; 
    max-width: none !important; /* Anula cualquier límite de ancho impuesto */
    
    /* 2. Usa Flexbox para centrar horizontalmente el contenido (el logo) */
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center;     /* Centrado vertical (si hay espacio) */
    
    /* Opcional: Elimina cualquier relleno que pueda descentrarlo */
    padding: 0; 
}

/* Además, asegúrate de que el contenedor del logo no esté flotando */
.navbar-brand {
    float: none !important;
}

/* Asegura que el enlace del logo se comporte bien dentro de Flexbox */
.brand-logo {
    display: block; /* Asegura que sea un bloque para centrado */
    /* El centrado ya lo maneja el 'grid-child' padre */
}
.brand-logo img {
    max-width: 100%; /* La imagen no será más ancha que su contenedor */
    height: auto;    /* Mantiene la proporción de la imagen */
}