/* apps/portal/public/portal.css — el portal con el diseño de Claudia, fase 1 (CC051126-07)
   Sale de la entrega «Portal de prospección · entrega 1», versión 2 «noche y papel»
   (.handoff/Portal/lienzo/portal.css). Sólo tokens de caudal-tokens.css: no hay colores nuevos.

   Qué cambió respecto de la hoja de Claudia:
   · Sólo las piezas de las pantallas que ya funcionan (acceso, calibración, su manera de escoger,
     su perfil y la navegación). Las de Hoy, Empresas, Mensajes, Respuestas, Registro, Fichas,
     Activación y el acompañamiento esperan a sus pantallas.
   · El teléfono no es una clase .ph de 390 px fijos: es una consulta de medios (≤ 759 px).
   · Los paneles de cifras llevan la clase .dk en vez de depender de :has().
   · El foco de los campos es el contorno de 3 px del sistema, no sólo una sombra.
   · Sin estilos en línea (la CSP del portal no los deja): lo que el lienzo ponía en style=""
     vive aquí en una clase.
   · Las clases que fijan las pruebas del portal (.btn, .btn-gold, .btn-ghost, .campo, .regla,
     .ayuda, .acciones, .enlaces, .datos, .grupo, .opciones, .opcion) se visten igual que las del
     lienzo (.bt, .bt-gold, .bt-line, .fd, .fd-h, .rw, .tg).

   Contraste AA calculado con los tokens (MEDIDAS.md):
   on-dark-0 / ink-0 16,4 · on-dark-1 / ink-0 10,7 · on-dark-2 / ink-0 5,4
   on-dark-1 / jade-0 8,4 · gold-3 / jade-0 8,3 · jade-5 / jade-0 6,7
   jade-4 / ink-0 5,9 · gold-2 / ink-0 7,8 · ink-3 / paper-1 5,0 */

[hidden] { display: none !important; }

/* Foco visible en todo lo que se puede enfocar (3 px, separado 2 px). */
:focus-visible { outline: 3px solid var(--jade-2); outline-offset: 2px; }

/* ---------- Roles de color: papel (por defecto) ---------- */
.pt, .acc .card {
  --c-bg: var(--paper-1);
  --c-sf: var(--paper-0);
  --c-sf2: var(--paper-2);
  --c-ln: var(--paper-3);
  --c-ln2: var(--paper-4);
  --c-t0: var(--ink-0);
  --c-t1: var(--ink-1);
  --c-t2: var(--ink-2);
  --c-t3: var(--ink-3);
  --c-ac: var(--jade-2);
  --c-ac-h: var(--jade-1);
  --c-em: var(--jade-2);
  --c-gd: var(--gold-0);
  --c-ok: var(--jade-1);
  --c-ctl: var(--ink-0);
  --c-in: var(--ink-3);
  --c-dot: var(--jade-2);
  --c-hero: var(--ink-0);
  --c-track: var(--paper-3);
}

/* ---------- Roles de color: tinta ---------- */
.pt.acc, .pt .sd, .pt .tb, .pt .card.dk {
  --c-bg: var(--ink-0);
  --c-sf: var(--bg-dark-2);
  --c-sf2: var(--ink-1);
  --c-ln: var(--border-dark);
  --c-ln2: var(--on-dark-3);
  --c-t0: var(--on-dark-0);
  --c-t1: var(--on-dark-1);
  --c-t2: var(--on-dark-1);
  --c-t3: var(--on-dark-2);
  --c-ac: var(--jade-4);
  --c-ac-h: var(--jade-5);
  --c-em: var(--gold-3);
  --c-gd: var(--gold-3);
  --c-ok: var(--jade-4);
  --c-ctl: var(--on-dark-1);
  --c-in: var(--on-dark-2);
  --c-dot: var(--jade-3);
  --c-hero: var(--gold-3);
  --c-track: var(--ink-1);
  color: var(--c-t0);
}

/* ---------- Roles de color: jade ---------- */
.page > .head {
  --c-bg: var(--jade-0);
  --c-sf: var(--jade-1);
  --c-sf2: var(--jade-1);
  --c-ln: var(--border-dark);
  --c-ln2: var(--on-dark-3);
  --c-t0: var(--on-dark-0);
  --c-t1: var(--on-dark-0);
  --c-t2: var(--on-dark-1);
  --c-t3: var(--on-dark-1);
  --c-ac: var(--jade-5);
  --c-ac-h: var(--on-dark-0);
  --c-em: var(--gold-3);
  --c-gd: var(--gold-3);
  --c-ok: var(--jade-5);
  --c-ctl: var(--on-dark-1);
  --c-in: var(--on-dark-1);
  --c-dot: var(--jade-4);
  --c-hero: var(--gold-3);
  --c-track: var(--jade-1);
  color: var(--c-t0);
}

