/**
 * Glosario de Términos — estilos del frontend.
 * Inspirado en la imagen de referencia: interfaz clara, acento índigo,
 * barra A–Z y tarjetas tipo acordeón.
 */

.glosario-app {
	--gl-accent: #5b5bef;
	--gl-accent-soft: #eef0ff;
	--gl-accent-soft-2: #e5e7ff;
	--gl-text: #1f2333;
	--gl-text-soft: #5b6172;
	--gl-muted: #8a90a2;
	--gl-border: #e6e8ef;
	--gl-bg: #ffffff;
	--gl-bg-soft: #f7f8fb;
	--gl-search-btn: #f4b400;
	--gl-search-btn-hover: #e0a400;
	--gl-radius: 14px;
	--gl-shadow: 0 1px 2px rgba(20, 24, 40, .04), 0 8px 24px rgba(20, 24, 40, .05);

	color: var(--gl-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
	max-width: 1180px;
	margin: 0 auto;
	padding-top: 20px;
	box-sizing: border-box;
}

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

.glosario-titulo {
	font-size: clamp(1.9rem, 3vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0 0 1.25rem;
	color: var(--gl-text);
}

/* Layout de dos columnas */
.glosario-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 1.25rem;
	align-items: start;
}

/* ---------- Columna izquierda ---------- */
.glosario-sidebar {
	position: sticky;
	top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.glosario-search {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 4px 4px 18px;
	background: var(--gl-bg);
	border-radius: 999px;
}

.glosario-search__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 9px 0;
	font-size: .95rem;
	line-height: 1.4;
	color: var(--gl-text);
	background: transparent;
	border: 0;
	border-radius: 0;
	outline: none;
	box-shadow: none;
}

.glosario-search__input:focus {
	outline: none;
	box-shadow: none;
}

.glosario-search__input::placeholder {
	color: var(--gl-muted);
}

.glosario-search__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	color: #fff;
	background: var(--gl-search-btn);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s ease, transform .05s ease;
}

.glosario-search__btn:hover {
	background: var(--gl-search-btn-hover);
}

.glosario-search__btn:active {
	transform: scale(.95);
}

.glosario-search__btn:focus-visible {
	outline: 2px solid var(--gl-search-btn-hover);
	outline-offset: 2px;
}

.glosario-materias__title {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gl-muted);
	padding: 0 4px;
	margin-bottom: .5rem;
}

.glosario-materias__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.glosario-materia {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	font-size: .95rem;
	font-weight: 500;
	color: var(--gl-text-soft);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 10px;
	cursor: pointer;
	text-align: left;
	transition: background .15s ease, color .15s ease;
}

.glosario-materia:hover {
	background: var(--gl-bg-soft);
	color: var(--gl-text);
}

.glosario-materia.is-active {
	background: var(--gl-accent-soft);
	color: var(--gl-accent);
	font-weight: 600;
}

.glosario-materia__icon {
	display: inline-flex;
	color: currentColor;
	opacity: .8;
}

.glosario-materia__count {
	margin-left: auto;
	font-size: .75rem;
	font-weight: 600;
	color: var(--gl-muted);
	background: var(--gl-bg-soft);
	padding: 1px 8px;
	border-radius: 999px;
}

.glosario-materia.is-active .glosario-materia__count {
	background: #fff;
	color: var(--gl-accent);
}

.glosario-skeleton {
	padding: 10px 12px;
	color: var(--gl-muted);
	font-size: .9rem;
}

/* ---------- Columna derecha ---------- */
.glosario-content {
	min-width: 0;
}

.glosario-alfabeto {
	display: grid;
	grid-template-columns: repeat(14, minmax(0, 1fr));
	gap: 4px;
	background: var(--gl-bg);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius);
	padding: 10px 12px;
	box-shadow: var(--gl-shadow);
	margin-bottom: 1.25rem;
}

.glosario-alfabeto:empty {
	display: none;
}

.glosario-letra {
	width: 100%;
	min-width: 0;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .9rem;
	font-weight: 600;
	color: var(--gl-text-soft);
	background: transparent;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}

.glosario-letra:hover:not(:disabled) {
	background: var(--gl-bg-soft) !important;
	color: var(--gl-text) !important;
}

.glosario-letra.is-active {
	background: var(--gl-accent) !important;
	color: #fff !important;
}

.glosario-letra:disabled {
	color: #cbcfda;
	cursor: default;
}

