/* ═══════════════════════════════════════════════
   DalIA Dashboard — Paleta extraída del logo
   Fondos: azul marino / verde oscuro
   Acentos: verde agua, azul cielo, lavanda
═══════════════════════════════════════════════ */
:root {
  --bg:           #0e0e1a;
  --bg2:          #141428;
  --bg3:          #1a2828;
  --surface:      #1e1e32;
  --surface2:     #242440;
  /* --card: superficie de tarjetas/modales. Se usa en 9 templates pero
     nunca habia estado definida -> quedaban transparentes. */
  --card:         #1a1a2e;
  --border:       rgba(160,220,200,0.12);
  --border2:      rgba(140,200,220,0.18);

  --accent:       #a0dcc8;   /* verde agua — color primario del logo */
  --accent2:      #8cc8dc;   /* azul cielo */
  --accent3:      #a0b4dc;   /* lavanda */
  --accent-dark:  #142828;   /* verde marino oscuro */
  /* Color de texto que SIEMPRE contrasta sobre un fondo --accent. No puede ser
     fijo: en tema oscuro --accent es verde claro (pide texto oscuro) y en tema
     claro es verde oscuro (pide texto claro). */
  --on-accent:    #0f1613;

  /* Chips/badges (milvus_id, modelo, formato, etc.) — variables dedicadas
     para que SIEMPRE tengan contraste garantizado contra --surface/--surface2,
     sin importar el tema. Antes cada badge nuevo reusaba --bg2/--border "a mano"
     y en tema claro terminaba casi invisible por ser casi del mismo tono que
     el fondo de la card. Usar overlay blanco semitransparente aca (en vez de
     un color fijo) para que se vea bien sobre cualquier fondo oscuro. */
  --chip-bg:      rgba(255,255,255,0.08);
  --chip-border:  rgba(255,255,255,0.18);
  --chip-text:    var(--text);

  --text:         #e8f4f0;
  --text2:        rgba(232,244,240,0.55);
  --text3:        rgba(232,244,240,0.35);

  --success:      #a0dcc8;
  --warning:      #dcd0a0;
  --danger:       #dc8ca0;
  --neutral:      #a0b4dc;

  --nav-h:        64px;
  --sidebar-w:    196px;
  --radius:       10px;
  --radius-sm:    6px;
  --shadow:       0 4px 24px rgba(0,0,0,0.4);
  --transition:   0.25s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 15px; background: var(--bg); min-height: 100%; }
body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

a { color: var(--accent2); text-decoration: none; }
a:hover { color: var(--accent); }

/* ── NAV ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h);
  background: rgba(14,14,26,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5rem;
  gap: 1rem;
}
.nav-logo { display: flex; align-items: center; gap: 0.75rem; }
.nav-logo img { height: 38px; width: auto; }
.nav-logo span { font-size: 0.75rem; color: var(--text2); letter-spacing: 0.1em; text-transform: uppercase; }
.nav-user { display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; color: var(--text2); }
.nav-user .role-badge {
  background: rgba(160,220,200,0.12);
  color: var(--accent);
  border: 1px solid rgba(160,220,200,0.25);
  padding: 2px 10px; border-radius: 20px; font-size: 0.75rem;
}
.btn-logout {
  background: rgba(220,140,160,0.1);
  color: var(--danger);
  border: 1px solid rgba(220,140,160,0.2);
  padding: 5px 14px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 0.8rem; transition: var(--transition);
}
.btn-logout:hover { background: rgba(220,140,160,0.2); }


/* ── Nav Dropdown Usuario ──────────────────────────────────────── */
.nav-dropdown { position: relative; }

.nav-dropdown-trigger {
  display: flex; align-items: center; gap: 7px;
  background: none; border: 1px solid var(--border);
  border-radius: 20px; padding: 4px 10px 4px 5px;
  cursor: pointer; color: var(--text2);
  font-size: 0.82rem; transition: border-color .15s, background .15s;
}
.nav-dropdown-trigger:hover {
  border-color: var(--accent); background: rgba(160,220,200,.06); color: var(--text);
}

.nav-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(160,220,200,.2); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
}

.nav-dropdown-arrow {
  font-size: 0.6rem; color: var(--text2); transition: transform .2s;
}
.nav-dropdown.open .nav-dropdown-arrow { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--bg2, #1a1a24);
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 10px; min-width: 200px; z-index: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  display: none; flex-direction: column; overflow: hidden;
}
/* modo claro */
[data-theme="light"] .nav-dropdown-menu {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
.nav-dropdown.open .nav-dropdown-menu { display: flex; }

.nav-dropdown-header {
  padding: .75rem 1rem .6rem;
  display: flex; flex-direction: column; gap: 1px;
  background: rgba(255,255,255,.03);
}
[data-theme="light"] .nav-dropdown-header {
  background: rgba(0,0,0,.02);
}
.nav-dropdown-fullname {
  font-size: .84rem; font-weight: 600; color: var(--text);
}
.nav-dropdown-role {
  font-size: .72rem; color: var(--text2);
  background: rgba(160,220,200,.1); color: var(--accent);
  border: 1px solid rgba(160,220,200,.2);
  padding: 1px 7px; border-radius: 10px;
  display: inline-block; margin-top: 2px; width: fit-content;
}

/* Encabezado de seccion dentro del desplegable del encabezado: sin esto,
   "Configuracion" se lee como una opcion mas que se puede pulsar. */
.nav-dropdown-seccion {
  font-size: .66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text3);
  padding: 8px 14px 4px;
}
.nav-dropdown-divider {
  height: 1px; background: var(--border); margin: 2px 0;
}

.nav-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  padding: .55rem 1rem; font-size: .82rem; color: var(--text2);
  text-decoration: none; background: none; border: none;
  cursor: pointer; width: 100%; text-align: left;
  transition: background .12s, color .12s;
}
.nav-dropdown-item:hover {
  background: rgba(255,255,255,.06); color: var(--text, #e8e4dc);
}
[data-theme="light"] .nav-dropdown-item:hover {
  background: rgba(0,0,0,.05);
}
.nav-dropdown-logout { color: var(--red); }
.nav-dropdown-logout:hover { background: rgba(207,110,138,.08); }

.nav-di-icon { width: 16px; text-align: center; font-size: .85rem; flex-shrink: 0; }

/* ── LAYOUT ── */
.layout { display: flex; padding-top: var(--nav-h); min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  position: fixed; top: var(--nav-h); bottom: 0; left: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 1.5rem 0;
  user-select: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(160,220,200,0.2) transparent;
  transition: transform .25s ease;
}
/* Scrollbar webkit (Chrome/Safari) */
.sidebar::-webkit-scrollbar {
  width: 4px;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(160,220,200,0.2);
  border-radius: 4px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(160,220,200,0.45);
}
/* Handle de resize — borde derecho arrastrable */
.sidebar-resize-handle {
  position: fixed; top: var(--nav-h); bottom: 0;
  width: 5px; cursor: col-resize; z-index: 200;
  background: transparent; transition: background .15s;
}
.sidebar-resize-handle:hover,
.sidebar-resize-handle.dragging { background: rgba(160,220,200,.3); }
.sidebar-section { padding: 0.5rem 1rem 0.25rem; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--text3); }
/* Secciones plegables del sidebar */
.sidebar-sect-toggle { display: flex; align-items: center; cursor: pointer;
  user-select: none; transition: color .15s; }
.sidebar-sect-toggle:hover { color: var(--text2); }
.sidebar-sect-arrow { margin-left: auto; font-size: 0.72rem; line-height: 1;
  transition: transform .25s ease; transform: rotate(90deg); opacity: .6; }
.sidebar-sect-toggle.collapsed .sidebar-sect-arrow { transform: rotate(0deg); }
.sidebar-sect-body { overflow: hidden; max-height: 2000px;
  transition: max-height .3s ease, opacity .2s ease; }
.sidebar-sect-body.collapsed { max-height: 0; opacity: 0; }
.sidebar-sect-body.no-anim { transition: none !important; }
/* Subseccion anidada (ej. Analisis dentro de Documentos) */
.sidebar-subsect { padding-left: 1.75rem; font-size: 0.63rem; opacity: .85; }
.sidebar-subsect + .sidebar-sect-body .sidebar-accordion-toggle { padding-left: 1.75rem; }
.sidebar-subsect + .sidebar-sect-body .sidebar-accordion-item { padding-left: 2.5rem; }
/* Con el sidebar colapsado a iconos, las secciones no aplican: mostrar todo */
[data-sidebar="collapsed"] .sidebar-sect-body,
.sidebar.collapsed .sidebar-sect-body { max-height: none !important; opacity: 1 !important; }
.sidebar a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 1.25rem; color: var(--text2); font-size: 0.88rem;
  transition: var(--transition); border-left: 3px solid transparent;
}
.sidebar a:hover, .sidebar a.active {
  color: var(--accent); background: rgba(160,220,200,0.06);
  border-left-color: var(--accent);
}
.sidebar a .icon { font-size: 1rem; width: 18px; text-align: center; }

.main { margin-left: var(--sidebar-w); flex: 1; padding: 2rem; }

/* ── CARDS / STATS ── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  display: flex; flex-direction: column; gap: 0.3rem;
  transition: var(--transition);
}
.stat-card:hover { border-color: var(--border2); transform: translateY(-2px); }
.stat-card .label { font-size: 0.75rem; color: var(--text2); text-transform: uppercase; letter-spacing: 0.08em; }
.stat-card .value { font-size: 2rem; font-weight: 700; color: var(--accent); line-height: 1; }
.stat-card .sub { font-size: 0.78rem; color: var(--text3); }

/* ── TABLE ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.card-header h2 { font-size: 1rem; font-weight: 600; color: var(--text); }
.card-body { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
thead tr { background: var(--bg2); }
th { padding: 0.75rem 1rem; text-align: left; font-size: 0.72rem;
     text-transform: uppercase; letter-spacing: 0.08em; color: var(--text2);
     white-space: nowrap; }
td { padding: 0.7rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.04);
     color: var(--text); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(160,220,200,0.03); }
td a { color: var(--accent2); }
td a:hover { color: var(--accent); }

/* ── BADGES ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px; font-size: 0.72rem;
  font-weight: 500; white-space: nowrap;
}
.badge-completed  { background: rgba(160,220,200,0.15); color: var(--success); border: 1px solid rgba(160,220,200,0.25); }
.badge-skipped    { background: rgba(160,180,220,0.12); color: var(--neutral); border: 1px solid rgba(160,180,220,0.2); }
.badge-failed     { background: rgba(220,140,160,0.12); color: var(--danger); border: 1px solid rgba(220,140,160,0.2); }
.badge-processing { background: rgba(220,208,160,0.12); color: var(--warning); border: 1px solid rgba(220,208,160,0.2); }

/* ── SEMÁFORO SENTIMENTAL ── */
.sentiment { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; }
.sentiment-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.s-positive .sentiment-dot { background: var(--success); box-shadow: 0 0 6px var(--success); }
.s-neutral  .sentiment-dot { background: var(--warning); box-shadow: 0 0 6px var(--warning); }
.s-negative .sentiment-dot { background: var(--danger);  box-shadow: 0 0 6px var(--danger); }

/* ── URGENCY BAR ── */
.urgency { display: flex; align-items: center; gap: 6px; }
.urgency-bar { height: 5px; border-radius: 3px; background: var(--bg3); width: 60px; overflow: hidden; }
.urgency-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent2), var(--accent)); }

/* ── FILTERS ── */
.filters { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.filters select, .filters input[type=text] {
  background: var(--bg2); border: 1px solid var(--border2);
  color: var(--text); padding: 6px 12px; border-radius: var(--radius-sm);
  font-size: 0.83rem; outline: none; transition: var(--transition);
}
.filters select:focus, .filters input:focus { border-color: var(--accent); }
.btn-filter {
  background: rgba(140,200,220,0.12); color: var(--accent2);
  border: 1px solid rgba(140,200,220,0.25);
  padding: 6px 16px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 0.83rem; transition: var(--transition);
}
.btn-filter:hover { background: rgba(140,200,220,0.22); }

/* ── PAGINATION ── */
.pagination { display: flex; gap: 0.4rem; align-items: center; padding: 1rem 1.25rem; }
.pagination a, .pagination span {
  padding: 5px 11px; border-radius: var(--radius-sm); font-size: 0.82rem;
  border: 1px solid var(--border); color: var(--text2);
}
.pagination a:hover { border-color: var(--accent); color: var(--accent); background: rgba(160,220,200,0.06); }
.pagination .current { background: rgba(160,220,200,0.15); color: var(--accent); border-color: rgba(160,220,200,0.3); }

/* ── DOC DETAIL ── */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.detail-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.detail-section h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent2); margin-bottom: 1rem; }
.detail-row { display: flex; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.85rem; }
.detail-row:last-child { border-bottom: none; }
.detail-row .key { color: var(--text2); min-width: 140px; flex-shrink: 0; }
.detail-row .val { color: var(--text); word-break: break-word; }

/* ── TIMELINE EVENTS ── */
.timeline { padding: 0.5rem 0; }
.timeline-item { display: flex; gap: 1rem; padding: 0.75rem 0; position: relative; }
.timeline-item::before {
  content: ''; position: absolute; left: 11px; top: 2rem; bottom: -0.75rem;
  width: 1px; background: var(--border);
}
.timeline-item:last-child::before { display: none; }
.t-dot { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--accent2); background: var(--bg2); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; }
.t-content { flex: 1; }
.t-header { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.25rem; }
.t-state { font-size: 0.78rem; font-weight: 600; color: var(--accent); }
.t-time { font-size: 0.72rem; color: var(--text3); }
.t-desc { font-size: 0.82rem; color: var(--text2); }

/* ── LOGIN ── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 30% 50%, rgba(20,40,40,0.8) 0%, var(--bg) 70%); }
.login-box { background: var(--surface); border: 1px solid var(--border2);
  border-radius: 14px; padding: 2.5rem; width: 100%; max-width: 380px; box-shadow: var(--shadow); }
.login-logo { text-align: center; margin-bottom: 2rem; }
.login-logo img { max-width: 160px; height: auto; }
.login-box h1 { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: 0.3rem; text-align: center; }
.login-box p { font-size: 0.82rem; color: var(--text2); text-align: center; margin-bottom: 1.75rem; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.78rem; color: var(--text2); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.06em; }
.form-group input {
  width: 100%; background: var(--bg2); border: 1px solid var(--border2);
  color: var(--text); padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: 0.9rem; outline: none; transition: var(--transition);
}
.form-group input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(160,220,200,0.1); }
.btn-primary {
  width: 100%; background: linear-gradient(135deg, var(--accent-dark), #1a3a3a);
  border: 1px solid var(--accent); color: var(--accent);
  padding: 11px; border-radius: var(--radius-sm); font-size: 0.9rem;
  font-weight: 600; cursor: pointer; letter-spacing: 0.05em;
  transition: var(--transition); margin-top: 0.5rem;
}
.btn-primary:hover { background: rgba(160,220,200,0.15); }
/* En tema claro el gradiente de --accent-dark sigue siendo oscuro, pero --accent
   pasa a verde oscuro: texto oscuro sobre fondo oscuro. Se usa fondo solido. */
[data-theme="light"] .btn-primary { background: var(--accent); color: var(--on-accent); }
[data-theme="light"] .btn-primary:hover { background: #15654a; }
.alert-error { background: rgba(220,140,160,0.1); border: 1px solid rgba(220,140,160,0.3);
  color: var(--danger); padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.85rem; margin-bottom: 1rem; text-align: center; }

/* ── SEARCH BOX ── */
.search-box {
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 2rem;
  text-align: center; color: var(--text2); font-size: 0.9rem;
}
.search-box .soon { font-size: 2rem; margin-bottom: 0.5rem; }

/* ── BLOCKCHAIN BADGE ── */
.chain-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem;
  background: rgba(140,180,220,0.1); border: 1px solid rgba(140,180,220,0.25);
  color: var(--accent3); padding: 4px 12px; border-radius: 20px; }
.chain-badge.verified { color: var(--accent); background: rgba(160,220,200,0.1); border-color: rgba(160,220,200,0.25); }

/* ── PAGE HEADER ── */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.3rem; font-weight: 600; color: var(--text); }
.page-header p { font-size: 0.83rem; color: var(--text2); margin-top: 0.2rem; }
/* .page-head: encabezado apilado (breadcrumb / titulo / bajada) para las
   pantallas de configuracion. Lo usaban umbrales.php y model_defaults.php SIN
   estar definido en ningun lado: se renderizaba con los defaults del navegador,
   con el h1 y el parrafo desproporcionados. Misma escala que .page-header, que
   sigue sirviendo para las pantallas con accion a la derecha (Listado, Detalle). */
.page-head { margin-bottom: 1.5rem; }
.page-head h1 { font-size: 1.3rem; font-weight: 600; color: var(--text); margin: 0.15rem 0 0; }
.page-head .page-sub,
.page-head p { font-size: 0.83rem; color: var(--text2); margin-top: 0.35rem; line-height: 1.55; max-width: 68ch; }

/* ── Botones de accion ─────────────────────────────────────────────────────
   OJO: .btn-primary es del LOGIN --lleva width:100% y padding grande-- y no
   sirve como boton de barra: reusarlo dejaba un boton del ancho del contenedor.
   Estos son los compactos, para acciones dentro de una pantalla. */
.btn { display:inline-flex; align-items:center; gap:6px; padding:6px 13px;
  font-size:.81rem; font-weight:500; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  cursor:pointer; transition:var(--transition); }
