/**
 * Estilos del frontend.
 *
 * Todo lo configurable pasa por variables CSS que emite el panel de ajustes
 * (--dgal-*). Los valores de acá son solo el respaldo por si el panel todavía
 * no guardó nada.
 */

.dgal {
	--dgal-primary: #1E54A2;
	--dgal-accent: #FF8200;
	--dgal-bg: #fff;
	--dgal-item-bg: #F7F8FA;
	--dgal-item-bg-hover: #EDF1F7;
	--dgal-border: #E1E5EB;
	--dgal-radius: 8px;
	--dgal-gap: 12px;
	--dgal-item-pad: 14px;
	--dgal-font: inherit;
	--dgal-title-color: #1A2A3A;
	--dgal-title-color-hover: #1E54A2;
	--dgal-title-size: 16px;
	--dgal-title-weight: 600;
	--dgal-meta-color: #6B7A8C;
	--dgal-meta-size: 13px;
	--dgal-desc-color: #4A5A6A;
	--dgal-desc-size: 14px;
	--dgal-cat-bg: #1E54A2;
	--dgal-cat-color: #fff;
	--dgal-cat-size: 18px;
	--dgal-cat-weight: 700;
	--dgal-cat-pad: 12px;
	--dgal-cat-radius: 6px;
	--dgal-cat-cols: 2;
	--dgal-cat-cuenta-color: #fff;
	--dgal-cat-cuenta-bg: rgba(255,255,255,.22);
	--dgal-cat-cuenta-size: 12px;
	--dgal-sub-cuenta-color: #6B7A8C;
	--dgal-sub-cuenta-size: 12px;
	--dgal-sub-color: #1A2A3A;
	--dgal-sub-size: 15px;
	--dgal-sub-bg: #fff;
	--dgal-sub-bg-hover: #F3F6FA;
	--dgal-icon-size: 32px;
	--dgal-btn-bg: #1E54A2;
	--dgal-btn-color: #fff;
	--dgal-btn-bg-hover: #153E7A;
	--dgal-btn-radius: 6px;
	--dgal-btn-pad: 8px 16px;
	--dgal-grid-cols: 3;

	font-family: var(--dgal-font);
	background: var(--dgal-bg);
	color: var(--dgal-title-color);
}

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

/* --------------------------------------------------------------- Buscador */

.dgal__buscador { position: relative; margin-bottom: var(--dgal-gap); max-width: 460px; }

.dgal__buscador-input {
	width: 100%;
	padding: 11px 40px 11px 14px;
	border: 1px solid var(--dgal-border);
	border-radius: var(--dgal-radius);
	font-size: 15px;
	font-family: inherit;
	background: #fff;
	color: var(--dgal-title-color);
}

.dgal__buscador-input:focus {
	outline: 2px solid var(--dgal-primary);
	outline-offset: 1px;
	border-color: var(--dgal-primary);
}

.dgal__buscador-icono {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--dgal-meta-color);
	pointer-events: none;
	display: flex;
}

/* ---------------------------------------------------- Cajas de categoría */

/*
 * Cada categoría principal es una caja. La grilla usa auto-flow denso para
 * que las cajas cortas no dejen huecos debajo de las largas.
 */
.dgal__cajas {
	display: grid;
	gap: calc(var(--dgal-gap) * 1.5);
	align-items: start;
	/* Las columnas las define el bloque de más abajo, que combina el número
	   pedido con el ancho disponible. */
}

.dgal__rama--nivel0 {
	background: var(--dgal-bg);
	border-radius: var(--dgal-cat-radius);
	overflow: hidden;
}

.dgal--enmarcado .dgal__rama--nivel0 {
	border: 1px solid var(--dgal-border);
}

.dgal--sombra .dgal__rama--nivel0 {
	box-shadow: 0 1px 3px rgba(26,42,58,.08);
}

.dgal__cat-titulo {
	margin: 0;
	font-size: var(--dgal-cat-size);
	font-weight: var(--dgal-cat-weight);
	line-height: 1.3;
}

.dgal__cat-titulo--plano {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: var(--dgal-cat-pad);
	background: var(--dgal-cat-bg);
	color: var(--dgal-cat-color);
}

.dgal__cat-boton {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: var(--dgal-cat-pad);
	border: 0;
	background: var(--dgal-cat-bg);
	color: var(--dgal-cat-color);
	font-size: inherit;
	font-weight: inherit;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	box-shadow: none;
	line-height: 1.3;
}

