/* =========================================================================
   Autodiagnóstico de profesionalización · Grupo PBK
   Hoja de estilos — organizada por bloque de pantalla:
     1. Reset y tipografía base
     2. Layout general (wrap / paper)
     3. Pantalla 1 — Intro (incluye el campo de correo)
     4. Pantalla 2 — Cuestionario
     5. Pantalla 3 — Resultado
     6. Responsive (móvil)
     7. Impresión / PDF de respaldo (window.print)
   ========================================================================= */

/* ---------- 1. Reset y tipografía base ----------
   Paleta y tipografía según el Manual de identidad visual Grupo PBK
   (mayo/2025): navy y accent son los colores secundarios de marca, ink/
   grey/mut/hair vienen de la escala de grises primaria (blanco/negro,
   "territorio visual neutro"). red/amb/blu/grn NO son colores de marca:
   son el semáforo informativo de las bandas de resultado y se mantienen
   sin cambios. Poppins es la única familia tipográfica de la marca
   ("uso general de la marca"), autohospedada — ver @font-face más abajo. */
:root{
  --navy:#093B67; --acc:#00ADEE; --ink:#1A1A1A; --grey:#353A3E; --mut:#6B6D6F; --hair:#E0E0E0;
  --red:#A8453F; --amb:#B0762B; --blu:#2E6E96; --grn:#2C7A5B;
  --sf:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --sr:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

@font-face{ font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/poppins/Poppins-Regular.ttf") format("truetype"); }
@font-face{ font-family:"Poppins"; font-style:italic; font-weight:400; font-display:swap; src:url("/fonts/poppins/Poppins-Italic.ttf") format("truetype"); }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/poppins/Poppins-Medium.ttf") format("truetype"); }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/poppins/Poppins-SemiBold.ttf") format("truetype"); }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/poppins/Poppins-Bold.ttf") format("truetype"); }

*{ box-sizing:border-box; margin:0; padding:0; }
body{
  font-family:var(--sr); color:var(--ink); background:#F1F1F1; line-height:1.5;
  -webkit-print-color-adjust:exact; print-color-adjust:exact; -webkit-font-smoothing:antialiased;
}

