/**
 * Abrazos — estilos de la plataforma pública.
 *
 * La paleta reproduce el diseño original, expresado en oklch. Los valores hex
 * son la conversión exacta de esos mismos colores y actúan como respaldo en
 * navegadores sin soporte de oklch.
 *
 * Todo cuelga de .abrazos-app para no filtrar estilos al tema.
 */

/* -------------------------------------------------------------- Tipografías */

@font-face {
	font-family: 'Abrazos Outfit';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/outfit-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Abrazos Outfit';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Abrazos Sans';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fonts/source-sans-3-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Abrazos Sans';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fonts/source-sans-3-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ Tokens */

.abrazos-app {
	--ab-bg: #f9f4ef;
	--ab-surface: #fefbf8;
	--ab-surface-2: #fbf8f5;
	--ab-border: #e2ddd7;
	--ab-border-input: #dcd6d1;
	--ab-border-strong: #d2cdc7;
	--ab-text: #1e1a16;
	--ab-text-2: #3e3a35;
	--ab-muted-strong: #59544f;
	--ab-muted: #67625d;
	--ab-placeholder: #6f6a65;
	--ab-check-border: #a39d98;

	/* Terracota del diseño, para rellenos decorativos. */
	--ab-primary: #cc6349;
	/* Variante con contraste AA sobre texto blanco (4.6:1). */
	--ab-primary-ink: #be563d;
	--ab-primary-hover: #a33e25;
	--ab-link: #a33e25;
	--ab-link-hover: #892408;

	/* Verde del diseño para «Amigos Encontrados». */
	--ab-green: #00a071;
	--ab-green-ink: #008154;
	--ab-green-hover: #007b4f;

	--ab-stripe-a: #ebdad5;
	--ab-stripe-b: #f5e4df;
	--ab-stripe-g-a: #d3e2db;
	--ab-stripe-g-b: #dcece4;
	--ab-map-bg: #ecf4f0;
	--ab-ink-warm: #524440;
	--ab-ink-green: #3e4b45;
	--ab-backdrop: rgba(25, 21, 17, 0.55);

	--ab-ancho: 1200px;
	--ab-radio-s: 10px;
	--ab-radio-m: 12px;
	--ab-radio-l: 16px;
	--ab-radio-xl: 18px;
	--ab-fuente-titulo: 'Abrazos Outfit', 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ab-fuente-texto: 'Abrazos Sans', 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ab-sombra: 0 1px 2px rgba(30, 26, 22, 0.04);
	--ab-foco: 0 0 0 3px rgba(204, 99, 73, 0.35);
}

/* Colores exactos del diseño donde el navegador admite oklch. */
@supports (color: oklch(0.5 0.1 30)) {
	.abrazos-app {
		--ab-bg: oklch(0.97 0.008 70);
		--ab-surface: oklch(0.99 0.005 70);
		--ab-surface-2: oklch(0.98 0.005 70);
		--ab-border: oklch(0.9 0.01 70);
		--ab-border-input: oklch(0.88 0.01 70);
		--ab-border-strong: oklch(0.85 0.01 70);
		--ab-text: oklch(0.22 0.01 70);
		--ab-text-2: oklch(0.35 0.01 70);
		--ab-muted-strong: oklch(0.45 0.01 70);
		--ab-muted: oklch(0.5 0.01 70);
		--ab-placeholder: oklch(0.53 0.01 70);
		--ab-check-border: oklch(0.7 0.01 70);
		--ab-primary: oklch(0.62 0.14 35);
		--ab-primary-ink: oklch(0.58 0.14 35);
		--ab-primary-hover: oklch(0.5 0.14 35);
		--ab-link: oklch(0.5 0.14 35);
		--ab-link-hover: oklch(0.42 0.14 35);
		--ab-green: oklch(0.62 0.14 165);
		--ab-green-ink: oklch(0.52 0.14 165);
		--ab-green-hover: oklch(0.5 0.13 165);
		--ab-stripe-a: oklch(0.9 0.02 35);
		--ab-stripe-b: oklch(0.93 0.02 35);
		--ab-stripe-g-a: oklch(0.9 0.02 165);
		--ab-stripe-g-b: oklch(0.93 0.02 165);
		--ab-map-bg: oklch(0.96 0.01 165);
		--ab-ink-warm: oklch(0.4 0.02 35);
		--ab-ink-green: oklch(0.4 0.02 165);
		--ab-backdrop: oklch(0.2 0.01 70 / 0.55);
	}
}

/* Modo oscuro sólo si el ajuste lo permite. */
@media (prefers-color-scheme: dark) {
	.abrazos-app[data-esquema="auto"] {
		--ab-bg: #17140f;
		--ab-surface: #201c17;
		--ab-surface-2: #262119;
		--ab-border: #383129;
		--ab-border-input: #423a31;
		--ab-border-strong: #4d443a;
		--ab-text: #f4efe9;
		--ab-text-2: #ddd6cd;
		--ab-muted-strong: #b8b1a8;
		--ab-muted: #a8a199;
		--ab-placeholder: #8d867f;
		--ab-check-border: #6b645c;
		--ab-primary: #e0785d;
		--ab-primary-ink: #e0785d;
		--ab-primary-hover: #f08a6e;
		--ab-link: #f0a68f;
		--ab-link-hover: #f7c0ae;
		--ab-green: #2bbd8c;
		--ab-green-ink: #2bbd8c;
		--ab-green-hover: #4ad0a2;
		--ab-stripe-a: #35291f;
		--ab-stripe-b: #402f24;
		--ab-stripe-g-a: #1e2f28;
		--ab-stripe-g-b: #26392f;
		--ab-map-bg: #1b2723;
		--ab-ink-warm: #c9b6ac;
		--ab-ink-green: #a9bdb2;
		--ab-backdrop: rgba(0, 0, 0, 0.7);
		--ab-foco: 0 0 0 3px rgba(224, 120, 93, 0.45);
	}

	.abrazos-app[data-esquema="auto"] .ab-mapa2__atribucion {
		background: rgba(32, 28, 23, 0.85);
	}

	/* En oscuro el texto blanco sobre el color de marca no rinde: se invierte. */
	.abrazos-app[data-esquema="auto"] .ab-btn--primary,
	.abrazos-app[data-esquema="auto"] .ab-btn--verde,
	.abrazos-app[data-esquema="auto"] .ab-tab.is-activa {
		color: #17140f;
	}
}

/* ------------------------------------------------------------------- Base */

.abrazos-app {
	box-sizing: border-box;
	background: var(--ab-bg);
	color: var(--ab-text);
	font-family: var(--ab-fuente-texto);
	font-size: 16px;
	line-height: 1.5;
	padding-bottom: 80px;
	-webkit-font-smoothing: antialiased;
}

.abrazos-app[data-tipografia="sistema"],
.abrazos-app[data-tipografia="tema"] {
	--ab-fuente-titulo: inherit;
	--ab-fuente-texto: inherit;
}

.abrazos-app *,
.abrazos-app *::before,
.abrazos-app *::after {
	box-sizing: inherit;
}

.abrazos-app a {
	color: var(--ab-link);
}

.abrazos-app a:hover,
.abrazos-app a:focus {
	color: var(--ab-link-hover);
}

.abrazos-app :focus-visible {
	outline: 2px solid var(--ab-primary-ink);
	outline-offset: 2px;
	border-radius: 4px;
}

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

.ab-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--ab-surface);
	color: var(--ab-text);
	padding: 12px 20px;
	border-radius: 0 0 var(--ab-radio-s) 0;
	font-weight: 600;
}

