/* ═══════════════════════════════════════════════════════════════════
   psf-impostor.css — el juego de encontrar al que no pertenece.
   [D-242 · v9.61.0]
   ═══════════════════════════════════════════════════════════════════

   NI UN LITERAL DE COLOR. Todo sale de psf-tokens.css, como el resto de
   los componentes, y por eso el juego sigue al tema claro, al oscuro y al
   de alto contraste sin una sola regla más.

   Y NI UN COLOR PORTADOR. Acertar y fallar se dicen CON PALABRAS —«Correcto.»,
   «No. El impostor era la clorpromazina.»— y con un símbolo, no solo con
   verde y rojo: criterio 1.4.1. El color acompaña; nunca es lo único. El
   botón del impostor se marca además con un borde más grueso, que se ve en
   escala de grises.

   EL BOTÓN ES GRANDE A PROPÓSITO. Esto se juega desde el teléfono, con el
   pulgar y a una mano. Los objetivos van a 48 px de alto mínimo y las
   opciones se apilan en una columna por debajo de 560 px, que es donde dos
   columnas empiezan a partir los nombres largos («Levomepromazina»).
   ═══════════════════════════════════════════════════════════════════ */

.psf-imp{ padding-bottom:var(--pf-s-16); }

.psf-imp__cab{ max-width:var(--pf-w-read); }
.psf-imp__h1{
	font-family:var(--pf-serif); font-size:var(--pf-fs-h1);
	line-height:var(--pf-lh-tight); letter-spacing:var(--pf-track-display);
	color:var(--pf-ink); margin:var(--pf-s-2) 0 var(--pf-s-3);
}
.psf-imp__lead{
	font-size:var(--pf-fs-lead); line-height:var(--pf-lh-body);
	color:var(--pf-ink-soft); margin:0 0 var(--pf-s-4); max-width:64ch;
}
.psf-imp__lead b{ color:var(--pf-ink); font-weight:var(--pf-w-semibold); }

/* ── La dificultad ─────────────────────────────────────────────── */

.psf-imp__niveles{
	border:0; padding:0; margin:var(--pf-s-8) 0 var(--pf-s-4);
	max-width:var(--pf-w-read);
}
.psf-imp__niveles legend{
	font-size:var(--pf-fs-micro); letter-spacing:var(--pf-track-label);
	text-transform:uppercase; color:var(--pf-ink-faint);
	font-weight:var(--pf-w-semibold); padding:0; margin-bottom:var(--pf-s-2);
}
.psf-imp__chips{ display:flex; gap:var(--pf-s-2); flex-wrap:wrap; }
.psf-imp__chips button{
	display:flex; align-items:baseline; gap:var(--pf-s-2);
	min-height:var(--pf-tap); padding:var(--pf-s-2) var(--pf-s-4);
	background:var(--pf-surface); color:var(--pf-ink-soft);
	border:1px solid var(--pf-line); border-radius:var(--pf-r-pill);
	font-family:var(--pf-sans); font-size:var(--pf-fs-small);
	cursor:pointer; transition:background var(--pf-anim), border-color var(--pf-anim);
}
.psf-imp__chips button:hover{ border-color:var(--pf-brand-line); }
.psf-imp__chips button[aria-pressed="true"]{
	background:var(--pf-brand-tint); border-color:var(--pf-brand);
	color:var(--pf-brand-tx); font-weight:var(--pf-w-semibold);
}
.psf-imp__chip-n{
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	color:var(--pf-ink-faint);
}
.psf-imp__chips button[aria-pressed="true"] .psf-imp__chip-n{ color:var(--pf-brand); }
.psf-imp__chip-c{
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	color:var(--pf-ink-faint);
}
.psf-imp__nivel-que{
	font-size:var(--pf-fs-small); line-height:var(--pf-lh-body);
	color:var(--pf-ink-faint); margin:var(--pf-s-3) 0 0; max-width:64ch;
}

/* ── El marcador ───────────────────────────────────────────────── */
/* Pegado arriba en el teléfono: es lo único de la página que hay que
   poder mirar sin dejar de jugar. */
