/* ============================================================
   Wagon · Flujo de aplicacion
   Estilos propios del formulario y la entrevista sincronica.
   Construidos sobre los tokens de wagon.css.
   ============================================================ */

/* --- Shell del flujo --- */
.apply-shell{min-height:100vh;padding:48px 0 96px}
.apply-layout{display:grid;grid-template-columns:200px 1fr;gap:64px;align-items:start;max-width:var(--container-narrow);margin:0 auto;padding:0 var(--gutter)}
.apply-rail{position:sticky;top:96px}
.apply-main{min-width:0;max-width:620px}
@media(max-width:900px){
  .apply-layout{grid-template-columns:1fr;gap:32px}
  .apply-rail{position:static}
  .rail-progress{flex-direction:row;gap:0;justify-content:space-between}
  .rail-progress:before{top:5px;bottom:auto;left:12px;right:12px;width:auto;height:1px;background:linear-gradient(to right,transparent,var(--border) 8%,var(--border) 92%,transparent)}
  .rail-step{flex-direction:column;gap:8px;padding-left:0;flex:1;align-items:center;text-align:center}
  .rail-step-text{align-items:center}
  .rail-step-label{display:none}
  .rail-step-short{display:block}
}

.step-head{margin-bottom:32px}
.step-head .eyebrow{margin-bottom:14px}
.step-head h2{font-size:var(--h2);margin-bottom:12px}
.step-head p{color:var(--text-soft);font-size:16px;line-height:1.6;max-width:560px}

.step-actions{display:flex;gap:12px;align-items:center;margin-top:32px;flex-wrap:wrap}
.step-actions .note{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-faint)}

/* --- Dropzone de hoja de vida --- */
.dropzone{border:1.5px dashed var(--border-strong);border-radius:var(--r-lg);background:var(--canvas-soft);padding:32px 24px;text-align:center;cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast)}
.dropzone:hover,.dropzone.is-over{border-color:var(--brand-border);background:var(--brand-tint)}
.dropzone.is-invalid{border-color:var(--pastel-red-fg)}
.dropzone .dz-icon{font-size:26px;margin-bottom:12px;color:var(--text-muted)}
.dropzone .dz-title{font-size:15px;font-weight:500;margin-bottom:6px}
.dropzone .dz-sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
.dz-file{display:flex;align-items:center;gap:12px;justify-content:space-between;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:14px 16px}
.dz-file .fname{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-file .fsize{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);letter-spacing:.04em;flex-shrink:0}

/* --- Consentimiento --- */
.consent{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--border);border-radius:var(--r-md);background:var(--canvas-soft);padding:16px}
.consent.is-invalid{border-color:var(--pastel-red-fg)}
.consent input[type=checkbox]{appearance:none;width:18px;height:18px;border:1.5px solid var(--border-strong);border-radius:var(--r-xs);flex-shrink:0;margin-top:2px;cursor:pointer;transition:background var(--dur-fast),border-color var(--dur-fast);position:relative}
.consent input[type=checkbox]:checked{background:var(--brand);border-color:var(--brand)}
.consent input[type=checkbox]:checked:after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.consent input[type=checkbox]:focus-visible{box-shadow:0 0 0 4px var(--brand-tint-2)}
.consent label{font-size:13px;color:var(--text-soft);line-height:1.55;cursor:pointer}
.consent label a{color:var(--brand-dark);border-bottom:1px solid var(--brand-border)}

/* --- Gate: loader de validacion --- */
.gate{text-align:center;padding:64px 0;max-width:520px;margin:0 auto}
.gate-orb{width:88px;height:88px;margin:0 auto 32px;border-radius:50%;position:relative;background:radial-gradient(circle at 50% 50%,var(--brand-tint-2),transparent 70%)}
.gate-orb:before,.gate-orb:after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid transparent;border-top-color:var(--brand);animation:gateSpin 1.4s var(--ease-soft) infinite}
.gate-orb:after{inset:14px;border-top-color:var(--brand-dark);animation-duration:2s;animation-direction:reverse}
/* El aviso de no cerrar la ventana es lo unico accionable de esta
   pantalla: si se pierde entre el texto, el candidato se va y su
   aplicacion queda a medias sin forma de retomarla. */
