/* Toastr Notification Styling */
#toast-container {
    min-width: 300px;
}

#toast-container > div {
    opacity: 1;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter: alpha(opacity=100);
    box-shadow: 0 0 12px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 12px rgba(0,0,0,0.2);
}

#toast-container > .toast-error {
    background-color: #BD362F !important;
    color: #fff !important;
    border: none !important;
}

#toast-container > .toast-error:hover {
    background-color: #a9302a !important;
    box-shadow: 0 0 12px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 12px rgba(0,0,0,0.4);
}

#toast-container > .toast-success {
    background-color: #51A351 !important;
    color: #fff !important;
    border: none !important;
}

#toast-container > .toast-success:hover {
    background-color: #469046 !important;
    box-shadow: 0 0 12px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 12px rgba(0,0,0,0.4);
}

#toast-container > .toast-message {
    font-size: 14px;
    line-height: 1.4;
    padding: 10px 20px 10px 50px;
}

#toast-container > .toast-close-button {
    color: #fff;
    opacity: 0.8;
    text-shadow: none;
}

#toast-container > .toast-close-button:hover,
#toast-container > .toast-close-button:focus {
    color: #fff;
    opacity: 1;
}

.fondooscuro {
    background-color:lightsteelblue;
    padding: 20px 20px 20px 20px;
}

.fondo-principal {
    background-color: #0099CC;
}

.mensaje-op {
    font-size: 16px;
}

.fontsizetable {
    font-size: 90%;
}

.fontsizetableMensajes {
    font-size: 80%;
}

.right {
    text-align: right;
    margin-right: 1em;
}

.left {
text-align: left;
margin-left: 1em;
}

.Content-div-fixed
{
  height:220px;
  overflow:auto;
}

.box-alumno {
    border-radius: 1rem;
    margin-left: 10px;
    min-height: 100px;
    background-color: #0099cc !important;
    margin-bottom: 10px;
    color:white;
}

.box-alumno-small {
    border-radius: 1rem;
    margin-left: 10px;
    min-height: 20px;
    background-color: #0099cc !important;
    margin-bottom: 10px;
    color:white;
}

.box-enlace {
    border-radius: 0.5rem;
    margin-left: 10px;
    min-height: 100px;
    background-color: #0099cc !important;
    margin-bottom: 10px;
    color:white;
    padding-top: 20px;
}

.box-enlace-small {
    border-radius: 0.5rem;
    margin-left: 10px;
    min-height: 38px;
    background-color: #0099cc !important;
    margin-bottom: 10px;
    color: white;
    padding-top: 8px;
}

.box-input {
    border-radius: 0.5rem;
    margin-left: 11px;
    height: auto;
    background-color: #0099cc !important;
    margin-bottom: 10px;
    color:white;
    padding-top: 10px;
    padding-left: 1rem;
}

#wrapper #content-wrapper {
    background-color: #0e010f !important;
 }

.bg-black {
    background-color: #0e010f !important;
}

.bg-principal {
    background-color: #0099CC !important;
}

.bg-secundario {
    background-color: #6CBAE7 !important;
}

.modal-custom {
    background-color: #6CBAE7 !important;
    color:white;
    border-radius: 0.5cm;
}


.modal-content-calendar {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 250px;
    pointer-events: auto;
    background-color: #d4dadd;
    background-clip: padding-box;
    border-radius: 1rem;
    outline: 0;
    color:#0099cc
}


.text-gray-600 {
    color: white !important;
}

.centrar-div {
    margin: 0 auto;
}

.m-auto {
    margin: auto;
}

.text-center {
    text-align: center;
}

.text {
    color:white;
}
.text-white {
    color:white;
}
.text-black {
    color:black;
}
.text-small {
    font-size:small;
}

.bg-gradient-container {
    background: #d4dadc;
    /*background: linear-gradient(0deg, rgba(179,176,217,1) 0%, rgba(214,223,248,1) 36%, rgba(182,223,248,1) 100%); */
    /*background:  linear-gradient(179.96deg, #92C8E8 0.04%, #ededf0  20.55%, #333333 74.57%); */
  }

/* Dashboard Styles */
.dashboard-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    padding: 1em;
    justify-content: center;
}

