/* ═══════════════════════════════════════════════════════════════════
   Sprint AAO.TEMAS (2026-08-25) — Temas Plata & Perla
   ───────────────────────────────────────────────────────────────────
   Sobreescribe el chrome (header .nav1 + megamenú + sidebar lateral)
   cuando <body data-theme="plata"> o data-theme="perla"> está activo.
   El tema "oscuro" es el default del CSS base (no requiere overrides).
   NO se tocan: .oc-hero--*, bubble IA, modales, tablas, cards, KPIs.
   Cada regla incluye transición suave 200ms para que el cambio se
   sienta pulido, no un flash.
   ───────────────────────────────────────────────────────────────────
   HOTFIX 2026-08-25 · Bug 1: chrome traslúcido con plata/perla.
   Todos los `background-color` del chrome usan HEX opacos con !important
   para ganar cascada frente a las reglas base (que en oscuro emplean
   rgba semi-transparentes). Ya no se usa `rgba(x,y,z, <1)` en ningún
   background dentro del chrome (header, sidebar, dropdown, megamenú,
   menú móvil, buscador). Los colores exactos plata (#e5e7eb) y perla
   (#f9fafb) se mantienen — sólo se garantiza opacidad total.
   ───────────────────────────────────────────────────────────────────
   NOTA (2026-08-25 · reemplazo grafito→perla): el tercer tema pasó de
   "grafito" (slate-700 oscuro) a "perla" (blanco premium ultra claro).
   Perla es un tema CLARO tipo Apple/Notion Light, MÁS CLARO que plata
   (~15% más luminosidad), ideal para monitores/dashboards ejecutivos.
   Valores legacy "cobre" y "grafito" en BD/localStorage se mapean
   transparentemente a "perla" (ver TemaService.cs).
   ═══════════════════════════════════════════════════════════════════ */

/* Transición global para el chrome — activa en cualquier tema. */
body,
body .nav1,
body .sb,
body .mm-btn,
body .mm-panel,
body .mm-item,
body .sb-item,
body .sb-toggle,
body .navbar__empresa-btn,
body .navbar__breadcrumb,
body .profile-dd,
body .pdd-item,
body .n1-hamburger,
body .n1-mob-menu,
body .n1-mob-item,
body .n1-mob-subitem,
body .n1-search-box,
body .n1-notif {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   TEMA PLATA — header/sidebar claro tipo Apple/Tailwind premium
   Fondo #e5e7eb (slate-200), acento #334155 (slate-700),
   texto #1e293b (slate-800), hover #cbd5e1 (slate-300), borde #94a3b8.
   ═══════════════════════════════════════════════════════════════════ */
body[data-theme="plata"] {
  --tp-bg:        #e5e7eb;   /* fondo principal chrome (OPACO) */
  --tp-bg-2:      #cbd5e1;   /* hover / panel secundario (OPACO) */
  --tp-bg-3:      #f1f5f9;   /* item destacado / activo suave (OPACO) */
  --tp-txt:       #1e293b;   /* texto principal */
  --tp-txt-2:     #475569;   /* texto secundario / labels */
  --tp-txt-3:     #64748b;   /* texto tenue */
  --tp-brd:       #94a3b8;   /* borde principal */
  --tp-brd-2:     #cbd5e1;   /* borde suave */
  --tp-ac:        #334155;   /* acento / activo */
  --tp-ac-line:   #0f172a;   /* línea de subrayado / borde-left activo */
  /* Hovers opacos calculados como blend de #0f172a sobre --tp-bg */
  --tp-hov-1:     #dcdee4;   /* hover suave (~5% dark blend) */
  --tp-hov-2:     #d4d7dc;   /* hover medio (~8% dark blend) */
  --tp-hov-3:     #cdd0d6;   /* hover fuerte (~12% dark blend) */
  --tp-hov-4:     #bfc4ce;   /* estado activo/pressed (~22% dark blend) */
}

/* ── Header (nav1) ── */
body[data-theme="plata"] .nav1 {
  background: var(--tp-bg) !important;
  background-color: var(--tp-bg) !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.08);
  border-bottom: 1px solid var(--tp-brd);
}
body[data-theme="plata"] .n1-brand {
  background-color: var(--tp-bg) !important;
  border-right-color: var(--tp-brd-2);
}
body[data-theme="plata"] .n1-name  { color: var(--tp-txt); }
body[data-theme="plata"] .n1-ver   { color: var(--tp-txt-3); }
body[data-theme="plata"] .n1-uname { color: var(--tp-txt); }
body[data-theme="plata"] .n1-urole { color: var(--tp-txt-2); }
body[data-theme="plata"] .n1-profile:hover {
  background-color: var(--tp-hov-1) !important;
}
body[data-theme="plata"] .n1-av {
  border-color: #b7bdc7;
}

