:root {
  --main: #2d15b6;
  --main-hover: #251198;
  --main-accent: #beb8e4;
  --gray: #eeeeee;
  --muted: #808080;
  --borders: #dedede;
  --light: #fff;
  --dark: #000;
  --b-radius: .25rem;
  --danger: #ea2525;
  --danger-hover: #ffe9e9;
  
  /* Media Query Breakpoints */
  --mobile: 576px;
  --tablet: 768px;
  --desktop: 992px;
  --wide: 1200px;
}

/*Comment de prueba*/

/*Color de fondo*/
body {
  background-color: var(--gray);
}

/*Button Override*/
.btn-primary {
  background-color: var(--main);
  border-color: var(--main);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.dropdown-item:active {
  background-color: var(--main-hover);
}

.form-control:focus,
.btn-primary:focus {
  border-color: #2a14b8;
  box-shadow: 0 0 0 .25rem rgba(42, 20, 184, .25);
}

a {
  color: var(--main);
}




/*Nuevas clases boostrap*/

/*Widths*/
.fit-width {
  width: fit-content;
}

/*Height-fit content*/
.h-fit-content {
  height: fit-content !important;
}


/*Fit content*/
.fit-content {
  width: fit-content;
}

.fit-height {
  height: fit-content !important;
}

/*White space no wrap(texto este en la misma linea)*/
.space-nowrap {
  white-space: nowrap;
}

/*Text color*/

.text-purple {
  color: #7655fa;
}

/*Font wheight*/
.fw-medium {
  font-weight: 500;
}

/*font-size*/
.fs-7 {
  font-size: 14px;
}

.fs-8 {
  font-size: 12px;
}

.text-1 {
  font-size: 40px;
}

.text-4 {
  font-size: 24px;
}

@media (max-width:1400px) {
  .text-4 {
    font-size: 2vw;
  }

  .text-1 {
    font-size: 2.3vw;
  }
}

@media (max-width:1300px) {
  .text-1 {
    font-size: 30px;
  }
}

/*Paddings*/
.pi {
  padding: inherit;
}


/*Columnas*/

.col-md-1-5 {
  width: 12.333% !important;
}

.col-md-5-5 {
  width: 49% !important;
}

@media (min-width:768px) {
  .col-md-2-5 {
    width: 23.333% !important;
  }
}

@media (min-width:1200px) {
  .col-xl-2-5 {
    width: 20% !important;
  }
}

/*Height*/
.fit-height {
  height: fit-content;
}

.hp-40 {
  min-height: 40px;
  height: 40px;
}

.hp-50 {
  min-height: 50px;
  height: 50px;
}

.hp-190 {
  height: 190px;
}

.hp-300 {
  min-height: 300px;
}

.mh-200 {
  min-height: 200px;
}


/*Contenedores*/
.container-icono {
  width: 40px !important;
  height: 40px !important;
}

.icono {
  width: 20px !important;
  height: 20px !important;
}

.full-card {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.full-card-top {
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

@media (max-width:1000px) {
  .full-card {
    flex-direction: column;
  }

  .full-card-top {
    flex-direction: column !important;
  }
}

/*position*/
@media (min-width: 992px) {
  .position-lg-fixed {
    position: fixed;
  }
}

/*Color de fondo de card*/
.bg-main-card {
  background-color: var(--main);
}

.bg-submain-card {
  background-color: #6443e7;
}

.bg-accent {
  background-color: var(--main-accent);
}

.bg-icon-uni {
  background-color: #9987d5;
}

.bg-normal {
  background-color: #f0f0f1;
}

.bg-earnings {
  background-color: #e5e4fb;
}

.bg-profit {
  background-color: #ddf4e5;
}

.bg-expense {
  background-color: #f7e1e2;
}

.bg-check {
  background-color: #fcefe0;
}

.bg-time {
  background-color: #fbf2f2;
}

.bg-danger-custom {
  background-color: #f7e2e2;
}

.bg-green {
  background-color: #03d7a0;
}

.bg-yellow {
  background-color: #ffaa43;
}

.bg-red {
  background-color: #f3496d;
}

.bg-course {
  background: rgb(141, 142, 238);
  background: linear-gradient(90deg, rgba(141, 142, 238, 1) 0%, rgba(107, 107, 229, 1) 100%);
}


/*borders*/
.border-earnings {
  border: 1px solid #ebf1f4;
}

/*Font color*/
.fc-earnings {
  color: #5cbe70;
}

.fc-pending {
  color: #f39c12;
}

.fc-error {
  color: #e74c3c;
}



/*shadows*/
.shadow-container {
  box-shadow: 1px 0px 7px 0px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 1px 0px 7px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 1px 0px 7px 0px rgba(0, 0, 0, 0.15);
}

.shadow-md {
  box-shadow: 0px 0px 6px 1px rgba(125, 125, 125, 0.25);
}

/*dots*/
.dots svg {
  margin-top: -20px;
}

/*Charts*/
.contenedor-chart {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width:449px) {
  .contenedor-chart {
    min-height: 150px;
  }
}

@media (min-width:450px) and (max-width:999px) {
  .contenedor-chart {
    min-height: 250px;
  }
}

.barras-chart {
  height: 100px;
}


/*Datepicker (Asistentes)*/
.datepicker table tr.active-week td {
  background-color: var(--main) !important;
  color: white;
}

.datepicker table tr:hover td {
  background-color: #8A8A8F !important;
}

/*Circulo dos letras inciales usuario*/
.circulo-usuario {
  background-color: var(--main);
  border-color: var(--main);
  border-radius: 100%;
  height: 35px;
  width: 35px;
  align-items: center;
  display: flex;
  justify-content: center;
  padding-bottom: 2px;
}

.circulo-usuario-2 {
  background-color: var(--main);
  border-color: var(--main);
  border-radius: 100%;
  height: 55px;
  width: 55px;
  align-items: center;
  display: flex;
  justify-content: center;
  padding-bottom: 2px;
}

.circulo-letras {
  border-radius: 100%;
  border: none;
  height: 35px;
  width: 35px;
  align-items: center;
  display: flex;
  justify-content: center;
  padding-bottom: 2px;
}

/*Border-radius*/

.rounded-4 {
  border-radius: 1.4rem;
}

.rounded-3-5 {
  border-radius: 0.5rem;
}

.no-rounded-top-left {
  border-top-left-radius: 0 !important;
}

.no-rounded-top-left {
  border-top-left-radius: 0 !important;
}

/*Butones Custom*/
.button-menu {
  background: var(--main);
  /* background: linear-gradient(180deg, rgba(155,156,234,1) 0%, rgba(109,110,230,1) 46%, rgba(104,105,230,1) 100%);*/
  border-radius: .3rem !important;
  color: #fff !important;
}

.button-back {
  border-radius: 7px;
  border: 2px solid #72baff;
  background: #fff0;
  color: #3996ff;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 12px;
}

/*Position*/
@media (min-width:991px) {
  .position-lg-relative {
    position: relative !important;
  }
}

/*Fly container (contenedor fixed)*/
@media(max-width:991px) {
  .fly-container {
    position: fixed;
    bottom: 0px;
    left: 0px;
    border: 1px solid #00000070;
    background-color: #fff;
    border-radius: 2rem 2rem 0rem 0rem;
    height: 50vh !important;
    overflow: scroll;
    transition: all ease-in-out 0.4s;
  }

  .fly-container.inactive {
    transform: translateY(500px) !important;
  }

  .fly-container.card-section.active {
    transform: translateY(0px) !important;
  }

  .fly-container .card-section {
    border: 0px !important;
  }
}

._close {
  margin-left: 10px;
}

@media(min-width:991px) {
  ._close {
    display: none;
  }
}

.error-message span {
  background-color: #ffd4d4;
  padding: 6px 8px;
  border-radius: 5px;
  border-left: 4px solid #f52929;
  width: 100%;
  display: flex;
}

.student-card {
  border-radius: 10px;
  border: 1px solid #000;
  overflow: hidden;
}

.student-card .head {
  background: url('/assets/bg.jpg');
  height: 85px;
  width: 100%;
  background-position: center;
  background-size: cover;
}

.student-card .user-avatar {
  width: 100%;
  margin-top: -84px;
  display: flex;
  justify-content: end;
  padding: 15px;
}

.student-card .user-avatar .circulo-usuario-2 {
  height: 100px;
  width: 100px;
}

.student-card .user-data {
  padding: 0px 20px 20px;
  margin-top: -45px;
}

.student-card .user-data span {
  color: #000;
  font-size: 0.7rem;
}

.student-card .user-data p {
  color: #7f7f7f;
  font-size: 1rem;
  line-height: 1rem;
}

.success-icon{
    font-size: 5rem;
    color: #62cc38;
}

/* ========================================= */
/* CLASES UNIFICADAS PARA ESTADÍSTICAS */
/* ========================================= */

/* Valores de estadísticas */
.stat-value {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: inherit; /* Hereda el color del contenedor padre */
}

/* Etiquetas de estadísticas */
.stat-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: inherit; /* Hereda el color del contenedor padre para que funcione con fondos de colores */
    opacity: 0.95; /* Ligeramente transparente para mejor legibilidad */
}

/* Cambios/Trends de estadísticas */
.stat-change {
    font-size: 0.875rem;
    margin-top: 0.5rem;
    font-weight: 500;
    color: inherit;
}

.stat-change.positive {
    color: #48bb78 !important;
}

.stat-change.negative {
    color: #f56565 !important;
}

/* Estilos específicos para cards de estadísticas modernas */
.stat-card-modern .stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.stat-card-modern .stat-value {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5rem;
    color: var(--qb-text-dark, #2d3748);
}

.stat-card-modern .stat-label {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
}

/* Etiqueta específica para cards con background de color */
.stat-label-card-seg {
    font-size: clamp(0.7rem, 3vw, 1rem);
    color: inherit; /* Hereda del padre */
    font-weight: 500;
    opacity: 0.95;
}

/* Body de cards del dashboard con texto blanco */
.card-body-dashboard {
    color: #fff;
}

.card-body-dashboard .stat-label,
.card-body-dashboard .stat-value,
.card-body-dashboard h4,
.card-body-dashboard h5 {
    color: #fff !important;
}

/* Asegurar que los textos en cards de colores sean blancos */
.bg-primary .stat-label,
.bg-success .stat-label,
.bg-warning .stat-label,
.bg-info .stat-label,
.bg-danger .stat-label {
    color: #fff !important;
    opacity: 0.95;
}

/* ========================================= */
/* ESTILOS PARA DROPDOWNS EN TABLAS */
/* ========================================= */

/* Asegurar que los dropdowns en TODAS las tablas tengan el z-index correcto */
table .dropdown,
.table .dropdown,
.asistenciasTable .dropdown,
#cartillasTable .dropdown,
#_students .dropdown,
#temasTable .dropdown {
   position: relative;
}

/* Aumentar el z-index del dropdown menu cuando está abierto */
table .dropdown-menu,
.table .dropdown-menu,
.asistenciasTable .dropdown-menu,
#cartillasTable .dropdown-menu,
#_students .dropdown-menu,
#temasTable .dropdown-menu {
   z-index: 1050 !important;
   min-width: 150px;
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 0.375rem;
}

/* Asegurar que la fila de la tabla no interfiera con el dropdown */
table tbody tr,
.table tbody tr,
.asistenciasTable tbody tr,
#cartillasTable tbody tr,
#_students tbody tr,
#temasTable tbody tr {
   position: relative;
   z-index: 1;
}

