/* DatoPlanta — estilos de la marca.
   Azul oscuro de fondo, tarjetas claras para leer y llenar, ámbar solo como acento
   (nunca como letra sobre fondo claro). Botones grandes: se usa de pie, con guantes. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700&family=Barlow:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
  --azul: #0E1A2B;
  --azul-2: #16263D;
  --ambar: #FFB000;
  --ambar-claro: #FFC233;
  /* Con la marca de una empresa, comun.js cambia los colores de arriba (ver src/core/colores.js). El aviso de
     demostración no: siempre ámbar, para que nadie lo confunda con lo de verdad. */
  --demo-fondo: #FFB000;
  --demo-letra: #0E1A2B;
  --claro: #F1F4F6;
  --blanco: #FFFFFF;
  --titulo-oscuro: #F4F7FA;
  --cuerpo-oscuro: #C9D4E0;
  --secundario-oscuro: #A9B8CA;
  --linea-oscuro: #2B3F5C;
  --texto: #0E1A2B;
  --secundario: #44566B;
  --linea: #C5CFD8;
  --bien: #1E7A46;
  --bien-fondo: #E3F3E9;
  --aviso: #8A5A00;
  --aviso-fondo: #FFF3D6;
  --mal: #B3261E;
  --mal-fondo: #FBE6E4;
  --info-fondo: #E4ECF6;
  --radio: 10px;
  --titulo: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --cuerpo: 'Barlow', 'Segoe UI', Arial, sans-serif;
  --mono: 'IBM Plex Mono', Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--azul);
  color: var(--cuerpo-oscuro);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.45;
}

/* ── Barra de arriba ── */
.barra {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--linea-oscuro);
  background: var(--azul);
}
/* «Atrás» y «Adelante», debajo de la barra en todas las pantallas (alineados con el contenido). */
.navegacion {
  display: flex; align-items: center; gap: 10px;
  padding: 6px max(16px, calc((100% - 980px) / 2 + 16px));
  background: var(--azul-2); border-bottom: 3px solid var(--ambar);
}
.navegacion button { min-height: 44px; padding: 6px 14px; font-size: 16px; flex: 0 0 auto; }
.navegacion .donde { flex: 1; min-width: 0; text-align: center; font-size: 14px; line-height: 1.2; color: var(--titulo-oscuro); }
.cabecera { position: sticky; top: 0; z-index: 10; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--titulo-oscuro); text-decoration: none; }
.marca img { height: 34px; width: auto; }
/* Nombre de la marca: "Dato" claro y "Planta" en ámbar, sin mayúsculas */
.nombre-marca { font-family: var(--titulo); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: 0.01em; text-transform: none; color: var(--titulo-oscuro); }
.nombre-marca em { font-style: normal; color: var(--ambar); }
.barra .quien { margin-left: auto; text-align: right; font-size: 14px; color: var(--secundario-oscuro); line-height: 1.2; }
.barra .quien b { display: block; color: var(--titulo-oscuro); font-weight: 600; }
.barra button { margin: 0; }

main { max-width: 980px; margin: 0 auto; padding: 16px; display: grid; gap: 16px; }

h1, h2, h3 {
  font-family: var(--titulo); text-transform: uppercase; letter-spacing: 0.03em;
  margin: 0; line-height: 1.1; text-wrap: balance;
}
h1 { font-size: 30px; color: var(--titulo-oscuro); }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
.subtitulo { color: var(--secundario-oscuro); margin: 4px 0 0; }

/* ── Tarjetas claras ── */
.tarjeta {
  background: var(--claro); color: var(--texto);
  border-radius: var(--radio); padding: 16px;
  display: grid; gap: 14px;
}
.tarjeta h2, .tarjeta h3 { color: var(--texto); }
.tarjeta .nota { color: var(--secundario); font-size: 15px; margin: 0; }

.etiqueta {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--secundario);
}

