/* Tema Limablue compartido por TODAS las páginas del panel.
   Se carga al final de <head> (después de los estilos propios de cada página) y unifica marca, tokens,
   tipografía, tarjetas, tablas, botones, estados y modo oscuro. Para cambiar el look, se cambia aquí. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  /* marca y neutros */
  --brand:#003287; --brand-hover:#0044ab; --brand-soft:#eef3fb; --accent:#35afe5;
  --bg:#faf8ff; --card:#ffffff; --card2:#fbfaff; --border:#e6e4ef; --border-strong:#d3d0e0;
  --ink:#0f172a; --ink-2:#5b6b80; --ink-3:#7a889c;
  /* semánticos (siempre con icono o texto) */
  --ok:#0f7a55; --ok-bg:#e6f5ee; --warn:#b45309; --warn-bg:#fdf1e0; --err:#c81e1e; --err-bg:#fcebeb; --info:#0044ab; --info-bg:#eef3fb;
  /* categóricos para gráficos (orden fijo) */
  --c1:#003287; --c2:#E69F00; --c3:#009E73; --c4:#CC79A7; --c5:#56B4E9; --c6:#D55E00; --c7:#6B4FBB; --c8:#5b6b80;
  --grid:#ece9f5; --heat-0:#eef3fb; --heat-1:#003287; --on-heat:#ffffff; --on-brand:#ffffff;
  --r:8px; --r-sm:6px;
  --f-xs:11px; --f-sm:12px; --f-tb:13px; --f-md:14px; --f-lg:16px; --f-xl:20px; --f-kpi:30px;

  /* alias: nombres que usan las páginas antiguas -> tokens nuevos */
  --text:var(--ink); --muted:var(--ink-2); --line:var(--border);
  --primary:var(--brand); --primary2:var(--brand-hover);
  --teal:var(--brand); --blue:var(--brand-hover); --orange:var(--warn); --red:var(--err); --green:var(--ok);
  --teal-hi:var(--c3); --teal-lo:#d8f0e9;
  --shadow:none; --radius:8px;
}
:root[data-theme="dark"] {
  --brand:#6ea0ff; --brand-hover:#8fb6ff; --brand-soft:#16223d; --accent:#56B4E9;
  --bg:#0b1220; --card:#111a2e; --card2:#0e1728; --border:#22304a; --border-strong:#2f405f;
  --ink:#e6ecf5; --ink-2:#9aa9c0; --ink-3:#7b8aa3;
  --ok:#3ecf9a; --ok-bg:#12302a; --warn:#f0a94b; --warn-bg:#33270f; --err:#ff7b7b; --err-bg:#3a1a1c; --info:#8fb6ff; --info-bg:#16223d;
  --c1:#6ea0ff; --c2:#F0B429; --c3:#2FBF8F; --c4:#E08FBE; --c5:#7CC4F0; --c6:#F0854A; --c7:#9C86E8; --c8:#9aa9c0;
  --grid:#1d2942; --heat-0:#16223d; --heat-1:#6ea0ff; --on-heat:#0b1220; --on-brand:#0b1220; --teal-lo:#12302a;
  color-scheme: dark;
}

