/* [D-25] 820 px era una columna de LECTURA aplicada a paginas que no lo
   son: el indice y las paginas de grupo son rejillas y tablas. Medido a
   1600 px de ancho: 390 px de blanco a cada lado. Se suben a
   --pf-w-sidebar (1200 px), que es el valor que el §5.2 del documento de
   diseno da para los layouts con contenido lateral. La prosa de dentro
   sigue limitada a --pf-w-read por la capa correctora de la v5.76. */
/* =========================================================================
   Psicofarmacología NbN · Archivo de fármacos (/farmaco/)
   Dos carpetas que se abren: ISRS y Antipsicóticos (por generación).
   Construido con <details>/<summary>: funciona sin JavaScript.
   ========================================================================= */

.psf-archivo-main{padding:24px 16px 60px;}

.psf-arch{
	max-width:var(--pf-w-sidebar,1200px);margin:0 auto;overflow-wrap:break-word;
	--ar-tinta:#191c1d;
	--ar-papel:#f8f9fa;
	--ar-papel-2:#f3f4f5;
	--ar-linea:#dfe3e7;
	--ar-muted:#5d6169;
	--ar-acento:#5a6b8c;
	--ar-acento-2:#8494b3;
	color:var(--ar-tinta);
	font-family:var(--pf-sans);
	line-height:1.65;
}
.psf-arch *{box-sizing:border-box;}

/* [v8.1.0] El hero del índice usa las clases de clinical.css; aquí solo
   se ajusta lo propio del archivo. */
