/* Horario semanal de clases — shortcode [dharma_horario] */

.dwc-horario,
.dwc-horario * {
	box-sizing: border-box;
}

.dwc-horario {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	max-width: 1180px;
	margin: 0 auto;
	padding: 24px 0;
	/* container-type, no @media: cuánto se achican las celdas depende del
	   ancho real del contenedor donde se pegó el shortcode -a veces media
	   página, a veces media columna de Divi- y no del viewport del
	   navegador. Con @media, un layout de dos columnas en desktop se
	   quedaría siempre con el tamaño grande aunque no entre. */
	container-type: inline-size;
	container-name: dwc-horario;
}

/*
 * Las variables de tamaño viven en .dwc-horario__scroll, NO en .dwc-horario
 * — aunque .dwc-horario__scroll no haga otra cosa con ellas más que
 * heredarlas hacia abajo. La razón no es de estilo: una @container no
 * puede redefinir una propiedad sobre el propio elemento que declara
 * container-type (es una restricción real de la spec, para no crear una
 * dependencia circular con el tamaño que la query está midiendo). Puesto
 * ahí, .dwc-horario__th-dia. { width: 640px } dentro del @container de
 * abajo se leía siempre en su valor de escritorio, sin importar cuán
 * angosto fuera el contenedor real. Un descendiente no tiene esa
 * restricción.
 */
.dwc-horario__scroll {
	--dwc-hora-w: 60px;
	--dwc-dia-w: 118px;
	--dwc-gap: 4px;
	--dwc-fila-h: 44px;
	--dwc-clase-h: 36px;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: #C7C7CE #F0F0F4;
	padding-bottom: 4px;
}

.dwc-horario__scroll::-webkit-scrollbar {
	height: 8px;
}

.dwc-horario__scroll::-webkit-scrollbar-track {
	background: #F0F0F4;
	border-radius: 999px;
}

.dwc-horario__scroll::-webkit-scrollbar-thumb {
	background: #C7C7CE;
	border-radius: 999px;
}

/*
 * CSS Grid, no <table>. El ancho de cada columna de día y el alto de cada
 * fila son los que digan grid-template-columns/grid-auto-rows, así de
 * literal — a diferencia de table-layout:fixed, el contenido de una celda
 * no puede ensancharla ni achicarla un píxel, en ningún navegador. Es la
 * causa por la que las columnas salían de ancho distinto (y, antes de
 * eso, las filas de alto distinto): un <table> reparte espacio según su
 * propio algoritmo, que puede pisar el ancho fijo cuando ese ancho viene
 * de una @container; un grid no reparte nada, solo mide las columnas que
 * se le pidieron.
 */
.dwc-horario__grilla {
	display: grid;
	grid-template-columns: var(--dwc-hora-w) repeat(6, var(--dwc-dia-w));
	/* minmax(min, auto), no un valor fijo: --dwc-fila-h es el alto mínimo
	   (todas las filas parten igual), pero si el nombre de una clase
	   envuelve a una segunda línea esa fila puede crecer para que se lea
	   completo, sin cortar nada. La diferencia con el problema de antes es
	   que este crecimiento lo calcula el propio algoritmo de grid a partir
	   del contenido real, así de un solo modo en todos los navegadores —
	   no un porcentaje adivinando el alto de una celda de tabla. */
	grid-auto-rows: minmax(var(--dwc-fila-h), auto);
	gap: var(--dwc-gap);
	width: max-content;
	margin: 0 auto;
}

/* display:contents saca a la fila de la caja del grid pero deja a sus
   hijos participar en él como si no existiera envoltorio — así el HTML
   puede agrupar "esto es una fila" (para el rol ARIA) sin que el grid
   tenga que enterarse. */
.dwc-horario__fila-cabecera,
.dwc-horario__fila {
	display: contents;
}

