/* =====================================================================
   Mercado en Línea · UI v2
   Sistema de diseño escrito desde cero. Sin dependencias, mobile-first.

   Orden (cada capa pisa a la anterior, sin necesidad de !important):
     reset → tokens → base → layout → componentes → utilidades
   Convenciones: nombres en español, bloque__elemento--modificador (BEM liviano),
   medidas en rem, colores solo a través de variables semánticas.
   ===================================================================== */
@layer reset, tokens, base, layout, componentes, utilidades;

/* ---------- 1. Reset ------------------------------------------------ */
@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	* { margin: 0; }
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body { min-height: 100dvh; }
	img, svg, video { display: block; max-width: 100%; }
	img { height: auto; }
	input, button, textarea, select { font: inherit; color: inherit; }
	button { cursor: pointer; }
	a { color: inherit; }
	ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
	h1, h2, h3, h4 { text-wrap: balance; }
	p { text-wrap: pretty; }
	[hidden] { display: none !important; }
}

/* ---------- 2. Tokens ----------------------------------------------- */
@layer tokens {
	:root {
		color-scheme: light dark;

		/* Paleta de marca (valores crudos: no usar directo en componentes) */
		--azul-50:  #eef2ff;
		--azul-100: #dce4ff;
		--azul-500: #4a68f2;
		--azul-600: #2547d0;
		--azul-700: #1b36a6;
		--lima-300: #e8fa8f;
		--lima-400: #d7f34a;
		--lima-500: #c1e02a;
		--coral-500: #ff684d;
		--coral-600: #e6492d;
		--tinta-950: #0c1326;
		--tinta-900: #101a33;
		--tinta-800: #182747;
		--tinta-700: #2a3a60;
		--gris-600: #4b5470;
		--gris-500: #687184;
		--gris-300: #cfd2dc;
		--gris-200: #e4e5ea;
		--gris-100: #efeee9;
		--papel:    #faf8f3;

		/* Semánticos (claro) */
		--fondo:           var(--papel);
		--superficie:      #ffffff;
		--superficie-2:    var(--gris-100);
		--texto:           var(--tinta-900);
		--texto-suave:     var(--gris-600);
		--texto-apagado:   var(--gris-500);
		--borde:           color-mix(in srgb, var(--tinta-900) 12%, transparent);
		--borde-fuerte:    color-mix(in srgb, var(--tinta-900) 28%, transparent);
		--primario:        var(--azul-600);
		--primario-hover:  var(--azul-700);
		--sobre-primario:  #ffffff;
		--acento:          var(--lima-400);
		--acento-hover:    var(--lima-500);
		--sobre-acento:    var(--tinta-900);
		--peligro:         #c8321a;
		--peligro-fondo:   #fdeceb;
		--aviso-fondo:     #fff6d6;
		--aviso-texto:     #6b5200;
		--exito:           #14783f;
		--exito-fondo:     #e4f6ea;
		--info-fondo:      var(--azul-50);
		--foco:            var(--azul-500);
		--hero-fondo:      var(--tinta-800);
		--logo-fondo:      var(--azul-600);

		/* Tipografía */
		--fuente-display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
		--fuente-texto:   "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
		--texto-s:  clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
		--texto-m:  clamp(0.9375rem, 0.91rem + 0.15vw, 1rem);
		--texto-l:  clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
		--titulo-3: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
		--titulo-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
		--titulo-1: clamp(2rem, 1.4rem + 3vw, 3.75rem);

		/* Espacio, bordes, sombras */
		--e1: 0.25rem; --e2: 0.5rem; --e3: 0.75rem; --e4: 1rem;
		--e5: 1.5rem;  --e6: 2rem;   --e7: 3rem;    --e8: 4.5rem;
		--radio-s: 0.5rem;
		--radio-m: 0.875rem;
		--radio-l: 1.375rem;
		--radio-pildora: 999px;
		--sombra-1: 0 1px 2px rgb(16 26 51 / 0.06), 0 1px 1px rgb(16 26 51 / 0.04);
		--sombra-2: 0 8px 24px -8px rgb(16 26 51 / 0.18), 0 2px 6px rgb(16 26 51 / 0.06);
		--alto-cabecera: 4rem;
		--alto-barra: 4.25rem;
		--ancho-max: 76rem;
		--ritmo: cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	@media (prefers-color-scheme: dark) {
		:root:not([data-tema="claro"]) {
			--fondo:         var(--tinta-950);
			--superficie:    #16213f;
			--superficie-2:  #1d2a4d;
			--texto:         #eef0f6;
			--texto-suave:   #b4bbd0;
			--texto-apagado: #8f98b3;
			--borde:         rgb(255 255 255 / 0.12);
			--borde-fuerte:  rgb(255 255 255 / 0.3);
			--primario:       #7d93ff;
			--primario-hover: #a2b1ff;
			--sobre-primario: var(--tinta-950);
			--peligro:        #ff8d7a;
			--peligro-fondo:  #3a1a1a;
			--aviso-fondo:    #3a3210;
			--aviso-texto:    #f1dd8c;
			--exito:          #6fdb9a;
			--exito-fondo:    #12301f;
			--info-fondo:     #1b2850;
			--foco:           var(--lima-400);
			--hero-fondo:     #14214a;
			--logo-fondo:     #3d5af0;
			--sombra-1: 0 1px 2px rgb(0 0 0 / 0.4);
			--sombra-2: 0 10px 28px -8px rgb(0 0 0 / 0.55);
		}
	}
}

/* ---------- 3. Base ------------------------------------------------- */
@layer base {
	html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-cabecera) + var(--e4)); }
	body {
		font-family: var(--fuente-texto);
		font-size: var(--texto-m);
		line-height: 1.55;
		color: var(--texto);
		background: var(--fondo);
		-webkit-font-smoothing: antialiased;
		/* espacio para la barra inferior del celular */
		padding-bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom));
	}
	h1, h2, h3, h4 { font-family: var(--fuente-display); line-height: 1.1; letter-spacing: -0.02em; font-weight: 750; }
	h1 { font-size: var(--titulo-1); }
	h2 { font-size: var(--titulo-2); }
	h3 { font-size: var(--titulo-3); }
	a { color: var(--primario); text-underline-offset: 0.2em; }
	a:hover { color: var(--primario-hover); }
	:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
	::selection { background: var(--acento); color: var(--sobre-acento); }
	small { font-size: var(--texto-s); color: var(--texto-apagado); }
	hr { border: 0; border-top: 1px solid var(--borde); margin-block: var(--e5); }

	@media (min-width: 48em) {
		body { padding-bottom: 0; }
	}
	@media (prefers-reduced-motion: reduce) {
		html { scroll-behavior: auto; }
		*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
	}
}

