:root {
    --blanco_techo: #FFFFFF;
    --gris_claro: #F4F5F7;
    --gris_letra: #484848;
    --azul_inteso: rgb(31, 59, 179);
    --azul_inteso_sombra:rgb(23, 45, 136);
    --azul_clarito: rgb(224, 236, 255);
    --mora_bubaloo: rgb(199, 17, 129);
    --azul_grisaceo: #73828f;
    --gris_carbon: #212529;
    /*--salmon: #ffd4dc;*/
    --salmon: #fedde3;
    --salmon_claro: #ffe9ed;
    /*--salmon: rgb(246, 204, 90);*/
    /*--salmon: #f88096;*/

    /*    --azul_clarito: rgb(208, 225, 255);
*/

    --gris_reservacion: #cdd0d6;

    /*Sobre escrito de bootstrap*/
    --bs-link-hover-color: #1F3BB3;
    --bs-btn-disabled-bg: #1F3BB3;
    --bs-btn-disabled-opacity: 1.0;
    --bs-btn-active-bg: #172d88;


    --bs-btn-active-bg: rgb(2, 136, 138);

    /*Sobrescritura de los colores de boostrap*/
    --bs-primary-rgb: 31, 59, 179;  /* --azul_inteso*/
    --bs-success-rgb: 2, 136, 138; 
    /*--bs-warning-rgb: 246, 204, 90;*/
  }

body{
    margin: 0px;
    background-color: var(--gris_claro);
    caret-color: transparent;
}

h1, h2, h3, h4, h5, h6, p, li{
    color: var(--gris_letra);
}

h5{
    font-weight: 400;
    /*border-bottom: 1px solid var(--azul_inteso);*/
}

h6{
    color: var(--azul_inteso);
    font-size: 1.1em;
}

input{
    caret-color: var(--gris_carbon);
}

.titulo_estatico{
    color: var(--gris_letra);
}

/*
.contenedor_general{

}
*/

.panel_lateral{
    background-color: var(--gris_claro);
    /*background-color: #e5eef0;*/

    min-width: 200px;
    padding-left: 0px;
}

.panel_lateral > ul > li{
    background-color:var(--gris_claro) ;
    border: none;
    /*border-radius: 0px 20px 20px 0px;*/
    /*background-color: #e5eef0;*/
}

.panel_lateral_li{
    font-size: 1.1em;
    padding: 10px 0px 10px 0px;
}

.panel_lateral_logo{
    padding-left: 10px;
}

.iconografia{
    font-size: 1.1em;
    padding-right: 12px;
    /*-webkit-text-stroke: 0.01em;*/
}

.iconografia_estrecha{
    font-size: 1.1em;
    padding-right: 4px;
    /*-webkit-text-stroke: 0.01em;*/
}

.icono_datos{
    font-size: 1em;
    padding-right: 6px;
    /*-webkit-text-stroke: 0.01em;*/
}

.icono_datos2{
    font-size: 1.2em;
    padding-right: 0px;
    color: var(--azul_inteso);
    /*-webkit-text-stroke: 0.01em;*/
}

.panel_lateral_li > a{
    text-decoration: none;
    color: var(--gris_letra);
}

.panel_lateral_li > a:hover{
    color: var(--azul_inteso);
}

.panel_lateral_li:hover{
    background-color: var(--blanco_techo);
    color: var(--azul_inteso);
    border-radius: 0px 20px 20px 0px;
}

.cuerpo_central{
    background-color: var(--gris_claro);
}

.tarjeta{
    margin-bottom: 20px;
    background-color: var(--blanco_techo);
    border-radius: 20px;
    box-shadow: 0 0 0 0 rgba(90, 113, 208, 0.11), 0 4px 16px 0 rgba(167, 175, 183, 0.33);
}

.card-body{
    padding: 30px 30px 10px 30px;
}

.ancho_asistencia{
    min-width: 220px;
}

.icono_pie{
    font-size: 3em;
    height: 30px;
}

.icono_pie:hover{
    color: var(--azul_inteso);
}

.icono-grande{
    color: var(--azul_inteso);
    margin: 0px 20px 0px 4px;
}

.btn-primary{
    color: var(--azul_inteso);
    background: rgba(255, 255, 255, 0.0);
    border: none;
    --bs-btn-active-bg: var(--azul_inteso_sombra);
}

.btn-primary:hover{
    background-color: var(--azul_inteso_sombra);
}

.btn-outline-primary{
    color: var(--azul_inteso);
}

.btn-outline-primary:hover{
    background-color: var(--azul_inteso_sombra);
}

.btn-outline-primary-check:checked + .btn, .btn-outline-primary.active, .btn-outline-primary.show, .btn-outline-primary:first-child:active, :not(.btn-outline-primary-check) + .btn-outline-primary:active {
    --bs-btn-active-color: transparent;
    background-color: transparent;
    color: var(--azul_inteso);
}