.dgal__cat-boton:focus-visible { outline: 3px solid var(--dgal-accent); outline-offset: -3px; }
.dgal__cat-nombre { flex: 1; min-width: 0; }

.dgal__cat-cuenta {
	background: var(--dgal-cat-cuenta-bg);
	color: var(--dgal-cat-cuenta-color);
	border-radius: 999px;
	padding: 1px 9px;
	font-size: var(--dgal-cat-cuenta-size);
	font-weight: 600;
	flex-shrink: 0;
}

.dgal__cat-flecha {
	flex-shrink: 0;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transition: transform .2s;
}

.dgal__cat-boton[aria-expanded="false"] .dgal__cat-flecha { transform: rotate(-90deg); }

.dgal__rama--nivel0 > .dgal__rama-cuerpo { padding: var(--dgal-gap); }
.dgal__rama--nivel0 > .dgal__rama-cuerpo:empty { display: none; }

/* --------------------------------------------------------- Subcategorías */

/*
 * Las subcategorías son filas discretas con un signo + a la derecha, como en
 * el listado anterior. No compiten visualmente con el título de la caja.
 */
.dgal__sub-titulo { margin: 0; font-size: var(--dgal-sub-size); font-weight: 600; }

.dgal__rama--nivel1 + .dgal__rama--nivel1,
.dgal__items + .dgal__rama--nivel1 { border-top: 1px solid var(--dgal-border); }

.dgal__sub-boton {
	background: var(--dgal-sub-bg);
	color: var(--dgal-sub-color);
	padding: 12px 14px;
	font-size: var(--dgal-sub-size);
	transition: background .15s;
}

.dgal__sub-boton:hover { background: var(--dgal-sub-bg-hover); }
.dgal__sub-boton:focus-visible { outline: 3px solid var(--dgal-accent); outline-offset: -3px; }

.dgal__sub-marca {
	width: 4px;
	align-self: stretch;
	min-height: 18px;
	border-radius: 2px;
	flex-shrink: 0;
}

.dgal__sub-cuenta {
	color: var(--dgal-sub-cuenta-color);
	font-size: var(--dgal-sub-cuenta-size);
	font-weight: 600;
	flex-shrink: 0;
}

/* El signo + se convierte en - al abrir. */
.dgal__sub-mas {
	position: relative;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	opacity: .65;
}

.dgal__sub-mas::before,
.dgal__sub-mas::after {
	content: "";
	position: absolute;
	background: currentColor;
	transition: transform .2s, opacity .2s;
}

.dgal__sub-mas::before { top: 6px; left: 0; width: 14px; height: 2px; }
.dgal__sub-mas::after { left: 6px; top: 0; width: 2px; height: 14px; }

.dgal__sub-boton[aria-expanded="true"] .dgal__sub-mas::after { transform: scaleY(0); opacity: 0; }

.dgal__rama--nivel1 > .dgal__rama-cuerpo { padding: 0 0 var(--dgal-gap) 18px; }
.dgal__rama--nivel2 > .dgal__rama-cuerpo { padding-left: 16px; }

.dgal__rama--nivel1 .dgal__items { gap: 8px; padding-top: 8px; }

/* Nivel 2 en adelante: un poco más chico, para que la jerarquía se lea. */
.dgal__rama--nivel2 .dgal__sub-boton { font-size: calc(var(--dgal-sub-size) - 1px); }

/* Sin agrupar, los items van sueltos con el espaciado normal. */
.dgal__grupo { margin-bottom: calc(var(--dgal-gap) * 2); }

/* ------------------------------------------------------------------ Items */

.dgal__items { display: flex; flex-direction: column; gap: var(--dgal-gap); }

.dgal--cuadricula .dgal__items {
	display: grid;
	grid-template-columns: repeat(var(--dgal-grid-cols), minmax(0, 1fr));
}

.dgal__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: var(--dgal-item-pad);
	background: var(--dgal-item-bg);
	border: 1px solid var(--dgal-border);
	border-radius: var(--dgal-radius);
	transition: background .15s, transform .15s;
}

.dgal--sombra .dgal__item { box-shadow: 0 1px 3px rgba(26,42,58,.06); }
.dgal__item:hover { background: var(--dgal-item-bg-hover); }

