/* Estilos propios del sitio sobre quintear.css (DESIGN-SYSTEM.md). Solo usan los tokens del sistema;
   el sitio público ya no carga Bootstrap. Referencias de UX: Airbnb (pines con precio en el mapa),
   Zillow (lista + mapa) y Zonaprop/Argenprop (filtros). */

/* ---- Base ---- */
/* Más ancho que el del sistema (1200px) para que el listado entre con filtros + 3 tarjetas por fila. */
:root {
  --q-ancho-max: 1440px;
}

/* Sin el reboot de Bootstrap: los controles de formulario heredan la tipografía (chips, botones, inputs). */
button,
input,
select,
textarea {
  font: inherit;
}

/* Pie pegado abajo aunque la página sea corta. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

/* ---- Vista mapa: lista + mapa lado a lado desde 992 px; en el celular se alternan ---- */
.vista-mapa-mapa {
  position: relative;
}

.mapa {
  height: calc(100vh - 13rem);
  min-height: 420px;
  border-radius: var(--q-r-card);
  border: 1px solid var(--q-linea);
  z-index: 0; /* los paneles de Leaflet no pasan por encima del encabezado fijo */
}

.mapa-nota {
  margin: var(--q-s-2) 0 0;
}

.vista-mapa[data-modo="mapa"] .vista-mapa-lista,
.vista-mapa[data-modo="lista"] .vista-mapa-mapa {
  display: none;
}

/* Botón flotante para alternar en el celular: flota, así que lleva la única sombra permitida. */
.boton-alternar-vista {
  position: fixed;
  left: 50%;
  bottom: var(--q-s-5);
  z-index: 30;
  min-width: 160px;
  transform: translateX(-50%);
  border-radius: var(--q-r-pill);
  box-shadow: var(--q-sombra-flotante);
}

.vista-mapa[data-modo="mapa"] .cuando-lista,
.vista-mapa[data-modo="lista"] .cuando-mapa {
  display: none;
}

@media (min-width: 992px) {
  .vista-mapa {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--q-s-6);
    align-items: start;
  }

  .vista-mapa[data-modo] .vista-mapa-lista,
  .vista-mapa[data-modo] .vista-mapa-mapa {
    display: block;
  }

  .vista-mapa-mapa {
    position: sticky;
    top: 88px;
  }

  .boton-alternar-vista {
    display: none;
  }
}

@media (min-width: 1400px) {
  .vista-mapa {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Pines con precio (estilo Airbnb). Leaflet los posiciona; el envoltorio no debe tener tamaño propio. */
.pin-precio-envoltorio {
  background: none;
  border: 0;
}

.pin-precio {
  display: inline-block;
  transform: translate(-50%, -50%);
  padding: 0.25rem 0.6rem;
  white-space: nowrap;
  border-radius: 999px;
  font: 700 var(--q-text-sm)/1.2 var(--q-font-body);
  color: var(--q-tinta);
  background: var(--q-blanco);
  /* Borde transparente: el área táctil llega a 44 px sin cambiar el pin que se ve (§10).
     drop-shadow sigue la forma pintada, no el borde invisible. */
  border: 11px solid transparent;
  background-clip: padding-box;
  filter: drop-shadow(0 2px 4px rgba(16, 48, 59, 0.3));
  transition: transform 0.12s ease, background 0.12s ease;
}

.pin-precio-envoltorio:hover .pin-precio,
.pin-precio-envoltorio.activo .pin-precio {
  color: #fff;
  background: var(--q-pileta-500);
  transform: translate(-50%, -50%) scale(1.1);
}

.popup-mapa .leaflet-popup-content-wrapper {
  padding: 0;
  overflow: hidden;
  border-radius: var(--q-r-card);
}

.popup-mapa .leaflet-popup-content {
  margin: 0;
  width: auto !important;
}

.popup-quinta {
  display: block;
  color: var(--q-tinta) !important;
  text-decoration: none;
  font-family: var(--q-font-body);
}

.popup-quinta img,
.popup-sin-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #e9ecef;
  color: #adb5bd;
  font-size: 2rem;
}

.popup-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.8rem 0.75rem;
}

.texto-largo {
  white-space: pre-line;
}