.menu_sombra{
    border: 2px solid var(--azul_inteso_sombra);
    box-shadow: 0 0 0 0 rgba(90, 113, 208, 0.11), 0 4px 16px 0 rgba(167, 175, 183, 0.33);
}

.enlace{
    font-weight: 500;
    text-decoration: none;
    color: var(--gris_letra);
}

.enlace:hover{
    color: var(--azul_inteso);
}

.enlace_azul{
    text-decoration: none;
    color: var(--azul_inteso_sombra);
}

.enlace_azul:hover{
    text-decoration: underline;
    color: var(--azul_inteso);
}

.enlace_correo{
    font-weight: 500;
    text-decoration: none;
    color: var(--gris_letra);
}

.enlace_correo:hover{
    color: var(--azul_inteso);
    text-decoration: underline;
}

.enlace_boton_sec{
    text-decoration: none;
    color: var(--blanco_techo);
}

.enlace_boton_sec:hover{
    color: var(--blanco_techo);
}

.enlace_lateral{
    padding: 12px 10px 12px 20px;
}

.imagen_perfil_empresa{
    margin: 20px;
    width: 100px;
    height: 100px;
    border-radius:50%;
    box-shadow: 0 0 0 0 rgba(90, 113, 208, 0.11), 0 4px 16px 0 rgba(167, 175, 183, 0.33);
}

.imagen_perfil_recurso{
    width: 150px;
    height: auto;
    border-radius:50%;
}

.imagen_perfil_recurso_cuadrado{
    width: 30px;
    height: 150px;
    border-radius:30%;
}

.cliente_info{
    color: var(--gris_letra);
}

.cliente_entrelinea{
    margin-bottom: 20px;
}

.cliente_entrelinea_separador{
    border-top: 1px solid var(--azul_inteso);
    margin-bottom: 20px;
}

.nav-link{
    color:var(--gris_letra);
}

.nav-link:hover{
    color:var(--azul_inteso);
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: var(--bs-nav-pills-link-active-color);
    /*background-color: var(--bs-nav-pills-link-active-bg);*/
    background-color: var(--azul_inteso_sombra);
    /*border-radius: 20px 20px 5px 5px;*/
}

.nav-link-bordeado{
    border: 1px solid var(--azul_inteso);
}

.nav_recorrer{
    margin-left: 20px;
}

.table > :not(caption) > * > .celda_boton {
    padding: .5rem 0rem;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-color-state: var(--bs-table-hover-color);
    --bs-table-bg-state: var(--azul_clarito);
}

.icono_grande{
    font-size: 1.3em;
}

.tarjeta_invisible{
    background-color: var(--gris_claro);
    margin-bottom: 0px;
    border-radius: 0px;
    border: none;
    color: var(--gris_claro);
}

.titular_bonito{
    font-weight: 600;
    color: var(--gris_letra)
}

.icono-grandote{
    color: var(--azul_inteso);
    margin: 0px 4px 0px 4px;
}

.tarjeta-transparente{
    background-color: var(--gris_claro);
    margin: 10px;
}

.dashboard_opciones{
    border-bottom: 1px var(--azul_inteso_sombra) solid;
}

.lineas_separar{
    border-bottom: 1px var(--azul_inteso_sombra) solid;
}

.estado_cliente_activo{
    border: 1px var(--azul_inteso) solid;
    border-radius: 15px;
    font-size: .9em;
}

.estado_cliente_inactivo{
    border: 1px red solid;
    border-radius: 15px;
    font-size: .9em;
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    color: var(--gris_letra);
    pointer-events: none;
    background: rgba(255, 255, 255, 0.0);
    border-color: var(--bs-btn-disabled-border-color);
    opacity: var(--bs-btn-disabled-opacity);
}

.etiquetas{
    color: var(--azul_inteso);
    font-size: 1em;
    margin-bottom: .5rem;
}

.etiquetasLateral{
    color: var(--azul_inteso);
}
.ineditable{
    background-color: var(--gris_claro);
}

.fondoReserveciones{
    padding: 10px 12px;
    background: var(--blanco_techo);
    border-radius: 20px;
    /*min-width:850px;*/
    margin-bottom: 20px;
    border: 1px solid var(--azul_grisaceo);
 }

.tablaReservacionHora{
    width: 100%;
    background: var(--blanco_techo);
    margin-bottom: 40px;
}

.tablaReservacionHora tbody> tr > td{
    padding: 0px;
    margin: 0px;
    /*font-size: 14px;*/
}

.tablaReservacionHora tbody> tr:nth-child(odd){
    /*background: red;*/
    border-top: 1px solid var(--azul_grisaceo);
    border-left: 1px solid var(--azul_grisaceo);
    border-right: 1px solid var(--azul_grisaceo);
}