/* ---------- base ---------- */
body { font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--r-sm); }
h1 { font-size:var(--f-xl); font-weight:800; letter-spacing:-.3px; color:var(--ink); }
h1 span, h1 small { color:var(--ink-2); font-weight:500; font-size:var(--f-tb); letter-spacing:0; }
.section-title, .sec-title { font-size:var(--f-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.num, td, th { font-variant-numeric:tabular-nums; }

/* ---------- tarjetas: borde 1px, radio 8, sin sombra ---------- */
.tile, .hero, .card, .chart-card, .heatcard, .feature, .panel, .kpi, .stat, .call, .datebox {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r); box-shadow:none;
}
.card:hover, .tile:hover { transform:none; border-color:var(--brand); }
.tile::before, .hero::before, .kpi::before { width:3px; border-radius:0 3px 3px 0; }
.tile .label, .hero .label, .kpi .label, .kpi .lbl, .stat .label {
  font-size:var(--f-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
}
.tile .num, .hero .num, .kpi .num, .kpi .val { font-size:var(--f-kpi); font-weight:800; letter-spacing:-.5px; line-height:1.15; }
.hero.mini .num { font-size:var(--f-xl); }
.chart-head h2, .panel h2, .panel > h3 { font-size:var(--f-md); font-weight:700; color:var(--ink); }
.chart-head .hint, .hint, .panel .sub, .sub { font-size:var(--f-sm); color:var(--ink-2); font-weight:500; }
.feature::after { background:var(--brand-soft); color:var(--brand); }

/* ---------- tablas ---------- */
table { border-collapse:collapse; }
th { font-size:var(--f-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); border-bottom:1px solid var(--border); }
td { font-size:var(--f-tb); border-bottom:1px solid var(--border); }
tbody tr:hover td { background:var(--brand-soft); }

/* ---------- controles ---------- */
button, .btn { font-family:inherit; }
.filtros button, button.primary, .btn.primary {
  background:var(--brand); color:#fff; border:1px solid var(--brand); border-radius:var(--r-sm); font-weight:600; cursor:pointer;
}
:root[data-theme="dark"] .filtros button, :root[data-theme="dark"] button.primary, :root[data-theme="dark"] .btn.primary { color:#0b1220; }
.filtros button:hover, button.primary:hover { background:var(--brand-hover); filter:none; }
input, select, textarea { font-family:inherit; color:var(--ink); background:var(--card); border:1px solid var(--border-strong); border-radius:var(--r-sm); }
input[type=date] { color:var(--ink); background:var(--card); border:1px solid var(--border-strong); border-radius:var(--r-sm); }

/* estado / punto de conexión */
.status { background:var(--card); border:1px solid var(--border); box-shadow:none; color:var(--ink-2); }
.dot.ok { background:var(--ok); } .dot.err { background:var(--err); }

/* avisos */
.banner { background:var(--err-bg); border:1px solid var(--err); color:var(--err); border-radius:var(--r); font-weight:600; }
.banner code { background:transparent; color:inherit; }
footer { color:var(--ink-3); }

/* pills semánticas reutilizables: <span class="pill ok">Texto</span> */
.pill { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:var(--f-xs); font-weight:700; }
.pill.ok { color:var(--ok); background:var(--ok-bg); } .pill.warn { color:var(--warn); background:var(--warn-bg); }
.pill.err { color:var(--err); background:var(--err-bg); } .pill.info { color:var(--info); background:var(--info-bg); }

/* estados: cargando / vacío / error con reintento */
.lb-skel { display:flex; flex-direction:column; gap:10px; padding:var(--s3,12px) 0; }
.lb-skel i { display:block; height:12px; border-radius:6px; background:linear-gradient(90deg,var(--border) 25%,var(--brand-soft) 50%,var(--border) 75%); background-size:200% 100%; animation:lbsh 1.4s infinite; }
@keyframes lbsh { to { background-position:-200% 0; } }
.lb-empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; color:var(--ink-2); font-size:var(--f-tb); padding:20px 12px; }
.lb-empty b { color:var(--ink); font-size:var(--f-md); }
.lb-empty button { height:32px; padding:0 14px; border-radius:var(--r-sm); border:1px solid var(--brand); background:var(--brand); color:#fff; font:600 var(--f-sm) 'Montserrat',sans-serif; cursor:pointer; }
:root[data-theme="dark"] .lb-empty button { color:#0b1220; }
@media (prefers-reduced-motion:reduce) { .lb-skel i { animation:none; } * { scroll-behavior:auto !important; } }

/* banner global "datos sin actualizar" (lo muestra tema.js) */
#lb-stale { display:none; position:sticky; top:0; z-index:60; align-items:center; gap:10px; padding:10px 16px; background:var(--err-bg); color:var(--err); border-bottom:1px solid var(--err); font-size:var(--f-tb); font-weight:600; }
#lb-stale.show { display:flex; }

/* ---------- barra lateral (.side de index y .lb-side del resto) ---------- */
.side, .lb-side { background:var(--card); border-right:1px solid var(--border); font-family:'Montserrat',system-ui,sans-serif; }
.side .logo .sq, .lb-side .lb-logo .sq { background:var(--brand); box-shadow:none; border-radius:var(--r); color:#fff; }
:root[data-theme="dark"] .side .logo .sq, :root[data-theme="dark"] .lb-side .lb-logo .sq { color:#0b1220; }
.side .logo .nm, .lb-side .lb-logo .nm { color:var(--ink); }
.side .logo .nm small, .lb-side .lb-logo .nm small { color:var(--ink-2); font-size:var(--f-xs); }
.side nav a, .lb-side nav a { color:var(--ink-2); border-radius:var(--r); font-size:var(--f-tb); }
.side nav a:hover, .lb-side nav a:hover { color:var(--ink); background:var(--brand-soft); }
.side nav a.active, .lb-side nav a.active { color:var(--brand); background:var(--brand-soft); }
.side nav a.active::before, .lb-side nav a.active::before { background:var(--brand); }
.side .online { background:var(--brand-soft); border:1px solid var(--border); color:var(--ink-2); }
.lb-side .lb-foot, .side .side-upd { color:var(--ink-3); }
.lb-theme { margin-top:8px; width:100%; height:32px; border-radius:var(--r-sm); border:1px solid var(--border-strong); background:var(--card); color:var(--ink-2); font:600 var(--f-sm) 'Montserrat',sans-serif; cursor:pointer; }
.lb-theme:hover { background:var(--brand-soft); color:var(--ink); }
html[data-cc="1"] .lb-theme { display:none; }

/* botón "Etiquetas" (labels.js) */
.lb-lblbtn { background:var(--card); color:var(--ink-2); border:1px solid var(--border-strong); border-radius:var(--r-sm); font-family:inherit; }
.lb-lblbtn[aria-pressed="true"] { background:var(--brand-soft); color:var(--brand); border-color:var(--brand); }

/* ---------- ajustes de compatibilidad con estilos antiguos de cada página ---------- */
/* el <nav> de píldoras antiguo de algunas páginas ya no aplica a la barra lateral */
.lb-side nav { margin:0; }
.lb-side nav a, .side nav a { border:0; box-shadow:none; background:transparent; padding:9px 11px; border-radius:var(--r); }
.lb-side nav a:hover, .side nav a:hover { background:var(--brand-soft); }
.lb-side nav a.active, .side nav a.active { background:var(--brand-soft); color:var(--brand); border:0; }
/* tarjetas propias de index */
.kpi2, .pcard, .det-post, .stat, .call, .datebox, .h-datechip, .bell, .sede-btn { box-shadow:none; border-radius:var(--r); }
.kpi2, .pcard, .det-post { background:var(--card); border:1px solid var(--border); }
.avatar { box-shadow:none; }
.side-export, .lb-theme { border-radius:var(--r-sm); }

#lb-stale { grid-column:1/-1; }

/* ---------- escala para TV 4K (solo en modo pantalla: ?cc=1 / rotación; lo activa tema.js poniendo html[data-z]) ----------
   Las páginas se diseñan a 1920x1080; en una pantalla mayor todo se agranda por --z (2 en 3840x2160). */
html[data-z] body { width: calc(100vw / var(--z)); min-height: calc(100vh / var(--z)); transform: scale(var(--z)); transform-origin: 0 0; }
html[data-z] .side, html[data-z] .lb-side { height: calc(100vh / var(--z)) !important; }
html[data-z] #rotBar { transform: scale(var(--z)); transform-origin: bottom right; }