/* ---------- Base ---------- */
.pt, .pt *, .pt *::before, .pt *::after { box-sizing: border-box; }
.pt { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--c-t0); background-color: var(--c-bg); -webkit-font-smoothing: antialiased; margin: 0; }
.pt.app { background-image: var(--chrome-grid-bg); background-size: 32px 32px; }
.pt h1, .pt h2, .pt h3, .pt h4, .pt p, .pt ul, .pt ol, .pt dl, .pt dd, .pt fieldset { margin: 0; padding: 0; }
/* caudal-tokens.css pinta p y los títulos en tinta: aquí heredan el color de su superficie. */
.pt :is(h1, h2, h3, h4, p) { color: inherit; font-size: inherit; line-height: inherit; }
.pt ul, .pt ol { list-style: none; }
.pt a { color: inherit; }
.pt button, .pt input, .pt textarea, .pt select { font-family: inherit; }
.pt :focus-visible { outline: 3px solid var(--c-ac); outline-offset: 2px; transition: outline-offset var(--dur-fast) var(--ease-out); }
/* Un título que el código enfoca al cambiar de empresa (tabindex="-1") no se alcanza con el teclado: no lleva el contorno de 3 px. */
.pt [tabindex="-1"]:focus-visible { outline-color: transparent; }
.pt ::selection { background: var(--gold-3); color: var(--ink-0); }

/* Paso suave entre pantallas (navegación entre documentos) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: cd-vt-out 220ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: cd-vt-in 520ms var(--ease-out) both; }
.pt .sd { view-transition-name: cd-nav; }

/* ---------- Movimiento ---------- */
@keyframes cd-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cd-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cd-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.78); } }
@keyframes cd-sweep { from { transform: translateX(-100%); } to { transform: translateX(350%); } }
@keyframes cd-sheen { from { background-position: 120% 0; } to { background-position: 0% 0; } }
@keyframes cd-vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes cd-vt-in { from { opacity: 0; transform: translateY(10px); } }

/* Entrada escalonada: encabezado, tarjetas y filas */
.page > .head { animation: cd-rise 640ms var(--ease-out) backwards; }
.pt .card { animation: cd-rise 640ms var(--ease-out) var(--d, 120ms) backwards; }
.pt .card:nth-child(2) { --d: 190ms; }
.pt .card:nth-child(3) { --d: 260ms; }
.pt .card:nth-child(4) { --d: 330ms; }
.pt .card:nth-child(5) { --d: 400ms; }
.pt .card:nth-child(n+6) { --d: 460ms; }
.pt :is(.lst > li, .ct, .rg) { animation: cd-rise 520ms var(--ease-out) var(--r, 200ms) backwards; }
.pt :is(.lst > li, .ct, .rg):nth-child(2) { --r: 250ms; }
.pt :is(.lst > li, .ct, .rg):nth-child(3) { --r: 300ms; }
.pt :is(.lst > li, .ct, .rg):nth-child(4) { --r: 350ms; }
.pt :is(.lst > li, .ct, .rg):nth-child(5) { --r: 400ms; }
.pt :is(.lst > li, .ct, .rg):nth-child(n+6) { --r: 440ms; }

/* ---------- Tipografía ---------- */
.pt .t-title { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.15; letter-spacing: -0.022em; color: var(--c-t0); text-wrap: balance; }
.pt .t-sec { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.25; letter-spacing: -0.014em; color: var(--c-t0); text-wrap: balance; }
.pt .t-sec::after { content: ''; display: block; width: 28px; height: 2px; margin-top: 10px; background: linear-gradient(90deg, var(--gold-2), var(--jade-3)); transform-origin: left; animation: cd-grow 800ms var(--ease-out) 300ms backwards; }
.pt .t-card { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; color: var(--c-t0); }
.pt :is(.t-title, .t-sec, .t-card) em { font-style: italic; color: var(--c-em); font-weight: inherit; }
.pt .t-intro { font-size: 18px; line-height: 1.6; color: var(--c-t2); max-width: 62ch; text-wrap: pretty; }
.pt .t-body { font-size: 16px; line-height: 1.6; color: var(--c-t1); text-wrap: pretty; }
.pt .t-small { font-size: 14px; line-height: 1.5; color: var(--c-t2); }
.pt .t-micro { font-size: 13px; line-height: 1.5; color: var(--c-t3); }
.pt .lbl { font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-t3); }
.pt .mono { font-family: var(--font-mono); font-feature-settings: 'tnum' on, 'zero' on; }

