/* VARIABLES */
:root {
    --grisBase: #58798c;
    --grisPlaceholder: #dadad9;
    --grisBaseClaro: #d0d0d0;
    --azulBase: #496b88;
    --azulGrisBase: #edf2f7;
    --hoverGrisBase: #35424cf2;
    --grisBotonNavBar: #f2f2f2;
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&family=Rubik:wght@600&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
}

.mostrar{
    display:initial;
}

.ocultar{
    display:none;
}

h1, h2, h3, h4 {
    font-family: 'Rubik', sans-serif;
}

body{
    background-color:white;
}

.newLogin {
    width:100%;
    height: 100%;
    padding: 0;
}

    .newLogin .contenedores {
        height: 90%;
        padding: 2%;
        min-height: 580px;
    }

        .newLogin .contenedores .contenedorIzquierdo {
            width: 50%;
            background: #fff url('../Images/Inicio de sesión.jpg') no-repeat;
            background-size: cover;
            background-position: center;
            border-top-left-radius: 5%;
            border-bottom-left-radius: 5%;
        }
        .newLogin .contenedores .contenedorDerecho{
            display:none;
        }

            .newLogin .contenedores .contenedorDerecho.mostrar {
                width: 50%;
                padding: 2% 8%;
                align-self: center;
                display: initial;
            }

            .newLogin .contenedores .contenedorDerecho.mostrar form {
                text-align: center;
            }

                .newLogin .contenedores .contenedorDerecho.mostrar form h2 {
                    font-size: 2em;
                    margin: 20px 0;
                    font-weight: bold;
                    color: var(--grisBase);
                }

.input_login {
    width: 100%;
    padding: 0.5em 0.8em;
    font-size: 1.2em;
    background-color: rgb(248 248 248);
    margin: 0.5em 0 0.5em 0;
    outline: 0;
    border-width: 0 0 0 0.5em;
    border-color: black;
}

form .boton:hover {
    background-color: #35424cf2;
    color:white;
}

form .boton:focus {
    border: solid 1px var(--grisBase);
}

.input_login::placeholder {
    color: var(--grisPlaceholder);
}

.el-pagination {
    margin: 20px;
}

form .boton {
    width: 100%;
    padding: 10px 0;
    font-size: 1.2em;
    color: white;
    background-color: var(--grisBase);
    font-weight: bold;
    letter-spacing: 0.2em;
    border-width: 0;
    border-radius: 100px;
    /*margin: 10%;*/
    border: 1px solid white;
}

.mensaje{
    font-size:100%;
}

.mensajeLogin {
    color: #f8ac59;
    text-align: center;
    display: none;
}

    .mensajeLogin.mostrar {
        display: initial;
    }

.contra {
    font-weight: 600;
    padding: 0;
    color: rgb(44 119 246);
}
    .contra:hover {
        color: rgb(123 164 235);
    }
    .contra:focus {
        color: rgb(44 119 246);
    }

/*EXPERIMENTAL CHECKBOX LOGIN*/
input#checkboxRecuerdame {
    margin: 0 !important;
    vertical-align: middle;
    
}

    input#checkboxRecuerdame:hover{
        cursor: pointer;
    }
    

    input#checkboxRecuerdame + label {
        margin: 0 !important;
        font-weight: 600;
    }

        input#checkboxRecuerdame + label:hover {
            cursor: pointer;
        }

    input#checkboxRecuerdame:checked {
        visibility: hidden;
    }
        

    input#checkboxRecuerdame:checked + label {
        color: blue;
    }
        input#checkboxRecuerdame:checked:before {
            content: "\25cb";
        }

/*PRUEBA ANIMACION LOGIN*/

.contenedorIzquierdo{
    animation-duration: 1s;
    animation-name: slidein;
}

@keyframes slidein {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }

}

/**/

.h2General{
    text-align: left;
    font-size: 1.5em;
    padding: 20px 0;
    font-weight: bold;
    color: rgb(55 68 79);
    width: 100%;
    border-bottom: 2px solid var(--grisBaseClaro);
    margin: 0;
}

.h1OS {
    text-align: left;
    font-size: 1.5em;
    font-weight: bold;
    color: rgb(55 68 79);
    width: 100%;
    margin: 15px;
}

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

.contenedorElementoGenerico {
    max-width: 70%;
    border: 2px solid var(--grisBase);
    border-radius: 20px;
    padding: 2%;
}

