/* FormForm — hoja de respuestas (flujo empleado / responsable / PIN / estados).
   Mundo: papel blanco, gris de imprenta, tinta negra; naranja CSA solo en las
   marcas de registro, la regla de cabecera y el botón primario; rellenos de
   semáforo con numeral negro. Tipografía: TeX Gyre Adventor (la de csa.es),
   autoalojada porque la CSP no permite recursos externos. */

@font-face {
  font-family: "TeX Gyre Adventor";
  src: url("/static/fuentes/TeXGyreAdventor-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TeX Gyre Adventor";
  src: url("/static/fuentes/TeXGyreAdventor-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* semilla única: dos colores del logo + tinta + grises de imprenta */
  --papel: #ffffff;
  --tinta: #111111;
  --tinta-2: #414042;
  --imprenta: #5b5e62;      /* etiquetas, reglas fuertes, contornos */
  --regla: #c5c6c8;         /* gris CSA: reglas finas */
  --regla-suave: #e3e4e6;
  --sombra-fila: #f6f6f7;   /* hover de fila */
  --naranja: #ff8200;
  --naranja-hover: #e67300;
  --error: #b00020;
  --error-fondo: #fbeef0;
  /* semáforo compartido con el Excel exportado (anclas de escala.js) */
  --escala-1: rgb(248, 105, 107);
  --escala-2: rgb(252, 135, 54);
  --escala-3: rgb(255, 165, 0);
  --escala-4: rgb(177, 178, 62);
  --escala-5: rgb(99, 190, 123);

  --fuente: "TeX Gyre Adventor", "Century Gothic", Arial, sans-serif;
  --t-small: 0.875rem;
  --t-base: 1rem;
  --t-large: 1.5rem;

  --burbuja: 2.25rem;
  --hueco-burbuja: 0.45rem;
  --ancho-numero: 2.25rem;
  --ancho-columna: calc(var(--burbuja) * 5 + var(--hueco-burbuja) * 4);
  --r-burbuja: 0.375rem;
  --r-caja: 2px;
  --e-rapido: 150ms cubic-bezier(0.2, 0, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--papel); }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: var(--t-base)/1.5 var(--fuente);
  letter-spacing: 0.01em;
  -webkit-text-size-adjust: 100%;
}
::selection { background: color-mix(in srgb, var(--naranja) 30%, white); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
a { color: var(--tinta); text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--tinta); }
input, textarea, button { font: inherit; letter-spacing: inherit; color: inherit; caret-color: var(--naranja); accent-color: var(--naranja); }

/* ---------- la hoja ---------- */
.hoja {
  position: relative;
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem) 3rem;
  min-height: 100dvh;
}
/* marcas de registro: naranja, solo decoración de la hoja */
.registro { position: absolute; width: 1rem; height: 1rem; border: 2px solid var(--naranja); pointer-events: none; }
.registro.a { top: 0.5rem; left: 0.5rem; border-right: 0; border-bottom: 0; }
.registro.b { top: 0.5rem; right: 0.5rem; border-left: 0; border-bottom: 0; }
.registro.c { bottom: 0.5rem; left: 0.5rem; border-right: 0; border-top: 0; }
.registro.d { bottom: 0.5rem; right: 0.5rem; border-left: 0; border-top: 0; }

/* cabecera: regla naranja, logo, título */
.cabecera { border-top: 4px solid var(--naranja); padding-top: 0.75rem; }
.cabecera-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.logo { height: 3rem; width: auto; display: block; }
.titulo {
  margin: 0;
  text-align: right;
  font-size: var(--t-large);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-wrap: balance;
}
.titulo small { display: block; font-size: var(--t-small); font-weight: 400; letter-spacing: 0.01em; color: var(--imprenta); margin-top: 0.3rem; }


/* ficha de datos del alta */
.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; margin: 1rem 0 0; }
.ficha div { display: grid; grid-template-columns: 1fr; gap: 0.1rem; padding: 0.4rem 0; border-bottom: 1px solid var(--regla-suave); align-content: start; }
.ficha dt { margin: 0; font-size: var(--t-small); color: var(--imprenta); }
.ficha dd { margin: 0; font-weight: 700; overflow-wrap: break-word; }
.ficha dd.vacio { color: var(--imprenta); font-weight: 400; }

.objeto { margin: 1rem 0 0; color: var(--tinta-2); max-width: 70ch; }
.leyenda { margin: 0.35rem 0 0; font-size: var(--t-small); color: var(--imprenta); }
.leyenda b { color: var(--tinta); font-size: var(--t-base); }

/* ---------- aviso global ---------- */
.aviso { display: flex; gap: 0.75rem; align-items: flex-start; margin: 1.5rem 0 0; padding: 0.85rem 1rem; border: 1px solid var(--error); border-radius: var(--r-caja); background: var(--error-fondo); color: var(--tinta); }
.aviso svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--error); margin-top: 0.15rem; }
.aviso p { margin: 0; }
.aviso a { font-weight: 700; }
.aviso.neutro { border-color: var(--regla); background: var(--sombra-fila); }
.aviso.neutro svg { color: var(--imprenta); }

