/* ============================================================
   FAIR PLATFORM UI v2.0 — capa de diseño "enterprise" para TODA
   la herramienta (fair-admin-*.html, fair-login.html, fair-public.html).
   Se carga DESPUÉS de styles.css y sobrescribe/extiende las mismas
   clases que ya usa el HTML existente — así no hace falta reescribir
   el markup de cada página para adoptar el sistema nuevo. Las páginas
   fuera de #admin-shell/.login-wrap se marcan con body.fair-public-page.
   ============================================================ */

:root{
  --papel:#ffffff;
  --tarjeta:#ffffff;
  --linea:#e4e6ea;
  --tinta:#141a26;
  --tinta-2:#4a5468;
  --tinta-3:#8791a3;
  --acento:#0e2d5c;
  --azul:#1c4f9c;
  --verde:#177a53;
  --rojo:#bb3a30;
  --ambar:#a86a12;
  --violeta:#4a3aa7;
  --gris-neutro:#8791a3;
  --radio:12px;
  --sombra:0 1px 3px rgba(20,26,38,.06), 0 4px 12px rgba(20,26,38,.05);
  --sidebar-w: 232px;
  --chrome: var(--acento);
  --grid-linea: #f0f2f5;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
[data-theme="dark"]{
  --papel:#0a0d12;
  --tarjeta:#12161d;
  --linea:#262c36;
  --tinta:#eceef1;
  --tinta-2:#a3abb8;
  --tinta-3:#7e8795;
  --acento:#5b9bd9;
  --azul:#5b9bd9;
  --verde:#3fae82;
  --rojo:#e0685c;
  --ambar:#d6a13a;
  --violeta:#9b8de0;
  --gris-neutro:#8791a3;
  --chrome:#05070c;
  --sombra:0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.35);
  --grid-linea: #2a303b;
}
body, .admin-topbar, .admin-sidebar, #admin-shell .card, #admin-shell .kpi-card, #admin-shell .chart-card, #admin-shell .connector-card, #admin-shell .plan-card, table.data, .login-card, .fair-public-page .kpi-card, .fair-public-page .chart-card, .fair-public-page .report-card, .fair-public-page .banner{ transition: background .2s ease, color .2s ease, border-color .2s ease; }

/* Tipografía enterprise + fondo de panel */
body:has(#admin-shell), body:has(.login-wrap), body.fair-public-page{
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--papel);
  color: var(--tinta);
}
#admin-shell h2, #admin-shell h3, #admin-shell h4, .fair-public-page h2, .fair-public-page h3{ font-family: inherit; color: var(--tinta); }
#admin-shell p, #admin-shell .text-muted, .fair-public-page p, .fair-public-page .text-muted{ color: var(--tinta-2); }
.fair-public-page main{ background-image: none; }
.fair-public-page .report-card, .fair-public-page .banner:not(.banner-methodology):not(.banner-veda){ background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }

