/* ════════════════════════════════════════════════════════════════════
   SGE ALPHA ELITE v14.3 — BASE GLOBAL ATMOSFÉRICA
   Cargado globalmente via layout-vertical.html
   Provee: variables, atmósfera, tipografía, glassmorphism base,
           KPI cards, badges, botones, paginación Elite.
   Módulos plugin definen sobre esta base sus propios componentes.
   ════════════════════════════════════════════════════════════════════ */

/* ── 0. Imports & Variables ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --sge-blue:    #185FA5;
  --sge-mid:     #378ADD;
  --sge-cyan:    #00E5FF;
  --sge-deep:    #0a192f;
  --sge-dark:    #020810;
  --sge-success: #10B981;
  --sge-warning: #F59E0B;
  --sge-danger:  #EF4444;
  --sge-info:    #3B82F6;

  /* Adaptativos – Light */
  --alpha-bg:         #fdfdfd;
  --alpha-surface:    rgba(255,255,255,0.9);
  --alpha-border:     rgba(0,0,0,0.08);
  --alpha-text:       #0f172a;
  --alpha-text-m:     rgba(15,23,42,0.6);
  --alpha-glass-blur: 15px;
  --elite-shadow:      0 10px 40px rgba(0,0,0,0.08);
  --elite-shadow-hover:0 25px 60px rgba(0,0,0,0.15);
  --elite-radius:      16px;
  --elite-radius-lg:   24px;

  /* Superficies recesadas (paneles internos, chips, banners) — el nombre
     conserva la opacidad dark que reemplaza para que el mapeo sea obvio.
     Bug recurrente ORCH-CANON-SCALE-115..120: estos valores se usaban
     hardcodeados como rgba(255,255,255,0.0X) sin contraparte light, y
     quedaban invisibles sobre --alpha-surface (~blanco) en tema claro. */
  --alpha-inset-02: rgba(15,23,42,0.035);
  --alpha-inset-03: rgba(15,23,42,0.045);
  --alpha-inset-05: rgba(15,23,42,0.06);
  --alpha-inset-06: rgba(15,23,42,0.065);
  --alpha-inset-08: rgba(15,23,42,0.09);
  --alpha-inset-10: rgba(15,23,42,0.11);
  --alpha-inset-15: rgba(15,23,42,0.12);
}

[data-bs-theme="dark"] {
  --alpha-bg:         #020617;
  --alpha-surface:    rgba(15,23,42,0.6);
  --alpha-border:     rgba(255,255,255,0.07);
  --alpha-text:       #f8fafc;
  --alpha-text-m:     rgba(255,255,255,0.5);
  --elite-shadow:      0 15px 45px rgba(0,0,0,0.4);
  --elite-shadow-hover:0 30px 80px rgba(0,0,0,0.6);

  /* Valores originales — sin cambios, byte-identicos a los hardcodeados. */
  --alpha-inset-02: rgba(255,255,255,0.02);
  --alpha-inset-03: rgba(255,255,255,0.03);
  --alpha-inset-05: rgba(255,255,255,0.05);
  --alpha-inset-06: rgba(255,255,255,0.06);
  --alpha-inset-08: rgba(255,255,255,0.08);
  --alpha-inset-10: rgba(255,255,255,0.10);
  --alpha-inset-15: rgba(255,255,255,0.15);
}

/* ── 1. Capa Atmosférica (Orbs + Grid + Overlay) ─────────────────── */
.alpha-entrance-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: #020617;
  pointer-events: none;
  opacity: 0;
}

.alpha-orb {
  position: fixed;
  border-radius: 50%;
  opacity: 0;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  animation: sgeOrbFloat 25s ease-in-out infinite;
}

.orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(15,23,42,0.15) 0%, transparent 70%);
  top: -200px; left: -100px;
}
.orb-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(30,41,59,0.12) 0%, transparent 70%);
  top: 40%; right: -150px;
  animation-delay: -7s;
}
.orb-3 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,0,0,0.1) 0%, transparent 70%);
  bottom: 10%; left: 30%;
  animation-delay: -14s;
}

@keyframes sgeOrbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(-30px,40px) scale(1.1); }
  66%     { transform: translate(40px,-20px) scale(0.95); }
}

.alpha-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 0%, transparent 100%);
  opacity: 0.5;
}

/* Capa de estrellas/chispas (sge-efectos-visuales.js). Apagada por defecto. */
.sge-ambient-fx {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; overflow: hidden;
  opacity: .42; mix-blend-mode: screen; contain: strict;
}
.sge-ambient-fx canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
}

