/* ============================================================
   PORTAL COLINAGRO — TEMA SIDEBAR
   Colores, mini-sidebar y funcionalidades del sidebar.
   ============================================================ */

/* ── Sidebar fondo verde menta ───────────────────────────── */
#sidenav-main {
  background: linear-gradient(180deg, #b2dfdb 0%, #c8e6c9 100%) !important;
  box-shadow: 4px 0 20px rgba(0,0,0,0.12) !important;
  transition: width 0.3s ease, transform 0.3s ease !important;
}

/* Quitar el pseudo-elemento oscuro del tema original */
#sidenav-main::before {
  display: none !important;
}

/* ── Textos del logo ──────────────────────────────────────── */
#sidenav-main .brand-title  { color: #004d40 !important; }
#sidenav-main .brand-subtitle { color: #00695c !important; }
#sidenav-main .brand-icon {
  background: linear-gradient(135deg, #26a69a, #00796b) !important;
  box-shadow: 0 4px 12px rgba(0,150,136,0.35) !important;
}

/* ── Links del menú principal ────────────────────────────── */
#sidenav-main .navbar-nav > .nav-item > .nav-link {
  color: #004d40 !important;
}
#sidenav-main .navbar-nav > .nav-item > .nav-link:hover {
  background: rgba(0,0,0,0.08) !important;
  color: #002b22 !important;
}
#sidenav-main .navbar-nav > .nav-item > .nav-link[aria-expanded="true"] {
  background: rgba(0,77,64,0.12) !important;
  color: #002b22 !important;
}

/* ── Iconos ──────────────────────────────────────────────── */
#sidenav-main .nav-icon.info    { background: rgba(6,182,212,0.20)  !important; color: #0277bd !important; }
#sidenav-main .nav-icon.warning { background: rgba(245,158,11,0.20) !important; color: #e65100 !important; }
#sidenav-main .nav-icon.danger  { background: rgba(239,68,68,0.20)  !important; color: #b71c1c !important; }
#sidenav-main .nav-icon.success { background: rgba(16,185,129,0.20) !important; color: #1b5e20 !important; }
#sidenav-main .nav-icon.primary { background: rgba(99,102,241,0.20) !important; color: #283593 !important; }
#sidenav-main .nav-icon.purple  { background: rgba(168,85,247,0.20) !important; color: #6a1b9a !important; }
#sidenav-main .nav-icon.pink    { background: rgba(236,72,153,0.20) !important; color: #880e4f !important; }

/* ── Submenú (línea lateral y texto) ─────────────────────── */
#sidenav-main .nav-submenu {
  border-left-color: rgba(0,77,64,0.25) !important;
}
#sidenav-main .nav-submenu .nav-link {
  color: #00352b !important;
}
#sidenav-main .nav-submenu .nav-link:hover {
  background: rgba(0,0,0,0.08) !important;
  color: #002b22 !important;
}
#sidenav-main .nav-dot {
  background: rgba(0,77,64,0.45) !important;
}
#sidenav-main .nav-submenu .nav-link:hover .nav-dot {
  background: #004d40 !important;
}

/* ── Separador y footer ──────────────────────────────────── */
#sidenav-main .separator-title {
  color: rgba(0,77,64,0.55) !important;
  border-top-color: rgba(0,77,64,0.20) !important;
}
#sidenav-main .sidenav-footer {
  border-top-color: rgba(0,77,64,0.15) !important;
}
#sidenav-main .footer-content {
  background: rgba(0,77,64,0.10) !important;
}
#sidenav-main .footer-content:hover {
  background: rgba(0,77,64,0.18) !important;
}
#sidenav-main .footer-title  { color: #004d40 !important; }
#sidenav-main .footer-subtitle { color: #00695c !important; }

/* ── Scrollbar del sidebar — minimalista ─────────────────── */
#sidenav-main .sidenav-body::-webkit-scrollbar       { width: 3px !important; }
#sidenav-main .sidenav-body::-webkit-scrollbar-track { background: transparent !important; }
#sidenav-main .sidenav-body::-webkit-scrollbar-thumb { background: rgba(0,77,64,0.22) !important; border-radius: 99px !important; }
#sidenav-main .sidenav-body::-webkit-scrollbar-thumb:hover { background: rgba(0,77,64,0.45) !important; }
#sidenav-main .sidenav-body { scrollbar-width: thin !important; scrollbar-color: rgba(0,77,64,0.22) transparent !important; }

/* ── Botón SALIR ─────────────────────────────────────────── */
.btn-salir {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px 16px;
  background: linear-gradient(135deg, #26a69a 0%, #00796b 100%);
  color: #ffffff !important;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.btn-salir:hover {
  background: linear-gradient(135deg, #00796b 0%, #004d40 100%);
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0,77,64,0.30);
}

/* ── Botón cerrar (X) adaptado al fondo verde ────────────── */
#sidenav-main .sidenav-close-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  background: rgba(0,77,64,0.12) !important;
  color: #004d40 !important;
  border: 1px solid rgba(0,77,64,0.20) !important;
}
#sidenav-main .sidenav-close-btn::before {
  display: block !important;
  margin: 0 !important;
  line-height: 1 !important;
}
#sidenav-main .sidenav-close-btn:hover {
  background: rgba(0,77,64,0.22) !important;
  color: #002b22 !important;
}

/* ── Corregir doble flecha en los ítems del menú ─────────── */
#sidenav-main .navbar-nav > .nav-item > .nav-link::after {
  display: none !important;
  content: none !important;
}