/* ---------- Logotipo (forma del sistema; sólo cambia el color del punto) ---------- */
.pt .wordmark { color: var(--c-t0); }
.pt .wordmark .dot { background: var(--c-dot); }

/* ---------- Estructura ----------
   --gap es la separación de cada columna: un aviso vacío la devuelve (ver «Aviso de estado»). */
.app { display: flex; min-height: 100vh; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background-image: radial-gradient(70% 40% at 100% 0%, var(--jade-wash), transparent 70%); }
.page { --gap: 32px; width: 100%; max-width: 1040px; margin: 0 auto; padding: 40px 40px 80px; display: flex; flex-direction: column; gap: var(--gap); }
.head { display: flex; flex-direction: column; gap: 8px; }
.rw, .pt .acciones, .pt .enlaces { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cl { --gap: 16px; display: flex; flex-direction: column; gap: var(--gap); }
.cl8 { display: flex; flex-direction: column; gap: 8px; }
.cl4 { display: flex; flex-direction: column; gap: 4px; }
.g2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 24px; align-items: start; }
.wr { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.hr { height: 1px; background: linear-gradient(90deg, var(--c-ln), var(--c-ln2) 50%, var(--c-ln)); border: 0; margin: 0; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 12px 16px; background: var(--ink-0); color: var(--on-dark-0); font-size: 14px; }
.skip:focus { left: 8px; }
.solo-tel { display: none !important; }

/* ---------- Encabezado de pantalla: banda jade ---------- */
.page > .head {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 36px 40px 40px; border-radius: var(--r-lg);
  background-color: var(--jade-0);
  background-image:
    radial-gradient(80% 140% at 100% 0%, var(--jade-1) 0%, transparent 62%),
    radial-gradient(60% 120% at 0% 100%, var(--ink-0) 0%, transparent 70%),
    var(--chrome-grid-dark);
  background-size: auto, auto, 32px 32px, 32px 32px;
  border: 1px solid var(--jade-1);
  box-shadow: var(--shadow-lg);
}
.page > .head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-2) 30%, var(--jade-4) 70%, transparent);
  transform-origin: left; animation: cd-grow 1200ms var(--ease-out) 250ms backwards;
}
.page > .head::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; z-index: -1;
  background: linear-gradient(100deg, transparent, var(--border-dark), transparent);
  transform: translateX(-100%); animation: cd-sweep 2200ms var(--ease-out) 450ms 1 backwards;
}
.page > .head .lbl { display: inline-flex; align-items: center; gap: 10px; color: var(--on-dark-1); }
.page > .head .lbl::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--jade-4); box-shadow: 0 0 10px var(--jade-4); animation: cd-pulse 2.4s var(--ease-in-out) infinite; flex: none; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .page > .head .t-title em {
    background-image: linear-gradient(100deg, var(--gold-2) 0%, var(--gold-2) 35%, var(--gold-4) 50%, var(--gold-3) 65%, var(--gold-3) 100%);
    background-size: 260% 100%; background-position: 0% 0;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: cd-sheen 2600ms var(--ease-out) 500ms backwards;
  }
}

/* ---------- Tarjeta ---------- */
.pt .card { --gap: 16px; position: relative; background: var(--c-sf); border: 1px solid var(--c-ln); border-radius: var(--r-md); padding: 24px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--gap); transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.pt .card:hover { border-color: var(--jade-edge); box-shadow: var(--shadow-md); }
.card-l { padding-top: 8px; padding-bottom: 8px; }

/* Panel de cifras: estimado y coincidencia, en tinta */
.pt .card.dk {
  background-color: var(--ink-0);
  background-image: radial-gradient(110% 90% at 100% 0%, color-mix(in srgb, var(--jade-0) 65%, transparent), transparent 62%), var(--chrome-grid-dark);
  background-size: auto, 32px 32px, 32px 32px;
  border-color: var(--ink-1);
  box-shadow: var(--shadow-lg);
}
.pt .card.dk:hover { border-color: var(--jade-2); box-shadow: 0 24px 60px -30px var(--jade-3), var(--shadow-lg); }