.ab-skip:focus {
	left: 0;
}

/* --------------------------------------------------------------- Cabecera */

.ab-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 20px 48px;
	background: var(--ab-surface);
	border-bottom: 1px solid var(--ab-border);
}

.ab-header__marca {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ab-logo {
	width: 40px;
	height: 40px;
	border-radius: var(--ab-radio-s);
	background: var(--ab-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.ab-logo__punto {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--ab-surface);
	display: block;
}

.ab-header__titulo {
	font-family: var(--ab-fuente-titulo);
	font-weight: 700;
	font-size: 24px;
	letter-spacing: -0.02em;
	color: var(--ab-text);
}

.ab-header__tagline {
	font-size: 14px;
	color: var(--ab-muted);
	margin: 0;
}

/* ------------------------------------------------------------------- Hero */

.ab-hero {
	padding: 56px 48px 32px;
	text-align: center;
}

.ab-hero__titulo {
	font-family: var(--ab-fuente-titulo);
	font-size: clamp(28px, 5vw, 40px);
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
	color: var(--ab-text);
	line-height: 1.15;
}

.ab-hero__texto {
	font-size: 17px;
	color: var(--ab-muted-strong);
	max-width: 560px;
	margin: 0 auto 32px;
}

.ab-hero__stats {
	margin: 24px 0 0;
	font-size: 14px;
	color: var(--ab-muted);
}

.ab-buscador {
	max-width: 560px;
	margin: 0 auto;
	display: flex;
	gap: 8px;
}

.ab-buscador__input {
	flex: 1;
	padding: 14px 18px;
	border-radius: var(--ab-radio-m);
	font-size: 15px;
}

.ab-buscador__btn {
	padding: 14px 24px;
	border-radius: var(--ab-radio-m);
	font-size: 15px;
	flex: none;
}

/* ------------------------------------------------------------------ Tabs */

.ab-tabs {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 0 48px 32px;
	flex-wrap: wrap;
}

.ab-tab {
	padding: 10px 20px;
	border-radius: 999px;
	white-space: nowrap;
	border: 1px solid var(--ab-border-input);
	background: var(--ab-surface);
	color: var(--ab-text-2);
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ab-tab:hover {
	border-color: var(--ab-border-strong);
	background: var(--ab-surface-2);
}

.ab-tab.is-activa {
	border-color: transparent;
	background: var(--ab-primary-ink);
	color: #fff;
}

/* ---------------------------------------------------------------- Paneles */

.ab-contenido:focus {
	outline: none;
}

.ab-panel {
	max-width: var(--ab-ancho);
	margin: 0 auto;
	padding: 0 48px;
}

.ab-panel[hidden] {
	display: none;
}

.ab-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
}

.ab-vacio {
	text-align: center;
	padding: 64px 0;
	color: var(--ab-muted);
	margin: 0;
}

.ab-seccion__titulo {
	font-family: var(--ab-fuente-titulo);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-align: center;
	margin: 56px 0 24px;
}

/* --------------------------------------------------------------- Tarjetas */

.ab-card {
	background: var(--ab-surface);
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radio-l);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--ab-sombra);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ab-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(30, 26, 22, 0.08);
}