/* Campo trampa de los formularios (ver Antispam.cs). */
.campo-trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Grupo de quintas cercanas en el mapa (markercluster): mismo pin, en color de marca. */
.pin-precio.pin-grupo {
  color: #fff;
  background: var(--q-pileta-500);
}

.pin-precio-envoltorio:hover .pin-precio.pin-grupo,
.pin-precio-envoltorio.activo .pin-precio.pin-grupo {
  background: var(--q-pileta-700);
}

/* =========================================================================
   Extensiones de Quintear para este sitio. Solo usan tokens de quintear.css;
   siguen la nomenclatura de sus componentes (q-bloque__elemento).
   ========================================================================= */

/* ---- Encabezado (DESIGN-SYSTEM.md §8) ---- */
.q-saltar {
  position: absolute;
  left: var(--q-s-4);
  top: -100px;
  z-index: 40;
  padding: var(--q-s-3) var(--q-s-4);
  border-radius: var(--q-r-input);
  background: var(--q-blanco);
  color: var(--q-pileta-500);
  font-weight: 700;
}

.q-saltar:focus {
  top: var(--q-s-2);
}

.q-main {
  padding-block: var(--q-s-6) var(--q-s-12);
}

main:focus {
  outline: none;
}

.q-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--q-s-3);
  border-radius: var(--q-r-input);
  color: var(--q-tinta);
  font-weight: 700;
  text-decoration: none;
}

.q-nav__link:hover,
.q-nav__link[aria-current="page"] {
  color: var(--q-pileta-500);
  background: var(--q-pileta-50);
}

.q-header__menu .q-icon {
  width: 24px;
  height: 24px;
}

.q-menu-movil {
  border-top: 1px solid var(--q-linea);
  padding-block: var(--q-s-2) var(--q-s-4);
}

.q-menu-movil__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--q-tinta);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--q-linea);
}

.q-menu-movil .q-btn {
  margin-top: var(--q-s-4);
}

@media (min-width: 900px) {
  .q-menu-movil {
    display: none;
  }
}

/* ---- Pie ---- */
.q-logo--blanco .q-logo__texto {
  color: var(--q-blanco);
}

.q-footer__grilla {
  display: grid;
  gap: var(--q-s-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.q-footer__bajada {
  margin-top: var(--q-s-4);
}

.q-footer__titulo {
  font-size: var(--q-text-md);
  color: var(--q-blanco);
  margin-bottom: var(--q-s-3);
}

.q-footer__lista {
  list-style: none;
  margin: 0 0 var(--q-s-6);
  padding: 0;
}

.q-footer__lista li {
  margin-bottom: var(--q-s-2);
}

.q-footer__lista a {
  display: inline-block;
  padding-block: var(--q-s-1);
}

.q-footer__legal {
  margin: var(--q-s-8) 0 0;
  padding-top: var(--q-s-6);
  border-top: 1px solid var(--q-tinta-suave);
  font-size: var(--q-text-xs);
}

/* ---- Aviso de cookies: fijo abajo, no empuja el contenido (sin CLS). Flota: lleva la única sombra. ---- */
.q-aviso-cookies {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 35;
  background: var(--q-blanco);
  box-shadow: var(--q-sombra-flotante);
}

.q-aviso-cookies__inner {
  display: flex;
  flex-direction: column;
  gap: var(--q-s-3);
  padding-block: var(--q-s-3);
  font-size: var(--q-text-sm);
}

.q-aviso-cookies__inner p {
  margin: 0;
}

@media (min-width: 768px) {
  .q-aviso-cookies__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Corrección de quintear.css v1.0: ahí `.q-header__menu { display: inline-flex }` está declarado después
   del media query que lo oculta, así que el botón de menú también aparecía en escritorio. */
@media (min-width: 900px) {
  .q-header__menu {
    display: none;
  }
}

/* ---- Card de quinta (complementos de q-card, DESIGN-SYSTEM.md §7.4) ---- */
.q-card__foto--vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-pileta-500);
}

.q-card__titulo {
  margin: 0;
}

.q-card .q-precio {
  margin-top: var(--q-s-1);
}

.q-precio__valor--consultar {
  font-size: var(--q-text-md);
}

.q-card__amenities .q-icon {
  width: 24px;
  height: 24px;
}

/* Vista mapa: la card con el mouse encima marca su pin (mapa.js); acá, la card misma. */
.q-card:focus-within {
  border-color: var(--q-pileta-500);
}

/* ---- Migas de pan ---- */
.q-migas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--q-s-1) var(--q-s-2);
  margin: 0 0 var(--q-s-4);
  padding: 0;
  list-style: none;
  font-size: var(--q-text-sm);
  color: var(--q-tinta-suave);
}

