/* ============================================================
   ID · Fair Estudios y Analítica — Sistema de diseño compartido
   Paleta y tipografía reales, suministradas por el cliente.
   ============================================================ */

@font-face{ font-family:'Uncage'; src: url('assets/fonts/UNCAGE-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Uncage'; src: url('assets/fonts/UNCAGE-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face{ font-family:'Uncage'; src: url('assets/fonts/UNCAGE-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }

@font-face{ font-family:'Nunito Sans'; src: url('assets/fonts/NunitoSans-Variable.ttf') format('truetype-variations'); font-weight:200 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Nunito Sans'; src: url('assets/fonts/NunitoSans-Italic-Variable.ttf') format('truetype-variations'); font-weight:200 900; font-style:italic; font-display:swap; }
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');
:root{
  /* ---- Fase 1: tokens de tema claro/oscuro (dashboard) ---- */
  --papel: #ffffff;
  --tarjeta: #ffffff;
  --linea-t: #e4e6ea;
  --tinta-t: #141a26;
  --tinta-2-t: #4a5468;
  --acento-t: #0e2d5c;
  --pos-t: #177a53;   --pos-bg-t: #eaf3de;
  --neg-t: #bb3a30;   --neg-bg-t: #fcebeb;
  --warn-t: #a86a12;  --warn-bg-t: #faeeda;
  --grid-linea: #f0f2f5;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --chrome: var(--fair-navy, #272444);
  --chrome-2: var(--fair-navy-2, #332e5c);
}
[data-theme="dark"]{
  --papel: #0a0d12;
  --tarjeta: #12161d;
  --linea-t: #262c36;
  --tinta-t: #eceef1;
  --tinta-2-t: #a3abb8;
  --grid-linea: #2a303b;
  --acento-t: #5b9bd9;
  --pos-bg-t: color-mix(in oklch, var(--pos-t) 22%, var(--tarjeta));
  --neg-bg-t: color-mix(in oklch, var(--neg-t) 22%, var(--tarjeta));
  --warn-bg-t: color-mix(in oklch, var(--warn-t) 22%, var(--tarjeta));
  --chrome: #05070a;
  --chrome-2: #0a0d12;
}
:root, [data-theme]{
  /* Colores de marca ID */
  --orange:  #F08300;
  --navy:    #002F4A;
  --cream:   #FEF1E3;
  --crimson: #CF0038;
  --mustard: #E4BC00;
  --teal:    #008779;
  --magenta: #E40081;
  --lime:    #C4D700;
  --purple:  #441E87;

  /* Roles de sistema — Fase 1: ahora resueltos sobre los tokens claro/oscuro */
  --ink:        var(--tinta-t);
  --ink-2:      var(--tinta-2-t);
  --ink-3:      var(--tinta-2-t);
  --paper:      var(--papel);
  --paper-2:    color-mix(in oklch, var(--tinta-t) 4%, var(--tarjeta));
  --paper-3:    color-mix(in oklch, var(--tinta-t) 7%, var(--tarjeta));
  --line:       var(--linea-t);
  --muted:      var(--tinta-2-t);

  --accent:     var(--acento-t);
  --accent-ink: var(--acento-t);
  --accent-soft:color-mix(in oklch, var(--acento-t) 14%, var(--tarjeta));

  --fair:       #EF7F1A; /* naranja de marca Fair (icono real) — se conserva para el isotipo */
  --fair-soft:  #fde3c8;
  --fair-ink:   #7a3f00;
  --fair-navy:  #272444; /* navy/índigo de marca Fair, distinto del navy de ID */
  --fair-navy-2:#332e5c;

  --pos:  var(--pos-t);
  --pos-soft: var(--pos-bg-t);
  --neg:  var(--neg-t);
  --neg-soft: var(--neg-bg-t);
  --neu:  var(--tinta-2-t);
  --neu-soft: color-mix(in oklch, var(--tinta-t) 6%, var(--tarjeta));
  --warn: var(--warn-t);
  --warn-soft: var(--warn-bg-t);

  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px oklch(0% 0 0 / 0.05), 0 8px 24px oklch(0% 0 0 / 0.06);

  --font-display: 'Uncage', sans-serif;
  --font-body: 'Nunito Sans', sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
  transition: background .2s, color .2s;
}
.card, .kpi-card, .chart-card, table.data, .connector-card, .plan-card, .login-card, .report-card{ transition: background .2s, border-color .2s; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 .4em;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em; color: var(--ink-2); }
a{ color: var(--acento-t); }
a:hover{ color: color-mix(in oklch, var(--acento-t) 80%, black); }
nav a, .admin-nav-link, .public-nav-brand, .admin-logo, .btn, .tab-btn{ color: inherit; }
img{ max-width:100%; display:block; }
button, input, select, textarea{ font-family: inherit; font-size: inherit; }
:focus-visible{ outline: 2px solid var(--fair); outline-offset: 2px; }

.container{ max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  border-radius: 999px; border: 1px solid transparent;
  padding: .75em 1.4em; font-weight: 600; font-size: .95rem;
  cursor:pointer; text-decoration:none; transition: transform .12s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:active{ transform: scale(.97); }
.btn-primary{ background: var(--ink); color: var(--paper); }
.btn-primary:hover{ background: var(--ink-2); }
.btn-accent{ background: var(--accent); color: var(--ink); }
.btn-accent:hover{ background: oklch(72% 0.16 44); }
.btn-fair{ background: var(--fair); color: white; }
.btn-fair:hover{ background: oklch(58% 0.135 251); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover{ background: var(--paper-2); }
.btn-danger{ background: transparent; color: var(--neg); border-color: color-mix(in oklch, var(--neg) 40%, transparent); }
.btn-danger:hover{ background: var(--neg-soft); }
.btn-sm{ padding:.45em 1em; font-size:.85rem; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }

/* Badges / pills */
.badge{ display:inline-flex; align-items:center; gap:.4em; padding:.3em .75em; border-radius:999px; font-size:.78rem; font-weight:600; }
.badge-pos{ background:var(--pos-soft); color: oklch(32% 0.1 152); }
.badge-neg{ background:var(--neg-soft); color: oklch(35% 0.14 26); }
.badge-neu{ background:var(--neu-soft); color: var(--ink-2); }
.badge-warn{ background:var(--warn-soft); color: oklch(38% 0.1 85); }
.badge-fair{ background:var(--fair-soft); color: var(--fair-ink); }
.badge-accent{ background: var(--accent-soft); color: var(--accent-ink); }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot-green{ background: var(--pos); } .dot-yellow{ background: var(--warn); } .dot-red{ background: var(--neg); } .dot-gray{ background: var(--neu); }

/* Cards */
.card{ background:var(--tarjeta); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.card-flat{ background: var(--paper-2); border-radius: var(--radius-lg); padding: 20px; }

/* Tables */
table.data{ width:100%; border-collapse: collapse; font-size:.92rem; }
table.data th{ text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; padding: 10px 14px; border-bottom:1px solid var(--line); }
table.data td{ padding: 12px 14px; border-bottom:1px solid var(--line); vertical-align: middle; }
table.data tr:last-child td{ border-bottom:none; }
table.data tbody tr:hover{ background: var(--paper-2); }

/* Forms */
.field{ display:flex; flex-direction:column; gap:.4em; margin-bottom: 16px; }
.field label{ font-size:.85rem; font-weight:600; color: var(--ink-2); }
.field .hint{ font-size:.78rem; color: var(--muted); font-weight:400; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea{
  border:1px solid var(--line); border-radius: 8px; padding: .7em .9em; background:var(--tarjeta); color: var(--ink); width:100%;
}
textarea{ resize: vertical; min-height: 80px; }
.checkbox-row{ display:flex; align-items:center; gap:.6em; font-size:.9rem; }
.checkbox-row input{ width:auto; }

/* Toggle switch */
.switch{ position:relative; display:inline-block; width:44px; height:26px; flex:none; }
.switch input{ opacity:0; width:0; height:0; }
.switch .track{ position:absolute; inset:0; background: var(--line); border-radius:999px; transition:.15s; cursor:pointer; }
.switch .track::before{ content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; background:var(--tarjeta); border-radius:50%; transition:.15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + .track{ background: var(--fair); }
.switch input:checked + .track::before{ transform: translateX(18px); }
.switch input:disabled + .track{ opacity:.4; cursor:not-allowed; }

/* Banners */
.banner{ border-radius: var(--radius-lg); padding: 18px 22px; font-size:.92rem; display:flex; gap:12px; align-items:flex-start; }
.banner-methodology{ background: var(--paper-3); color: var(--ink-2); border:1px solid var(--line); }
.banner-veda{ background: var(--neg-soft); color: oklch(30% 0.13 26); border:1px solid color-mix(in oklch, var(--neg) 35%, transparent); }
.banner-legal{ background: var(--accent-soft); color: var(--accent-ink); border:1px solid color-mix(in oklch, var(--accent) 35%, transparent); }

/* Bloque de resumen narrativo (IA) — se omite del todo cuando el campo llega null, nunca vacío/"cargando" */
.narrativa-ia{ background: var(--paper-2); border:1px solid var(--line); border-radius: var(--radius-lg); padding:14px 16px; margin-bottom:16px; }
.narrativa-ia .narrativa-label{ display:block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-bottom:6px; }
.narrativa-ia p{ margin:0; font-size:.9rem; line-height:1.55; color:var(--ink); }

/* Role-visibility helper: elements hidden unless viewer has role */
[data-requires-role]{ }
.locked{ opacity:.45; filter: grayscale(.3); pointer-events:none; position:relative; }
.locked::after{ content:"Solo Administrador"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: oklch(98% 0 0 / .6); font-size:.78rem; font-weight:700; color: var(--ink-2); border-radius: inherit; }

/* Skeleton loading */
.skeleton{ background: linear-gradient(90deg, var(--paper-3) 25%, var(--paper-2) 37%, var(--paper-3) 63%); background-size: 400% 100%; animation: sk 1.4s ease infinite; border-radius: 8px; }
@keyframes sk{ 0%{background-position:100% 0} 100%{background-position:0 0} }

/* Scrollable table wrapper for mobile */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Utility */
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .gap-24{gap:24px;}
.grid{ display:grid; gap:20px; }
.text-muted{ color: var(--muted); }
.text-sm{ font-size:.85rem; }
.mono{ font-family: var(--font-mono); }

/* Rejilla de fondo eliminada — fondo blanco pleno */
.admin-main{ background-image: none; }
[data-theme="dark"] .admin-main{ background-image: none; }

/* Botón de cambio de tema */
.theme-toggle{ display:flex; align-items:center; gap:8px; background:transparent; border:1px solid oklch(100% 0 0 / .3); color:inherit; border-radius:999px; padding:.4em .5em; cursor:pointer; font-size:.85rem; }
.theme-toggle:hover{ background: oklch(100% 0 0 / .1); }

/* Fila de alerta */
.alert-row{ display:flex; align-items:center; gap:12px; padding:10px 14px; min-height:42px; border-bottom:1px solid var(--line); }
.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; color:var(--ink); }
.alert-row time{ font-family: var(--font-mono); font-size:.78rem; color:var(--muted); white-space:nowrap; }

/* Barra de cruce CAWI ↔ redes (-100/+100) */
.cross-bar{ position:relative; height:6px; border-radius:999px; background: var(--line); 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(--line); }
.cross-bar .marker.cawi{ background: var(--acento-t); }
.cross-bar .marker.redes{ background: var(--fair); }
.cross-bar-legend{ display:flex; gap:16px; font-size:.78rem; color:var(--muted); margin-top:4px; }
.cross-bar-legend .dot{ width:8px; height:8px; margin-right:6px; }

/* ============================================================
   Admin shell (sidebar + topbar) — usado en fair-admin-*.html
   ============================================================ */
.admin-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 24px; background: var(--chrome); color: white; position: sticky; top:0; z-index: 20; transition: background .2s;
}
.admin-logo{ font-family: var(--font-display); font-weight:700; font-size:1.1rem; color:white; text-decoration:none; display:flex; align-items:center; gap:10px; }
.admin-logo img{ height:26px; width:auto; background: var(--cream); border-radius:6px; padding:3px 6px; }
.admin-logo span{ color: var(--fair); font-weight:500; }
.admin-topbar .badge-neu{ background: oklch(100% 0 0 / .15); color: white; }
.admin-topbar .text-muted{ color: oklch(88% 0.01 262 / .8); }
.admin-topbar .btn-ghost{ color: white; border-color: oklch(100% 0 0 / .35); }
.admin-topbar .btn-ghost:hover{ background: oklch(100% 0 0 / .1); }
.admin-body{ display:flex; min-height: calc(100vh - 58px); }
.admin-sidebar{
  width: 220px; flex: none; background: var(--chrome-2); color: white; padding: 20px 12px;
  display:flex; flex-direction:column; gap:4px; transition: background .2s;
}
.admin-nav-link{ display:block; padding: .7em 1em; border-radius:8px; color: oklch(85% 0.01 262); text-decoration:none; font-size:.92rem; font-weight:500; }
.admin-nav-link:hover{ background: oklch(35% 0.02 262); color:white; }
.admin-nav-link.active{ background: color-mix(in oklch, var(--acento-t) 55%, var(--fair) 45%); color:white; }
.admin-main{ flex:1; padding: 32px; max-width: 1100px; }
@media (max-width: 860px){
  .admin-body{ flex-direction: column; }
  .admin-sidebar{ width:100%; flex-direction:row; overflow-x:auto; padding: 10px 12px; }
  .admin-main{ padding: 20px; }
}

.section-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom: 20px; flex-wrap:wrap; }
.section-head h2{ margin:0; }
.tab-row{ display:flex; gap:8px; margin-bottom: 20px; flex-wrap:wrap; }
.tab-btn{ padding:.6em 1.2em; border-radius:999px; border:1px solid var(--line); background:var(--tarjeta); font-weight:600; font-size:.85rem; cursor:pointer; }
.tab-btn.active{ background: var(--ink); color:white; border-color: var(--ink); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* KPI cards */
.kpi-grid{ grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }
.kpi-card{ background:var(--tarjeta); border:1px solid var(--line); border-radius: var(--radius-lg); padding:20px; }
.kpi-card .kpi-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; }
.kpi-card .kpi-value{ font-family: var(--font-mono); font-size: 2rem; font-weight:600; margin-top:6px; }
.kpi-card .kpi-delta{ font-family: var(--font-mono); font-size:.85rem; font-weight:500; margin-top:4px; }
.kpi-card .kpi-delta.up{ color: var(--pos); } .kpi-card .kpi-delta.down{ color: var(--neg); }
.kpi-card.north-star{ padding:32px; grid-column: span 2; }
.kpi-card.north-star .kpi-value{ font-size: 3.6rem; }
.kpi-card .sparkline{ margin-top:10px; display:block; }

/* Chart containers */
.chart-card{ background:var(--tarjeta); border:1px solid var(--line); border-radius: var(--radius-lg); padding:20px; }
.chart-card canvas{ max-width:100%; }
.chart-card h3{ font-size:1rem; margin-bottom: 4px; }

/* Plan selector */
.plan-grid{ grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.plan-card{ border:2px solid var(--line); border-radius: var(--radius-lg); padding:20px; background:var(--tarjeta); cursor:pointer; transition: border-color .15s; }
.plan-card.selected{ border-color: var(--fair); background: var(--fair-soft); }
.plan-card h4{ margin-bottom:8px; }
.plan-card ul{ margin:12px 0 0; padding-left: 18px; font-size:.85rem; color: var(--ink-2); }

/* Connector health grid */
.connector-grid{ grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }
.connector-card{ border:1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background:var(--tarjeta); }

/* Drag handle */
.drag-handle{ cursor: grab; color: var(--muted); font-size:1.1rem; user-select:none; }

/* Login */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background: var(--chrome); padding:20px; }
.login-card{ background:var(--tarjeta); border-radius: var(--radius-lg); padding: 40px; width:100%; max-width: 380px; box-shadow: var(--shadow); }

/* Public dashboard */
.public-header{ background: var(--chrome); color:white; padding: 28px 0; transition: background .2s; }
.public-header .container{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.public-nav-brand{ font-family: var(--font-display); font-weight:700; font-size:1.2rem; color:white; text-decoration:none; display:flex; align-items:center; gap:10px; }
.public-nav-brand img{ height:32px; width:auto; background:white; border-radius:8px; padding:4px 8px; }
.public-nav-brand span{ color: var(--fair); font-weight:500;}

.report-card{ border:1px solid var(--line); border-radius: var(--radius-lg); padding:20px; background:var(--tarjeta); display:flex; flex-direction:column; gap:8px; }
.report-card time{ font-size:.78rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }