/* ==========================================================================
   RedVivienda · components.css
   Piezas reutilizables: botones, formularios, buscador, filtros, tarjetas de
   anuncio, etiquetas, modales, avisos y paginación.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 40px;
  padding-inline: var(--s-5);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 650;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { color: inherit; }

.btn--primary { background: var(--c-brand-600); color: var(--c-white); }
.btn--primary:hover { background: var(--c-brand-700); color: var(--c-white); }

.btn--secondary { background: var(--c-white); border-color: var(--c-line); color: var(--c-ink-800); }
.btn--secondary:hover { border-color: var(--c-ink-300); background: var(--c-ink-050); }

.btn--ghost { color: var(--c-brand-700); background: var(--c-brand-050); }
.btn--ghost:hover { background: var(--c-brand-100); color: var(--c-brand-800); }

.btn--dark { background: var(--c-ink-900); color: var(--c-white); }
.btn--dark:hover { background: var(--c-ink-700); color: var(--c-white); }

.btn--onDark { background: var(--c-white); color: var(--c-brand-800); }
.btn--onDark:hover { background: var(--c-brand-050); color: var(--c-brand-900); }

.btn--outlineLight { border-color: rgba(255,255,255,.4); color: var(--c-white); }
.btn--outlineLight:hover { background: rgba(255,255,255,.12); color: var(--c-white); }

.btn--sm { height: 32px; padding-inline: var(--s-3); font-size: var(--fs-xs); }
.btn--lg { height: 48px; padding-inline: var(--s-6); font-size: var(--fs-md); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--c-brand-700);
}
.link-more:hover { text-decoration: underline; color: var(--c-brand-800); }

/* --------------------------------------------------------------------------
   Campos de formulario
   -------------------------------------------------------------------------- */
.field { display: block; }
.field__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--c-ink-600);
  margin-bottom: var(--s-2);
}
.field__control,
.input, .select, .textarea {
  width: 100%;
  height: 42px;
  padding-inline: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-white);
  font-size: var(--fs-sm);
  color: var(--c-ink-900);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.textarea { height: auto; padding-block: var(--s-3); resize: vertical; min-height: 92px; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--c-brand-500);
  box-shadow: 0 0 0 3px rgba(18,164,116,.16);
}
.input::placeholder, .textarea::placeholder { color: var(--c-ink-400); }

.select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: var(--s-8);
  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='%2367717A' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
}

.field-row { display: flex; align-items: center; gap: var(--s-2); }
.field-row span { color: var(--c-ink-300); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-4); }
.form-grid > .field--full { grid-column: 1 / -1; }

.check {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  padding-block: 3px;
  cursor: pointer;
}
.check input { width: 17px; height: 17px; accent-color: var(--c-brand-600); cursor: pointer; flex-shrink: 0; }
.check__count { margin-left: auto; font-size: var(--fs-xs); color: var(--c-ink-400); }

.range { width: 100%; accent-color: var(--c-brand-500); cursor: pointer; }
.range-head {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-ink-600);
  margin-bottom: var(--s-2);
}
.range-head b { color: var(--c-ink-900); }

/* --------------------------------------------------------------------------
   Buscador principal
   -------------------------------------------------------------------------- */
