/*
 * Block muduex/agenda: Task 4. Header subtitle, the one-piece search form, the category row, the Lista/Mes selector and the subscription link.
 *
 * Only theme tokens (--muduex-*), which already switch with data-tema and,
 * without JavaScript, with the system: no dark rules of its own here.
 * Section roots (header, form, the two navs, the subscription p) set no
 * block margins; agenda.css owns the gap between sections.
 */

/* --------------------------------------------------------------------------
   Header: h1 (agenda.css), the month's count and the poster.
   -------------------------------------------------------------------------- */

.muduex-agenda__cabecera {
	display: grid;
	gap: 0.25rem;
}

.muduex-agenda__subtitulo {
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--muduex-texto-secundario);
}

.muduex-agenda__cabecera > .muduex-cartel {
	margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   Search. The label «Buscar en la agenda» stays visible above the bar, also
   once something is typed. The bar, .muduex-agenda__caja, is the one rounded
   piece: 52 px, 1 px border, pill radius, the card background. The field has
   no border or background of its own; the 48 px accent button sits inside,
   2 px from the outer edge (1 px border + 1 px padding). Nothing has
   overflow: hidden, so nothing is ever clipped; the focus ring goes round
   the whole bar. min-height, not height: text-only zoom grows the bar.

   The theme styles every field in main with
   `main input:not([type="submit"]):not(…)` (0,4,2): the field is styled by
   its id so the bar, not the field, draws the box.
   -------------------------------------------------------------------------- */

.muduex-agenda__buscar {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.375rem;
}

.muduex-agenda__etiqueta {
	display: block;
	color: var(--muduex-texto);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.muduex-agenda__caja {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 52px;
	padding: 1px;
	border: 1px solid var(--muduex-borde-campo);
	border-radius: 999px;
	background-color: var(--muduex-tarjeta);
}

.muduex-agenda__caja:focus-within {
	outline: 3px solid var(--muduex-acento);
	outline-offset: 2px;
}

.muduex-agenda__lupa {
	flex: none;
	margin-inline-start: 0.875rem;
	color: var(--muduex-texto-secundario);
}

#muduex-agenda-q {
	flex: 1 1 auto;
	align-self: stretch;
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	max-width: none;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0 0.5rem;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--muduex-texto);
	font: inherit;
	font-size: 18px;
	line-height: 1.2;
	-webkit-appearance: none;
	appearance: none;
}

/* The bar draws the focus ring (:focus-within above). */
#muduex-agenda-q:focus,
#muduex-agenda-q:focus-visible {
	outline: none;
}

#muduex-agenda-q::-webkit-search-decoration {
	-webkit-appearance: none;
}

.muduex-agenda__boton {
	flex: none;
	box-sizing: border-box;
	height: 48px;
	min-height: 48px;
	margin: 0;
	padding: 0 1.125rem;
	border: 0;
	border-radius: 999px;
	background-color: var(--muduex-acento);
	color: var(--muduex-acento-contraste);
	font: inherit;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: opacity 120ms ease;
}

.muduex-agenda__boton:active {
	opacity: 0.6;
}

/* Inside the bar's ring: an inner ring in the button's text colour. */
.muduex-agenda__boton:focus-visible {
	outline: 2px solid var(--muduex-acento-contraste);
	outline-offset: -4px;
}

