:root {
  --bs-primary: #44483e;
  --bs-primary-rgb: 68, 72, 62;
  --bs-link-color: #44483e;
  --bs-link-hover-color: #002b6e;
      --bs-btn-bg: #4d4d90;

          --bs-btn-color: #fff;
    --bs-btn-bg: #4d4d90;
    --bs-btn-border-color: #4d4d90;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4d4d90;
    --bs-btn-hover-border-color: #4d4d90;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4d4d90;
    --bs-btn-active-border-color: #4d4d90;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #4d4d90;
    --bs-btn-disabled-border-color: #4d4d90;
        --bs-btn-color: #fff;
    --bs-btn-bg: #4d4d90;
    --bs-btn-border-color: #4d4d90;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4d4d90;
    --bs-btn-hover-border-color: #4d4d90;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4d4d90;
    --bs-btn-active-border-color: #4d4d90;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #4d4d90;
    --bs-btn-disabled-border-color: #4d4d90;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #4d4d90;
    --bs-btn-border-color: #4d4d90;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4d4d90;
    --bs-btn-hover-border-color: #4d4d90;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4d4d90;
    --bs-btn-active-border-color: #4d4d90;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #4d4d90;
    --bs-btn-disabled-border-color: #4d4d90;
}

.text-primary { color: #4d4d90 !important; }
.bg-primary { background-color: #50508c !important; }
.border-primary { border-color: #4d4d90 !important; }
body {
    background-color: #f8f9fa;

}

.bg-primary, .card-primary, .text-bg-primary {
    --lte-card-variant-bg: #4d4d90;
    --lte-card-variant-bg-rgb: 77,77,144;
    --lte-card-variant-color: #fff;
    --lte-card-variant-color-rgb: 255,255,255;
}

/* Sidebar con fondo */
.app-sidebar {
  background-image: url('/images/background/blueprint-light.jpg');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #fff;
  width: 250px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #50508c;
  z-index: 1060;
  opacity: 0;              /* oculto por defecto */
  pointer-events: none;    /* no interactuable */
  transition: opacity 1s ease-in-out; /* fade */
}

/* Sidebar visible con fade */
.app-sidebar.show {
  opacity: 1;
  pointer-events: auto;
}

/* Desktop: sidebar fijo */
@media (min-width: 992px) {
  .app-sidebar {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    z-index: auto;
  }
  #sidebarOverlay { display: none; }
}

/* Overlay en móviles */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1050;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease-in-out;
}

.sidebar-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* Overlay con gradiente dentro del sidebar */
.app-sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,50,0.7), rgba(0,0,50,0.7));
  z-index: 0;
}

.app-sidebar .sidebar-content { position: relative; z-index: 1; }

/* Espaciado del contenido principal */
main > .container-fluid { padding: 10px 15px 20px; }

/* Chevron con rotación suave */
.nav-link .bi-chevron-left { transition: transform 1s ease; }
.nav-link[aria-expanded="true"] .bi-chevron-left { transform: rotate(-90deg); }