/* ============================================================================
   Asetlix — tema visual (design system Enterprise sobre Bootstrap 5.3)

   Fuente canónica: docs/diseno/asetlix-design-system.html (Asetlix Enterprise).
   Se carga DESPUÉS del CSS de Bootstrap y solo cambia presentación:
   no toca estructura, IDs ni clases que use el JavaScript de negocio.
   ============================================================================ */

/* ─────────────────────────────────────────── 1. TOKENS ─────────────────── */
:root {
  /* Core */
  --navy: #0B1F33;
  --navy-mid: #162D47;
  --charcoal: #102335;
  --cream: #F7F6F2;
  --accent: #1FA374;
  --accent-dim: rgba(31, 163, 116, 0.10);
  --entity: #1C2D3E;

  /* Neutros (escala cálida) */
  --n0: #FFFFFF;
  --n50: #F4F1EC;
  --n100: #E8E3DA;
  --n200: #D4CEC4;
  --n300: #BDB6AC;
  --n400: #9E9890;
  --n500: #6B6560;
  --n600: #46423E;

  /* Semánticos */
  --success: #1A8F65;
  --success-bg: #EAF5F0;
  --success-border: rgba(26, 143, 101, 0.28);
  --warning: #A06B10;
  --warning-bg: #FBF2E0;
  --warning-border: rgba(160, 107, 16, 0.28);
  --danger: #A83232;
  --danger-bg: #F9EAEA;
  --danger-border: rgba(168, 50, 50, 0.28);
  --info: #2E5A8E;
  --info-bg: #EAF0F8;
  --info-border: rgba(46, 90, 142, 0.28);

  /* Sombras */
  --sh-xs: 0 1px 2px rgba(11, 31, 51, 0.05);
  --sh-sm: 0 1px 4px rgba(11, 31, 51, 0.07), 0 1px 2px rgba(11, 31, 51, 0.04);
  --sh-md: 0 4px 16px rgba(11, 31, 51, 0.08), 0 1px 4px rgba(11, 31, 51, 0.05);
  --sh-lg: 0 16px 48px rgba(11, 31, 51, 0.12), 0 4px 12px rgba(11, 31, 51, 0.06);
  --sh-focus: 0 0 0 3px rgba(31, 163, 116, 0.25);

  /* Radios */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Tipografía */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ──────────────────────── 2. PUENTE CON VARIABLES BOOTSTRAP ────────────── */
:root {
  --bs-font-sans-serif: var(--font-sans);
  --bs-body-font-family: var(--font-sans);
  --bs-font-monospace: var(--font-mono);

  --bs-body-bg: var(--cream);
  --bs-body-bg-rgb: 247, 246, 242;
  --bs-body-color: var(--n600);
  --bs-body-color-rgb: 70, 66, 62;
  --bs-heading-color: var(--charcoal);
  --bs-emphasis-color: var(--charcoal);
  --bs-emphasis-color-rgb: 16, 35, 53;

  --bs-secondary-color: var(--n500);
  --bs-secondary-color-rgb: 107, 101, 96;
  --bs-secondary-bg: var(--n50);
  --bs-secondary-bg-rgb: 244, 241, 236;
  --bs-tertiary-color: var(--n400);
  --bs-tertiary-bg: var(--n50);
  --bs-tertiary-bg-rgb: 244, 241, 236;

  --bs-border-color: var(--n100);
  --bs-border-color-translucent: rgba(11, 31, 51, 0.09);

  --bs-border-radius: var(--r-md);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-lg);
  --bs-border-radius-xl: var(--r-xl);
  --bs-border-radius-2xl: 24px;

  --bs-box-shadow: var(--sh-md);
  --bs-box-shadow-sm: var(--sh-sm);
  --bs-box-shadow-lg: var(--sh-lg);

  /* Primario del producto: navy, nunca azul Bootstrap */
  --bs-primary: var(--navy);
  --bs-primary-rgb: 11, 31, 51;
  --bs-primary-text-emphasis: var(--navy);
  --bs-primary-bg-subtle: #E9ECEF;
  --bs-primary-border-subtle: rgba(11, 31, 51, 0.18);

  --bs-secondary: var(--n500);
  --bs-secondary-rgb: 107, 101, 96;
  --bs-secondary-text-emphasis: var(--n600);
  --bs-secondary-bg-subtle: var(--n50);
  --bs-secondary-border-subtle: var(--n200);

  --bs-success: var(--success);
  --bs-success-rgb: 26, 143, 101;
  --bs-success-text-emphasis: var(--success);
  --bs-success-bg-subtle: var(--success-bg);
  --bs-success-border-subtle: var(--success-border);

  --bs-danger: var(--danger);
  --bs-danger-rgb: 168, 50, 50;
  --bs-danger-text-emphasis: var(--danger);
  --bs-danger-bg-subtle: var(--danger-bg);
  --bs-danger-border-subtle: var(--danger-border);

  --bs-warning: var(--warning);
  --bs-warning-rgb: 160, 107, 16;
  --bs-warning-text-emphasis: var(--warning);
  --bs-warning-bg-subtle: var(--warning-bg);
  --bs-warning-border-subtle: var(--warning-border);

  --bs-info: var(--info);
  --bs-info-rgb: 46, 90, 142;
  --bs-info-text-emphasis: var(--info);
  --bs-info-bg-subtle: var(--info-bg);
  --bs-info-border-subtle: var(--info-border);

  --bs-light: var(--n50);
  --bs-light-rgb: 244, 241, 236;
  --bs-dark: var(--charcoal);
  --bs-dark-rgb: 16, 35, 53;

  --bs-link-color: var(--navy);
  --bs-link-color-rgb: 11, 31, 51;
  --bs-link-hover-color: var(--accent);
  --bs-link-hover-color-rgb: 31, 163, 116;

  --bs-focus-ring-color: rgba(31, 163, 116, 0.25);
  --bs-focus-ring-width: 3px;
  --bs-focus-ring-opacity: 1;
}

