/* Autodiagnostico IMA-4C(R) -- estilos propios de la herramienta.
   Mismos cuatro cambios que en la calculadora: sin modo oscuro, sin reset
   redundante, .topbar bajo var(--header-h), .nav/.btn renombrados a .t-nav/.t-btn. */
.tool-app{
  --ground:#FAFAFC; --surface:#FFFFFF; --sunken:#F2F2F7;
  --ink:#12121A; --ink-2:#3A3A47; --muted:#5C5C6B; --faint:#6E6E80;
  --rule:#E4E4EC; --rule-strong:#CFCFDB;
  --accent:#3A34EF; --accent-ink:#1912E5; --on-accent:#FFFFFF;
  --ok:#1B7A4B; --warn:#8A5B00; --bad:#B32036;
  --ok-bg:#E6F4EC; --warn-bg:#FBF0DC; --bad-bg:#FBE8EB;
  --track:#E4E4EC;
  --grad:linear-gradient(115deg,#F67E1D 0%,#F67E1D 18%,#C74973 38%,#9334B2 55%,#3A34EF 82%,#3A34EF 100%);
  --serif:"Source Serif 4",Charter,Georgia,serif;
  --sans:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --dur:420ms;
}
/* modo oscuro retirado: el sitio fuerza data-theme="light" siempre */

/* *{box-sizing:border-box} ya lo cubre site.css */
/* body{...} ya lo cubre site.css con los mismos valores (--sgc-ground=#FAFAFC, etc.) */
.wrap{max-width:760px; margin:0 auto; padding-inline:20px; padding-block:0}
h1,h2,h3{font-family:var(--serif); font-weight:600; text-wrap:balance; margin:0}
h1{font-size:clamp(1.9rem,5.2vw,2.9rem); line-height:1.08; letter-spacing:-.02em}
h2{font-size:clamp(1.35rem,3.4vw,1.8rem); line-height:1.2; letter-spacing:-.014em}
h3{font-size:1.05rem; line-height:1.3}
p{margin:0 0 1em; color:var(--ink-2); max-width:62ch}
strong{font-weight:600; color:var(--ink)}
.mono{font-family:var(--mono); font-size:.85em}
.tick{display:block; width:34px; height:3px; background:var(--grad); border-radius:2px; margin-bottom:16px}
.eyebrow{font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:0 0 .4rem}

/* top bar */
.topbar{position:sticky; top:var(--header-h); z-index:20; background:var(--surface); border-bottom:1px solid var(--rule)}
.topbar-in{max-width:760px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:14px}
.pbar{flex:1; height:5px; background:var(--track); border-radius:3px; overflow:hidden; min-width:60px}
.pbar i{display:block; height:100%; width:0; background:var(--grad); border-radius:3px; transition:width var(--dur) cubic-bezier(.22,.61,.36,1)}
.pcount{font-family:var(--mono); font-size:.72rem; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.lang{display:flex; border:1px solid var(--rule-strong); border-radius:5px; overflow:hidden; flex:none}
.lang button{font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; padding:7px 10px; border:none;
  background:transparent; color:var(--muted); cursor:pointer; min-height:34px}
.lang button[aria-pressed="true"]{background:var(--accent); color:var(--on-accent)}
.lang button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}

main{padding-block:34px 60px}
.step[hidden]{display:none!important}

/* intro */
.lead{font-family:var(--serif); font-size:clamp(1.1rem,2.4vw,1.3rem); line-height:1.5; color:var(--ink); max-width:54ch}
.facts{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr)); margin:26px 0}
.fact{border:1px solid var(--rule); border-radius:6px; background:var(--surface); padding:14px 16px}
.fact b{display:block; font-family:var(--serif); font-size:1.5rem; line-height:1; margin-bottom:5px; font-variant-numeric:tabular-nums}
.fact span{font-size:.82rem; color:var(--muted); line-height:1.4; display:block}

/* questions */
.dimhead{border-left:3px solid var(--accent); padding-left:16px; margin-bottom:26px}
.dimhead .w{font-family:var(--mono); font-size:.72rem; color:var(--faint); letter-spacing:.06em; margin-top:5px; display:block}
.q{border-top:1px solid var(--rule); padding:18px 0}
.q:first-of-type{border-top:none; padding-top:4px}
.q .txt{font-size:1rem; line-height:1.45; color:var(--ink); margin-bottom:13px; display:block}
.q .txt em{font-family:var(--mono); font-size:.72rem; color:var(--faint); font-style:normal; margin-right:8px; letter-spacing:.05em}
.scale{display:grid; grid-template-columns:repeat(5,1fr); gap:7px}
.scale button{
  font-family:var(--mono); font-size:1rem; font-variant-numeric:tabular-nums;
  min-height:50px; border-radius:5px; border:1px solid var(--rule-strong);
  background:var(--surface); color:var(--muted); cursor:pointer;
  transition:background 150ms,border-color 150ms,color 150ms; padding:0;
}
.scale button:hover{border-color:var(--accent); color:var(--ink)}
.scale button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:500}
.scale button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.legend{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.66rem; color:var(--faint); margin-top:7px; letter-spacing:.03em; gap:8px}

