:root {
  --bg: #0f1115;
  --panel: #161a21;
  --card: #1c212b;
  --line: #2a2f3a;
  --text: #e6e8ec;
  --muted: #9aa0aa;
  --accent: #4f9dff;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ---------- Cabecera ---------- */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  flex-shrink: 0;
}
.brand { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; }
h1 {
  margin: 0; font-size: 1.05rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
h1 span { color: var(--muted); font-weight: 400; }
.counter {
  font-size: 0.85rem; color: var(--accent);
  background: var(--card); padding: 0.15rem 0.55rem; border-radius: 999px;
}
.tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tab {
  background: var(--card); color: var(--muted); border: 1px solid var(--line);
  padding: 0.4rem 0.9rem; border-radius: 8px; cursor: pointer; font-size: 0.9rem;
}
.tab.active { color: var(--text); border-color: var(--accent); }
.login-btn {
  background: transparent; color: var(--muted); border: 1px solid var(--line);
  padding: 0.4rem 0.9rem; border-radius: 8px; cursor: pointer; font-size: 0.9rem;
}
.login-btn:hover { color: var(--text); border-color: var(--accent); }
.login-btn.on { color: #46c26a; border-color: #46c26a; }

/* ---------- Vistas ---------- */
.view { flex: 1; display: none; min-height: 0; }
.view.active { display: flex; }
#view-map { position: relative; }

/* ---------- Mapa ---------- */
#map { flex: 1; height: 100%; }

/* ---------- Panel de filtros ---------- */
.filters {
  width: 300px; flex-shrink: 0; background: var(--panel);
  border-right: 1px solid var(--line); overflow-y: auto; padding: 1rem;
}
.filters-toggle { display: none; }
.fgroup { margin-bottom: 1.25rem; }
.fgroup h3 {
  margin: 0 0 0.5rem; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted);
}
input[type="search"], input[type="date"] {
  width: 100%; background: var(--card); border: 1px solid var(--line);
  color: var(--text); padding: 0.45rem 0.6rem; border-radius: 8px; font-size: 0.9rem;
}
.fgroup label { display: block; font-size: 0.85rem; margin: 0.35rem 0; color: var(--muted); }
.fgroup label.check { color: var(--text); }
em { font-style: normal; color: var(--muted); font-size: 0.8rem; }

/* chips de categoría */
.chips { display: flex; flex-direction: column; gap: 0.35rem; }
.chip {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 0.4rem 0.6rem; font-size: 0.85rem; color: var(--text);
}
.chip .dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex-shrink: 0;
}
.chip input { accent-color: var(--c); }

