/*  ╔══════════════════════════════════════════════════════════════╗
    ║  Anthropic-style theme (Opción A)                             ║
    ║  Capa de overrides sobre Bootstrap 5.3 + estilos legacy.      ║
    ║                                                                ║
    ║  Características:                                              ║
    ║   · Paleta cream + clay (terracota) inspirada en Anthropic.    ║
    ║   · Tipografía: Source Serif 4 (titulares) + Inter (cuerpo).   ║
    ║   · Sin gradientes ni shadows agresivos.                       ║
    ║   · Radios suaves (10–14px).                                   ║
    ║   · Mantengo naranja BEO #FF7900 disponible vía .accent-beo.   ║
    ╚══════════════════════════════════════════════════════════════╝ */

:root {
  /* ─── Cream / ink scale ──────────────────────────────────────── */
  --bg:        #FAF9F5;   /* fondo crema cálido (anthropic) */
  --surface:   #FFFFFF;   /* tarjetas, modals */
  --surface-2: #F4F2EB;   /* zebra muy sutil */

  --ink-900: #191919;     /* texto primario, negro cálido */
  --ink-800: #262624;
  --ink-700: #3C3B37;
  --ink-500: #5F5E58;     /* texto secundario */
  --ink-400: #908F85;     /* captions, placeholders */
  --ink-300: #C6C4B9;     /* borders fuertes */
  --ink-200: #E9E6DC;     /* borders, separadores */
  --ink-100: #F1EFE7;     /* fondos inertes */

  /* ─── Clay (acento principal, terracota Anthropic) ───────────── */
  --clay:      #CC785C;
  --clay-dark: #B5644A;
  --clay-soft: #F4E5DC;

  /* ─── Estados ────────────────────────────────────────────────── */
  --success:    #2D7A4E;
  --success-soft: #E5F1EB;
  --warning:    #BC6F1A;
  --warning-soft: #FAEEDB;
  --danger:     #B5483A;
  --danger-soft: #F6E1DC;
  /* Azul y violeta: los usan los chips de estado repartidos por los módulos. */
  --info:        #2563EB;
  --info-soft:   #E4EDFB;
  --purple:      #7C3AED;
  --purple-soft: #EFE7FB;

  /* Paleta del organigrama: la arma la vista en Python (apps/rrhh/views_org.py)
     y la pinta cada tarjeta por style inline, así que tiene que ser token. */
  --org-dir-bg: #FFF7E1;  --org-dir-border: #D4A72C;  --org-dir-fg: #92740B;
  --org-mm-bg:  #E3F2FD;  --org-mm-border:  #1976D2;  --org-mm-fg:  #0D47A1;
  --org-emp-bg: #F1F3F5;  --org-emp-border: #6C757D;  --org-emp-fg: #343A40;
  --org-gg-bg:  #F3E8FF;  --org-gg-border:  #7E22CE;  --org-gg-fg:  #581C87;

  /* ─── Identidad BEO preservada (uso secundario) ──────────────── */
  --beo-orange:      #FF7900;
  --beo-orange-soft: #FFF1E0;

  /* ─── Tipografía ─────────────────────────────────────────────── */
  --font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ─── Radios ─────────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-pill: 999px;

  /* ─── Sombras (sutiles, sin shadow agresivo) ─────────────────── */
  --shadow-sm:  0 1px 2px rgba(25,25,25,.04);
  --shadow-md:  0 2px 8px rgba(25,25,25,.05);
  --shadow-lg:  0 8px 24px rgba(25,25,25,.07);

  /* ─── Override de los tokens legacy del sistema ──────────────── */
  --content-bg:     var(--bg);
  --card-bg:        var(--surface);
  --card-border:    var(--ink-200);
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-500);
  --accent:         var(--clay);
}

/* ─── Body / tipografía base ──────────────────────────────────── */
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink-900);
  font-feature-settings: 'ss01', 'cv11';  /* alt glyphs Inter más editoriales */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}
h1, .h1 { font-weight: 700; letter-spacing: -0.025em; }

h4, h5, h6, .h4, .h5, .h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink-800);
}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink-900);
}

code, pre, kbd, samp {
  font-family: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
}

a { color: var(--clay); text-decoration: none; }
a:hover { color: var(--clay-dark); text-decoration: underline; text-underline-offset: 3px; }