/* ---------- 4. Layout ----------------------------------------------- */
@layer layout {
	.envoltorio { width: min(100% - 2rem, var(--ancho-max)); margin-inline: auto; }
	@media (min-width: 48em) { .envoltorio { width: min(100% - 3rem, var(--ancho-max)); } }

	.principal { padding-block: var(--e4) var(--e7); outline: none; }

	.seccion { margin-block: var(--e6); }
	.seccion__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e4); margin-bottom: var(--e4); }
	.seccion__cabecera a { font-weight: 600; font-size: var(--texto-s); white-space: nowrap; }

	/* Grilla de tarjetas: 2 columnas en el celular, hasta 5 en pantallas anchas */
	.grilla { list-style: none; padding: 0; display: grid; gap: var(--e3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
	@media (min-width: 40em) { .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); } }
	@media (min-width: 64em) { .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
	@media (min-width: 80em) { .grilla { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

	/* Carril horizontal con imán */
	.carril {
		list-style: none; padding: 0;
		display: flex; gap: var(--e3);
		overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x proximity; scroll-padding-inline: var(--e4); scrollbar-width: none;
		margin-inline: calc(var(--e4) * -1); padding-inline: var(--e4);
	}
	.carril::-webkit-scrollbar { display: none; }
	.carril > * { flex: 0 0 auto; scroll-snap-align: start; }
	@media (min-width: 48em) { .carril { margin-inline: 0; padding-inline: 0; } }
}

/* ---------- 5. Componentes ------------------------------------------ */
@layer componentes {

	/* ----- Accesibilidad ----- */
	.saltar {
		position: absolute; inset-inline-start: var(--e4); top: -4rem; z-index: 100;
		padding: var(--e2) var(--e4); border-radius: var(--radio-s);
		background: var(--acento); color: var(--sobre-acento); font-weight: 700; text-decoration: none;
	}
	.saltar:focus { top: var(--e2); }
	.solo-lectores {
		position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}

	/* ----- Botones ----- */
	.btn {
		display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
		min-height: 2.75rem; padding: 0.55rem 1.15rem;
		border: 1.5px solid transparent; border-radius: var(--radio-pildora);
		font-weight: 700; font-size: var(--texto-m); line-height: 1.1; text-decoration: none; white-space: nowrap;
		cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s var(--ritmo);
	}
	.btn:active { transform: scale(0.97); }
	.btn--primario { background: var(--primario); color: var(--sobre-primario); }
	.btn--primario:hover { background: var(--primario-hover); color: var(--sobre-primario); }
	.btn--acento { background: var(--acento); color: var(--sobre-acento); }
	.btn--acento:hover { background: var(--acento-hover); color: var(--sobre-acento); }
	.btn--fantasma { background: transparent; color: var(--texto); border-color: var(--borde-fuerte); }
	.btn--fantasma:hover { background: var(--superficie-2); color: var(--texto); }
	.btn--chico { min-height: 2.25rem; padding: 0.35rem 0.9rem; font-size: var(--texto-s); }
	.btn--grande { min-height: 3.25rem; padding: 0.8rem 1.6rem; font-size: var(--texto-l); }
	.btn--bloque { display: flex; width: 100%; }
	.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

	/* ----- Formularios ----- */
	.campo { display: grid; gap: var(--e1); margin-bottom: var(--e4); }
	.campo > label, .etiqueta { font-weight: 600; font-size: var(--texto-s); }
	.ayuda { font-size: var(--texto-s); color: var(--texto-apagado); }
	.error-campo { font-size: var(--texto-s); color: var(--peligro); font-weight: 600; }
	.entrada {
		width: 100%; min-height: 2.9rem; padding: 0.6rem 0.9rem;
		background: var(--superficie); color: var(--texto);
		border: 1.5px solid var(--borde-fuerte); border-radius: var(--radio-m);
		transition: border-color 0.15s, box-shadow 0.15s;
	}
	textarea.entrada { min-height: 7rem; resize: vertical; }
	.entrada::placeholder { color: var(--texto-apagado); }
	.entrada:hover { border-color: var(--texto-apagado); }
	.entrada:focus-visible { outline: none; border-color: var(--primario); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primario) 25%, transparent); }
	.entrada[aria-invalid="true"] { border-color: var(--peligro); }

	/* ----- Alertas ----- */
	.alerta {
		margin-bottom: var(--e4); padding: var(--e3) var(--e4);
		border-radius: var(--radio-m); border-inline-start: 5px solid currentColor;
		font-weight: 500;
	}
	.alerta--peligro { background: var(--peligro-fondo); color: var(--peligro); }
	.alerta--aviso   { background: var(--aviso-fondo);   color: var(--aviso-texto); }
	.alerta--exito   { background: var(--exito-fondo);   color: var(--exito); }
	.alerta--info    { background: var(--info-fondo);    color: var(--primario); }
	.alerta a { color: inherit; font-weight: 700; }

	/* ----- Chips, globos y avatar ----- */
	.chip {
		display: inline-flex; align-items: center; gap: var(--e1);
		padding: 0.15rem 0.6rem; border-radius: var(--radio-pildora);
		font-size: var(--texto-s); font-weight: 700; line-height: 1.4; text-decoration: none; white-space: nowrap;
		background: var(--superficie-2); color: var(--texto);
	}
	.chip--accent { background: var(--acento); color: var(--sobre-acento); }
	.chip--solid  { background: var(--tinta-800); color: #fff; }
	/* Sobre una foto: píldora blanca con un punto de color, legible sobre cualquier imagen */
	.chip--foto { background: rgb(255 255 255 / 0.94); color: var(--tinta-900); box-shadow: 0 1px 4px rgb(0 0 0 / 0.28); }
	.chip--foto::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--punto, var(--gris-500)); }
	.chip--nuevo { --punto: #8fb800; }
	.chip--usado { --punto: var(--gris-500); }
	.chip--enlace {
		min-height: 2.5rem; padding-inline: var(--e4);
		background: var(--superficie); border: 1.5px solid var(--borde); box-shadow: var(--sombra-1);
		transition: border-color 0.15s, transform 0.15s var(--ritmo);
	}
	.chip--enlace:hover { border-color: var(--primario); color: var(--primario); }
	.chip--enlace small { color: var(--texto-apagado); font-weight: 600; }

	.globo {
		display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding-inline: 0.3rem;
		border-radius: var(--radio-pildora); background: var(--coral-500); color: #fff;
		font-size: 0.7rem; font-weight: 800; line-height: 1;
	}
	.avatar {
		display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
		background: var(--primario); color: var(--sobre-primario); font-family: var(--fuente-display); font-weight: 800;
	}
	.icono { flex: none; display: inline-block; vertical-align: -0.2em; }

	/* ----- Cabecera ----- */
	.cabecera {
		position: sticky; top: 0; z-index: 50;
		background: color-mix(in srgb, var(--superficie) 88%, transparent);
		-webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
		border-bottom: 1px solid var(--borde);
	}
	.cabecera__fila {
		display: grid; align-items: center; gap: var(--e2) var(--e4);
		grid-template-columns: 1fr; grid-template-areas: "marca" "buscar";
		padding-block: var(--e2);
	}
	@media (min-width: 48em) {
		.cabecera__fila { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "marca buscar nav"; min-height: var(--alto-cabecera); }
	}

	.marca { grid-area: marca; display: inline-flex; align-items: center; gap: var(--e2); text-decoration: none; color: var(--texto); }
	.marca:hover { color: var(--texto); }
	.marca__texto { font-family: var(--fuente-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.03em; line-height: 1; }
	.marca__texto span { color: var(--primario); }

	.buscador {
		grid-area: buscar; position: relative;
		display: flex; align-items: center; gap: var(--e2);
		width: 100%; max-width: 40rem; margin-inline: auto;
		padding: 0.25rem 0.3rem 0.25rem var(--e4);
		background: var(--superficie); border: 1.5px solid var(--borde-fuerte); border-radius: var(--radio-pildora);
		transition: border-color 0.15s, box-shadow 0.15s;
	}
	.buscador:focus-within { border-color: var(--primario); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primario) 22%, transparent); }
	.buscador .icono { color: var(--texto-apagado); }
	.buscador input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0.5rem 0; outline: none; }
	.buscador input::-webkit-search-cancel-button { display: none; }
	.buscador .btn { flex: none; }
	/* En el celular la marca y el buscador comparten fila: el texto "Buscar" sobra, queda la lupa del campo */
	@media (max-width: 47.99em) {
		.cabecera__fila { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "marca buscar"; }
		.marca__texto { display: none; }
		.buscador .btn { display: none; }
		.buscador { padding-right: var(--e4); }
	}

	.sugerencias {
		position: absolute; inset-inline: 0; top: calc(100% + 0.4rem); z-index: 60;
		list-style: none; padding: var(--e2); max-height: min(24rem, 70dvh); overflow-y: auto;
		background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-m); box-shadow: var(--sombra-2);
	}
	.sugerencias li {
		padding: 0.6rem var(--e3); border-radius: var(--radio-s); cursor: pointer;
		display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
	}
	.sugerencias li[aria-selected="true"], .sugerencias li:hover { background: var(--info-fondo); }
	.sugerencias li[data-ver-todo] { font-weight: 700; color: var(--primario); }
	.sugerencias li[aria-disabled="true"] { color: var(--texto-apagado); cursor: default; }

	.nav-escritorio { grid-area: nav; display: none; align-items: center; gap: var(--e2); }
	@media (min-width: 48em) { .nav-escritorio { display: flex; } }
	.nav__enlace {
		display: inline-flex; align-items: center; gap: var(--e2); padding: 0.5rem 0.75rem;
		border-radius: var(--radio-pildora); color: var(--texto); font-weight: 600; text-decoration: none;
	}
	.nav__enlace:hover, .nav__enlace[aria-current="page"] { background: var(--superficie-2); color: var(--texto); }

	.menu-cuenta { position: relative; }
	.menu-cuenta__boton {
		display: flex; align-items: center; gap: var(--e1); padding: 0.2rem 0.4rem 0.2rem 0.2rem;
		list-style: none; cursor: pointer; border-radius: var(--radio-pildora); border: 1.5px solid var(--borde);
	}
	.menu-cuenta__boton::-webkit-details-marker { display: none; }
	.menu-cuenta__lista {
		position: absolute; inset-inline-end: 0; top: calc(100% + 0.5rem); z-index: 60; min-width: 15rem;
		display: grid; padding: var(--e2);
		background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-m); box-shadow: var(--sombra-2);
	}
	.menu-cuenta__lista a { padding: 0.6rem var(--e3); border-radius: var(--radio-s); color: var(--texto); text-decoration: none; font-weight: 500; }
	.menu-cuenta__lista a:hover { background: var(--superficie-2); }
	.menu-cuenta__nombre { padding: 0.4rem var(--e3) var(--e2); font-weight: 700; border-bottom: 1px solid var(--borde); margin-bottom: var(--e1); }

	/* ----- Barra inferior (celular) ----- */
	.barra-inferior {
		position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
		display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
		height: calc(var(--alto-barra) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
		background: color-mix(in srgb, var(--superficie) 92%, transparent);
		-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
		border-top: 1px solid var(--borde);
	}
	@media (min-width: 48em) { .barra-inferior { display: none; } }
	.barra-inferior a {
		position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; padding: 0.55rem 0 0.6rem; text-align: center; line-height: 1.1;
		color: var(--texto-apagado); font-size: 0.7rem; font-weight: 600; text-decoration: none;
	}
	.barra-inferior a[aria-current="page"] { color: var(--primario); }
	.barra-inferior .globo { position: absolute; top: 0.3rem; inset-inline-start: calc(50% + 0.5rem); }
	.barra-inferior__publicar { align-self: start; padding: 0 !important; }
	.barra-inferior__publicar > span {
		display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-top: -0.9rem;
		border-radius: 50%; background: var(--acento); color: var(--sobre-acento);
		box-shadow: 0 6px 16px -4px rgb(16 26 51 / 0.45), 0 0 0 4px var(--fondo);
		transition: transform 0.2s var(--ritmo);
	}
	.barra-inferior__publicar:active > span { transform: scale(0.92); }

	/* ----- Pie ----- */
	.pie { border-top: 1px solid var(--borde); background: var(--superficie); padding-block: var(--e6); font-size: var(--texto-s); }
	.pie__fila { display: grid; gap: var(--e5); }
	@media (min-width: 48em) { .pie__fila { grid-template-columns: 1.2fr 1fr; } .pie__legal { grid-column: 1 / -1; } }
	.pie__marca p { margin-top: var(--e2); color: var(--texto-suave); max-width: 28ch; }
	.pie__enlaces { display: grid; gap: var(--e2); align-content: start; }
	.pie__enlaces a { color: var(--texto-suave); text-decoration: none; }
	.pie__enlaces a:hover { color: var(--primario); text-decoration: underline; }
	.pie__legal { color: var(--texto-apagado); }

	/* ----- Héroe de la home ----- */
	.heroe {
		position: relative; isolation: isolate; overflow: hidden;
		margin-top: var(--e2); padding: var(--e6) var(--e5);
		border-radius: var(--radio-l); background: var(--hero-fondo); color: #fff;
	}
	.heroe::before, .heroe::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); }
	.heroe::before { width: 22rem; height: 22rem; inset-block-start: -9rem; inset-inline-end: -6rem; background: radial-gradient(circle at 30% 30%, var(--azul-500), transparent 68%); opacity: 0.85; }
	.heroe::after  { width: 16rem; height: 16rem; inset-block-end: -8rem; inset-inline-start: 20%; background: radial-gradient(circle, var(--lima-400), transparent 66%); opacity: 0.35; }
	@media (min-width: 48em) { .heroe { padding: var(--e7) var(--e7); } }
	.heroe h1 { max-width: 16ch; }
	.heroe h1 em { font-style: normal; color: var(--acento); }
	.heroe__texto { margin-top: var(--e3); max-width: 38ch; font-size: var(--texto-l); color: rgb(255 255 255 / 0.85); }
	.heroe__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e5); }
	.heroe .btn--fantasma { color: #fff; border-color: rgb(255 255 255 / 0.4); }
	.heroe .btn--fantasma:hover { background: rgb(255 255 255 / 0.12); color: #fff; }
	.heroe__ventajas { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); margin-top: var(--e5); padding: 0; list-style: none; font-size: var(--texto-s); font-weight: 600; color: rgb(255 255 255 / 0.8); }
	.heroe__ventajas li::before { content: "✓"; margin-inline-end: 0.4em; color: var(--acento); font-weight: 800; }
	.heroe--logueado h1 { font-size: var(--titulo-2); max-width: none; }

	.heroe__pila { display: none; }
	@media (min-width: 64em) {
		.heroe__pila { display: block; position: absolute; inset-block: var(--e5); inset-inline-end: var(--e7); width: 24rem; }
		.mini {
			position: absolute; width: 12.5rem; padding: 0.4rem; border-radius: var(--radio-m);
			background: #fff; color: var(--tinta-900); text-decoration: none; box-shadow: 0 18px 40px -14px rgb(0 0 0 / 0.6);
			transition: transform 0.3s var(--ritmo);
		}
		.mini img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radio-m) - 4px); }
		.mini span {
			position: absolute; inset-inline-start: 0.85rem; inset-block-end: 0.85rem;
			padding: 0.1rem 0.65rem; border-radius: var(--radio-pildora);
			background: rgb(16 26 51 / 0.88); color: #fff; font-family: var(--fuente-display); font-weight: 800; font-size: 0.95rem;
		}
		.mini:hover { color: var(--tinta-900); }
		.mini--0 { inset-block-start: 0;    inset-inline-start: 0;    transform: rotate(-6deg); z-index: 1; }
		.mini--1 { inset-block-start: 4.5rem; inset-inline-end: 0;   transform: rotate(5deg);  z-index: 2; }
		.mini--2 { inset-block-end: 0;    inset-inline-start: 3.5rem; transform: rotate(-2deg); z-index: 3; }
		.heroe:hover .mini--0 { transform: rotate(-8deg) translateY(-4px); }
		.heroe:hover .mini--1 { transform: rotate(7deg) translateY(-4px); }
		.heroe:hover .mini--2 { transform: rotate(-3deg) translateY(-4px); }
	}

	/* ----- Chips de categorías ----- */
	.categorias { margin-top: var(--e5); }

	/* ----- Tarjeta de publicación ----- */
	.card {
		height: 100%; overflow: hidden; position: relative;
		background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-m);
		box-shadow: var(--sombra-1); transition: transform 0.2s var(--ritmo), box-shadow 0.2s, border-color 0.2s;
	}
	@media (hover: hover) {
		.card:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: var(--borde-fuerte); }
	}
	.card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
	.card__link:hover { color: inherit; }
	.card__media { position: relative; aspect-ratio: 4 / 3; background: var(--superficie-2); overflow: hidden; }
	.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ritmo); }
	@media (hover: hover) { .card:hover .card__media img { transform: scale(1.04); } }
	.card__sin-foto { display: grid; place-items: center; width: 100%; height: 100%; color: var(--texto-apagado); }
	.card__chip { position: absolute; inset-block-start: var(--e2); inset-inline-start: var(--e2); }
	.card__body { display: grid; gap: 0.2rem; padding: var(--e3); align-content: start; }
	.card__price { font-family: var(--fuente-display); font-weight: 800; font-size: var(--titulo-3); letter-spacing: -0.02em; }
	.card__title {
		font-family: var(--fuente-texto); font-size: var(--texto-m); font-weight: 500; letter-spacing: 0; line-height: 1.3;
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
		min-height: 2.6em;
	}
	.card__lugar { display: flex; align-items: center; gap: 3px; min-width: 0; font-size: var(--texto-s); color: var(--texto-apagado); }
	.card__lugar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.card__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); font-size: var(--texto-s); color: var(--texto-apagado); }
	.card__rep { display: inline-flex; align-items: center; gap: 3px; font-size: var(--texto-s); font-weight: 700; color: var(--texto-suave); }
	.card__rep .icono { color: #e5a400; fill: currentColor; }
	.card__rep-n { font-weight: 500; color: var(--texto-apagado); }

	/* ----- Compra inversa: pedido en el carril ----- */
	.pedido {
		display: grid; gap: var(--e2); align-content: space-between; width: 17rem; min-height: 9.5rem; padding: var(--e4);
		background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-m); box-shadow: var(--sombra-1);
	}
	.pedido__titulo { font-family: var(--fuente-texto); font-size: var(--texto-m); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
	.pedido__titulo a { color: var(--texto); text-decoration: none; }
	.pedido__titulo a::after { content: ""; position: absolute; inset: 0; }
	.pedido { position: relative; }
	.pedido__datos { font-size: var(--texto-s); color: var(--texto-suave); }
	.pedido__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); font-size: var(--texto-s); color: var(--texto-apagado); }
	.pedido__pie .btn { position: relative; z-index: 1; }

	/* ----- Ingreso y registro ----- */
	.auth {
		width: min(100%, 26rem); margin: var(--e5) auto var(--e6); padding: var(--e5);
		background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); box-shadow: var(--sombra-2);
	}
	@media (min-width: 40em) { .auth { padding: var(--e6); } }
	.auth--ancho { width: min(100%, 38rem); }
	.auth h1 { font-size: var(--titulo-2); }
	.auth__texto { margin: var(--e2) 0 var(--e5); color: var(--texto-suave); }
	.auth__google { display: flex; justify-content: center; min-height: 44px; }
	.auth__form { display: block; }
	.auth__pie { margin-top: var(--e5); text-align: center; color: var(--texto-suave); font-size: var(--texto-s); }
	.aceptacion { margin-block: var(--e2) var(--e4); }
	.nota { margin: calc(var(--e2) * -1) 0 var(--e4); }
	.divisor { display: flex; align-items: center; gap: var(--e3); margin: var(--e5) 0; color: var(--texto-apagado); font-size: var(--texto-s); }
	.divisor::before, .divisor::after { content: ""; flex: 1; border-top: 1px solid var(--borde); }
	.fila-2 { display: grid; gap: 0 var(--e4); }
	@media (min-width: 40em) { .fila-2 { grid-template-columns: 1fr 1fr; } }
	.clave { position: relative; }
	.clave .entrada { padding-inline-end: 4.5rem; }
	.clave__ver {
		position: absolute; inset-block: 0.35rem; inset-inline-end: 0.35rem; padding-inline: var(--e3);
		border: 0; border-radius: var(--radio-s); background: transparent; color: var(--primario); font-weight: 700; font-size: var(--texto-s);
	}
	.clave__ver:hover { background: var(--info-fondo); }
	select.entrada {
		appearance: none; padding-inline-end: 2.5rem; cursor: pointer;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23687184' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
		background-repeat: no-repeat; background-position: right 0.9rem center;
	}

	.btn--peligro { background: var(--peligro); color: #fff; }
	.btn--peligro:hover { background: color-mix(in srgb, var(--peligro) 82%, #000); color: #fff; }
	.btn--peligro-suave { color: var(--peligro); border-color: color-mix(in srgb, var(--peligro) 45%, transparent); }
	.btn--peligro-suave:hover { background: var(--peligro-fondo); color: var(--peligro); }
	.chip--aviso { background: var(--aviso-fondo); color: var(--aviso-texto); }
	.btn--whatsapp { background: #167a40; color: #fff; }
	.btn--whatsapp:hover { background: #0f6232; color: #fff; }

	/* ----- Ficha de producto ----- */
	.migas ol { display: flex; flex-wrap: wrap; gap: 0 var(--e2); list-style: none; padding: 0; font-size: var(--texto-s); color: var(--texto-apagado); }
	.migas li + li::before { content: "›"; margin-inline-end: var(--e2); }
	.migas a { color: var(--texto-suave); text-decoration: none; }
	.migas a:hover { color: var(--primario); text-decoration: underline; }
	.migas [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 20ch; }

	.ficha { display: grid; gap: var(--e5); margin-top: var(--e3); }
	@media (min-width: 64em) {
		.ficha { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--e6); align-items: start; }
		.ficha__galeria { position: sticky; top: calc(var(--alto-cabecera) + var(--e4)); }
	}
	.ficha__info { display: grid; gap: var(--e4); min-width: 0; }
	.ficha__chips { display: flex; flex-wrap: wrap; gap: var(--e2); }
	.ficha__titulo { font-size: var(--titulo-2); overflow-wrap: anywhere; }
	.ficha__precio { font-family: var(--fuente-display); font-weight: 800; font-size: var(--titulo-1); letter-spacing: -0.03em; line-height: 1; }
	.ficha__meta { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); font-size: var(--texto-s); color: var(--texto-suave); }
	.ficha__meta span { display: inline-flex; align-items: center; gap: var(--e1); }
	.ficha__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); }
	.ficha__acciones .btn { flex: 1 1 11rem; }
	@media (max-width: 47.99em) { .solo-escritorio { display: none; } } /* en celular el botón de mensaje vive en la barra fija */
	.ficha__secundarias { display: flex; flex-wrap: wrap; gap: var(--e2); }
	.ficha__contacto { padding: var(--e4); background: var(--info-fondo); border-radius: var(--radio-m); overflow-wrap: anywhere; }
	.ficha__descripcion h2 { font-size: var(--titulo-3); margin-bottom: var(--e2); }
	.texto-largo { overflow-wrap: anywhere; color: var(--texto); }

	/* Galería: carril con imán; las flechas solo aparecen donde hay mouse */
	.galeria__escenario { position: relative; }
	.galeria__pista {
		list-style: none; padding: 0; display: flex; overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 4 / 3;
		background: var(--superficie-2); border-radius: var(--radio-l); border: 1px solid var(--borde);
	}
	.galeria__pista::-webkit-scrollbar { display: none; }
	.galeria__pista li { flex: 0 0 100%; scroll-snap-align: center; }
	.galeria__pista img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
	.galeria__contador, .galeria__vendido {
		position: absolute; inset-block-end: var(--e3); padding: 0.2rem 0.7rem; border-radius: var(--radio-pildora);
		background: rgb(16 26 51 / 0.78); color: #fff; font-size: var(--texto-s); font-weight: 700;
	}
	.galeria__contador { inset-inline-end: var(--e3); }
	.galeria__vendido { inset-block: var(--e3) auto; inset-inline-start: var(--e3); background: var(--coral-600); letter-spacing: 0.04em; text-transform: uppercase; }
	.galeria__flecha {
		position: absolute; top: 50%; translate: 0 -50%; display: none; place-items: center; width: 2.75rem; height: 2.75rem;
		border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.92); color: var(--tinta-900); box-shadow: var(--sombra-2);
	}
	.galeria__flecha--izq { inset-inline-start: var(--e3); }
	.galeria__flecha--der { inset-inline-end: var(--e3); }
	@media (hover: hover) and (pointer: fine) { .galeria__flecha { display: grid; } }
	.galeria__minis { list-style: none; padding: 0; display: none; gap: var(--e2); margin-top: var(--e3); overflow-x: auto; scrollbar-width: none; }
	@media (min-width: 40em) { .galeria__minis { display: flex; } }
	.galeria__minis button { display: block; padding: 0; width: 5rem; border: 2px solid transparent; border-radius: var(--radio-s); overflow: hidden; background: var(--superficie-2); opacity: 0.7; }
	.galeria__minis button[aria-current] { border-color: var(--primario); opacity: 1; }
	.galeria__minis img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
	.galeria__vacia { display: grid; place-items: center; gap: var(--e2); aspect-ratio: 4 / 3; border-radius: var(--radio-l); background: var(--superficie-2); color: var(--texto-apagado); text-align: center; }

	/* Vendedor */
	.vendedor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); padding: var(--e4); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-m); }
	.vendedor__avatar { width: 3rem; height: 3rem; font-size: 1.2rem; }
	.vendedor__datos { flex: 1 1 10rem; min-width: 0; }
	.vendedor__nombre { font-weight: 700; overflow-wrap: anywhere; }
	.vendedor__nombre a { color: var(--texto); text-decoration: none; }
	.vendedor__nombre a:hover { color: var(--primario); text-decoration: underline; }
	.vendedor__rep { display: flex; flex-wrap: wrap; gap: 0 var(--e3); font-size: var(--texto-s); color: var(--texto-suave); }

	.descargo { font-size: var(--texto-s); color: var(--texto-suave); }
	.descargo summary { cursor: pointer; font-weight: 600; }
	.descargo p { margin-top: var(--e2); }

	.panel-admin { padding: var(--e4); background: var(--aviso-fondo); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-m); }
	.panel-admin h2 { font-size: var(--titulo-3); }
	.panel-admin__botones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }

	/* Franja de invitación a publicar */
	.banda { margin-block: var(--e6); padding: var(--e6) var(--e5); text-align: center; background: var(--hero-fondo); color: #fff; border-radius: var(--radio-l); display: grid; justify-items: center; gap: var(--e3); }
	.banda p { max-width: 40ch; color: rgb(255 255 255 / 0.85); }
	.banda__duda { color: rgb(255 255 255 / 0.8); font-size: var(--texto-s); }
	.banda__duda:hover { color: #fff; }

	/* Barra fija de contacto: solo en celular */
	.barra-compra {
		position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
		display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
		padding: var(--e2) var(--e4) calc(var(--e2) + env(safe-area-inset-bottom));
		background: color-mix(in srgb, var(--superficie) 94%, transparent);
		-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--borde);
	}
	.barra-compra__precio { font-family: var(--fuente-display); font-weight: 800; font-size: var(--titulo-3); }
	@media (min-width: 48em) { .barra-compra { display: none; } }

	/* Visor de fotos y diálogos (elemento <dialog> nativo) */
	.visor { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; }
	.visor[open] { display: grid; place-items: center; }
	.visor::backdrop { background: rgb(8 12 24 / 0.94); }
	.visor img { max-width: 100vw; max-height: 100dvh; object-fit: contain; }
	.visor__cerrar, .visor__flecha {
		position: absolute; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem;
		border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.16); color: #fff;
	}
	.visor__cerrar:hover, .visor__flecha:hover { background: rgb(255 255 255 / 0.3); }
	.visor__cerrar { inset-block-start: var(--e4); inset-inline-end: var(--e4); }
	.visor__flecha { top: 50%; translate: 0 -50%; }
	.visor__flecha--izq { inset-inline-start: var(--e3); }
	.visor__flecha--der { inset-inline-end: var(--e3); }
	.visor__contador { position: absolute; inset-block-end: var(--e4); inset-inline: 0; text-align: center; font-weight: 700; }

	.dialogo { width: min(100% - 2rem, 26rem); padding: var(--e5); border: 1px solid var(--borde); border-radius: var(--radio-l); background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-2); margin: auto; }
	.dialogo::backdrop { background: rgb(8 12 24 / 0.6); }
	.dialogo h2 { font-size: var(--titulo-3); margin-bottom: var(--e2); }
	.dialogo__opciones { display: grid; gap: var(--e2); margin: var(--e4) 0 0; padding: 0; border: 0; }
	.dialogo__opciones label { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); border: 1.5px solid var(--borde-fuerte); border-radius: var(--radio-m); cursor: pointer; font-weight: 600; }
	.dialogo__opciones label:has(input:checked) { border-color: var(--primario); background: var(--info-fondo); }
	.dialogo__opciones input { accent-color: var(--primario); width: 1.1rem; height: 1.1rem; }
	.dialogo__botones { display: flex; justify-content: flex-end; gap: var(--e2); margin-top: var(--e5); }

	.aviso-flotante {
		position: fixed; inset-inline: var(--e4); bottom: calc(var(--alto-barra) + var(--e4)); z-index: 90; width: fit-content; margin-inline: auto;
		padding: var(--e3) var(--e4); border-radius: var(--radio-pildora); background: var(--tinta-800); color: #fff; font-weight: 600; box-shadow: var(--sombra-2);
	}
	.aviso--exito { background: var(--exito); color: #fff; }
	.aviso--error { background: var(--peligro); color: #fff; }
	@media (min-width: 48em) { .aviso-flotante { bottom: var(--e5); } }

	/* ----- Publicar ----- */
	.publicar { width: min(100%, 44rem); margin-inline: auto; }
	.publicar__cabecera { margin-block: var(--e4) var(--e5); display: grid; gap: var(--e1); }
	.publicar__cabecera p { color: var(--texto-suave); }
	.publicar__limite { justify-self: start; margin-top: var(--e2); }
	.paso { min-width: 0; margin: 0 0 var(--e4); padding: var(--e5); border: 1px solid var(--borde); border-radius: var(--radio-l); background: var(--superficie); }
	.paso legend { display: flex; align-items: center; gap: var(--e2); padding: 0; margin-bottom: var(--e3); font-family: var(--fuente-display); font-weight: 750; font-size: var(--titulo-3); letter-spacing: -0.02em; float: left; width: 100%; }
	.paso legend + * { clear: both; }
	.paso__n { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); font-size: 1rem; font-weight: 800; }

	.fotos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); margin-top: var(--e3); }
	.foto, .foto-agregar { aspect-ratio: 1; border-radius: var(--radio-m); }
	.foto { position: relative; overflow: hidden; background: var(--superficie-2); border: 2px solid var(--borde); }
	.foto--principal { border-color: var(--primario); }
	.foto img { width: 100%; height: 100%; object-fit: cover; }
	.foto__marca { position: absolute; inset: var(--e2) auto auto var(--e2); padding: 0.1rem 0.55rem; border-radius: var(--radio-pildora); background: var(--primario); color: var(--sobre-primario); font-size: 0.7rem; font-weight: 800; }
	.foto__espera { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(16 26 51 / 0.55); color: #fff; font-size: var(--texto-s); font-weight: 700; }
	.foto__acciones { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; gap: 2px; padding: var(--e1); background: linear-gradient(transparent, rgb(16 26 51 / 0.75)); }
	.foto__acciones button { min-width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.92); color: var(--tinta-900); font-weight: 800; line-height: 1; }
	.foto__acciones button:disabled { opacity: 0.35; }
	.foto-agregar {
		display: grid; place-content: center; justify-items: center; gap: var(--e1); width: 100%; padding: var(--e2);
		border: 2px dashed var(--borde-fuerte); background: transparent; color: var(--primario); font-weight: 700; font-size: var(--texto-s); text-align: center;
		transition: background-color 0.15s, border-color 0.15s;
	}
	.foto-agregar:hover { background: var(--info-fondo); border-color: var(--primario); }
	.fotos > li:only-child { grid-column: 1 / -1; }
	.fotos > li:only-child .foto-agregar { aspect-ratio: 3 / 1; }

	.segmentado { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e1); padding: var(--e1); border: 1.5px solid var(--borde-fuerte); border-radius: var(--radio-pildora); background: var(--superficie); }
	.segmentado label { position: relative; }
	.segmentado input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
	.segmentado span { display: grid; place-items: center; min-height: 2.4rem; border-radius: var(--radio-pildora); font-weight: 700; transition: background-color 0.15s, color 0.15s; }
	.segmentado input:checked + span { background: var(--primario); color: var(--sobre-primario); }
	.segmentado input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }

	.prefijo { position: relative; }
	.prefijo > span { position: absolute; inset-block: 0; inset-inline-start: 0.95rem; display: grid; align-items: center; font-weight: 700; color: var(--texto-apagado); pointer-events: none; }
	.prefijo .entrada { padding-inline-start: 2rem; font-weight: 700; font-size: var(--texto-l); }
	.cantidad { display: grid; grid-template-columns: 2.9rem 1fr 2.9rem; gap: var(--e2); }
	.cantidad .btn { padding: 0; min-height: 2.9rem; font-size: 1.3rem; }
	.cantidad .entrada { text-align: center; font-weight: 700; }

	.consejo { margin-top: var(--e2); font-size: var(--texto-s); color: var(--texto-suave); }
	.consejo summary { cursor: pointer; font-weight: 600; }
	.consejo p { margin-top: var(--e2); }

	/* Botón de publicar: fijo abajo en el celular (reemplaza a la barra de navegación) */
	.barra-publicar { margin-top: var(--e5); }
	@media (max-width: 47.99em) {
		.barra-publicar {
			position: fixed; inset-inline: 0; bottom: 0; z-index: 50; margin: 0;
			padding: var(--e2) var(--e4) calc(var(--e2) + env(safe-area-inset-bottom));
			background: color-mix(in srgb, var(--superficie) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--borde);
		}
	}

	/* Panel que aparece en la ficha justo después de publicar */
	.festejo {
		margin-block: var(--e3) var(--e4); padding: var(--e5); border-radius: var(--radio-l);
		background: linear-gradient(135deg, var(--tinta-800), var(--azul-700)); color: #fff; display: grid; gap: var(--e3);
	}
	.festejo h2 { font-size: var(--titulo-2); }
	.festejo h2 em { font-style: normal; color: var(--acento); }
	.festejo p { color: rgb(255 255 255 / 0.88); max-width: 46ch; }
	.festejo__acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
	.festejo .btn--fantasma { color: #fff; border-color: rgb(255 255 255 / 0.45); }
	.festejo .btn--fantasma:hover { background: rgb(255 255 255 / 0.14); color: #fff; }

	/* ----- Tablero del vendedor ----- */
	.tablero__cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); margin-block: var(--e3) var(--e4); }
	.tablero__cabecera h1 { font-size: var(--titulo-2); }
	.tablero__sub { color: var(--texto-suave); }
	.metricas { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e3); margin-bottom: var(--e5); }
	@media (min-width: 48em) { .metricas { grid-template-columns: repeat(4, 1fr); } }
	.metricas li { display: grid; gap: 2px; padding: var(--e4); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-m); }
	.metricas strong { font-family: var(--fuente-display); font-weight: 800; font-size: var(--titulo-2); letter-spacing: -0.03em; line-height: 1; }
	.metricas span { color: var(--texto-suave); font-size: var(--texto-s); }

	.filtros { display: flex; gap: var(--e2); overflow-x: auto; scrollbar-width: none; margin-bottom: var(--e4); padding-bottom: 2px; }
	.filtros button { flex: none; display: inline-flex; align-items: center; gap: var(--e2); padding: 0.45rem 0.95rem; border: 1.5px solid var(--borde-fuerte); border-radius: var(--radio-pildora); background: var(--superficie); font-weight: 700; font-size: var(--texto-s); }
	.filtros button span { color: var(--texto-apagado); font-weight: 600; }
	.filtros button[aria-selected="true"] { background: var(--tinta-800); border-color: var(--tinta-800); color: #fff; }
	.filtros button[aria-selected="true"] span { color: rgb(255 255 255 / 0.7); }
	.filtros [data-vacio] { display: none; }

	.mis-pubs { list-style: none; padding: 0; display: grid; gap: var(--e3); }
	.mi-pub {
		display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--e3) var(--e4); padding: var(--e3);
		background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-m); box-shadow: var(--sombra-1);
		transition: opacity 0.25s, transform 0.25s var(--ritmo);
	}
	@media (min-width: 48em) { .mi-pub { grid-template-columns: 8rem 1fr auto; align-items: center; padding: var(--e4); } }
	.mi-pub[hidden] { display: none; }
	.mi-pub--saliendo { opacity: 0; transform: translateX(1rem); }
	.mi-pub__foto { display: block; aspect-ratio: 4 / 3; border-radius: var(--radio-s); overflow: hidden; background: var(--superficie-2); align-self: start; }
	.mi-pub__foto img { width: 100%; height: 100%; object-fit: cover; }
	.mi-pub__foto > span { display: grid; place-items: center; height: 100%; color: var(--texto-apagado); }
	.mi-pub__datos { display: grid; gap: 0.2rem; min-width: 0; align-content: start; }
	.mi-pub__titulo { font-family: var(--fuente-texto); font-size: var(--texto-m); font-weight: 600; letter-spacing: 0; line-height: 1.3; overflow-wrap: anywhere; }
	.mi-pub__titulo a { color: var(--texto); text-decoration: none; }
	.mi-pub__titulo a:hover { color: var(--primario); text-decoration: underline; }
	.mi-pub__precio { font-family: var(--fuente-display); font-weight: 800; font-size: var(--titulo-3); }
	.mi-pub__estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); font-size: var(--texto-s); color: var(--texto-suave); }
	.mi-pub__estado .urgente { color: var(--peligro); font-weight: 700; }
	.mi-pub__metricas { list-style: none; padding: 0; display: flex; gap: var(--e4); font-size: var(--texto-s); color: var(--texto-suave); }
	.mi-pub__metricas li { display: inline-flex; align-items: center; gap: var(--e1); }
	.mi-pub__acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--e2); padding-top: var(--e3); border-top: 1px solid var(--borde); }
	.mi-pub__acciones [hidden] { display: none; }
	@media (min-width: 48em) { .mi-pub__acciones { grid-column: auto; max-width: 20rem; justify-content: flex-end; padding-top: 0; border-top: 0; } }
	.estado--activa { background: var(--exito-fondo); color: var(--exito); }
	.estado--pausada { background: var(--aviso-fondo); color: var(--aviso-texto); }
	.estado--vencida { background: var(--peligro-fondo); color: var(--peligro); }
	.estado--vendida { background: var(--tinta-800); color: #fff; }
	.vacio--filtro { margin-top: var(--e4); }

	/* ----- Favoritos ----- */
	.corazon {
		position: absolute; inset-block-start: var(--e2); inset-inline-end: var(--e2); z-index: 2;
		display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0;
		border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.94); color: var(--tinta-900); box-shadow: 0 1px 4px rgb(0 0 0 / 0.28);
		transition: transform 0.15s var(--ritmo), color 0.15s;
	}
	.corazon:hover { transform: scale(1.1); }
	.corazon[aria-pressed="true"], .btn--favorito[aria-pressed="true"] { color: var(--coral-600); }
	.corazon[aria-pressed="true"] .icono, .btn--favorito[aria-pressed="true"] .icono { fill: currentColor; animation: latido 0.35s var(--ritmo); }
	@keyframes latido { 0% { transform: scale(0.6); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
	.corazon[aria-busy="true"] { opacity: 0.6; }
	.btn--favorito .favorito__texto::before { content: "Guardar"; }
	.btn--favorito[aria-pressed="true"] .favorito__texto::before { content: "Guardado"; }
	.chip--baja { background: var(--coral-600); color: #fff; }
	.card__antes { margin-inline-start: var(--e1); font-family: var(--fuente-texto); font-weight: 500; font-size: var(--texto-s); color: var(--texto-apagado); }

	/* ----- Mi cuenta ----- */
	.avatar--grande { width: 4rem; height: 4rem; font-size: 1.6rem; object-fit: cover; }
	.cuenta__cabecera { display: flex; align-items: center; gap: var(--e4); margin-block: var(--e3) var(--e4); }
	.cuenta__cabecera h1 { font-size: var(--titulo-2); }
	.cuenta__sub { color: var(--texto-suave); font-size: var(--texto-s); overflow-wrap: anywhere; }
	.plan { display: grid; gap: var(--e4); padding: var(--e5); margin-bottom: var(--e4); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); }
	@media (min-width: 48em) { .plan { grid-template-columns: 1.4fr 1fr; align-items: center; } }
	.plan h2 { font-size: var(--titulo-3); margin-bottom: var(--e1); }
	.plan p { color: var(--texto-suave); }
	.medidor { height: 0.6rem; margin-top: var(--e2); border-radius: var(--radio-pildora); background: var(--superficie-2); overflow: hidden; }
	.medidor > span { display: block; height: 100%; border-radius: inherit; background: var(--primario); transition: width 0.4s var(--ritmo); }
	.atajos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e3); margin-bottom: var(--e5); scroll-margin-top: 5rem; }
	@media (min-width: 40em) { .atajos { grid-template-columns: repeat(3, 1fr); } }
	@media (min-width: 64em) { .atajos { grid-template-columns: repeat(5, 1fr); } }
	.atajo {
		display: grid; justify-items: start; align-content: space-between; gap: var(--e3); min-height: 5.5rem; padding: var(--e4);
		background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-m); color: var(--texto);
		font: inherit; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; box-shadow: var(--sombra-1);
		transition: transform 0.15s var(--ritmo), border-color 0.15s;
	}
	.atajo:hover { color: var(--texto); border-color: var(--primario); transform: translateY(-2px); }
	.atajo .icono { color: var(--primario); }
	.atajo--principal { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
	.atajo--principal:hover { color: var(--sobre-acento); border-color: var(--acento-hover); }
	.atajo--principal .icono { color: var(--sobre-acento); }
	.atajo--apagado { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
	.admin-herramientas { margin-bottom: var(--e5); padding: var(--e4); background: var(--aviso-fondo); border-radius: var(--radio-m); }
	.admin-herramientas summary { cursor: pointer; font-weight: 700; }
	.admin-herramientas__enlaces { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
	.cuenta__secciones { display: grid; gap: var(--e4); }
	@media (min-width: 64em) { .cuenta__secciones { grid-template-columns: 1fr 1fr; align-items: start; } }
	.seccion-cuenta { padding: var(--e5); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); scroll-margin-top: 5rem; }
	.seccion-cuenta h2 { font-size: var(--titulo-3); margin-bottom: var(--e1); }
	.seccion-cuenta > .ayuda { margin-bottom: var(--e4); }
	.seccion-cuenta h2 + .campo { margin-top: var(--e4); }
	.seccion-cuenta .btn[type="submit"] { margin-top: var(--e2); }
	.opciones { display: grid; gap: var(--e2); }
	.opciones label { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); border: 1.5px solid var(--borde-fuerte); border-radius: var(--radio-m); cursor: pointer; font-weight: 600; }
	.opciones label:has(input:checked) { border-color: var(--primario); background: var(--info-fondo); }
	.opciones input { accent-color: var(--primario); width: 1.1rem; height: 1.1rem; }
	.opciones small { font-weight: 400; color: var(--texto-suave); }
	.prefijo--largo > span { inset-inline-start: 0.9rem; }
	.prefijo--largo .entrada { padding-inline-start: 4rem; font-weight: 600; }
	.campo--corto { max-width: 14rem; }
	.dialogo--qr { text-align: center; }
	.dialogo--qr .dialogo__cerrar { position: absolute; inset-block-start: var(--e2); inset-inline-end: var(--e2); background: var(--superficie-2); color: var(--texto); }
	.qr-contenido { display: grid; justify-items: center; gap: var(--e3); }
	.qr-contenido h1 { font-size: var(--titulo-3); }
	.qr-contenido img { width: min(100%, 18rem); height: auto; border-radius: var(--radio-s); }
	.qr-contenido .contenedor-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e2); }
	.qr-contenido .boton, .qr-contenido .print-btn {
		display: inline-flex; align-items: center; gap: var(--e2); min-height: 2.5rem; padding: 0.4rem 1rem; border: 1.5px solid var(--borde-fuerte);
		border-radius: var(--radio-pildora); background: var(--superficie); color: var(--texto); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
	}

	/* ----- Listados con filtros (búsqueda, categoría, tienda) ----- */
	.listado__cabecera { margin-block: var(--e3) var(--e4); }
	.listado__cabecera h1 { font-size: var(--titulo-2); overflow-wrap: anywhere; }
	.categorias--lista { margin-top: 0; margin-bottom: var(--e4); }
	.categorias--lista [aria-current="page"] { background: var(--tinta-800); border-color: var(--tinta-800); color: #fff; }
	.categorias--lista [aria-current="page"] small { color: rgb(255 255 255 / 0.7); }
	.listado { display: grid; gap: var(--e4); align-items: start; }
	@media (min-width: 64em) { .listado { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--e5); } .listado .filtros-panel { position: sticky; top: calc(var(--alto-cabecera) + var(--e4)); } }
	.listado__resultados { min-width: 0; }
	.filtros-panel { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-m); padding: var(--e3) var(--e4); }
	.filtros-panel > summary { display: flex; align-items: center; gap: var(--e2); cursor: pointer; font-weight: 700; list-style: none; padding-block: var(--e1); }
	.filtros-panel > summary::-webkit-details-marker { display: none; }
	.filtros-panel[open] > summary { margin-bottom: var(--e3); }
	.filtros-form { display: grid; gap: var(--e1); }
	.filtros-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
	.filtros-form .campo { margin-bottom: var(--e3); }
	.opciones-lista { display: grid; gap: 2px; }
	.opciones-lista label { display: flex; align-items: center; gap: var(--e2); padding: 0.3rem 0; cursor: pointer; font-size: var(--texto-s); }
	.opciones-lista input { accent-color: var(--primario); }
	.opciones-lista small { color: var(--texto-apagado); }
	.rango { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--e2); }
	.rango .entrada { min-height: 2.5rem; padding-inline: var(--e3); }
	.resultados { transition: opacity 0.15s; }
	.resultados--cargando { opacity: 0.45; pointer-events: none; }
	.resultados__cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e4); margin-bottom: var(--e3); }
	.resultados__total { color: var(--texto-suave); }
	.filtros-activos { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
	.filtros-activos .chip { background: var(--info-fondo); color: var(--primario); }
	.vacio__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e2); margin-top: var(--e4); }
	.vacio__acciones .btn { margin-top: 0; }
	.paginacion { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e1); margin-top: var(--e5); }
	.pagina { display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding-inline: var(--e3); border-radius: var(--radio-pildora); border: 1.5px solid var(--borde); background: var(--superficie); color: var(--texto); font-weight: 700; text-decoration: none; }
	a.pagina:hover { border-color: var(--primario); color: var(--primario); }
	.pagina[aria-current="page"] { background: var(--tinta-800); border-color: var(--tinta-800); color: #fff; }
	.pagina--puntos { border: 0; background: transparent; min-width: 1.5rem; padding: 0; }

	/* ----- Tienda ----- */
	.tienda { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); overflow: hidden; margin-block: var(--e3) var(--e5); }
	.tienda__portada { height: 7rem; background: linear-gradient(120deg, var(--tinta-800), var(--azul-600)); background-size: cover; background-position: center; position: relative; overflow: hidden; }
	.tienda__portada:not([style])::after { content: ""; position: absolute; inset: auto -2rem -3rem auto; width: 14rem; height: 14rem; border-radius: 50%; background: radial-gradient(circle, var(--lima-400), transparent 68%); opacity: 0.55; }
	@media (min-width: 48em) { .tienda__portada { height: 9rem; } }
	.tienda__perfil { display: grid; gap: var(--e3); padding: 0 var(--e4) var(--e4); }
	@media (min-width: 48em) { .tienda__perfil { grid-template-columns: auto 1fr auto; align-items: end; padding-inline: var(--e5); } }
	.tienda__avatar { position: relative; z-index: 1; width: 5.5rem; height: 5.5rem; margin-top: -2.75rem; border: 4px solid var(--superficie); font-size: 2.2rem; object-fit: cover; }
	.tienda__datos { padding-top: var(--e3); }
	.tienda__datos h1 { font-size: var(--titulo-2); overflow-wrap: anywhere; }
	.tienda__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e4); margin-top: var(--e1); color: var(--texto-suave); font-size: var(--texto-s); }
	.tienda__meta > span { display: inline-flex; align-items: center; gap: var(--e1); }
	.tienda__acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
	.btn--seguir[aria-pressed="false"] .seguir__texto::before { content: "Seguir"; }
	.btn--seguir[aria-pressed="true"] { background: var(--superficie-2); color: var(--texto); border-color: var(--borde-fuerte); }
	.btn--seguir[aria-pressed="true"] .seguir__texto::before { content: "Siguiendo ✓"; }
	.tienda__sobre { display: grid; gap: var(--e4); padding: var(--e4); border-top: 1px solid var(--borde); }
	@media (min-width: 48em) { .tienda__sobre { grid-template-columns: 1.4fr 1fr; padding: var(--e5); } }
	.tienda__contacto h2 { font-size: var(--texto-l); margin-bottom: var(--e2); }
	.tienda__contacto p + p { margin-top: var(--e2); }
	.opiniones { list-style: none; padding: 0; display: grid; gap: var(--e3); }
	@media (min-width: 48em) { .opiniones { grid-template-columns: 1fr 1fr; } }
	.opiniones li { padding: var(--e4); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-m); display: grid; gap: var(--e1); }
	.opinion__estrellas { color: #e5a400; letter-spacing: 0.1em; }
	.opinion__respuesta { padding: var(--e2) var(--e3); background: var(--superficie-2); border-radius: var(--radio-s); font-size: var(--texto-s); }

	/* ----- Pestañas de la home ----- */
	.pestanas { display: flex; gap: var(--e2); margin-bottom: var(--e3); }
	.pestanas a { padding: 0.5rem 1rem; border-radius: var(--radio-pildora); border: 1.5px solid var(--borde-fuerte); font-weight: 700; text-decoration: none; color: var(--texto); }
	.pestanas a:hover { border-color: var(--primario); }
	.pestanas a[aria-current="page"] { background: var(--tinta-800); border-color: var(--tinta-800); color: #fff; }

	/* ----- Páginas de texto (qué es, términos, privacidad) ----- */
	.prosa { width: min(100%, 46rem); margin-inline: auto; padding-block: var(--e4) var(--e6); }
	.prosa h1 { font-size: var(--titulo-1); margin-bottom: var(--e4); }
	.prosa h2 { font-size: var(--titulo-3); margin-block: var(--e6) var(--e3); }
	.prosa h3 { font-family: var(--fuente-texto); font-size: var(--texto-l); font-weight: 700; margin-block: var(--e5) var(--e2); letter-spacing: 0; }
	.prosa p, .prosa li { max-width: 68ch; }
	.prosa p + p { margin-top: var(--e3); }
	.prosa ul, .prosa ol { padding-inline-start: 1.25rem; margin-block: var(--e3); display: grid; gap: var(--e2); }
	.prosa__bajada { font-size: var(--texto-l); color: var(--texto-suave); }
	.prosa .ventajas { list-style: none; padding: 0; }
	.prosa .ventajas li { padding: var(--e3) var(--e4); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-m); }
	.prosa__cierre { display: grid; justify-items: start; gap: var(--e3); margin-top: var(--e6); padding: var(--e5); background: var(--hero-fondo); color: #fff; border-radius: var(--radio-l); }
	.prosa__cierre p { color: rgb(255 255 255 / 0.88); font-size: var(--texto-l); }
	.tyc { max-width: 68ch; }

	/* ----- Planes ----- */
	.planes__cabecera { margin-block: var(--e4) var(--e5); }
	.planes__cabecera h1 { font-size: var(--titulo-1); }
	.planes__cabecera p { margin-top: var(--e2); color: var(--texto-suave); }
	.planes { display: grid; gap: var(--e4); margin-bottom: var(--e6); }
	@media (min-width: 48em) { .planes { grid-template-columns: 1fr 1fr; align-items: stretch; } }
	.plan-card { display: grid; align-content: start; gap: var(--e3); padding: var(--e5); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); box-shadow: var(--sombra-1); }
	.plan-card--destacado { border: 2px solid var(--primario); box-shadow: var(--sombra-2); }
	.plan-card h2 { font-size: var(--titulo-2); }
	.plan-card__precio { font-family: var(--fuente-display); font-weight: 800; font-size: var(--titulo-1); letter-spacing: -0.03em; line-height: 1; }
	.plan-card__precio small { font-family: var(--fuente-texto); font-weight: 500; font-size: var(--texto-m); color: var(--texto-suave); letter-spacing: 0; }
	.plan-card__lista { list-style: none; padding: 0; display: grid; margin-bottom: var(--e2); }
	.plan-card__lista li { display: flex; justify-content: space-between; gap: var(--e3); padding: var(--e3) 0; border-top: 1px solid var(--borde); }
	.plan-card__lista span { color: var(--texto-suave); }
	.plan-card__lista strong { text-align: right; }
	.vacio--pagina { margin-block: var(--e6); }

	/* ----- Compra inversa: pedidos, ofertas y canales ----- */
	.filtros-barra { display: grid; gap: var(--e2); margin-bottom: var(--e4); }
	@media (min-width: 48em) { .filtros-barra { grid-template-columns: 2fr 1fr 1fr auto; } }
	.filtros-barra .entrada { min-height: 2.75rem; }
	.pedidos-lista { list-style: none; padding: 0; display: grid; gap: var(--e3); }
	.pedido-fila { position: relative; display: grid; gap: var(--e3); padding: var(--e4); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-m); box-shadow: var(--sombra-1); transition: border-color 0.15s, transform 0.15s var(--ritmo); }
	@media (min-width: 48em) { .pedido-fila { grid-template-columns: 1fr auto; align-items: center; } }
	@media (hover: hover) { .pedido-fila:hover { border-color: var(--borde-fuerte); transform: translateY(-2px); } }
	.pedido-fila__principal { display: grid; gap: var(--e1); min-width: 0; justify-items: start; }
	.pedido-fila__titulo { font-family: var(--fuente-texto); font-size: var(--texto-l); font-weight: 650; letter-spacing: 0; line-height: 1.3; overflow-wrap: anywhere; }
	.pedido-fila__titulo a { color: var(--texto); text-decoration: none; }
	.pedido-fila__titulo a::after { content: ""; position: absolute; inset: 0; }
	.pedido-fila__resumen { color: var(--texto-suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.pedido-fila__meta { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); font-size: var(--texto-s); color: var(--texto-apagado); }
	.pedido-fila__meta span { display: inline-flex; align-items: center; gap: var(--e1); }
	.pedido-fila__lado { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
	@media (min-width: 48em) { .pedido-fila__lado { flex-direction: column; align-items: flex-end; } }
	.pedido-fila__lado .btn { position: relative; z-index: 1; }
	.pedido-fila__ofertas { font-size: var(--texto-s); color: var(--texto-suave); font-weight: 600; }
	.pedido-detalle { display: grid; gap: var(--e4); width: min(100%, 46rem); margin: var(--e3) auto var(--e5); padding: var(--e5); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); }
	.pedido-detalle h1 { font-size: var(--titulo-2); margin-block: var(--e2); overflow-wrap: anywhere; }
	.pedido-autor { color: var(--texto-suave); }
	.ofertas-lista { list-style: none; padding: 0; display: grid; gap: var(--e3); }
	.oferta { display: grid; gap: var(--e2); padding: var(--e4); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-m); justify-items: start; }
	.oferta__precio { font-family: var(--fuente-display); font-weight: 800; font-size: var(--titulo-3); }
	.oferta__precio small { font-family: var(--fuente-texto); font-weight: 600; margin-inline-start: var(--e2); }
	.dialogo--ancho { width: min(100% - 2rem, 32rem); max-height: 92dvh; overflow-y: auto; }
	.mi-pub--pedido { grid-template-columns: 1fr; }
	@media (min-width: 48em) { .mi-pub--pedido { grid-template-columns: 1fr auto; } }
	.mi-pub--pedido .mi-pub__datos { justify-items: start; }
	.canales-mios, .canales-lista { list-style: none; padding: 0; display: grid; gap: var(--e2); }
	.canal-mio, .canal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e3) var(--e4); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-m); }
	.canal-mio small, .canal__fila small { display: block; color: var(--texto-apagado); }
	.canal__fila a { color: var(--texto); text-decoration: none; }
	.canal__fila a:hover { color: var(--primario); }
	.canal__avisar { flex: 1 1 100%; }
	.canal__avisar > summary { display: inline-flex; list-style: none; cursor: pointer; }
	.canal__avisar > summary::-webkit-details-marker { display: none; }
	@media (min-width: 48em) { .canal { flex-wrap: nowrap; } .canal__avisar { flex: 0 0 auto; position: relative; } .canal__avisar[open] { flex: 1 1 100%; } }
	.canal__form { display: grid; gap: var(--e1); margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--borde); }
	.canal__form .campo { margin-bottom: var(--e2); }
	.canal__form label { font-weight: 600; font-size: var(--texto-s); display: grid; gap: var(--e1); }

	/* ----- Carga de más resultados ----- */
	.mas { display: grid; justify-items: center; gap: var(--e3); margin-top: var(--e6); }
	.mas__estado { color: var(--texto-apagado); font-size: var(--texto-s); }
	.vacio { padding: var(--e7) var(--e4); text-align: center; color: var(--texto-suave); background: var(--superficie); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-l); }
	.vacio h2 { margin-bottom: var(--e2); color: var(--texto); }
	.vacio .btn { margin-top: var(--e4); }
}

