label {
  color: rgba(0, 0, 0, 0.7);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 10px;
}

/* Google Font*/
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');

/* ===============================
 CSS VARIABLES FOR THEMES
 =============================== */

/* THEME 11 - Boy (Light Blue) - Colores más claros */
body.bg-theme11 {
  --primary-color: #60a5fa;
  --secondary-color: #93c5fd;
  --accent-color: #bfdbfe;
  --primary-gradient: linear-gradient(135deg, #60a5fa, #93c5fd);
  --secondary-gradient: linear-gradient(135deg, #93c5fd, #bfdbfe);
  --accent-gradient: linear-gradient(135deg, #bfdbfe, #dbeafe);
  --sidebar-gradient: linear-gradient(180deg, #000000, #000000);
  --navbar-gradient: linear-gradient(90deg, #3b82f6, #60a5fa);
  --footer-gradient: linear-gradient(90deg, #60a5fa, #3b82f6);
  --card-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95));
  --card-border: rgba(96, 165, 250, 0.2);
  --card-bg: rgba(255, 255, 255, 0.95);
  --loading-gradient: linear-gradient(90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.35));
  --menu-hover: rgba(255, 255, 255, 0.2);
  --menu-active: rgba(255, 255, 255, 0.3);
  --text-on-theme: #ffffff;
  --text-on-theme-secondary: rgba(255, 255, 255, 0.9);
  background-color: #f8fafc;
}

/* THEME 13 - Girl (Light Pink) - Colores más claros */
body.bg-theme13 {
  --primary-color: #f472b6;
  --secondary-color: #f9a8d4;
  --accent-color: #fbbf24;
  --primary-gradient: linear-gradient(135deg, #f472b6, #f9a8d4);
  --secondary-gradient: linear-gradient(135deg, #f9a8d4, #fce7f3);
  --accent-gradient: linear-gradient(135deg, #fce7f3, #fdf2f8);
  --sidebar-gradient: linear-gradient(180deg, #000000, #000000);
  --navbar-gradient: linear-gradient(90deg, #ec4899, #f472b6);
  --footer-gradient: linear-gradient(90deg, #f472b6, #ec4899);
  --card-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95));
  --card-border: rgba(244, 114, 182, 0.2);
  --card-bg: rgba(255, 255, 255, 0.95);
  --loading-gradient: linear-gradient(90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.35));
  --menu-hover: rgba(255, 255, 255, 0.2);
  --menu-active: rgba(255, 255, 255, 0.3);
  --text-on-theme: #ffffff;
  --text-on-theme-secondary: rgba(255, 255, 255, 0.9);
  background-color: #fef7ff;
}

/* THEME 15 - Neutral (Elegant Light) - Más claro */
body.bg-theme15 {
  --primary-color: #fef9c3; /* amarillo muy claro */
  --secondary-color: #dcfce7; /* verde pastel claro */
  --accent-color: #fefce8; /* amarillo mantequilla */
  --primary-gradient: linear-gradient(135deg, #fef9c3, #dcfce7);
  --secondary-gradient: linear-gradient(135deg, #fefce8, #e0f2fe);
  --accent-gradient: linear-gradient(135deg, #fefce8, #fef9c3);
  --sidebar-gradient: linear-gradient(180deg, #000000, #000000); /* menú negro */
  --navbar-gradient: linear-gradient(90deg, #fefce8, #fef9c3); /* navbar suave */
  --footer-gradient: linear-gradient(90deg, #fef9c3, #fefce8); /* footer suave */
  --card-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9));
  --card-border: rgba(254, 249, 195, 0.4);
  --card-bg: rgba(255, 255, 255, 0.95);
  --loading-gradient: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.3));
  --menu-hover: rgba(255, 255, 255, 0.08);
  --menu-active: rgba(255, 255, 255, 0.12);
  --text-on-theme: #ffffff;
  --text-on-theme-secondary: rgba(255, 255, 255, 0.9);
  background-color: #ffffff; /* fondo general muy claro */
}



/* General */
html {
 font-family: 'Roboto', sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
height: 100%;
}

body {
   background-color: #ffffff;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.87);
  letter-spacing: 0.5px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

[tabindex="-1"]:focus {
outline: 0!important
}

::selection {
background: rgba(255, 255, 255, 0.2);
}

select option {
  background: #000;
}

::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px;
  opacity: .7 !important; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: rgba(255, 255, 255, 0.7) !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
 color: rgba(255, 255, 255, 0.7) !important;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  color: #333333;
}
.h1, h1 {
font-size: 48px;
  line-height: 52px;
}
.h2, h2 {
font-size: 38px;
  line-height: 42px;
}
.h3, h3 {
font-size: 30px;
  line-height: 34px;
}
.h4, h4 {
font-size: 24px;
  line-height: 28px;
}
.h5, h5 {
font-size: 18px;
  line-height: 22px;
}
.h6, h6 {
font-size: 14px;
  line-height: 18px;
}

.display-1 {
font-size: 6rem
}
.display-2 {
font-size: 5.5rem
}
.display-3 {
font-size: 4.5rem
}
.display-4 {
font-size: 3.5rem
}
.line-height-0{
line-height:0;
}
.line-height-5 {
  line-height: 5px;
}

.line-height-10 {
  line-height: 5px;
}

code {
  font-size: 87.5%;
  color: #ffed16;
  word-break: break-word;
}
.blockquote-footer{
color: #cecece;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
margin-top: 1rem;
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
p {
margin-bottom: .65rem
}
:focus {
outline: 0!important
}
a {
  color: #000000;
  outline: none!important;
  transition: color 0.3s ease;
}

a:hover{
color: #000000;
text-decoration: none;
}

a.text-muted:focus, a.text-muted:hover {
color: var(--secondary-color);
}

.small, small {
  font-size: 75%;
  font-weight: 400;
}
.small-font{
font-size:14px;
}
.extra-small-font{
font-size:12px;
}
.breadcrumb-item.active {
  color: var(--primary-color);
}
.breadcrumb-item+.breadcrumb-item::before {
  color: #666666;
}

.row{
margin-right: -12.5px;
  margin-left: -12.5px;
}
.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto{
padding-right: 12.5px;
padding-left: 12.5px;
}

/* Menu Sidebar Wrapper */
#wrapper{
width:100%;
position: relative;
}

#sidebar-wrapper {
background: var(--sidebar-gradient);
position: fixed;
top: 0px;
left: 0px;
z-index: 1000;
overflow: hidden;
width: 250px;
height: 100%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease; 
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15);
border-right: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(15px);
}

#wrapper.toggled #sidebar-wrapper {
 position: fixed;
   left: -250px;
}

#wrapper.toggled .menu-icon{
margin-left: 0px;
}

#wrapper.toggled .content-wrapper {
  margin-left: 0;
}

/* Page Content Wrapper */
.content-wrapper {
  margin-left: 250px;
padding-top: 70px;
padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 70px;
  overflow-x: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease; 
}

/*----------------right-sidebar----------------*/
.right-sidebar{
width: 260px;
  height: 100%;
  max-height: 100%;
  position: fixed;
overflow: scroll;
overflow-x: hidden;
  top: 0;
  right: -300px;
  z-index: 999;
text-align:center;
padding:10px;
  background: var(--sidebar-gradient);
box-shadow: 0 16px 38px -12px rgba(0,0,0,.25), 0 4px 25px 0 rgba(0,0,0,.15), 0 8px 10px -5px rgba(0,0,0,.15);
-webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(15px);
}

.switcher-icon{
width: 40px;
  height: 40px;
line-height:40px;
  background: var(--primary-color);
text-align:center;
font-size:22px;
color:#fff;
cursor: pointer;
  display: inline-block;
box-shadow: 0 8px 25px rgba(0,0,0,.25), 0 4px 15px 0 rgba(0,0,0,.15), 0 4px 8px -3px rgba(0,0,0,.15);
  position: fixed;
  right: 0;
  top: 15rem;
  border-top-left-radius: .25rem;
  border-bottom-left-radius: .25rem;
-webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.switcher-icon:hover {
  background: var(--secondary-color);
  transform: translateX(-3px);
}

.right-sidebar.right-toggled{
right: 0px;
}
.right-sidebar.right-toggled .switcher-icon{
right: 260px;
}

.bg-theme{
   background-size: 100% 100%;
   background-attachment: fixed;
   background-position: center;
 background-repeat: no-repeat;
   transition: background .3s;
}

.switcher {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
margin-left: 20px;
}
.switcher li {
float: left;
width: 85px;
height: 75px;
margin: 0 15px 15px 0px;
border-radius: 4px;
border: 2px solid rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}

.switcher li:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.switcher li.active {
  border-color: #fff;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

/* ===============================
 THEME DEFINITIONS (Switcher) - Colores más claros
 =============================== */
#theme1 {
background-image: url(../images/bg-themes/1.png);
background-size: 100% 100%;
background-position: center;
transition: background .3s;
}
#theme2 {
background-image: url(../images/bg-themes/2.png);
background-size: 100% 100%;
background-position: center;
transition: background .3s;
}
#theme3 {
background-image: url(../images/bg-themes/3.png);
background-size: 100% 100%;
background-position: center;
transition: background .3s;
}
#theme4 {
background-image: url(../images/bg-themes/4.png);
background-size: 100% 100%;
background-position: center;
transition: background .3s;
}
#theme5 {
background-image: url(../images/bg-themes/5.png);
background-size: 100% 100%;
background-position: center;
transition: background .3s;
}
#theme6 {
background-image: url(../images/bg-themes/6.png);
background-size: 100% 100%;
background-position: center;
transition: background .3s;
}
#theme7 {
background-image: linear-gradient(45deg, #0c675e, #069e90);
background-size: 100% 100%;
background-position: center;
transition: background .3s;
}
#theme8 {
background-image: linear-gradient(567deg, rgba(165, 42, 4, 0.89), rgba(113, 102, 8, 0.89), rgba(13, 95, 16, 0.93), rgba(4, 79, 88, 0.94), rgba(19, 56, 86, 0.9), rgba(24, 32, 78, 0.94), rgba(100, 8, 115, 0.95));
background-size: 100% 100%;
background-position: center;
transition: background .3s;
}
#theme9 {
background-image: linear-gradient(45deg, #29323c, #485563);
background-size: 100% 100%;
background-position: center;
transition: background .3s;
}
#theme10 {
background-image: linear-gradient(45deg, #795548, #945c48);
background-size: 100% 100%;
background-position: center;
transition: background .3s;
}