.q-migas li + li::before {
  content: "/";
  margin-right: var(--q-s-2);
  color: var(--q-linea-fuerte);
}

/* ---- Celular / escritorio (mismo corte que la ficha en quintear.css) ---- */
@media (min-width: 960px) {
  .q-solo-movil {
    display: none !important;
  }
}

@media (max-width: 959.98px) {
  .q-solo-escritorio {
    display: none !important;
  }
}

/* ---- Ficha (DESIGN-SYSTEM.md §8) ---- */
.q-ficha__aviso {
  margin-bottom: var(--q-s-6);
}

.q-ficha__aviso p,
.q-aviso p {
  margin: 0;
}

.q-ficha__principal {
  min-width: 0;
}

/* Cada foto va dentro de un link al original: la grilla se arma con los <a>, no con los <img>. */
.q-galeria > a {
  display: block;
}

.q-galeria > a:first-child {
  grid-column: span 4;
}

.q-galeria > a:not(:first-child) img,
.q-galeria--resto > a:first-child img {
  aspect-ratio: 4 / 3;
}

.q-galeria--resto > a:first-child {
  grid-column: auto;
}

.q-galeria img {
  background: var(--q-pileta-50);
}

.q-galeria__mas {
  margin-top: var(--q-s-2);
}

.q-galeria__mas > summary {
  list-style: none;
}

.q-galeria__mas > summary::-webkit-details-marker {
  display: none;
}

.q-galeria__mas[open] > summary {
  margin-bottom: var(--q-s-2);
}

.q-ficha__seccion {
  margin-top: var(--q-s-8);
}

.q-ficha__sello {
  margin: 0 0 var(--q-s-3);
}

.q-ficha__titulo {
  font-size: var(--q-text-2xl);
}

@media (min-width: 768px) {
  .q-ficha__titulo {
    font-size: var(--q-text-3xl);
  }
}

.q-ficha__meta {
  display: flex;
  flex-direction: column;
  gap: var(--q-s-2);
  color: var(--q-tinta-suave);
}

.q-ficha__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--q-s-2);
}

.q-ficha__validacion {
  margin-top: var(--q-s-4);
  font-size: var(--q-text-sm);
}

.q-ficha__validacion summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--q-pileta-500);
  font-weight: 700;
  cursor: pointer;
}

.q-ficha__subtitulo {
  font-size: var(--q-text-xl);
}

.q-precios {
  margin: 0;
}

.q-precios > div {
  display: flex;
  justify-content: space-between;
  gap: var(--q-s-4);
  padding-block: var(--q-s-2);
  border-bottom: 1px solid var(--q-linea);
}

.q-precios dt {
  font-weight: 400;
  color: var(--q-tinta-suave);
}

.q-precios dd {
  margin: 0;
  font-size: var(--q-text-lg);
  font-weight: 700;
}

.q-contacto .q-precio__fecha,
.q-contacto .q-help {
  margin: 0;
}

.q-resenas__resumen,
.q-resena__puntaje {
  display: flex;
  align-items: center;
  gap: var(--q-s-1);
  font-weight: 700;
}

.q-resena {
  padding-block: var(--q-s-4);
  border-bottom: 1px solid var(--q-linea);
}

.q-resena p {
  margin-bottom: var(--q-s-1);
}

.q-help {
  font-size: var(--q-text-xs);
  color: var(--q-tinta-suave);
}

.q-badge--pronto {
  margin-left: var(--q-s-1);
}

/* ---- Modal de seña protegida (contenido de q-modal, DESIGN-SYSTEM.md §7.8) ---- */
.q-modal {
  position: relative;
}