.centrarRow{
    justify-content:center;
}
.boton {
    width: 100%;
    padding: 10px 0;
    font-size: 1.2em;
    color: white;
    background-color: var(--grisBase);
    font-weight: bold;
    letter-spacing: 0.2em;
    border-width: 0;
    border-radius: 100px;
    margin-top: 10%;
    border: 1px solid white;
}

    .boton:hover {
        background-color: #35424cf2;
    }

    .boton:focus {
        border: solid 1px var(--grisBase);
    }

form .input_login {
    width: 100%;
    padding: 0.5em 0.8em;
    font-size: 1.2em;
    background-color: rgb(248 248 248);
    margin: 0.5em 0 0.5em 0;
    outline: 0;
    border-width: 0 0 0 0.5em;
    border-color: black;
}

form .input_login::placeholder {
    color: rgb(218 218 217);
}

.text-danger {
    color: #ef912a !important;
}

/* RESIZE */
@media (max-width: 768px) {
    body {
        -webkit-transition: background-color 500ms linear;
        -moz-transition: background-color 500ms linear;
        -o-transition: background-color 500ms linear;
        -ms-transition: background-color 500ms linear;
        transition: background-color 500ms linear;
        background-color: white;
    }
}

/*ELEMENT*/

.el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: var(--azulBase);
    border-color: var(--azulBase);
}

.el-checkbox__input.is-checked + .el-checkbox__label {
    color: var(--azulBase);
}

.el-checkbox__inner:hover {
    border-color: var(--azulBase);
}

.el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: var(--azulBase);
}

.el-button.botonTXT.el-button--text {
    color: var(--grisBase);
    font-weight: 600;
    width: 100%;
    letter-spacing: 0.1em;
    font-size: 1.1em;
    margin-left:0;
}

.el-button.botonTXT.el-button--text:hover {
    letter-spacing: 0.2em;
}

.navBar_Empresa {
    min-height: 80px;
}

.navBar_Empresa .row {
    justify-content: center;
}

    .navBar_Empresa .row .el-button.botonTXT.el-button--text {
        color: var(--grisBase);
        font-weight: 600;
        font-size: 0.9em;
        padding: 0;
        white-space: break-spaces;
        display: none;
    }

    .navBar_Empresa .row .el-button.botonTXT.el-button--text.mostrar {
        display: initial;
    }

.inputTipoLogin.el-input .el-input__inner {
    width: 100%;
    padding: 0.5em 0.8em;
    font-size: 1.2em;
    background-color: rgb(248 248 248);
    margin: 0.5em 0 0.5em 0;
    outline: 0;
    border-width: 0 0 0 0.5em;
    border-color: black;
    border-radius: initial;
}

.navBar-Mobile {
    display: none;
}

.navBar {
    padding: 1% 3%;
    /*align-items: center;*/
    text-align: center;
}

.row{
    margin:0 !important;
}
.navBar_Logo {
    float: left;
    background: url('../Images/LOGO SANTI AJUSTADO.svg') no-repeat;
    min-height: 80px;
    min-width: 130px;
    background-size: contain;
    background-position: center;
}

.logoEmpresa{
    width: 25%;
}

.login_Logo {
    width: 300px;
    height: 75px;
    min-height:75px;
}

.logoEmpresa img, .login_Logo {
    object-fit: contain;
}


.navBar_Empresa .row.nombreEmpresa {
    padding: 2%;
    border: solid 2px var(--grisBaseClaro);
    border-radius: 5px;
    background-color: var(--grisBotonNavBar);
    color: black;
    margin-bottom: 5px !important;
    font-weight: 600;
    font-size: 0.9em;
}

.navBar_Icono {
    padding: 1%;
    border: solid 2px var(--grisBaseClaro);
    border-radius: 10px;
    background-color: var(--grisBotonNavBar);
    align-self: center;
    margin-bottom: auto;
    min-width: 90px;
}

    .navBar_Icono div {
        font-size: 15px;
        display: inline-flex;
        align-items: center;
        align-self: center;
        margin-bottom: auto;
        font-weight: 600;
        color: black;
    }
        .navBar_Icono div img {
            height: 20px;
        }
        .navBar_Icono div p {
            padding-left: 10px;
            margin: 0;
        }

.navBar_IconoMail {
    width: 5%;
}

.navBar_IconoMail img{
    height:20px;
}

.navBar_NombreUsuario {
    padding: 0 2% 0 0;
    font-weight: 600;
    width: 11.66%;
}

    .navBar_NombreUsuario .row {
        justify-content: right;
        text-align: right;
    }

    .navBar_NombreUsuario .row a small{
        font-weight: bold;
        font-size:100%;
    }

    .navBar_Inicial {
        width: 60px;
        padding: 0;
    }

