/* C036 / v038 responsive Explore shell.
   The public page uses one source of truth for filters/list/map/detail. Desktop
   keeps filters visible; compact layouts move filters into a controlled drawer.
   Future SuperAdmin can tune presentation policies, but not arbitrary layout CSS. */

.map-mobile-toolbar {
  display: none;
}

.map-filter-drawer-header {
  display: none;
}

.map-filter-drawer-backdrop[hidden] {
  display: none;
}

@media (max-width: 1023px) {
  .map-mobile-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex: 0 0 auto;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--map-panel-border, #d8e5e8);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 28px rgba(5, 8, 22, 0.08);
  }

  .map-mobile-filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 118, 129, 0.26);
    border-radius: 999px;
    background: #ffffff;
    color: var(--map-accent-dark, #006f76);
    padding: 0.6rem 1rem;
    font-size: 0.8125rem;
    font-weight: 950;
    box-shadow: 0 10px 24px rgba(5, 8, 22, 0.08);
  }

  .map-mobile-toolbar-hint {
    min-width: 0;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.page-mapa .left-panel-top,
  #mapFilterDrawer.left-panel-top {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1320;
    display: flex;
    flex-direction: column;
    width: auto;
    max-height: none;
    overflow-y: auto;
    padding: 1rem !important;
    transform: translateY(-105%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
  }

  body.map-filter-drawer-open #mapFilterDrawer.left-panel-top {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .map-filter-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
  }

  .map-filter-drawer-header p {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 950;
  }

  .map-filter-drawer-header span {
    display: block;
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 750;
  }

  .map-filter-drawer-close {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(216, 229, 232, 0.95);
    border-radius: 1rem;
    background: #ffffff;
    color: #0f172a;
    font-size: 1.35rem;
    font-weight: 950;
    box-shadow: 0 10px 24px rgba(5, 8, 22, 0.08);
  }

  .map-filter-drawer-backdrop {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    z-index: 1310;
    background: rgba(2, 6, 23, 0.38);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  body.map-filter-drawer-open {
    overflow: hidden;
  }
}

@media (min-width: 1920px) {
  body.page-mapa.map-detail-panel-open .map-shell {
    right: var(--detail-panel-width, 380px);
  }

  body.page-mapa.map-detail-panel-open .map-credit {
    right: 1rem;
  }
}


/* v038.1: laptop/desktop correction.
   The previous C036 shell kept filters and results stacked inside one sidebar,
   so only one provider card was visible on laptop-like screens. From 1200px up
   we split the left rail into two stable columns: filters + results. The map
   starts after both columns. The detail panel remains reserved for true
   extra-wide layouts only. */
