/* =====================================================================
 * Khognitive Learn — identidad visual
 * =====================================================================
 *
 * Los tokens están tomados literalmente de hrhomecare/resources/css/app.css,
 * donde ya estaban declarados y comentados. No se inventa paleta: el objetivo
 * es que este producto y el resto de Khognitive se vean del mismo sistema.
 *
 * Aquel proyecto es Tailwind 4; este es Bootstrap 4 con 116 plantillas y
 * Angular 1.x. Las utilidades no se pueden portar, pero los tokens sí, y son
 * los que de verdad definen la estética. Esta hoja los mapea sobre lo que
 * Bootstrap ya pinta, así que cambia botones, enlaces, tarjetas y formularios
 * en todo el sitio sin tocar una sola plantilla.
 *
 * Se carga DESPUÉS del CSS del tema para poder ganarle sin !important salvo
 * donde Bootstrap usa selectores muy específicos.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * Tipografía autoalojada
 * IBM Plex, la misma de hrhomecare: institucional y legible en tablas.
 * Autoalojada a propósito — un CDN de fuentes sería una dependencia externa
 * más en una plataforma que guarda expedientes de formación.
 * ------------------------------------------------------------------- */

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------------
 * Tokens
 * ------------------------------------------------------------------- */

:root {
  /* Brand — navy de Khognitive: primario, botones, navegación activa */
  --kl-brand-50:  #eef2fb;
  --kl-brand-100: #d6def3;
  --kl-brand-200: #b0c1e6;
  --kl-brand-300: #839dd3;
  --kl-brand-400: #5476b8;
  --kl-brand-500: #33559a;
  --kl-brand-600: #21407b;
  --kl-brand-700: #0e2a5a;
  --kl-brand-800: #0b2149;
  --kl-brand-900: #0a1c3d;
  --kl-brand-950: #061229;

  /* Accent — teal: enlaces, gráficas, estado correcto */
  --kl-accent-50:  #e7f7f3;
  --kl-accent-100: #c3ece4;
  --kl-accent-200: #8fdccf;
  --kl-accent-300: #54c8b6;
  --kl-accent-400: #25af9c;
  --kl-accent-500: #159e8c;
  --kl-accent-600: #0f8073;
  --kl-accent-700: #106a60;
  --kl-accent-800: #12554e;
  --kl-accent-900: #124842;
  --kl-accent-950: #05302b;

  /* Ink — slate frío: texto y superficies */
  --kl-ink-50:  #f8fafc;
  --kl-ink-100: #f1f5f9;
  --kl-ink-200: #e2e8f0;
  --kl-ink-300: #cbd5e1;
  --kl-ink-400: #94a3b8;
  --kl-ink-500: #64748b;
  --kl-ink-600: #475569;
  --kl-ink-700: #334155;
  --kl-ink-800: #1e293b;
  --kl-ink-900: #0f172a;
  --kl-ink-950: #0a1320;

  /* Roles — modo claro */
  --kl-ground:      var(--kl-ink-50);
  --kl-surface:     #ffffff;
  --kl-surface-2:   var(--kl-ink-100);
  --kl-text:        var(--kl-ink-900);
  --kl-text-muted:  var(--kl-ink-500);
  --kl-text-soft:   var(--kl-ink-400);
  --kl-line:        var(--kl-ink-200);
  --kl-line-soft:   var(--kl-ink-100);
  --kl-primary:     var(--kl-brand-700);
  --kl-primary-h:   var(--kl-brand-800);
  --kl-link:        var(--kl-accent-600);
  --kl-link-h:      var(--kl-accent-700);

  /* Semánticos — separados del acento a propósito */
  --kl-ok:      var(--kl-accent-700);
  --kl-ok-bg:   var(--kl-accent-100);
  --kl-warn:    #92610a;
  --kl-warn-bg: #fdf0d5;
  --kl-crit:    #a8213f;
  --kl-crit-bg: #fbe4e9;

  --kl-radius:    10px;
  --kl-radius-sm: 8px;
  --kl-shadow:    0 1px 2px rgba(10, 28, 61, .06), 0 1px 3px rgba(10, 28, 61, .04);

  --kl-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --kl-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
}