.searchbox {
  background: var(--c-white);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: visible;
  color: var(--c-ink-800);
}
.searchbox__tabs {
  display: flex;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-2) 0;
  border-bottom: 1px solid var(--c-line-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.searchbox__tabs::-webkit-scrollbar { display: none; }
.searchbox__tab {
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--c-ink-500);
  border-bottom: 3px solid transparent;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.searchbox__tab:hover { color: var(--c-ink-900); }
.searchbox__tab[aria-selected="true"] {
  color: var(--c-brand-700);
  border-bottom-color: var(--c-brand-600);
}
.searchbox__body {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) auto;
  gap: var(--s-3);
  padding: var(--s-4);
}
.searchbox__field { position: relative; }
.searchbox__control {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 48px;
  padding-inline: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-white);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.searchbox__control:focus-within {
  border-color: var(--c-brand-500);
  box-shadow: 0 0 0 3px rgba(18,164,116,.16);
}
.searchbox__control input,
.searchbox__control select {
  border: 0;
  background: none;
  width: 100%;
  height: 100%;
  font-size: var(--fs-md);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.searchbox__control select { cursor: pointer; }
.searchbox__icon { color: var(--c-brand-600); flex-shrink: 0; }
.searchbox__trailing { color: var(--c-ink-400); flex-shrink: 0; display: grid; place-items: center; }
.searchbox__submit { height: 48px; padding-inline: var(--s-6); }
.searchbox__foot {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  padding: 0 var(--s-4) var(--s-4);
}

/* Autocompletado */
.autocomplete {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: var(--z-dropdown);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  padding: var(--s-1);
  max-height: 300px;
  overflow-y: auto;
  display: none;
}
.autocomplete.is-open { display: block; }
.autocomplete__group {
  padding: var(--s-3) var(--s-3) var(--s-1);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink-400);
}
.autocomplete__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.autocomplete__item:hover,
.autocomplete__item.is-highlighted { background: var(--c-brand-050); }
.autocomplete__item mark { background: none; color: var(--c-brand-700); font-weight: 700; }
.autocomplete__meta { margin-left: auto; font-size: var(--fs-xs); color: var(--c-ink-400); }

/* Accesos rápidos del hero */
.shortcut {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 34px;
  padding-inline: var(--s-4);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  color: var(--c-white);
  font-size: var(--fs-sm);
  font-weight: 600;
  backdrop-filter: blur(6px);
  transition: background var(--t-fast);
}
.shortcut:hover { background: rgba(255,255,255,.26); color: var(--c-white); }

/* --------------------------------------------------------------------------
   Columna de filtros
   -------------------------------------------------------------------------- */
.filters__head {
  display: flex;
  align-items: center;
  margin-bottom: var(--s-4);
}
.filters__head h2 { font-size: var(--fs-md); }
.filters__reset { margin-left: auto; font-size: var(--fs-xs); font-weight: 650; color: var(--c-brand-700); }
.filters__head [data-close-filters] { display: none; }
.filters__reset:hover { text-decoration: underline; }

.filter-group { border-top: 1px solid var(--c-line-soft); padding-block: var(--s-4); }
.filter-group:first-of-type { border-top: 0; padding-top: 0; }
.filter-group__title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--c-ink-500);
  margin-bottom: var(--s-3);
}
.filter-group__body { display: grid; gap: var(--s-2); }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 32px;
  padding-inline: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-white);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-ink-700);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.chip:hover { border-color: var(--c-ink-300); }
.chip[aria-pressed="true"] {
  background: var(--c-brand-050);
  border-color: var(--c-brand-600);
  color: var(--c-brand-800);
}

.active-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.token {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 28px;
  padding-inline: var(--s-3);
  border-radius: var(--r-pill);
  background: var(--c-brand-050);
  border: 1px solid var(--c-brand-200);
  color: var(--c-brand-800);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.token button { color: var(--c-brand-700); display: grid; place-items: center; }
.token button:hover { color: var(--c-brand-900); }

/* --------------------------------------------------------------------------
   Barra de herramientas de resultados
   -------------------------------------------------------------------------- */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.toolbar__title { font-size: var(--fs-xl); }
.toolbar__count { font-size: var(--fs-sm); color: var(--c-ink-500); }

.select--inline { width: auto; height: 38px; font-size: var(--fs-xs); font-weight: 600; }

/* --------------------------------------------------------------------------
   Tarjeta de anuncio
   -------------------------------------------------------------------------- */
.listing-list { display: grid; gap: var(--s-4); }
.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: var(--s-5);
}

.listing {
  position: relative;
  display: flex;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow var(--t-base), border-color var(--t-base);
}
.listing:hover { box-shadow: var(--sh-md); border-color: var(--c-ink-200); }
.listing.is-selected { border-color: var(--c-brand-600); box-shadow: var(--sh-md); }

