/* ════════════════════════════════════════════════════════════
   BOSQUES COMUNALES – estilos propios de este portal

   app.css trae el sistema de diseño heredado de Espacios Verdes (layout,
   tarjetas, botones, formularios, tablas) para que los dos portales
   municipales se sientan de la misma familia. Todo lo que es específico del
   SIG vive acá, separado, para no ensuciar la base compartida.
   ════════════════════════════════════════════════════════════ */

/* El atributo `hidden` tiene que ganar siempre.
   Sin esto, cualquier regla de autor con `display:` (por ejemplo
   `.sig-carga { display:flex }`) le gana al `[hidden] { display:none }` de la
   hoja del navegador, y el panel queda visible aunque el HTML diga lo
   contrario. Es exactamente lo que pasaba con el panel de carga. */
[hidden] { display:none !important; }

/* ── Utilidades ── */
.ayuda { display:block; font-size:.7rem; color:var(--text-muted); margin-top:.15rem; line-height:1.35; }
.unidad { font-weight:400; color:var(--text-muted); font-size:.72rem; }
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.85rem; }
.btn-xs { padding:.22rem .55rem; font-size:.72rem; }
.chk-linea { display:flex; align-items:center; gap:.5rem; cursor:pointer; font-size:.85rem; }
.chk-linea input { width:17px; height:17px; cursor:pointer; accent-color:var(--accent); flex-shrink:0; }
.btn-icono { background:none; border:none; color:var(--text-muted); cursor:pointer;
  padding:.2rem .35rem; border-radius:6px; font-size:.9rem; }
.btn-icono:hover { color:var(--text); background:rgba(255,255,255,.06); }
.sep-campos { margin:1rem 0 .6rem; padding-bottom:.3rem; border-bottom:1px solid var(--border);
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); }
.sin-campos { font-size:.78rem; color:var(--text-muted); padding:.4rem 0; }
.form-dos-columnas { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1.25rem; align-items:start; }
@media(max-width:1100px) { .form-dos-columnas { grid-template-columns:minmax(0,1fr); } }

/* ── Marcas de visibilidad ── */
.punto-capa { display:inline-block; width:10px; height:10px; border-radius:50%;
  flex-shrink:0; margin-right:.15rem; vertical-align:middle; }