/*
 * Modo oscuro.
 *
 * Se resuelve en dos frentes porque el LMS no tiene conmutador propio:
 *   - `prefers-color-scheme` para quien lo tenga puesto en el sistema
 *   - `[data-kl-theme]` en <html> para el conmutador manual
 * La preferencia explícita gana sobre la del sistema en ambos sentidos.
 *
 * Solo se redefinen los ROLES, nunca las rampas: así ningún componente
 * necesita saber en qué tema está.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-kl-theme="light"]) {
    --kl-ground:     var(--kl-ink-950);
    --kl-surface:    var(--kl-ink-900);
    --kl-surface-2:  var(--kl-ink-800);
    --kl-text:       var(--kl-ink-100);
    --kl-text-muted: var(--kl-ink-400);
    --kl-text-soft:  var(--kl-ink-500);
    --kl-line:       var(--kl-ink-800);
    --kl-line-soft:  #16202f;
    --kl-primary:    var(--kl-accent-600);
    --kl-primary-h:  var(--kl-accent-500);
    --kl-link:       var(--kl-accent-400);
    --kl-link-h:     var(--kl-accent-300);
    --kl-ok:         var(--kl-accent-300);
    --kl-ok-bg:      #103029;
    --kl-warn:       #e0b45a;
    --kl-warn-bg:    #2e2411;
    --kl-crit:       #f08a9f;
    --kl-crit-bg:    #2f1520;
    --kl-shadow:     none;
  }
}

:root[data-kl-theme="dark"] {
  --kl-ground:     var(--kl-ink-950);
  --kl-surface:    var(--kl-ink-900);
  --kl-surface-2:  var(--kl-ink-800);
  --kl-text:       var(--kl-ink-100);
  --kl-text-muted: var(--kl-ink-400);
  --kl-text-soft:  var(--kl-ink-500);
  --kl-line:       var(--kl-ink-800);
  --kl-line-soft:  #16202f;
  --kl-primary:    var(--kl-accent-600);
  --kl-primary-h:  var(--kl-accent-500);
  --kl-link:       var(--kl-accent-400);
  --kl-link-h:     var(--kl-accent-300);
  --kl-ok:         var(--kl-accent-300);
  --kl-ok-bg:      #103029;
  --kl-warn:       #e0b45a;
  --kl-warn-bg:    #2e2411;
  --kl-crit:       #f08a9f;
  --kl-crit-bg:    #2f1520;
  --kl-shadow:     none;
}

/* ---------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------- */

body {
  font-family: var(--kl-sans);
  background-color: var(--kl-ground);
  color: var(--kl-text);
  font-feature-settings: 'cv05', 'ss01';
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--kl-sans);
  color: var(--kl-text);
  letter-spacing: -0.012em;
}

/* Cifras tabulares donde hay datos: media aplicación son tablas de
   vencimientos, notas y fechas, y desalineadas se leen mucho peor. */
table, .tabular, code, .badge { font-variant-numeric: tabular-nums; }

code, kbd, pre, samp { font-family: var(--kl-mono); }

a { color: var(--kl-link); }
a:hover, a:focus { color: var(--kl-link-h); }

:focus-visible {
  outline: 2px solid var(--kl-accent-500);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Componentes de Bootstrap remapeados
 * ------------------------------------------------------------------- */

.btn {
  border-radius: var(--kl-radius-sm);
  font-weight: 500;
  letter-spacing: 0;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background-color: var(--kl-primary);
  border-color: var(--kl-primary);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--kl-primary-h);
  border-color: var(--kl-primary-h);
  color: #fff;
}

.btn-secondary {
  background-color: var(--kl-surface);
  border-color: var(--kl-line);
  color: var(--kl-text);
}
.btn-secondary:hover { background-color: var(--kl-surface-2); border-color: var(--kl-ink-300); color: var(--kl-text); }

