/* ======================================================
   ÁLVORA — UI CORE  v2.1
   Variables separadas por zona para cambios rápidos.
====================================================== */

:root {

  /* FUENTES */
  --alv-font-primary:   'Poppins', sans-serif;
  --alv-font-secondary: 'Playfair Display', serif;

  /* Alias de compatibilidad — usado por filters.css (noUiSlider) */
  --alv-color-dark:  #1E293B;
  --alv-color-grey:  #58534c;

  /* ── ZONA 1: MENÚ SUPERIOR ─────────────────────────
     Afecta a: Propiedades, Servicios, Arquitectura,
               Blog, Nosotros, Contacto
  ─────────────────────────────────────────────────── */
  --alv-menu-color:        #1E293B;
  --alv-menu-size:         13px;
  --alv-menu-weight:       500;
  --alv-menu-color-hover:  #1E293B;

  /* ── ZONA 2: FILTROS ────────────────────────────────
     Afecta a: Modalidad, Tipo inmueble, Zonas,
               Dormitorios, sliders superficie/precio
  ─────────────────────────────────────────────────── */
  --alv-filter-color:      #1E293B;
  --alv-filter-size:       12px;
  --alv-filter-weight:     400;

  /* ── ZONA 3: TOOLBAR ────────────────────────────────
     Afecta a: buscador, contador "12 de 100",
               Favoritos, Ordenar por precio,
               Mostrar como
  ─────────────────────────────────────────────────── */
  --alv-toolbar-color:     #1E293B;
  --alv-toolbar-size:      12px;
  --alv-toolbar-weight:    400;
  --alv-toolbar-ph-color:  #1E293B;  /* placeholder buscador */

  /* ── ZONA 4: CARDS ──────────────────────────────────
     Afecta a: título, meta, precio, zona, referencia
  ─────────────────────────────────────────────────── */
  --alv-card-title-color:  #1E293B;
  --alv-card-title-size:   16px;
  --alv-card-meta-color:   #1E293B;
  --alv-card-meta-size:    16px;
  --alv-card-price-color:  #1E293B;
  --alv-card-price-size:   18px;
  --alv-card-zone-color:   #1E293B;
  --alv-card-zone-size:    13px;
  --alv-card-ref-color:    #1E293B;
  --alv-card-ref-size:     14px;
}

/* ======================================================
   RESET — anular alvora-base.css dentro de la UI
   (base pone font-size:15px y border-radius:30px
    a todos los button e input sin clase)
====================================================== */
body .alv-toolbar button,
body .alv-toolbar .alv-btn,
body .alv-filters button,
body .alv-zonas-footer button {
  border-radius: 0;
  background: none;
  border: none;
  padding: 0;
  font-size: var(--alv-toolbar-size);
  color: var(--alv-toolbar-color);
  font-family: var(--alv-font-primary);
  font-weight: var(--alv-toolbar-weight);
  transition: opacity .15s ease;
}
body .alv-toolbar button:hover,
body .alv-toolbar .alv-btn:hover {
  background: none;
  opacity: .7;
}
body .alv-filters input:not([type="hidden"]),
body .alv-filters select,
body .alv-toolbar input {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-size: var(--alv-filter-size);
  font-family: var(--alv-font-primary);
  font-weight: var(--alv-filter-weight);
  color: var(--alv-filter-color);
}
body .alv-filters input:not([type="hidden"]):focus,
body .alv-filters select:focus,
body .alv-toolbar input:focus {
  outline: none;
  border-color: transparent;
}

/* ======================================================
   ZONA 1 · MENÚ SUPERIOR
====================================================== */
body .alv-menu-left > ul > li > a,
body .alv-menu-right > ul > li > a {
  font-family: var(--alv-font-primary);
  font-size: var(--alv-menu-size);
  font-weight: var(--alv-menu-weight);
  color: var(--alv-menu-color) !important;
}
body .alv-menu-left > ul > li > a:hover,
body .alv-menu-right > ul > li > a:hover {
  color: var(--alv-menu-color-hover) !important;
  opacity: .7;
}
/* Estilo de submenú (contenedor y enlaces) gestionado en header.css.
   Se retiran aquí las reglas antiguas (border-radius 10px, sombra pesada)
   que quedaban duplicadas y ganaban por especificidad sobre header.css. */