.tablaReservacionHora tbody> tr:nth-child(even){
    border-bottom: 1px solid var(--azul_grisaceo);
    border-left: 1px solid var(--azul_grisaceo);
    border-right: 1px solid var(--azul_grisaceo);
}

.tablaReservacionCabecera{
    width: 100%;
    background: var(--blanco_techo);
    margin-bottom: 0px;
}

.encabezadoTabla{
    text-align: center;
    border: 1px solid var(--azul_grisaceo);
}

.calendarioSemana{
    min-width: 600px;
}

.tablaReservacionSemana{
    width: 100%;    
}

.encabezadoSemanaCalendario{
    text-align: center;
    border: 1px solid var(--azul_grisaceo);
}

.tablaReservacionSemana thead > tr > th{
    color:var(--gris_letra);
    background:var(--blanco_techo);
 }

.tablaReservacionSemana tbody > tr > td:hover{
    color:var(--blanco_techo);
    background:var(--azul_grisaceo);
 }

.tablaReservacionSemana tbody> tr:nth-child(odd){
    /*background: red;*/
    border-top: 1px solid var(--azul_grisaceo);
    border-left: 1px solid var(--azul_grisaceo);
    border-right: 1px solid var(--azul_grisaceo);
}

.tablaReservacionSemana tbody> tr:nth-child(even){
    border-bottom: 1px solid var(--azul_grisaceo);
    border-left: 1px solid var(--azul_grisaceo);
    border-right: 1px solid var(--azul_grisaceo);
}

.encabezadoSemanaCalendario{
    color: var(--blanco_techo);
    background-color: var(--gris_carbon);
}

.calendarioMes{
    min-width: 720px;
    padding: 10px 12px;
    background: var(--blanco_techo);
    border-radius: 20px;
    /*min-width:850px;*/
    margin-bottom: 20px;
    border: 1px solid var(--azul_grisaceo);
}

.encabezadoMes{
    color: var(--blanco_techo);
    background-color: var(--gris_carbon);
}

.tablaReservacionMes{
    width: 100%; 
}

.tablaReservacionMes thead > tr > th{
    color:var(--gris_letra);
    background:var(--blanco_techo);
 }

.tablaReservacionMes tbody > tr > td{
    border: 1px solid var(--azul_grisaceo);
    width: 100px;
}

.tablaReservacionMes tbody > tr > td{
    border: 1px solid var(--azul_grisaceo);
    /*
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    */
    height: 100px;
    vertical-align: top;
}

/*
.tablaReservacionMes tbody > tr > td:hover{
   background:var(--azul_grisaceo);
}
*/

::marker{
background:var(--azul_grisaceo);
}

.numeroCalendario{
    text-align: right;
}

.form-check-input{
    border: 1px solid var(--azul_inteso);
}

.collapseExampleSeparacion{
    margin-bottom: 20px;
    border-top: 1px solid var(--azul_inteso);
}

.solo_lectura{
    background: var(--gris_claro);
}

.celdaFechaHora{
    font-size:.9em;
    padding: 6px;
    /*position: relative;*/
}

/*
.celdaFechaHora[title]:hover:after {
    content: attr(title);
    position: absolute;
    top: 60%;
    left: 33%;
    color:red;
    font-size: 16px;
    background: #73828f;
    z-index: 9999;
}
*/

.celdaHoraOcupada{
    /*
    border-radius: 6px;
    padding: 2px;
    margin: 2px;
    background: rgb(204, 210, 230);
    */
    margin: 0px;
    padding-left: 5px;
    /*background: rgb(204, 210, 230);*/
    background: rgb(228, 228, 228);
}

.celdaHoraOcupada_2{
    /*
    border-radius: 6px;
    padding: 2px;
    margin: 2px;
    background: rgb(204, 210, 230);
    */
    margin: 0px;
    padding-left: 5px;
    /*background: rgb(204, 210, 230);*/
    background: rgb(206, 213, 228);
}

/*style='border-top:1px solid ".$recurso["color"].";'*/

.celdaHoraOcupada:hover{
    color:var(--blanco_techo);
    background: var(--azul_inteso_sombra);
   
}

.celdaHoraOcupada_2:hover{
    color:var(--blanco_techo);
    background: var(--azul_inteso_sombra);
}

.celdaHoraVacia{
    /*
    border-radius: 6px;
    padding: 2px;
    margin: 2px;
    */
    border-radius: 0px;
    padding-left: 5px;
    margin: 0px;
 }

 .celdaHoraVacia:hover{
    color: var(--blanco_techo);
    /*background-color:var(--azul_grisaceo);*/
    background: var(--azul_inteso_sombra);
}

.advertencia{
    /*
    display: none;
    */
    padding: 4px;
     /*color: var(--blanco_techo);*/
     /*background: var(--azul_inteso)*/
}


