/*
 * Identidad visual IGAXES.
 *
 * Se carga DESPUÉS de styles.css para sobreescribir el tema de la plantilla
 * sin tocar el fichero del proveedor: así una actualización de MatDash no
 * borra la marca ni obliga a rehacer el parche.
 *
 * Color corporativo tomado del logotipo oficial: #E5422C.
 */

/*
 * Paleta corporativa oficial IGAXES:
 *   Principal   #EF3D2A
 *   Oscuros     #000000 · #333333
 *   Fondos      #FFFFFF · #F4F4F2 · #D8C8B9
 *   Secundarios #7C3838 · #B76F73 · #BCCDD1
 */
:root {
  /* Declara ambos esquemas: así los controles nativos (scrollbars, <select>,
     date pickers) siguen el tema oscuro en vez de quedarse en claro. */
  color-scheme: light dark;

  --igaxes-rojo: #EF3D2A;
  --igaxes-rojo-oscuro: #D6301E;
  --igaxes-rojo-claro: #F4795F;
  --igaxes-grafito: #333333;

  /* Fondos y secundarios de marca, disponibles como tokens de acento. */
  --igaxes-fondo-suave: #F4F4F2;
  --igaxes-fondo-calido: #D8C8B9;
  --igaxes-sec-viño: #7C3838;
  --igaxes-sec-malva: #B76F73;
  --igaxes-sec-azulado: #BCCDD1;
}

/* Tema de color propio, con la misma forma que los que trae la plantilla. */
[data-bs-theme="light"][data-color-theme="Igaxes_Theme"]:root,
[data-bs-theme="dark"][data-color-theme="Igaxes_Theme"]:root {
  --bs-primary: #EF3D2A;
  --bs-primary-rgb: 239, 61, 42;
  --bs-light-primary: rgba(239, 61, 42, 0.1);
  --bs-primary-bg-subtle: rgba(239, 61, 42, 0.1);

  /* Secundario de la paleta oficial (viño #7C3838): un rojo apagado y oscuro,
     distinto del principal (más vivo) y del error (carmesí), así los tres tonos
     rojos no se confunden entre sí. */
  --bs-secondary: #7C3838;
  --bs-secondary-rgb: 124, 56, 56;
  --bs-light-secondary: rgba(124, 56, 56, 0.1);
  --bs-secondary-bg-subtle: rgba(124, 56, 56, 0.1);

}

/* Fondos claros de la paleta (#F4F4F2: fondo suave, cabeceras, tarjetas hundidas)
   SOLO en light. En dark NO se tocan: se dejan los de MatDash (oscuros), para que
   los paneles hundidos (bg-body-secondary/tertiary) no salgan en blanco. */
[data-bs-theme="light"][data-color-theme="Igaxes_Theme"]:root {
  --bs-secondary-bg: #F4F4F2;
  --bs-secondary-bg-rgb: 244, 244, 242;
  --bs-tertiary-bg: #F4F4F2;
}

[data-color-theme="Igaxes_Theme"] .btn-primary {
  --bs-btn-bg: #EF3D2A;
  --bs-btn-border-color: #EF3D2A;
  --bs-btn-hover-bg: #D6301E;
  --bs-btn-hover-border-color: #D6301E;
  --bs-btn-active-bg: #BC2718;
  --bs-btn-active-border-color: #BC2718;
}

/* La plantilla pinta el secundario en cian; se lleva al viño oficial (#7C3838)
   para que los botones "Ficha", "Volver"… no salgan de paleta. */
[data-color-theme="Igaxes_Theme"] .btn-outline-secondary {
  --bs-btn-color: #7C3838;
  --bs-btn-border-color: #7C3838;
  --bs-btn-hover-bg: #7C3838;
  --bs-btn-hover-border-color: #7C3838;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #6A3030;
  --bs-btn-active-border-color: #6A3030;
}
[data-color-theme="Igaxes_Theme"] .btn-secondary {
  --bs-btn-bg: #7C3838;
  --bs-btn-border-color: #7C3838;
  --bs-btn-hover-bg: #6A3030;
  --bs-btn-hover-border-color: #6A3030;
  --bs-btn-active-bg: #5A2828;
  --bs-btn-active-border-color: #5A2828;
}

