/* ═══════════════════════════════════════════════════════════════════════════
   RENOVO · SISTEMA DE DISEÑO
   La única fuente de verdad visual. Todo lo demás se construye con esto.

   POR QUÉ EXISTE (21/08/2026)
   David: "todo parece hecho por una IA barata". No era impresión, era medible:
   39 tamaños de letra, 19 radios, 381 colores a pelo — 963 infracciones contra
   BIBLIA §5 (`node tools/design_audit.js`). Un producto no se ve caro porque
   cada pantalla sea brillante; se ve caro porque TODO obedece a un vocabulario
   pequeño, aplicado sin una sola excepción. Esto es ese vocabulario.

   CÓMO SE USA
   1. Se carga ANTES que app.css.
   2. Ningún componente escribe un color, un tamaño o un radio a pelo. Nunca.
      Si hace falta un valor que no está aquí, la respuesta correcta es casi
      siempre "usa el de al lado", no "añade uno nuevo".
   3. `node tools/design_audit.js` tiene que bajar con cada entrega, nunca subir.

   REGLA DE ORO: antes de añadir un token, borra dos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1 · ESCALAS — cerradas a propósito. Esta es toda la libertad que hay.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Tipografía: 6 tamaños + 2 de display. Ni uno más.
     10 = etiqueta en mayúsculas · 11 = meta/captions · 12.5 = cuerpo UI
     13 = cuerpo lectura · 15 = énfasis y títulos de tarjeta
     20 = display · 27 = display grande (solo héroes, uno por pantalla) */
  --t-10: 10px;   --t-11: 11px;   --t-125: 12.5px;
  --t-13: 13px;   --t-15: 15px;   --t-20: 20px;   --t-27: 27px;

  --lh-tight: 1.28;   /* display */
  --lh-base: 1.5;     /* UI */
  --lh-read: 1.6;     /* párrafos largos */

  --w-normal: 400;  --w-medium: 500;  --w-semi: 600;  --w-bold: 700;
  /* PROHIBIDO 800 y 900 (BIBLIA §5: "cifras infladas de juguete"). */

  --track-caps: .09em;   /* letter-spacing de las etiquetas en mayúsculas */
  --track-tight: -.02em; /* display en serif */

  /* Familias */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-num: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* Espaciado: retícula de 4. Se nombra por función, no por número, para que
     nadie escriba 13px "porque quedaba mejor". */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Radios: uno por tipo de superficie. */
  --r-flat: 3px;    /* superficies "libro mayor" — filetes, tablas */
  --r-field: 8px;   /* inputs y selects */
  --r-btn: 10px;    /* botones */
  --r-card: 14px;   /* tarjetas */
  --r-pill: 99px;   /* píldoras y avatares */

  /* Elevación: DOS niveles. Nunca tres. */
  --lift-1: 0 1px 2px rgba(20, 26, 51, .06);
  --lift-2: 0 16px 40px rgba(20, 26, 51, .14);

  /* Movimiento */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;

  /* Anchos de lectura */
  --measure: 64ch;      /* párrafo cómodo */
  --measure-tight: 46ch;/* titular */
  --col-stream: 800px;  /* columna de cola decisiva (patrón correo) */
  --col-grid: 1180px;   /* rejilla/dashboard */
}