/* ---------- Botones ---------- */
.pt :is(.bt, .btn) { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 22px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid transparent; border-radius: var(--r-sharp); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-base) var(--ease-brief), border-color var(--dur-base) var(--ease-brief), color var(--dur-base) var(--ease-brief), box-shadow var(--dur-base) var(--ease-brief), transform var(--dur-fast) var(--ease-brief), background-position 900ms var(--ease-out); }
.pt :is(.bt, .btn):active { transform: translateY(1px); }
.pt :is(.bt-gold, .btn-gold) { background-color: var(--gold-2); color: var(--ink-0); border-color: var(--gold-2); background-image: linear-gradient(110deg, transparent 38%, var(--gold-4) 50%, transparent 62%); background-size: 260% 100%; background-position: 130% 0; background-repeat: no-repeat; }
.pt :is(.bt-gold, .btn-gold):hover { background-color: var(--gold-3); border-color: var(--gold-3); box-shadow: var(--gold-glow); background-position: -30% 0; }
.pt :is(.bt-line, .btn-ghost) { background: transparent; color: var(--c-t0); border-color: var(--c-ctl); }
.pt :is(.bt-line, .btn-ghost):hover { background: var(--c-t0); color: var(--c-sf); border-color: var(--c-t0); }
/* Lo elegido (aria-pressed) se ve invertido, como «bt-on» del lienzo. */
.pt :is(.bt-line, .btn-ghost)[aria-pressed="true"] { background: var(--c-t0); color: var(--c-sf); border-color: var(--c-t0); }
.pt .bt-quiet { background: transparent; color: var(--c-ac); padding: 0 10px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pt .bt-quiet:hover { color: var(--c-ac-h); text-underline-offset: 6px; }
.pt .bt-blk { width: 100%; }
.pt :is(.bt, .btn):disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.pt :is(.bt-gold, .btn-gold):disabled:hover { background-color: var(--gold-2); border-color: var(--gold-2); background-position: 130% 0; }
.pt :is(.bt-line, .btn-ghost):disabled:hover { background: transparent; color: var(--c-t0); border-color: var(--c-ctl); }
.pt :is(.bt-line, .btn-ghost)[aria-pressed="true"]:disabled:hover { background: var(--c-t0); color: var(--c-sf); }
.pt .bt-quiet:disabled:hover { color: var(--c-ac); text-underline-offset: 4px; }
.dos { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Enlaces ---------- */
.pt :is(.lk, .enlaces a, .ct-f a, .t-small a) { color: var(--c-ac); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-out), text-underline-offset var(--dur-fast) var(--ease-out); }
.pt :is(.lk, .enlaces a, .ct-f a, .t-small a):hover { color: var(--c-ac-h); text-underline-offset: 5px; }
/* Un enlace de texto suelto se toca con el dedo: 44 px de alto. */
.pt .enlaces a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Iconos (trazo, 24 x 24) ---------- */
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Chip de estado (forma + texto, no sólo color) ---------- */
.cs { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; min-height: 28px; padding: 2px 12px; border: 1px solid color-mix(in srgb, currentColor 42%, transparent); background: color-mix(in srgb, currentColor 9%, transparent); border-radius: var(--r-pill); font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.cs .gl { width: 8px; height: 8px; flex: none; }
.s-pend { color: var(--c-t3); background: transparent; }
.s-pend .gl { border: 1.5px solid currentColor; border-radius: 50%; }

/* ---------- Aviso de estado ----------
   Los avisos del portal son un párrafo que portal.js llena con textContent (el texto del servidor).
   Vacíos siguen en la página, para que el lector de pantalla los anuncie, pero no ocupan lugar:
   devuelven la separación de su columna (--gap). La forma del aviso (círculo, triángulo) va en
   ::before, porque el párrafo no lleva ícono adentro. */
.pt .av { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px 16px 20px; border: 1px solid var(--c-ln2); border-radius: var(--r-md); background: var(--c-sf); box-shadow: inset 4px 0 0 var(--c-ln2); font-size: 15px; line-height: 1.5; color: var(--c-t0); }
.pt .av::before { content: ''; flex: none; width: 12px; height: 12px; margin-top: 5px; background: currentColor; }
.pt .av:empty { display: block; min-height: 0; margin: calc(-1 * var(--gap, 0px)) 0 0; padding: 0; border: 0; box-shadow: none; background: none; }
.pt .av:empty::before { content: none; }
.av-t { font-weight: 600; color: var(--c-t0); font-size: 15px; line-height: 1.4; }
.av-x { font-size: 14px; line-height: 1.5; color: var(--c-t2); }
.av-b { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.pt .av-info { background: linear-gradient(90deg, var(--jade-wash), transparent 85%), var(--c-sf); border-color: var(--jade-edge); box-shadow: inset 4px 0 0 var(--c-ac); }
.pt .av-info::before { color: var(--c-ac); border-radius: 50%; }
.pt .av-err { background: var(--c-sf); border: 2px solid var(--c-t1); box-shadow: inset 6px 0 0 var(--c-t0); font-weight: 500; }
.pt .av-err::before { color: var(--c-t0); width: 14px; height: 13px; margin-top: 4px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pt .av-ok { background: linear-gradient(90deg, var(--jade-wash), transparent 85%), var(--c-sf); border-color: var(--jade-3); box-shadow: inset 4px 0 0 var(--c-ok); }
.pt .av-ok::before { color: var(--c-ok); width: 10px; height: 6px; margin-top: 7px; background: none; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.pt .av-vac { background: var(--c-sf2); border: 1px dashed var(--c-ln2); box-shadow: none; }
.pt .av-vac::before { color: var(--c-t3); border-radius: 50%; background: transparent; border: 2px solid currentColor; }

/* ---------- Campos ---------- */
.pt :is(.fd, .campo) { display: flex; flex-direction: column; gap: 6px; }
.pt label { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--c-t1); }
.pt :is(.fd-h, .regla, .ayuda) { font-size: 13px; line-height: 1.45; color: var(--c-t3); }
.pt :is(input:not([type="checkbox"]), select, textarea) { width: 100%; min-height: 44px; padding: 10px 12px; font-size: 16px; line-height: 1.5; color: var(--c-t0); background: var(--c-sf); border: 1px solid var(--c-in); border-radius: var(--r-sm); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.pt :is(input:not([type="checkbox"]), select, textarea):hover { border-color: var(--c-t1); }
.pt :is(input:not([type="checkbox"]), select, textarea):focus-visible { border-color: var(--jade-2); box-shadow: 0 0 0 4px var(--jade-edge); outline: 3px solid var(--jade-2); outline-offset: 2px; }
.pt textarea { min-height: 96px; resize: vertical; }
.pt :is(input, textarea)::placeholder { color: var(--c-t3); }
.pt :is(input, select, textarea)[aria-invalid="true"] { border: 2px solid var(--c-t0); }

/* ---------- Etiquetas elegibles: las casillas de sectores y departamentos ----------
   Siguen siendo casillas de verdad (el teclado, el lector de pantalla y el formulario no cambian):
   la casilla queda encima de su etiqueta, transparente, y la etiqueta se ve como la del lienzo. */
.pt .opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.pt .opcion { position: relative; display: inline-flex; max-width: 100%; }
.pt .opcion input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pt .opcion label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--c-t0); background: var(--c-sf); border: 1px solid var(--c-in); border-radius: var(--r-pill); cursor: pointer; transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.pt .opcion input:hover + label { border-color: var(--jade-2); background: var(--jade-wash); }
.pt .opcion input:active + label { transform: scale(0.97); }
.pt .opcion input:checked + label { background: linear-gradient(135deg, var(--jade-2), var(--jade-1)); color: var(--paper-0); border-color: var(--jade-2); box-shadow: 0 6px 18px -8px var(--jade-2); }
.pt .opcion input:focus-visible + label { outline: 3px solid var(--jade-2); outline-offset: 2px; }
.pt .opcion input:disabled { cursor: not-allowed; }
.pt .opcion input:disabled + label { color: var(--c-t3); background: var(--c-sf2); border-style: dashed; cursor: not-allowed; }
/* La marca de «elegida» no es sólo el color: un visto antes del texto. */
.pt .opcion input:checked + label::before { content: ''; width: 10px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(-45deg); flex: none; }

/* Los grupos del perfil son tarjetas; el título del grupo es la leyenda. */
.pt .grupo { min-width: 0; border: 1px solid var(--c-ln); border-radius: var(--r-md); background: var(--c-sf); padding: 24px; box-shadow: var(--shadow-sm); }
.pt .grupo legend { float: left; width: 100%; padding: 0; margin: 0 0 4px; font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; color: var(--c-t0); }
.pt .grupo legend + * { clear: both; }
.pt .grupo .ayuda { margin-bottom: 12px; }

/* ---------- Navegación lateral (escritorio), en tinta ---------- */
.pt .sd { width: 232px; flex: none; height: 100vh; position: sticky; top: 0; background-color: var(--ink-0); background-image: radial-gradient(160% 45% at 0% 100%, color-mix(in srgb, var(--jade-0) 55%, transparent), transparent 70%), var(--chrome-grid-dark); background-size: auto, 32px 32px, 32px 32px; border-right: 1px solid var(--border-dark); padding: 24px 16px; display: flex; flex-direction: column; gap: 24px; overflow: auto; color: var(--c-t0); }
.sd-m { display: flex; flex-direction: column; gap: 8px; padding: 0 12px; }
.pt .sd .wordmark { font-size: 26px; }
.nv { display: flex; flex-direction: column; gap: 2px; counter-reset: nv; }
.nv a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--r-md); color: var(--c-t1); text-decoration: none; font-size: 15px; font-weight: 500; counter-increment: nv; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out); }
.nv a::before { content: counter(nv, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; font-feature-settings: 'tnum' on, 'zero' on; color: var(--c-t3); transition: color var(--dur-base) var(--ease-out); }
.nv a:hover { background: var(--border-dark); color: var(--c-t0); padding-left: 16px; }
.nv a[aria-current="page"] { background: linear-gradient(90deg, var(--jade-1), transparent); color: var(--on-dark-0); box-shadow: inset 3px 0 0 var(--gold-2); }
.nv a[aria-current="page"]::before { color: var(--gold-3); }
.nv-g { padding: 16px 12px 4px; }
.us { margin-top: auto; padding: 12px; border-top: 1px solid var(--c-ln); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 14px; }
.us b { font-weight: 600; color: var(--c-t0); overflow-wrap: anywhere; }
.us .t-micro { overflow-wrap: anywhere; }
.pt .us .bt-quiet { padding: 0; margin-top: 4px; }

/* ---------- Pestañas del teléfono, en tinta (sólo en el teléfono) ---------- */
.pt .tb { display: none; }
.tb a { min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--c-t3); text-decoration: none; position: relative; transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); }
.tb a:hover { color: var(--c-t0); }
.tb a[aria-current="page"] { color: var(--on-dark-0); font-weight: 700; box-shadow: inset 0 3px 0 var(--gold-2); background: radial-gradient(70% 90% at 50% 0%, var(--jade-0), transparent 75%); }
.tb a[aria-current="page"] .ic { color: var(--gold-3); }