.psf-imp__marcador{
	position:sticky; top:var(--pf-sticky-top); z-index:3;
	display:flex; align-items:center; gap:var(--pf-s-3); flex-wrap:wrap;
	margin:var(--pf-s-6) 0 var(--pf-s-4); padding:var(--pf-s-3) var(--pf-s-4);
	background:var(--pf-surface); border:1px solid var(--pf-line);
	border-radius:var(--pf-r-md);
	font-size:var(--pf-fs-small); color:var(--pf-ink-soft);
}
.psf-imp__cuenta b{ font-family:var(--pf-mono); color:var(--pf-ink); }
.psf-imp__sep{ color:var(--pf-ink-faint); }
.psf-imp__nivel-act{ color:var(--pf-ink-faint); }

/* ── La ronda ──────────────────────────────────────────────────── */

.psf-imp__ronda{ max-width:var(--pf-w-read); }

.psf-imp__titular{
	font-size:var(--pf-fs-small); line-height:var(--pf-lh-body);
	color:var(--pf-ink-soft); margin:0 0 var(--pf-s-2);
	padding-left:var(--pf-s-3); border-left:3px solid var(--pf-brand-line);
}
.psf-imp__pregunta{
	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-6);
}

.psf-imp__ops{
	display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:var(--pf-s-3);
}
@media (max-width:560px){
	.psf-imp__ops{ grid-template-columns:1fr; }
}

.psf-imp__op{
	display:flex; flex-direction:column; align-items:flex-start;
	gap:var(--pf-s-1);
	min-height:var(--pf-tap); padding:var(--pf-s-3) var(--pf-s-4);
	background:var(--pf-surface); border:1px solid var(--pf-line);
	border-radius:var(--pf-r-md);
	font-family:var(--pf-sans); text-align:left; cursor:pointer;
	transition:background var(--pf-anim), border-color var(--pf-anim);
}
.psf-imp__op:hover:not(:disabled){
	border-color:var(--pf-brand); background:var(--pf-brand-tint);
}
.psf-imp__op:disabled{ cursor:default; }
.psf-imp__op-n{
	font-size:var(--pf-fs-body); color:var(--pf-ink);
	font-weight:var(--pf-w-medium);
}
.psf-imp__op-d{
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	color:var(--pf-ink-faint);
}

/* ── La cuarta vía ─────────────────────────────────────────────── */
/* La etiqueta que dice que este fármaco va además por una enzima que el
   diagrama de tres círculos no puede dibujar. Cuando esa vía es la
   PRINCIPAL del fármaco —la fluvoxamina por 1A2— la etiqueta se marca
   distinto, porque entonces no es un añadido: es que el círculo donde
   está no es donde vive. */
.psf-imp__op-x{
	display:inline-block; margin-top:var(--pf-s-1);
	padding:2px var(--pf-s-2);
	border:1px solid var(--pf-line); border-radius:var(--pf-r-pill);
	background:var(--pf-paper-alt);
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	line-height:var(--pf-lh-tight); color:var(--pf-ink-soft);
	white-space:normal; text-align:left;
}
.psf-imp__op-x.es-jefe{
	border-color:var(--pf-info); background:var(--pf-info-tint);
	color:var(--pf-info-tx); font-weight:var(--pf-w-semibold);
}

/* El impostor y el fallo. Borde grueso además del color: en escala de
   grises tiene que seguir viéndose cuál era. */
.psf-imp__op.es-impostor{
	border:2px solid var(--pf-ok); background:var(--pf-ok-tint);
}
.psf-imp__op.es-impostor .psf-imp__op-n{ color:var(--pf-ok-tx); font-weight:var(--pf-w-bold); }
.psf-imp__op.es-fallo{
	border:2px dashed var(--pf-warn); background:var(--pf-warn-tint);
}
.psf-imp__op.es-fallo .psf-imp__op-n{ color:var(--pf-warn-tx); }

/* ── El veredicto ──────────────────────────────────────────────── */