/* ── Campos ── */
.campos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* Un campo de lado a lado (por ejemplo, la lista de documentos: los nombres largos se leen enteros). */
.campos .a-lo-ancho { grid-column: 1 / -1; }
label.campo { display: grid; gap: 6px; }
label.campo > span { font-weight: 600; }
label.campo small { color: var(--secundario); font-size: 14px; }
input, select, textarea {
  font: inherit; font-size: 18px; color: var(--texto);
  background: var(--blanco); border: 2px solid var(--linea); border-radius: 8px;
  padding: 10px 12px; min-height: 50px; width: 100%;
}
textarea { min-height: 90px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.con-error input, .con-error select, .con-error textarea, input.con-error, select.con-error { border-color: var(--mal); background: var(--mal-fondo); }
.sino { display: flex; gap: 8px; }
.sino button { flex: 1; }

/* ── Botones ── */
button, .boton {
  font: inherit; font-weight: 600; font-size: 17px;
  min-height: 50px; padding: 10px 18px; border-radius: 8px;
  border: 2px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
button:focus-visible, .boton:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }
.principal { background: var(--ambar); color: var(--azul); }
.principal:hover { background: var(--ambar-claro); }
.secundario { background: var(--blanco); color: var(--texto); border-color: var(--linea); }
.secundario:hover { border-color: var(--secundario); }
.oscuro { background: var(--azul); color: var(--titulo-oscuro); }
.peligro { background: var(--blanco); color: var(--mal); border-color: var(--mal); }
.fantasma { background: transparent; color: var(--cuerpo-oscuro); border-color: var(--linea-oscuro); }
.sino button[aria-pressed="true"] { background: var(--azul); color: var(--titulo-oscuro); }
.sino button[aria-pressed="false"] { background: var(--blanco); color: var(--texto); border-color: var(--linea); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.acciones > * { flex: 1 1 200px; }

/* ── Mensajes ── */
/* scroll-margin-top: al llevar la pantalla a un aviso, que no quede tapado por lo fijo de arriba (lo mide comun.js). */
.mensaje { border-radius: 8px; padding: 12px 14px; margin: 0; scroll-margin-top: calc(var(--alto-cabecera, 150px) + 12px); }
.mensaje.mal { background: var(--mal-fondo); color: var(--mal); }
.mensaje.bien { background: var(--bien-fondo); color: var(--bien); }
.mensaje.aviso { background: var(--aviso-fondo); color: var(--aviso); }
.mensaje.info { background: var(--info-fondo); color: var(--texto); }
.mensaje ul { margin: 6px 0 0; padding-left: 20px; }
[hidden] { display: none !important; }
/* Mientras se llena: "Guardado a las 11:40 a. m.", pegado abajo de la pantalla (se ve desde cualquier parte del
   formulario) y, al final, debajo de los botones. */
.estado-guardado {
  position: sticky; bottom: 10px; z-index: 5; justify-self: center; align-self: center; width: fit-content; margin: 0 auto;
  padding: 6px 14px; border-radius: 999px; font-size: 14px; background: var(--blanco); color: var(--secundario);
  border: 1px solid var(--linea); box-shadow: 0 2px 10px rgba(14, 26, 43, 0.25);
}
.estado-guardado.bien { color: var(--bien); }

/* ── Llenar sección por sección: «Sección 2 de 9», su barra y «Atrás / Adelante» debajo de la sección ── */
.avance { display: grid; gap: 8px; scroll-margin-top: calc(var(--alto-cabecera, 150px) + 12px); }
.avance-de { margin: 0; font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--titulo-oscuro); }
.avance-barra { height: 8px; border-radius: 999px; background: var(--linea-oscuro); overflow: hidden; }
.avance-relleno { height: 100%; width: 0; border-radius: inherit; background: var(--ambar); transition: width 0.2s ease; }
.navegar-secciones > * { flex: 1 1 130px; } /* uno al lado del otro, también en el celular */
/* El título de la sección recibe el foco al llegar (para lectores de pantalla), sin recuadro a la vista. */
[tabindex="-1"]:focus { outline: none; }
.lista-secciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-secciones li {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center;
  padding: 10px 12px; border-radius: 8px; background: var(--blanco);
  border: 1px solid var(--linea); border-left: 6px solid var(--bien);
}
.lista-secciones li.falta { border-left-color: var(--aviso); }
.lista-secciones .detalle { font-size: 14px; color: var(--secundario); }
.lista-secciones .lista { color: var(--bien); font-weight: 600; }
.lista-secciones .por-completar { color: var(--aviso); }
.lista-secciones button { min-height: 44px; padding: 8px 14px; font-size: 15px; }
@media (max-width: 460px) {
  .lista-secciones li { grid-template-columns: 1fr; }
}

/* ── Ver el Excel dentro de la app: cada hoja como un papel, achicado para que quepa a lo ancho ── */
.pestanas-excel { display: flex; flex-wrap: wrap; gap: 8px; }
.pestanas-excel button { flex: 0 0 auto; padding: 8px 14px; }
/* Sobre el fondo oscuro, la hoja que se ve va llena (blanca, con raya ámbar) y las demás solo con borde. */
.pestanas-excel button[aria-selected="false"] { background: transparent; color: var(--cuerpo-oscuro); border-color: var(--secundario-oscuro); }
.pestanas-excel button[aria-selected="true"] { background: var(--blanco); color: var(--texto); border-color: var(--blanco); box-shadow: inset 0 -4px 0 var(--ambar); }
.visor-excel { overflow: hidden; border-radius: var(--radio); background: #DCE2E8; }
.visor-excel .papel {
  background: #fff; color: #000; padding: 24px; box-sizing: border-box; transform-origin: top left;
  font-family: Calibri, Carlito, 'Segoe UI', Arial, sans-serif;
}
.visor-excel .cabecera-pagina, .visor-excel .pie-pagina { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; min-height: 14px; font-size: 8pt; color: #8A97A6; }
.visor-excel .cabecera-pagina { margin-bottom: 16px; font-weight: bold; }
.visor-excel .pie-pagina { margin-top: 16px; }
.visor-excel .cabecera-pagina span:nth-child(2), .visor-excel .pie-pagina span:nth-child(2) { text-align: center; }
.visor-excel .cabecera-pagina span:last-child, .visor-excel .pie-pagina span:last-child { text-align: right; }
.visor-excel .hoja-excel { position: relative; }
.visor-excel table { border-collapse: collapse; table-layout: fixed; }
.visor-excel td { padding: 0 3px; overflow: hidden; box-sizing: border-box; line-height: 1.25; }
.visor-excel a.a-hoja { color: #1F5FBF; }
.estado-guardado.mal { color: var(--mal); background: var(--mal-fondo); border-color: var(--mal); }

/* ── Estados ── */
.chip {
  display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 99px; white-space: nowrap;
}
.chip.borrador { background: var(--claro); color: var(--secundario); border: 1px solid var(--linea); }
.chip.enviado { background: var(--aviso-fondo); color: var(--aviso); }
.chip.devuelto { background: var(--mal-fondo); color: var(--mal); }
.chip.aprobado { background: var(--bien-fondo); color: var(--bien); }

/* ── Listas de registros ── */
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista a {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
  background: var(--blanco); color: var(--texto); text-decoration: none;
  border: 1px solid var(--linea); border-radius: 8px; padding: 12px 14px; min-height: 56px;
}
.lista a:hover, .lista a:focus-visible { border-color: var(--azul); }
.lista .detalle { color: var(--secundario); font-size: 14px; }
.lista li.tarjeta { background: var(--blanco); border: 1px solid var(--linea); }
.detalle { color: var(--secundario); font-size: 14px; }
.vacio { color: var(--secundario); font-style: italic; margin: 0; }

/* ── Tablas dentro del formulario ── */
.tabla-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 8px; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: middle; }
th { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--secundario); font-weight: 500; }
td.numero, th.numero { text-align: right; }
.tabla-form td { padding: 6px 4px; min-width: 110px; }
.tabla-form td:last-child { min-width: 0; width: 1%; }
.tabla-form input, .tabla-form select { min-height: 46px; font-size: 17px; }
.quitar { min-height: 46px; padding: 6px 12px; background: var(--blanco); color: var(--mal); border-color: var(--linea); }

/* ── Números grandes ── */
.numeros { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.numero-grande {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 12px 14px; display: grid; gap: 2px;
}
.numero-grande.destacado { background: var(--azul); border-color: var(--azul); }
.numero-grande.destacado .etiqueta { color: var(--secundario-oscuro); }
.numero-grande.destacado .valor { color: var(--titulo-oscuro); }
.numero-grande .valor { font-family: var(--mono); font-size: 32px; line-height: 1.15; color: var(--texto); font-variant-numeric: tabular-nums; }
.numero-grande .pie { font-size: 13px; color: var(--secundario); }
.numero-grande.destacado .pie { color: var(--secundario-oscuro); }

/* ── Firmas ── */
.firmas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.firmas li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; }
.firmas .marca-firma { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 14px; }
.firmas .hecha .marca-firma { background: var(--bien); color: var(--blanco); }
.firmas .turno .marca-firma { background: var(--ambar); color: var(--azul); }
.firmas .espera .marca-firma { background: var(--claro); color: var(--secundario); border: 1px solid var(--linea); }
.firmas .anulada { opacity: 0.7; }
.firmas .anulada .marca-firma { background: var(--mal-fondo); color: var(--mal); }

/* ── Muestra ── */
.sello-ejemplo {
  font-family: var(--titulo); font-size: 20px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--azul); background: var(--ambar); border-radius: 6px; padding: 4px 12px; justify-self: start;
}

/* ── Pareto y barras ── */
.barras { display: grid; gap: 8px; }
/* Marcas finas: cada barra sale de su base (línea gris) y solo la punta del dato va redondeada. */
.barra-fila { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; gap: 10px; align-items: center; padding: 4px; border-radius: 6px; }
.barra-fila:hover, .barra-fila:focus-visible { background: var(--blanco); outline: none; box-shadow: inset 0 0 0 2px var(--linea); }
.barra-fila .nombre { font-size: 15px; }
.barra-fondo { border-left: 2px solid var(--linea); height: 16px; }
.barra-relleno { height: 100%; background: var(--azul); border-radius: 0 4px 4px 0; }
.barra-fila .cifra { font-family: var(--mono); font-size: 14px; min-width: 88px; text-align: right; font-variant-numeric: tabular-nums; }

details { background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: 8px 12px; }
details summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }

