:root{
  --tinta:#1a1425; --tinta-2:#4a4458; --tinta-3:#7d7791;
  --fondo:#faf8fd; --tarjeta:#ffffff; --borde:#e9e4f2;
  --morado:#6d28d9; --morado-osc:#4c1d95; --morado-claro:#f3eeff;
  --verde:#0f8a5f; --verde-claro:#e6f7f0;
  --ambar:#b45309; --ambar-claro:#fff7e6;
  --rojo:#c02626; --rojo-claro:#fdeceb;
  --r:16px; --sombra:0 1px 2px rgba(26,20,37,.06), 0 8px 24px rgba(26,20,37,.06);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--fondo); color:var(--tinta); font-size:16px; line-height:1.55;
  padding-bottom:env(safe-area-inset-bottom);
}
main{max-width:640px;margin:0 auto;padding:14px 16px 120px}

#barra{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background:rgba(250,248,253,.88);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--borde);font-weight:650;
}
#barra .icono{background:none;border:0;font-size:22px;color:var(--tinta);padding:0 4px;cursor:pointer;line-height:1}
.chip-barra{margin-left:auto;font-size:12px;font-weight:600;background:var(--morado-claro);color:var(--morado-osc);padding:4px 10px;border-radius:99px}

.pantalla{display:none;animation:entra .25s ease}
.pantalla.activa{display:block}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

h1{font-size:30px;margin:0 0 4px;letter-spacing:-.5px}
h2{font-size:21px;margin:6px 0 6px;letter-spacing:-.3px}
h3{font-size:16px;margin:18px 0 6px}
.bajada{color:var(--tinta-2);margin:0 0 18px}
.saludo{font-size:26px;margin-bottom:2px}
.mini{font-size:13px;color:var(--tinta-3);margin:6px 0}
.ayuda{font-size:13.5px;color:var(--tinta-3);margin:4px 0 10px}
.pie{margin-top:28px;text-align:center;font-size:12px;color:var(--tinta-3)}

.hero{text-align:center;padding:34px 0 22px}
.logo{font-size:52px;line-height:1}

.campo{display:block;margin:16px 0 6px}
.campo>span,.etiqueta{display:block;font-size:13px;font-weight:650;color:var(--tinta-2);margin-bottom:6px}
.campo small{font-weight:400;color:var(--tinta-3)}
/* Por tipo y no por clase, para que un campo nuevo nazca bien puesto. La lista
   se escribió cuando existían text y date; el día que aparecieron los campos de
   correo y contraseña salieron sin ningún estilo, angostos y con borde de
   navegador, en medio de la pantalla de crear cuenta. */
input[type=text],input[type=date],input[type=email],input[type=password],
input[type=tel],input[type=number],input[type=search]{
  width:100%;padding:14px 15px;font-size:16px;font-family:inherit;
  border:1.5px solid var(--borde);border-radius:13px;background:var(--tarjeta);color:var(--tinta);
}
input:focus{outline:none;border-color:var(--morado);box-shadow:0 0 0 3px var(--morado-claro)}
textarea{
  width:100%;min-height:130px;padding:14px;font-size:16px;font-family:inherit;line-height:1.55;
  border:1.5px solid var(--borde);border-radius:13px;background:var(--tarjeta);color:var(--tinta);resize:vertical;
}
textarea:focus{outline:none;border-color:var(--morado);box-shadow:0 0 0 3px var(--morado-claro)}