.psf-imp__veredicto{
	margin:var(--pf-s-6) 0 0; padding:var(--pf-s-4);
	border-radius:var(--pf-r-md); border:1px solid var(--pf-line);
	background:var(--pf-paper-alt);
}
.psf-imp__veredicto.es-ok{ border-color:var(--pf-ok-line); background:var(--pf-ok-tint); }
.psf-imp__veredicto.es-no{ border-color:var(--pf-warn); background:var(--pf-warn-tint); }

.psf-imp__vd-cab{
	margin:0 0 var(--pf-s-2); font-size:var(--pf-fs-body);
	font-weight:var(--pf-w-semibold); color:var(--pf-ink);
	line-height:var(--pf-lh-body);
}
.psf-imp__vd-marca{ font-family:var(--pf-mono); }
.psf-imp__veredicto.es-ok .psf-imp__vd-marca{ color:var(--pf-ok-tx); }
.psf-imp__veredicto.es-no .psf-imp__vd-marca{ color:var(--pf-warn-tx); }

.psf-imp__vd-por{
	margin:0 0 var(--pf-s-3); font-size:var(--pf-fs-small);
	line-height:var(--pf-lh-body); color:var(--pf-ink-soft);
}
.psf-imp__vd-fte{
	margin:0; font-size:var(--pf-fs-micro); line-height:var(--pf-lh-body);
	color:var(--pf-ink-faint); overflow-wrap:anywhere;
}

.psf-imp__otra{
	margin-top:var(--pf-s-4); min-height:var(--pf-tap);
	padding:var(--pf-s-3) var(--pf-s-8);
	background:var(--pf-brand); color:var(--pf-paper);
	border:1px solid var(--pf-brand-deep); border-radius:var(--pf-r-pill);
	font-family:var(--pf-sans); font-size:var(--pf-fs-body);
	font-weight:var(--pf-w-semibold); cursor:pointer;
}
.psf-imp__otra:hover{ background:var(--pf-brand-deep); }

/* ── Cuando un nivel no da rondas ──────────────────────────────── */

.psf-imp__vacio{
	max-width:var(--pf-w-read); margin:var(--pf-s-6) 0;
	padding:var(--pf-s-4); border:1px dashed var(--pf-line);
	border-radius:var(--pf-r-md);
	font-size:var(--pf-fs-small); line-height:var(--pf-lh-body);
	color:var(--pf-ink-faint);
}

/* ── El pie, que explica de dónde sale cada nivel ──────────────── */

.psf-imp__pie{
	max-width:var(--pf-w-read); margin-top:var(--pf-s-16);
	padding-top:var(--pf-s-6); border-top:1px solid var(--pf-line);
}
.psf-imp__pie-h{
	font-family:var(--pf-serif); font-size:var(--pf-fs-h4);
	color:var(--pf-ink); margin:0 0 var(--pf-s-4);
}
.psf-imp__pie-n{ margin-bottom:var(--pf-s-4); }
.psf-imp__pie-n h3{
	font-size:var(--pf-fs-small); font-weight:var(--pf-w-semibold);
	color:var(--pf-ink); margin:0 0 var(--pf-s-1);
	display:flex; align-items:baseline; gap:var(--pf-s-2); flex-wrap:wrap;
}
.psf-imp__pie-c{
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	color:var(--pf-ink-faint); font-weight:var(--pf-w-regular);
}
.psf-imp__pie-n p{
	margin:0; font-size:var(--pf-fs-small); line-height:var(--pf-lh-body);
	color:var(--pf-ink-soft);
}
.psf-imp__pie-nota{
	margin:var(--pf-s-6) 0 0; font-size:var(--pf-fs-micro);
	line-height:var(--pf-lh-body); color:var(--pf-ink-faint);
}

/* ── Foco visible, en todo lo que se pulsa ─────────────────────── */

.psf-imp__chips button:focus-visible,
.psf-imp__op:focus-visible,
.psf-imp__otra:focus-visible{
	outline:2px solid var(--pf-focus); outline-offset:2px;
}

/* ── Quien pide menos movimiento, menos movimiento ─────────────── */

@media (prefers-reduced-motion:reduce){
	.psf-imp__chips button,
	.psf-imp__op{ transition:none; }
}