/* ---------- bloques y filas ---------- */
.bloque { margin-top: 1.25rem; }
.bloque-cabecera {
  display: grid;
  grid-template-columns: var(--ancho-numero) 1fr var(--ancho-columna);
  gap: 0 1rem;
  align-items: end;
  padding-bottom: 0.3rem;
  border-bottom: 1.5px solid var(--imprenta);
}
.bloque-titulo { grid-column: 1 / 3; margin: 0; font-size: var(--t-small); font-weight: 700; letter-spacing: 0.08em; color: var(--imprenta); }
.columna-numeros { display: grid; grid-template-columns: repeat(5, var(--burbuja)); gap: var(--hueco-burbuja); text-align: center; font-size: var(--t-small); font-weight: 700; color: var(--imprenta); font-variant-numeric: tabular-nums; }

.fila {
  display: grid;
  grid-template-columns: var(--ancho-numero) 1fr var(--ancho-columna);
  gap: 0 1rem;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--regla-suave);
  transition: background-color var(--e-rapido);
}
.fila:hover { background: var(--sombra-fila); box-shadow: 0 0 0 0.5rem var(--sombra-fila); }
.numero { font-weight: 700; color: var(--imprenta); font-variant-numeric: tabular-nums; transition: color var(--e-rapido); }
.fila:has(input:checked) .numero { color: var(--tinta); }
.pregunta { margin: 0; }
.fila.error .numero, .fila.error .sin-respuesta { color: var(--error); }
.sin-respuesta { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.6rem; font-size: var(--t-small); font-weight: 700; }
.sin-respuesta svg { width: 1rem; height: 1rem; }

/* burbujas: radios reales */
.burbujas { display: grid; grid-template-columns: repeat(5, var(--burbuja)); gap: var(--hueco-burbuja); margin: 0; padding: 0; border: 0; }
.burbuja { position: relative; display: block; width: var(--burbuja); height: var(--burbuja); cursor: pointer; }
.burbuja input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.burbuja span {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border: 1.5px solid var(--imprenta);
  border-radius: var(--r-burbuja);
  background: var(--papel);
  color: var(--tinta);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: background-color var(--e-rapido), border-color var(--e-rapido), transform var(--e-rapido), box-shadow var(--e-rapido);
}
.burbuja:hover span { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.burbuja input:active + span { transform: scale(0.94); }
.burbuja input:focus-visible + span { outline: 2px solid var(--tinta); outline-offset: 2px; }
.burbuja input:checked + span { border-color: var(--tinta); box-shadow: inset 0 0 0 2px var(--papel); }
.burbuja input[value="1"]:checked + span { background: var(--escala-1); }
.burbuja input[value="2"]:checked + span { background: var(--escala-2); }
.burbuja input[value="3"]:checked + span { background: var(--escala-3); }
.burbuja input[value="4"]:checked + span { background: var(--escala-4); }
.burbuja input[value="5"]:checked + span { background: var(--escala-5); }
.fila.error .burbuja span { border-color: var(--error); }

/* valoración general (empleado elige / responsable: media calculada) */
.general { margin-top: 2rem; border-top: 1.5px solid var(--imprenta); border-bottom: 1px solid var(--regla-suave); }
.general .fila { border-bottom: 0; padding: 0.85rem 0; }
.general .pregunta { font-weight: 700; letter-spacing: 0.08em; }
.general .pregunta small { display: block; font-weight: 400; letter-spacing: 0.01em; color: var(--imprenta); font-size: var(--t-small); margin-top: 0.15rem; }
.media {
  display: grid; place-items: center;
  grid-column: 3;
  justify-self: end;
  min-width: calc(var(--burbuja) * 2 + var(--hueco-burbuja));
  height: var(--burbuja);
  padding: 0 0.75rem;
  border: 1.5px solid var(--imprenta);
  border-radius: var(--r-burbuja);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--e-rapido);
}
.media:empty::before { content: "—"; color: var(--imprenta); }
.media.con-valor { border-color: var(--tinta); box-shadow: inset 0 0 0 2px var(--papel); }