.ab-card[hidden] {
	display: none;
}

.ab-card__media {
	position: relative;
	height: 180px;
	background: repeating-linear-gradient(
		135deg,
		var(--ab-stripe-a),
		var(--ab-stripe-a) 10px,
		var(--ab-stripe-b) 10px,
		var(--ab-stripe-b) 20px
	);
}

.ab-card--verde .ab-card__media {
	background: repeating-linear-gradient(
		135deg,
		var(--ab-stripe-g-a),
		var(--ab-stripe-g-a) 10px,
		var(--ab-stripe-g-b) 10px,
		var(--ab-stripe-g-b) 20px
	);
}

.ab-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ab-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	text-align: center;
}

.ab-card__placeholder-texto {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	color: var(--ab-ink-warm);
}

.ab-card--verde .ab-card__placeholder-texto {
	color: var(--ab-ink-green);
}

.ab-card__icono {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--ab-surface);
	border-radius: 999px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	box-shadow: var(--ab-sombra);
}

.ab-card__body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.ab-card__titulo {
	font-family: var(--ab-fuente-titulo);
	font-weight: 600;
	font-size: 18px;
	margin: 0;
	color: var(--ab-text);
	line-height: 1.25;
}

.ab-card__meta {
	font-size: 13px;
	color: var(--ab-muted);
	margin: 0;
}

.ab-card__desc {
	font-size: 14px;
	color: var(--ab-muted-strong);
	margin: 4px 0 0;
}

.ab-card__spacer {
	flex: 1;
}

.ab-card__btn {
	margin-top: 8px;
	width: 100%;
}

/* --------------------------------------------------------------- Botones */

.ab-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 16px;
	border-radius: var(--ab-radio-s);
	border: none;
	background: var(--ab-primary-ink);
	color: #fff;
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.ab-btn:hover:not(:disabled) {
	background: var(--ab-primary-hover);
	color: #fff;
}

.ab-btn--verde {
	background: var(--ab-green-ink);
}

.ab-btn--verde:hover:not(:disabled) {
	background: var(--ab-green-hover);
}

.ab-btn--suave {
	background: var(--ab-surface-2);
	color: var(--ab-text-2);
	border: 1px solid var(--ab-border-input);
	font-weight: 600;
}

.ab-btn--suave:hover:not(:disabled) {
	background: var(--ab-surface);
	color: var(--ab-text);
	border-color: var(--ab-border-strong);
}

.ab-btn--enviar {
	margin-top: 4px;
	padding: 14px 20px;
	font-size: 15px;
	width: 100%;
}

.ab-btn:disabled,
.ab-btn[aria-disabled="true"] {
	background: var(--ab-border-strong);
	color: var(--ab-surface);
	cursor: not-allowed;
}

