/* Formulario de incorporación — estilos de los componentes del diseño (diseno/Formulario de incorporacion.dc.html).
   Solo usa tokens de tokens.css. Cada valor viene del prototipo; lo que el prototipo no cubre se deriva de sus piezas.
   Corte móvil: 767px, el mismo que el design system. */

html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;background:var(--bg-canvas);color:var(--text-body);font-family:var(--font-sans)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* ---- Cabecera (escritorio) y franja de marca (móvil) ---- */
.lr-cabecera{display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 40px;background:var(--surface-card);border-bottom:1px solid var(--border-card)}
.lr-cabecera img{height:28px;display:block}
.lr-cabecera span{font:400 13px var(--font-sans);color:var(--text-muted)}
.lr-franja{display:none;align-items:center;justify-content:center;height:60px;background:var(--navy)}
.lr-franja img{height:22px;display:block}

/* ---- Envoltorio y hoja ---- */
.lr-envoltorio{padding:40px 24px 72px}
.lr-hoja{max-width:720px;margin:0 auto;background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:48px 56px 40px}
.lr-hoja--ancha{max-width:720px}

/* ---- Tipografía común ---- */
.lr-titulo{font:600 24px/1.3 var(--font-sans);color:var(--text-title);margin:0}
.lr-titulo:focus{outline:none}
.lr-intro{font:400 14px/1.75 var(--font-sans);color:var(--text-body);margin:24px 0 0;max-width:580px;text-wrap:pretty}
.lr-linea{margin-top:28px;padding-top:20px;border-top:1px solid var(--border-card);font:400 13px/1.5 var(--font-sans);color:var(--text-muted)}
.lr-acciones{margin-top:28px;display:flex}
.lr-final p{font:400 14px/1.75 var(--font-sans);color:var(--text-body);margin:16px 0 0;max-width:520px;text-wrap:pretty}

/* ---- Cabecera del paso ---- */
.lr-paso-cabecera{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.lr-paso-etiqueta{font:600 11px/1.3 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.lr-paso-titulo{font:600 22px/1.3 var(--font-sans);color:var(--text-title);margin:6px 0 0}
.lr-paso-titulo:focus{outline:none}
.lr-guardado{font:500 12px/1.3 var(--font-sans);color:var(--ok);white-space:nowrap;padding-top:2px}
.lr-guardado.es-guardando{color:var(--text-muted)}
.lr-progreso{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin-top:20px}
.lr-progreso span{height:3px;border-radius:2px;background:var(--grey-200)}
.lr-progreso span.hecha{background:var(--navy)}
.lr-progreso-nombres{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin-top:8px}
.lr-progreso-nombres span{font:400 11px/1.4 var(--font-sans);color:var(--grey-400);padding-right:6px;text-wrap:pretty}
.lr-progreso-nombres span.hecha{color:var(--text-muted)}
.lr-progreso-nombres span.actual{color:var(--navy);font-weight:600}
.lr-nota{margin-top:24px;font:400 13px/1.5 var(--font-sans);color:var(--text-muted)}

/* ---- Pregunta ---- */
.lr-pregunta{padding:28px 0;border-top:1px solid var(--border-card)}
.lr-nota + .lr-pregunta{margin-top:16px}
.lr-pregunta-cabecera{display:flex;gap:10px;align-items:baseline}
.lr-numero{font:500 12px/1.5 var(--font-sans);color:var(--text-muted);font-feature-settings:var(--num-tabular);flex:none;min-width:26px}
.lr-enunciado{font:600 14px/1.5 var(--font-sans);color:var(--text-title);text-wrap:pretty}
.lr-asterisco{color:var(--text-muted);font-weight:400}
.lr-ayuda{font:400 13px/1.55 var(--font-sans);color:var(--text-muted);margin:6px 0 0;text-wrap:pretty}
.lr-error{font:500 12px/1.4 var(--font-sans);color:var(--danger);margin-top:6px}
.lr-control{margin-top:12px}

/* ---- Campos ---- */
.lr-campo{font:400 15px/1.4 var(--font-sans);color:var(--text-title);background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--radius-sm);padding:9px 12px;width:100%;outline:none;min-height:40px;display:block;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.lr-campo:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--focus-ring)}
.lr-campo::placeholder{color:var(--grey-400)}
.lr-campo[aria-invalid="true"]{border-color:var(--danger)}
.lr-campo[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--focus-ring)}
textarea.lr-campo{min-height:112px;resize:vertical}
.lr-campo--numero{max-width:160px;font-feature-settings:var(--num-tabular)}
.lr-campo--telefono{font-feature-settings:var(--num-tabular)}
.lr-campo--corto{max-width:360px}
.lr-importe{position:relative;max-width:204px}
.lr-importe .lr-campo{padding-right:34px;font-feature-settings:var(--num-tabular)}
.lr-importe span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:400 14px var(--font-sans);color:var(--text-muted);pointer-events:none}

