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

/* Establece un fondo gris claro limpio para toda la página */
body {
    background-color: #e9e9e9;
}

/* ======================================================= */
/* ====           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 laterales */
.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;
  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);
  border-bottom: 3px solid rgba(255, 255, 255, 0.15);
}

/* Listas de menú de las barras laterales */
.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;
}

/* Encabezados fijos de menús laterales */
.mod-menu__heading.nav-header {
  background-color: #5D2E9E !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  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 DEL MENÚ PRINCIPAL            ==== */
/* ======================================================= */
nav a {
  display: block;
  color: var(--cassiopeia-text-dark);
  text-decoration: none;
  padding: 0.6rem 1rem;
  font-weight: 700; /* Fuerza negrita general */
  transition: background-color 0.3s ease, color 0.3s ease;
}

nav a:hover {
  background-color: var(--cassiopeia-color-primary);
  color: #fff;
  border-radius: 6px;
}

.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;
}

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);
}

/* Submenús desplegables en Hover (Escritorio) */
@media (min-width: 992px) {
    .container-header .mod-menu .nav-item:hover > .dropdown-menu {
        display: block !important;
        margin-top: 0;
    }
    .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;
    }
    .container-header .mod-menu .mm-toggler-nolink::after {
        transform: none !important;
    }
}

.container-header .mod-menu .dropdown-menu a {
    font-weight: 700 !important;
}

/* ======================================================= */
/* ====   ANULAR FULL-WIDTH Y CENTRADO DEL LOGO/BANNER ==== */
/* ======================================================= */

