/*
Template Name: Monster Admin
Author: Themedesigner
Email: niravjoshi87@gmail.com
File: scss
*/
/*
Template Name: Monster Admin
Author: Themedesigner
Email: niravjoshi87@gmail.com
File: scss
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
    --primary-color: #0f172b;
    --black-primary: #0f172b;
    --black-dark: #020618;
    --black-light: #f8fafc;
    --black-accent: #90a1b9;
    --black-highlight: #e4e8ef; 
    --black-input-shadow: #d9d9d9;

    /* modo dark */
    --black-bg-dark: #020617;
    --black-content-dark: #1d293d;
    --black-input-dark: #0c1023;
    --black-border-dark: #1a2230;
    --black-button-second: #0c1023;

    --black-font-family: 'Inter', sans-serif;

    --danger: #e7000b;
    --success: #5ea500;
    --warning: #f54900;
    --primary: #155dfb;
    --info: #1dadff; 
}

/*Preloader*/
.preloader {
  width: 100%;
  height: 100%;
  top: 0px;
  position: fixed;
  z-index: 99999;
  background: #fff;
}

.preloader .cssload-speeding-wheel {
  position: absolute;
  top: calc(50% - 3.5px);
  left: calc(50% - 3.5px);
}

/*******************
/*Top bar
*******************/
.topbar {
  background: var(--black-primary);
}

.topbar .navbar-header {
  background: rgba(0, 0, 0, 0.05);
}

.topbar .top-navbar .navbar-header .navbar-brand .dark-logo {
  display: none;
}

.topbar .top-navbar .navbar-header .navbar-brand .light-logo {
  display: inline-block;
  color: rgba(255, 255, 255, 0.8);
}

.topbar .navbar-light .navbar-nav .nav-item > a.nav-link {
  color: #ffffff !important;
}

.topbar .navbar-light .navbar-nav .nav-item > a.nav-link:hover, .topbar .navbar-light .navbar-nav .nav-item > a.nav-link:focus {
  color: rgba(255, 255, 255, 0.8) !important;
}

/*******************
/*General Elements
*******************/
a.link:hover, a.link:focus {
  color: var(--black-primary) !important;
}

.bg-theme {
  background-color: var(--black-primary) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: var(--black-primary) !important;
  border-color: var(--black-primary) !important;
  border-radius: 5px;
  vertical-align: middle;
}

.right-sidebar .rpanel-title {
  background: var(--black-primary);
}

.stylish-table tbody tr:hover, .stylish-table tbody tr.active {
  border-left: 4px solid var(--black-primary);
}

.text-themecolor {
  color: var(--black-primary) !important;
}

.profile-tab li a.nav-link.active,
.customtab li a.nav-link.active {
  border-bottom: 2px solid var(--black-primary);
  color: var(--black-primary);
}

.profile-tab li a.nav-link:hover,
.customtab li a.nav-link:hover {
  color: var(--black-primary);
}

/*******************
/*Buttons
*******************/
.btn-themecolor,
.btn-themecolor.disabled {
  background: var(--black-primary);
  color: #ffffff;
  border: 1px solid var(--black-primary);
}

.btn-themecolor:hover,
.btn-themecolor.disabled:hover {
  background: var(--black-primary);
  opacity: 0.7;
  border: 1px solid var(--black-primary);
}

.btn-themecolor.active, .btn-themecolor:focus,
.btn-themecolor.disabled.active,
.btn-themecolor.disabled:focus {
  background: var(--black-primary);
}

/*******************
/*sidebar navigation
*******************/
.sidebar-nav {
  background: #fff;
}

.sidebar-nav ul li a {
  color: #607d8b;
}

.sidebar-nav ul li a.active, .sidebar-nav ul li a:hover {
  color: var(--black-primary);
}

.sidebar-nav ul li a.active {
  color: var(--black-primary);
}

.sidebar-nav ul li.nav-small-cap {
  color: #99abb4;
}

.sidebar-nav > ul > li.active > a, .sidebar-nav > ul > li.active:hover > a {
  color: #ffffff !important;
  background: var(--black-primary) !important;
}

.sidebar-nav > ul > li.active > a i, .sidebar-nav > ul > li.active:hover > a i {
  color: #ffffff !important;
}