/* ---- Subcampos (varios campos en una pregunta y bloque repetible) ---- */
.lr-subcampos{display:grid;gap:12px}
.lr-subcampos--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lr-subcampos--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Cinco subcampos: tres en la primera fila y dos, más anchos, en la segunda */
.lr-subcampos--5{grid-template-columns:repeat(6,minmax(0,1fr))}
.lr-subcampos--5>*{grid-column:span 2}
.lr-subcampos--5>:nth-child(n+4){grid-column:span 3}
.lr-subetiqueta{display:block;font:600 11px/1.3 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}

/* ---- Opción única (lista) y Sí/No (dos columnas) ---- */
.lr-opciones{display:grid;gap:1px;background:var(--border-card);border:1px solid var(--border-card);border-radius:var(--radius-sm);overflow:hidden}
.lr-opciones.con-error{border-color:var(--danger)}
.lr-opciones--columnas{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px}
.lr-opcion{display:flex;gap:12px;align-items:flex-start;padding:11px 14px;min-height:40px;cursor:pointer;background:var(--surface-card);transition:background var(--dur) var(--ease);margin:0}
.lr-opciones--columnas .lr-opcion{align-items:center}
.lr-opcion:hover{background:var(--bg-canvas)}
.lr-opcion:has(input:checked){background:var(--bg-canvas)}
.lr-opcion:has(input:focus-visible){box-shadow:inset 0 0 0 2px var(--focus-ring)}
.lr-opcion-punto{flex:none;width:18px;height:18px;border-radius:50%;margin-top:2px;border:1.5px solid var(--grey-400);background:var(--surface-card);transition:background var(--dur) var(--ease)}
.lr-opciones--columnas .lr-opcion-punto{margin-top:0}
.lr-opcion:has(input:checked) .lr-opcion-punto{border-color:var(--navy);background:var(--navy);box-shadow:inset 0 0 0 4px var(--surface-card)}
.lr-opcion-texto{font:400 14px/1.5 var(--font-sans);color:var(--text-body)}
.lr-opcion:has(input:checked) .lr-opcion-texto{font-weight:500;color:var(--navy)}

/* ---- Selector del 0 al 10 ---- */
.lr-escala{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:1px;background:var(--border-card);border:1px solid var(--border-card);border-radius:var(--radius-sm);overflow:hidden}
.lr-escala.con-error{border-color:var(--danger)}
.lr-escala label{display:flex;align-items:center;justify-content:center;font:500 14px var(--font-sans);font-feature-settings:var(--num-tabular);min-height:40px;cursor:pointer;background:var(--surface-card);color:var(--text-body);transition:background var(--dur) var(--ease);margin:0}
.lr-escala label:hover{box-shadow:inset 0 0 0 1px var(--navy)}
.lr-escala label:has(input:focus-visible){box-shadow:inset 0 0 0 2px var(--focus-ring)}
.lr-escala label:has(input:checked){background:var(--navy);color:var(--surface-card)}
.lr-escala-extremos{display:flex;justify-content:space-between;gap:16px;margin-top:8px;font:400 12px/1.4 var(--font-sans);color:var(--text-muted)}

/* ---- Bloque repetible ---- */
.lr-repetible{margin-top:14px;border:1px solid var(--border-card);border-radius:var(--radius-sm)}
.lr-repetible-elemento{padding:16px 16px 18px}
.lr-repetible-elemento + .lr-repetible-elemento{border-top:1px solid var(--border-card)}
.lr-repetible-cabecera{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px}
.lr-repetible-cabecera .lr-subetiqueta{margin:0;white-space:nowrap;flex:none}
.lr-repetible-elemento .lr-subcampos{margin-top:10px}
.lr-repetible-anadir{margin-top:12px;display:flex}

/* ---- Aviso no bloqueante (ámbar) ---- */
.lr-aviso{display:flex;gap:8px;align-items:flex-start;font:500 12px/1.5 var(--font-sans);color:var(--warn);background:var(--warn-bg);border-radius:var(--radius-sm);padding:8px 12px;margin-top:8px}
.lr-aviso svg{flex:none;margin-top:1px}