.circulo_Iniciales {
    min-width:55px;
    width: 100%;
    border-radius: 50%;
    background-color: var(--grisBase);
    /*background-image: radial-gradient(circle at 6.1% 13.16%, #cccdcf 0, #918d7a 50%, #55532e 100%);*/
    line-height: 0;
    position: relative;
}

.circulo_Iniciales::after{
    content:"";
    display:block;
    padding-bottom: 100%;
}

.iniciales {
    text-align:center;
    position: absolute;
    bottom: 50%;
    width: 100%;
    font-size: 2em;
    color: white;
    font-weight:bold;
}

.navBar_Empresa p {
    border: 1px solid green;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 600;
    margin: 0;
    padding: 0.5em;
}
.navBar_OS {
    border: 1px solid green;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 600;
    margin: 0;
    padding: 0.5em;
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
    padding-top: 1.5rem !important;
    height: 570px;
}
    .navBar_OS .header--button  {
        position: absolute;
        top: 0px;
        display: block;
        margin-top: -21px;
        padding: 10px;
        height: 45px;
        left: 50%;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        width: 50%;
        border: 1px solid;
        border-color: green;
        background-color: white;
        font-size: 13px;
    }

.navBar_NombreUsuario.row > div {
    text-align: left;
    padding: 0;
    align-self: center;
}
/*FOOTER*/
.footerRework {
    border-top: 1px solid var(--grisPlaceholder);
    padding: 1% 2%;
    height: 10vh;
    align-items: center;
    background-color: white;
}

    .footerRework .logo {
        width: 30%;
        float: left;
        padding-top: 10px;
    }

    .footerRework .text-right {
        width: 70%;
        float: right;
    }

/*VISTAS GENERALES*/

.cuerpoGENERAL {
    padding: 0 3em;
}

.contenedor_HomeIzq{
    width: 75%;
}

.contenedor_HomeDer {
    width: 25%;
}

.bienvenida {
    padding: 2%;
    background-color: var(--grisBase);
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    color: white;
    margin: 0 1% 1% 0 !important;
}

    .bienvenida .titulo_Bienvenida {
        width: 35%;
        margin: 0;
        font-size: 1.3em;
    }

    .bienvenida .relleno {
        width:10%;
    }

    .bienvenida .dato_Dia {
        width: 55%;
        margin: 0;
        text-align: right;
        font-weight: 600;
        font-size: 1em;
    }

.resumen_Diario {
    padding: 0%;
    color: var(--azulBase);
    margin: 1% 2% 0 0 !important;
}

.contenedorBotonesCalendario{
    padding-left: 0;
}

.contenedor_Resumen {
    align-items: center;
    padding: 3% 2%;
    border-radius: 10px;
    font-size: 1em;
    font-weight: 600;
    margin-bottom: 3% !important;
    box-shadow: white 0 5px 5px 0;
    color: var(--grisBase);
    background-color: var(--azulGrisBase);
    display: none;
}

    .contenedor_Resumen > p, .el-button--default.mostrar > span > p {
        margin: 0;
        padding: 0;
    }

    .contenedor_Resumen > i, .el-button--default.mostrar > span > i {
        margin: 0;
        padding: 0;
        font-size: x-large;
        font-weight: bold;
    }
    .el-button--default.mostrar > span {
        width: 100%;
        text-align: left;
        display: flex;
        align-items: center;
    }   
    .contenedor_Resumen.pendiente {
        border: 1px solid var(--grisBase);
        color: var(--grisBase);
        background-color: var(--azulGrisBase);
        box-shadow: white 0 5px 5px 0;
    }

        .contenedor_Resumen.pendiente:hover {
            background-color: #edf2f7b8;
            color: var(--grisBase);
        }

    .contenedor_Resumen.normal {
        border: 1px solid white;
        box-shadow: var(--grisBaseClaro) 0 5px 5px 0;
        color: var(--grisBase);
        background-color: white;
    }

        .contenedor_Resumen.normal:hover {
            border: 1px solid #edf2f7b8;
            background-color: #edf2f7b8;
            color: var(--grisBase);
        }
        

    .contenedor_Resumen.actual {
        border: 1px solid var(--grisBase);
        box-shadow: white 0 5px 5px 0;
        color: white;
        background-color: var(--grisBase);
    }

        .contenedor_Resumen.actual:hover {
            border: 1px solid var(--hoverGrisBase);
            background-color: var(--hoverGrisBase);
        }

        .contenedor_Resumen.normal.mostrar, .contenedor_Resumen.actual.mostrar, .contenedor_Resumen.pendiente.mostrar, .contenedor_Resumen.pendiente.el-button--default.mostrar {
            display: flex;
        }