hr { border-color: var(--ink-200); opacity: 1; }

/* ─── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.card.shadow-sm { box-shadow: var(--shadow-md) !important; }
.card.border-0 { border: 1px solid var(--ink-200) !important; }
.card-header  { background: transparent !important; border-bottom: 1px solid var(--ink-200) !important; }
.card-footer  { background: transparent !important; border-top: 1px solid var(--ink-200) !important; }

/* ─── Botones ─────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: var(--radius-sm);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.btn-sm { border-radius: var(--radius-sm); padding: .35rem .7rem; }
.btn-lg { border-radius: var(--radius-md); }

.btn-primary {
  background: var(--ink-900); border-color: var(--ink-900); color: var(--surface);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--ink-800); border-color: var(--ink-800);
}
.btn-secondary, .btn-outline-secondary {
  border-color: var(--ink-200); color: var(--ink-700); background: transparent;
}
.btn-secondary:hover, .btn-outline-secondary:hover {
  background: var(--ink-100); color: var(--ink-900); border-color: var(--ink-300);
}
.btn-outline-primary {
  color: var(--clay); border-color: var(--clay);
}
.btn-outline-primary:hover {
  background: var(--clay); color: var(--surface); border-color: var(--clay);
}
/* color explícito: en oscuro ink-900 es claro y el blanco de Bootstrap desaparece */
.btn-dark { background: var(--ink-900); border-color: var(--ink-900); color: var(--surface); }
.btn-dark:hover { background: var(--ink-800); border-color: var(--ink-800); color: var(--surface); }

