/* ============================================================
   AgroSIG - responsive-layout.css
   Sistema adaptativo Mobile-First (móvil < 768px, tablet
   768-1024px, desktop > 1024px) + orientación portrait/landscape.
   ============================================================ */

/* ---------- 0) Tipografía y escala fluida ---------- */
:root {
  --fs-base: clamp(0.875rem, 0.8rem + 0.4vw, 1rem);
  --fs-sm: clamp(0.78rem, 0.72rem + 0.3vw, 0.875rem);
  --fs-lg: clamp(1rem, 0.9rem + 0.6vw, 1.25rem);
  --touch-target: 48px;             /* zona táctil mínima */
  --panel-w: clamp(280px, 32vw, 380px);
  --nav-h: clamp(56px, 8vh, 72px);
}

html { font-size: var(--fs-base); }
body { font-size: var(--fs-base); }

button, .map-fab-btn, .leaflet-bar a {
  min-width: var(--touch-target);
  min-height: var(--touch-target);
}

/* ============================================================
   1) MAPA LEAFLET - ocupa toda la pantalla real (dvh evita
   recortes con las barras del navegador en móviles)
   ============================================================ */
#map-container {
  position: fixed;
  inset: 0;
  top: var(--header-height, 0px);
  width: 100vw;
  height: 100dvh;               /* dynamic viewport height */
  height: calc(100dvh - var(--header-height, 0px));
  z-index: 50;
}
#map { width: 100%; height: 100%; }

/* Controles de Leaflet: zonas táctiles cómodas */
.leaflet-bar a,
.leaflet-control-zoom a,
.leaflet-control-layers-toggle {
  width: var(--touch-target) !important;
  height: var(--touch-target) !important;
  line-height: var(--touch-target) !important;
  font-size: 1.1rem;
}

/* ---------- Móvil (<768px): controles en columna táctil ---------- */
@media (max-width: 767px) {
  /* Zoom arriba-derecha, más pequeño pero táctil */
  .leaflet-top.leaflet-right { margin-top: 0.5rem; margin-right: 0.5rem; }

  /* FABs de herramientas en una sola columna a la derecha, sobre el navbar */
  .map-fab {
    right: 0.75rem !important;
    top: auto !important;
    bottom: calc(var(--nav-h) + 5.5rem);
    gap: 12px;
  }
  .map-fab-btn {
    width: var(--touch-target);
    height: var(--touch-target);
    font-size: clamp(0.95rem, 4vw, 1.1rem);
  }
  /* Submenú de edición se abre hacia la izquierda sin salirse */
  .fab-edit-menu {
    right: calc(var(--touch-target) + 12px) !important;
    left: auto !important;
    min-width: min(220px, 60vw);
  }

  /* Control GeoPDF raster: esquina superior izquierda, compacto */
  .geopdf-raster-control { max-width: 70vw; }

  /* Paneles laterales -> Bottom Sheet deslizable */
  .side-panel {
    top: auto !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 62dvh;
    border-radius: 1.25rem 1.25rem 0 0;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
  }
  .side-panel.visible,
  .side-panel:not(.hidden) { transform: translateY(0); }
  /* Manija visual para arrastrar */
  .side-panel::before {
    content: '';
    display: block;
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: var(--border-medium, #d1d5db);
    margin: 0.5rem auto 0;
  }
  .panel-content { max-height: calc(62dvh - 90px); }

  /* Modales: casi pantalla completa */
  .soporte-modal, .geopdf-modal, .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh;
    border-radius: 1rem 1rem 0 0;
    margin: 0;
  }
  .soporte-overlay, .geopdf-overlay, #conflictos-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
}

/* ---------- Tablet (768-1024px) ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
  .map-fab { right: 1rem; top: 1rem; }
  .side-panel { width: min(420px, 60vw); }

  /* Tablet en horizontal (tractor/vehículo): paneles laterales estrechos */
  @media (orientation: landscape) {
    .side-panel { width: min(360px, 40vw); }
    .map-fab { top: 0.75rem; }
  }
  /* Tablet en vertical: bottom sheet a media altura */
  @media (orientation: portrait) {
    .side-panel {
      top: auto; bottom: 0; left: 0; right: 0;
      width: 100% !important; height: auto; max-height: 55dvh;
      border-radius: 1.25rem 1.25rem 0 0;
      transform: translateY(100%);
    }
    .side-panel.visible, .side-panel:not(.hidden) { transform: translateY(0); }
  }
}

/* ---------- Desktop (>1024px): multi-panel, esquinas, tooltips ---------- */
@media (min-width: 1025px) {
  .map-fab { right: 1.25rem; top: 1.25rem; }
  .side-panel {
    width: var(--panel-w);
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border-left: 1px solid var(--border-light, #e5e7eb);
  }
  /* Tooltips con el mouse en los FABs */
  .map-fab-btn:hover::after {
    content: attr(title);
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: #1f2937;
    color: #fff;
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.4rem;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1200;
  }
  /* Paneles no deben tapar todo el ancho en pantallas grandes */
  .panel-content { max-height: none; }
}

/* ---------- Pantallas ultra-pequeñas (320px) ---------- */
@media (max-width: 360px) {
  :root { --touch-target: 44px; }
  .map-fab { gap: 8px; }
  .panel-header h3 { font-size: 1rem; }
}

/* ---------- Landscape en móvil (poca altura) ---------- */
@media (max-width: 767px) and (orientation: landscape) {
  #map-container { top: 0; height: 100dvh; }
  .map-fab { bottom: 1rem; flex-direction: row; right: 0.75rem; }
  .side-panel { max-height: 80dvh; }
}

/* ---------- Accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .side-panel, .map-fab-btn { transition: none !important; }
}