.q-modal__cerrar {
  position: absolute;
  top: var(--q-s-3);
  right: var(--q-s-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: var(--q-r-input);
  background: transparent;
  color: var(--q-tinta);
  cursor: pointer;
}

.q-modal__cerrar:hover {
  background: var(--q-pileta-50);
}

.q-modal__cerrar .q-icon {
  width: 24px;
  height: 24px;
}

.q-modal__titulo {
  font-size: var(--q-text-2xl);
  padding-right: var(--q-s-10);
}

.q-modal__acciones {
  display: flex;
  flex-direction: column;
  gap: var(--q-s-3);
}

/* ---- Base ---- */
/* quintear.css le da display a .q-btn, que le gana a [hidden]: el atributo tiene que ocultar siempre. */
[hidden] {
  display: none !important;
}

.q-titulo-pagina {
  font-size: var(--q-text-2xl);
}

@media (min-width: 768px) {
  .q-titulo-pagina {
    font-size: var(--q-text-3xl);
  }
}

.q-bajada {
  color: var(--q-tinta-suave);
}

/* ---- Páginas legales (/terminos, /privacidad) ---- */
/* "Dejá tu reseña" al pie de las reseñas de la ficha. */
.q-resenas__dejar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--q-s-3);
  margin-top: var(--q-s-6);
}

.q-legal {
  max-width: var(--q-ancho-texto);
  padding-bottom: var(--q-s-12);
}

.q-legal h2 {
  font-size: var(--q-text-xl);
  margin: var(--q-s-10) 0 var(--q-s-3);
}

.q-legal ul {
  margin: 0 0 var(--q-s-4);
  padding-left: var(--q-s-5);
}

.q-legal li + li {
  margin-top: var(--q-s-2);
}

.q-legal__indice {
  margin-top: var(--q-s-6);
  padding: var(--q-s-4) var(--q-s-5);
  border-radius: var(--q-r-input);
  background: var(--q-arena);
}

.q-legal__indice ol {
  margin: var(--q-s-2) 0 0;
  padding-left: var(--q-s-5);
  columns: 2 220px;
}

.q-ancho-completo {
  padding: var(--q-s-4) var(--q-s-5) var(--q-s-12);
}

@media (min-width: 768px) {
  .q-ancho-completo {
    padding-inline: var(--q-s-8);
  }
}

/* ---- Listado y filtros (DESIGN-SYSTEM.md §8) ---- */
.q-listado {
  display: grid;
  gap: var(--q-s-8);
}

@media (min-width: 900px) {
  .q-listado:not(.q-listado--mapa) {
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
  }
}

/* Como mucho 3 tarjetas por fila (con el contenedor más ancho, auto-fill pondría 4 en la home).
   En el listado la tarjeta mínima baja a 260px para que entren 3 desde ~1200px de pantalla. */
.q-grid-quintas {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(300px, (100% - 2 * var(--q-s-6)) / 3)), 1fr));
}

.q-listado .q-grid-quintas {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(260px, (100% - 2 * var(--q-s-6)) / 3)), 1fr));
}

.q-filtros__titulo {
  font-size: var(--q-text-xl);
}

.q-filtros .q-field:last-of-type {
  margin-bottom: var(--q-s-6);
}

.q-filtros .q-btn--texto {
  margin-top: var(--q-s-2);
}

/* Con JavaScript, en el celular y en la vista mapa los filtros se abren en el diálogo. */
@media (max-width: 899.98px) {
  .js .q-listado__filtros {
    display: none;
  }
}

.js .q-listado--mapa .q-listado__filtros {
  display: none;
}

@media (min-width: 900px) {
  .q-listado:not(.q-listado--mapa) .q-listado__abrir-filtros {
    display: none !important;
  }
}

.q-listado__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--q-s-3);
  margin-bottom: var(--q-s-5);
}

.q-selector-vista {
  display: inline-flex;
  margin-left: auto;
  padding: var(--q-s-1);
  border: 1.5px solid var(--q-linea-fuerte);
  border-radius: var(--q-r-pill);
}