.btn-success {
  background: var(--success); border-color: var(--success);
}
.btn-success:hover { background: #246B41; border-color: #246B41; }
.btn-danger {
  background: var(--danger); border-color: var(--danger);
}
.btn-danger:hover { background: #993D31; border-color: #993D31; }
.btn-warning {
  background: var(--warning); border-color: var(--warning); color: var(--surface);
}

/* Clase nueva: usa el naranja BEO cuando hace falta destacar identidad. */
.btn-beo {
  background: var(--beo-orange); border-color: var(--beo-orange); color: #fff;
}
.btn-beo:hover { background: #E66D00; border-color: #E66D00; color: #fff; }

/* ─── Forms ───────────────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border-color: var(--ink-200);
  color: var(--ink-900);
  background: var(--surface);
  font-family: var(--font-sans);
}
.form-control:focus, .form-select:focus {
  border-color: var(--clay);
  box-shadow: 0 0 0 .2rem rgba(204,120,92,.18);
}
.form-control::placeholder { color: var(--ink-400); }
.form-label { color: var(--ink-700); font-weight: 500; }
.input-group-text {
  background: var(--ink-100);
  border-color: var(--ink-200);
  color: var(--ink-700);
}

/* ─── Tablas ──────────────────────────────────────────────────── */
.table {
  --bs-table-bg: transparent;
  color: var(--ink-800);
  border-color: var(--ink-200);
}
.table > thead {
  --bs-table-bg: var(--ink-100);
  color: var(--ink-700);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.table > thead th { border-bottom: 1px solid var(--ink-200); }
.table-light { --bs-table-bg: var(--ink-100); color: var(--ink-700); }
.table-hover > tbody > tr:hover { --bs-table-accent-bg: var(--surface-2); }
.table > :not(caption) > * > * { border-color: var(--ink-200); }

/* ─── Badges ──────────────────────────────────────────────────── */
.badge {
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: var(--radius-pill);
  padding: .3em .65em;
}
.badge.text-bg-primary   { background: var(--ink-900) !important; color: var(--surface) !important; }
.badge.text-bg-secondary { background: var(--ink-100) !important; color: var(--ink-700) !important; }
.badge.text-bg-success   { background: var(--success-soft) !important; color: var(--success) !important; }
.badge.text-bg-danger    { background: var(--danger-soft) !important; color: var(--danger) !important; }
.badge.text-bg-warning   { background: var(--warning-soft) !important; color: var(--warning) !important; }
.badge.text-bg-info      { background: var(--clay-soft) !important; color: var(--clay-dark) !important; }
.badge.bg-success        { background: var(--success-soft) !important; color: var(--success) !important; }
.badge.bg-danger         { background: var(--danger-soft) !important; color: var(--danger) !important; }
.badge.bg-warning        { background: var(--warning-soft) !important; color: var(--warning) !important; }

/* ─── Alerts ──────────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}
.alert-info    { background: var(--clay-soft);   color: var(--clay-dark);   border-color: var(--clay-soft); }
.alert-success { background: var(--success-soft); color: var(--success);    border-color: var(--success-soft); }
.alert-warning { background: var(--warning-soft); color: var(--warning);    border-color: var(--warning-soft); }
.alert-danger  { background: var(--danger-soft);  color: var(--danger);     border-color: var(--danger-soft); }

/* ─── Nav pills / tabs ────────────────────────────────────────── */
.nav-pills .nav-link {
  color: var(--ink-700);
  border-radius: var(--radius-sm);
}
.nav-pills .nav-link.active {
  background: var(--ink-900);
  color: var(--surface);
}
.nav-tabs .nav-link {
  color: var(--ink-500);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-weight: 500;
}
.nav-tabs .nav-link.active {
  color: var(--clay);
  border-bottom-color: var(--clay);
  background: transparent;
}

/* ─── Text utils (muted, etc.) ────────────────────────────────── */
.text-muted { color: var(--ink-500) !important; }
.text-secondary { color: var(--ink-500) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-bg-success { background: var(--success-soft) !important; color: var(--success) !important; }

/* ─── Modal ───────────────────────────────────────────────────── */
.modal-content {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.modal-header, .modal-footer { border-color: var(--ink-200); }

/* ─── kbd ─────────────────────────────────────────────────────── */
kbd {
  background: var(--ink-100);
  color: var(--ink-800);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  padding: .1em .4em;
  font-family: ui-monospace, monospace;
  font-size: .85em;
  box-shadow: 0 1px 0 var(--ink-300);
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  RESPONSIVE — utilidades globales mobile-first                ║
   ║  Aplican a todos los módulos sin tocar templates.             ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Tipografía base más cómoda en mobile.
   16px en inputs evita el zoom-on-focus de iOS Safari. */
@media (max-width: 575.98px) {
  html { -webkit-text-size-adjust: 100%; }
  .form-control, .form-select, .form-control-sm, .form-select-sm,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], input[type="search"],
  input[type="date"], input[type="datetime-local"], textarea, select {
    font-size: 16px !important;
  }
  /* Botones, tabs y links táctiles: target mínimo 44x44 (HIG / WCAG 2.5.5) */
  .btn, .nav-link, .dropdown-item, .page-link {
    min-height: 40px;
  }
  .btn-sm { min-height: 36px; }
  .btn-lg { min-height: 48px; }
}

/* page-content: padding más chico en mobile para aprovechar el ancho */
@media (max-width: 575.98px) {
  .page-content { padding: .75rem .65rem; }
}

/* ─── Tablas: scroll horizontal automático en mobile ─────────── */
/* Estrategia: el contenedor directo de la tabla (.card-body) recibe
   overflow-x:auto, así la tabla mantiene su layout interno y sólo
   se scrollea el contenedor cuando excede el ancho disponible.
   Uso `:has()` para evitar tocar templates uno por uno. */
@media (max-width: 767.98px) {
  /* Card que contiene una tabla suelta: scroll horizontal en el body */
  .card-body:has(> .table),
  .card-body:has(> .table-responsive),
  .card-body.p-0:has(> .table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Clase utility manual si :has() no aplica */
  .card-body-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive {
    border-radius: var(--radius-md);
    -webkit-overflow-scrolling: touch;
  }
  /* Tablas: padding más compacto en mobile */
  .table > :not(caption) > * > * { padding: .5rem .55rem; font-size: .85rem; }
}

/* ─── Formularios: campos full-width en mobile ───────────────── */
/* En Bootstrap el `.col-md-*` ya colapsa a `col-12` en <768px.
   Acá agregamos: gap consistente entre filas y form-labels más legibles. */
@media (max-width: 767.98px) {
  .row > [class*="col-"] { margin-bottom: .5rem; }
  .row.g-0 > [class*="col-"] { margin-bottom: 0; }
  /* Pero si el form ya gestiona su gap con g-2/g-3, no agregar margen */
  .row.g-1 > [class*="col-"],
  .row.g-2 > [class*="col-"],
  .row.g-3 > [class*="col-"],
  .row.g-4 > [class*="col-"] { margin-bottom: 0; }
}

/* ─── Botones agrupados: stack vertical en mobile ─────────────── */
@media (max-width: 575.98px) {
  .btn-group-mobile-stack {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
  }
  .btn-group-mobile-stack > .btn { width: 100%; }
  /* Toolbars de acciones (d-flex con justify-content-end) */
  .d-flex.justify-content-end.gap-2,
  .d-flex.justify-content-between {
    flex-wrap: wrap;
  }
}

/* ─── Modales: full-screen en mobile ──────────────────────────── */
@media (max-width: 575.98px) {
  .modal:not(.modal-fullscreen-disabled) .modal-dialog {
    margin: 0;
    max-width: 100%;
    min-height: 100vh;
  }
  .modal:not(.modal-fullscreen-disabled) .modal-content {
    min-height: 100vh;
    border-radius: 0;
    border: none;
  }
  .modal-body { padding: 1rem .75rem; }
  .modal-header, .modal-footer { padding: .75rem 1rem; }
}

/* ─── KPI cards / dashboards: stack consistente ──────────────── */
/* Aplicar agregando .kpi-grid en el contenedor (opcional). Sin esto,
   los .col-md-3/.col-sm-6 ya hacen el job vía Bootstrap. */
.kpi-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
@media (max-width: 575.98px) {
  .kpi-grid { gap: .65rem; grid-template-columns: repeat(2, 1fr); }
  .kpi-grid .card-body { padding: .85rem .75rem; }
  .kpi-grid .display-6 { font-size: 1.5rem; }
  .kpi-grid .display-5 { font-size: 1.75rem; }
}

/* ─── Headings y display sizes: escalado mobile ───────────────── */
@media (max-width: 575.98px) {
  h1, .h1 { font-size: 1.5rem; }
  h2, .h2 { font-size: 1.25rem; }
  h3, .h3 { font-size: 1.1rem; }
  .display-1 { font-size: 2.5rem; }
  .display-2 { font-size: 2.25rem; }
  .display-3 { font-size: 2rem; }
  .display-4 { font-size: 1.75rem; }
  .display-5 { font-size: 1.5rem; }
  .display-6 { font-size: 1.25rem; }
}

/* ─── Imágenes: nunca desbordar ───────────────────────────────── */
img:not([width]):not([height]) { max-width: 100%; height: auto; }

/* ─── Dropdown menus: ancho razonable en mobile ───────────────── */
@media (max-width: 575.98px) {
  .dropdown-menu {
    max-width: calc(100vw - 1rem);
    overflow-x: auto;
  }
  .dropdown-menu-end {
    right: 0 !important;
    left: auto !important;
  }
}

/* ─── Cards: padding compacto en mobile ───────────────────────── */
@media (max-width: 575.98px) {
  .card-body { padding: .85rem .85rem; }
  .card-header { padding: .65rem .85rem; }
  .card-footer { padding: .65rem .85rem; }
}

/* ─── Filtros / toolbars en línea: wrap natural ───────────────── */
.filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.filters-row > * { flex: 1 1 auto; min-width: 0; }
.filters-row .btn { flex: 0 0 auto; }

/* ─── List-group items: padding cómodo táctil ─────────────────── */
@media (max-width: 575.98px) {
  .list-group-item { padding: .85rem .85rem; }
}

/* ─── Helper visibility utilities (extienden Bootstrap) ──────── */
/* Bootstrap ya tiene d-none d-md-block etc. Agregamos atajos
   semánticos para legibilidad. */
.mobile-only { display: none; }
.desktop-only { display: revert; }
@media (max-width: 767.98px) {
  .mobile-only { display: revert; }
  .desktop-only { display: none !important; }
}

/* ─── Topbar mobile (parche) ──────────────────────────────────── */
@media (max-width: 575.98px) {
  .topbar { padding: 0 .5rem; gap: .35rem; }
  .topbar-module {
    padding-right: .5rem;
    flex-shrink: 1;
    min-width: 0;
  }
  .topbar-module .module-name {
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 38vw;
  }
  .topbar-module .module-name img {
    height: 22px !important;
  }
  .topbar-module a.back {
    width: 32px; height: 32px;
    font-size: 1rem;
  }
  .topbar-submenu {
    gap: .15rem;
    /* Indicador visual de que hay scroll horizontal */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .topbar-submenu a {
    padding: .35rem .55rem;
    font-size: .78rem;
  }
  .topbar-right { gap: .15rem; }
  .topbar-icon-btn { width: 38px; height: 38px; }
  .topbar-avatar { width: 34px; height: 34px; }
  .topbar-company { display: none; }
}

/* Topbar tablet (entre mobile y desktop) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .topbar-module .module-name {
    max-width: 30vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ─── Accesibilidad: respetar prefers-reduced-motion ──────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  MODO OSCURO                                                  ║
   ║  Sólo se redefinen los tokens: todo lo de arriba los usa, así ║
   ║  que no hay que duplicar ni una regla de componente.          ║
   ║                                                                ║
   ║  El atributo lo pone el script del <head> de base.html, que    ║
   ║  resuelve la preferencia guardada (claro / oscuro / según el   ║
   ║  celular) antes del primer pintado para que no haya destello.  ║
   ╚══════════════════════════════════════════════════════════════╝ */
:root[data-bs-theme="dark"] {
  /* Negro cálido, de la misma familia que el crema: no negro puro. */
  --bg:        #1A1917;
  --surface:   #232220;
  --surface-2: #2B2926;

  /* La escala se da vuelta: ink-900 pasa a ser el texto claro. */
  --ink-900: #EDEBE5;
  --ink-800: #DEDBD3;
  --ink-700: #C5C1B7;
  --ink-500: #9B978C;
  --ink-400: #7A7669;
  --ink-300: #55524A;
  --ink-200: #3A3833;
  --ink-100: #2E2C28;

  /* Terracota un punto más brillante: el original se apaga sobre oscuro. */
  --clay:      #E09073;
  --clay-dark: #EDA88C;   /* en oscuro, el hover aclara en vez de oscurecer */
  --clay-soft: #4A342B;

  --success:      #6BC492;
  --success-soft: #1E3A2B;
  --warning:      #E0A050;
  --warning-soft: #3D2E17;
  --danger:       #E58374;
  --danger-soft:  #3F231E;
  --info:         #7FB0F2;
  --info-soft:    #1E2C40;
  --purple:       #B99AF0;
  --purple-soft:  #2E2440;

  --org-dir-bg: #3D2E17;  --org-dir-border: #C69A32;  --org-dir-fg: #E8C97A;
  --org-mm-bg:  #1E2C40;  --org-mm-border:  #4A90D9;  --org-mm-fg:  #9CC4F0;
  --org-emp-bg: #2E2C28;  --org-emp-border: #7A7669;  --org-emp-fg: #C5C1B7;
  --org-gg-bg:  #2E2440;  --org-gg-border:  #A06FD0;  --org-gg-fg:  #C9A8F0;

  --beo-orange:      #FF9433;
  --beo-orange-soft: #3D2A14;

  /* Sombras más marcadas: sobre fondo oscuro casi no se ven. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 2px 8px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.5);
}

/* Piezas que en claro dan por sentado el fondo blanco. */
:root[data-bs-theme="dark"] body { background: var(--bg); color: var(--ink-900); }
:root[data-bs-theme="dark"] .bg-white { background: var(--surface) !important; }
:root[data-bs-theme="dark"] .bg-light { background: var(--ink-100) !important; }
:root[data-bs-theme="dark"] .text-dark { color: var(--ink-900) !important; }
:root[data-bs-theme="dark"] .border { border-color: var(--ink-200) !important; }
:root[data-bs-theme="dark"] .table > thead { --bs-table-color: var(--ink-700); }
:root[data-bs-theme="dark"] .btn-outline-dark { color: var(--ink-800); border-color: var(--ink-300); }
:root[data-bs-theme="dark"] .btn-outline-dark:hover { background: var(--ink-100); color: var(--ink-900); }
:root[data-bs-theme="dark"] .btn-outline-secondary { color: var(--ink-700); border-color: var(--ink-300); }
:root[data-bs-theme="dark"] .btn-light { background: var(--ink-100); border-color: var(--ink-200); color: var(--ink-900); }
:root[data-bs-theme="dark"] .popover-body { color: var(--ink-800); }
/* Las imágenes con fondo blanco quemado (logos, planos) molestan menos así. */
:root[data-bs-theme="dark"] img.dim-on-dark { filter: brightness(.85); }

/* ─── Variantes contextuales de Bootstrap ─────────────────────────
   Bootstrap las compila con colores literales (.table-light trae un
   #f8f9fa y un negro escritos a mano), así que no siguen al
   data-bs-theme: en oscuro aparecían como una banda blanca con texto
   negro. Se repintan con los tokens, que sí se dan vuelta. */
:root[data-bs-theme="dark"] .table-light,
:root[data-bs-theme="dark"] .table-secondary {
  --bs-table-color: var(--ink-800);
  --bs-table-bg: var(--surface-2);
  --bs-table-border-color: var(--ink-200);
  --bs-table-striped-color: var(--ink-800);
  --bs-table-striped-bg: var(--ink-100);
  --bs-table-active-color: var(--ink-900);
  --bs-table-active-bg: var(--ink-100);
  --bs-table-hover-color: var(--ink-900);
  --bs-table-hover-bg: var(--ink-100);
  color: var(--ink-800);
  border-color: var(--ink-200);
}

:root[data-bs-theme="dark"] .alert-light,
:root[data-bs-theme="dark"] .alert-secondary {
  --bs-alert-color: var(--ink-800);
  --bs-alert-bg: var(--surface-2);
  --bs-alert-border-color: var(--ink-200);
  --bs-alert-link-color: var(--ink-900);
}

/* .text-bg-* lleva el color de texto con !important, así que hay que
   pisarlo con la misma arma. */
:root[data-bs-theme="dark"] .text-bg-light {
  background-color: var(--surface-2) !important;
  color: var(--ink-900) !important;
}
:root[data-bs-theme="dark"] .text-bg-dark {
  background-color: var(--ink-100) !important;
  color: var(--ink-900) !important;
}

/* El resto de las variantes semánticas, por la misma razón: Bootstrap las
   compila con un pastel claro y texto casi negro, fijos. En oscuro se leían,
   pero cortaban la pantalla con un bloque claro. */
:root[data-bs-theme="dark"] .table-primary,
:root[data-bs-theme="dark"] .table-info    { --bs-table-bg: var(--info-soft); }
:root[data-bs-theme="dark"] .table-success { --bs-table-bg: var(--success-soft); }
:root[data-bs-theme="dark"] .table-danger  { --bs-table-bg: var(--danger-soft); }
:root[data-bs-theme="dark"] .table-warning { --bs-table-bg: var(--warning-soft); }
:root[data-bs-theme="dark"] .table-primary,
:root[data-bs-theme="dark"] .table-info,
:root[data-bs-theme="dark"] .table-success,
:root[data-bs-theme="dark"] .table-danger,
:root[data-bs-theme="dark"] .table-warning {
  --bs-table-color: var(--ink-900);
  --bs-table-border-color: var(--ink-200);
  --bs-table-striped-color: var(--ink-900);
  --bs-table-active-color: var(--ink-900);
  --bs-table-hover-color: var(--ink-900);
  color: var(--ink-900);
  border-color: var(--ink-200);
}

:root[data-bs-theme="dark"] .alert-primary,
:root[data-bs-theme="dark"] .alert-info {
  --bs-alert-color: var(--info); --bs-alert-bg: var(--info-soft);
  --bs-alert-border-color: var(--info); --bs-alert-link-color: var(--info);
}
:root[data-bs-theme="dark"] .alert-success {
  --bs-alert-color: var(--success); --bs-alert-bg: var(--success-soft);
  --bs-alert-border-color: var(--success); --bs-alert-link-color: var(--success);
}
:root[data-bs-theme="dark"] .alert-danger {
  --bs-alert-color: var(--danger); --bs-alert-bg: var(--danger-soft);
  --bs-alert-border-color: var(--danger); --bs-alert-link-color: var(--danger);
}
:root[data-bs-theme="dark"] .alert-warning {
  --bs-alert-color: var(--warning); --bs-alert-bg: var(--warning-soft);
  --bs-alert-border-color: var(--warning); --bs-alert-link-color: var(--warning);
}