/* =====================================================================
   comparador.css — la página de comparación lado a lado. [D-130 · v8.3.0]
   ---------------------------------------------------------------------
   REGLA DE ESTA HOJA: ni un hex. Todo sale de psf-tokens.css — es la
   condición para que el modo de alto contraste [D-108] alcance también
   al comparador, y el candado de literales [D-113] la vigila.
   Prefijo .psf-cmp, y solo .psf-cmp: un selector, una hoja.
   ===================================================================== */

/* ---------------- selector ---------------- */
.psf-cmp__selector{
	position:relative;
	margin:0 0 var(--pf-s-6);
}
.psf-cmp__buscar-lbl{
	display:block;
	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-2);
}
.psf-cmp__buscar{
	width:100%; max-width:34rem;
	border:1px solid var(--pf-line); border-radius:var(--pf-r-sm);
	background:var(--pf-surface); color:var(--pf-ink);
	font-family:var(--pf-sans); font-size:var(--pf-fs-small);
	padding:10px 14px; min-height:var(--pf-tap);
}
.psf-cmp__buscar:focus{
	outline:none; border-color:var(--pf-accent);
	box-shadow:0 0 0 3px var(--pf-accent-tint);
}
.psf-cmp__ayuda{
	margin:var(--pf-s-2) 0 0;
	font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx);
}

/* La lista desplegable, agrupada por familia */
.psf-cmp__lista{
	position:absolute; z-index:40; top:100%; left:0;
	width:100%; max-width:34rem; max-height:22rem; overflow-y:auto;
	margin:4px 0 0; padding:var(--pf-s-2); list-style:none;
	background:var(--pf-surface); border:1px solid var(--pf-line);
	border-radius:var(--pf-r-md); box-shadow:var(--pf-shadow-pop);
}
.psf-cmp__grupo{
	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);
	padding:var(--pf-s-2) var(--pf-s-2) var(--pf-s-1);
}
.psf-cmp__opcion{
	display:flex; flex-direction:column; align-items:flex-start; gap:1px;
	width:100%; text-align:left; cursor:pointer;
	border:0; background:transparent; border-radius:var(--pf-r-sm);
	font-family:var(--pf-sans); font-size:var(--pf-fs-small);
	color:var(--pf-ink); padding:8px var(--pf-s-2); min-height:var(--pf-tap);
}
.psf-cmp__opcion:hover, .psf-cmp__opcion:focus-visible{
	background:var(--pf-sage-tint); outline:none;
}
.psf-cmp__opcion-sub{
	font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx);
}

/* Las elegidas: fichas con el punto de su clase */
.psf-cmp__fichas{
	display:flex; flex-wrap:wrap; gap:var(--pf-s-2);
	margin:var(--pf-s-4) 0 0; padding:0; list-style:none;
}
.psf-cmp__ficha{
	display:inline-flex; align-items:center; gap:8px;
	background:var(--pf-surface); border:1px solid var(--pf-line);
	border-radius:var(--pf-r-pill);
	font-family:var(--pf-sans); font-size:var(--pf-fs-small); font-weight:var(--pf-w-semibold);
	color:var(--pf-ink); padding:6px 8px 6px 14px; min-height:var(--pf-tap);
}
.psf-cmp__punto{
	width:9px; height:9px; border-radius:50%; flex:none;
	background:var(--pf-cls);
}
.psf-cmp__quitar{
	border:0; background:var(--pf-paper-alt); cursor:pointer;
	width:28px; height:28px; border-radius:50%;
	font-size:var(--pf-fs-small); line-height:1; color:var(--pf-ink-soft);
}
.psf-cmp__quitar:hover{ background:var(--pf-danger-tint); color:var(--pf-danger-tx); }

/* ---------------- avisos ---------------- */
.psf-cmp__aviso{
	background:var(--pf-warn-tint);
	border:1px solid var(--pf-warn);
	border-left-width:4px; border-radius:var(--pf-r-sm);
	padding:var(--pf-s-4) var(--pf-s-6);
	margin:0 0 var(--pf-s-6);
	max-width:var(--pf-w-read);
}
.psf-cmp__aviso-t{
	margin:0 0 var(--pf-s-1);
	font-weight:var(--pf-w-semibold); color:var(--pf-warn-tx);
	font-size:var(--pf-fs-small);
}
.psf-cmp__aviso-x{
	margin:0; font-size:var(--pf-fs-small); line-height:1.6; color:var(--pf-ink-soft);
}
.psf-cmp__tope{
	margin:0 0 var(--pf-s-4); font-size:var(--pf-fs-small);
	color:var(--pf-warn-tx);
}