/* ───────────────────────────────────── 3. BASE ─────────────────────────── */
body {
  font-family: var(--font-sans);
  background-color: var(--cream);
  color: var(--n600);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--charcoal);
  font-weight: 700;
  letter-spacing: -0.02em;
}

a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

hr { border-top-color: var(--n100); opacity: 1; }

/* Metadatos técnicos: códigos, DNI, horas, patentes, CUIT */
code, kbd, pre, samp, .mono, .font-monospace {
  font-family: var(--font-mono);
}
code {
  color: var(--charcoal);
  background: var(--n50);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
}
.mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Scrollbar sutil */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--n200); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--n300); }

/* ─────────────────────── 4. SUPERFICIES (sobre fondo cream) ─────────────
   Bootstrap deriva varias superficies de --bs-body-bg. Como el body ahora es
   cream, hay que fijar en blanco las que deben seguir siendo "papel". */
.card { --bs-card-bg: var(--n0); }
.modal-content { --bs-modal-bg: var(--n0); }
.dropdown-menu { --bs-dropdown-bg: var(--n0); }
.list-group { --bs-list-group-bg: var(--n0); }
.accordion { --bs-accordion-bg: var(--n0); }
.pagination { --bs-pagination-bg: var(--n0); }
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
  --bs-offcanvas-bg: var(--n0);
}
.toast { --bs-toast-bg: var(--n0); }
.popover { --bs-popover-bg: var(--n0); }

