/* =========================================================
   PAQARI INMOBILIARIA — Responsive
   Mapa Competitivo – Proyecto Samay

   Estructura actual del DOM:
     .map-wrapper
       └ .panel        (header + body + .panel__legend + footer)
       └ .summary-card (flotante arriba-derecha)
     .comparison-bar   (bajo el mapa)
     .bottom-sheet     (solo móvil)

   Breakpoints:
     >= 1600px   Desktop XL       panel y resumen amplios
     1200–1599   Desktop          layout base (styles.css)
     1024–1199   Laptop pequeño   panel compacto
      900–1023   Tablet paisaje   leyenda del panel reducida
      768– 899   Tablet retrato   resumen estrecho, leyenda mínima
      < 768      Móvil            bottom sheet (panel/leyenda/resumen dentro)
      < 375      Móvil pequeño    tipografía y barra comprimidas
     landscape corto (alto <= 500px) → UI mínima sobre el mapa

   En móvil, #summary-card y #legend se MUEVEN por JS dentro del
   bottom sheet (app.js → setupResponsiveLayout). De ahí las reglas
   duplicadas según contenedor: `.map-wrapper > X` vs `.bottom-sheet X`.
   ========================================================= */

/* ── Tipografía fluida del header ────────────────────────── */
.header__title {
  font-size: clamp(0.9375rem, 0.72rem + 0.95vw, 1.125rem);
}

.header__subtitle {
  font-size: clamp(0.6875rem, 0.6rem + 0.35vw, 0.8125rem);
}

/* ── Pantallas bajas: max-height 820px ───────────────────── */
@media (max-height: 820px) and (min-width: 768px) {
  /* La leyenda dentro del panel se reduce */
  .panel__legend {
    flex: 0 0 auto;
    max-height: 120px;
  }
}

/* ── Pantallas muy bajas: max-height 700px ───────────────── */
@media (max-height: 700px) and (min-width: 768px) {
  /* Ocultar leyenda del panel para dar espacio al footer */
  .panel__legend {
    display: none;
  }
  :root {
    --header-height: 56px;
  }
}

/* ── Desktop XL: >= 1600px ───────────────────────────────── */
@media (min-width: 1600px) {
  :root {
    --panel-width: 320px;
  }

  .summary-card {
    width: 260px;
  }
}

/* ── Desktop grande: 1440px – 1599px ─────────────────────── */
@media (min-width: 1440px) and (max-width: 1599px) {
  :root {
    --panel-width: 300px;
  }

  .summary-card {
    width: 240px;
  }
}

/* ── Laptop pequeño: <= 1199px ───────────────────────────── */
@media (max-width: 1199px) {
  :root {
    --panel-width: 244px;
    --header-height: 64px;
  }

  .header {
    padding: 0 var(--space-md);
  }

  .header__logo {
    margin-right: var(--space-lg);
  }

  .header__logo-img {
    height: 34px;
  }

  .summary-card {
    width: 200px;
  }

  .summary-card__name {
    font-size: var(--text-sm);
  }

  .panel__body {
    padding: var(--space-xs) var(--space-sm);
  }

  .project-check__label {
    font-size: var(--text-sm);
  }
}

/* ── Tablet paisaje: <= 1023px ───────────────────────────── */
@media (max-width: 1023px) {
  :root {
    --panel-width: 222px;
  }

  /* Solo nombre: ahorra altura vertical dentro del panel */
  .panel__legend-body .legend__address {
    display: none;
  }

  .summary-card {
    width: 186px;
  }

  .summary-card__stat-value {
    font-size: var(--text-xs);
  }
}

/* ── Tablet retrato: 768px – 899px ───────────────────────── */
@media (min-width: 768px) and (max-width: 899px) {
  :root {
    --panel-width: 206px;
  }

  .summary-card {
    width: 168px;
  }

  .summary-card__header {
    padding: var(--space-xs) var(--space-sm);
  }

  .summary-card__body {
    padding: var(--space-2xs) var(--space-sm);
  }
}