/* Notificaciones y buscador */
body[data-theme="plata"] .n1-notif {
  background-color: var(--tp-hov-1) !important;
  color: var(--tp-txt-2);
}
body[data-theme="plata"] .n1-notif:hover {
  background-color: var(--tp-hov-3) !important;
  color: var(--tp-txt);
}
body[data-theme="plata"] .n1-notif-dot {
  border-color: var(--tp-bg);
}
body[data-theme="plata"] .n1-search {
  background-color: var(--tp-hov-1) !important;
  border-color: #c0c5cf;
}
body[data-theme="plata"] .n1-search:hover {
  background-color: var(--tp-hov-2) !important;
  border-color: var(--tp-ac);
}
body[data-theme="plata"] .n1-search-text { color: var(--tp-txt-3); }
body[data-theme="plata"] .n1-search-kbd {
  background-color: var(--tp-hov-2) !important;
  color: var(--tp-txt-2);
}
body[data-theme="plata"] .n1-search-box {
  background-color: var(--tp-hov-1) !important;
  border-color: #c0c5cf;
}
body[data-theme="plata"] .n1-search-box.active,
body[data-theme="plata"] .n1-search-box:focus-within {
  background-color: var(--tp-hov-2) !important;
  border-color: #a8afbb;
  box-shadow: 0 0 0 2px rgba(51,65,85,.22);
}
body[data-theme="plata"] .n1-search-inp { color: var(--tp-txt); }
body[data-theme="plata"] .n1-search-ic  { color: var(--tp-txt-2); }

/* Hamburguesa */
body[data-theme="plata"] .n1-hamburger {
  border-color: #c0c5cf;
  background-color: var(--tp-hov-1) !important;
}
body[data-theme="plata"] .n1-hamburger:hover {
  background-color: var(--tp-hov-3) !important;
  border-color: #a8afbb;
}
body[data-theme="plata"] .n1-hamburger span { background: var(--tp-txt); }