.dashboard-card {
    flex: 1 1 300px;
    max-width: 400px;
    min-width: 250px;
    border: 1px solid #e3e6f0;
    border-radius: 1em;
    padding: 1.5em;
    background-color: white;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.dashboard-card h3 {
    color: #4e73df;
    margin-bottom: 1em;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.stats-container {
    width: 100%;
}

.stat-item {
    margin: 0.75em 0;
    padding: 0.5em;
    border-radius: 0.5em;
    background-color: #f8f9fc;
}

.stat-item span:first-child {
    font-weight: 700;
    color: #5a5c69;
}

.stat-item span:last-child {
    float: right;
    font-weight: 700;
    color: #4e73df;
}

.container-din {
padding-top: 10px;
padding-bottom: 10px;
min-height: 500px
}

.tam-icon-box {
    max-width: 15%;
}

.tam-icon-box-small {
    max-width: 10%;
}


.imagen-contenedor {
    width: 100px; /* Establece el ancho deseado para el contenedor */
    height: 100px; /* Establece el alto deseado para el contenedor */
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    position: relative;
}

.foto-perfil {
    /*max-width: 100%;*/
    max-height: 100%;
    object-fit: cover; /* Esto asegura que la imagen se ajuste correctamente al contenedor */
    object-position: center center; /* Centra la imagen vertical y horizontalmente */
}

.imagen-contenedor-small {
    width: 50px; /* Establece el ancho deseado para el contenedor */
    height: 50px; /* Establece el alto deseado para el contenedor */
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    position: relative;
}

.imagen-contenedor-xsmall {
    width: 30px; /* Establece el ancho deseado para el contenedor */
    height: 30px; /* Establece el alto deseado para el contenedor */
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    position: relative;
}
.container-fluid {
    border-top-left-radius: 30px 30px;
}

.text-alert {
    font-size: 16px;
    color: chocolate;
}

hr {
    margin-top: 0.5rem;
    margin-bottom: 0.5;
}

.h-300px {
    height: 300px !important;
}

.h-400px {
    height: 400px !important;
}

.custom-selec {
    border-color: white;
    border-radius: 0.5rem;
}

.form-control-user::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgb(17, 240, 240);
    opacity: 1; /* Firefox */
}

.form-control-log::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgb(78, 82, 82);
    opacity: 1; /* Firefox */
}

.text-label {
    color: rgb(214 211 221);
}

.min-h-box {
    min-height: 400px !important;
}

.col-md-foto {
    flex: 0 0 12%;
    max-width: 12%;
}

.div-etiquetas {
    border: 1px solid rgba(182, 223, 248, 1);
    background-color: transparent;
    border-radius: 0.5rem;
    max-width: 100%;
    min-height: 1em;
}