.listing__media {
  position: relative;
  flex: 0 0 292px;
  aspect-ratio: 4 / 3;
  background: var(--c-ink-100);
  overflow: hidden;
}
.listing__media img { width: 100%; height: 100%; object-fit: cover; }

.listing__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.listing__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--c-ink-900);
}
.listing__price small { font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink-500); }
.listing__drop {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--c-brand-700);
  background: var(--c-brand-050);
  padding: 2px var(--s-2);
  border-radius: var(--r-xs);
}

.listing__title { font-size: var(--fs-md); font-weight: 650; line-height: var(--lh-snug); }
.listing__title a:hover { color: var(--c-brand-700); text-decoration: underline; }
.listing__location { font-size: var(--fs-sm); color: var(--c-ink-500); }

.listing__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  font-size: var(--fs-sm);
  color: var(--c-ink-700);
}
.listing__specs b { font-weight: 700; color: var(--c-ink-900); }

.listing__excerpt {
  font-size: var(--fs-sm);
  color: var(--c-ink-500);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.listing__foot {
  margin-top: auto;
  padding-top: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.listing__actions { margin-left: auto; display: flex; gap: var(--s-2); }

.advertiser { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--c-ink-500); }
.advertiser__logo {
  width: 24px; height: 24px;
  border-radius: var(--r-sm);
  background: var(--c-brand-100);
  color: var(--c-brand-800);
  display: grid; place-items: center;
  font-size: var(--fs-3xs);
  font-weight: 800;
}

/* Variante en cuadrícula */
.listing-grid .listing { flex-direction: column; }
.listing-grid .listing__media { flex: none; width: 100%; }
.listing-grid .listing__body { padding: var(--s-4); }
.listing-grid .listing__excerpt { display: none; }

/* Galería embebida */
.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.94);
  color: var(--c-ink-800);
  display: grid; place-items: center;
  box-shadow: var(--sh-sm);
  opacity: 0;
  transition: opacity var(--t-base);
}
.listing:hover .gallery__nav, .gallery:hover .gallery__nav { opacity: 1; }
.gallery__nav--prev { left: var(--s-2); }
.gallery__nav--next { right: var(--s-2); }
.gallery__dots {
  position: absolute;
  bottom: var(--s-2);
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
}
.gallery__dots i {
  width: 5px; height: 5px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.6);
}
.gallery__dots i.is-active { width: 14px; background: var(--c-white); }
.gallery__counter {
  position: absolute;
  bottom: var(--s-2);
  right: var(--s-2);
  padding: 2px var(--s-2);
  border-radius: var(--r-xs);
  background: rgba(20,24,27,.66);
  color: var(--c-white);
  font-size: var(--fs-3xs);
  font-weight: 600;
}

/* Etiquetas sobre la foto */
.badge-stack {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  max-width: 78%;
}
.badge {
  padding: 3px var(--s-2);
  border-radius: var(--r-xs);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: .02em;
  background: rgba(20,24,27,.74);
  color: var(--c-white);
}
.badge--brand { background: var(--c-brand-600); }
.badge--warn { background: var(--c-warn); color: #2A1C00; }
.badge--accent { background: var(--c-accent); }

.fav-toggle {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.94);
  color: var(--c-ink-600);
  display: grid; place-items: center;
  box-shadow: var(--sh-sm);
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.fav-toggle:hover { color: var(--c-accent); transform: scale(1.06); }
.fav-toggle[aria-pressed="true"] { background: var(--c-accent); color: var(--c-white); }

/* Etiqueta de eficiencia energética */
.cee {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--r-xs);
  color: var(--c-white);
  font-size: var(--fs-2xs);
  font-weight: 800;
}
.cee--A { background: var(--c-cee-a); } .cee--B { background: var(--c-cee-b); }
.cee--C { background: var(--c-cee-c); color: #1C2400; } .cee--D { background: var(--c-cee-d); color: #2A2200; }
.cee--E { background: var(--c-cee-e); } .cee--F { background: var(--c-cee-f); } .cee--G { background: var(--c-cee-g); }

/* Estado vacío */
.empty-state {
  border: 1px dashed var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-16) var(--s-6);
  text-align: center;
  color: var(--c-ink-500);
}
.empty-state h3 { margin-bottom: var(--s-2); }