.sge-fx-hint {
  font-size: 12px;
  color: var(--bs-secondary-color);
  margin: 0 0 12px;
}

/* ── 1.5 Page wrapper (Command Center) ──────────────────────────────
   .cc-page se usa en 26+ templates de plugins distintos (reportes,
   cuenta_corriente, notificaciones_sge, susbi, base/pages, etc.) pero
   solo 3 archivos la definian localmente (integracion_arca x2,
   cuenta_corriente x1) -- el resto (23 paginas) no tenia NINGUNA regla,
   dejando el primer contenedor pegado al topbar (0px medido con
   Playwright en /reportes/rotacion/). Base minima aca, igual a la que
   ya tenia cuenta-corriente.css (position/z-index) mas el margen que
   faltaba; las paginas que YA cargan su propio .cc-page (con mas reglas,
   ej. ancho fijo en integracion_arca) siguen ganando por orden de carga,
   esto solo rellena el hueco para las que no tenian nada. */
.cc-page {
  position: relative;
  z-index: 1;
  margin-top: 20px;
}

/* ── 2. Tipografía Elite ─────────────────────────────────────────── */
/* Canon de titulo de pagina (auditoria 2026-08-10, confirmado con el
   usuario contra /estadisticas/ -- .sge-page-title es el nombre que
   SGE_STYLE_GUIDE.md documenta desde siempre, .elite-page-title/.wh-page-title
   son el mismo estilo bajo el nombre que ya usan 75 templates -- se alias
   en vez de renombrar para no tocar HTML que no hace falta tocar. Color
   solido (no gradiente): mejor legibilidad/contraste, y evita que cada
   modulo invente su propio gradiente -- ver journal de GOV-SEC-83
   entrada "auditoria tipografia" para el detalle de los 13 grupos
   visuales que este cambio unifica. */
.sge-page-title, .elite-page-title, .wh-page-title {
  font-family: var(--sge-font-head);
  font-size: clamp(1.5rem, 2.3vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--sge-text);
  margin-bottom: 0.4rem;
  /* display:block, no inline-block (bug real, encontrado en vivo por el
     usuario 2026-08-10): inline-block dejaba al <h1> flotar en la misma
     linea que un hermano inline-flex (el eyebrow de arriba) en vez de
     bajar de linea -- invisible en mobile (no hay lugar, envuelve solo),
     pero rompia el orden eyebrow-arriba/titulo-abajo en desktop. El
     inline-block venia de una epoca con gradiente recortado a texto (el
     tamano del box tenia que ajustarse al contenido); ya no hay gradiente,
     asi que no hace falta. */
  display: block;
}

.elite-page-sub, .wh-page-sub {
  font-size: 0.78rem;
  color: var(--alpha-text-m);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── 3. Glass Panel ───────────────────────────────────────────────── */
.elite-glass-panel {
  background: var(--alpha-surface);
  backdrop-filter: blur(var(--alpha-glass-blur));
  -webkit-backdrop-filter: blur(var(--alpha-glass-blur));
  border: 1px solid var(--alpha-border);
  border-radius: var(--elite-radius-lg);
  box-shadow: var(--elite-shadow);
  padding: 1.5rem;
}

/* ── 3.5 Grid Layout (wrapper de filas de KPI cards) ────────────────
   Usada en 25+ templates de plugins distintos (facturacion, reportes,
   gestion_alquileres, ml_analytics, base/pages, etc.) pero SOLO estaba
   definida en gestion_alquileres/static/gestion_alquileres/css/elite_rentals.css
   -- cualquier pagina que no cargara ESE archivo especifico (la inmensa
   mayoria) veia sus KPI cards apiladas en columna en vez de en grilla.
   Regla identica movida aca (global, cargada por layout-vertical.html
   en TODA pagina) para que funcione en todos los templates que ya la
   usaban asumiendo que era una utilidad compartida. */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* ── 4. KPI Cards Elite ──────────────────────────────────────────── */
.elite-kpi-card {
  position: relative; overflow: hidden;
  background: var(--alpha-surface);
  backdrop-filter: blur(var(--alpha-glass-blur));
  -webkit-backdrop-filter: blur(var(--alpha-glass-blur));
  border: 1px solid var(--alpha-border);
  border-radius: var(--elite-radius-lg);
  padding: 1.5rem;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease, border-color 0.3s;
  box-shadow: 0 5px 20px rgba(0,0,0,0.06);
  cursor: default;
}
.elite-kpi-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--elite-shadow-hover);
  border-color: rgba(255,255,255,0.15);
}
.elite-kpi-glare {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(255,255,255,0.08) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.4s;
  border-radius: inherit;
}
.elite-kpi-card:hover .elite-kpi-glare { opacity: 1; }