.span-etiqueta {
    border-color: rgba(51, 51, 51, 1);
    background-color: rgba(51, 51, 51, 1) !important;
    border-radius: 0.5rem;
    color: white;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.span-calendar-text {
    border-color: #2193d9;
    background-color: #2193d9 !important;
    border-radius: 0.5rem;
    color: #f1eff5;
    font-size: small;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.span-calendar-text-DISPONIBLE {
    border-color: #2193d9;
    background-color: #2193d9 !important;
    border-radius: 0.5rem;
    color: #f1eff5;
    font-size: small;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.span-calendar-text-RESERVADO {
    border-color: #680e0e;
    background-color: #680e0e !important;
    border-radius: 0.5rem;
    color: #f1eff5;
    font-size: small;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.span-calendar-text-FINALIZADO {
    border-color: #565657;
    background-color: #565657 !important;
    border-radius: 0.5rem;
    color: #f1eff5;
    font-size: small;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.span-calendar-fecha {
    border-color: rgba(51, 51, 51, 1);
    background-color: rgba(51, 51, 51, 1) !important;
    border-radius: 0.8rem;
    color: #f1eff5;
    padding-left: 2em;
    padding-right: 2em;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
}

.span-calendar-vacio {
    /* border-color: #0099cc;
    background-color: #0099cc !important;
    border-radius: 0.5rem; */
    color: transparent;
    padding-left: 0.5em;
    padding-right: 0.5em;
    
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.list-group-max300 {
    max-height: 300px;
    margin-bottom: 10px;
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
}


.table-bordered th, .table-bordered td {
    border: 1px solid rgba(51, 51, 51, 1);
}

.table-custom-format {
    width: 100% !important;
    margin: 1em 1em 1em 1em;
    border-color: rgba(51, 51, 51, 1) !important;
    border-spacing: 0;
    /* border-collapse: separate; */
    border-radius: 10px;
}

.table-custom-format th:first-child{
    border-top-left-radius: 7px;
  }
  
.table-custom-format th:nth-last-child(1){
    border-top-right-radius: 7px;
  }
  
.ultima_fila td:first-child{
     border-bottom-left-radius: 7px;
 }
  
.ultima_fila td:nth-last-child(1){
    border-bottom-right-radius: 7px;
}

.table-custom-format thead th {
    background-color: rgba(51, 51, 51, 1);
    color: white;
    font-size: small;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
}

.table-custom-format tbody td {
    border: thin solid rgba(51, 51, 51, 1); 
    color: #363738;
}

/* Estilo para filas pares */
.table-custom-format tbody tr:nth-child(even) {
    background-color: #DAF1FF;
}

/* Estilo para filas impares */
.table-custom-format tbody tr:nth-child(odd) {
    background-color: #B5DFF8;
}

/* Estilo alto de las filas */
.table-custom-format tbody tr {
    height: 4em;
}
.td-custom {
    width: 14.28%;
}


.icon-video {
    border-radius: 1rem;
}


col-2c {
    flex: 0 0 12%;
    max-width: 12%;
}

.bg-trasperente {
    background-color: #dee0ef;
}

.cuerpo-mensaje {
    background-color: white !important;
    color:rgb(39, 37, 37) !important;
    border-color: #b2b2d9;
    border-style: solid;
    border-width: thin;
    height: 250px ;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    padding: 1em 1em 1em 1em;
}

.text-no-leido {
    color: rgb(3, 7, 71) !important;
    font-weight:bolder;
}

.text-leido {
    color: rgb(96, 94, 100) !important;
    font-weight:normal;
}

#a-noti {
    /*color: black !important; */
    text-decoration: none !important;
 }

#a-noti:hover {
    color: rgb(16, 30, 90);
    background-color: #b6dff8 !important;
    text-decoration: none !important;
  }

.a-noti:hover {
    color: rgb(27, 11, 104) !important;
    background-color: #85a5eb !important;
    text-decoration: none !important;
}

.btn-width-100 {
    width: 100px
}

.btn-width-150 {
    width: 150px;
}

.select-noti {
    border-color: #0099cc;
    background-color: #e3ecef !important;
    border-radius: 0.5rem;
    color: rgb(84 83 90);
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin-bottom: 1em;
}

.icon-table-handler {
    color: #1916eb;
}

.icon-table-handler:hover {
    cursor: pointer;
}

.centrado-vh {
    display:flex;
    justify-content: center;
    align-items: center;
}

.centrado-v {
    display:flex;
    align-items: center;
}

.text-smaller {
    font-size: smaller;
    line-height: 0.8em;
}

.h-80 {
    height: 80%;
}


.hidden {
    display: none;
}


.label-datos {
    color: rgba(255, 255, 255, 1);
    /* display: inline-block;
    border-bottom: 1px solid rgba(182, 223, 248, 1); */
    text-decoration: underline rgba(182, 223, 248, 1) solid;
    width: 150px; /* Largo deseado */
    
}

.box-underline {
    border-bottom: 1px solid rgba(182, 223, 248, 1); 
}

.boton-accion {
    /* Establece un borde inicial transparente */
    border: 2px solid transparent;
    /* Añade transición para suavizar el cambio */
    transition: border-color 0.3s ease;
  }
  
  /* Cuando el mouse está sobre la imagen, cambia el color del borde a azul */
  .boton-accion:hover {
    border-color: rgba(0, 153, 204, 1);
  }
  
 
  .cuadro-buscar {
    width: 220px;
    height: 33px;
    border: 1px solid rgba(182, 223, 248, 1);
    background-color: transparent;
    color: rgba(255, 255, 255, 1);
    /* Alineación del texto */
    text-align: center;
    /* Establecer el texto en una sola línea */
    white-space: nowrap;
    /* Para centrar verticalmente el texto */
    line-height: 33px; /* Ajusta según el tamaño del rectángulo */
    text-align: left;
    border-radius: 5px;
  }
  
  .buscar-text {
    background-color: transparent;
    width: 185px;
    height: 30px;
    border: none;
    outline: none;
    color: rgba(255, 255, 255, 1);
  }

.input-calendar {
    background-color: transparent;
    border: 1px solid rgba(182, 223, 248, 1);
    outline: none;
    color: rgba(255, 255, 255, 1);
    height: 2rem;
}


.table-wrapper {
    overflow-x: auto;
    max-width: 100%; /* Ajusta el ancho máximo según sea necesario */
}

div.dataTables_wrapper {
    padding-top: 1em !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button ,
button.dt-button, 
div.dataTables_wrapper div.dataTables_filter label {
    font-size: small !important;
}

table.dataTable thead th, table.dataTable tfoot th {
    font-weight: normal !important;
    text-align: center;
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid rgba(182, 223, 248, 1) !important;
    border-radius: 5px !important;
}

div.dataTables_wrapper div.dataTables_filter input {
    color: rgba(255, 255, 255, 1);
}


div.dataTables_wrapper div.dataTables_length label {
    font-size: small;
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
    color: #3f4044 !important;
    padding-right: 3em;
}

div.dataTables_wrapper div.dataTables_length select {
    width: 4em;
    color: #3f4044;
    font-size: small;
}

.invisible {
    color: rgba(0, 0, 0, 0.5);
}

.input-fecha {
    display: flex;
    flex-direction: column;
    align-items:flex-start;
    margin-bottom: 10px; /* Espacio entre los inputs */
}

.input-fecha label {
    margin-bottom: 0.5px; /* Espacio entre el label y el input */
}


.pl-3-4 {
    padding-left: 1.4rem !important;
}

.pr-6 {
    padding-right: 5rem !important;
    
}

.text-critical {
    color: red !important;
    font-weight: bold;
}


.table-responsive {
    background-color: #eceef0; /* Fondo blanco para el contenedor */
    border-radius: 0.35rem; /* Bordes redondeados */
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15); /* Sombra suave */
}


.foto-perfil {
    max-height: 130px; 
    max-width: 150px; 
    object-fit: cover; /* Esto asegura que la imagen se ajuste correctamente al contenedor */
    object-position: center center; /* Centra la imagen vertical y horizontalmente */
}

.imagen-contenedor {
    width: 130px; 
    height: 130px; 
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    position: relative;
}

.lista-ejercicios {
    max-height: 350px ;
    min-height: 150px ;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}


.box-previsual-title {
    border-radius: 0.5rem;
    margin-left: 10px;
    min-height: 20px;
    background-color: #130244 !important;
    margin-bottom: 10px;
    color:white;
}

.box-previsual-lista {
    border-radius: 1rem;
    margin-left: 10px;
    min-height: 20px;
    background-color: #8d9192 !important;
    margin-bottom: 10px;
    color:Black;
}

.box-ejercicio-cat1 {
    font-size: small;
    border-radius: 0.5rem;
    margin-left: 10px;
    height: 35px;
    background-color: #12CEE3 !important;
    margin-bottom: 10px;
    color:white;
    padding: 12px 12px 12px 12px  !important;
}

.box-ejercicio-cat2 {
    font-size: small;
    border-radius: 0.5rem;
    margin-left: 10px;
    height: 35px;
    background-color: #0e6dbb !important;
    margin-bottom: 10px;
    color:white;
    padding: 12px 12px 12px 12px  !important;
}
.error-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}
.error-icon {
    font-size: 6rem;
    color: #e74a3b;
    margin-bottom: 1.5rem;
}
.btn-return {
    margin-top: 2rem;
    padding: 0.75rem 1.5rem;
}


.horario-row {
    margin-bottom: 10px;
}
.btn-eliminar-horario {
    padding: 0.375rem 0.5rem;
}

.dias-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* espacio entre checkbox y texto */
  cursor: pointer;
}

.dias-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0; /* elimina margen predeterminado */
}

.row-centered {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
    justify-content: center; /* ← Esto centra horizontalmente los hijos */
}

.col-centered {
    display: flex;
    justify-content: center; /* centrado horizontal */
    align-items: center;     /* centrado vertical (opcional) */
}