.quick-dates { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
.quick-dates button {
  background: var(--card); color: var(--muted); border: 1px solid var(--line);
  border-radius: 6px; padding: 0.3rem 0.55rem; font-size: 0.8rem; cursor: pointer;
}
.quick-dates button.active { color: var(--text); border-color: var(--accent); }

.radios label, .dept-list label { cursor: pointer; }
.dept-list { max-height: 180px; overflow-y: auto; }

.reset {
  width: 100%; background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem;
  cursor: pointer; font-size: 0.85rem;
}
.reset:hover { color: var(--text); border-color: var(--accent); }

/* ---------- Panel de estado de fuentes ---------- */
.source-status { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.source-status-list { display: flex; flex-direction: column; gap: 0.45rem; }
.src {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.8rem; color: var(--text);
}
.src-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
.src-dot.green { background: #46c26a; }
.src-dot.red { background: #e0455e; }
.src-dot.gray { background: var(--muted); }
.src-info { color: var(--muted); font-size: 0.72rem; margin-left: auto; text-align: right; }

/* ---------- Marcadores y leyenda ---------- */
.evt-marker span {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 3px rgba(0,0,0,0.6);
}
.legend {
  background: rgba(22,26,33,0.9); padding: 0.5rem 0.7rem; border-radius: 8px;
  font-size: 0.78rem; line-height: 1.5; color: var(--text);
}
.legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }

/* ---------- Popup ---------- */
.leaflet-popup-content-wrapper { background: var(--card); color: var(--text); border-radius: 10px; }
.leaflet-popup-tip { background: var(--card); }
.popup { min-width: 190px; }
.popup h4 { margin: 0.35rem 0 0.4rem; font-size: 1rem; }
.popup p { margin: 0.2rem 0; font-size: 0.85rem; color: var(--muted); }
.popup-cat {
  display: inline-block; color: #fff; font-size: 0.7rem; font-weight: 600;
  padding: 0.1rem 0.5rem; border-radius: 999px;
}
.popup a { color: var(--accent); font-size: 0.85rem; }
.popup-actions {
  display: flex; align-items: center; gap: 0.75rem; margin-top: 0.6rem;
}
.save-btn {
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 0.35rem 0.7rem; cursor: pointer; font-size: 0.85rem;
}
.save-btn:hover { border-color: var(--accent); }
.save-btn.on { background: #f2a900; color: #1a1a1a; border-color: #f2a900; font-weight: 600; }
.saved-toggle { margin-top: 0.5rem; color: var(--text) !important; }

/* ---------- Calendario ---------- */
.calendar-wrap {
  flex: 1; overflow-y: auto; padding: 1rem 1.5rem; max-width: 1100px;
  margin: 0 auto; width: 100%;
}
.cal-hint { color: var(--muted); font-size: 0.9rem; margin: 0 0 1rem; }
.cal-empty {
  display: none; color: var(--muted); text-align: center; margin-top: 1.5rem;
  padding: 1.5rem; border: 1px dashed var(--line); border-radius: 10px;
}
/* FullCalendar sobre fondo oscuro */
.fc { --fc-border-color: var(--line); --fc-page-bg-color: transparent; color: var(--text); }
.fc .fc-toolbar-title { font-size: 1.1rem; }
.fc .fc-button-primary {
  background: var(--card); border-color: var(--line); color: var(--text);
}
.fc .fc-button-primary:hover { background: var(--line); }
.fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--accent); border-color: var(--accent); }
.fc .fc-daygrid-day.fc-day-today { background: rgba(79,157,255,0.12); }
.fc a { color: inherit; text-decoration: none; }
.fc-event { cursor: pointer; }

/* ---------- Placeholder calendario ---------- */
.placeholder {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; color: var(--muted); text-align: center; gap: 0.5rem;
}

/* ---------- Responsive: tablet ---------- */
@media (max-width: 1024px) {
  .filters { width: 260px; }
}

/* ---------- Responsive: móvil ---------- */
@media (max-width: 720px) {
  header { padding: 0.5rem 0.75rem; }
  h1 { font-size: 0.98rem; }
  .counter { font-size: 0.78rem; }
  .tab, .login-btn { padding: 0.35rem 0.7rem; font-size: 0.82rem; }

  /* Campos a 16px para evitar el zoom automático de iOS al enfocarlos. */
  input[type="search"], input[type="date"] { font-size: 16px; }

  /* Panel de filtros como cajón deslizable desde la izquierda. */
  .filters {
    position: absolute; z-index: 1000; top: 0; left: 0; bottom: 0;
    width: 86%; max-width: 340px; transform: translateX(-100%);
    transition: transform 0.2s ease; box-shadow: 2px 0 16px rgba(0,0,0,0.5);
    padding-top: 3.25rem;   /* deja hueco para el botón flotante */
  }
  .filters.open { transform: translateX(0); }
  /* El botón vive fuera del panel para seguir visible con el panel cerrado. */
  .filters-toggle {
    display: block; position: absolute; top: 0.6rem; left: 0.6rem; z-index: 1001;
    background: var(--accent); color: #fff; border: none; border-radius: 8px;
    padding: 0.55rem 0.9rem; font-size: 0.9rem; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }

  /* Leyenda y controles más compactos y sin solaparse con la atribución. */
  .legend { font-size: 0.7rem; padding: 0.4rem 0.55rem; max-width: 45vw; }
  .leaflet-control-zoom { margin-top: 3.2rem !important; }  /* bajo el botón de filtros */

  /* Popups que caben en pantalla pequeña. */
  .leaflet-popup-content { margin: 0.7rem 0.9rem; }
  .popup { min-width: 150px; max-width: 66vw; }

  /* Calendario con menos margen y barra que puede envolver. */
  .calendar-wrap { padding: 0.75rem; }
  .fc .fc-toolbar { flex-wrap: wrap; gap: 0.5rem; }
  .fc .fc-toolbar-title { font-size: 1rem; }
}

/* Pantallas muy estrechas: ocultamos el nombre largo de la región. */
@media (max-width: 420px) {
  h1 span { display: none; }
}