/* ==========================================================================
   CIE Servicios Esenciales — estilos acotados a .cie-se (mobile-first)
   Colores de marca CIE (mismos valores que cie-landings.css).
   ========================================================================== */

.cie-se {
	--cie-se-navy: #1b3a5c;
	--cie-se-navy-soft: #2b5c8f;
	--cie-se-sand: #c4a882;
	--cie-se-sand-soft: #f8ecd4;
	--cie-se-surface: #f5f7fa;
	--cie-se-border: #d8e1ec;
	--cie-se-text: #2c2c2c;
	--cie-se-muted: #5b6b80;
	--cie-se-danger: #b0302a;
	--cie-se-danger-soft: #fbeae9;
	--cie-se-success: #1a7a4a;
	--cie-se-radius: 14px;
	--cie-se-gap: 16px;
	--cie-se-scroll-offset: 110px; /* altura de la cabecera fija del sitio */

	container-type: inline-size;
	color: var(--cie-se-text);
	font-family: inherit;
	line-height: 1.5;
}

.cie-se *,
.cie-se *::before,
.cie-se *::after {
	box-sizing: border-box;
}

.cie-se p {
	margin: 0;
}

/* ---------- Resumen y navegación por municipios ---------- */

.cie-se-summary {
	margin-block-end: 12px;
	color: var(--cie-se-muted);
	font-size: 0.9375rem;
}

.cie-se-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.cie-se .cie-se-nav a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 48px;
	padding: 8px 16px;
	border: 1px solid var(--cie-se-border);
	border-radius: 999px;
	background: var(--cie-se-surface);
	color: var(--cie-se-navy);
	font-weight: 600;
	text-decoration: none;
}

.cie-se .cie-se-nav a:hover {
	border-color: var(--cie-se-navy);
}

.cie-se-nav__count {
	color: var(--cie-se-muted);
	font-weight: 500;
}

/* ---------- Grupos y rejilla ---------- */

.cie-se-group {
	margin-block: 32px;
	scroll-margin-top: var(--cie-se-scroll-offset);
}

.cie-se .cie-se-group__title {
	margin: 0 0 12px;
	color: var(--cie-se-navy);
	font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
	line-height: 1.25;
}

.cie-se-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cie-se-gap);
}

@container (min-width: 640px) {
	.cie-se-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (min-width: 980px) {
	.cie-se-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.cie-se-stack {
	display: grid;
	gap: 12px;
}

/* ---------- Tarjeta ---------- */

.cie-se-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	border: 1px solid var(--cie-se-border);
	border-radius: var(--cie-se-radius);
	background: #fff;
}

.cie-se .cie-se-card__title {
	margin: 0;
	color: var(--cie-se-navy);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.cie-se-card__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-block-start: 6px !important;
}

.cie-se-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--cie-se-surface);
	color: var(--cie-se-navy);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.6;
}

.cie-se-badge--urgencias {
	background: var(--cie-se-danger-soft);
	color: var(--cie-se-danger);
}

.cie-se-badge--patrocinado {
	background: var(--cie-se-sand-soft);
	color: #6b4e1e;
}

.cie-se-card__distance {
	color: var(--cie-se-success);
	font-size: 0.875rem;
	font-weight: 700;
}

.cie-se-card__address,
.cie-se-card__hours {
	font-size: 0.9375rem;
}

.cie-se-card__label {
	font-weight: 700;
}

.cie-se-card__note {
	color: var(--cie-se-muted);
	font-size: 0.875rem;
}

.cie-se .cie-se-card__note a {
	color: var(--cie-se-navy);
	font-weight: 700;
}

.cie-se-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: auto;
	padding-block-start: 8px;
}

/* ---------- Botones (mínimo 48 px de alto) ---------- */

.cie-se a.cie-se-btn {
	display: inline-flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 48px;
	padding: 10px 16px;
	border: 2px solid var(--cie-se-navy);
	border-radius: 999px;
	background: #fff;
	color: var(--cie-se-navy);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

.cie-se a.cie-se-btn:hover {
	background: var(--cie-se-surface);
}

.cie-se a.cie-se-btn--primary {
	background: var(--cie-se-navy);
	color: #fff;
}

.cie-se a.cie-se-btn--primary:hover {
	border-color: var(--cie-se-navy-soft);
	background: var(--cie-se-navy-soft);
	color: #fff;
}

.cie-se-btn__detail {
	font-weight: 600;
	white-space: nowrap;
}

.cie-se a:focus-visible {
	outline: 3px solid var(--cie-se-navy-soft);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.cie-se a.cie-se-btn,
	.cie-se .cie-se-nav a {
		transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	}
}

/* ---------- Aviso de farmacias de guardia ---------- */

.cie-se-callout {
	display: grid;
	gap: 8px;
	margin-block-end: 24px;
	padding: 16px;
	border-inline-start: 4px solid var(--cie-se-sand);
	border-radius: var(--cie-se-radius);
	background: var(--cie-se-sand-soft);
}

.cie-se-callout__title {
	color: var(--cie-se-navy);
	font-size: 1.0625rem;
	font-weight: 700;
}

.cie-se-callout .cie-se-btn {
	justify-self: start;
	flex: 0 0 auto;
}

.cie-se--cercanos .cie-se-callout {
	margin-block: 16px 0;
}

/* ---------- Pies, vacíos y avisos ---------- */

.cie-se-source,
.cie-se-footnote {
	margin-block-start: 16px !important;
	color: var(--cie-se-muted);
	font-size: 0.8125rem;
}

.cie-se-more {
	margin-block-start: 8px !important;
}

.cie-se .cie-se-more a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	color: var(--cie-se-navy);
	font-weight: 700;
}

.cie-se-empty {
	padding: 16px;
	border-radius: var(--cie-se-radius);
	background: var(--cie-se-surface);
	color: var(--cie-se-muted);
}

.cie-se-notice {
	padding: 12px;
	border: 1px dashed var(--cie-se-danger);
	color: var(--cie-se-danger);
}

.cie-se-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}