/*
 * Estilos base. Todo lo que cambia de un colegio a otro está en variables: un tema
 * (directorio.estilo.css, p. ej. css/temas/catlleida.css) normalmente solo las sobrescribe.
 */
:root {
	--color-primario: #1f4e79;
	--color-primario-oscuro: #163a5a;
	--color-texto: #222;
	--color-titulos: var(--color-texto);
	--color-suave: #666;
	--color-borde: #d5d9de;
	--color-fondo: #f6f7f9;
	--color-superficie: #fff;
	--color-cabecera: var(--color-primario);
	--color-tabla-cabecera: transparent;
	--color-error: #b42318;
	--color-ok: #1e7b34;
	--radio: 4px;
	--fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fuente-titulos: var(--fuente);
	--fuente-botones: var(--fuente);
	--botones-mayusculas: none;
	--botones-espaciado: normal;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--fuente);
	color: var(--color-texto);
	background: var(--color-fondo);
	line-height: 1.5;
}

a {
	color: var(--color-primario);
}

.contenedor {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 1rem;
}

.contenedor-estrecho {
	max-width: 420px;
}

h1,
h2,
h3 {
	font-family: var(--fuente-titulos);
	color: var(--color-titulos);
}

main.contenedor {
	padding-top: 1.5rem;
	padding-bottom: 2rem;
}

/* Cabecera y pie */
.cabecera {
	background: var(--color-cabecera);
	color: #fff;
}

/* Sin cabecera propia (iframe): solo los idiomas, a la derecha y sin fondo */
.cabecera-minima {
	background: transparent;
}

.cabecera-minima .cabecera-contenido {
	justify-content: flex-end;
	min-height: 0;
	padding-top: 0.5rem;
}

.cabecera-minima .idiomas a {
	color: var(--color-primario);
}

.cabecera-admin {
	background: #333;
}

.cabecera-contenido {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 3.5rem;
	gap: 1rem;
}

.cabecera-titulo {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.cabecera .usuario {
	margin-right: 0.5rem;
}

.idiomas a {
	color: #fff;
	margin-left: 0.75rem;
	text-decoration: none;
	opacity: 0.75;
}

.idiomas a.is-active {
	opacity: 1;
	font-weight: 600;
}

.pie {
	border-top: 1px solid var(--color-borde);
	color: var(--color-suave);
	font-size: 0.875rem;
	padding: 1rem 0;
}

.descripcion {
	color: var(--color-suave);
}

/* Formularios */
.buscador,
.formulario .fila {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-end;
	margin-bottom: 1rem;
}

.buscador label,
.formulario .fila label {
	flex: 1 1 12rem;
}

.formulario label {
	display: block;
	margin-bottom: 0.75rem;
}

.formulario .fila .ancho {
	flex: 2 1 20rem;
}

label > span:first-child {
	display: block;
	font-size: 0.875rem;
	color: var(--color-suave);
	margin-bottom: 0.25rem;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="password"] {
	width: 100%;
	padding: 0.5rem;
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	font: inherit;
}

fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

.campo-publicable {
	display: flex;
	gap: 1rem;
	align-items: flex-end;
}

.campo-publicable > label:first-child {
	flex: 1;
}

label.check {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	white-space: nowrap;
	padding-bottom: 0.5rem;
}

.btn {
	display: inline-block;
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	background: var(--color-superficie);
	color: var(--color-texto);
	font: inherit;
	font-family: var(--fuente-botones);
	text-transform: var(--botones-mayusculas);
	letter-spacing: var(--botones-espaciado);
	text-decoration: none;
	cursor: pointer;
}

.btn-primary {
	background: var(--color-primario);
	border-color: var(--color-primario);
	color: #fff;
}

.btn-primary:hover {
	background: var(--color-primario-oscuro);
}

.password-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

.password-wrapper input {
	flex: 1;
	padding-right: 2.5rem;
}

.password-toggle {
	position: absolute;
	right: 0.5rem;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.25rem;
	color: #666;
	display: flex;
	align-items: center;
}

.password-toggle:hover {
	color: #333;
}

.password-toggle svg {
	width: 1.25rem;
	height: 1.25rem;
}

.check-visible {
	font-weight: 600;
	padding-bottom: 0;
}

.ayuda {
	margin-top: 0.25rem;
	font-size: 0.875rem;
	color: var(--color-suave);
}

.etiqueta {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0 0.4rem;
	border-radius: var(--radio);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
}

.etiqueta-oculto {
	background: #fde8e7;
	color: var(--color-error);
}

/* Error de un campo del formulario, debajo del input */
label > span.error {
	display: block;
	font-size: 0.875rem;
	margin-top: 0.25rem;
}

/* Avisos */
.aviso {
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--color-primario);
	background: var(--color-superficie);
}

.aviso-error,
.error {
	color: var(--color-error);
	border-left-color: var(--color-error);
}

.aviso-ok {
	color: var(--color-ok);
	border-left-color: var(--color-ok);
}

/* Resultados */
.total {
	color: var(--color-suave);
}

.tabla {
	width: 100%;
	border-collapse: collapse;
	background: var(--color-superficie);
}

.tabla th {
	background: var(--color-tabla-cabecera);
}

.tabla th,
.tabla td {
	text-align: left;
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--color-borde);
}

.paginacion {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1rem;
}

/* Ficha */
.ficha {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.5rem 1.5rem;
	background: var(--color-superficie);
	padding: 1rem 1.25rem;
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
}

.ficha dt {
	color: var(--color-suave);
}

.ficha dd {
	margin: 0;
}

.htmx-request.resultados,
.htmx-request #resultados {
	opacity: 0.5;
}

@media (max-width: 600px) {
	.ficha {
		grid-template-columns: 1fr;
	}

	.ficha dd {
		margin-bottom: 0.5rem;
	}
}

/* Listado: toda la fila abre la ficha */
.fila-enlace {
	cursor: pointer;
}

.fila-enlace:hover td,
.fila-enlace:focus-within td {
	background: var(--color-fila-activa, rgba(0, 0, 0, 0.04));
}