/* Resultados / acordeón */
.glosario-resultados {
	background: var(--gl-bg-soft);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius);
	padding: 14px;
	min-height: 160px;
}

.glosario-resultados__head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 4px 6px 12px;
	color: var(--gl-text-soft);
	font-size: .9rem;
}

.glosario-resultados__head strong {
	color: var(--gl-text);
}

.glosario-hint,
.glosario-empty {
	margin: 0;
	padding: 2.5rem 1rem;
	text-align: center;
	color: var(--gl-muted);
	font-size: .95rem;
}

.glosario-item {
	background: var(--gl-bg);
	border: 1px solid var(--gl-border);
	border-radius: 12px;
	margin-bottom: 10px;
	overflow: hidden;
	transition: box-shadow .15s ease, border-color .15s ease;
}

.glosario-item:last-child {
	margin-bottom: 0;
}

.glosario-item.is-open {
	box-shadow: var(--gl-shadow);
	border-color: var(--gl-accent-soft-2);
}

.glosario-item__button {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 16px 18px;
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	color: var(--gl-text);
	font-size: 1rem;
}

/* Evita que el tema (p. ej. Astra) aplique su color de fondo al pasar el ratón:
   el término debe mantenerse blanco. */
.glosario-app .glosario-item__button,
.glosario-app .glosario-item__button:hover,
.glosario-app .glosario-item__button:focus,
.glosario-app .glosario-item__button:active {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--gl-text) !important;
	box-shadow: none !important;
	outline: none;
}

.glosario-app .glosario-item__button:hover .glosario-item__title,
.glosario-app .glosario-item__button:focus .glosario-item__title {
	color: var(--gl-text) !important;
}

.glosario-item__badge {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .85rem;
	font-weight: 700;
	color: var(--gl-accent);
	background: var(--gl-accent-soft);
	border-radius: 8px;
}

.glosario-item.is-open .glosario-item__badge {
	color: #fff;
	background: var(--gl-accent);
}

.glosario-item__title {
	font-weight: 600;
	flex: 1 1 auto;
	min-width: 0;
}

.glosario-item__chevron {
	flex: 0 0 auto;
	color: var(--gl-muted);
	transition: transform .2s ease;
}

.glosario-item.is-open .glosario-item__chevron {
	transform: rotate(180deg);
}

.glosario-item__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .22s ease;
}

.glosario-item.is-open .glosario-item__panel {
	grid-template-rows: 1fr;
}

.glosario-item__panel-inner {
	overflow: hidden;
}

.glosario-item__desc {
	padding: 0 18px 18px 60px;
	color: var(--gl-text-soft);
	font-size: .95rem;
	white-space: pre-line;
}

.glosario-item__desc p {
	margin: 0 0 .6em;
}

.glosario-item__desc p:last-child {
	margin-bottom: 0;
}

/* Realce de coincidencias en la búsqueda */
.glosario-item__title mark,
.glosario-item__desc mark {
	background: #fff3bf;
	color: inherit;
	padding: 0 1px;
	border-radius: 3px;
}

/* Cargando */
.glosario-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 2.5rem 1rem;
	color: var(--gl-muted);
	font-size: .95rem;
}

.glosario-spinner {
	width: 18px;
	height: 18px;
	border: 2px solid var(--gl-accent-soft-2);
	border-top-color: var(--gl-accent);
	border-radius: 50%;
	animation: glosario-spin .7s linear infinite;
}

@keyframes glosario-spin {
	to { transform: rotate(360deg); }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.glosario-layout {
		grid-template-columns: 1fr;
	}
	.glosario-sidebar {
		position: static;
	}
	.glosario-materias__list {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.glosario-materia {
		width: auto;
		flex: 1 1 45%;
	}
}

@media (max-width: 520px) {
	.glosario-letra {
		min-width: 0;
		height: 30px;
		font-size: .78rem;
		border-radius: 6px;
	}
	.glosario-alfabeto {
		gap: 3px;
		padding: 8px;
	}
	.glosario-item__desc {
		padding-left: 18px;
	}
	.glosario-materia {
		flex-basis: 100%;
	}
}

/* Respeto por reduce-motion */
@media (prefers-reduced-motion: reduce) {
	.glosario-item__panel,
	.glosario-item__chevron,
	.glosario-spinner {
		transition: none;
		animation: none;
	}
}