button{font-family:inherit;font-size:16px;cursor:pointer}
.principal{
  width:100%;padding:15px;border:0;border-radius:14px;background:var(--morado);color:#fff;
  font-weight:650;box-shadow:0 4px 14px rgba(109,40,217,.25);transition:transform .12s,opacity .15s;
}
.principal:active{transform:scale(.98)}
.principal:disabled{background:#cfc7e0;box-shadow:none;cursor:not-allowed}
.principal.grande{padding:17px;font-size:17px;margin-top:20px}
.secundaria{
  width:100%;padding:15px;border:1.5px solid var(--borde);border-radius:14px;
  background:var(--tarjeta);color:var(--tinta-2);font-weight:600;
}
.secundaria:disabled{opacity:.4;cursor:not-allowed}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.chip{
  padding:9px 15px;border-radius:99px;border:1.5px solid var(--borde);background:var(--tarjeta);
  font-size:14.5px;font-weight:600;color:var(--tinta-2);
}
.chip.sel{background:var(--morado);border-color:var(--morado);color:#fff}

.soltar{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:26px;border:2px dashed #d6cfe8;border-radius:var(--r);background:var(--tarjeta);
  color:var(--morado);font-weight:650;font-size:14.5px;cursor:pointer;
}
.soltar .mas{font-size:26px;line-height:1}
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-bottom:10px}
.miniatura{position:relative;aspect-ratio:3/4;border-radius:11px;overflow:hidden;background:#eee;box-shadow:var(--sombra)}
.miniatura img{width:100%;height:100%;object-fit:cover;display:block}
.miniatura .quitar{
  position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:0;
  background:rgba(0,0,0,.62);color:#fff;font-size:15px;line-height:22px;padding:0;
}
.miniatura .num{position:absolute;bottom:4px;left:4px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:1px 6px;border-radius:99px}

.cargando{text-align:center;padding:34px 0 10px}
.anillo{
  width:52px;height:52px;margin:0 auto 18px;border-radius:50%;
  border:4px solid var(--morado-claro);border-top-color:var(--morado);animation:gira 1s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}
.barra-fuera{height:8px;background:var(--morado-claro);border-radius:99px;overflow:hidden;margin:14px 0 8px}
.barra-dentro{height:100%;width:0;background:var(--morado);border-radius:99px;transition:width .5s ease}
.etapas{list-style:none;padding:0;margin:26px 0 0}
.etapas li{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:12px;color:var(--tinta-3);font-size:14.5px}
.etapas li.hecha{color:var(--tinta);background:var(--tarjeta);box-shadow:var(--sombra)}
.etapas li.actual{color:var(--morado-osc);background:var(--morado-claro);font-weight:650}
.etapas .punto{width:20px;text-align:center;flex:none}

.tabs{display:flex;gap:6px;background:#efeaf8;padding:4px;border-radius:12px;margin:6px 0 16px;position:sticky;top:56px;z-index:10}
.tab{flex:1;padding:9px;border:0;background:none;border-radius:9px;font-weight:650;font-size:14px;color:var(--tinta-2)}
.tab.activa{background:var(--tarjeta);color:var(--morado-osc);box-shadow:var(--sombra)}

.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--r);padding:16px;margin-bottom:12px;box-shadow:var(--sombra)}
.aviso{background:var(--ambar-claro);border:1px solid #f5d99b;color:var(--ambar);padding:12px 14px;border-radius:12px;font-size:13.5px;margin-bottom:14px}

.md{font-size:15.5px}
.md h2{font-size:18px;margin:22px 0 6px;padding-bottom:5px;border-bottom:1.5px solid var(--borde)}
.md h3{font-size:15.5px;color:var(--morado-osc);margin:16px 0 4px}
.md ul,.md ol{padding-left:20px;margin:6px 0 12px}
.md li{margin-bottom:4px}
.md p{margin:0 0 10px}
.md strong{color:var(--morado-osc)}
.md table{width:100%;border-collapse:collapse;font-size:14px;margin:10px 0}
.md th,.md td{border:1px solid var(--borde);padding:6px 8px;text-align:left}
.md code{background:#f1edf9;padding:1px 5px;border-radius:5px;font-size:13.5px}
.md img{max-width:100%}
.md :first-child{margin-top:0}

.concepto{background:var(--tarjeta);border:1px solid var(--borde);border-left:4px solid var(--morado);border-radius:12px;padding:12px 14px;margin-bottom:9px}
.concepto b{display:block;color:var(--morado-osc);margin-bottom:2px}
.concepto span{font-size:14.5px;color:var(--tinta-2)}

.fijo-abajo{
  position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(env(safe-area-inset-bottom) + 12px);
  background:linear-gradient(180deg,rgba(250,248,253,0),rgba(250,248,253,.96) 32%);
  max-width:640px;margin:0 auto;
}
.fijo-abajo.doble{display:flex;gap:10px}
.fijo-abajo.doble .secundaria{flex:0 0 38%}
.fijo-abajo.doble .principal{flex:1;margin:0}
.fijo-abajo .principal.grande{margin-top:0}

.progreso-prueba{height:6px;background:var(--morado-claro);border-radius:99px;overflow:hidden;margin-top:6px}
.etiqueta-tema{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  background:var(--morado-claro);color:var(--morado-osc);padding:3px 9px;border-radius:99px;margin-bottom:10px}
.enunciado{font-size:17.5px;font-weight:600;line-height:1.45;margin:0 0 16px}
.opcion{
  display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;
  padding:14px;margin-bottom:9px;border:1.5px solid var(--borde);border-radius:13px;
  background:var(--tarjeta);font-size:15.5px;color:var(--tinta);line-height:1.45;
}
.opcion .letra{
  flex:none;width:26px;height:26px;border-radius:50%;background:#f1edf9;color:var(--tinta-2);
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.opcion.sel{border-color:var(--morado);background:var(--morado-claro)}
.opcion.sel .letra{background:var(--morado);color:#fff}

.marcador{text-align:center;padding:26px 0 10px}
.puntaje{font-size:56px;font-weight:800;letter-spacing:-2px;line-height:1;color:var(--morado-osc)}
.puntaje small{font-size:20px;font-weight:600;color:var(--tinta-3)}
.tema-fila{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:14.5px}
.tema-fila .nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tema-fila .val{font-variant-numeric:tabular-nums;font-weight:650;font-size:13px;color:var(--tinta-2);flex:none}
.medidor{flex:0 0 88px;height:7px;background:#eee7f7;border-radius:99px;overflow:hidden}
.medidor i{display:block;height:100%;border-radius:99px}
.rev{border-left:4px solid var(--borde);padding-left:12px;margin-bottom:16px}
.rev.bien{border-color:var(--verde)}
.rev.mal{border-color:var(--rojo)}
.rev .cab{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.rev.bien .cab{color:var(--verde)}
.rev.mal .cab{color:var(--rojo)}
.rev .exp{font-size:14.5px;color:var(--tinta-2);background:var(--tarjeta);border:1px solid var(--borde);border-radius:11px;padding:11px 13px;margin-top:8px}
.item-refuerzo{background:var(--tarjeta);border:1px solid var(--borde);border-radius:13px;padding:14px;margin-bottom:10px}
.item-refuerzo b{color:var(--morado-osc)}
.item-refuerzo .acc{display:block;margin-top:6px;font-size:14.5px;color:var(--tinta-2)}
.exito{background:var(--verde-claro);border:1px solid #b6e3d0;color:var(--verde);padding:12px 14px;border-radius:12px;font-size:14px;margin-bottom:12px}

.error{background:var(--rojo-claro);border:1px solid #f3c4c1;color:var(--rojo);padding:12px 14px;border-radius:12px;font-size:14px;margin-top:14px}

.fila-hist{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:13px;padding:14px;margin-top:9px;box-shadow:var(--sombra);
}
.fila-hist .ico{font-size:22px;flex:none}
.fila-hist .txt{flex:1;min-width:0}
.fila-hist b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila-hist span{font-size:12.5px;color:var(--tinta-3)}

@media (prefers-color-scheme: dark){
  :root{
    --tinta:#f2eefa; --tinta-2:#bdb5cf; --tinta-3:#8e86a3;
    --fondo:#141021; --tarjeta:#1e1830; --borde:#302848;
    --morado:#a78bfa; --morado-osc:#c4b5fd; --morado-claro:#2a2145;
    --verde:#4ade80; --verde-claro:#16301f; --ambar:#fbbf24; --ambar-claro:#332608;
    --rojo:#fca5a5; --rojo-claro:#3a1a1a;
    --sombra:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }
  #barra{background:rgba(20,16,33,.88)}
  .fijo-abajo{background:linear-gradient(180deg,rgba(20,16,33,0),rgba(20,16,33,.96) 32%)}
  .tabs{background:#241d3a}
  .opcion .letra,.md code{background:#2a2145}
  .medidor{background:#2a2145}
  .soltar{border-color:#3d3358}
  .principal:disabled{background:#3a3155;color:#7d7791}
  .aviso{border-color:#5a4718}
}