/* Variante compacta (anuncios similares de la ficha) */
.listing--compact { flex-direction: row; }
.listing--compact .listing__media { flex: 0 0 118px; aspect-ratio: 1 / 1; }
.listing--compact .listing__body { padding: var(--s-3); gap: var(--s-1); }
.listing--compact .listing__price { font-size: var(--fs-md); }
.listing--compact .listing__title { font-size: var(--fs-xs); }
.listing--compact .listing__excerpt,
.listing--compact .listing__foot,
.listing--compact .badge-stack { display: none; }

/* Paginación */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--s-2); margin-top: var(--s-8); }
.pagination button {
  min-width: 38px; height: 38px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink-700);
  padding-inline: var(--s-2);
}
.pagination button:hover { border-color: var(--c-ink-300); background: var(--c-ink-050); }
.pagination button[aria-current="page"] {
  background: var(--c-brand-600);
  border-color: var(--c-brand-600);
  color: var(--c-white);
}
.pagination button[disabled] { opacity: .45; pointer-events: none; }
/* --------------------------------------------------------------------------
   Paneles y bloques de contenido
   -------------------------------------------------------------------------- */
.panel {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.panel--dark {
  background: linear-gradient(155deg, var(--c-brand-800), var(--c-ink-900) 92%);
  border-color: transparent;
  color: rgba(255,255,255,.78);
}
.panel--dark h3, .panel--dark .metric__value { color: var(--c-white); }
.panel--dark .field__label, .panel--dark .range-head { color: rgba(255,255,255,.72); }
.panel--dark .range-head b { color: var(--c-white); }
.panel--dark .input, .panel--dark .select {
  background-color: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  color: var(--c-white);
}
.panel--dark .select option { color: var(--c-ink-900); background: var(--c-white); }
.panel__lead { color: var(--c-ink-500); font-size: var(--fs-sm); margin-top: var(--s-1); }
.panel--dark .panel__lead { color: rgba(255,255,255,.62); }

.metric {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--c-brand-050);
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.panel--dark .metric { background: rgba(255,255,255,.1); }
.metric__label { font-size: var(--fs-xs); color: var(--c-ink-500); font-weight: 600; }
.panel--dark .metric__label { color: rgba(255,255,255,.62); }
.metric__value { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -.03em; color: var(--c-brand-800); line-height: 1; }
.metric__value small { font-size: var(--fs-sm); font-weight: 650; }

.datalist { display: grid; gap: var(--s-2); margin-top: var(--s-4); font-size: var(--fs-sm); }
.datalist > div { display: flex; justify-content: space-between; gap: var(--s-4); color: var(--c-ink-600); }
.datalist b { color: var(--c-ink-900); font-weight: 650; }
.panel--dark .datalist > div { color: rgba(255,255,255,.72); }
.panel--dark .datalist b { color: var(--c-white); }

/* Tarjetas de acceso rápido / ventajas */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-4); }
.tile {
  display: block;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: box-shadow var(--t-base), border-color var(--t-base);
}
.tile:hover { box-shadow: var(--sh-md); border-color: var(--c-ink-200); color: inherit; }
.tile__icon {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--c-brand-050);
  color: var(--c-brand-700);
  display: grid; place-items: center;
  margin-bottom: var(--s-3);
}
.tile h3 { font-size: var(--fs-md); margin-bottom: var(--s-1); }
.tile p { font-size: var(--fs-sm); color: var(--c-ink-500); }

/* Mosaico de provincias */
.province-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: var(--s-3); }
.province {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 124px;
  padding: var(--s-3);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--c-white);
  background: var(--c-ink-700) center / cover no-repeat;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.province::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,24,27,.10) 20%, rgba(20,24,27,.86));
}
.province:hover { transform: translateY(-2px); box-shadow: var(--sh-md); color: var(--c-white); }
.province__label { position: relative; z-index: 2; text-align: left; }
.province__label b { display: block; font-size: var(--fs-md); font-weight: 700; }
.province__label span { font-size: var(--fs-2xs); opacity: .88; }