/* BUZON  DE SUGERENCIAS */
.imagen_Buzon {
    background: #fff url('../Images/Foto buzón client.jpeg') no-repeat;
    background-size: cover;
    background-position: top;
    border-radius: 20px;
    min-height: 100px;
    min-width: 100px;
    height: 100%;
}

.contenedor_botonBuzon {
    width: 50%;
    padding: 0 6% 0 0;
}

    .contenedor_botonBuzon .row .relleno {
        width: 70%;
    }

    .contenedor_botonBuzon .row .botonBuzon {
        width: 30%;
        padding: 0 2%;
    }

.contenedor_Buzon .col-lg-6 {
    padding: 1% 6% 3% 0%;
}

.campoForm {
    padding: 0;
    margin-bottom: 3% !important;
}

.campoForm label{
    font-size: 1.2em;
}

.botonChico {
    width: 100%;
    padding: 6%;
    font-size: 1.2em;
    color: white;
    background-color: var(--grisBase);
    font-weight: 600;
    border-width: 0;
    border-radius: 5px;
    border: 1px solid white;
}

.input_form {
    width: 100%;
    padding: 0.8em 0.8em;
    font-size: 1em;
    background-color: white;
    margin: 0 0 0.5em 0;
    outline: 0;
    border-width: 0;
    /*border-color: black;*/
    border-radius: 5px;
    border: 1px solid #dcdfe6;
    z-index: 3035;
}

    .input_form::placeholder {
        color: rgb(218 218 217);
    }

.requerido .input_form.input-validation-error {
    border: 1px solid red;
}

/*SWEET ALAERT*/

.swal2-container > ul {
    font-size:1em;
}

.el-carousel__container {
    margin-left: auto;
    margin-right: auto;
}

.el-carousel__container, .container_element-carousel, .container_element-carousel img {
    height: 100%;
    width: 300px;
}

.container_element-carousel {
    display: flex;
    align-items: center;
}

    .container_element-carousel img {
        height: 582px;
        width: 300px;
        border-radius: 20px;
    }

.el-carousel__item {
    border-radius: 20px;
}

.v-application--wrap {
     flex: 1 1 auto; 
     display: flex; 
     flex-direction: column; 
     min-height:none; 
     max-width: none;   
     position: relative; 
}

.v-application .v-application--is-ltr .theme--light{
    width:100%;
}
.selectZise{
    width:100%;
}
.btn-letraBlanca {
    color: #fff;  
}

.btn-Cancelar {
    color: black;   
}
    .btn-Cancelar:hover {
        color: black;
        background-color: white;
        border-color: white;
    }
    .btn-Cancelar.focus, .btn-Cancelar:focus {
        box-shadow: 0 0 0 .2rem rgba(52,58,64,.5)
    }

.textAlineLeft{ /* se puede utilizar la clase de bootstrap 'text-left'*/
    text-align:left; 
}

.calendario_contenedor .col {
    width: 100%;
}
    
.calendario_Cuerpo.v-sheet.theme--light {
    height: 400px;
    background-color: var(--azulGrisBase);
}
.calendario_Encabezado {
    height: 62px;
}

.resumen_Direcciones {
    margin: 0 1% 0 0;
    width: 50%;
}

.calendario_Margen {
    margin: 0 0 0 1%;
    width: 50%;
    border-radius: 20px;
    padding: 1%;
    background-color: var(--azulGrisBase);
}

.v-toolbar, .v-past, .v-outside, .v-present, .v-future, .v-calendar-monthly {
    background-color: var(--azulGrisBase) !important;
    border: 0px !important;
    font-size: 1em;
}

.v-calendar-weekly__head-weekday {
    font-weight: 600;
    font-size: 1.2em;
}

.v-future {
    color: var(--grisBase) !important;
}

.v-outside{
    color: var(--grisPlaceholder);
}

.v-calendar-weekly__day-label > button{
    font-weight: 600 !important;
    font-size: 1em !important;
}

.v-outside .v-calendar-weekly__day-label > button {
    color: rgba(0,0,0,.38);
}

.botonHoy{
    border: none;
}

.calendario_TablaDia, .calendario_TablaDia2 {
    display: none;
    background-color: var(--grisBaseClaro);
}
    .calendario_TablaDia.verTabla{
        display: initial;
    }

.ocultarCalendario{
    display: none;
}

.v-application--wrap{
    width:100%;
}

.el-table {
    border-radius: 15px;
}

.el-table th.is-leaf{
    background-color: var(--azulGrisBase);
    border-bottom: 1px solid var(--grisBase);
    font-size:1.2em;
    font-weight:600;
    color: var(--grisBase);
}

.el-table__body-wrapper .is-scrolling-none {
    height: 450px;
}