/* ---------- 6. Utilidades ------------------------------------------- */
@layer utilidades {
	.centrado { text-align: center; }
	.sin-margen { margin: 0; }
	.mt-4 { margin-top: var(--e4); }
	.mt-5 { margin-top: var(--e5); }
}

/* ===== Chat (/mensajes) =====
   chat.js arma el DOM con estos ids y clases; acá solo se le da estilo. */
@layer componentes {
	.pagina-chat .principal { padding-block: var(--e3); }
	#chat-app {
		display: grid; grid-template-columns: minmax(16rem, 22rem) 1fr; height: calc(100dvh - 8.5rem); min-height: 26rem;
		background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); overflow: hidden;
	}
	#chat-lista-panel { display: flex; flex-direction: column; min-height: 0; border-inline-end: 1px solid var(--borde); }
	#chat-lista-panel h1 { margin: 0; padding: var(--e3) var(--e4); font-size: var(--titulo-3); border-bottom: 1px solid var(--borde); }
	#chat-lista { flex: 1; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
	#chat-lista-vacia { padding: var(--e4); color: var(--texto-suave); }
	.chat-item {
		display: flex; align-items: center; gap: var(--e3); width: 100%; min-height: 4.25rem; padding: var(--e3) var(--e4);
		border: 0; border-bottom: 1px solid var(--borde); background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer;
	}
	.chat-item:hover, .chat-item.activa { background: var(--superficie-2); }
	.chat-item img, .chat-avatar { flex: none; width: 3rem; height: 3rem; border-radius: var(--radio-m); object-fit: cover; background: var(--superficie-2); }
	.chat-avatar { display: grid; place-items: center; font-weight: 700; color: var(--primario); }
	.chat-textos { flex: 1; min-width: 0; }
	.chat-nombre { display: flex; justify-content: space-between; gap: var(--e2); font-weight: 700; }
	.chat-hora { flex: none; font-size: var(--texto-s); font-weight: 400; color: var(--texto-apagado); }
	.chat-pub, .chat-ultimo { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--texto-s); color: var(--texto-suave); }
	.chat-item.sin-leer .chat-ultimo { color: var(--texto); font-weight: 700; }
	.chat-pendientes { flex: none; min-width: 1.4rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--primario); color: var(--sobre-primario); font-size: var(--texto-s); font-weight: 700; text-align: center; }

	#chat-hilo-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
	#chat-hilo-vacio { margin: auto; padding: var(--e5); color: var(--texto-apagado); text-align: center; }
	#chat-hilo { display: flex; flex: 1; flex-direction: column; min-height: 0; }
	#chat-hilo[hidden], #chat-hilo-vacio[hidden], #chat-aviso[hidden], #chat-acciones[hidden], .chat-error[hidden] { display: none; }
	#chat-cabecera { display: flex; align-items: center; gap: var(--e3); padding: var(--e2) var(--e3); border-bottom: 1px solid var(--borde); }
	#chat-cabecera img { flex: none; border-radius: var(--radio-m); object-fit: cover; }
	#chat-cab-datos { flex: 1; min-width: 0; }
	#chat-cab-datos strong, #chat-cab-datos a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	#chat-cab-datos a, #chat-cab-rep { font-size: var(--texto-s); }
	#chat-cab-rep { display: block; color: var(--texto-suave); }
	#chat-cab-rep:empty { display: none; }
	#chat-volver, #chat-menu summary { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; list-style: none; }
	#chat-volver { display: none; }
	#chat-volver:hover, #chat-menu summary:hover { background: var(--superficie-2); }
	#chat-menu { position: relative; }
	#chat-menu summary::-webkit-details-marker { display: none; }
	#chat-menu > div { position: absolute; inset-inline-end: 0; z-index: 5; min-width: 13rem; padding: var(--e1); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-m); box-shadow: var(--sombra-2); }
	#chat-menu button { display: block; width: 100%; min-height: 2.75rem; padding: var(--e2) var(--e3); border: 0; border-radius: var(--radio-s, 0.5rem); background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
	#chat-menu button:hover { background: var(--superficie-2); }

	#chat-mensajes { display: flex; flex: 1; flex-direction: column; gap: var(--e1); min-height: 0; padding: var(--e3); overflow-y: auto; background: var(--fondo); overscroll-behavior: contain; }
	.chat-dia { align-self: center; margin: var(--e2) 0; padding: 0.1rem var(--e3); border-radius: 999px; background: var(--superficie-2); color: var(--texto-suave); font-size: var(--texto-s); }
	.chat-msg { max-width: min(80%, 32rem); padding: var(--e2) var(--e3); border-radius: var(--radio-l); border-end-start-radius: var(--e1); background: var(--superficie); border: 1px solid var(--borde); overflow-wrap: anywhere; white-space: pre-wrap; }
	.chat-msg.mio { align-self: flex-end; border-end-start-radius: var(--radio-l); border-end-end-radius: var(--e1); background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); }
	.chat-meta { display: block; margin-top: 0.15rem; font-size: 0.72rem; opacity: 0.7; text-align: end; }
	.chat-sistema { align-self: center; max-width: 90%; padding: var(--e1) var(--e3); border-radius: var(--radio-m); background: var(--superficie-2); color: var(--texto-suave); font-size: var(--texto-s); text-align: center; }
	.chat-cargar-antes { align-self: center; min-height: 2.25rem; padding: 0 var(--e4); border: 1px solid var(--borde-fuerte); border-radius: 999px; background: var(--superficie); color: inherit; font: inherit; font-size: var(--texto-s); cursor: pointer; }
	#chat-aviso { margin: 0; padding: var(--e2) var(--e3); background: var(--aviso-fondo); color: var(--aviso-texto); font-size: var(--texto-s); }
	#chat-acciones { padding: var(--e2) var(--e3) 0; border-top: 1px solid var(--borde); }
	#chat-form { display: flex; align-items: stretch; gap: var(--e2); padding: var(--e2) var(--e3); border-top: 1px solid var(--borde); }
	#chat-texto { flex: 1; min-width: 0; min-height: 3rem; max-height: 9rem; margin: 0; padding: var(--e3); resize: none; font: inherit; font-size: 1rem; border: 1.5px solid var(--borde-fuerte); border-radius: var(--radio-m); background: var(--superficie); color: var(--texto); }
	#chat-texto:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
	#chat-enviar { flex: none; min-width: 5.5rem; padding: 0 var(--e4); border: 0; border-radius: 999px; background: var(--acento); color: var(--sobre-acento); font: inherit; font-weight: 700; cursor: pointer; }
	#chat-enviar:hover { background: var(--acento-hover); }
	#chat-enviar:disabled, #chat-texto:disabled { opacity: 0.5; cursor: not-allowed; }

	.chat-orden { align-self: center; display: flex; flex-direction: column; gap: var(--e1); width: min(94%, 26rem); padding: var(--e3) var(--e4); background: var(--superficie); border: 1px solid var(--borde); border-inline-start: 4px solid var(--acento-hover); border-radius: var(--radio-m); }
	.chat-orden.antigua { opacity: 0.72; border-inline-start-color: var(--borde-fuerte); }
	.chat-orden-cuenta { font-weight: 700; }
	.chat-orden-estado { margin-top: var(--e1); padding: var(--e1) var(--e2); border-radius: var(--radio-s, 0.5rem); background: var(--superficie-2); font-size: var(--texto-s); }
	.chat-oferta-mensaje { overflow-wrap: anywhere; white-space: pre-wrap; }
	.chat-orden-acciones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e2); }
	.chat-orden-boton { flex: 1 1 9rem; min-height: 2.75rem; padding: var(--e2) var(--e3); border: 1.5px solid var(--borde-fuerte); border-radius: var(--radio-m); background: var(--superficie); color: var(--texto); font: inherit; font-weight: 600; line-height: 1.2; cursor: pointer; }
	.chat-orden-boton:hover { background: var(--superficie-2); }
	.chat-orden-boton.principal { border-color: transparent; background: var(--acento); color: var(--sobre-acento); }
	.chat-orden-boton.principal:hover { background: var(--acento-hover); }

	.chat-estrellas { margin: 0; padding: 0; border: 0; }
	.chat-estrellas label { display: flex; align-items: center; gap: var(--e2); margin: var(--e2) 0; cursor: pointer; }
	.chat-error { margin: var(--e2) 0; padding: var(--e2) var(--e3); border-radius: var(--radio-m); background: var(--peligro-fondo); color: var(--peligro); font-size: var(--texto-s); }
	.dialogo .campo input, .dialogo .campo select, .dialogo .campo textarea { width: 100%; font: inherit; font-size: 1rem; padding: var(--e3); border: 1.5px solid var(--borde-fuerte); border-radius: var(--radio-m); background: var(--superficie); color: var(--texto); }

	@media (max-width: 47.99em) {
		.pagina-chat .principal { padding-block: 0; width: 100%; }
		#chat-app { display: block; height: calc(100dvh - 4.5rem); border-inline: 0; border-radius: 0; }
		#chat-lista-panel, #chat-hilo-panel { height: 100%; border-inline-end: 0; }
		#chat-app:not(.chat-abierto) #chat-hilo-panel { display: none; }
		#chat-app.chat-abierto #chat-lista-panel { display: none; }
		#chat-volver { display: grid; }
		.chat-msg { max-width: 88%; }
	}
}