/* ======================================================
   ZONA 2 · FILTROS
====================================================== */
body .alv-filters,
body .alv-filter-select,
body .alv-zonas-btn,
body .alv-filter-col--slider .alv-range-label {
  font-family: var(--alv-font-primary);
  font-size: var(--alv-filter-size);
  font-weight: var(--alv-filter-weight);
  color: var(--alv-filter-color);
}

/* ======================================================
   ZONA 3 · TOOLBAR
====================================================== */

/* Layout */
.alv-toolbar         { gap: 28px; position: relative; }
.alv-toolbar-right   { gap: 22px; }
.alv-toolbar-center  {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
}

/* Buscador */
body .alv-toolbar-search input {
  font-family: var(--alv-font-primary);
  font-size: var(--alv-toolbar-size);
  font-weight: var(--alv-toolbar-weight);
  color: var(--alv-toolbar-color);
}
body .alv-toolbar-search input::placeholder {
  color: var(--alv-toolbar-ph-color);
}

/* Lupa */
.alv-search-icon {
  font-size: 0;
  width: 14px; height: 14px;
  display: inline-block;
  flex-shrink: 0;
  background-color: var(--alv-toolbar-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
}

/* Contador */
.alv-total-count {
  font-family: var(--alv-font-primary);
  font-size: var(--alv-toolbar-size);
  font-weight: var(--alv-toolbar-weight);
  color: var(--alv-toolbar-color);
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Favoritos */
/* gap reducido de 8px a 5px (portátil 13") — pedido de Gonzalo: el
   corazón quedaba despegado de la palabra "Favoritos". Los otros
   botones del toolbar (sort/sort-recent/view) usan el mismo icono de
   14px + hueco, así que se ajustan igual más abajo para que los 4
   queden consistentes entre sí. */
body .alv-btn--favs {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--alv-toolbar-size);
  font-weight: var(--alv-toolbar-weight);
  color: var(--alv-toolbar-color);
}
body .alv-btn--favs::before {
  content: '';
  width: 14px; height: 14px;
  display: inline-block;
  background-color: var(--alv-toolbar-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
}
body .alv-btn--favs.is-active::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='1.6'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='1.6'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");
}

/* Ordenar por precio */
body .alv-btn--sort {
  position: relative;
  padding-left: 19px !important;
  font-size: var(--alv-toolbar-size);
  font-weight: var(--alv-toolbar-weight);
  color: var(--alv-toolbar-color);
}
body .alv-btn--sort::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  background-color: var(--alv-toolbar-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'%3E%3Cpath d='M8 4v10'/%3E%3Cpath d='M5 7l3-3 3 3'/%3E%3Cpath d='M16 20V10'/%3E%3Cpath d='M13 17l3 3 3-3'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'%3E%3Cpath d='M8 4v10'/%3E%3Cpath d='M5 7l3-3 3 3'/%3E%3Cpath d='M16 20V10'/%3E%3Cpath d='M13 17l3 3 3-3'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
}
body .alv-btn--sort.is-asc::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M6 11l6-6 6 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M6 11l6-6 6 6'/%3E%3C/svg%3E");
}
body .alv-btn--sort.is-desc::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M6 13l6 6 6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M6 13l6 6 6-6'/%3E%3C/svg%3E");
}

/* Más recientes */
body .alv-btn--sort-recent {
  position: relative;
  padding-left: 19px !important;
  font-size: var(--alv-toolbar-size);
  font-weight: var(--alv-toolbar-weight);
  color: var(--alv-toolbar-color);
}
body .alv-btn--sort-recent::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  background-color: var(--alv-toolbar-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
}
body .alv-btn--sort-recent.is-active::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E");
}

/* Mostrar como */
body .alv-btn--view {
  position: relative;
  padding-left: 19px !important;
  font-size: var(--alv-toolbar-size);
  font-weight: var(--alv-toolbar-weight);
  color: var(--alv-toolbar-color);
}
body .alv-btn--view::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  background-color: var(--alv-toolbar-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
}

