/**
 * Campos propios en la web — Inscripciones Presenciales
 *
 * Solo disposición. Ni un color, ni una familia tipográfica, ni un tamaño de
 * letra: el aspecto lo pone Divi, y una hoja nuestra que le discutiera eso sería
 * un problema en cada página y en cada cambio de tema.
 *
 * Lo que sí hace falta es la retícula: dos columnas que se alinean entre filas no
 * se consiguen con el margen que el tema trae de serie.
 *
 * Todo cuelga de .ip-caracteristicas, .ip-caracteristica o .ip-programa. Ningún
 * selector de elemento suelto.
 *
 * @package InscripcionesPresenciales
 */

/* ------------------------------------------------------- características */

.ip-caracteristicas {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ip-caracteristicas__item {
	display: grid;
	grid-template-columns: minmax(6em, 12em) 1fr;
	gap: .35em 1.25em;
	padding: .5em 0;
	align-items: baseline;
}

/* Una regla entre filas. Gris neutro translúcido y no un color de la marca: así
   se ve sobre fondo claro y sobre fondo oscuro sin que esta hoja tenga que saber
   cuál de los dos usa el tema. */
.ip-caracteristicas__item + .ip-caracteristicas__item {
	border-top: 1px solid rgba(128, 128, 128, .32);
}

.ip-caracteristicas__etiqueta {
	font-weight: 700;
}

.ip-caracteristicas__valor {
	min-width: 0;
}

/* Sin rótulos, el valor ocupa la fila entera: la columna reservada a la etiqueta
   dejaría una sangría que no explica nada. La clase la pone PHP; con :has() esto
   se resolvería solo, pero entonces dependería de un navegador de 2023 para algo
   que ya se sabe al pintar. */
.ip-caracteristicas--sin-etiquetas .ip-caracteristicas__item {
	grid-template-columns: 1fr;
}

/* Una característica suelta dentro de una frase: en línea y sin retícula. */
.ip-caracteristica {
	display: inline;
}

.ip-caracteristica .ip-caracteristicas__etiqueta::after {
	content: " ";
}

/* ---------------------------------------------------------------- programa */

.ip-programa__titulo {
	margin: 0 0 .6em;
}

.ip-programa__lista {
	margin: 0;
}

/* Un programa puede venir partido en bloques —«Primer trimestre», «Segundo
   trimestre»—, cada uno con su título y sus sesiones. El curso que no lo esté es
   un solo bloque sin título: el aire de abajo no llega a verse porque no hay un
   segundo bloque del que separarse. */
.ip-programa__bloque + .ip-programa__bloque {
	margin-top: 1.8em;
}

.ip-programa__bloque-titulo {
	margin: 0 0 .5em;
}

.ip-programa__fila,
.ip-programa__cabecera {
	display: grid;
	grid-template-columns: minmax(8em, 16em) 1fr;
	gap: .35em 1.5em;
	padding: .6em 0;
	align-items: baseline;
}

.ip-programa__cabecera {
	font-weight: 700;
	border-bottom: 1px solid rgba(128, 128, 128, .5);
}

.ip-programa__fila + .ip-programa__fila {
	border-top: 1px solid rgba(128, 128, 128, .32);
}

/* dt y dd traen márgenes propios del navegador que descuadran la retícula. */
.ip-programa__izquierda,
.ip-programa__derecha {
	margin: 0;
	min-width: 0;
}

.ip-programa__izquierda {
	font-weight: 700;
}

/* ------------------------------------------------------------------ móvil */

/* Dos columnas en una pantalla estrecha dejan la derecha en una tira de tres
   palabras por línea. Apiladas se leen; alineadas a la izquierda, mejor. */
@media (max-width: 600px) {
	.ip-caracteristicas__item,
	.ip-programa__fila,
	.ip-programa__cabecera {
		grid-template-columns: 1fr;
		gap: .15em;
	}
}