/* ─────────────────────────────────── 5. NAVBAR ─────────────────────────── */
.navbar.bg-primary,
.navbar.bg-dark,
.navbar.navbar-dark {
  background-color: var(--navy) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: var(--sh-xs);
}
.navbar .navbar-brand {
  font-weight: 700;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.navbar-dark .navbar-brand,
.navbar.bg-primary .navbar-brand { color: #fff; }
.navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.72); }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active { color: #fff; }

/* Marca: cuadro navy con el símbolo Asetlix */
.asetlix-brand-mark {
  width: 1.85rem;
  height: 1.85rem;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--navy-mid);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.asetlix-brand-mark img,
.asetlix-brand-mark svg { width: 72%; height: 72%; display: block; }
.navbar-dark .asetlix-brand-mark,
.navbar.bg-primary .asetlix-brand-mark { background: rgba(255, 255, 255, 0.08); }

/* ────────────────────────────────── 6. BOTONES ─────────────────────────── */
.btn {
  --bs-btn-border-radius: 8px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.btn-lg { --bs-btn-border-radius: var(--r-md); }
.btn-sm { --bs-btn-border-radius: var(--r-sm); }

.btn-primary {
  --bs-btn-bg: var(--navy);
  --bs-btn-border-color: var(--navy);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--navy-mid);
  --bs-btn-hover-border-color: var(--navy-mid);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--charcoal);
  --bs-btn-active-border-color: var(--charcoal);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--n300);
  --bs-btn-disabled-border-color: var(--n300);
  --bs-btn-disabled-color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--charcoal);
  --bs-btn-border-color: var(--n200);
  --bs-btn-hover-bg: var(--navy);
  --bs-btn-hover-border-color: var(--navy);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--navy-mid);
  --bs-btn-active-border-color: var(--navy-mid);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: var(--n400);
  --bs-btn-disabled-border-color: var(--n200);
}
.btn-secondary {
  --bs-btn-bg: var(--n0);
  --bs-btn-border-color: var(--n200);
  --bs-btn-color: var(--charcoal);
  --bs-btn-hover-bg: var(--n50);
  --bs-btn-hover-border-color: var(--n300);
  --bs-btn-hover-color: var(--charcoal);
  --bs-btn-active-bg: var(--n100);
  --bs-btn-active-border-color: var(--n300);
  --bs-btn-active-color: var(--charcoal);
}
.btn-outline-secondary {
  --bs-btn-color: var(--n600);
  --bs-btn-border-color: var(--n200);
  --bs-btn-hover-bg: var(--n50);
  --bs-btn-hover-border-color: var(--n300);
  --bs-btn-hover-color: var(--charcoal);
  --bs-btn-active-bg: var(--n100);
  --bs-btn-active-border-color: var(--n300);
  --bs-btn-active-color: var(--charcoal);
}
.btn-success {
  --bs-btn-bg: var(--success);
  --bs-btn-border-color: var(--success);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #157A56;
  --bs-btn-hover-border-color: #157A56;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #11684A;
  --bs-btn-active-border-color: #11684A;
  --bs-btn-active-color: #fff;
}
.btn-outline-success {
  --bs-btn-color: var(--success);
  --bs-btn-border-color: var(--success-border);
  --bs-btn-hover-bg: var(--success);
  --bs-btn-hover-border-color: var(--success);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--success);
  --bs-btn-active-border-color: var(--success);
  --bs-btn-active-color: #fff;
}
.btn-danger {
  --bs-btn-bg: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #8F2A2A;
  --bs-btn-hover-border-color: #8F2A2A;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #7A2424;
  --bs-btn-active-border-color: #7A2424;
  --bs-btn-active-color: #fff;
}
.btn-outline-danger {
  --bs-btn-color: var(--danger);
  --bs-btn-border-color: var(--danger-border);
  --bs-btn-hover-bg: var(--danger);
  --bs-btn-hover-border-color: var(--danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--danger);
  --bs-btn-active-border-color: var(--danger);
  --bs-btn-active-color: #fff;
}
/* Warning del design system es ámbar oscuro: pide texto claro, no oscuro */
.btn-warning {
  --bs-btn-bg: var(--warning);
  --bs-btn-border-color: var(--warning);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #8A5C0D;
  --bs-btn-hover-border-color: #8A5C0D;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #754E0B;
  --bs-btn-active-border-color: #754E0B;
  --bs-btn-active-color: #fff;
}
.btn-outline-warning {
  --bs-btn-color: var(--warning);
  --bs-btn-border-color: var(--warning-border);
  --bs-btn-hover-bg: var(--warning);
  --bs-btn-hover-border-color: var(--warning);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--warning);
  --bs-btn-active-border-color: var(--warning);
  --bs-btn-active-color: #fff;
}
.btn-info {
  --bs-btn-bg: var(--info);
  --bs-btn-border-color: var(--info);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #274C78;
  --bs-btn-hover-border-color: #274C78;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #214065;
  --bs-btn-active-border-color: #214065;
  --bs-btn-active-color: #fff;
}
.btn-outline-info {
  --bs-btn-color: var(--info);
  --bs-btn-border-color: var(--info-border);
  --bs-btn-hover-bg: var(--info);
  --bs-btn-hover-border-color: var(--info);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--info);
  --bs-btn-active-border-color: var(--info);
  --bs-btn-active-color: #fff;
}
.btn-light {
  --bs-btn-bg: var(--n0);
  --bs-btn-border-color: var(--n200);
  --bs-btn-color: var(--charcoal);
  --bs-btn-hover-bg: var(--n50);
  --bs-btn-hover-border-color: var(--n300);
  --bs-btn-hover-color: var(--charcoal);
}
.btn-dark {
  --bs-btn-bg: var(--charcoal);
  --bs-btn-border-color: var(--charcoal);
  --bs-btn-hover-bg: var(--navy);
  --bs-btn-hover-border-color: var(--navy);
}
.btn-outline-dark {
  --bs-btn-color: var(--charcoal);
  --bs-btn-border-color: var(--n200);
  --bs-btn-hover-bg: var(--n50);
  --bs-btn-hover-border-color: var(--n300);
  --bs-btn-hover-color: var(--charcoal);
  --bs-btn-active-bg: var(--n100);
  --bs-btn-active-border-color: var(--n300);
  --bs-btn-active-color: var(--charcoal);
}
/* Botones sobre navbar navy */
.btn-outline-light {
  --bs-btn-color: rgba(255, 255, 255, 0.88);
  --bs-btn-border-color: rgba(255, 255, 255, 0.24);
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.10);
  --bs-btn-hover-border-color: rgba(255, 255, 255, 0.40);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, 0.16);
  --bs-btn-active-border-color: rgba(255, 255, 255, 0.40);
  --bs-btn-active-color: #fff;
}
.btn-link {
  --bs-btn-color: var(--navy);
  --bs-btn-hover-color: var(--accent);
}
/* Foco accesible: anillo accent en todos los botones */
.btn:focus-visible,
.btn-check:focus-visible + .btn {
  outline: 0;
  box-shadow: var(--sh-focus);
}