/* La plantilla define .btn-outline-primary con el morado del tema (#635BFF)
   EXPLÍCITAMENTE, no derivado de --bs-primary: había que redefinirlo, o los
   botones outline (Abrir ficha, filtros, Economía…) salían morados. Igual con
   las utilidades primary hardcodeadas por el skin. */
[data-color-theme="Igaxes_Theme"] .btn-outline-primary {
  --bs-btn-color: #EF3D2A;
  --bs-btn-border-color: #EF3D2A;
  --bs-btn-hover-bg: #EF3D2A;
  --bs-btn-hover-border-color: #EF3D2A;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #D5341F;
  --bs-btn-active-border-color: #D5341F;
}
/* Igual que primary: la plantilla hardcodea .btn-danger/.btn-outline-danger en su
   rosa (#FF6692), no en --bs-danger. Se redefinen al granate oficial #B3123C. */
[data-color-theme="Igaxes_Theme"] .btn-danger {
  --bs-btn-bg: #B3123C;
  --bs-btn-border-color: #B3123C;
  --bs-btn-hover-bg: #990F33;
  --bs-btn-hover-border-color: #990F33;
  --bs-btn-active-bg: #7F0C2A;
  --bs-btn-active-border-color: #7F0C2A;
}
[data-color-theme="Igaxes_Theme"] .btn-outline-danger {
  --bs-btn-color: #B3123C;
  --bs-btn-border-color: #B3123C;
  --bs-btn-hover-bg: #B3123C;
  --bs-btn-hover-border-color: #B3123C;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #990F33;
  --bs-btn-active-border-color: #990F33;
}
/* Re-tematizar un botón de MatDash no es solo su color base: hay que cubrir
   TAMBIÉN el estado :disabled. El skin no fijaba --bs-btn-disabled-color/bg, así
   que Bootstrap los resolvía con los valores del proveedor y CUALQUIER botón
   deshabilitado se colaba en morado #635BFF (primary), turquesa #16CDC7
   (secondary) o rosa #FF6692 (danger). Latente en toda la app; visible hoy solo
   en el botón disabled de estado del turno. Se tapan aquí. */