@media (min-width: 1200px) {
  :root {
    --filter-rail-width: clamp(272px, 17vw, 314px);
    --results-rail-width: clamp(380px, 24vw, 430px);
    --sidebar-width: calc(var(--filter-rail-width) + var(--results-rail-width));
  }

  body.page-mapa .left-panel {
    width: var(--sidebar-width);
    display: grid;
    grid-template-columns: var(--filter-rail-width) var(--results-rail-width);
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  body.page-mapa #mapFilterDrawer.left-panel-top {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1 / 3;
    display: block;
    width: auto;
    min-width: 0;
    max-height: none;
    height: 100%;
    overflow-y: auto;
    padding: 0.75rem !important;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    border-right: 1px solid rgba(216, 229, 232, 0.95);
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  body.page-mapa .left-panel > .flex-none {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  body.page-mapa .left-panel > .results-scroll {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
  }

  body.page-mapa .map-shell {
    left: var(--sidebar-width);
  }

  body.page-mapa .map-filter-drawer-header {
    /* v038.6: desktop filters are no longer a transient drawer, but the
       header still carries important administrative filter actions such as
       "Limpiar filtros". Keep it compact and visible in the filter rail. */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.15rem 0 0.7rem;
  }

  body.page-mapa .tag-filter-list.is-collapsed {
    max-height: 104px;
  }
}

/* v038.1: mobile correction.
   In map view the list panel is display:none, so opening the drawer could show
   only the blurred backdrop. Force the parent panel to exist while the drawer
   is open and render the filters as a bottom sheet, which is easier to use on
   phones than a full-screen top sheet. */
@media (max-width: 1023px) {
  body.page-mapa #mapFilterDrawer.left-panel-top {
    top: auto;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
    width: auto;
    max-height: min(82vh, calc(100vh - var(--header-height) - 1.5rem));
    border: 1px solid rgba(216, 229, 232, 0.98);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 0 28px 80px rgba(5, 8, 22, 0.28);
    transform: translateY(112%);
  }

  body.page-mapa.map-filter-drawer-open .left-panel {
    display: flex !important;
    background: transparent;
    border-right: 0 !important;
    pointer-events: none;
  }

  body.page-mapa.map-filter-drawer-open #mapFilterDrawer.left-panel-top {
    transform: translateY(0);
    pointer-events: auto;
  }

  body.page-mapa.map-filter-drawer-open .map-mobile-toolbar,
  body.page-mapa.map-filter-drawer-open .left-panel > .flex-none,
  body.page-mapa.map-filter-drawer-open .left-panel > .results-scroll {
    pointer-events: none;
  }

  body.page-mapa .map-filter-drawer-backdrop {
    background: rgba(2, 6, 23, 0.34);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  body.page-mapa .map-filter-drawer-header {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: -1rem -1rem 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(216, 229, 232, 0.86);
    border-radius: 1.5rem 1.5rem 0 0;
    background: rgba(255, 255, 255, 0.98);
  }

  body.page-mapa .tag-filter-list.is-collapsed {
    max-height: 128px;
  }

  body.page-mapa .results-scroll {
    background: #f8fafc;
  }

  body.page-mapa .map-result-card {
    border-radius: 1.05rem !important;
  }

  body.page-mapa .map-result-card p.two-line {
    -webkit-line-clamp: 1;
  }

  body.page-mapa .local-tag-row {
    gap: 0.28rem;
  }

  body.page-mapa .local-tag-chip {
    padding: 0.28rem 0.45rem;
    font-size: 0.61rem;
  }
}

/* v038.2: responsive layout hardening.
   The Explore page has four possible modules (filters, results, map, detail),
   but not all screens can display all of them at once. These overrides enforce
   predictable breakpoints:
   - phone/tablet: list/map switch + filter sheet;
   - laptop/desktop: filters + results + map, with collapsible rails;
   - extra-wide: optional contextual detail rail.
   The collapses only change presentation; filter values, selection and results
   remain mounted in the DOM. */
@media (min-width: 1200px) {
  body.page-mapa.map-filters-collapsed {
    --filter-rail-width: 54px;
  }

  body.page-mapa.map-results-collapsed {
    --results-rail-width: 58px;
  }

  .map-rail-toggle {
    position: fixed;
    top: calc(var(--header-height) + 0.8rem);
    z-index: 910;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 2.45rem;
    min-height: 2.2rem;
    border: 1px solid rgba(216, 229, 232, 0.98);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.98);
    color: var(--map-accent-dark, #006f76);
    padding: 0.45rem 0.7rem;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.01em;
    box-shadow: 0 14px 36px rgba(5, 8, 22, 0.14);
    transition: left 0.18s ease, transform 0.18s ease, width 0.18s ease;
  }

  .map-rail-toggle:hover {
    transform: translateY(-1px);
  }

  .map-rail-toggle-filter {
    left: calc(var(--filter-rail-width) - 1.25rem);
  }

  .map-rail-toggle-results {
    left: calc(var(--filter-rail-width) + var(--results-rail-width) - 1.25rem);
  }

  .map-rail-toggle .is-collapsed {
    display: none;
  }

  body.page-mapa.map-filters-collapsed .map-rail-toggle-filter,
  body.page-mapa.map-results-collapsed .map-rail-toggle-results {
    top: calc(var(--header-height) + 1rem);
    width: 2.8rem;
    min-height: 6.8rem;
    border-radius: 1.1rem;
    padding: 0.65rem 0.35rem;
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }

  body.page-mapa.map-filters-collapsed .map-rail-toggle-filter {
    left: 0.45rem;
  }

  body.page-mapa.map-results-collapsed .map-rail-toggle-results {
    left: calc(var(--filter-rail-width) + 0.45rem);
  }

  body.page-mapa.map-filters-collapsed .map-rail-toggle-filter .is-expanded,
  body.page-mapa.map-results-collapsed .map-rail-toggle-results .is-expanded {
    display: none;
  }

  body.page-mapa.map-filters-collapsed .map-rail-toggle-filter .is-collapsed,
  body.page-mapa.map-results-collapsed .map-rail-toggle-results .is-collapsed {
    display: inline;
  }

  body.page-mapa.map-filters-collapsed #mapFilterDrawer.left-panel-top {
    overflow: hidden;
    padding: 0 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbfc 100%);
  }

  body.page-mapa.map-filters-collapsed #mapFilterDrawer.left-panel-top > * {
    visibility: hidden;
    pointer-events: none;
  }

  body.page-mapa.map-results-collapsed .left-panel > .flex-none,
  body.page-mapa.map-results-collapsed .left-panel > .results-scroll {
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 1199px) {
  .map-rail-toggle {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  /* Keep the left panel mounted even in map mode so the fixed filter sheet can
     open from either map or list. Only the list/result chrome is hidden when the
     user is in map mode. */
  body.page-mapa.responsive-map-view .left-panel {
    display: flex;
    background: transparent;
    border-right: 0 !important;
    box-shadow: none;
    pointer-events: none;
  }

  body.page-mapa.responsive-map-view:not(.map-filter-drawer-open) .map-mobile-toolbar,
  body.page-mapa.responsive-map-view:not(.map-filter-drawer-open) .left-panel > .flex-none,
  body.page-mapa.responsive-map-view:not(.map-filter-drawer-open) .left-panel > .results-scroll {
    display: none;
  }

  body.page-mapa.responsive-map-view .map-shell {
    visibility: visible;
    pointer-events: auto;
  }

  body.page-mapa #mapFilterDrawer.left-panel-top {
    top: calc(var(--header-height) + 0.75rem);
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
    width: auto;
    max-height: none;
    border: 1px solid rgba(216, 229, 232, 0.98);
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.995);
    box-shadow: 0 28px 80px rgba(5, 8, 22, 0.30);
    transform: translateY(112%);
    pointer-events: none;
  }

  body.page-mapa.map-filter-drawer-open #mapFilterDrawer.left-panel-top {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .map-filter-drawer-footer {
    position: sticky;
    bottom: -1rem;
    z-index: 2;
    margin: 0.8rem -1rem -1rem;
    padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(216, 229, 232, 0.9);
    background: rgba(255, 255, 255, 0.98);
  }

  .map-filter-drawer-apply {
    display: inline-flex;
    width: 100%;
    min-height: 2.9rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 1rem;
    background: var(--map-accent-dark, #006f76);
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 950;
    box-shadow: 0 12px 28px rgba(0, 118, 129, 0.18);
  }

  .map-floating-filter-button {
    position: fixed;
    left: 0.75rem;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    z-index: 1210;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.94);
    color: #ffffff;
    padding: 0.78rem 1.05rem;
    font-size: 0.82rem;
    font-weight: 950;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.24);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body.page-mapa.responsive-map-view .map-floating-filter-button {
    display: inline-flex;
  }

  body.page-mapa.map-filter-drawer-open .map-floating-filter-button {
    display: none;
  }

  body.page-mapa.map-filter-drawer-open .responsive-view-toggle,
  body.page-mapa.map-filter-drawer-open .map-detail-panel,
  body.page-mapa.map-filter-drawer-open .map-photo-tray,
  body.page-mapa.map-filter-drawer-open .photo-tray-restore {
    display: none !important;
  }

  body.page-mapa .map-mobile-toolbar {
    min-height: 5rem;
    align-items: center;
  }

  body.page-mapa .map-mobile-toolbar-hint {
    text-align: right;
  }

  body.page-mapa .results-scroll {
    padding-bottom: 112px;
  }

  body.page-mapa .map-result-card {
    margin-inline: 0.05rem;
  }
}

