/* =========================================================================
   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:820px;margin:0 auto;overflow-wrap:break-word;
	--ar-tinta:#2a2622;
	--ar-papel:#f7f3ea;
	--ar-papel-2:#efe9dc;
	--ar-linea:#ddd4c2;
	--ar-muted:#8a8072;
	--ar-acento:#5a6b8c;
	--ar-acento-2:#8494b3;
	color:var(--ar-tinta);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	line-height:1.55;
}
.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:30px;line-height:1.15;}
.psf-arch-lead{margin:0;font-size:15px;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;}

/* ---------------- La carpeta ---------------- */
.psf-carpeta{
	margin:0 0 16px;max-width:100%;
	border:1px solid var(--ar-linea);
	border-radius:14px;
	background:linear-gradient(165deg,#fffdf8,var(--ar-papel));
	overflow:hidden;
	transition:box-shadow .15s ease,border-color .15s ease;
}
.psf-carpeta[open]{box-shadow:0 6px 22px rgba(0,0,0,.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(0,0,0,.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:21px;font-weight:800;line-height:1.15;}
.psf-carpeta-sub{display:block;font-size:13.5px;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;
	background:var(--ar-acento);color:#fff;border-radius:16px;
	font-size:13px;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:13px;font-weight:800;
	text-transform:uppercase;letter-spacing:.06em;color: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:10px;padding:1px 8px;font-size:11px;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:11px;
	background:#fff;text-decoration:none;color:inherit;
	transition:border-color .12s,transform .12s,box-shadow .12s;
}
.psf-arch-link:hover{border-color:var(--ar-acento);transform:translateX(2px);box-shadow:0 3px 10px rgba(0,0,0,.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:15.5px;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:12px;color:var(--ar-muted);margin-top:2px;
	overflow:hidden;overflow-wrap:anywhere;
}
.psf-arch-flecha{flex:none;color:var(--ar-muted);font-size:16px;transition:transform .12s,color .12s;}
.psf-arch-link:hover .psf-arch-flecha{color:var(--ar-acento);transform:translateX(3px);}

@media(max-width:560px){
	.psf-carpeta-tab{padding:15px 14px;gap:11px;}
	.psf-carpeta-nombre{font-size:18px;}
	.psf-carpeta-sub{font-size:12.5px;}
	.psf-carpeta-cuerpo{padding:4px 12px 14px;}
	.psf-arch-h1{font-size:25px;}
}
@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:14px;color:var(--ar-muted);
	max-width:64ch;line-height:1.6;
}
/* 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:23px;}
.psf-arch-intro .psf-mnemo-palabra{font-size:14px;}
.psf-arch-intro .psf-mnemo-farmaco{font-size:12.5px;}
.psf-arch-intro .psf-mnemo-pie{margin-top:12px;font-size:12px;}

/* 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:20px;
	color:var(--ar-acento);text-decoration:none;
	font-size:13px;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:14px;margin:0 0 4px;color: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:10px;border:1px solid #ece7dc;box-shadow:0 1px 6px rgba(0,0,0,.06);}

/* v5.43.0 — frase alternativa dentro del subtítulo de la nemotecnia */
.psf-mnemo-alt{display:block;margin-top:6px;font-size:12.5px;opacity:.85;}

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