/* Lo común a las hojas de los formularios (PII, registro): copian su plantilla Word
   (tablas con borde, rótulos en verde). Los colores salen de los .docx originales y por
   eso no usan los tokens de app.css: la hoja es papel, también en modo oscuro. Lo propio
   de cada uno (anchos de columna, firmas, celular y tamaño de página) va en su CSS. */
:root {
  --hoja-rotulo: #d6e3bc;  /* rótulos y encabezados de columna */
  --hoja-seccion: #c2d69b; /* títulos de sección */
  --hoja-gris: #f2f2f2;    /* «Responsables intervención» */
  --hoja-firma-1: #eaf1dd;
  --hoja-firma-2: #fde9d9;
  --hoja-borde: #000;
  --hoja-texto: #000;
  --hoja-fondo: #fff;
  --hoja-foco: #1f6b5c;
  --hoja-aviso: #fcf2d4;
  --fuente-rotulo: Calibri, Carlito, "Segoe UI", system-ui, sans-serif;
}

.encabezado-pagina h1 { font-size: var(--t-grande); }
.aviso-privacidad {
  display: flex; gap: var(--e-2); align-items: flex-start;
  color: var(--c-acento); font-size: var(--t-chico); max-width: 48rem;
}
.aviso-privacidad .icono { margin-top: .1em; }

/* Barra de acciones: fija arriba al bajar por la hoja. */
.barra-acciones {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
  margin-inline: calc(-1 * var(--e-4)); padding: var(--e-3) var(--e-4);
  background: var(--c-fondo); border-bottom: 1px solid var(--c-borde);
}
.barra-acciones .separador { width: 1px; align-self: stretch; background: var(--c-borde); margin-inline: var(--e-1); }
.barra-acciones .sr:focus-visible + .boton, .barra-acciones label.boton:focus-within { outline: 2px solid var(--c-foco); outline-offset: 2px; }
.avisos li { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding-block: var(--e-1); }
.cerrar-aviso {
  flex: none; width: 1.75rem; height: 1.75rem; cursor: pointer;
  font: inherit; font-size: 1.1rem; line-height: 1; color: inherit;
  background: transparent; border: 1px solid currentColor; border-radius: var(--r-1);
}
.informe {
  margin: 0 0 var(--e-4); padding: var(--e-4);
  background: var(--c-superficie); border: 1px solid var(--c-borde); border-left: 3px solid var(--c-acento); border-radius: var(--r-1);
  font-size: var(--t-chico);
}
.informe-cabeza { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); }
.informe h2 { margin: 0; font-size: var(--t-base); }
.informe h3 { margin: var(--e-3) 0 var(--e-1); font-size: var(--t-chico); }
.informe ul { margin: 0; padding-left: var(--e-5); }
.informe .sobrantes li { white-space: pre-wrap; }
.informe-nota { color: var(--c-texto-suave); margin: var(--e-3) 0 0; }
/* Los PII de la pestaña (H11) y el vínculo del registro con uno de ellos (H12–H13). */
.sesion, .vinculo {
  margin: 0 0 var(--e-4); padding: var(--e-3) var(--e-4);
  background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-1);
  font-size: var(--t-chico);
}
.sesion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.sesion label, .vinculo-fila label { font-weight: 600; }
.sesion select, .vinculo select {
  font: inherit; color: var(--c-texto); background: var(--c-fondo);
  border: 1px solid var(--c-borde); border-radius: var(--r-1); padding: var(--e-1) var(--e-2); max-width: 100%;
}
.sesion select { flex: 1 1 18rem; }
.sesion-enlace { display: inline-flex; align-items: center; gap: var(--e-1); margin-left: auto; }
.sesion-nota { flex-basis: 100%; margin: 0; color: var(--c-texto-suave); }
.vinculo h2 { margin: 0 0 var(--e-2); font-size: var(--t-base); }
.vinculo p { margin: 0 0 var(--e-2); }
.vinculo-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.vinculo-estado { color: var(--c-texto-suave); }
.vinculo-objetivos { margin: 0; padding: var(--e-2) var(--e-3); border: 1px solid var(--c-borde); border-radius: var(--r-1); }
.vinculo-objetivos legend { padding-inline: var(--e-1); font-weight: 600; }
.vinculo-area h3 { margin: var(--e-2) 0 var(--e-1); font-size: var(--t-chico); }
.vinculo-area label { display: flex; gap: var(--e-2); align-items: flex-start; padding-block: 2px; cursor: pointer; }
.vinculo-area label span { white-space: pre-wrap; }
.vinculo-area input { margin-top: .25em; flex: none; }
.vinculo-area input:disabled + span { color: var(--c-texto-suave); }
.vinculo-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin: var(--e-2) 0 0 !important; }
.vinculo-ayuda { color: var(--c-texto-suave); }
.informe-archivo { margin-top: var(--e-4) !important; }
.estado { min-height: 1.5em; margin: var(--e-2) 0; font-size: var(--t-chico); color: var(--c-texto-suave); }
.avisos {
  list-style: none;
  margin: 0 0 var(--e-3); padding: var(--e-2) var(--e-3);
  border: 1px solid var(--c-aviso-borde); border-radius: var(--r-1);
  background: var(--c-aviso-fondo); color: var(--c-aviso-texto); font-size: var(--t-chico);
}

