/* ═══════════════════════════════════════════════════════════════════
   psf-quickie.css — estudiar uno, tres o cinco minutos.
   [D-235 · v9.54.0]

   NI UN LITERAL DE COLOR: todo sale de psf-tokens.css.

   LA DECISIÓN VISUAL: el panel va ARRIBA DEL TODO en /estudiar/ y
   tiene que leerse como una puerta distinta, no como el primer paso
   del planificador de bloques. Por eso es la única pieza de la página
   con fondo propio y borde completo — quien llega con un minuto tiene
   que ver que hay algo para él antes de encontrarse una rejilla de
   temas con sus duraciones.

   Y LA RESPUESTA SE MARCA CON FORMA, NO SOLO CON COLOR: la correcta
   lleva su marca de comprobación y la equivocada su aspa, para que se
   distinga sin depender de ver el verde y el rojo.
   ═══════════════════════════════════════════════════════════════════ */

.psf-qk{
	background:var(--pf-surface); border:1px solid var(--pf-line);
	border-radius:var(--pf-r-md); padding:var(--pf-s-6);
	margin:0 0 var(--pf-s-8);
}

/* ── Cabecera ───────────────────────────────────────────────────── */
.psf-qk__cab{max-width:var(--pf-w-read)}
.psf-qk__k{
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	letter-spacing:var(--pf-track-eyebrow); text-transform:uppercase;
	color:var(--pf-accent-tx); margin:0 0 var(--pf-s-2);
}
.psf-qk__h{
	font-family:var(--pf-serif); font-size:var(--pf-fs-h2);
	line-height:var(--pf-lh-tight); letter-spacing:var(--pf-track-display);
	color:var(--pf-ink); margin:0 0 var(--pf-s-2);
}
.psf-qk__lead{
	font-size:var(--pf-fs-body); line-height:var(--pf-lh-body);
	color:var(--pf-ink-soft); margin:0;
}

/* ── Elegir minutos ─────────────────────────────────────────────── */
.psf-qk__elige{
	display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,132px),1fr));
	gap:var(--pf-s-3); margin:var(--pf-s-4) 0 0;
}
.psf-qk__min{
	display:flex; flex-direction:column; align-items:flex-start; gap:1px;
	background:var(--pf-paper-alt); border:1px solid var(--pf-line);
	border-radius:var(--pf-r-sm); padding:var(--pf-s-4);
	cursor:pointer; font:inherit; color:inherit; text-align:left;
	transition:border-color .12s, background .12s;
}
.psf-qk__min:hover{border-color:var(--pf-accent); background:var(--pf-accent-tint)}
.psf-qk__min.is-on{border-color:var(--pf-accent); background:var(--pf-accent-tint)}
.psf-qk__min b{
	font-family:var(--pf-mono); font-size:var(--pf-fs-h2); line-height:1;
	font-variant-numeric:tabular-nums; color:var(--pf-ink);
}
.psf-qk__min span{font-size:var(--pf-fs-small); color:var(--pf-ink-soft)}
.psf-qk__min em{
	font-style:normal; font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	color:var(--pf-ink-faint-tx); margin-top:var(--pf-s-1);
}

/* ── Elegir modo ────────────────────────────────────────────────── */
.psf-qk__modos{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:var(--pf-s-3); margin:var(--pf-s-3) 0 0}
.psf-qk__modo{
	background:transparent; border:1px solid var(--pf-line); border-radius:var(--pf-r-sm);
	padding:var(--pf-s-3) var(--pf-s-4); cursor:pointer; font:inherit; color:inherit; text-align:left;
}
.psf-qk__modo b{display:block; font-size:var(--pf-fs-body); font-weight:var(--pf-w-semibold); color:var(--pf-ink)}
.psf-qk__modo span{display:block; font-size:var(--pf-fs-small); color:var(--pf-ink-soft); line-height:var(--pf-lh-body); margin-top:2px}
.psf-qk__modo[aria-checked="true"]{border-color:var(--pf-accent); background:var(--pf-accent-tint)}

.psf-qk__pista{
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	color:var(--pf-ink-faint-tx); margin:var(--pf-s-3) 0 0;
}
.psf-qk__nota{
	font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx);
	margin:var(--pf-s-4) 0 0; padding-top:var(--pf-s-3);
	border-top:1px solid var(--pf-line);
}

/* ── La sesión ──────────────────────────────────────────────────── */
.psf-qk__sesion{margin:var(--pf-s-4) 0 0}
.psf-qk__sesion[hidden]{display:none!important}

.psf-qk__reloj{
	display:flex; align-items:center; gap:var(--pf-s-3);
	font-family:var(--pf-mono); font-size:var(--pf-fs-small);
	font-variant-numeric:tabular-nums; color:var(--pf-ink-soft);
	padding-bottom:var(--pf-s-3); border-bottom:1px solid var(--pf-line);
	margin-bottom:var(--pf-s-4);
}
.psf-qk__reloj--fuera{color:var(--pf-warn-tx)}
.psf-qk__x{
	margin-left:auto; background:none; border:0; cursor:pointer;
	font:inherit; font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx);
	text-decoration:underline; padding:2px 0;
}
.psf-qk__x:hover{color:var(--pf-ink)}

.psf-qk__paso{
	display:flex; gap:var(--pf-s-3); align-items:baseline;
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	color:var(--pf-ink-faint-tx); margin:0 0 var(--pf-s-2);
	font-variant-numeric:tabular-nums;
}
.psf-qk__tema{margin-left:auto; text-align:right; min-width:0}

