/* ===== Plataforma ===== */
body{background:radial-gradient(900px 500px at 100% -10%,rgba(27,72,146,.45),transparent 60%),var(--navy-900);min-height:100svh}
.app{min-height:100svh;display:flex;flex-direction:column}
.barra-app{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;background:rgba(4,11,29,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--borde)}
.marca-app{display:flex;align-items:center}
.marca-app .logo{height:32px;width:auto}
.marca-app b{color:var(--oro);font-weight:400}
.marca-app .punto{width:12px;height:12px;border-radius:50%;background:#fff}
.barra-der{display:flex;gap:8px}
.btn-ico{padding:8px 14px;border-radius:999px;border:1px solid var(--borde);font-size:.85rem;color:var(--texto-2)}
.btn-ico:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.btn-texto{color:var(--cian);font-size:.9rem;font-weight:500;padding:6px 0;background:none}
.btn-peq{padding:8px 16px;font-size:.85rem}
.vista{flex:1;width:min(920px,100% - 32px);margin:0 auto;padding:24px 0 calc(110px + env(safe-area-inset-bottom));outline:none}
.cargando-app{color:var(--texto-3);text-align:center;padding:80px 0}
.tenue{color:var(--texto-3);font-size:.88rem}
.centro{text-align:center}
.ok{color:var(--verde)} .ko{color:var(--rojo)}

/* Barra de pestañas inferior (móvil) y lateral superior (escritorio) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(7,20,49,.94);backdrop-filter:blur(16px);border-top:1px solid var(--borde);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.72rem;color:var(--texto-3);padding:6px 0;border-radius:12px}
.tabbar a span{font-size:1.25rem;line-height:1}
.tabbar a b{font-weight:500}
.tabbar a.activo{color:var(--oro);background:rgba(255,207,63,.08)}
@media (min-width:900px){
  .tabbar{top:calc(12px + env(safe-area-inset-top));bottom:auto;left:50%;right:auto;transform:translateX(-50%);width:auto;display:flex;gap:4px;background:none;border:0;padding:0;backdrop-filter:none;z-index:31}
  .tabbar a{flex-direction:row;gap:8px;font-size:.88rem;padding:8px 16px;border-radius:999px}
  .tabbar a span{font-size:1rem}
  .vista{padding-bottom:60px}
}

/* Login */
.login{max-width:440px;margin:6vh auto 0;padding:34px 28px}
.login h1{font-size:2.8rem;margin:10px 0 8px}
.sub{color:var(--texto-2);font-size:.95rem;margin-bottom:24px}
.form{display:grid;gap:12px}
.form label{font-size:.85rem;color:var(--texto-2)}
.form input{width:100%;padding:15px 16px;border-radius:12px;border:1.5px solid var(--borde);background:rgba(255,255,255,.04);color:#fff;font:inherit;font-size:1rem}
.form input:focus{outline:none;border-color:var(--cian)}
.input-codigo{letter-spacing:.5em;text-align:center;font-size:1.5rem!important;font-weight:600}
.aviso-local{margin-top:16px;font-size:.8rem;color:var(--oro)}
.legal-mini{margin-top:20px;font-size:.75rem;color:var(--texto-3)}
.legal-mini a{text-decoration:underline}

/* Inicio */
.saludo{margin:8px 0 22px}
.saludo h1{font-size:clamp(2.4rem,6vw,3.4rem);margin-top:6px}
.banner{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 24px;margin-bottom:22px;border-color:rgba(255,207,63,.35);background:linear-gradient(120deg,rgba(255,207,63,.12),rgba(255,255,255,.02))}
.banner h2{font-size:1.8rem;color:var(--oro)}
.banner p{color:var(--texto-2);font-size:.9rem}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.kpi{padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px}
.kpi p{font-size:.78rem;color:var(--texto-3)}
.grande{font-size:2.6rem;line-height:1}
.grande small{font-size:1.2rem;color:var(--texto-3)}
.anillo{--p:0;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--oro) calc(var(--p)*1%),rgba(255,255,255,.08) 0)}
.anillo::before{content:"";grid-area:1/1;width:62px;height:62px;border-radius:50%;background:var(--navy-800)}
.anillo span{grid-area:1/1;position:relative;font-size:1.5rem}
.modos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.modos.dos{margin-top:12px}
.modo{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--radio);border:1px solid var(--borde);background:var(--vidrio);transition:border-color .15s,transform .15s}
.modo:hover{border-color:rgba(63,208,255,.4);transform:translateY(-2px)}
.modo h3{font-size:1rem}
.modo p{font-size:.8rem;color:var(--texto-3)}
.modo div{flex:1}
.modo-ico{flex:0 0 44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.25rem;background:rgba(255,255,255,.06)}
.modo-dest{grid-column:1/-1;border-color:rgba(255,207,63,.4);background:linear-gradient(120deg,rgba(27,72,146,.6),rgba(47,111,224,.25))}
.modo-dest .modo-ico{background:var(--oro);color:#0a1430}
.modo-dest h3{font-size:1.15rem}
.flecha{color:var(--texto-3);font-size:1.2rem}
.pdf,.instalar-ayuda{padding:20px 22px;margin-bottom:16px}
.pdf{display:flex;justify-content:space-between;align-items:center;gap:16px}
.pdf p,.instalar-ayuda p{color:var(--texto-2);font-size:.86rem}
.instalar-ayuda h3{margin-bottom:6px;font-size:1rem}

/* Temas */
.temas{display:grid;gap:12px}
.tema{display:flex;align-items:center;gap:16px;padding:18px 20px;transition:border-color .15s}
.tema:hover{border-color:rgba(63,208,255,.4)}
.tema-ico{font-size:1.6rem}
.tema-info{flex:1}
.tema-info h3{font-size:1rem;margin-bottom:8px}
.tema-info p{font-size:.78rem;color:var(--texto-3);margin-top:6px}
.mb{height:8px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}
.mb i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--azul-claro),var(--cian))}
.mb i.ok{background:var(--verde)} .mb i.medio{background:var(--oro)} .mb i.bajo{background:var(--rojo)}