/* --- La hoja --------------------------------------------------------------------- */
.hoja {
  color-scheme: light;
  background: var(--hoja-fondo); color: var(--hoja-texto);
  border: 1px solid var(--c-borde); border-radius: var(--r-1);
  padding: var(--e-6) var(--e-6) var(--e-7);
  font: 0.875rem/1.35 var(--fuente-rotulo);
  box-shadow: 0 1px 3px rgb(0 0 0 / .08);
}
.hoja-titulo {
  text-align: center; font-weight: 700; text-decoration: underline;
  font-size: 1rem; margin-bottom: var(--e-5);
}
.hoja table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-bottom: var(--e-4); }
.hoja th, .hoja td { border: 1px solid var(--hoja-borde); padding: 2px 4px; vertical-align: top; text-align: left; }
.hoja th { font-weight: 700; }
.hoja label { cursor: pointer; }
.rotulo { background: var(--hoja-rotulo); }
.seccion { background: var(--hoja-seccion); text-align: center !important; }
.seccion.izq { text-align: left !important; }

/* Campos dentro de las celdas: sin borde propio, la celda es el campo. */
.hoja input, .hoja textarea {
  display: block; width: 100%; margin: 0; padding: 1px 2px;
  font: inherit; font-weight: 400; color: inherit;
  background: transparent; border: 0; border-radius: 0;
}
.hoja textarea { resize: none; overflow: hidden; min-height: 2.6em; }
.hoja input:focus, .hoja textarea:focus { outline: 2px solid var(--hoja-foco); outline-offset: 1px; background: #f4faf7; }
.hoja .con-aviso { background: var(--hoja-aviso); }
.hoja input[type="date"] { min-height: 1.6em; }
.hoja ::placeholder { color: #8a9096; font-weight: 400; }
.boton-icono { min-height: 2rem; padding: var(--e-1); }

@media screen and (max-width: 56rem) {
  .hoja { padding: var(--e-4) var(--e-3); }
  .barra-acciones .separador { display: none; }
}

/* --- Impresión (el tamaño de página, @page, lo pone cada formulario) --------------- */
@media print {
  .encabezado-pagina, .barra-acciones, .estado, .avisos, .informe, .sesion, .vinculo, .no-imprimir { display: none !important; }
  .ancho-hoja { max-width: none; padding: 0; }
  body { background: #fff; }
  .hoja { border: 0; padding: 0; box-shadow: none; font-size: 10pt; }
  .hoja-titulo { font-size: 10pt; }
  .hoja input:focus, .hoja textarea:focus { outline: 0; background: transparent; }
  .hoja .con-aviso { background: transparent; }
  .hoja input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
  /* Ni «dd-mm-aaaa» ni ejemplos en el papel: una celda vacía sale vacía. */
  .hoja input.vacio { visibility: hidden; }
  .hoja ::placeholder { color: transparent; }
  .hoja textarea { min-height: 0; }
  .solo-impresion { display: inline; }
  .hoja tr { break-inside: avoid; }
  /* Fondos de las celdas en el papel, como en el Word. */
  .hoja * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}