.q-selector-vista a {
  display: inline-flex;
  align-items: center;
  gap: var(--q-s-2);
  min-height: 40px;
  padding: 0 var(--q-s-4);
  border-radius: var(--q-r-pill);
  color: var(--q-tinta);
  font-size: var(--q-text-sm);
  font-weight: 700;
  text-decoration: none;
}

.q-selector-vista a[aria-current="true"] {
  background: var(--q-pileta-500);
  color: var(--q-blanco);
}

.q-paginacion {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--q-s-2);
  margin-top: var(--q-s-10);
}

.q-paginacion a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1.5px solid var(--q-linea-fuerte);
  border-radius: var(--q-r-input);
  color: var(--q-tinta);
  font-weight: 700;
  text-decoration: none;
}

.q-paginacion a:hover {
  border-color: var(--q-pileta-500);
}

.q-paginacion a[aria-current="page"] {
  background: var(--q-pileta-500);
  border-color: var(--q-pileta-500);
  color: var(--q-blanco);
}

/* Diálogo de filtros: pantalla completa en el celular, ventana común en escritorio (vista mapa). */
.q-modal--pantalla {
  width: 100%;
  max-height: 90vh;
  padding: var(--q-s-6);
  overflow-y: auto;
}

@media (max-width: 899.98px) {
  .q-modal--pantalla {
    max-width: none;
    width: 100vw;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }
}

.q-modal__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--q-s-4);
  margin-bottom: var(--q-s-4);
}

.q-modal__encabezado .q-modal__titulo {
  margin: 0;
  padding: 0;
}

.q-modal__encabezado .q-modal__cerrar {
  position: static;
}

.q-modal .q-filtros__titulo {
  display: none;
}

/* El botón "Ver N quintas" queda siempre a mano abajo del diálogo. */
.q-modal [data-ver-cantidad] {
  position: sticky;
  bottom: 0;
}

/* ---- Formularios (DESIGN-SYSTEM.md §7.6) ---- */
.q-formulario {
  max-width: 640px;
}

.q-formulario--ancho {
  max-width: 860px;
}

.q-formulario > .q-aviso,
.q-confirmacion > .q-aviso {
  margin-bottom: var(--q-s-5);
}

.q-opcional {
  font-weight: 400;
  color: var(--q-tinta-suave);
}

/* Mismo efecto que .q-field--error de quintear.css, a partir de lo que pone el tag helper de errores. */
.q-field:has([aria-invalid="true"]) :is(.q-input, .q-select, .q-textarea) {
  border-color: var(--q-error);
}

/* La flecha nativa queda pegada al borde y no respeta el padding: se reemplaza por el chevron
   de icons.svg (color --q-tinta-suave), a la misma distancia del borde que el texto. */
.q-select {
  appearance: none;
  padding-right: calc(var(--q-s-4) + 20px + var(--q-s-2));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5F66' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--q-s-4) center;
  background-size: 20px;
}

.q-field .q-error-msg .q-icon {
  flex-shrink: 0;
}

.q-resumen-errores {
  margin-bottom: var(--q-s-6);
}

.q-resumen-errores ul {
  margin: var(--q-s-1) 0 0;
  padding-left: var(--q-s-5);
}

.q-resumen-errores:focus-visible {
  outline-offset: 4px;
}

.q-grupo {
  border: 0;
  padding: 0;
  margin-inline: 0;
  min-width: 0;
}

.q-grupo legend {
  padding: 0;
  margin-bottom: var(--q-s-2);
}

.q-grilla-campos {
  display: grid;
  gap: 0 var(--q-s-4);
}

@media (min-width: 600px) {
  .q-grilla-campos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .q-grilla-campos--tres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mapa para marcar la ubicación en /publicar (publicar.js). */
.q-mapa-selector {
  height: 320px;
  margin-top: var(--q-s-2);
  border: 1.5px solid var(--q-linea-fuerte);
  border-radius: var(--q-r-input);
  z-index: 0;
}

.q-mapa-selector:focus-visible {
  outline: 3px solid var(--q-pileta-100);
  border-color: var(--q-pileta-500);
}

.q-mapa-selector__estado {
  margin-top: var(--q-s-2);
}

.q-mapa-selector__estado--error {
  color: var(--q-error);
  font-weight: 700;
}

.q-pin-ubicacion {
  color: var(--q-atardecer-500);
}

.q-pin-ubicacion svg {
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.35));
}

