:root{
  color-scheme: light;
  --bg:#F5F5F7;
  --surface:#FFFFFF;
  --surface-soft:#FBFBFD;
  --control:#F2F2F7;
  --ink:#1D1D1F;
  --muted:#6E6E73;
  --muted-2:#8E8E93;
  --line:rgba(60,60,67,.18);
  --line-soft:rgba(60,60,67,.10);
  --accent:#0071E3;
  --accent-press:#006EDB;
  --green:#28CD41;
  --red:#FF3B30;
  --orange:#FF9500;
  --radius-xl:26px;
  --radius-lg:20px;
  --radius-md:16px;
  --shadow-card:0 12px 28px rgba(0,0,0,.055);
  --shadow-soft:0 4px 14px rgba(0,0,0,.045);
  --max-app:720px;
}
*{box-sizing:border-box}
html{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}
body{
  margin:0;
  min-height:100svh;
  background:linear-gradient(180deg,#fff 0%,#FBFBFD 46%,#F5F5F7 100%);
}
button,input,select{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid rgba(0,113,227,.24);
  outline-offset:2px;
}
#app-shell{
  width:min(100%,var(--max-app));
  min-height:100svh;
  margin:0 auto;
  padding:calc(12px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));
}
.app-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:48px;
  margin:0 0 8px;
  padding:4px 2px;
}
.brand-wrap{display:flex;align-items:center;gap:12px;min-width:0}
.brand{height:28px;max-width:104px;object-fit:contain;display:block;flex:0 0 auto}
.status-dot{
  display:inline-flex;
  align-items:center;
  gap:7px;
  max-width:min(390px,58vw);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12px;
  font-weight:650;
  color:var(--muted);
  background:rgba(255,255,255,.78);
  border:1px solid var(--line-soft);
  border-radius:999px;
  padding:6px 10px;
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset;
}
.status-dot::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  flex:0 0 auto;
  background:var(--orange);
  box-shadow:0 0 0 3px rgba(255,149,0,.12);
}
.status-dot.ready::before{background:var(--green);box-shadow:0 0 0 3px rgba(40,205,65,.13)}
.status-dot.error::before{background:var(--red);box-shadow:0 0 0 3px rgba(255,59,48,.13)}

/* Segmented control: never fixed on iOS browser, so it cannot cover content or Safari toolbar. */
.bottom-nav{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  margin:8px 0 14px;
  padding:4px;
  background:rgba(118,118,128,.12);
  border:1px solid rgba(60,60,67,.10);
  border-radius:18px;
}
.bottom-nav button{
  min-height:40px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:var(--muted);
  font-size:14px;
  font-weight:720;
}
.bottom-nav button.active{
  background:#fff;
  color:var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.04);
}
.screen{display:none}
.screen.active{display:block;animation:fade .16s ease}
@keyframes fade{from{opacity:.75;transform:translateY(4px)}to{opacity:1;transform:none}}

.hero-card,.form-card{
  background:rgba(255,255,255,.92);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);
  padding:22px;
  margin:0 0 14px;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.hero-card{position:relative;overflow:hidden}