/* ---- Pregunta anidada (condicional o subordinada) ---- */
.lr-anidada{margin-top:16px;padding-left:16px;border-left:1px solid var(--border-card)}
.lr-anidada .lr-control{margin-top:10px}
.lr-anidada input.lr-campo{max-width:420px}

/* ---- Casilla de protección de datos ---- */
.lr-casilla{display:flex;gap:12px;align-items:flex-start;cursor:pointer;margin:0}
.lr-casilla-caja{flex:none;width:18px;height:18px;margin-top:2px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--grey-400);background:var(--surface-card);transition:background var(--dur) var(--ease)}
.lr-casilla:has(input:checked) .lr-casilla-caja{border-color:var(--navy);background:var(--navy)}
.lr-casilla:has(input:focus-visible) .lr-casilla-caja{box-shadow:0 0 0 3px var(--focus-ring)}
.lr-casilla.con-error .lr-casilla-caja{border-color:var(--danger)}
.lr-casilla-caja svg{display:none}
.lr-casilla:has(input:checked) .lr-casilla-caja svg{display:block}
.lr-casilla-texto{font:400 13px/1.55 var(--font-sans);color:var(--text-body)}
.lr-casilla-info{font:400 13px/1.55 var(--font-sans);color:var(--text-muted);margin:10px 0 0 30px;text-wrap:pretty}
.lr-casilla-info a,.lr-casilla-texto a{color:var(--navy);text-decoration:underline}
.lr-casilla-info a:hover,.lr-casilla-texto a:hover{color:var(--navy-light)}

/* ---- Botones (Button del sistema) ---- */
.lr-boton{font:600 13px var(--font-sans);padding:9px 18px;border-radius:var(--radius-sm);background:var(--navy);color:#fff;border:1px solid var(--navy);cursor:pointer;white-space:nowrap;transition:background var(--dur) var(--ease)}
.lr-boton:hover{background:var(--navy-dark)}
.lr-boton:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
.lr-boton--secundario{background:var(--surface-card);color:var(--navy);border-color:var(--border-card)}
.lr-boton--secundario:hover{background:var(--bg-canvas)}
.lr-boton--ghost{background:transparent;color:var(--text-body);border-color:transparent}
.lr-boton--ghost:hover{background:var(--bg-canvas)}
.lr-boton--pequeno{font-size:12px;padding:6px 14px}
.lr-boton:disabled{opacity:.5;cursor:default}
.lr-boton:disabled:hover{background:var(--navy)}
.lr-boton--secundario:disabled:hover{background:var(--surface-card)}
.lr-boton--ghost:disabled:hover{background:transparent}

/* ---- Pie del paso ---- */
.lr-pie{padding-top:24px;border-top:1px solid var(--border-card);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.lr-pie-derecha{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.lr-faltan{font:500 12px/1.4 var(--font-sans);color:var(--danger)}

/* ---- Error de envío ---- */
.lr-error-envio{padding-top:24px;border-top:1px solid var(--border-card)}
.lr-error-envio-caja{display:flex;gap:12px;align-items:flex-start;background:var(--danger-bg);border-radius:var(--radius-sm);padding:14px 16px}
.lr-error-envio-caja svg{flex:none;margin-top:1px}
.lr-error-envio-titulo{font:600 13px/1.4 var(--font-sans);color:var(--danger)}
.lr-error-envio-texto{font:400 12px/1.55 var(--font-sans);color:var(--text-body);margin-top:3px}
.lr-error-envio-acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* ---- Utilidades ---- */
.lr-visualmente-oculto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lr-oculto{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---- Móvil: la hoja es la página; franja navy en vez de cabecera ---- */
@media (max-width:767px){
  body{background:var(--surface-card)}
  .lr-cabecera{display:none}
  .lr-franja{display:flex}
  .lr-envoltorio{padding:0}
  .lr-hoja{border:0;border-radius:0;box-shadow:none;padding:24px 20px 40px}
  .lr-progreso-nombres{display:none}
  .lr-campo{min-height:var(--tap-min)}
  .lr-opcion,.lr-escala label{min-height:var(--tap-min)}
  .lr-subcampos--2,.lr-subcampos--3,.lr-subcampos--5{grid-template-columns:1fr}
  .lr-subcampos--5>*,.lr-subcampos--5>:nth-child(n+4){grid-column:auto}
}