.tablaFacturas thead > tr > th{
    font-size: .92em;
}

.tablaFacturas tbody > tr > td{
    font-size: .92em;
}

.tablaPrefactura thead > tr > .servicioCeldaCliente{
    padding-left: 0px;
}

.tablaPrefactura tbody > tr > .servicioCeldaCliente{
    padding-left: 0px;
}

.tablaPrefactura tbody > tr > .servicioCeldaDescripcion{
    background-color: var(--gris_claro);
    padding: 0px;
    margin: 0px;
    padding-left: 20px;
}

.tablaPrefactura tbody > tr > .servicioCelda{
    background-color: var(--gris_claro);
    padding: 0px;
    padding-right: 6px;
    margin: 0px;
}

.tablaPrefactura tbody > .renglonServicios{
    display: none;
 }

.mensajesCaja{
    color: var(--gris_letra);
    background-color: var(--salmon);
    padding: 10px 20px;
    border-radius: 10px 10px 10px 10px;
}

.horasSaldoCartel{
    color: var(--azul_inteso);
    font-weight: 500;
    font-size: 3em;
}

.carta_cliente{
    padding-top: 10px;
}

.anadir_servicio_recuadro{
    padding-top: 10px;
    padding-left: 4px;
    background: var(--gris_claro);
}

.anadir_servicio_formulario{
    padding-left: 3px;
    padding-right: 3px;
}

.lista_estrecha{
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

a:hover span{
    box-shadow: 0 0 0 0 rgba(90, 113, 208, 0.11), 0 4px 16px 0 rgba(23, 45, 136, 0.33);
}

.dropdown:hover {
    cursor: pointer;
}

/*Cambia el puto renglon de cliente inactivo a otro coloe*/

.table > :not(caption) > .renglonClienteInactivo > td {
    background-color:var(--salmon);
}

/*El hover de los clientes inactivos*/
.table-hover > tbody > .renglonClienteInactivo:hover > * {
    --bs-table-color-state: var(--bs-table-hover-color);
    --bs-table-bg-state: var(--salmon_claro);
}

.barra_titulo_tabla_dashboard{
    background: var(--gris_carbon);
    color: var(--gris_claro);
}

/*Contenedor de cada sala*/
.sala_recurso{
    background: white;
    position: relative;
    /*border-left: 1px solid var(--gris_reservacion);*/
    border-right: 1px solid var(--gris_reservacion);
}

/*Posicion establecid con respecto a la sala_recurso.
Cada cuadro es una reservacion, la posicion px la modificamos en el index*/
.sala_reservacion_estilo{
    border-top: 1px solid var(--gris_carbon);
    padding: 4px;
    position: absolute;
    display:block;
    overflow: auto;
    overflow-y: hidden;
    min-width: 100%;
    border-radius: 10px 10px 10px 10px;
}

.sala_reservacion_estilo_mes{
    border-top: 1px solid var(--gris_carbon);
    padding: 4px;
    border-radius: 4px 4px 4px 4px;
}


.sala_reservacion_cabecera{
    padding: 16px;
    min-width: 100%;
}

.sala_reservacion_pie{
    padding: 16px;
    position: absolute;
    display:block;
    min-width: 100%;
}

.sala_reservacion{
    box-shadow: 0 0 0 0 rgba(90, 113, 208, 0.23), 0 4px 16px 0 rgba(167, 175, 183, 0.4);
}

.ancho_hora_seleccion{
    width: 160px;
}

.hora_lista{
    box-shadow: 0 0 0 0 rgba(90, 113, 208, 0.23), 0 4px 16px 0 rgba(167, 175, 183, 0.4);
}

.hora_lista_cuadros{
    text-align: left;
    cursor: pointer;
    padding: 4px;
}

.hora_cuadrito, .hora_cuadrito_fin{
    text-align: center;
    margin: 1px;
    padding: 4px;
    width: 30px;
    display: inline-block;
    cursor: pointer;
}

.hora_cuadrito:hover, .hora_cuadrito_fin:hover{
    color: var(--blanco_techo);
    background: var(--azul_inteso);
}

.minutos_cuadrito, .minutos_cuadrito_fin{
    text-align: center;
    margin: 1px;
    padding: 4px;
    width: 30px;
    display: inline-block;
    cursor: pointer;
}

.minutos_cuadrito:hover, .minutos_cuadrito_fin:hover{
    color: var(--blanco_techo);
    background: var(--azul_inteso);
}

.etiquete_gris_azul{
    color: var(--azul_inteso);
}

.recuadroMesCalendario{
    border-top: 1px solid var(--gris_reservacion);
    border-left: 1px solid var(--gris_reservacion);
    border-right: 1px solid var(--gris_reservacion);
}