.dwc-horario__th-hora,
.dwc-horario__th-dia {
	display: flex;
	align-items: center;
	font-size: 11px;
	font-weight: 600;
	color: #55555F;
	padding: 4px 6px;
	overflow: hidden;
	white-space: nowrap;
}

.dwc-horario__th-dia {
	justify-content: center;
}

/*
 * Dos líneas de a propósito ("8:00–" arriba, "9:00" abajo), no una sola
 * recortada: la hora es información que hay que poder leer completa, no
 * algo que valga la pena truncar. Al partirla en dos líneas explícitas
 * (dos <span>, no un salto de texto que dependa de si envuelve o no) cabe
 * en una columna angosta sin perder ni un dígito.
 */
.dwc-horario__hora {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 10.5px;
	font-weight: 600;
	color: #1E1E24;
	line-height: 1.2;
	padding: 0 4px;
}

.dwc-horario__celda {
	display: flex;
	flex-direction: column;
	gap: 3px;
	background: #F7F7FA;
	border-radius: 10px;
	padding: 3px;
	overflow: hidden;
}

/*
 * Ancho y alto en variables (no en porcentaje de una celda de tabla, que
 * es lo que dependía de cómo cada navegador la resolviera). Acá el padre
 * es un <div> con alto ya fijo por el grid, así que un simple
 * width:100%/height:100% es válido sin ninguna ambigüedad.
 */
.dwc-horario__clase {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	width: 100%;
	height: 100%;
	min-height: var(--dwc-clase-h);
	background-color: #ECECF1;
	color: #1E1E24;
	font-size: 11px;
	font-weight: 600;
	border-radius: 8px;
	padding: 2px 6px;
	line-height: 1.2;
	overflow: hidden;
}

/*
 * Envuelve a una segunda línea si no entra en una (nunca a una tercera:
 * min-width:0 le permite angostarse todo lo que el texto necesite para
 * partirse solo en dos). La celda crece de alto para esto vía
 * grid-auto-rows más arriba, así que no hace falta recortar nada.
 */
.dwc-horario__clase span {
	text-align: center;
	white-space: normal;
	overflow-wrap: break-word;
	max-width: 100%;
	min-width: 0;
}

/* Cuando la clase es reservable, la celda es en realidad un <button> (para
   que abra el diálogo de Amelia con clic y con teclado) — se resetean los
   estilos por defecto del navegador para que se vea igual que un <span>. */
button.dwc-horario__clase {
	border: none;
	font-family: inherit;
	appearance: none;
}

.dwc-horario__clase--reservable {
	cursor: pointer;
	transition: filter .15s ease, transform .1s ease;
}

.dwc-horario__clase--reservable:hover {
	filter: brightness(0.94);
}

.dwc-horario__clase--reservable:active {
	transform: scale(0.97);
}

.dwc-horario__clase--reservable:focus-visible {
	outline: 2px solid #232329;
	outline-offset: 2px;
}

.dwc-horario__vacio {
	text-align: center;
	color: #8B8B95;
	padding: 24px 0;
}

/* Contenedor angosto (celular real, o una columna angosta de Divi si
   algún día vuelve a haber una): todo entra sin scroll horizontal. */
@container dwc-horario (max-width: 640px) {
	.dwc-horario__scroll {
		--dwc-hora-w: 30px;
		--dwc-dia-w: 50px;
		--dwc-gap: 2px;
		--dwc-fila-h: 32px;
		--dwc-clase-h: 26px;
	}

	.dwc-horario__th-hora,
	.dwc-horario__th-dia {
		font-size: 8.5px;
		padding: 2px 1px;
	}

	.dwc-horario__hora {
		font-size: 7.5px;
		padding: 0 1px;
	}

	.dwc-horario__celda {
		padding: 2px;
		border-radius: 7px;
	}

	.dwc-horario__clase {
		font-size: 8px;
		padding: 1px 3px;
		border-radius: 6px;
	}
}