/* =====================================================================
   SISTEMA DE DISEÑO BairesRental (`br-*`)
   =====================================================================
   NOTA SOBRE LAS UNIDADES
   -----------------------
   Todas las medidas de este archivo están en px. Estaban en rem, pero rem
   no significaba lo mismo acá que en el sitio estático: departamentos.html
   y ventas.html cargan css/bootstrap.css (Bootstrap 3) ADEMÁS de Bootstrap
   5, y Bootstrap 3 trae `html { font-size: 10px }`. O sea que todo este
   sistema se diseñó contra un root de 10px.

   La app Nuxt no carga Bootstrap 3, así que el root es 16px y cada rem
   renderizaba 1,6x más grande: la grilla pasaba de 15px de gap a 24px, los
   chips de amenities de 10,5px de texto a 16,8px, la barra de filtros de 2
   filas a 3. Se convirtió todo a px (rem x 10) para que el archivo no
   dependa del root — que además es lo correcto: una hoja compartida no
   debería romperse porque otra página cambie el font-size del html.
   =====================================================================
   Catálogo de departamentos y ventas: filtros, cards, badges, mapa y
   panel admin. Es el único CSS global de la app junto con base.css.

   Antes este archivo arrancaba con 3130 líneas de la plantilla legacy
   "fh5co" compilada desde sass/. Se movieron a legacy-template.css y ya
   no se cargan — ver el encabezado de ese archivo para el detalle.

   OJO: este archivo ya NO es un espejo de css/style.css de la raíz ni se
   regenera desde sass/. Si se recompila el SASS del sitio estático, no
   sobreescribir este archivo. Ver nuxt-app/README.md.
   ===================================================================== */

/* =====================================================
   CATÁLOGO DE DEPARTAMENTOS — departamentos.html
   Variables, filtros, cards, modal detalle y admin panel
===================================================== */
:root {
  --br-azul: #1A6FE8;
  --br-azul-h: #155cc4;
  --br-verde: #25D366;
  --br-verde-h: #1ebe5b;
  --br-gris-bg: #f7f7f8;
  --br-gris-borde: #e4e4e7;
  --br-gris-txt: #6b7280;
  --br-radio: 12px;
  --br-sombra: 0 2px 16px rgba(0,0,0,0.08);
  --br-sombra-h: 0 8px 32px rgba(0,0,0,0.15);
  --br-card-img-h: 210px;
}

/* ---- BARRA DE FILTROS ---- */
.br-filtros-wrapper {
  background: #fff;
  border-bottom: 1px solid var(--br-gris-borde);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  position: sticky;
  top: 0;
  z-index: 900;
}
.br-filtros-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 15px;
}
.br-filtros-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12.5px;
}
.br-filtro-grupo {
  display: flex;
  flex-direction: column;
  gap: 2.5px;
  min-width: 0;
}
.br-filtro-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--br-gris-txt);
}
.br-filtro-select {
  border: 1.5px solid var(--br-gris-borde);
  border-radius: 8px;
  padding: 5px 8.5px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9.3px;
  background: #fff;
  color: #111;
  cursor: pointer;
  min-width: 148px;
  transition: border-color .2s;
}
.br-filtro-select:focus { outline: none; border-color: var(--br-azul); }

.br-filtro-pills { display: flex; gap: 3.5px; flex-wrap: wrap; }