/* «Quitar la búsqueda», only with a search under way: a 48 px link. */
.muduex-agenda__quitar {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	min-height: 48px;
	color: var(--muduex-acento);
	font-size: 18px;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   Category pills (categorias.css draws each one). Below 40rem, a row that
   scrolls sideways with no visible scrollbar and a 1.5rem fade at the end;
   the row ends 1.5rem past the last pill, so scrolled to the end «Vecinos»
   and its focus ring sit clear of the fade. From 40rem the row wraps, so no
   pill is ever cut at the edge of a wide page. The 6 px of padding keep the
   focus rings (3 px + 2 px offset) inside the scroller; the negative inline
   margin keeps the pills aligned with the rest of the page.

   In the row, the active pill's dot becomes a check mark («Todas» too): a
   cue that is not colour (in dark, active and inactive fills are close).
   -------------------------------------------------------------------------- */

.muduex-agenda__categorias {
	position: relative;
	margin-inline: -6px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: 6px;
	scrollbar-width: none;
}

.muduex-agenda__categorias::-webkit-scrollbar {
	display: none;
}

.muduex-agenda__categorias > ul {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 0.5rem;
	width: max-content;
	margin: 0;
	padding: 6px;
	list-style: none;
}

.muduex-agenda__categorias li {
	flex: none;
	margin: 0;
	scroll-snap-align: start;
}

.muduex-agenda__categorias .muduex-cat[aria-current="page"] .muduex-cat__punto {
	display: inline-block;
	box-sizing: content-box;
	width: 10px;
	height: 5px;
	border: solid currentcolor;
	border-width: 0 0 2px 2px;
	border-radius: 0;
	background: none;
	transform: translateY(-2px) rotate(-45deg);
}

@media (max-width: 39.99rem) {

	.muduex-agenda__categorias {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
	}

	.muduex-agenda__categorias > ul {
		padding-inline-end: calc(6px + 1.5rem);
	}
}

@media (min-width: 40rem) {

	.muduex-agenda__categorias {
		overflow-x: visible;
	}

	.muduex-agenda__categorias > ul {
		flex-wrap: wrap;
		width: auto;
	}
}

/* --------------------------------------------------------------------------
   The sliding fill of the active pill, driven by filtros.js (Task 8). The
   contract, also in task-4-report.md:

   - The indicator is hidden until it has .is-listo.
   - filtros.js sets on it, from the active pill (offsets are relative to the
     ul, which sits at the nav's 0,0, also while it scrolls):
       --x: offsetLeft in px      --y: offsetTop in px
       --w: offsetWidth, a bare number (px, no unit)
       --h: offsetHeight in px    --cat: the pill's colour («Todas»: unset)
     then adds .is-listo. Only transform moves (base width 100 px, scaled).
   - Wrapped rows (from 40rem): when the new pill's offsetTop differs from
     the current --y, filtros.js removes .is-salto, forces a reflow, adds
     .is-salto and sets the new values: the fill fades in at its new place
     instead of sliding diagonally across the rows. It removes .is-salto on
     animationend.
   - While .is-listo shows, every pill's own fill is see-through, so the
     indicator is seen sliding under them; the active pill leaves its fill
     to the indicator.
   - Moving: filtros.js adds .is-moviendo to the nav before changing --x/--y,
     and removes it on the indicator's transitionend (at once with reduced
     motion, or with .is-salto on animationend). Meanwhile the new active
     pill keeps its tint and its --cat-texto text, never white on nothing.
   - Forced colours: no indicator; the active pill paints itself.
   -------------------------------------------------------------------------- */

.muduex-agenda__indicador {
	display: none;
}

@media not (forced-colors: active) {

	.muduex-agenda__indicador.is-listo {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		display: block;
		width: 100px;
		height: var(--h, 48px);
		border-radius: 999px;
		background-color: var(--cat, var(--muduex-texto));
		pointer-events: none;
		transform: translate(var(--x, 0px), var(--y, 0px)) scaleX(calc(var(--w, 100) / 100));
		transform-origin: 0 0;
		transition: transform 250ms ease;
	}

	.muduex-agenda__indicador.is-listo.is-salto {
		transition: none;
		animation: muduex-indicador-salto 200ms ease both;
	}

	.muduex-agenda__categorias:has(> .muduex-agenda__indicador.is-listo) .muduex-cat {
		background-color: color-mix(in srgb, var(--cat) 12%, transparent);
	}

	.muduex-agenda__categorias:has(> .muduex-agenda__indicador.is-listo):not(.is-moviendo) .muduex-cat.is-activa {
		border-color: transparent;
		background-color: transparent;
	}

	.muduex-agenda__categorias.is-moviendo .muduex-cat.is-activa[data-cat] {
		border-color: color-mix(in srgb, var(--cat) 40%, transparent);
		color: var(--cat-texto);
	}
}

@keyframes muduex-indicador-salto {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {

	.muduex-agenda__indicador.is-listo,
	.muduex-agenda__indicador.is-listo.is-salto {
		transition: none;
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Lista / Mes: a segmented control, two 48 px segments on a pill track; the
   current one in the accent.
   -------------------------------------------------------------------------- */

.muduex-agenda__vista > ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	box-sizing: border-box;
	max-width: 20rem;
	margin: 0;
	padding: 3px;
	border: 1px solid var(--muduex-separador);
	border-radius: 999px;
	background-color: var(--muduex-tarjeta);
	list-style: none;
}

.muduex-agenda__vista li {
	margin: 0;
}

.muduex-agenda__segmento {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 48px;
	min-height: 48px;
	padding: 0 1rem;
	border-radius: 999px;
	color: var(--muduex-texto);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.muduex-agenda__segmento[aria-current="page"] {
	background-color: var(--muduex-acento);
	color: var(--muduex-acento-contraste);
}

/* --------------------------------------------------------------------------
   iCal subscription, at the foot: a 48 px link.
   -------------------------------------------------------------------------- */

.muduex-agenda__suscripcion a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	color: var(--muduex-acento);
	font-size: 18px;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   Forced colours (Windows High Contrast): backgrounds become Canvas, so the
   current pill and segment take the system's selection colours, and the
   button, which has no border, gets one.
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {

	.muduex-agenda__categorias .muduex-cat[aria-current="page"],
	.muduex-agenda__segmento[aria-current="page"] {
		forced-color-adjust: none;
		border: 2px solid SelectedItem;
		background-color: SelectedItem;
		color: SelectedItemText;
	}

	.muduex-agenda__boton {
		border: 1px solid ButtonText;
	}
}

/* --------------------------------------------------------------------------
   Print: the controls, the iCal link (it cannot be followed on paper) and
   the poster's particles go.
   -------------------------------------------------------------------------- */

@media print {

	.muduex-agenda__buscar,
	.muduex-agenda__categorias,
	.muduex-agenda__vista,
	.muduex-agenda__suscripcion,
	.muduex-agenda .muduex-particulas {
		display: none !important;
	}
}