/* ── Hamburguesa siempre visible para poder reabrir ──────── */
#iconNavbarSidenav {
  display: block !important;
  position: fixed !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 1060 !important;
  background: linear-gradient(135deg, #26a69a, #00796b) !important;
  border-radius: 10px !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0,77,64,0.3) !important;
  transition: all 0.3s ease !important;
}
#iconNavbarSidenav:hover {
  background: linear-gradient(135deg, #00796b, #004d40) !important;
  box-shadow: 0 4px 14px rgba(0,77,64,0.4) !important;
}
#iconNavbarSidenav .sidenav-toggler-inner .sidenav-toggler-line {
  background: #fff !important;
}
li:has(#iconNavbarSidenav) {
  display: flex !important;
}
/* Cuando el sidebar está abierto, ocultar el logo debajo del hamburguesa */
.g-sidenav-pinned #iconNavbarSidenav {
  display: none !important;
}
/* En mini mode: ocultar el brand-icon para que no se superponga */
.g-sidenav-hidden #sidenav-main .brand-icon {
  display: none !important;
}

/* ── Restaurar el colapso de submenús ─────────────────────── */
#sidenav-main .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"] {
  pointer-events: auto !important;
  cursor: pointer !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   MINI SIDEBAR — Al colapsar queda visible solo con iconos
   ═══════════════════════════════════════════════════════════════ */

/* En desktop (≥1200px): reducir a 72px y mostrar solo los iconos */
@media (min-width: 1200px) {
  .g-sidenav-hidden #sidenav-main {
    width: 72px !important;
    max-width: 72px !important;
    min-width: 72px !important;
    transform: translateX(0) !important;
  }
  .g-sidenav-hidden .main-content {
    margin-left: 72px !important;
  }
  .g-sidenav-pinned .main-content {
    margin-left: 280px !important;
  }
}

/* ── Ocultar texto y elementos sobrantes en mini mode ──────── */
.g-sidenav-hidden #sidenav-main .nav-link-text,
.g-sidenav-hidden #sidenav-main .nav-arrow,
.g-sidenav-hidden #sidenav-main .brand-text,
.g-sidenav-hidden #sidenav-main .separator-title,
.g-sidenav-hidden #sidenav-main .footer-text,
.g-sidenav-hidden #sidenav-main .sidenav-close-btn {
  display: none !important;
}
.g-sidenav-hidden #sidenav-main .navbar-nav .collapse {
  display: none !important;
}

/* ── Centrar iconos del nav principal ──────────────────────── */
.g-sidenav-hidden #sidenav-main .navbar-nav {
  padding: 0 !important;
}
.g-sidenav-hidden #sidenav-main .navbar-nav > .nav-item > .nav-link {
  justify-content: center !important;
  padding: 10px 8px !important;
  margin: 0 8px 2px !important;
}
.g-sidenav-hidden #sidenav-main .nav-icon {
  margin-right: 0 !important;
  width: 40px !important;
  height: 40px !important;
}

/* ── Header mini: solo el icono del logo centrado ──────────── */
.g-sidenav-hidden #sidenav-main .sidenav-header {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 1rem 0.25rem !important;
}
.g-sidenav-hidden #sidenav-main .navbar-brand {
  justify-content: center !important;
  width: 100% !important;
}

/* ── Footer mini: solo el icono de ayuda centrado ──────────── */
.g-sidenav-hidden #sidenav-main .sidenav-footer {
  padding: 0.75rem 0.25rem !important;
}
.g-sidenav-hidden #sidenav-main .footer-content {
  padding: 0.5rem !important;
  justify-content: center !important;
}

/* ── Eliminar scroll horizontal en mini mode ───────────────── */
.g-sidenav-hidden #sidenav-main,
.g-sidenav-hidden #sidenav-main .sidenav-body,
.g-sidenav-hidden #sidenav-main .collapse.navbar-collapse {
  overflow-x: hidden !important;
}
.g-sidenav-hidden #sidenav-main .nav-separator {
  padding: 0 4px !important;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR GLOBAL — Minimalista cross-browser
   Chromium (Chrome, Edge, Opera): control total
   Firefox: scrollbar-width thin + color
   Safari: webkit (igual que Chromium)
   ═══════════════════════════════════════════════════════════════ */

/* ── Scrollbar de la página principal (html/body) ──────────── */
html {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0,0,0,0.18) transparent !important;
}
html::-webkit-scrollbar              { width: 6px !important; height: 6px !important; }
html::-webkit-scrollbar-track        { background: transparent !important; }
html::-webkit-scrollbar-thumb        { background: rgba(0,0,0,0.18) !important; border-radius: 99px !important; }
html::-webkit-scrollbar-thumb:hover  { background: rgba(0,0,0,0.32) !important; }
html::-webkit-scrollbar-corner       { background: transparent !important; }

/* ── Scrollbar de contenedores internos (tablas, modales, etc.) */
*:not(#sidenav-main):not(#sidenav-main *) {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0,0,0,0.14) transparent !important;
}
*:not(#sidenav-main):not(#sidenav-main *)::-webkit-scrollbar             { width: 5px !important; height: 5px !important; }
*:not(#sidenav-main):not(#sidenav-main *)::-webkit-scrollbar-track       { background: transparent !important; }
*:not(#sidenav-main):not(#sidenav-main *)::-webkit-scrollbar-thumb       { background: rgba(0,0,0,0.14) !important; border-radius: 99px !important; }
*:not(#sidenav-main):not(#sidenav-main *)::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.28) !important; }

/* ── Botón SALIR en mini mode: solo icono ──────────────────── */
.g-sidenav-hidden #sidenav-main .btn-salir {
  font-size: 0 !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  margin: 6px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
}
.g-sidenav-hidden #sidenav-main .btn-salir::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  content: "\f2f5" !important;
  font-size: 1rem !important;
  color: #ffffff !important;
  display: block !important;
}