/* ============================================================
   MAPA — tema oscuro unificado con app-frame (azul / índigo)
   Paleta: fondo #0a0a18 · superficie #0e0e24 · borde rgba(255,255,255,.10)
           acento #3b82f6 → #6366f1 · texto #e2e8f0 · apagado #94a3b8
   ============================================================ */

/* ---------- Estructura (sin cambios de comportamiento) ---------- */
.mapa-layout { display: flex; height: calc(100vh - 48px); height: calc(100dvh - 48px); }
.mapa-contenedor { position: relative; flex: 1; }
#mapa { position: absolute; inset: 0; }

/* ---------- Superficie "cristal" reutilizable ---------- */
.mapa-estado, .mapa-dibujo {
  background: rgba(14, 14, 36, .88); color: #e2e8f0;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
.mapa-estado {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 1000; padding: 4px 14px; border-radius: 10px; font-size: 13px;
}

/* ---------- Panel de lugares (árbol) ---------- */
.panel-lugares {
  width: 340px; min-width: 260px; display: flex; flex-direction: column;
  background: #0c0c1e; color: #e2e8f0; border-right: 1px solid rgba(255, 255, 255, .08);
}
.panel-titulo {
  display: flex; align-items: center; padding: 6px 8px; color: #e2e8f0;
  background: #0e0e24; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.panel-arbol { flex: 1; overflow: auto; padding: 4px 0; }
.panel-pie {
  padding: 5px 12px; font-size: 12px; color: #94a3b8;
  border-top: 1px solid rgba(255, 255, 255, .08); background: #0e0e24;
}
.panel-arbol::-webkit-scrollbar { width: 8px; }
.panel-arbol::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 8px; }
.panel-arbol::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .25); }

.nodo { display: flex; align-items: center; height: 30px; white-space: nowrap; color: #cbd5e1;
        border-radius: 8px; margin: 0 6px; transition: background .12s; }