@layer componentes {
	.auth p + .auth__form { margin-top: var(--e4); }
}

/* ===== Compartir e invitar ===== */
@layer componentes {
	.compartir { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
	.compartir .btn[hidden] { display: none; }
	.invitar { padding: var(--e5); background: var(--info-fondo); border: 1px solid var(--borde); border-radius: var(--radio-l); display: grid; gap: var(--e2); }
	.invitar h2, .invitar h3 { margin: 0; font-size: var(--titulo-3); }
	.invitar p { margin: 0; color: var(--texto-suave); }
	.invitar--festejo { background: var(--acento); border-color: transparent; }
	.invitar--festejo p, .invitar--festejo h2 { color: var(--sobre-acento); }
	.invitar__mensaje { margin: var(--e2) 0 0; padding: var(--e3) var(--e4); background: var(--superficie); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-m); color: var(--texto); font-style: normal; }
	.invitar-opciones { display: grid; gap: var(--e4); }
	@media (min-width: 48em) { .invitar-opciones { grid-template-columns: 1fr 1fr; } }
	.dialogo--ancho .compartir { margin-bottom: var(--e2); }
	.banda-invitar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e4) var(--e5); background: var(--hero-fondo); color: #fff; border-radius: var(--radio-l); }
	.banda-invitar h2 { margin: 0; font-size: var(--titulo-3); color: #fff; }
	.banda-invitar p { margin: var(--e1) 0 0; color: color-mix(in srgb, #fff 78%, transparent); }
}

@layer componentes {
	.tablero__acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
}

/* ===== Pulso de la home ===== */
@layer componentes {
	.pulso { margin-block: var(--e4); padding: var(--e3) var(--e4); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); }
	.pulso__lista { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); margin: 0; padding: 0; list-style: none; }
	.pulso__lista li { display: grid; }
	.pulso__lista strong { font-family: var(--fuente-display); font-size: var(--titulo-3); line-height: 1.1; font-variant-numeric: tabular-nums; }
	.pulso__lista span { font-size: var(--texto-s); color: var(--texto-suave); }
	.pulso__lista li:first-child strong::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; margin-inline-end: 0.4rem; vertical-align: middle; border-radius: 50%; background: var(--exito); animation: pulso-latido 1.8s ease-in-out infinite; }
	.pulso__ultimo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: var(--e3) 0 0; padding-top: var(--e3); border-top: 1px solid var(--borde); color: var(--texto-suave); font-size: var(--texto-s); }
	.pulso__ultimo strong { color: var(--texto); }
	.pulso__punto { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--primario); }
	.pulso--cambio { animation: pulso-cambio 0.9s ease-out; }
	@keyframes pulso-latido { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.75); } }
	@keyframes pulso-cambio { from { color: var(--primario); transform: translateY(-2px); } to { color: inherit; transform: none; } }
	@media (prefers-reduced-motion: reduce) { .pulso__lista li:first-child strong::before, .pulso--cambio { animation: none; } }
}

