/*creaciones mias para mejorar*/
/* .content-wrapper {
    background-image: url(../img/fondo.png);
} */

.login-page {
    background-image: url(../img/inicio.png);
    background-repeat: no-repeat;
  background-position: bottom right;
  background-attachment: fixed;
  background-size: cover;
}

input[data-readonly] {
  pointer-events: none;
  background-color: transparent;
}

.campo {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    background-color: transparent;
    font-weight: bolder;
    pointer-events: none;
    width: 100%;
}

.bg-buscador{
  background-color: #d2f7f7 !important;
  font-size: 0.78rem;
}

.bg-buscador a:focus {
  background: #95e6e6 !important;
  color: #353c3c;
}

.panel-sidebar{
  padding: 5px;
  display: block;
}

.panel-sidebar.active{
  background-color: #6f8888
}

.form-control {
    border: 1px solid #6E62DF;
    border-radius: 0.7rem;
}

.form-control:focus {
  border: 1.8px solid #6E62DF;
  box-shadow: 0 0 4px #6d6dd4ab;
}

.btn {
    border-radius: 0.5rem;
}

.table-responsive thead tr th {
  position: sticky;
  top: 0;
  z-index: 10;
}



@media screen and (max-width: 565px) {
  .priority{
    display:none;
  }

}

.login-card-body, .register-card-body {
    background-color: rgb(28, 2, 90);
    border: 1px solid #6E62DF; 
    color: #fff; 
    padding: 25px; 
    border-radius: 15px;
}
[class*=sidebar-dark-] {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    border-radius: 0 15px 15px 0;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 8px;
  margin: 2px 8px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease-in-out;
  transform: translateX(5px);
}