.gate-aviso{display:flex;gap:12px;align-items:flex-start;text-align:left;margin:28px auto 0;max-width:460px;padding:16px 18px;border:1px solid var(--pastel-yellow-fg);border-radius:var(--r-md);background:color-mix(in srgb,var(--pastel-yellow-fg) 8%,transparent);font-size:14px;line-height:1.6;color:var(--text-soft)}
.gate-aviso b{color:var(--text);font-weight:600}
.gate-aviso-ic{flex:0 0 auto;font-size:16px;line-height:1.45;color:var(--pastel-yellow-fg)}
@media (prefers-reduced-motion:no-preference){.gate-aviso{animation:avisoIn .5s var(--ease-soft) both .4s}}
@keyframes avisoIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes gateSpin{to{transform:rotate(360deg)}}
.gate h2{font-size:var(--h2);margin-bottom:14px}
.gate p{color:var(--text-soft);font-size:16px;line-height:1.65}
.gate-checklist{display:grid;gap:14px;margin:36px auto 0;text-align:left;max-width:380px}
.gate-check{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--text-faint);transition:color .4s var(--ease)}
.gate-check .box{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border-strong);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:10px;transition:all .4s var(--ease)}
.gate-check.is-active{color:var(--text)}
.gate-check.is-active .box{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}
.gate-check.is-done{color:var(--text-muted)}
.gate-check.is-done .box{background:var(--brand);border-color:var(--brand);color:#fff}

/* --- Resultado (aceptado / rechazo suave) --- */
.outcome{text-align:center;padding:72px 0;max-width:540px;margin:0 auto}
.outcome-mark{width:64px;height:64px;border-radius:50%;margin:0 auto 28px;display:flex;align-items:center;justify-content:center;font-size:26px}
.outcome-mark.ok{background:var(--pastel-green-bg);color:var(--pastel-green-fg)}
.outcome-mark.wait{background:var(--pastel-purple-bg);color:var(--pastel-purple-fg)}
.outcome h2{font-size:var(--h2);margin-bottom:16px}
.outcome p{color:var(--text-soft);font-size:17px;line-height:1.65;margin-bottom:16px}

/* --- Test de microfono --- */
.mic-test{border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);padding:28px}
.vu{height:56px;display:flex;align-items:center;gap:3px;margin:20px 0}
.vu-bar{flex:1;background:var(--border);border-radius:99px;height:4px;transition:height .08s linear,background .2s;min-height:4px}
.vu-bar.on{background:var(--brand)}
.mic-status{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.mic-status.ok{color:var(--pastel-green-fg)}
.mic-status.bad{color:var(--pastel-red-fg)}

/* --- Reglas de la entrevista --- */
.rules{display:grid;gap:2px;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--border)}
.rule{background:var(--surface);padding:18px 20px;display:flex;gap:14px;align-items:flex-start}
.rule .n{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--brand-dark);flex-shrink:0;margin-top:3px;font-weight:600}
.rule .t{font-size:15px;line-height:1.55;color:var(--text-soft)}
.rule .t b{color:var(--text);font-weight:500}

/* --- Escenario de pregunta --- */
.q-stage{border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);padding:32px;position:relative;overflow:hidden}
.q-stage:before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--brand-border),transparent)}
.q-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.q-index{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.q-index b{color:var(--text);font-weight:600}
.q-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-dark);background:var(--brand-tint);border:1px solid var(--brand-border);border-radius:var(--r-pill);padding:5px 11px}
.q-text{font-family:var(--font-serif);font-size:clamp(20px,2.4vw,26px);line-height:1.32;letter-spacing:-.02em;color:var(--text);margin-bottom:28px}

