/* Tema claro corporativo UNEI (fondo blanco, acentos de marca sutiles).
   Los colores de datos siguen la paleta dataviz validada para daltonismo. */
.viz-root {
  --brand: #F2A81D;           /* amarillo UNEI */
  --brand-ink: #3D3C3B;       /* gris oscuro UNEI */
  --surface-1: #f6f6f2;   /* tarjetas ligeramente oscurecidas sobre el blanco */
  --surface-pop: #ffffff;  /* elementos flotantes (tooltip) */
  --page: #ffffff;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --delta-good: #006300;
  --delta-bad: #d03b3b;
  --s-insitu: #2a78d6;        /* slot 1 azul */
  --s-incongruentes: #1baf7a; /* slot 2 aqua */
  --s-expedientes: #eda100;   /* slot 3 amarillo */
  --s-corregidos: #008300;    /* slot 4 verde */
  --s-nuevos: #e34948;        /* slot 6 rojo */
  --s-sinc: #4a3aa7;          /* slot 5 violeta */
  --s-generales: #eb6834;     /* slot 8 naranja */
  --s-expinstalados: #4a3aa7; /* slot 5 violeta */
  --s-otros: #e87ba4;         /* slot 7 magenta — identidad del grupo Otros (secundarios) */
  --st-critico: #d03b3b;
  --st-alto: #ec835a;
  --st-medio: #fab219;
}

* { box-sizing: border-box; margin: 0; }
html, body { background: var(--page); }
.viz-root {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text-primary);
  background: var(--page);
  max-width: none;
  margin: 0 auto;
  padding: 24px 28px 60px;
  min-height: 100vh;
}

header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 18px; }
.logo { height: 46px; width: auto; display: block; }
h1 { font-size: 22px; font-weight: 650; color: var(--brand-ink); }
.sub { color: var(--text-secondary); font-size: 13px; margin-top: 4px; }
.badge { border: 1px solid var(--border); border-radius: 999px; padding: 1px 10px; font-size: 12px; color: var(--text-secondary); background: var(--surface-1); }
.actions { display: flex; gap: 8px; }
button {
  font: inherit; font-size: 13px; padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); cursor: pointer;
}
button:hover { border-color: var(--baseline); }
button.primary { background: var(--brand); border-color: var(--brand); color: #2a2a28; font-weight: 600; }
button.primary:hover { filter: brightness(0.96); }
button.ghost { border: none; background: none; color: var(--text-secondary); padding: 4px 8px; }
button.ghost:hover { color: var(--text-primary); }
button:disabled { opacity: .5; cursor: default; }
.status { min-height: 20px; font-size: 13px; color: var(--text-secondary); margin: 8px 0 16px; }
.status.err { color: var(--delta-bad); }

/* Navegación principal */
.mainnav { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--grid); padding-bottom: 0; margin-bottom: 18px; }
.mainnav button {
  border: none; background: none; border-radius: 0; padding: 9px 14px 11px;
  font-size: 13.5px; color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.mainnav button:hover { color: var(--text-primary); }
.mainnav button[aria-selected="true"] { color: var(--text-primary); font-weight: 600; border-bottom-color: var(--brand); }

.chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 12px; }
.chips button { border-radius: 999px; padding: 5px 13px; font-size: 12.5px; }
.chips button[aria-selected="true"] { background: var(--text-primary); color: var(--page); border-color: var(--text-primary); }

/* Título de grupo dentro de una pestaña (p. ej. "Afecta a dispositivos" en Otros) */
.group-title {
  font-size: 13px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-secondary); margin: 4px 2px 12px;
  padding-left: 10px; border-left: 3px solid var(--brand);
}

/* Total del indicador: franja sutil en cabecera de pestaña */
.total-strip { display: flex; align-items: baseline; gap: 12px; margin: 2px 2px 16px; }
.total-strip .ts-label { font-size: 13px; color: var(--text-secondary); }
.total-strip .ts-value { font-size: 22px; font-weight: 650; }
.total-strip .delta { margin-top: 0; }

/* Impacto de negocio: desplegable sutil + colores de nivel */
.impacto { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; }
.impacto .imp-label { color: var(--muted); }
.impacto .dot, .causa-badge .dot.imp-critico, .causa-badge .dot.imp-alto, .causa-badge .dot.imp-medio, .causa-badge .dot.imp-none { width: 10px; height: 10px; border-radius: 50%; }
.impacto select { font: inherit; font-size: 12.5px; border: none; background: transparent; color: var(--text-primary); cursor: pointer; padding: 2px 0; }
.imp-critico { background: var(--st-critico); }
.imp-alto { background: var(--st-alto); }
.imp-medio { background: var(--st-medio); }
.imp-none { background: var(--baseline); }