/* ---------- Topbar ---------- */
.admin-topbar{
  background: var(--chrome) !important;
  padding: 12px 20px;
}
.admin-logo span{ color: #ffffff !important; }
.admin-topbar .text-sm.text-muted{ color: rgba(255,255,255,.75) !important; }
.admin-topbar .btn-ghost{ color: #fff !important; border-color: rgba(255,255,255,.3); }
.hamburger-btn{
  display:none; background:none; border:none; color:#fff; font-size:1.4rem; cursor:pointer;
  padding:4px 8px; border-radius:6px; line-height:1;
}
.hamburger-btn:hover{ background: rgba(255,255,255,.12); }

/* ---------- Sidebar (Power BI style: navy, active bar) ---------- */
.admin-sidebar{
  background: var(--chrome) !important;
  width: var(--sidebar-w) !important;
  padding: 20px 10px !important;
  transition: transform .25s ease, background .2s ease;
  display:flex; flex-direction:column;
}
.theme-toggle{ margin-top:auto; display:flex; align-items:center; gap:8px; background:transparent; border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:999px; padding:.5em .9em; cursor:pointer; font-size:.8rem; }
.theme-toggle:hover{ background: rgba(255,255,255,.1); }
.theme-toggle-inline{ display:inline-flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--linea); color:var(--tinta-2); border-radius:999px; padding:.5em .9em; cursor:pointer; font-size:.8rem; }
.theme-toggle-inline:hover{ background: var(--papel); color: var(--tinta); }
.admin-nav-link{
  border-radius: 8px; padding: .75em 1em !important; position:relative;
  color: rgba(255,255,255,.72) !important;
}
.admin-nav-link:hover{ background: rgba(255,255,255,.08) !important; color:#fff !important; }
.admin-nav-link.active{
  background: rgba(255,255,255,.10) !important; color:#fff !important;
}
.admin-nav-link.active::before{
  content:""; position:absolute; left:-10px; top:8px; bottom:8px; width:3px;
  background: #fff; border-radius:2px;
}
.admin-main{ background: var(--papel); }

/* ---------- Cards / KPI / Chart cards (Power BI look) ---------- */
#admin-shell .card, #admin-shell .card-flat, #admin-shell .kpi-card, #admin-shell .chart-card, #admin-shell .connector-card, #admin-shell .plan-card, .fair-public-page .kpi-card, .fair-public-page .chart-card{
  background: var(--tarjeta) !important;
  border: 1px solid var(--linea) !important;
  border-radius: var(--radio) !important;
  box-shadow: var(--sombra);
}
#admin-shell .kpi-card, .fair-public-page .kpi-card{ padding: 18px 20px !important; }
#admin-shell .kpi-label, #admin-shell .kpi-card .kpi-label, .fair-public-page .kpi-label{ color: var(--tinta-3) !important; font-size:12px !important; }
#admin-shell .kpi-value, .fair-public-page .kpi-value{
  color: var(--tinta) !important; font-size: clamp(26px,3vw,32px) !important;
  font-weight:600 !important; font-variant-numeric: tabular-nums; font-family: var(--font-mono) !important;
}
#admin-shell .kpi-delta{ font-size:.8rem; font-weight:700; margin-top:4px; display:flex; align-items:center; gap:4px; font-family: var(--font-mono); }
#admin-shell .kpi-delta.up{ color: var(--verde); }
#admin-shell .kpi-delta.down{ color: var(--rojo); }
#admin-shell .kpi-card.north-star{ grid-column: span 2; padding:28px 30px !important; }
#admin-shell .kpi-card.north-star .kpi-value{ font-size: clamp(40px,5vw,56px) !important; }
.mono, #admin-shell .mono, .fair-public-page .mono{ font-family: var(--font-mono); }

/* Rejilla de fondo eliminada — fondo blanco pleno */
.admin-main{ background-image: none; }

/* Fila de alerta */
.alert-row{ display:flex; align-items:center; gap:12px; padding:10px 14px; min-height:42px; border-bottom:1px solid var(--linea); }
.alert-row:last-child{ border-bottom:none; }
.alert-row .dot{ flex:none; width:10px; height:10px; }
.alert-row .alert-text{ flex:1; font-size:.9rem; }
.alert-row time{ font-family: var(--font-mono); font-size:.78rem; color:var(--tinta-3); white-space:nowrap; }

/* Anillo de progreso (donut simple, conic-gradient) — código canónico .fr-ring */
.fr-ring{width:66px;height:66px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.fr-ring::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*3.6deg), var(--t) 0deg);}
.fr-ring::after{content:'';position:absolute;inset:9px;border-radius:50%;background:var(--tarjeta);}
.fr-ring span{position:relative;z-index:1;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:14px;color:var(--tinta);}
.fr-mini{width:38px;height:38px;}
.fr-mini::after{inset:5px;}
.fr-mini span{font-size:9px;}
.ring-row{display:flex;gap:12px;background:var(--tarjeta);border:0.5px solid var(--linea);border-radius:12px;padding:14px 18px;}
.ring-row .ring-label{flex:1;display:flex;flex-direction:column;justify-content:center;}
.ring-row .ring-label .t1{font-size:11px;color:var(--tinta-2);}
.ring-row .ring-label .t2{font-size:10px;color:var(--tinta-3);}

