/* FormForm — panel de administración y portada, sobre los tokens de hoja.css.
   Misma hoja de respuestas vista desde la mesa de Formación: hoja ancha,
   filas de imprenta, casillas de contorno para estado y acciones. Naranja solo
   en las marcas, la regla de cabecera, el botón primario y el enlace activo.
   Se carga después de hoja.css y no redefine ningún token. */

.hoja.panel { max-width: 88rem; }

/* ---------- barra de navegación ---------- */
.barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.75rem;
  margin-top: 1rem; padding: 0 0.25rem;
  border-top: 1px solid var(--regla); border-bottom: 1px solid var(--regla);
  font-size: var(--t-small);
}
.barra a, .barra button {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 2.75rem; padding: 0; margin: 0;
  border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--imprenta); font-weight: 700; text-decoration: none; cursor: pointer;
  transition: color var(--e-rapido), border-color var(--e-rapido);
}
.barra a:hover, .barra button:hover { color: var(--tinta); }
.barra [aria-current="page"] { color: var(--tinta); border-bottom-color: var(--naranja); }
.barra a:focus-visible, .barra button:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
.barra svg { width: 1.1rem; height: 1.1rem; flex: none; }
.barra form { margin: 0 0 0 auto; display: flex; }

/* ---------- encabezado de página ---------- */
.encabezado { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; flex-wrap: wrap; margin: 2rem 0 0; }
.encabezado h2 { margin: 0; font-size: var(--t-large); font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; text-wrap: balance; }
.encabezado p { margin: 0; font-size: var(--t-small); color: var(--imprenta); }
.encabezado p b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.volver { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; font-size: var(--t-small); color: var(--imprenta); }
.volver svg { width: 1rem; height: 1rem; }
.volver:hover { color: var(--tinta); }
.explicacion { margin: 1rem 0 0; color: var(--tinta-2); max-width: 70ch; }
.explicacion + .explicacion { margin-top: 0.5rem; }
.explicacion a { font-weight: 700; }

/* ---------- filtro del listado ---------- */
.filtro { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.25rem; }
.filtro input[type="search"] {
  flex: 1 1 16rem; max-width: 28rem; min-height: 2.25rem; padding: 0 0.75rem;
  border: 1.5px solid var(--imprenta); border-radius: var(--r-caja); background: var(--papel);
  font-size: var(--t-small); transition: border-color var(--e-rapido), box-shadow var(--e-rapido);
}
.filtro input[type="search"]:hover { border-color: var(--tinta); }
.filtro input[type="search"]:focus-visible { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); outline: none; }
.filtro .accion { width: 2.25rem; height: 2.25rem; }
.filtro .quitar { font-size: var(--t-small); color: var(--imprenta); }
.filtro .quitar:hover { color: var(--tinta); }
.filtro + .tabla-marco, .filtro + .aviso { margin-top: 1rem; }