.elite-kpi-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  background: rgba(24,95,165,0.12);
  color: var(--sge-blue);
  margin-bottom: 1rem;
}
.elite-kpi-value {
  font-size: 2rem; font-weight: 900;
  color: var(--alpha-text);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.3rem;
}
.elite-kpi-label {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--alpha-text-m);
}
.elite-kpi-trend {
  font-size: 0.75rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 0.5rem;
}
.trend-up   { color: var(--sge-success); }
.trend-down { color: var(--sge-danger); }

/* ── 5. Tabla Elite ──────────────────────────────────────────────── */
.elite-table-wrapper {
  background: var(--alpha-surface);
  backdrop-filter: blur(var(--alpha-glass-blur));
  -webkit-backdrop-filter: blur(var(--alpha-glass-blur));
  border: 1px solid var(--alpha-border);
  border-radius: var(--elite-radius-lg);
  overflow: hidden;
  box-shadow: var(--elite-shadow);
}
.elite-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.875rem; color: var(--alpha-text);
}
.elite-table thead th {
  padding: 1rem 1.25rem;
  font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--alpha-text-m);
  border-bottom: 1px solid var(--alpha-border);
  white-space: nowrap;
}
.elite-table tbody tr {
  transition: background 0.2s ease;
  border-bottom: 1px solid var(--alpha-border);
}
.elite-table tbody tr:last-child { border-bottom: none; }
.elite-table tbody tr:hover { background: rgba(24,95,165,0.04); }
.elite-table tbody td { padding: 0.9rem 1.25rem; vertical-align: middle; }