@layer componentes {
	.opcion { display: flex; align-items: flex-start; gap: var(--e3); cursor: pointer; font-weight: 600; }
	.opcion input { flex: none; width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; accent-color: var(--primario); }
}

/* ===== Servicios (publicaciones con tipo = servicio) ===== */
@layer componentes {
	.chip--servicio { --punto: var(--primario); }
	.card__price--consultar { color: var(--texto-suave); font-weight: 600; }
}

/* ===== Administración ===== */
@layer componentes {
	.admin-filtro { display: flex; flex-wrap: wrap; align-items: end; gap: var(--e3); margin-block: var(--e4); }
	.admin-filtro .campo { margin: 0; }
	.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--e3); margin: var(--e4) 0; padding: 0; list-style: none; }
	.kpis li { display: grid; gap: 0.15rem; padding: var(--e3) var(--e4); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-m); }
	.kpis strong { font-family: var(--fuente-display); font-size: var(--titulo-3); font-variant-numeric: tabular-nums; }
	.kpis span { font-size: var(--texto-s); color: var(--texto-suave); }
	.graficos { display: grid; gap: var(--e4); margin-block: var(--e4); }
	@media (min-width: 48em) { .graficos { grid-template-columns: repeat(2, 1fr); } .grafico--ancho { grid-column: 1 / -1; } }
	.grafico { margin: 0; padding: var(--e4); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); }
	.grafico figcaption { margin-bottom: var(--e3); font-weight: 700; }
	.grafico__lienzo { position: relative; height: 15rem; }
	.admin-tops { display: grid; gap: var(--e4); margin-block: var(--e5); }
	@media (min-width: 48em) { .admin-tops { grid-template-columns: repeat(3, 1fr); } }
	.admin-top h2 { font-size: var(--texto-l); margin-bottom: var(--e2); }
	.tabla-admin { width: 100%; border-collapse: collapse; font-size: var(--texto-s); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-m); }
	.tabla-admin th, .tabla-admin td { padding: var(--e2) var(--e3); text-align: start; border-bottom: 1px solid var(--borde); overflow-wrap: anywhere; }
	.tabla-admin th { background: var(--superficie-2); }
	.tabla-admin td:last-child { text-align: end; font-variant-numeric: tabular-nums; }
	.admin-lista { display: grid; gap: var(--e3); margin: var(--e4) 0; padding: 0; list-style: none; }
	.admin-pub { display: grid; gap: var(--e2); padding: var(--e3) var(--e4); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-m); }
	.admin-pub h2 { font-size: var(--texto-m); margin: 0; }
	.admin-pub__meta { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); margin: 0; font-size: var(--texto-s); color: var(--texto-suave); }
	.admin-pub__acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
}

