/* ========= CarreroLabs Dark (Global) ========= */

/* Fondo general */
.content-wrapper, .right-side, .main-footer{
  background: #0b1220 !important;
  color: #dbe7ff !important;
}

/* Caja / cards */
.box, .small-box, .info-box, .modal-content {
  background: rgba(15, 23, 42, 0.78) !important;
  color: #dbe7ff !important;
  border: 1px solid rgba(90, 220, 255, 0.10) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 35px rgba(0,0,0,.45) !important;
}

/* Header de boxes */
.box-header{
  color: #dbe7ff !important;
  border-bottom: 1px solid rgba(90, 220, 255, 0.10) !important;
}

/* Navbar superior */
.main-header .navbar{
  background: rgba(8, 15, 30, 0.92) !important;
  border-bottom: 1px solid rgba(90, 220, 255, 0.12) !important;
}
.main-header .logo{
  background: rgba(8, 15, 30, 0.92) !important;
  color: #dbe7ff !important;
  border-right: 1px solid rgba(90, 220, 255, 0.10) !important;
}

/* Sidebar */
.main-sidebar, .left-side{
  background: rgba(6, 10, 22, 0.98) !important;
  border-right: 1px solid rgba(90, 220, 255, 0.12) !important;
}
.sidebar-menu>li>a{
  color: #bcd2ff !important;
}
.sidebar-menu>li.active>a,
.sidebar-menu>li>a:hover{
  background: rgba(90, 220, 255, 0.08) !important;
  color: #e9f4ff !important;
  border-left-color: rgba(90,220,255,0.7) !important;
}
.sidebar-menu .treeview-menu{
  background: rgba(6, 10, 22, 0.98) !important;
}

/* Inputs */
.form-control{
  background: rgba(255,255,255,0.04) !important;
  color: #e9f4ff !important;
  border: 1px solid rgba(90, 220, 255, 0.16) !important;
}
.form-control:focus{
  border-color: rgba(90,220,255,0.55) !important;
  box-shadow: 0 0 0 0.2rem rgba(90,220,255,0.10) !important;
}

/* Tablas */
.table, .table>thead>tr>th, .table>tbody>tr>td{
  color: #dbe7ff !important;
  border-color: rgba(90, 220, 255, 0.10) !important;
}
.table-striped>tbody>tr:nth-of-type(odd){
  background: rgba(255,255,255,0.02) !important;
}

/* Botones (tono CarreroLabs) */
.btn-primary{
  background: linear-gradient(90deg, rgba(0,170,255,0.85), rgba(0,255,190,0.75)) !important;
  border: 0 !important;
  box-shadow: 0 8px 25px rgba(0,170,255,0.20) !important;
}
.btn-primary:hover{
  filter: brightness(1.06);
}
.btn-primary:active{
  transform: scale(0.98);
}

/* Links */
a{ color: rgba(90,220,255,0.95) !important; }
a:hover{ color: rgba(0,255,190,0.95) !important; }

body {
    background-color: #0b1220 !important;
}

.content-wrapper {
    background: #0b1220 !important;
}

.small-box-footer {
    background: rgba(255,255,255,0.03) !important;
}

.small-box {
    border-radius: 14px !important;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 20px rgba(0, 255, 200, 0.08);
}

.sidebar-menu > li.active > a {
    border-left: 3px solid #00ffcc !important;
}

.sidebar-menu > li > a {
    transition: 0.3s ease;
}

.sidebar-menu > li > a:hover {
    padding-left: 20px;
}

.content {
    background: #0b1220 !important;
}

.wrapper {
    background: #0b1220 !important;
}

.row {
    background: transparent !important;
}

/* ===========================
   CARREROLABS - DARK SIDEBAR
   =========================== */

/* Fondo global */
body, .wrapper, .content-wrapper, .right-side {
  background: #0b1220 !important;
}

/* Sidebar completo */
.main-sidebar,
.left-side,
.skin-blue .main-sidebar,
.skin-blue .left-side {
  background: #0a0f1a !important;
}

/* Panel del usuario / buscador / bloques dentro del sidebar */
.skin-blue .sidebar a,
.skin-blue .sidebar,
.skin-blue .sidebar-menu,
.skin-blue .sidebar-menu > li,
.skin-blue .sidebar-menu > li > a,
.skin-blue .user-panel,
.skin-blue .sidebar-form,
.skin-blue .sidebar-form input[type="text"],
.skin-blue .sidebar-form .btn {
  background: transparent !important;
  color: rgba(255,255,255,.85) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* Hover y activo */
.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a {
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
}

/* Iconos del menú lateral */
.skin-blue .sidebar-menu > li > a > .fa,
.skin-blue .sidebar-menu > li > a > .glyphicon,
.skin-blue .sidebar-menu > li > a > .ion {
  color: rgba(120, 220, 255, .95) !important;
}

/* Línea/Separadores */
.skin-blue .sidebar-menu li.header {
  background: rgba(255,255,255,.03) !important;
  color: rgba(255,255,255,.55) !important;
}

/* ===========================
   CARREROLABS - ICONOS EN CAJAS
   =========================== */

.small-box {
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
}

/* El icono grande de la derecha (AdminLTE lo pone con opacity baja) */
.small-box .icon {
  opacity: .28 !important;          /* súbelo (antes suele ser 0.15/0.2) */
  color: rgba(255,255,255,.95) !important;
}

/* Si aun lo ves “apagado”, fuerza el tamaño */
.small-box .icon > i {
  font-size: 72px !important;
}

/* Texto de las cajas */
.small-box h3, .small-box p {
  color: rgba(255,255,255,.92) !important;
}

/* Link "Más info" */
.small-box-footer {
  color: rgba(255,255,255,.75) !important;
}
.small-box-footer:hover {
  color: #fff !important;
}

/* ===========================
   CARREROLABS - BOXES DARK
   (paneles tipo AdminLTE)
   =========================== */

.content-wrapper,
.wrapper,
.right-side {
  background: #0b1220 !important;
}

/* Cajas/paneles */
.box,
.box-header,
.box-body,
.box-footer,
.info-box,
.info-box-content {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.88) !important;
}