/* ───────────────────────── 7. FORMULARIOS Y FOCO ───────────────────────── */
.form-control,
.form-select {
  background-color: var(--n0);
  border-color: var(--n200);
  border-radius: 8px;
  color: var(--charcoal);
}
.form-control::placeholder { color: var(--n400); }
.form-control:focus,
.form-select:focus {
  background-color: var(--n0);
  border-color: var(--accent);
  box-shadow: var(--sh-focus);
  color: var(--charcoal);
}
.form-control:disabled,
.form-select:disabled {
  background-color: var(--n50);
  color: var(--n500);
}
.form-control-plaintext { color: var(--charcoal); }
.form-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--charcoal);
  margin-bottom: 0.35rem;
}
.form-text { color: var(--n500); }
.input-group-text {
  background-color: var(--n50);
  border-color: var(--n200);
  color: var(--n500);
}
.form-check-input {
  border-color: var(--n300);
}
.form-check-input:checked {
  background-color: var(--navy);
  border-color: var(--navy);
}
.form-check-input:focus {
  border-color: var(--accent);
  box-shadow: var(--sh-focus);
}
.form-switch .form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}
.form-range::-webkit-slider-thumb { background-color: var(--navy); }
.form-range::-moz-range-thumb { background-color: var(--navy); }
.was-validated .form-control:invalid,
.form-control.is-invalid { border-color: var(--danger); }
.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(168, 50, 50, 0.20); }
.invalid-feedback { color: var(--danger); }
.valid-feedback { color: var(--success); }

