/* ════════════════════════════════════════════════════════════════════
   CUENTAVATIOS · tokens del sistema
   Fuente de verdad. Todo lo demás (páginas, componentes, plantillas)
   se construye con estas variables y nunca con valores sueltos.
   Dirección: «la pizarra ilustrada» — trazo negro, azul eléctrico,
   ilustración de objetos dibujada con el mismo trazo.
   v1 · 2026-08-21
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Color ─────────────────────────────────────────────────────────
     Tema único y deliberado (ver §modo oscuro en la skill).
     El coral es color de FUNCIÓN, no de marca: marca lo que sobra.     */
  --cv-lienzo:      #F4F3EE;   /* fondo de página */
  --cv-papel:       #FFFFFF;   /* superficies: tarjetas, tablas, campos */
  --cv-lienzo-2:    #EAE8E1;   /* fondo hundido: código, notas */

  --cv-tinta:       #141414;   /* texto principal y TRAZO */
  --cv-tinta-2:     #55554D;   /* texto secundario  · 6,77:1 sobre lienzo */
  --cv-tinta-3:     #6B6B61;   /* apagado · 4,85:1 sobre lienzo: pasa AA a cualquier tamaño */

  --cv-accion:      #0047FF;   /* azul eléctrico: lo que se puede pulsar */
  --cv-accion-osc:  #0033BF;   /* hover / activo */
  --cv-accion-suave:#E4EAFF;   /* fondo de énfasis */

  --cv-marca:       #FF7A59;   /* coral: «esto es lo que te sobra» */
  --cv-marca-suave: #FFE3D8;   /* relleno de ilustración y subrayado */
  --cv-marca-texto: #AB3618;   /* ⚠️ el coral NO vale para texto: 2,57:1.
                                  Cuando el aviso lleve palabras, este:
                                  6,42:1 sobre papel y 5,27:1 sobre el relleno. */

  --cv-ok:          #1B6E45;   /* 6,24:1 papel · 5,27:1 sobre su relleno */
  --cv-ok-suave:    #DEF0E6;
  --cv-aviso:       #9A5B00;   /* 4,65:1 sobre su relleno */
  --cv-aviso-suave: #FDEBD2;

  /* ── Trazo, radios y sombra dura ───────────────────────────────── */
  --cv-trazo:       2px;                   /* el trazo del sistema */
  --cv-trazo-grueso:3px;                   /* ilustración a viewBox 440 */
  --cv-radio:       0px;                   /* esquinas vivas por defecto */
  --cv-radio-suave: 4px;                   /* solo campos y píldoras */
  --cv-sombra:      4px 4px 0 var(--cv-tinta);
  --cv-sombra-azul: 4px 4px 0 var(--cv-accion);
  --cv-sombra-corta:3px 3px 0 var(--cv-tinta);

  /* ── Tipografía ────────────────────────────────────────────────── */
  --cv-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --cv-texto:   "Spectral", Georgia, "Times New Roman", serif;
  --cv-dato:    "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* escala · base 17px para lectura larga en pantalla */
  --cv-t-xs:   0.76rem;   /* 13 · etiquetas, pies */
  --cv-t-sm:   0.88rem;   /* 15 · microcopy, tablas */
  --cv-t-base: 1rem;      /* 17 · cuerpo */
  --cv-t-lg:   1.12rem;   /* 19 · entradilla */
  --cv-t-xl:   1.35rem;   /* 23 · H3 */
  --cv-t-2xl:  1.72rem;   /* 29 · H2 */
  --cv-t-3xl:  2.3rem;    /* 39 · H1 interior */
  --cv-t-4xl:  clamp(2.4rem, 5.5vw, 3.4rem);  /* portada */

  --cv-alto-texto: 1.62;  /* interlineado de lectura */
  --cv-alto-corto: 1.15;  /* titulares */
  --cv-track-display: -0.04em;
  --cv-track-etiqueta: 0.08em;

  /* ── Espaciado · escala de 4 ───────────────────────────────────── */
  --cv-e1: 4px;   --cv-e2: 8px;   --cv-e3: 12px;  --cv-e4: 16px;
  --cv-e5: 24px;  --cv-e6: 32px;  --cv-e7: 48px;  --cv-e8: 64px;
  --cv-e9: 96px;

  /* ── Medidas ───────────────────────────────────────────────────── */
  --cv-ancho-texto: 66ch;   /* columna de lectura */
  --cv-ancho-ancho: 1120px; /* contenedor ancho */
  --cv-toque: 44px;         /* área mínima de pulsación */
}

/* ── Base ─────────────────────────────────────────────────────────── */
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--cv-lienzo);
  color:var(--cv-tinta);
  font-family:var(--cv-texto);
  font-size:17px;
  line-height:var(--cv-alto-texto);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.cv-ui{ font-family:var(--cv-display); font-weight:700;
  letter-spacing:var(--cv-track-display); line-height:var(--cv-alto-corto); text-wrap:balance }
h1{ font-size:var(--cv-t-3xl) }
h2{ font-size:var(--cv-t-2xl) }
h3{ font-size:var(--cv-t-xl) }
p{ margin:0 0 var(--cv-e4) }

/* números que se comparan en columna */
table, .cv-factura, .cv-dato{ font-variant-numeric:tabular-nums }

/* ── Foco: visible SIEMPRE, y no solo por color ───────────────────── */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--cv-accion);
  outline-offset:2px;
  border-radius:1px;
}