/* Tira de anillos mini (por día de la semana) */
.ring-strip{display:flex;justify-content:space-between;}
.ring-strip-item{text-align:center;}
.ring-strip-item .ring-strip-day{font-size:9px;color:var(--tinta-2);margin-top:3px;}

/* Tarjeta de estadística con mini-sparkline */
.stat-card{background:var(--tarjeta);border:0.5px solid var(--linea);border-radius:10px;padding:10px 12px;box-shadow:var(--sombra);}
.stat-card .kpi-label{font-size:10px;color:var(--tinta-2);}
.stat-card .kpi-value{font-family:var(--font-mono);font-size:18px;margin-top:2px;color:var(--tinta);}
.stat-card .spark-wrap{height:22px;margin-top:2px;}

/* Grid de intensidad tipo puntos (esquemático, no geográfico) */
.intensity-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;}
.intensity-grid .cell{width:100%;padding-top:100%;border-radius:3px;}

/* Barra de cruce CAWI ↔ redes */
.cross-bar{ position:relative; height:6px; border-radius:999px; background: var(--linea); margin: 18px 4px; }
.cross-bar .marker{ position:absolute; top:50%; width:14px; height:14px; border-radius:50%; transform:translate(-50%,-50%); border:2px solid var(--tarjeta); box-shadow:0 0 0 1px var(--linea); }
.cross-bar .marker.cawi{ background: var(--acento); }
.cross-bar .marker.redes{ background: var(--azul); }
.cross-bar-legend{ display:flex; gap:16px; font-size:.78rem; color:var(--tinta-3); margin-top:4px; }
#admin-shell .kpi-icon{
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; margin-bottom:10px; background: color-mix(in oklch, var(--azul) 12%, white); color: var(--azul);
}

/* Chart card header w/ actions */
#admin-shell .chart-card-head, .fair-public-page .chart-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:6px; }
#admin-shell .chart-card h3, .fair-public-page .chart-card h3{ font-size:15px; font-weight:600; margin:0; }
#admin-shell .chart-card .chart-sub, .fair-public-page .chart-card .chart-sub{ font-size:.78rem; color: var(--tinta-3); margin:2px 0 0; }
#admin-shell .chart-actions{ display:flex; gap:4px; flex:none; }
#admin-shell .chart-actions button{
  background:none; border:1px solid var(--linea); border-radius:6px; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--tinta-2); font-size:13px;
}
#admin-shell .chart-actions button:hover{ background: var(--papel); border-color: var(--azul); color: var(--azul); }

/* Skeleton (loading) already exists via .skeleton — kept as-is (pulsing gradient) */

/* Empty / error state */
.state-empty{ text-align:center; padding: 28px 16px; color: var(--tinta-3); font-size:.88rem; }
.state-error{ text-align:center; padding: 20px 16px; }
.state-error .btn{ margin-top:10px; }

/* ---------- Sticky global filter bar ---------- */
.filtros-globales{
  position: sticky; top: 0; z-index: 15; background: var(--tarjeta);
  border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 14px 16px; margin-bottom: 22px; display:flex; gap:14px; flex-wrap:wrap; align-items:end;
}
.filtros-globales .field{ margin:0 !important; min-width:150px; }
.filtros-chips{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:.78rem; color:var(--tinta-3); }
.filtros-chips .chip{ background: var(--papel); border:1px solid var(--linea); border-radius:999px; padding:3px 10px; }
.periodo-chip-row{ display:flex; gap:6px; flex-wrap:wrap; }
.periodo-chip{
  padding:.4em 1em; border-radius:999px; border:1px solid var(--linea); background:var(--tarjeta);
  font-size:.82rem; font-weight:600; cursor:pointer; color: var(--tinta-2);
}
.periodo-chip.active{ background: var(--acento); border-color:var(--acento); color:#fff; }

/* Drawer lateral (drill-down) */
.drawer-overlay{ position:fixed; inset:0; background: rgba(20,26,38,.35); z-index:60; display:none; }
.drawer-overlay.open{ display:block; }
.drawer-panel{
  position:fixed; top:0; right:0; bottom:0; width: min(420px, 92vw); background:var(--tarjeta);
  box-shadow: -8px 0 24px rgba(0,0,0,.15); z-index:61; transform: translateX(100%); transition: transform .25s ease;
  padding: 22px; overflow-y:auto;
}
.drawer-overlay.open .drawer-panel{ transform: translateX(0); }
.drawer-close{ background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--tinta-2); float:right; }