.ab-btn.is-cargando {
	opacity: 0.75;
	cursor: progress;
}

/* -------------------------------------------------------------- Formularios */

.ab-form {
	background: var(--ab-surface);
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radio-l);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 640px;
	margin: 0 auto;
}

.ab-panel--formulario {
	max-width: 736px;
}

.ab-form__titulo {
	font-family: var(--ab-fuente-titulo);
	font-size: 22px;
	font-weight: 600;
	margin: 0;
	color: var(--ab-text);
}

.ab-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ab-fila {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.ab-campo--corto {
	max-width: 260px;
}

.ab-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--ab-text);
}

.ab-req {
	color: var(--ab-link);
}

.ab-input {
	padding: 12px 14px;
	border-radius: var(--ab-radio-s);
	border: 1px solid var(--ab-border-input);
	background: var(--ab-surface);
	color: var(--ab-text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	width: 100%;
	max-width: 100%;
}

.ab-input::placeholder {
	color: var(--ab-placeholder);
}

.ab-input:focus {
	border-color: var(--ab-primary-ink);
	outline: none;
	box-shadow: var(--ab-foco);
}

.ab-input[aria-invalid="true"] {
	border-color: var(--ab-link);
}

.ab-textarea {
	resize: vertical;
	min-height: 88px;
	font-family: inherit;
}

.ab-ayuda {
	font-size: 12px;
	color: var(--ab-muted);
	margin: 0;
}

.ab-error {
	font-size: 13px;
	color: var(--ab-link-hover);
	font-weight: 600;
	margin: 0;
}

.ab-error--global {
	padding: 12px 14px;
	border-radius: var(--ab-radio-s);
	background: var(--ab-stripe-b);
}

.ab-exito {
	font-size: 14px;
	color: var(--ab-green-hover);
	font-weight: 600;
	margin: 0;
}

.ab-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: var(--ab-muted-strong);
	cursor: pointer;
	font-weight: 400;
}

.ab-check input {
	margin-top: 3px;
	flex: none;
	accent-color: var(--ab-primary-ink);
	width: 16px;
	height: 16px;
}