.btn:hover { border-color:var(--accent); color:var(--accent); }
.btn:disabled { opacity:.5; cursor:default; }
.btn-acento { background:rgba(160,220,200,.12); border-color:var(--accent); color:var(--accent); }
.btn-acento:hover { background:rgba(160,220,200,.2); }
[data-theme="light"] .btn-acento { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
[data-theme="light"] .btn-acento:hover { background:#15654a; color:var(--on-accent); }

/* ── Diálogo propio ────────────────────────────────────────────────────────
   Genérico a proposito: la regla del proyecto es no usar alert/confirm/prompt
   del navegador, asi que toda pantalla que pida confirmacion o datos necesita
   esto. Se estrena en Integracion -> Credenciales. */
.dlg-ov { position:fixed; inset:0; z-index:9998; display:flex; align-items:center;
  justify-content:center; background:rgba(0,0,0,.45); padding:20px; }
.dlg { background:var(--bg); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow); width:100%; max-width:440px; overflow:hidden; }
.dlg-h { padding:14px 18px; font-weight:600; font-size:.95rem; color:var(--text);
  border-bottom:1px solid var(--border); }
.dlg-b { padding:16px 18px; }
.dlg-f { padding:12px 18px; display:flex; gap:8px; justify-content:flex-end;
  border-top:1px solid var(--border); background:var(--surface); }
.dlg-lb { display:block; font-size:.78rem; font-weight:600; color:var(--text2);
  margin-bottom:5px; }
.dlg-in { width:100%; padding:8px 10px; border:1px solid var(--border);
  border-radius:8px; background:var(--surface); color:var(--text); font-size:.85rem; }
.dlg-in:focus { outline:none; border-color:var(--accent); }
.dlg-hint { font-size:.74rem; color:var(--text3); margin-top:5px; line-height:1.45; }
.dlg-rd { display:flex; align-items:center; gap:7px; font-size:.83rem; color:var(--text);
  cursor:pointer; }
.btn-mini { padding:3px 9px; font-size:.72rem; border-radius:6px; }

/* ── Pestañas de una pantalla ──────────────────────────────────────────────
   Mismo lenguaje que .prompt-tab de prompts.css (subrayado en el acento), pero
   aca porque prompts.css solo se carga en esa pantalla. */
.tabs { display:flex; gap:.4rem; border-bottom:1px solid var(--border); margin:1.2rem 0 0; }
.tab { background:none; border:none; padding:.5rem .9rem; font-size:.78rem;
  color:var(--text2); cursor:pointer; border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:var(--transition); }
.tab:hover { color:var(--text); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
/* Contador como badge, mismo lenguaje que .sidebar-accordion-count: un numero
   suelto al lado del texto se lee como parte del nombre de la pestaña
   ("Activas 3"), no como una cantidad. */
.tab-n { display:inline-block; min-width:18px; text-align:center; font-size:.68rem;
  font-weight:600; line-height:1.5; color:var(--text3);
  background:var(--surface2, rgba(255,255,255,.06));
  border:1px solid var(--border); padding:0 5px; border-radius:9px; margin-left:6px; }
.tab.active .tab-n { color:var(--accent); border-color:var(--accent);
  background:rgba(160,220,200,.12); }
[data-theme="light"] .tab-n { background:var(--surface); }
[data-theme="light"] .tab.active .tab-n { background:rgba(117,129,169,.14); }

/* ── Credenciales ────────────────────────────────────────────────────────── */
.cred-tabla { width:100%; border-collapse:collapse; font-size:.82rem; }
.cred-tabla th { text-align:left; font-weight:600; color:var(--text3); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.04em; padding:8px 10px;
  border-bottom:1px solid var(--border); }
.cred-tabla td { padding:10px; border-bottom:1px solid var(--border); color:var(--text); }
.cred-tabla code { font-size:.76rem; color:var(--text2); }
.cred-inactiva { opacity:.55; }
.cred-estado { font-size:.7rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.03em; padding:2px 8px; border-radius:20px; border:1px solid var(--border); }
.cred-activa { color:var(--accent); border-color:var(--accent); }
.cred-vencida, .cred-revocada { color:var(--text3); }
/* El secreto se muestra UNA vez: el aviso tiene que ser imposible de pasar por alto. */
.cred-aviso { padding:10px 12px; border-radius:9px; font-size:.8rem; line-height:1.5;
  background:rgba(220,180,120,.12); border:1px solid rgba(220,180,120,.35); color:var(--text); }
.cred-val { display:flex; align-items:center; gap:8px; padding:8px 10px;
  background:var(--surface); border:1px solid var(--border); border-radius:8px; }
.cred-val code { flex:1; font-size:.76rem; word-break:break-all; color:var(--text); }

/* ── Actividad ───────────────────────────────────────────────────────────── */
.act-resumen { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.act-kpi { flex:1; min-width:130px; padding:11px 14px; border:1px solid var(--border);
  border-radius:10px; background:var(--surface); }
.act-kpi b { display:block; font-size:1.15rem; color:var(--text); font-weight:600; }
.act-kpi span { font-size:.72rem; color:var(--text3); }
/* Solo se tiñe cuando HAY errores: un cero en rojo alarma sin motivo. */
.act-kpi-mal b { color:#dc8ca0; }
.act-filtros { display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.act-metodo { font-size:.66rem; font-weight:700; letter-spacing:.04em; color:var(--text3); }
.act-detalle { font-size:.75rem; color:var(--text3); word-break:break-word;
  display:inline-block; max-width:220px; }
.act-pag { display:flex; align-items:center; gap:12px; justify-content:center;
  margin-top:14px; font-size:.76rem; color:var(--text3); }

/* ── Documentación de servicios ──────────────────────────────────────────── */
/* Titulo de grupo de servicios. El nombre tecnico manda --es el que aparece en
   la ruta y en el log de Actividad-- y la traduccion va al lado, mas chica. */
.svc-sec { font-size:.95rem; font-weight:600; color:var(--text);
  margin:1.9rem 0 .15rem; display:flex; align-items:baseline; gap:8px; }
.svc-sec:first-of-type { margin-top:.4rem; }
.svc-sec span { font-size:.76rem; font-weight:400; color:var(--text3); }
.svc-sec-sub { font-size:.79rem; color:var(--text2); margin:0 0 .7rem; line-height:1.5; }
.svc-vacio { font-size:.79rem; color:var(--text3); padding:11px 14px;
  border:1px dashed var(--border); border-radius:9px; margin-bottom:10px; }

/* La URL base va aparte y no dentro de la bajada: es un dato que se busca y se
   copia, no una frase que se lee. */
.svc-base { display:flex; align-items:center; gap:10px; max-width:820px;
  margin:0 0 14px; padding:9px 13px; border:1px solid var(--border);
  border-radius:9px; background:var(--surface); }
.svc-base span { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text3); }
.svc-base code { font-size:.82rem; color:var(--text); }

/* Cada servicio es un acordeon con <details>: cerrado por defecto, sin una
   linea de JS y sin estado que se pueda desincronizar. Con 15 servicios
   documentados, abiertos todos la pantalla es ilegible. */
.svc { border:1px solid var(--border); border-radius:11px; margin-bottom:10px;
  overflow:hidden; background:var(--surface); }
.svc-h { display:flex; align-items:center; gap:10px; padding:11px 14px;
  cursor:pointer; list-style:none; user-select:none; }
/* El triangulito propio del navegador se saca: se usa la flecha de la derecha,
   igual que las secciones del menu lateral. */
.svc-h::-webkit-details-marker { display:none; }
.svc-h::marker { content:''; }
.svc-h:hover { background:var(--bg); }
.svc[open] .svc-h { border-bottom:1px solid var(--border); }
.svc-arrow { margin-left:8px; color:var(--text3); font-size:1.1rem; line-height:1;
  transition:transform .18s ease; }
.svc[open] .svc-arrow { transform:rotate(90deg); }
.svc-h code { font-size:.84rem; color:var(--text); font-weight:600; }
.svc-m { font-size:.68rem; font-weight:700; letter-spacing:.05em; padding:2px 8px;
  border-radius:5px; color:#fff; }
.svc-get { background:#3d8b71; } .svc-post { background:#8b6b3d; }
.svc-lib { margin-left:auto; font-size:.7rem; color:var(--text3); }
/* Sin la etiqueta de la derecha, la flecha necesita el empujon. */
.svc-h > .svc-arrow:not(:nth-child(4)) { margin-left:auto; }
.svc-b { padding:12px 14px; font-size:.83rem; color:var(--text2); line-height:1.55; }
.svc-b p { margin:0 0 9px; }
/* Los ejemplos los reemplaza bloqueTexto() al cargar, y ese bloque trae su
   propio fondo oscuro y su color de letra. NO se le pone color aca: una regla
   `.svc-b pre code { color: var(--text) }` gana sobre el color en linea del
   <pre> y, en tema claro, pintaba letra oscura sobre fondo oscuro -- el bloque
   se veia vacio. Lo de abajo es solo el respaldo para el instante previo a que
   corra el script. */
.svc-b pre { background:var(--bg); border:1px solid var(--border); border-radius:8px;
  padding:10px 12px; overflow-x:auto; margin:0 0 10px; }
.svc-b pre code { font-size:.76rem; }
.svc-b > div > pre { margin:0 0 10px; }
/* Estructura de referencia de cada servicio: Parametros / Consideraciones /
   Respuesta / Ejemplos / Notas. Titulos chicos, para que se distingan del
   nombre del servicio sin competir con el. */
.svc-sub { font-size:.74rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text3); margin:18px 0 8px; }
.svc-sub:first-child { margin-top:0; }
.svc-tabla { width:100%; border-collapse:collapse; font-size:.78rem; margin-bottom:4px; }
.svc-tabla th { text-align:left; font-weight:600; color:var(--text3); font-size:.7rem;
  text-transform:uppercase; letter-spacing:.04em; padding:6px 9px;
  border-bottom:1px solid var(--border); white-space:nowrap; }
.svc-tabla td { padding:8px 9px; border-bottom:1px solid var(--border);
  color:var(--text2); vertical-align:top; line-height:1.5; }
.svc-tabla td:first-child { white-space:nowrap; color:var(--text); font-weight:600; }
.svc-tabla code { font-size:.74rem; color:var(--text2); }
.svc-tabla .req { color:var(--accent); font-size:.66rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; display:block; margin-top:2px; }
.svc-cons { margin:0; padding-left:20px; font-size:.78rem; color:var(--text2); line-height:1.6; }
.svc-cons li { margin-bottom:5px; }
.svc-caso { font-size:.78rem; color:var(--text2); line-height:1.55; margin:12px 0 7px; }
.svc-caso b { color:var(--text); }
sup.svc-ref { color:var(--accent); font-weight:700; font-size:.68rem; }

/* La nota quedaba pegada al bloque de codigo de arriba y al borde de la
   tarjeta: son varias lineas de texto seguido y sin aire no se leen. */
.svc-nota { font-size:.76rem; color:var(--text3); line-height:1.6;
  background:var(--bg); border:1px solid var(--border); border-left:2px solid var(--accent);
  border-radius:0 8px 8px 0; padding:11px 14px; margin-top:12px; }
.svc-nota b { color:var(--text2); }
.svc-nota br { content:''; display:block; margin-top:7px; }

/* Aviso de pantalla todavia no implementada. Existe para que las opciones de
   menu recien creadas se vean como parte del producto y no como un error, y
   para que se entienda QUE va a hacer esa pantalla cuando este. */
.int-pendiente { display:flex; gap:12px; align-items:flex-start; max-width:640px;
  padding:14px 16px; border:1px dashed var(--border2, var(--border));
  border-radius:11px; background:var(--surface); color:var(--text2); font-size:.83rem; }
.int-pendiente svg { flex-shrink:0; margin-top:1px; color:var(--accent); }
.int-pendiente b { color:var(--text); font-size:.85rem; }
.int-pendiente div div { margin-top:3px; line-height:1.5; }

.breadcrumb { font-size: 0.78rem; color: var(--text3); }
.breadcrumb a { color: var(--text2); }
.breadcrumb a:hover { color: var(--accent); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  /* Sidebar — oculto por defecto, se abre con overlay */
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 1000;
    transform: translateX(-100%);
    transition: transform .25s ease;
    display: flex !important;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.35);
  }
  /* Overlay oscuro al abrir sidebar en móvil */
  .sidebar-overlay {
    display: none; position: fixed; inset: 0; z-index: 999;
    background: rgba(0,0,0,.5);
  }
  .sidebar-overlay.open { display: block; }

  /* sidebar-toggle-btn visible en móvil */
  .sidebar-toggle-btn {
    display: flex !important;
  }

  /* NAV 100% ancho en móvil */
  .nav {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 0 0.75rem !important;
    box-sizing: border-box !important;
  }
  /* Nav-left sin overflow */
  .nav-left { min-width: 0; flex-shrink: 1; overflow: hidden; }
  .nav-user { flex-shrink: 0; gap: 0.5rem; }
  /* FIX1: Sincronizar — solo ícono sin texto */
  .btn-refresh-text { display: none !important; }
  .btn-refresh { padding: 6px 10px; min-width: 36px; }

  /* FIX2: Ocultar menú usuario en nav — opciones en barra inferior Perfil */
  .nav-dropdown { display: none !important; }

  /* Sidebar — ancho 80% máximo 280px, deslizable */
  .sidebar,
  [data-sidebar="collapsed"] .sidebar {
    width: min(280px, 80vw) !important;
  }
  [data-sidebar="collapsed"] .sidebar .nav-label {
    opacity: 1 !important;
    width: auto !important;
    overflow: visible !important;
  }
  [data-sidebar="collapsed"] .sidebar .sidebar-section {
    opacity: 1 !important;
    height: auto !important;
    padding: 0.5rem 1rem 0.25rem !important;
    overflow: visible !important;
  }
  [data-sidebar="collapsed"] .sidebar a {
    justify-content: flex-start !important;
    padding: 0.6rem 1.25rem !important;
  }
  [data-sidebar="collapsed"] .sidebar a .icon {
    font-size: 1rem !important;
    margin: 0 !important;
    width: 18px !important;
  }
  [data-sidebar="collapsed"] .sidebar-accordion-toggle .nav-label,
  [data-sidebar="collapsed"] .sidebar-accordion-toggle .sidebar-accordion-arrow {
    display: inline !important;
    opacity: 1 !important;
    width: auto !important;
  }

  /* Ocultar gráficos complejos en móvil */
  .db-row3,
  .db-wordcloud-row { display: none !important; }

  /* Layout */
  .main { margin-left: 0; padding: 1rem 0.75rem; }
  .topbar { padding: 0 0.75rem; }
  .detail-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* kpi-grid y db-row2 — 1 columna en móvil */
  .kpi-grid { grid-template-columns: 1fr !important; }
  .kpi-grid > * { grid-column: span 1 !important; }
  .db-row2 { grid-template-columns: 1fr !important; }
  .db-row2 > * { grid-column: span 1 !important; width: 100% !important; }
  #appliance-widget { grid-column: span 1 !important; }
  #appliance-widget { grid-column: span 1 !important; }
  .db-row3 { flex-direction: column; gap: 0.75rem; }
  .db-row3 .card { overflow: hidden; position: relative; }

  /* Gráficos y charts responsive */
  .radar-card, .db-row3 > .card {
    flex: none !important; width: 100% !important; max-width: 100% !important;
    min-width: 0 !important;
  }
  canvas { max-width: 100% !important; height: auto !important; }

  /* Wordcloud — altura reducida en móvil para no invadir */
  #wordcloudWrap { height: 260px !important; overflow: hidden !important; }
  .wordcloud-card { overflow: hidden !important; position: relative; z-index: 1; }
  .db-row3 { position: relative; z-index: 2; }
  .db-wordcloud-row { margin-bottom: 1rem; }
  .wordcloud-card .card-header { flex-wrap: wrap; gap: 0.5rem; }
  .wc-hdr-right { flex-wrap: wrap; gap: 0.4rem; }

  /* Appliance en db-row2 móvil — ocupa 2 columnas */
  #appliance-widget { grid-column: span 2 !important; }

  /* Footer 100% — anular margin del sidebar collapsed */
  .footer,
  [data-sidebar="collapsed"] .footer,
  .footer.sidebar-collapsed { margin-left: 0 !important; width: 100% !important; box-sizing: border-box !important; }
  .footer-inner { flex-direction: column; gap: 0.5rem; text-align: center; }
}

/* ── NAV LOGO TEXT ── */
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.nav-logo-name { font-size: 1rem; font-weight: 600; color: var(--accent); letter-spacing: 0.05em; }
.nav-logo-tagline { font-size: 0.65rem; color: var(--text3); letter-spacing: 0.14em; text-transform: uppercase; }

/* ── FOOTER ── */
.footer {
  margin-left: var(--sidebar-w);
  border-top: 1px solid var(--border);
  background: var(--bg2);
  padding: 1rem 2rem;
}
.footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.75rem;
}
.footer-brand { display: flex; align-items: center; gap: 0.75rem; }
.footer-name { font-size: 0.85rem; font-weight: 600; color: var(--accent); margin-right: 0.4rem; }
.footer-tagline { font-size: 0.7rem; color: var(--text3); letter-spacing: 0.1em; text-transform: uppercase; }
.footer-copy { font-size: 0.75rem; color: var(--text3); }
.footer-copy a { color: var(--accent2); }
.footer-copy a:hover { color: var(--accent); }

/* ── LOGIN TAGLINE & FOOTER ── */
.login-tagline {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent2); margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .footer { margin-left: 0; width: 100%; box-sizing: border-box; }
  .footer-inner { flex-direction: column; gap: 0.5rem; text-align: center; }
}

/* ── SVG LOGOS ── */
.nav-logo img { height: 44px; width: auto; }
.login-logo img { max-width: 220px; height: auto; }
.footer-brand img { height: 32px; width: auto; }

/* ── PNG LOGOS OVERRIDE ── */
.nav-logo img       { height: 48px; width: auto; }
.login-logo img     { max-width: 200px; height: auto; }
.footer-brand img   { height: 36px; width: auto; }

/* ── NAV LOGO FIX ── */
.nav-logo img       { height: 56px !important; width: auto; }
.nav-logo-name      { display: none; }
.nav-logo-tagline   { font-size: 6.5px !important; color: var(--text3); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; }

/* ── LIGHT MODE ── */
[data-theme="light"] {
  --bg:           #f0f4f0;
  --bg2:          #e4ede8;
  --bg3:          #d8e8e0;
  --surface:      #ffffff;
  --surface2:     #eaf2ee;
  --card:         #ffffff;
  --border:       rgba(20,40,40,0.12);
  --border2:      rgba(20,40,60,0.18);

  --accent:       #7581a9;
  --accent2:      #1a5a8a;
  --accent3:      #4a4a9a;
  --accent-dark:  #0e3a2a;
  --on-accent:    #ffffff;

  /* Ver comentario en :root -- overlay oscuro semitransparente para que
     contraste sobre fondos claros/blancos. */
  --chip-bg:      rgba(14,26,20,0.07);
  --chip-border:  rgba(14,26,20,0.20);
  --chip-text:    var(--text);

  --text:         #0e1a14;
  --text2:        rgba(14,26,20,0.60);
  --text3:        rgba(14,26,20,0.38);

  --success:      #1a7a5a;
  --warning:      #8a6a00;
  --danger:       #8a1a3a;
  --neutral:      #3a4a8a;

  --nav-bg:       rgba(240,244,240,0.95);
  --shadow:       0 4px 24px rgba(0,0,0,0.10);
}

[data-theme="light"] .nav {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border2);
}
[data-theme="light"] .sidebar {
  background: var(--bg2);
  border-right: 1px solid var(--border);
}
[data-theme="light"] .footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
}
[data-theme="light"] .stat-card,
[data-theme="light"] .card,
[data-theme="light"] .detail-section {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="light"] thead tr { background: var(--bg2); }
[data-theme="light"] .filters select,
[data-theme="light"] .filters input[type=text] {
  background: var(--surface); border-color: var(--border2); color: var(--text);
}
[data-theme="light"] .search-box { background: var(--surface); }