/* Hover reset global */
.alv-toolbar button:hover {
  background: none !important;
  border-radius: 0 !important;
}

/* ======================================================
   ZONA 4 · CARDS
====================================================== */
body .alv-card__title {
  font-family: var(--alv-font-secondary);
  font-size: var(--alv-card-title-size);
  font-weight: 500;
  color: var(--alv-card-title-color);
}
body .alv-card__meta {
  font-family: var(--alv-font-primary);
  font-size: var(--alv-card-meta-size);
  font-weight: 400;
  color: var(--alv-card-meta-color);
}
body .alv-card__price {
  font-family: var(--alv-font-primary);
  font-size: var(--alv-card-price-size);
  font-weight: 700;
  color: var(--alv-card-price-color);
}
body .alv-card__zone {
  font-family: var(--alv-font-primary);
  font-size: var(--alv-card-zone-size);
  font-weight: 600;
  color: var(--alv-card-zone-color);
  text-transform: uppercase;
  letter-spacing: .04em;
}
body .alv-ref {
  font-family: var(--alv-font-primary);
  font-size: var(--alv-card-ref-size);
  font-weight: 400;
  color: var(--alv-card-ref-color);
}

/* Pill tipología */
.alv-pill {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
  font-family: var(--alv-font-primary);
  font-size: 11px;
}
.alv-card:hover .alv-pill { opacity: 1; transform: translateY(0); }

/* ======================================================
   RESPONSIVE
====================================================== */
@media (max-width: 768px) {

  :root { --alv-card-meta-size: 14px; }

  /* Toolbar: columna de 3 filas */
  .alv-toolbar {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  /* Fila 1 — buscador */
  .alv-toolbar-left {
    width: 100% !important;
    min-width: 0 !important;
    padding: 11px 16px !important;
    border-bottom: 0.5px solid #e8e4de;
    box-sizing: border-box;
  }
  .alv-toolbar-search {
    width: 100% !important;
  }
  /* Input: ancho completo, sin el 200/260px fijo */
  body .alv-toolbar-search input,
  body .alv-toolbar-search input:focus {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Fila 2 — contador centrado */
  .alv-toolbar-center {
    position: static !important;
    transform: none !important;
    order: unset !important;
    width: 100% !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 9px 16px !important;
    border-bottom: 0.5px solid #e8e4de;
    display: flex !important;
    pointer-events: auto !important;
  }

  /* Fila 3 — botones distribuidos de margen a margen */
  .alv-toolbar-right {
    width: 100% !important;
    gap: 0 !important;
    padding: 9px 16px !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  .alv-toolbar-right .alv-btn {
    flex: none !important;
    white-space: nowrap !important;
    text-align: left !important;
    padding-left: 0 !important;
  }

  /* "Mostrar como" (vista lista/mosaico) se oculta en móvil: la vista
     lista está pensada para pantallas anchas y no funciona bien en
     estrecho, así que en móvil solo tiene sentido el mosaico y el
     botón para alternar sobra. Con solo 3 botones (Favoritos /
     Ordenar por precio / Más recientes) el texto completo ya cabe
     sin recortarse — no hace falta el icono-solo que se probó antes. */
  .alv-toolbar-right .alv-btn--view {
    display: none !important;
  }

  /* Iconos sort/view/sort-recent: inline en móvil.
     "Más recientes" (--sort-recent) se había quedado fuera de este
     reset: su icono seguía en position:absolute;left:0 mientras que
     .alv-toolbar-right .alv-btn (más abajo) le quita el padding-left
     que le hacía sitio en desktop → icono superpuesto sobre el texto
     (bug detectado en QA móvil, listado de propiedades). */
  body .alv-btn--sort,
  body .alv-btn--sort-recent,
  body .alv-btn--view {
    padding-left: 0 !important;
  }
  body .alv-btn--sort::before,
  body .alv-btn--sort-recent::before,
  body .alv-btn--view::before {
    position: static !important;
    transform: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 4px !important;
    top: auto !important;
  }
}