/* Fondo para modo claro */
body {
  background: url('../Vistas/dist/img/background14.jpg') center center no-repeat fixed !important;
  background-size: cover !important;
}

/* Fondo para modo oscuro */
body.dark-mode {
  background: url('../Vistas/dist/img/imagen1.jpeg') center center no-repeat fixed !important;
  background-size: cover !important;
}

/* Fondo translúcido para el contenido principal */
.content-wrapper {
  background: rgba(255,255,255,0.50);   /* Blanco translúcido */
  border-radius: 18px;
  padding: 24px 18px;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10);
  margin-top: 24px;
  margin-bottom: 24px;
  /* Opcional: si tu contenido se pega a los lados */
  /* margin-left: 24px;
     margin-right: 24px; */
}

/* En modo oscuro, fondo gris oscuro translúcido */
body.dark-mode .content-wrapper {
  background: rgba(30,35,40,0.70);
  color: #f2f2f2;
  box-shadow: 0 4px 32px 0 rgba(0,0,0,0.28);
}



  /* BRAND-LINK modo CLARO */
body:not(.dark-mode) .brand-link {
    background-color: #becbcf !important; /* Blanco */
    color: #222 !important;
    border-bottom: 1px solid #dbe2e8 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Texto y logo en brand-link */
body:not(.dark-mode) .brand-link .brand-image,
body:not(.dark-mode) .brand-link span {
    color: #222 !important;
    filter: none !important; /* Quita el filtro blanco si tuviera */
}

/* BRAND-LINK modo OSCURO */
body.dark-mode .brand-link {
    background-color: #1f242e !important; /* Como el sidebar oscuro */
    color: #fff !important;
    border-bottom: 1px solid #363e47 !important;
}
body.dark-mode .brand-link .brand-image,
body.dark-mode .brand-link span {
    color: #fff !important;
}


/* SIDEBAR modo CLARO */
body:not(.dark-mode) .main-sidebar,
body:not(.dark-mode) .main-sidebar.sidebar-dark-primary {
    background-color: #edf0f1 !important; /*  clarito */
    color: #222 !important;
}
body:not(.dark-mode) .main-sidebar .brand-link,
body:not(.dark-mode) .main-sidebar .user-panel,
body:not(.dark-mode) .main-sidebar .sidebar,
body:not(.dark-mode) .main-sidebar .nav-link,
body:not(.dark-mode) .main-sidebar .nav-link i,
body:not(.dark-mode) .main-sidebar .nav-link span {
    color: #222 !important;
}

/* SIDEBAR modo OSCURO */
body.dark-mode .main-sidebar,
body.dark-mode .main-sidebar.sidebar-dark-primary {
    background-color: #181a1d !important; /* azul-negro oscuro AdminLTE */
    color: #fff !important;
}
body.dark-mode .main-sidebar .brand-link,
body.dark-mode .main-sidebar .user-panel,
body.dark-mode .main-sidebar .sidebar,
body.dark-mode .main-sidebar .nav-link,
body.dark-mode .main-sidebar .nav-link i,
body.dark-mode .main-sidebar .nav-link span {
    color: #fff !important;
}

/* OPCIONAL: efecto al seleccionar */
.main-sidebar .nav-link.active {
    background: #b0bfc4 !important; /* para modo claro */
    color: #007bff !important;      /* azulito al estar activo */
}
body.dark-mode .main-sidebar .nav-link.active {
    background: #2f3746 !important;
    color: #dde8eb !important;
}



/* Navbar color MODO CLARO */
body:not(.dark-mode) .main-header.navbar {
    background-color: #edf0f1 !important; /* gris muy claro (bootstrap-light) */
    color: #222 !important;
    transition: background 0.3s;
}

/* Navbar color MODO OSCURO */
body.dark-mode .main-header.navbar {
    background-color: #181a1d !important; /* gris oscuro */
    color: #fff !important;
    transition: background 0.3s;
}

/* Iconos y links dentro del navbar */
body:not(.dark-mode) .main-header .navbar-nav .nav-link,
body:not(.dark-mode) .main-header .navbar-brand,
body:not(.dark-mode) .main-header .user-panel .info,
body:not(.dark-mode) .main-header .navbar-nav .nav-item .nav-link {
    color: #222 !important;
}
body.dark-mode .main-header .navbar-nav .nav-link,
body.dark-mode .main-header .navbar-brand,
body.dark-mode .main-header .user-panel .info,
body.dark-mode .main-header .navbar-nav .nav-item .nav-link {
    color: #fff !important;
}


  /*<!-- Opcional: fondo personalizado -->*/


    .main-header.navbar {
        min-height: 56px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        transition: background 0.2s;
    }
    .main-header .navbar-nav .nav-link,
    .main-header .navbar-brand {
        padding-top: .6rem !important;
        padding-bottom: .6rem !important;
        line-height: 1.5 !important;
    }
    .dropdown-menu {
      z-index: 1051 !important;
    }
    .main-header.navbar {
      min-height: 56px !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      transition: background 0.2s;
      position: relative;
      z-index: 1030;
    }