/* ── THEME TOGGLE BUTTON ── */
.theme-toggle {
  background: none; border: 1px solid var(--border2);
  color: var(--text2); width: 32px; height: 32px;
  border-radius: 50%; cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); background: rgba(160,220,200,0.08); }

/* ═══════════════════════════════════════════
   SIDEBAR COLAPSABLE
═══════════════════════════════════════════ */
.sidebar { } /* transición activada por sidebar-ready */
.sidebar.collapsed { width: 56px; }
.sidebar.collapsed .sidebar-section,
.sidebar.collapsed a span:not(.icon) { display: none; }
.sidebar.collapsed a { justify-content: center; padding: 0.6rem 0; }
.sidebar.collapsed a .icon { margin: 0; font-size: 1.1rem; width: auto; }
.sidebar-toggle {
  position: absolute; top: calc(var(--nav-h) + 12px); left: calc(var(--sidebar-w) - 14px);
  z-index: 300; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text2); cursor: pointer; font-size: 0.7rem;
  display: flex; align-items: center; justify-content: center;
  transition: left var(--transition), var(--transition);
  box-shadow: var(--shadow);
}
.sidebar-toggle:hover { color: var(--accent); border-color: var(--accent); }
.sidebar-toggle.collapsed { left: 44px; }
.main.expanded { margin-left: 56px; }
.footer.expanded { margin-left: 56px; }

/* ═══════════════════════════════════════════
   DASHBOARD TOOLBAR
═══════════════════════════════════════════ */
.db-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem;
}
.db-greeting { font-size: 1.15rem; color: var(--text); display: flex; align-items: center; gap: 0.75rem; }
.db-greeting strong { color: var(--accent); }
.db-date-label { font-size: 0.78rem; color: var(--text3); background: var(--surface2);
  padding: 3px 10px; border-radius: 20px; border: 1px solid var(--border); }
.db-datestrip { display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; }
.db-pill {
  padding: 5px 13px; border-radius: 20px; font-size: 0.78rem; font-weight: 500;
  border: 1px solid var(--border2); color: var(--text2); cursor: pointer;
  background: none; text-decoration: none; transition: var(--transition);
}
.db-pill:hover, .db-pill.active {
  background: rgba(160,220,200,0.15); color: var(--accent); border-color: var(--accent);
}
.db-cal-btn { font-size: 0.9rem; padding: 4px 10px; }
.db-datepicker {
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 1rem 1.25rem;
  margin-bottom: 1.25rem; display: flex; align-items: center;
}
.dp-form { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.dp-form label { font-size: 0.82rem; color: var(--text2); display: flex; align-items: center; gap: 0.5rem; }
.dp-form input[type=date] {
  background: var(--bg2); border: 1px solid var(--border2); color: var(--text);
  padding: 5px 10px; border-radius: var(--radius-sm); font-size: 0.83rem; outline: none;
}

/* ═══════════════════════════════════════════
   KPI GRID
═══════════════════════════════════════════ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem; margin-bottom: 1.25rem;
}
.kpi-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem;
  display: flex; flex-direction: column; gap: 0.2rem;
  transition: var(--transition); position: relative; overflow: hidden;
}
.kpi-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--border2);
}
.kpi-card.kpi-green::before { background: var(--success); }
.kpi-card.kpi-yellow::before { background: var(--warning); }
.kpi-card.kpi-red::before { background: var(--danger); }
.kpi-card:hover { transform: translateY(-2px); border-color: var(--border2); }
.kpi-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text2); }
.kpi-value { font-size: 2.2rem; font-weight: 700; color: var(--accent); line-height: 1.1; }
.kpi-sub { font-size: 0.72rem; color: var(--text3); }
.kpi-bar-wrap { height: 4px; background: var(--bg3); border-radius: 2px; overflow: hidden; margin-top: 0.3rem; }
.kpi-bar-fill { height: 100%; border-radius: 2px; transition: width 0.6s ease; }
.kpi-bar-label { font-size: 0.7rem; color: var(--text3); margin-top: 2px; }
.kpi-chip { font-size: 0.7rem; background: var(--surface2); border: 1px solid var(--border);
  color: var(--text3); padding: 2px 8px; border-radius: 10px; }

/* Termómetro de segmentos */
.kpi-thermo { display: flex; gap: 3px; margin: 0.35rem 0; }
.thermo-seg { height: 6px; flex: 1; border-radius: 3px; opacity: 0.2; transition: opacity 0.4s; }
.thermo-seg.active { opacity: 1; }

/* ═══════════════════════════════════════════
   ROW 2 — 4 CARDS
═══════════════════════════════════════════ */

/* Semáforo */
.semaforo-wrap { padding: 0.75rem 1rem; }
.semaforo { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1rem; }
.sem-light { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.sem-bulb { width: 42px; height: 42px; border-radius: 50%; opacity: 0.2; transition: opacity 0.4s, box-shadow 0.4s; }
.sem-light.active .sem-bulb { opacity: 1; }
.sem-red   .sem-bulb { background: var(--danger); }
.sem-yellow .sem-bulb { background: var(--warning); }
.sem-green  .sem-bulb { background: var(--success); }
.sem-light.active.sem-red    .sem-bulb { box-shadow: 0 0 16px var(--danger); }
.sem-light.active.sem-yellow .sem-bulb { box-shadow: 0 0 16px var(--warning); }
.sem-light.active.sem-green  .sem-bulb { box-shadow: 0 0 16px var(--success); }
.sem-val { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.sem-lbl { font-size: 0.68rem; color: var(--text3); text-transform: uppercase; }
.sent-bar-stack { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 1px; }
.sent-bar-stack div { height: 100%; transition: width 0.6s ease; }
.sent-legend { display: flex; gap: 1rem; margin-top: 0.5rem; font-size: 0.72rem; color: var(--text2); }
.sent-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }

/* Urgencia chart */
.urg-chart { padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.urg-row { display: flex; align-items: center; gap: 0.5rem; }
.urg-label { font-size: 0.75rem; color: var(--text2); width: 24px; flex-shrink: 0; }
.urg-bar-bg { flex: 1; height: 8px; background: var(--bg3); border-radius: 4px; overflow: hidden; }
.urg-bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.urg-count { font-size: 0.75rem; color: var(--text2); width: 20px; text-align: right; }

/* Confidencialidad */
.conf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.75rem; }
.conf-cell { border: 1px solid; border-radius: var(--radius-sm); padding: 0.6rem; text-align: center; }
.conf-ico { font-size: 1.3rem; }
.conf-val { font-size: 1.4rem; font-weight: 700; }
.conf-lbl { font-size: 0.68rem; color: var(--text2); text-transform: uppercase; }

/* Tipos */
.type-list { padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.type-row { display: flex; align-items: center; gap: 0.5rem; }
.type-name { font-size: 0.78rem; color: var(--text2); width: 130px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type-bar-bg { flex: 1; height: 8px; background: var(--bg3); border-radius: 4px; overflow: hidden; }
.type-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg,var(--accent2),var(--accent)); transition: width 0.6s; }
.type-cnt { font-size: 0.75rem; color: var(--text2); width: 20px; text-align: right; }

/* ═══════════════════════════════════════════
   ROW 3 — TENDENCIA + TABLA
═══════════════════════════════════════════ */
.db-row3 { display: flex; gap: 0.85rem; margin-bottom: 1.5rem; }
.db-row3 .card { flex: 1; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.db-row3 .card:hover { transform: translateY(-3px); border-color: var(--border2); box-shadow: var(--shadow); }

[data-theme=light] .kpi-card,
[data-theme=light] .db-card { background: var(--surface); border-color: var(--border); }

/* ════════════════════════════════════════════
   SIDEBAR COLAPSABLE v3
════════════════════════════════════════════ */
.nav-left { display: flex; align-items: center; gap: 0.75rem; }

.sidebar-toggle-btn {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; padding: 6px;
  border-radius: var(--radius-sm);
}
.tog-bar {
  display: block; width: 20px; height: 2px;
  background: var(--text2); border-radius: 2px;
  transition: var(--transition);
}
.sidebar-toggle-btn:hover .tog-bar { background: var(--accent); }

/* Sidebar expandido (default) */
.sidebar {
  width: var(--sidebar-w);
  overflow-x: hidden;
  white-space: nowrap;
}

/* Sidebar colapsado */
.sidebar.collapsed {
  width: 56px;
}
.sidebar.collapsed .sidebar-section { opacity: 0; height: 0; padding: 0; overflow: hidden; }
.sidebar.collapsed .nav-label { opacity: 0; width: 0; overflow: hidden; display: inline-block; }
.sidebar.collapsed a {
  justify-content: center;
  padding: 0.75rem 0;
  position: relative;
}
.sidebar.collapsed a .icon { margin: 0; font-size: 1.15rem; }

/* Tooltip en modo colapsado */
.sidebar.collapsed a[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute; left: 62px; top: 50%; transform: translateY(-50%);
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border2); padding: 4px 10px;
  border-radius: var(--radius-sm); font-size: 0.8rem;
  white-space: nowrap; z-index: 999; pointer-events: none;
  box-shadow: var(--shadow);
}

/* Main y footer ajustan según sidebar */
.main { }
.layout.sidebar-collapsed .main { margin-left: 56px; }
.footer.sidebar-collapsed { margin-left: 56px; }
.footer { }

/* ════════════════════════════════════════════
   DASHBOARD v3 — KPI CARDS MEJORADAS
════════════════════════════════════════════ */
.db-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem;
}
.db-greeting { font-size: 1.2rem; color: var(--text); display:flex; align-items:center; gap:0.75rem; }
.db-greeting strong { color: var(--accent); }
.db-date-label {
  font-size: 0.75rem; color: var(--text3);
  background: var(--surface2); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 20px;
}
.db-datestrip { display:flex; gap:0.3rem; align-items:center; flex-wrap:wrap; }
.db-pill {
  padding: 5px 12px; border-radius: 20px; font-size: 0.78rem;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text2); cursor:pointer; text-decoration:none;
  transition: var(--transition);
}
.db-pill:hover, .db-pill.active {
  background: rgba(160,220,200,0.15); color: var(--accent);
  border-color: rgba(160,220,200,0.35);
}
.db-cal-btn { font-size: 0.88rem; }
.db-datepicker {
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 1rem 1.25rem;
  margin-bottom: 1rem; display: flex; gap: 1rem;
  align-items: center; flex-wrap: wrap;
}
.dp-form { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.dp-form label { font-size: 0.82rem; color: var(--text2); display:flex; gap:0.4rem; align-items:center; }
.dp-form input[type=date] {
  background: var(--bg2); border: 1px solid var(--border2);
  color: var(--text); padding: 5px 10px; border-radius: var(--radius-sm);
  font-size: 0.82rem; outline: none;
}

/* KPI Grid mejorado */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem; margin-bottom: 1.25rem;
}
.kpi-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1rem 0.85rem;
  position: relative; overflow: hidden;
  transition: var(--transition);
}
.kpi-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--accent2);
}
.kpi-card.kpi-green::before { background: var(--success); }
.kpi-card.kpi-yellow::before { background: var(--warning); }
.kpi-card.kpi-red::before { background: var(--danger); }
.kpi-card:hover { transform: translateY(-3px); border-color: var(--border2); box-shadow: var(--shadow); }
.kpi-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text2); margin-bottom:0.25rem; }
.kpi-value { font-size: 2.4rem; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom:0.2rem; }
.kpi-sub { font-size: 0.7rem; color: var(--text3); }
.kpi-bar-wrap { height: 4px; background: var(--bg3); border-radius: 2px; overflow:hidden; margin-top:0.4rem; }
.kpi-bar-fill { height:100%; border-radius:2px; transition: width 0.8s cubic-bezier(0.4,0,0.2,1); }
.kpi-bar-label { font-size:0.68rem; color:var(--text3); margin-top:3px; }
.kpi-chip {
  font-size:0.68rem; background:var(--surface2); border:1px solid var(--border);
  color:var(--text2); padding:2px 8px; border-radius:20px;
}
.kpi-thermo { display:flex; gap:3px; margin:0.35rem 0 0.2rem; }
.thermo-seg { height:7px; flex:1; border-radius:3px; opacity:0.18; transition:opacity 0.4s; }
.thermo-seg.active { opacity:1; }

/* Row 2 */
.db-row2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem; margin-bottom: 1.25rem;
}
@media (max-width: 600px) {
  .db-row2 { grid-template-columns: 1fr !important; }
  .db-row2 > * { grid-column: span 1 !important; width: 100% !important; }
  #appliance-widget { grid-column: span 1 !important; }
}
.db-card { min-height: 190px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.db-card:hover { transform: translateY(-3px); border-color: var(--border2); box-shadow: var(--shadow); }

/* Semáforo */
.semaforo-wrap { padding: 0.75rem; }
.semaforo { display:flex; justify-content:center; gap:1.5rem; margin-bottom:0.85rem; }
.sem-light { display:flex; flex-direction:column; align-items:center; gap:4px; }
.sem-bulb {
  width: 36px; height: 36px; border-radius: 50%;
  opacity: 0.15; transition: all 0.4s;
  border: 2px solid currentColor;
}
.sem-red   { color: var(--danger); }
.sem-yellow{ color: var(--warning); }
.sem-green { color: var(--success); }
.sem-light.active .sem-bulb { opacity:1; box-shadow: 0 0 14px currentColor; }
.sem-val { font-size:1.2rem; font-weight:700; }
.sem-lbl { font-size:0.68rem; color:var(--text2); text-transform:uppercase; letter-spacing:0.08em; }
.sent-bar-stack { display:flex; height:8px; border-radius:4px; overflow:hidden; margin:0.5rem 0 0.4rem; }
.sent-bar-stack div { transition: width 0.8s ease; }
.sent-legend { display:flex; gap:0.85rem; font-size:0.72rem; color:var(--text2); }
.sent-legend i { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:3px; }

/* Urgencia chart */
.urg-chart { padding:0.5rem 1rem 0.75rem; }
.urg-row { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.5rem; }
.urg-label { font-size:0.72rem; color:var(--text2); width:20px; flex-shrink:0; font-weight:600; }
.urg-bar-bg { flex:1; height:10px; background:var(--bg3); border-radius:5px; overflow:hidden; }
.urg-bar-fill { height:100%; border-radius:5px; transition: width 0.8s ease; }
.urg-count { font-size:0.72rem; color:var(--text2); width:18px; text-align:right; }

/* Confidencialidad */
.conf-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; padding:0.75rem; }
.conf-cell {
  border:1px solid; border-radius:var(--radius-sm);
  padding:0.5rem; text-align:center;
  background: rgba(255,255,255,0.02);
}
.conf-ico { font-size:1.2rem; }
.conf-val { font-size:1.4rem; font-weight:700; line-height:1.1; }
.conf-lbl { font-size:0.65rem; color:var(--text2); text-transform:uppercase; }

/* Tipos */
.type-list { padding:0.5rem 1rem 0.75rem; }
.type-row { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.5rem; }
.type-name { font-size:0.72rem; color:var(--text2); width:100px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.type-bar-bg { flex:1; height:8px; background:var(--bg3); border-radius:4px; overflow:hidden; }
.type-bar-fill { height:100%; border-radius:4px; background:var(--accent2); transition: width 0.8s ease; }
.type-cnt { font-size:0.72rem; color:var(--text2); width:18px; text-align:right; }

/* Row 3 */
.db-row3 { display:flex; gap:0.85rem; margin-bottom:1.5rem; }

/* Light mode overrides */
[data-theme=light] .kpi-card,
[data-theme=light] .db-card { background:var(--surface); border-color:var(--border); }
[data-theme=light] .db-datepicker { background:var(--surface); }
[data-theme=light] .dp-form input[type=date] { background:var(--bg2); color:var(--text); }

/* nav-username */
.nav-username { font-size:0.85rem; color:var(--text2); }


/* ════════════════════════════════════════════
   BOTÓN REFRESCAR
════════════════════════════════════════════ */
.btn-refresh {
  background: rgba(160,220,200,0.1);
  border: 1px solid rgba(160,220,200,0.3);
  color: var(--accent); padding: 5px 14px;
  border-radius: var(--radius-sm); font-size: 0.82rem;
  cursor: pointer; transition: var(--transition);
  font-weight: 500; letter-spacing: 0.03em;
}
.btn-refresh:hover { background: rgba(160,220,200,0.2); transform: none; }

/* ════════════════════════════════════════════
   SYNC OVERLAY BASE
════════════════════════════════════════════ */
.sync-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(6,6,14,0.85);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
}