.q-grilla-checks {
  display: grid;
  gap: var(--q-s-2) var(--q-s-4);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.q-grilla-checks .q-check span {
  display: inline-flex;
  align-items: center;
  gap: var(--q-s-2);
}

.q-grilla-checks .q-icon {
  color: var(--q-pileta-500);
}

.q-formulario__alternativa {
  margin-top: var(--q-s-6);
  text-align: center;
}

.q-confirmacion__texto {
  margin-block: var(--q-s-4);
}

.q-confirmacion__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--q-s-3);
}

/* Puntaje de la reseña: radios nativos con forma de chip. */
.q-puntaje .q-chip:has(input:checked) {
  background: var(--q-pileta-500);
  border-color: var(--q-pileta-500);
  color: var(--q-blanco);
}

.q-puntaje .q-chip:has(input:checked) .q-icon {
  color: var(--q-blanco);
}

.q-puntaje .q-chip:has(input:focus-visible) {
  outline: 3px solid var(--q-pileta-500);
  outline-offset: 2px;
}

/* Reporte del dueño. */
.q-reporte {
  margin-bottom: var(--q-s-6);
  padding: var(--q-s-5);
  border: 1px solid var(--q-linea);
  border-radius: var(--q-r-card);
}

.q-reporte__titulo {
  font-size: var(--q-text-lg);
}