/* Runner de preguntas */
.runner-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.runner-tit{font-weight:600;font-size:.95rem;text-align:center;flex:1}
.runner-marc{color:var(--oro);font-weight:600;font-size:.9rem}
.barra{height:6px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:16px}
.barra-relleno{height:100%;width:0;background:linear-gradient(90deg,var(--cian),var(--azul-claro));transition:width .3s}
.preg-caja{padding:24px}
.preg-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.8rem;color:var(--texto-3);margin-bottom:14px;flex-wrap:wrap}
.chip{display:inline-block;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.07);font-size:.72rem;color:var(--texto-2)}
.chip-oro{background:rgba(255,207,63,.15);color:var(--oro)}
.estrella{font-size:1.5rem;color:var(--texto-3);line-height:1;padding:2px 6px}
.estrella.on{color:var(--oro)}
.runner-acc{display:flex;justify-content:space-between;gap:12px;margin-top:16px;position:sticky;bottom:calc(76px + env(safe-area-inset-bottom));padding:12px 0;background:linear-gradient(transparent,var(--navy-900) 35%)}
.runner-acc .btn-oro{min-width:160px}
@media (min-width:900px){.runner-acc{bottom:0}}
.art{color:var(--cian);font-weight:500}

/* Simulacro */
.reloj{font-size:2rem;color:var(--oro);letter-spacing:.04em}
.reloj.urgente{color:var(--rojo);animation:latido 1s infinite}
@keyframes latido{50%{opacity:.5}}
.mapa{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin-bottom:16px}
.mapa button{aspect-ratio:1;border-radius:8px;border:1px solid var(--borde);font-size:.78rem;color:var(--texto-3);background:var(--vidrio)}
.mapa button.hecha{background:rgba(63,208,255,.18);color:#fff;border-color:rgba(63,208,255,.4)}
.mapa button.actual{outline:2px solid var(--oro);outline-offset:1px;color:#fff}
.intro-sim .reglas{list-style:none;display:grid;gap:10px;margin:20px 0 26px;color:var(--texto-2);text-align:left}
.intro-sim .reglas li::before{content:"● ";color:var(--oro)}
.vacio,.resultado{padding:34px 26px;text-align:center}
.vacio h2,.vacio h1{font-size:2.6rem;margin:8px 0 12px}
.vacio p{color:var(--texto-2);margin-bottom:22px}
.intro-sim{text-align:left}
.nota{font-size:6rem;line-height:1;margin:10px 0}
.sello{display:inline-block;font-weight:700;letter-spacing:.2em;padding:6px 18px;border-radius:999px;border:2px solid currentColor;margin-bottom:12px}
.resultado p{color:var(--texto-2)}
.desglose{display:grid;gap:8px;max-width:420px;margin:20px auto;text-align:left}
.desglose div{display:flex;justify-content:space-between;font-size:.9rem;padding:8px 12px;border-radius:10px;background:var(--vidrio)}
.fila-btn{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:20px 0 10px}
.sub-h{font-size:2rem;margin:34px 0 14px}
.revisada{margin-bottom:14px}
.revisada b.ok{color:var(--verde)} .revisada b.ko{color:var(--rojo)}

/* Progreso */
.bloque{padding:22px;margin-bottom:16px}
.bloque h2{font-size:1.05rem;margin-bottom:16px}
.fila-tema{display:grid;grid-template-columns:minmax(150px,1.2fr) 2fr 48px;gap:12px;align-items:center;font-size:.86rem;color:var(--texto-2);margin-bottom:12px}
.fila-tema b{color:#fff;text-align:right}
.graf{position:relative;height:200px;display:flex;align-items:flex-end;gap:8px;padding:0 0 22px;border-bottom:1px solid var(--borde)}
.graf-col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;position:relative}
.graf-col small{position:absolute;bottom:-20px;font-size:.65rem;color:var(--texto-3);white-space:nowrap}
.graf-barra{width:100%;max-width:34px;border-radius:6px 6px 2px 2px}
.graf-barra.ok{background:var(--verde)} .graf-barra.ko{background:var(--rojo)}
.graf-corte{position:absolute;left:0;right:0;border-top:1.5px dashed var(--oro);z-index:1;margin-bottom:22px}
.graf-corte span{position:absolute;right:0;top:-18px;font-size:.7rem;color:var(--oro)}
.cuenta p{color:var(--texto-2);font-size:.9rem;margin-bottom:8px}

/* Planes en la app */
.planes-app{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:20px}
.plan-app{padding:24px 20px;display:flex;flex-direction:column;gap:10px;position:relative}
.plan-app p{color:var(--texto-2);font-size:.86rem;flex:1}
.plan-app .precio{display:flex;align-items:baseline;gap:4px;color:#fff;font-weight:600;flex:0}
.plan-app .precio .titulo{font-size:3rem}
.plan-app.dest{border:1.5px solid var(--oro)}
.plan-cinta{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--oro);color:#0a1430;font-size:.7rem;font-weight:700;padding:4px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}

.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:#fff;color:#0a1430;padding:12px 20px;border-radius:999px;font-size:.88rem;font-weight:500;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60;max-width:calc(100% - 32px);text-align:center;box-shadow:var(--sombra)}
.toast.ver{opacity:1;transform:translate(-50%,0)}

@media (max-width:700px){
  .kpis{grid-template-columns:1fr 1fr}
  .modos{grid-template-columns:1fr}
  .banner,.pdf{flex-direction:column;align-items:flex-start}
  .planes-app{grid-template-columns:1fr}
  .plan-app.dest{order:-1}
  .preg-caja{padding:18px}
  .mapa{grid-template-columns:repeat(10,1fr);gap:4px}
  .mapa button{font-size:.7rem;border-radius:6px}
  .fila-tema{grid-template-columns:1fr 60px 40px;font-size:.8rem}
  .nota{font-size:4.6rem}
  .runner-acc .btn{flex:1;min-width:0}
  .barra-der .btn-ico span{display:none}
}

.vista.sin-tabbar{padding-bottom:60px}
.vista.sin-tabbar .runner-acc{bottom:0}
.cta-eg{margin:24px auto 6px;padding:22px;max-width:560px;border-color:rgba(255,207,63,.35);background:linear-gradient(120deg,rgba(255,207,63,.10),rgba(255,255,255,.02))}
.cta-eg h2{font-size:2rem;color:var(--oro)}
.sel-idioma{background:rgba(255,255,255,.06);color:var(--texto);border:1px solid var(--borde);border-radius:999px;padding:8px 12px;font:inherit;font-size:.82rem;cursor:pointer}
.sel-idioma option{background:#071431;color:#fff}
.plan-app .tachado{text-decoration:line-through;color:var(--texto-3);font-size:.95rem;margin-right:6px;font-weight:500}
.plan-app .precio small{font-size:.85rem;color:var(--texto-2)}
.dto{position:absolute;top:14px;right:14px;background:var(--verde);color:#04122b;font-weight:700;font-size:.78rem;padding:3px 10px;border-radius:999px}
.plan-app .precio{flex-wrap:wrap;row-gap:0}
.plan-app .tachado{flex-basis:100%;white-space:nowrap}
.form-opinion{margin-top:12px}
.form-opinion textarea{width:100%;padding:14px 16px;border-radius:12px;border:1.5px solid var(--borde);background:rgba(255,255,255,.04);color:#fff;font:inherit;resize:vertical}
.form-opinion textarea:focus{outline:none;border-color:var(--cian)}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dos-col > div{display:grid;gap:8px}
.estrellas-sel{display:flex;gap:4px}
.estrellas-sel button{font-size:1.8rem;color:var(--texto-3);line-height:1}
.estrellas-sel button.on{color:var(--oro)}
.check{display:flex;gap:10px;align-items:center;font-size:.9rem;color:var(--texto-2)}
@media (max-width:600px){.dos-col{grid-template-columns:1fr}}