/* MindFocus — tema del test de atencion. Solo se carga en /mind-focus/.
 *
 * Todo cuelga de `.mf` a proposito: el CSS original usaba selectores globales
 * (`body`, `h1`, `input`, `button`, `table`, `.card`, `.row`…) y pintaba la pagina
 * entera de oscuro. Encapsulado, el test es un bloque dentro del sitio.
 *
 * Las variables del original venian CORROMPIDAS —`--muted:b8`, `--primary:#22d3`,
 * `--ok:#349`, `--warn:#fffffff`— la misma firma del fallo de Pagelayer. En vez de
 * adivinar los valores comidos, el tema se reconstruye con los tokens del sitio.
 * Se conservan los colores de las FIGURAS (#22d3ee cian, #a78bfa violeta,
 * #f87171 rojo, #34d399 verde) porque los dibuja el JS y las instrucciones los
 * nombran: «el circulo cian», «el cuadrado violeta».
 */

.mf{
  /* superficie del test: la misma tinta honda del sitio */
  --mf-fondo:#0a1733; --mf-panel:#0e1d3f; --mf-hueco:#08122b;
  --mf-linea:#1e3060; --mf-linea-clara:#2a3f75;
  --mf-texto:#eaf1ff; --mf-apagado:#a2abbe;
  --mf-cian:#22d3ee; --mf-violeta:#a78bfa; --mf-verde:#34d399;
  --mf-ambar:#fbbf24; --mf-rojo:#f87171;

  /* color plano ademas del degradado: si el degradado no pinta, el texto claro
     seguiria teniendo su fondo oscuro debajo */
  background-color:var(--mf-fondo);
  background-image:radial-gradient(1100px 520px at 80% 0%, #13275c 0%, var(--mf-fondo) 62%);
  color:var(--mf-texto);
  border-radius:20px;
  padding:clamp(18px,3vw,30px);
  font-size:16px;
  line-height:1.6;
}
.mf *{box-sizing:border-box}
.mf .grid{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--space-4)}
@media (max-width:900px){ .mf .grid{grid-template-columns:1fr} }