.q-reporte__mes {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.q-reporte__mes-nombre {
  text-transform: capitalize; /* nombre de mes ("noviembre 2026"), no texto en mayúsculas sostenidas */
  margin-bottom: var(--q-s-2);
}

/* ---- Publicá tu quinta: pasos (DESIGN-SYSTEM.md §8) ---- */
.q-pasos-proceso {
  margin: 0 0 var(--q-s-8);
  padding-left: var(--q-s-5);
}

.q-pasos-proceso li {
  margin-bottom: var(--q-s-2);
}

.q-indicador-pasos {
  display: none;
  list-style: none;
  margin: 0 0 var(--q-s-6);
  padding: 0;
  gap: var(--q-s-2);
  font-size: var(--q-text-sm);
  color: var(--q-tinta-suave);
}

.js-pasos .q-indicador-pasos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.q-indicador-pasos li {
  display: flex;
  flex-direction: column;
  gap: var(--q-s-1);
  padding-top: var(--q-s-2);
  border-top: 4px solid var(--q-linea);
  line-height: 1.3;
}

.q-indicador-pasos li.hecho {
  border-top-color: var(--q-pileta-100);
}

.q-indicador-pasos li[aria-current="step"] {
  border-top-color: var(--q-pileta-500);
  color: var(--q-tinta);
  font-weight: 700;
}

.q-indicador-pasos__numero {
  font-family: var(--q-font-display);
  font-weight: 600;
  font-size: var(--q-text-lg);
}

.q-paso {
  border: 0;
  margin: 0 0 var(--q-s-10);
  padding: 0;
  min-width: 0;
}

.js-pasos .q-paso:not(.activo) {
  display: none;
}

.q-paso__titulo {
  font-size: var(--q-text-xl);
  margin-bottom: var(--q-s-5);
}

.q-paso__acciones {
  display: flex;
  justify-content: flex-end;
  gap: var(--q-s-3);
  margin-top: var(--q-s-6);
}

@media (max-width: 599.98px) {
  .q-paso__acciones .q-btn--primario {
    flex: 1;
  }

  .q-indicador-pasos__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---- Home (DESIGN-SYSTEM.md §8) ---- */
.q-hero {
  background: var(--q-arena);
  padding-top: var(--q-s-8);
}

@media (min-width: 768px) {
  .q-hero {
    padding-top: var(--q-s-16);
  }
}

.q-hero__titulo {
  max-width: 14ch;
}

@media (min-width: 768px) {
  .q-hero__titulo {
    max-width: none;
  }
}

.q-hero__bajada {
  font-size: var(--q-text-lg);
  color: var(--q-tinta-suave);
  margin-bottom: var(--q-s-6);
}

.q-hero .q-ola {
  margin-top: var(--q-s-6);
}

.q-buscador {
  display: grid;
  gap: var(--q-s-3);
  max-width: 960px;
  padding: var(--q-s-4);
  background: var(--q-blanco);
  border: 1px solid var(--q-arena-linea);
  border-radius: var(--q-r-card);
}

.q-buscador .q-field {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .q-buscador {
    grid-template-columns: 1.3fr 1fr 0.8fr auto;
    align-items: end;
    padding: var(--q-s-5);
  }
}

.q-hero__mapa {
  margin-top: var(--q-s-3);
}

@media (min-width: 768px) {
  .q-section {
    padding-block: var(--q-s-16);
  }
}

.q-section--pegada {
  padding-top: 0;
}

.q-section__mas {
  margin: var(--q-s-8) 0 0;
}

.q-chips--grandes {
  list-style: none;
  margin: var(--q-s-5) 0 0;
  padding: 0;
  gap: var(--q-s-3);
}

.q-chips--grandes .q-chip {
  min-height: 48px;
  padding-inline: var(--q-s-5);
  font-size: var(--q-text-md);
  text-decoration: none;
}

.q-chip__dato {
  font-weight: 400;
  color: var(--q-tinta-suave);
}

#como-validamos:focus {
  outline: none;
}

.q-pasos {
  list-style: none;
  counter-reset: paso;
  display: grid;
  gap: var(--q-s-6);
  margin: var(--q-s-8) 0;
  padding: 0;
}

@media (min-width: 768px) {
  .q-pasos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.q-pasos li {
  counter-increment: paso;
  padding: var(--q-s-6);
  border: 1px solid var(--q-linea);
  border-radius: var(--q-r-card);
}

.q-pasos li::before {
  content: counter(paso);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--q-s-4);
  border-radius: var(--q-r-pill);
  background: var(--q-pileta-50);
  color: var(--q-pileta-500);
  font-family: var(--q-font-display);
  font-weight: 600;
  font-size: var(--q-text-xl);
}

.q-pasos__titulo {
  font-size: var(--q-text-lg);
}

.q-pasos p {
  margin: 0;
  color: var(--q-tinta-suave);
}

.q-propietarios {
  display: flex;
  flex-direction: column;
  gap: var(--q-s-4);
}

.q-propietarios p {
  margin: 0;
}

@media (min-width: 768px) {
  .q-propietarios {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Captcha de Cloudflare (cuando está activo) antes del botón de enviar. */
.q-captcha {
  margin-bottom: var(--q-s-5);
}

/* ---- Áreas táctiles de 44 px (DESIGN-SYSTEM.md §5 y §10) ---- */
/* quintear.css v1.0 define .q-chip con 40 px y el selector de vista seguía esa medida: se llevan a 44. */
.q-chip,
.q-selector-vista a {
  min-height: 44px;
}

.q-logo {
  min-height: 44px;
}

.q-migas a,
.q-footer__lista a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.q-footer__lista li {
  margin-bottom: 0;
}

.q-migas {
  gap: 0 var(--q-s-2);
}

.q-migas li {
  display: inline-flex;
  align-items: center;
}

.q-check {
  min-height: 44px;
  align-items: center;
}

.q-check input {
  margin-top: 0;
}

/* Barra fija de la ficha: a 320 px los dos botones tienen que entrar sin desbordar. */
.q-cta-fija .q-btn {
  min-width: 0;
  padding-inline: var(--q-s-3);
  white-space: nowrap;
}

@media (max-width: 359.98px) {
  .q-cta-fija .q-btn .q-icon {
    display: none;
  }
}

/* Botones de zoom de Leaflet: 44 px (leaflet.css carga después, por eso el selector más específico). */
.mapa.leaflet-container .leaflet-bar a {
  width: 44px;
  height: 44px;
  line-height: 44px;
}

.q-migas a {
  min-width: 44px;
}

/* El sello de la ficha lleva el nombre del grupo y la fecha: puede no entrar en una línea a 320 px
   (q-badge es nowrap y de alto fijo, pensado para rótulos cortos). */
.q-ficha__sello .q-badge {
  height: auto;
  min-height: 28px;
  padding-block: var(--q-s-1);
  white-space: normal;
}