/* ---------- tabla de imprenta ---------- */
.tabla-marco { margin-top: 1.25rem; overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.tabla th, .tabla td { padding: 0.55rem 0.6rem; text-align: left; vertical-align: middle; white-space: nowrap; }
.tabla th:first-child, .tabla td:first-child { padding-left: 0.25rem; }
.tabla th:last-child, .tabla td:last-child { padding-right: 0.25rem; }
.tabla th { color: var(--imprenta); font-weight: 700; border-bottom: 1.5px solid var(--imprenta); vertical-align: bottom; }
.tabla td { border-bottom: 1px solid var(--regla-suave); transition: background-color var(--e-rapido); }
.tabla th .ordenar { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; }
.tabla th .ordenar:hover, .tabla th .ordenar:focus-visible { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
.tabla th .ordenar .direccion { font-size: 0.65em; line-height: 1; }
.tabla th .ordenar:not(.activa)::after { content: "▼"; font-size: 0.65em; line-height: 1; opacity: 0; transition: opacity var(--e-rapido); }
.tabla th .ordenar:not(.activa):hover::after, .tabla th .ordenar:not(.activa):focus-visible::after { opacity: 0.45; }
.tabla th.num .ordenar { flex-direction: row-reverse; }
.tabla tbody tr:hover td { background: var(--sombra-fila); }
.tabla .recorte { display: block; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .texto, .tabla.prosa th, .tabla.prosa td { white-space: normal; }
.tabla.prosa td { vertical-align: top; }
.tabla.prosa td:first-child { font-weight: 700; }
.tabla code { white-space: nowrap; }

/* estado: dos casillas (parte del empleado, parte del responsable) + nombre del estado */
.flujo { display: inline-flex; align-items: center; gap: 0.6rem; }
.casillas { display: inline-grid; grid-template-columns: repeat(2, 0.9rem); gap: 0.2rem; }
.casillas span { width: 0.9rem; height: 0.9rem; border: 1.5px solid var(--imprenta); border-radius: 2px; background: var(--papel); }
.casillas span.hecha { background: var(--tinta); border-color: var(--tinta); }

/* días en el estado actual: estancada = rojo + icono de reloj, nunca solo color */
.tabla .dias { text-align: right; font-variant-numeric: tabular-nums; }
.tabla td.estancada { color: var(--error); font-weight: 700; }
.tabla td.estancada svg { width: 1rem; height: 1rem; vertical-align: -0.2em; margin-right: 0.35rem; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.errores { display: inline-flex; align-items: center; gap: 0.35rem; font-variant-numeric: tabular-nums; }
.tabla .errores { text-decoration-color: var(--regla); }
.tabla .errores:hover { text-decoration-color: var(--tinta); }
.errores.con-error { color: var(--error); font-weight: 700; text-decoration-color: var(--error); }
.tabla .errores.con-error:hover { text-decoration-color: var(--error); }
.errores svg { width: 1rem; height: 1rem; }
.error-texto { color: var(--error); font-weight: 700; }

/* acciones de fila: casillas de contorno */
.acciones-fila { display: flex; gap: 0.35rem; justify-content: flex-end; }
.acciones-fila form { margin: 0; }
.accion {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
  border: 1.5px solid var(--imprenta); border-radius: var(--r-burbuja); background: var(--papel); color: var(--tinta);
  cursor: pointer;
  transition: border-color var(--e-rapido), box-shadow var(--e-rapido), color var(--e-rapido), transform var(--e-rapido);
}
.accion:hover { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.accion:active { transform: scale(0.94); }
.accion:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.accion.peligro:hover { border-color: var(--error); color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.accion svg { width: 1rem; height: 1rem; }

/* ---------- formularios del panel ---------- */
.formulario { margin-top: 1.5rem; max-width: 26rem; }
.campo { margin-top: 1rem; }
.campo label { display: block; margin-bottom: 0.4rem; font-size: var(--t-small); font-weight: 700; color: var(--imprenta); }
.campo input {
  display: block; width: 100%; min-height: 2.75rem; padding: 0 0.75rem;
  border: 1.5px solid var(--imprenta); border-radius: var(--r-caja); background: var(--papel);
  transition: border-color var(--e-rapido), box-shadow var(--e-rapido);
}
.campo input:hover { border-color: var(--tinta); }
.campo input:focus-visible { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); outline: none; }
.campo input.pin { width: 9.5em; }
.campo input[type="file"] { padding: 0.45rem 0.6rem; min-height: 0; cursor: pointer; }
.campo input[type="file"]::file-selector-button {
  margin-right: 0.75rem; padding: 0.3rem 0.8rem;
  border: 1.5px solid var(--imprenta); border-radius: var(--r-caja); background: var(--papel);
  font: inherit; font-size: var(--t-small); font-weight: 700; letter-spacing: inherit; color: var(--tinta); cursor: pointer;
  transition: border-color var(--e-rapido), box-shadow var(--e-rapido);
}
.campo input[type="file"]:hover::file-selector-button { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.campo .ayuda-campo { margin: 0.35rem 0 0; font-size: var(--t-small); color: var(--imprenta); }
.acciones { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* avisos del panel: misma caja e icono que en la hoja (la página TOTP va sin icono) */
.panel .aviso { margin-top: 1.5rem; max-width: 60ch; }
.panel .aviso p { margin: 0; }
.panel .aviso > div { min-width: 0; }
.panel .aviso ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.panel .aviso li + li { margin-top: 0.25rem; }
.panel .aviso.ancho { max-width: none; }
.panel .aviso.neutro a { font-weight: 700; }

/* segundo factor: QR y clave manual */
.qr { display: inline-block; margin-top: 1.25rem; padding: 0.75rem; border: 1.5px solid var(--imprenta); border-radius: var(--r-caja); background: var(--papel); }
.qr svg { display: block; width: 11rem; height: 11rem; }
.clave { margin: 0.75rem 0 0; font-size: var(--t-small); color: var(--imprenta); }
.clave code {
  display: inline-block; margin-top: 0.3rem; padding: 0.35rem 0.6rem;
  border: 1.5px solid var(--imprenta); border-radius: var(--r-caja);
  font: inherit; font-size: var(--t-base); font-weight: 700; letter-spacing: 0.15em; color: var(--tinta);
  overflow-wrap: anywhere; user-select: all;
}

/* ---------- estados del panel (sello reutilizado) ---------- */
.panel .estado { margin-top: 2rem; }

/* ---------- ayuda: texto de lectura ---------- */
.ayuda { max-width: 70ch; margin-top: 0.5rem; }
.ayuda h3 { margin: 2rem 0 0.75rem; padding-bottom: 0.3rem; font-size: var(--t-base); font-weight: 700; border-bottom: 1.5px solid var(--imprenta); }
.ayuda p, .ayuda li { color: var(--tinta-2); }
.ayuda p { margin: 0.75rem 0 0; }
.ayuda ol, .ayuda ul { margin: 0.75rem 0 0; padding-left: 1.4rem; }
.ayuda li + li { margin-top: 0.4rem; }
.ayuda li::marker { color: var(--imprenta); font-weight: 700; }
.ayuda strong { color: var(--tinta); }
.ayuda .tabla-marco { margin-top: 1rem; }
.ayuda .tabla { font-size: var(--t-base); }
.ayuda .tabla td { color: var(--tinta-2); }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; font-size: 0.9em; padding: 0.05em 0.35em; border-radius: 2px; background: var(--sombra-fila); color: var(--tinta); }
pre { margin: 1rem 0 0; padding: 0.75rem 1rem; overflow-x: auto; border: 1px solid var(--regla); border-radius: var(--r-caja); background: var(--sombra-fila); font-size: var(--t-small); line-height: 1.6; }
pre code { padding: 0; background: none; font-size: inherit; }

/* ---------- portada ---------- */
.hoja.portada { display: grid; place-items: center; padding: 1.25rem; }
.marca { margin: 0; font-weight: 700; letter-spacing: 0.06em; line-height: 1; text-align: center; }

/* ---------- pantallas estrechas ---------- */
@media (max-width: 44rem) {
  .barra { gap: 0 1.25rem; }
  .encabezado { flex-direction: column; align-items: flex-start; }
  .formulario { max-width: none; }
  .acciones .boton { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .accion:active { transform: none; }
}
@media print {
  .barra, .acciones-fila, .acciones, .volver { display: none; }
  .hoja.panel { max-width: none; }
}