/* ── MODAL SYNC REDISEÑADO ──────────────────────────────────────── */
.sync-modal-v2 {
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: 16px; padding: 0; max-width: 480px; width: 94%;
  box-shadow: 0 32px 80px rgba(0,0,0,.55); overflow: hidden;
}
.smod-header {
  padding: 1.5rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .9rem;
}
.smod-icon { font-size: 1.6rem; flex-shrink: 0; }
.smod-title { font-size: 1.05rem; font-weight: 600; color: var(--text); }
.smod-subtitle { font-size: .78rem; color: var(--text2); margin-top: 2px; }

.smod-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 1px; background: var(--border);
  border-bottom: 1px solid var(--border);
}
.smod-stat {
  background: var(--surface2); padding: .85rem 1rem;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.smod-stat-num { font-size: 1.4rem; font-weight: 600; color: var(--text); line-height: 1; }
.smod-stat-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); }
.smod-stat-num.green { color: var(--success); }
.smod-stat-num.amber { color: var(--warning); }
.smod-stat-num.blue  { color: var(--accent2); }

.smod-body { padding: 1.5rem 1.75rem; display: flex; flex-direction: column; gap: 1.2rem; }

.smod-field { display: flex; flex-direction: column; gap: .5rem; }
.smod-field-label {
  font-size: .75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text2);
  display: flex; justify-content: space-between; align-items: center;
}
.smod-field-label span { color: var(--accent); font-weight: 600; font-size: .82rem; text-transform: none; letter-spacing: 0; }

.smod-select {
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); border-radius: 8px; padding: .55rem .85rem;
  font-size: .85rem; cursor: pointer; appearance: none;
  background-image: url(data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg width=10 height=6%3E%3Cpath d=M0 0l5 6 5-6z fill=%23888/%3E%3C/svg%3E);
  background-repeat: no-repeat; background-position: right .85rem center;
  transition: border-color .15s;
}
.smod-select:focus { outline: none; border-color: var(--accent); }

.smod-slider-wrap { position: relative; }
.smod-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--pct,50%), var(--border2) var(--pct,50%));
  border-radius: 2px; outline: none; cursor: pointer;
}
.smod-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent); cursor: pointer; transition: transform .1s;
}
.smod-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.smod-slider-ticks {
  display: flex; justify-content: space-between;
  padding: 4px 0 0; font-size: .68rem; color: var(--text3);
}

.smod-warn {
  background: rgba(255,180,50,.08); border: 1px solid rgba(255,180,50,.2);
  border-radius: 8px; padding: .6rem .85rem;
  font-size: .78rem; color: var(--warning); display: flex; gap: .5rem; align-items: flex-start;
}

.smod-footer {
  padding: 1rem 1.75rem 1.5rem;
  display: flex; gap: .75rem; justify-content: flex-end;
  border-top: 1px solid var(--border);
}
.smod-btn-cancel {
  background: transparent; border: 1px solid var(--border);
  color: var(--text2); padding: .55rem 1.2rem; border-radius: 8px;
  cursor: pointer; font-size: .85rem; transition: .15s;
}
.smod-btn-cancel:hover { border-color: var(--accent2); color: var(--text); }
.smod-btn-start {
  background: var(--accent); border: none; color: #060608;
  padding: .55rem 1.4rem; border-radius: 8px;
  cursor: pointer; font-size: .85rem; font-weight: 600; transition: .15s;
  display: flex; align-items: center; gap: .4rem;
}
.smod-btn-start:hover { opacity: .85; }
.smod-btn-start:disabled { opacity: .4; cursor: default; }

/* ── WIDGET APPLIANCE ───────────────────────────────────────────── */
.appliance-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem; height: 100%;
  display: flex; flex-direction: column; gap: .75rem;
}
.app-header {
  display: flex; align-items: center; justify-content: space-between;
}
.app-title { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text3); font-weight: 500; }
.app-badge {
  font-size: .68rem; padding: 2px 8px; border-radius: 20px; font-weight: 500;
  display: flex; align-items: center; gap: 4px;
}
.app-badge-idle { background: var(--surface2); color: var(--text2); border: 1px solid var(--border); }
.app-badge-running { background: rgba(76,175,80,.12); color: #4caf50; border: 1px solid rgba(76,175,80,.25); }
.app-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.app-badge-running .app-badge-dot { animation: appPulse 1.2s ease-in-out infinite; }
@keyframes appPulse { 0%,100%{opacity:1}50%{opacity:.3} }

.app-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.app-metric { background: var(--surface2); border-radius: 6px; padding: 7px 8px; }
.app-metric-lbl { font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text3); margin-bottom: 3px; }
.app-metric-val { font-size: 1.1rem; font-weight: 600; color: var(--text); line-height: 1; }
.app-metric-sub { font-size: .62rem; color: var(--text2); margin-top: 2px; }
.app-mini-bar { height: 3px; background: var(--border2); border-radius: 2px; margin-top: 5px; overflow: hidden; }
.app-mini-bar-fill { height: 100%; border-radius: 2px; transition: width .5s; }

.app-docs-row { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.app-doc-stat { flex: 1; padding: 8px 6px; text-align: center; background: var(--surface2); }
.app-doc-stat + .app-doc-stat { border-left: 1px solid var(--border); }
.app-doc-num { font-size: 1.25rem; font-weight: 600; color: var(--text); line-height: 1; }
.app-doc-lbl { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); margin-top: 2px; }

/* Modo activo */
.app-proc-header { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--text2); }
.app-spinner { width: 13px; height: 13px; border: 2px solid var(--border2); border-top-color: var(--accent); border-radius: 50%; animation: appSpin .7s linear infinite; flex-shrink: 0; }
@keyframes appSpin { to { transform: rotate(360deg); } }
.app-proc-count { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--text); }

.app-cores { display: grid; grid-template-columns: repeat(8,1fr); gap: 3px; }
.app-core-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.app-core-bg { width: 100%; height: 28px; background: var(--border2); border-radius: 2px; overflow: hidden; display: flex; align-items: flex-end; }
.app-core-fill { width: 100%; border-radius: 2px; transition: height .5s; }
.app-core-lbl { font-size: .55rem; color: var(--text3); }

.app-progress-bar-bg { height: 4px; background: var(--border2); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.app-progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .5s; }

.app-poll { font-size: .62rem; color: var(--text3); text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
.app-poll-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); animation: appPulse 2s infinite; }


/* ── PANTALLA TRANSFERENCIA V2 ──────────────────────────────────── */
.sync-transfer-v2 {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 0;
  width: 94%;
  max-width: 540px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.55);
}

.stv2-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border);
}
.stv2-header-left { display: flex; align-items: center; gap: .85rem; }
.stv2-spinner {
  width: 20px; height: 20px; flex-shrink: 0;
  border: 2.5px solid var(--border2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: stv2spin .75s linear infinite;
}
@keyframes stv2spin { to { transform: rotate(360deg); } }
.stv2-title {
  font-size: .95rem; font-weight: 600; color: var(--text);
}
.stv2-subtitle {
  font-size: .75rem; color: var(--text2); margin-top: 2px;
}
.stv2-badge {
  font-size: .72rem; padding: 3px 10px; border-radius: 20px;
  background: rgba(160,220,200,.1); color: var(--accent);
  border: 1px solid rgba(160,220,200,.25); white-space: nowrap;
}

.stv2-progress-wrap {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.stv2-progress-bg {
  flex: 1; height: 6px; background: var(--border2);
  border-radius: 3px; overflow: hidden;
}
.stv2-progress-fill {
  height: 100%; background: var(--accent);
  border-radius: 3px; transition: width .4s ease;
}
.stv2-pct {
  font-size: .8rem; font-weight: 600; color: var(--accent);
  min-width: 36px; text-align: right;
}

.stv2-metrics {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border);
  border-bottom: 1px solid var(--border);
}
.stv2-metric-block {
  background: var(--surface2); padding: .85rem 1rem;
}
.stv2-metric-hdr {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.stv2-metric-lbl {
  font-size: .65rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text3);
}
.stv2-metric-avg {
  font-size: .72rem; font-weight: 600; color: var(--text);
}
.stv2-cores {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px;
}
.stv2-core-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.stv2-core-bg {
  width: 100%; height: 36px;
  background: var(--border2); border-radius: 2px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.stv2-core-fill {
  width: 100%; border-radius: 2px; transition: height .5s;
}
.stv2-core-lbl { font-size: .55rem; color: var(--text3); }

.stv2-bar-wrap {
  height: 5px; background: var(--border2);
  border-radius: 3px; overflow: hidden;
}
.stv2-bar-fill { height: 100%; border-radius: 3px; transition: width .5s; }
.stv2-bar-blue  { background: var(--accent2); }
.stv2-bar-green { background: var(--accent); }

.stv2-log {
  height: 90px; overflow-y: auto; padding: .6rem 1.5rem;
  display: flex; flex-direction: column; gap: 2px;
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin; scrollbar-color: rgba(160,220,200,.2) transparent;
}
.stv2-log .tlog-item {
  font-size: .75rem; color: var(--text2); line-height: 1.4;
  padding: 2px 0;
  border-left: 2px solid transparent;
  padding-left: 8px;
}
.stv2-log .tlog-item.tlog-ok    { border-color: var(--success); color: var(--success); }
.stv2-log .tlog-item.tlog-proc  { border-color: var(--accent); color: var(--text); }
.stv2-log .tlog-item.tlog-error { border-color: var(--danger); color: var(--danger); }

.stv2-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.5rem;
}
.stv2-btn-bg {
  background: transparent; border: 1px solid var(--border);
  color: var(--text2); padding: .5rem 1rem;
  border-radius: 8px; font-size: .78rem;
  cursor: pointer; transition: .15s;
}
.stv2-btn-bg:hover { border-color: var(--accent2); color: var(--text); }
.stv2-btn-close {
  background: var(--accent); border: none; color: #060608;
  padding: .5rem 1.25rem; border-radius: 8px;
  font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: .15s; margin-left: auto;
}
.stv2-btn-close:hover { opacity: .85; }

/* ── MODAL DE ADVERTENCIA (legacy) ── */
.sync-modal {
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: 14px; padding: 2.5rem; max-width: 420px; width: 90%;
  text-align: center; box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
.sync-modal-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.sync-modal h2 { font-size: 1.2rem; color: var(--text); margin-bottom: 0.75rem; }
.sync-modal p { font-size: 0.88rem; color: var(--text2); margin-bottom: 0.5rem; line-height: 1.6; }
.sync-warn { color: var(--warning) !important; font-size: 0.8rem !important; }
.sync-modal-btns { display: flex; gap: 0.75rem; justify-content: center; margin-top: 1.5rem; }
.btn-sync-cancel {
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text2); padding: 8px 20px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 0.85rem; transition: var(--transition);
}
.btn-sync-cancel:hover { border-color: var(--accent2); color: var(--text); }
.btn-sync-start {
  background: linear-gradient(135deg, #1a3a2a, #142828);
  border: 1px solid var(--accent); color: var(--accent);
  padding: 8px 24px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 0.85rem; font-weight: 600;
  transition: var(--transition);
}
.btn-sync-start:hover { background: rgba(160,220,200,0.15); }

/* ── PANTALLA DE TRANSFERENCIA ── */
.sync-transfer {
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: 16px; padding: 2rem 2.5rem;
  max-width: 500px; width: 92%; box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
}

.transfer-header {
  display: flex; align-items: center; gap: 0.75rem;
  align-self: flex-start;
}
.transfer-title { font-size: 1.15rem; font-weight: 600; color: var(--text); }
.transfer-badge {
  background: rgba(140,200,220,0.12); border: 1px solid rgba(140,200,220,0.25);
  color: var(--accent2); padding: 2px 10px; border-radius: 20px;
  font-size: 0.72rem; font-weight: 500;
}

/* Pipeline de transferencia */
.transfer-pipeline {
  display: flex; align-items: center; gap: 1rem; width: 100%;
  justify-content: center; padding: 0.5rem 0;
}
.pipeline-node { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.pipeline-icon {
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2); border: 1px solid var(--border2);
}
.pipeline-label { font-size: 0.7rem; color: var(--text2); text-transform: uppercase; letter-spacing: 0.08em; }

/* Dots animados */
.pipeline-dots { display: flex; gap: 5px; align-items: center; flex: 1; justify-content: center; }
.pdot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  animation: dot-flow 1.6s ease-in-out infinite;
  opacity: 0.15;
}
.pdot:nth-child(1) { animation-delay: 0s; }
.pdot:nth-child(2) { animation-delay: 0.2s; }
.pdot:nth-child(3) { animation-delay: 0.4s; }
.pdot:nth-child(4) { animation-delay: 0.6s; }
.pdot:nth-child(5) { animation-delay: 0.8s; }
.pdot:nth-child(6) { animation-delay: 1.0s; }
.pdot:nth-child(7) { animation-delay: 1.2s; }
.pdot:nth-child(8) { animation-delay: 1.4s; }
@keyframes dot-flow {
  0%, 100% { opacity: 0.12; transform: scale(0.7); }
  50%       { opacity: 1;    transform: scale(1.2); background: var(--accent2); }
}

/* Barra de progreso */
.transfer-bar-wrap {
  width: 100%; height: 8px; background: var(--bg3);
  border-radius: 4px; overflow: hidden;
}
.transfer-bar-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 10px rgba(160,220,200,0.4);
}
.transfer-pct {
  font-size: 0.78rem; color: var(--text2); align-self: flex-end;
  margin-top: -0.75rem;
}

/* Log de actividad */
.transfer-log {
  width: 100%; max-height: 130px; overflow-y: auto;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.6rem 0.85rem;
  font-size: 0.78rem; font-family: 'JetBrains Mono', monospace;
}
.tlog-item {
  color: var(--text2); padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform: none; } }

/* Resumen final */
.transfer-summary {
  display: flex; gap: 1rem; width: 100%; justify-content: center;
  flex-wrap: wrap;
}
.summary-item {
  padding: 6px 16px; border-radius: var(--radius-sm); font-size: 0.82rem;
}
.summary-item.success { background: rgba(160,220,200,0.12); color: var(--success); border: 1px solid rgba(160,220,200,0.25); }
.summary-item.skip    { background: rgba(160,180,220,0.12); color: var(--neutral); border: 1px solid rgba(160,180,220,0.2); }
.summary-item.error   { background: rgba(220,140,160,0.12); color: var(--danger);  border: 1px solid rgba(220,140,160,0.2); }

/* Light mode sync */
[data-theme=light] .sync-modal,
[data-theme=light] .sync-transfer { background: var(--surface); }
[data-theme=light] .transfer-log  { background: var(--bg2); }

/* ════════════════════════════════════════════
   KPI PANEL LATERAL
════════════════════════════════════════════ */
.kpi-card  { cursor: pointer; }
.kpi-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.4); border-color: var(--accent2); }
.sem-light { cursor: pointer; }
.sem-light:hover .sem-bulb { transform: scale(1.12); }
.conf-cell { cursor: pointer; transition: var(--transition); }
.conf-cell:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.type-row  { cursor: pointer; transition: var(--transition); }
.type-row:hover .type-bar-fill { opacity: 0.8; }
.urg-row   { cursor: pointer; transition: var(--transition); }
.urg-row:hover { opacity: 0.8; }

/* Panel lateral */
.kpi-panel-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.25s ease;
  pointer-events: none;
}
.kpi-panel-overlay.open { opacity: 1; pointer-events: all; }

.kpi-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 501;
  width: 520px; max-width: 95vw;
  background: var(--bg2);
  border-left: 1px solid var(--border2);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -8px 0 40px rgba(0,0,0,0.5);
}
.kpi-panel.open { transform: translateX(0); }

.kpi-panel-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.kpi-panel-header h3 { font-size: 1rem; font-weight: 600; color: var(--text); }
.kpi-panel-header .count-badge {
  font-size: 0.72rem; background: rgba(160,220,200,0.12);
  border: 1px solid rgba(160,220,200,0.25); color: var(--accent);
  padding: 3px 10px; border-radius: 20px; margin-left: 0.5rem;
}
.kpi-panel-close {
  background: none; border: none; color: var(--text2);
  font-size: 1.3rem; cursor: pointer; padding: 4px 8px;
  border-radius: var(--radius-sm); transition: var(--transition);
}
.kpi-panel-close:hover { color: var(--danger); background: rgba(220,140,160,0.1); }

.kpi-panel-body {
  flex: 1; overflow-y: auto; padding: 0.75rem;
}

/* Doc card en el panel */
.kp-doc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.65rem;
  overflow: hidden;
  transition: var(--transition);
  cursor: pointer;
}
.kp-doc-card:hover { border-color: var(--border2); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.kp-doc-card.expanded { border-color: var(--accent2); }

.kp-doc-header {
  padding: 0.85rem 1rem;
  display: flex; align-items: flex-start; gap: 0.75rem;
}
.kp-doc-main { flex: 1; min-width: 0; }
.kp-doc-title {
  font-size: 0.88rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 0.25rem;
}
.kp-doc-meta {
  display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
  font-size: 0.72rem; color: var(--text2);
}
.kp-doc-kpis {
  display: flex; gap: 0.4rem; align-items: center; flex-shrink: 0;
}
.kpi-pip {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 0.65rem; color: var(--text3);
}
.kpi-pip-val {
  font-size: 0.85rem; font-weight: 700; line-height: 1;
}
.kpi-pip-lbl { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* Sumilla expandida */
.kp-doc-body {
  padding: 0 1rem 1rem;
  display: none;
  border-top: 1px solid var(--border);
}
.kp-doc-card.expanded .kp-doc-body { display: block; }
.kp-doc-summary {
  font-size: 0.83rem; color: var(--text2); line-height: 1.6;
  margin: 0.75rem 0;
}
.kp-doc-actions {
  display: flex; gap: 0.5rem; margin-top: 0.75rem;
}
.kp-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 6px 14px; border-radius: var(--radius-sm);
  font-size: 0.78rem; font-weight: 500; cursor: pointer;
  text-decoration: none; transition: var(--transition); border: 1px solid;
}
.kp-btn-primary {
  background: rgba(140,200,220,0.12); color: var(--accent2);
  border-color: rgba(140,200,220,0.3);
}
.kp-btn-primary:hover { background: rgba(140,200,220,0.22); color: var(--accent2); }
.kp-btn-secondary {
  background: rgba(160,220,200,0.08); color: var(--accent);
  border-color: rgba(160,220,200,0.2);
}
.kp-btn-secondary:hover { background: rgba(160,220,200,0.18); color: var(--accent); }

/* Sentiment dot inline */
.sent-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:2px; }
.sd-positive { background:var(--success); box-shadow:0 0 4px var(--success); }
.sd-neutral  { background:var(--warning); box-shadow:0 0 4px var(--warning); }
.sd-negative { background:var(--danger);  box-shadow:0 0 4px var(--danger); }

