/* [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;}

.psf-arch-head{margin:0 0 22px;padding:0 2px;}
.psf-arch-h1{margin:0 0 6px;font-size:var(--pf-fs-h1);line-height:1.15;}
.psf-arch-lead{margin:0;font-size:var(--pf-fs-body);color:var(--ar-muted);max-width:62ch;}
.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 ---------------- */
.psf-carpeta{
	margin:0 0 16px;max-width:100%;
	border:1px solid var(--ar-linea);
	border-radius:8px;
	background:linear-gradient(165deg,#fbfcfc,var(--ar-papel));
	overflow:hidden;
	transition:box-shadow .15s ease,border-color .15s ease;
}
.psf-carpeta[open]{box-shadow:0 6px 22px rgba(26,54,93,.07);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:5px 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;}

/* Icono de carpeta dibujado en CSS (sin imágenes externas) */
.psf-carpeta-ico{
	position:relative;flex:none;width:40px;height:31px;
	background:var(--ar-acento);border-radius:3px 6px 6px 6px;
	box-shadow:inset 0 -2px 0 rgba(26,54,93,.10);
	transition:transform .18s ease;
}
.psf-carpeta-ico::before{
	content:"";position:absolute;top:-6px;left:0;width:17px;height:7px;
	background:var(--ar-acento);border-radius:3px 4px 0 0;
}
.psf-carpeta-ico::after{ /* la "tapa" que se abre */
	content:"";position:absolute;inset:6px 0 0 0;
	background:var(--ar-acento-2);border-radius:4px;
	transform-origin:bottom center;transition:transform .18s ease;
}
.psf-carpeta[open] .psf-carpeta-ico::after{transform:perspective(70px) rotateX(38deg);}

.psf-carpeta-txt{flex:1;min-width:0;}
.psf-carpeta-nombre{display:block;font-size:var(--pf-fs-lead);font-weight:800;line-height:1.15;}
.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 6px 20px rgba(25,28,29,.07);outline:none}
.psf-dx-t{margin:0 0 8px;font-size:var(--pf-fs-h3);line-height:1.22;letter-spacing:-.015em}
.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-5);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-5)}
.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} }