/* Fuerza a la cabecera completa a estructurarse como columna centrada */
header.header.container-header.full-width {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* Si usas el módulo en posición BANNER */
header.full-width .container-banner,
.container-banner {
    width: 100% !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    height: 262px !important;
}

/* Si usas el LOGO NATIVO */
header.full-width .grid-child,
header.full-width .navbar-brand {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto 1rem auto !important;
    float: none !important;
}

header.full-width .navbar-brand img {
    max-width: 1100px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
}

/* ======================================================= */
/* ====    RECUADRO VIOLETA TOTAL Y ALINEACIÓN DE MENÚ    ==== */
/* ======================================================= */

/* Contenedor intermedio del menú: asegura el ancho institucional centrado */
header.full-width .container-nav {
    display: block !important;
    width: 100% !important;
    max-width: 1100px !important;
    background-color: transparent !important;
    margin: 0 auto 1.5rem auto !important; /* Centra el bloque general respecto a la pantalla */
}

/* 2. Forzar a la lista UL a mantenerse a la izquierda en una sola línea horizontal */
header.full-width ul.mod-menu,
header.full-width .navbar-nav {
    display: flex !important;
    flex-direction: row !important;  /* Línea horizontal continua */
    flex-wrap: nowrap !important;    /* Prohíbe dividirse en dos filas */
    justify-content: flex-start !important; /* Fuerza a todos los botones a pegarse a la izquierda */
    width: 100% !important;
    background-color: var(--cassiopeia-color-primary-dark) !important;
    border-radius: 8px !important;
    margin: 0 !important;
    padding: 0 0.5rem !important;
    list-style: none !important;
}

/* 3. Reducir el tamaño de los botones para que entren perfectamente todos en los 1100px */
header.full-width ul.mod-menu > li,
header.full-width .nav-item {
    text-align: left !important;
    flex: 0 1 auto !important;       /* Permite que cada botón se encoja proporcionalmente */
}

header.full-width nav a,
header.full-width .nav-link {
    padding: 0.6rem 0.6rem !important; /* Reducimos el espacio a los lados de 1rem a 0.6rem */
    font-size: 0.88rem !important;      /* Ajuste milimétrico de la letra para asegurar la fila única */
    white-space: nowrap !important;    /* Evita que un título largo como 'GESTIÓN DE LA CALIDAD' se rompa internamente */
}

/* Forzar orientación interna de los ítems del menú */
header.full-width ul.mod-menu > li,
header.full-width .nav-item {
    text-align: left !important;
}

/* Corregir el color de fondo gris del botón activo (Ej: INICIO) */
header.full-width nav .mod-menu .active a,
header.full-width nav .mod-menu .active span,
header.full-width nav .nav-item.active a {
    background-color: transparent !important;
    color: #ffffff !important;
}

header.full-width nav .mod-menu .active a:hover {
    background-color: var(--cassiopeia-color-primary) !important;
}
/* ======================================================= */
/* ====   ANULAR FULL-WIDTH Y CENTRAR BANNER/LOGO     ==== */
/* ======================================================= */

/* Fuerza a la cabecera completa a estructurarse como columna centrada */
header.header.container-header.full-width {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* Configuración para el módulo en posición BANNER */
header.full-width .container-banner,
.container-banner {
    width: 100% !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    height: 262px !important;
}

/* Configuración de respaldo por si usas el LOGO NATIVO */
header.full-width .grid-child,
header.full-width .navbar-brand {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto 1rem auto !important;
    float: none !important;
}

header.full-width .navbar-brand img {
    max-width: 1100px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
}


/* ======================================================= */
/* ====   FORZAR MENÚ PRINCIPAL HACIA LA IZQUIERDA    ==== */
/* ======================================================= */

/* 1. Obligar al bloque de navegación a tirarse a la izquierda */
header.full-width nav,
header.full-width .navbar,
header.full-width .container-nav {
    align-self: flex-start !important; /* Alinea el bloque completo a la izquierda */
    width: 100% !important;
    max-width: 1100px !important;
    text-align: left !important;
    margin-left: 0 !important; /* Quita márgenes automáticos que puedan centrarlo */
}

/* 2. Forzar a la lista interna de botones (UL) a alinearse a la izquierda EN UNA SOLA FILA */
header.full-width ul.mod-menu,
header.full-width .navbar-nav,
header.full-width .mod-menu_list {
    display: flex !important;
    flex-direction: row !important;  /* Fila horizontal */
    flex-wrap: nowrap !important;    /* Prohíbe las dos filas, todo en una línea */
    justify-content: flex-start !important; /* Empuja los botones al inicio izquierdo */
    padding-left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    background-color: var(--cassiopeia-color-primary-dark) !important;
    border-radius: 8px !important;
}

/* 3. Forzar orientación interna de los ítems y reducir espacio para que entren todos holgadamente */
header.full-width ul.mod-menu > li,
header.full-width .nav-item {
    text-align: left !important;
    flex: 0 1 auto !important;
}

header.full-width nav a,
header.full-width .nav-link {
    padding: 0.6rem 0.6rem !important; /* Achica el espacio horizontal entre botones */
    white-space: nowrap !important;    /* Evita saltos de palabra internos */
    font-size: 0.88rem !important;     /* Ajuste fino de la letra para que quepan todos */
}

/* 4. Corregir el color de fondo gris del botón activo (Ej: INICIO) */
header.full-width nav .mod-menu .active a,
header.full-width nav .mod-menu .active span,
header.full-width nav .nav-item.active a {
    background-color: transparent !important;
    color: #ffffff !important;
}

header.full-width nav .mod-menu .active a:hover {
    background-color: var(--cassiopeia-color-primary) !important;
}

/* ======================================================= */
/* ====   UNIFICACIÓN DE FONDOS PARA LOS ARTÍCULOS     ==== */
/* ======================================================= */

/* Fuerza a que el contenedor principal de los artículos sea blanco */
.item-page, 
.com-content-article, 
.com-content-article__body,
main .com-content-article {
    background: #ffffff !important;
    background-color: #ffffff !important; /* Blanco puro para el cuerpo del artículo */
    padding: 1.5rem !important;           /* Espaciado interno elegante */
    border-radius: 8px !important;         /* Bordes curvos a juego con tus menús */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; /* Sombra sutil moderna */
    margin-bottom: 2rem !important;
}

/* Remueve dobles fondos o grises heredados del sistema */
#main-content, 
.main-wrapper, 
main {
    background: transparent !important;
    background-color: transparent !important;
}