.mf .card{background:var(--mf-panel); border:1px solid var(--mf-linea);
  border-radius:16px; padding:var(--space-4); box-shadow:0 10px 30px #0004}
.mf .card h2{font-family:var(--display); font-size:20px; letter-spacing:-.02em;
  margin:0 0 var(--space-3); color:var(--mf-texto)}
.mf .card h3{font-family:var(--display); font-size:16px; letter-spacing:-.01em;
  color:var(--mf-texto)}
.mf .muted{color:var(--mf-apagado)}
.mf .footnote{color:var(--mf-apagado); font-size:14px; margin-top:var(--space-3)}
.mf ol,.mf ul{color:var(--mf-texto)}
.mf ol.muted,.mf ul.muted{color:var(--mf-apagado)}
.mf b{color:var(--mf-texto)}

.mf label{display:block; margin:var(--space-3) 0 var(--space-1); font-size:15px; font-weight:600}
.mf input,.mf select,.mf textarea,.mf button{
  width:100%; padding:var(--space-3) var(--space-3); border-radius:12px;
  border:1px solid var(--mf-linea-clara); background:var(--mf-hueco);
  color:var(--mf-texto); font:inherit; outline:none}
.mf input::placeholder{color:#8896b3}
.mf button{cursor:pointer; font-weight:700; background:#15264d}
.mf button:hover{background:#1b3060}
.mf .btn-primary{background:var(--teal); border-color:var(--teal); color:#062b26}
.mf .btn-primary:hover{background:#3ae9cd}
.mf .btn-ghost{background:transparent}
.mf .cta-row{display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-3)}
.mf .cta-row button{width:auto; flex:1 1 180px; min-height:48px}
.mf :focus-visible{outline:3px solid var(--teal); outline-offset:3px}

.mf .row{display:flex; flex-wrap:wrap; gap:var(--space-3)}
.mf .row>*{flex:1 1 180px}
.mf .pill{display:inline-flex; gap:var(--space-2); align-items:center; padding:var(--space-2) var(--space-3);
  border-radius:999px; background:var(--mf-hueco); border:1px solid var(--mf-linea);
  color:var(--mf-apagado); font-size:14px}

.mf .hidden{display:none}

.mf .stage{position:relative; min-height:460px; display:grid;
  grid-template-rows:auto 1fr auto; gap:var(--space-3)}
.mf .playfield{position:relative; height:100%; min-height:320px;
  background:var(--mf-hueco); border:1px solid var(--mf-linea);
  border-radius:16px; overflow:hidden; touch-action:manipulation}

.mf .hud{display:flex; gap:var(--space-2); flex-wrap:wrap}
.mf .hud .tag{padding:var(--space-2) var(--space-3); border-radius:10px; background:var(--mf-hueco);
  border:1px solid var(--mf-linea); color:#c3cfe6; font-size:14px}

/* En columna a proposito: la cuenta atras va en un <span> con display:block y,
   con el flex en fila del original, se salia a la derecha del rotulo. */
.mf .levelNotice{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--space-1);
  background:rgba(4,10,25,.82); color:#fff;
  font-family:var(--display); font-size:26px; font-weight:800; z-index:50;
  border-radius:16px; text-align:center; padding:var(--space-3); animation:mf-fade 2s forwards}
@keyframes mf-fade{0%,70%{opacity:1}100%{opacity:0; visibility:hidden}}

.mf .feedback{position:absolute; top:10px; right:10px; padding:var(--space-2) var(--space-3);
  border-radius:10px; font-weight:700; opacity:0; transform:translateY(-6px);
  transition:opacity .15s, transform .15s}
.mf .feedback.show{opacity:1; transform:translateY(0)}
.mf .feedback.ok{background:rgba(52,211,153,.14); border:1px solid rgba(52,211,153,.45);
  color:var(--mf-verde)}
.mf .feedback.err{background:rgba(248,113,113,.14); border:1px solid rgba(248,113,113,.45);
  color:var(--mf-rojo)}

.mf .fixation{position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; color:#8290ad; font-weight:800; font-size:26px;
  letter-spacing:2px; pointer-events:none}
.mf .fixation::before{content:"+"; opacity:.9}

.mf .toast{position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  background:var(--mf-hueco); color:#d7e0f2; border:1px solid var(--mf-linea);
  padding:var(--space-2) var(--space-3); border-radius:10px; font-size:14px; opacity:0;
  transition:opacity .15s}
.mf .toast.show{opacity:1}

/* Solo aparece con ?test=1 */
.mf .test-badge{position:fixed; bottom:10px; right:10px; background:var(--mf-hueco);
  border:1px solid var(--mf-linea); color:#b3c1da; padding:var(--space-1) var(--space-2);
  border-radius:10px; font-size:13px; z-index:99}
.mf .badge{display:inline-block; padding:var(--space-1) var(--space-2); border-radius:8px; font-weight:700}
.mf .b-ok{background:rgba(52,211,153,.16); color:var(--mf-verde); border:1px solid rgba(52,211,153,.35)}
.mf .b-warn{background:rgba(251,191,36,.14); color:var(--mf-ambar); border:1px solid rgba(251,191,36,.35)}
.mf .b-bad{background:rgba(248,113,113,.14); color:var(--mf-rojo); border:1px solid rgba(248,113,113,.35)}

.mf .shape{position:absolute; cursor:pointer; display:grid; place-items:center}
.mf .shape .label{position:absolute; bottom:-26px; font-size:14px; color:#d7e0f2;
  background:var(--mf-hueco); padding:2px var(--space-2); border-radius:6px;
  border:1px solid var(--mf-linea)}

.mf .progress{height:8px; background:var(--mf-hueco); border:1px solid var(--mf-linea);
  border-radius:999px; overflow:hidden}
/* display:block porque #bar es un <span>: un <div> dentro de un <span> no es
   HTML valido y lo cambiamos. En linea perderia el alto y el ancho. */
.mf #bar{display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--teal), var(--mf-cian))}

.mf table{width:100%; border-collapse:collapse; font-size:15px}
.mf th,.mf td{border:1px solid var(--mf-linea); padding:var(--space-2) var(--space-2); text-align:left}
.mf th{background:var(--mf-hueco)}
.mf #regAviso{margin-top:var(--space-3); color:var(--mf-ambar); font-weight:600}
.mf hr{border:0; border-top:1px solid var(--mf-linea)}