.sidebar-nav > ul > li.active > a:after, .sidebar-nav > ul > li.active:hover > a:after {
  border-color: #ffffff;
}

.sidebar-nav > ul > li > a.active i, .sidebar-nav > ul > li > a:hover i {
  color: var(--black-primary);
}

.sidebar-nav > ul > li > a i {
  color: #99abb4;
}

.sidebar-nav > ul > li > a.active {
  font-weight: 400;
  background: #ffffff;
  color: var(--black-primary);
}

/* Additional styles from Extras/black.css */
html,
body {
    background: #ffffff;
    font-family: var(--black-font-family, sans-serif);
    color: var(--black-dark);
}

.card-body {
    background: #ffffff;
}

.table-responsive{
    border: 1px solid var(--black-highlight);
    border-radius: 10px;
    margin-top: 10px;
}

.btn-primary {
    background-color: var(--black-primary);
    border-color: var(--black-primary);
}

.btn-primary:hover,
.btn-primary.hover {
    background-color: var(--black-primary);
    border-color: var(--black-primary);
    color: #fff;
    opacity: 0.8;
}

.el-button--primary {
    color: #fff;
    background-color: var(--black-primary);
    border-color: var(--black-primary);
}

.el-button--primary:hover {
    color: #fff;
    background-color: var(--black-primary);
    border-color: var(--black-primary);
    opacity: 0.8;
}

.el-input__inner,
.el-textarea__inner {
    border: 1px solid var(--black-highlight);
    color: var(--black-dark);
    background-color: #fcfcfc;
    border-radius: 8px;
}

.el-input__inner:focus {
    border-color: var(--black-accent);
    box-shadow: 0 0 0 0.2rem var(--black-input-shadow);
}

/* Dark mode specific styles */
html.dark, html.dark body {
    background-color: var(--black-bg-dark);
    color: var(--black-light);
}

html.dark .page-wrapper {
    background-color: var(--black-bg-dark);
}

html.dark .card {
    background-color: var(--black-content-dark);
    border-color: var(--black-border-dark);
}

html.dark .card-header {
    background-color: var(--black-content-dark);
    border-bottom-color: var(--black-border-dark);
    color: var(--black-light);
}

html.dark .card-body {
    background: var(--black-content-dark);
    color: var(--black-light);
}

html.dark .card-footer {
    background-color: var(--black-content-dark);
    border-top-color: var(--black-border-dark);
    color: var(--black-light);
}

html.dark .row {
    color: var(--black-light);
}

html.dark .form-control {
    background-color: var(--black-input-dark);
    border-color: var(--black-border-dark);
    color: var(--black-light);
}

html.dark .form-control:focus {
    background-color: var(--black-input-dark);
    border-color: var(--black-accent);
    color: var(--black-light);
}

html.dark .table {
    color: var(--black-light);
}

html.dark .table th {
    border-color: var(--black-border-dark);
    background-color: var(--black-content-dark);
    color: var(--black-light);
}

html.dark .table td {
    border-color: var(--black-border-dark);
    background-color: var(--black-content-dark);
    color: var(--black-light);
}

html.dark .el-input__inner, html.dark .el-textarea__inner {
    border: 1px solid var(--black-border-dark);
    color: var(--black-light);
    background-color: var(--black-input-dark);
}

html.dark .btn-primary {
    background: #ffffff !important;
    border: 1px solid #ffffff !important;
    color: var(--black-dark) !important;
}

html.dark .btn-primary:hover {
    background: var(--black-highlight) !important;
    color: var(--black-dark) !important;
}

html.dark .btn-outline-light {
    border-color: var(--black-light);
    color: var(--black-light);
}

html.dark .btn-outline-light:hover {
    background-color: var(--black-light);
    color: var(--black-dark);
}

html.dark .text-dark {
    color: var(--black-light) !important;
}

html.dark .bg-light {
    background-color: var(--black-content-dark) !important;
}

html.dark .border {
    border-color: var(--black-border-dark) !important;
}

html.dark .border-bottom {
    border-bottom-color: var(--black-border-dark) !important;
}

html.dark .border-top {
    border-top-color: var(--black-border-dark) !important;
}

html.dark .border-left {
    border-left-color: var(--black-border-dark) !important;
}

html.dark .border-right {
    border-right-color: var(--black-border-dark) !important;
}

