/* Inspecta — branding negro / blanco */
:root{
  --black:#0a0a0a;
  --white:#ffffff;
  --gray:#8a8a8a;
  --gray-2:#e6e6e6;
  --radius:22px;
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  color:var(--black);
  background:var(--white);
}
body.theme-dark{background:var(--black);color:var(--white)}
img{max-width:100%}

/* Botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 28px;border-radius:999px;border:none;cursor:pointer;
  font-size:16px;font-weight:600;text-decoration:none;transition:.2s var(--ease);
  width:100%;
}
.btn--light{background:var(--white);color:var(--black)}
.btn--light:active{transform:scale(.98)}
.btn--ghost{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.4)}
.btn--dark{background:var(--black);color:var(--white)}
.btn--dark:active{transform:scale(.98)}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- INTRO pantalla-full ---------- */
.intro{min-height:100dvh;display:flex;flex-direction:column;background:var(--black)}
.intro__art{
  flex:1;display:flex;align-items:center;justify-content:center;
  color:var(--white);padding:48px 24px 12px;
}
.intro__illustration{width:min(58vw,240px);height:auto}
.intro__panel{
  background:var(--black);color:var(--white);
  padding:8px 28px calc(36px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:16px;
}
.intro__eyebrow{font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray)}
.intro__title{font-size:40px;line-height:1.05;font-weight:800;letter-spacing:-.02em}
.intro__lead{color:#c7c7c7;font-size:16px;line-height:1.5;max-width:34ch}
.intro__note{
  font-size:14px;color:#cfcfcf;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px;
}
.intro__note strong{color:var(--white)}

/* ---------- App wizard ---------- */
body.app{background:var(--black)}
.app-shell{min-height:100dvh;display:flex;flex-direction:column;color:var(--white)}
.topbar{
  display:flex;align-items:center;gap:14px;
  padding:calc(14px + env(safe-area-inset-top)) 20px 14px;
}
.topbar__brand{font-weight:700;letter-spacing:.02em}
.progress{flex:1;height:4px;background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden}
.progress__bar{display:block;height:100%;width:0;background:var(--white);transition:width .4s var(--ease)}

.steps{flex:1;position:relative;display:flex;flex-direction:column}
.step{
  flex:1;display:none;flex-direction:column;justify-content:space-between;
  padding:8px 24px calc(28px + env(safe-area-inset-bottom));
}
.step.is-active{display:flex;animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.step__body{padding-top:24px;display:flex;flex-direction:column;gap:16px}
.step__body.center{align-items:center;text-align:center;justify-content:center;flex:1}
.step__title{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.step__text{color:#c2c2c2;font-size:16px;line-height:1.55;max-width:38ch}
.step__actions{display:flex;flex-direction:column;gap:12px;padding-top:20px}
.step__actions--row{flex-direction:row}
.step__actions--row .btn{flex:1}

.checklist{list-style:none;display:flex;flex-direction:column;gap:10px;text-align:left}
.checklist li{position:relative;padding-left:26px;color:#d0d0d0}
.checklist li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;border:2px solid var(--white);border-radius:50%}

/* Tarjeta de datos */
.datacard{border:1px solid rgba(255,255,255,.14);border-radius:16px;overflow:hidden}
.datacard__row{display:flex;justify-content:space-between;gap:12px;padding:14px 16px}
.datacard__row+ .datacard__row{border-top:1px solid rgba(255,255,255,.1)}
.datacard dt{color:var(--gray)}
.datacard dd{font-weight:600;text-align:right;word-break:break-word}
.datacard--light{border-color:var(--gray-2)}
.datacard--light .datacard__row+.datacard__row{border-top-color:var(--gray-2)}
.datacard--light dt{color:#777}

/* Campos */
.field{display:flex;flex-direction:column;gap:8px}
.field__label{font-size:14px;color:var(--gray)}
.field__input{
  padding:15px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);color:var(--white);font-size:16px;
}
.field__input:focus{outline:none;border-color:var(--white)}
select.field__input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
select.field__input option{color:#000}
.field--check{flex-direction:row;align-items:flex-start;gap:12px;color:#d0d0d0;font-size:15px;line-height:1.4;cursor:pointer}
.field--check input{
  appearance:none;-webkit-appearance:none;margin:0;
  width:24px;height:24px;flex:none;border-radius:7px;
  border:2px solid rgba(255,255,255,.5);background:transparent;
  position:relative;cursor:pointer;transition:.15s var(--ease);
}
.field--check input:checked{background:var(--white);border-color:var(--white)}
.field--check input:checked::after{
  content:"";position:absolute;left:8px;top:3px;
  width:6px;height:12px;border:solid var(--black);
  border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}
.field--check input:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Formulario del titular */
.step__subtitle{font-size:15px;text-transform:uppercase;letter-spacing:.1em;color:var(--gray);margin-top:8px}
.form{display:flex;flex-direction:column;gap:16px}
.form__row{display:flex;gap:12px}
.form__row .field{flex:1;min-width:0}
.field__error{font-size:13px;color:#ff8a8a;min-height:0}
.field__error:empty{display:none}

/* Teléfono con prefijo Paraguay */
.phone{display:flex;align-items:stretch;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(255,255,255,.05);overflow:hidden}
.phone:focus-within{border-color:var(--white)}
.phone__prefix{display:flex;align-items:center;gap:6px;padding:0 12px;font-size:16px;font-weight:600;color:#d0d0d0;background:rgba(255,255,255,.06);white-space:nowrap}
.phone__input{border:none !important;background:transparent !important;border-radius:0 !important;flex:1;min-width:0}
.phone__input:focus{outline:none}

/* Resumen */
.summary{list-style:none;display:flex;flex-direction:column;gap:10px}
.summary li{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border:1px solid rgba(255,255,255,.14);border-radius:14px}
.tag{font-size:13px;font-weight:700;padding:4px 12px;border-radius:99px}
.tag--pass{background:#e9ffe9;color:#0a7a0a}
.tag--fail{background:#ffe9e9;color:#a10000}
.tag--skipped,.tag--unsupported{background:#eee;color:#555}

.done-check{width:76px;height:76px;border-radius:50%;background:var(--white);color:var(--black);font-size:40px;display:flex;align-items:center;justify-content:center;font-weight:700}
.report-code{font-size:26px;font-weight:800;letter-spacing:.08em}

/* Overlay de pruebas a pantalla completa */
.overlay{position:fixed;inset:0;z-index:50;touch-action:none;user-select:none;-webkit-user-select:none}
.overlay__hint{position:fixed;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom));text-align:center;font-size:15px;font-weight:600;pointer-events:none}
.touch-cell{position:absolute;transition:opacity .12s linear}

/* ---------- Certificado ---------- */
.report-page,.msg-page{max-width:620px;margin:0 auto;padding:32px 22px 60px}
.report-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.report-head__brand{font-weight:800;font-size:20px}
.badge{font-size:13px;font-weight:700;padding:6px 14px;border-radius:99px}
.badge--pass{background:#0a7a0a;color:#fff}
.badge--attention{background:#c98a00;color:#fff}
.badge--fail{background:#a10000;color:#fff}
.report-title{font-size:30px;font-weight:800;letter-spacing:-.02em}
.report-sub{color:#666;margin:6px 0 26px}
.report-block{margin-bottom:26px}
.report-block h2{font-size:15px;text-transform:uppercase;letter-spacing:.1em;color:#999;margin-bottom:12px}
.report-tests{list-style:none;display:flex;flex-direction:column;gap:8px}
.report-tests__item{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border:1px solid var(--gray-2);border-radius:14px;text-transform:capitalize}
.report-foot{border-top:1px solid var(--gray-2);padding-top:18px;color:#777;font-size:13px}
.report-foot__hash{word-break:break-all;margin-top:6px;font-family:ui-monospace,Menlo,monospace}
.report-actions{margin-top:28px}

/* Impresión / PDF del certificado */
@media print{
  @page{margin:16mm}
  body{background:#fff !important;color:#000 !important}
  .no-print{display:none !important}
  .report-page{max-width:100%;padding:0}
  .datacard,.report-tests__item{break-inside:avoid}
  .badge{border:1px solid #000;color:#000 !important;background:#fff !important}
}

.msg-page{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;text-align:center;gap:12px}
.msg-page h1{font-size:34px}
.msg-page p{color:#bdbdbd;max-width:40ch;margin:0 auto}
.msg-page--light p{color:#666}