#theme11 {
background-image: linear-gradient(45deg, #60a5fa, #93c5fd);
background-size: 100% 100%;
background-position: center;
transition: background .3s;
}

#theme12 {
background-image: linear-gradient(45deg, #65379b, #886aea);
background-size: 100% 100%;
background-position: center;
transition: background .3s;
}

#theme13 {
background-image: linear-gradient(180deg, #f9a8d4, #fce7f3);
background-size: 100% 100%;
background-position: center;
transition: background .3s;
}

#theme14 {
background-image: linear-gradient(180deg, #08a50e, #69bb03);
background-size: 100% 100%;
background-position: center;
transition: background .3s;
}

#theme15 {
background-image: linear-gradient(45deg, #6b7280, #9ca3af);
background-size: 100% 100%;
background-position: center;
transition: background .3s;
}

/* ===============================
 OTHER BODY THEMES - Colores más claros
 =============================== */
body.bg-theme1 {
background-image: url(../images/bg-themes/1.png);
}
body.bg-theme2 {
background-image: url(../images/bg-themes/2.png);
}
body.bg-theme3 {
background-image: url(../images/bg-themes/3.png);
}
body.bg-theme4 {
background-image: url(../images/bg-themes/4.png);
} 
body.bg-theme5 {
background-image: url(../images/bg-themes/5.png);
} 
body.bg-theme6 {
background-image: url(../images/bg-themes/6.png);
}
body.bg-theme7 {
background-image: linear-gradient(45deg, #0c675e, #069e90);
} 
body.bg-theme8 {
background-image: linear-gradient(567deg, rgba(165, 42, 4, 0.89), rgba(113, 102, 8, 0.89), rgba(13, 95, 16, 0.93), rgba(4, 79, 88, 0.94), rgba(19, 56, 86, 0.9), rgba(24, 32, 78, 0.94), rgba(100, 8, 115, 0.95));
} 
body.bg-theme9 {
background-image: linear-gradient(45deg, #29323c, #485563);
} 
body.bg-theme10 {
background-image: linear-gradient(45deg, #795548, #945c48);
} 
body.bg-theme12 {
background-image: linear-gradient(45deg, #65379b, #886aea);
}   
body.bg-theme14 {
background-image: linear-gradient(180deg, #08a50e, #69bb03);
}

/* Topbar Header */   
.topbar-nav .navbar{
 padding: 0px 15px;
 z-index: 999;
 height: 60px;
 background: var(--navbar-gradient);
 -webkit-box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15);
 box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15);
 border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 backdrop-filter: blur(15px);
}

.toggle-menu i {
 margin-left: 250px;
 font-size: 14px;
 font-weight: 600;
 color: #000000;
 cursor: pointer;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all 0.3s ease; 
 text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.right-nav-link a.nav-link {
  padding-right: .8rem !important;
  padding-left: .8rem !important;
  font-size: 20px;
  color: #000000;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.right-nav-link a.nav-link:hover {
  color: rgba(255, 255, 255, 0.8);
  transform: scale(1.1);
}

/* Dropdown Menu */
.dropdown-menu {
border: 1px solid rgba(255, 255, 255, 0.2);
-webkit-box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25)!important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25)!important;
  font-size:15px;
background: rgba(255, 255, 255, 0.98);
  color: #333333;
  max-width: 350px;
  backdrop-filter: blur(20px);
  border-radius: 8px;
}

.dropdown-menu ul{
margin-top: 0px;
}

.dropdown-divider{
  margin: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.dropdown-item{
padding: .70rem 1.5rem;
color: #555555;
white-space: normal;
  transition: all 0.3s ease;
}

.dropdown-item:hover{
padding: .70rem 1.5rem;
background: var(--primary-gradient);
color: #ffffff;
  transform: translateX(5px);
}

.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background: var(--primary-gradient);
}
.dropdown-toggle-nocaret:after {
display: none
}

.profile-card-2 .profile {
  border-radius: 50%;
  position: absolute;
  top: 83pt;
  left: 15%;
  max-width: 60pt;
  border: 3px solid rgba(255, 255, 255, 1);
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.profile-card-2 .card-img-block {
  float: left;
  width: 100%;
  height: 150px;
  overflow: hidden;
}
/* User Details */
.user-profile img {
width:35px;
height:35px;
border-radius: 50%;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
border: 2px solid rgba(255, 255, 255, 0.7);
transition: all 0.3s ease;
}

.user-profile img:hover {
  transform: scale(1.05);
}

.user-details .media .avatar img {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.7);
}

.user-details .media .media-body .user-title {
font-size: 14px;
color: var(--text-on-theme);
font-weight: 600;
margin-bottom: 2px;
}

.user-details .media .media-body .user-subtitle {
font-size: 13px;
color: var(--text-on-theme-secondary);
margin-bottom: 0;
}

/* Logo */
.brand-logo{
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
}

.logo-text{
color: var(--text-on-theme);
font-size: 15px;
display: inline-block;
text-transform: uppercase;
position: relative;
  top: 3px;
font-weight: 600;
text-align: center;
line-height:50px;
  margin-left: 15px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.logo-icon{
  width: 20%;
  margin: 5px 0px 5px -70px;
  border-radius: 5px;
}

/* SearchBar */
.search-bar{
margin-left: 20px;
position: relative;
}

.search-bar input{
 border: 1px solid rgba(255, 255, 255, 0.4);
   font-size: 15px;
   width: 530px;
   border-radius: 0.25rem;
   height: 34px;
   padding: .375rem 2.0rem .375rem .75rem;
   background-color: rgba(255, 255, 255, 0.2);
   color: var(--text-on-theme);
   backdrop-filter: blur(10px);
   transition: all 0.3s ease;
}

.search-bar input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px;
  opacity: .7 !important;
}

.search-bar input:focus{ 
 background-color: rgba(255, 255, 255, 0.3);
 border: 2px solid rgba(255, 255, 255, 0.6);
 box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.search-bar a i{
position: absolute;
  top: 10px;
  right: 15px;
  color: rgba(255, 255, 255, 0.8);
 font-size: 16px;
  transition: all 0.3s ease;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.search-bar a i:hover {
  color: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

.product-img {
  height: 32px;
}

.skill-img{
height: 35px;
}

.page-title{
 font-size: 20px;
 line-height: 20px;
}

.breadcrumb{
 padding: 0;
 background-color: transparent;
}

.sidebar-menu li a i:first-child {
  margin-right: 10px;
  font-size: 18px;
  color: inherit;
}

.sidebar-menu li a i:last-child {
  margin-right: 10px;
  font-size: 12px;
}

.sidebar-menu li a {
  color: var(--text-on-theme);
  padding: 12px 15px;
  display: block;
  border-radius: 8px;
  margin: 3px 10px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-weight: 500;
  backdrop-filter: blur(10px);
}

.sidebar-menu li a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--menu-hover);
  transition: left 0.3s ease;
  z-index: -1;
}

.sidebar-menu li a:hover::before {
  left: 0;
}

.sidebar-menu li a:hover {
  background: var(--menu-hover);
  color: var(--text-on-theme);
  text-decoration: none;
  transform: translateX(3px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}

.sidebar-menu li.active a {
  background: var(--menu-active);
  color: var(--text-on-theme);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
}

.sidebar-menu li.loading a {
  background: var(--loading-gradient);
  animation: loading-pulse 1.5s ease-in-out infinite;
}

@keyframes loading-pulse {
  0%, 100% {
      opacity: 0.8;
  }
  50% {
      opacity: 1;
  }
}

.row.row-group>div {
  border-right: 1px solid var(--card-border);
}

.row.row-group>div:last-child{
  border-right: none;
}

/*Cards */
.card{
 margin-bottom: 25px; 
 box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
 border: 1px solid var(--card-border);
 background: var(--card-gradient);
 border-radius: 12px;
 backdrop-filter: blur(15px);
 transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.calendario{
  margin-bottom: 25px; 
  border: none;
  background: var(--primary-gradient) !important;
  border-radius: 12px;
}

.card-header {
  padding: 1rem 1.5rem;
  margin-bottom: 0;
  background: var(--primary-gradient);
  border-bottom: none;
  font-weight: 600;
 font-size: 14px;
 color: #ffffff;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.card-title {
margin-bottom: .75rem;
font-weight: 600;
font-size: 16px;
color: #333333;
}

.card-action{
float: right
}

.card-action a i{
  color: var(--primary-color);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.card-action a i:hover{
  color: var(--secondary-color);
  transform: scale(1.1);
}

.card-footer {
  padding: .75rem 1.25rem;
  background-color: rgba(0, 0, 0, 0);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.card-deck {
  margin-bottom: 25px;
}

@media (min-width: 576px){
.card-deck {
  margin-right: -12.5px;
  margin-left: -12.5px;
}	

.card-deck .card {
  margin-right: 12.5px;
  margin-left: 12.5px;
}
}

.card-group {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 25px;
}
.card-group .card {
box-shadow: none;
}

/*Buttons */
.btn{
font-size: .70rem;
  font-weight: 500;
  letter-spacing: 1px;
  padding: 9px 19px;
  border-radius: .25rem;
  text-transform: uppercase;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
  transition: all 0.3s ease;
}
.btn-link{
color: var(--primary-color);
}
.btn:focus{
box-shadow:none;
outline: 2px solid rgba(255, 255, 255, 0.5);
outline-offset: 2px;
}
.btn-lg {
  padding: 12px 38px;
  font-size: .90rem;
}

.btn-sm {
  font-size: 10px;
  font-weight: 500;
  padding: 6px 15px;
}

.btn-group-sm>.btn{
 font-size: 10px;
}

.btn-primary {
color: #000000;
background: var(--primary-gradient);
border-color: var(--primary-color);
}

.btn-primary:hover {
color: #000000;
background: var(--secondary-gradient);
border-color: var(--secondary-color);
transform: translateY(-1px);
}

.btn-primary.focus, .btn-primary:focus {
box-shadow:none;
}

.btn-primary.disabled, .btn-primary:disabled {
color: #000000;
background-color: var(--primary-color);
border-color: var(--primary-color);
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
color: #000000;
background: var(--secondary-gradient);
border-color: var(--secondary-color);
}

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
box-shadow:none;
}

.btn-secondary {
color: #fff;
background: var(--secondary-gradient);
border-color: var(--secondary-color);
}
.btn-secondary:hover {
color: #fff;
background: var(--accent-gradient);
border-color: var(--accent-color);
transform: translateY(-1px);
}
.btn-secondary.focus, .btn-secondary:focus {
box-shadow:none;
}
.btn-secondary.disabled, .btn-secondary:disabled {
color: #fff;
background-color: var(--secondary-color);
border-color: var(--secondary-color);
}
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
color: #fff;
background: var(--accent-gradient);
border-color: var(--accent-color);
}
.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-secondary.dropdown-toggle:focus {
box-shadow:none;
}

.btn-success {
color: #fff;
background: linear-gradient(135deg, #10b981, #34d399);
border-color: #10b981;
}
.btn-success:hover {
color: #fff;
background: linear-gradient(135deg, #059669, #10b981);
border-color: #059669;
transform: translateY(-1px);
}
.btn-success.focus, .btn-success:focus {
box-shadow:none;
}
.btn-success.disabled, .btn-success:disabled {
color: #fff;
background-color: #10b981;
border-color: #10b981;
}
.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show>.btn-success.dropdown-toggle {
color: #fff;
background-color: #059669;
border-color: #059669;
}
.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show>.btn-success.dropdown-toggle:focus {
box-shadow:none;
}

.btn-info {
color: #fff;
background: linear-gradient(135deg, #06b6d4, #67e8f9);
border-color: #06b6d4;
}
.btn-info:hover {
color: #fff;
background: linear-gradient(135deg, #0891b2, #06b6d4);
border-color: #0891b2;
transform: translateY(-1px);
}
.btn-info.focus, .btn-info:focus {
box-shadow:none;
}
.btn-info.disabled, .btn-info:disabled {
color: #fff;
background-color: #06b6d4;
border-color: #06b6d4;
}
.btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show>.btn-info.dropdown-toggle {
color: #fff;
background-color: #0891b2;
border-color: #0891b2;
}
.btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus, .show>.btn-info.dropdown-toggle:focus {
box-shadow:none;
}

.btn-warning {
color: #fff;
background: linear-gradient(135deg, #f59e0b, #fbbf24);
border-color: #f59e0b;
}
.btn-warning:hover {
color: #fff;
background: linear-gradient(135deg, #d97706, #f59e0b);
border-color: #d97706;
transform: translateY(-1px);
}
.btn-warning.focus, .btn-warning:focus {
box-shadow:none;
}
.btn-warning.disabled, .btn-warning:disabled {
color: #fff;
background-color: #f59e0b;
border-color: #f59e0b;
}
.btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, .show>.btn-warning.dropdown-toggle {
color: #fff;
background-color: #d97706;
border-color: #d97706;
}
.btn-warning:not(:disabled):not(.disabled).active:focus, .btn-warning:not(:disabled):not(.disabled):active:focus, .show>.btn-warning.dropdown-toggle:focus {
box-shadow:none;
}

.btn-danger {
color: #fff;
background: linear-gradient(135deg, #ef4444, #f87171);
border-color: #ef4444;
}
.btn-danger:hover {
color: #fff;
background: linear-gradient(135deg, #dc2626, #ef4444);
border-color: #dc2626;
transform: translateY(-1px);
}
.btn-danger.focus, .btn-danger:focus {
box-shadow:none;
}
.btn-danger.disabled, .btn-danger:disabled {
color: #fff;
background-color: #ef4444;
border-color: #ef4444;
}
.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show>.btn-danger.dropdown-toggle {
color: #fff;
background-color: #dc2626;
border-color: #dc2626;
}
.btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus, .show>.btn-danger.dropdown-toggle:focus {
box-shadow:none;
}

.btn-light{
color: #000000;
background: rgba(255,255,255,.2);
border-color: rgba(255,255,255,.3);
}
.btn-light:hover {
color: #000000;
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.4);
transform: translateY(-1px);
}
.btn-light.focus, .btn-light:focus {
box-shadow:none;
}
.btn-light.disabled, .btn-light:disabled {
color: #000000;
background-color: rgba(255,255,255,.2);
border-color: rgba(255,255,255,.3);
}
.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show>.btn-light.dropdown-toggle {
color: #000000;
background-color: rgba(255,255,255,.2);
border-color: rgba(255,255,255,.3);
}
.btn-light:not(:disabled):not(.disabled).active:focus, .btn-light:not(:disabled):not(.disabled):active:focus, .show>.btn-light.dropdown-toggle:focus {
box-shadow:none;
}

label {
  color: rgba(0, 0, 0, 0.7);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 10px;
}

/* Forms */
.form-control{
border: 1px solid rgba(0, 0, 0, 0.4);
background-color: rgba(255, 255, 255, 0.2);
color: #000000 !important;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}

.form-control:focus{
background-color: rgba(255, 255, 255, 0.3);
border: 2px solid rgba(0, 0, 0, 0.6);
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
outline: 2px solid rgba(255, 255, 255, 0.5);
outline-offset: 2px;
}

/* Tables */
.table {
  width: 100%;
  margin-bottom: 1rem;
  color: rgba(0, 0, 0, 0.85);
  background: var(--card-gradient);
}

.table thead th {
  font-size: .72rem;
  padding-top: .75rem;
  padding-bottom: .75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--primary-color);
  background: var(--primary-gradient);
  color: #000000;
}

.table td, .table th {
  white-space: nowrap;
border-top: 1px solid var(--card-border);
}

.table-hover tbody tr:hover {
background-color: rgba(0, 0, 0, 0.05);
}

/* Badges */
.badge {
  display: inline-block;
  padding: .25em .4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075);
}

.badge-primary {
  color: #000000;
  background: var(--primary-gradient);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.badge-secondary {
  color: #000000;
  background: var(--secondary-gradient);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Navigation */
.nav-tabs .nav-link {
color: #333333;
font-size: 12px;
  text-align: center;
letter-spacing: 1px;
  font-weight: 600;
margin: 0px;
  margin-bottom: 0;
padding: 12px 20px;
  text-transform: uppercase;
  border: 0px solid transparent;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
  transition: all 0.3s ease;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show>.nav-link {
  color: #000000;
  background: var(--primary-gradient);
  border-color: var(--primary-color);
  border-bottom: 4px solid var(--primary-color);
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: #fff;
  background: var(--primary-gradient);
}

/* Alerts */
.alert {
  position: relative;
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: .25rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075);
}

.alert-primary {
  color: #ffffff;
  background: var(--primary-gradient);
  border-color: var(--primary-color);
}

.alert-success {
  color: #ffffff;
  background: linear-gradient(135deg, #10b981, #34d399);
  border-color: #10b981;
}

.alert-info {
  color: #ffffff;
  background: linear-gradient(135deg, #06b6d4, #67e8f9);
  border-color: #06b6d4;
}

.alert-warning {
  color: #ffffff;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  border-color: #f59e0b;
}

.alert-danger {
  color: #ffffff;
  background: linear-gradient(135deg, #ef4444, #f87171);
  border-color: #ef4444;
}

/* Progress bars */
.progress {
  display: -ms-flexbox;
  display: flex;
  height: .75rem;
  overflow: hidden;
  font-size: .75rem;
  background-color: rgba(255,255,255,.2);
  border-radius: .25rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.progress-bar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background: var(--primary-gradient);
  transition: width .6s ease;
}

/* List Groups */
.list-group-item {
  position: relative;
  display: block;
  padding: .75rem 1.25rem;
  margin-bottom: -1px;
  background: var(--card-gradient);
  border: 1px solid var(--card-border);
  transition: all 0.3s ease;
}

.list-group-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.list-group-item.active {
  z-index: 2;
  color: #fff;
  background: var(--primary-gradient);
  border-color: var(--primary-color);
}

/* Pagination */
.page-link {
position: relative;
display: block;
padding: .5rem .75rem;
margin-left: -1px;
line-height: 1.25;
color: rgba(0, 0, 0, 0.7);
  background: var(--card-gradient);
  border: 1px solid var(--card-border);
box-shadow: 0 0.125rem 0.25rem rgba(80, 73, 73, 0.06);
transition: all 0.3s ease;
}

.page-link:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--primary-color);
}

.page-item.active .page-link {
z-index: 1;
color: #fff;
  background: var(--primary-gradient);
border-color: var(--primary-color);
}

/* Footer */
.footer {
bottom: 0px;
color: #000000;
text-align: center;
padding: 12px 30px;
position: fixed;
right: 0;
left: 250px;
background: var(--footer-gradient);
border-top: 1px solid rgba(255, 255, 255, 0.3);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
z-index: 999;
backdrop-filter: blur(15px);
box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1);
font-size: 13px;
}

.footer a {
color: #330be2;
text-decoration: none;
transition: color 0.3s ease;
}

.footer a:hover {
color: rgba(95, 28, 250, 0.8);
text-decoration: none;
}

#wrapper.toggled .footer{
  position: absolute;
  left: 0px;
}

/* Background Colors */
.bg-primary {
  background: var(--primary-gradient) !important;
}
.bg-secondary {
  background: var(--secondary-gradient) !important;
}

/* Text Colors */
.text-primary {
  color: var(--primary-color) !important;
}
.text-secondary {
  color: var(--secondary-color) !important;
}

/* Border Colors */
.border-primary {
  border-color: var(--primary-color) !important;
}
.border-secondary {
  border-color: var(--secondary-color) !important;
}

/* Responsive */
@media only screen and (max-width: 1199px){
.row.row-group>div {
  border-right: 0;
  border-bottom: 1px solid var(--card-border);
}

.row.row-group>div:last-child{
  border-right: none;
  border-bottom: 0;
}
}

@media only screen and (max-width: 1024px) {
#sidebar-wrapper {
background: var(--sidebar-gradient);  
  position: fixed;
  top: 0px;
  left: -250px;
  z-index: 1000;
  overflow-y: auto;
  width: 250px;
  height: 100%;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  box-shadow: none;
}

.toggle-menu i {
  line-height: 60px;
  margin-left: 0px;
  font-size: 15px;
  cursor: pointer;
}

.content-wrapper {
  margin-left: 0px;
  padding-left: 10px;
  padding-right: 10px;
}

.footer {
position: fixed;
left: 0px;
bottom: 0px
}

#wrapper.toggled #sidebar-wrapper {
  position: fixed;
top: 0px;
  left: 0px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#wrapper.toggled .overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background: #000;
  opacity: 0.4;
  z-index: 999;
  display: block;
}

#wrapper.toggled .menu-icon{
margin-left: 0px;
}

#wrapper.toggled .content-wrapper {
  margin-left: 0px;
}

#wrapper.toggled .footer{
  position: absolute;
  left: 0px;
}

.search-bar{
margin-left: 10px;
position: relative;
}

.search-bar input{
width: 100%;
height: 30px;
}

}

@media only screen and (max-width: 480px){
.search-bar{
margin-left: 5px;
position: relative;
}

.search-bar input{
width: 100%;
}

.dropdown-lg{
  display: none;
}

.right-nav-link a.nav-link{
  padding-right: .0rem !important;
}

.topbar-nav .navbar {
  padding: 0px 10px 0 5px;
}

.switcher li {
  width: 70px;
  height: 60px;
  margin: 0 10px 10px 0;
}
}

/* Extra Animations */
.icon-tab {
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  background-color: transparent;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.icon-tab i {
  color: var(--primary-color);
  transition: transform 0.3s ease, color 0.3s ease;
}

.icon-tab:hover i {
  color: var(--secondary-color);
  transform: scale(1.1);
}

.animation {
  animation: animation-1o9rwv0 3000ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s infinite normal none running;
  box-shadow: 0 0 0 2px var(--primary-color);
}

@keyframes animation-1o9rwv0 {
  0%, 33% {
      box-shadow: 0 0 0 2px var(--primary-color), 0 0 0 0 var(--primary-color);
  }
  66%, 100% {
      box-shadow: 0 0 0 2px var(--primary-color), 0 0 0 10px rgba(255, 255, 255, 0.01);
  }
}

/* Estilos adicionales para tema switcher mejorado */
.theme-selected {
    animation: theme-pulse 0.5s ease-in-out;
    border: 2px solid #fff !important;
    box-shadow: 0 0 15px rgba(255,255,255,0.6) !important;
}

@keyframes theme-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Mejoras de transiciones globales */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Clase para prevenir flash de tema incorrecto */
body:not([class*="bg-theme"]) {
  background-color: #f8fafc;
}