/* Cabeceras ordenables */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text-primary); }
th.sortable[data-dir="asc"]::after { content: " ▲"; font-size: 9px; color: var(--brand-ink); }
th.sortable[data-dir="desc"]::after { content: " ▼"; font-size: 9px; color: var(--brand-ink); }

/* Desglose de corregidos por indicador y semana (Inicio) */
.corr-rows { margin-top: 8px; }
.corr-row { display: grid; grid-template-columns: minmax(230px, 360px) 1fr 90px; align-items: center; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--grid); }
.corr-row .corr-nombre { font-size: 13px; font-weight: 600; }
.corr-row .meter { height: 8px; border-radius: 4px; background: var(--grid); overflow: hidden; display: block; }
.corr-row .meter i { display: block; height: 100%; border-radius: 4px; }
.corr-row .corr-cifra { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.corr-row .corr-nota { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.corr-total { margin-top: 10px; font-size: 12.5px; color: var(--text-secondary); }

/* Tarjeta de culpables (Inicio) */
.culp-valor { display: flex; align-items: center; gap: 8px; }
.culp-valor .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.culp-pct { font-size: 11.5px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.culp-linea { font-size: 12.5px; color: var(--text-secondary); margin-top: 8px; }
.culp-linea b { color: var(--text-primary); font-weight: 600; }

/* Tarjeta impacto vs resolución (sin barra: el % ya lo dice todo) */
.imp-row { display: grid; grid-template-columns: 130px 1fr minmax(190px, auto); align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--grid); }
.imp-row:last-of-type { border-bottom: none; }
.imp-row .imp-nombre { font-size: 13px; font-weight: 600; }
.imp-veredicto { margin-top: 12px; font-size: 13px; color: var(--text-secondary); }

/* KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 18px; }
/* Inicio: el nº de columnas exacto lo fija kpisInicio() en JS según ancho y nº
   de tiles (filas completas sin huecos cuando el total es divisible) */
.tile {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; cursor: pointer; text-align: left; width: 100%;
}
.tile.selected { outline: 2px solid var(--brand); outline-offset: -2px; }
.tile .label { font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 7px; }
.tile .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.tile .value { font-size: 30px; font-weight: 600; margin-top: 6px; }
.tile .value-small { font-size: 19px; margin-top: 10px; }
.delta { font-size: 12.5px; margin-top: 2px; color: var(--text-secondary); }
.delta .up { color: var(--delta-bad); font-weight: 600; }
.delta .down { color: var(--delta-good); font-weight: 600; }
.tile svg { display: block; margin-top: 8px; }
/* reparto del valor por segmento dentro de la tarjeta (p. ej. expedientes con 1 usuario / 2 o más) */
.tile .desglose { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; font-size: 12px; color: var(--text-secondary); }
.tile .desglose b { font-weight: 600; color: var(--text-primary); }

/* Cards & charts */
/* exactamente 2 columnas en pantallas anchas para mantener el emparejado por sub-indicador */
.grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 980px) { .grid { grid-template-columns: repeat(2, 1fr); } }
.card.span2, .grid .total-strip { grid-column: 1 / -1; }
.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
h2 { font-size: 15px; font-weight: 600; }
.hint { font-size: 12px; color: var(--muted); margin-top: 3px; }
.chart { margin-top: 10px; position: relative; }
/* abajo a la derecha: la esquina superior la ocupan las etiquetas finales de serie.
   Con leyenda va dentro de su fila (flex); sin leyenda, absoluto en la esquina. */
.zoom-ctrl { position: absolute; bottom: 0; right: 2px; display: flex; gap: 2px; align-items: center; z-index: 2; background: var(--surface-1); border-radius: 8px; }
.legend .zoom-ctrl { position: static; margin-left: auto; }
.zoom-ctrl button { padding: 2px 9px; font-size: 14px; line-height: 1.4; }
.zoom-ctrl .zoom-nota { font-size: 11.5px; color: var(--muted); margin-right: 6px; }
.chart svg { display: block; width: 100%; height: auto; }
.chart text { font-family: inherit; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: var(--text-secondary); }
.legend .key-line { display: inline-block; width: 14px; height: 2px; border-radius: 1px; vertical-align: middle; margin-right: 6px; }
.legend .key-rect { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; }
.loading { opacity: .5; pointer-events: none; transition: opacity .2s; }
.empty { color: var(--muted); font-size: 13px; padding: 30px 0; text-align: center; }

/* Tooltip */
.tooltip {
  position: fixed; z-index: 10; pointer-events: none;
  background: var(--surface-pop); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12); padding: 8px 11px; font-size: 12.5px; min-width: 130px;
}
.tooltip .t-title { color: var(--muted); margin-bottom: 5px; }
.tooltip .t-row { display: flex; align-items: center; gap: 7px; margin-top: 2px; }
.tooltip .t-key { width: 12px; height: 2px; border-radius: 1px; flex: none; }
.tooltip .t-val { font-weight: 600; font-variant-numeric: tabular-nums; margin-left: auto; }
.tooltip .t-name { color: var(--text-secondary); }
.tooltip .t-delta { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }

