/* Plataforma DEV-07. Identidad fija de iPunto: negro + amarillo (CONTEXTO.md de la base).
   Sin dependencias externas: funciona sin CDN ni fuentes remotas. */
:root {
  --fondo: #0a0a0a;
  --superficie: #161616;
  --superficie-2: #1f1f1f;
  --borde: #2c2c2c;
  --texto: #f2f2f2;
  --texto-2: #a8a8a8;
  --acento: #f4dc00;
  --rojo: #ff5c5c;
  --amarillo: #f4dc00;
  --verde: #3ddc84;
  --gris: #8a8a8a;
  --radio: 10px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-size: 15px; line-height: 1.5; }
a { color: var(--acento); }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
.barra { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .75rem 1rem; border-bottom: 1px solid var(--borde); background: var(--superficie); }
.marca { font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.punto { width: .7rem; height: .7rem; border-radius: 50%; background: var(--acento); display: inline-block; }
.generado { color: var(--texto-2); font-size: .85rem; }
.aviso { background: var(--acento); color: #000; font-weight: 600; text-align: center; padding: .4rem 1rem; }
.contenedor { max-width: 1200px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.resumen, .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.tile { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .8rem .9rem; }
.tile .etq { color: var(--texto-2); font-size: .8rem; }
.tile .val { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile .nota { color: var(--texto-2); font-size: .78rem; }
.filtros { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: .75rem; }
.filtros label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; color: var(--texto-2); }
input, select { background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 6px; padding: .45rem .6rem; font: inherit; min-width: 200px; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.tabla-desplazable { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); }
.tabla { width: 100%; border-collapse: collapse; background: var(--superficie); }
.tabla th, .tabla td { padding: .6rem .75rem; border-bottom: 1px solid var(--borde); text-align: left; white-space: nowrap; }
.tabla th { color: var(--texto-2); font-weight: 600; font-size: .8rem; background: var(--superficie-2); }
.tabla tbody tr:hover { background: var(--superficie-2); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; }
.semaforo { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .85rem;
  padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--borde); }
.semaforo::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--gris); }
.semaforo.rojo::before { background: var(--rojo); }
.semaforo.amarillo::before { background: var(--amarillo); }
.semaforo.verde::before { background: var(--verde); }
.fuera-meta { color: var(--rojo); font-weight: 600; }
.vacio, .sub { color: var(--texto-2); }
.error { color: var(--rojo); font-weight: 600; }
.volver { display: inline-block; margin-bottom: .75rem; text-decoration: none; }
.cabecera-cuenta { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.cabecera-cuenta h1 { margin-bottom: .2rem; }
.pestanas { display: flex; gap: .25rem; border-bottom: 1px solid var(--borde); margin: 1rem 0 1.25rem; overflow-x: auto; }
.pestanas button { background: none; border: 0; color: var(--texto-2); font: inherit; font-weight: 600;
  padding: .6rem .9rem; cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; }
.pestanas button[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--acento); }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; margin-bottom: 1.25rem; }
.dos-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; }
.lista-anomalias { margin: .5rem 0 0; padding-left: 1.1rem; }
.lista-anomalias li { margin-bottom: .35rem; }
.rec dt { color: var(--texto-2); font-size: .8rem; margin-top: .5rem; }
.rec dd { margin: 0; }
pre.evidencia { white-space: pre-wrap; background: var(--superficie-2); border-radius: 6px; padding: .75rem;
  font-size: .82rem; color: var(--texto-2); margin: .5rem 0 0; }
.grafica svg { width: 100%; height: auto; display: block; }
.grafica .eje { stroke: var(--borde); }
.grafica .linea { fill: none; stroke: var(--acento); stroke-width: 2; }
.grafica .barra-g { fill: #4a4a4a; }
.grafica text { fill: var(--texto-2); font-size: 11px; }
.pendiente { border-style: dashed; color: var(--texto-2); }
@media (max-width: 600px) {
  input, select { min-width: 0; width: 100%; }
  .filtros label { flex: 1 1 100%; }
}