/* MATRIX V86.1 — Big 3D icon tiles sidebar */

/* ── 1. Sidebar width — compact tile column ─────────────────────────── */
aside.side-bar {
  width: 9.5rem !important;
  min-width: 9.5rem !important;
  max-width: 9.5rem !important;
}

/* ── 2. Scroll container: flex column ───────────────────────────────── */
#side-bar {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.2rem !important;
  padding: 0.375rem !important;
  box-sizing: border-box !important;
}

/* ── 3. Each tile ────────────────────────────────────────────────────── */
.fxl-tile {
  /* V90.147 — vertical compact tile: icon ON TOP, label BELOW */
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 6px 4px !important;
  gap: 4px !important;
  min-height: 64px !important;
  height: auto !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
  overflow: visible !important;
  cursor: pointer !important;
  text-decoration: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── 4. Icon container ───────────────────────────────────────────────── */
.fxl-tile-ico {
  /* V90.147 — medium icon container 44x44, centered above label */
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

/* SVG icon inside tile-ico */
.fxl-tile-ico > svg {
  width: 1.875rem !important;
  height: 1.875rem !important;
  color: rgba(255, 255, 255, 0.95) !important;
  stroke: rgba(255, 255, 255, 0.95) !important;
  flex-shrink: 0 !important;
}

/* FA <i> inside tile-ico */
.fxl-tile-ico > i {
  font-size: 1.4rem !important;
  color: rgba(255, 255, 255, 0.95) !important;
  width: auto !important;
  height: auto !important;
  min-width: auto !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ── 5. Label ────────────────────────────────────────────────────────── */
.fxl-tile-lbl {
  font-size: 0.695rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  color: #374151 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  text-align: center !important;
  max-width: 100% !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  text-overflow: ellipsis !important;
  transition: color 0.18s ease !important;
}

/* ── 6. Chevron (dropdown indicator, absolute top-right) ─────────────── */
.fxl-tile-chevron {
  position: absolute !important;
  top: 0.5rem !important;
  right: 0.5rem !important;
  width: 0.875rem !important;
  height: 0.875rem !important;
  color: rgba(156, 163, 175, 0.85) !important;
  flex-shrink: 0 !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.18s !important;
  margin: 0 !important;
}

/* Rotate chevron when panel is open */
#side-bar > div:has(.chiled[style*="block"]) > a .fxl-tile-chevron,
#side-bar > div.fxl-tile--active > a .fxl-tile-chevron {
  transform: rotate(90deg) !important;
  color: #6366f1 !important;
}

/* ── 7. Hover ────────────────────────────────────────────────────────── */
.fxl-tile:hover {
  transform: translateY(-5px) !important;
  background: #f7f8ff !important;
  border-color: rgba(99, 102, 241, 0.15) !important;
  box-shadow:
    0 14px 38px rgba(99, 102, 241, 0.17),
    0 4px 12px rgba(0, 0, 0, 0.07),
    0 0 0 1px rgba(99, 102, 241, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.fxl-tile:hover .fxl-tile-ico {
  transform: translateY(-5px) scale(1.12) !important;
  background: var(--fxl-ico-bg, linear-gradient(145deg, #6366f1, #8b5cf6)) !important;
  box-shadow:
    0 16px 38px var(--fxl-tile-glow, rgba(99, 102, 241, 0.52)),
    0 5px 14px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -2px 0 rgba(0, 0, 0, 0.1) !important;
}

.fxl-tile:hover .fxl-tile-lbl {
  color: #4338ca !important;
}

.fxl-tile:hover .fxl-tile-chevron {
  color: #6366f1 !important;
}

/* ── 8. Active state ─────────────────────────────────────────────────── */
.fxl-tile--active,
a.fxl-tile.tw-bg-gray-200 {
  background: linear-gradient(150deg, rgba(99,102,241,0.09), rgba(168,85,247,0.06)) !important;
  border-color: rgba(99, 102, 241, 0.22) !important;
  box-shadow:
    0 4px 18px rgba(99, 102, 241, 0.22),
    0 0 0 1px rgba(99, 102, 241, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.fxl-tile--active .fxl-tile-lbl,
a.fxl-tile.tw-bg-gray-200 .fxl-tile-lbl {
  color: #4338ca !important;
}

/* ── 9. Staggered entrance animation ────────────────────────────────── */
@keyframes fxl-tile-pop-in {
  from { opacity: 0; transform: translateY(22px) scale(0.88); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

#side-bar > a.fxl-tile,
#side-bar > div {
  animation: fxl-tile-pop-in 0.44s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── 10. Child / sub-menu items ──────────────────────────────────────── */
.fxl-child-link {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.375rem !important;
  padding: 0.4rem 0.5rem 0.4rem 1rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.775rem !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-decoration: none !important;
  min-height: auto !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background 0.16s ease, color 0.16s ease, transform 0.15s ease !important;
}

.fxl-child-link::before {
  content: '' !important;
  position: absolute !important;
  left: 0.2rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: #d1d5db !important;
  flex-shrink: 0 !important;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
}

.fxl-child-link:hover {
  background: rgba(99, 102, 241, 0.08) !important;
  color: #4338ca !important;
  transform: translateX(4px) !important;
}

.fxl-child-link:hover::before {
  background: #6366f1 !important;
  box-shadow: 0 0 7px rgba(99, 102, 241, 0.65) !important;
  transform: translateY(-50%) scale(1.6) !important;
}

.fxl-child-link.tw-text-primary-700 {
  color: #4f46e5 !important;
  font-weight: 600 !important;
}

.fxl-child-link.tw-text-primary-700::before {
  background: #6366f1 !important;
  box-shadow: 0 0 7px rgba(99, 102, 241, 0.6) !important;
}

/* Connector line */
.chiled .tw-w-px {
  background: linear-gradient(180deg, rgba(99,102,241,0.32), rgba(168,85,247,0.1)) !important;
  width: 2px !important;
}

/* ── 11. Custom scrollbar ────────────────────────────────────────────── */
#side-bar::-webkit-scrollbar { width: 4px; }
#side-bar::-webkit-scrollbar-track { background: transparent; }
#side-bar::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.28);
  border-radius: 2px;
}

/* ── 12. Dark mode ─────────────────────────────────────────────────────
   V88.40 — Reglas oscuras ahora SOLO se activan cuando el tema EFECTIVO es
   dark. Antes también disparaban con data-theme="dark" aunque el resto de
   la página estuviera en light, dejando tiles negras y etiquetas ilegibles
   sobre un fondo de página claro. data-theme-effective viene del bootstrap
   inline al inicio del <head> y refleja lo que el usuario REALMENTE ve. */
:root[data-theme-effective="dark"] aside.side-bar {
  background: #0d0d1a !important;
  border-right: 1px solid rgba(99, 102, 241, 0.15) !important;
}

:root[data-theme-effective="dark"] .fxl-tile {
  background: rgba(18, 16, 38, 0.92) !important;
  border-color: rgba(99, 102, 241, 0.13) !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.28),
    0 1px 3px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

:root[data-theme-effective="dark"] .fxl-tile-lbl {
  color: rgba(210, 210, 238, 0.82) !important;
}

:root[data-theme-effective="dark"] .fxl-tile:hover {
  background: rgba(28, 24, 55, 0.96) !important;
  box-shadow:
    0 14px 40px rgba(99, 102, 241, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(99, 102, 241, 0.22) !important;
}

/* V88.40 — Refuerzo para tema EFECTIVO claro: garantiza fondo blanco + texto
   oscuro legible en las tiles del sidebar, incluso si otro stylesheet inyecta
   `color: #000` o fuerza un bg oscuro vía cascada. Selector con :root para
   ganar especificidad (0,2,2) contra cualquier .fxl-tile (0,0,1,1). */
:root[data-theme-effective="light"] .fxl-tile {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.045) !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.055),
    0 1px 2px rgba(0, 0, 0, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
:root[data-theme-effective="light"] .fxl-tile-lbl {
  color: #1f2937 !important;          /* slate-800: oscuro, sin glare de negro puro */
  -webkit-text-fill-color: #1f2937 !important;
}
:root[data-theme-effective="light"] aside.side-bar {
  background: #ffffff !important;
  border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
}
:root[data-theme-effective="light"] .fxl-tile:hover {
  background: #f8fafc !important;     /* slate-50: hover muy sutil */
  border-color: rgba(99, 102, 241, 0.35) !important;
  box-shadow:
    0 10px 26px rgba(99, 102, 241, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

:root[data-theme="dark"] .fxl-child-link,
:root[data-theme-effective="dark"] .fxl-child-link {
  color: rgba(180, 180, 208, 0.7) !important;
}

:root[data-theme="dark"] .fxl-child-link:hover,
:root[data-theme-effective="dark"] .fxl-child-link:hover {
  color: #a5b4fc !important;
  background: rgba(99, 102, 241, 0.13) !important;
}