/* Tabs & tables */
.tabs, .subtabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs button, .subtabs button { border-radius: 999px; padding: 5px 13px; font-size: 12.5px; }
.tabs button[aria-selected="true"], .subtabs button[aria-selected="true"] { background: var(--text-primary); color: var(--page); border-color: var(--text-primary); }
.subtabs { margin-top: 12px; }
.table-tools { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
input[type="search"] { font: inherit; font-size: 13px; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--page); color: var(--text-primary); min-width: 220px; }
.table-wrap { overflow-x: auto; margin-top: 8px; max-height: 480px; overflow-y: auto; }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--grid); vertical-align: top; }
th { color: var(--text-secondary); font-weight: 600; position: sticky; top: 0; background: var(--surface-1); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.chart-table { margin-top: 10px; }

/* Sincronización (manual) */
.sinc-stats { display: flex; gap: 26px; margin-top: 10px; }
.sinc-stats .mini .label { font-size: 12px; color: var(--text-secondary); }
.sinc-stats .mini .value { font-size: 22px; font-weight: 600; }
#sinc-form, .form-inline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--grid); }
#sinc-form label, .form-inline label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }
#sinc-form label.grow, .form-inline label.grow { flex: 1; min-width: 160px; }
#sinc-form input, .form-inline input, .form-inline select { font: inherit; font-size: 13px; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--page); color: var(--text-primary); }
#sinc-form input[type="number"], .form-inline input[type="number"] { width: 130px; }

/* Progreso por tipo de dispositivo (dispositivos perdidos) */
.dev-row { display: grid; grid-template-columns: 120px 1fr minmax(210px, auto); align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--grid); }
.dev-row:last-of-type { border-bottom: none; }
.dev-row .meter { height: 8px; border-radius: 4px; background: var(--grid); overflow: hidden; display: block; }
.dev-row .meter i { display: block; height: 100%; border-radius: 4px; }
.dev-row .dev-cifra { font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; text-align: right; }

/* Barra de progreso hacia el techo (dispositivos perdidos) */
.techo-meter { display: flex; height: 22px; border-radius: 8px; background: var(--grid); overflow: hidden; margin-top: 14px; }
.techo-meter i { display: block; height: 100%; }
.techo-meter .seg-mig { background: var(--s-insitu); border-right: 2px solid var(--surface-1); }
.techo-meter .seg-usu { background: var(--s-generales); }
#sinc-tabla { max-height: 260px; margin-top: 12px; }
#sinc-tabla .danger { color: var(--delta-bad); }

/* Causa raíz (estado + texto, edición con lápiz) */
.causa { margin-top: 10px; }
.causa-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.causa-badge .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.causa .st-pendiente { background: #d03b3b; }
.causa .st-detectado { background: #ec835a; }
.causa .st-parcialmente-resuelto { background: #fab219; }
.causa .st-resuelto { background: #0ca30c; }
.causa-texto { margin-top: 8px; font-size: 13px; color: var(--text-secondary); white-space: pre-wrap; }
.causa-texto.empty { color: var(--muted); font-style: italic; }
.causa-meta { margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.causa-form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.causa-form select, .causa-form textarea {
  font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--page); color: var(--text-primary);
}
.causa-form textarea { min-height: 84px; resize: vertical; }
.causa-form .row { display: flex; gap: 8px; justify-content: flex-end; }
/* mini-múltiplos del impacto de causa raíz */
.minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 12px; }
.mini-chart { max-width: 460px; }
.mini-chart h4 { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.mini-chart svg { display: block; width: 100%; height: auto; }
.mini-chart .delta { margin-top: 4px; }

.sinc-causa { border-top: 1px solid var(--grid); margin-top: 14px; padding-top: 4px; }
.sinc-causa h3 { font-size: 13.5px; font-weight: 600; margin-top: 10px; display: flex; justify-content: space-between; align-items: center; }