/* ── Botones ──────────────────────────────────────────────────────── */
.cv-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--cv-e2);
  min-height:var(--cv-toque);
  font-family:var(--cv-display); font-weight:700; font-size:var(--cv-t-base);
  letter-spacing:-0.02em; text-decoration:none; cursor:pointer;
  padding:var(--cv-e3) var(--cv-e5);
  border:var(--cv-trazo) solid var(--cv-tinta);
  border-radius:var(--cv-radio);
  background:var(--cv-accion); color:#fff;
  box-shadow:var(--cv-sombra);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.cv-btn:hover{ background:var(--cv-accion-osc); transform:translate(1px,1px); box-shadow:var(--cv-sombra-corta) }
.cv-btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--cv-tinta) }
.cv-btn--2{ background:var(--cv-papel); color:var(--cv-tinta); box-shadow:var(--cv-sombra-azul) }
.cv-btn--2:hover{ background:var(--cv-accion-suave) }
.cv-btn[disabled],.cv-btn[aria-disabled="true"]{
  background:var(--cv-lienzo-2); color:var(--cv-tinta-3); border-color:var(--cv-tinta-3);
  box-shadow:none; cursor:not-allowed; transform:none;
}
@media (prefers-reduced-motion:reduce){ .cv-btn{ transition:none } .cv-btn:hover,.cv-btn:active{ transform:none } }

/* ── Campos ───────────────────────────────────────────────────────── */
.cv-campo{ display:flex; flex-direction:column; gap:var(--cv-e2) }
.cv-campo > label{ font-family:var(--cv-display); font-weight:600; font-size:var(--cv-t-sm) }
.cv-campo .cv-ayuda{ font-size:var(--cv-t-sm); color:var(--cv-tinta-2) }
.cv-campo input,.cv-campo textarea,.cv-campo select{
  font-family:var(--cv-texto); font-size:var(--cv-t-base); color:var(--cv-tinta);
  background:var(--cv-papel);
  border:var(--cv-trazo) solid var(--cv-tinta); border-radius:var(--cv-radio-suave);
  padding:var(--cv-e3) var(--cv-e4); min-height:var(--cv-toque); width:100%;
}
.cv-campo input::placeholder{ color:var(--cv-tinta-3) }
.cv-campo[data-estado="error"] input{ border-color:var(--cv-marca-texto); background:#FFF7F4 }
.cv-campo .cv-error{
  display:flex; align-items:flex-start; gap:var(--cv-e2);
  font-size:var(--cv-t-sm); color:var(--cv-marca-texto); font-weight:600;
}
.cv-campo[data-estado="ok"] input{ border-color:var(--cv-ok) }

/* ── Zona de subida: el componente que decide el lead ─────────────── */
.cv-subida{
  border:var(--cv-trazo) dashed var(--cv-tinta); border-radius:var(--cv-radio-suave);
  background:var(--cv-papel); padding:var(--cv-e6) var(--cv-e5);
  display:flex; flex-direction:column; align-items:center; gap:var(--cv-e3); text-align:center;
}
.cv-subida[data-estado="encima"]{ border-style:solid; border-color:var(--cv-accion); background:var(--cv-accion-suave) }
.cv-subida[data-estado="cargado"]{ border-style:solid; border-color:var(--cv-ok); background:var(--cv-ok-suave) }

/* ── Bloque de factura: el motivo del sitio ───────────────────────── */
.cv-factura{
  font-family:var(--cv-dato); font-size:var(--cv-t-sm); line-height:1.9;
  background:var(--cv-papel); border:var(--cv-trazo) solid var(--cv-tinta);
  padding:var(--cv-e4) var(--cv-e5);
}
.cv-factura .l{ display:flex; justify-content:space-between; gap:var(--cv-e4);
  border-bottom:1px dotted var(--cv-tinta-3); padding:2px 0 }
.cv-factura .l--sobra{
  background:var(--cv-marca-suave);
  box-shadow:0 0 0 var(--cv-trazo) var(--cv-marca);
  color:var(--cv-tinta); font-weight:600;
}
.cv-factura .l--total{ border-bottom:0; border-top:var(--cv-trazo) solid var(--cv-tinta);
  margin-top:var(--cv-e2); padding-top:var(--cv-e2); font-weight:600 }

/* ── Avisos ───────────────────────────────────────────────────────── */
.cv-nota{ border-left:4px solid var(--cv-accion); background:var(--cv-accion-suave);
  padding:var(--cv-e4) var(--cv-e5); font-size:var(--cv-t-sm) }
.cv-nota--sobra{ border-left-color:var(--cv-marca); background:var(--cv-marca-suave) }
.cv-nota--ok{ border-left-color:var(--cv-ok); background:var(--cv-ok-suave) }
.cv-nota--aviso{ border-left-color:var(--cv-aviso); background:var(--cv-aviso-suave) }

/* ── Etiqueta de sección ──────────────────────────────────────────── */
.cv-etiqueta{ font-family:var(--cv-dato); font-size:var(--cv-t-xs);
  text-transform:uppercase; letter-spacing:var(--cv-track-etiqueta); color:var(--cv-tinta-2) }

/* ── Ilustración ──────────────────────────────────────────────────── */
/* El trazo se hereda con currentColor: cambia con el contexto y deja
   abierta una futura versión oscura sin volver a dibujar nada.        */
.cv-ilu{ display:block; width:100%; height:auto; color:var(--cv-tinta) }
.cv-ilu [stroke]{ stroke:currentColor }
.cv-ilu .relleno-marca{ fill:var(--cv-marca-suave) }
.cv-ilu .relleno-papel{ fill:var(--cv-papel) }
.cv-ilu .anota{ stroke:var(--cv-accion) }
/* La punta de flecha va SIEMPRE en un <marker orient="auto">, nunca a mano:
   asi apunta en la direccion de la tangente y no se puede desalinear. */
.cv-ilu .anota-pta{ fill:var(--cv-accion); stroke:none }
.cv-ilu .sobra{ stroke:var(--cv-marca) }