/* Panel loading */
.kp-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 3rem; color: var(--text3); font-size: 0.88rem; gap: 0.5rem;
}
.kp-spinner {
  width: 18px; height: 18px; border: 2px solid var(--border2);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

[data-theme=light] .kpi-panel { background: var(--bg2); }
[data-theme=light] .kp-doc-card { background: var(--surface); }


/* ════════════════════════════════════════════
   KPI STATUS CARD UNIFICADA
════════════════════════════════════════════ */
.kpi-status-card { cursor: default; }
.kpi-status-row {
  display: flex; align-items: center; gap: 0; margin: 0.5rem 0;
}
.kpi-status-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; cursor: pointer; padding: 0.3rem 0;
  border-radius: var(--radius-sm); transition: var(--transition);
}
.kpi-status-item:hover { background: rgba(255,255,255,0.04); }
.kpi-status-num {
  font-size: 1.8rem; font-weight: 700; color: var(--accent); line-height: 1;
}
.kpi-status-lbl {
  font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text3);
}
.kpi-status-ok .kpi-status-num  { color: var(--success); }
.kpi-status-err .kpi-status-num { color: var(--danger); }
.kpi-status-div {
  width: 1px; height: 36px; background: var(--border); flex-shrink: 0; margin: 0 0.25rem;
}
.kpi-mini-bar {
  height: 4px; background: var(--bg3); border-radius: 3px; overflow: hidden; margin-top: 0.4rem;
}

/* Tipo de doc con color */
.type-name { font-weight: 500; }


/* ════ KPI STATUS CARD — MAS GRANDE ════ */
.kpi-status-card { grid-column: span 2; }
.kpi-status-num  { font-size: 2.4rem !important; }
.kpi-status-lbl  { font-size: 0.72rem !important; }
.kpi-status-item { padding: 0.5rem 0.75rem !important; gap: 4px !important; }
.kpi-status-div  { height: 48px !important; }
.kpi-status-row  { gap: 0.25rem !important; margin: 0.75rem 0 !important; }

/* ════ ALERTA DENUNCIAS ════ */
.denuncia-alert {
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.25rem;
  border: 1px solid;
  transition: var(--transition);
  animation: alertPulse 2.5s ease-in-out infinite;
}
.denuncia-alert.danger {
  background: rgba(180,30,50,0.15);
  border-color: rgba(220,60,80,0.45);
  color: #ff8095;
}
.denuncia-alert-icon { font-size: 1.8rem; flex-shrink: 0; }
.denuncia-alert-body { flex: 1; }
.denuncia-alert-title { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.03em; }
.denuncia-alert-sub   { font-size: 0.78rem; opacity: 0.8; margin-top: 2px; }
.denuncia-alert-badge {
  font-size: 2rem; font-weight: 800; flex-shrink: 0;
  min-width: 56px; text-align: center;
}
@keyframes alertPulse {
  0%,100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 18px 2px rgba(220,60,80,0.2); }
}

/* ════ KPI STATUS CARD — FIX SPAN 2 ════ */
  grid-template-columns: repeat(4, 1fr);
.kpi-status-card {
  grid-column: span 2 !important;
  min-width: 340px;
}
.kpi-status-num { font-size: 2.8rem !important; }

/* ════ URGENCIA+IMPACTO — responsive con sidebar ════ */
/* Cuando sidebar está expandido el main es más estrecho → span 1 */
html:not([data-sidebar=collapsed]) .kpi-urgencia-impacto {
  grid-column: span 1 !important;
}
/* Cuando sidebar está colapsado hay espacio → span 2 */
html[data-sidebar=collapsed] .kpi-urgencia-impacto {
  grid-column: span 2 !important;
}

/* ════════════════════════════════════════════
   RADAR DE RIESGO
════════════════════════════════════════════ */
.radar-card { min-height: 340px; }
.radar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 1rem 1rem;
  gap: 1rem;
}
.radar-wrap canvas {
  display: block;
  margin: 0 auto;
}
.radar-legend {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1rem;
}
.radar-leg-row {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem;
}
.radar-leg-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.radar-leg-lbl { color: var(--text2); flex: 1; white-space: nowrap; }
.radar-leg-bar {
  width: 48px; height: 4px; background: var(--bg3);
  border-radius: 3px; overflow: hidden; flex-shrink: 0;
}
.radar-leg-val {
  font-size: 0.72rem; font-weight: 700;
  width: 30px; text-align: right; flex-shrink: 0;
}

/* db-row3 con radar ocupa bien el espacio */
.db-row3 { flex-wrap: wrap; }
.radar-card { flex: 1; min-width: 320px; }


/* ════════════════════════════════════════════
   GAUGE CARGA OPERATIVA
════════════════════════════════════════════ */
.gauge-kpi-card {
  display: flex;
  flex-direction: column;
  cursor: default;
  min-width: 170px;
}

.gauge-wrap {
  position: relative;
  display: flex; justify-content: center;
  margin: 0.25rem 0 0;
}
.gauge-center {
  position: absolute;
  bottom: 4px; left: 50%; transform: translateX(-50%);
  text-align: center; line-height: 1;
}
.gauge-num {
  font-size: 1.8rem; font-weight: 800; line-height: 1;
}
.gauge-sub {
  font-size: 0.65rem; text-transform: uppercase;
  letter-spacing: 0.1em; margin-top: 2px;
}
.gauge-breakdown {
  display: flex; justify-content: space-between;
  margin-top: 0.4rem; gap: 0.25rem;
}
.gauge-bd-row {
  display: flex; flex-direction: column; align-items: center;
  font-size: 0.62rem; color: var(--text3); gap: 1px;
  flex: 1; text-align: center;
}
.gauge-bd-row span:last-child {
  font-size: 0.75rem; font-weight: 700;
}

/* ════ GAUGE — FIX VISIBILIDAD (override) ════ */
/* Oculto cuando sidebar expandido */

/* Visible cuando sidebar colapsado */
.gauge-kpi-card { display: flex !important; flex-direction: column; }

/* ════════════════════════════════════════════
   WIDGET EXPAND SYSTEM
════════════════════════════════════════════ */
.card-header { position: relative; }
.widget-expand-btn {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  color: var(--text3); width: 26px; height: 26px;
  border-radius: var(--radius-sm); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; transition: var(--transition); opacity: 1;
}
.widget-expand-btn:hover { background: rgba(140,200,220,0.15); border-color: var(--accent2); color: var(--accent2); }

.wmodal-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.wmodal-overlay.open { opacity: 1; pointer-events: all; }
.wmodal {
  background: var(--bg2); border: 1px solid var(--border2); border-radius: 16px;
  width: 92vw; max-width: 920px; max-height: 88vh;
  display: flex; flex-direction: column;
  transform: scale(0.92) translateY(16px);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6); overflow: hidden;
}
.wmodal-overlay.open .wmodal { transform: scale(1) translateY(0); }
.wmodal-header {
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 1rem; flex-shrink: 0;
}
.wmodal-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.wmodal-header-text { flex: 1; }
.wmodal-title { font-size: 1.15rem; font-weight: 700; color: var(--text); }
.wmodal-subtitle { font-size: 0.78rem; color: var(--text2); margin-top: 2px; }
.wmodal-close { background: none; border: 1px solid var(--border); color: var(--text2); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: var(--transition); flex-shrink: 0; }
.wmodal-close:hover { background: rgba(220,140,160,0.1); color: var(--danger); border-color: var(--danger); }
.wmodal-body { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.wmodal-section { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.wmodal-chart-area { flex: 1.4; min-width: 280px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.wmodal-detail-area { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 0.75rem; }
.wm-legend { display: flex; flex-direction: column; gap: 0.45rem; }
.wm-legend-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.85rem; border-radius: var(--radius-sm); background: rgba(255,255,255,0.03); border: 1px solid var(--border); transition: var(--transition); cursor: pointer; }
.wm-legend-row:hover { background: rgba(255,255,255,0.06); border-color: var(--border2); }
.wm-legend-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.wm-legend-label { flex: 1; font-size: 0.82rem; color: var(--text2); }
.wm-legend-val { font-size: 1rem; font-weight: 700; }
.wm-legend-pct { font-size: 0.7rem; color: var(--text3); margin-left: 4px; }
.wm-stats { display: grid; grid-template-columns: repeat(auto-fill,minmax(110px,1fr)); gap: 0.6rem; }
.wm-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.75rem; text-align: center; }
.wm-stat-val { font-size: 1.6rem; font-weight: 800; color: var(--accent); line-height: 1; }
.wm-stat-lbl { font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text3); margin-top: 3px; }
.wm-insight { background: rgba(140,200,220,0.06); border: 1px solid rgba(140,200,220,0.2); border-radius: var(--radius-sm); padding: 0.85rem 1rem; }
.wm-insight-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent2); margin-bottom: 0.35rem; }
.wm-insight-text { font-size: 0.83rem; color: var(--text2); line-height: 1.55; }
.wm-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.wm-table th { padding: 0.55rem 0.85rem; text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text2); background: var(--bg2); }
.wm-table td { padding: 0.55rem 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text); }
.wm-table tr:hover td { background: rgba(255,255,255,0.03); }
.wm-divider { height: 1px; background: var(--border); margin: 0.25rem 0; }
[data-theme=light] .wmodal { background: var(--bg2); }
[data-theme=light] .wm-legend-row,.wm-stat { background: var(--surface); }


/* ════ FIX 2: expand btn siempre visible ════ */
.widget-expand-btn {
  opacity: 1 !important;
  background: rgba(255,255,255,0.04) !important;
}
.widget-expand-btn:hover {
  background: rgba(140,200,220,0.18) !important;
  border-color: var(--accent2) !important;
  color: var(--accent2) !important;
}

/* ════ TREND WIDGET PILLS ════ */
.trend-pills {
  display: flex; gap: 0.25rem; align-items: center; flex-wrap: nowrap;
}
.trend-pill {
  padding: 3px 9px; border-radius: 20px; font-size: 0.72rem;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text2); cursor: pointer; transition: var(--transition);
  white-space: nowrap; flex-shrink: 0;
}
.trend-pill:hover { border-color: var(--accent2); color: var(--accent2); }
.trend-pill.active {
  background: rgba(160,220,200,0.15);
  border-color: rgba(160,220,200,0.4);
  color: var(--accent); font-weight: 600;
}
/* Card header con pills: justify entre título y grupo derecho */
.card-header {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: nowrap; gap: 0.5rem;
}
.card-header h2 { flex-shrink: 0; }

/* ════ FIX: elementos con valor 0 no parecen clickeables ════ */
.sem-light[data-zero=1],
.urg-row[data-zero=1],
.conf-cell[data-zero=1] {
  cursor: default !important;
  opacity: 0.45;
}

/* ════ TREND CHART — tamaño controlado por CSS no por Chart.js ════ */
.db-row3 > .card:not(.radar-card) {
  display: flex; flex-direction: column;
}
.db-row3 > .card:not(.radar-card) > div:last-child {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  padding: 0.5rem 0.75rem 0.75rem;
}
#trendChart {
  width: 100% !important;
  flex: 1 !important;
  min-height: 0 !important;
  display: block;
}

/* ════ db-row3: radar y tendencia 50/50 ════ */
.db-row3 {
  display: flex; gap: 0.85rem; margin-bottom: 1.5rem; flex-wrap: nowrap;
  height: 340px;
}
.db-row3 > .card {
  min-width: 0;
}
.radar-card { flex: 0 0 40% !important; max-width: 40%; }
.db-row3 > .card:not(.radar-card) { flex: 0 0 calc(60% - 0.85rem) !important; max-width: calc(60% - 0.85rem); }


/* ════ RADAR CARD LAYOUT ════ */
.radar-card {
  display: flex; flex-direction: column;
}
/* Wrap del canvas: crece para ocupar espacio disponible */
.radar-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 0; min-height: 0; min-width: 0;
  transition: flex 0.35s ease;
  position: relative;
  overflow: hidden;
}
/* Canvas ocupa todo el wrap */
.radar-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Acordeón — leyenda arriba del toggle, oculta por defecto */
.radar-legend-wrap {
  width: 100%; overflow: hidden;
  max-height: 0; opacity: 0;
  transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1), opacity 0.28s ease;
  order: -1; /* aparece ENCIMA del wrap */
}
.radar-legend-wrap.open {
  max-height: 220px; opacity: 1;
}
.radar-legend {
  width: 100%; display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem 0.75rem; padding: 0.5rem 1rem 0.5rem;
}

/* Toggle — al fondo de la card */
.radar-accordion-toggle {
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 0.4rem; padding: 0.35rem 1rem;
  background: none; border: none; border-top: 1px solid var(--border);
  color: var(--text3); font-size: 0.7rem; cursor: pointer;
  transition: var(--transition); text-transform: uppercase; letter-spacing: 0.08em;
  flex-shrink: 0;
}
.radar-accordion-toggle:hover { color: var(--accent2); background: rgba(140,200,220,0.04); }
.radar-accordion-toggle .acc-arrow {
  display: inline-block; transition: transform 0.35s ease; font-size: 0.58rem;
}
/* Cuando está abierto, la flecha apunta arriba y el radar se comprime */
.radar-accordion-toggle.open .acc-arrow { transform: rotate(180deg); }
.radar-card.legend-open .radar-wrap { flex: 0 0 55%; }

/* ════ TREND CANVAS WRAPPER ════ */
.trend-canvas-wrap {
  flex: 1; display: flex; flex-direction: column;
  min-height: 0; padding: 0.5rem 0.75rem 0.75rem;
}
#trendChart {
  flex: 1 !important; width: 100% !important;
  min-height: 0 !important; height: auto !important;
  display: block;
}

/* ════ RADAR header compacto ════ */
.radar-card .card-header {
  padding: 0.6rem 1rem 0.5rem;
}
.radar-card .card-header h2 {
  font-size: 0.9rem;
}

/* Conf grid: 4 celdas en 2x2 */
.conf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0.5rem; padding: 0.75rem 0.75rem 0.5rem;
}
.conf-cell { grid-column: auto !important; grid-row: auto !important; }

/* Alerta secreto */
.conf-secret-alert {
  margin: 0 0.75rem 0.75rem;
  padding: 0.5rem 0.85rem;
  background: rgba(180,30,50,0.15);
  border: 1px solid rgba(220,60,80,0.4);
  border-radius: var(--radius-sm);
  color: #ff8095; font-size: 0.78rem;
  cursor: pointer; transition: var(--transition);
  animation: alertPulse 2.5s ease-in-out infinite;
}
.conf-secret-alert:hover { background: rgba(180,30,50,0.25); }

/* ════════════════════════════════════════════
   WORDCLOUD WIDGET
════════════════════════════════════════════ */
.db-wordcloud-row {
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}
/* Evitar que el wordcloud se superponga al db-row3 */
.db-row3 {
  position: relative;
  z-index: 2;
  isolation: isolate;
}
.db-row3 .card {
  overflow: hidden;
  isolation: isolate;
}
#wordcloudWrap {
  overflow: hidden !important;
  isolation: isolate;
}
.wordcloud-card {
  width: 100%;
}
.wordcloud-card .card-header {
  border-bottom: 1px solid var(--border);
  gap: 0.75rem;
}
.wc-legend {
  display: flex; gap: 0.75rem; align-items: center; flex-shrink: 0;
}
.wc-leg-item {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.72rem; color: var(--text2);
}
.wc-leg-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

.wordcloud-wrap {
  min-height: 200px; padding: 1.5rem 1.5rem 1rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem;
  align-items: center; justify-content: center;
  position: relative;
}
.wc-loading {
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--text3); font-size: 0.85rem; padding: 2rem;
}

/* Cada palabra */
.wc-word {
  display: inline-flex; align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative;
  white-space: nowrap;
}
.wc-word:hover {
  transform: scale(1.12);
  border-color: currentColor;
  filter: brightness(1.2);
  z-index: 2;
}
.wc-word .wc-count {
  font-size: 0.6em;
  opacity: 0.6;
  margin-left: 0.3em;
  font-weight: 400;
}
/* Tooltip al hover */
.wc-word::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  padding: 3px 8px; font-size: 0.7rem; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
  z-index: 10;
}
.wc-word:hover::after { opacity: 1; }

/* Tamaños de fuente por peso */
.wc-size-5 { font-size: 2.2rem; opacity: 1;   }
.wc-size-4 { font-size: 1.7rem; opacity: 0.95; }
.wc-size-3 { font-size: 1.3rem; opacity: 0.9;  }
.wc-size-2 { font-size: 1.0rem; opacity: 0.85; }
.wc-size-1 { font-size: 0.82rem; opacity: 0.75; }

/* Empty state */
.wc-empty {
  color: var(--text3); font-size: 0.88rem;
  padding: 2rem; text-align: center; width: 100%;
}

/* ════ PILL CAROUSEL ════ */
.pill-carousel {
  display: flex; align-items: center; gap: 0.2rem; flex-shrink: 0;
}
.pill-carousel-arrow {
  background: none; border: 1px solid var(--border); color: var(--text3);
  width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; line-height: 1; transition: var(--transition);
  flex-shrink: 0; padding: 0;
}
.pill-carousel-arrow:hover { border-color: var(--accent2); color: var(--accent2); }
.trend-pills {
  display: flex; gap: 0.2rem;
  overflow-x: auto; scroll-behavior: smooth;
  max-width: 240px; scrollbar-width: none;
  flex-shrink: 0;
}
.trend-pills::-webkit-scrollbar { display: none; }
.trend-pill { flex-shrink: 0; }

/* ════ WORDCLOUD header right ════ */
.wc-hdr-right {
  display: flex; align-items: center; gap: 0.75rem; margin-left: auto;
}
.wc-leg-item { display: flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--text2); }
.wc-leg-dot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
#wordcloudWrap span { font-family: var(--font-sans, sans-serif); }