/* Campos de identificación / lectura de código: tabular y monoespaciado */
#scanInput,
#desk-dni,
#qr_reader_input,
#declaration_code,
input[name="dni"],
input[name="document_number"],
.input-code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Foco global no-botón. Sin tocar border-radius: los radios y checkboxes
   tienen su propia forma y ya resuelven el foco más arriba. */
input:not(.form-check-input):focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 0;
  box-shadow: var(--sh-focus);
}

/* ──────────────────────────────────── 8. CARDS ─────────────────────────── */
.card {
  border-color: var(--n100);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
}
.card.shadow, .card.shadow-sm { box-shadow: var(--sh-sm) !important; }
.card.shadow-lg { box-shadow: var(--sh-lg) !important; }
.card-header {
  background-color: var(--n50);
  border-bottom-color: var(--n100);
  font-weight: 600;
  color: var(--charcoal);
}
.card-header.bg-primary,
.card-header.bg-dark {
  background-color: var(--navy) !important;
  border-bottom-color: var(--navy) !important;
  color: #fff;
}
.card-header.bg-success { background-color: var(--success-bg) !important; color: var(--success); border-bottom-color: var(--success-border) !important; }
.card-header.bg-warning { background-color: var(--warning-bg) !important; color: var(--warning); border-bottom-color: var(--warning-border) !important; }
.card-header.bg-danger  { background-color: var(--danger-bg)  !important; color: var(--danger);  border-bottom-color: var(--danger-border)  !important; }
.card-header.bg-info    { background-color: var(--info-bg)    !important; color: var(--info);    border-bottom-color: var(--info-border)    !important; }
.card-header.bg-light   { background-color: var(--n50) !important; color: var(--charcoal); }
.card-footer {
  background-color: var(--n50);
  border-top-color: var(--n100);
}
.card-title { color: var(--charcoal); font-weight: 700; }
.card-subtitle, .card-text .text-muted { color: var(--n500); }

/* ─────────────────────────────────── 9. ALERTAS ────────────────────────── */
.alert {
  border-radius: var(--r-md);
  border-width: 1px;
  font-size: 0.925rem;
}
.alert-primary   { --bs-alert-bg: var(--n50);        --bs-alert-border-color: var(--n200);          --bs-alert-color: var(--navy); }
.alert-secondary { --bs-alert-bg: var(--n50);        --bs-alert-border-color: var(--n200);          --bs-alert-color: var(--n600); }
.alert-success   { --bs-alert-bg: var(--success-bg); --bs-alert-border-color: var(--success-border); --bs-alert-color: var(--success); }
.alert-warning   { --bs-alert-bg: var(--warning-bg); --bs-alert-border-color: var(--warning-border); --bs-alert-color: var(--warning); }
.alert-danger    { --bs-alert-bg: var(--danger-bg);  --bs-alert-border-color: var(--danger-border);  --bs-alert-color: var(--danger); }
.alert-info      { --bs-alert-bg: var(--info-bg);    --bs-alert-border-color: var(--info-border);    --bs-alert-color: var(--info); }
.alert-light     { --bs-alert-bg: var(--n0);         --bs-alert-border-color: var(--n100);           --bs-alert-color: var(--n600); }
.alert-dark      { --bs-alert-bg: var(--charcoal);   --bs-alert-border-color: var(--charcoal);       --bs-alert-color: var(--cream); }
.alert .alert-link { color: inherit; font-weight: 700; }

/* ──────────────────────── 10. BADGES / CHIPS DE ESTADO ─────────────────── */
.badge {
  --bs-badge-border-radius: 999px;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0;
  padding: 0.34em 0.7em;
}
/* Chips suaves: fondo tintado + texto fuerte (patrón del design system).
   Resuelve además el contraste de `bg-warning text-dark`. */