/* ── MegaMenu ── */
body[data-theme="plata"] .mm-btn {
  background-color: transparent;
  color: var(--tp-txt-2);
}
body[data-theme="plata"] .mm-btn:hover,
body[data-theme="plata"] .mm-btn--open {
  background-color: var(--tp-hov-2) !important;
  color: var(--tp-txt);
}
body[data-theme="plata"] .mm-grupo--activo .mm-btn { color: var(--tp-txt); }
body[data-theme="plata"] .mm-grupo--activo .mm-btn::after {
  background: var(--tp-ac-line);
}
body[data-theme="plata"] .mm-panel {
  background-color: #ffffff !important;
  border-color: var(--tp-brd);
  box-shadow: 0 12px 32px rgba(15,23,42,.15), 0 4px 12px rgba(15,23,42,.08);
}
body[data-theme="plata"] .mm-panel-titulo { color: var(--tp-ac); }
body[data-theme="plata"] .mm-panel-sep    { background: var(--tp-brd-2); }
body[data-theme="plata"] .mm-item {
  background-color: transparent;
  color: var(--tp-txt);
}
body[data-theme="plata"] .mm-item:hover {
  background-color: #f1f5f9 !important;
  border-left-color: var(--tp-ac-line);
  color: var(--tp-txt);
}
body[data-theme="plata"] .mm-item--activo {
  background-color: #e2e8f0 !important;
  border-left-color: var(--tp-ac-line);
  color: var(--tp-txt);
}
body[data-theme="plata"] .mm-item-ic {
  background-color: #eef2f7 !important;
  color: var(--tp-ac);
}
body[data-theme="plata"] .mm-item--activo .mm-item-ic {
  background-color: #cbd5e1 !important;
}
body[data-theme="plata"] .mm-item-desc { color: var(--tp-txt-3); }
body[data-theme="plata"] .mm-item--activo .mm-item-desc { color: var(--tp-txt-2); }
body[data-theme="plata"] .mm-badge-prox { background-color: #cbd0d8 !important; color: var(--tp-txt-2); }

/* Breadcrumb en navbar */
body[data-theme="plata"] .navbar__breadcrumb {
  color: var(--tp-txt-2);
  background-color: var(--tp-hov-1) !important;
}
body[data-theme="plata"] .navbar__breadcrumb .bc-grupo { color: var(--tp-txt-2); }
body[data-theme="plata"] .navbar__breadcrumb .bc-sep   { color: var(--tp-txt-3); }
body[data-theme="plata"] .navbar__breadcrumb .bc-mod   { color: var(--tp-txt); }

/* Botón cambio de empresa */
body[data-theme="plata"] .navbar__empresa-btn {
  border-color: #b3b9c3;
  background-color: #dee0e6 !important;
  color: var(--tp-txt);
}
body[data-theme="plata"] .navbar__empresa-btn:hover {
  background-color: var(--tp-hov-3) !important;
  border-color: #9aa1ad;
  color: var(--tp-txt);
}
body[data-theme="plata"] .navbar__empresa-chevron { color: var(--tp-txt-2); }

/* Menú móvil */
body[data-theme="plata"] .n1-mob-menu {
  background-color: var(--tp-bg) !important;
  border-top: 1px solid var(--tp-brd);
}
body[data-theme="plata"] .n1-mob-item {
  background-color: transparent;
  color: var(--tp-txt-2);
}
body[data-theme="plata"] .n1-mob-item:hover  { background-color: var(--tp-hov-1) !important; color: var(--tp-txt); }
body[data-theme="plata"] .n1-mob-item.active { background-color: var(--tp-hov-3) !important; color: var(--tp-txt); }
body[data-theme="plata"] .n1-mob-chev--up    { color: var(--tp-txt); }
body[data-theme="plata"] .n1-mob-subs        { background-color: #e0e2e8 !important; }
body[data-theme="plata"] .n1-mob-subitem     {
  background-color: transparent;
  color: var(--tp-txt-2);
}
body[data-theme="plata"] .n1-mob-subitem:hover  { background-color: var(--tp-hov-1) !important; color: var(--tp-txt); }
body[data-theme="plata"] .n1-mob-subitem.active { background-color: #cfd4dc !important; color: var(--tp-txt); }

/* ── Sidebar Lateral ── */
body[data-theme="plata"] {
  --sb-bg:          #e5e7eb;
  --sb-bg2:         #cbd5e1;
  --sb-text:        #334155;
  --sb-text-on:     #0f172a;
  --sb-border:      #b7bdc7;
  --sb-active:      #cbd5e1;
  --sb-active-line: #0f172a;
  --sb-hover:       #d4d9e2;
}
body[data-theme="plata"] .sb {
  background: var(--sb-bg) !important;
  background-color: var(--sb-bg) !important;
  box-shadow: 1px 0 4px rgba(15,23,42,.08);
}
body[data-theme="plata"] .sb-hdr {
  background-color: var(--sb-bg) !important;
  border-bottom-color: var(--sb-border);
}
body[data-theme="plata"] .sb-nav {
  background-color: var(--sb-bg) !important;
}
body[data-theme="plata"] .sb-ft {
  background-color: var(--sb-bg) !important;
  border-top-color: var(--sb-border);
  color: #4a556680;
}
body[data-theme="plata"] .sb-ft { color: #46536a; }
body[data-theme="plata"] .sb-item {
  background-color: transparent;
}
body[data-theme="plata"] .sb-item:hover {
  background-color: var(--sb-hover) !important;
  color: var(--sb-text-on);
}
body[data-theme="plata"] .sb-item-on {
  background-color: var(--sb-active) !important;
  color: var(--sb-text-on);
  font-weight: 700;
}
body[data-theme="plata"] .sb-nav::-webkit-scrollbar-thumb { background: #b3b9c3; }
body[data-theme="plata"] .sb-grp-hdr { color: #4a556699; background-color: transparent; }
body[data-theme="plata"] .sb-grp-hdr { color: #46536a; }
body[data-theme="plata"] .sb-grp-hdr:hover { color: var(--tp-txt); }
body[data-theme="plata"] .sb-ft-sub { color: var(--sb-active-line); }
body[data-theme="plata"] .sb-toggle {
  background-color: var(--tp-hov-1) !important;
  color: var(--sb-text);
  border-color: var(--sb-border);
}
body[data-theme="plata"] .sb-toggle:hover {
  background-color: var(--sb-active) !important;
  color: var(--sb-text-on);
  border-color: var(--sb-active);
}
/* Tooltip del sidebar colapsado — sigue oscuro para contraste. */
body[data-theme="plata"] .sb--col .sb-item::after {
  background: #1f2937;
  color: #fff;
  border-color: rgba(255,255,255,.08);
}

/* Profile dropdown — panel blanco opaco. */
body[data-theme="plata"] .profile-dd {
  background-color: #ffffff !important;
  border-color: var(--tp-brd);
  box-shadow: 0 12px 32px rgba(15,23,42,.15);
}
body[data-theme="plata"] .pdd-body {
  background-color: #ffffff !important;
}
body[data-theme="plata"] .pdd-item:hover {
  background-color: var(--tp-bg-3) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TEMA PERLA — blanco premium ejecutivo tipo Apple/Notion Light
   Fondo #f9fafb (gray-50, ~15% más claro que plata), acento #111827
   (gray-900), texto #111827 (máx contraste), hover #e5e7eb (gray-200),
   borde #e5e7eb (gray-200). Íconos #374151 (gray-700). Estilo dashboard
   ejecutivo ultra minimalista — pensado para monitores grandes y
   presentaciones. Prefijos --tc-* se conservan (comodidad de migración
   desde la paleta grafito anterior — sólo cambia el significado).
   ═══════════════════════════════════════════════════════════════════ */
body[data-theme="perla"] {
  --tc-bg:        #f9fafb;   /* fondo principal chrome (gray-50, OPACO) */
  --tc-bg-2:      #f3f4f6;   /* hover / panel secundario (gray-100, OPACO) */
  --tc-bg-3:      #e5e7eb;   /* item destacado / activo (gray-200, OPACO) */
  --tc-txt:       #111827;   /* texto principal / títulos (gray-900) */
  --tc-txt-2:     #4b5563;   /* texto secundario / labels (gray-600) */
  --tc-txt-3:     #6b7280;   /* texto tenue (gray-500) */
  --tc-brd:       #e5e7eb;   /* borde principal sutil (gray-200) */
  --tc-brd-2:     #f3f4f6;   /* borde muy suave (gray-100) */
  --tc-ac:        #111827;   /* acento / activo (gray-900) */
  --tc-ac-line:   #111827;   /* línea de subrayado / borde-left activo */
  --tc-ic:        #374151;   /* íconos (gray-700) */
  /* Hovers opacos calculados como blend sobre --tc-bg */
  --tc-hov-1:     #f3f4f6;   /* hover suave */
  --tc-hov-2:     #eef0f2;   /* hover medio */
  --tc-hov-3:     #e5e7eb;   /* hover fuerte / items menú */
  --tc-hov-4:     #d1d5db;   /* estado activo/pressed */
}

/* ── Header (nav1) ── */
body[data-theme="perla"] .nav1 {
  background: var(--tc-bg) !important;
  background-color: var(--tc-bg) !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.06);
  border-bottom: 1px solid var(--tc-brd);
}
body[data-theme="perla"] .n1-brand {
  background-color: var(--tc-bg) !important;
  border-right-color: var(--tc-brd-2);
}
body[data-theme="perla"] .n1-name  { color: var(--tc-txt); }
body[data-theme="perla"] .n1-ver   { color: var(--tc-txt-3); }
body[data-theme="perla"] .n1-uname { color: var(--tc-txt); }
body[data-theme="perla"] .n1-urole { color: var(--tc-txt-2); }
body[data-theme="perla"] .n1-profile:hover { background-color: var(--tc-hov-1) !important; }
body[data-theme="perla"] .n1-av { border-color: #d1d5db; }

/* Notificaciones y buscador */
body[data-theme="perla"] .n1-notif {
  background-color: var(--tc-hov-1) !important;
  color: var(--tc-ic);
}
body[data-theme="perla"] .n1-notif:hover {
  background-color: var(--tc-hov-3) !important;
  color: var(--tc-txt);
}
body[data-theme="perla"] .n1-notif-dot { border-color: var(--tc-bg); }
body[data-theme="perla"] .n1-search {
  background-color: var(--tc-hov-1) !important;
  border-color: var(--tc-brd);
}
body[data-theme="perla"] .n1-search:hover {
  background-color: var(--tc-hov-2) !important;
  border-color: #d1d5db;
}
body[data-theme="perla"] .n1-search-text { color: var(--tc-txt-3); }
body[data-theme="perla"] .n1-search-kbd {
  background-color: var(--tc-hov-3) !important;
  color: var(--tc-txt-2);
}
body[data-theme="perla"] .n1-search-box {
  background-color: var(--tc-hov-1) !important;
  border-color: var(--tc-brd);
}
body[data-theme="perla"] .n1-search-box.active,
body[data-theme="perla"] .n1-search-box:focus-within {
  background-color: var(--tc-hov-2) !important;
  border-color: #9ca3af;
  box-shadow: 0 0 0 2px rgba(17,24,39,.10);
}
body[data-theme="perla"] .n1-search-inp { color: var(--tc-txt); }
body[data-theme="perla"] .n1-search-ic  { color: var(--tc-ic); }

/* Hamburguesa */
body[data-theme="perla"] .n1-hamburger {
  border-color: var(--tc-brd);
  background-color: var(--tc-hov-1) !important;
}
body[data-theme="perla"] .n1-hamburger:hover {
  background-color: var(--tc-hov-3) !important;
  border-color: #d1d5db;
}
body[data-theme="perla"] .n1-hamburger span { background: var(--tc-ic); }

/* ── MegaMenu ── */
body[data-theme="perla"] .mm-btn { background-color: transparent; color: var(--tc-txt-2); }
body[data-theme="perla"] .mm-btn:hover,
body[data-theme="perla"] .mm-btn--open {
  background-color: var(--tc-hov-2) !important;
  color: var(--tc-txt);
}
body[data-theme="perla"] .mm-grupo--activo .mm-btn { color: var(--tc-txt); }
body[data-theme="perla"] .mm-grupo--activo .mm-btn::after {
  background: var(--tc-ac-line);
}
/* Panel del megamenú se mantiene blanco puro (identidad) — hover interno #f3f4f6 */
body[data-theme="perla"] .mm-panel {
  background-color: #ffffff !important;
  border-color: var(--tc-brd);
  box-shadow: 0 12px 32px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.06);
}
body[data-theme="perla"] .mm-panel-titulo { color: var(--tc-txt); }
body[data-theme="perla"] .mm-panel-sep    { background: var(--tc-brd); }
body[data-theme="perla"] .mm-item { background-color: transparent; color: var(--tc-txt); }
body[data-theme="perla"] .mm-item:hover {
  background-color: var(--tc-hov-2) !important;
  border-left-color: var(--tc-ac-line);
  color: var(--tc-txt);
}
body[data-theme="perla"] .mm-item--activo {
  background-color: var(--tc-hov-3) !important;
  border-left-color: var(--tc-ac-line);
  color: var(--tc-txt);
}
body[data-theme="perla"] .mm-item-ic {
  background-color: var(--tc-hov-1) !important;
  color: var(--tc-ic);
}
body[data-theme="perla"] .mm-item--activo .mm-item-ic {
  background-color: var(--tc-hov-4) !important;
}
body[data-theme="perla"] .mm-item-desc { color: var(--tc-txt-3); }
body[data-theme="perla"] .mm-item--activo .mm-item-desc { color: var(--tc-txt-2); }
body[data-theme="perla"] .mm-badge-prox { background-color: var(--tc-hov-3) !important; color: var(--tc-txt-2); }

/* Breadcrumb */
body[data-theme="perla"] .navbar__breadcrumb {
  color: var(--tc-txt-2);
  background-color: var(--tc-hov-1) !important;
}
body[data-theme="perla"] .navbar__breadcrumb .bc-grupo { color: var(--tc-txt-2); }
body[data-theme="perla"] .navbar__breadcrumb .bc-sep   { color: var(--tc-txt-3); }
body[data-theme="perla"] .navbar__breadcrumb .bc-mod   { color: var(--tc-txt); }

/* Botón cambio de empresa */
body[data-theme="perla"] .navbar__empresa-btn {
  border-color: var(--tc-brd);
  background-color: #ffffff !important;
  color: var(--tc-txt);
}
body[data-theme="perla"] .navbar__empresa-btn:hover {
  background-color: var(--tc-hov-2) !important;
  border-color: #d1d5db;
  color: var(--tc-txt);
}
body[data-theme="perla"] .navbar__empresa-chevron { color: var(--tc-txt-2); }

/* Menú móvil */
body[data-theme="perla"] .n1-mob-menu {
  background-color: var(--tc-bg) !important;
  border-top: 1px solid var(--tc-brd);
}
body[data-theme="perla"] .n1-mob-item { background-color: transparent; color: var(--tc-txt-2); }
body[data-theme="perla"] .n1-mob-item:hover  { background-color: var(--tc-hov-1) !important; color: var(--tc-txt); }
body[data-theme="perla"] .n1-mob-item.active { background-color: var(--tc-hov-3) !important; color: var(--tc-txt); }
body[data-theme="perla"] .n1-mob-chev--up    { color: var(--tc-txt); }
body[data-theme="perla"] .n1-mob-subs        { background-color: var(--tc-hov-1) !important; }
body[data-theme="perla"] .n1-mob-subitem     { background-color: transparent; color: var(--tc-txt-2); }
body[data-theme="perla"] .n1-mob-subitem:hover  { background-color: var(--tc-hov-2) !important; color: var(--tc-txt); }
body[data-theme="perla"] .n1-mob-subitem.active { background-color: var(--tc-hov-3) !important; color: var(--tc-txt); }

/* ── Sidebar Lateral ── */
body[data-theme="perla"] {
  --sb-bg:          #f9fafb;
  --sb-bg2:         #f3f4f6;
  --sb-text:        #4b5563;
  --sb-text-on:     #111827;
  --sb-border:      #e5e7eb;
  --sb-active:      #e5e7eb;
  --sb-active-line: #111827;
  --sb-hover:       #f3f4f6;
}
body[data-theme="perla"] .sb {
  background: var(--sb-bg) !important;
  background-color: var(--sb-bg) !important;
  box-shadow: 1px 0 4px rgba(15,23,42,.06);
}
body[data-theme="perla"] .sb-hdr {
  background-color: var(--sb-bg) !important;
  border-bottom-color: var(--sb-border);
}
body[data-theme="perla"] .sb-nav {
  background-color: var(--sb-bg) !important;
}
body[data-theme="perla"] .sb-ft {
  background-color: var(--sb-bg) !important;
  border-top-color: var(--sb-border);
  color: var(--tc-txt-2);
}
body[data-theme="perla"] .sb-item {
  background-color: transparent;
  color: var(--sb-text);
}
body[data-theme="perla"] .sb-item:hover {
  background-color: var(--sb-hover) !important;
  color: var(--sb-text-on);
}
body[data-theme="perla"] .sb-item-on {
  background-color: var(--sb-active) !important;
  color: var(--sb-text-on);
  font-weight: 700;
}
body[data-theme="perla"] .sb-nav::-webkit-scrollbar-thumb { background: #d1d5db; }
body[data-theme="perla"] .sb-grp-hdr { color: var(--tc-txt-2); background-color: transparent; }
body[data-theme="perla"] .sb-grp-hdr:hover { color: var(--tc-txt); }
body[data-theme="perla"] .sb-ft-sub { color: var(--sb-active-line); }
body[data-theme="perla"] .sb-toggle {
  background-color: var(--tc-hov-1) !important;
  color: var(--sb-text);
  border-color: var(--sb-border);
}
body[data-theme="perla"] .sb-toggle:hover {
  background-color: var(--sb-active) !important;
  color: var(--sb-text-on);
  border-color: #d1d5db;
}
/* Tooltip del sidebar colapsado — oscuro para contraste sobre perla. */
body[data-theme="perla"] .sb--col .sb-item::after {
  background: #111827;
  color: #fff;
  border-color: rgba(255,255,255,.08);
}

/* Profile dropdown — panel blanco puro (identidad); hover interno #f3f4f6. */
body[data-theme="perla"] .profile-dd {
  background-color: #ffffff !important;
  border-color: var(--tc-brd);
  box-shadow: 0 12px 32px rgba(15,23,42,.12);
}
body[data-theme="perla"] .pdd-body {
  background-color: #ffffff !important;
}
body[data-theme="perla"] .pdd-item:hover {
  background-color: var(--tc-hov-1) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Selector de apariencia en el dropdown del avatar
   ═══════════════════════════════════════════════════════════════════ */
.pdd-tema {
  padding: 12px 16px 10px;
}
.pdd-tema-lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t3, #64748b);
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 8px;
}
.pdd-tema-row {
  display: flex; gap: 6px;
}
.pdd-tema-opt {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 7px 4px 6px;
  border-radius: 8px;
  border: 1.5px solid var(--b, #e5e7eb);
  background: var(--white, #fff);
  cursor: pointer;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
  font-size: 11px; font-weight: 600;
  color: var(--t2, #475569);
  position: relative;
}
.pdd-tema-opt:hover {
  border-color: #64748b;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15,23,42,.08);
}
.pdd-tema-opt.on {
  border-color: #0f172a;
  box-shadow: 0 0 0 2px rgba(15,23,42,.10);
}
.pdd-tema-swatch {
  width: 100%; height: 22px;
  border-radius: 5px;
  border: 1px solid rgba(15,23,42,.10);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  letter-spacing: .5px;
}
.pdd-tema-swatch--oscuro { background: #0f172a; color: #ffffff; }
.pdd-tema-swatch--plata  { background: #e5e7eb; color: #1e293b; }
.pdd-tema-swatch--perla  { background: #f9fafb; color: #111827; border-color: #e5e7eb; }
.pdd-tema-check {
  position: absolute; top: 4px; right: 5px;
  font-size: 11px;
  color: #16a34a;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   HOTFIX 2026-08-25 · Bug 2: badge de Período contable (.fp-pill)
   traslúcido con plata/perla.
   El diseño base usa rgba(255,255,255,.1) → deja ver el contenido
   detrás. Aquí se sobreescribe con hex opacos que combinan con cada
   header, incluyendo hover / open. También se refuerza el panel
   .fp-dd (dropdown) por si el fondo var(--white) heredara alfa.
   ═══════════════════════════════════════════════════════════════════ */

/* ── TEMA PLATA · badge de período ── */
body[data-theme="plata"] .fp-pill {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
}
body[data-theme="plata"] .fp-pill:hover {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}
body[data-theme="plata"] .fp-pill.fp-pill-open {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  border-color: #64748b !important;
}
body[data-theme="plata"] .fp-pill .fp-ic,
body[data-theme="plata"] .fp-pill .fp-arr {
  color: #475569 !important;
}
body[data-theme="plata"] .fp-pill .fp-label   { color: #1e293b !important; }
body[data-theme="plata"] .fp-pill .fp-estado  { color: #475569 !important; }

/* Panel del dropdown — blanco opaco (identidad, igual que profile-dd/mm-panel) */
body[data-theme="plata"] .fp-dd {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
}

/* ── TEMA PERLA · badge de período ── */
body[data-theme="perla"] .fp-pill {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #111827 !important;
}
body[data-theme="perla"] .fp-pill:hover {
  background: #f3f4f6 !important;
  background-color: #f3f4f6 !important;
  border-color: #d1d5db !important;
}
body[data-theme="perla"] .fp-pill.fp-pill-open {
  background: #f3f4f6 !important;
  background-color: #f3f4f6 !important;
  border-color: #9ca3af !important;
}
body[data-theme="perla"] .fp-pill .fp-ic,
body[data-theme="perla"] .fp-pill .fp-arr {
  color: #4b5563 !important;
}
body[data-theme="perla"] .fp-pill .fp-label  { color: #111827 !important; }
body[data-theme="perla"] .fp-pill .fp-estado { color: #4b5563 !important; }

/* Panel del dropdown — blanco puro (identidad) */
body[data-theme="perla"] .fp-dd {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}