/* ═══════════════════════════════════════════════════════════════
   ANÁLISIS DIMENSIONAL — Estilos del reporte y menú acordeón
   ═══════════════════════════════════════════════════════════════ */

/* ── Página de análisis ── */
.analysis-page { padding: 0; display: flex; flex-direction: column; gap: 1rem; }

/* ── Header ── */
.analysis-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.analysis-title-row { display: flex; align-items: center; gap: 0.75rem; }
.analysis-dim-icon { font-size: 1.8rem; line-height: 1; }
.analysis-title { font-size: 1.1rem; font-weight: 600; color: var(--text); margin: 0; }
.analysis-subtitle { font-size: 0.8rem; color: var(--text2); margin-top: 2px; }
.analysis-pills { display: flex; gap: 0.2rem; flex-wrap: wrap; }




/* ══ KPI BLOCK — 4 columnas ══════════════════════════════════════════════ */
.analysis-kpi-block {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.analysis-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  min-height: 160px;
}
@media (max-width: 900px) {
  .analysis-kpi-grid { grid-template-columns: 1fr 1fr; }
  .akpi-pie-col, .akpi-thermo-col { border-left: none; border-top: 1px solid var(--border); }
}

/* ── Columnas KPI izq/der ── */
.akpi-col { display: flex; flex-direction: column; }
.akpi-row {
  flex: 1; padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
}
.akpi-row:first-child { border-bottom: 1px solid var(--border); }
.akpi-col:first-child .akpi-row { border-right: 1px solid var(--border); }
.akpi-info { flex: 1; min-width: 0; }
.akpi-label {
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text2); margin-bottom: 3px;
}
.akpi-value {
  font-size: 1.75rem; font-weight: 700; color: var(--text); line-height: 1;
}
.akpi-trend {
  font-size: 0.7rem; margin-top: 4px;
  display: flex; align-items: center; gap: 3px; font-weight: 500;
}
.akpi-trend.up   { color: #c84040; }
.akpi-trend.down { color: #20a060; }
.akpi-trend.flat { color: var(--text3); }
.akpi-spark-wrap { width: 72px; flex-shrink: 0; }
.akpi-spark-wrap canvas { display: block; }
.akpi-spinner-row { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 70px; }

/* ── Col 3: Pie ── */
.akpi-pie-col {
  border-left: 1px solid var(--border);
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.akpi-pie-header {
  display: flex; align-items: center;
  justify-content: space-between; gap: 6px;
}
.akpi-pie-title {
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text2); white-space: nowrap; flex-shrink: 0;
}
.akpi-pie-sel {
  font-size: 0.65rem; border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 4px;
  background: var(--bg2); color: var(--text2); cursor: pointer; max-width: 110px;
}
.akpi-pie-canvas-wrap {
  display: flex; align-items: center; justify-content: center;
  position: relative; height: 110px;
}
.akpi-pie-canvas-wrap canvas { display: block; flex-shrink: 0; }
.akpi-pie-center { position: absolute; text-align: center; pointer-events: none; }
.akpi-pie-center-n { font-size: 1.1rem; font-weight: 700; color: var(--text); line-height: 1; }
.akpi-pie-center-l { font-size: 0.6rem; color: var(--text3); }
.akpi-pie-legend-title { font-size: 0.62rem; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
.akpi-pie-legend { display: flex; flex-direction: column; gap: 3px; }
.akpi-pie-leg-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.68rem; color: var(--text2);
}
.akpi-pie-leg-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.akpi-pie-leg-val { margin-left: auto; font-weight: 600; color: var(--text); }


/* ── Termómetro layout: [detail] [escala | tubo+bulbo] ── */
.akpi-thermo-body {
  display: flex; flex-direction: row; gap: 8px;
  align-items: stretch; flex: 1;
}
.akpi-thermo-detail { flex: 1; display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.akpi-thermo-score { font-size: 1.7rem; font-weight: 700; color: var(--text); line-height: 1; transition: color .6s; }
.akpi-thermo-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; transition: color .6s; margin-bottom: 2px; }
.akpi-thermo-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.akpi-thermo-row { display: flex; align-items: center; gap: 4px; }
.akpi-thermo-row-lbl { font-size: 0.62rem; color: var(--text3); width: 56px; flex-shrink: 0; }
.akpi-thermo-row-bar { height: 3px; border-radius: 2px; transition: width .5s, background .5s; min-width: 2px; }
.akpi-thermo-row-val { font-size: 0.62rem; font-weight: 600; color: var(--text2); min-width: 28px; text-align: right; }

/* tube-wrap: [escala] [right: tubo+bulbo] — horizontal */
.akpi-thermo-tube-wrap {
  display: flex; flex-direction: row;
  align-items: stretch; gap: 4px; flex-shrink: 0;
}
/* escala vertical a la izquierda */
.akpi-thermo-scale {
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-end; padding-right: 3px;
  font-size: 0.58rem; color: var(--text3); line-height: 1;
}
/* contenedor vertical: tubo arriba, bulbo abajo */
.akpi-thermo-right {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.akpi-thermo-tube {
  flex: 1; width: 10px; min-height: 80px;
  background: var(--bg3); border-radius: 5px;
  position: relative; overflow: hidden; border: 1px solid var(--border2);
}
.akpi-thermo-fill { position: absolute; bottom: 0; left: 0; right: 0; border-radius: 5px; transition: height .6s, background .6s; }
.akpi-thermo-needle { position: absolute; left: -4px; right: -4px; height: 2px; transition: bottom .6s, background .6s; }
.akpi-thermo-bulb { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; transition: background .6s; border: 2px solid var(--border2); }

/* ── Footer colapsar ── */
.akpi-footer {
  border-top: 1px solid var(--border); padding: 4px 14px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; background: var(--bg2); transition: background .15s; user-select: none;
}
.akpi-footer:hover { background: var(--bg3); }
.akpi-footer-txt { font-size: 0.68rem; color: var(--text3); }
.akpi-footer-arrow { font-size: 0.6rem; color: var(--text3); transition: transform .2s; }
.analysis-kpi-block.kpi-collapsed .analysis-kpi-grid { display: none; }
.analysis-kpi-block.kpi-collapsed .akpi-footer-arrow { transform: rotate(180deg); }

/* ── Fix modo claro ── */
[data-theme="light"] { --text2: rgba(14,26,20,0.78); --text3: rgba(14,26,20,0.52); }
[data-theme="light"] .akpi-trend.up   { color: #9a1a1a; }
[data-theme="light"] .akpi-trend.down { color: #0e6040; }

/* ── Barra de controles ── */
.analysis-controls {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.6rem 0.75rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
}
.analysis-ctrl-group { display: flex; align-items: center; gap: 0.35rem; }
.analysis-ctrl-label { font-size: 0.7rem; color: var(--text3); white-space: nowrap; }
.analysis-sel    { font-size: 0.75rem; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg2); color: var(--text2); cursor: pointer; }
.analysis-sel-sm { font-size: 0.7rem; padding: 2px 4px; border-radius: 5px; border: 1px solid var(--border); background: var(--bg2); color: var(--text2); cursor: pointer; }
.analysis-btn { font-size: 0.72rem; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border2); background: var(--surface2,var(--surface)); color: var(--text2); cursor: pointer; transition: var(--transition); white-space: nowrap; }
.analysis-btn:hover { background: var(--border); color: var(--text); }
.analysis-btn-dir { padding: 4px 8px; font-size: 0.85rem; }

/* ── Chips de cruce ── */
.analysis-cross-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.cross-chip { display: flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; background: rgba(160,180,220,0.15); border: 1px solid rgba(160,180,220,0.3); font-size: 0.7rem; color: var(--text2); }
.cross-chip-x { cursor: pointer; color: var(--text3); font-size: 0.85rem; line-height: 1; padding: 0 2px; }
.cross-chip-x:hover { color: var(--text); }

/* ── Tabla ── */
.analysis-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--border); }
.analysis-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.analysis-table thead th { padding: 0.6rem 0.75rem; text-align: left; font-size: 0.7rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); background: var(--surface); white-space: nowrap; }
.analysis-tr { border-bottom: 1px solid var(--border); transition: background 0.12s; }
.analysis-tr:last-child { border-bottom: none; }
.analysis-tr:hover { background: var(--surface); }
.analysis-tr td { padding: 0.6rem 0.75rem; vertical-align: middle; }
.analysis-td-title { max-width: 280px; }
.analysis-doc-title { display: block; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.analysis-doc-summary { font-size: 0.72rem; color: var(--text3); margin-top: 2px; }
.analysis-td-date   { white-space: nowrap; color: var(--text2); font-size: 0.75rem; }
.analysis-td-sender { max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text2); font-size: 0.75rem; }
.sent-icon-cell { font-size: 1.1rem; }
.analysis-badge { padding: 2px 7px; border-radius: 10px; font-size: 0.68rem; background: rgba(160,180,220,0.15); color: var(--text2); white-space: nowrap; }
.urg-badge { padding: 2px 6px; border-radius: 8px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
.urg-5 { background: rgba(220,100,100,0.15); color: #dc6464; }
.urg-4 { background: rgba(220,140,100,0.15); color: #dc8c64; }
.urg-3 { background: rgba(244,162,97,0.15);  color: #f4a261; }
.urg-2 { background: rgba(160,180,220,0.15); color: #a0b4dc; }
.urg-1 { background: rgba(160,220,200,0.15); color: #a0dcc8; }
.imp-badge { padding: 2px 6px; border-radius: 8px; font-size: 0.7rem; background: rgba(160,220,200,0.1); color: #a0dcc8; font-weight: 600; }
.analysis-loading { padding: 2rem; text-align: center; color: var(--text3); display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.analysis-empty { padding: 2rem; text-align: center; color: var(--text3); font-size: 0.85rem; }

/* ── Paginación ── */
.analysis-pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 0.25rem 0; }
.pg-info  { font-size: 0.75rem; color: var(--text3); margin-right: 0.5rem; }
.pg-btn   { padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text2); font-size: 0.75rem; cursor: pointer; transition: var(--transition); }
.pg-btn:hover  { background: var(--border); }
.pg-active     { background: var(--accent,#a0dcc8) !important; color: var(--bg) !important; border-color: transparent !important; font-weight: 600; }
.pg-dots       { color: var(--text3); font-size: 0.75rem; padding: 0 4px; }

/* ── Modal de cruce ── */
.analysis-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.analysis-modal { background: var(--bg2); border: 1px solid var(--border2); border-radius: 14px; width: 480px; max-width: 95vw; max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.analysis-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem 0.75rem; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text); }
.analysis-modal-close { background: none; border: none; color: var(--text3); font-size: 1.2rem; cursor: pointer; padding: 0 4px; }
.analysis-modal-body { padding: 1rem 1.25rem; }
.cross-dim-block { margin-bottom: 1rem; }
.cross-dim-label { font-size: 0.75rem; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4rem; }
.cross-dim-opts  { display: flex; flex-wrap: wrap; gap: 6px; }
.cross-opt-btn   { padding: 4px 12px; border-radius: 20px; border: 1px solid var(--border2); background: var(--surface); color: var(--text2); font-size: 0.75rem; cursor: pointer; transition: var(--transition); }
.cross-opt-btn:hover { background: var(--border2); color: var(--text); }

/* ── Acordeones del sidebar ── */
.sidebar-accordion { overflow: hidden; }
.sidebar-accordion-toggle {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.85rem; width: 100%;
  background: none; border: none; cursor: pointer;
  color: var(--text2); font-size: 0.82rem;
  transition: var(--transition); border-radius: 6px;
  text-align: left;
}
.sidebar-accordion-toggle:hover { background: var(--surface); color: var(--text); }
.sidebar-accordion-toggle.open  { color: var(--text); }
.sidebar-accordion-arrow { margin-left: auto; font-size: 0.65rem; transition: transform 0.25s; color: var(--text3); }
.sidebar-accordion-toggle.open .sidebar-accordion-arrow { transform: rotate(90deg); }
.sidebar-accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.sidebar-accordion-body.open { max-height: 400px; }
.sidebar-accordion-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.85rem 0.3rem 2.1rem;
  color: var(--text3); font-size: 0.78rem;
  text-decoration: none; border-radius: 6px;
  transition: var(--transition);
}
.sidebar-accordion-item:hover { background: var(--surface); color: var(--text2); }
.sidebar-accordion-item.active { background: var(--surface); color: var(--text); font-weight: 500; }
.sidebar-accordion-count { margin-left: auto; font-size: 0.68rem; color: var(--text3); background: var(--surface2,rgba(255,255,255,0.06)); padding: 1px 5px; border-radius: 8px; }

/* ═══════════════════════════════════════════════════════════════
   ANÁLISIS DIMENSIONAL — Estilos del reporte y menú acordeón
   ═══════════════════════════════════════════════════════════════ */

/* ── Página de análisis ── */
.analysis-page { padding: 0; display: flex; flex-direction: column; gap: 1rem; }

/* ── Header ── */
.analysis-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.analysis-title-row { display: flex; align-items: center; gap: 0.75rem; }
.analysis-dim-icon { font-size: 1.8rem; line-height: 1; }
.analysis-title { font-size: 1.1rem; font-weight: 600; color: var(--text); margin: 0; }
.analysis-subtitle { font-size: 0.8rem; color: var(--text2); margin-top: 2px; }
.analysis-pills { display: flex; gap: 0.2rem; flex-wrap: wrap; }

/* ── KPI Row ── */
.analysis-kpi-row { display: grid; grid-template-columns: 1fr 1fr 1fr 180px; gap: 0.75rem; }
@media (max-width: 900px) { .analysis-kpi-row { grid-template-columns: 1fr 1fr; } }

.analysis-kpi-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.9rem 1rem; min-height: 90px;
  display: flex; flex-direction: column; gap: 2px;
  transition: var(--transition);
}
.analysis-kpi-card:hover { border-color: var(--border2); }
.akpi-label  { font-size: 0.72rem; color: var(--text2); text-transform: uppercase; letter-spacing: 0.04em; }
.akpi-value  { font-size: 1.6rem; font-weight: 700; color: var(--text); line-height: 1.1; }
.akpi-trend  { font-size: 0.72rem; font-weight: 500; }
.akpi-spinner { display: flex; align-items: center; justify-content: center; flex: 1; }

.analysis-pie-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.akpi-pie-header { display: flex; align-items: center; justify-content: space-between; }
.akpi-pie-title  { font-size: 0.72rem; color: var(--text2); text-transform: uppercase; letter-spacing: 0.04em; }
.akpi-pie-legend { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pie-leg-item    { display: flex; align-items: center; gap: 4px; font-size: 0.68rem; color: var(--text2); }
.pie-leg-dot     { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Barra de controles ── */
.analysis-controls {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.6rem 0.75rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
}
.analysis-ctrl-group { display: flex; align-items: center; gap: 0.35rem; }
.analysis-ctrl-label { font-size: 0.7rem; color: var(--text3); white-space: nowrap; }
.analysis-sel    { font-size: 0.75rem; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg2); color: var(--text2); cursor: pointer; }
.analysis-sel-sm { font-size: 0.7rem; padding: 2px 4px; border-radius: 5px; border: 1px solid var(--border); background: var(--bg2); color: var(--text2); cursor: pointer; }
.analysis-btn { font-size: 0.72rem; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border2); background: var(--surface2,var(--surface)); color: var(--text2); cursor: pointer; transition: var(--transition); white-space: nowrap; }
.analysis-btn:hover { background: var(--border); color: var(--text); }
.analysis-btn-dir { padding: 4px 8px; font-size: 0.85rem; }

/* ── Chips de cruce ── */
.analysis-cross-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.cross-chip { display: flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; background: rgba(160,180,220,0.15); border: 1px solid rgba(160,180,220,0.3); font-size: 0.7rem; color: var(--text2); }
.cross-chip-x { cursor: pointer; color: var(--text3); font-size: 0.85rem; line-height: 1; padding: 0 2px; }
.cross-chip-x:hover { color: var(--text); }

/* ── Tabla ── */
.analysis-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--border); }
.analysis-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.analysis-table thead th { padding: 0.6rem 0.75rem; text-align: left; font-size: 0.7rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); background: var(--surface); white-space: nowrap; }
.analysis-tr { border-bottom: 1px solid var(--border); transition: background 0.12s; }
.analysis-tr:last-child { border-bottom: none; }
.analysis-tr:hover { background: var(--surface); }
.analysis-tr td { padding: 0.6rem 0.75rem; vertical-align: middle; }
.analysis-td-title { max-width: 280px; }
.analysis-doc-title { display: block; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.analysis-doc-summary { font-size: 0.72rem; color: var(--text3); margin-top: 2px; }
.analysis-td-date   { white-space: nowrap; color: var(--text2); font-size: 0.75rem; }
.analysis-td-sender { max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text2); font-size: 0.75rem; }
.sent-icon-cell { font-size: 1.1rem; }
.analysis-badge { padding: 2px 7px; border-radius: 10px; font-size: 0.68rem; background: rgba(160,180,220,0.15); color: var(--text2); white-space: nowrap; }
.urg-badge { padding: 2px 6px; border-radius: 8px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
.urg-5 { background: rgba(220,100,100,0.15); color: #dc6464; }
.urg-4 { background: rgba(220,140,100,0.15); color: #dc8c64; }
.urg-3 { background: rgba(244,162,97,0.15);  color: #f4a261; }
.urg-2 { background: rgba(160,180,220,0.15); color: #a0b4dc; }
.urg-1 { background: rgba(160,220,200,0.15); color: #a0dcc8; }
.imp-badge { padding: 2px 6px; border-radius: 8px; font-size: 0.7rem; background: rgba(160,220,200,0.1); color: #a0dcc8; font-weight: 600; }
.analysis-loading { padding: 2rem; text-align: center; color: var(--text3); display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.analysis-empty { padding: 2rem; text-align: center; color: var(--text3); font-size: 0.85rem; }

/* ── Paginación ── */
.analysis-pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 0.25rem 0; }
.pg-info  { font-size: 0.75rem; color: var(--text3); margin-right: 0.5rem; }
.pg-btn   { padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text2); font-size: 0.75rem; cursor: pointer; transition: var(--transition); }
.pg-btn:hover  { background: var(--border); }
.pg-active     { background: var(--accent,#a0dcc8) !important; color: var(--bg) !important; border-color: transparent !important; font-weight: 600; }
.pg-dots       { color: var(--text3); font-size: 0.75rem; padding: 0 4px; }

/* ── Modal de cruce ── */
.analysis-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.analysis-modal { background: var(--bg2); border: 1px solid var(--border2); border-radius: 14px; width: 480px; max-width: 95vw; max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.analysis-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem 0.75rem; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text); }
.analysis-modal-close { background: none; border: none; color: var(--text3); font-size: 1.2rem; cursor: pointer; padding: 0 4px; }
.analysis-modal-body { padding: 1rem 1.25rem; }
.cross-dim-block { margin-bottom: 1rem; }
.cross-dim-label { font-size: 0.75rem; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4rem; }
.cross-dim-opts  { display: flex; flex-wrap: wrap; gap: 6px; }
.cross-opt-btn   { padding: 4px 12px; border-radius: 20px; border: 1px solid var(--border2); background: var(--surface); color: var(--text2); font-size: 0.75rem; cursor: pointer; transition: var(--transition); }
.cross-opt-btn:hover { background: var(--border2); color: var(--text); }

/* ── Acordeones del sidebar ── */
.sidebar-accordion { overflow: hidden; }
.sidebar-accordion-toggle {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.85rem; width: 100%;
  background: none; border: none; cursor: pointer;
  color: var(--text2); font-size: 0.82rem;
  transition: var(--transition); border-radius: 6px;
  text-align: left;
}
.sidebar-accordion-toggle:hover { background: var(--surface); color: var(--text); }
.sidebar-accordion-toggle.open  { color: var(--text); }
.sidebar-accordion-arrow { margin-left: auto; font-size: 0.65rem; transition: transform 0.25s; color: var(--text3); }
.sidebar-accordion-toggle.open .sidebar-accordion-arrow { transform: rotate(90deg); }
.sidebar-accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.sidebar-accordion-body.open { max-height: 400px; }
.sidebar-accordion-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.85rem 0.3rem 2.1rem;
  color: var(--text3); font-size: 0.78rem;
  text-decoration: none; border-radius: 6px;
  transition: var(--transition);
}
.sidebar-accordion-item:hover { background: var(--surface); color: var(--text2); }
.sidebar-accordion-item.active { background: var(--surface); color: var(--text); font-weight: 500; }
.sidebar-accordion-count { margin-left: auto; font-size: 0.68rem; color: var(--text3); background: var(--surface2,rgba(255,255,255,0.06)); padding: 1px 5px; border-radius: 8px; }

/* ── Termómetro de riesgo ── */
.akpi-thermo-col {
  border-left: 1px solid var(--border);
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.akpi-thermo-wrap {
  flex: 1; padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
}



/* ── Modal cruce: footer con botón Filtrar ── */
.analysis-modal-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-top: 1px solid var(--border);
  background: var(--bg2); gap: 12px;
}
.cross-modal-hint {
  font-size: 0.72rem; color: var(--text3); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.analysis-modal-apply {
  font-size: 0.78rem; font-weight: 600;
  padding: 6px 18px; border-radius: 8px;
  background: var(--accent); color: var(--accent-dark);
  border: none; cursor: pointer; transition: opacity .15s; flex-shrink: 0;
}
.analysis-modal-apply:hover { opacity: 0.85; }

/* ── Botón seleccionado en el modal ── */
.cross-opt-btn {
  font-size: 0.75rem; padding: 4px 10px; border-radius: 20px;
  border: 1px solid var(--border2); background: var(--surface);
  color: var(--text2); cursor: pointer; transition: all .15s;
}
.cross-opt-btn:hover { border-color: var(--accent); color: var(--accent); }
.cross-opt-btn.cross-opt-selected {
  background: var(--accent); color: var(--accent-dark);
  border-color: var(--accent); font-weight: 600;
}
[data-theme="light"] .cross-opt-btn.cross-opt-selected {
  background: var(--accent); color: #fff;
}

/* ── Analysis table — nuevo layout ── */
.analysis-table { width:100%; border-collapse:collapse; }
.analysis-table thead tr { background: var(--bg2); }
.analysis-table th { font-size:0.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text2); padding:8px 12px; text-align:left; border-bottom:1px solid var(--border); }
.analysis-tr { border-bottom:1px solid var(--border); transition:background .12s; }
.analysis-tr:hover { background:var(--surface2,var(--bg2)); }
.analysis-td-sent { width:36px; padding:10px 8px; text-align:center; font-size:1.1rem; }
.analysis-td-main { padding:10px 12px; }
.analysis-td-date { padding:10px 10px; font-size:0.75rem; color:var(--text2); white-space:nowrap; }
.analysis-td-sender { padding:10px 10px; font-size:0.75rem; color:var(--text2); }
.analysis-doc-title { font-size:0.85rem; font-weight:600; color:var(--text); }
.analysis-doc-summary { font-size:0.72rem; color:var(--text2); margin-top:2px; }
.analysis-doc-indicators {
  display:flex; align-items:center; gap:8px; margin-top:5px; flex-wrap:wrap;
}
.analysis-badge-type {
  font-size:0.65rem; padding:2px 7px; border-radius:10px;
  background:var(--bg3); color:var(--text2); border:1px solid var(--border);
}
.analysis-ind-item { font-size:0.68rem; color:var(--text3); }
.analysis-ind-item b { font-weight:700; }
.analysis-ind-thermo {
  display:flex; align-items:center; gap:5px; margin-left:4px;
}
.analysis-thermo-bar {
  width:52px; height:4px; background:var(--bg3); border-radius:2px; overflow:hidden;
}
.analysis-thermo-fill { height:100%; border-radius:2px; transition:width .4s; }
.analysis-thermo-lbl { font-size:0.63rem; font-weight:600; }

/* Analysis table indicadores */
.analysis-td-sent{width:36px;padding:10px 8px;text-align:center;font-size:1.1rem;}
.analysis-td-main{padding:10px 12px;}
.analysis-td-date{padding:10px 10px;font-size:0.75rem;color:var(--text2);white-space:nowrap;}
.analysis-td-sender{padding:10px 10px;font-size:0.75rem;color:var(--text2);}
.analysis-doc-indicators{display:flex;align-items:center;gap:8px;margin-top:5px;flex-wrap:wrap;}
.analysis-badge-type{font-size:0.65rem;padding:2px 7px;border-radius:10px;background:var(--bg3);color:var(--text2);border:1px solid var(--border);}
.analysis-ind-item{font-size:0.68rem;color:var(--text3);}
.analysis-ind-item b{font-weight:700;}
.analysis-ind-thermo{display:flex;align-items:center;gap:5px;margin-left:4px;}
.analysis-thermo-bar{width:52px;height:4px;background:var(--bg3);border-radius:2px;overflow:hidden;}
.analysis-thermo-fill{height:100%;border-radius:2px;}
.analysis-thermo-lbl{font-size:0.63rem;font-weight:600;}


/* Transición sidebar — solo después del primer render (evita flash) */
.sidebar-ready .sidebar { transition: width 0.25s cubic-bezier(0.4,0,0.2,1); }
.sidebar-ready .main    { transition: margin-left 0.25s cubic-bezier(0.4,0,0.2,1); }
.sidebar-ready .footer  { transition: margin-left 0.25s cubic-bezier(0.4,0,0.2,1); }

/* ── Fix flash: sincronizar ancho via data-sidebar (aplicado en <head> antes que JS) ── */
[data-sidebar="collapsed"] .sidebar {
  width: 56px;
  transition: none; /* evitar animacion en primera carga */
}
[data-sidebar="collapsed"] ~ * .main,
[data-sidebar="collapsed"] .layout .main { margin-left: 56px; }
[data-sidebar="collapsed"] .footer { margin-left: 56px; }
[data-sidebar="collapsed"] .sidebar .sidebar-section { opacity: 0; height: 0; padding: 0; overflow: hidden; }
[data-sidebar="collapsed"] .sidebar .nav-label { opacity: 0; width: 0; overflow: hidden; }
[data-sidebar="collapsed"] .sidebar a { justify-content: center; padding: 0.75rem 0; }
[data-sidebar="collapsed"] .sidebar a .icon { margin: 0; font-size: 1.15rem; }


/* ── Sidebar colapsado: ocultar sección "Mis Grafos" completa ────── */
/* Los items de gráficos guardados (#sidebarMisGrafos / #sidebarSavedGraphs /
   #graph-item-*) son divs sin las clases que oculta el colapsado, así que
   quedaban visibles mostrando texto truncado + botón de eliminar. */
[data-sidebar="collapsed"] .sidebar #sidebarMisGrafos {
  display: none !important;
}

/* ── Sidebar colapsado: ocultar contadores huérfanos ─────────────── */
[data-sidebar="collapsed"] .sidebar > * .sidebar-accordion-toggle .sidebar-accordion-count,
[data-sidebar="collapsed"] .sidebar .sidebar-accordion-toggle .sidebar-accordion-count {
  display: none !important;
}
/* Dot indicador en el ícono del accordion cuando hay items (solo sidebar nav) */
[data-sidebar="collapsed"] .sidebar .sidebar-accordion-toggle > .icon {
  position: relative;
}
[data-sidebar="collapsed"] .sidebar .sidebar-accordion-toggle[data-count]:not([data-count="0"]) > .icon::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.85;
}

/* ── Sidebar colapsado: flyout al hover ─────────────────────────── */
[data-sidebar="collapsed"] .sidebar-accordion { position: relative; }

[data-sidebar="collapsed"] .sidebar-accordion-toggle .nav-label,
[data-sidebar="collapsed"] .sidebar-accordion-toggle .sidebar-accordion-arrow,
[data-sidebar="collapsed"] .sidebar-section,
[data-sidebar="collapsed"] .sidebar-accordion-body { display: none !important; }

[data-sidebar="collapsed"] .sidebar-accordion-toggle {
  justify-content: center; padding: 0.55rem 0;
}

/* Flyout panel */
.sidebar-flyout {
  display: none;
  position: fixed;
  left: 57px;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
  z-index: 2000;
  padding: 6px 0;
  pointer-events: auto;
}
.sidebar-flyout.visible { display: block; }
.sidebar-flyout-title {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text2);
  padding: 6px 14px 4px; display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.sidebar-flyout a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 14px; font-size: 0.82rem; color: var(--text2);
  text-decoration: none; transition: background 0.1s;
  gap: 8px;
}
.sidebar-flyout a:hover { background: var(--bg3); color: var(--text); }
.sidebar-flyout a.active { color: var(--accent); background: rgba(160,220,200,0.06); }
.sidebar-flyout .sidebar-accordion-count {
  font-size: 0.68rem; background: var(--bg3); color: var(--text3);
  border-radius: 10px; padding: 1px 6px; margin-left: auto; flex-shrink: 0;
}

/* ── Appliance widget v3 — layout horizontal compacto ───────────── */
#app-card {
  padding: 10px 13px !important;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Toggle servidor compacto */
#app-srv-toggle { height: 24px; }
#app-btn-dalia, #app-btn-milvus {
  font-size: .65rem !important;
  padding: 2px 7px !important;
  line-height: 1.2;
}

/* Contadores: grid horizontal compacto */
#app-card > div:nth-child(2) {
  gap: 5px !important;
}
#app-card > div:nth-child(2) .app-metric {
  padding: 5px 4px !important;
}
#app-card > div:nth-child(2) .app-metric > div:first-child {
  font-size: 1.1rem !important;
}

/* Hardware row: tanques pequeños + cores grandes */
#app-card > div:nth-child(3) {
  grid-template-columns: 68px 1fr !important;
  gap: 9px !important;
  align-items: center !important;
}