.hero-card::after{
  content:"";
  position:absolute;
  right:-110px;
  bottom:-155px;
  width:240px;
  height:240px;
  border-radius:50%;
  background:rgba(0,113,227,.032);
  pointer-events:none;
}
.hero-input,.result-hero{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.hero-card.compact{padding:22px}
.eyebrow{
  display:block;
  margin:0 0 9px;
  color:var(--accent);
  font-size:11px;
  line-height:1;
  font-weight:820;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.hero-card h1{
  position:relative;
  z-index:1;
  margin:0 0 8px;
  font-size:38px;
  line-height:.95;
  letter-spacing:-.058em;
  font-weight:850;
}
.result-hero h1{font-size:46px}
.hero-card p{
  position:relative;
  z-index:1;
  max-width:42rem;
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.42;
  font-weight:450;
}
.hero-mini{
  position:relative;
  z-index:1;
  width:72px;
  height:72px;
  border-radius:23px;
  background:linear-gradient(180deg,#fff,#F7FAFF);
  border:1px solid rgba(0,113,227,.15);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,113,227,.075);
}
.hero-mini strong{font-size:29px;line-height:.95;letter-spacing:-.055em;color:var(--accent)}
.hero-mini span{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.form-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 14px;
}
.form-section-head.with-margin{margin-top:24px}
h2{
  margin:0;
  color:var(--muted-2);
  font-size:12px;
  line-height:1;
  font-weight:850;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.step-pill{
  color:var(--accent);
  background:rgba(0,113,227,.08);
  border:1px solid rgba(0,113,227,.12);
  border-radius:999px;
  padding:5px 8px;
  font-size:11px;
  font-weight:780;
}
label{
  display:block;
  margin:0 0 14px;
  color:#3A3A3C;
  font-size:14px;
  font-weight:680;
  letter-spacing:-.01em;
}
select,input{
  width:100%;
  min-height:48px;
  margin-top:7px;
  border:1px solid var(--line);
  border-radius:15px;
  background:linear-gradient(180deg,#fff,#FAFAFC);
  color:var(--ink);
  padding:0 14px;
  font-size:16px;
  font-weight:650;
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset;
}
select:focus,input:focus{
  border-color:rgba(0,113,227,.55);
  background:#fff;
  box-shadow:0 0 0 4px rgba(0,113,227,.12),0 1px 0 rgba(255,255,255,.95) inset;
}
input[type="number"]{font-variant-numeric:tabular-nums}
.grid-2,.grid-3{display:grid;gap:12px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.progress-card{
  margin:4px 0 18px;
  padding:15px;
  border:1px solid rgba(0,113,227,.13);
  border-radius:18px;
  background:#F7FAFF;
}
.progress-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.progress-top span{color:var(--muted);font-size:13px;font-weight:720}
.progress-top strong{font-size:21px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.progress-track{height:8px;border-radius:999px;background:rgba(118,118,128,.16);overflow:hidden}
.progress-fill{height:100%;width:0;background:var(--accent);border-radius:inherit;transition:width .18s ease,background .18s ease}
.progress-card.complete .progress-fill{background:var(--green)}
.progress-card.error .progress-fill{background:var(--red)}
.progress-card small{display:block;margin-top:10px;color:var(--muted);font-size:12px;font-weight:620;line-height:1.35}
.response-card{
  border:1px solid var(--line-soft);
  border-radius:20px;
  background:rgba(251,251,253,.78);
  padding:17px 16px 3px;
  margin:0 0 12px;
}
.response-title{display:flex;align-items:baseline;gap:8px;margin:0 0 12px}
.response-title strong{font-size:24px;letter-spacing:-.055em;line-height:1;color:var(--ink)}
.response-title span{font-size:11px;font-weight:850;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2)}
.primary-btn,.secondary-btn,.ghost-btn{
  border:1px solid var(--line);
  border-radius:16px;
  min-height:46px;
  padding:0 16px;
  font-weight:760;
  letter-spacing:-.01em;
}
.primary-btn{
  width:100%;
  min-height:54px;
  margin-top:8px;
  border:0;
  color:#fff;
  background:linear-gradient(180deg,#0A84FF,#0071E3);
  box-shadow:0 7px 17px rgba(0,113,227,.22);
}
.primary-btn:active{background:var(--accent-press)}
.secondary-btn{background:rgba(255,255,255,.92);color:var(--ink)}
.ghost-btn{background:rgba(255,255,255,.78);color:var(--accent);border-color:rgba(60,60,67,.16)}
.compact-btn{min-height:36px;border-radius:13px;font-size:13px;padding:0 12px}
.result-topbar{display:flex;justify-content:space-between;gap:10px;margin:0 0 12px}
.actions-row{display:flex;gap:12px;margin:4px 0 14px}
.validation-msg{display:none;border-radius:16px;padding:12px 13px;margin:12px 0;background:#FFF8E8;color:#7A4A00;border:1px solid #F3D59B;font-size:13px;font-weight:650}.validation-msg.show{display:block}.validation-msg.error{background:#FFF0EF;color:#8C1D18;border-color:#F5B4AF}
.meta-stack{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-width:260px}
.meta-chip{display:inline-flex;border:1px solid var(--line-soft);background:rgba(245,245,247,.86);border-radius:999px;padding:7px 10px;font-size:12px;font-weight:740;color:var(--muted);white-space:nowrap}
.kpi-grid{display:grid;gap:12px;margin:14px 0}.primary-kpis{grid-template-columns:repeat(3,1fr)}
.kpi-card{position:relative;overflow:hidden;border:1px solid var(--line-soft);background:rgba(255,255,255,.90);border-radius:22px;padding:18px 16px;min-width:0;box-shadow:var(--shadow-soft)}
.kpi-card:before{content:"";position:absolute;left:16px;right:16px;top:0;height:3px;border-radius:999px;background:var(--line-soft)}
.kpi-card span{display:block;font-size:12px;font-weight:850;letter-spacing:.12em;color:var(--muted-2)}
.kpi-card strong{display:block;font-size:34px;letter-spacing:-.06em;line-height:1.02;margin:9px 0 7px;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi-card small{display:block;color:var(--muted);font-size:12px;font-weight:620;line-height:1.28}
.kpi-card.good strong,.kpi-card.good span{color:var(--green)}.kpi-card.bad strong,.kpi-card.bad span{color:var(--red)}.kpi-card.mixed strong,.kpi-card.mixed span{color:var(--orange)}
.kpi-card.good:before{background:var(--green)}.kpi-card.bad:before{background:var(--red)}.kpi-card.mixed:before{background:var(--orange)}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mini-table{margin-top:14px}.mini-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.mini-row:last-child{border-bottom:0}.mini-row span{color:var(--muted);font-weight:680}.mini-row strong{font-variant-numeric:tabular-nums;text-align:right;font-size:16px;letter-spacing:-.025em}
.saved-cases{margin-top:14px;color:var(--muted);font-weight:620}.case-pill{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line-soft);background:rgba(251,251,253,.78);border-radius:14px;padding:11px 13px;margin-top:8px;font-size:13px}.case-pill strong{white-space:nowrap}.case-pill span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,12px);opacity:0;pointer-events:none;background:rgba(28,28,30,.92);color:#fff;border-radius:999px;padding:11px 16px;font-size:14px;font-weight:670;transition:opacity .18s ease,transform .18s ease;z-index:30}.toast.show{opacity:1;transform:translate(-50%,0)}

@media (min-width:900px){
  :root{--max-app:760px}
  #app-shell{padding-top:24px}
  .form-card,.hero-card{padding:26px}
  .hero-card h1{font-size:44px}
  .result-hero h1{font-size:50px}
  .app-header{margin-bottom:12px}
}
@media (max-width:560px){
  #app-shell{padding-inline:16px;padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  .app-header{min-height:46px;margin-bottom:6px}.brand-wrap{gap:10px}.brand{height:27px;max-width:96px}
  .status-dot{max-width:calc(100vw - 146px);font-size:12px;padding:6px 9px}
  .bottom-nav{margin:6px 0 12px;border-radius:17px}.bottom-nav button{min-height:39px;font-size:14px;border-radius:13px}
  .hero-input,.result-hero{grid-template-columns:1fr}.hero-mini{display:none}.meta-stack{justify-content:flex-start;max-width:none}
  .result-grid{grid-template-columns:1fr}.hero-card,.form-card{border-radius:24px;padding:20px 18px;margin-bottom:12px}
  .hero-card h1{font-size:31px;line-height:1;letter-spacing:-.055em}.result-hero h1{font-size:40px}.hero-card p{font-size:15px;line-height:1.42}.eyebrow{font-size:10.5px;letter-spacing:.15em}
  .primary-kpis{grid-template-columns:1fr 1fr;gap:10px}.primary-kpis .kpi-card:nth-child(3){grid-column:1 / -1}.actions-row{display:grid;grid-template-columns:1fr;gap:10px}.step-pill{display:none}
  .kpi-card{border-radius:20px;padding:16px 15px}.kpi-card strong{font-size:31px}.kpi-card small{font-size:12px}
  .grid-2{grid-template-columns:1fr;gap:0}.grid-3{gap:8px}
  select,input{font-size:16px;min-height:48px;border-radius:15px;padding-inline:13px}
  label{font-size:13.5px;margin-bottom:13px}
  .response-card{border-radius:20px;padding:15px 13px 2px}.response-title strong{font-size:21px}.response-title span{font-size:10px;letter-spacing:.14em}.progress-card{border-radius:20px}.form-section-head.with-margin{margin-top:20px}.secondary-btn{min-height:50px}
  .result-topbar .ghost-btn{min-height:42px;border-radius:15px;font-size:14px;padding:0 13px}
}
@media (max-width:390px){
  #app-shell{padding-inline:14px}.hero-card h1{font-size:29px}.response-title{gap:6px}.response-title span{font-size:9.5px}.kpi-card strong{font-size:29px}.kpi-card span{font-size:11px}.kpi-card small{font-size:11.5px}.grid-3{gap:7px}.status-dot{max-width:calc(100vw - 138px);font-size:11px}.brand{height:26px}.hero-card,.form-card{padding:18px 16px}.bottom-nav button{font-size:13.5px}.mini-row strong{font-size:15px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Mejoras de auditoría: accesibilidad, privacidad, iOS/PWA y estados. */
.hint-inline{color:var(--muted-2);font-size:12px;font-weight:620}
.response-card{border:1px solid var(--line-soft)}
fieldset.response-card{min-inline-size:0}
legend.response-title{float:none;width:auto;padding:0;margin:0 0 12px}
legend.response-title + .grid-3{clear:both}
.validity-notice{margin-top:12px!important;padding:10px 12px;border-radius:14px;border:1px solid #F3D59B;background:#FFF8E8;color:#7A4A00;font-size:13px!important;font-weight:680;line-height:1.35!important}
.validity-notice.complete{border-color:rgba(40,205,65,.22);background:rgba(40,205,65,.08);color:#1F7A30}
.section-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.privacy-note{margin:12px 0 0;color:var(--muted);font-size:12px;line-height:1.4;font-weight:620}
.ios-install-help{position:fixed;left:50%;right:auto;bottom:calc(70px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:min(92vw,420px);z-index:25;background:rgba(255,255,255,.96);border:1px solid var(--line);box-shadow:var(--shadow-card);border-radius:18px;padding:12px 14px;color:var(--ink);font-size:13px;font-weight:700;text-align:center}
.kpi-card[aria-label]{outline:0}
[aria-current="page"]{color:var(--accent)}
@media (min-width:768px){
  .grid-3 label{font-size:13px}
}
@media (min-width:820px){
  .result-grid{grid-template-columns:1.1fr .9fr}
}
@media (max-width:390px){
  .grid-3 label{font-size:12px;letter-spacing:-.03em}
}


/* Ajustes 2.0.2 solicitados: alineación de campos, ayuda iOS descartable, KPIs con zócalo color. */

/* Alinea los inputs aunque la etiqueta central “Errores comisión” use dos líneas. */
.grid-3{
  align-items:stretch;
}
.grid-3 label{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:104px;
  line-height:1.14;
}
.grid-3 label input{
  margin-top:auto;
}

/* La ayuda iOS aparece al inicio y se descarta al tocarla. */
.ios-install-help{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid var(--line);
  cursor:pointer;
  transition:opacity .16s ease, transform .16s ease;
}
.ios-install-help.dismissed{
  opacity:0;
  transform:translate(-50%,8px);
}

/* Reemplaza la mini barra superior por un zócalo de color completo al pie de cada KPI. */
.kpi-card{
  padding-bottom:28px;
}
.kpi-card:before{
  content:none!important;
}
.kpi-card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:12px;
  background:var(--line-soft);
}
.kpi-card.good::after{background:var(--green)}
.kpi-card.bad::after{background:var(--red)}
.kpi-card.mixed::after{background:var(--orange)}

@media (max-width:560px){
  .grid-3 label{min-height:98px;font-size:13px}
  .grid-3 label input{min-height:48px}
}
@media (max-width:390px){
  .grid-3 label{min-height:96px;font-size:12px;line-height:1.12}
}


/* Ajustes 2.0.3: inputs numéricos más cómodos y KPIs con fondo suave. */

/* El aviso de validez pasa a un rol informativo gris, menos dominante que los KPIs. */
.validity-notice,
.validity-notice.complete{
  border-color:var(--line-soft)!important;
  background:rgba(245,245,247,.78)!important;
  color:var(--muted)!important;
}

/* Los KPIs pasan a usar fondo tintado completo, similar al aviso anterior. */
.kpi-card.good{
  background:linear-gradient(180deg, rgba(40,205,65,.105), rgba(40,205,65,.045))!important;
  border-color:rgba(40,205,65,.24)!important;
}
.kpi-card.bad{
  background:linear-gradient(180deg, rgba(255,59,48,.105), rgba(255,59,48,.045))!important;
  border-color:rgba(255,59,48,.24)!important;
}
.kpi-card.mixed{
  background:linear-gradient(180deg, rgba(255,149,0,.115), rgba(255,149,0,.05))!important;
  border-color:rgba(255,149,0,.28)!important;
}

/* Se elimina el zócalo inferior: el estado ahora lo comunica todo el fondo de la tarjeta. */
.kpi-card{
  padding-bottom:18px;
}
.kpi-card::after{
  content:none!important;
}

@media (max-width:560px){
  .kpi-card{padding-bottom:16px}
}


/* Ajustes 2.0.4: identidad PAC-EFRA3 y corrección de superposición t1/t2 en iOS/Safari. */
.hero-card h1{
  word-break:normal;
  overflow-wrap:normal;
}
.hero-card p{
  max-width:46rem;
}
.response-card{
  position:relative;
  padding-top:18px;
  overflow:visible;
}
.response-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
  min-height:28px;
  line-height:1.1;
}
.response-title strong{
  flex:0 0 auto;
}
.response-title span{
  min-width:0;
  overflow-wrap:anywhere;
}

/* Ya no se usa fieldset/legend para evitar bugs visuales de legend en Safari iOS. */
fieldset.response-card,
legend.response-title,
legend.response-title + .grid-3{
  all:unset;
}

@media (max-width:560px){
  .hero-card p{
    font-size:14.5px;
  }
  .response-card{
    padding-top:18px;
  }
  .response-title{
    margin-bottom:16px;
  }
  .response-title span{
    font-size:9.8px;
    letter-spacing:.13em;
  }
}
@media (max-width:390px){
  .hero-card h1{
    font-size:27px;
  }
  .hero-card p{
    font-size:14px;
  }
  .response-title{
    gap:7px;
  }
  .response-title span{
    font-size:9px;
    letter-spacing:.11em;
  }
}


/* Ajustes 2.1.0: hardening UX/UI, accesibilidad y producción. */
.net-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  font-size:12px;
  font-weight:720;
  color:var(--muted);
  background:rgba(245,245,247,.78);
  border:1px solid var(--line-soft);
  border-radius:999px;
  padding:6px 10px;
}
.net-status::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
}
.net-status.offline::before{background:var(--orange)}
.net-status.offline{color:#7A4A00;background:#FFF8E8;border-color:#F3D59B}

.field-note{
  margin:-7px 0 12px;
  color:var(--muted);
  font-size:12px;
  font-weight:650;
}
.disabled-card{
  opacity:.72;
}
.disabled-card input{
  background:rgba(245,245,247,.75);
  color:var(--muted-2);
}

input[aria-invalid="true"]{
  border-color:rgba(255,59,48,.72)!important;
  box-shadow:0 0 0 4px rgba(255,59,48,.12)!important;
}

.case-pill{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
}
.case-delete{
  border:1px solid rgba(60,60,67,.16);
  background:rgba(255,255,255,.72);
  color:var(--red);
  border-radius:999px;
  min-height:32px;
  padding:0 10px;
  font-size:12px;
  font-weight:760;
}




.kpi-card small{
  min-height:2.45em;
}

.privacy-note a{
  color:var(--accent);
  font-weight:760;
}

@media (max-width:560px){
  .brand-wrap{
    flex-wrap:wrap;
  }
  .net-status{
    font-size:11px;
    padding:5px 8px;
  }
  .case-pill{
    grid-template-columns:minmax(0,1fr) auto;
  }
  .case-delete{
    grid-column:1 / -1;
    justify-self:end;
    margin-top:8px;
  }
}


/* Ajustes 2.1.1: aviso de actualización menos intrusivo y acción Nuevo caso. */
.result-topbar{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
}
.result-topbar .ghost-btn{
  min-width:0;
  padding-inline:10px;
}





@media (max-width:390px){
  .result-topbar{
    gap:8px;
  }
  .result-topbar .ghost-btn{
    font-size:13px;
    padding-inline:7px;
  }
}


/* Ajustes 2.2.0-beta: beta multiplataforma Android/iOS. */
.beta-badge{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  border-radius:999px;
  padding:0 8px;
  background:rgba(0,113,227,.08);
  color:var(--accent);
  border:1px solid rgba(0,113,227,.13);
  font-size:11px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.android-install-help{
  position:fixed;
  left:50%;
  bottom:calc(70px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  max-width:min(92vw,440px);
  z-index:25;
  appearance:none;
  -webkit-appearance:none;
  background:rgba(255,255,255,.96);
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  border-radius:18px;
  padding:12px 14px;
  color:var(--ink);
  font-size:13px;
  font-weight:700;
  text-align:center;
  cursor:pointer;
  transition:opacity .16s ease, transform .16s ease;
}
.android-install-help.dismissed{
  opacity:0;
  transform:translate(-50%,8px);
}
.progress-track[role="progressbar"]:focus-visible{
  outline:3px solid rgba(0,113,227,.24);
  outline-offset:3px;
}


/* Ajuste 2.2.3: en computadora se oculta el bloque “60 estímulos” del encabezado principal. */
@media (min-width: 821px){
  .hero-input{
    grid-template-columns:1fr;
  }
  .hero-input .hero-mini{
    display:none;
  }
}