/* v038.2 safety: map-mode filter trigger is mobile-only. */
.map-floating-filter-button {
  display: none;
}

/* v038.3: responsive usability refinement.
   Good map/search products keep secondary rails collapsible through compact
   edge handles, not large floating text pills that steal map space. These
   overrides turn Filters/List into small, persistent tabs and ensure the map
   recalculates against the actual collapsed sidebar width. */
@media (min-width: 1024px) {
  :root {
    --filter-rail-width: clamp(248px, 17vw, 304px);
    --results-rail-width: clamp(352px, 25vw, 430px);
    --sidebar-width: calc(var(--filter-rail-width) + var(--results-rail-width));
  }

  body.page-mapa .left-panel {
    width: var(--sidebar-width);
    display: grid;
    grid-template-columns: var(--filter-rail-width) var(--results-rail-width);
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    transition: width 0.18s ease;
  }

  body.page-mapa #mapFilterDrawer.left-panel-top {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1 / 3;
    display: block;
    width: auto;
    min-width: 0;
    max-height: none;
    height: 100%;
    overflow-y: auto;
    padding: 0.75rem !important;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    border-right: 1px solid rgba(216, 229, 232, 0.95);
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  body.page-mapa .left-panel > .flex-none {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  body.page-mapa .left-panel > .results-scroll {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
  }

  body.page-mapa .map-shell {
    left: var(--sidebar-width);
    transition: left 0.18s ease, right 0.18s ease;
  }

  body.page-mapa.map-filters-collapsed {
    --filter-rail-width: 46px;
  }

  body.page-mapa.map-results-collapsed {
    --results-rail-width: 50px;
  }

  .map-rail-toggle {
    position: fixed;
    top: calc(var(--header-height) + 0.7rem);
    z-index: 930;
    display: inline-flex;
    width: 2.15rem;
    height: 3.6rem;
    min-width: 2.15rem;
    min-height: 3.6rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(216, 229, 232, 0.98);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.98);
    color: var(--map-accent-dark, #006f76);
    padding: 0;
    box-shadow: 0 12px 32px rgba(5, 8, 22, 0.13);
    transition: left 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
  }

  .map-rail-toggle:hover {
    transform: translateY(-1px);
    background: #ffffff;
  }

  .map-rail-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .map-rail-toggle-icon::before {
    display: block;
    font-size: 1.2rem;
    font-weight: 950;
    line-height: 1;
  }

  .map-rail-toggle-filter {
    left: calc(var(--filter-rail-width) - 1.05rem);
  }

  .map-rail-toggle-results {
    left: calc(var(--filter-rail-width) + var(--results-rail-width) - 1.05rem);
  }

  .map-rail-toggle-filter .map-rail-toggle-icon::before,
  .map-rail-toggle-results .map-rail-toggle-icon::before {
    content: "‹";
  }

  body.page-mapa.map-filters-collapsed .map-rail-toggle-filter,
  body.page-mapa.map-results-collapsed .map-rail-toggle-results {
    top: calc(var(--header-height) + 1rem);
    width: 2.3rem;
    height: 6.5rem;
    min-width: 2.3rem;
    min-height: 6.5rem;
    border-radius: 1rem;
    writing-mode: vertical-rl;
  }

  body.page-mapa.map-filters-collapsed .map-rail-toggle-filter {
    left: 0.35rem;
  }

  body.page-mapa.map-results-collapsed .map-rail-toggle-results {
    left: calc(var(--filter-rail-width) + 0.35rem);
  }

  body.page-mapa.map-filters-collapsed .map-rail-toggle-filter .map-rail-toggle-icon::before,
  body.page-mapa.map-results-collapsed .map-rail-toggle-results .map-rail-toggle-icon::before {
    content: "›";
  }

  body.page-mapa.map-filters-collapsed .map-rail-toggle-filter .is-collapsed,
  body.page-mapa.map-results-collapsed .map-rail-toggle-results .is-collapsed {
    position: static;
    width: auto;
    height: auto;
    margin-top: 0.35rem;
    overflow: visible;
    clip: auto;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  body.page-mapa.map-filters-collapsed #mapFilterDrawer.left-panel-top {
    overflow: hidden;
    padding: 0 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbfc 100%);
  }

  body.page-mapa.map-filters-collapsed #mapFilterDrawer.left-panel-top > * {
    visibility: hidden;
    pointer-events: none;
  }

  body.page-mapa.map-results-collapsed .left-panel > .flex-none,
  body.page-mapa.map-results-collapsed .left-panel > .results-scroll {
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }
}