.btn-success, .btn-info { background-color: var(--kl-accent-600); border-color: var(--kl-accent-600); color: #fff; }
.btn-success:hover, .btn-info:hover { background-color: var(--kl-accent-700); border-color: var(--kl-accent-700); }

.btn-outline-primary { color: var(--kl-primary); border-color: var(--kl-primary); }
.btn-outline-primary:hover { background-color: var(--kl-primary); border-color: var(--kl-primary); color: #fff; }

.card, .panel {
  background-color: var(--kl-surface);
  border: 1px solid var(--kl-line);
  border-radius: var(--kl-radius);
  box-shadow: var(--kl-shadow);
  color: var(--kl-text);
}
.card-header {
  background-color: var(--kl-surface);
  border-bottom: 1px solid var(--kl-line);
  color: var(--kl-text);
  font-weight: 600;
}

.form-control, .custom-select {
  background-color: var(--kl-surface);
  border: 1px solid var(--kl-line);
  border-radius: var(--kl-radius-sm);
  color: var(--kl-text);
  box-shadow: var(--kl-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .custom-select:focus {
  background-color: var(--kl-surface);
  border-color: var(--kl-accent-500);
  color: var(--kl-text);
  box-shadow: 0 0 0 3px rgba(21, 158, 140, .18);
}
.form-control::placeholder { color: var(--kl-text-soft); }
label, .field-label { color: var(--kl-text-muted); font-weight: 500; }

.badge { border-radius: 999px; font-weight: 500; padding: .35em .7em; }
.badge-success { background-color: var(--kl-ok-bg);   color: var(--kl-ok); }
.badge-warning { background-color: var(--kl-warn-bg); color: var(--kl-warn); }
.badge-danger  { background-color: var(--kl-crit-bg); color: var(--kl-crit); }
.badge-primary { background-color: var(--kl-brand-50); color: var(--kl-brand-800); }
.badge-secondary, .badge-light { background-color: var(--kl-surface-2); color: var(--kl-text-muted); }
.badge-info    { background-color: var(--kl-accent-100); color: var(--kl-accent-800); }
.badge-dark    { background-color: var(--kl-ink-800); color: var(--kl-ink-100); }

.table { color: var(--kl-text); }
.table thead th {
  border-bottom: 1px solid var(--kl-line);
  background-color: var(--kl-surface-2);
  color: var(--kl-text-soft);
  font-family: var(--kl-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
}
.table td, .table th { border-top: 1px solid var(--kl-line-soft); }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--kl-surface-2); }
.table-hover tbody tr:hover { background-color: var(--kl-surface-2); color: var(--kl-text); }

.progress { background-color: var(--kl-surface-2); border-radius: 999px; }
.progress-bar { background-color: var(--kl-accent-600); }

.alert { border-radius: var(--kl-radius-sm); border: 1px solid transparent; }
.alert-success { background-color: var(--kl-ok-bg);   color: var(--kl-ok);   border-color: var(--kl-accent-200); }
.alert-warning { background-color: var(--kl-warn-bg); color: var(--kl-warn); border-color: #e8cf9a; }
.alert-danger  { background-color: var(--kl-crit-bg); color: var(--kl-crit); border-color: #f0bcc8; }

.modal-content { background-color: var(--kl-surface); color: var(--kl-text); border: 1px solid var(--kl-line); border-radius: var(--kl-radius); }
.modal-header, .modal-footer { border-color: var(--kl-line); }

.dropdown-menu {
  background-color: var(--kl-surface);
  border: 1px solid var(--kl-line);
  border-radius: var(--kl-radius-sm);
  box-shadow: 0 8px 24px rgba(10, 28, 61, .12);
}
.dropdown-item { color: var(--kl-text); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--kl-surface-2); color: var(--kl-text); }

.text-muted { color: var(--kl-text-muted) !important; }
.bg-light   { background-color: var(--kl-ground) !important; }
.bg-dark    { background-color: var(--kl-brand-900) !important; }
hr, .border-top, .border-bottom { border-color: var(--kl-line) !important; }

/* ---------------------------------------------------------------------
 * Conmutador de tema
 * ------------------------------------------------------------------- */

.kl-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--kl-radius-sm);
  border: 1px solid var(--kl-line);
  background: var(--kl-surface);
  color: var(--kl-text-muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.kl-theme-toggle:hover { color: var(--kl-text); border-color: var(--kl-ink-300); }

/* Cada icono se muestra en su tema. El de luna aparece en claro (para
   ir a oscuro) y el de sol en oscuro. */
.kl-theme-toggle .kl-icon-dark { display: inline; }
.kl-theme-toggle .kl-icon-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-kl-theme="light"]) .kl-theme-toggle .kl-icon-dark { display: none; }
  :root:not([data-kl-theme="light"]) .kl-theme-toggle .kl-icon-light { display: inline; }
}
:root[data-kl-theme="dark"] .kl-theme-toggle .kl-icon-dark { display: none; }
:root[data-kl-theme="dark"] .kl-theme-toggle .kl-icon-light { display: inline; }
:root[data-kl-theme="light"] .kl-theme-toggle .kl-icon-dark { display: inline; }
:root[data-kl-theme="light"] .kl-theme-toggle .kl-icon-light { display: none; }

/* ---------------------------------------------------------------------
 * Selector de idioma — pastilla segmentada, como en hrhomecare
 * ------------------------------------------------------------------- */

.kl-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--kl-radius-sm);
  border: 1px solid var(--kl-line);
  background: var(--kl-surface);
  font-size: 12px;
  font-weight: 600;
}
.kl-lang a {
  padding: 4px 9px;
  border-radius: 6px;
  color: var(--kl-text-muted);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.kl-lang a:hover { color: var(--kl-text); }
.kl-lang a.is-active { background: var(--kl-primary); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* =====================================================================
 * Shell de aplicación interna
 * =====================================================================
 * Sustituye a la barra del marketplace: sin carrito, sin lista de deseos,
 * sin historial de compras. Los cursos son gratuitos y el alta la hace la
 * clínica, así que no hay nada que comprar ni que promocionar.
 * ===================================================================== */

.kl-topbar {
  background: var(--kl-surface);
  border-bottom: 1px solid var(--kl-line);
  position: relative;
  z-index: 40;
}
.kl-topbar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 26px;
}
.kl-topbar-wide .kl-topbar-inner { max-width: none; }

.kl-topbar-brand { display: inline-flex; align-items: center; flex: none; }
.kl-topbar-brand img { height: 34px; width: auto; display: block; }

.kl-nav { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; }
.kl-nav-link {
  padding: 7px 13px;
  border-radius: var(--kl-radius-sm);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--kl-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.kl-nav-link:hover { background: var(--kl-surface-2); color: var(--kl-text); text-decoration: none; }
.kl-nav-active { background: var(--kl-brand-50); color: var(--kl-brand-800); }
:root[data-kl-theme="dark"] .kl-nav-active { background: rgba(21,158,140,.14); color: var(--kl-accent-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-kl-theme="light"]) .kl-nav-active { background: rgba(21,158,140,.14); color: var(--kl-accent-300); }
}

.kl-topbar-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* --- Menú de cuenta --- */
.kl-account { position: relative; }
.kl-account-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--kl-line);
  border-radius: 999px;
  background: var(--kl-surface);
  color: var(--kl-text-muted);
  font-family: inherit; font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.kl-account-btn:hover { border-color: var(--kl-ink-300); color: var(--kl-text); }