.psf-qk__enun{
	font-family:var(--pf-serif); font-size:var(--pf-fs-h3);
	line-height:var(--pf-lh-tight); color:var(--pf-ink);
	margin:0 0 var(--pf-s-4); max-width:var(--pf-w-read);
}

.psf-qk__ops{display:grid; gap:var(--pf-s-2)}
.psf-qk__op{
	display:flex; align-items:center; gap:var(--pf-s-3); width:100%; text-align:left;
	background:var(--pf-paper); border:1px solid var(--pf-line); border-radius:var(--pf-r-sm);
	padding:var(--pf-s-3) var(--pf-s-4); cursor:pointer; font:inherit;
	font-size:var(--pf-fs-body); line-height:var(--pf-lh-tight); color:var(--pf-ink);
}
.psf-qk__op:hover:not(:disabled){border-color:var(--pf-accent); background:var(--pf-accent-tint)}
.psf-qk__op:disabled{cursor:default}
.psf-qk__op kbd{
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx);
	border:1px solid var(--pf-line); border-radius:4px; padding:1px 6px;
	background:var(--pf-surface); flex:none;
}
/* La forma, no solo el color. */
.psf-qk__op--bien{border-color:var(--pf-ok); background:var(--pf-ok-tint); color:var(--pf-ok-tx)}
.psf-qk__op--bien::after{content:"✓"; margin-left:auto; font-weight:var(--pf-w-bold)}
.psf-qk__op--mal{border-color:var(--pf-danger); background:var(--pf-danger-tint); color:var(--pf-danger-tx)}
.psf-qk__op--mal::after{content:"✕"; margin-left:auto; font-weight:var(--pf-w-bold)}

.psf-qk__exp{
	margin:var(--pf-s-4) 0 0; padding-top:var(--pf-s-3);
	border-top:1px dashed var(--pf-line);
	font-size:var(--pf-fs-small); line-height:var(--pf-lh-body);
	color:var(--pf-ink-soft); max-width:var(--pf-w-read);
}
.psf-qk__exp p{margin:0 0 var(--pf-s-2)}
.psf-qk__ver{font-weight:var(--pf-w-semibold); color:var(--pf-ink)}

/* ── Cápsula ────────────────────────────────────────────────────── */
.psf-qk__cap{max-width:var(--pf-w-read)}
.psf-qk__cap-k{
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	letter-spacing:var(--pf-track-label); text-transform:uppercase;
	color:var(--pf-ink-faint-tx); margin:0 0 var(--pf-s-1);
}
.psf-qk__cap-t{
	font-family:var(--pf-serif); font-size:var(--pf-fs-h3);
	line-height:var(--pf-lh-tight); color:var(--pf-ink); margin:0 0 var(--pf-s-3);
}
.psf-qk__cap-b{font-size:var(--pf-fs-body); line-height:var(--pf-lh-body); color:var(--pf-ink-soft)}
.psf-qk__cap-b p{margin:0 0 var(--pf-s-3)}
.psf-qk__cap-f{
	font-size:var(--pf-fs-micro); line-height:var(--pf-lh-body); color:var(--pf-ink-faint-tx);
	margin:var(--pf-s-3) 0 0; padding-top:var(--pf-s-3); border-top:1px dashed var(--pf-line);
}

/* ── Acciones y final ───────────────────────────────────────────── */
.psf-qk__acc{display:flex; gap:var(--pf-s-3); flex-wrap:wrap; margin-top:var(--pf-s-4)}
.psf-qk__btn{
	background:var(--pf-surface); border:1px solid var(--pf-line); border-radius:var(--pf-r-sm);
	padding:var(--pf-s-2) var(--pf-s-4); cursor:pointer; font:inherit;
	font-size:var(--pf-fs-small); color:var(--pf-ink); text-decoration:none;
	display:inline-flex; align-items:center;
}
.psf-qk__btn:hover{border-color:var(--pf-accent); color:var(--pf-accent-tx)}
.psf-qk__btn--p{background:var(--pf-accent); border-color:var(--pf-accent); color:var(--pf-surface)}
.psf-qk__btn--p:hover{filter:brightness(1.12); color:var(--pf-surface)}

.psf-qk__fin{text-align:center; padding:var(--pf-s-4) 0}
.psf-qk__fin-k{
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	letter-spacing:var(--pf-track-eyebrow); text-transform:uppercase;
	color:var(--pf-ink-faint-tx); margin:0 0 var(--pf-s-2);
}
.psf-qk__marca{
	font-family:var(--pf-mono); font-size:var(--pf-fs-display); line-height:1;
	font-variant-numeric:tabular-nums; color:var(--pf-ink); margin:0 0 var(--pf-s-2);
}
.psf-qk__marca b{color:var(--pf-accent-tx)}
.psf-qk__fin-d{font-size:var(--pf-fs-small); color:var(--pf-ink-soft); margin:0 auto; max-width:46ch}
.psf-qk__fallos{
	list-style:none; margin:var(--pf-s-4) auto 0; padding:0;
	max-width:var(--pf-w-read); text-align:left;
}
.psf-qk__fallos li{
	font-size:var(--pf-fs-small); line-height:var(--pf-lh-body); color:var(--pf-ink-soft);
	padding:var(--pf-s-2) 0; border-bottom:1px solid var(--pf-line);
}
.psf-qk__fallos b{color:var(--pf-ink)}
.psf-qk__fin .psf-qk__acc{justify-content:center}

@media (max-width:560px){
	.psf-qk{padding:var(--pf-s-4)}
	.psf-qk__elige{grid-template-columns:repeat(3,1fr); gap:var(--pf-s-2)}
	.psf-qk__min{padding:var(--pf-s-3)}
	.psf-qk__tema{display:none}
}