/* styles.css. PanitasMap, estilo monocromático y minimalista. */

:root {
  --ink: #0a0a0a; --ink-soft: #525252;
  --surface: #ffffff; --surface-2: #f5f5f5; --border: #e5e5e5;
  --radius: 14px; --shadow: 0 8px 30px rgba(0,0,0,.10);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, Roboto, Helvetica, Arial, sans-serif;
}
.dark {
  --ink: #fafafa; --ink-soft: #a3a3a3;
  --surface: #0c0c0d; --surface-2: #161618; --border: #262626;
  --shadow: 0 8px 30px rgba(0,0,0,.5);
}

html, body { height: 100%; margin: 0; }
body { font-family: var(--font); -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; }

/* Altura real del viewport (corrige corte de footer en móviles) */
.pm-app { height: 100vh; height: 100dvh; }

#map { height: 100%; width: 100%; background: var(--surface-2); }

/* Contenido solo para buscadores / lectores de pantalla */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.pm-glass { background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }

/* Loader */
#loader { transition: opacity .4s ease; }
#loader.hidden { opacity: 0; pointer-events: none; }
.pm-spinner { width: 38px; height: 38px; border: 3px solid color-mix(in srgb, var(--ink) 20%, transparent); border-top-color: var(--ink); border-radius: 50%; animation: pm-spin .8s linear infinite; }
@keyframes pm-spin { to { transform: rotate(360deg); } }