/* nav */
.t-nav{display:flex; gap:10px; align-items:center; margin-top:32px; flex-wrap:wrap}
.t-btn{font-family:var(--sans); font-size:.95rem; font-weight:500; padding:12px 22px; border-radius:5px; border:1px solid transparent; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; min-height:46px}
.btn-pri{background:var(--accent); color:var(--on-accent)}
.btn-pri:disabled{background:var(--track); color:var(--faint); cursor:not-allowed}
.btn-sec{background:transparent; color:var(--ink-2); border-color:var(--rule-strong)}
.t-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.hint{font-size:.84rem; color:var(--faint)}

/* form */
.fields{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); margin-top:24px}
.field{display:flex; flex-direction:column; gap:6px}
.field.full{grid-column:1/-1}
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}
.gracias{border:1px solid var(--rule); border-left:3px solid var(--ok); border-radius:0 6px 6px 0; background:var(--surface); padding:24px 26px; margin-top:24px}
.gracias h3{font-size:1.25rem; margin-bottom:10px}
.gracias p{margin:0; font-size:.95rem}
.gracias p+p{margin-top:.7em}
label{font-size:.86rem; font-weight:500; color:var(--ink)}
label .opt{font-weight:400; color:var(--faint); font-size:.8rem}
input,select,textarea{
  font-family:var(--sans); font-size:1rem; padding:11px 13px; border-radius:5px;
  border:1px solid var(--rule-strong); background:var(--surface); color:var(--ink); min-height:46px; width:100%;
}
textarea{min-height:88px; resize:vertical; line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.consent{display:flex; gap:10px; align-items:flex-start; margin-top:20px; font-size:.86rem; color:var(--ink-2); line-height:1.5}
.consent input{width:20px; height:20px; min-height:20px; flex:none; margin-top:2px; accent-color:var(--accent)}
.err{color:var(--bad); font-size:.82rem; min-height:1.1em}

/* result */
.score{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin:6px 0 4px}
.score .big{font-family:var(--serif); font-size:clamp(3.2rem,11vw,5rem); line-height:.9; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.score .of{font-family:var(--mono); font-size:.85rem; color:var(--muted)}
.lvl{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:600; font-size:1.05rem; padding:7px 15px; border-radius:5px; margin-top:14px}
.lvl.g{background:var(--ok-bg); color:var(--ok)} .lvl.y{background:var(--warn-bg); color:var(--warn)} .lvl.r{background:var(--bad-bg); color:var(--bad)}
.lvl svg{flex:none}

.bars{margin-top:30px; border:1px solid var(--rule); border-radius:6px; background:var(--surface); overflow:hidden}
.bar{padding:17px 20px; border-bottom:1px solid var(--rule)}
.bar:last-child{border-bottom:none}
.bar .top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:9px; flex-wrap:wrap}
.bar .nm{font-weight:600; font-size:.95rem; color:var(--ink)}
.bar .nm i{font-family:var(--mono); font-size:.65rem; white-space:nowrap; font-style:normal; color:var(--faint); letter-spacing:.06em; margin-left:7px; font-weight:400}
.bar .val{font-family:var(--mono); font-size:.9rem; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.bar .val em{font-style:normal; color:var(--faint); font-size:.8rem; margin-left:5px}
.track{height:10px; background:var(--track); border-radius:5px; overflow:hidden}
.track i{display:block; height:100%; width:0; background:var(--accent); border-radius:5px; transition:width 700ms cubic-bezier(.22,.61,.36,1)}
.chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; padding:3px 9px; border-radius:3px; margin-top:10px}
.chip.g{background:var(--ok-bg); color:var(--ok)} .chip.y{background:var(--warn-bg); color:var(--warn)} .chip.r{background:var(--bad-bg); color:var(--bad)}
.chip svg{flex:none}

.gaps{margin-top:34px; display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.gap{border:1px solid var(--rule); border-left:3px solid var(--bad); border-radius:0 6px 6px 0; background:var(--surface); padding:18px 20px}
.gap .h{font-family:var(--mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--bad); display:block; margin-bottom:8px}
.gap .nm{font-family:var(--serif); font-size:1.1rem; font-weight:600; color:var(--ink); margin-bottom:6px}
.gap p{margin:0; font-size:.91rem; line-height:1.55}
.gap p+p{margin-top:.6em}

.note{border:1px solid var(--rule-strong); border-left:3px solid var(--accent); border-radius:0 6px 6px 0; background:var(--surface); padding:17px 21px; margin-top:28px}
.note .h{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:7px}
.note p{margin:0; font-size:.9rem}
.note p+p{margin-top:.65em}

details{margin-top:26px; border:1px dashed var(--rule-strong); border-radius:6px; background:var(--sunken)}
summary{cursor:pointer; padding:13px 18px; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--muted)}
summary:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
details pre{margin:0; padding:0 18px 18px; overflow-x:auto; font-family:var(--mono); font-size:.72rem; line-height:1.65; color:var(--ink-2)}

footer{border-top:1px solid var(--rule); padding-block:26px 44px; font-size:.8rem; color:var(--faint)}
footer p{color:var(--faint); font-size:.8rem; max-width:70ch}
.reveal{opacity:0; transform:translateY(14px); transition:opacity var(--dur) ease-out, transform var(--dur) cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  /* *{animation/transition:none} ya lo cubre site.css globalmente */
  .reveal{opacity:1; transform:none}
}
@media (max-width:420px){
  .scale{gap:5px} .scale button{min-height:46px; font-size:.92rem}
  .legend{font-size:.6rem}
}