/* HyperForge · formularios de firma (W2). Usa los tokens RDS de base.css; contraste AA en ambos temas. */
.firma > * + *{margin-top:var(--s4)}
.campo-grupo{display:flex;flex-direction:column;gap:var(--s1)}
.campo-grupo + .campo-grupo{margin-top:var(--s3)}
.campo-grupo[hidden]{display:none}
.campo-grupo label,.opciones-abc legend{color:var(--veta);font-size:14px}
.campo{font:inherit;color:var(--marmol);background:var(--rds-input);border:1px solid var(--borde-control);border-radius:var(--r-sup);
  padding:10px 12px;width:100%;min-height:44px}
textarea.campo{resize:vertical;min-height:88px}
.campo:focus-visible{outline:2px solid var(--rds-focus);outline-offset:2px}
.ayuda{color:var(--veta);font-size:13px}
.casilla{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2)}
.casilla input,.opcion input{width:20px;height:20px;accent-color:var(--rds-action);flex:none}
.opciones-abc{border:0;display:flex;flex-direction:column;gap:var(--s2)}
.opcion{display:flex;align-items:flex-start;gap:var(--s2)}
.opcion label{cursor:pointer}
.firma-error{color:var(--danger);font-weight:500}
.firma-error:empty,.firma-estado:empty{display:none}
.firma-estado{color:var(--veta)}
.btn:not([disabled]){cursor:pointer}
button.etiqueta{cursor:pointer}
button.etiqueta:hover{color:var(--marmol);border-color:var(--marmol)}
.personas li > .campo,.personas li > .firma-error{margin:0 0 var(--s3) 64px;width:calc(100% - 64px)}
/* 8-oct · acceso: diálogo de step-up, alta y códigos de respaldo */
.dialogo-acceso{margin:auto;color:var(--marmol);background:var(--tinta);border:1px solid var(--borde-control);border-radius:var(--r-hoja);
  padding:var(--s5);width:min(440px,calc(100% - 32px))}
.dialogo-acceso::backdrop{background:var(--rds-scrim)}
.dialogo-acceso h2{margin:0}
.secreto-totp{display:inline-block;word-break:break-all;user-select:all;letter-spacing:.06em}
.qr-totp{margin:var(--s4) 0;display:inline-flex;flex-direction:column;gap:var(--s2)}
.qr-totp img{display:block;width:232px;height:232px;max-width:100%;background:#fff;padding:var(--s3);border-radius:var(--r-hoja);
  image-rendering:pixelated}
.pasos-alta{margin-top:var(--s4);max-width:640px}
.codigos-respaldo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2) var(--s5);padding-left:var(--s5);
  font-size:16px;user-select:all}
details summary{cursor:pointer;color:var(--veta)}

/* W2b · /firmar/<id> */
.firmar{display:flex;flex-direction:column;gap:var(--s4);max-width:720px}
.firmar-datos{display:grid;grid-template-columns:max-content 1fr;gap:var(--s1) var(--s3);margin:0}
.firmar-datos dt{color:var(--veta);font-size:14px}
.firmar-datos dd{margin:0;overflow-wrap:anywhere}
.firmar-datos .firmar-datos{padding-left:var(--s2)}
.firmar-lista{margin:0;padding-left:var(--s4)}
.firmar-objeto{border:1px solid var(--veta);border-radius:var(--r-sup);padding:var(--s3);max-height:60vh;overflow:auto}
.firmar-objeto h2{margin-top:0}
.firmar-sello{border:2px solid var(--oro);border-radius:var(--r-sup);padding:var(--s4);max-width:560px}
.firmar-sello[data-estado="firmada"]{border-color:var(--luz)}
.firmar-sello h2{margin-top:0}
.firmar-formulario .opcion{display:flex;gap:var(--s2);align-items:baseline}

/* v11 · la hoja central de aprobación (componentes §21): modal de 620 px con esquinas 4/28; kicker en brasa, título a la izquierda y
   «Qué pasó · Si apruebas · Queda» en filas con su línea. Acciones: Aprobar (primaria) · Ahora no. × para cerrar. */
.hf-hoja.hf-hoja-ancha.dialogo-acceso{width:min(620px,calc(100% - 24px));padding:26px 26px 22px;border-radius:var(--hf-r-tarjeta-inv);
  border-color:var(--hf-linea-2);box-shadow:var(--hf-sombra-modal)}
.hf-hoja .hf-kicker{font:600 13px/1.3 var(--hf-f-texto);letter-spacing:0;text-transform:none;color:var(--hf-brasa-texto)}
.hf-hoja-x{position:absolute;right:14px;top:12px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  border:1px dotted var(--hf-linea-2);background:none;color:var(--hf-tenue);font-size:20px;line-height:1;cursor:pointer}
.hf-hoja-x:hover{color:var(--hf-texto);border-color:var(--hf-texto)}
.hf-hoja-x:focus-visible{outline:2px solid var(--hf-foco);outline-offset:2px}
.hf-hoja-explica{display:grid;gap:6px;text-align:left}
.hf-hoja-explica h2{font:700 clamp(22px,2.4vw,30px)/1.08 var(--hf-f-display);margin:2px 0 10px;outline:0}
.hf-hoja-confirma{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0 12px;margin:0 0 8px;padding:0;text-align:left;border:0;background:none}
.hf-hoja-confirma dt,.hf-hoja-confirma dd{padding:10px 0;border-top:1px solid var(--hf-linea)}
.hf-hoja-confirma dt{color:var(--hf-tenue);font-size:var(--hf-t-sm)}
.hf-hoja-confirma dd{margin:0;color:var(--hf-texto);font-size:var(--hf-t-base);overflow-wrap:anywhere}
/* «Tu firma sigue abierta · m:ss» (la cuenta de 5:00): pastilla verdín llena */
.hf-hoja-abierta{display:inline-flex;justify-self:start;margin:0;padding:6px 12px;border-radius:var(--hf-r-pildora);background:var(--hf-verdin);
  color:var(--hf-sobre-verdin);font:600 var(--hf-t-sm)/1.3 var(--hf-f-mono);font-feature-settings:'tnum'}
.hf-hoja-fuera{border:0;padding:0;border-radius:0;color:var(--hf-tenue);font-size:13px}
.hf-hoja-fuera .hf-icono{color:var(--hf-tenue);width:15px;height:15px}
.hf-hoja-ancha .hf-hoja-acciones{justify-content:flex-start;gap:10px;margin-top:4px}
.hf-hoja-ancha .hf-hoja-cuerpo{gap:12px}
.hf-hoja-ancha .hf-teclado{grid-template-columns:repeat(6,minmax(0,1fr))}
.hf-hoja-ancha .hf-teclado button{height:40px}
.hf-hoja-exito .hf-sello-lg{width:110px;height:110px}
.hf-hoja-exito{gap:8px}
.hf-hoja-exito p{margin:0;font:600 15px var(--hf-f-display)}
.hf-hoja-solo-explica .hf-hoja-acciones{margin-top:4px}
@media (max-width:560px){
  .hf-hoja.hf-hoja-ancha.dialogo-acceso{padding:22px 18px 18px;border-radius:var(--hf-r-grande) var(--hf-r-grande) var(--hf-r-chico) var(--hf-r-chico)}
  .hf-hoja-confirma{grid-template-columns:1fr}.hf-hoja-confirma dt{padding-bottom:0;border-top:1px solid var(--hf-linea)}
  .hf-hoja-confirma dd{padding-top:2px;border-top:0}
  .hf-hoja-ancha .hf-teclado{grid-template-columns:repeat(3,minmax(0,1fr))}
}