/* v038.3: mobile drawer hardening. The previous backdrop could sit above the
   drawer because the parent left panel had a lower stacking context; the result
   looked like a blurred, unusable filter screen. Raise the rail during drawer
   mode and keep the sheet fully opaque. */
@media (max-width: 1023px) {
  body.page-mapa.map-filter-drawer-open .left-panel {
    z-index: 1330;
  }

  body.page-mapa #mapFilterDrawer.left-panel-top {
    z-index: 1340;
    background: #ffffff;
  }

  body.page-mapa .map-filter-drawer-backdrop {
    z-index: 1310;
    background: rgba(2, 6, 23, 0.30);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (min-width: 1024px) {
  /* v038.3 override for the previous <=1199 safeguard: intermediate desktop
     widths now use the same collapsible rail model as laptop widths. */
  .map-rail-toggle {
    display: inline-flex !important;
  }
}

/* v038.4: rail polish and deterministic layout recalculation.
   Large map/search products typically use compact edge handles for secondary
   panes. The handles below are intentionally icon-first and brand-colored: they
   free map space without putting large text pills over the content. Widths are
   defined on body so the left panel and map shell always resolve the same
   values when filters/results are collapsed. */
@media (min-width: 1024px) {
  body.page-mapa {
    --filter-rail-width: clamp(280px, 19vw, 340px);
    --results-rail-width: clamp(390px, 26vw, 460px);
    --sidebar-width: calc(var(--filter-rail-width) + var(--results-rail-width));
  }

  body.page-mapa.map-filters-collapsed {
    --filter-rail-width: 36px;
  }

  body.page-mapa.map-results-collapsed {
    --results-rail-width: 40px;
  }

  body.page-mapa .left-panel {
    width: calc(var(--filter-rail-width) + var(--results-rail-width)) !important;
    grid-template-columns: var(--filter-rail-width) var(--results-rail-width) !important;
  }

  body.page-mapa .map-shell {
    left: calc(var(--filter-rail-width) + var(--results-rail-width)) !important;
  }

  .map-filter-drawer-footer {
    display: none !important;
  }

  .map-rail-toggle {
    width: 1.85rem !important;
    height: 3rem !important;
    min-width: 1.85rem !important;
    min-height: 3rem !important;
    border-color: rgba(4, 212, 203, 0.46) !important;
    background: var(--map-accent-dark, #007681) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(0, 118, 129, 0.22) !important;
  }

  .map-rail-toggle:hover {
    background: #005d63 !important;
  }

  .map-rail-toggle-filter,
  .map-rail-toggle-results {
    transform: translateX(-50%);
  }

  .map-rail-toggle-filter:hover,
  .map-rail-toggle-results:hover {
    transform: translateX(-50%) translateY(-1px);
  }

  .map-rail-toggle-filter {
    left: var(--filter-rail-width) !important;
  }

  .map-rail-toggle-results {
    left: calc(var(--filter-rail-width) + var(--results-rail-width)) !important;
  }

  body.page-mapa.map-filters-collapsed .map-rail-toggle-filter,
  body.page-mapa.map-results-collapsed .map-rail-toggle-results {
    width: 1.9rem !important;
    height: 5.3rem !important;
    min-width: 1.9rem !important;
    min-height: 5.3rem !important;
    border-radius: 0.95rem !important;
    transform: none;
  }

  body.page-mapa.map-filters-collapsed .map-rail-toggle-filter:hover,
  body.page-mapa.map-results-collapsed .map-rail-toggle-results:hover {
    transform: translateY(-1px);
  }

  body.page-mapa.map-filters-collapsed .map-rail-toggle-filter {
    left: 0.3rem !important;
  }

  body.page-mapa.map-results-collapsed .map-rail-toggle-results {
    left: calc(var(--filter-rail-width) + 0.3rem) !important;
  }

  body.page-mapa.map-filters-collapsed .map-rail-toggle-filter .is-collapsed,
  body.page-mapa.map-results-collapsed .map-rail-toggle-results .is-collapsed {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  body.page-mapa.map-filters-collapsed #mapFilterDrawer.left-panel-top,
  body.page-mapa.map-results-collapsed .left-panel > .flex-none,
  body.page-mapa.map-results-collapsed .left-panel > .results-scroll {
    background: linear-gradient(180deg, #f8ffff 0%, #eef8f9 100%) !important;
  }
}

@media (max-width: 1023px) {
  .map-mobile-filter-button,
  .map-floating-filter-button {
    border-color: rgba(4, 212, 203, 0.36) !important;
    background: var(--map-accent-dark, #007681) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 36px rgba(0, 118, 129, 0.22) !important;
  }

  .map-filter-drawer-footer {
    display: block;
  }
}

/* v038.5: clearer rail tabs + filter clear controls.
   Collapsed rails must communicate what is hidden (filters/list) and expose
   compact status badges without stealing map space. Primary filters get local
   clear buttons; clear-all stays as a small header action. */
.map-filter-drawer-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 auto;
}

.map-filter-clear-all-button {
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(216, 229, 232, 0.95);
  border-radius: 0.9rem;
  background: #ffffff;
  color: #334155;
  padding: 0 0.8rem;
  font-size: 0.72rem;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(5, 8, 22, 0.06);
}

.map-filter-clear-all-button:hover {
  background: #f8fafc;
  color: #0f172a;
}

.map-filter-clear-all-button[hidden] {
  display: none !important;
}

.map-filter-field {
  position: relative;
}

.map-filter-select-field {
  display: block;
}

.map-filter-inline-clear {
  display: inline-flex;
  width: 1.6rem;
  height: 1.6rem;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid rgba(216, 229, 232, 0.95);
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(5, 8, 22, 0.06);
}

.map-filter-select-field .map-filter-inline-clear {
  position: absolute;
  top: 50%;
  right: 0.45rem;
  transform: translateY(-50%);
}

.map-filter-inline-clear:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.map-filter-inline-clear[hidden] {
  display: none !important;
}

@media (max-width: 1023px) {
  body.page-mapa .map-filter-drawer-header {
    position: relative;
    top: auto;
    z-index: 1;
    margin: -1rem -1rem 0.9rem;
    padding: 1rem 1rem 0.95rem;
  }

  .map-filter-drawer-close {
    border-color: rgba(0, 118, 129, 0.42) !important;
    background: var(--map-accent-dark, #007681) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(0, 118, 129, 0.22) !important;
  }

  .map-filter-clear-all-button {
    min-height: 2.35rem;
    background: #f8ffff;
  }
}

@media (min-width: 1024px) {
  .map-rail-toggle {
    overflow: hidden;
  }

  .map-rail-toggle .is-expanded {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  body.page-mapa.map-filters-collapsed .map-rail-toggle-filter,
  body.page-mapa.map-results-collapsed .map-rail-toggle-results {
    width: 2.15rem !important;
    min-width: 2.15rem !important;
    height: 7.1rem !important;
    min-height: 7.1rem !important;
    padding: 0.45rem 0.25rem !important;
    overflow: visible;
  }

  body.page-mapa.map-filters-collapsed .map-rail-toggle-filter .is-collapsed,
  body.page-mapa.map-results-collapsed .map-rail-toggle-results .is-collapsed {
    position: static !important;
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    overflow: visible !important;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
    writing-mode: vertical-rl;
  }

  .map-rail-toggle-badge {
    display: inline-flex;
    min-width: 1.35rem;
    height: 1.35rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--map-accent-dark, #006f76);
    font-size: 0.65rem;
    font-weight: 950;
    line-height: 1;
    writing-mode: horizontal-tb;
  }

  .map-rail-toggle-badge[hidden] {
    display: none !important;
  }
}


/* v038.6: map filter continuity and cleanup affordances.
   Clear-all must be visible in desktop and mobile when active, while each
   primary filter keeps its own local X. */
body.page-mapa .map-filter-drawer-header p {
  margin: 0;
  color: #0f172a;
  font-size: 0.82rem;
  font-weight: 950;
}

body.page-mapa .map-filter-drawer-header span {
  display: block;
  margin-top: 0.18rem;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.25;
}

body.page-mapa .map-filter-clear-all-button {
  gap: 0.35rem;
  border-color: rgba(0, 118, 129, 0.26);
  background: rgba(0, 118, 129, 0.08);
  color: var(--map-accent-dark, #007681);
  white-space: nowrap;
}

body.page-mapa .map-filter-clear-all-button:hover {
  background: var(--map-accent-dark, #007681);
  color: #ffffff;
}

@media (max-width: 1023px) {
  body.page-mapa .map-filter-clear-all-button {
    min-height: 2.5rem;
    border-color: rgba(0, 118, 129, 0.36);
    background: rgba(0, 118, 129, 0.1);
  }
}


/* v038.7: final responsive polish for C036.
   This section intentionally uses tokenized CSS variables instead of rewriting
   the Explore page structure. It tightens laptop rails, keeps the map dominant,
   compacts result cards on low-height laptops, and preserves the existing
   collapsible-rail behavior without resetting filters, selection or scroll. */
@media (min-width: 1024px) and (max-width: 1439px) {
  body.page-mapa {
    --filter-rail-width: clamp(238px, 22vw, 268px);
    --results-rail-width: clamp(320px, 32vw, 372px);
  }
}

@media (min-width: 1440px) and (max-width: 1679px) {
  body.page-mapa {
    --filter-rail-width: clamp(252px, 18vw, 286px);
    --results-rail-width: clamp(344px, 25vw, 396px);
  }
}

@media (min-width: 1680px) {
  body.page-mapa {
    --filter-rail-width: clamp(272px, 17vw, 306px);
    --results-rail-width: clamp(372px, 24vw, 420px);
  }
}

@media (min-width: 1024px) {
  body.page-mapa.map-filters-collapsed {
    --filter-rail-width: 40px;
  }

  body.page-mapa.map-results-collapsed {
    --results-rail-width: 42px;
  }

  body.page-mapa .left-panel {
    width: calc(var(--filter-rail-width) + var(--results-rail-width)) !important;
    grid-template-columns: var(--filter-rail-width) var(--results-rail-width) !important;
  }

  body.page-mapa .map-shell {
    left: calc(var(--filter-rail-width) + var(--results-rail-width)) !important;
  }

  /* Compact desktop filter controls: keep the controls readable while avoiding
     a large filter rail on 13–16 inch laptop screens. */
  body.page-mapa #mapFilterDrawer.left-panel-top {
    padding: 0.65rem !important;
  }

  body.page-mapa #searchInput,
  body.page-mapa #locationInput,
  body.page-mapa #categorySelect {
    min-height: 2.45rem;
  }

  body.page-mapa .map-filter-drawer-header {
    padding-bottom: 0.55rem;
  }
}

@media (min-width: 1024px) and (max-height: 820px) {
  /* Low-height laptops need a denser list so users can compare more providers
     without immediately collapsing rails. */
  body.page-mapa .left-panel > .flex-none {
    padding-block: 0.42rem !important;
  }

  body.page-mapa .results-scroll {
    padding: 0.55rem !important;
  }

  body.page-mapa .map-result-card {
    padding: 0.72rem !important;
    border-radius: 1rem !important;
  }

  body.page-mapa .local-thumb {
    width: 58px;
    height: 58px;
    border-radius: 0.85rem;
  }

  body.page-mapa .map-result-card h3 {
    font-size: 0.9rem !important;
  }

  body.page-mapa .map-result-card p.two-line {
    -webkit-line-clamp: 1;
  }

  body.page-mapa .map-result-card .mt-2\.5 {
    margin-top: 0.45rem !important;
  }
}

@media (max-width: 1023px) {
  /* Preserve the comfortable mobile filter sheet from v038.6. The close button
     remains visually primary because it exits a modal-like task. */
  body.page-mapa .map-filter-drawer-close {
    background: var(--map-accent-dark, #007681) !important;
    color: #ffffff !important;
  }
}


/* v038.8 responsive consolidation layer.
   This final layer normalizes the accumulated v038 hotfixes into one effective
   breakpoint behavior without changing the DOM model: compact screens use
   sheet/drawer patterns, laptops keep filters + results + map, and optional
   quick view is handled by map-detail-panel.css. */
@media (min-width: 1024px) and (max-width: 1199px) {
  body.page-mapa {
    --filter-rail-width: 230px;
    --results-rail-width: 318px;
  }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  body.page-mapa {
    --filter-rail-width: clamp(238px, 19vw, 262px);
    --results-rail-width: clamp(320px, 28vw, 362px);
  }
}

@media (min-width: 1440px) and (max-width: 1679px) {
  body.page-mapa {
    --filter-rail-width: clamp(248px, 17vw, 276px);
    --results-rail-width: clamp(340px, 24vw, 388px);
  }
}

@media (min-width: 1680px) {
  body.page-mapa {
    --filter-rail-width: clamp(268px, 16vw, 300px);
    --results-rail-width: clamp(366px, 23vw, 418px);
  }
}

@media (min-width: 1024px) {
  body.page-mapa .left-panel {
    width: calc(var(--filter-rail-width) + var(--results-rail-width)) !important;
    grid-template-columns: var(--filter-rail-width) var(--results-rail-width) !important;
  }

  body.page-mapa .map-shell {
    left: calc(var(--filter-rail-width) + var(--results-rail-width)) !important;
  }

  body.page-mapa.map-filters-collapsed {
    --filter-rail-width: 40px;
  }

  body.page-mapa.map-results-collapsed {
    --results-rail-width: 42px;
  }

  .map-active-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.55rem;
  }

  .map-active-filter-chip {
    display: inline-flex;
    min-height: 1.75rem;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid rgba(0, 118, 129, 0.22);
    border-radius: 999px;
    background: rgba(0, 118, 129, 0.08);
    color: var(--map-accent-dark, #007681);
    padding: 0.25rem 0.55rem;
    font-size: 0.66rem;
    font-weight: 950;
  }

  .map-active-filter-chip strong {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    line-height: 1;
  }
}

@media (max-width: 1023px) {
  .map-active-filter-chips {
    display: none;
  }
}


/* v038.9: professional rail tabs and reset affordance.
   The filter/list collapse controls now behave like attached map tabs instead
   of floating pills. When both rails are collapsed, the tabs visually stack as
   one compact control group near the left edge. */
body.page-mapa .map-filter-clear-all-button {
  border-color: rgba(0, 118, 129, 0.16);
  background: linear-gradient(180deg, #ffffff, #f8ffff);
  color: var(--map-accent-dark, #006f76);
}

body.page-mapa .map-filter-clear-all-button span:first-child {
  display: grid;
  width: 1.15rem;
  height: 1.15rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(0, 118, 129, 0.08);
  font-size: 0.72rem;
}

@media (min-width: 1200px) {
  body.page-mapa .map-rail-toggle {
    border-radius: 0 1rem 1rem 0 !important;
    border-left: 0 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: #0f172a !important;
    box-shadow: 0 16px 38px rgba(5, 8, 22, 0.14) !important;
  }

  body.page-mapa .map-rail-toggle-filter {
    left: calc(var(--filter-rail-width) - 0.05rem) !important;
  }

  body.page-mapa .map-rail-toggle-results {
    left: calc(var(--filter-rail-width) + var(--results-rail-width) - 0.05rem) !important;
  }

  body.page-mapa .map-rail-toggle-icon::before {
    content: none !important;
  }

  body.page-mapa .map-rail-toggle-icon {
    display: grid;
    width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    border-radius: 0.55rem;
    background: #f1f5f9;
    color: var(--map-accent-dark, #006f76);
    font-size: 0.84rem;
    font-weight: 950;
    line-height: 1;
  }

  body.page-mapa.map-filters-collapsed .map-rail-toggle-filter,
  body.page-mapa.map-results-collapsed .map-rail-toggle-results {
    width: 2.75rem !important;
    min-width: 2.75rem !important;
    height: 8rem !important;
    min-height: 8rem !important;
    border-radius: 0 1.05rem 1.05rem 0 !important;
    background: linear-gradient(180deg, var(--map-accent-dark, #007681), #005d63) !important;
    color: #ffffff !important;
  }

  body.page-mapa.map-filters-collapsed .map-rail-toggle-filter .map-rail-toggle-icon,
  body.page-mapa.map-results-collapsed .map-rail-toggle-results .map-rail-toggle-icon {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
  }

  body.page-mapa.map-filters-collapsed .map-rail-toggle-filter .is-collapsed,
  body.page-mapa.map-results-collapsed .map-rail-toggle-results .is-collapsed {
    color: #ffffff;
  }

  body.page-mapa.map-filters-collapsed.map-results-collapsed .map-rail-toggle-filter {
    top: calc(var(--header-height) + 1rem) !important;
    left: 0 !important;
    border-radius: 0 1.05rem 0 0 !important;
  }

  body.page-mapa.map-filters-collapsed.map-results-collapsed .map-rail-toggle-results {
    top: calc(var(--header-height) + 9rem) !important;
    left: 0 !important;
    border-radius: 0 0 1.05rem 0 !important;
    border-top-color: rgba(255, 255, 255, 0.18) !important;
  }
}


/* v038.10: rail layout refinement.
   Expanded desktop rails reserve a real control space at the top-right of each
   column. When both rails collapse, only one compact tinted strip remains and
   the map reclaims the second column entirely. */
@media (min-width: 1200px) {
  body.page-mapa {
    --map-rail-collapsed-strip: 48px;
  }

  body.page-mapa .left-panel {
    position: fixed;
  }

  body.page-mapa .map-filter-drawer-header,
  body.page-mapa .left-panel > .flex-none {
    padding-top: 2.7rem;
    position: relative;
  }

  body.page-mapa .map-filter-drawer-header-actions {
    align-items: flex-start;
  }

  body.page-mapa .map-rail-toggle {
    top: calc(var(--header-height) + 0.6rem) !important;
    width: 2rem !important;
    min-width: 2rem !important;
    height: 2rem !important;
    min-height: 2rem !important;
    padding: 0 !important;
    border-radius: 0.85rem !important;
    border: 1px solid rgba(0, 118, 129, 0.14) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    color: #0f172a !important;
    box-shadow: 0 12px 26px rgba(5, 8, 22, 0.12) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  body.page-mapa .map-rail-toggle-filter {
    left: calc(var(--filter-rail-width) - 2.45rem) !important;
  }

  body.page-mapa .map-rail-toggle-results {
    left: calc(var(--filter-rail-width) + var(--results-rail-width) - 2.45rem) !important;
  }

  body.page-mapa .map-rail-toggle-label.is-expanded {
    display: none !important;
  }

  body.page-mapa .map-rail-toggle-icon {
    width: 1.18rem;
    height: 1.18rem;
    border-radius: 0.55rem;
    background: #edf6f7;
    color: var(--map-accent-dark, #006f76);
    font-size: 0;
    position: relative;
  }

  body.page-mapa .map-rail-toggle-filter .map-rail-toggle-icon::before,
  body.page-mapa .map-rail-toggle-results .map-rail-toggle-icon::before {
    content: "‹";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1rem;
    line-height: 1;
    font-weight: 950;
  }

  body.page-mapa .map-rail-toggle-results .map-rail-toggle-icon::before {
    content: "›";
  }

  body.page-mapa .map-filter-clear-all-button {
    min-height: 2.4rem;
    padding-inline: 0.9rem;
    border-radius: 999px;
  }

  body.page-mapa.map-filters-collapsed .map-rail-toggle-filter,
  body.page-mapa.map-results-collapsed .map-rail-toggle-results {
    width: 2.8rem !important;
    min-width: 2.8rem !important;
    height: 7.25rem !important;
    min-height: 7.25rem !important;
    border-radius: 0 1rem 1rem 0 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: linear-gradient(180deg, var(--map-accent-dark, #007681), #00565d) !important;
    color: #ffffff !important;
  }

  body.page-mapa.map-filters-collapsed .map-rail-toggle-filter .map-rail-toggle-icon,
  body.page-mapa.map-results-collapsed .map-rail-toggle-results .map-rail-toggle-icon {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
  }

  body.page-mapa.map-filters-collapsed .map-rail-toggle-filter .map-rail-toggle-icon::before {
    content: "☰";
    font-size: 0.8rem;
  }

  body.page-mapa.map-results-collapsed .map-rail-toggle-results .map-rail-toggle-icon::before {
    content: "▦";
    font-size: 0.82rem;
  }

  body.page-mapa.map-filters-collapsed.map-results-collapsed {
    --filter-rail-width: var(--map-rail-collapsed-strip);
    --results-rail-width: 0px;
  }

  body.page-mapa.map-filters-collapsed.map-results-collapsed .left-panel {
    width: var(--map-rail-collapsed-strip) !important;
    grid-template-columns: var(--map-rail-collapsed-strip) 0px !important;
    background: linear-gradient(180deg, #e7f3f5 0%, #d7e9ed 100%) !important;
    border-right-color: rgba(0, 118, 129, 0.18) !important;
  }

  body.page-mapa.map-filters-collapsed.map-results-collapsed #mapFilterDrawer,
  body.page-mapa.map-filters-collapsed.map-results-collapsed .left-panel > .flex-none,
  body.page-mapa.map-filters-collapsed.map-results-collapsed .left-panel > .results-scroll {
    width: 0 !important;
    min-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    border-right: 0 !important;
  }

  body.page-mapa.map-filters-collapsed.map-results-collapsed .map-shell {
    left: var(--map-rail-collapsed-strip) !important;
  }

  body.page-mapa.map-filters-collapsed.map-results-collapsed .map-rail-toggle-filter {
    top: calc(var(--header-height) + 1rem) !important;
    left: 0 !important;
    border-radius: 0 1rem 0 0 !important;
  }

  body.page-mapa.map-filters-collapsed.map-results-collapsed .map-rail-toggle-results {
    top: calc(var(--header-height) + 8.18rem) !important;
    left: 0 !important;
    border-radius: 0 0 1rem 0 !important;
    border-top-color: rgba(255, 255, 255, 0.2) !important;
  }
}


/* v038.11: final polish for reset + collapse affordances.
   Improve contrast of rail icons, give Restablecer a friendlier accent style,
   and remove the redundant desktop close button beside the reset action. */
body.page-mapa .map-filter-clear-all-button {
  border-color: rgba(0, 118, 129, 0.22) !important;
  background: linear-gradient(180deg, #effafa 0%, #e3f3f4 100%) !important;
  color: #0b5b63 !important;
  box-shadow: 0 10px 24px rgba(0, 118, 129, 0.10) !important;
}

body.page-mapa .map-filter-clear-all-button span:first-child {
  background: rgba(0, 118, 129, 0.14) !important;
  color: #0b5b63 !important;
  font-size: 0.82rem !important;
  font-weight: 950;
}

body.page-mapa .map-filter-clear-all-button:hover {
  background: linear-gradient(180deg, #e7f6f7 0%, #d9eef0 100%) !important;
  color: #084c52 !important;
  box-shadow: 0 14px 28px rgba(0, 118, 129, 0.14) !important;
}

@media (min-width: 1024px) {
  body.page-mapa .map-filter-drawer-close {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  body.page-mapa .map-rail-toggle {
    border-color: rgba(0, 118, 129, 0.2) !important;
    background: rgba(252, 255, 255, 0.99) !important;
  }

  body.page-mapa .map-rail-toggle-icon {
    background: #d8edf0 !important;
    color: #0b5b63 !important;
    box-shadow: inset 0 0 0 1px rgba(0, 118, 129, 0.12);
  }

  body.page-mapa .map-rail-toggle-filter .map-rail-toggle-icon::before,
  body.page-mapa .map-rail-toggle-results .map-rail-toggle-icon::before {
    color: #0b5b63 !important;
    font-size: 1.08rem !important;
  }

  body.page-mapa.map-filters-collapsed .map-rail-toggle-filter .map-rail-toggle-icon,
  body.page-mapa.map-results-collapsed .map-rail-toggle-results .map-rail-toggle-icon {
    background: rgba(255, 255, 255, 0.24) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  }

  body.page-mapa.map-filters-collapsed .map-rail-toggle-filter .map-rail-toggle-icon::before,
  body.page-mapa.map-results-collapsed .map-rail-toggle-results .map-rail-toggle-icon::before {
    color: #ffffff !important;
    font-size: 0.9rem !important;
  }
}