/* ───────────────────────────────────────────────────────────────────────────
   2 · COLOR — por ROL, nunca por nombre de color.
   Un componente pide "superficie elevada", no "gris 900". Así el tema cambia
   entero cambiando 20 líneas, y nadie puede escribir un #hex suelto.

   CLARO es el tema base (bare :root). OSCURO se activa con [data-theme="dark"].
   El sistema operativo decide la primera visita; el usuario manda después.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --surface-page:   #e8edf7;  /* lienzo — marfil azulado templado, no blanco hospital */
  --surface-card:   #f7f6f2;  /* tarjeta — marfil cálido */
  --surface-raised: #f1f2f0;  /* sobre-tarjeta: inputs, chips */
  --surface-paper:  #ffffff;  /* el Informe: papel real, NO cambia con el tema */

  --ink:      #141a33;  /* texto principal */
  --ink-2:    #3e4666;  /* texto secundario */
  --ink-soft: #5c6488;  /* meta y etiquetas — verificado AA sobre todas las superficies */
  --ink-on-solid: #ffffff; /* texto sobre relleno sólido de acento */

  --line:       #e1e7f4;  /* filete sutil */
  --line-strong:#ccd6ec;  /* filete marcado */

  /* Acento. --accent-solid existe porque el blanco sobre el índigo CLARO del
     tema oscuro solo daba 3.6:1 — fallaba AA. El sólido siempre es el oscuro. */
  --accent:       #4338ca;
  --accent-ink:   #4338ca;  /* acento como TEXTO */
  --accent-solid: #4338ca;  /* acento como RELLENO (blanco encima siempre legible) */
  --accent-soft:  #eeecfc;  /* fondo tenue de acento */

  /* Estado — semántico, separado del acento (nunca son "el color de marca") */
  --good: #1e7a52;  --good-soft: #e4f3ec;
  --warn: #8a5a10;  --warn-soft: #fdf2df;
  --bad:  #a62f44;  --bad-soft:  #fbe9ec;

  /* Dominio (BIBLIA §5, orden cerrado del rollout).
     Reputación índigo · Contenido rosa · Escandallo ámbar · Informe verde */
  --dom-reputacion: #4338ca;  --dom-reputacion-soft: #eeecfc;
  --dom-contenido:  #a83868;  --dom-contenido-soft:  #fbeaf1;
  --dom-escandallo: #8a5a10;  --dom-escandallo-soft: #fdf2df;
  --dom-informe:    #1e7a52;  --dom-informe-soft:    #e4f3ec;

  /* Atmósfera: el sol de la marca amaneciendo. Ambiente, no decoración. */
  --dawn: radial-gradient(120% 62% at 50% -14%, rgba(232, 161, 58, .16) 0%, transparent 62%);
  --glow: none;  /* en claro, el halo sería ruido */
}

/* Primera visita: manda el sistema operativo del cliente. Él decide, no nosotros. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page: #0a0f1f; --surface-card: #111829; --surface-raised: #131b2e;
    --ink: #eaeffb; --ink-2: #c3cce4; --ink-soft: #8794b2;
    --line: #1e2842; --line-strong: #28345494;
    --accent: #7c74ff; --accent-ink: #9a93ff; --accent-soft: #1b1e42;
    --good: #3ecf8e; --good-soft: rgba(62,207,142,.14);
    --warn: #f2b44c; --warn-soft: rgba(242,180,76,.14);
    --bad:  #ff6b84; --bad-soft:  rgba(255,107,132,.14);
    --dom-reputacion: #9a93ff; --dom-reputacion-soft: #1b1e42;
    --dom-contenido:  #f08bb4; --dom-contenido-soft:  #33172a;
    --dom-escandallo: #f2b44c; --dom-escandallo-soft: rgba(242,180,76,.14);
    --dom-informe:    #3ecf8e; --dom-informe-soft:    rgba(62,207,142,.14);
    --lift-1: 0 1px 2px rgba(0,0,0,.4);
    --lift-2: 0 24px 60px rgba(0,0,0,.55);
    --dawn: radial-gradient(120% 62% at 50% -14%, rgba(124,116,255,.15) 0%, transparent 62%);
    --glow: 0 0 22px rgba(124,116,255,.34);
  }
}
/* Elección explícita del usuario: gana siempre, en los dos sentidos. */
:root[data-theme="dark"] {
  --surface-page: #0a0f1f; --surface-card: #111829; --surface-raised: #131b2e;
  --ink: #eaeffb; --ink-2: #c3cce4; --ink-soft: #8794b2;
  --line: #1e2842; --line-strong: #28345494;
  --accent: #7c74ff; --accent-ink: #9a93ff; --accent-soft: #1b1e42;
  --good: #3ecf8e; --good-soft: rgba(62,207,142,.14);
  --warn: #f2b44c; --warn-soft: rgba(242,180,76,.14);
  --bad:  #ff6b84; --bad-soft:  rgba(255,107,132,.14);
  --dom-reputacion: #9a93ff; --dom-reputacion-soft: #1b1e42;
  --dom-contenido:  #f08bb4; --dom-contenido-soft:  #33172a;
  --dom-escandallo: #f2b44c; --dom-escandallo-soft: rgba(242,180,76,.14);
  --dom-informe:    #3ecf8e; --dom-informe-soft:    rgba(62,207,142,.14);
  --lift-1: 0 1px 2px rgba(0,0,0,.4);
  --lift-2: 0 24px 60px rgba(0,0,0,.55);
  --dawn: radial-gradient(120% 62% at 50% -14%, rgba(124,116,255,.15) 0%, transparent 62%);
  --glow: 0 0 22px rgba(124,116,255,.34);
}

