/* Portal del participante (1B.9) — densidad `lectura`, una columna, opera a 360 px.
   Composición según SISTEMA §7 y referencia.html; los valores viven en tokens.css. */

body{background:var(--c-paper-2);color:var(--c-ink);font-family:var(--f-body);
  font-size:var(--fs-base);line-height:var(--lh-lead);margin:0}
.hoja{background:var(--c-paper);max-width:680px;margin:0 auto;min-height:100vh;
  display:flex;flex-direction:column;padding:0 var(--sp-5)}

/* membrete (uso estructural del granate, SISTEMA §4) */
.p-mh{padding-top:var(--sp-5)}
.p-mh__wm{font-family:var(--f-display);font-weight:var(--w-display);font-size:19px;
  line-height:1}
.p-mh__rules{margin-top:var(--sp-3);border-top:2px solid var(--role-membrete);height:3px;
  border-bottom:1px solid var(--role-membrete-2)}

.p-cuerpo{flex:1;padding:var(--sp-5) 0 var(--sp-7)}
.titulo-documento{font-family:var(--f-display);font-weight:var(--w-display);
  font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:var(--track-display);
  margin:0 0 var(--sp-4);text-wrap:balance}
.titulo-seccion{font-family:var(--f-display);font-weight:var(--w-display);
  font-size:var(--fs-title-2);line-height:var(--lh-title-2);margin:0 0 var(--sp-3)}
.p-texto{margin:0 0 var(--sp-3);max-width:var(--measure-lead)}

/* transparencia (§21): qué se hace con las respuestas — regla, no tarjeta */
.transparencia{margin:0 0 var(--sp-5);padding:var(--sp-3) 0 var(--sp-3) var(--sp-3);
  border-left:2px solid var(--c-rule-3);font-size:var(--fs-small);line-height:var(--lh-small);
  color:var(--c-ink-2)}
.transparencia b{display:block;font-size:var(--fs-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--c-ink);margin-bottom:var(--sp-1)}
.transparencia p{margin:0}

.aviso{padding:var(--sp-2) 0;border-top:var(--rule-hair);border-bottom:var(--rule-hair);
  font-size:var(--fs-small);color:var(--c-ink-2)}

/* error: la palabra la pone la plantilla («Error: …»), nunca solo el color */
.p-error{margin:0 0 var(--sp-2);font-size:var(--fs-small);color:var(--role-umbral);
  font-weight:var(--w-bold)}
.p-campo--error{border-left:2px solid var(--role-umbral);padding-left:var(--sp-3)}

.p-seccion{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:var(--rule-medium)}
.p-seccion:first-of-type{margin-top:0;border-top:0;padding-top:0}

.p-campo{border:0;padding:0;margin:0 0 var(--sp-6)}
.pregunta{font-family:var(--f-display);font-weight:var(--w-display);
  font-size:var(--fs-lead);line-height:var(--lh-lead);padding:0;margin-bottom:var(--sp-3);
  max-width:var(--measure-lead)}
.p-opcional{font-family:var(--f-body);font-size:var(--fs-small);color:var(--c-ink-3)}
.p-ayuda{margin:0 0 var(--sp-2);font-size:var(--fs-small);color:var(--c-ink-3);
  line-height:var(--lh-small)}

.p-opcion{display:flex;align-items:baseline;gap:var(--sp-2);padding:7px 0;
  border-bottom:var(--rule-hair);font-size:var(--fs-base);cursor:pointer}
.p-opcion input{accent-color:var(--c-ink)}
.p-opcion input:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.p-escala{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.p-opcion--escala{border-bottom:0;padding:var(--sp-1) 0}
.p-orden{width:52px;font:inherit;padding:4px 6px;border:var(--rule-strong);
  background:transparent;color:var(--c-ink);border-radius:var(--radius)}

textarea,input[type="number"],input[type="date"]{font:inherit;color:var(--c-ink);
  background:transparent;border:var(--rule-strong);border-radius:var(--radius);
  padding:9px 11px;width:100%;max-width:var(--measure-body);box-sizing:border-box}
textarea:focus-visible,input:focus-visible,button:focus-visible{outline:var(--focus-ring);
  outline-offset:var(--focus-offset)}

/* matriz: la tabla ancha se desplaza dentro de su envoltura, la página jamás */
.p-tabla-envoltura{overflow-x:auto}
.p-matriz{border-collapse:collapse;font-size:var(--fs-small);min-width:100%}
.p-matriz th{text-align:left;font-size:var(--fs-label);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--c-ink-2);font-weight:var(--w-bold);
  padding:0 var(--sp-3) var(--sp-2) 0;border-bottom:var(--rule-close)}
.p-matriz td{padding:9px var(--sp-3) 9px 0;border-bottom:var(--rule-hair)}
.p-matriz input{accent-color:var(--c-ink)}
.p-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

/* texto de consentimiento aprobado (RL-013): lectura, con regla, sin tarjeta */
.p-consentimiento{margin:var(--sp-4) 0;padding:var(--sp-3) 0 var(--sp-3) var(--sp-3);
  border-left:2px solid var(--c-rule-3);font-size:var(--fs-small);
  line-height:var(--lh-small);color:var(--c-ink-2);max-width:var(--measure-body)}

.p-acciones{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center;
  margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:var(--rule-close)}
.btn{font:inherit;font-size:var(--fs-button);font-weight:var(--w-bold);
  letter-spacing:var(--track-button);text-transform:uppercase;padding:12px 18px;
  border:var(--rule-strong);background:transparent;color:var(--c-ink);
  border-radius:var(--radius);cursor:pointer;
  transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast)}
.btn:hover{border-color:var(--c-ink)}
.btn--p{background:var(--role-decision);border-color:var(--role-decision);color:var(--c-on-g)}

.p-pie{padding:11px 0 var(--sp-5);border-top:var(--rule-medium);font-size:var(--fs-meta);
  color:var(--c-ink-3)}

/* informe del cliente (tablero): estado vacío y celdas de texto largo */
.vacio{margin:var(--sp-4) 0;padding:var(--sp-3) 0;border-top:var(--rule-hair);
  border-bottom:var(--rule-hair);color:var(--c-ink-2)}
.p-matriz td.texto{max-width:var(--measure-body);line-height:var(--lh-small)}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}