/* ---------- Cita con su fuente ---------- */
.ct { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px 14px 16px; border-top: 1px solid var(--c-ln); box-shadow: inset 2px 0 0 var(--jade-edge); transition: box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); }
.ct:hover { box-shadow: inset 3px 0 0 var(--c-ac); background: var(--jade-wash); }
.ct-t { font-size: 15px; line-height: 1.55; color: var(--c-t0); text-wrap: pretty; quotes: none; }
.ct-t::before { content: '\201C'; color: var(--c-gd); font-weight: 700; }
.ct-t::after { content: '\201D'; color: var(--c-gd); font-weight: 700; }
.ct-f { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; font-size: 13px; line-height: 1.5; color: var(--c-t3); overflow-wrap: anywhere; }
.pt .ct-f a { font-size: 13px; display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Regla en palabras del cliente ---------- */
.rg { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; padding: 16px 8px; border-top: 1px solid var(--c-ln); border-radius: var(--r-sm); transition: background-color var(--dur-base) var(--ease-out); }
.rg:first-child { border-top: 0; }
.rg:hover { background: var(--c-sf2); }
.rg-n { width: 28px; flex: none; padding-top: 4px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--c-gd); }
.rg-c { flex: 1 1 240px; min-width: 0; }
.pt .rg-t { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.35; letter-spacing: -0.01em; color: var(--c-t0); text-wrap: pretty; overflow-wrap: anywhere; }
.rg-a { display: flex; gap: 4px; flex-wrap: wrap; }

