/* La marca de EasyTPV: los colores, las letras y las escalas que comparten el sitio y el panel.
 *
 * **La única fuente** (loops/18 U2, D72). Hasta el 06/10/2026 cada uno tenía los suyos, y siete tokens con el mismo
 * nombre decían cosas distintas: `--brand-ink` era el verde de la marca en el sitio y casi negro en el panel. Ahora
 * `sitio/estilo.css` y `webapp/estilo.css` llevan dentro de su `:root` una copia literal de lo de abajo, entre las
 * marcas «⟦marca⟧» y «⟦/marca⟧»; la escribe `node marca/copiar.mjs`, la vuelven a copiar los dos `publicar.mjs` al
 * subir, y `webapp/prueba.mjs` y `sitio/comprobar.mjs` se ponen rojos si una copia y esta fuente no coinciden.
 *
 * Se cambia aquí, nunca en una copia. Los valores son los del sitio, que es la marca que ya se ve: el panel los
 * toma, y el tema oscuro del panel los redefine en su bloque, que es solo suyo (el sitio es siempre claro, D66). */
:root {
  /* el verde de la marca, y la letra que va encima (7,0 : 1) */
  --brand: #17654f;
  --brand-2: #1fa37c;
  --brand-ink: #17654f;
  --verde-hondo: #0f4a3a;
  --sobre-verde: #ffffff;
  /* la tinta y los fondos */
  --fg: #0b2823;
  --muted: #4c665f;
  --bg: #ffffff;
  --bg-alt: #f2f9f6;
  --line: #d9e9e3;
  --chip: #dff4f0;
  /* los avisos */
  --ok: #137658;
  --warn: #98590c;
  --danger: #c0271c;
  /* las letras, del mismo origen (fuentes/, con su licencia OFL al lado) */
  --f-titulo: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-texto: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* la escala de la letra: doce pasos, y nada entre uno y otro (la página no cambia de tamaño medio píxel) */
  --t-2xs: 11px;
  --t-xs: 12px;
  --t-s: 13px;
  --t-m: 14px;
  --t-base: 15px;
  --t-l: 16px;
  --t-xl: 18px;
  --t-2xl: 21px;
  --t-3xl: 24px;
  --t-4xl: 28px;
  --t-5xl: 34px;
  --t-6xl: 40px;
  /* las escalas cortas: cuatro radios y dos sombras */
  --radio-s: 8px;
  --radio-m: 12px;
  --radio: 16px;
  --radio-pildora: 999px;
  --sombra: 0 1px 2px rgba(11,40,35,.06), 0 14px 34px -22px rgba(11,40,35,.45);
  --sombra-alta: 0 2px 4px rgba(11,40,35,.06), 0 26px 50px -28px rgba(11,40,35,.5);
}

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("/fuentes/bricolage-grotesque.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("/fuentes/figtree.woff2") format("woff2"); }
*, *::before, *::after { box-sizing: border-box; }
body.marco { margin: 0; font-family: var(--f-texto); font-size: var(--t-base); line-height: 1.55; color: var(--fg); background: var(--bg-alt);
  min-height: 100vh; display: flex; flex-direction: column; }
.marco a { color: var(--brand-ink); }
.marco :focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
.marco-cabecera { background: var(--bg); border-bottom: 1px solid var(--line); }
.marco-cabecera > a { display: flex; align-items: center; gap: 10px; max-width: 760px; margin: 0 auto; padding: 12px 16px;
  font-family: var(--f-titulo); font-weight: 800; font-size: var(--t-xl); color: var(--fg); text-decoration: none; }
.marco-cabecera img { width: 28px; height: 28px; }
/* Il piede in fondo anche nelle pagine corte (il ticket che non c'è più, il correo). */
.marco-contenido { flex: 1 0 auto; width: 100%; max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; }
.marco-contenido.estrecho { max-width: 640px; }
.marco h1, .marco h2, .marco h3 { font-family: var(--f-titulo); line-height: 1.2; color: var(--fg); }
.marco h1 { font-size: var(--t-4xl); margin: 8px 0; }
.marco h2 { font-size: var(--t-2xl); margin: 28px 0 8px; }
.marco h3 { font-size: var(--t-xl); margin: 22px 0 6px; }
.marco table { width: 100%; border-collapse: collapse; margin: 12px 0; display: block; overflow-x: auto; }
.marco td { border: 1px solid var(--line); padding: 8px; font-size: var(--t-m); vertical-align: top; background: var(--bg); }
.marco blockquote { margin: 12px 0; padding: 10px 14px; background: #fff8e1; border-left: 4px solid var(--warn); }
.marco code { background: var(--chip); padding: 1px 4px; border-radius: 4px; font-size: var(--t-s); }
.marco hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.marco-pie { border-top: 1px solid var(--line); background: var(--bg); color: var(--muted); font-size: var(--t-s); }
.marco-pie > div { max-width: 760px; margin: 0 auto; padding: 16px; }
.marco-pie nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.marco-pie p { margin: 8px 0 0; }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radio-m); padding: 18px; margin: 14px 0; box-shadow: var(--sombra); }
.card h2 { margin-top: 0; }
.nota { color: var(--muted); font-size: var(--t-m); line-height: 1.45; }
.marco label { display: block; font-size: var(--t-s); font-weight: 600; margin: 12px 0 4px; color: var(--muted); }
.marco input, .marco select { width: 100%; padding: 10px 12px; font: inherit; font-size: var(--t-l); color: var(--fg);
  border: 1px solid #728f87; border-radius: var(--radio-s); background: var(--bg); }
.marco button, .marco .boton { display: block; text-align: center; text-decoration: none; margin-top: 16px; width: 100%; padding: 14px;
  font: inherit; font-size: var(--t-l); font-weight: 700; color: var(--sobre-verde); background: var(--brand); border: 0;
  border-radius: var(--radio-s); cursor: pointer; }
.marco button.secundario, .marco .boton.secundario { background: var(--bg); color: var(--brand-ink); border: 1px solid var(--brand); }
/* Le due scelte di `/certificado` (B2): grandi, una aperta per volta, con la riga che dice cosa succede dentro. */
.pregunta { font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-xl); margin: 22px 0 10px; }
details.eleccion { background: var(--bg); border: 2px solid var(--line); border-radius: var(--radio-m); margin: 12px 0; box-shadow: var(--sombra); }
details.eleccion[open] { border-color: var(--brand); }
details.eleccion > summary { list-style: none; cursor: pointer; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
details.eleccion > summary::-webkit-details-marker { display: none; }
details.eleccion > summary strong { font-family: var(--f-titulo); font-size: var(--t-2xl); color: var(--fg); }
details.eleccion > summary span { color: var(--muted); font-size: var(--t-m); }
details.eleccion > :not(summary) { margin-left: 18px; margin-right: 18px; }
/* Il bottone dentro una scelta non è largo il 100 % più i margini: sporgeva a destra (visto dal browser). */
details.eleccion > .boton, details.eleccion > button { width: auto; }
details.eleccion > :last-child { margin-bottom: 18px; }
.ultimo-paso { background: var(--chip); border-radius: var(--radio-s); padding: 10px 12px; font-size: var(--t-m); }
.dudas { margin-top: 20px; }
.ok { color: var(--ok); font-weight: 600; }
.err { color: var(--danger); font-weight: 600; }
.oculto { display: none; }
.marco.ticket .marco-contenido, .marco.vacio .marco-contenido { display: flex; flex-direction: column; align-items: center; text-align: center; }
.papel { background: #fff; color: #111; padding: 18px 14px; border-radius: var(--radio-m); box-shadow: var(--sombra); max-width: 420px; width: 100%; text-align: left; }
.papel pre { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word; }
.marco.ticket .nota { max-width: 420px; margin-top: 14px; }
.marco.ticket .boton { max-width: 420px; }
.qr { margin-top: 14px; font-size: var(--t-xs); word-break: break-all; }