.tag-reservado, .tag-publico, .tag-interno {
  display:inline-flex; align-items:center; gap:.2rem; border-radius:99px;
  padding:.05rem .45rem; font-size:.63rem; font-weight:700; white-space:nowrap;
}
.tag-reservado { background:rgba(168,85,247,.15); color:#c084fc; border:1px solid rgba(168,85,247,.4); }
.tag-publico   { background:rgba(56,189,248,.12); color:#38bdf8; border:1px solid rgba(56,189,248,.35); }
.tag-interno   { background:rgba(107,114,128,.15); color:#9ca3af; border:1px solid rgba(107,114,128,.4); }

/* ── Pantalla de ingreso ── */
.pantalla-login { display:flex; align-items:center; justify-content:center; padding:1.5rem;
  min-height:100vh; background:radial-gradient(ellipse at top, #0d3329 0%, var(--bg-base) 60%); }
.login-caja { width:100%; max-width:400px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:2rem 1.75rem; box-shadow:var(--shadow); }
.login-marca { text-align:center; margin-bottom:1.75rem; }
.login-marca .logo-icon { margin:0 auto .85rem; background:var(--accent);
  display:flex; align-items:center; justify-content:center; border-radius:14px; }
.login-marca h1 { font-size:1.25rem; font-weight:700; }
.login-marca p { font-size:.74rem; color:var(--text-muted); margin-top:.2rem; }
.login-pie { margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--border);
  font-size:.72rem; color:var(--text-muted); text-align:center; line-height:1.5; }

.user-organismo { margin-top:.4rem; font-size:.68rem; color:var(--text-muted);
  display:flex; align-items:center; gap:.3rem; }

/* ════════════════════════════════════════════════════════════
   El SIG — pantalla de alto fijo

   Ojo con esta sección: la hoja heredada define `.layout`, `.main-content` y
   `.page-body` con min-height y flex:1, pensadas para páginas que crecen y
   scrollean. Acá se necesita lo contrario: una pantalla de alto fijo donde el
   único que scrollea es el panel de capas, y el mapa llena todo lo que sobra.
   Por eso se fuerza height (no min-height) en toda la cadena, y min-height:0
   en cada eslabón: sin eso, un ítem flex nunca se achica por debajo de su
   contenido y el panel de capas termina estirando la página entera.
   ════════════════════════════════════════════════════════════ */

body.modo-mapa { overflow:hidden; }
.modo-mapa .layout       { height:100vh; min-height:0; }
.modo-mapa .main-content { height:100vh; min-height:0; overflow:hidden; }
.modo-mapa .topbar       { flex-shrink:0; }
.modo-mapa .page-body-full { flex:1 1 auto; min-height:0; height:auto; padding:0; overflow:hidden; }

.sig { display:flex; height:100%; min-height:0; position:relative; }

.sig-capas { width:290px; flex-shrink:0; min-height:0; background:var(--bg-card);
  border-right:1px solid var(--border); display:flex; flex-direction:column;
  transition:margin-left .25s ease; }
.sig-capas.plegado { margin-left:-290px; }

/* Si el sistema pide menos movimiento, el panel se pliega de golpe.
   Además de ser lo correcto en accesibilidad, evita que el estado final
   dependa de que la animación llegue a destino. */
@media (prefers-reduced-motion: reduce) {
  .sig-capas { transition:none; }
}

.sig-panel-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.75rem .9rem; border-bottom:1px solid var(--border); flex-shrink:0; font-size:.88rem; }
.sig-panel-body { flex:1; min-height:0; overflow-y:auto; padding:.85rem .9rem; }
.sig-panel-pie { flex-shrink:0; padding:.75rem .9rem; border-top:1px solid var(--border);
  display:flex; gap:.6rem; justify-content:flex-end; background:var(--bg-card); }

.capas-acciones { display:flex; gap:.4rem; margin-bottom:.7rem; }
.lista-capas { list-style:none; display:flex; flex-direction:column; gap:.15rem; }
.lista-capas li { padding:.3rem .35rem; border-radius:7px; }
.lista-capas li:hover { background:rgba(255,255,255,.035); }
.lista-capas label { display:flex; align-items:center; gap:.45rem; cursor:pointer; font-size:.8rem; }
.lista-capas input[type=checkbox] { width:15px; height:15px; accent-color:var(--accent);
  flex-shrink:0; cursor:pointer; }
.lista-capas .capa-nombre { flex:1; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.lista-capas .capa-cuenta { font-size:.68rem; color:var(--text-muted); background:rgba(0,0,0,.3);
  border-radius:99px; padding:0 .4rem; min-width:22px; text-align:center; }
.lista-capas .tag-reservado, .lista-capas .tag-publico { margin-left:1.65rem; margin-top:.1rem; }

.sig-filtros { margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--border); }
.sig-filtros > strong { display:block; font-size:.78rem; margin-bottom:.6rem; }
.sig-filtros .form-group { margin-bottom:.6rem; }
.filtro-fechas { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }

.sig-mapa { flex:1; min-width:0; min-height:0; position:relative; }

/* app.css trae `#mapa { width:100%; height:400px }` para el mapa de calor de
   Espacios Verdes. Una altura explícita gana sobre el estirado por inset:0,
   así que hay que devolverla a auto para que el mapa llene el contenedor. */
#mapa { position:absolute; inset:0; width:auto; height:auto;
  border-radius:0; background:var(--bg-base); }

/* ── Mapa maximizado ──────────────────────────────────────────
   Esconde el menú lateral y la barra superior: el mapa pasa a ocupar la
   ventana entera. Los paneles de capas y de carga siguen funcionando, así
   que se puede dibujar y cargar sin salir del modo. Se restaura con el mismo
   botón o con Escape. */
.mapa-max .sidebar,
.mapa-max .sidebar-overlay { display:none; }
.mapa-max .topbar          { display:none; }
.mapa-max .main-content    { margin-left:0; }
.mapa-max .page-body-full  { height:100vh; }
.mapa-max .btn-mapa.activo { background:var(--accent); border-color:var(--accent); color:#04170f; }

.sig-abrir-capas { position:absolute; top:10px; left:10px; z-index:600; display:none;
  width:36px; height:36px; border-radius:8px; cursor:pointer;
  background:var(--bg-card); border:1px solid var(--border); color:var(--text);
  box-shadow:0 2px 8px rgba(0,0,0,.5); }
.sig-abrir-capas.visible { display:block; }

.sig-herramientas { position:absolute; top:10px; right:10px; z-index:600;
  display:flex; flex-direction:column; gap:.4rem; }
.btn-mapa { width:36px; height:36px; border-radius:8px; cursor:pointer; font-size:1rem;
  background:var(--bg-card); border:1px solid var(--border); color:var(--text);
  box-shadow:0 2px 8px rgba(0,0,0,.5); }
.btn-mapa:hover { background:var(--accent-glow); border-color:var(--accent); color:var(--accent); }

.sig-estado { position:absolute; bottom:10px; right:10px; z-index:600;
  background:rgba(6,24,18,.92); border:1px solid var(--border); border-radius:8px;
  padding:.3rem .7rem; font-size:.74rem; color:var(--text-muted); pointer-events:none; }

.sig-aviso-gps { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:650;
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; max-width:92%;
  background:rgba(6,24,18,.96); border:1px solid var(--accent); border-radius:10px;
  padding:.5rem .75rem; font-size:.78rem; box-shadow:var(--shadow); }

.sig-carga { width:370px; flex-shrink:0; background:var(--bg-card);
  border-left:1px solid var(--border); display:flex; flex-direction:column; }
.sig-carga form { display:flex; flex-direction:column; height:100%; min-height:0; }
.resumen-geom { background:rgba(56,189,248,.08); border:1px solid rgba(56,189,248,.35);
  border-radius:8px; padding:.5rem .7rem; font-size:.78rem; margin-bottom:.9rem; }
.resumen-geom .vertices { color:var(--text-muted); font-size:.7rem; margin-left:.35rem; }

/* En pantalla chica los paneles tapan el mapa en vez de comprimirlo:
   en un celular, un mapa de 100 px de ancho no sirve para nada. */
@media(max-width:900px) {
  .sig { flex-direction:column; }
  .sig-capas, .sig-carga { position:absolute; inset:0; width:auto; z-index:700; border:none; }
  .sig-capas.plegado { margin-left:0; display:none; }
  .sig-abrir-capas { display:block; }
}

/* ── Ventana emergente del mapa ── */
.leaflet-popup-content-wrapper { background:var(--bg-card); color:var(--text);
  border:1px solid var(--border); border-radius:10px; }
.leaflet-popup-tip { background:var(--bg-card); border:1px solid var(--border); }
.leaflet-popup-content { margin:.75rem .9rem; font-size:.82rem; }
.leaflet-container a.leaflet-popup-close-button { color:var(--text-muted); }
.pop-capa { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.pop-titulo { font-size:.98rem; font-weight:600; margin:.2rem 0 .35rem; }
.pop-estado { display:inline-block; border-radius:99px; padding:.05rem .5rem;
  font-size:.68rem; font-weight:700; border:1px solid; }
.pop-desc { margin-top:.45rem; color:var(--text-muted); font-size:.76rem; }
.pop-tabla { width:100%; margin-top:.5rem; border-collapse:collapse; }
.pop-tabla th { text-align:left; font-weight:500; color:var(--text-muted); font-size:.72rem;
  padding:.12rem .5rem .12rem 0; white-space:nowrap; vertical-align:top; }
.pop-tabla td { font-size:.76rem; padding:.12rem 0; }
.pop-link { display:inline-block; margin-top:.6rem; color:var(--accent);
  font-size:.78rem; font-weight:600; text-decoration:none; }
.pop-link:hover { text-decoration:underline; }

/* ── Tarjetas de resumen ── */
.tarjetas-kpi { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; }
.kpi { display:flex; align-items:center; gap:.85rem; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem; }
.kpi-icono { width:44px; height:44px; border-radius:11px; display:flex; align-items:center;
  justify-content:center; font-size:1.2rem; flex-shrink:0; }
.kpi-num { display:block; font-size:1.35rem; font-weight:700; line-height:1.1; }
.kpi-lbl { display:block; font-size:.72rem; color:var(--text-muted); margin-top:.1rem; }

/* ── Ficha del elemento ── */
.ficha-cabecera { display:flex; justify-content:space-between; align-items:flex-start;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.ficha-capa { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.ficha-titulo { font-size:1.35rem; font-weight:700; margin:.3rem 0 .5rem; }
.ficha-id { font-size:.74rem; color:var(--text-muted); margin-left:.5rem; }
.ficha-acciones { display:flex; gap:.5rem; flex-wrap:wrap; }
.ficha-grilla { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1.25rem; align-items:start; }
@media(max-width:1000px) { .ficha-grilla { grid-template-columns:minmax(0,1fr); } }

.tabla-datos { width:100%; border-collapse:collapse; }
.tabla-datos th { text-align:left; font-weight:500; color:var(--text-muted); font-size:.76rem;
  padding:.45rem .9rem .45rem 0; vertical-align:top; white-space:nowrap; width:1%; }
.tabla-datos td { padding:.45rem 0; font-size:.85rem; border-bottom:1px solid var(--border); }
.tabla-datos tr:last-child td { border-bottom:none; }
.tabla-datos .ayuda { display:inline; margin-left:.4rem; }

.mapa-form { height:340px; border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.tl-detalle { font-size:.76rem; color:var(--text-muted); white-space:pre-line; margin-top:.2rem; }

/* ── Importador ── */
.ayuda-formato h4 { font-size:.82rem; margin:1rem 0 .3rem; display:flex; align-items:center; gap:.4rem; }
.ayuda-formato h4:first-child { margin-top:0; }
.ayuda-formato h4 i { color:var(--accent); }
.ayuda-formato p, .ayuda-formato li { font-size:.78rem; color:var(--text-muted); line-height:1.55; }
.ayuda-formato ul { margin:.2rem 0 0 1.1rem; }

/* ── Administración ── */
.roles-leyenda { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:.5rem; margin-bottom:1.1rem; padding:.75rem; background:rgba(0,0,0,.2);
  border:1px solid var(--border); border-radius:8px; }
.roles-leyenda .ayuda { display:inline; }
.fila-parametro { display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap;
  padding:.85rem; background:rgba(0,0,0,.2); border:1px solid var(--border); border-radius:8px; }
.fila-parametro > div:first-child { flex:1; min-width:220px; }
.param-nombre { font-size:.88rem; font-weight:500; }
.sig-progreso-caja{position:fixed;z-index:3000;left:50%;top:18%;transform:translateX(-50%);width:min(420px,90vw);padding:1rem;background:#062b24;color:#fff;border:1px solid #20b486;border-radius:8px;box-shadow:0 8px 30px #0008;text-align:center}.sig-progreso-bar{height:10px;background:#123f36;border-radius:6px;margin:.8rem 0}.sig-progreso-bar i{display:block;height:100%;width:0;background:#20b486;border-radius:6px;transition:width .15s}