/* ---------- Estimado en rango ---------- */
.es-e { display: inline-flex; align-items: center; align-self: flex-start; min-height: 24px; padding: 0 10px; border: 1px solid var(--gold-edge); background: var(--gold-wash); color: var(--c-gd); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
#estimado-capas { display: flex; flex-direction: column; gap: 12px; }
/* El número del universo dentro de su frase: grande, en su renglón. */
#estimado-universo { font-size: 14px; line-height: 1.5; color: var(--c-t2); }
#estimado-total { display: block; margin-top: 10px; font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -0.03em; color: var(--c-hero); font-feature-settings: 'tnum' on, 'lnum' on; text-shadow: var(--gold-glow); }
#estimado-sin-filtrar { display: block; margin-top: 8px; font-size: 13px; color: var(--c-t3); }
#estimado-sin-filtrar:empty { display: none; }
#estimado-paso { font-size: 16px; line-height: 1.6; color: var(--c-t1); }
#estimado-rango { color: var(--c-t0); font-weight: 700; }
.rb { display: block; position: relative; height: 10px; background: var(--c-track); border-radius: var(--r-pill); overflow: hidden; }
.rb i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: linear-gradient(90deg, var(--gold-2), var(--gold-3)); border-radius: var(--r-pill); box-shadow: 0 0 16px var(--gold-edge); transform-origin: left; animation: cd-grow 1100ms var(--ease-out) 350ms backwards; }
#estimado-paso[hidden] + .rb { display: none; }
.pt .card.dk[aria-busy="true"] :is(#estimado-total, #estimado-rango) { opacity: 0.6; }

/* ---------- Cifra grande (coincidencia) ---------- */
.pt .big { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 1; letter-spacing: -0.03em; font-feature-settings: 'tnum' on, 'lnum' on; color: var(--c-hero); text-shadow: var(--gold-glow); }
.pt .big small { font-family: var(--font-sans); font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--c-t2); margin-left: 6px; text-shadow: none; }

