/* ==========================================================================
   60-sidebar-premium.css  –  Club Málaga CF · v3
   Azul marino #003580 · Dorado #C9A227 · Blanco
   ========================================================================== */

/* ── Scrollbar dorada (color Málaga CF) ─────────────────────────────────── */
#sidebar {
  scrollbar-width: thin;
  scrollbar-color: #C9A227 rgba(0,24,64,0.60);
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
#sidebar::-webkit-scrollbar       { width: 4px; }
#sidebar::-webkit-scrollbar-track { background: rgba(0,24,64,0.40); border-radius: 99px; }
#sidebar::-webkit-scrollbar-thumb {
  background:    linear-gradient(180deg, #E8C45A 0%, #C9A227 60%, #7A5E0A 100%);
  border-radius: 99px;
  box-shadow:    0 0 4px rgba(201,162,39,0.40);
}
#sidebar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #F0D070 0%, #E8C45A 100%);
}

/* ── Glow dorado en el borde derecho ───────────────────────────────────── */
#sidebar::after {
  content:        "";
  position:       absolute;
  top: 0; right: 0; bottom: 0;
  width:          1px;
  background:     linear-gradient(180deg,
                    transparent           0%,
                    rgba(201,162,39,0.30) 20%,
                    rgba(201,162,39,0.50) 50%,
                    rgba(201,162,39,0.30) 80%,
                    transparent           100%);
  pointer-events: none;
  z-index:        10;
}
#sidebar > * { position: relative; z-index: 1; }

#sidebar-nav,
#sidebar .nav,
#sidebar .nav-link,
#sidebar .sidebar-compact-group {
  overflow: visible !important;
}

#sidebar::-webkit-scrollbar:horizontal {
  height: 0 !important;
  display: none !important;
}

/* ── FontAwesome: forzar render correcto (evita cuadrados) ──────────────── */
#sidebar i.fas,
#sidebar i.far,
#sidebar i.fab {
  font-family:            "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
  font-style:             normal    !important;
  font-variant:           normal    !important;
  text-rendering:         auto      !important;
  -webkit-font-smoothing: antialiased !important;
  display:                inline-block !important;
}
#sidebar i.fas { font-weight: 900 !important; }
#sidebar i.far { font-weight: 400 !important; }
#sidebar i.fab { font-weight: 400 !important; }

/* ── Reseteo de Nav-Link para evitar interferencias globales ────────────── */
#sidebar .nav-link {
  /* El estado lo define el menú, sin animar colores/tamaños heredados. */
  transition:   none !important;
  transform:    none !important;
  padding:      0 !important;
  margin:       0 !important;
  border-right: none !important;
  box-shadow:   none !important;
  display:      flex !important;
  align-items:  center !important;
  width:        100% !important;
}

#sidebar .sidebar-accordion-header {
  transition: none !important;
  transform: none !important;
}

#sidebar .nav-link:focus:not(:focus-visible),
#sidebar .sidebar-accordion-header:focus:not(:focus-visible) {
  outline: none !important;
}

#sidebar .nav-link:focus-visible,
#sidebar .sidebar-accordion-header:focus-visible {
  outline: 2px solid #E8C45A;
  outline-offset: -2px;
}

/* ── Color de iconos: dorado ────────────────────────────────────────────── */
#sidebar .nav-link:not(.disabled):not([disabled]) i,
#sidebar .sidebar-accordion-header i {
  color:      #ffffff;
  opacity:    0.88;
  transition: none;
}
#sidebar .nav-link.disabled i,
#sidebar .nav-link[disabled] i {
  color:   #ffffff !important;
  opacity: 0.88    !important;
}

/* ── Hover en links ─────────────────────────────────────────────────────── */
#sidebar .nav-link:not(.disabled):not([disabled]):hover,
#sidebar .sidebar-accordion-header:hover {
  background-color: rgba(201,162,39,0.09) !important;
  color:            #E8C45A !important;
  border-color:     rgba(201,162,39,0.18) !important;
}
#sidebar .nav-link:not(.disabled):not([disabled]):hover i,
#sidebar .sidebar-accordion-header:hover i {
  color:   #ffffff !important;
  opacity: 1       !important;
}