.box-title,
.box-header .box-title,
.box-header > .fa,
.box-header > .glyphicon,
.box-header > .ion {
  color: rgba(255,255,255,.90) !important;
}

/* Bordes internos */
.box-header,
.box-footer {
  border-color: rgba(255,255,255,.08) !important;
}

/* Links dentro de boxes */
.box a {
  color: rgba(120, 220, 255, .95) !important;
}
.box a:hover {
  color: #fff !important;
}

/* ===========================
   LISTAS DE PRODUCTOS (AdminLTE)
   Recently Added / Productos más vendidos
   =========================== */

.products-list > .item,
.product-list-in-box > .item,
.todo-list > li,
.users-list > li,
.list-group-item {
  background: rgba(255,255,255,.02) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.85) !important;
}

/* texto y subtexto */
.products-list .product-title,
.products-list .product-title a,
.product-list-in-box .product-title,
.product-list-in-box .product-title a {
  color: rgba(255,255,255,.90) !important;
}

.products-list .product-description,
.product-list-in-box .product-description,
.text-muted {
  color: rgba(255,255,255,.55) !important;
}

/* si hay badges/precios */
.products-list .label,
.product-list-in-box .label {
  opacity: .95 !important;
}

.box {
  background: rgba(20, 28, 45, 0.75) !important;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 200, 255, 0.15) !important;
  box-shadow: 0 0 15px rgba(0, 200, 255, 0.05);
  transition: all .3s ease;
}

.box:hover {
  border-color: rgba(0, 200, 255, 0.35) !important;
  box-shadow: 0 0 25px rgba(0, 200, 255, 0.15);
}

.small-box .icon,
.info-box-icon {
  color: rgba(0, 255, 255, 0.4) !important;
  opacity: 1 !important;
  font-size: 70px !important;
  filter: drop-shadow(0 0 10px rgba(0,255,255,.4));
}

/* ===== CarreroLabs: Logo mini (header) ===== */

/* El contenedor del logo mini (alineación perfecta) */
.main-header .logo .logo-mini{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;            /* AdminLTE suele usar 50px */
  padding: 0 !important;
}

/* La imagen del icono mini */
.main-header .logo .logo-mini img{
filter: brightness(0) invert(1);
}

/* Fondo del header/logo (para que combine con dark) */
.main-header .logo{
  background: rgba(10,14,20,.88) !important;
  border-bottom: 1px solid rgba(0,255,255,.12);
}

/* ================================
   CARREROLABS ACCENT SYSTEM
   ================================ */

:root {
  --cl-accent: #00ffcc;
  --cl-accent-soft: rgba(0,255,204,0.15);
}

/* ===== SIDEBAR ACTIVO ===== */
.sidebar-menu > li.active > a {
  border-left: 3px solid var(--cl-accent) !important;
  background: var(--cl-accent-soft) !important;
  color: #ffffff !important;
}

.sidebar-menu > li > a:hover {
  background: var(--cl-accent-soft) !important;
  color: #ffffff !important;
}

/* ===== INPUTS ===== */
.form-control:focus {
  border-color: var(--cl-accent) !important;
  box-shadow: 0 0 0 0.2rem var(--cl-accent-soft) !important;
}

/* ===== BOTONES PRIMARIOS ===== */
.btn-primary {
  background: linear-gradient(135deg, #00c8ff, #00ffcc) !important;
  border: none !important;
}

.btn-primary:hover {
  box-shadow: 0 0 15px rgba(0,255,204,0.4);
}

/* ===== TABLAS HOVER ===== */
.table-hover > tbody > tr:hover {
  background-color: var(--cl-accent-soft) !important;
}

/* ===== LINKS ===== */
a {
  color: var(--cl-accent);
}

a:hover {
  color: #ffffff;
}

/* ===== BADGES ===== */
.label-primary,
.badge-primary {
  background-color: var(--cl-accent) !important;
}

/* ===== PAGINACIÓN ===== */
.pagination > li > a,
.pagination > li > span {
  background: transparent !important;
  color: var(--cl-accent) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

.pagination > li.active > a {
  background: var(--cl-accent) !important;
  color: #000 !important;
}