/* Cuando el dropdown está abierto, aumentar el z-index de la fila */
table tbody tr:has(.dropdown.show),
table tbody tr.dropdown-open,
.table tbody tr:has(.dropdown.show),
.table tbody tr.dropdown-open,
.asistenciasTable tbody tr:has(.dropdown.show),
.asistenciasTable tbody tr.dropdown-open,
#cartillasTable tbody tr:has(.dropdown.show),
#cartillasTable tbody tr.dropdown-open,
#_students tbody tr:has(.dropdown.show),
#_students tbody tr.dropdown-open,
#temasTable tbody tr:has(.dropdown.show),
#temasTable tbody tr.dropdown-open {
   z-index: 1051 !important;
}

/* Mejorar el estilo del botón dropdown en tablas */
table .dropdown-toggle,
.table .dropdown-toggle,
.asistenciasTable .dropdown-toggle,
#cartillasTable .dropdown-toggle {
   border: none;
   background: transparent;
   font-weight: 500;
   text-align: center;
   transition: all 0.3s ease;
   position: relative;
   z-index: 1052;
}

table .dropdown-toggle:focus,
.table .dropdown-toggle:focus,
.asistenciasTable .dropdown-toggle:focus,
#cartillasTable .dropdown-toggle:focus,
table .dropdown-toggle:active,
.table .dropdown-toggle:active,
.asistenciasTable .dropdown-toggle:active,
#cartillasTable .dropdown-toggle:active {
   box-shadow: none !important;
   outline: none !important;
}

/* ========================================= */
/* ESTILOS PARA BOTONES OUTLINE */
/* ========================================= */

/* Asegurar que los botones outline tengan el color de texto correcto */
.btn-outline-primary {
   color: var(--main) !important;
   border-color: var(--main);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
   color: #fff !important;
   background-color: var(--main);
   border-color: var(--main);
}

.btn-outline-secondary {
   color: #6c757d !important;
   border-color: #6c757d;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
   color: #fff !important;
   background-color: #6c757d;
   border-color: #6c757d;
}

.btn-outline-success {
   color: #28a745 !important;
   border-color: #28a745;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
   color: #fff !important;
   background-color: #28a745;
   border-color: #28a745;
}

.btn-outline-danger {
   color: #dc3545 !important;
   border-color: #dc3545;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
   color: #fff !important;
   background-color: #dc3545;
   border-color: #dc3545;
}

.btn-outline-warning {
   color: #ffc107 !important;
   border-color: #ffc107;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
   color: #000 !important;
   background-color: #ffc107;
   border-color: #ffc107;
}

.btn-outline-info {
   color: #17a2b8 !important;
   border-color: #17a2b8;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
   color: #fff !important;
   background-color: #17a2b8;
   border-color: #17a2b8;
}