/* BomberoFlash H49 · iconografía sobria y coherente para la barra lateral.
   Mantiene la estructura H40 y elimina el aspecto de mosaico multicolor. */

#mainSidebar.bf-sidebar {
  --bf-sidebar-canvas: #f8fbff;
  --bf-sidebar-canvas-muted: #eef5ff;
  --bf-sidebar-ink: #101c35;
  --bf-sidebar-copy: #40516d;
  --bf-sidebar-muted: #71819b;
  --bf-sidebar-line: #d9e4f2;
  --bf-sidebar-hover: #f1f6fd;
  --bf-sidebar-active: #eaf2ff;
  --bf-sidebar-accent: #2563eb;
  --bf-sidebar-accent-strong: #1d4ed8;
  --bf-sidebar-focus: rgba(37, 99, 235, .27);
  --bf-sidebar-icon: #52637c;
  /* Marca única (27-09): Arena usa el mismo azul que el resto de la barra. */
  --bf-battle-accent: var(--bf-sidebar-accent);
  background: linear-gradient(180deg, #f7faff 0%, #ffffff 38%, #f7faff 100%) !important;
  border-color: #d8e3f0 !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .82), 8px 0 28px rgba(31, 55, 92, .055);
}

#mainSidebar.bf-sidebar .bf-sidebar__scroll {
  background:
    radial-gradient(circle at 0 8%, rgba(37, 99, 235, .05), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(247, 250, 255, .82));
  scrollbar-color: #b9c9df transparent;
}

#mainSidebar.bf-sidebar .bf-sidebar__scroll::-webkit-scrollbar-thumb,
#mainSidebar.bf-sidebar .bf-sidebar__scroll::-webkit-scrollbar-thumb:hover {
  background: #b9c9df;
}

#mainSidebar.bf-sidebar .nav-section-label {
  color: #526783;
}

#mainSidebar.bf-sidebar .nav-section-label::before {
  content: '';
  inline-size: 6px;
  block-size: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--bf-sidebar-accent);
  box-shadow: 0 0 0 4px #dbeafe;
}

#mainSidebar.bf-sidebar .nav-section-label::after {
  background: linear-gradient(90deg, #bfdbfe, transparent);
}

#mainSidebar.bf-sidebar .nav-btn {
  color: var(--bf-sidebar-copy);
}

#mainSidebar.bf-sidebar .nav-icon {
  display: grid;
  inline-size: 34px;
  block-size: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--bf-sidebar-icon);
  box-shadow: none !important;
  transform: none !important;
  transition: color 120ms ease-out !important;
}

#mainSidebar.bf-sidebar .nav-icon .bf-side-glyph {
  display: block;
  inline-size: 23px !important;
  block-size: 23px !important;
  overflow: visible;
  color: currentColor !important;
  fill: currentColor;
  stroke: none;
}

@media (hover: hover) and (pointer: fine) {
  #mainSidebar.bf-sidebar .nav-btn:hover {
    border-color: transparent;
    background: var(--bf-sidebar-hover) !important;
    color: var(--bf-sidebar-ink);
  }

  #mainSidebar.bf-sidebar .nav-btn:hover .nav-icon {
    background: transparent !important;
    color: var(--bf-sidebar-accent);
    box-shadow: none !important;
    transform: none !important;
  }
}

#mainSidebar.bf-sidebar .nav-btn.nav-active,
#mainSidebar.bf-sidebar .nav-btn[aria-current='page'] {
  border-color: transparent;
  background: var(--bf-sidebar-active) !important;
  color: var(--bf-sidebar-accent-strong);
  box-shadow: inset 3px 0 0 var(--bf-sidebar-accent);
}

#mainSidebar.bf-sidebar .nav-btn.nav-active::after,
#mainSidebar.bf-sidebar .nav-btn[aria-current='page']::after {
  background: var(--bf-sidebar-accent);
}

#mainSidebar.bf-sidebar .nav-btn.nav-active .nav-icon,
#mainSidebar.bf-sidebar .nav-btn[aria-current='page'] .nav-icon {
  border: 0 !important;
  background: transparent !important;
  color: var(--bf-sidebar-accent-strong);
  box-shadow: none !important;
}