.badge.bg-success, .badge.text-bg-success {
  background-color: var(--success-bg) !important;
  color: var(--success) !important;
  box-shadow: inset 0 0 0 1px var(--success-border);
}
.badge.bg-warning, .badge.text-bg-warning {
  background-color: var(--warning-bg) !important;
  color: var(--warning) !important;
  box-shadow: inset 0 0 0 1px var(--warning-border);
}
.badge.bg-danger, .badge.text-bg-danger {
  background-color: var(--danger-bg) !important;
  color: var(--danger) !important;
  box-shadow: inset 0 0 0 1px var(--danger-border);
}
.badge.bg-info, .badge.text-bg-info {
  background-color: var(--info-bg) !important;
  color: var(--info) !important;
  box-shadow: inset 0 0 0 1px var(--info-border);
}
.badge.bg-primary, .badge.text-bg-primary {
  background-color: var(--navy) !important;
  color: #fff !important;
}
.badge.bg-secondary, .badge.text-bg-secondary,
.badge.bg-light, .badge.text-bg-light {
  background-color: var(--n100) !important;
  color: var(--n600) !important;
}
.badge.bg-dark, .badge.text-bg-dark {
  background-color: var(--charcoal) !important;
  color: var(--cream) !important;
}
/* Contadores circulares deben seguir siendo sólidos y legibles */
.badge.rounded-circle.bg-warning { background-color: var(--warning) !important; color: #fff !important; box-shadow: none; }
.badge.rounded-circle.bg-danger  { background-color: var(--danger)  !important; color: #fff !important; box-shadow: none; }
.badge.rounded-circle.bg-success { background-color: var(--success) !important; color: #fff !important; box-shadow: none; }

/* Semáforos del CSS legacy, alineados a semánticos */
.semaforo.green  { background: var(--success) !important; }
.semaforo.yellow { background: var(--warning) !important; }
.semaforo.orange { background: var(--warning) !important; }
.semaforo.red    { background: var(--danger) !important; }
.status-indicator.green    { color: var(--success) !important; }
.status-indicator.yellow,
.status-indicator.orange   { color: var(--warning) !important; }
.status-indicator.red      { color: var(--danger) !important; }
.status-indicator.neutral  { color: var(--n500) !important; }

/* ─────────────────────────────────── 11. TABLAS ────────────────────────── */
.table {
  --bs-table-color: var(--charcoal);
  --bs-table-border-color: var(--n100);
  --bs-table-striped-bg: var(--n50);
  --bs-table-striped-color: var(--charcoal);
  --bs-table-hover-bg: var(--n50);
  --bs-table-hover-color: var(--charcoal);
}
/* Bootstrap pinta el fondo de cada celda con un inset box-shadow, así que el
   encabezado se tiñe vía --bs-table-bg y no con background-color. */
.table > thead > tr > th,
.table > thead > tr > td {
  --bs-table-bg: var(--n50);
  color: var(--n500);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom-color: var(--n100);
}
.table > tbody td { font-weight: 500; }
.table-dark {
  --bs-table-bg: var(--navy);
  --bs-table-color: #fff;
  --bs-table-border-color: var(--navy-mid);
}
.table-dark > thead > tr > th { --bs-table-bg: var(--navy); color: rgba(255, 255, 255, 0.62); }
.table-light { --bs-table-bg: var(--n50); --bs-table-color: var(--charcoal); }
/* Filas de estado (las agrega/quita el JS de control de acceso) */
.table-success { --bs-table-bg: var(--success-bg); --bs-table-color: var(--charcoal); }
.table-warning { --bs-table-bg: var(--warning-bg); --bs-table-color: var(--charcoal); }
.table-danger  { --bs-table-bg: var(--danger-bg);  --bs-table-color: var(--charcoal); }
.table-info    { --bs-table-bg: var(--info-bg);    --bs-table-color: var(--charcoal); }
.table-responsive { border-radius: var(--r-md); }

/* ──────────── 12. NAVEGACIÓN, LISTAS, DROPDOWNS, ACORDEONES ───────────── */
.nav-link { color: var(--n600); }
.nav-link:hover { color: var(--charcoal); }
.nav-tabs {
  --bs-nav-tabs-border-color: var(--n100);
  --bs-nav-tabs-link-active-bg: var(--n0);
  --bs-nav-tabs-link-active-color: var(--charcoal);
  --bs-nav-tabs-link-active-border-color: var(--n100) var(--n100) var(--n0);
}
.nav-tabs .nav-link { font-weight: 600; }
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--navy);
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-pills-border-radius: 8px;
}
.pagination {
  --bs-pagination-color: var(--n600);
  --bs-pagination-border-color: var(--n100);
  --bs-pagination-hover-bg: var(--n50);
  --bs-pagination-hover-color: var(--charcoal);
  --bs-pagination-hover-border-color: var(--n200);
  --bs-pagination-active-bg: var(--navy);
  --bs-pagination-active-border-color: var(--navy);
  --bs-pagination-active-color: #fff;
  --bs-pagination-focus-box-shadow: var(--sh-focus);
  --bs-pagination-focus-bg: var(--n50);
  --bs-pagination-disabled-color: var(--n400);
  --bs-pagination-disabled-border-color: var(--n100);
  --bs-pagination-border-radius: 8px;
}
.list-group {
  --bs-list-group-border-color: var(--n100);
  --bs-list-group-color: var(--n600);
  --bs-list-group-border-radius: var(--r-md);
  --bs-list-group-action-hover-bg: var(--n50);
  --bs-list-group-action-hover-color: var(--charcoal);
  --bs-list-group-active-bg: var(--navy);
  --bs-list-group-active-border-color: var(--navy);
  --bs-list-group-active-color: #fff;
}
.list-group-item-primary { background-color: var(--n50); color: var(--navy); }
.list-group-item-success { background-color: var(--success-bg); color: var(--success); }
.list-group-item-warning { background-color: var(--warning-bg); color: var(--warning); }
.list-group-item-danger  { background-color: var(--danger-bg);  color: var(--danger); }
.list-group-item-info    { background-color: var(--info-bg);    color: var(--info); }
.dropdown-menu {
  --bs-dropdown-border-color: var(--n100);
  --bs-dropdown-border-radius: var(--r-md);
  --bs-dropdown-link-color: var(--n600);
  --bs-dropdown-link-hover-bg: var(--n50);
  --bs-dropdown-link-hover-color: var(--charcoal);
  --bs-dropdown-link-active-bg: var(--navy);
  --bs-dropdown-link-active-color: #fff;
  box-shadow: var(--sh-md);
}
.accordion {
  --bs-accordion-border-color: var(--n100);
  --bs-accordion-btn-color: var(--charcoal);
  --bs-accordion-btn-bg: var(--n0);
  --bs-accordion-active-color: var(--navy);
  --bs-accordion-active-bg: var(--n50);
  --bs-accordion-btn-focus-box-shadow: var(--sh-focus);
  --bs-accordion-border-radius: var(--r-md);
}
.accordion-button { font-weight: 600; }
.modal-content {
  border-color: var(--n100);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}
.modal-header { border-bottom-color: var(--n100); }
.modal-footer { border-top-color: var(--n100); }
.progress { --bs-progress-bg: var(--n100); --bs-progress-border-radius: 999px; }
.progress-bar { background-color: var(--accent); }
.progress-bar.bg-success { background-color: var(--success) !important; }
.progress-bar.bg-warning { background-color: var(--warning) !important; }
.progress-bar.bg-danger  { background-color: var(--danger) !important; }
.spinner-border, .spinner-grow { color: var(--accent); }
.tooltip { --bs-tooltip-bg: var(--charcoal); --bs-tooltip-border-radius: var(--r-sm); }
.popover { --bs-popover-border-color: var(--n100); --bs-popover-border-radius: var(--r-md); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--n400); --bs-breadcrumb-item-active-color: var(--charcoal); }