.br-pill-btn {
  background: var(--br-gris-bg);
  border: 1.5px solid var(--br-gris-borde);
  border-radius: 20px;
  padding: 3.8px 8.2px;
  font-family: 'DM Sans', sans-serif;
  font-size: 8.8px;
  font-weight: 500;
  cursor: pointer;
  transition: all .18s;
  color: #111;
  white-space: nowrap;
}
.br-pill-btn:hover { border-color: var(--br-azul); color: var(--br-azul); }
.br-pill-btn.active { background: var(--br-azul); border-color: var(--br-azul); color: #fff; }
.br-pill-btn-baires.active { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.br-pill-btn-baires:not(.active):hover { border-color: #1d4ed8; color: #1d4ed8; }
.br-pill-btn-mascotas.active { background: #16a34a; border-color: #16a34a; color: #fff; }
.br-pill-btn-mascotas:not(.active):hover { border-color: #16a34a; color: #16a34a; }
.br-pill-btn-disponible.active { background: #16a34a; border-color: #16a34a; color: #fff; }
.br-pill-btn-disponible:not(.active):hover { border-color: #16a34a; color: #16a34a; }

.br-precio-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 170px; }
.br-precio-top { display: flex; justify-content: space-between; align-items: center; }
#label-precio { font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 700; color: var(--br-azul); }

input[type="range"].br-range {
  -webkit-appearance: none;
  width: 100%; height: 4px;
  border-radius: 2px;
  background: var(--br-gris-borde);
  outline: none;
}
input[type="range"].br-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--br-azul);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.br-toggle-wrap { display: flex; align-items: center; gap: 4.5px; cursor: pointer; }
.br-toggle-wrap input[type="checkbox"] {
  width: 36px; height: 20px;
  appearance: none; -webkit-appearance: none;
  background: var(--br-gris-borde);
  border-radius: 20px;
  position: relative; cursor: pointer;
  transition: background .2s; flex-shrink: 0;
}
.br-toggle-wrap input[type="checkbox"]::after {
  content: ""; position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; top: 3px; left: 3px;
  transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.br-toggle-wrap input[type="checkbox"]:checked { background: var(--br-azul); }
.br-toggle-wrap input[type="checkbox"]:checked::after { left: 19px; }
.br-toggle-wrap span { font-family: 'DM Sans', sans-serif; font-size: 8.8px; font-weight: 500; }

.br-amenity-check {
  display: flex; align-items: center; gap: 4px;
  background: var(--br-gris-bg);
  border: 1.5px solid var(--br-gris-borde);
  border-radius: 20px;
  padding: 5px 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 10.5px; font-weight: 500;
  cursor: pointer; transition: all .18s;
}
.br-amenity-check:hover { border-color: var(--br-azul); }
.br-amenity-check input { display: none; }
.br-amenity-check:has(input:checked) { background: var(--br-azul); border-color: var(--br-azul); color: #fff; }

.br-filtros-toggle-mobile { display: none; }
.br-filtros-collapsible { padding-bottom: 2.5px; }

/* ── Overlay del panel ────────────────────────────────
   En mobile oscurece la página detrás del bottom sheet. En escritorio el
   dropdown no oscurece nada (Airbnb tampoco): el overlay queda transparente
   y sirve solo para cerrar al hacer click afuera, por debajo del z-index de
   la barra sticky (900) para no comerse sus clicks. */
.br-filtros-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 899;
  background: none;
}
.br-filtros-overlay.open { display: block; }
@media (max-width: 768px) {
  .br-filtros-overlay {
    z-index: 1040;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
}

/* ── Barra principal: buscador + barrio + tipo + botón "Filtros" ──
   NUXT-NEW: no existe en el sitio estático. Ahora es LA barra del catálogo a
   todo ancho — el resto de los filtros vive detrás del botón "Filtros".
   Los controles comparten los mismos refs que los del panel, así que el
   estado es uno solo: lo que se tipea acá se ve adentro y viceversa. */
.br-filtros-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 15px;
  max-width: 1280px;
  margin: 0 auto;
}
/* Contador + "Limpiar" + toggle Lista/Mapa, pegados a la derecha. Quedan
   afuera del panel colapsable a propósito: con los filtros cerrados tenés
   que poder ver cuántas propiedades quedaron y poder limpiarlas. */
.br-filtros-bar-end {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.br-quick-search {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 180px;
  min-width: 150px;
  max-width: 300px;
  border: 1.5px solid var(--br-gris-borde);
  border-radius: 100px;
  padding: 8px 14px;
  color: var(--br-gris-txt);
  transition: border-color .2s;
}
.br-quick-search:focus-within { border-color: var(--br-azul); }
.br-quick-search svg { flex-shrink: 0; }
.br-quick-search input {
  border: none; outline: none; background: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  color: #111;
  width: 100%;
  min-width: 0;
}

.br-quick-barrio {
  border: 1.5px solid var(--br-gris-borde);
  border-radius: 100px;
  padding: 8px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  background: #fff;
  color: #111;
  cursor: pointer;
  flex-shrink: 0;
  max-width: 160px;
  transition: border-color .2s;
}
.br-quick-barrio:focus { outline: none; border-color: var(--br-azul); }

.br-quick-tipos {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 0 1 auto;
  min-width: 0;
}
.br-quick-tipos::-webkit-scrollbar { display: none; }
.br-quick-tipos .br-pill-btn {
  font-size: 13px;
  padding: 7px 13px;
  border-radius: 100px;
}

.br-filtros-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4.5px;
  background: #f7f7f8;
  border: 1.5px solid #e4e4e7;
  border-radius: 100px;
  padding: 5px 9.5px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #111;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
  flex-shrink: 0;
}
.br-filtros-trigger:hover { border-color: var(--br-azul); }
.br-filtros-trigger:active { background: #ebebec; }
/* Abierto: el botón queda "presionado" para que se vea de dónde salió el
   panel, ya que en escritorio la barra no se esconde. */
.br-filtros-trigger.active {
  background: #111;
  border-color: #111;
  color: #fff;
}
.br-filtros-trigger.active:hover { border-color: #111; }
.br-filtros-trigger.active .br-filtro-badge { background: #fff; color: #111; }

.br-filtro-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 100px;
  background: #1A6FE8;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}


/* ── Panel de filtros: oculto hasta que "Filtros" lo abre ─────────────
   El mismo markup con dos presentaciones:
   · ≤768px  → bottom sheet full-screen, con header propio y footer
   · ≥769px  → dropdown anclado bajo la barra sticky, estilo Airbnb
   El header del sheet ("← Filtros · Limpiar") es solo mobile: en escritorio
   la barra de arriba no se esconde y ya trae su propio "Limpiar".

   `.br-filtros-panel` envuelve a `.br-filtros-inner` + el footer para que el
   dropdown pueda flotar como una sola pieza; sin él, footer e inner son
   hermanos y no hay a qué anclar. */
.br-filtro-sheet-header,
.br-filtro-sheet-footer { display: none; }

.br-filtros-panel { display: none; }
.br-filtros-wrapper.open .br-filtros-panel { display: flex; flex-direction: column; min-height: 0; }
.br-filtros-wrapper.open .br-filtro-sheet-footer { display: block; }

.br-filtro-sheet-close-btn {
  background: none; border: none; cursor: pointer;
  color: #111; padding: 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; transition: background .2s;
  flex-shrink: 0;
}
.br-filtro-sheet-close-btn:active { background: #f0f0f0; }
.br-filtro-sheet-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px; font-weight: 700; color: #111;
  flex: 1; text-align: center;
}
.br-filtro-sheet-reset-btn {
  background: none; border: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 600;
  color: #1A6FE8; padding: 4px 0;
  transition: opacity .2s; flex-shrink: 0;
}
.br-filtro-sheet-reset-btn:active { opacity: .6; }
.br-filtro-sheet-reset-btn:hover { opacity: .75; }
.br-reset-escritorio { display: none; }
@media (min-width: 769px) {
  .br-filtros-wrapper.open .br-reset-escritorio { display: inline-block; }
}

.br-filtro-sheet-apply-btn {
  display: block; width: 100%;
  background: #1A6FE8; color: #fff;
  border: none; border-radius: 100px;
  padding: 9px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px; font-weight: 700;
  cursor: pointer; transition: background .2s;
  text-align: center;
}
.br-filtro-sheet-apply-btn:hover { background: #1058c0; }
.br-filtro-sheet-apply-btn:active { background: #1058c0; }

/* ── ≥769px: dropdown anclado bajo la barra ───────────────────────────
   Anclado, NO un modal centrado: el modal de 560px es justo lo que se
   revirtió en aef006d por sentirse fuera de lugar en el catálogo. */
@media (min-width: 769px) {
  .br-filtros-wrapper.open .br-filtros-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--br-gris-borde);
    border-radius: 0 0 var(--br-radio) var(--br-radio);
    box-shadow: 0 14px 30px rgba(0,0,0,.14);
    max-height: calc(100vh - 150px);
    animation: brPanelDrop .16s ease-out;
  }
  @keyframes brPanelDrop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .br-filtros-wrapper.open .br-filtros-inner {
    overflow-y: auto;
    padding: 16px 15px 4px;
  }
  /* Buscador, barrio y tipo ya están en la barra sticky, que en escritorio
     queda visible con el panel abierto: acá adentro son un duplicado. En
     mobile sí se muestran, porque el sheet tapa la barra. */
  .br-filtro-grupo-dup { display: none; }

  /* Footer del dropdown: "Limpiar" a la izquierda, "Ver N propiedades" a la
     derecha — el botón a todo lo ancho es la versión mobile. */
  .br-filtros-wrapper.open .br-filtro-sheet-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 15px;
    border-top: 1px solid var(--br-gris-borde);
    flex-shrink: 0;
    background: #fff;
    border-radius: 0 0 var(--br-radio) var(--br-radio);
  }
  .br-filtro-sheet-apply-btn {
    width: auto;
    padding: 9px 22px;
    font-size: 14px;
  }
}

/* ── ≤768px: bottom sheet full-screen ─────────────────────────────── */
@media (max-width: 768px) {
  .br-filtros-wrapper { position: relative; }
  .br-filtros-bar { padding: 6px 10px; gap: 6px; }
  .br-quick-search { max-width: none; }

  .br-filtros-wrapper.open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1050 !important;
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    border-bottom: none !important;
    box-shadow: none !important;
    overflow: hidden;
    animation: brSheetSlideUp .28s cubic-bezier(.4,0,.2,1);
  }
  @keyframes brSheetSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .br-filtros-wrapper.open .br-filtros-bar { display: none !important; }

  .br-filtros-wrapper.open .br-filtro-sheet-header {
    display: flex;
    align-items: center;
    padding: 9.5px 11px;
    border-bottom: 1px solid #e4e4e7;
    flex-shrink: 0;
  }
  .br-filtros-wrapper.open .br-filtros-panel { flex: 1; }
  .br-filtros-wrapper.open .br-filtros-inner {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
  }
  .br-filtros-wrapper.open .br-filtro-sheet-footer {
    padding: 9px 11px;
    padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e4e4e7;
    flex-shrink: 0;
    background: #fff;
  }

  /* Filtros en columna y con tipografía cómoda para el pulgar. */
  .br-filtros-wrapper.open .br-filtros-row {
    flex-direction: column;
    gap: 13px;
    padding: 12px 11px 6px;
  }
  .br-filtros-wrapper.open .br-filtro-grupo {
    gap: 4.5px;
    min-width: unset;
    width: 100%;
  }
  .br-filtros-wrapper.open .br-filtro-label { font-size: 12px; }
  .br-filtros-wrapper.open .br-pill-btn {
    font-size: 14px;
    padding: 5px 10px;
  }
  .br-filtros-wrapper.open .br-precio-wrap {
    min-width: unset;
    width: 100%;
  }
  .br-filtros-wrapper.open #label-precio { font-size: 14px; }
  .br-filtros-wrapper.open .br-amenity-check {
    font-size: 13px;
    padding: 4.5px 7.5px;
    line-height: 1.4;
  }
}

/* Contador de fotos sobre la portada de una card de venta
   (js/ventas.js:328-330) — la única clase del catálogo de ventas que
   faltaba en esta hoja. */
.br-fotos-count {
  background: rgba(0, 0, 0, .6);
  color: #fff;
  margin-left: auto;
}

/* Buscador de la fila de escritorio (departamentos.html:334-348) — se había
   borrado al mover todo a `.br-quick-search`. */
.br-busqueda-wrap { flex: 0 1 auto; }
.br-filtro-search {
  background: #f7f7f8;
  border: 1.5px solid #e4e4e7;
  border-radius: 8px;
  color: #111;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  padding: 4px 10px;
  min-width: 160px;
  outline: none;
  transition: border-color .2s;
}
.br-filtro-search::placeholder { color: #9ca3af; }
.br-filtro-search:focus { border-color: var(--br-azul); }
.br-filtro-search::-webkit-search-cancel-button { cursor: pointer; }

/* ── Restauradas: se habían borrado al pasar todo al modal ──────────
   Vienen de css/style.css:3276-3289 y del <style> propio de
   departamentos.html (:359-365). */
.br-btn-limpiar {
  background: none;
  border: 1.5px solid var(--br-gris-borde);
  border-radius: 20px;
  font-family: 'DM Sans', sans-serif;
  color: var(--br-gris-txt);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 13px;
  transition: all .18s;
  white-space: nowrap;
  text-decoration: none;
  align-self: center;
  flex-shrink: 0;
}
.br-btn-limpiar:hover { border-color: #ef4444; color: #ef4444; background: #fef2f2; }

.br-contador-inline {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  color: #888;
  white-space: nowrap;
  align-self: center;
  flex-shrink: 0;
}

.br-amenities-inline-label { align-self: center; white-space: nowrap; margin-right: 2px; }


/* ---- CATÁLOGO GRID ---- */
.br-catalogo-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 15px 50px;
}
.br-catalogo-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  flex-wrap: wrap; gap: 5px;
}
#contador-resultados {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; color: var(--br-gris-txt); font-weight: 500;
}
#catalogo-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: 15px;
  transition: opacity .2s ease;
}
@media (min-width: 640px) {
  #catalogo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  #catalogo-grid { grid-template-columns: repeat(3, 1fr); }
}
.br-grid-full { grid-column: 1 / -1; }

/* ---- LIST / MAP SPLIT VIEW ---- */
/* NUXT-NEW: no existe en el sitio estático. El toggle vive en la barra sticky
   de filtros, no arriba de la grilla: ahí quedaba abajo del fold y no se
   encontraba.
   El font-size era 8.5px. Este bloque es el único que se escribió contra el
   root de 16px de Nuxt (.85rem) en vez del de 10px del estático, así que la
   conversión rem x10 de aef006d lo dejó ~40% más chico de lo previsto: a
   simple vista el toggle no se leía. Va a 13px, que es lo que .85rem daba. */
.br-catalogo-view-toggle {
  display: inline-flex;
  gap: 3px;
  background: var(--br-gris-bg);
  border: 1.5px solid var(--br-gris-borde);
  border-radius: 100px;
  padding: 3px;
  flex-shrink: 0;
}
.br-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none; border: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  color: var(--br-gris-txt);
  padding: 6px 13px;
  border-radius: 100px;
  transition: background .18s, color .18s;
  white-space: nowrap;
}
.br-view-toggle-btn svg { flex-shrink: 0; }
.br-view-toggle-btn:hover { color: #111; }
.br-view-toggle-btn.active { background: #fff; color: #111; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
/* Las dos vistas no son simétricas:
   · El panel del mapa se esconde a todo ancho cuando la vista es "Lista".
   · La lista solo se esconde en pantallas chicas. En escritorio "Mapa" abre
     un split — mapa al costado y la grilla a 2 columnas (la regla :has() de
     más abajo) — que es para lo que está pensado el layout.
   Antes las dos usaban la misma clase `.br-split-hide-mobile` con
   `display:none` sin media query, así que en escritorio la vista "Mapa"
   escondía la lista y dejaba el mapa solo en su columna del 40%, con medio
   catálogo en blanco al costado. */
.br-mapa-oculto { display: none !important; }
@media (max-width: 991px) {
  .br-lista-oculta { display: none !important; }
}

.br-catalogo-split {
  display: flex;
  align-items: flex-start;
  gap: 17.5px;
}
.br-catalogo-list { flex: 1 1 auto; min-width: 0; }
.br-catalogo-map-panel {
  display: none;
  flex: 0 0 40%;
  max-width: 460px;
  position: sticky;
  top: 130px;
  height: calc(100vh - 160px);
  min-height: 420px;
  border-radius: var(--br-radio);
  overflow: hidden;
  border: 1px solid var(--br-gris-borde);
  box-shadow: var(--br-sombra);
}
@media (min-width: 992px) {
  .br-catalogo-map-panel { display: block; }
  /* Cuando el mapa está abierto la lista sí pasa a 2 columnas, pero solo
     entonces — en la vista de lista (el default) quedan las 3 del estático. */
  .br-catalogo-split:has(.br-catalogo-map-panel:not(.br-mapa-oculto)) #catalogo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.br-map-canvas { width: 100%; height: 100%; background: var(--br-gris-bg); }

/* Mobile: el mapa ocupa todo el ancho en vez de ir fijo al costado. */
@media (max-width: 991px) {
  .br-catalogo-map-panel {
    display: block;
    position: static;
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    height: min(70vh, 560px);
  }
}

/* MapLibre marker popup content (rendered outside Vue's scoped styles, so
   these live in the shared sheet like the rest of the map/filter rules) */
.br-map-popup { display: flex; flex-direction: column; width: 190px; font-family: 'DM Sans', sans-serif; }
.br-map-popup img { display: block; width: 100%; height: 100px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
.br-map-popup-body { display: flex; flex-direction: column; gap: 2px; padding-bottom: 2px; }
.br-map-popup-body strong { font-size: 8.8px; color: #111; line-height: 1.25; }
.br-map-popup-body span { font-size: 7.8px; color: var(--br-gris-txt); }
.br-map-popup-precio { font-weight: 700 !important; color: var(--br-azul) !important; }
.br-map-popup-body a {
  margin-top: 4px;
  font-size: 8px; font-weight: 600;
  color: var(--br-azul); text-decoration: none;
}
.br-map-popup-body a:hover { text-decoration: underline; }
.maplibregl-popup-content { border-radius: 10px; padding: 10px; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.18); }
.maplibregl-popup-close-button { font-size: 16px; color: var(--br-gris-txt); padding: 0 5px; }

/* Pin propio del mapa (el elemento del Marker, armado en CatalogMap.vue). */
.br-map-pin {
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
  transform-origin: 50% 100%;
  transition: transform 0.12s ease;
}
.br-map-pin:hover { transform: scale(1.12); }
.br-map-pin svg { display: block; }

/* Controles: mismo redondeo y sombra suave que el resto del sitio. Prefijados
   con .br-map-canvas porque el CSS de MapLibre lo inyecta Vite y no hay
   garantia de que cargue antes que esta hoja. */
.br-map-canvas .maplibregl-ctrl-group {
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.br-map-canvas .maplibregl-ctrl-group button:first-child { border-radius: 8px 8px 0 0; }
.br-map-canvas .maplibregl-ctrl-group button:last-child { border-radius: 0 0 8px 8px; }
.br-map-canvas .maplibregl-ctrl-attrib {
  background: rgba(255, 255, 255, 0.78);
  font-size: 10px;
}
.br-map-canvas .maplibregl-ctrl-attrib a { color: var(--br-gris-txt); }

/* ---- CARDS ---- */
.br-prop-card {
  background: #fff;
  border-radius: var(--br-radio);
  overflow: hidden;
  box-shadow: var(--br-sombra);
  border: 1px solid var(--br-gris-borde);
  transition: box-shadow .25s, transform .25s;
  display: flex; flex-direction: column;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.br-prop-card:hover { box-shadow: var(--br-sombra-h); transform: translateY(-3px); }

.br-prop-img {
  position: relative;
  height: var(--br-card-img-h);
  background: #e9eaf0;
  overflow: hidden;
  flex-shrink: 0;
}
.br-prop-img img { width: 100%; height: 100%; object-fit: cover; }

.br-prop-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #dde1ea, #c8cdd8);
  font-size: 14px; color: #888; font-weight: 500;
}

.br-prop-badges {
  position: absolute; top: 6px; left: 6px;
  display: flex; flex-direction: column; gap: 3px; z-index: 2;
}

.br-badge {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 700;
  padding: 2.5px 6px; border-radius: 6px;
  letter-spacing: .01em;
}
.br-badge-propio       { background: var(--br-azul); color: #fff; }
.br-badge-disponible   { background: #16a34a; color: #fff; }
.br-badge-reservado    { background: #d97706; color: #fff; }
.br-badge-nodisponible { background: #dc2626; color: #fff; }

.br-mascota-inline {
  font-size: 11px; color: #555; font-weight: 500;
  margin-left: auto;
  white-space: nowrap;
}

.br-prop-body {
  padding: 11px 12px 12px;
  flex: 1; display: flex; flex-direction: column;
  font-family: 'DM Sans', sans-serif;
}
.br-prop-clickzone { flex: 1; display: flex; flex-direction: column; }

.br-prop-location {
  font-size: 13px; color: var(--br-gris-txt);
  font-weight: 500; margin-bottom: 2.5px;
  display: flex; align-items: center; gap: 3px;
}
.br-prop-direccion { margin-bottom: 3.5px; }
.br-btn-ver-mapa {
  display: inline-flex; align-items: center; gap: 3px;
  background: #f0f6ff; color: var(--br-azul);
  border: 1px solid #c7deff; border-radius: 6px;
  padding: 2px 5.5px;
  font-size: 11px; font-weight: 600;
  text-decoration: none;
  transition: background .18s, border-color .18s;
}
.br-btn-ver-mapa:hover { background: #dbeafe; border-color: var(--br-azul); color: var(--br-azul); }
.br-prop-titulo {
  font-size: 17px; font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 5.5px; color: #111; line-height: 1.3;
}
.br-prop-desde {
  font-size: 11px; color: #92400e;
  background: #fef9c3; border-radius: 6px;
  padding: 3px 6.5px; margin-bottom: 5px;
  display: inline-flex; align-items: center; gap: 3px;
}
.br-prop-precio-row {
  display: flex; align-items: baseline;
  gap: 4px; flex-wrap: wrap; margin-bottom: 5px;
}
.br-precio { font-size: 16px; font-weight: 700; color: #111; letter-spacing: -.02em; }
.br-precio-sub { font-size: 13px; color: var(--br-gris-txt); display: flex; flex-wrap: wrap; gap: 3.5px; align-items: center; }
.br-tag-servicios        { background: #dcfce7; color: #14532d; border-radius: 4px; padding: 1px 4px; font-size: 11px; font-weight: 600; }
.br-tag-servicios-aparte { background: #fee2e2; color: #dc2626; border-radius: 4px; padding: 1px 4px; font-size: 11px; font-weight: 600; }
.br-tag-minimo           { background: #fef3c7; color: #92400e; border-radius: 4px; padding: 1px 4px; font-size: 11px; font-weight: 600; }

.br-amenities-row { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 5.5px; min-height: 18px; }
.br-amenity-tag {
  background: var(--br-gris-bg); border: 1px solid var(--br-gris-borde);
  border-radius: 6px; padding: 2.5px 5.2px;
  font-size: 11px; font-weight: 500; color: #111;
}

.br-prop-desc {
  font-size: 14px; color: var(--br-gris-txt);
  line-height: 1.55; margin-bottom: 0;
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
  padding-bottom: 7.5px;
}

.br-prop-actions { margin-top: auto; padding-top: 5px; }

.br-btn-wa {
  background: var(--br-verde); color: #fff;
  border: none; border-radius: 8px;
  padding: 6.5px 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px; font-weight: 600;
  text-decoration: none;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: background .2s, transform .15s; cursor: pointer;
}
.br-btn-wa:hover { background: var(--br-verde-h); color: #fff; transform: translateY(-1px); }

.br-btn-detalle-primary {
  background: var(--br-azul); color: #fff;
  border: none; border-radius: 8px;
  padding: 6.5px 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: background .2s, transform .15s;
}
.br-btn-detalle-primary:hover { background: var(--br-azul-h); color: #fff; transform: translateY(-1px); }

.br-btn-detalle-row {
  display: flex; gap: 5px; align-items: stretch;
}
.br-btn-detalle {
  background: transparent; color: #111;
  border: 1.5px solid var(--br-gris-borde); border-radius: 8px;
  padding: 5.5px 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 8.8px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: border-color .2s, background .2s; flex: 1;
}
.br-btn-detalle:hover { border-color: #111; background: var(--br-gris-bg); color: #111; }
.br-btn-wa-outline {
  background: transparent; color: #111;
  border: 1.5px solid var(--br-gris-borde); border-radius: 8px;
  padding: 5.5px 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 8.8px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: border-color .2s, background .2s; flex: 1;
}
.br-btn-wa-outline svg { color: var(--br-verde); flex-shrink: 0; }
.br-btn-wa-outline:hover { border-color: var(--br-verde); background: #f0fdf4; color: #111; }
.br-btn-compartir {
  background: transparent; color: var(--br-gris-txt);
  border: 1.5px solid var(--br-gris-borde); border-radius: 8px;
  width: 36px; padding: 0; flex-shrink: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s, background .2s;
}
.br-btn-compartir:hover { border-color: var(--br-azul); color: var(--br-azul); background: #f0f6ff; }
.br-btn-compartir-full { width: auto; flex: 1; padding: 5.5px 10px; gap: 4px; }
/* Texto del botón Compartir en modo vendedor (js/departamentos.js:392). */
.br-btn-compartir-label { font-family: 'DM Sans', sans-serif; font-size: 8.8px; font-weight: 500; }

/* ---- MODAL DETALLE ---- */
#detalle-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.65); z-index: 10000;
  backdrop-filter: blur(4px);
}
#detalle-overlay.active { display: block; }

#detalle-modal {
  display: none; position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.97);
  width: min(900px, 94vw);
  max-height: 88vh;
  background: #fff;
  border-radius: 16px;
  z-index: 10001;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.25);
  flex-direction: column;
  transition: transform .22s ease, opacity .22s ease;
  opacity: 0;
}
#detalle-modal.active {
  display: flex;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

#detalle-close {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,.5); color: #fff;
  border: none; width: 34px; height: 34px;
  border-radius: 50%; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5;
  transition: background .2s;
}
#detalle-close:hover { background: rgba(0,0,0,.75); }

.detalle-inner {
  display: flex; flex-direction: column;
  height: 100%; overflow-y: auto;
}
.detalle-img-wrap {
  position: relative; height: 260px;
  background: #dde1ea; flex-shrink: 0;
}
.detalle-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.detalle-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  background: linear-gradient(135deg,#dde1ea,#c8cdd8);
}
.detalle-img-badges {
  position: absolute; top: 8px; left: 8px;
  display: flex; flex-direction: column; gap: 3.5px; z-index: 2;
}

.detalle-body {
  padding: 18px 20px 20px;
  font-family: 'DM Sans', sans-serif;
  flex: 1;
}
.detalle-location {
  font-size: 8.5px; color: var(--br-gris-txt);
  font-weight: 500; margin-bottom: 4px;
  display: flex; align-items: center; gap: 3.5px;
}
#detalle-titulo {
  font-size: 15px; font-weight: 700;
  letter-spacing: -.02em; color: #111;
  margin: 0 0 8px; line-height: 1.25;
}
.detalle-precio-row {
  display: flex; align-items: baseline;
  gap: 5px; flex-wrap: wrap; margin-bottom: 7.5px;
}
.detalle-precio { font-size: 16px; font-weight: 700; color: #111; }
.detalle-precio-sub { font-size: 8.5px; color: var(--br-gris-txt); display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }

.detalle-desde {
  font-size: 8.3px; color: #92400e;
  background: #fef9c3; border-radius: 8px;
  padding: 4px 8px; margin-bottom: 8px;
  display: inline-flex; align-items: center; gap: 3.5px;
}
.detalle-direccion { margin-bottom: 7px; }

.detalle-desc {
  font-size: 9.5px; color: #374151;
  line-height: 1.65; margin-bottom: 12px;
  white-space: pre-line;
}

.detalle-seccion-titulo {
  font-size: 7.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--br-gris-txt); margin-bottom: 5.5px;
}
.detalle-amenities-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.detalle-amenity-tag {
  background: var(--br-gris-bg); border: 1px solid var(--br-gris-borde);
  border-radius: 8px; padding: 3.5px 7px;
  font-size: 8.8px; font-weight: 500; color: #111;
}

.detalle-opciones-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.detalle-opcion-tag {
  background: #eff6ff; color: var(--br-azul);
  border: 1px solid #bfdbfe;
  border-radius: 8px; padding: 3px 6.5px;
  font-size: 8.5px; font-weight: 500;
}

.detalle-actions { display: flex; gap: 7.5px; flex-wrap: wrap; }
.detalle-actions .br-btn-wa { flex: 1; min-width: 180px; }
.detalle-btn-compartir {
  background: transparent; color: var(--br-azul);
  border: 1.5px solid var(--br-azul); border-radius: 8px;
  padding: 6.5px 9px; cursor: pointer; font-family: 'DM Sans', sans-serif;
  font-size: 9px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: background .2s, color .2s; text-decoration: none;
}
.detalle-btn-compartir:hover { background: var(--br-azul); color: #fff; }
.detalle-btn-fotos {
  flex: 1; min-width: 140px;
  background: transparent; color: #111;
  border: 1.5px solid var(--br-gris-borde); border-radius: 8px;
  padding: 6.5px 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px; font-weight: 500;
  text-decoration: none;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: border-color .2s, background .2s;
}
.detalle-btn-fotos:hover { border-color: #111; background: var(--br-gris-bg); color: #111; }

@media (max-width: 600px) {
  #detalle-modal { max-height: 95vh; border-radius: 12px 12px 0 0; top: auto; bottom: 0; left: 0; right: 0; transform: none; width: 100%; }
  #detalle-modal.active { transform: none; }
  .detalle-body { padding: 12px 12px 15px; }
  .detalle-img-wrap { height: 200px; }
  #detalle-titulo { font-size: 12.5px; }
  .detalle-precio { font-size: 13px; }
}

/* ---- BOTÓN ADMIN EN FOOTER ---- */
.btn-admin-discreto {
  background: none; border: none;
  color: rgba(255,255,255,.2);
  font-family: 'DM Sans', sans-serif;
  font-size: 7.2px; cursor: pointer;
  padding: 2.5px 5px; margin-top: 7.5px;
  transition: color .2s;
}
.btn-admin-discreto:hover { color: rgba(255,255,255,.5); }

/* ---- PANEL DE ADMINISTRACIÓN ---- */
#admin-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.55); z-index: 9998;
  backdrop-filter: blur(3px);
}
#admin-overlay.active { display: block; }

#admin-modal {
  display: none; position: fixed; top: 0; right: 0; bottom: 0;
  width: min(920px, 95vw);
  background: #fff; z-index: 9999;
  overflow-y: auto;
  box-shadow: -8px 0 40px rgba(0,0,0,.2);
  flex-direction: column;
  font-family: 'DM Sans', sans-serif;
}
#admin-modal.active { display: flex; }

.admin-header {
  background: #111; color: #fff;
  padding: 11px 15px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10;
}
.admin-header h2 { font-size: 10px; font-weight: 700; margin: 0; }
.admin-header-badge { background: var(--br-azul); color: #fff; font-size: 6.8px; font-weight: 700; padding: 1.3px 4.8px; border-radius: 20px; margin-left: 5px; }

#admin-modal-close {
  background: rgba(255,255,255,.1); border: none; color: #fff;
  width: 32px; height: 32px; border-radius: 6px;
  cursor: pointer; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
#admin-modal-close:hover { background: rgba(255,255,255,.2); }

.admin-body { padding: 15px; flex: 1; }
.admin-top-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 15px; }

.btn-admin-primary {
  background: var(--br-azul); color: #fff;
  border: none; border-radius: 8px;
  padding: 5.2px 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 8.8px; font-weight: 600; cursor: pointer;
  transition: background .2s;
}
.btn-admin-primary:hover { background: var(--br-azul-h); }

.btn-admin-secondary {
  background: var(--br-gris-bg); color: #111;
  border: 1.5px solid var(--br-gris-borde); border-radius: 8px;
  padding: 5.2px 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 8.8px; font-weight: 600; cursor: pointer;
  transition: all .2s;
}
.btn-admin-secondary:hover { border-color: #111; background: #fff; }

/* Admin buscar + tipo filtros */
.admin-buscar-wrap {
  display: flex; align-items: center; gap: 7.5px; margin-bottom: 6.5px;
}
#admin-buscar {
  flex: 1; padding: 6px 9px; border: 1px solid var(--br-gris-borde);
  border-radius: 8px; font-size: 9px; font-family: 'DM Sans', sans-serif;
  outline: none; transition: border-color .2s;
}
#admin-buscar:focus { border-color: var(--br-azul); }
#admin-contador-lista { font-size: 8.2px; color: var(--br-gris-txt); white-space: nowrap; font-family: 'DM Sans', sans-serif; }

.admin-tipo-filtros { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.admin-tipo-btn {
  padding: 3.5px 8px; border-radius: 20px; border: 1px solid var(--br-gris-borde);
  background: #fff; font-size: 8px; font-family: 'DM Sans', sans-serif;
  font-weight: 600; cursor: pointer; transition: all .15s;
}
.admin-tipo-btn:hover { border-color: var(--br-azul); color: var(--br-azul); }
.admin-tipo-btn.active { background: var(--br-azul); color: #fff; border-color: var(--br-azul); }

/* Admin lista de propiedades */
#admin-lista { display: flex; flex-direction: column; gap: 5px; margin-bottom: 15px; max-height: 420px; overflow-y: auto; }
.admin-prop-card {
  display: flex; align-items: center; gap: 8.5px;
  border: 1px solid var(--br-gris-borde); border-radius: 10px;
  padding: 6px 8px; background: #fff; transition: box-shadow .2s;
}
.admin-prop-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.admin-prop-thumb {
  width: 62px; height: 50px; border-radius: 7px; overflow: hidden;
  background: var(--br-gris-bg); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.admin-prop-thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-thumb-placeholder { font-size: 14px; color: #bbb; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.admin-prop-info { flex: 1; min-width: 0; }
.admin-prop-titulo { font-weight: 700; font-size: 8.8px; font-family: 'DM Sans', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-prop-id { font-size: 7px; font-family: 'Courier New', monospace; color: #999; letter-spacing: .01em; margin: 0.5px 0 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-prop-meta { font-size: 7.6px; color: var(--br-gris-txt); font-family: 'DM Sans', sans-serif; margin: 1.5px 0 1.5px; }
.admin-prop-direccion { font-size: 7.2px; color: #888; font-family: 'DM Sans', sans-serif; margin: 0 0 2.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-prop-btns { display: flex; gap: 3.5px; flex-shrink: 0; }
.btn-admin-edit { padding: 3px 7px; border-radius: 7px; border: 1px solid var(--br-azul); background: #fff; color: var(--br-azul); font-size: 7.8px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .15s; }
.btn-admin-edit:hover { background: var(--br-azul); color: #fff; }
.btn-admin-album { padding: 3px 6px; border-radius: 7px; border: 1px solid var(--br-gris-borde); background: #fff; font-size: 8.5px; cursor: pointer; transition: all .15s; text-decoration: none; display: inline-flex; align-items: center; }
.btn-admin-album:hover { border-color: #555; }
.btn-admin-album-disabled { opacity: .4; cursor: not-allowed; }
.btn-admin-del { padding: 3px 6px; border-radius: 7px; border: 1px solid #fca5a5; background: #fff; font-size: 8.5px; cursor: pointer; transition: all .15s; }
.btn-admin-del:hover { background: #fee2e2; border-color: #dc2626; }

/* Uploader de imagen en el form admin */
.admin-img-upload-wrap { display: flex; gap: 7.5px; align-items: flex-start; }
#admin-img-preview {
  width: 90px; height: 72px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--br-gris-borde); background: var(--br-gris-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
#admin-img-preview img { width: 100%; height: 100%; object-fit: cover; }
.admin-img-controls { flex: 1; display: flex; flex-direction: column; gap: 4.5px; }
.btn-upload-img {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8.5px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--br-gris-borde); background: #fff;
  font-size: 8.2px; font-family: 'DM Sans', sans-serif; font-weight: 600;
  transition: all .15s; width: fit-content;
}
.btn-upload-img:hover { border-color: var(--br-azul); color: var(--br-azul); }
.btn-upload-img input[type="file"] { display: none; }
.admin-img-sep { font-size: 7.8px; color: #aaa; font-family: 'DM Sans', sans-serif; }

.admin-disp-badge { font-size: 7.2px; font-weight: 700; padding: 2px 5px; border-radius: 20px; text-transform: capitalize; }
.admin-disp-disponible    { background: #dcfce7; color: #16a34a; }
.admin-disp-reservado     { background: #fef3c7; color: #b45309; }
.admin-disp-no-disponible { background: #fee2e2; color: #b91c1c; }

.admin-acciones { display: flex; gap: 3.5px; }

#admin-form-section {
  display: none;
  background: var(--br-gris-bg);
  border-radius: 12px; padding: 15px; margin-top: 10px;
}
#form-titulo-label { font-size: 10px; font-weight: 700; margin-bottom: 12px; color: #111; }
.form-group { margin-bottom: 10px; }
.form-label-admin { display: block; font-size: 7.8px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--br-gris-txt); margin-bottom: 3px; }
.form-control-br { width: 100%; border: 1.5px solid var(--br-gris-borde); border-radius: 8px; padding: 5px 7.8px; font-family: 'DM Sans', sans-serif; font-size: 9px; background: #fff; color: #111; transition: border-color .2s; }
.form-control-br:focus { outline: none; border-color: var(--br-azul); }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.form-checks-row { display: flex; gap: 15px; flex-wrap: wrap; }
.form-check-br { display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 9px; }

.admin-amenities-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 5px; margin-top: 2.5px; }
.admin-amenity-label { display: flex; align-items: center; gap: 4px; background: #fff; border: 1.5px solid var(--br-gris-borde); border-radius: 8px; padding: 5px 7px; cursor: pointer; font-size: 8.5px; font-weight: 500; transition: all .18s; }
.admin-amenity-label:has(input:checked) { border-color: var(--br-azul); background: #eff6ff; color: var(--br-azul); }
.admin-amenity-label input { display: none; }

.disp-selector { display: flex; gap: 5px; }
.disp-btn { flex: 1; border: 2px solid transparent; border-radius: 8px; padding: 5px; font-family: 'DM Sans', sans-serif; font-size: 8.2px; font-weight: 700; cursor: pointer; text-align: center; transition: all .18s; }
.disp-btn-disponible { background: #dcfce7; color: #15803d; border-color: #dcfce7; }
.disp-btn-disponible.selected, .disp-btn-disponible:hover { border-color: #22c55e; }
.disp-btn-reservado  { background: #fef3c7; color: #92400e; border-color: #fef3c7; }
.disp-btn-reservado.selected, .disp-btn-reservado:hover { border-color: #f59e0b; }
.disp-btn-no         { background: #fee2e2; color: #b91c1c; border-color: #fee2e2; }
.disp-btn-no.selected, .disp-btn-no:hover { border-color: #ef4444; }

.preview-label { font-size: 7.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--br-gris-txt); margin-bottom: 7.5px; margin-top: 15px; display: flex; align-items: center; gap: 5px; }
.preview-label::after { content: ""; flex: 1; height: 1px; background: var(--br-gris-borde); }
.form-actions { display: flex; gap: 6px; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--br-gris-borde); }

/* ---- TOAST ---- */
#br-toast {
  position: fixed; bottom: 15px; left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #111; color: #fff;
  padding: 7.2px 15px; border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px; font-weight: 500;
  z-index: 99999; transition: transform .3s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,.3); white-space: nowrap;
}
#br-toast.show { transform: translateX(-50%) translateY(0); }

/* ---- RESPONSIVE CATÁLOGO ---- */
@media (max-width: 576px) {
  .br-catalogo-section { padding: 12.5px 10px 30px; }
  .form-row-2, .form-row-3 { grid-template-columns: 1fr; }
  .admin-acciones { flex-wrap: wrap; }
  #admin-modal { width: 100%; top: auto; border-radius: 16px 16px 0 0; max-height: 92vh; }
  .disp-selector { flex-direction: column; }
  .br-tag-servicios, .br-tag-servicios-aparte, .br-tag-minimo {
    padding: 0.5px 3px;
  }
}

/* Amenity filter — compact mobile fix */
@media (max-width: 768px) {
  .br-amenity-check { font-size: 10px !important; padding: 2px 6px !important; line-height: 1.2 !important; }
}