#mainSidebar.bf-sidebar .nav-btn[data-view='arcadeTest'] .nav-icon {
  color: var(--bf-battle-accent);
}

@media (hover: hover) and (pointer: fine) {
  #mainSidebar.bf-sidebar .nav-btn[data-view='arcadeTest']:hover .nav-icon {
    color: var(--bf-sidebar-accent-strong);
  }
}

#mainSidebar.bf-sidebar .nav-chip,
#mainSidebar.bf-sidebar .nav-badge,
#mainSidebar.bf-sidebar #sideIncidentsBadge {
  border-color: #c9d8eb;
  background: #eef5ff !important;
  color: #385374 !important;
}

#mainSidebar.bf-sidebar #dailyPlanBadge,
#mainSidebar.bf-sidebar #sideIncidentsBadge {
  border-color: var(--bf-sidebar-accent);
  background: var(--bf-sidebar-accent) !important;
  color: #fff !important;
}

#mainSidebar.bf-sidebar .nav-btn[data-view='arcadeTest'] .nav-chip {
  border-color: #bfdbfe;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

#mainSidebar.bf-sidebar .bf-sidebar__help[open] summary,
#mainSidebar.bf-sidebar .bf-sidebar__help summary:hover {
  background: #e9f2ff;
  color: #234f8f;
}

#mainSidebar.bf-sidebar #sprintSidebarBadge,
#mainSidebar.bf-sidebar #exportQuestionsCard {
  border-color: #cfe0f5 !important;
  background: linear-gradient(145deg, #ffffff, #edf5ff) !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .07);
}

#mainSidebar.bf-sidebar .bf-sidebar__streak {
  border-color: #d8e3f0;
  background: linear-gradient(135deg, #fff8eb 0%, #edf5ff 100%);
  box-shadow: 0 9px 20px rgba(39, 63, 98, .08);
}

#mainSidebar.bf-sidebar .bf-sidebar__streak-icon {
  background: #ffedbd;
  color: #a85b08;
  box-shadow: 0 4px 10px rgba(181, 111, 6, .13);
}

#mainSidebar.bf-sidebar .bf-sidebar__streak-icon .bf-side-glyph {
  inline-size: 22px;
  block-size: 22px;
}

#mainSidebar.bf-sidebar #sideStreakMsg,
#mainSidebar.bf-sidebar .bf-sidebar__streak-week p {
  color: #596d8a !important;
}

#mainSidebar.bf-sidebar #sideStreakDots > div {
  border-color: #cbd8e8;
  background: #e4ecf7 !important;
}

#mainSidebar.bf-sidebar #sideStreakDots > div[class*='bg-orange-400'] {
  border-color: #d75c16;
  background: #d75c16 !important;
}

#mainSidebar.bf-sidebar > .border-t.border-slate-100 {
  border-color: #d8e3f0 !important;
  background: linear-gradient(180deg, #f0f6ff, #e9f2ff);
}

#mobileBottomNav .bf-side-glyph {
  display: block;
  inline-size: 22px;
  block-size: 22px;
  margin-inline: auto;
  overflow: visible;
  color: currentColor;
  fill: currentColor;
  stroke: none;
}

@media (prefers-reduced-motion: reduce) {
  #mainSidebar.bf-sidebar .nav-btn,
  #mainSidebar.bf-sidebar .nav-icon,
  #mobileBottomNav button {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  #mainSidebar.bf-sidebar .nav-icon,
  #mainSidebar.bf-sidebar .nav-btn.nav-active,
  #mainSidebar.bf-sidebar .nav-btn[aria-current='page'] {
    border-color: ButtonText;
    background: Canvas !important;
    color: ButtonText;
    box-shadow: none;
  }

  #mainSidebar.bf-sidebar .nav-btn.nav-active,
  #mainSidebar.bf-sidebar .nav-btn[aria-current='page'] {
    border-inline-start: 3px solid Highlight;
  }
}