/* ⚠ GUARDIA DE CAMBIO DE TEMA — no quitar.
   Chrome no re-interpola limpiamente un color que viene de var() al cambiar de
   tema: se queda con el valor viejo. Medido en un boceto: texto a 1.02 de
   contraste, es decir INVISIBLE. Se apagan todas las transiciones durante el
   instante del cambio y se devuelven al frame siguiente. El JS debe poner y
   quitar la clase `theme-switching` en <html> (ver renovo-system.js). */
.theme-switching, .theme-switching *,
.theme-switching *::before, .theme-switching *::after {
  transition: none !important;
  animation-duration: .001s !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   3 · CIMIENTOS
   ─────────────────────────────────────────────────────────────────────────── */
.rv * { box-sizing: border-box; }

.rv-page {
  font-family: var(--font-ui);
  font-size: var(--t-125);
  line-height: var(--lh-base);
  color: var(--ink);
  background-color: var(--surface-page);
  background-image: var(--dawn);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* Toda cifra es tabular. Sin excepción: es lo que separa un panel de contable
   de una hoja de cálculo mal hecha. */
.rv-num, .rv-page [data-num] {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-num);
}

/* ───────────────────────────────────────────────────────────────────────────
   4 · TIPOGRAFÍA — clases, no tamaños sueltos
   ─────────────────────────────────────────────────────────────────────────── */
.rv-display {              /* héroe: UNO por pantalla */
  font-family: var(--font-display);
  font-size: var(--t-27);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
  max-width: var(--measure-tight);
  margin: 0;
}
.rv-title {                /* título de sección o de tarjeta grande */
  font-family: var(--font-display);
  font-size: var(--t-20);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0;
}
.rv-heading {              /* título de tarjeta */
  font-size: var(--t-15);
  font-weight: var(--w-semi);
  line-height: 1.4;
  margin: 0;
}
.rv-body   { font-size: var(--t-13);  color: var(--ink-2); line-height: var(--lh-read); max-width: var(--measure); margin: 0; }
.rv-ui     { font-size: var(--t-125); color: var(--ink); }
.rv-meta   { font-size: var(--t-11);  color: var(--ink-soft); }
.rv-label  {               /* etiqueta en mayúsculas */
  font-size: var(--t-10);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rv-figure {               /* la cifra grande de un KPI */
  font-family: var(--font-display);
  font-size: var(--t-20);
  font-weight: var(--w-semi);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
}

/* ───────────────────────────────────────────────────────────────────────────
   5 · SUPERFICIES
   ─────────────────────────────────────────────────────────────────────────── */
.rv-card {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-4) var(--sp-5);
}
.rv-card--flat { border-radius: var(--r-flat); }   /* estilo "libro mayor" */
.rv-card--lift { box-shadow: var(--lift-2); }
.rv-card--focus {                                   /* la tarjeta que pide acción */
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.rv-stack   { display: flex; flex-direction: column; gap: var(--sp-3); }
.rv-row     { display: flex; align-items: center; gap: var(--sp-3); }
.rv-stream  { max-width: var(--col-stream); margin-inline: auto; padding: var(--sp-6) var(--sp-8) var(--sp-16); }
.rv-grid    { max-width: var(--col-grid);  margin-inline: auto; padding: var(--sp-6) var(--sp-8) var(--sp-16); }
.rv-scroll-x { overflow-x: auto; }   /* tablas y diagramas anchos: NUNCA el body */

/* ───────────────────────────────────────────────────────────────────────────
   6 · CONTROLES — táctiles de verdad (un TPV es una pantalla táctil)
   ─────────────────────────────────────────────────────────────────────────── */
.rv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  height: 36px; padding: 0 var(--sp-4);
  border-radius: var(--r-btn);
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--ink);
  font-family: inherit; font-size: var(--t-125); font-weight: var(--w-semi);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.rv-btn:hover { border-color: var(--accent); }
.rv-btn--primary {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: var(--ink-on-solid);
}
.rv-btn--quiet { background: transparent; border-color: transparent; color: var(--ink-soft); }
.rv-btn--danger { color: var(--bad); border-color: var(--bad-soft); }

.rv-field {
  width: 100%; min-height: 36px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-field);
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--ink);
  font-family: inherit; font-size: var(--t-125);
}
.rv-field:focus-visible, .rv-btn:focus-visible, .rv-page a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Un TPV se usa con una bandeja en la mano: 44px mínimo en cuanto el puntero
   es un dedo. El escritorio mantiene la densidad que David aprobó. */