/* observaciones */
.observaciones { margin-top: 2rem; }
.observaciones label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: var(--t-small); font-weight: 700; letter-spacing: 0.08em; color: var(--imprenta); padding-bottom: 0.4rem; border-bottom: 1.5px solid var(--imprenta); }
.observaciones label .tag { font-weight: 400; letter-spacing: 0.01em; }
.observaciones textarea {
  display: block; width: 100%; min-height: 8rem; margin-top: 0.75rem; padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--imprenta); border-radius: var(--r-caja); background: var(--papel); resize: vertical;
  transition: border-color var(--e-rapido), box-shadow var(--e-rapido);
}
.observaciones textarea:hover { border-color: var(--tinta); }
.observaciones textarea:focus-visible { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); outline: none; }
.observaciones.error textarea { border-color: var(--error); }
.observaciones .pie { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; font-size: var(--t-small); color: var(--imprenta); }
.observaciones .pie .error-texto { color: var(--error); font-weight: 700; display: inline-flex; align-items: center; gap: 0.35rem; }
.observaciones .pie svg { width: 1rem; height: 1rem; }

/* envío */
.envio { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--regla); }
.respondidas { font-size: var(--t-small); color: var(--imprenta); }
.respondidas output { font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 2.75rem; padding: 0 1.5rem;
  border: 0; border-radius: var(--r-caja);
  background: var(--naranja); color: var(--tinta);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--t-small);
  cursor: pointer;
  transition: background-color var(--e-rapido), transform var(--e-rapido);
}
.boton:hover { background: var(--naranja-hover); }
.boton:active { transform: translateY(1px); }
.boton:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.boton svg { width: 1.1rem; height: 1.1rem; }

/* ---------- PIN ---------- */
.acceso { margin-top: 2.5rem; max-width: 34rem; }
.acceso h2 { margin: 0; font-size: var(--t-large); font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; text-wrap: balance; }
.acceso p { margin: 0.75rem 0 0; color: var(--tinta-2); }
.campo-pin { margin-top: 1.5rem; }
.campo-pin label { display: block; font-size: var(--t-small); font-weight: 700; color: var(--imprenta); margin-bottom: 0.5rem; }
.campo-pin .linea { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: stretch; }
.pin {
  width: 9.5em; min-height: 2.75rem; padding: 0 0.6rem; text-align: center;
  border: 1.5px solid var(--imprenta); border-radius: var(--r-caja); background: var(--papel);
  font-size: var(--t-large); font-weight: 700; letter-spacing: 0.5em; font-variant-numeric: tabular-nums;
  transition: border-color var(--e-rapido), box-shadow var(--e-rapido);
}
.pin::placeholder { color: var(--imprenta); letter-spacing: 0.5em; font-weight: 400; }
.pin:hover { border-color: var(--tinta); }
.pin:focus-visible { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); outline: none; }
.campo-pin.error .pin { border-color: var(--error); }
.campo-pin .error-texto { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; color: var(--error); font-weight: 700; font-size: var(--t-small); }
.campo-pin .error-texto svg { width: 1rem; height: 1rem; }
.nota { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--regla-suave); font-size: var(--t-small); color: var(--imprenta); max-width: 60ch; }
.nota b { color: var(--tinta); }

/* ---------- estados: enviada / ya enviado / no disponible ---------- */
.estado { margin-top: 2.5rem; max-width: 40rem; }
.sello {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 1rem 0.6rem 0.8rem;
  border: 2px solid var(--tinta); border-radius: var(--r-caja);
  font-size: var(--t-large); font-weight: 700; letter-spacing: 0.04em; line-height: 1.1;
}
.sello svg { width: 1.6rem; height: 1.6rem; flex: none; color: var(--naranja); }
.sello.quieto { border-color: var(--imprenta); color: var(--imprenta); }
.sello.quieto svg { color: var(--imprenta); }
.estado p { margin: 1.25rem 0 0; color: var(--tinta-2); max-width: 60ch; }
.estado p b { color: var(--tinta); }

/* pie de hoja */
.pie-hoja { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 0.75rem; border-top: 1px solid var(--regla); font-size: var(--t-small); color: var(--imprenta); }

/* ---------- pantallas estrechas ---------- */
@media (max-width: 44rem) {
  .cabecera-fila { flex-direction: column; align-items: flex-start; }
  .titulo { text-align: left; }
  .ficha { grid-template-columns: 1fr; }
  .bloque-cabecera { grid-template-columns: 1fr; }
  .bloque-titulo { grid-column: 1; }
  .columna-numeros { display: none; }
  .fila { grid-template-columns: var(--ancho-numero) 1fr; row-gap: 0.6rem; }
  .burbujas { grid-column: 1 / -1; grid-template-columns: repeat(5, 1fr); }
  .burbuja { width: auto; height: auto; justify-self: stretch; }
  .burbuja span { width: 100%; max-width: var(--burbuja); height: auto; aspect-ratio: 1; margin-inline: auto; }
  .media { grid-column: 1 / -1; justify-self: start; }
  .envio { flex-direction: column; align-items: stretch; }
  .boton { width: 100%; }
}
@media (pointer: coarse) {
  :root { --burbuja: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .burbuja input:active + span, .boton:active { transform: none; }
}
@media print {
  .registro, .envio { display: none; }
  .hoja { padding: 0; min-height: 0; }
}