/* Acordeon de FAQs — <details> nativo, sin JavaScript.
   Todo el aspecto sale de variables CSS. Los presets son clases modificadoras
   que solo redefinen variables o unas pocas reglas, para no duplicar CSS. */

/* ── Aislamiento ──────────────────────────────────────────────────────
   El bloque no debe depender de lo que el tema haga o deje de hacer, ni
   romperse si el tema cambia. Se resetea explicitamente todo lo que los
   temas suelen tocar en <details> y <summary>. */

.dtfaq,
.dtfaq *,
.dtfaq *::before,
.dtfaq *::after {
	box-sizing: border-box;
}

.dtfaq details,
.dtfaq summary {
	margin: 0;
	border: 0;
	outline: 0;
	background: none;
	float: none;
	position: static;
	max-width: none;
	min-width: 0;
	text-transform: none;
	text-decoration: none;
	letter-spacing: normal;
	text-indent: 0;
	box-shadow: none;
}

.dtfaq summary::before,
.dtfaq summary::after {
	content: none;
}

.dtfaq {
	/* Color */
	--dtfaq-accent: #0046A0;
	--dtfaq-text: #0f172a;
	--dtfaq-answer: #475569;
	--dtfaq-surface: #ffffff;
	--dtfaq-border: rgba(0, 0, 0, 0.08);

	/* Fondo de la pregunta. El "suave" es el de la pregunta cerrada: apenas
	   perceptible, lo justo para que se distinga de la respuesta y se note
	   que la fila se abre. El otro es el de la pregunta abierta. */
	--dtfaq-q-soft: #fafbfd;
	--dtfaq-q-bg: #eff4fc;
	--dtfaq-bar: var(--dtfaq-accent);
	--dtfaq-bar-w: 4px;

	/* Forma */
	--dtfaq-radius: 0px;
	--dtfaq-gap: 10px;
	--dtfaq-pad-y: 16px;
	--dtfaq-pad-x: 20px;
	--dtfaq-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
	--dtfaq-shadow-open: 0 6px 24px rgba(0, 0, 0, 0.18);

	/* Tipografia.
	   La familia se hereda por defecto (variable vacia = sin declaracion),
	   porque heredarla nunca rompe nada: si cambia el tema, el bloque lo
	   sigue. El tamano tambien se hereda, con factores para afinarlo.
	   El COLOR en cambio es propio: heredar el color del texto sin heredar
	   tambien el fondo puede dejar texto claro sobre caja blanca. */
	--dtfaq-q-size: 16px;
	--dtfaq-q-weight: 600;
	--dtfaq-a-size: 15px;
	--dtfaq-q-lh: 1.4;
	--dtfaq-a-lh: 1.65;

	/* Movimiento */
	--dtfaq-speed: 220ms;

	/* Espaciado efectivo. Los ajustes del sitio se inyectan sobre
	   --dtfaq-pad-*, asi que el ajuste de movil se hace sobre estas otras
	   variables: de lo contrario la inyeccion, que va despues y tiene la misma
	   especificidad, se comeria siempre la media query. */
	--dtfaq-_px: var(--dtfaq-pad-x);
	--dtfaq-_py: var(--dtfaq-pad-y);

	display: flex;
	flex-direction: column;
	max-width: 100%;
	margin: 0;
	/* Vacia = hereda del tema. Con valor = fuente propia, para temas cuya
	   tipografia no funciona en un acordeon. */
	font-family: var(--dtfaq-font, inherit);
}

.dtfaq__title {
	margin: 0 0 6px;
	color: var(--dtfaq-text);
}

.dtfaq__list {
	display: flex;
	flex-direction: column;
	gap: var(--dtfaq-gap);
}

.dtfaq__item {
	background: var(--dtfaq-surface);
	border-radius: var(--dtfaq-radius);
	box-shadow: var(--dtfaq-shadow);
	overflow: hidden;
	transition: box-shadow var(--dtfaq-speed) ease, transform var(--dtfaq-speed) ease;
}

.dtfaq__item[open] {
	box-shadow: var(--dtfaq-shadow-open);
}

/* ── Pregunta ─────────────────────────────────────────────────────── */

.dtfaq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: var(--dtfaq-_py) var(--dtfaq-_px);
	color: var(--dtfaq-text);
	font-size: var(--dtfaq-q-size);
	font-weight: var(--dtfaq-q-weight);
	line-height: var(--dtfaq-q-lh);
	text-align: left;
	cursor: pointer;
	list-style: none;
	transition: background var(--dtfaq-speed) ease, color var(--dtfaq-speed) ease;
}

.dtfaq__q::-webkit-details-marker { display: none; }
.dtfaq__q::marker { content: ''; }