/* ---------- 2. Layout general ---------- */
.topbar{ background:#fff; border-bottom:1px solid var(--hair); }
.topbar-in{ max-width:820px; margin:0 auto; padding:14px 18px; display:flex; align-items:center; gap:14px; }
.topbar-logo{ height:26px; width:auto; display:block; }
.topbar-div{ width:1px; height:20px; background:var(--hair); }
.topbar-txt{ font-family:var(--sf); font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--navy); }
@media (max-width:480px){
  .topbar-in{ padding:12px 14px; gap:10px; } .topbar-logo{ height:22px; } .topbar-txt{ font-size:12px; }
}
.wrap{ max-width:820px; margin:0 auto; padding:28px 18px 60px; }
.paper{
  background:#fff; border-radius:4px;
  box-shadow:0 1px 3px rgba(9,59,103,.10),0 8px 28px rgba(9,59,103,.07);
  padding:38px 40px 40px;
}
.eyebrow{ font-family:var(--sf); font-size:11px; font-weight:700; letter-spacing:.18em; color:var(--acc); text-transform:uppercase; }
h1{ font-family:var(--sf); font-size:31px; line-height:1.15; color:var(--navy); letter-spacing:-.015em; margin:10px 0 0; font-weight:700; }
.deck{ font-size:18px; font-style:italic; color:var(--grey); margin-top:12px; }
.meta{ font-family:var(--sf); font-size:13px; font-weight:700; letter-spacing:.09em; color:var(--navy); margin-top:16px; }
.btn{
  display:inline-block; font-family:var(--sf); font-size:15px; font-weight:600; letter-spacing:.02em;
  background:var(--navy); color:#fff; border:0; border-radius:3px; padding:13px 30px; cursor:pointer; margin-top:26px;
}
.btn:hover{ background:#0D5696; }
.btn:disabled{ background:#B0B0B0; cursor:not-allowed; }
.btn.ghost{ background:#fff; color:var(--navy); border:1px solid var(--hair); margin-left:8px; }
.btn.ghost:hover{ background:#F3F3F3; }
.hide{ display:none!important; }

/* ---------- 3. Pantalla 1 — Intro + correo ---------- */
.how{ margin-top:24px; padding:16px 18px; background:#F3F3F3; border-left:3px solid var(--acc); font-size:15px; color:var(--grey); }
.how b{ font-family:var(--sf); font-size:15px; color:var(--navy); }

.email-field{ margin-top:26px; }
.email-field label{ display:block; font-family:var(--sf); font-size:13px; font-weight:700; color:var(--navy); letter-spacing:.03em; margin-bottom:8px; }
.email-field input{
  width:100%; font:inherit; font-family:var(--sf); font-size:15.5px; color:var(--ink);
  border:1px solid var(--hair); border-radius:3px; padding:12px 14px; background:#fff;
}
.email-field input:focus{ outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(0,173,238,.12); }
.email-field input.err{ border-color:var(--red); }
.email-field .msg{ font-family:var(--sf); font-size:12.5px; margin-top:7px; min-height:16px; }
.email-field .msg.err{ color:var(--red); }
.email-field .msg.hint{ color:var(--mut); }

/* ---------- 4. Pantalla 2 — Cuestionario ---------- */
.bar{ height:4px; background:var(--hair); border-radius:2px; overflow:hidden; }
.bar i{ display:block; height:100%; background:var(--acc); width:0; transition:width .25s ease; }
.qtop{
  display:flex; justify-content:space-between; align-items:baseline; font-family:var(--sf); font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin-bottom:9px;
}
.qcap{ color:var(--acc); } .qnum{ color:var(--mut); }
.qdesc{ font-family:var(--sf); font-size:13px; color:var(--mut); font-style:italic; margin-top:14px; }
h2{ font-family:var(--sf); font-size:24px; line-height:1.3; color:var(--navy); margin:20px 0 4px; font-weight:700; }
.opts{ margin-top:20px; display:flex; flex-direction:column; gap:9px; }
.opt{
  display:flex; align-items:flex-start; gap:14px; text-align:left; width:100%; background:#fff;
  border:1px solid var(--hair); border-radius:3px; padding:14px 16px; cursor:pointer; font:inherit; font-size:15.5px;
  color:var(--ink); transition:border-color .12s,background .12s;
}
.opt:hover{ border-color:var(--acc); background:#F7F7F7; }
.opt.on{ border-color:var(--navy); background:#F3F3F3; box-shadow:inset 0 0 0 1px var(--navy); }
.nav{ margin-top:22px; display:flex; justify-content:space-between; align-items:center; }
.lk{ font-family:var(--sf); font-size:14px; color:var(--mut); background:none; border:0; cursor:pointer; padding:6px 0; }
.lk:hover{ color:var(--navy); } .lk[disabled]{ opacity:.3; cursor:default; }

/* ---------- 5. Pantalla 3 — Resultado ---------- */
.tools{ display:flex; gap:8px; align-items:center; margin:0 0 16px; flex-wrap:wrap; }
.send-status{ font-family:var(--sf); font-size:13px; color:var(--grey); }
.send-status.ok{ color:var(--grn); } .send-status.err{ color:var(--red); }
.sheet{
  background:#fff; border-radius:4px;
  box-shadow:0 1px 3px rgba(9,59,103,.10),0 8px 28px rgba(9,59,103,.07);
  padding:34px 38px 38px; margin-bottom:20px;
}
.head{ display:flex; justify-content:space-between; align-items:flex-end; border-bottom:2.5px solid var(--navy); padding-bottom:9px; gap:16px; }
.head h1{ font-size:27px; margin-top:5px; }
.hmeta{ font-family:var(--sf); font-size:11.5px; color:var(--mut); text-align:right; line-height:1.75; white-space:nowrap; }
.hmeta b{ color:var(--grey); font-weight:600; }
.sec{ font-family:var(--sf); font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--mut); text-transform:uppercase; margin:20px 0 9px; }
.gl{ display:flex; gap:20px; align-items:stretch; }
.gnum{ width:118px; flex:0 0 118px; color:#fff; border-radius:3px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px 0; }
.gnum b{ font-family:var(--sf); font-size:46px; line-height:.95; font-weight:700; }
.gnum span{ font-family:var(--sf); font-size:12px; opacity:.85; letter-spacing:.08em; margin-top:4px; }
.gband{ font-family:var(--sf); font-size:15px; font-weight:700; letter-spacing:.14em; margin-bottom:5px; }
.ghead{ font-family:var(--sf); font-size:14px; font-weight:700; color:var(--navy); margin-bottom:5px; }
.gbody{ font-size:14px; color:var(--grey); }
.scale{ margin-top:24px; }
.mw{ position:relative; height:22px; }
.mk{ position:absolute; bottom:8px; transform:translateX(-50%); font-family:var(--sf); font-size:11px; font-weight:700; color:var(--navy); white-space:nowrap; text-align:center; }
.mk-arrow{ position:absolute; bottom:0; width:0; height:0; transform:translateX(-50%); border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--navy); }
.gbar{ display:flex; height:10px; border-radius:2px; overflow:hidden; }
.tk{ position:relative; height:16px; margin-top:4px; }
.tk span{ position:absolute; font-family:var(--sf); font-size:10px; color:var(--mut); transform:translateX(-50%); }
.tk span.l0{ transform:none; } .tk span.l9{ transform:translateX(-100%); }
.cb{ border-top:1px solid var(--hair); padding:11px 0 12px; }
.cr{ display:flex; align-items:center; gap:13px; }
.cn{ width:118px; flex:0 0 118px; font-family:var(--sf); font-size:15px; font-weight:700; color:var(--navy); }
.tr{ flex:1; display:flex; gap:3px; }
.tr i{ flex:1; height:13px; border-radius:2px; background:#EAEAEA; }
.sc{ width:48px; flex:0 0 48px; text-align:right; font-family:var(--sf); font-size:19px; font-weight:700; }
.sc span{ font-size:11px; font-weight:600; color:var(--mut); }
.ac{ width:128px; flex:0 0 128px; text-align:center; font-family:var(--sf); font-size:10.5px; font-weight:700; letter-spacing:.09em; padding:5px 0 4px; border-radius:2px; }
.ac em{ display:block; font-style:normal; font-size:9.5px; font-weight:600; letter-spacing:.04em; opacity:.72; margin-top:1px; }
.cx{ font-size:14px; color:var(--ink); margin-top:8px; padding-left:131px; }
.p2b{ font-family:var(--sf); font-size:14.5px; font-weight:700; color:var(--navy); margin-top:12px; }
.p2{ font-size:14px; color:var(--grey); margin-top:8px; }
table{ width:100%; border-collapse:collapse; margin-top:14px; }
td{ padding:8px 11px; font-family:var(--sf); font-size:14px; border-bottom:1px solid #EAEAEA; vertical-align:top; }
tr.mh td{ font-size:10px; font-weight:700; letter-spacing:.11em; color:var(--acc); text-transform:uppercase; background:#F3F3F3; border-bottom:none; }
td.m0{ font-weight:700; color:var(--navy); width:36%; } td.m1{ font-weight:700; color:var(--navy); }
.habs{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:11px; }
.hx{ border-top:3px solid var(--acc); background:#FAFAFA; padding:11px 13px 13px; }
.hx b{ display:block; font-family:var(--sf); font-size:13px; color:var(--navy); margin-bottom:5px; }
.hx span{ font-size:13.5px; color:var(--grey); }
.rutas{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:0; }
.rt{ background:#F6F6F6; padding:12px 14px; border-radius:3px; }
.rt b{ display:block; font-family:var(--sf); font-size:12.5px; color:var(--navy); letter-spacing:.05em; margin-bottom:4px; }
.rt span{ font-size:13.5px; color:var(--grey); }
.close{ margin-top:18px; padding-top:13px; border-top:2px solid var(--navy); text-align:center; font-style:italic; font-size:16px; color:var(--navy); }

/* ---------- 6. Responsive ---------- */
@media (max-width:660px){
  .wrap{ padding:16px 12px 40px; } .paper,.sheet{ padding:24px 20px 26px; }
  h1{ font-size:25px; } .head h1{ font-size:22px; } .hmeta{ display:none; }
  .gl{ flex-direction:column; gap:14px; } .gnum{ width:100%; flex:none; flex-direction:row; gap:10px; padding:14px; }
  .gnum b{ font-size:36px; } .cr{ flex-wrap:wrap; } .cn{ flex:1 1 auto; width:auto; }
  .tr{ order:4; flex:1 1 100%; margin-top:8px; } .cx{ padding-left:0; }
  .habs,.rutas{ grid-template-columns:1fr; }
  h2{ font-size:21px; }
}

/* ---------- 7. Impresión (respaldo: "Descargar PDF" del navegador) ---------- */
@media print{
  @page{ size:Letter; margin:14mm 15mm; }
  body{ background:#fff; font-size:9.2pt; }
  .wrap{ max-width:none; padding:0; } .tools,.noprint{ display:none!important; }
  .sheet{ box-shadow:none; border-radius:0; padding:0; margin:0; }
  .sheet+.sheet{ page-break-before:always; }
  .head h1{ font-size:23pt; } .eyebrow{ font-size:7.4pt; } .hmeta{ display:block; font-size:7.8pt; }
  .sec{ font-size:7.8pt; margin:15px 0 7px; }
  .gnum{ width:106px; flex:0 0 106px; } .gnum b{ font-size:34pt; } .gnum span{ font-size:8.5pt; }
  .gband{ font-size:11pt; } .ghead{ font-size:10pt; } .gbody{ font-size:9.2pt; }
  .cn{ width:104px; flex:0 0 104px; font-size:10.5pt; } .sc{ font-size:13pt; } .sc span{ font-size:7.5pt; }
  .ac{ width:118px; flex:0 0 118px; font-size:7.4pt; } .ac em{ font-size:6.6pt; }
  .cx{ font-size:9.2pt; padding-left:116px; } .tr i{ height:11px; }
  .cb{ padding:8px 0 9px; page-break-inside:avoid; }
  .p2b{ font-size:9.5pt; } .p2{ font-size:9.2pt; } td{ font-size:9pt; padding:6px 9px; } tr.mh td{ font-size:6.9pt; }
  .hx b{ font-size:8.6pt; } .hx span{ font-size:8.7pt; } .rt b{ font-size:8.2pt; } .rt span{ font-size:8.6pt; }
  .close{ font-size:10.5pt; } .mk{ font-size:7.8pt; } .tk span{ font-size:6.8pt; }
}