/* ---------- Avance de calibración (una celda por empresa) ---------- */
.pg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; height: 8px; }
.pg i { display: block; background: var(--c-ln2); border-radius: 1px; }
.pg i.on { background: linear-gradient(180deg, var(--jade-3), var(--jade-2)); transform-origin: left; animation: cd-grow 360ms var(--ease-out) backwards; }
.pg i.cur { background: var(--gold-2); box-shadow: 0 0 10px var(--gold-edge); animation: cd-pulse 1.8s var(--ease-in-out) infinite; }

/* ---------- Datos de la empresa y de la cuenta ---------- */
.dl4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 16px; }
.pt :is(.dl4, .datos) dt { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-t3); }
.dl4 dd { font-size: 15px; line-height: 1.45; color: var(--c-t0); margin-top: 2px; overflow-wrap: anywhere; }
.pt .datos { display: grid; grid-template-columns: minmax(8rem, 40%) 1fr; gap: 10px 16px; }
.pt .datos dt { padding-top: 3px; }
.pt .datos dd { color: var(--c-t0); white-space: pre-line; overflow-wrap: anywhere; }

/* ---------- Lista de empresas (todas las de la calibración) ---------- */
.lst { background: var(--c-sf); border: 1px solid var(--c-ln); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.pt .er { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--c-ln); background: transparent; color: var(--c-t0); font: inherit; font-size: 15px; line-height: 1.35; text-align: left; cursor: pointer; transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out); }
.pt .er:hover { background: var(--c-sf2); padding-left: 20px; }
.pt .er[aria-current="true"] { background: linear-gradient(90deg, var(--jade-wash), transparent), var(--c-sf); box-shadow: inset 3px 0 0 var(--jade-2); font-weight: 600; }
.pt .er:disabled { cursor: progress; }
.lst li:last-child .er { border-bottom: 0; }

/* ---------- Acceso (sin navegación): entrada a la herramienta ---------- */
.acc { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 48px 16px; background-color: var(--ink-0); background-image: radial-gradient(55% 45% at 50% 0%, var(--jade-0), transparent 75%), radial-gradient(45% 40% at 100% 100%, var(--jade-0), transparent 70%), var(--chrome-grid-dark); background-size: auto, auto, 32px 32px, 32px 32px; }
.acc-m { display: flex; flex-direction: column; align-items: center; gap: 12px; animation: cd-fade 900ms var(--ease-out) backwards; }
.pt.acc .wordmark { font-size: 30px; }
.acc-c { --gap: 20px; width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: var(--gap); }
.pt.acc .card { --gap: 20px; padding: 32px; border-color: var(--paper-4); box-shadow: 0 0 0 1px var(--ink-1), 0 40px 90px -40px var(--jade-3), var(--shadow-lg); color: var(--c-t0); }
.pt.acc .card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: var(--r-md) var(--r-md) 0 0; background: linear-gradient(90deg, var(--jade-2), var(--gold-2)); transform-origin: left; animation: cd-grow 1000ms var(--ease-out) 300ms backwards; }
.pt.acc .card .head .lbl { color: var(--c-ac); }
.pt.acc form { display: flex; flex-direction: column; gap: 16px; }
.pt.acc form .btn { width: 100%; }