/* Reproductor de la pregunta */
.q-audio{display:flex;align-items:center;gap:14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--canvas);padding:14px 16px;margin-bottom:28px}
.q-audio .who{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
.q-wave{flex:1;display:flex;align-items:center;gap:2px;height:24px}
.q-wave span{flex:1;background:var(--border-strong);border-radius:99px;height:20%;transition:height .12s linear,background .2s}
.q-wave.playing span{background:var(--brand)}

/* Anillo de grabacion */
.rec{display:flex;flex-direction:column;align-items:center;gap:20px;padding:8px 0 4px}
.rec-ring{width:132px;height:132px;position:relative;display:grid;place-items:center}
.rec-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.rec-ring circle{fill:none;stroke-width:3}
.rec-ring .track{stroke:var(--border)}
.rec-ring .prog{stroke:url(#recGrad);stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.rec-ring.is-low .prog{stroke:#e5484d}
.rec-time{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:26px;letter-spacing:.02em;color:var(--text);font-weight:500}
.rec-sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);margin-top:4px;text-align:center}

/* Cuenta regresiva */
.countdown{display:grid;place-items:center;gap:12px;padding:44px 0}
.countdown .num{font-family:var(--font-serif);font-size:96px;line-height:1;letter-spacing:-.04em;color:var(--brand-dark);animation:cdPop .9s var(--ease)}
.countdown .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
@keyframes cdPop{0%{opacity:0;transform:scale(.7)}40%{opacity:1;transform:scale(1)}to{opacity:.85;transform:scale(1)}}

/* Estado de subida */
.upload-state{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-top:20px}
.upload-state .spin{width:12px;height:12px;border:1.5px solid var(--border-strong);border-top-color:var(--brand);border-radius:50%;animation:gateSpin .8s linear infinite;flex-shrink:0}
.upload-state.ok{color:var(--pastel-green-fg)}
.upload-state.err{color:var(--pastel-red-fg)}

/* Aviso de grabacion / errores */
.notice{border:1px solid var(--border);border-left:2px solid var(--brand);border-radius:var(--r-md);background:var(--canvas-soft);padding:16px 18px;font-size:14px;line-height:1.6;color:var(--text-soft)}
.notice.warn{border-left-color:var(--pastel-yellow-fg)}
.notice.error{border-left-color:#e5484d;color:var(--text)}
.notice b{color:var(--text);font-weight:500}

/* Bloqueo de navegacion hacia atras */
.locked-hint{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);display:inline-flex;align-items:center;gap:8px}
.locked-hint:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--text-faint)}

/* --- Indice de vacantes --- */
.job-list{display:grid;gap:14px}
.job-card{border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);padding:26px 28px;display:flex;justify-content:space-between;align-items:center;gap:24px;transition:border-color var(--dur-fast),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.job-card:hover{border-color:var(--brand-border);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.job-card .title{font-family:var(--font-serif);font-size:26px;letter-spacing:-.02em;line-height:1.15;margin-bottom:8px}
.job-card .cta-arrow{font-size:20px;color:var(--text-muted);flex-shrink:0}
.job-card:hover .cta-arrow{color:var(--brand-dark)}
.empty-state{border:1.5px dashed var(--border);border-radius:var(--r-xl);padding:56px 32px;text-align:center;color:var(--text-muted)}


/* ============================================================
   Paso 1 · bloques numerados, ayuda y validacion en linea
   ============================================================ */

.rail-step-short{display:none;font-family:var(--font-sans);font-size:10px;font-weight:500;letter-spacing:-.005em;color:var(--text-faint);opacity:.75;transition:color .42s var(--ease),opacity .42s var(--ease)}
.rail-step.is-done .rail-step-short{color:var(--text-muted);opacity:.9}
.rail-step.is-active .rail-step-short{color:var(--text);opacity:1}

/* --- Bloque (seccion numerada) --- */
.fs{border-top:1px solid var(--border);padding-top:28px;margin-top:36px}
.fs:first-of-type{border-top:0;padding-top:0;margin-top:0}
.fs-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:20px}
.fs-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid var(--brand-border);background:var(--brand-tint);color:var(--brand-dark);font-family:var(--font-mono);font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;margin-top:2px}
.fs-title h4{font-size:19px;font-weight:500;letter-spacing:-.01em;margin-bottom:6px}
.fs-title p{color:var(--text-muted);font-size:14px;line-height:1.55;max-width:520px}
.fs-body{display:grid;gap:14px}

