/* ==========================================================================
   projects.css — módulo "Proyectos": mapa Leaflet dedicado + panel lateral
   del poste (alta/edición con coordenadas manuales, GPS y marcador
   arrastrable) y adaptación a dispositivos móviles (relevamiento de campo).
   ========================================================================== */

/* --- Mapa + panel lateral: en desktop van lado a lado --- */
#projects-map-section {
  padding:6px; margin-top:8px; position:relative;
  display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap;
}
#projects-map {
  flex:1 1 420px; min-width:280px; width:100%;
  height:520px; border-radius:12px; overflow:hidden;
}
#projSidePanel {
  flex:0 0 340px; width:340px; max-width:380px;
  max-height:520px; overflow-y:auto;
  padding:16px 18px; margin:0;
}

/* Dentro del panel del poste, cada campo ocupa su propia línea (la etiqueta
   se apila sobre el control) — mismo patrón que `.modal-body label` /
   `.splice-form label`, pero el panel no es un modal. */
#projSidePanel label {
  display:flex; flex-direction:column; gap:4px;
  font-size:.82rem; color:var(--muted); margin:8px 0;
}
#projSidePanel label input,
#projSidePanel label select,
#projSidePanel label textarea { padding:8px 10px; color:#e2e8f0; }
#projSidePanel .row { margin:8px 0; }
#projSidePanel .row > label { flex:1 1 130px; margin:0; }

/* marcador arrastrable "punto en edición" del formulario de poste */
.pole-form-marker { background:none; border:none; font-size:26px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); }

/* --- Adaptación a dispositivos móviles (relevamiento de campo) --- */
@media (max-width:768px) {
  /* Las barras de acción quedan reducidas a una franja compacta y angosta
     (fila de botones en scroll horizontal en vez del toolbar apilado de
     escritorio) — no se anclan con "sticky" porque `.content-header`
     (layout.css) ya usa `position:sticky; top:0` en el mismo contenedor de
     scroll (`.main-content`); apilar otro elemento sticky ahí encima lo
     taparía. */
  #sec-projects .toolbar {
    gap:6px; padding:8px 10px; margin:0 0 6px;
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.35);
  }
  #sec-projects .toolbar > * { flex:0 0 auto; }
  #projDetailInfo { display:none; }   /* conteo textual: prescindible en la franja compacta */

  /* #projTraceBar, a diferencia del toolbar principal (fila de botones con
     scroll horizontal), necesita ajustar sus líneas (texto de ayuda +
     botones) para seguir siendo legible. */
  #projTraceBar.toolbar {
    flex-wrap:wrap; overflow-x:visible; white-space:normal;
  }
  #projTraceBar.toolbar > * { flex:0 1 auto; }
  #projTraceInfo { flex:1 1 100%; white-space:normal; }

  /* Pantalla dividida en dos zonas separadas y SIN superponerse: el mapa
     arriba con alto fijo (siempre 100% visible, ningún panel lo tapa) y el
     panel de datos del poste abajo, fuera del mapa, en flujo normal con su
     propio scroll — ni "bottom sheet" flotante ni overlay. */
  #projects-map-section {
    display:flex; flex-direction:column; gap:10px;
    padding:0; margin-top:6px; position:static;
  }
  #projects-map {
    width:100%; height:48vh; flex:0 0 auto; border-radius:12px;
  }
  #projSidePanel {
    position:static; width:100%; max-width:100%; flex:1 1 auto;
    max-height:48vh; overflow-y:auto; margin:0;
    border-radius:16px;
    box-shadow:0 10px 28px rgba(0,0,0,.4);
    padding:16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  /* Botones/controles de la barra del módulo: áreas de toque más grandes. */
  #sec-projects .toolbar button,
  #sec-projects .toolbar select,
  #projSidePanel button {
    padding:14px 16px; font-size:.9rem; min-height:48px;
  }

  /* Las trazas siguen abriendo un popup nativo de Leaflet sobre el mapa (los
     postes ya no: van directo al panel inferior, ver projects.js) — legible
     y sin desbordar el ancho de pantallas angostas. */
  #projects-map .leaflet-popup-content-wrapper { max-width:90vw; }
  #projects-map .leaflet-popup-content { max-width:82vw; max-height:35vh; overflow-y:auto; margin:10px 12px; }
}