/* ---------------- resultado ---------------- */
.psf-cmp__vacio{
	color:var(--pf-ink-faint-tx); font-style:italic;
	font-size:var(--pf-fs-small);
	border:1px dashed var(--pf-line); border-radius:var(--pf-r-md);
	padding:var(--pf-s-8); text-align:center;
	background:var(--pf-surface);
}
.psf-cmp__scroll{ overflow-x:auto; }
.psf-cmp__tabla{
	width:100%; border-collapse:collapse; text-align:left;
	background:var(--pf-surface); border:1px solid var(--pf-line);
	border-radius:var(--pf-r-sm);
}
.psf-cmp__tabla th, .psf-cmp__tabla td{
	padding:12px 16px; font-size:14px; line-height:1.6;
	border-bottom:1px solid var(--pf-line);
	vertical-align:top; min-width:11rem;
}
.psf-cmp__tabla thead th, .psf-cmp__tabla tr:first-child th{
	border-bottom-width:2px;
}
.psf-cmp__tabla tr:first-child th a{
	font-family:var(--pf-serif); font-weight:var(--pf-w-semibold);
	font-size:var(--pf-fs-h4); color:var(--pf-brand-deep);
	text-decoration:none;
}
.psf-cmp__tabla tr:first-child th a:hover{ text-decoration:underline; }
.psf-cmp__clase{
	display:block; margin-top:2px;
	font-family:var(--pf-sans); font-size:var(--pf-fs-micro); font-weight:var(--pf-w-medium);
	color:var(--pf-cls-tx);
}
.psf-cmp__rotulo{
	font-family:var(--pf-sans); font-weight:var(--pf-w-semibold);
	color:var(--pf-ink-soft); font-size:var(--pf-fs-micro);
	width:12rem; min-width:9rem;
	background:var(--pf-paper-alt);
}
.psf-cmp__seccion th{
	font-family:var(--pf-serif); font-weight:var(--pf-w-medium);
	font-size:var(--pf-fs-h4); color:var(--pf-brand-deep);
	background:var(--pf-paper); border-bottom-width:2px;
	padding-top:var(--pf-s-6);
}
.psf-cmp__hueco abbr{
	text-decoration:none; cursor:help;
	color:var(--pf-ink-faint-tx); border-bottom:1px dotted var(--pf-line);
}
.psf-cmp__grado{
	display:inline-flex; align-items:center; justify-content:center;
	width:30px; height:30px; border-radius:var(--pf-r-sm);
	color:var(--pf-surface); font-family:var(--pf-mono); font-weight:var(--pf-w-semibold);
}
.psf-cmp__grado--a{ background:var(--pf-g-a); }
.psf-cmp__grado--b{ background:var(--pf-g-b); }
.psf-cmp__grado--c{ background:var(--pf-g-c); }
.psf-cmp__grado--d{ background:var(--pf-g-d); }
.psf-cmp__grado--i{ background:var(--pf-g-i); }
.psf-cmp__fuentes{ font-size:var(--pf-fs-micro); color:var(--pf-ink-soft); word-break:break-word; }
.psf-cmp__fuentes a{ color:var(--pf-accent-tx); }

/* Afinidades: el valor con una pista visual de escalón (borde izquierdo
   más presente cuanta más afinidad; el color NO es la información, el
   texto del valor está siempre escrito). */
.psf-cmp__h2{
	font-family:var(--pf-serif); font-weight:var(--pf-w-medium);
	font-size:var(--pf-fs-h3); color:var(--pf-brand-deep);
	margin:var(--pf-s-8) 0 var(--pf-s-4);
}
.psf-cmp__af{
	display:inline-block; padding:2px 0 2px 10px;
	border-left:3px solid var(--pf-line);
}
.psf-cmp__af[data-nivel="3"]{ border-left-color:var(--pf-accent); }
.psf-cmp__af[data-nivel="4"], .psf-cmp__af[data-nivel="5"]{
	border-left-color:var(--pf-accent); font-weight:var(--pf-w-semibold);
}
.psf-cmp__fuente-af, .psf-cmp__nota{
	margin:var(--pf-s-3) 0 0;
	font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx);
	max-width:var(--pf-w-read);
}

@media (max-width:760px){
	.psf-cmp__tabla th, .psf-cmp__tabla td{ min-width:9rem; padding:10px 12px; }
	.psf-cmp__rotulo{ width:auto; }
}
@media print{
	.psf-cmp__selector{ display:none; }
	/* [D-139] En papel, cada fuente lleva su dirección: un enlace impreso
	   sin URL no lleva a ninguna parte. */
	.psf-cmp__fuentes a[href]::after{ content:" — " attr(href); font-size:.85em; word-break:break-all; }
}