/* Marcadores */
.pm-marker { background: none; border: none; }
.pm-pin { display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); transition: transform .15s ease; color: var(--ink); }
.pm-pin:hover { transform: scale(1.12); }
.pm-pin-ve svg path { fill: #0a0a0a; stroke: #fff; stroke-width: 1; }
.pm-pin-ve .pm-pin-dot { fill: #fff; }
.pm-pin-ex svg path { fill: #fff; stroke: #0a0a0a; stroke-width: 1.6; }
.pm-pin-ex .pm-pin-dot { fill: #0a0a0a; }
.marker-cluster, .marker-cluster div { background: rgba(10,10,10,.82) !important; color: #fff !important; }
.marker-cluster div { background: rgba(10,10,10,.92) !important; }
.marker-cluster span { color: #fff !important; font-weight: 600; }

/* Popup */
.pm-popup-wrap .leaflet-popup-content-wrapper { border-radius: var(--radius); box-shadow: var(--shadow); background: var(--surface); color: var(--ink); padding: 2px; }
.pm-popup-wrap .leaflet-popup-content { margin: 12px 14px; }
.pm-popup-wrap .leaflet-popup-tip { background: var(--surface); }
.pm-popup-title { font-size: .95rem; font-weight: 600; margin: 2px 0; line-height: 1.25; color: var(--ink); }
.pm-popup-place { font-size: .78rem; color: var(--ink-soft); margin: 0 0 8px; }
.pm-popup-tag { display: inline-block; font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--ink-soft); }
.pm-popup-btn { margin-top: 4px; width: 100%; cursor: pointer; background: var(--ink); color: var(--surface); border: none; border-radius: 9px; padding: 7px 10px; font-size: .8rem; font-weight: 600; font-family: var(--font); }
.pm-popup-btn:hover { opacity: .9; }

/* Tags */
.pm-tag { font-size: .62rem; font-weight: 600; padding: .12rem .5rem; border-radius: 999px; white-space: nowrap; border: 1px solid var(--border); color: var(--ink-soft); }
.pm-tag-ve { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.pm-tag-ex { background: transparent; }
/* Tags de estado de persona */
.pm-tag-ingresado  { background: #dcfce7; color: #166534; border-color: #86efac; }
.pm-tag-desaparecido { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.pm-tag-encontrado { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.dark .pm-tag-ingresado  { background: #14532d; color: #bbf7d0; border-color: #166534; }
.dark .pm-tag-desaparecido { background: #7f1d1d; color: #fecaca; border-color: #991b1b; }
.dark .pm-tag-encontrado { background: #1e3a5f; color: #bfdbfe; border-color: #1e40af; }

/* Filtros */
.filter-btn { font-size: .78rem; font-weight: 500; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--ink-soft); transition: all .15s ease; cursor: pointer; }
.filter-btn:hover { border-color: var(--ink-soft); color: var(--ink); }
.filter-btn.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* Acciones */
.action-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .6rem .75rem; border-radius: 11px; background: var(--ink); color: var(--surface); font-size: .82rem; font-weight: 600; transition: opacity .15s ease; }
.action-btn:hover { opacity: .88; }
.report-link { display: inline-flex; align-items: center; gap: .4rem; width: 100%; justify-content: center; padding: .55rem; font-size: .8rem; font-weight: 500; color: var(--ink-soft); background: transparent; border: 1px solid var(--border); border-radius: 11px; cursor: pointer; transition: all .15s ease; }
.report-link:hover { color: var(--ink); border-color: var(--ink-soft); }

/* Pestañas formulario */
.form-tab { flex: 1; padding: .55rem; font-size: .82rem; font-weight: 600; color: var(--ink-soft); background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: var(--font); }
.form-tab.form-tab-active { color: var(--ink); border-bottom-color: var(--ink); }

/* Detalle */
.pm-dt { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.pm-dd { color: var(--ink); }
.pm-bullets { margin: 0; padding-left: 1.1rem; }
.pm-bullets li { margin: .15rem 0; color: var(--ink); }

/* Inputs */
.pm-label { display: block; font-size: .72rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .3rem; }
.pm-input { width: 100%; padding: .55rem .7rem; font-size: .85rem; font-family: var(--font); background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: 10px; outline: none; }
.pm-input:focus { border-color: var(--ink-soft); }

/* Panel detalle */
#detail-panel { transform: translateX(105%); transition: transform .32s cubic-bezier(.22,1,.36,1); }
#detail-panel.open { transform: translateX(0); }

/* Footer desplegable (fondo sólido para buena legibilidad) */
.foot-toggle { font-size: .82rem; font-weight: 600; color: var(--ink); background: transparent; border: none; cursor: pointer; padding: .35rem .4rem; border-radius: 8px; font-family: var(--font); }
.foot-toggle:hover { background: var(--surface-2); }
.foot-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.foot-panel.open { max-height: 45vh; overflow-y: auto; }

/* Sidebar móvil */
@media (max-width: 767px) {
  #sidebar { position: absolute; z-index: 1100; top: 0; bottom: 0; left: 0; width: 86%; max-width: 340px; transform: translateX(-105%); transition: transform .3s ease; }
  #sidebar.open { transform: translateX(0); box-shadow: var(--shadow); }
  .foot-panel.open { max-height: 60vh; }
}

/* Modales */
.pm-modal { opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.pm-modal.open { opacity: 1; pointer-events: auto; }

/* Scrollbar */
.thin-scroll::-webkit-scrollbar { width: 6px; }
.thin-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Leaflet */
.leaflet-control-attribution { background: color-mix(in srgb, var(--surface) 85%, transparent) !important; color: var(--ink-soft) !important; }
.leaflet-control-attribution a { color: var(--ink-soft) !important; }
.leaflet-bar a { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--border) !important; }

/* ==========================================================================
   Efecto Halo Pulsante e Indicador para el Botón de Agregar (Optimizado)
   ========================================================================== */

#add-btn {
  position: relative;
  /* Parpadeo más rápido y nítido para Light Mode (1.4 segundos) */
  animation: pulse-agregar-light 0.7s infinite cubic-bezier(0.24, 0, 0.1, 1);
}

/* Animación optimizada con color de alta intensidad para Dark Mode */
.dark #add-btn {
  animation: pulse-agregar-dark 0.7s infinite cubic-bezier(0.24, 0, 0.1, 1);
}

/* --- KEYFRAMES MODO CLARO --- */
@keyframes pulse-agregar-light {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.65);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(220, 38, 38, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}

/* --- KEYFRAMES MODO OSCURO (Halo más brillante y amplio sobre negro) --- */
@keyframes pulse-agregar-dark {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.9);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); /* Mayor expansión */
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* Estado Hover: Transición fluida de color y pausa de animación */
#add-btn:hover {
  animation-play-state: paused; /* Detiene el parpadeo mientras el cursor está encima */
  background-color: #dc2626 !important; /* Rojo elegante */
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}
.dark #add-btn:hover {
  background-color: #ef4444 !important; /* Rojo vivo para contraste en modo oscuro */
  color: #000000 !important;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.45);
}

/* Indicador flotante responsivo (Solo para dispositivos de escritorio con cursor de precisión) */
@media (hover: hover) and (pointer: fine) {
  #add-btn::after {
    content: "Añadir centro de acopio, iniciativa o reportar personas";
    position: absolute;
    top: 135%; /* Posicionado justo debajo del botón */
    right: 0;
    font-size: 11px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    transform: translateY(-4px);
    z-index: 1250;
    
    /* Colores del tooltip adaptados al tema claro por defecto */
    background: #171717;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  /* Pequeña flecha del indicador (Tema claro) */
  #add-btn::before {
    content: "";
    position: absolute;
    top: 122%;
    right: 18px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #171717 transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    transform: translateY(-4px);
    z-index: 1250;
  }

  /* Adaptación de colores del indicador al Tema Oscuro */
  .dark #add-btn::after {
    background: #fafafa;
    color: #0a0a0a;
    border: 1px solid rgba(0, 0, 0, 0.08);
  }
  .dark #add-btn::before {
    border-color: transparent transparent #fafafa transparent;
  }

  /* Activación de los elementos en Hover */
  #add-btn:hover::after,
  #add-btn:hover::before {
    opacity: 1;
    transform: translateY(0);
  }
}