/* Tabla con indicador de scroll horizontal (sombra en los bordes) */
.table-scroll{
  position:relative;
  background:
    linear-gradient(to right, var(--tarjeta) 0%, transparent 4%) 0 0,
    linear-gradient(to left, var(--tarjeta) 0%, transparent 4%) 100% 0,
    linear-gradient(to right, rgba(20,26,38,.10), transparent 12px) 0 0,
    linear-gradient(to left, rgba(20,26,38,.10), transparent 12px) 100% 0;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* ---------- Responsive breakpoints: 1280 / 1024 / 768 / 480 ---------- */
@media (max-width: 1280px){
  .admin-main{ padding: 24px !important; }
}
@media (max-width: 1024px){
  .admin-sidebar{ width: 68px !important; }
  .admin-nav-link{ font-size:0 !important; text-align:center; padding:.85em .4em !important; }
  .admin-nav-link::after{ content: attr(data-short); font-size:.62rem; display:block; margin-top:2px; }
  .admin-nav-link.active::before{ left:4px; }
}
@media (max-width: 860px){
  .admin-body{ flex-direction: row !important; }
}
@media (max-width: 768px){
  .hamburger-btn{ display:inline-block; }
  .admin-sidebar{
    position:fixed; left:0; top:58px; bottom:0; width: 240px !important; z-index:50;
    transform: translateX(-100%); flex-direction:column !important; overflow-x:visible !important;
  }
  .admin-sidebar.open{ transform: translateX(0); box-shadow: 8px 0 24px rgba(0,0,0,.2); }
  .admin-nav-link{ font-size:.92rem !important; text-align:left; }
  .admin-nav-link::after{ display:none; }
  .admin-main{ padding: 16px !important; }
  .filtros-globales{ flex-direction:column; align-items:stretch; }
  .filtros-globales .field{ min-width:0; }
  #admin-shell .kpi-grid, #admin-shell .chart-grid{ grid-template-columns: 1fr !important; }
  /* Cualquier grid de múltiples columnas (inline o de clase) definido en las
     páginas del panel colapsa a una sola columna en pantallas de celular —
     cubre los grids ad-hoc de formularios, comparativos y resúmenes que cada
     página arma con estilo inline. */
  #admin-shell .grid{ grid-template-columns: 1fr !important; }
  #admin-shell .section-head{ flex-direction:column; align-items:stretch !important; }
  #admin-shell select, #admin-shell input[type="text"], #admin-shell input[type="search"], #admin-shell input[type="date"], #admin-shell input[type="number"]{ max-width:100% !important; }
}
@media (max-width: 480px){
  .admin-topbar{ padding:10px 12px; }
  .admin-logo img{ width:70px !important; height:auto !important; }
  .admin-logo span{ display:none; }
  #admin-shell .kpi-value{ font-size:24px !important; }
}

/* Chart canvases: siempre fluidos dentro de su tarjeta */
#admin-shell .chart-canvas-wrap, .fair-public-page .chart-canvas-wrap{ position:relative; width:100%; }
#admin-shell .chart-canvas-wrap canvas, .fair-public-page .chart-canvas-wrap canvas{ width:100% !important; height:100% !important; }
.fair-public-page .public-header{ background: var(--tarjeta) !important; border-bottom: 1px solid var(--linea); }
.fair-public-page .footer-note{ background: var(--chrome) !important; }
.brand-logo-dark{ display:none; }
[data-theme="dark"] .brand-logo-light{ display:none; }
[data-theme="dark"] .brand-logo-dark{ display:inline-block; }
.public-nav-brand img.brand-logo-dark{ background:transparent !important; padding:0 !important; border-radius:0 !important; }

/* Print (para la vista Informe, fase 4) */
@media print{
  .admin-sidebar, .admin-topbar, .hamburger-btn, .chart-actions, .tab-row, .filtros-globales{ display:none !important; }
  .admin-body{ display:block !important; }
  .admin-main{ padding:0 !important; }
}