.nodo:hover { background: rgba(255, 255, 255, .06); }
.nodo-sel { font-weight: 600; color: #fff; }
.nodo .nombre { overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.flecha { cursor: pointer; width: 20px; }
.flecha-vacia { display: inline-block; width: 20px; }
.nodo .v-selection-control { flex: 0 0 auto !important; min-height: 0; width: auto; }
.nodo .v-selection-control__wrapper { width: 28px; height: 28px; }
.nodo .v-selection-control__input { width: 28px; height: 28px; }
.nodo .acciones { visibility: hidden; margin-left: auto; padding-right: 6px; cursor: pointer; }
.nodo:hover .acciones { visibility: visible; }

/* ---------- Íconos y etiquetas en el mapa ---------- */
.pt-icon { background: none; border: 0; }
.pt-icon svg { display: block; }
.leaflet-tooltip.etq {
  background: transparent; border: 0; box-shadow: none; padding: 0;
  color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.etq-ocultas .leaflet-tooltip.etq:not(.etq-central):not(.etq-rb) { display: none; }
.etq-central-ocultas .leaflet-tooltip.etq-central { display: none; }
.etq-rb-ocultas .leaflet-tooltip.etq-rb { display: none; }
.leaflet-tooltip.etq-central { font-size: 12px; color: #93c5fd; letter-spacing: .04em; }
.leaflet-tooltip.etq-rb { color: #d8b4fe; }

/* ---------- Popups ---------- */
.leaflet-popup-content-wrapper {
  background: rgba(14, 14, 36, .97); color: #e2e8f0; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}
.leaflet-popup-tip { background: rgba(14, 14, 36, .97); border: 1px solid rgba(255, 255, 255, .12); box-shadow: none; }
.leaflet-container a.leaflet-popup-close-button { color: #94a3b8; }
.leaflet-container a.leaflet-popup-close-button:hover { color: #fff; }
.leaflet-popup-content strong { color: #fff; font-size: 14px; }
.pop-cat { color: #60a5fa; font-size: 12px; margin: 2px 0; }
.pop-coord { color: #94a3b8; font-size: 11px; }
.pop-acciones { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pop-btn {
  white-space: nowrap; border: 1px solid rgba(96, 165, 250, .45); color: #93c5fd;
  background: rgba(59, 130, 246, .10); border-radius: 8px; padding: 3px 11px;
  font-size: 12px; cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.pop-btn:hover { background: rgba(59, 130, 246, .28); border-color: #60a5fa; color: #fff; }
.pop-peligro { border-color: rgba(248, 113, 113, .5); color: #fca5a5; background: rgba(239, 68, 68, .10); }
.pop-peligro:hover { background: rgba(239, 68, 68, .30); border-color: #f87171; color: #fff; }

/* ---------- Barra de herramientas del mapa ---------- */
.mapa-herramientas { position: absolute; top: 10px; left: 60px; z-index: 1000; }
.mapa-herramientas .v-btn:not([class*="bg-"]),
.mapa-busqueda .v-btn:not([class*="bg-"]) {
  background: rgba(14, 14, 36, .88) !important; color: #e2e8f0 !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4) !important; letter-spacing: .06em;
}
.mapa-herramientas .v-btn:not([class*="bg-"]):hover,
.mapa-busqueda .v-btn:not([class*="bg-"]):hover { background: rgba(30, 32, 70, .95) !important; border-color: rgba(96, 165, 250, .5); }
.mapa-herramientas .v-btn[class*="bg-"] { border-radius: 10px !important; }
.mapa-herramientas .v-btn.bg-primary { background: linear-gradient(90deg, #3b82f6, #6366f1) !important; color: #fff !important; }

/* ---------- Búsqueda ---------- */
.mapa-busqueda { position: absolute; top: 52px; left: 60px; width: 340px; z-index: 1000; }
.mapa-busqueda-fila { display: flex; align-items: center; gap: 6px; }
.mapa-busqueda-fila .v-input { flex: 1; }
.mapa-busqueda .v-field {
  background: rgba(14, 14, 36, .88) !important; color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
.mapa-busqueda .v-field__outline { display: none; }
.mapa-busqueda .v-field__input, .mapa-busqueda input { color: #e2e8f0 !important; }
.mapa-busqueda input::placeholder { color: #94a3b8; opacity: 1; }
.mapa-resultados { margin-top: 4px; max-height: 320px; overflow: auto; border-radius: 10px;
                   background: rgba(14, 14, 36, .97) !important; border: 1px solid rgba(255, 255, 255, .12); }

/* ---------- Controles de Leaflet ---------- */
.leaflet-bar { border: 1px solid rgba(255, 255, 255, .12) !important; border-radius: 10px !important;
               box-shadow: 0 4px 14px rgba(0, 0, 0, .4) !important; overflow: hidden; }
.leaflet-bar a, .leaflet-bar a:hover {
  background: rgba(14, 14, 36, .92); color: #e2e8f0; border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.leaflet-bar a:hover { background: rgba(40, 44, 90, .96); color: #fff; }
.leaflet-bar a.leaflet-disabled { background: rgba(14, 14, 36, .6); color: #64748b; }
.leaflet-control-layers {
  background: rgba(14, 14, 36, .92) !important; color: #e2e8f0; border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 10px !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .4) !important;
}
.leaflet-control-scale-line {
  background: rgba(14, 14, 36, .75) !important; color: #e2e8f0; border-color: #e2e8f0 !important; text-shadow: none;
}
.leaflet-control-attribution { background: rgba(14, 14, 36, .7) !important; color: #94a3b8 !important; }
.leaflet-control-attribution a { color: #93c5fd !important; }

/* ---------- Dibujo y edición (comportamiento intacto) ---------- */
.mapa-dibujo {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1001;
  padding: 6px 14px; border-radius: 10px; max-width: 80%;
  display: flex; align-items: center; gap: 8px; font-size: 13px;
}
.dibujando, .dibujando .leaflet-interactive { cursor: crosshair !important; }
.dibujando .leaflet-interactive { pointer-events: none; }
.editando .leaflet-interactive { pointer-events: none; }
.editando .leaflet-interactive.edit-activo,
.editando .leaflet-interactive.vertice { pointer-events: auto; }
.vertice {
  background: #fff; border: 2px solid #3b82f6; border-radius: 50%;
  box-sizing: border-box; cursor: move; box-shadow: 0 0 0 3px rgba(59, 130, 246, .3);
}

/* ---------- Paneles flotantes ---------- */
.mapa-revision { position: absolute; top: 90px; right: 10px; width: 380px; max-height: calc(100% - 110px); overflow: auto; z-index: 1000; }
.mapa-ruta {
  position: absolute; left: 12px; bottom: 40px; z-index: 1000; max-width: 360px;
  background: rgba(14, 14, 36, .96); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px; padding: 10px 12px; font-size: 13px; box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
.ruta-linea { line-height: 1.5; }
.ruta-linea span { display: inline-block; width: 66px; color: #94a3b8; }
.ruta-aviso {
  margin-top: 6px; padding: 4px 8px; border-radius: 6px; font-size: 12px;
  background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .35); color: #fbbf24;
}

/* ---------- Ventanas de alerta (SweetAlert2) en oscuro ---------- */
.swal2-popup { background: #11112a !important; color: #e2e8f0 !important; border: 1px solid rgba(255, 255, 255, .12);
               border-radius: 16px !important; }
.swal2-title, .swal2-html-container { color: #e2e8f0 !important; }
.swal2-input, .swal2-textarea { background: rgba(255, 255, 255, .05) !important; color: #e2e8f0 !important;
                                border: 1px solid rgba(255, 255, 255, .15) !important; }
.swal2-timer-progress-bar { background: rgba(96, 165, 250, .6) !important; }
.swal2-toast { background: #11112a !important; color: #e2e8f0 !important; border: 1px solid rgba(255, 255, 255, .12); }
.swal2-toast .swal2-title { color: #e2e8f0 !important; }

/* ---------- Ajustes a componentes nuevos (fotos, simbología) ---------- */
.fotos-grid .foto-item { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); border-radius: 10px; }
.simb-tabla th { background: rgba(255, 255, 255, .06); }
.simb-tabla th, .simb-tabla td { border-color: rgba(255, 255, 255, .12); }
/* ---------- Celular y pantallas angostas ---------- */
.mapa-btn-panel { display: none; }

@media (hover: none) {
  /* sin ratón no existe "pasar el cursor": el menú ⋮ de cada carpeta debe verse siempre */
  .nodo .acciones { visibility: visible; }
}

@media (max-width: 768px) {
  .mapa-layout { position: relative; }

  /* Panel de lugares: cajón deslizable sobre el mapa */
  .panel-lugares {
    position: absolute; top: 0; bottom: 0; left: 0; z-index: 1100;
    width: min(88vw, 340px); transform: translateX(-102%);
    transition: transform .25s ease; box-shadow: 8px 0 24px rgba(0, 0, 0, .5);
  }
  .panel-lugares.abierto { transform: none; }
  .mapa-btn-panel {
    display: inline-flex; position: absolute; top: 10px; left: 10px; z-index: 1200;
    background: rgba(14, 14, 36, .92) !important; color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, .15);
  }

  /* Barra de herramientas: una sola fila que se desliza con el dedo */
  .mapa-herramientas {
    left: 56px; right: 56px; white-space: nowrap; overflow-x: auto; overflow-y: hidden;
    padding-bottom: 6px; scrollbar-width: none;
  }
  .mapa-herramientas::-webkit-scrollbar { display: none; }
  .mapa-herramientas .v-btn { margin-right: 6px; }

  .mapa-busqueda { left: 10px; right: 10px; width: auto; top: 56px; }
  .leaflet-control-zoom { display: none; }             /* se hace zoom con dos dedos */

  /* Botones y filas más fáciles de tocar */
  .pop-btn { padding: 8px 13px; font-size: 13px; }
  .nodo { height: 40px; }
  .leaflet-popup-content { max-width: calc(100vw - 90px) !important; width: auto !important; }

  /* Paneles flotantes a lo ancho de la pantalla */
  .mapa-ruta { left: 8px; right: 8px; max-width: none; bottom: 28px; }
  .mapa-revision { left: 8px; right: 8px; width: auto; top: 100px; }
  .mapa-dibujo { max-width: 94%; flex-wrap: wrap; }

  /* Ventanas: casi a pantalla completa y con desplazamiento lateral si algo es ancho (diagrama de fusiones) */
  .v-dialog > .v-overlay__content { margin: 12px; max-width: calc(100% - 24px) !important; }
  .v-dialog .v-card-text { overflow-x: auto; }
}