/**
 * Plan de estudios (S6-B): widget «CUME Plan de estudios» y bloque de la
 * Ficha de programa. Acordeón por periodo con <details>.
 *
 * Solo globales del kit (§3.1 y §3.2 del plan): se invierte solo en modo
 * claro. Sin colores fijos.
 */

.cume-plan {
	--cume-plan-divisor: var(--e-global-color-408e771); /* «CUME - Divisores». */
	--cume-plan-titulo: var(--e-global-color-6517dcc); /* «CUME - Títulos». */
	--cume-plan-texto: var(--e-global-color-text); /* «CUME - Párrafos». */
	--cume-plan-tenue: var(--e-global-color-3d710af); /* «CUME - Texto tenue». */
	--cume-plan-acento: var(--e-global-color-secondary); /* «CUME - Ámbar de marca». */
	--cume-plan-enlace: var(--e-global-color-ea2f468); /* «CUME - Enlaces». */
	--cume-plan-enlace-hover: var(--e-global-color-9a7084f); /* «CUME - Enlaces hover». */

	display: flex;
	flex-direction: column;
}

.cume-plan__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 8px;
}

.cume-plan__total {
	margin: 0;
	color: var(--e-global-color-2fcedc4); /* «CUME - Texto fuerte». */
	font-family: var(--e-global-typography-3508857-font-family), sans-serif;
	font-size: var(--e-global-typography-3508857-font-size, 0.75rem); /* «CUME - Antetítulo» del kit. */
	font-weight: var(--e-global-typography-3508857-font-weight);
	letter-spacing: var(--e-global-typography-3508857-letter-spacing);
	text-transform: var(--e-global-typography-3508857-text-transform);
}

/* Receta del botón «Enlace». Doble clase: gana a los estilos globales de botón. */
.cume-plan .cume-plan__todo {
	margin: 0;
	padding: 4px 0;
	background: var(--e-global-color-c9e8756); /* «CUME - Transparente». */
	border: 0;
	box-shadow: none;
	color: var(--cume-plan-enlace);
	font-family: var(--e-global-typography-25d4bb7-font-family), sans-serif;
	font-size: var(--e-global-typography-25d4bb7-font-size, 0.875rem); /* «CUME - Botón chico» del kit. */
	font-weight: var(--e-global-typography-25d4bb7-font-weight);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.cume-plan .cume-plan__todo:hover,
.cume-plan .cume-plan__todo:focus {
	background: var(--e-global-color-c9e8756);
	color: var(--cume-plan-enlace-hover);
}

.cume-plan__periodo {
	border-bottom: 1px solid var(--cume-plan-divisor);
}

.cume-plan__periodo:first-of-type {
	border-top: 1px solid var(--cume-plan-divisor);
}

.cume-plan__periodo-titulo {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 4px;
	color: var(--cume-plan-titulo);
	font-family: var(--e-global-typography-d76836c-font-family), sans-serif;
	font-size: var(--e-global-typography-d76836c-font-size, 1.1875rem); /* «CUME - Título de card» del kit. */
	font-weight: var(--e-global-typography-d76836c-font-weight);
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

/* Sin el triángulo del navegador: el chevron va a la derecha. */
.cume-plan__periodo-titulo::-webkit-details-marker {
	display: none;
}

.cume-plan__periodo-titulo::marker {
	content: "";
}

.cume-plan__periodo-titulo:focus {
	outline: none;
}

.cume-plan__periodo-titulo:focus-visible {
	outline: 2px solid var(--cume-plan-acento); /* Foco en ámbar de marca. */
	outline-offset: 2px;
}

.cume-plan__periodo-nombre {
	flex: 1 1 auto;
	min-width: 0;
}

.cume-plan__periodo-n {
	flex: 0 0 auto;
	color: var(--cume-plan-tenue);
	font-family: var(--e-global-typography-d4b32b9-font-family), sans-serif;
	font-size: var(--e-global-typography-d4b32b9-font-size, 0.875rem); /* «CUME - Texto pequeño» del kit. */
	font-weight: var(--e-global-typography-d4b32b9-font-weight);
}

.cume-plan__chevron {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin: 0 4px 4px;
	border-right: 2px solid var(--cume-plan-acento);
	border-bottom: 2px solid var(--cume-plan-acento);
	transform: rotate( 45deg );
	transition: transform 200ms ease;
}

.cume-plan__periodo[open] .cume-plan__chevron {
	margin-bottom: 0;
	margin-top: 4px;
	transform: rotate( -135deg );
}

.cume-plan__materias {
	margin: 0 0 16px;
	padding: 0 4px 0 28px;
	color: var(--cume-plan-texto);
	font-family: var(--e-global-typography-2b77420-font-family), sans-serif;
	font-size: var(--e-global-typography-2b77420-font-size, 1rem); /* «CUME - Párrafo» del kit. */
	line-height: var(--e-global-typography-2b77420-line-height);
}

.cume-plan__materias li {
	margin: 0 0 6px;
	padding-left: 4px;
}

.cume-plan__materias li::marker {
	color: var(--cume-plan-tenue);
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	.cume-plan__chevron {
		transition: none;
	}
}