.quick-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 1500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, background 0.3s ease, visibility 0s linear 0.3s;
}

.quick-menu-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background: rgba(0,0,0,0.35);
  transition: opacity 0.3s ease, background 0.3s ease, visibility 0s linear 0s;
}

.quick-menu-panel {
  width: 100%;
  max-width: 420px;
  background: #0c0245;
  border-radius: 18px 18px 0 0;
  padding: 16px 12px calc(70px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  /* Todo el panel se arrastra hacia abajo para cerrar (quick-menu.js);
     no tiene scroll propio, así que el navegador no necesita el gesto. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.quick-menu-overlay.show .quick-menu-panel {
  transform: translateY(0);
}

/* Zona táctil ancha para el arrastre; la barra visible es el ::before centrado */
.quick-menu-handle {
  display: flex;
  justify-content: center;
  padding: 10px 0 14px;
  margin: -10px 0 0;
  cursor: grab;
  touch-action: none;
}

.quick-menu-handle::before {
  content: "";
  width: 40px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.25);
}

.quick-menu-title {
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.quick-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.quick-menu-group { margin-top: 14px; }

.quick-menu-group-title {
  color: #7d8aa8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px 0;
  padding: 4px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
.quick-menu-group-title:active { background: rgba(255,255,255,0.06); }

.quick-menu-group-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.quick-menu-group.colapsado .quick-menu-group-chevron { transform: rotate(-90deg); }

/* Grupos desplegables: misma técnica grid-template-rows que el launcher de
   inicio.html para animar la altura sin conocerla. */
.quick-menu-group-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.25s ease;
}
.quick-menu-group.colapsado .quick-menu-group-body { grid-template-rows: 0fr; }
.quick-menu-group-body > .quick-menu-grid {
  overflow: hidden;
  min-height: 0;
  transition: visibility 0s linear 0s;
}
.quick-menu-group.colapsado .quick-menu-group-body > .quick-menu-grid {
  visibility: hidden;
  transition: visibility 0s linear 0.25s;
}
/* Al abrir el menú se restaura el estado guardado sin animar. */
.quick-menu-overlay.sin-anim .quick-menu-group-body,
.quick-menu-overlay.sin-anim .quick-menu-group-chevron,
.quick-menu-overlay.sin-anim .quick-menu-grid { transition: none !important; }
/* Sin el título "Ir a...", el primer grupo no necesita separarse de la barra. */
.quick-menu-handle + .quick-menu-group { margin-top: 0; }

.quick-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #cbd5e1;
  text-decoration: none;
  padding: 10px 4px;
  border-radius: 12px;
  transition: background 0.15s ease;
}
.quick-menu-item:active { background: rgba(255,255,255,0.12); }
.quick-menu-item.active {
  color: #fff;
  background: rgba(255,255,255,0.16);
}
.quick-menu-item img { width: 24px; height: 24px; }
.quick-menu-item span { font-size: 11px; text-align: center; }

@media (min-width: 769px) {
  .quick-menu-overlay { display: none !important; }
}

/* ===================== ANILLO DE PROGRESO (long-press Home) ===================== */
#bottom-bar a[href="/home"] {
  position: relative;
}

.home-progress-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%) rotate(-90deg);
  pointer-events: none;
  opacity: 0;
}

.home-progress-ring circle {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* Estado activo: se dibuja el círculo completo durante LONG_PRESS_MS */
.home-progress-ring.active {
  opacity: 1;
}

.home-progress-ring.active circle {
  animation: home-ring-fill linear forwards;
  animation-duration: var(--ring-duration, 2000ms);
}

@keyframes home-ring-fill {
  from { stroke-dashoffset: var(--ring-circ); }
  to   { stroke-dashoffset: 0; }
}

/* Pequeño "pulso" al completarse, antes de abrir el menú */
.home-progress-ring.completed circle {
  animation: none;
  stroke-dashoffset: 0;
  stroke: #7ee787;
}
/* Evita el menú contextual nativo del navegador (guardar imagen, abrir en
   pestaña nueva, etc.) al mantener presionado el botón Home */
#bottom-bar a[href="/home"],
#bottom-bar a[href="/home"] img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

/* Evita selección de texto dentro del menú rápido */
.quick-menu-overlay,
.quick-menu-panel,
.quick-menu-handle,
.quick-menu-title,
.quick-menu-group,
.quick-menu-group-title,
.quick-menu-grid,
.quick-menu-item,
.quick-menu-item span {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}