/* ===== Home: espaciado entre bloques y Compra inversa en vivo ===== */
@layer componentes {
	.categorias { margin-block: var(--e5); }
	.banda-invitar { margin-block: var(--e5); }
	.vivo__punto { display: inline-block; width: 0.6rem; height: 0.6rem; margin-inline-end: 0.5rem; border-radius: 50%; background: var(--coral-500); vertical-align: middle; animation: pulso-latido 1.8s ease-in-out infinite; }
	.vivo__en-vivo { margin-inline-start: 0.35rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--peligro-fondo); color: var(--peligro); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; }
	.vivo__sub { margin: calc(var(--e1) * -1) 0 var(--e3); color: var(--texto-suave); font-size: var(--texto-s); }
	.vivo__lista { margin: 0; padding: 0; list-style: none; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); overflow: hidden; }
	.vivo__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e4); padding: var(--e3) var(--e4); border-bottom: 1px solid var(--borde); transition: opacity 0.4s, max-height 0.4s; }
	.vivo__item:last-child { border-bottom: 0; }
	.vivo__texto { display: grid; gap: 0.25rem; min-width: 0; flex: 1 1 18rem; justify-items: start; }
	.vivo__titulo { font-weight: 700; color: var(--texto); text-decoration: none; overflow-wrap: anywhere; }
	.vivo__titulo:hover { color: var(--primario); text-decoration: underline; }
	.vivo__meta { display: flex; flex-wrap: wrap; gap: 0 var(--e3); margin: 0; font-size: var(--texto-s); color: var(--texto-suave); }
	.vivo__lado { display: flex; align-items: center; gap: var(--e3); flex: none; }
	.vivo__ofertas { font-size: var(--texto-s); color: var(--texto-suave); font-variant-numeric: tabular-nums; }
	.vivo__vacio { margin: 0; padding: var(--e4); text-align: center; color: var(--texto-suave); background: var(--superficie); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-l); }
	.vivo__vacio[hidden] { display: none; }
	.vivo__pie { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
	.vivo__item--nuevo { animation: vivo-entra 0.7s ease-out; }
	.vivo__item--sale { opacity: 0; }
	.vivo--destello { animation: vivo-destello 1.2s ease-out; }
	.vivo--sin-conexion .vivo__punto { background: var(--gris-500); animation: none; }
	@keyframes vivo-entra { from { background: color-mix(in srgb, var(--acento) 60%, transparent); transform: translateY(-0.5rem); opacity: 0; } to { background: transparent; transform: none; opacity: 1; } }
	@keyframes vivo-destello { 0% { color: var(--primario); font-weight: 700; } 100% { color: inherit; } }
	@media (prefers-reduced-motion: reduce) { .vivo__punto, .vivo__item--nuevo, .vivo--destello { animation: none; } }
}