.el-table th.gutter, .el-table tr, .el-table__fixed-right-patch {
    background-color: var(--azulGrisBase);
    font-size: 1.1em;
}

.calendario_Encabezado.v-sheet.theme--light {
    background-color: var(--azulGrisBase);
}

.theme--light.v-calendar-events .v-event-more, .v-event-more.pl-1.v-outside {
    background-color: transparent !important;
}

.calendario_TablaDia.verTabla .el-table__header-wrapper, .calendario_TablaDia2.verTabla .el-table__header-wrapper {
    display: none;
}

.verTabla > .el-table {
    border-top: 1px solid var(--azulBase);
    border-radius:0;
}

/* SELECTS FORMATO*/
.el-select .el-input.is-focus .el-input__inner, .el-select .el-input__inner:focus {
    border-color: var(--grisBaseClaro);
}
.tag_estatus {
    border-radius: 20px;
    background-color: green;
    border-color: green;
    color: #fff;
    text-align: left;
   
}
.color_Num {
    color: lightgrey;
}
.el-select-dropdown__item.selected {
    color: var(--grisBase);
}

/*Encuestas*/

.contenedor_EncabezadoEncuesta {
    margin: 10px 0 10px 0 !important;
    background-color: var(--azulGrisBase);
    padding: 0;
    border-radius: 15px;
}

    .contenedor_EncabezadoEncuesta .nombre {
        width: 35%;
        background-color: var(--grisBase);
        color: white;
        font-size: 1.3em;
        font-weight: 600;
        border-radius: 15px;
        padding: 1.5%;
    }

    .contenedor_EncabezadoEncuesta .dia {
        width: 65%;
        background-color: var(--azulGrisBase);
        color: var(--grisBase);
        font-size: 1.3em;
        font-weight: 600;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        padding: 1.5%;
    }

.panelEncuesta{
    min-height: 250px;
    padding:0;
}

.preguntaEncuesta {
    font-weight: bold;
    font-size: 1.6em;
    text-align: center;
    color: black;
    padding: 2% 0 2% 0;
}

.respuestaTexto, .respuestaCerrada {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.calficacionTexto {
    place-content: center;
}

    .calficacionTexto .Izq, .calficacionTexto .Der {
        font-size: 1.3em;
    }

    .calificacion {
        text-align: center;
    }

.posicionBoton {
    width: 12%;
    margin-left: auto;
    float: right;
}

.encuesta_Botones {
    width: 100%;
    bottom: 0;
    height: 20%;
    align-items: center;
    padding: 0 2%;
}

    .encuesta_Botones .encuesta_BotonIzq, .encuesta_Botones .encuesta_BotonDer {
        width: 12%;
    }

    .encuesta_Botones .relleno{
        width: 76%;
    }

.calficacionTexto div{
    width:67%;
}

@media screen and (min-width: 1400px) {
    .el-rate__item > i {
        font-size: 80px;
    }
}

@media screen and (min-height: 750px) and (min-width: 600px) {
    .panelEncuesta {
        min-height: 500px;
    }

    .respuestaTexto, .respuestaCerrada {
        margin-top: 5%;
    }

}

.tag_estatusOSCancel {
    border-radius: 20px;
    border-color: red;
    color: #fff;
    /*width: 150px;*/
    text-align: left;

}
.tag_estatusOS {
    border-radius: 20px;
    border-color: green;
    color: #fff;
    text-align: left;

}
.estatusCancelado {
    font-size: x-large;
    color: red;
}
.estatusActivo {
    font-size: x-large;
    color: green;
}

.label_subtitulo {
    font-weight: normal;
    display: inline;
    font-size: 20px;
}
.agregarNuevo .col-lg-10 {
    width: 50%;
}

.agregarNuevo .col-lg-2 {
    width: 50%;
}
.lineaGris {
    border-bottom: 2px solid var(--grisBaseClaro)
}

.encabezadoTabla {
    font-size: 0.7em;
    color: blue;
    font-weight: 600;
}

.textoTabla{
    font-weight: 600;
}

    .textoTabla i {
        place-self: center;
        font-size:xx-small;
        padding-right: 5px;
    }


/*PRUEBAS*/

body {
    min-height:100vh;
    display: flex;
    flex-direction: column;
}

/* Estilos del nav */
/*#navbar {
    min-height: 80px;
}*/

/* Footer */
.footerRework {
    height: 80px;
    margin-top:auto;
}

.el-skeleton {
    height: 100%;
    place-items: center;
    padding-bottom: 1.5em;
}

.my-header {
    text-align: center !important;
    border-bottom-color: var(--grisBase) !important;
}