/* ---------- Calibración: inicio, elección y fin (CC051126-10) ---------- */
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px; }
.paso { display: flex; flex-direction: column; gap: 8px; }
.numl { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--c-gd); }
.pt #pregunta { font-size: 14px; font-weight: 600; color: var(--c-t1); }
/* Sí y No llevan su forma además del texto (el visto y la cruz del lienzo); el lector de pantalla no la lee. */
#boton-si::before { content: "\2713" / ""; font-size: 15px; letter-spacing: 0; }
#boton-no::before { content: "\2715" / ""; font-size: 13px; letter-spacing: 0; }

/* ---------- «Mostrar» la contraseña (CC051126-10) ---------- */
.pt .rw-campo { justify-content: space-between; gap: 8px; flex-wrap: nowrap; }
.pt .mostrar { padding: 0 4px; min-width: 44px; }

/* ---------- El teléfono (≤ 759 px): barra arriba, pestañas abajo ---------- */
@media (max-width: 759px) {
  .app { flex-direction: column; }
  .pt .t-title { font-size: 26px; }
  .pt .t-sec { font-size: 20px; }
  .pt .t-intro { font-size: 16px; }
  .page { --gap: 24px; padding: 16px 16px 32px; flex: 1; }
  .page > .head { padding: 22px 18px 26px; border-radius: var(--r-md); }
  .pt .card, .pt .grupo { padding: 16px; }
  .pt :is(.bt, .btn) { padding: 0 16px; }
  .pt .bt-quiet { padding: 0 10px; }
  .wr { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rail { position: static; order: -1; }
  .dos > :is(.bt, .btn) { flex: 1 1 140px; }
  .pt .bt-fw, .pt form > .acciones > .btn-gold { width: 100%; }
  .solo-tel { display: flex !important; }
  .pt .datos { grid-template-columns: 1fr; gap: 2px; }
  .pt .datos dd { margin-bottom: 10px; }

  /* La banda de la calibración, en una sola línea mientras se califica (CC051126-10, D1): el título
     queda para el lector de pantalla. */
  .page > .head.head-corta { padding: 14px 18px; gap: 0; }
  .head-corta .t-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .head-corta .t-intro { display: none; }

  /* El menú lateral se vuelve la barra de arriba: la marca y «Salir». */
  .pt .sd { width: auto; height: 56px; position: sticky; top: 0; z-index: 10; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px 0 16px; overflow: visible; border-right: 0; border-bottom: 1px solid var(--border-dark); background-image: var(--chrome-grid-dark); background-size: 32px 32px; }
  .sd-m { flex-direction: row; align-items: center; gap: 10px; padding: 0; min-width: 0; }
  .pt .sd .wordmark { font-size: 22px; }
  .pt .sd-m .lbl { font-size: 10px; letter-spacing: 0.1em; white-space: nowrap; }
  .sd .nv { display: none; }
  .us { margin: 0; padding: 0; border: 0; flex-direction: row; align-items: center; }
  .us b, .us .t-micro { display: none; }
  .pt .us .bt-quiet { margin: 0; padding: 0 10px; }

  /* Lo que recibe el foco no queda debajo de la barra de arriba (56 px) ni de las pestañas (64 px). */
  html { scroll-padding-top: 72px; scroll-padding-bottom: 80px; }
  .pt :focus { scroll-margin-top: 72px; scroll-margin-bottom: 80px; }

  .pt .tb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: sticky; bottom: 0; z-index: 10; background-color: var(--ink-0); border-top: 1px solid var(--border-dark); }

  .acc { justify-content: flex-start; padding: 32px 16px; }
  .pt.acc .card { padding: 20px; }
  .pt.acc .t-title { font-size: 26px; }
}

/* Entre el teléfono y la pantalla ancha: el menú queda a la izquierda y la columna de apoyo
   pasa arriba, a todo el ancho. */
@media (min-width: 760px) and (max-width: 1099px) {
  .wr { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rail { position: static; order: -1; }
  .page { padding: 32px 24px 64px; }
}

/* ---------- Menos movimiento e impresión ---------- */
@media (prefers-reduced-motion: reduce) {
  .pt *, .pt *::before, .pt *::after, .pt { animation: none !important; transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}
@media print {
  .pt *, .pt *::before, .pt *::after { animation: none !important; }
  .pt .sd, .pt .tb, .skip { display: none !important; }
}