/* Tanques SVG — más pequeños */
#app-tank-ram, #app-tank-disk { width: 28px !important; height: 46px !important; }

/* Cores: barras más gruesas */
#app-cores-list > div > div:nth-child(2) > div {
  height: 5px !important;
}

/* Pipeline de proceso */
#app-proc-section .app-pdot {
  transition: background .15s, transform .15s;
}

/* Poll note */
.app-poll { font-size: .6rem; }

/* ── Urgencia e Impacto — span dinámico según sidebar ──────────── */
.kpi-urg-imp {
  grid-column: span 2;
}

/* ── Iconos de nodo en pipeline (Origen / Dalia) ───────────── */
.pipeline-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
}
.pipeline-icon svg { width: 100%; height: 100%; }
.pipeline-node { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pipeline-label { font-size: .72rem; font-weight: 500; color: var(--text2); }

@keyframes kpiApplyPulse { from { opacity: 1; } to { opacity: .7; } }

/* ── Appliance widget — modo comprimido ─────────────────────── */
#appliance-widget {
  transition: all .25s cubic-bezier(.4,0,.2,1);
}
#app-collapse-btn {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 14px !important;
  z-index: 10;
}
/* En modo comprimido (span 1) el contenido necesita más padding derecho */
#appliance-widget[style*="span 1"] #app-collapsed {
  padding-right: 18px !important;
}
/* En modo expandido el btn está pegado al borde */
#appliance-widget[style*="span 3"] #app-expanded {
  padding-right: 20px !important;
}

/* ══════════════════════════════════════════
   BARRA NAVEGACIÓN INFERIOR MÓVIL
══════════════════════════════════════════ */
.mobile-bottom-nav {
  display: none;
}

/* Menú perfil mobile: oculto en desktop por defecto.
   En mobile (<= 768px) se muestra cuando tiene la clase .open. */
.mbn-profile-menu { display: none; }
.mbn-overlay { display: none; }

@media (max-width: 768px) {

  /* Ocultar sidebar lateral en móvil */
  .sidebar { display: none !important; }
  .sidebar-overlay { display: none !important; }
  .sidebar-toggle-btn { display: none !important; }
  .main { margin-left: 0 !important; padding-bottom: 72px; }
  [data-sidebar="collapsed"] ~ * .main,
  [data-sidebar="collapsed"] .layout .main { margin-left: 0 !important; }

  /* Mostrar barra inferior */
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
    background: var(--bg2);
    border-top: 1px solid var(--border);
    height: 60px;
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .mbn-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    color: var(--text3); text-decoration: none;
    font-size: .6rem; font-weight: 500;
    border: none; background: transparent; cursor: pointer;
    transition: color .15s;
    padding: 6px 4px;
  }
  .mbn-item svg { width: 22px; height: 22px; flex-shrink: 0; }
  .mbn-item:hover, .mbn-item.mbn-active { color: var(--accent); }
  .mbn-item.mbn-active svg { stroke: var(--accent); }

  /* Menú perfil — se desliza desde abajo (mismo patrón que mbn-grafos-drawer: siempre montado, solo transform) */
  .mbn-profile-menu {
    display: block; visibility: hidden; pointer-events: none;
    position: fixed;
    bottom: 60px; left: 0; right: 0; z-index: 600;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    padding: 16px 0 8px;
    transform: translateY(100%);
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .mbn-profile-menu.open {
    visibility: visible; pointer-events: auto;
    transform: translateY(0);
    transition: transform .25s ease, visibility 0s linear 0s;
  }
  .mbn-profile-header {
    display: flex; align-items: center; gap: 12px;
    padding: 0 20px 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
  }
  .mbn-profile-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; font-weight: 600; flex-shrink: 0;
  }
  .mbn-profile-name { font-size: .88rem; font-weight: 600; color: var(--text); }
  .mbn-profile-role  { font-size: .72rem; color: var(--text3); text-transform: capitalize; }
  .mbn-menu-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 12px 20px;
    color: var(--text2); font-size: .88rem;
    text-decoration: none; background: transparent; border: none;
    cursor: pointer; text-align: left; transition: background .12s;
  }
  .mbn-menu-item:hover { background: rgba(160,220,200,.08); color: var(--accent); }
  .mbn-logout { color: var(--danger); }
  .mbn-logout:hover { background: rgba(220,100,100,.08); color: var(--danger); }
  .mbn-menu-divider { height: 1px; background: var(--border); margin: 4px 0; }

  /* Overlay oscuro detrás del menú */
  .mbn-overlay {
    display: none; position: fixed; inset: 0; z-index: 590;
    background: rgba(0,0,0,.5);
  }
  .mbn-overlay.open { display: block; }
}

/* Pestaña colapsada del chat (chat.php): cuando el panel del expediente se
   expande a pantalla completa, el chat se reduce a esta pestaña en vez de
   desaparecer -- mismo patron que .panel-tab usa para Chats/Documentos.
   La pestaña CHAT queda pegada directo a DOCS sin este ajuste, sin el hueco
   visual que las otras dos tienen entre si (ese hueco es en realidad el
   borde propio de los <aside> colapsados de Chats/Documentos, que aunque
   colapsan a width:0 conservan su border-right; el chat no tiene un <aside>
   de por medio, asi que se le agrega el mismo borde a mano). */
.chat-main-tab{border-left:1px solid var(--border);margin-left:2px}

/* ── Fila "Todos" del menú de ANÁLISIS ──────────────────────────────────
   Es la puerta de entrada al reporte completo de la dimensión, así que se
   distingue de las filas de valor: badge en color de acento (el resto va en
   gris), y una línea que la separa del listado de valores que hay debajo. */
/* "Todos" se distingue por PESO y FONDO, no por tamaño: mismo font-size que
   las filas de valor (0.78rem, heredado de .sidebar-accordion-item), en
   negrita y sobre un fondo apenas mas oscuro. El fondo ya separa el conjunto
   del desglose, asi que no hace falta ademas una linea divisoria. */
.sidebar-accordion .sidebar-item-todos{
  font-size:0.78rem;
  font-weight:700;
  background:var(--surface2,rgba(255,255,255,0.06));
  margin-bottom:4px;
}
.sidebar-accordion .sidebar-item-todos:hover{
  background:var(--surface);
}
.sidebar-item-todos .sidebar-count-todos{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  font-weight:700;
}

/* Los iconos de valor del menú de ANÁLISIS no se deforman cuando la etiqueta
   es larga ("Solicitud Comercial", "U5 — Crítica"). */