/* ── Acordeón: quitar triángulo nativo ──────────────────────────────────── */
#sidebar details > summary {
  list-style:         none;
  appearance:         none;
  user-select:        none;
  display:            block;
  text-indent:        0 !important;
}
#sidebar details > summary::marker { content: ""; }
#sidebar details > summary::-webkit-details-marker { display: none; }
#sidebar details {
  margin: 1px 0 !important;
}
/* Reglas de alineación comentadas para evitar conflictos con sidebar.py */
/*
#sidebar details > summary.sidebar-accordion-header {
  display: flex !important;
  align-items: center !important;
  min-height: 38.3px;
}
#sidebar details > summary > div {
  width: 100%;
  margin: 0 !important;
}
#sidebar details > summary > div > div:first-child {
  margin-left: 0 !important;
}
*/

/* Hover en el summary cuando NO está activo */
#sidebar details > summary:hover {
  background-color: rgba(201,162,39,0.09) !important;
  color:            #E8C45A !important;
}
#sidebar details > summary.sidebar-accordion-header,
#sidebar details > summary.sidebar-accordion-header:hover {
  transform: none !important;
  margin-right: 0 !important;
}

/* Flyouts laterales para Campograma e Informes en sidebar colapsado */
#sidebar .sidebar-compact-group {
  position: relative;
}

#sidebar .sidebar-compact-flyout {
  position: fixed;
  left: var(--sidebar-flyout-left, 74px);
  top: var(--sidebar-flyout-top, 90px);
  transform: none;
  min-width: 210px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #C79B00;
  background: #003875;
  box-shadow: 0 8px 24px rgba(15,35,65,.18);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
  z-index: 1200;
}

#sidebar .sidebar-compact-group[open] .sidebar-compact-flyout {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

#sidebar .sidebar-compact-group-trigger { display:flex; align-items:center; justify-content:center; min-height:44px; cursor:pointer; position:relative; }
#sidebar .sidebar-compact-group-chevron { position:absolute; right:4px; font-size:8px; color:#C9A227; }
#sidebar .sidebar-compact-group-trigger:focus-visible { outline:2px solid #C79B00 !important; outline-offset:-2px; }
#sidebar .sidebar-compact-group-trigger[aria-disabled="true"] { opacity:.45; cursor:default; }
#sidebar .sidebar-compact-flyout .nav-link { min-height:32px; }

#sidebar .sidebar-compact-flyout-title {
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  padding: 0 6px;
}

#sidebar .sidebar-compact-flyout-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Tooltip premium para iconos en sidebar colapsado */
.sidebar-compact-tooltip .tooltip-inner {
  background: #003875 !important;
  color: #fff !important;
  border: 1px solid #C79B00;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: normal;
  box-shadow: 0 4px 12px rgba(15,35,65,.14);
}

.sidebar-compact-tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #003875 !important;
}

/* Al abrir el grupo, sus nombres completos sustituyen a la etiqueta breve. */
body:has(#sidebar .sidebar-compact-group[open]) .sidebar-compact-group-tooltip { display:none !important; }

/* ── Toggle button ──────────────────────────────────────────────────────── */
#toggle-button:hover {
  color:      #E8C45A      !important;
  background: #001840      !important;
  width:      20px         !important;
}

/* En colapsado, reducir protagonismo de la scrollbar y del item activo */
#sidebar[style*="4.25rem"] {
  scrollbar-width: thin;
  scrollbar-color: rgba(201,162,39,0.35) transparent;
}

#sidebar[style*="4.25rem"]::-webkit-scrollbar {
  width: 2px;
}

#sidebar[style*="4.25rem"]::-webkit-scrollbar-track {
  background: transparent;
}

#sidebar[style*="4.25rem"]::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(232,196,90,0.55) 0%, rgba(201,162,39,0.50) 100%);
  box-shadow: none;
}

/* ── Logout ─────────────────────────────────────────────────────────────── */
#logout-button:hover,
#logout-button:focus {
  background:   rgba(220,53,69,0.12) !important;
  border-color: rgba(220,53,69,0.55) !important;
  color:        rgba(255,120,120,1)  !important;
  box-shadow:   none !important;
  outline:      none !important;
}
#logout-button:active { background: rgba(220,53,69,0.20) !important; }

/* ── Pulso dorado sutil en ítem activo ──────────────────────────────────── */
@keyframes mcf-pulse {
  0%   { box-shadow: 0 1px 6px rgba(0,0,0,0.18); }
  50%  { box-shadow: 0 2px 10px rgba(201,162,39,0.14), 0 1px 6px rgba(0,0,0,0.14); }
  100% { box-shadow: 0 1px 6px rgba(0,0,0,0.18); }
}
@media (prefers-reduced-motion: no-preference) {
  #sidebar .nav-link[style*="rgba(201,162,39,0.12)"] {
    animation: mcf-pulse 4s ease-in-out infinite;
  }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #sidebar       { top: 60px; }
  #toggle-button { top: 70px; }
}