/* ===== Revisión de espacios (márgenes y paddings) ===== */
@layer componentes {
	/* "Último registro": texto corrido (con flex, el punto final de la frase quedaba separado) */
	.pulso__ultimo { display: block; line-height: 1.7; }
	.pulso__punto { display: inline-block; margin-inline-end: 0.45rem; vertical-align: middle; }
	/* Botones con textos largos: se parten en vez de salirse de la pantalla */
	.btn { max-width: 100%; }
	.tablero__acciones .btn { white-space: normal; text-align: center; }
	@media (max-width: 47.99em) { .tablero__acciones { width: 100%; } .tablero__acciones .btn { flex: 1 1 100%; } }
	/* Pestañas: una sola fila que se desliza, nunca píldoras de dos líneas */
	.pestanas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
	.pestanas::-webkit-scrollbar { display: none; }
	.pestanas a { flex: none; white-space: nowrap; }
	/* Título de una sección con contenido debajo */
	.seccion > h2:first-child { margin-bottom: var(--e3); }
	.mi-pub__precio .chip { margin-inline-start: var(--e2); vertical-align: middle; }
}

/* ===== Home: secciones con título claro ===== */
@layer componentes {
	.pulso__titulo { margin: 0 0 var(--e2); font-family: var(--fuente-texto); font-size: var(--texto-s); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--texto-apagado); }
	.vivo__sub { color: var(--texto); }
	.vivo__sub strong { font-weight: 700; }
	.categorias.seccion { margin-block: var(--e6) var(--e5); }
	.vivo.seccion { margin-block: var(--e6) var(--e5); }
}

/* ===== Foto y banner de la tienda (Mi cuenta) ===== */
@layer componentes {
	.img-tienda { display: grid; gap: var(--e5); margin-top: var(--e3); }
	.img-tienda__bloque { display: grid; gap: var(--e2); }
	.img-tienda__portada { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 1; min-height: 5rem; border-radius: var(--radio-m); border: 1px dashed var(--borde-fuerte); background: linear-gradient(120deg, var(--tinta-800), var(--azul-600)) center / cover; overflow: hidden; color: rgb(255 255 255 / 0.85); font-size: var(--texto-s); }
	.img-tienda__portada[style*="url"] { border-style: solid; }
	.img-tienda__fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4); }
	.img-tienda__botones { display: flex; flex-wrap: wrap; gap: var(--e2); }
	.avatar--grande[data-vista] { object-fit: cover; }
}