.sidebar-accordion-item svg{flex-shrink:0}

/* ── Servidores de embedding: tarjeta, etiquetas y modal de edición ───── */
.emb-item-click{cursor:pointer;transition:border-color .12s}
.emb-item-click:hover{border-color:var(--accent)}
.emb-tag{font-size:.6rem;font-weight:600;letter-spacing:.03em;background:var(--surface2);
  border:1px solid var(--border);color:var(--text2);border-radius:5px;padding:1px 6px;margin-left:6px}
.emb-tag-gpu{background:rgba(76,175,130,.15);border-color:rgba(76,175,130,.4);color:var(--green,#4caf82)}
.emb-tag-cpu{background:rgba(140,200,220,.12);border-color:rgba(140,200,220,.3);color:var(--accent2)}
.emb-btn-probar{background:none;border:1px solid var(--border);color:var(--text2);border-radius:6px;
  padding:4px 6px;cursor:pointer;display:flex;align-items:center;margin-left:8px;flex-shrink:0}
.emb-btn-probar:hover{color:var(--accent);border-color:var(--accent)}

.emb-ov{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);z-index:9880;
  display:none;align-items:center;justify-content:center;padding:20px}
.emb-ov.open{display:flex}
.emb-modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  max-width:520px;width:100%;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.45)}
.emb-modal-h{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border)}
.emb-modal-t{flex:1;font-size:.95rem;font-weight:600;color:var(--text)}
.emb-x{background:none;border:none;color:var(--text2);font-size:1.3rem;line-height:1;cursor:pointer;padding:0 4px}
.emb-x:hover{color:var(--text)}
.emb-modal-b{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.emb-f{display:flex;flex-direction:column;gap:4px;flex:1}
.emb-f > span{font-size:.74rem;color:var(--text2);font-weight:600}
.emb-f input,.emb-f select{background:var(--surface2);border:1px solid var(--border);border-radius:6px;
  color:var(--text);padding:7px 9px;font-size:.82rem;font-family:inherit;width:100%;box-sizing:border-box}
.emb-f input:focus,.emb-f select:focus{outline:none;border-color:var(--accent)}
.emb-f input:disabled{opacity:.6;cursor:not-allowed}
.emb-f small{font-size:.68rem;color:var(--text3,var(--text2));line-height:1.4}
.emb-f-row{display:flex;gap:12px}
.emb-msg{display:none;font-size:.76rem;padding:8px 10px;border-radius:6px}
.emb-msg.ok{background:rgba(76,175,130,.12);border:1px solid rgba(76,175,130,.35);color:var(--green,#4caf82)}
.emb-msg.err{background:rgba(207,110,138,.12);border:1px solid rgba(207,110,138,.4);color:#e08099}
.emb-modal-f{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--border)}
.emb-b{background:var(--surface2);border:1px solid var(--border);color:var(--text2);border-radius:7px;
  padding:6px 13px;font-size:.78rem;cursor:pointer;font-family:inherit}
.emb-b:hover{color:var(--text);border-color:var(--text3,var(--text2))}
.emb-b-ok{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.emb-b-ok:hover{filter:brightness(1.08);color:#fff}
.emb-b-del:hover{color:var(--red,#c0392b);border-color:rgba(207,110,138,.5)}
.emb-tag-rol{background:none;border-color:transparent;color:var(--text3,var(--text2));font-weight:400}
/* Texto de ayuda de cada bloque: explica para qué sirve, que es lo que
   distinguía a un gestor de vectores de un servidor de embedding. */
.emb-ayuda{font-size:.76rem;color:var(--text2);line-height:1.5;margin:0 0 10px}
.emb-vacio{font-size:.8rem;color:var(--text3,var(--text2));font-style:italic;margin:0 0 10px}
/* Número de orden: el puesto en que se va a usar cada servidor. */
.emb-orden{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--surface2);border:1px solid var(--border);border-radius:50%;
  font-size:.66rem;font-weight:700;color:var(--text2);margin-right:10px}

/* Lista de servidores de embedding: separación del botón de agregar y
   arrastrar para reordenar. */
.emb-lista{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.emb-btn-nuevo{margin-top:4px}
.emb-asa{display:flex;align-items:center;color:var(--text3,var(--text2));cursor:grab;
  padding:2px;margin-right:6px;flex-shrink:0;opacity:.5;transition:opacity .12s}
.emb-mini-item:hover .emb-asa{opacity:1}
.emb-asa:active{cursor:grabbing}
.emb-arrastrando{opacity:.4}
/* La fila sobre la que se va a soltar se marca, si no el arrastre es a ciegas. */
.emb-encima{border-color:var(--accent)}

/* ── Pantalla de eliminación completada ─────────────────────────────────
   Era una sola frase corrida; ahora es una confirmación clara con el
   detalle de todo lo borrado, para poder verificar que la limpieza fue
   completa. */
.purge-ok-ring{width:54px;height:54px;margin:0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(76,175,130,.14);border:2px solid rgba(76,175,130,.5);
  color:var(--green,#4caf82);animation:purgeRing .35s ease}
@keyframes purgeRing{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
/* El visto se dibuja solo: confirma que la acción terminó, no que está en curso. */
.purge-ok-check{stroke-dasharray:26;stroke-dashoffset:26;animation:purgeCheck .45s .2s ease forwards}
@keyframes purgeCheck{to{stroke-dashoffset:0}}
/* Detalle del borrado: acordeon cerrado y con desplazamiento propio. Eran
   siete filas que empujaban el boton fuera de la pantalla en monitores bajos. */
.purge-ok-det{margin-top:12px;border:1px solid var(--border);border-radius:9px;
  background:var(--surface)}
.purge-ok-det>summary{cursor:pointer;list-style:none;padding:9px 12px;
  font-size:.78rem;color:var(--text2);display:flex;align-items:center;gap:7px}
.purge-ok-det>summary::-webkit-details-marker{display:none}
.purge-ok-det>summary::marker{content:''}
.purge-ok-det>summary::before{content:'\203a';color:var(--text3);font-size:1rem;
  line-height:1;transition:transform .18s ease}
.purge-ok-det[open]>summary::before{transform:rotate(90deg)}
.purge-ok-det>summary:hover{color:var(--text)}
/* Sin tope propio: el que se desplaza es el modal entero. Con dos zonas de
   desplazamiento anidadas hay que hacerlo dos veces para leer siete filas. */
.purge-ok-det .purge-ok-lista{border:none;border-top:1px solid var(--border);
  border-radius:0}
.purge-ok-lista{border:1px solid var(--border);border-radius:9px;overflow:hidden}
.purge-ok-fila{display:flex;justify-content:space-between;align-items:center;
  padding:7px 12px;font-size:.79rem;color:var(--text2);border-top:1px solid var(--border)}
.purge-ok-fila:first-child{border-top:none}
.purge-ok-fila b{color:var(--text);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  .purge-ok-ring{animation:none}
  .purge-ok-check{animation:none;stroke-dashoffset:0}
}
/* El email queda en el desplegable, bajo el nombre de la entidad: dice con qué
   cuenta se entró, que es otra pregunta distinta de en qué organización se
   está trabajando. */
.nav-dropdown-email{display:block;font-size:.7rem;color:var(--text3,var(--text2));
  margin-top:1px;word-break:break-all}
/* Un nombre de entidad puede ser largo: se recorta en vez de estirar el header. */
.nav-dropdown-name{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Estado del servidor de modelos (clic en el robot del chat) ────────── */
.chat-avatar-clic{cursor:pointer;transition:transform .12s,border-color .12s}
.chat-avatar-clic:hover{transform:scale(1.08);border-color:var(--accent)}
.gpu-ov{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);z-index:9890;
  display:none;align-items:center;justify-content:center;padding:20px}
.gpu-ov.open{display:flex}
.gpu-modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  max-width:520px;width:100%;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.45)}
.gpu-h{display:flex;align-items:center;padding:13px 17px;border-bottom:1px solid var(--border)}
.gpu-t{flex:1;font-size:.93rem;font-weight:600;color:var(--text)}
.gpu-x{background:none;border:none;color:var(--text2);font-size:1.3rem;line-height:1;cursor:pointer;padding:0 4px}
.gpu-x:hover{color:var(--text)}
.gpu-b{flex:1;overflow-y:auto;padding:14px 17px}
.gpu-cargando{text-align:center;color:var(--text2);font-size:.82rem;padding:26px 0}
.gpu-fila{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:6px 0;font-size:.78rem;color:var(--text2);border-bottom:1px solid var(--border)}
.gpu-fila b{color:var(--text);text-align:right;word-break:break-all}
.gpu-ok{color:var(--green,#4caf82)}
.gpu-mal{color:var(--red,#c0392b)}
.gpu-sub{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text3,var(--text2));margin:16px 0 6px}
.gpu-vacio{font-size:.78rem;color:var(--text3,var(--text2));font-style:italic;padding:6px 0}
.gpu-modelo{border:1px solid var(--border);border-radius:9px;padding:9px 11px;margin-bottom:7px;
  background:var(--surface2)}
.gpu-modelo-h{display:flex;align-items:baseline;gap:8px;font-size:.82rem;color:var(--text)}
.gpu-vram{margin-left:auto;font-size:.74rem;color:var(--text2);font-variant-numeric:tabular-nums}
/* Un modelo "fijo en memoria" nunca se descarga solo: es la causa habitual de
   que la memoria se llene sin que nadie lo note. */
.gpu-tag-fijo{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  background:rgba(234,179,8,.15);border:1px solid rgba(234,179,8,.4);color:#eab308;
  border-radius:4px;padding:1px 6px}
.gpu-modelo-d{font-size:.68rem;color:var(--text3,var(--text2));margin-top:3px}
.gpu-liberar{margin-top:7px;background:var(--surface);border:1px solid var(--border);
  color:var(--text2);border-radius:6px;padding:4px 11px;font-size:.72rem;font-family:inherit;cursor:pointer}
.gpu-liberar:hover{color:var(--text);border-color:var(--accent)}
.gpu-liberar:disabled{opacity:.6;cursor:default}
.gpu-nota{font-size:.7rem;color:var(--text3,var(--text2));line-height:1.5;margin-top:10px;
  padding-top:9px;border-top:1px solid var(--border)}

/* ── Webhooks ─────────────────────────────────────────────────────────────
   Las acciones de cada fila van en linea y del mismo tamaño: apiladas y con
   anchos distintos, la tabla se veia desprolija y cada fila crecia el doble. */
/* Cada webhook es una tarjeta de DOS filas. Arriba lo que identifica; abajo el
   funcionamiento y las acciones. Una tabla ancha dejaba celdas de tres
   renglones (los servicios) al lado de celdas de uno. */
.wh-card{border:1px solid var(--border);border-radius:10px;background:var(--surface);
  padding:12px 14px;margin-bottom:9px}
.wh-card.apagado{opacity:.62}
.wh-r1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wh-r2{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--border)}
.wh-nombre{font-size:.88rem;font-weight:600;color:var(--text)}
.wh-url{font-size:.72rem;color:var(--text3);word-break:break-all;flex:1;min-width:180px}
/* Cada servicio como etiqueta: en una lista separada por comas no se distingue
   donde termina uno y empieza otro. */
.wh-evs{display:flex;gap:5px;flex-wrap:wrap}
.wh-ev-tag{font-size:.68rem;color:var(--text2);background:var(--surface2);
  border:1px solid var(--border);border-radius:5px;padding:2px 8px;white-space:nowrap}
.wh-envio{font-size:.72rem;color:var(--text3);white-space:nowrap}
.wh-envio.mal{color:#dc8ca0}
/* Las acciones empujadas al extremo derecho, siempre en el mismo lugar de todas
   las tarjetas: se encuentran sin buscar. */
.wh-acciones{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}

/* Selector de lenguaje de la guia. Mismo lenguaje que las pestañas del resto:
   subrayado en el acento, sin recuadros que compitan con el bloque de codigo. */
/* ── Panel de pruebas de aceptación ────────────────────────────────────── */
.qa-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:4300;justify-content:flex-end}
/* Lateral y no centrado: la corrida tarda un minuto, y así se puede seguir
   viendo la documentación de los servicios mientras avanza. */
.qa-panel{background:var(--card);border-left:1px solid var(--border);width:min(96vw,560px);
  height:100%;display:flex;flex-direction:column}
.qa-h{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.qa-h h3{margin:0;font-size:.95rem;color:var(--text);font-weight:600;flex:1}
.qa-body{overflow-y:auto;padding:16px 18px;flex:1}
/* Consola: monoespaciada y con tope de alto, para que el reporte no quede
   empujado abajo de treinta líneas. */
.qa-consola{margin-top:14px;background:#11151c;border:1px solid var(--border);border-radius:9px;
  padding:11px 13px;max-height:280px;overflow-y:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.72rem;line-height:1.65;color:#d8e0ea}
.qa-l{white-space:pre-wrap;word-break:break-word}
.qa-l-ok{color:#7fd1ae}
.qa-l-warn{color:#e0bd85}
.qa-l-err{color:#dc8ca0}
.qa-l-sec{color:#8b9bb4;margin-top:6px}
/* El token es una sola tirada de 300 caracteres sin espacios: sin permitirle
   cortar, se iba de ancho y quedaba debajo de los botones de copiar. El relleno
   superior le deja el lugar a esos botones en vez de pelearlo. */
#qaToken pre,#qaToken code{white-space:pre-wrap;word-break:break-all;
  padding-top:38px;font-size:.68rem;line-height:1.55;max-height:none}

.qa-rep{margin-top:14px;border:1px solid var(--border);border-left-width:3px;border-radius:9px;
  background:var(--surface);padding:11px 13px}
.qa-rep>summary{cursor:pointer;font-size:.8rem;color:var(--text2);line-height:1.5}
.qa-rep.qa-ok{border-left-color:#7fd1ae}
.qa-rep.qa-warn{border-left-color:#e0bd85}
.qa-rep.qa-err{border-left-color:#dc8ca0}

.whg-tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--border);margin-bottom:12px}
.whg-tab{background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:6px 12px;font-size:.76rem;font-family:inherit;color:var(--text2);cursor:pointer}
.whg-tab:hover{color:var(--text)}
.whg-tab.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
/* inline-flex y gap: sin esto el icono y el texto quedan pegados y los botones
   se leen como una sola palabra corrida. */
.wh-b{display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--border);background:var(--surface);color:var(--text2);
  border-radius:7px;padding:4px 11px;font-size:.72rem;font-weight:600;cursor:pointer;
  font-family:inherit;white-space:nowrap;transition:color .12s,border-color .12s}
/* El icono va mas apagado que el texto: acompaña, no compite. Al pasar el mouse
   toma el color del boton, incluido el rojo de Eliminar, porque usa
   currentColor. */
.wh-b svg{flex-shrink:0;opacity:.75}
.wh-b:hover svg{opacity:1}
.wh-b:hover{color:var(--text);border-color:var(--accent)}
.wh-b-del:hover{color:var(--danger);border-color:var(--danger)}

/* Visor del historial: ocupa casi toda la pantalla porque lo que se mira son
   dos JSON completos, uno al lado del otro. */
.whl-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:4200;
  align-items:center;justify-content:center}
.whl-dlg{background:var(--card);border:1px solid var(--border);border-radius:12px;
  width:min(96vw,1100px);max-height:92vh;display:flex;flex-direction:column}
.whl-h{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;
  align-items:center;gap:10px}
.whl-h h3{margin:0;font-size:.95rem;color:var(--text);font-weight:600}
.whl-filtros{display:flex;gap:7px;align-items:center;flex-wrap:wrap;
  padding:11px 18px;border-bottom:1px solid var(--border)}
.whl-filtros input,.whl-filtros select{font-size:.76rem;padding:5px 9px;border-radius:7px;
  border:1px solid var(--border);background:var(--bg);color:var(--text);font-family:inherit}
.whl-body{overflow-y:auto;padding:0 18px 14px;flex:1}
.whl-f{padding:11px 18px;border-top:1px solid var(--border);display:flex;gap:8px;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.whl-tabla{width:100%;border-collapse:collapse;font-size:.77rem}
.whl-tabla th{position:sticky;top:0;background:var(--card);text-align:left;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);
  padding:9px 8px;border-bottom:1px solid var(--border)}
.whl-tabla td{padding:8px;border-bottom:1px solid var(--border);color:var(--text2);
  vertical-align:middle}
.whl-tabla tr.sel td{background:rgba(255,255,255,.04)}
.whl-tabla tbody tr{cursor:pointer}
.whl-tabla tbody tr:hover td{background:rgba(255,255,255,.03)}
/* Estado derivado del codigo: verde 2xx, ambar 3xx, rojo el resto. Un color por
   familia, no por codigo: lo que importa al recorrer la lista es si hay que
   mirarlo o no. */
.whl-est{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 7px;border-radius:4px;white-space:nowrap}
.whl-ok{color:#7fd1ae;background:rgba(120,200,170,.15)}
.whl-warn{color:#e0bd85;background:rgba(220,180,120,.16)}
.whl-err{color:#dc8ca0;background:rgba(220,140,160,.15)}
/* Detalle: lo enviado y lo respondido, uno al lado del otro. */
.whl-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media (max-width:860px){.whl-cols{grid-template-columns:1fr}}
.whl-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:.76rem;color:var(--text2);
  padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:9px}
.whl-meta b{color:var(--text3);font-weight:600;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.04em;display:block}


/* ── Icono de alertas del archivo, en el encabezado ─────────────────
   Solo lo ve el gestor: las decisiones que se toman ahí cambian el grafo de
   toda la organización. */
.nav-alertas{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  color:var(--text2);text-decoration:none;transition:background .15s,color .15s;
}
.nav-alertas:hover{background:var(--surface2);color:var(--text)}
/* Con alertas pendientes el icono se tiñe: sin esto hay que fijarse en un
   número chico para saber si hay algo. */
.nav-alertas.tiene{color:#EF9F27}
.nav-alertas-n{
  position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;border-radius:9px;
  background:#c0392b;color:#fff;font-size:.62rem;font-weight:700;line-height:1;
  border:2px solid var(--bg,#fff);
}
.nav-alertas-n[hidden]{display:none}