/* Banda promocional */
.promo {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: var(--s-10);
  background: linear-gradient(140deg, var(--c-brand-900), var(--c-brand-700) 58%, var(--c-brand-600));
  color: var(--c-white);
}
.promo::before,
.promo::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.promo::before { width: 320px; height: 320px; right: -80px; top: -110px; }
.promo::after { width: 240px; height: 240px; right: 90px; bottom: -140px; }
.promo__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-8); align-items: center; }
.promo h2 { color: var(--c-white); font-size: var(--fs-3xl); }
.promo p { color: rgba(255,255,255,.78); margin-top: var(--s-3); max-width: 52ch; }
.promo__actions { display: flex; gap: var(--s-3); margin-top: var(--s-5); flex-wrap: wrap; }
.promo__stats { display: grid; gap: var(--s-3); }
.promo__stat {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}
.promo__stat b { display: block; font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.03em; }
.promo__stat span { font-size: var(--fs-xs); color: rgba(255,255,255,.72); }

/* --------------------------------------------------------------------------
   Modales y avisos
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(20,24,27,.56);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
}
.modal-overlay.is-open { display: flex; }
.modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--c-white);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
}
.modal__close {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  width: 34px; height: 34px;
  border-radius: var(--r-pill);
  background: var(--c-ink-050);
  color: var(--c-ink-700);
  display: grid; place-items: center;
  z-index: 2;
}
.modal__close:hover { background: var(--c-ink-100); }
.modal__body { padding: var(--s-6); }
.modal__title { font-size: var(--fs-xl); margin-bottom: var(--s-2); padding-right: var(--s-8); }
.modal__lead { color: var(--c-ink-500); font-size: var(--fs-sm); margin-bottom: var(--s-5); }

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--s-6);
  transform: translate(-50%, 16px);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md);
  background: var(--c-ink-900);
  color: var(--c-white);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--sh-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.notice {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--c-info-soft);
  color: var(--c-ink-700);
  font-size: var(--fs-sm);
}
.notice svg { color: var(--c-info); flex-shrink: 0; }

/* ==========================================================================
   Columna de resultados: alerta lateral, orden por chips y retoques de la
   tarjeta de anuncio (antes vivían en zonas.css).
   ========================================================================== */

.sidebar-alerta {
  background: #EDF463;
  border-radius: var(--r-md);
  padding: var(--s-4);
  text-align: center;
  margin-bottom: var(--s-4);
}
.sidebar-alerta p {
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--c-ink-900);
  margin-bottom: var(--s-3);
}
.sidebar-alerta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  background: #B62682;
  color: var(--c-white);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 650;
}
.sidebar-alerta__btn:hover { background: #9C1F6F; }

.orden {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.orden__etiqueta { font-size: var(--fs-sm); color: var(--c-ink-600); }
.orden__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding-inline: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-white);
  font-size: var(--fs-sm);
  color: var(--c-ink-800);
}
.orden__chip:hover { border-color: var(--c-ink-400); }
.orden__chip[aria-pressed="true"] {
  color: #B62682;
  border-color: #B62682;
  font-weight: 650;
  background: #FFF6FB;
}

.orden__mas { position: relative; }
.orden__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 230px;
  background: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  padding: 6px;
  z-index: var(--z-dropdown);
  display: block;
}
.orden__panel button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--c-ink-800);
}
.orden__panel button:hover { background: var(--c-ink-050); }

.listing__title { font-size: var(--fs-lg); }
.listing__title a { color: #145BC7; }
.listing__title a:hover { color: #0F49A5; }
.listing__price { font-size: var(--fs-2xl); }

/* Fila con icono (lista de alertas guardadas) */
.feature-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  padding-block: var(--s-1);
}
.feature-item svg { color: var(--c-brand-600); flex-shrink: 0; }
.feature-item.is-absent { color: var(--c-ink-400); }
.feature-item.is-absent svg { color: var(--c-ink-300); }