/* ===== Pedido: un solo ancho de lectura y tarjeta amarilla legible en modo oscuro ===== */
@layer componentes {
	.principal:has(.pedido-detalle) > :where(nav.migas, .invitar, section.seccion) { width: min(100%, 46rem); margin-inline: auto; }
	.invitar--festejo { color: #101a33; }
	.invitar--festejo .btn--fantasma { color: #101a33; background: rgb(255 255 255 / 0.55); border-color: rgb(16 26 51 / 0.35); }
	.invitar--festejo .btn--fantasma:hover { background: rgb(255 255 255 / 0.85); color: #101a33; }
	.invitar--festejo a:not(.btn) { color: #101a33; font-weight: 600; }
	.invitar--festejo .ayuda { color: #101a33; }
}

/* ===== Directorio de tiendas ===== */
@layer componentes {
	.tiendas-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--e4); margin: 0; padding: 0; list-style: none; }
	.tienda-card { height: 100%; overflow: hidden; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); display: flex; flex-direction: column; transition: box-shadow 0.15s; }
	.tienda-card:hover { box-shadow: var(--sombra-2); }
	.tienda-card__portada { display: block; height: 4.5rem; background: linear-gradient(120deg, var(--tinta-800), var(--azul-600)) center / cover; }
	.tienda-card__cuerpo { display: grid; gap: var(--e2); justify-items: start; flex: 1; padding: 0 var(--e4) var(--e4); }
	.tienda-card__foto { position: relative; z-index: 1; margin-top: -2rem; }
	.tienda-card__avatar { width: 4rem; height: 4rem; border: 3px solid var(--superficie); font-size: 1.5rem; object-fit: cover; }
	.tienda-card__nombre { margin: 0; font-size: var(--texto-l); overflow-wrap: anywhere; }
	.tienda-card__nombre a { color: var(--texto); text-decoration: none; }
	.tienda-card__nombre a:hover { color: var(--primario); text-decoration: underline; }
	.tienda-card__lugar { display: flex; align-items: center; gap: var(--e1); margin: 0; font-size: var(--texto-s); color: var(--texto-suave); }
	.tienda-card__datos { display: flex; flex-wrap: wrap; gap: 0 var(--e3); margin: 0; font-size: var(--texto-s); color: var(--texto-suave); }
	.tienda-card__acciones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: auto; padding-top: var(--e2); }
	.tiendas-fila { display: flex; gap: var(--e4); overflow-x: auto; margin: 0; padding: 0 0 var(--e2); list-style: none; scroll-snap-type: x proximity; scrollbar-width: thin; }
	.tiendas-fila > li { flex: 0 0 15.5rem; scroll-snap-align: start; }
}

@layer componentes {
	@media (min-width: 48em) and (max-width: 80em) { .nav-escritorio .nav__enlace { padding-inline: 0.55rem; font-size: 0.95rem; } }
}

/* ===== Chat: aviso de conversación privada y ajustes de interfaz ===== */
@layer componentes {
	.chat-lista-nota { display: flex; align-items: center; gap: var(--e1); margin: 0; padding: var(--e1) var(--e4) var(--e2); font-size: var(--texto-s); color: var(--texto-suave); border-bottom: 1px solid var(--borde); }
	#chat-lista-panel h1 { border-bottom: 0; padding-bottom: var(--e1); }
	.chat-privado { display: flex; align-items: flex-start; gap: var(--e2); margin: 0; padding: var(--e2) var(--e3); background: var(--info-fondo); color: var(--texto-suave); font-size: var(--texto-s); line-height: 1.35; border-bottom: 1px solid var(--borde); }
	.chat-privado svg { flex: none; margin-top: 0.1rem; color: var(--primario); }
	.chat-privado strong { color: var(--texto); }
	/* El título de la publicación en la cabecera y en el aviso "Consulta por": enlace discreto, no un subrayado pesado */
	#chat-cab-datos a { color: var(--texto-suave); text-decoration: none; }
	#chat-cab-datos a:hover { color: var(--primario); text-decoration: underline; }
	.chat-sistema a { color: inherit; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 2px; }
	/* Escribir: sin el doble aro, un borde de color y un halo suave */
	#chat-texto:focus-visible { outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 28%, transparent); }
	#chat-form { padding-bottom: calc(var(--e2) + env(safe-area-inset-bottom)); }
	#chat-acciones { padding-bottom: 0; }
	#chat-acciones .btn { min-height: 2.5rem; }
	#chat-enviar { min-height: 3rem; }
	.chat-msg.mio .chat-meta { opacity: 0.8; }
}

/* ===== Avisos por correo: una opción por tipo ===== */
@layer componentes {
	.avisos-lista { display: grid; gap: var(--e1); margin-block: var(--e3); }
	.opcion--detalle { padding: var(--e3); border: 1px solid var(--borde); border-radius: var(--radio-m); background: var(--superficie); font-weight: 400; }
	.opcion--detalle:has(input:checked) { border-color: color-mix(in srgb, var(--primario) 45%, var(--borde)); background: var(--info-fondo); }
	.opcion--detalle > span { display: grid; gap: 0.1rem; }
	.opcion--detalle strong { font-weight: 700; }
	.opcion--detalle small { color: var(--texto-suave); font-size: var(--texto-s); }
	.avisos-todos { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0 0 var(--e3); }
}

/* ===== Cabecera en pantallas medianas: ahora hay más enlaces en el menú, así que la marca queda como logo y el buscador sin botón ===== */
@layer componentes {
	@media (min-width: 48em) and (max-width: 75em) {
		.marca__texto { display: none; }
		.buscador .btn { display: none; }
		.buscador { padding-right: var(--e4); }
		.nav-escritorio { gap: var(--e1); }
	}
}

/* ===== Filas de dos campos: cada campo con su propia altura (la ayuda de uno no estira al otro) ===== */
@layer componentes {
	.fila-2 { align-items: start; }
}

/* ===== Chat estilo mensajería (WhatsApp / Telegram) ===== */
@layer componentes {
	#chat-lista-panel h1 { font-size: var(--titulo-3); }
	.chat-item { align-items: center; padding-block: var(--e3); border-bottom: 1px solid color-mix(in srgb, var(--borde) 60%, transparent); }
	.chat-item.activa { background: color-mix(in srgb, var(--primario) 12%, var(--superficie)); }
	.chat-item img, .chat-avatar { width: 3.25rem; height: 3.25rem; border-radius: 50%; }
	.chat-avatar { background: color-mix(in srgb, var(--primario) 16%, var(--superficie)); }
	.chat-nombre { font-weight: 600; }
	.chat-pub { font-size: 0.78rem; color: var(--texto-apagado); }
	.chat-item.sin-leer .chat-hora { color: var(--primario); font-weight: 700; }
	.chat-pendientes { align-self: center; min-width: 1.4rem; padding: 0.1rem 0.4rem; border-radius: 999px; }

	#chat-cabecera { padding: var(--e2) var(--e3); background: var(--superficie); }
	#chat-cabecera img { border-radius: 50%; width: 2.75rem; height: 2.75rem; }
	#chat-cab-datos strong { font-size: 1rem; }

	/* fondo del hilo con trama sutil, como el papel de WhatsApp */
	#chat-hilo { background-color: var(--fondo); background-image: radial-gradient(color-mix(in srgb, var(--texto) 7%, transparent) 1px, transparent 1.5px); background-size: 18px 18px; }
	#chat-mensajes { background: transparent; gap: 0.2rem; padding: var(--e3) var(--e4); }

	.chat-privado { align-self: center; margin: var(--e2) var(--e3) 0; padding: 0.35rem var(--e3); max-width: 34rem; border: 0; border-radius: var(--radio-m); background: var(--aviso-fondo); color: var(--aviso-texto); text-align: center; justify-content: center; box-shadow: var(--sombra-1); }
	.chat-privado strong, .chat-privado svg { color: inherit; }

	.chat-dia { margin: var(--e3) 0 var(--e2); padding: 0.2rem var(--e3); background: color-mix(in srgb, var(--superficie) 92%, var(--texto) 4%); box-shadow: var(--sombra-1); font-size: 0.78rem; font-weight: 600; }

	.chat-msg { position: relative; max-width: min(78%, 30rem); padding: 0.4rem 0.7rem 0.35rem; border: 0; border-radius: 0.85rem; border-start-start-radius: 0.2rem; background: var(--superficie); color: var(--texto); box-shadow: 0 1px 1px color-mix(in srgb, var(--texto) 14%, transparent); line-height: 1.4; }
	.chat-msg.mio { border-radius: 0.85rem; border-start-end-radius: 0.2rem; background: color-mix(in srgb, var(--primario) 22%, var(--superficie)); color: var(--texto); }
	.chat-msg .chat-meta { display: inline-block; float: right; margin: 0.55rem 0 -0.1rem 0.7rem; font-size: 0.68rem; line-height: 1; opacity: 0.65; white-space: nowrap; }
	.chat-msg.mio .chat-meta { opacity: 0.75; }
	.chat-tilde { letter-spacing: -0.15em; font-weight: 700; }
	.chat-tilde.leido { color: #2da8ff; opacity: 1; }
	.chat-msg::after { content: ""; display: block; clear: both; }

	.chat-sistema { background: color-mix(in srgb, var(--superficie) 92%, var(--texto) 4%); box-shadow: var(--sombra-1); border-radius: var(--radio-m); }
	.chat-orden { border: 0; border-inline-start: 0; border-radius: 0.85rem; box-shadow: 0 1px 2px color-mix(in srgb, var(--texto) 18%, transparent); }

	/* barra de escritura: caja redonda + botón circular */
	#chat-acciones { padding: var(--e2) var(--e3) 0; border-top: 0; background: transparent; }
	.chat-chip { min-height: 2.25rem; padding: 0 var(--e4); border: 1.5px solid var(--acento-hover); border-radius: 999px; background: var(--superficie); color: var(--texto); font: inherit; font-size: var(--texto-s); font-weight: 700; cursor: pointer; }
	.chat-chip:hover { background: var(--acento); color: var(--sobre-acento); }
	#chat-form { align-items: flex-end; padding: var(--e2) var(--e3); border-top: 0; background: transparent; }
	#chat-texto { min-height: 2.9rem; padding: 0.7rem var(--e4); border: 0; border-radius: 1.5rem; box-shadow: 0 1px 2px color-mix(in srgb, var(--texto) 18%, transparent); }
	#chat-texto:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--primario) 45%, transparent); }
	#chat-enviar { display: grid; place-items: center; width: 2.9rem; min-width: 2.9rem; height: 2.9rem; min-height: 2.9rem; padding: 0; border-radius: 50%; }
	#chat-enviar svg { margin-inline-start: 2px; }

	@media (max-width: 47.99em) {
		#chat-mensajes { padding-inline: var(--e3); }
		.chat-msg { max-width: 86%; }
	}
}

/* Chat: color según el tipo de evento y espaciado de burbujas */
@layer componentes {
	.chat-orden { --tono: var(--primario); position: relative; gap: var(--e2); padding: var(--e3) var(--e4) var(--e3) calc(var(--e4) + 4px); overflow: hidden; }
	.chat-orden::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--tono); }
	.chat-orden > strong { color: var(--tono); font-size: var(--texto-s); text-transform: uppercase; letter-spacing: 0.04em; }
	.chat-orden-estado { background: color-mix(in srgb, var(--tono) 14%, var(--superficie)); color: var(--texto); }
	.chat-orden[data-evento="solicitada"], .chat-orden[data-evento="enviada"] { --tono: var(--primario); }
	.chat-orden[data-evento="acordada"], .chat-orden[data-evento="aceptada"], .chat-orden[data-evento="confirmada"] { --tono: var(--exito, #1f9d55); }
	.chat-orden[data-evento="entregada"] { --tono: #d98a00; }
	.chat-orden[data-evento="rechazada"], .chat-orden[data-evento="cancelada"], .chat-orden[data-evento="retirada"] { --tono: var(--peligro, #d64545); }
	.chat-orden.antigua { opacity: 0.8; }
	.chat-sistema { padding: var(--e1) var(--e4); line-height: 1.4; }
	.chat-msg { padding: 0.5rem 0.8rem 0.4rem; }
	.chat-msg .chat-meta { margin-inline-start: 1rem; }
	#chat-mensajes { gap: 0.3rem; }
	.chat-orden { margin-block: var(--e1); }
}

/* Notificaciones push: invitación en la app instalada */
@layer componentes {
	.push-invitacion { position: fixed; z-index: 60; inset-inline: var(--e3); bottom: calc(5.5rem + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); max-width: 34rem; margin-inline: auto; padding: var(--e3) var(--e4); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); box-shadow: var(--sombra-2); }
	.push-invitacion__texto { display: flex; flex: 1 1 14rem; flex-direction: column; gap: 0.15rem; font-size: var(--texto-s); color: var(--texto-suave); }
	.push-invitacion__texto strong { font-size: 1rem; color: var(--texto); }
	.push-invitacion__botones { display: flex; gap: var(--e2); }
	.push-estado { margin: 0 0 var(--e3); font-weight: 600; }
	#push-bloque [data-push-prefs] { margin-top: var(--e3); }
	#push-bloque [data-push-prefs] .btn { margin-top: var(--e3); }
}