.kl-avatar { width: 26px; height: 26px; border-radius: 999px; object-fit: cover; display: block; }
.kl-account-name { font-weight: 500; }

.kl-account-menu {
  display: none;
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 244px;
  background: var(--kl-surface);
  border: 1px solid var(--kl-line);
  border-radius: var(--kl-radius);
  box-shadow: 0 10px 30px rgba(10,28,61,.14);
  padding: 6px;
  z-index: 50;
}
.kl-account-menu.is-open { display: block; }
.kl-account-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--kl-line); margin-bottom: 6px; }
.kl-account-full { display: block; font-weight: 600; font-size: 14.5px; color: var(--kl-text); }
.kl-account-role { display: block; font-size: 12.5px; color: var(--kl-text-muted); margin-top: 2px; }
.kl-account-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: var(--kl-radius-sm);
  font-size: 14px; color: var(--kl-text); text-decoration: none;
  transition: background-color .15s ease;
}
.kl-account-menu a:hover { background: var(--kl-surface-2); color: var(--kl-text); text-decoration: none; }
.kl-account-sep { height: 1px; background: var(--kl-line); margin: 6px 0; }
.kl-account-out { color: var(--kl-crit) !important; }
.kl-badge {
  background: var(--kl-warn-bg); color: var(--kl-warn);
  border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 600;
}

