/* ── LUPA · sistema visual ────────────────────────────────────────────────
   Limpio a propósito, en la línea de OpenSEO: papel cálido, tarjetas blancas
   con borde fino, CERO sombras, mucho aire, y el color reservado para decir
   algo (emergencia, sano, vigilar) en vez de para decorar.

   La versión anterior era un puesto de mando oscuro con degradados radiales y
   scanlines. Se veía intencional y era difícil de leer: en una herramienta cuyo
   trabajo es que veas de un golpe qué eje está en rojo, cada elemento decorativo
   compite con el único dato que importa.

   Regla: si un píxel no dice nada, se va.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --papel:#F6F4F1;      /* fondo cálido, no blanco: el blanco puro cansa */
  --lienzo:#FFFFFF;
  --borde:#E5E0D8;
  --borde-fuerte:#D3CCC1;
  --tinta:#17150F;
  --tenue:#6F6A61;
  --debil:#9C968B;

  --emergencia:#BE3A1B;
  --ok:#2C7355;
  --vigilar:#35618F;
  --ambar:#9C7016;
  --marca:#C2521C;      /* el acento de LUPA. Se usa poco, a propósito. */

  --r:10px;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--papel);
  color:var(--tinta);
  font:400 14px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.005em;
}

/* Etiqueta diminuta en versalitas: el patrón de OpenSEO —
   BACKLINKS / 620,017— donde la etiqueta se aparta y el número manda. */
.eti{
  font:500 9.5px/1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--debil);
}

.tarjeta{
  background:var(--lienzo);
  border:1px solid var(--borde);
  border-radius:var(--r);
  padding:18px 20px;
}

/* Cifras: grandes, con tabulares para que las columnas cuadren. */
.cifra{
  font:400 33px/1.05 var(--sans);
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  display:block;
  margin-top:9px;
}
.cifra.apagada{color:var(--debil)}

.num{text-align:right;font-variant-numeric:tabular-nums}

/* ── botones ── */
.btn{
  all:unset;box-sizing:border-box;cursor:pointer;
  background:var(--tinta);color:#fff;
  padding:9px 17px;border-radius:7px;
  font:500 13px/1 var(--sans);letter-spacing:-.01em;
  display:inline-flex;align-items:center;gap:8px;
  transition:opacity .15s;
}
.btn:hover{opacity:.85}
.btn.claro{background:var(--lienzo);color:var(--tinta);border:1px solid var(--borde-fuerte)}
.btn.claro:hover{background:#F0EDE8;opacity:1}

/* ── campos ── */
input,select{
  background:var(--lienzo);
  border:1px solid var(--borde-fuerte);
  color:var(--tinta);
  padding:8px 11px;border-radius:7px;
  font:400 13.5px/1.2 var(--sans);
  min-width:200px;
}
input::placeholder{color:var(--debil)}
input:focus,select:focus{outline:none;border-color:var(--tinta)}
select{
  appearance:none;cursor:pointer;padding-right:28px;
  background-image:linear-gradient(45deg,transparent 50%,var(--tenue) 50%),
                   linear-gradient(135deg,var(--tenue) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;
  background-size:5px 5px;background-repeat:no-repeat;
}

/* ── etiquetas de estado ── */
.pica{
  display:inline-block;padding:3px 8px;border-radius:5px;
  font:500 10.5px/1.25 var(--mono);letter-spacing:.03em;
  border:1px solid transparent;white-space:nowrap;
}
.p-emergencia{background:#FBEDE9;color:var(--emergencia);border-color:#F0D2C9}
.p-mantener  {background:#EAF3EF;color:var(--ok);border-color:#CFE3D9}
.p-vigilar   {background:#EBF1F7;color:var(--vigilar);border-color:#D2E0EC}
.p-ignorar,.p-sin_datos{background:#F2F0EC;color:var(--tenue);border-color:var(--borde)}

/* ── tablas ── */
table{width:100%;border-collapse:collapse;font-size:13px}
th{
  text-align:left;padding:0 14px 10px 0;
  font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--debil);border-bottom:1px solid var(--borde);
}
td{padding:11px 14px 11px 0;border-bottom:1px solid #F0EDE8;vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#FBFAF8}
td.dom{font-family:var(--mono);font-size:12.5px}

a{color:var(--vigilar);text-decoration:none}
a:hover{text-decoration:underline}

.estado{color:var(--tenue);padding:34px 0;font-size:13.5px}
.estado.error{color:var(--emergencia)}