/* ── 6. Badges de Estado ─────────────────────────────────────────── */
.elite-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0.28rem 0.75rem;
  border-radius: 20px; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap;
}
.elite-badge::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: currentColor;
}
.badge-success { background: rgba(16,185,129,0.12); color: #10b981; border: 1px solid rgba(16,185,129,0.25); }
.badge-warning { background: rgba(245,158,11,0.12); color: #f59e0b; border: 1px solid rgba(245,158,11,0.25); }
.badge-danger  { background: rgba(239,68,68,0.12);  color: #ef4444; border: 1px solid rgba(239,68,68,0.25); }
.badge-info    { background: rgba(59,130,246,0.12); color: #3b82f6; border: 1px solid rgba(59,130,246,0.25); }
.badge-primary { background: rgba(24,95,165,0.12);  color: var(--sge-blue); border: 1px solid rgba(24,95,165,0.25); }
.badge-neutral { background: rgba(0,0,0,0.06);      color: var(--alpha-text-m); border: 1px solid var(--alpha-border); }

/* ── 7. Botones Elite ────────────────────────────────────────────── */
.elite-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  border-radius: 10px; font-size: 0.825rem; font-weight: 700;
  border: none; cursor: pointer;
  /* ORCH-CANON-SCALE-58: 'background' se saca de transition -- mismo bug ya
     confirmado en ORCH-CANON-SCALE-41 (.pw-rubro-card): una transicion sobre
     'background' cuyo valor viene de un custom property sin registrar via
     @property no repinta en un toggle de tema en vivo (color SI actualiza,
     background queda congelado en el valor del tema anterior). Verificado
     en vivo con el boton real de cambio de tema sobre .elite-btn-glass tras
     agregar su definicion global en este WO -- mismo sintoma exacto. */
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.elite-btn:hover { transform: translateY(-2px); }
.elite-btn-primary {
  /* extremo claro oscurecido de #378ADD a #2E74C4 -- con texto blanco fijo
     el original medía 3.59:1 real (no el 1:1 que reportaba el runner de
     visual QA, que no lee background-image) en el extremo mas claro del
     gradiente; #2E74C4 da 4.76:1, AA real (ORCH-CANON-SCALE-44 paso 3). */
  background: linear-gradient(135deg, var(--sge-blue), #2E74C4);
  color: #fff;
  box-shadow: 0 4px 14px rgba(24,95,165,0.35);
}
.elite-btn-primary:hover { box-shadow: 0 8px 25px rgba(24,95,165,0.5); color:#fff; }
.elite-btn-ghost {
  background: var(--alpha-surface);
  color: var(--alpha-text);
  border: 1px solid var(--alpha-border);
}
.elite-btn-ghost:hover { background: rgba(24,95,165,0.08); border-color: rgba(24,95,165,0.3); color: var(--sge-blue); }
/* ORCH-CANON-SCALE-58: .elite-btn-glass no tenia definicion global -- 33/59
   usos quedaban sin fondo/color propios (ver docs/07_auditorias/2026-07-25-
   orch-canon-scale-54-elite-btn-glass-clasificacion.md). Reusa los mismos
   tokens adaptativos que .elite-btn-ghost (ya probados en ambos temas) en
   vez de duplicar el patron dark-first hardcodeado que tenian los 7 CSS de
   plugin. Este archivo carga DESPUES que el CSS de plugin en el DOM real
   (layout_extra_css en body vs extra_css en head de base.html) por lo que
   esta regla gana la cascada sobre las definiciones de plugin -- intencional,
   no un bug: los overrides scoped [data-bs-theme=light] .sge-*-surface
   .elite-btn-glass siguen ganando por mayor especificidad donde existen. */
.elite-btn-glass {
  background: var(--alpha-surface);
  color: var(--alpha-text);
  border: 1px solid var(--alpha-border);
}
.elite-btn-glass:hover { background: rgba(24,95,165,0.08); border-color: rgba(24,95,165,0.3); color: var(--sge-blue); }
.elite-btn-danger {
  background: rgba(239,68,68,0.1);
  color: #ef4444; border: 1px solid rgba(239,68,68,0.25);
}
.elite-btn-danger:hover { background: rgba(239,68,68,0.2); box-shadow: 0 4px 14px rgba(239,68,68,0.3); }
.elite-btn-sm { padding: 0.35rem 0.85rem; font-size: 0.75rem; border-radius: 8px; }

/* ── 8. Filtro / Búsqueda ────────────────────────────────────────── */
.elite-filter-panel {
  background: var(--alpha-surface);
  backdrop-filter: blur(var(--alpha-glass-blur));
  -webkit-backdrop-filter: blur(var(--alpha-glass-blur));
  border: 1px solid var(--alpha-border);
  border-radius: var(--elite-radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.elite-search-wrap {
  position: relative; flex: 1 1 260px;
}
.elite-search-wrap i {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--alpha-text-m); font-size: 0.85rem; pointer-events: none;
}
.elite-search-input,
.elite-filter-panel input[type="text"],
.elite-filter-panel input[type="search"],
.elite-filter-panel select {
  width: 100%;
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--alpha-border);
  border-radius: 10px;
  padding: 0.6rem 1rem 0.6rem 2.5rem;
  font-size: 0.85rem; color: var(--alpha-text);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  appearance: none;
}
.elite-filter-panel select { padding-left: 1rem; }
.elite-search-input:focus,
.elite-filter-panel input:focus,
.elite-filter-panel select:focus {
  border-color: rgba(24,95,165,0.4);
  box-shadow: 0 0 0 3px rgba(24,95,165,0.08);
}

/* ── 9. Paginación Elite ─────────────────────────────────────────── */
.elite-pagination {
  display: flex; align-items: center; gap: 0.4rem;
  justify-content: center; margin-top: 1.5rem;
}
.elite-page-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 0.8rem; font-weight: 600;
  border: 1px solid var(--alpha-border);
  background: var(--alpha-surface); color: var(--alpha-text);
  cursor: pointer; transition: all 0.2s; text-decoration: none;
}
.elite-page-btn:hover { background: rgba(24,95,165,0.08); border-color: rgba(24,95,165,0.3); color: var(--sge-blue); }
.elite-page-btn.active { background: var(--sge-blue); border-color: var(--sge-blue); color: #fff; }
.elite-page-btn:disabled, .elite-page-btn.disabled { opacity: 0.4; cursor: not-allowed; }
.elite-page-info { font-size: 0.78rem; color: var(--alpha-text-m); margin: 0 0.5rem; }

/* ── 10. Empty State ─────────────────────────────────────────────── */
.elite-empty-state {
  text-align: center; padding: 4rem 2rem; color: var(--alpha-text-m);
}
.elite-empty-state-icon {
  font-size: 3rem; margin-bottom: 1rem;
  opacity: 0.4; display: block;
}
.elite-empty-state h5 { font-weight: 700; color: var(--alpha-text); margin-bottom: 0.5rem; }
.elite-empty-state p  { font-size: 0.9rem; opacity: 0.7; }

/* ── 11. Panel de Formulario ─────────────────────────────────────── */
.elite-form-panel {
  background: var(--alpha-surface);
  backdrop-filter: blur(var(--alpha-glass-blur));
  -webkit-backdrop-filter: blur(var(--alpha-glass-blur));
  border: 1px solid var(--alpha-border);
  border-radius: var(--elite-radius-lg);
  padding: 2rem;
  box-shadow: var(--elite-shadow);
}
.elite-form-label {
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--alpha-text-m); margin-bottom: 0.5rem;
  display: block;
}
.elite-form-control,
.elite-form-panel input[type="text"],
.elite-form-panel input[type="number"],
.elite-form-panel input[type="email"],
.elite-form-panel input[type="date"],
.elite-form-panel input[type="password"],
.elite-form-panel select,
.elite-form-panel textarea {
  width: 100%;
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--alpha-border);
  border-radius: 10px;
  padding: 0.65rem 1rem;
  font-size: 0.875rem; color: var(--alpha-text);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.elite-form-control:focus,
.elite-form-panel input:focus,
.elite-form-panel select:focus,
.elite-form-panel textarea:focus {
  border-color: rgba(24,95,165,0.5);
  box-shadow: 0 0 0 3px rgba(24,95,165,0.1);
  background: var(--alpha-surface);
}
.elite-form-section-title {
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sge-blue); margin-bottom: 1rem; margin-top: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(24,95,165,0.2);
}

/* ── 12. Reveal Animations ───────────────────────────────────────── */
[data-elite-reveal] {
  /* Animaciones desactivadas por solicitud del usuario */
  opacity: 1;
  transform: none;
  filter: none;
}
[data-elite-revealed] {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

/* ── 13. Tabla de Acciones / Avatar ──────────────────────────────── */
.elite-avatar {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--sge-blue), var(--sge-mid));
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em;
  flex-shrink: 0;
}
.elite-action-btn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 0.8rem;
  border: 1px solid var(--alpha-border);
  background: var(--alpha-surface); color: var(--alpha-text-m);
  cursor: pointer; transition: all 0.2s; text-decoration: none;
}
.elite-action-btn:hover { background: rgba(24,95,165,0.1); border-color: rgba(24,95,165,0.3); color: var(--sge-blue); }
.elite-action-btn.danger:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #ef4444; }

/* ── 14. Utilidades ──────────────────────────────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, var(--sge-blue), var(--sge-mid), var(--sge-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.elite-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem;
}
.elite-divider {
  height: 1px; background: var(--alpha-border); margin: 1.5rem 0;
}
.elite-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0.2rem 0.65rem; border-radius: 20px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  background: rgba(24,95,165,0.1); color: var(--sge-blue);
  border: 1px solid rgba(24,95,165,0.2);
}

 /* ── 15. Sidebar Overrides ─────────────────────────────────────── */
.main-nav .nav-icon iconify-icon,
.main-nav .sub-nav-link iconify-icon {
    color: #ffffff !important;
}

/* ORCH-CANON-SCALE-106: la regla de arriba (blanco forzado) le ganaba por
   especificidad a las clases de tinte .text-* que los items del navbar
   declaran via icon_class (plugin.json / nav_base_config) -- TODOS los
   iconos del sidebar terminaban blancos aunque tuvieran color declarado.
   Excepciones con la misma especificidad + ultima en el orden: variantes
   vivas pensadas para el sidebar oscuro (los tonos Bootstrap por defecto
   son demasiado apagados sobre navy). */
.main-nav .sub-nav-link iconify-icon.text-primary,
.main-nav .nav-icon iconify-icon.text-primary   { color: #5aa9e6 !important; }
.main-nav .sub-nav-link iconify-icon.text-info,
.main-nav .nav-icon iconify-icon.text-info      { color: #22d3ee !important; }
.main-nav .sub-nav-link iconify-icon.text-success,
.main-nav .nav-icon iconify-icon.text-success   { color: #34d399 !important; }
.main-nav .sub-nav-link iconify-icon.text-warning,
.main-nav .nav-icon iconify-icon.text-warning   { color: #fbbf24 !important; }
.main-nav .sub-nav-link iconify-icon.text-danger,
.main-nav .nav-icon iconify-icon.text-danger    { color: #f87171 !important; }
.main-nav .sub-nav-link iconify-icon.text-secondary,
.main-nav .nav-icon iconify-icon.text-secondary { color: #94a3b8 !important; }