@media (max-width: 575px) {
  .kl-topbar-inner { gap: 14px; padding: 0 14px; height: 56px; }
  .kl-nav { gap: 2px; }
  .kl-nav-link { padding: 6px 9px; font-size: 13.5px; }
  .kl-topbar-brand img { height: 28px; }
}

/* =====================================================================
 * Red de legibilidad
 * =====================================================================
 * El LMS fija colores literales en cientos de sitios: utilidades de
 * Bootstrap con el color en el nombre (.text-dark, .bg-light), reglas de
 * custom.css con `!important`, y sobre todo `p { color:#000 }`, que obliga a
 * NEGRO PURO todos los párrafos del sitio pasara lo que pasara.
 *
 * Eso rompe el modo oscuro en los dos sentidos, que es justo lo que se veía:
 * texto que se oscurece cuando debería aclararse, y viceversa.
 *
 * Se corrige aquí, en un sitio, y no en cada plantilla — es lo mismo que
 * hace hrhomecare con su bloque de legibilidad. Sin capa (@layer) y al final
 * del fichero para ganar a las utilidades sin depender del orden de carga.
 * ------------------------------------------------------------------- */

/* El peor de todos. Los párrafos vuelven a heredar del token; una clase de
   color explícita (.text-muted, .text-white) sigue ganando por especificidad,
   así que esto no pisa nada que alguien haya decidido a propósito. */
p { color: var(--kl-text); }

/* Utilidades cuyo NOMBRE describe un color fijo. En claro significan lo que
   dicen; en oscuro hay que invertir su intención, no su literal. */
.text-dark, .text-black { color: var(--kl-text) !important; }
.text-secondary         { color: var(--kl-text-muted) !important; }
.bg-white               { background-color: var(--kl-surface) !important; }
.thead-light th, .table .thead-light th {
  background-color: var(--kl-surface-2) !important;
  color: var(--kl-text-soft) !important;
}

/* .text-white y .bg-dark se usan sobre fondos oscuros a propósito (cabeceras
   de sección, el panel de marca). Se dejan intactos: ahí el literal ES la
   intención, y tocarlos volvería ilegible lo que hoy se ve bien. */

/* Reglas de custom.css que se imponen con !important */
.data-card .table:not(.table-sm) thead th {
  background: var(--kl-surface-2) !important;
  color: var(--kl-text-soft) !important;
}
.breadcrumb-item.active { color: var(--kl-text-muted); }
td.dataTables_empty     { color: var(--kl-text-muted); }

/* Contenido que viene del editor enriquecido: descripciones de curso,
   resúmenes de lección, plantillas de correo guardadas en base. Traen color
   en línea con frecuencia, y en oscuro quedan en negro sobre negro. */
.kl-rich, .kl-rich *, .card-body [class*="description"], .lesson-summary {
  color: inherit;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-kl-theme="light"]) {
    color-scheme: dark;
  }
  /* Los controles nativos (checkbox, select, scrollbar) siguen a
     color-scheme; sin esto quedan blancos sobre el panel oscuro. */
  :root:not([data-kl-theme="light"]) .bg-light,
  :root:not([data-kl-theme="light"]) .bg-white {
    background-color: var(--kl-surface) !important;
  }
  :root:not([data-kl-theme="light"]) .border,
  :root:not([data-kl-theme="light"]) .border-top,
  :root:not([data-kl-theme="light"]) .border-bottom,
  :root:not([data-kl-theme="light"]) .border-left,
  :root:not([data-kl-theme="light"]) .border-right { border-color: var(--kl-line) !important; }
}

:root[data-kl-theme="dark"] { color-scheme: dark; }
:root[data-kl-theme="dark"] .bg-light,
:root[data-kl-theme="dark"] .bg-white { background-color: var(--kl-surface) !important; }
:root[data-kl-theme="dark"] .border,
:root[data-kl-theme="dark"] .border-top,
:root[data-kl-theme="dark"] .border-bottom,
:root[data-kl-theme="dark"] .border-left,
:root[data-kl-theme="dark"] .border-right { border-color: var(--kl-line) !important; }