[class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link.active,
[class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link.active:focus,
[class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link.active:hover {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: #ffffff;
  border-radius: 6px;
  margin: 1px 12px;
  box-shadow: 0 3px 10px rgba(79, 172, 254, 0.3);
  transition: all 0.3s ease-in-out;
  transform: translateX(3px);
}

.nav-link {
  transition: all 0.25s ease;
  border-radius: 6px;
  margin: 1px 8px;
}

[class*=sidebar-dark-] .nav-sidebar > .nav-item > .nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(3px);
  border-radius: 8px;
}

[class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(2px);
  border-radius: 6px;
}

.brand-link {
  border-radius: 0 15px 0 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
[class*=sidebar-dark-] .sidebar a {
    color: #ffffff;
}
.form-control {
    border: 1px solid #6E62DF;
    border-radius: 0.7rem;
    /* box-shadow: 0 0 10px #CCCCFF; */
}

.card {
    box-shadow: 0 0 3px #6e62df85;
}

body {
    color:#000078;
}

label:not(.form-check-label):not(.custom-file-label) {
    font-weight: 400;
}

.pl-1, .px-1 {
    padding-left: 0.25rem!important;
    font-weight: 600;
}

.text-sm .card-title {
    font-size: 1rem;
    font-weight: 600;
}
/*color texto ventas*/
a {
    color: #000078;
    text-decoration: none;
    background-color: transparent;
}

/* Estilos modernos para el navbar */
.main-header.navbar {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: none;
}

.navbar-nav .nav-link {
    border-radius: 8px;
    margin: 0 4px;
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* Estilos modernos para iconos del navbar */
.navbar-nav .nav-link i {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.3));
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover i {
    background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 4px 8px rgba(255, 107, 107, 0.4));
    transform: scale(1.1) rotate(5deg);
}

/* Iconos específicos del navbar con colores únicos */
.nav-link .fa-bars {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.nav-link .fa-shopping-cart {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.nav-link .fa-file-invoice {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.nav-link .fa-cash-register {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.nav-link .fa-receipt {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.nav-link .fa-sticky-note {
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.btn-outline-light {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.dropdown-menu {
    border-radius: 10px;
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.dropdown-item:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 6px;
    margin: 2px 4px;
}

/* Estilos modernos para iconos de notificaciones */
.nav-link .fa-cubes {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.3));
    transition: all 0.3s ease;
}

.nav-link .fa-calendar-alt {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 2px 4px rgba(255, 154, 158, 0.3));
    transition: all 0.3s ease;
}

.nav-link .fa-expand-arrows-alt {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 2px 4px rgba(168, 237, 234, 0.3));
    transition: all 0.3s ease;
}

/* Efectos hover para iconos de notificaciones */
.nav-link:hover .fa-cubes {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 4px 8px rgba(118, 75, 162, 0.4));
    transform: scale(1.2) rotate(-10deg);
}

.nav-link:hover .fa-calendar-alt {
    background: linear-gradient(135deg, #fecfef 0%, #ff9a9e 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 4px 8px rgba(255, 207, 239, 0.4));
    transform: scale(1.2) rotate(10deg);
}

.nav-link:hover .fa-expand-arrows-alt {
    background: linear-gradient(135deg, #fed6e3 0%, #a8edea 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 4px 8px rgba(254, 214, 227, 0.4));
    transform: scale(1.3);
}

/* Estilos para badges de notificaciones */
.badge {
    background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%) !important;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(255, 107, 107, 0.5);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
    }
}

/* Estilos modernos para iconos del dropdown de usuario */
.dropdown-item i {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.3));
    transition: all 0.3s ease;
    margin-right: 8px;
}

.dropdown-item .fa-building {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.dropdown-item .fa-edit {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.dropdown-item .fa-sign-out-alt {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Efectos hover para iconos del dropdown */
.dropdown-item:hover i {
    background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 4px 8px rgba(255, 107, 107, 0.4));
    transform: scale(1.2) rotate(5deg);
}

.dropdown-item:hover .fa-building {
    transform: scale(1.2) rotate(-5deg);
}

.dropdown-item:hover .fa-edit {
    transform: scale(1.2) rotate(10deg);
}

.dropdown-item:hover .fa-sign-out-alt {
    transform: scale(1.2) rotate(-10deg);
}

/* Estilos modernos para iconos principales del sidebar */
.nav-sidebar .nav-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.3));
    transition: all 0.3s ease;
    margin-right: 10px;
}

/* Iconos específicos del sidebar con colores únicos */
.nav-sidebar .fa-tachometer-alt {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.nav-sidebar .fa-credit-card {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.nav-sidebar .fa-file-signature {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.nav-sidebar .fa-cart-plus {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.nav-sidebar .fa-money-bill-alt {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.nav-sidebar .fa-file {
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.nav-sidebar .fa-search {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.nav-sidebar .fa-cubes {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.nav-sidebar .fa-cogs {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Efectos hover para iconos del sidebar */
.nav-sidebar .nav-link:hover .nav-icon {
    background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 4px 8px rgba(255, 107, 107, 0.4));
    transform: scale(1.2) rotate(5deg);
}

.nav-sidebar .nav-link:hover .fa-tachometer-alt {
    transform: scale(1.2) rotate(-10deg);
}

.nav-sidebar .nav-link:hover .fa-credit-card {
    transform: scale(1.2) rotate(10deg);
}

.nav-sidebar .nav-link:hover .fa-file-signature {
    transform: scale(1.2) rotate(-5deg);
}

.nav-sidebar .nav-link:hover .fa-cart-plus {
    transform: scale(1.2) rotate(15deg);
}

.nav-sidebar .nav-link:hover .fa-money-bill-alt {
    transform: scale(1.2) rotate(-15deg);
}

.nav-sidebar .nav-link:hover .fa-file {
    transform: scale(1.2) rotate(8deg);
}

.nav-sidebar .nav-link:hover .fa-search {
    transform: scale(1.2) rotate(-8deg);
}

.nav-sidebar .nav-link:hover .fa-cubes {
    transform: scale(1.2) rotate(12deg);
}

.nav-sidebar .nav-link:hover .fa-cogs {
    transform: scale(1.2) rotate(-12deg);
}

/* Estilos modernos para iconos de submenús */
.nav-sidebar .far.fa-circle {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 1px 2px rgba(102, 126, 234, 0.2));
    transition: all 0.3s ease;
}

.nav-sidebar .nav-link:hover .far.fa-circle {
    background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 2px 4px rgba(255, 107, 107, 0.3));
    transform: scale(1.1) rotate(180deg);
}

/* Estilos para flechas de expansión */
.nav-sidebar .fas.fa-angle-left {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 1px 2px rgba(168, 237, 234, 0.2));
    transition: all 0.3s ease;
}

.nav-sidebar .nav-link:hover .fas.fa-angle-left {
    background: linear-gradient(135deg, #fed6e3 0%, #a8edea 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 2px 4px rgba(254, 214, 227, 0.3));
    transform: rotate(90deg) scale(1.2);
}

/* Efectos especiales para menús activos */
.nav-sidebar .nav-link.active .nav-icon {
    background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 3px 6px rgba(255, 107, 107, 0.4));
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        filter: drop-shadow(0 3px 6px rgba(255, 107, 107, 0.4));
    }
    to {
        filter: drop-shadow(0 5px 10px rgba(255, 107, 107, 0.6));
    }
}

/* Estilos para iconos en breadcrumbs */
.breadcrumb .fa-home {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 1px 2px rgba(79, 172, 254, 0.2));
    transition: all 0.3s ease;
}

.breadcrumb .fa-home:hover {
    transform: scale(1.1) rotate(-5deg);
    filter: drop-shadow(0 2px 4px rgba(79, 172, 254, 0.4));
}