@media (pointer: coarse) {
  .rv-btn, .rv-field, .rv-tab, .rv-nav-item { min-height: 44px; }
}

.rv-pill {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--t-10); font-weight: var(--w-bold);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  background: var(--surface-raised); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.rv-pill--good { background: var(--good-soft); color: var(--good); border-color: transparent; }
.rv-pill--warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.rv-pill--bad  { background: var(--bad-soft);  color: var(--bad);  border-color: transparent; }

/* ───────────────────────────────────────────────────────────────────────────
   7 · DOMINIO — se aplica al contenedor de la vista, no a cada pieza
   ─────────────────────────────────────────────────────────────────────────── */
.rv-dom-reputacion { --dom: var(--dom-reputacion); --dom-soft: var(--dom-reputacion-soft); }
.rv-dom-contenido  { --dom: var(--dom-contenido);  --dom-soft: var(--dom-contenido-soft); }
.rv-dom-escandallo { --dom: var(--dom-escandallo); --dom-soft: var(--dom-escandallo-soft); }
.rv-dom-informe    { --dom: var(--dom-informe);    --dom-soft: var(--dom-informe-soft); }
.rv-dom-mark  { color: var(--dom, var(--accent-ink)); }
.rv-dom-badge { background: var(--dom-soft, var(--accent-soft)); color: var(--dom, var(--accent-ink)); }

/* ───────────────────────────────────────────────────────────────────────────
   8 · LOS CUATRO ESTADOS (BIBLIA §12: ninguno se omite jamás)
   ─────────────────────────────────────────────────────────────────────────── */
.rv-empty, .rv-error {
  text-align: center;
  padding: var(--sp-10) var(--sp-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
  color: var(--ink-soft);
  font-size: var(--t-125);
}
.rv-empty b, .rv-error b { display: block; color: var(--ink); font-size: var(--t-15); margin-bottom: var(--sp-1); }
.rv-error { border-color: var(--bad-soft); }
.rv-skeleton {
  border-radius: var(--r-flat);
  background: linear-gradient(90deg, var(--surface-raised) 25%, var(--line) 50%, var(--surface-raised) 75%);
  background-size: 200% 100%;
  animation: rv-shimmer 1.4s ease-in-out infinite;
  min-height: 14px;
}
@keyframes rv-shimmer { to { background-position: -200% 0; } }

/* Dato cacheado: se marca, jamás se sirve como fresco. */
.rv-stale { position: relative; opacity: .82; }
.rv-stale::after {
  content: attr(data-stale);
  position: absolute; top: var(--sp-1); right: var(--sp-1);
  font-size: var(--t-10); color: var(--warn);
  background: var(--warn-soft); border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-2);
}

/* ───────────────────────────────────────────────────────────────────────────
   9 · ACCESIBILIDAD
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rv-page *, .rv-page *::before, .rv-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
.rv-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}