/* Fondos utilitarios sobre la escala cálida */
.bg-light { background-color: var(--n50) !important; }
.bg-white { background-color: var(--n0) !important; }
.bg-dark { background-color: var(--charcoal) !important; }
.border { border-color: var(--n100) !important; }
.border-top, .border-bottom, .border-start, .border-end { border-color: var(--n100) !important; }
.text-muted { color: var(--n500) !important; }
.text-secondary { color: var(--n500) !important; }
.shadow-sm { box-shadow: var(--sh-sm) !important; }
.shadow { box-shadow: var(--sh-md) !important; }
.shadow-lg { box-shadow: var(--sh-lg) !important; }

/* ───────────────────── 13. SELECT2 (matriz documental) ─────────────────── */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-color: var(--n200);
  border-radius: 8px;
  background-color: var(--n0);
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--accent);
  box-shadow: var(--sh-focus);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background-color: var(--navy);
  color: #fff;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--n50);
  border-color: var(--n200);
  color: var(--charcoal);
  border-radius: var(--r-sm);
}
.select2-dropdown {
  border-color: var(--n200);
  border-radius: var(--r-md);
}

/* ──────────────── 14. SHELL DEL HUB CLIENTE (tokens --hub-*) ───────────── */
:root {
  --hub-ink: var(--charcoal);
  --hub-muted: var(--n500);
  --hub-line: var(--n100);
  --hub-bg: var(--cream);
  --hub-panel: var(--n0);
  --hub-accent: var(--accent);
  --hub-accent-soft: var(--accent-dim);
  /* Sidebar oscuro navy */
  --hub-rail: var(--navy);
  --hub-rail-line: rgba(255, 255, 255, 0.07);
  --hub-rail-text: rgba(255, 255, 255, 0.68);
  --hub-rail-text-strong: #ffffff;
  --hub-rail-hover: rgba(255, 255, 255, 0.05);
  --hub-rail-active: rgba(255, 255, 255, 0.09);
}