.psf-arch-head{margin:0 0 40px;padding:0 2px;}
.psf-arch-h1{margin:0 0 16px;font-family:var(--pf-serif);font-weight:600;font-size:48px;line-height:1.1;letter-spacing:-.02em;color:#002045;}
.psf-arch-lead{margin:0 0 18px;font-size:18px;line-height:1.6;color:#43474e;max-width:48rem;}
.psf-arch-vacio{color:var(--ar-muted);font-style:italic;}

/* ---------------- Acentos por carpeta ---------------- */
.psf-carpeta[data-acento="isrs"]{--ar-acento:#4d7ea8;--ar-acento-2:#7ba7c9;}
.psf-carpeta[data-acento="ap"]{--ar-acento:#8c5a9e;--ar-acento-2:#ad82bd;}
.psf-carpeta[data-acento="otros"]{--ar-acento:#8a8072;--ar-acento-2:#a89e90;}
.psf-carpeta[data-acento="adep"]{--ar-acento:#3f8f85;--ar-acento-2:#6fb3aa;}
.psf-carpeta[data-acento="adepdual"]{--ar-acento:#3f8f85;--ar-acento-2:#6fb3aa;}
.psf-carpeta[data-acento="adepmulti"]{--ar-acento:#7a6faf;--ar-acento-2:#a396cf;}
.psf-carpeta[data-acento="adepnadopa"]{--ar-acento:#c07a3a;--ar-acento-2:#d6a06a;}
.psf-carpeta[data-acento="adepmelato"]{--ar-acento:#4a5a9e;--ar-acento-2:#7f8cc4;}
.psf-carpeta[data-acento="tca"]{--ar-acento:#9a7b4f;--ar-acento-2:#c0a273;}
.psf-carpeta[data-acento="adepnmda"]{--ar-acento:#6d4c9f;--ar-acento-2:#9d84c4;}
.psf-carpeta[data-acento="vmat2"]{--ar-acento:#2f8f8f;--ar-acento-2:#66b6b6;}
.psf-carpeta[data-acento="estim"]{--ar-acento:#a8562f;--ar-acento-2:#cf8a5f;}
.psf-carpeta[data-acento="bzd"]{--ar-acento:#5c7f52;--ar-acento-2:#8cab82;}
/* [D-85 · v6.19.0] Estabilizadores. Gris azulado mineral: el litio es un
   elemento, no una molécula diseñada, y el color lo dice sin decirlo. */
.psf-carpeta[data-acento="estab"]{--ar-acento:#4a6274;--ar-acento-2:#7d97a8;}

/* ---------------- La carpeta ---------------- */
/* [v8.1.0] Tarjeta de la maqueta: blanca, filete, sombra ambiental solo
   al abrir. El color de clase queda en el borde izquierdo y el icono. */
.psf-carpeta{
	margin:0 0 16px;max-width:100%;
	border:1px solid #e9ecef;
	border-radius:8px;
	background:#ffffff;
	overflow:hidden;
	transition:box-shadow .15s ease,border-color .15s ease;
}
.psf-carpeta[open]{box-shadow:0 4px 20px rgba(26,54,93,.05);border-color:var(--ar-acento-2);}

/* La pestaña: es el <summary>, clicable entero */
.psf-carpeta-tab{
	display:flex;align-items:center;gap:14px;
	padding:18px 18px;cursor:pointer;
	list-style:none;user-select:none;
	border-left:3px solid var(--ar-acento);
	transition:background .12s;
}
.psf-carpeta-tab::-webkit-details-marker{display:none;} /* oculta el triángulo nativo */
.psf-carpeta-tab::marker{content:"";}
.psf-carpeta-tab:hover{background:rgba(0,0,0,.02);}
.psf-carpeta-tab:focus-visible{outline:3px solid var(--ar-acento);outline-offset:-3px;}

/* [v8.1.0] El icono de carpeta deja de ser una carpetita dibujada en CSS
   y pasa a ser el icono de la FAMILIA (el mismo del SideNavBar de la
   ficha), sobre un tinte suave del color de clase. */
.psf-carpeta-ico{
	flex:none;width:40px;height:40px;
	display:flex;align-items:center;justify-content:center;
	background:color-mix(in srgb, var(--ar-acento) 12%, #ffffff);
	border-radius:8px;
	color:var(--pf-cls-tx,var(--ar-acento));
	transition:transform .18s ease;
}
.psf-carpeta-ico svg{width:22px;height:22px;}
.psf-carpeta[open] .psf-carpeta-ico{transform:scale(1.06);}

.psf-carpeta-txt{flex:1;min-width:0;}
.psf-carpeta-nombre{display:block;font-family:var(--pf-serif);font-size:var(--pf-fs-h3);font-weight:600;line-height:1.2;color:#002045;}
.psf-carpeta-sub{display:block;font-size:var(--pf-fs-small);color:var(--ar-muted);margin-top:2px;}

.psf-carpeta-n{
	flex:none;min-width:30px;height:30px;padding:0 9px;
	display:flex;align-items:center;justify-content:center;
	/* [D-56] El fondo es la variante -tx del color de clase, no la base.
	   Blanco sobre la base daba 3,45:1 en noradrenalina/dopamina, 3,83:1 en
	   duales, 3,86:1 en VMAT2, 3,95:1 en tricíclicos, 4,32:1 en ISRS y
	   4,45:1 en multimodales: seis de doce clases por debajo de AA en un
	   contador de 15 px. No se cambia el código de color —es el mismo tono,
	   un paso más oscuro, que es lo que ya mandaba [D-19] para el blanco
	   sobre color de clase—. Con -tx ninguna baja de 5,45:1. */
	background:var(--pf-cls-tx,var(--ar-acento));color:#fff;border-radius:8px;
	font-size:var(--pf-fs-micro);font-weight:800;
}
.psf-carpeta-chev{
	flex:none;width:11px;height:11px;margin-right:4px;
	border-right:2.5px solid var(--ar-muted);
	border-bottom:2.5px solid var(--ar-muted);
	transform:rotate(45deg);transition:transform .18s ease;
}
.psf-carpeta[open] .psf-carpeta-chev{transform:rotate(-135deg);}

/* ---------------- Contenido de la carpeta ---------------- */
.psf-carpeta-cuerpo{padding:4px 18px 18px;border-top:1px dashed var(--ar-linea);min-width:0;}

.psf-arch-gen{
	display:flex;align-items:center;gap:9px;
	margin:18px 0 10px;font-size:var(--pf-fs-micro);font-weight:800;
	text-transform:uppercase;letter-spacing:.06em;color:var(--pf-cls-tx,var(--ar-acento));
}
.psf-arch-gen::after{content:"";flex:1;height:1px;background:var(--ar-linea);}
.psf-arch-gen-n{
	order:3;background:var(--ar-papel-2);color:var(--ar-muted);
	border-radius:8px;padding:1px 8px;font-size:var(--pf-fs-micro);letter-spacing:0;
}

.psf-arch-lista{
	list-style:none;margin:0;padding:0;display:grid;gap:8px;
	/* Las columnas se adaptan al ESPACIO REAL disponible, no al ancho de la
	   ventana. Una media query miraría el navegador y forzaría dos columnas
	   aunque el tema deje una franja estrecha: de ahí que antes se cortara la
	   columna derecha. Con auto-fit, si no caben dos, pasa a una sola.
	   El min(100%,260px) evita que una columna sea más ancha que su contenedor. */
	grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}

.psf-arch-item{margin:0;min-width:0;} /* sin esto, el texto largo ensancha la columna y desborda */
.psf-arch-link{
	display:flex;align-items:center;gap:12px;min-width:0;
	padding:10px 12px;border:1px solid var(--ar-linea);border-radius:8px;
	background:#fff;text-decoration:none;color:inherit;
	transition:border-color .12s,transform .12s,box-shadow .12s;
}
.psf-arch-link:hover{border-color:var(--pf-cls-tx,var(--ar-acento));transform:translateX(2px);box-shadow:0 3px 10px rgba(26,54,93,.06);}
.psf-arch-link:focus-visible{outline:3px solid var(--ar-acento);outline-offset:2px;}

.psf-arch-mol{
	flex:none;width:56px;height:42px;border-radius:7px;overflow:hidden;
	background:var(--ar-papel);border:1px solid var(--ar-linea);
	display:flex;align-items:center;justify-content:center;
}
.psf-arch-mol img{width:100%;height:100%;object-fit:cover;display:block;max-width:100%;}

.psf-arch-txt{flex:1;min-width:0;}
.psf-arch-nombre,.psf-arch-diana{overflow-wrap:anywhere;}
.psf-arch-nombre{display:block;font-weight:700;font-size:var(--pf-fs-small);line-height:1.2;}
.psf-arch-diana{
	/* Antes: nowrap + ellipsis. Eso obligaba a la columna a ser tan ancha como
	   el texto y rompía la rejilla. Ahora el texto fluye en un máximo de dos
	   líneas, de modo que la tarjeta nunca empuja el layout hacia fuera. */
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
	font-size:var(--pf-fs-micro);color:var(--ar-muted);margin-top:2px;
	overflow:hidden;overflow-wrap:anywhere;
}
.psf-arch-flecha{flex:none;color:var(--ar-muted);font-size:var(--pf-fs-small);transition:transform .12s,color .12s;}
.psf-arch-link:hover .psf-arch-flecha{color:var(--pf-cls-tx,var(--ar-acento));transform:translateX(3px);}

@media(max-width:560px){
	.psf-carpeta-tab{padding:15px 14px;gap:11px;}
	.psf-carpeta-nombre{font-size:var(--pf-fs-lead);}
	.psf-carpeta-sub{font-size:var(--pf-fs-micro);}
	.psf-carpeta-cuerpo{padding:4px 12px 14px;}
	.psf-arch-h1{font-size:var(--pf-fs-h2);}
}
@media(prefers-reduced-motion:reduce){
	.psf-carpeta,.psf-carpeta-ico,.psf-carpeta-ico::after,.psf-carpeta-chev,
	.psf-arch-link,.psf-arch-flecha{transition:none;}
}

/* ---------------- Nemotecnia dentro de la carpeta ----------------
   Reutiliza los estilos de psf-intro.css. Aquí solo se mapean las variables
   de color para que la frase herede el acento de la carpeta que la contiene. */
.psf-arch-intro{
	--in-tinta:var(--ar-tinta);
	--in-papel:var(--ar-papel);
	--in-linea:var(--ar-linea);
	--in-muted:var(--ar-muted);
	--in-acento:var(--ar-acento);
	--in-acento-2:var(--ar-acento-2);
	margin:14px 0 16px;
}
.psf-arch-intro-txt{
	margin:0 0 12px;font-size:var(--pf-fs-body);color:var(--ar-muted);
	max-width:64ch;line-height:1.65;
}
/* En la carpeta la nemotecnia va algo más compacta que en la página [psf_intro] */
.psf-arch-intro .psf-mnemo{padding:15px 12px 11px;background:rgba(255,255,255,.6);}
.psf-arch-intro .psf-mnemo-ini{font-size:var(--pf-fs-lead);}
.psf-arch-intro .psf-mnemo-palabra{font-size:var(--pf-fs-body);}
.psf-arch-intro .psf-mnemo-farmaco{font-size:var(--pf-fs-micro);}
.psf-arch-intro .psf-mnemo-pie{margin-top:12px;font-size:var(--pf-fs-micro);}

/* La primera sección de una carpeta no necesita separación extra arriba */
.psf-carpeta-cuerpo > .psf-arch-intro:first-child{margin-top:14px;}

/* Enlace desde la carpeta a su página de introducción */
.psf-arch-overview{
	display:inline-flex;align-items:center;gap:6px;
	margin:14px 0 2px;padding:7px 13px;
	border:1.5px solid var(--ar-acento);border-radius:8px;
	color:var(--pf-cls-tx,var(--ar-acento));text-decoration:none;
	font-size:var(--pf-fs-micro);font-weight:700;
	transition:background .12s,color .12s;
}
.psf-arch-overview:hover{background:var(--ar-acento);color:#fff;}
.psf-arch-overview:focus-visible{outline:3px solid var(--ar-acento);outline-offset:2px;}

.psf-arch-intro-h{font-size:var(--pf-fs-body);margin:0 0 4px;color:var(--pf-cls-tx,var(--ar-acento,#2c6b62));}

/* v5.30.0 — ilustración de la nemotecnia */
.psf-mnemo-figura{margin:0 0 14px;text-align:center;}
.psf-mnemo-figura img{max-width:100%;height:auto;border-radius:8px;border:1px solid #e2e4e6;box-shadow:0 1px 6px rgba(26,54,93,.06);}

/* v5.43.0 — frase alternativa dentro del subtítulo de la nemotecnia */
/* [D-56] Sin opacidad: --ar-muted da 5,5:1 sobre papel, pero compuesto
   al 85 % baja a 4,32:1 y no llega a AA. El matiz de «esto es
   secundario» ya lo da el tamaño micro y el color gris. */
.psf-mnemo-alt{display:block;margin-top:6px;font-size:var(--pf-fs-micro);color:var(--ar-muted,#5d6169);}

/* v5.46.0 — ilustración de portada de la carpeta */
.psf-carpeta-portada-pie{margin:0 0 16px;max-width:70ch;font-size:var(--pf-fs-micro);line-height:1.65;color:var(--ar-muted,#5d6169);}

/* ------------------------------------------------------------------ /diagnostico/
   La portada de diagnosticos usa la misma hoja que la de farmacos a proposito:
   son la misma pieza vista dos veces. Solo cambia la rejilla, porque aqui no
   hay carpetas que desplegar sino tarjetas que elegir. */
.psf-dx-lista{
 display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
 gap:16px;list-style:none;margin:26px 0 0;padding:0}
.psf-dx-item{margin:0}
.psf-dx-card{
 display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;
 background:#fff;border:1px solid var(--psf-linea,#e4e7ea);border-top:3px solid var(--psf-acento,#4a5c80);
 border-radius:8px;padding:18px 19px 16px;transition:border-color .15s,transform .15s,box-shadow .15s}
.psf-dx-card:hover,.psf-dx-card:focus-visible{
 border-color:var(--psf-acento,#4a5c80);transform:translateY(-2px);
 box-shadow:0 4px 20px rgba(26,54,93,.05);outline:none}
.psf-dx-t{margin:0 0 8px;font-family:var(--pf-serif);font-weight:600;font-size:var(--pf-fs-h3);line-height:1.22;letter-spacing:-.015em;color:#002045}
.psf-dx-x{margin:0 0 13px;font-size:var(--pf-fs-small);line-height:1.65;color:var(--psf-sub,#43474e);flex:1}
.psf-dx-dato{
 align-self:flex-start;font-family:var(--pf-sans);font-size:var(--pf-fs-micro);
 font-weight:700;color:var(--psf-acento,#4a5c80);background:var(--psf-papel2,#e8eaeb);
 border-radius:8px;padding:4px 11px}
.psf-dx-go{
 margin-top:12px;font-family:var(--pf-sans);font-size:var(--pf-fs-micro);
 font-weight:700;color:var(--psf-acento,#4a5c80)}
@media (prefers-reduced-motion:reduce){
 .psf-dx-card{transition:none}
 .psf-dx-card:hover{transform:none}
}

/* [D-20] §4.3: columna de lectura ≤680 px (65-75 caracteres por línea).
   Medido antes: 76 caracteres de mediana, con la mitad de los párrafos
   por encima del límite. Solo afecta a contenedores de prosa; tablas,
   rejillas y diagramas conservan su ancho, que ahí es funcional. */
.psf-arch-intro-txt{max-width:var(--pf-w-read);}
.psf-carpeta-portada-pie{max-width:var(--pf-w-read);}

/* ═══════════════════════════════════════════════════════════════
   ÍNDICE ALFABÉTICO  [D-70 · v6.17.0]
   La página se llamaba «índice» sin tener uno. Va plegada y en dos
   o tres columnas: cincuenta nombres en una sola columna abierta
   empujarían las carpetas fuera de la primera pantalla, y con ellas
   lo que la página propone hacer.
   ═══════════════════════════════════════════════════════════════ */
.psf-az{
 margin:0 0 var(--pf-s-6);border:1px solid var(--pf-line);
 border-radius:var(--pf-r-md);background:var(--pf-surface)}
.psf-az__t{
 cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;
 min-height:var(--pf-tap);padding:0 var(--pf-s-4);
 font-family:var(--pf-mono);font-size:var(--pf-fs-micro);
 text-transform:uppercase;letter-spacing:var(--pf-track-label);
 font-weight:var(--pf-w-semibold);color:var(--pf-ink-soft)}
.psf-az__t::-webkit-details-marker{display:none}
.psf-az__t::before{content:'▸';color:var(--pf-ink-faint-tx);font-size:.9em}
.psf-az[open] .psf-az__t::before{content:'▾'}
.psf-az__c{
 margin-left:auto;font-weight:700;color:var(--pf-ink-faint-tx)}
.psf-az__l{
 list-style:none;margin:0;padding:0 var(--pf-s-4) var(--pf-s-4);
 columns:3;column-gap:var(--pf-s-6)}
.psf-az__a{
 display:block;break-inside:avoid;padding:7px 0;text-decoration:none;
 border-bottom:1px solid var(--pf-paper-alt)}
.psf-az__n{
 display:block;font-size:var(--pf-fs-small);color:var(--pf-ink);
 font-weight:var(--pf-w-semibold)}
.psf-az__g{
 display:block;font-size:var(--pf-fs-micro);color:var(--pf-ink-faint-tx)}
.psf-az__a:hover .psf-az__n{color:var(--pf-brand-tx)}
@media (max-width:900px){ .psf-az__l{columns:2} }
@media (max-width:560px){ .psf-az__l{columns:1} }

/* [D-130 · v8.3.0] La puerta al comparador, bajo la entradilla del indice. */
.psf-arch-comparar{margin:14px 0 0;}
.psf-arch-comparar a{
	display:inline-flex;align-items:center;gap:6px;
	font-family:var(--pf-sans);font-size:var(--pf-fs-small);font-weight:700;
	color:var(--pf-accent-tx);text-decoration:none;
	border-bottom:1px solid var(--pf-line);padding:2px 0;min-height:28px;
}
.psf-arch-comparar a:hover{border-bottom-color:var(--pf-accent-tx);}

/* =========================================================================
   EL ÍNDICE SIGUE AL TEMA   [D-168 · v9.9.0]
   -------------------------------------------------------------------------
   EL FALLO, TAL COMO SE VIO: la página de Fármacos con el papel oscuro y
   las tarjetas BLANCAS encima, el titular en marino sobre negro —ilegible—
   y la entradilla en gris. Media página en un tema y media en el otro.

   LA CAUSA: esta hoja se escribió con su propia paleta en literales
   —`--ar-tinta:#191c1d`, `--ar-papel:#f8f9fa`, tarjetas `#ffffff`,
   titulares `#002045`— y un literal no escucha al tema. Es el mismo defecto
   que tenía el pie [D-162] y el mismo que tenía Principios antes de la v8:
   cada vez que aparece, aparece igual.

   EL ARREGLO, EN CAPA AL FINAL Y NO EDITANDO ARRIBA: así se ve de un
   vistazo qué se remapea y por qué, y la hoja original queda como
   documento de lo que había. Dos partes:

     1. Los siete `--ar-*` de estructura pasan a tokens del sistema. Con eso
        solo, la mayor parte de la hoja empieza a seguir al tema, porque casi
        todo se pinta a través de esas variables.
     2. Los literales sueltos que quedaban fuera de las variables, uno por
        uno, con su selector.

   Y LOS COLORES DE CLASE NO SE TOCAN AQUÍ: `--ar-acento` por carpeta ya
   viene del sistema de clases (`--pf-cls-*`), que TIENE su variante para
   papel oscuro. Son información —qué familia es cada fármaco—, no
   decoración, y por eso no se apagan con el tema.
   ========================================================================= */

.psf-arch{
	--ar-tinta:var(--pf-ink);
	--ar-papel:var(--pf-paper);
	--ar-papel-2:var(--pf-paper-alt);
	--ar-linea:var(--pf-line);
	--ar-muted:var(--pf-ink-faint-tx);
	--ar-acento:var(--pf-brand);
	--ar-acento-2:var(--pf-brand-line);
}

/* Los colores de familia, por sus tokens: cada uno trae su variante clara
   para el papel oscuro, así que el índice sigue distinguiendo las familias
   de noche. */
.psf-carpeta[data-acento="isrs"]{--ar-acento:var(--pf-cls-isrs);--ar-acento-2:var(--pf-cls-isrs-2);}
.psf-carpeta[data-acento="ap"]{--ar-acento:var(--pf-cls-antipsicoticos);--ar-acento-2:var(--pf-cls-antipsicoticos-2);}
.psf-carpeta[data-acento="otros"]{--ar-acento:var(--pf-cls-otros);--ar-acento-2:var(--pf-cls-otros-2);}
.psf-carpeta[data-acento="adep"],
.psf-carpeta[data-acento="adepdual"]{--ar-acento:var(--pf-cls-adep-dual);--ar-acento-2:var(--pf-cls-adep-dual-2);}
.psf-carpeta[data-acento="adepmulti"]{--ar-acento:var(--pf-cls-adep-multimodal);--ar-acento-2:var(--pf-cls-adep-multimodal-2);}
.psf-carpeta[data-acento="adepnadopa"]{--ar-acento:var(--pf-cls-adep-nadopa);--ar-acento-2:var(--pf-cls-adep-nadopa-2);}
.psf-carpeta[data-acento="adepmelato"]{--ar-acento:var(--pf-cls-adep-melatonina);--ar-acento-2:var(--pf-cls-adep-melatonina-2);}
.psf-carpeta[data-acento="adepnmda"]{--ar-acento:var(--pf-cls-adep-nmda);--ar-acento-2:var(--pf-cls-adep-nmda-2);}
.psf-carpeta[data-acento="tca"]{--ar-acento:var(--pf-cls-triciclicos);--ar-acento-2:var(--pf-cls-triciclicos-2);}
.psf-carpeta[data-acento="vmat2"]{--ar-acento:var(--pf-cls-vmat2);--ar-acento-2:var(--pf-cls-vmat2-2);}
.psf-carpeta[data-acento="estim"]{--ar-acento:var(--pf-cls-psicoestimulantes);--ar-acento-2:var(--pf-cls-psicoestimulantes-2);}
.psf-carpeta[data-acento="bzd"]{--ar-acento:var(--pf-cls-benzodiacepinas);--ar-acento-2:var(--pf-cls-benzodiacepinas-2);}
.psf-carpeta[data-acento="estab"]{--ar-acento:var(--pf-cls-estabilizadores);--ar-acento-2:var(--pf-cls-estabilizadores-2);}

/* Los literales que no pasaban por las variables. */
.psf-arch-h1{color:var(--pf-brand-deep);}
.psf-arch-lead{color:var(--pf-ink-soft);}
.psf-carpeta{border-color:var(--pf-line);background:var(--pf-surface);}
.psf-carpeta-ico{background:var(--pf-paper-alt);}
.psf-carpeta-nombre{color:var(--pf-brand-tx);}
.psf-arch-link{background:var(--pf-surface);}

/* El contador de la carpeta: relleno del color de clase con tinta encima.
   En claro la tinta es el papel —blanco sobre color, como manda [D-19]—;
   en oscuro el relleno pasa a su variante CLARA y la tinta tiene que
   invertirse con él, o el número desaparece. Es el mismo caso que los
   botones de estado, que ya está resuelto así en el sistema. */
.psf-carpeta-n{color:var(--pf-surface);}
:root[data-pf-tema="oscuro"] .psf-carpeta-n{color:var(--pf-paper);}
.psf-arch-overview:hover{color:var(--pf-surface);}
:root[data-pf-tema="oscuro"] .psf-arch-overview:hover{color:var(--pf-paper);}

/* Nutracéuticos y fitoterapia. [D-169 · v9.10.0] El rosa oscuro es el único
   tono de la rueda que no usaba ninguna de las trece familias anteriores, y
   eso importa: el color aquí es información —qué familia es cada ficha—, y
   dos familias del mismo color dejan de informar. Se comprobó contra las
   trece: la distancia menor es frente a benzodiacepinas, y aun así separa. */
.psf-carpeta[data-acento="nutra"]{--ar-acento:var(--pf-cls-nutraceuticos);--ar-acento-2:var(--pf-cls-nutraceuticos-2);}
.psf-carpeta[data-acento="hipno"]{--ar-acento:var(--pf-cls-hipnoticos);--ar-acento-2:var(--pf-cls-hipnoticos-2);}