/* ============================================================
   Áreas de descanso · menú lateral por Vía Verde (.mm-*)
   Portado al mapa principal: usa variables de tema (claro/oscuro),
   arranca oculto y se abre desde su propio lanzador (no colisiona con
   el botón "Menú" ni con el chrome inferior).
   ============================================================ */
.mm-panel {
  position: fixed; top: 60px; left: 12px; z-index: 45;
  width: 330px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
  background: var(--stat-bg, #ffffff);
  color: var(--text-primary, #1c2418);
  border: 1px solid var(--border-color, #e4e8df); border-radius: 16px;
  box-shadow: 0 14px 44px -12px rgba(15, 30, 12, 0.30);
  font-family: var(--vvb-font, 'Manrope', system-ui, sans-serif);
  overflow: hidden;
  transition: transform .25s ease, opacity .2s ease;
}
.mm-panel.mm-hidden { transform: translateX(-115%); opacity: 0; pointer-events: none; }

.mm-head { display: flex; align-items: flex-start; gap: 8px; padding: 14px 14px 10px; border-bottom: 1px solid var(--border-color, #eef1ea); }
.mm-titlewrap { flex: 1; min-width: 0; }
.mm-title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary, #1c2418); }
.mm-sub { font-size: 11.5px; color: var(--text-muted, #6b7280); margin-top: 2px; }
.mm-close {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border-color, #e4e8df); background: transparent;
  color: var(--text-secondary, #6b7280); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mm-close:hover { background: var(--stat-border, #eef1ea); }

.mm-search {
  margin: 10px 12px 6px; padding: 9px 12px;
  border: 1px solid var(--border-color, #d9ddd2); border-radius: 10px; font-size: 13.5px;
  font-family: inherit; background: var(--stat-bg, #f7faf4); color: var(--text-primary, #1c2418);
}
.mm-search:focus { outline: 2px solid var(--color-brand, #4A8C3F); outline-offset: 1px; }

.mm-list { overflow-y: auto; padding: 6px 8px 10px; }

/* ---- Acordeón de vía ---- */
.mm-via { border-radius: 12px; margin-bottom: 4px; }
.mm-via-head {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 10px 10px; border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13.5px; color: var(--text-primary, #1c2418); text-align: left;
  border-radius: 10px;
}
.mm-via-head:hover { background: var(--stat-border, #f4f7f1); }
.mm-via-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px var(--stat-bg, #fff), 0 1px 3px rgba(0,0,0,.25); }
.mm-via-name { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-via-count {
  flex-shrink: 0; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px;
  background: var(--stat-border, #eef1ea); color: var(--text-secondary, #4b5563); font-size: 11.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.mm-via-chevron { flex-shrink: 0; color: var(--text-muted, #9aa39a); transition: transform .18s ease; font-size: 12px; }
.mm-via.is-open .mm-via-chevron { transform: rotate(90deg); }
.mm-via.is-open { background: var(--stat-border, #f7faf4); }

/* ---- Lista de áreas ---- */
.mm-items { display: none; padding: 2px 6px 8px 28px; }
.mm-via.is-open .mm-items { display: block; }
.mm-item {
  width: 100%; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 8px 10px; margin: 2px 0; border: 1px solid transparent; border-radius: 9px;
  background: transparent; cursor: pointer; font-family: inherit; text-align: left;
}
.mm-item:hover { background: var(--stat-border, #eef3ea); }
.mm-item.is-sel { background: var(--stat-border, #EAF1E7); border-color: var(--color-brand, #4A8C3F); }
.mm-item-title { font-size: 13px; font-weight: 700; color: var(--text-primary, #1c2418); line-height: 1.25; }
.mm-item-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted, #6b7280); }
.mm-item-km { font-variant-numeric: tabular-nums; }
.mm-item-360 { font-size: 12px; }
.mm-item-nofoto {
  font-size: 10px; font-weight: 700; color: #b8730a;
  background: #fff4e0; border-radius: 999px; padding: 1px 7px;
}

/* El lanzador propio (.mm-toggle) se retiró: el menú se abre desde la
   entrada "Áreas de descanso" del panel "Capas" (AreasDescansoMenu.open()). */

@media (max-width: 768px) {
  .mm-panel { top: 8px; left: 8px; right: 8px; width: auto; max-width: none; max-height: 62vh; }
}