:root{
  --sky:#37BFEC;
  --blue:#1881BC;
  --blue-dark:#125E85;
  --amber:#C9782E;
  --danger:#B3432B;
}

/* Sidebar con la paleta azul del logo DSI */
.sidebar.sidebar-dark{
  background: linear-gradient(180deg, #1C2126 10%, #1E2A33 100%) !important;
}
.sidebar.sidebar-dark .nav-item .nav-link.active,
.sidebar.sidebar-dark .nav-item.active .nav-link{
  color: #fff;
}
.sidebar .nav-item.active .nav-link{
  background-color: var(--blue);
  border-radius: .35rem;
}
.sidebar-heading{ color: rgba(255,255,255,.5) !important; }
.sidebar-brand-icon i{ color: var(--sky); }

.btn-primary{ background-color: var(--blue); border-color: var(--blue); }
.btn-primary:hover, .btn-primary:focus{ background-color: var(--blue-dark) !important; border-color: var(--blue-dark) !important; }
.text-primary{ color: var(--blue) !important; }
.border-left-primary{ border-left: .25rem solid var(--blue) !important; }
.bg-gradient-primary{
  background-color: var(--blue) !important;
  background-image: linear-gradient(180deg, var(--sky) 0%, var(--blue) 60%, var(--blue-dark) 100%) !important;
}

/* ---------- LOGIN ---------- */
.login-card{ width:100%; max-width:420px; border-top:6px solid var(--blue); border-radius:.5rem; }

/* ---------- Componentes propios ---------- */
.badge-nuevo{ background:#E1F3FB; color:var(--blue-dark); }
.badge-usado{ background:#F1EEE0; color:#7A6425; }

.equipo-info-box{
  background:#EAF6FC; border:1px dashed #BFE4F5; border-radius:.35rem;
  padding:10px 14px; font-size:13.5px;
}
.barcode-box{ background:#fff; border:1px solid #D9DBD3; border-radius:.35rem; padding:16px; text-align:center; }

@media print{
  .no-print{ display:none !important; }
  body{ padding:0; background:#fff; }
}

/* ---------- FIX: sidebar en móvil ----------
   Por defecto SB Admin 2 muestra en móvil una barra angosta de solo íconos
   (6.5rem) cuyos submenús se despliegan como flyout hacia el lateral, y no
   es un elemento fijo (se desplaza con el scroll de la página). Aquí lo
   convertimos en el mismo sidebar "completo" del escritorio: fijo a la
   ventana, ancho completo con texto, y los submenús se expanden hacia abajo
   empujando el contenido en vez de flotar al costado. */
/* ---------- FIX GLOBAL: los submenús del sidebar SIEMPRE se expanden
   hacia abajo, nunca como flyout al lateral. Esto cubre todos los casos:
   el modo por defecto, el colapsado ("toggled") y cualquier ancho de
   pantalla. Va sin media query para que aplique siempre. ---------- */
.sidebar .nav-item .collapse,
.sidebar.toggled .nav-item .collapse{
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 1;
  -webkit-animation: none !important;
  animation: none !important;
  margin: 0 1rem !important;
}
.sidebar .nav-item .collapsing,
.sidebar.toggled .nav-item .collapsing{
  display: block !important;
  transition: height .15s ease !important;
}
.sidebar .nav-item .collapse .collapse-inner,
.sidebar.toggled .nav-item .collapse .collapse-inner{
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---------- En escritorio, SB Admin 2 tiene un botón (círculo abajo del
   sidebar) que lo encoge a una barra de solo íconos. No lo queremos: el
   menú completo debe quedarse fijo y completo siempre. Se desactiva ese
   modo y se oculta el botón, ya que dejaría de tener función. ---------- */
@media (min-width: 768px){
  .sidebar.toggled{
    width: 14rem !important;
    overflow: visible !important;
  }
  .sidebar.toggled .nav-item .nav-link{
    text-align: left !important;
    width: 14rem !important;
  }
  .sidebar.toggled .nav-item .nav-link span{
    font-size: .85rem !important;
    display: inline !important;
  }
  .sidebar.toggled .sidebar-brand .sidebar-brand-text{
    display: inline !important;
  }
  #sidebarToggle{
    display: none !important;
  }
}

@media (max-width: 767.98px){
  .sidebar{
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh;
    width: 14rem !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1040;
  }
  .sidebar .sidebar-brand .sidebar-brand-text{
    display: inline;
  }
  .sidebar .nav-item .nav-link{
    display: block;
    width: 100%;
    text-align: left;
    padding: 1rem;
  }
  .sidebar .nav-item .nav-link i{
    font-size: .85rem;
    margin-right: .25rem;
  }
  .sidebar .nav-item .nav-link span{
    font-size: .85rem;
    display: inline;
  }
  .sidebar .nav-item .nav-link[data-toggle="collapse"]::after{
    width: 1rem; text-align:center; float:right; vertical-align:0; border:0;
    font-weight:900; content:'\f107'; font-family:'Font Awesome 5 Free';
  }
  .sidebar .nav-item .nav-link[data-toggle="collapse"].collapsed::after{
    content: '\f105';
  }
  /* Submenú: hacia abajo (inline), no como flyout absoluto */
  .sidebar .nav-item .collapse{
    position: relative;
    left: 0;
    top: 0;
    z-index: 1;
    -webkit-animation: none;
    animation: none;
    margin: 0 1rem;
  }
  .sidebar .nav-item .collapsing{
    display: block;
    transition: height .15s ease;
  }
  .sidebar .nav-item .collapse .collapse-inner{
    border-radius: 0;
    box-shadow: none;
  }

  /* El contenido se desplaza (no se sobrepone) mientras el sidebar está fijo */
  #content-wrapper{
    margin-left: 14rem;
    transition: margin-left .15s ease;
  }
  body.sidebar-toggled #content-wrapper{
    margin-left: 0;
  }
}