.pila { display: grid; gap: 16px; }
.barra .quien b { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* En el celular, cada fila de una tabla del formulario es una tarjetita: no hay que deslizar de lado. */
@media (max-width: 640px) {
  .tabla-form, .tabla-form tbody { display: block; }
  .tabla-form thead { display: none; }
  .tabla-form tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: 10px; margin-bottom: 10px; }
  .tabla-form td { display: grid; gap: 4px; padding: 0; border: 0; min-width: 0; width: auto; }
  .tabla-form td::before { content: attr(data-etiqueta); font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--secundario); }
  .tabla-form td.celda-quitar { grid-column: 1 / -1; width: auto; }
  .tabla-form td.celda-quitar::before { content: none; }
  .tabla-form .quitar { width: 100%; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .barra .quien { font-size: 12px; }
  .barra .quien .empresa { display: none; }
  .barra .quien b { max-width: 40vw; }
  h1 { font-size: 26px; }
  .barra-fila { grid-template-columns: 1fr auto; }
  .barra-fila .barra-fondo { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 460px) {
  .marca .nombre-marca { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── Avisos de arriba: demostración, y copia de un respaldo (en rojo: no es el sistema de verdad) ── */
.aviso-demo, .aviso-copia {
  background: var(--demo-fondo); color: var(--demo-letra); text-align: center;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 12px;
}
.aviso-copia { background: var(--mal); color: var(--blanco); }
.aviso-copia span { display: inline-block; } /* cada pedazo entero: la fecha nunca se parte */

/* ── Entrada ── */
.entrada { max-width: 440px; padding-top: 40px; }
.marca-grande { display: grid; justify-items: center; gap: 6px; text-align: center; }
.marca-grande .nombre-marca { font-size: 52px; }

/* ── Con la marca de la empresa: su logo sobre una placa clara (se ve igual con cualquier color de fondo) ── */
.marca-cliente { background: var(--blanco); border-radius: 8px; padding: 4px 10px; min-height: 44px; }
.marca-cliente img { height: 34px; width: auto; max-width: 180px; object-fit: contain; }
.marca-cliente .nombre-cliente { font-family: var(--titulo); font-weight: 700; font-size: 22px; color: var(--texto); }
.marca-grande .logo-cliente { background: var(--blanco); border-radius: 12px; padding: 14px 20px; width: min(300px, 100%); height: auto; }
@media (max-width: 460px) {
  .marca-cliente img { max-width: 120px; }
}
/* Para los lectores de pantalla, sin ocupar lugar (por ejemplo, el nombre cuando ya lo dice el logo). */
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── El letrero de la entrada: PRÁCTICA (ámbar, como el aviso de demostración) o LA DE VERDAD (verde) ── */
.letrero { display: grid; gap: 2px; justify-items: center; text-align: center; margin: 0; padding: 12px 16px; border-radius: var(--radio); }
.letrero b { font-family: var(--titulo); font-size: 28px; line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; }
.letrero span { font-size: 15px; }
/* (con nombre propio: «.practica» ya es la caja de «Llenar todo», y le ganaba) */
.letrero-practica { background: var(--demo-fondo); color: var(--demo-letra); }
.letrero-verdad { background: var(--bien); color: var(--blanco); }
/* La empresa fija de un DatoPlanta de un solo cliente: se lee, pero no se escribe. */
input.fija { background: var(--claro); font-weight: 600; cursor: default; }

/* ── Conexión con Power BI ── */
code { font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }
.llave-nueva { display: flex; flex-wrap: wrap; gap: 10px; }
.llave-nueva input { flex: 1 1 280px; font-family: var(--mono); font-size: 15px; }
.pasos-pbi { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.direcciones { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.direccion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.direccion code { flex: 1 1 240px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; }
.direccion button { min-height: 44px; }

/* ── Campos con botones grandes (opciones, checklist) y expediente ── */
div.campo { display: grid; gap: 6px; }
div.campo > span { font-weight: 600; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones button { flex: 1 1 140px; }
.opciones button[aria-pressed="true"] { background: var(--azul); color: var(--titulo-oscuro); }
.opciones button[aria-pressed="false"] { background: var(--blanco); color: var(--texto); border-color: var(--linea); }
.descripcion { margin: 6px 0 0; color: var(--secundario-oscuro); font-size: 15px; max-width: 70ch; }
.anterior { display: block; color: var(--secundario); font-size: 14px; border-left: 3px solid var(--ambar); padding-left: 8px; }

/* Checklist: Cumple (verde), No cumple (rojo), N/A (gris). Un punto por renglón. */
.campo-fila { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--linea); }
.campo-fila:first-child { border-top: 0; padding-top: 0; }
.chequeo { display: grid; gap: 8px; }
.chequeo-botones { display: flex; gap: 8px; }
.chequeo-botones button { flex: 1; padding-inline: 8px; background: var(--blanco); color: var(--texto); border-color: var(--linea); }
.chequeo-botones button[data-v="cumple"][aria-pressed="true"] { background: var(--bien); border-color: var(--bien); color: var(--blanco); }
.chequeo-botones button[data-v="no_cumple"][aria-pressed="true"] { background: var(--mal); border-color: var(--mal); color: var(--blanco); }
.chequeo-botones button[data-v="na"][aria-pressed="true"] { background: var(--secundario); border-color: var(--secundario); color: var(--blanco); }
.chequeo-nota { min-height: 60px; }
.chequeo-lectura { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding-top: 10px; border-top: 1px solid var(--linea); }
.chequeo-lectura:first-child { border-top: 0; padding-top: 0; }
.chequeo-lectura .estado { font-weight: 600; }
.chequeo-lectura.cumple .estado { color: var(--bien); }
.chequeo-lectura.no_cumple .estado { color: var(--mal); }
.chequeo-lectura.na .estado, .chequeo-lectura.sin-marcar .estado { color: var(--secundario); }
.chequeo-lectura .detalle { grid-column: 1 / -1; }

/* ── Texto para leer (un consentimiento) y firma con el dedo ── */
.texto-lectura { display: grid; gap: 10px; font-size: 17px; line-height: 1.55; max-width: 70ch; }
.texto-lectura p { margin: 0; }
div.campo small { color: var(--secundario); font-size: 14px; }
.campo-firma { grid-column: 1 / -1; }
.firma { display: grid; gap: 8px; }
.firma-lienzo {
  display: block; width: 100%; height: 200px;
  background: var(--blanco); border: 2px dashed var(--secundario); border-radius: 8px;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair;
}
.firma.firmado .firma-lienzo { border-style: solid; border-color: var(--azul); }
.con-error .firma-lienzo { border-color: var(--mal); }
.firma-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.firma-estado { color: var(--secundario); font-size: 14px; }
.firma.firmado .firma-estado { color: var(--bien); font-weight: 600; }
.firma-lectura { grid-column: 1 / -1; display: grid; gap: 6px; }
.firma-imagen { display: block; width: 100%; max-width: 360px; height: auto; background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; }
@media (max-width: 480px) { .firma-lienzo { height: 180px; } }

/* ── La copia archivada en PDF (en la cabecera oscura de un documento cerrado) ── */
.archivo { margin: 0; color: var(--secundario-oscuro); font-size: 14px; max-width: 75ch; }
.archivo b { color: var(--titulo-oscuro); }
.archivo code { font-family: var(--mono); font-size: 12px; color: var(--cuerpo-oscuro); }

/* ── "Llenar todo (práctica)": solo en una demostración ── */
.practica { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.practica button { border: 2px dashed var(--ambar); }
.practica small { color: var(--secundario-oscuro); font-size: 14px; flex: 1 1 260px; }

/* ── Personas: cada una en su tarjeta, con sus botones a la derecha ── */
.lista li.persona {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: 12px 14px; min-height: 56px;
}
.lista li.persona.sin-acceso { opacity: .6; }
.botones-persona { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (max-width: 520px) {
  .lista li.persona { grid-template-columns: 1fr; }
  .botones-persona { justify-content: flex-start; }
}