/* Selector de tipo de publicación. */
.ab-tipo {
	border: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ab-tipo__opciones {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.ab-tipo__opcion {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid var(--ab-border-input);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	background: var(--ab-surface);
}

.ab-tipo__opcion:has(input:checked) {
	border-color: var(--ab-primary-ink);
	background: var(--ab-stripe-b);
}

.ab-tipo__opcion input {
	accent-color: var(--ab-primary-ink);
}

/* Zona de subida de foto. */
.ab-dropzone {
	position: relative;
	height: 160px;
	border-radius: var(--ab-radio-m);
	background: repeating-linear-gradient(
		135deg,
		var(--ab-stripe-g-a),
		var(--ab-stripe-g-a) 10px,
		var(--ab-stripe-g-b) 10px,
		var(--ab-stripe-g-b) 20px
	);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	cursor: pointer;
}

.ab-dropzone__input {
	position: absolute;
	inset: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.ab-dropzone__input:focus-visible + .ab-dropzone__texto {
	outline: 2px solid var(--ab-primary-ink);
	outline-offset: 4px;
}

.ab-dropzone__texto {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	color: var(--ab-ink-green);
	text-align: center;
	padding: 0 16px;
	pointer-events: none;
}

.ab-dropzone__preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

/* Honeypot: fuera de la vista pero sin display:none, que algunos bots detectan. */
.ab-honeypot {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Casilla «No soy un robot» del diseño. */
.ab-robot {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--ab-border-strong);
	border-radius: var(--ab-radio-s);
	padding: 12px 16px;
	background: var(--ab-surface-2);
	cursor: pointer;
	width: fit-content;
	font-size: 14px;
}

.ab-robot__input {
	position: absolute;
	opacity: 0;
	width: 22px;
	height: 22px;
	margin: 0;
	cursor: pointer;
}

.ab-robot__caja {
	width: 22px;
	height: 22px;
	border-radius: 5px;
	border: 2px solid var(--ab-check-border);
	background: transparent;
	flex: none;
	position: relative;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ab-robot__input:checked ~ .ab-robot__caja {
	background: var(--ab-green-ink);
	border-color: var(--ab-green-ink);
}

.ab-robot__input:checked ~ .ab-robot__caja::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ab-robot__input:focus-visible ~ .ab-robot__caja {
	box-shadow: var(--ab-foco);
}

.ab-captcha {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* ------------------------------------------------------------------ Modal */

.ab-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.ab-modal[hidden] {
	display: none;
}

.ab-modal__fondo {
	position: absolute;
	inset: 0;
	background: var(--ab-backdrop);
}

.ab-modal__caja {
	position: relative;
	background: var(--ab-surface);
	border-radius: var(--ab-radio-xl);
	max-width: 520px;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 24px 60px rgba(25, 21, 17, 0.28);
}

.ab-modal__cabecera {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.ab-modal__titulo {
	font-family: var(--ab-fuente-titulo);
	font-size: 20px;
	font-weight: 600;
	margin: 0;
	color: var(--ab-text);
}

.ab-modal__cerrar {
	border: none;
	background: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: var(--ab-muted);
	padding: 4px 8px;
	border-radius: 6px;
	flex: none;
}

.ab-modal__cerrar:hover {
	color: var(--ab-text);
	background: var(--ab-surface-2);
}

.ab-modal .ab-form {
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	max-width: none;
	margin: 0;
	gap: 16px;
}

/* -------------------------------------------------------------- Ubicación */

/* Los estilos del mapa viven en abrazos-mapa.css: se comparten con el panel. */

/* ------------------------------------------------------------- Historias */

.ab-reencuentros {
	max-width: var(--ab-ancho);
	margin: 0 auto;
	padding: 0 48px;
}

.ab-grid--historias {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.ab-historia {
	background: var(--ab-surface);
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radio-l);
	overflow: hidden;
	padding: 0 0 20px;
}

.ab-historia__foto {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}

.ab-historia__titulo {
	font-family: var(--ab-fuente-titulo);
	font-size: 18px;
	font-weight: 600;
	margin: 16px 20px 8px;
}

.ab-historia__texto {
	font-size: 14px;
	color: var(--ab-muted-strong);
	margin: 0 20px;
}

/* ------------------------------------------------------------------ Toast */

.ab-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	background: var(--ab-text);
	color: var(--ab-bg);
	padding: 12px 20px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	z-index: 10000;
	box-shadow: 0 8px 24px rgba(25, 21, 17, 0.25);
	max-width: calc(100vw - 32px);
}

.ab-toast[hidden] {
	display: none;
}

.abrazos-app .ab-aviso-duplicado,
.abrazos-aviso-duplicado {
	padding: 16px;
	border-radius: var(--ab-radio-s, 10px);
	background: #f5e4df;
	color: #892408;
}

/* ---------------------------------------------------------------- Responsive */

@media (max-width: 900px) {
	.ab-header,
	.ab-hero,
	.ab-tabs,
	.ab-panel,
	.ab-reencuentros {
		padding-left: 24px;
		padding-right: 24px;
	}

	.ab-hero {
		padding-top: 40px;
	}
}

@media (max-width: 600px) {
	.ab-header {
		padding: 16px;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.ab-hero,
	.ab-tabs,
	.ab-panel,
	.ab-reencuentros {
		padding-left: 16px;
		padding-right: 16px;
	}

	.ab-buscador {
		flex-direction: column;
	}

	.ab-buscador__btn {
		width: 100%;
	}

	.ab-tabs {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin: 0 -16px;
		padding: 0 16px 32px;
	}

	.ab-tabs::-webkit-scrollbar {
		display: none;
	}

	.ab-fila {
		grid-template-columns: 1fr;
	}

	.ab-form {
		padding: 20px;
	}

	.ab-modal {
		padding: 0;
		align-items: flex-end;
	}

	.ab-modal__caja {
		max-height: 92vh;
		border-radius: var(--ab-radio-xl) var(--ab-radio-xl) 0 0;
		padding: 20px;
	}

	.ab-campo--corto {
		max-width: none;
	}
}

/* -------------------------------------------------------- Preferencias */

@media (prefers-reduced-motion: reduce) {
	.abrazos-app *,
	.abrazos-app *::before,
	.abrazos-app *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.ab-card:hover {
		transform: none;
	}
}

@media (forced-colors: active) {
	.ab-card,
	.ab-form,
	.ab-tab,
	.ab-input,
	.ab-modal__caja {
		border: 1px solid CanvasText;
	}

	.ab-btn {
		border: 1px solid ButtonText;
	}
}

@media print {
	.ab-tabs,
	.ab-buscador,
	.ab-modal,
	.ab-card__btn,
	.ab-panel--formulario {
		display: none !important;
	}

	.ab-panel {
		display: block !important;
	}
}