.dgal--franja .dgal__item {
	border-left: 4px solid var(--dgal-franja-color, var(--dgal-primary));
}

.dgal--cuadricula .dgal__item {
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

.dgal__item-icono { flex-shrink: 0; display: flex; align-items: center; }
.dgal__item-icono svg { display: block; width: var(--dgal-icon-size); height: var(--dgal-icon-size); }

/*
 * Modo monocromo: un solo color para todos los tipos de archivo. El SVG usa
 * currentColor, así que alcanza con fijar el color del contenedor. El estilo
 * en línea del SVG se pisa con !important porque lo emite PHP por familia.
 */
.dgal--icono-mono .dgal__item-icono svg { color: var(--dgal-icon-color) !important; }

.dgal__item-cuerpo { flex: 1; min-width: 0; }

.dgal__item-titulo {
	margin: 0 0 3px;
	font-size: var(--dgal-title-size);
	font-weight: var(--dgal-title-weight);
	line-height: 1.35;
}

.dgal__item-titulo a {
	color: var(--dgal-title-color);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.dgal__item-titulo a:hover,
.dgal__item-titulo a:focus { color: var(--dgal-title-color-hover); text-decoration: underline; }

.dgal__badge {
	display: inline-block;
	background: var(--dgal-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 2px 7px;
	border-radius: 999px;
	vertical-align: 2px;
	margin-left: 6px;
}

.dgal__item-desc {
	margin: 0 0 5px;
	color: var(--dgal-desc-color);
	font-size: var(--dgal-desc-size);
	line-height: 1.5;
}

.dgal__item-meta {
	margin: 0;
	color: var(--dgal-meta-color);
	font-size: var(--dgal-meta-size);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
}

.dgal__meta-dato { display: inline-flex; align-items: center; }
.dgal__meta-dato + .dgal__meta-dato::before { content: "·"; margin-right: 10px; opacity: .6; }

.dgal__item-accion { flex-shrink: 0; }
.dgal--cuadricula .dgal__item-accion { width: 100%; margin-top: auto; padding-top: 10px; }

/* ----------------------------------------------------------------- Botón */

.dgal__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: var(--dgal-btn-pad);
	background: var(--dgal-btn-bg);
	color: var(--dgal-btn-color);
	border: 0;
	border-radius: var(--dgal-btn-radius);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
	cursor: pointer;
	transition: background .15s;
	white-space: nowrap;
}

.dgal__boton:hover,
.dgal__boton:focus { background: var(--dgal-btn-bg-hover); color: var(--dgal-btn-color); text-decoration: none; }
.dgal__boton:focus-visible { outline: 3px solid var(--dgal-accent); outline-offset: 2px; }
.dgal--cuadricula .dgal__boton { width: 100%; }

.dgal__boton--grande { font-size: 16px; padding: 12px 24px; }
.dgal__boton-peso { font-weight: 400; opacity: .85; font-size: .9em; }

.dgal__pastilla {
	display: inline-block;
	padding: 3px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	margin: 0 4px 4px 0;
}

.dgal__vacio {
	padding: 40px 20px;
	text-align: center;
	color: var(--dgal-meta-color);
	background: var(--dgal-item-bg);
	border-radius: var(--dgal-radius);
}

.dgal__cargando { opacity: .5; pointer-events: none; }

/* ------------------------------------------------------------------ Ficha */

.dgal-pagina { max-width: 1100px; margin: 0 auto; padding: 32px 20px; }
.dgal-pagina__titulo { margin: 0 0 8px; }
.dgal-pagina__desc { color: var(--dgal-meta-color, #6B7A8C); margin: 0 0 24px; }

.dgal-ficha { max-width: 860px; margin: 0 auto; padding: 32px 20px; }

.dgal-ficha__cabecera { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px; }
.dgal-ficha__icono { flex-shrink: 0; }
.dgal-ficha__titulo { margin: 0 0 8px; line-height: 1.25; }

.dgal-ficha__meta {
	margin: 0 0 10px;
	color: var(--dgal-meta-color);
	font-size: var(--dgal-meta-size);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
}
.dgal-ficha__meta span + span::before { content: "·"; margin-right: 10px; opacity: .6; }

.dgal-ficha__cats { margin: 0; }

.dgal-ficha__desc {
	background: var(--dgal-item-bg);
	border-radius: var(--dgal-radius);
	padding: 18px 20px;
	margin-bottom: 20px;
	color: var(--dgal-desc-color);
	line-height: 1.6;
}

.dgal-ficha__accion { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.dgal-ficha__volver { color: var(--dgal-primary); font-size: 14px; }

/* ------------------------------------------------------------ Adaptativo */

/*
 * Las columnas se adaptan al ancho REAL del contenedor, no al de la ventana.
 *
 * Con una media query, un listado dentro de una columna angosta de Elementor
 * recibía el mismo trato que la pantalla completa: pedías 3 columnas y el
 * tope de tablet te devolvía 2. Con auto-fit cada caja reclama un mínimo y el
 * navegador decide cuántas entran de verdad.
 */
/*
 * Columnas de las cajas de categoría.
 *
 * Se construye desde el móvil hacia arriba: una columna es el punto de
 * partida y se agregan más solo cuando hay ancho comprobado para ellas.
 *
 * Todas las pistas usan minmax(0, 1fr). El 0 como mínimo es lo que impide el
 * desbordamiento: sin él, una pista toma como mínimo el ancho de su contenido
 * más largo —un título de categoría de sesenta caracteres— y se sale del
 * contenedor. Ese era el origen del corte horizontal en pantallas angostas.
 *
 * La cantidad pedida llega como clase (.dgal--cols-N) desde PHP, no como
 * cálculo en CSS: es predecible y no depende de funciones anidadas cuyo
 * resultado varía entre navegadores.
 */
.dgal__cajas {
	grid-template-columns: minmax(0, 1fr);
}

/* Teléfono en horizontal y tabletas angostas. */
@media (min-width: 600px) {
	.dgal--cols-2 .dgal__cajas,
	.dgal--cols-3 .dgal__cajas,
	.dgal--cols-4 .dgal__cajas,
	.dgal__cajas.dgal--cols-2,
	.dgal__cajas.dgal--cols-3,
	.dgal__cajas.dgal--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Tabletas en horizontal y portátiles. */
@media (min-width: 900px) {
	.dgal--cols-3 .dgal__cajas,
	.dgal__cajas.dgal--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.dgal--cols-4 .dgal__cajas,
	.dgal__cajas.dgal--cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Escritorio: recién acá tiene sentido la cuarta columna. */
@media (min-width: 1200px) {
	.dgal--cols-4 .dgal__cajas,
	.dgal__cajas.dgal--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Una sección con 1 columna propia manda sobre la cantidad general. */
.dgal__cajas.dgal--cols-1 { grid-template-columns: minmax(0, 1fr) !important; }

/*
 * Nada dentro del listado puede ser más ancho que el listado.
 *
 * Un solo elemento que se pase —un título largo, una URL sin espacios, una
 * imagen sin límite— empuja el ancho de todo el bloque y produce el scroll
 * horizontal que rompe la página en el teléfono.
 */
.dgal,
.dgal * {
	max-width: 100%;
	box-sizing: border-box;
}

.dgal { overflow-wrap: break-word; }

/*
 * Los hijos de un contenedor flex no bajan de su ancho de contenido salvo que
 * se les diga explícitamente. Sin min-width:0 el texto no se parte y empuja
 * al contador y a la flecha fuera de la pantalla.
 */
.dgal .dgal__cat-nombre,
.dgal .dgal__seccion-texto,
.dgal .dgal__item-cuerpo,
.dgal .dgal__item-titulo,
.dgal .dgal__item-desc {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: normal;
	hyphens: auto;
}

/* --------------------------------------------------------- Pantalla chica */

@media (max-width: 600px) {
	.dgal--cuadricula .dgal__items { grid-template-columns: minmax(0, 1fr); }

	/* El documento pasa a dos filas: datos arriba, botón abajo a lo ancho. */
	.dgal__item { flex-wrap: wrap; }
	.dgal__item-accion { width: 100%; }
	.dgal .dgal__boton { width: 100%; justify-content: center; }
	.dgal__item-ficha { align-self: flex-start; }

	.dgal-ficha__cabecera { flex-direction: column; gap: 12px; }

	/* Títulos y espaciados más contenidos, sin tocar lo configurado en el
	   panel más de lo necesario para que entre. */
	.dgal .dgal__cat-boton,
	.dgal .dgal__cat-titulo--plano {
		padding: 12px 14px !important;
		font-size: clamp(14px, calc(var(--dgal-cat-size) * 0.8), var(--dgal-cat-size)) !important;
		gap: 8px;
	}

	.dgal .dgal__seccion-titulo {
		font-size: clamp(18px, 5vw, 26px) !important;
		gap: 8px;
	}

	.dgal .dgal__sub-boton { padding: 11px 12px !important; }

	.dgal__cajas { gap: var(--dgal-gap); }
	.dgal__seccion { margin-bottom: calc(var(--dgal-gap) * 1.6); }

	/* La sangría de las subcategorías se reduce: en 360px de ancho, 18px de
	   margen por nivel dejan sin espacio al texto. */
	.dgal__rama--nivel1 > .dgal__rama-cuerpo { padding-left: 10px; }
	.dgal__rama--nivel2 > .dgal__rama-cuerpo { padding-left: 8px; }

	.dgal__buscador { max-width: 100%; }
	.dgal__orden { justify-content: flex-start; margin-top: 0; }
	.dgal__controles { flex-wrap: wrap; }
}

/* Teléfonos angostos. */
@media (max-width: 380px) {
	.dgal .dgal__cat-boton { padding: 10px 12px !important; }
	.dgal .dgal__item { padding: 12px; }
	.dgal .dgal__cat-cuenta { padding: 1px 7px; }
}

@media (prefers-reduced-motion: reduce) {
	.dgal *, .dgal *::before, .dgal *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

.dgal__recorte {
	margin: 8px 0 0;
	padding: 8px 12px;
	background: var(--dgal-item-bg);
	border-radius: var(--dgal-radius);
	color: var(--dgal-meta-color);
	font-size: var(--dgal-meta-size);
}

.dgal__recorte a { color: var(--dgal-primary); }

/* ==========================================================================
 * Defensa contra temas agresivos
 *
 * Muchos temas estilizan TODO <button> del sitio: fuerzan esquinas redondas,
 * borde, sombra, mayúsculas y espaciado propio. Eso deforma los títulos de
 * categoría, que son botones para poder plegarse.
 *
 * Estas reglas usan !important de forma ACOTADA — solo dentro de .dgal — para
 * devolver el control a las variables del panel de ajustes.
 * ========================================================================== */

.dgal .dgal__cat-boton,
.dgal .dgal__sub-boton {
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-family: inherit !important;
	line-height: 1.35 !important;
	text-decoration: none !important;
	min-height: 0 !important;
	width: 100% !important;
	max-width: none !important;
	transform: none !important;
}

.dgal .dgal__cat-boton {
	border-radius: var(--dgal-cat-radius) !important;
	padding: var(--dgal-cat-pad) !important;
	background: var(--dgal-cat-bg);
	font-size: var(--dgal-cat-size) !important;
	font-weight: var(--dgal-cat-weight) !important;
}

.dgal .dgal__sub-boton {
	border-radius: 0 !important;
	padding: 12px 14px !important;
	font-size: var(--dgal-sub-size) !important;
	font-weight: 600 !important;
}

.dgal .dgal__cat-boton:hover,
.dgal .dgal__cat-boton:focus,
.dgal .dgal__cat-boton:active {
	border: 0 !important;
	box-shadow: none !important;
	transform: none !important;
}

.dgal .dgal__cat-boton:focus-visible,
.dgal .dgal__sub-boton:focus-visible {
	outline: 3px solid var(--dgal-accent) !important;
	outline-offset: -3px !important;
}

.dgal .dgal__cat-titulo,
.dgal .dgal__sub-titulo {
	border: 0 !important;
	padding: 0 !important;
	background: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/*
 * El nombre tiene que poder encogerse y partirse en varias líneas. Sin
 * min-width:0 un hijo de flex nunca baja de su ancho de contenido, y el
 * contador termina montado encima del texto.
 */
.dgal .dgal__cat-nombre {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	white-space: normal !important;
	overflow-wrap: anywhere;
	word-break: normal;
	hyphens: auto;
	text-align: left !important;
}

.dgal .dgal__cat-cuenta {
	background: var(--dgal-cat-cuenta-bg) !important;
	color: var(--dgal-cat-cuenta-color) !important;
	font-size: var(--dgal-cat-cuenta-size) !important;
}

.dgal .dgal__sub-cuenta {
	color: var(--dgal-sub-cuenta-color) !important;
	font-size: var(--dgal-sub-cuenta-size) !important;
}

.dgal .dgal__cat-cuenta,
.dgal .dgal__sub-cuenta,
.dgal .dgal__cat-flecha,
.dgal .dgal__sub-mas {
	flex: 0 0 auto !important;
}

/* El botón de descarga sufre lo mismo. */
.dgal .dgal__boton {
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	border-radius: var(--dgal-btn-radius) !important;
	padding: var(--dgal-btn-pad) !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	min-height: 0 !important;
	transform: none !important;
}

.dgal .dgal__boton:focus-visible {
	outline: 3px solid var(--dgal-accent) !important;
	outline-offset: 2px !important;
}

/* El buscador también: algunos temas fuerzan esquinas cuadradas en inputs. */
.dgal .dgal__buscador-input {
	border-radius: var(--dgal-radius) !important;
	border: 1px solid var(--dgal-border) !important;
	box-shadow: none !important;
	line-height: normal !important;
	height: auto !important;
}

/* Los títulos de la ficha: el tema suele pisar color y tamaño de h1-h4. */
.dgal .dgal__item-titulo,
.dgal .dgal-ficha__titulo {
	text-transform: none !important;
	letter-spacing: normal !important;
}

.dgal .dgal__item-titulo a {
	color: var(--dgal-title-color) !important;
	text-decoration: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

.dgal .dgal__item-titulo a:hover,
.dgal .dgal__item-titulo a:focus {
	color: var(--dgal-title-color-hover) !important;
	text-decoration: underline !important;
}

/* Igualar la altura de las cajas de cada fila, si el ajuste lo pide. */
.dgal--igualadas .dgal__cajas { align-items: stretch; }
.dgal--igualadas .dgal__rama--nivel0 { height: 100%; display: flex; flex-direction: column; }
.dgal--igualadas .dgal__rama--nivel0 > .dgal__rama-cuerpo { flex: 1; }

/* ------------------------------------------------- Abrir y cerrar todo */

.dgal__controles {
	display: flex;
	gap: 8px;
	margin-bottom: var(--dgal-gap);
}

.dgal .dgal__control {
	padding: 6px 14px !important;
	background: transparent !important;
	border: 1px solid var(--dgal-border) !important;
	border-radius: var(--dgal-btn-radius) !important;
	color: var(--dgal-meta-color) !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.dgal .dgal__control:hover {
	background: var(--dgal-item-bg) !important;
	color: var(--dgal-title-color) !important;
}

.dgal .dgal__control:focus-visible {
	outline: 3px solid var(--dgal-accent) !important;
	outline-offset: 2px !important;
}

/* ------------------------------------------------------ Selector de orden */

.dgal__orden {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: var(--dgal-gap);
	font-size: var(--dgal-meta-size);
	color: var(--dgal-meta-color);
}

.dgal .dgal__orden-select {
	padding: 6px 12px !important;
	border: 1px solid var(--dgal-border) !important;
	border-radius: var(--dgal-btn-radius) !important;
	background: #fff !important;
	color: var(--dgal-title-color) !important;
	font-family: inherit !important;
	font-size: var(--dgal-meta-size) !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	height: auto !important;
	max-width: 100%;
}

.dgal .dgal__orden-select:focus-visible {
	outline: 3px solid var(--dgal-accent) !important;
	outline-offset: 2px !important;
}

/* El buscador y sus controles en una fila cuando hay espacio. */
@media (min-width: 700px) {
	.dgal__orden { justify-content: flex-end; margin-top: calc(var(--dgal-gap) * -1 - 4px); }
}

/* Icono propio de la categoría. */
.dgal .dgal__cat-icono {
	flex-shrink: 0;
	display: block;
	object-fit: contain;
	border-radius: 3px;
	max-width: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

/* ------------------------------------------------------------- Secciones */

.dgal__seccion { margin-bottom: calc(var(--dgal-gap) * 2.5); }
.dgal__seccion:last-child { margin-bottom: 0; }

/*
 * El título de sección lleva sus colores y tamaños en el atributo style,
 * porque cada sección tiene los suyos. Lo de acá es solo la base.
 */
/*
 * El tema del sitio suele estilizar todos los h2: les quita el borde, les
 * cambia el color y a veces les mete un pseudo-elemento decorativo. Estas
 * reglas devuelven el control, y los valores concretos de cada sección
 * llegan por el atributo style, que gana sobre cualquier hoja.
 *
 * border-bottom NO lleva !important a propósito: tiene que poder ser pisado
 * por el estilo en línea de cada sección.
 */
.dgal .dgal__seccion-titulo {
	margin: 0 0 var(--dgal-gap) !important;
	padding: 0 0 8px;
	font-family: var(--dgal-font) !important;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25 !important;
	color: var(--dgal-title-color);
	border: 0;
	border-bottom: 2px solid var(--dgal-border);
	background: none;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-align: left !important;
	overflow-wrap: anywhere;
	box-shadow: none !important;
	width: auto !important;
	max-width: none !important;
	position: static !important;
}

/* Muchos temas dibujan una barrita decorativa bajo los h2 con ::after o
   ::before. Esa barrita compite con la línea de la sección. */
.dgal .dgal__seccion-titulo::before,
.dgal .dgal__seccion-titulo::after {
	display: none !important;
	content: none !important;
}

/* Con fondo, el título necesita respirar por dentro. */
.dgal .dgal__seccion-titulo[style*="background"] {
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 12px;
	border-radius: var(--dgal-cat-radius);
}

.dgal__seccion-desc {
	margin: calc(var(--dgal-gap) * -0.5) 0 var(--dgal-gap);
	color: var(--dgal-meta-color);
	font-size: var(--dgal-desc-size);
	line-height: 1.5;
}

/* El grupo sin título no lleva el espaciado extra de una sección con nombre. */
.dgal__seccion--sin-titulo { margin-top: 0; }

/* Icono de la sección. */
.dgal .dgal__seccion-titulo { display: flex; align-items: center; gap: 12px; }
.dgal .dgal__seccion-texto { min-width: 0; overflow-wrap: anywhere; }

.dgal .dgal__seccion-icono {
	flex-shrink: 0;
	display: block;
	object-fit: contain;
	max-width: none !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 4px;
}

/* Enlace discreto a la ficha, cuando el nombre lleva al archivo. */
.dgal .dgal__item-ficha {
	flex-shrink: 0;
	align-self: center;
	color: var(--dgal-meta-color) !important;
	font-size: var(--dgal-meta-size);
	text-decoration: none !important;
	white-space: nowrap;
	border: 0 !important;
	box-shadow: none !important;
}

.dgal .dgal__item-ficha:hover,
.dgal .dgal__item-ficha:focus {
	color: var(--dgal-primary) !important;
	text-decoration: underline !important;
}

.dgal--cuadricula .dgal__item-ficha { align-self: flex-start; margin-top: 4px; }

/* ==========================================================================
 * Refuerzo para pantallas angostas
 *
 * El tema del sitio define sus propios anchos y rellenos para botones y
 * enlaces, pensados para escritorio. En el teléfono esos valores desbordan.
 * ========================================================================== */

@media (max-width: 600px) {
	/* El botón de descarga ocupa el ancho y se toca cómodo. */
	.dgal .dgal__boton {
		min-height: 44px;
		padding: 12px 16px !important;
		font-size: 15px !important;
	}

	/* Los títulos de categoría también son zona táctil. */
	.dgal .dgal__cat-boton,
	.dgal .dgal__sub-boton {
		min-height: 44px;
	}

	/* El icono del tipo de archivo se achica para dar lugar al texto. */
	.dgal .dgal__item-icono svg {
		width: min(var(--dgal-icon-size), 28px);
		height: min(var(--dgal-icon-size), 28px);
	}

	/* Los datos secundarios se apilan si no entran en una línea. */
	.dgal__item-meta { gap: 2px 8px; }
	.dgal__meta-dato + .dgal__meta-dato::before { margin-right: 8px; }

	/* El icono de la sección no puede comerse el título. */
	.dgal .dgal__seccion-icono {
		width: min(var(--dgal-seccion-icono, 28px), 32px);
		height: auto;
	}

	/* El contador de la categoría, más compacto. */
	.dgal .dgal__cat-cuenta {
		font-size: clamp(10px, var(--dgal-cat-cuenta-size), 12px);
	}
}

/*
 * Ningún listado produce scroll horizontal, venga de donde venga el
 * desbordamiento. Es la última red de seguridad.
 */
.dgal { overflow-x: clip; }

@supports not (overflow: clip) {
	.dgal { overflow-x: hidden; }
}