/* ─────────────── 15. SIDEBAR CLÁSICO OSCURO (opt-in por clase) ─────────── */
.asetlix-sidebar {
  background-color: var(--navy) !important;
  border-right: 1px solid var(--hub-rail-line) !important;
}
.asetlix-sidebar > nav { background-color: transparent !important; }
@media (min-width: 768px) {
  .asetlix-sidebar { min-height: 100vh; }
}
.asetlix-sidebar h5,
.asetlix-sidebar .sidebar-title {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.55;
}
.asetlix-sidebar hr { border-top-color: var(--hub-rail-line); opacity: 1; }
.asetlix-sidebar .text-secondary,
.asetlix-sidebar .text-muted {
  color: rgba(255, 255, 255, 0.38) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.asetlix-sidebar .list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: transparent;
  --bs-list-group-color: var(--hub-rail-text);
  --bs-list-group-action-hover-bg: var(--hub-rail-hover);
  --bs-list-group-action-hover-color: var(--hub-rail-text-strong);
  --bs-list-group-action-active-bg: var(--hub-rail-active);
  --bs-list-group-action-active-color: var(--hub-rail-text-strong);
  --bs-list-group-active-bg: var(--hub-rail-active);
  --bs-list-group-active-border-color: transparent;
  --bs-list-group-active-color: var(--hub-rail-text-strong);
  gap: 1px;
}
.asetlix-sidebar .list-group-item {
  border: 0;
  border-radius: var(--r-sm);
  padding: 0.48rem 0.7rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.asetlix-sidebar .list-group-item.active {
  font-weight: 600;
}
.asetlix-sidebar .list-group-item-primary {
  background-color: rgba(31, 163, 116, 0.14);
  color: #7FD8B4;
}
.asetlix-sidebar .badge.bg-danger {
  background-color: var(--danger) !important;
  color: #fff !important;
  box-shadow: none;
}

/* ─────────────────────────────── 16. UTILIDADES ────────────────────────── */
.asetlix-kicker {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--n500);
}
.asetlix-surface {
  background: var(--n0);
  border: 1px solid var(--n100);
  border-radius: var(--r-md);
}
.asetlix-panel-navy {
  background: var(--navy);
  color: #fff;
  border-radius: var(--r-lg);
}

/* Evita animaciones si el usuario las desactivó en el sistema */
@media (prefers-reduced-motion: reduce) {
  .btn, .card, .hub-tile, .list-group-item { transition: none !important; }
}