[data-color-theme="Igaxes_Theme"] .btn-outline-primary {
  --bs-btn-disabled-color: #EF3D2A;
  --bs-btn-disabled-border-color: #EF3D2A;
}
[data-color-theme="Igaxes_Theme"] .btn-outline-secondary {
  --bs-btn-disabled-color: #7C3838;
  --bs-btn-disabled-border-color: #7C3838;
}
[data-color-theme="Igaxes_Theme"] .btn-outline-danger {
  --bs-btn-disabled-color: #B3123C;
  --bs-btn-disabled-border-color: #B3123C;
}
[data-color-theme="Igaxes_Theme"] .btn-primary {
  --bs-btn-disabled-bg: #EF3D2A;
  --bs-btn-disabled-border-color: #EF3D2A;
}
[data-color-theme="Igaxes_Theme"] .btn-secondary {
  --bs-btn-disabled-bg: #7C3838;
  --bs-btn-disabled-border-color: #7C3838;
}
[data-color-theme="Igaxes_Theme"] .btn-danger {
  --bs-btn-disabled-bg: #B3123C;
  --bs-btn-disabled-border-color: #B3123C;
}
[data-color-theme="Igaxes_Theme"] .text-danger { color: var(--bs-danger) !important; }
[data-color-theme="Igaxes_Theme"] .text-primary { color: var(--bs-primary) !important; }
[data-color-theme="Igaxes_Theme"] .border-primary { border-color: var(--bs-primary) !important; }
[data-color-theme="Igaxes_Theme"] .link-primary { color: var(--bs-primary) !important; }
[data-color-theme="Igaxes_Theme"] .btn-link { --bs-btn-color: var(--bs-primary); --bs-btn-hover-color: #D5341F; }

/* Ritmo vertical de MatDash: gutter y separación entre tarjetas de 30px. La app
   estaba a 16px (mb-3) y las tarjetas se tocaban; MatDash respira a 30px. Se
   respeta mb-0/m-0 para las tarjetas internas (cabeceras, nav) que no llevan aire. */
[data-color-theme="Igaxes_Theme"] .row { --bs-gutter-x: 30px; }
/* !important para vencer a las utilidades mb-* (que llevan !important) y que TODAS
   las cards de contenido queden a 30px, no solo las que no traen mb-. Respeta
   mb-0/m-0 de las tarjetas internas que van pegadas a propósito. */
[data-color-theme="Igaxes_Theme"] .card:not(.mb-0):not(.m-0) { margin-bottom: 30px !important; }

/* Selector de importancia del bloque (normal/importante/urxente). El activo hereda
   el color de SU nivel, no el del grupo: lo neutro no debe pesar más que lo urgente.
   Base neutra tipo btn-light; activo en tono subtle según nivel. */
/* Suelo de área de clic para .btn-sm (WCAG 2.5.8): 32px de alto mínimo. Los
   botones de estado, semana y filtros usan btn-sm y quedaban por debajo. */
[data-color-theme="Igaxes_Theme"] .btn-sm { min-height: 2rem; }

[data-color-theme="Igaxes_Theme"] .btn-imp {
  --bs-btn-color: #333333;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: #333333;
  --bs-btn-hover-bg: var(--bs-light, #f4f4f2);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-active-color: #333333;
  --bs-btn-active-bg: var(--bs-light, #f4f4f2);
  --bs-btn-active-border-color: var(--bs-border-color);
  text-transform: capitalize;
}
[data-color-theme="Igaxes_Theme"] .btn-imp.imp-importante.active {
  --bs-btn-active-bg: var(--bs-warning-bg-subtle);
  --bs-btn-active-color: var(--bs-warning-text-emphasis);
  --bs-btn-active-border-color: var(--bs-warning-border-subtle);
}
[data-color-theme="Igaxes_Theme"] .btn-imp.imp-urxente.active {
  --bs-btn-active-bg: var(--bs-danger-bg-subtle);
  --bs-btn-active-color: var(--bs-danger-text-emphasis);
  --bs-btn-active-border-color: var(--bs-danger-border-subtle);
}
/* Cue de gravedad ANTES de pulsar: sin volver a la jerarquía invertida, el inactivo
   lleva un borde izquierdo del tono de su nivel. El neutro (normal) no lo necesita. */
[data-color-theme="Igaxes_Theme"] .btn-imp.imp-importante:not(.active) { border-left: 3px solid var(--bs-warning-border-subtle); }
[data-color-theme="Igaxes_Theme"] .btn-imp.imp-urxente:not(.active) { border-left: 3px solid var(--bs-danger-border-subtle); }

[data-color-theme="Igaxes_Theme"] .btn-secondary {
  --bs-btn-bg: #7C3838;
  --bs-btn-border-color: #7C3838;
  --bs-btn-hover-bg: #632C2C;
  --bs-btn-hover-border-color: #632C2C;
}

/* La plantilla fija el pill activo en azul (#635bff). Se lleva al rojo de marca
   para que la pestaña seleccionada (p. ej. la barra de secciones de la vivienda)
   sea coherente con la paleta. */
[data-color-theme="Igaxes_Theme"] .nav-pills {
  --bs-nav-pills-link-active-bg: var(--bs-primary);
  --bs-nav-pills-link-active-color: #fff;
}

/* Tira de filtro por área (ficha do menor): UNA sola fila, desplazable en
   horizontal, sin envolver las píldoras en un bloque de varias líneas. Es el
   patrón de "pestañas desplazables" de Material: el filtro vive junto al
   contenido que filtra, no repartido por la página. */
/* Envoltorio con degradado a la derecha: señala que la fila de áreas continúa y
   se puede desplazar. Sin él, con el scrollbar auto-oculto de macOS la tira parece
   truncada y las áreas de la derecha se leen como inalcanzables. */
[data-color-theme="Igaxes_Theme"] .filtro-areas-wrap { position: relative; }
[data-color-theme="Igaxes_Theme"] .filtro-areas-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0.35rem;
  width: 2rem;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--bs-card-bg, #fff));
}
[data-color-theme="Igaxes_Theme"] .filtro-areas {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 0.375rem;
  padding-bottom: 0.35rem;
  scrollbar-width: thin;
  scrollbar-color: var(--igaxes-fondo-calido) transparent;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
[data-color-theme="Igaxes_Theme"] .filtro-areas::-webkit-scrollbar {
  height: 6px;
}
[data-color-theme="Igaxes_Theme"] .filtro-areas::-webkit-scrollbar-thumb {
  background: var(--igaxes-fondo-calido);
  border-radius: 3px;
}
[data-color-theme="Igaxes_Theme"] .filtro-areas .nav-link {
  white-space: nowrap;
  scroll-snap-align: start;
  border: 1px solid var(--bs-border-color);
  color: #333333;
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
}
[data-color-theme="Igaxes_Theme"] .filtro-areas .nav-link:not(.active):hover {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}
[data-color-theme="Igaxes_Theme"] .filtro-areas .nav-link.active {
  border-color: var(--bs-primary);
}

/*
 * Cabeceras de tarjeta como TÍTULOS DE SECCIÓN. La plantilla las dejaba sin peso
 * ni separación (y con cursor:move, que sugiere arrastrar): «Residentes», «Hoxe»…
 * se leían como texto suelto. Se les da jerarquía —peso, color oscuro de la
 * paleta, una línea inferior sutil— para que se reconozcan como encabezado.
 */
.card > .card-header {
  cursor: default;
  background-color: transparent;
  border-bottom: 1px solid var(--bs-border-color);
  padding-top: .8rem;
  padding-bottom: .8rem;
}
.card > .card-header strong,
.card > .card-header > .card-title {
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  color: #333333;
  letter-spacing: .2px;
}

/*
 * Fondos de la paleta oficial. El lienzo de contenido lo traía la plantilla en
 * un azul-grisáceo (#f4f7fb) fuera de marca; se lleva al fondo suave #F4F4F2.
 * Las tarjetas quedan en blanco (#FFFFFF) para destacar sobre ese fondo. El
 * beige cálido #D8C8B9 se reserva como acento (var --igaxes-fondo-calido).
 */
[data-bs-theme="light"] .body-wrapper {
  background: var(--igaxes-fondo-suave);
}

/* El menú principal (barra estrecha de iconos y su panel desplegable) comparte el
   mismo fondo que el lienzo (#F4F4F2), en vez del blanco / azul-grisáceo que traía
   la plantilla: así el menú y el contenido son una sola superficie de marca. */
[data-bs-theme="light"] .side-mini-panel,
[data-bs-theme="light"] .side-mini-panel .mini-nav,
[data-bs-theme="light"] .left-sidebar {
  background: var(--igaxes-fondo-suave);
}

/*
 * El rojo corporativo coincide con el color de "peligro" de Bootstrap. En una
 * aplicación con datos personales eso es un problema real: un botón de marca y
 * un botón de borrado no pueden parecerse. Se desplaza el rojo de error hacia
 * el carmesí para que la diferencia sea inequívoca.
 */
[data-color-theme="Igaxes_Theme"] {
  --bs-danger: #B3123C;
  --bs-danger-rgb: 179, 18, 60;
  --bs-danger-bg-subtle: rgba(179, 18, 60, 0.1);
}

[data-color-theme="Igaxes_Theme"] .btn-danger {
  --bs-btn-bg: #B3123C;
  --bs-btn-border-color: #B3123C;
  --bs-btn-hover-bg: #8E0E30;
  --bs-btn-hover-border-color: #8E0E30;
}

/* Logotipo */
.igaxes-logo {
  height: 34px;
  width: auto;
}

.igaxes-logo--compacto {
  height: 26px;
  width: auto;
}

/* La marca en la barra estrecha se reduce al símbolo cuadrado. */
.igaxes-isotipo {
  width: 30px;
  height: 30px;
  border-radius: 6px;
}

/*
 * ---------------------------------------------------------------------
 * Iconos servidos desde el servidor
 *
 * La plantilla colorea los iconos con reglas del tipo
 *
 *     .mini-nav-item.selected > a iconify-icon { color: var(--bs-white) }
 *
 * Nosotros sustituimos el componente <iconify-icon> por SVG en línea para no
 * pedir cada icono a api.iconify.design en tiempo de ejecución. El efecto
 * lateral es que ninguna de esas reglas se aplica: el icono seleccionado
 * quedaba gris sobre el fondo naranja, es decir, invisible.
 *
 * Aquí se replican esas reglas para `svg`. Se ha revisado styles.css: son las
 * diez que mencionan iconify-icon, ni una más.
 * ---------------------------------------------------------------------
 */

/* Los SVG heredan el color del texto; sin esto no reaccionan a nada. */
.side-mini-panel svg,
.sidebar-nav svg,
.topbar svg,
.theme-tab.nav-tabs .nav-item .nav-link svg {
  color: inherit;
}

/* Barra estrecha de iconos */
.side-mini-panel .mini-nav .mini-nav-item > a svg {
  z-index: 2;
  position: relative;
  color: var(--bs-heading-color);
}

.side-mini-panel .mini-nav .mini-nav-item > a:hover svg {
  color: var(--bs-primary);
}

/* El seleccionado va sobre un cuadro naranja: el icono debe ser blanco. */
.side-mini-panel .mini-nav .mini-nav-item.selected > a svg {
  color: var(--bs-white);
}

/* [P1.1] La barra de grupos muestra la ETIQUETA bajo el icono (antes: 6 iconos
   crípticos con solo tooltip). El cuadro naranja del grupo activo es un :before
   de 48x48 anclado arriba (tras el icono): la etiqueta va DEBAJO, fuera del
   cuadro, siempre legible. El icono queda en una zona de 48px que casa con él. */
.side-mini-panel .mini-nav .mini-nav-item > a {
  flex-direction: column;
  height: auto;
  padding: 0 4px 8px;
  gap: 2px;
  line-height: 1;
}
.side-mini-panel .mini-nav .mini-nav-ico {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.side-mini-panel .mini-nav .mini-nav-label {
  position: relative;
  z-index: 2;
  font-size: .625rem;
  line-height: 1.1;
  font-weight: 500;
  color: var(--bs-body-color);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.side-mini-panel .mini-nav .mini-nav-item > a:hover .mini-nav-label {
  color: var(--bs-primary);
}

/* [ALTO] En CLARO la etiqueta heredaba el gris #98A4AE de MatDash sobre el fondo
   claro del sidebar (2.37:1): ilegible, justo en el tema de diario. Se sube a
   #5a6a85 ($gray-500 de MatDash, ~5.2:1) con `body` para ganar la especificidad
   de la plantilla. En oscuro ya cumplía (6.17:1). Medido por template_matdash. */
[data-bs-theme="light"] body .side-mini-panel .mini-nav .mini-nav-label {
  color: #5a6a85 !important;
}

/* Panel desplegable */
.sidebar-nav ul .sidebar-item .sidebar-link svg {
  flex-shrink: 0;
}

/* Hover sobre fondo claro: el icono se tiñe de acento. */
.sidebar-nav ul .sidebar-item .sidebar-link:hover svg {
  color: var(--bs-primary);
}

/* Activo/seleccionado: el enlace va sobre el cuadro naranja, así que el icono
   debe ser BLANCO como el texto (antes se teñía de primary sobre fondo primary
   y quedaba invisible). El hover del propio activo también se mantiene blanco. */
.sidebar-nav ul .sidebar-item.selected > .sidebar-link svg,
.sidebar-nav ul .sidebar-item.selected > .sidebar-link.active svg,
.sidebar-nav ul .sidebar-item > .sidebar-link.active svg,
.sidebar-nav ul .sidebar-item > .sidebar-link.active:hover svg {
  color: var(--bs-white);
}

/* Pestañas con icono */
.theme-tab.nav-tabs .nav-item .nav-link.active svg {
  color: var(--bs-primary);
}

/* -----------------------------------------------------------------------------
 * Overlays del header y del minisidebar que se recortaban.
 *
 * Causa real de los desplegables del header cortados: el tema traía
 *   .topbar .navbar-nav .dropdown-menu { width: 100% }
 * —una regla pensada para el desplegable a pantalla completa en móvil— que en
 * escritorio estiraba el menú a todo el ancho y lo anclaba mal, dejando su texto
 * bajo la barra lateral. Se devuelve al tamaño de su contenido; dropdown-menu-end
 * ya lo alinea a la derecha, junto al icono.
 *
 * Y los tooltips del minisidebar escapan del recorte del simplebar con
 * data-bs-container="body"; sólo necesitan ir por encima en z-index.
 * -------------------------------------------------------------------------- */
.topbar .navbar-nav .dropdown-menu { width: auto; }
.tooltip { z-index: 1100; }

/* Los dos desplegables del header (avisos, perfil) se fijan arriba a la derecha
 * del viewport: position:fixed escapa cualquier recorte y cualquier panel que se
 * pinte por encima, y quedan siempre a la vista. Se anula el posicionado del
 * tema/Popper (transform) para que no los devuelva bajo la barra lateral. */
.topbar .navbar-nav .dropdown-menu.dropdown-menu-end {
  position: fixed !important;
  top: 62px !important;
  right: 1rem !important;
  left: auto !important;
  transform: none !important;
  z-index: 1080 !important;
}

.ig-prewrap { white-space: pre-wrap; }

/* Botón de axuda (i) junto al título. La plantilla da a .btn-icon un fondo
   propio (círculo claro) que no casa con el bloque bg-light-primary donde vive.
   Se hace transparente para que FUNDA con el fondo del bloque; sólo al pasar el
   ratón toma un velo del rojo corporativo. */
[data-color-theme="Igaxes_Theme"] .btn-axuda {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}
[data-color-theme="Igaxes_Theme"] .btn-axuda:hover,
[data-color-theme="Igaxes_Theme"] .btn-axuda:focus-visible {
  background-color: rgba(239, 61, 42, 0.12);
  border-color: transparent;
}

/* Panel de axuda contextual (offcanvas). Tipografía compacta e lexible. */
/* La plantilla redefine .offcanvas-body como flex sin padding ni scroll (para su
   panel de avisos). El panel de ayuda necesita el comportamiento normal: bloque,
   con padding y scroll vertical. Se restaura solo para este offcanvas. */
#panelAxuda .offcanvas-body {
  display: block;
  flex-grow: 1;
  padding: 1rem 1.25rem;
  overflow-y: auto;
}

.ayuda-contido {
  font-family: var(--bs-body-font-family);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--bs-body-color);
}
.ayuda-contido p { margin-bottom: .6rem; }
.ayuda-contido h2 { font-size: 1.1rem; margin-top: 0; font-weight: 600; }
.ayuda-contido h3 { font-size: 1rem; margin-top: 1.1rem; }
.ayuda-contido > :first-child { margin-top: 0; }
.ayuda-contido ul { padding-left: 1.1rem; }
.ayuda-contido li { margin-bottom: .3rem; }
.ayuda-contido blockquote {
  border-left: 3px solid var(--bs-primary);
  padding-left: .75rem; margin-left: 0; color: var(--bs-secondary-color);
}
.ayuda-contido code { font-size: .85em; }

/* ============================================================================
 * Contraste medido por template_matdash (msg 1138) sobre el panel real: 138
 * elementos en 12 páginas, ambos temas. Correcciones de accesibilidad WCAG AA
 * SIN cambiar la paleta de marca (solo texto y modo oscuro).
 * ==========================================================================*/

/* [CRÍTICO] .btn-light en OSCURO era blanco sobre blanco (1.09:1): MatDash fija
   --bs-btn-bg al $light claro y el color cae en el blanco heredado del tema. Los
   botones "Abrir" y todo btn-light quedaban invisibles. */
[data-bs-theme="dark"] .btn-light {
  --bs-btn-bg: #242e42;
  --bs-btn-color: rgba(255, 255, 255, .85);
  --bs-btn-border-color: #313e54;
  --bs-btn-hover-bg: #2c3850;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #3a4a63;
  --bs-btn-active-bg: #1a2537;
}

/* [ALTO] El viño #7C3838 es oscuro: no contrasta sobre fondo oscuro (1.75:1). Se
   aclara SOLO en oscuro manteniendo el tono; en claro no se toca (es marca). */
[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .badge.bg-secondary-subtle { color: #d99a9a !important; }

/* [MEDIO] text-muted en oscuro (3.24:1). MatDash lo fija con
   `[data-bs-theme=dark] body .text-muted{...!important}` (0,2,1): para ganarle
   hay que igualar ese `body` (medido por template_matdash; sin él perdía por un
   elemento). 3.24:1 -> ~4.6:1. */
[data-bs-theme="dark"] { --bs-secondary-color: #8b98a5; }
[data-bs-theme="dark"] body .text-muted { color: #8b98a5 !important; }

/* [MEDIO] Rojo de marca en TEXTO (outline y enlaces) sobre blanco: 3.91:1. Un tono
   apenas más oscuro solo para texto sube a ~5.1:1; el botón SÓLIDO conserva el rojo
   vivo (#EF3D2A), que como componente de interfaz ya cumple 3:1. Solo en claro. */
[data-bs-theme="light"][data-color-theme="Igaxes_Theme"] .text-primary { color: #C9301F !important; }
[data-bs-theme="light"][data-color-theme="Igaxes_Theme"] .btn-outline-primary { --bs-btn-color: #C9301F; }

/* success-subtle en CLARO (2.04:1): el único badge subtle que falla de verdad en
   nuestras pantallas. Necesita !important para ganar al color del badge. */
[data-bs-theme="light"][data-color-theme="Igaxes_Theme"] .badge.bg-success-subtle { color: #146c38 !important; }

/* [ALTO] Mismo patrón que btn-light: contenedores con fondo claro FIJO (#eff4fa,
   el $light de MatDash) que no se re-tematizan en oscuro -> texto claro sobre
   fondo claro. La regla general cubre .bg-light. */
[data-bs-theme="dark"] .bg-light {
  background-color: #242e42 !important;
  color: rgba(255, 255, 255, .85);
}

/* /quendas: las filas de fin de semana usan la VARIANTE de tabla .table-light,
   que no pinta con background-color sino con las variables --bs-table-*; por eso
   el fondo #eff4fa persistía en oscuro y los números de día quedaban invisibles
   (1.06:1). Se re-tematiza la variante, no el background. */
[data-bs-theme="dark"] .table-light {
  --bs-table-color: rgba(255, 255, 255, .85);
  --bs-table-bg: #242e42;
  --bs-table-border-color: #313e54;
  --bs-table-striped-color: rgba(255, 255, 255, .85);
  --bs-table-hover-color: rgba(255, 255, 255, .9);
}

/* [PLANTILLA] badge/text .text-bg-warning: blanco sobre amarillo #F8C20A es
   ilegible (1.65:1) en ambos temas. Texto oscuro -> 8.1:1. */
.text-bg-warning { color: #3d2f00 !important; }

/* [MEDIO] Rojo de marca en TEXTO en OSCURO (#EF3D2A sobre #1a2537: 3.94:1). Al
   revés que en claro: aquí hay que ACLARAR, no oscurecer. #ff7d6e da ~5.2:1 y
   sigue siendo el rojo de marca, solo más claro. El botón SÓLIDO en oscuro no se
   toca (blanco sobre #EF3D2A pasa). Medido por template_matdash. */
[data-bs-theme="dark"][data-color-theme="Igaxes_Theme"] .text-primary,
[data-bs-theme="dark"][data-color-theme="Igaxes_Theme"] .badge.bg-primary-subtle {
  color: #ff7d6e !important;
}
[data-bs-theme="dark"][data-color-theme="Igaxes_Theme"] .btn-outline-primary {
  --bs-btn-color: #ff7d6e;
  --bs-btn-border-color: #ff7d6e;
}

/* [MEDIO] Verde #36C76C de MatDash usado como TEXTO (fuera de badge) en CLARO:
   2.04-2.20:1. Mismo arreglo que el badge success-subtle. Medido. */
[data-bs-theme="light"][data-color-theme="Igaxes_Theme"] .text-success { color: #146c38 !important; }

/* [MEDIO] .list-group-item.active de MatDash usa o morado (#635BFF) por variables
   propias (--bs-list-group-active-bg/border), non --bs-primary: os elementos
   seleccionados (o índice de módulos e leccións do Tutorial) saían morados.
   Redefínense ao vermello corporativo. Mesmo patrón que .btn-outline-primary. */
[data-color-theme="Igaxes_Theme"] .list-group-item.active {
  --bs-list-group-active-bg: var(--bs-primary);
  --bs-list-group-active-border-color: var(--bs-primary);
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Diagramas (SVG) e imaxes no contido da documentación: que escalen ao ancho da
   columna e non desborden. Un marco lixeiro para separar do texto. */
.doc-contenido img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.25rem auto;
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  padding: .5rem;
  background: var(--bs-body-bg);
}

/* Diagramas clicables: indican que se poden abrir a maior tamaño. */
.doc-contenido a.doc-diagrama { display: block; cursor: zoom-in; }
.doc-contenido a.doc-diagrama:hover img { border-color: var(--bs-primary); }