/* Modal styles for dark mode */
html.dark .modal-content {
    background-color: var(--black-content-dark);
    border-color: var(--black-border-dark);
}

html.dark .modal-header {
    background-color: var(--black-content-dark);
    border-bottom-color: var(--black-border-dark);
    color: var(--black-light);
}

html.dark .modal-title {
    color: var(--black-light);
}

html.dark .modal-footer {
    background-color: var(--black-content-dark);
    border-top-color: var(--black-border-dark);
}

html.dark .modal-body {
    background-color: var(--black-content-dark);
    color: var(--black-light);
}

/* Sidebar navigation for dark mode */
html.dark .sidebar-nav {
    background: var(--black-content-dark);
}

html.dark .sidebar-nav ul li a {
    color: var(--black-light);
}

html.dark .sidebar-nav ul li a.active, 
html.dark .sidebar-nav ul li a:hover {
    color: var(--black-highlight);
}

html.dark .sidebar-nav ul li.nav-small-cap {
    color: var(--black-accent);
}

html.dark .sidebar-nav > ul > li.active > a, 
html.dark .sidebar-nav > ul > li.active:hover > a {
    color: var(--black-light) !important;
    background: var(--black-primary) !important;
}

html.dark .sidebar-nav > ul > li > a.active {
    background: var(--black-content-dark);
    color: var(--black-highlight);
}

/* Scroll list items */
html.dark .scroll_list_items_facturar,
html.dark .lista-producto-facturar {
    background-color: var(--black-content-dark);
    color: var(--black-light);
    border-color: var(--black-border-dark);
}

html.dark .scroll_list_items_facturar li,
html.dark .lista-producto-facturar li {
    border-bottom-color: var(--black-border-dark);
    color: var(--black-light);
}

html.dark .scroll_list_items_facturar li:hover,
html.dark .lista-producto-facturar li:hover {
    background-color: var(--black-input-dark);
}

/* Dropdown menus */
html.dark .dropdown-menu {
    background-color: var(--black-content-dark);
    border-color: var(--black-border-dark);
}

html.dark .dropdown-item {
    color: var(--black-light);
}

html.dark .dropdown-item:hover,
html.dark .dropdown-item:focus {
    background-color: var(--black-input-dark);
    color: var(--black-light);
}

/* Form labels and text */
html.dark .form-label {
    color: var(--black-light);
}

html.dark .text-muted {
    color: var(--black-accent) !important;
}

/* Badges */
html.dark .badge {
    background-color: var(--black-primary);
    color: var(--black-light);
}

/* Alerts */
html.dark .alert {
    background-color: var(--black-content-dark);
    border-color: var(--black-border-dark);
    color: var(--black-light);
}

/* Progress bars */
html.dark .progress {
    background-color: var(--black-input-dark);
}

html.dark .progress-bar {
    background-color: var(--black-primary);
}

/* List groups */
html.dark .list-group-item {
    background-color: var(--black-content-dark);
    border-color: var(--black-border-dark);
    color: var(--black-light);
}

html.dark .list-group-item:hover {
    background-color: var(--black-input-dark);
}

/* Nav tabs */
html.dark .nav-tabs .nav-link {
    color: var(--black-light);
    border-color: var(--black-border-dark);
}

html.dark .nav-tabs .nav-link.active {
    background-color: var(--black-content-dark);
    border-color: var(--black-border-dark);
    color: var(--black-light);
}

/* Responsive styles */
@media only screen and (min-width: 768px) {
    .fullwidth.mini-sidebar.fix-sidebar .left-sidebar {
        position: absolute;
        left: -100px;
    }
    .fullwidth.mini-sidebar .page-wrapper {
        margin-left: 0px;
    }
}

/* Custom styles for better readability */
p,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--black-dark);
}

html.dark p,
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6, 
html.dark .h1, html.dark .h2, html.dark .h3, html.dark .h4, html.dark .h5, html.dark .h6 {
    color: var(--black-light);
   /* color: var(--black-dark);*/
}

.text-muted {
    color: var(--black-accent) !important;
}

/* Floating labels for dark mode */
html.dark .floating-labels label {
    color: var(--black-light) !important;
}

html.element.style {
    color: var(--black-light) !important;
}

.descriptive-icon-2 {
    color: var(--black-accent) !important;
}

.bg-ajuste {
  background-color: #34d16e !important;
  }