:root[data-kl-theme="light"] { color-scheme: light; }

/* Imágenes y logos sobre fondo oscuro: el logo lleva el texto en negro, así
   que fuera de la tarjeta blanca hay que darle una. Se aplica solo a la
   marca, no a las miniaturas de curso ni a los avatares. */
:root[data-kl-theme="dark"] .kl-topbar-brand img,
:root[data-kl-theme="dark"] header img.kl-mark {
  background: #fff; border-radius: 6px; padding: 3px 7px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-kl-theme="light"]) .kl-topbar-brand img,
  :root:not([data-kl-theme="light"]) header img.kl-mark {
    background: #fff; border-radius: 6px; padding: 3px 7px;
  }
}

/* ---------------------------------------------------------------------
 * Panel de administración en modo oscuro
 * ---------------------------------------------------------------------
 * El tema del admin fija sus superficies en blanco literal — la barra
 * lateral es `background-color:#fff` — así que sin esto el panel se queda en
 * claro mientras el resto del sitio cambia, o peor, mezcla texto claro sobre
 * fondo blanco.
 *
 * Se listan solo las superficies estructurales. Las tarjetas, tablas,
 * formularios y desplegables ya los cubren las reglas de Bootstrap de más
 * arriba, que valen igual en las dos aplicaciones.
 * ------------------------------------------------------------------- */

[data-kl-resolved="dark"] .main-sidebar,
[data-kl-resolved="dark"] .main-footer,
[data-kl-resolved="dark"] .navbar-bg,
[data-kl-resolved="dark"] .main-navbar {
  background-color: var(--kl-surface) !important;
  border-color: var(--kl-line) !important;
}
[data-kl-resolved="dark"] .main-content,
[data-kl-resolved="dark"] .main-wrapper,
[data-kl-resolved="dark"] #app { background-color: var(--kl-ground) !important; }

[data-kl-resolved="dark"] .sidebar-menu li a,
[data-kl-resolved="dark"] .sidebar-menu li a i { color: var(--kl-text-muted) !important; }
[data-kl-resolved="dark"] .sidebar-menu li a:hover { background-color: var(--kl-surface-2) !important; color: var(--kl-text) !important; }
[data-kl-resolved="dark"] .sidebar-menu li.active > a { color: var(--kl-accent-300) !important; }
[data-kl-resolved="dark"] .sidebar-menu .dropdown-menu { background-color: var(--kl-surface-2) !important; }
[data-kl-resolved="dark"] .sidebar-brand { background-color: var(--kl-surface) !important; }
[data-kl-resolved="dark"] .sidebar-brand a { color: var(--kl-text) !important; }

[data-kl-resolved="dark"] .section-header,
[data-kl-resolved="dark"] .section-header h1 { color: var(--kl-text) !important; }
[data-kl-resolved="dark"] .breadcrumb { background-color: transparent !important; }
[data-kl-resolved="dark"] .card-statistic-1 .card-wrap .card-header h4 { color: var(--kl-text-muted) !important; }
[data-kl-resolved="dark"] .card-statistic-1 .card-wrap .card-body { color: var(--kl-text) !important; }
[data-kl-resolved="dark"] .dataTables_wrapper,
[data-kl-resolved="dark"] .dataTables_info,
[data-kl-resolved="dark"] .dataTables_length,
[data-kl-resolved="dark"] .dataTables_filter { color: var(--kl-text-muted) !important; }
[data-kl-resolved="dark"] .page-link { background-color: var(--kl-surface) !important; border-color: var(--kl-line) !important; color: var(--kl-text) !important; }
[data-kl-resolved="dark"] .page-item.active .page-link { background-color: var(--kl-primary) !important; border-color: var(--kl-primary) !important; color: #fff !important; }

/* El logo del panel lleva texto negro: sobre la barra oscura necesita fondo. */
[data-kl-resolved="dark"] .sidebar-brand img,
[data-kl-resolved="dark"] .navbar-brand img { background: #fff; border-radius: 5px; padding: 2px 6px; }