.dtfaq__q:hover {
	background: color-mix(in srgb, var(--dtfaq-accent) 8%, transparent);
	color: var(--dtfaq-accent);
}

.dtfaq__item[open] .dtfaq__q {
	background: var(--dtfaq-accent);
	color: #fff;
}

.dtfaq__q:focus-visible {
	outline: 2px solid var(--dtfaq-accent);
	outline-offset: -2px;
}

.dtfaq__q-text {
	flex: 1;
	min-width: 0;
	/* Una pregunta con una palabra larga o una URL no debe desbordar en movil */
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ── Respuesta ────────────────────────────────────────────────────── */

.dtfaq__a {
	padding: var(--dtfaq-_py) var(--dtfaq-_px);
	border-top: 1px solid var(--dtfaq-border);
	color: var(--dtfaq-answer);
	font-size: var(--dtfaq-a-size);
	line-height: var(--dtfaq-a-lh);
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Contenido ancho dentro de una respuesta (una tabla pegada, un bloque de
   codigo) hace scroll en su propia caja, nunca empuja la pagina. */
.dtfaq__a table,
.dtfaq__a pre {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.dtfaq__a img {
	max-width: 100%;
	height: auto;
}

.dtfaq__a > *:first-child { margin-top: 0; }
.dtfaq__a > *:last-child { margin-bottom: 0; }
.dtfaq__a p { margin: 0 0 12px; }
.dtfaq__a ul,
.dtfaq__a ol { margin: 0 0 12px; padding-left: 20px; }
.dtfaq__a li { margin-bottom: 6px; }
.dtfaq__a a { color: var(--dtfaq-accent); text-decoration: underline; }

/* ── Iconos (CSS puro, sin fuentes ni SVG externo) ────────────────── */

.dtfaq__icon {
	position: relative;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	/* En color de marca, el icono es la senal de que la fila se abre. Al
	   abrirse vuelve a currentColor para no perderse sobre el fondo activo. */
	color: var(--dtfaq-icon, var(--dtfaq-accent));
	transition: transform var(--dtfaq-speed) ease, color var(--dtfaq-speed) ease;
}

.dtfaq__item[open] .dtfaq__icon {
	color: currentColor;
}

.dtfaq__icon::before,
.dtfaq__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: opacity var(--dtfaq-speed) ease;
}

/* mas: el signo + gira hasta convertirse en x  (por defecto) */
.dtfaq__icon::before { width: 14px; height: 2px; }
.dtfaq__icon::after  { width: 2px; height: 14px; }
.dtfaq__item[open] .dtfaq__icon { transform: rotate(45deg); }

/* masmenos: el + pierde la barra vertical y queda − , sin girar */
.dtfaq--icon-masmenos .dtfaq__item[open] .dtfaq__icon { transform: none; }
.dtfaq--icon-masmenos .dtfaq__item[open] .dtfaq__icon::after { opacity: 0; }

/* flecha: chevron que gira 180 grados */
.dtfaq--icon-flecha .dtfaq__icon::before {
	width: 9px;
	height: 9px;
	background: none;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translate(-50%, -70%) rotate(45deg);
}
.dtfaq--icon-flecha .dtfaq__icon::after { display: none; }
.dtfaq--icon-flecha .dtfaq__item[open] .dtfaq__icon { transform: rotate(180deg); }

/* sin icono */
.dtfaq--icon-none .dtfaq__icon { display: none; }

/* Icono a la izquierda. El texto conserva su flex:1, asi que el icono queda
   pegado al inicio y la pregunta ocupa el resto de la linea. */
.dtfaq--icon-izq .dtfaq__q { flex-direction: row-reverse; }
.dtfaq--icon-izq .dtfaq__icon { margin-right: 2px; }

/* ── Presets de estilo ────────────────────────────────────────────── */

/* lista: pegados, separados por una linea. Sin sombras. */
/* Los presets se escriben con doble clase (.dtfaq.dtfaq--x) a proposito: los
   ajustes del sitio se inyectan despues en ".dtfaq" con una sola clase, y con
   la misma especificidad ganarian ellos. Sin esto, el gap o la sombra que
   define el preset nunca se aplican. */
.dtfaq.dtfaq--lista {
	--dtfaq-gap: 0px;
	--dtfaq-shadow: none;
	--dtfaq-shadow-open: none;
	--dtfaq-radius: 0px;
}
.dtfaq--lista .dtfaq__item { border-bottom: 1px solid var(--dtfaq-border); }
.dtfaq--lista .dtfaq__item:first-child { border-top: 1px solid var(--dtfaq-border); }
.dtfaq--lista .dtfaq__item[open] .dtfaq__q {
	background: transparent;
	color: var(--dtfaq-accent);
}

/* borde: cada pregunta en su recuadro */
.dtfaq.dtfaq--borde {
	--dtfaq-gap: 8px;
	--dtfaq-shadow: none;
	--dtfaq-shadow-open: none;
}
.dtfaq--borde .dtfaq__item { border: 1px solid var(--dtfaq-border); }
.dtfaq--borde .dtfaq__item[open] { border-color: var(--dtfaq-accent); }

/* suave: preguntas separadas por lineas, con un fondo casi invisible que las
   distingue de las respuestas. La abierta sube un tono y pasa a color de
   marca. Da senal de "esto se abre" sin cajas ni color de mas. */
.dtfaq.dtfaq--suave {
	--dtfaq-gap: 0px;
	--dtfaq-shadow: none;
	--dtfaq-shadow-open: none;
	--dtfaq-radius: 0px;
}

.dtfaq--suave .dtfaq__item {
	border-bottom: 1px solid var(--dtfaq-border);
}

.dtfaq--suave .dtfaq__item:first-child {
	border-top: 1px solid var(--dtfaq-border);
}

.dtfaq--suave .dtfaq__q {
	background: var(--dtfaq-q-soft);
}

.dtfaq--suave .dtfaq__item[open] .dtfaq__q {
	background: var(--dtfaq-q-bg);
	color: var(--dtfaq-accent);
}

.dtfaq--suave .dtfaq__item[open] .dtfaq__icon {
	color: var(--dtfaq-accent);
}

/* barra: pregunta sobre fondo suave con filete lateral de acento. La pregunta
   no invierte a color solido al abrirse, se queda igual: pesa menos y no
   compite con el contenido de la pagina. */
.dtfaq.dtfaq--barra {
	--dtfaq-gap: 6px;
	--dtfaq-shadow: none;
	--dtfaq-shadow-open: none;
}

.dtfaq--barra .dtfaq__q,
.dtfaq--barra .dtfaq__item[open] .dtfaq__q {
	background: var(--dtfaq-q-bg);
	color: var(--dtfaq-accent);
	border-left: var(--dtfaq-bar-w) solid var(--dtfaq-bar);
}

.dtfaq--barra .dtfaq__q:hover {
	filter: brightness(0.97);
}

.dtfaq--barra .dtfaq__a {
	border-top: none;
	border-left: var(--dtfaq-bar-w) solid transparent;
}

/* minimal: sin fondo ni caja, solo texto */
.dtfaq.dtfaq--minimal {
	--dtfaq-gap: 4px;
	--dtfaq-shadow: none;
	--dtfaq-shadow-open: none;
	--dtfaq-surface: transparent;
	--dtfaq-pad-x: 0px;
}
.dtfaq--minimal .dtfaq__item[open] .dtfaq__q {
	background: transparent;
	color: var(--dtfaq-accent);
}
.dtfaq--minimal .dtfaq__a { border-top: none; padding-top: 0; }

/* ── Animacion ────────────────────────────────────────────────────── */

.dtfaq--anim-suave .dtfaq__item[open] .dtfaq__a {
	animation: dtfaq-in var(--dtfaq-speed) ease;
}

@keyframes dtfaq-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

.dtfaq--anim-none,
.dtfaq--anim-none .dtfaq__item,
.dtfaq--anim-none .dtfaq__q,
.dtfaq--anim-none .dtfaq__icon {
	transition: none;
}
.dtfaq--anim-none .dtfaq__item[open] .dtfaq__a { animation: none; }

/* ── Movil ────────────────────────────────────────────────────────── */

/* En pantallas estrechas el espaciado lateral se come el texto y el hueco
   entre pregunta e icono sobra. Se ajusta con las mismas variables, asi que
   cualquier valor propio del sitio se sigue respetando por encima de esto. */
@media (max-width: 480px) {
	.dtfaq {
		/* Recorta el espaciado solo si el sitio pidio uno mayor. Si el ajuste
		   ya es pequeno, se respeta tal cual. */
		--dtfaq-_px: min(var(--dtfaq-pad-x), 14px);
		--dtfaq-_py: min(var(--dtfaq-pad-y), 14px);
	}

	.dtfaq__q { gap: 10px; }
}

/* El area de toque de la pregunta nunca baja de 44px, que es el minimo
   comodo en pantalla tactil. */
.dtfaq__q { min-height: 44px; }

/* ── Compatibilidad y accesibilidad ───────────────────────────────── */

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.dtfaq__q:hover { background: rgba(0, 0, 0, 0.03); }
}

@media (prefers-reduced-motion: reduce) {
	.dtfaq__item,
	.dtfaq__icon,
	.dtfaq__q { transition: none; }
	.dtfaq__item[open] .dtfaq__a { animation: none; }
}