/* ── Móvil: < 768px ──────────────────────────────────────── */
@media (max-width: 767px) {
  :root {
    --header-height: 56px;
    --comparison-bar-height: 44px;
    --bottom-sheet-peek: 56px;
  }

  /* La página NO scrollea: scrollea el bottom sheet.
     Evita el salto de layout de la barra de URL móvil. */
  .app {
    height: 100vh;
    height: 100dvh;
  }

  .app__body {
    flex-direction: column;
    /* Deja libre la pestaña del sheet y la atribución de OSM */
    padding-bottom: var(--bottom-sheet-peek);
  }

  .map-wrapper,
  #map {
    height: 100%;
    width: 100%;
  }

  /* Header móvil */
  .header {
    padding: 0 var(--space-md);
    gap: var(--space-sm);
  }

  .header__logo {
    margin-right: 0;
  }

  .header__logo-img {
    height: 30px;
  }

  .header__logo-name {
    font-size: var(--text-base);
  }

  .header__logo-tagline,
  .header__subtitle {
    display: none;
  }

  /* Paneles flotantes fuera: su contenido va al bottom sheet */
  .panel {
    display: none !important;
  }

  .map-wrapper > .summary-card {
    display: none;
  }

  /* Bottom sheet activo */
  .bottom-sheet,
  .bottom-sheet-overlay {
    display: block;
  }

  /* Barra de comparación */
  .comparison-bar {
    padding: 0 var(--space-md);
    font-size: var(--text-xs);
    gap: var(--space-xs);
  }

  .comparison-bar__label {
    font-size: 0.625rem;
  }

  .comparison-bar__distance {
    font-size: 0.6875rem;
    padding: 2px 6px;
  }

  /* Popups y tooltips no deben desbordar la pantalla */
  .leaflet-popup-content {
    min-width: 0;
    width: auto !important;
    max-width: min(78vw, 280px);
  }

  .leaflet-tooltip {
    max-width: min(70vw, 220px);
  }

  /* ── Contenido del bottom sheet ── */
  .bottom-sheet__projects {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .bottom-sheet .project-check {
    padding: var(--space-xs);
    min-height: 44px;
  }

  .bottom-sheet .project-check__label {
    font-size: var(--text-base);
  }

  .bottom-sheet .btn {
    min-height: 44px;
    font-size: var(--text-base);
    flex: 1 1 auto;
  }

  .bottom-sheet .distance-toggle {
    min-height: 44px;
  }

  .bottom-sheet .distance-toggle__label {
    font-size: var(--text-base);
  }

  .bottom-sheet__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
  }

  .bottom-sheet__section-title {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--paqari-gray);
    margin-bottom: var(--space-xs);
    margin-top: var(--space-md);
  }

  .bottom-sheet__content > .bottom-sheet__section-title:first-child {
    margin-top: 0;
  }

  /* Resumen y leyenda reubicados dentro del sheet */
  .bottom-sheet .summary-card {
    position: static;
    inset: auto;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    border: 1px solid var(--paqari-light-gray);
    margin-bottom: var(--space-sm);
    transform: none;
    opacity: 1;
  }

  .bottom-sheet .summary-card--hidden {
    display: none;
  }

  /* display explícito: gana sobre la regla de landscape corto,
     que oculta la leyenda solo cuando vive dentro del panel */
  .bottom-sheet .panel__legend {
    display: block;
    border-top: none;
    max-height: none;
    margin-bottom: var(--space-sm);
  }

  .bottom-sheet .panel__legend-title {
    padding-inline: 0;
  }

  .bottom-sheet .panel__legend-body {
    padding-inline: 0;
  }

  .bottom-sheet .panel__legend-body .legend__name {
    font-size: var(--text-sm);
  }

  .bottom-sheet .panel__legend-body .legend__address {
    display: block;
    font-size: var(--text-xs);
  }
}

/* ── Móvil pequeño: < 375px ──────────────────────────────── */
@media (max-width: 374px) {
  :root {
    --header-height: 52px;
  }

  .header {
    padding: 0 var(--space-sm);
  }

  .header__logo-name {
    font-size: var(--text-sm);
    letter-spacing: 1px;
  }

  .comparison-bar {
    padding: 0 var(--space-sm);
    gap: var(--space-2xs);
  }

  /* "Comparando:" es redundante en el ancho mínimo */
  .comparison-bar__label {
    display: none;
  }

  .comparison-bar__projects {
    font-size: var(--text-xs);
  }

  .bottom-sheet__actions .btn {
    flex: 1 1 100%;
  }
}

/* ── Landscape corto (móvil girado): alto <= 500px ───────── */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --header-height: 48px;
    --bottom-sheet-peek: 44px;
  }

  .header__subtitle {
    display: none;
  }

  .header__logo-img {
    height: 26px;
  }

  .bottom-sheet {
    max-height: 92vh;
    max-height: 92dvh;
  }

  .bottom-sheet__content {
    max-height: calc(92dvh - 48px);
  }

  /* Con poca altura el panel ahoga el mapa */
  .panel {
    max-height: calc(100dvh - var(--header-height) - var(--space-md));
  }

  /* La leyenda es lo primero que sobra cuando falta altura */
  .panel__legend {
    display: none;
  }
}

/* ── Dispositivos táctiles: targets >= 44px ──────────────── */
@media (pointer: coarse) {
  .btn,
  .btn--sm {
    min-height: 44px;
    padding-inline: var(--space-sm);
    font-size: var(--text-sm);
  }

  .project-check,
  .distance-toggle {
    min-height: 44px;
  }

  .bottom-sheet__close {
    width: 44px;
    height: 44px;
  }

  .leaflet-control-zoom a {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: var(--text-xl) !important;
  }

  .leaflet-popup-close-button {
    width: 32px !important;
    height: 32px !important;
    font-size: var(--text-lg) !important;
    line-height: 30px !important;
  }
}

/* ── Impresión ───────────────────────────────────────────── */
@media print {
  .bottom-sheet,
  .bottom-sheet-overlay,
  .comparison-bar,
  .leaflet-control-zoom {
    display: none !important;
  }

  .app,
  .app__body,
  .map-wrapper {
    height: auto;
    overflow: visible;
  }

  #map {
    height: 60vh;
  }
}

/* ── Motion reducido ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}