/* --- Envoltura de campo: control + ayuda + error --- */
.fw{display:grid;gap:0;min-width:0}
.fw-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:7px}
.fw-foot .field-hint{margin-top:0;font-size:12.5px;line-height:1.45;color:var(--text-faint)}
.fw.has-error .fw-foot .field-hint{opacity:.5}
.fw .field-error{margin-top:7px;display:flex;align-items:flex-start;gap:6px;line-height:1.45;text-transform:none;letter-spacing:0;font-family:var(--font-sans);font-size:13px}
.fw .field-error:before{content:"!";flex-shrink:0;width:14px;height:14px;border-radius:50%;background:var(--pastel-red-fg);color:var(--canvas);font-family:var(--font-mono);font-size:10px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;margin-top:2px}

/* --- Contador de caracteres --- */
.counter{flex-shrink:0;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11px;letter-spacing:.04em;color:var(--text-faint);transition:color var(--dur-fast)}
.counter.is-ok{color:var(--pastel-green-fg)}
.counter.is-ok:after{content:"\2003\2713"}

/* --- Pregunta escrita --- */
.q-block{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--canvas-soft);padding:20px}
.q-block-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.q-block-num{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.q-block-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-dark);background:var(--brand-tint);border:1px solid var(--brand-border);border-radius:var(--r-pill);padding:4px 10px}
.q-block-prompt{font-size:16px;line-height:1.55;color:var(--text);margin-bottom:16px;max-width:560px}
.q-block .field{background:var(--canvas)}
.q-block.has-error{border-color:#f0784659}

/* --- Barra de envio --- */
.submit-bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border-top:1px solid var(--border);margin-top:36px;padding-top:28px}
.submit-meta{display:grid;gap:3px}
.submit-meta .note{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-faint)}
.ready-note{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--pastel-yellow-fg)}
.ready-note.is-ok{color:var(--pastel-green-fg)}
#form-summary{margin-top:28px}

@media(max-width:640px){
  .fs-head{gap:12px}
  .fs-title h4{font-size:17px}
  .q-block{padding:16px}
  .submit-bar{flex-direction:column;align-items:stretch}
  .submit-bar .btn{width:100%}
  .submit-meta{text-align:center;justify-items:center}
}


/* ============================================================
   Camino de un solo sentido

   El script en el <head> pone esta clase antes del primer paint si el
   candado esta puesto, para que el pago no alcance a parpadear al
   recargar. apply.js luego saca los nodos del DOM.
   ============================================================ */
.aplicacion-bloqueada #vacante,
.aplicacion-bloqueada .page-hero,
/* El guardia del <head> pone esta clase antes del primer pintado, asi
   que en una recarga el enlace no llega a verse ni un frame. */
.aplicacion-bloqueada .nav .arrow-link{display:none!important}

/* Aviso que el candidato tiene que leer si o si. No es un "warning"
   secundario: es parte del contenido principal del bloque. */

/* --- Teléfono con indicativo --- */
.phone-input{display:flex;align-items:center;gap:0;min-width:0}
.phone-input select{appearance:none;-webkit-appearance:none;flex-shrink:0;max-width:38%;
  font-family:var(--font-mono);font-size:13px;letter-spacing:0;color:var(--text);
  background:0 0;border:0;border-right:1px solid var(--border);border-radius:0;
  padding:0 20px 0 0;margin-right:10px;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' stroke='%2394919c' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 6px center;background-size:9px}
.phone-input select:focus-visible{outline:none;color:var(--brand-dark)}
.phone-input select option{background:var(--surface);color:var(--text);font-family:var(--font-sans)}
.phone-input input{flex:1;min-width:0;font-variant-numeric:tabular-nums}