@font-face {
    font-family: Inter Regular;
    src: url("Inter-Regular.ttf") format("opentype");
}

* {
    font-family: 'Inter Regular';
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

body {
    width: 100%;
    display: block;
    margin: 0px;
    padding: 0px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.file-select {
    position: relative;
    display: block;
    margin: 10px 0px;
}

.file-select::before {
    background-color: #5678EF;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    content: 'Seleccionar imagen';
    /* testo por defecto */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
}

.file-select input[type="file"] {
    opacity: 0;
    width: 100%;
    height: 32px;
    display: inline-block;
    cursor: pointer;
}

.archivo-select {
    position: relative;
    display: block;
    margin: 10px 0px;
}

.archivo-select::before {
    background-color: #555;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    content: 'Seleccionar PDF';
    /* testo por defecto */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
}

.archivo-select input[type="file"] {
    opacity: 0;
    width: 100%;
    height: 32px;
    display: inline-block;
    cursor: pointer;
}

.file-select3 {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.file-select3::before {
    background-color: #555;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    content: 'Seleccionar imagenes';
    font-weight: bold;
    letter-spacing: 0.5px;
    /* testo por defecto */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-size: 12px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.file-select3 input[type="file"] {
    opacity: 0;
    width: 100%;
    display: inline-block;
    cursor: pointer;
    height: 25px;
    cursor: pointer;
}

/* PANEL PARA PC */

/*Menu cabecera PC*/
@media screen and (min-width: 800px) {
    .menu-flotante {
        background: #fff;
        font-size: 20px;
        text-transform: uppercase;
        font-weight: bold;
        color: #ffffff;
        letter-spacing: 2px;
        padding: 0px 0px;
        position: fixed;
        top: 0px;
        left: 0px;
        transition: all 300ms ease 0ms;
        box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.2);
        z-index: 99;
        width: 100%;
        transition: 400ms;
        display: inline-block;
        border-bottom: 2px solid red;
        vertical-align: middle;
    }

    .menu-flotante:hover {
        box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.4);
        transition: 400ms;
    }

    .menu-flotante .izq {
        width: 40%;
        display: inline-block;
        vertical-align: middle;
        text-align: left;
    }

    
    .menu-flotante .izq a {
        width: 30%;
        display: inline-block;
        text-align: left;
        margin: 0px;
        vertical-align: middle;
        padding: 15px 5px;
    }
    
    .menu-flotante .izq label {
        display: inline-block;
        font-size: 18px;
        vertical-align: middle;
        color: #000;
    }

    .menu-flotante .izq a img {
        width: 20px;
        max-height: 20px;
        object-fit: cover;
        vertical-align: middle;
        cursor: pointer;
        margin: 0px;
    }


    .menu-flotante .der {
        width: 58%;
        display: inline-block;
        text-align: right;
    }

    .menu-flotante .der a {
        width: 10%;
        display: inline-block;
        text-align: center;
        margin: 0px;
        vertical-align: middle;
        padding: 15px 5px;
        transition: 400ms;
    }
    .menu-flotante .der a:hover {
        background: #e6e6e6;
        transition: 400ms;
    }

    .menu-flotante .der a img {
        max-width: 30px;
        height: 22px;
        object-fit: cover;
        vertical-align: middle;
        cursor: pointer;
        margin: 0px;
    }

    .menu-flotante .der label {
        color: #5678EF;
        vertical-align: middle;
        cursor: pointer;
    }

    .menuDes {
        font-size: 20px;
        font-weight: bold;
        color: #ffffff;
        border-radius: 0px 0px 5px 5px;
        letter-spacing: 2px;
        background-color: #fff;
        position: fixed;
        box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
        z-index: 99;
        width: 30%;
        left: 0px;
    }

    .menuDes {
        height: 90vh;
        top: 0px;
        text-align: left;
    }

    .menuDes .barra {
        width: 100%;
        display: block;
        padding: 5px 15px;
        border-bottom: 1px solid #ccc;
    }


    .menuDes a {
        color: #333;
        width: 100%;
        display: block;
    }

    .menuDes img {
        vertical-align: middle;
        max-width: 25px;
        max-height: 25px;
    }

    .menuDes label {
        vertical-align: middle;
        cursor: pointer;
    }

    .menuDes2 {
        font-size: 20px;
        font-weight: bold;
        color: #ffffff;
        letter-spacing: 2px;
        background-color: #fff;
        position: fixed;
        box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
        z-index: 99;
        width: 30%;
        left: 0px;
        height: 10vh;
        bottom: 0px;
        padding: 0px;
    }

    .menuDes2 a {
        width: 100%;
        display: inline-block;
        text-align: center;
        align-items: center;
        vertical-align: middle;
        background: #fff;
        display: flex;
        height: 100%;
        transition: 400ms;
        cursor: pointer;
        border-top: 2px solid red;
        padding: 0px;
        margin: 0px;
    }
    
    .menuDes2 a:hover {
        background: #ccc;
        transition: 400ms;
    }

    .menuDes2 a label {
        width: 90%;
        display: inline-block;
        color: #000;
        font-size: 18px;
        padding: 0px 10px;
        vertical-align: middle;
        text-align: right;
    }
    .menuDes2 a img {
        display: inline-block;
        max-width: 30px;
        max-height: 30px;
        border-radius: 4px;
        vertical-align: middle;
        object-fit: cover;
    }

    .interno {
        padding: 80px 30px 20px 30px;
        display: block;
        width: 100%;
        text-align: center;
    }
}

/*Formulario de inicio sesion PC*/
@media screen and (min-width: 800px) {
    .inicioS {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url("../sources/fondo-sesion.png");
        background-size: cover;
    }
    .inicioS .formul {
        width: 30%;
        display: inline-block;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);
        border: 1px solid #929292;
        border-radius: 40px;
        padding: 20px 60px 20px 60px;
        background-color: rgba(255, 255, 255, 0.486);
        /* background: #fff; */
        backdrop-filter: blur(20px);
        text-align: center;
    }

    .inicioS .formul label.titulo {
        display: inline-block;
        font-size: 50px;
        font-weight: bold;
        color: red;
        text-align: left;
    }
    
    .inicioS .formul label.subti {
        display: inline-block;
        font-size: 18px;
        margin-bottom: 30px;
        color: #333;
        text-align: left;
    }

    .inicioS .formul .linea{
        width: 100%;
        display: inline-block;
        text-align: center;
        padding: 5px 0px;
        margin-bottom: 10px;
    }
    .inicioS .formul .linea label{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 12px;
    }
    .inicioS .formul .linea input{
        width: 100%;
        display: inline-block;
        text-align: left;
        padding: 8px 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .inicioS .formul .linea input:focus{
        outline: none;
        border: 1px solid #555;
    }
    .inicioS .formul button {
        background: #555;
        border: none;
        width: 100%;
        padding: 10px 0px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: 400ms;
        border-radius: 10px;
        font-size: 16px;
        color: #fff;
        cursor: pointer;
        transition: 400ms;
    }

    .inicioS .formul button:hover {
        background: #292929;
        transition: 400ms;
    }
    .inicioS .formul img {
        width: 50%;
        display: inline-block;
        margin-top: 40px;
    }
}
/* panel de home */
@media screen and (min-width: 800px) {
    .home {
        width: 100%;
        display: block;
        text-align: center;
    }
    .home .bienve{
        width: 100%;
        padding: 0px 7.5%;
        display: block;
        text-align: left;
        font-size: 14px;
        color: #333;
        margin-bottom: 10px;
    }
    .home .ficha{
        width: 15%;
        display: inline-block;
        text-align: center;
        background: red;
        border-radius: 10px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        padding: 10px;
        transition: 400ms;
        margin: 0px 1% 10px 1%;
    }
    .home .ficha:hover{
        background: rgb(206, 0, 0);
        transition: 400ms;
    }
    .home .ficha img{
        max-width: 80%;
        display: inline-block;
        height: 150px;
        object-fit: cover;
    }
    .home .ficha label{
        width: 100%;
        display: inline-block;
        text-align: center;
        color: #fff;
        font-weight: bold;
        margin-top: 5px;
    }
}

/* panel de cargos */
@media screen and (min-width: 800px) {
    .cargos {
        width: 60%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .cargos .caja{
        width: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: bottom;
        margin-bottom: 10px;
    }
    .cargos .caja .campo{
        width: 60%;
        display: inline-block;
        text-align: left;
    }
    .cargos .caja .campo label{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 12px;
    }
    .cargos .caja .campo input{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 3px 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .cargos .caja a {
        width: 20%;
        display: inline-block;
        text-align: center;
        color: #fff;
        background: red;
        padding: 5px 0px;
        border-radius: 5px;
        font-size: 14px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
    }
    .cargos .lista {
        width: 100%;
        display: block;
        border: 1px solid #ccc;
        text-align: center;
    }
    .cargos .lista a{
        color: #333;
    }
    
    .cargos .lista .sup{
        background: #e6e6e6;
    }
    .cargos .lista .barra{
        width: 100%;
        display: block;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        transition: 400ms;
    }
    .cargos .lista .baj:hover{
        background: #e6e6e6;
        transition: 400ms;
    }
    .cargos .lista .barra .celda{
        display: inline-block;
        padding: 5px 3px;
    }
    .cargos .lista .barra .lat{
        border-left: 1px solid #ccc;
    }
    .cargos .lista .barra .min{
        width: 10%;
    }
    .cargos .lista .barra .medio{
        width: 78%;
        text-align: left;
    }
    .cargos .lista .result{
        height: 65vh;
        overflow-y: scroll;
    }
    .cargos .lista .result::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .cargos .lista .result::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .cargos .lista .result::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
}

/* ventana de flotante generalizada */
@media screen and (min-width: 800px) {
    .window-notice .media {
        box-shadow: 0 1px 3px rgba(33, 41, 52, .75);
        box-sizing: content-box;
        display: flex;
        flex-direction: column;
        margin: auto;
        width: 30%;
        overflow: hidden;
        position: relative;
        font-size: 1.3rem;
        border-radius: 10px;
        background: #fff;
    }
    .window-notice .media .desl{
        overflow-y: scroll;
        max-height: 80vh;
    }
    .window-notice .media .desl::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .window-notice .media .desl::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .window-notice .media .desl::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
    .window-notice .media .formu{
        width: 100%;
        display: block;
        text-align: center;
        padding: 10px;
        max-height: 80vh;
        overflow-y: scroll;
    }
    .window-notice .panel .formu::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .window-notice .panel .formu::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .window-notice .panel .formu::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
    .window-notice .media .formu .avisar{
        width: 100%;
        display: block;
        text-align: center;
        font-size: 16px;
        color: #333;
        padding: 10px;
        margin-bottom: 10px;
    }
    .window-notice .media .formu .notas{
        width: 100%;
        display: block;
        text-align: left;
        font-size: 16px;
        color: #333;
        margin-bottom: 10px;
    }
    .window-notice .media .formu .aviso{
        width: 100%;
        display: block;
        text-align: center;
        font-size: 16px;
        color: #333;
        margin-bottom: 15px;
    }
    .window-notice .media .formu .campo{
        display: inline-block;
        margin-bottom: 20px;
    }
    .window-notice .media .formu .compl{
        width: 100%;
    }
    .window-notice .media .formu .midl{
        width: 49%;
    }
    .window-notice .media .formu .campo label{
        width: 100%;
        display: block;
        text-align: left;
        color: #555;
        font-size: 12px;
    }
    .window-notice .media .formu .campo select,
    .window-notice .media .formu .campo input{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 3px 5px;
        border-radius: 4px;
        border: 1px solid #ccc;
    }
    .window-notice .media .formu .campo textarea{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 5px;
        border-radius: 4px;
        border: 1px solid #555;
        height: 12vh;
    }

    .window-notice .media .formu .permiso{
        display: inline-block;
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
        transition: 400ms;
        padding: 5px 0px;
    }
    .window-notice .media .formu .permiso:hover{
        background: #e6e6e6;
        transition: 400ms;
    }
    .window-notice .media .formu .permiso label{
        width: 84%;
        display: inline-block;
        text-align: left;
        color: #555;
        font-size: 14px;
    }
    .window-notice .media .formu .permiso select{
        width: 14%;
        display: inline-block;
        text-align: left;
        color: #333;
        font-size: 14px;
        padding: 3px 5px;
        border-radius: 4px;
        border: 1px solid #ccc;
    }

    .window-notice .media .formu a.cambven{
        width: 60%;
        display: inline-block;
        text-align: center;
        color: #fff;
        padding: 5px;
        border-radius: 4px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border: none;
        cursor: pointer;
        background: #555;
        transition: 400ms;
        margin-top: 10px;
        font-size: 14px;
    } 
    .window-notice .media .formu .rechaz {
        width: 100%;
        display: block;
        text-align: center;
        background: red;
        color: #fff;
        padding: 5px;
        font-size: 14px;
    }

    .window-notice .media .formu a,
    .window-notice .media .formu button{
        width: 60%;
        display: inline-block;
        text-align: center;
        color: #fff;
        padding: 5px;
        border-radius: 4px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border: none;
        cursor: pointer;
        background: red;
        transition: 400ms;
        margin-top: 10px;
        font-size: 14px;
    } 
    .window-notice .media .formu button:hover{
        background: #333;
        transition: 400ms;
    }

    .window-notice .media .formu .titular {
        width: 100%;
        display: block;
        text-align: center;
        margin: 20px 0px 10px 0px;
    }
    .window-notice .media .formu .listado {
        width: 100%;
        display: block;
        text-align: center;
        border: 1px solid #ccc;
    }
    .window-notice .media .formu .listado .barra{
        width: 100%;
        display: block;
        text-align: center;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
    }
    .window-notice .media .formu .listado .sup{
        background: #e6e6e6;
    }
    .window-notice .media .formu .listado .celda{
        display: inline-block;
        padding: 4px 3px;
    }
    .window-notice .media .formu .listado .gra{
        width: 60%;
        text-align: left;
    }
    .window-notice .media .formu .listado .med{
        width: 38%;
        text-align: right;
    }
    .window-notice .media .formu .listado .resul{
        height: 60vh;
        overflow-y: scroll;
    }
    .window-notice .media .formu .listado .resul::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .window-notice .media .formu .listado .resul::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .window-notice .media .formu .listado .resul::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }

    .window-notice .media .formu .radio-group {
        width: 100%;
        display: inline-block;
        text-align: left;
    }
    .window-notice .media .formu .radio-item {
        width: 30%;
        display: inline-block;
    }
    .window-notice .media .formu .radio-item input[type="radio"]{
        width: 10%;
        height: auto;
        display: inline-block;
        -ms-transform: scale(1.5);     /* IE 9 */
        -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
        transform: scale(1.5); 
    }
    .window-notice .media .formu .radio-item label {
        width: 80%;
        display: inline-block;
        text-align: left;
        font-size: 14px;
        color: #555;
    }
}

/* panel de usuarios */
@media screen and (min-width: 800px) {
    .usuarios {
        width: 100%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .usuarios .caja{
        width: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: bottom;
        margin-bottom: 10px;
    }
    .usuarios .caja .campo{
        width: 60%;
        display: inline-block;
        text-align: left;
    }
    .usuarios .caja .campo label{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 12px;
    }
    .usuarios .caja .campo input{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 3px 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .usuarios .caja a {
        width: 20%;
        display: inline-block;
        text-align: center;
        color: #fff;
        background: red;
        padding: 5px 0px;
        border-radius: 5px;
        font-size: 14px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
    }
    .usuarios .lista {
        width: 100%;
        display: block;
        border: 1px solid #ccc;
        text-align: center;
    }
    .usuarios .lista a{
        color: #333;
    }
    
    .usuarios .lista .sup{
        background: #e6e6e6;
    }
    .usuarios .lista .barra{
        width: 100%;
        display: block;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        transition: 400ms;
    }
    .usuarios .lista .baj:hover{
        background: #e6e6e6;
        transition: 400ms;
    }
    .usuarios .lista .barra .celda{
        display: inline-block;
        padding: 5px 3px;
    }
    .usuarios .lista .barra .lat{
        border-left: 1px solid #ccc;
    }
    .usuarios .lista .barra .min{
        width: 7%;
    }
    .usuarios .lista .barra .med{
        width: 22%;
        text-align: left;
    }
    .usuarios .lista .barra .peq{
        width: 12%;
        text-align: left;
    }
    .usuarios .lista .result{
        height: 65vh;
        overflow-y: scroll;
    }
    .usuarios .lista .result::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .usuarios .lista .result::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .usuarios .lista .result::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
}

/* panel de localidades */
@media screen and (min-width: 800px) {
    .localidades {
        width: 70%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .localidades .caja{
        width: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: bottom;
        margin-bottom: 10px;
    }
    .localidades .caja .campo{
        width: 50%;
        display: inline-block;
        text-align: left;
    }
    .localidades .caja .campo label{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 12px;
    }
    .localidades .caja .campo label.titulo{
        font-size: 16px;
    }
    .localidades .caja .campo input{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 3px 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .localidades .caja a {
        width: 23%;
        display: inline-block;
        text-align: center;
        color: #fff;
        background: red;
        padding: 5px 0px;
        border-radius: 5px;
        font-size: 14px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
    }
    .localidades .lista {
        width: 100%;
        display: block;
        border: 1px solid #ccc;
        text-align: center;
    }
    .localidades .lista a{
        color: #333;
    }
    
    .localidades .lista .sup{
        background: #e6e6e6;
    }
    .localidades .lista .barra{
        width: 100%;
        display: block;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        transition: 400ms;
    }
    .localidades .lista .baj:hover{
        background: #e6e6e6;
        transition: 400ms;
    }
    .localidades .lista .barra .celda{
        display: inline-block;
        padding: 5px 3px;
    }
    .localidades .lista .barra .lat{
        border-left: 1px solid #ccc;
    }
    .localidades .lista .barra .min{
        width: 5%;
    }
    .localidades .lista .barra .medio{
        width: 43%;
        text-align: left;
    }
    .localidades .lista .barra .med{
        width: 21%;
        text-align: left;
    }
    .localidades .lista .barra .peq{
        width: 12%;
        text-align: left;
    }
    .localidades .lista .result{
        height: 65vh;
        overflow-y: scroll;
    }
    .localidades .lista .result::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .localidades .lista .result::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .localidades .lista .result::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
}

/* panel de centros medicos */
@media screen and (min-width: 800px) {
    .centros {
        width: 70%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .centros .caja{
        width: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: bottom;
        margin-bottom: 10px;
    }
    .centros .caja .campo{
        width: 50%;
        display: inline-block;
        text-align: left;
    }
    .centros .caja .campo label{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 12px;
    }
    .centros .caja .campo input{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 3px 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .centros .caja a {
        width: 23%;
        display: inline-block;
        text-align: center;
        color: #fff;
        background: red;
        padding: 5px 0px;
        border-radius: 5px;
        font-size: 14px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
    }
    .centros .lista {
        width: 100%;
        display: block;
        border: 1px solid #ccc;
        text-align: center;
    }
    .centros .lista a{
        color: #333;
    }
    
    .centros .lista .sup{
        background: #e6e6e6;
    }
    .centros .lista .barra{
        width: 100%;
        display: block;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        transition: 400ms;
    }
    .centros .lista .baj:hover{
        background: #e6e6e6;
        transition: 400ms;
    }
    .centros .lista .barra .celda{
        display: inline-block;
        padding: 5px 3px;
    }
    .centros .lista .barra .lat{
        border-left: 1px solid #ccc;
    }
    .centros .lista .barra .min{
        width: 5%;
    }
    .centros .lista .barra .medio{
        width: 43%;
        text-align: left;
    }
    .centros .lista .barra .peq{
        width: 12%;
        text-align: left;
    }
    .centros .lista .result{
        height: 65vh;
        overflow-y: scroll;
    }
    .centros .lista .result::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .centros .lista .result::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .centros .lista .result::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
}

/* panel de instituciones */
@media screen and (min-width: 800px) {
    .institucion {
        width: 100%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .institucion .caja{
        width: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: bottom;
        margin-bottom: 10px;
    }
    .institucion .caja .campo{
        width: 60%;
        display: inline-block;
        text-align: left;
    }
    .institucion .caja .campo label{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 12px;
    }
    .institucion .caja .campo input{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 3px 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .institucion .caja button,
    .institucion .caja a {
        width: 20%;
        display: inline-block;
        text-align: center;
        color: #fff;
        background: red;
        padding: 5px 0px;
        border-radius: 5px;
        font-size: 14px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border: none;
        cursor: pointer;
    }
    .institucion .lista {
        width: 100%;
        display: block;
        border: 1px solid #ccc;
        text-align: center;
    }
    .institucion .lista a{
        color: #333;
    }
    
    .institucion .lista .sup{
        background: #e6e6e6;
    }
    .institucion .lista .barra{
        width: 100%;
        display: block;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        transition: 400ms;
    }
    .institucion .lista .baj:hover{
        background: #e6e6e6;
        transition: 400ms;
    }
    .institucion .lista .barra .celda{
        display: inline-block;
        padding: 5px 3px;
    }
    .institucion .lista .barra .lat{
        border-left: 1px solid #ccc;
    }
    .institucion .lista .barra .min{
        width: 7%;
    }
    .institucion .lista .barra .med{
        width: 22%;
        text-align: left;
    }
    .institucion .lista .barra .peq{
        width: 12%;
        text-align: left;
    }
    .institucion .lista .result{
        height: 65vh;
        overflow-y: scroll;
    }
    .institucion .lista .result::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .institucion .lista .result::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .institucion .lista .result::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
}

/*VENTANA EMERGENTE */
@media screen and (min-width: 800px) {
    .window-notice {
        background: rgba(33, 41, 52, .85);
        left: 0;
        bottom: 0;
        right: 0;
        top: 0;
        display: flex;
        position: fixed;
        z-index: 999;
        width: 100%;
        vertical-align: middle;
    }

    .window-notice .central {
        box-shadow: 0 1px 3px rgba(33, 41, 52, .75);
        box-sizing: content-box;
        display: flex;
        flex-direction: column;
        margin: auto;
        width: 30%;
        overflow: hidden;
        position: relative;
        font-size: 1.3rem;
        border-radius: 10px;
    }

    .window-notice .barraCierre {
        width: 100%;
        display: block;
        padding: 5px 0px;
        border-radius: 10px 10px 0px 0px;
        padding: 10px 10px 10px 0px;
        border-bottom: 2px solid red;
    }

    .window-notice .barraCierre label {
        width: 88%;
        display: inline-block;
        color: #333;
        font-weight: bold;
        font-size: 16px;
        letter-spacing: 0.5px;
        text-align: left;
        padding-left: 20px;
    }

    .window-notice .barraCierre a {
        width: 10%;
        display: inline-block;
        color: #333;
        font-weight: bold;
        font-size: 16px;
        letter-spacing: 0.5px;
        text-align: right;
        padding-right: 10px;
    }

    .window-notice .content {
        background: #fff;
        box-shadow: 0 1px 3px rgba(33, 41, 52, .75);
        box-sizing: content-box;
        display: flex;
        flex-direction: column;
        margin: auto;
        width: 40%;
        overflow: hidden;
        position: relative;
        font-size: 1.3rem;
        border-radius: 10px;
    }
}

/*Formulario de encuesta registro PC*/
@media screen and (min-width: 800px) {
    .registro {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url("../sources/fondo-sesion.png");
        background-size: cover;
    }
    .registro .encuest {
        width: 30%;
        display: inline-block;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);
        padding: 20px 20px 20px 20px;
        /* background-color: rgba(255, 255, 255, 0.486); */
        background: #fff;
        backdrop-filter: blur(20px);
        text-align: center;
        overflow-y: scroll;
        max-height: 90vh;
    }
    .registro .encuest::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
        border-radius: 10px; /* Bordes redondeados del deslizador */
    }

    .registro .encuest::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 10px; /* Bordes redondeados del deslizador */
    }

    .registro .encuest::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }

    .registro .encuest label.titulo {
        display: inline-block;
        font-size: 50px;
        font-weight: bold;
        color: red;
        text-align: left;
    }
    
    .registro .encuest label.subti {
        width: 100%;
        display: inline-block;
        font-size: 18px;
        margin: 10px 0px;
        padding-top: 10px;
        border-top: 2px solid red;
        color: #333;
        text-align: center;
    }

    .registro .encuest .linea{
        width: 100%;
        display: inline-block;
        text-align: center;
        padding: 5px 0px;
        margin-bottom: 10px;
    }
    .registro .encuest .linea label{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 14px;
    }
    .registro .encuest .linea select,
    .registro .encuest .linea input{
        width: 100%;
        display: inline-block;
        text-align: left;
        padding: 5px 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
    }
    .registro .encuest .linea input:focus{
        outline: none;
        border: 1px solid #555;
    }
    .registro .encuest a,
    .registro .encuest button {
        width: 80%;
        display: inline-block;
        background: #555;
        border: none;
        width: 100%;
        padding: 5px 0px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: 400ms;
        border-radius: 5px;
        font-size: 16px;
        color: #fff;
        cursor: pointer;
        transition: 400ms;
    }

    .registro .encuest button:hover {
        background: #292929;
        transition: 400ms;
    }
    .registro .encuest img {
        width: 80%;
        display: inline-block;
    }
}

/* panel de asics */
@media screen and (min-width: 800px) {
    .asics {
        width: 100%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .asics .caja{
        width: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: bottom;
        margin-bottom: 10px;
    }
    .asics .caja .campo{
        width: 60%;
        display: inline-block;
        text-align: left;
    }
    .asics .caja .campo label{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 12px;
    }
    .asics .caja .campo input{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 3px 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .asics .caja a {
        width: 20%;
        display: inline-block;
        text-align: center;
        color: #fff;
        background: red;
        padding: 5px 0px;
        border-radius: 5px;
        font-size: 14px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
    }
    .asics .lista {
        width: 100%;
        display: block;
        border: 1px solid #ccc;
        text-align: center;
    }
    .asics .lista a{
        color: #333;
    }
    
    .asics .lista .sup{
        background: #e6e6e6;
    }
    .asics .lista .barra{
        width: 100%;
        display: block;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        transition: 400ms;
    }
    .asics .lista .baj:hover{
        background: #e6e6e6;
        transition: 400ms;
    }
    .asics .lista .barra .celda{
        display: inline-block;
        padding: 5px 3px;
    }
    .asics .lista .barra .lat{
        border-left: 1px solid #ccc;
    }
    .asics .lista .barra .min{
        width: 5%;
    }
    .asics .lista .barra .med{
        width: 32%;
        text-align: left;
    }
    .asics .lista .barra .peq{
        width: 14%;
        text-align: left;
    }
    .asics .lista .result{
        height: 65vh;
        overflow-y: scroll;
    }
    .asics .lista .result::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .asics .lista .result::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .asics .lista .result::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
}

/* Puesto de salud individual */
@media screen and (min-width: 800px) {
    .puestos {
        width: 70%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .puestos .caja{
        width: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: bottom;
        margin-bottom: 10px;
    }
    .puestos .caja .campo{
        display: inline-block;
        margin-bottom: 10px;
    }
    .puestos .caja .compl{
        width: 98%;
    }
    .puestos .caja .cuar{
        width: 24%;
    }
    .puestos .caja .tria{
        width: 32%;
    }
    .puestos .caja .campo label{
        width: 100%;
        display: block;
        text-align: left;
        font-size: 12px;
        color: #555;
        margin-bottom: 2px;
    }
    .puestos .caja .campo select,
    .puestos .caja .campo input{
        width: 100%;
        display: block;
        text-align: left;
        font-size: 16px;
        color: #333;
        padding: 3px 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .puestos .inforact {
        width: 100%;
        display: block;
        text-align: left;
        font-size: 12px;
    }
    .puestos .inventario {
        width: 100%;
        display: block;
        text-align: left;
    }
    .puestos .inventario .funciones{
        width: 100%;
        display: block;
        text-align: right;
    }
    .puestos .inventario .funciones a {
        width: 20%;
        display: inline-block;
        border-radius: 5px;
        background: red;
        padding: 5px;
        color: #fff;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        font-size: 16px;
        border: none;
        cursor: pointer;
        transition: 400ms;
        text-align: center;
    }
    .puestos .inventario .titular{
        width: 100%;
        display: block;
        text-align: left;
        font-size: 16px;
        color: #333;
        border-bottom: 2px solid red;
        font-weight: bold;
        padding: 3px 5px;
        margin-bottom: 10px;
    }
    .puestos .inventario .campo {
        width: 32%;
        display: inline-block;
        text-align: left;
        vertical-align: middle;
        margin-bottom: 15px;
        transition: 400ms;
        padding: 3px 0px;
    }
    .puestos .inventario .campo:hover {
        background: #e6e6e6;
        transition: 400ms;
    }
    .puestos .inventario .campo label{
        width: 80%;
        display: inline-block;
        font-size: 14px;
        color: #333;
        text-align: left;
    }
    .puestos .inventario .campo select,
    .puestos .inventario .campo input{
        width: 18%;
        display: inline-block;
        font-size: 14px;
        color: #333;
        text-align: left;
        padding: 3px;
        border: 1px solid #ccc;
        border-radius: 4px;
        text-align: right;
    }
    .puestos .inventario button {
        width: 100%;
        display: block;
        border-radius: 5px;
        background: red;
        padding: 5px;
        color: #fff;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        font-size: 16px;
        border: none;
        cursor: pointer;
        transition: 400ms;
    }
    .puestos .inventario button:hover {
        background: rgb(168, 0, 0);
        transition: 400ms;
    }

}

/* Registros de imagenologia */
@media screen and (min-width: 800px) {
    .imagenol {
        width: 95%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .imagenol .caja{
        width: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: bottom;
        margin-bottom: 10px;
    }
    .imagenol .caja .campo{
        display: inline-block;
        margin-bottom: 10px;
    }
    .imagenol .caja .compl{
        width: 98%;
    }
    .imagenol .caja .cuar{
        width: 24%;
    }
    .imagenol .caja .tria{
        width: 32%;
    }
    .imagenol .caja .campo label{
        width: 100%;
        display: block;
        text-align: left;
        font-size: 12px;
        color: #555;
        margin-bottom: 2px;
    }
    .imagenol .caja .campo select,
    .imagenol .caja .campo input{
        width: 100%;
        display: block;
        text-align: left;
        font-size: 16px;
        color: #333;
        padding: 3px 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .imagenol .inforact {
        width: 100%;
        display: block;
        text-align: left;
        font-size: 12px;
    }
    .imagenol .inventario {
        width: 100%;
        display: block;
        text-align: left;
    }
    .imagenol .inventario .funciones{
        width: 100%;
        display: block;
        text-align: right;
    }
    .imagenol .inventario .funciones a {
        width: 20%;
        display: inline-block;
        border-radius: 5px;
        background: red;
        padding: 5px;
        color: #fff;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        font-size: 16px;
        border: none;
        cursor: pointer;
        transition: 400ms;
        text-align: center;
    }
    .imagenol .inventario .titular{
        width: 100%;
        display: block;
        text-align: left;
        font-size: 16px;
        color: #333;
        border-bottom: 2px solid red;
        font-weight: bold;
        padding: 3px 5px;
        margin-bottom: 10px;
    }
    .imagenol .inventario .campo {
        width: 100%;
        display: inline-block;
        text-align: left;
        vertical-align: middle;
        margin-bottom: 15px;
        transition: 400ms;
        padding: 3px 0px;
        border-bottom: 1px solid #e6e6e6;
    }
    .imagenol .inventario .campo:hover {
        background: #e6e6e6;
        transition: 400ms;
    }
    .imagenol .inventario .celda {
        width: 100%;
        display: inline-block;
        margin-bottom: 5px;
    }
    .imagenol .inventario .campo label{
        width: 90%;
        display: inline-block;
        font-size: 14px;
        color: #333;
        text-align: left;
    }
    .imagenol .inventario .campo input{
        width: 8%;
        display: inline-block;
        font-size: 14px;
        color: #333;
        padding: 3px;
        border: 1px solid #ccc;
        border-radius: 4px;
        text-align: right;
    }
    .imagenol .inventario .campo select{
        width: 8%;
        display: inline-block;
        font-size: 14px;
        color: #333;
        text-align: center;
        padding: 3px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .imagenol .inventario button {
        width: 100%;
        display: block;
        border-radius: 5px;
        background: red;
        padding: 5px;
        color: #fff;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        font-size: 16px;
        border: none;
        cursor: pointer;
        transition: 400ms;
    }
    .imagenol .inventario button:hover {
        background: rgb(168, 0, 0);
        transition: 400ms;
    }

}

/* panel de comunicados */
@media screen and (min-width: 800px) {
    .comunicas {
        width: 70%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .comunicas .superior {
        width: 100%;
        text-align: left;
        color: #333;
        font-size: 18px;
        display: block;
    }
    .comunicas .listado {
        width: 100%;
        text-align: left;
        display: block;
        height: 75vh;
        overflow-y: scroll;
        padding: 10px;
    }
    .comunicas .listado::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .comunicas .listado::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .comunicas .listado::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
    .comunicas .listado .infor{
        width: 100%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-bottom: 15px;
        padding: 5px;
        vertical-align: middle;
    }
    .comunicas .listado .infor .celda{
        display: inline-block;
        vertical-align: middle;
    }
    .comunicas .listado .infor .gran{
        width: 53%;
    }
    .comunicas .listado .infor .baj{
        width: 15%;
        font-size: 14px;
        color: #333;
        text-align: center;
        vertical-align: middle;
    }
    .comunicas .listado .infor .celda label.subt{
        width: 100%;
        display: inline-block;
        text-align: left;
        font-size: 12px;
        color: #555;
        vertical-align: middle;
    }
    .comunicas .listado .infor .celda label.nomb{
        width: 100%;
        display: inline-block;
        text-align: left;
        font-size: 16px;
        color: #333;
        vertical-align: middle;
    }
    .comunicas .listado .infor .celda a,
    .comunicas .listado .infor .celda button {
        width: 90%;
        display: inline-block;
        background: #5678EF;
        color: #fff;
        border-radius: 5px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border: none;
        cursor: pointer;
        padding: 5px 0px;
        vertical-align: middle;
    }
}

/* panel de guias y gestion */
@media screen and (min-width: 800px) {
    .ingeguia {
        width: 90%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .ingeguia .caja{
        width: 100%;
        display: inline-block;
        text-align: left;
        vertical-align: bottom;
        margin-bottom: 10px;
    }
    .ingeguia .caja .campo{
        display: inline-block;
        text-align: left;
    }
    .ingeguia .caja .tria {
        width: 30%;
    }
    .ingeguia .caja .peq {
        width: 15%;
    }
    .ingeguia .caja .campo label{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 12px;
    }
    .ingeguia .caja .campo select,
    .ingeguia .caja .campo input{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 3px 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .ingeguia .caja a {
        display: inline-block;
        text-align: center;
        color: #fff;
        background: red;
        border-radius: 5px;
        font-size: 14px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        padding: 5px 15px;
    }
    .ingeguia .lista {
        width: 100%;
        display: block;
        border: 1px solid #ccc;
        text-align: center;
    }
    .ingeguia .lista a{
        color: #333;
    }
    
    .ingeguia .lista .sup{
        background: #e6e6e6;
    }
    .ingeguia .lista .barra{
        width: 100%;
        display: inline-block;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        transition: 400ms;
        vertical-align: middle;
    }
    .ingeguia .lista .baj:hover{
        background: #e6e6e6;
        transition: 400ms;
    }
    .ingeguia .lista .barra .celda{
        display: inline-block;
        padding: 5px 3px;
        font-size: 14px;
        vertical-align: middle;
    }
    .ingeguia .lista .barra .lat{
        border-left: 1px solid #ccc;
    }
    .ingeguia .lista .barra .lad{
        text-align: left;
    }
    .ingeguia .lista .barra .min{
        width: 8%;
    }
    .ingeguia .lista .barra .grande{
        width: 40%;
        text-align: left;
    }
    .ingeguia .lista .barra .medio{
        width: 16%;
    }
    .ingeguia .lista .barra .linea{
        width: 100%;
        display: inline-block;
        text-align: left;
        vertical-align: middle;
    }

    .ingeguia .lista .barra .celda label.edoba{
        width: 90%;
        display: inline-block;
        text-align: center;
        padding: 2px;
        font-size: 10px;
        color: #fff;
        border-radius: 4px;
    }
    .ingeguia .lista .barra .minime{
        font-size: 12px;
        color: #555;
    }

    .ingeguia .lista .result{
        height: 65vh;
        overflow-y: scroll;
    }
    .ingeguia .lista .result::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .ingeguia .lista .result::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .ingeguia .lista .result::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }

    .ingeguia .superior {
        width: 100%;
        display: block;
        text-align: center;
        border: 1px solid #ccc;
        font-size: 16px;
        color: #333;
    }
    .ingeguia .superior .compl{
        width: 100%;
        display: block;
        border-bottom: 1px solid #ccc;
        padding: 4px 0px;
    }
    .ingeguia .superior .tria{
        width: 32%;
        display: inline-block;
        padding: 4px 4px;
        text-align: left;
    }
    .ingeguia .superior .lat{
        border-left: 1px solid #ccc;
    }
    .ingeguia .superior .tria label.tit{
        width: 100%;
        display: block;
        font-size: 12px;
        color: #555;
    }
    .ingeguia .contener {
        width: 100%;
        display: block;
        text-align: center;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
    .ingeguia .contener .funcion{
        width: 100%;
        display: block;
        text-align: left;
        padding: 10px 5px;
    }
    .ingeguia .contener .funcion a{
        width: 25%;
        display: inline-block;
        color: #fff;
        background: red;
        padding: 5px;
        border-radius: 4px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        text-align: center;
        font-size: 14px;
    }
    .ingeguia .contener .funcion a:hover{
        background: rgb(180, 0, 0);
        transition: 400ms;
    }
    .ingeguia .contener .funcion .busq{
        width: 40%;
        display: inline-block;
    }
    .ingeguia .contener .funcion .busq label{
        width: 100%;
        display: inline-block;
        text-align: left;
        font-size: 12px;
        color: #555;
    }
    .ingeguia .contener .funcion .busq input{
        width: 100%;
        display: inline-block;
        text-align: left;
        font-size: 16px;
        color: #333;
        padding: 3px;
        border-radius: 4px;
        border: 1px solid #ccc;
    }
    .ingeguia .contener .resmed {
        width: 100%;
        display: block;
        text-align: center;
    }
    .ingeguia .contener .resmed .barra{
        width: 100%;
        display: block;
        text-align: center;
        border-bottom: 1px solid #ccc;
    }
    
    
    .ingeguia .contener .resmed .baj:hover{
        background: #e6e6e6;
    }
    .ingeguia .contener .resmed .sup{
        border-top: 1px solid #ccc;
        background: #e6e6e6;
    }
    .ingeguia .contener .resmed .barra .celda{
        display: inline-block;
        text-align: center;
        padding: 6px 4px;
        vertical-align: middle;
        color: #333;
    }
    
    .ingeguia .contener .resmed .barra .celda label{
        width: 100%;
        display: inline-block;
        text-align: left;
        color: #333;
        vertical-align: middle;
    }
    .ingeguia .contener .resmed .barra .celda label.llen{
        font-size: 16px;
    }
    .ingeguia .contener .resmed .barra .celda label.subb{
        font-size: 12px;
    }
    
    .ingeguia .contener .resmed .barra .medi{
        width: 12%;
        font-size: 14px;
    }
    .ingeguia .contener .resmed .barra .min{
        width: 5%;
        font-size: 14px;
        text-align: left;
    }
    .ingeguia .contener .resmed .barra .lat{
        border-right: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }
    .ingeguia .contener .resmed .barra .gran{
        width: 68%;
        text-align: left;
    }
    .ingeguia .contener .resmed .medice {
        width: 100%;
        display: block;
        text-align: center;
        overflow-y: scroll;
        height: 50vh;
    }
    .ingeguia .contener .resmed .medice::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .ingeguia .contener .resmed .medice::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .ingeguia .contener .resmed .medice::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
    .ingeguia a.cont {
        width: 80%;
        display: inline-block;
        color: #fff;
        background: #555;
        padding: 5px;
        border-radius: 4px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        text-align: center;
        font-size: 14px;
        margin: 10px 0px;
    }
}

/* panel de inventario general */
@media screen and (min-width: 800px) {
    .invenge {
        width: 70%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .invenge .contener {
        width: 100%;
        display: block;
        text-align: center;
    }
    .invenge .contener .funcion{
        width: 100%;
        display: block;
        text-align: left;
        padding: 10px 5px;
    }
    .invenge .contener .funcion a{
        width: 25%;
        display: inline-block;
        color: #fff;
        background: red;
        padding: 5px;
        border-radius: 4px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        text-align: center;
        font-size: 14px;
    }
    .invenge .contener .funcion a:hover{
        background: rgb(180, 0, 0);
        transition: 400ms;
    }
    .invenge .contener .funcion .busq{
        width: 40%;
        display: inline-block;
    }
    .invenge .contener .funcion .busq label{
        width: 100%;
        display: inline-block;
        text-align: left;
        font-size: 12px;
        color: #555;
    }
    .invenge .contener .funcion .busq input{
        width: 100%;
        display: inline-block;
        text-align: left;
        font-size: 16px;
        color: #333;
        padding: 3px;
        border-radius: 4px;
        border: 1px solid #ccc;
    }
    .invenge .contener .resmed {
        width: 100%;
        display: block;
        text-align: center;
        border: 1px solid #ccc;
    }
    .invenge .contener .resmed .barra{
        width: 100%;
        display: block;
        text-align: center;
        border-bottom: 1px solid #ccc;
    }
    .invenge .contener .resmed .baj:hover{
        background: #e6e6e6;
    }
    .invenge .contener .resmed .sup{
        background: #e6e6e6;
    }
    .invenge .contener .resmed .barra .celda{
        display: inline-block;
        text-align: center;
        padding: 4px;
        vertical-align: middle;
        color: #333;
    }
    .invenge .contener .resmed .barra .celda label{
        width: 100%;
        display: inline-block;
        text-align: left;
        color: #333;
        vertical-align: middle;
    }
    .invenge .contener .resmed .barra .celda label.llen{
        font-size: 16px;
    }
    .invenge .contener .resmed .barra .celda label.subb{
        font-size: 12px;
    }
    .invenge .contener .resmed .barra .medi{
        width: 10%;
        font-size: 14px;
    }
    .invenge .contener .resmed .barra .min{
        width: 7%;
        font-size: 14px;
    }
    .invenge .contener .resmed .barra .cont{
        text-align: left;
    }
    .invenge .contener .resmed .barra .lat{
        border-right: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }
    .invenge .contener .resmed .barra .gran{
        width: 80%;
        text-align: left;
    }
    .invenge .contener .resmed .medice {
        width: 100%;
        display: block;
        text-align: center;
        overflow-y: scroll;
        height: 60vh;
    }
    .invenge .contener .resmed .medice::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .invenge .contener .resmed .medice::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .invenge .contener .resmed .medice::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
}

/* ventana lista medicamentos por guia */
@media screen and (min-width: 800px) {
    .window-notice .medicalis {
        width: 40%;
        display: flex;
        box-shadow: 0 1px 3px rgba(33, 41, 52, .75);
        box-sizing: content-box;
        flex-direction: column;
        margin: auto;
        overflow: hidden;
        position: relative;
        font-size: 1.3rem;
        border-radius: 10px;
        background: #fff;
    }
    .window-notice .medicalis .desl{
        overflow-y: scroll;
        max-height: 70vh;
    }
    .window-notice .medicalis .lismed{
        width: 100%;
        display: block;
        background: #fff;
        padding: 10px 5px;
        text-align: center;
    }
    .window-notice .medicalis .desl::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .window-notice .medicalis .desl::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .window-notice .medicalis .desl::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }



    .window-notice .medicalis .reslis{
        overflow-y: scroll;
        height: 50vh;
        margin-bottom: 10px;
    }
    .window-notice .medicalis .reslis::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .window-notice .medicalis .reslis::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .window-notice .medicalis .reslis::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }


    .window-notice .medicalis .lismed .caja{
        width: 98%;
        display: inline-block;
        text-align: center;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 14px;
        vertical-align: middle;
        margin-bottom: 10px;
    }
    .window-notice .medicalis .lismed .caja .celda{
        display: inline-block;
        vertical-align: middle;
    }
    .window-notice .medicalis .lismed .caja .gran{
        width: 60%;
    }
    .window-notice .medicalis .lismed .caja .min{
        width: 18%;
    }
    .window-notice .medicalis .lismed .caja .celda label{
        width: 100%;
        display: block;
        text-align: left;
    }
    .window-notice .medicalis .lismed .caja .celda label.sub{
        font-size: 12px;
        color: #555;
    }
    .window-notice .medicalis .lismed .caja .celda label.llen{
        font-size: 14px;
    }

    .window-notice .medicalis .lismed .campo {
        display: inline-block;
        text-align: center;
        margin-bottom: 10px;
    }
    .window-notice .medicalis .lismed .compl {
        width: 98%;
    }
    .window-notice .medicalis .lismed .medl {
        width: 48.5%;
    }
    .window-notice .medicalis .lismed .campo label {
        width: 100%;
        display: inline-block;
        text-align: left;
        color: #555;
        font-size: 12px;
    }
    .window-notice .medicalis .lismed .campo select,
    .window-notice .medicalis .lismed .campo input {
        width: 100%;
        display: inline-block;
        text-align: left;
        color: #000;
        font-size: 14px;
        padding: 5px 3px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .window-notice .medicalis .lismed .campo textarea {
        width: 100%;
        display: inline-block;
        text-align: left;
        color: #000;
        font-size: 14px;
        padding: 5px 3px;
        border: 1px solid #ccc;
        border-radius: 4px;
        height: 50px;
    }

    .window-notice .medicalis .lismed button {
        width: 98%;
        display: inline-block;
        text-align: center;
        color: #fff;
        padding: 5px;
        border: none;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        margin-bottom: 10px;
        background: red;
        cursor: pointer;
        transition: 400ms;
    }
    .window-notice .medicalis .lismed button:hover {
        background: rgb(155, 0, 0);
        transition: 400ms;
    }


    .window-notice .medicalis .totalcan{
        width: 100%;
        display: inline-block;
        padding: 5px 5px;
        text-align: center;
        border: 1px solid #ccc;
        font-size: 14px;
        color: #333;
    }
    .window-notice .medicalis .totalcan label.enun{
        width: 70%;
        display: inline-block;
        text-align: left;
    }
    .window-notice .medicalis .totalcan label.nume{
        width: 28%;
        display: inline-block;
        text-align: right;
    }
}

/* ventana añadir medicamento */
@media screen and (min-width: 800px) {
    .window-notice .medicad {
        width: 30%;
        display: flex;
        box-shadow: 0 1px 3px rgba(33, 41, 52, .75);
        box-sizing: content-box;
        flex-direction: column;
        margin: auto;
        overflow: hidden;
        position: relative;
        font-size: 1.3rem;
        border-radius: 10px;
        background: #fff;
    }
    .window-notice .desl{
        overflow-y: scroll;
        max-height: 90vh;
    }
    .window-notice .desl::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .window-notice .desl::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .window-notice .desl::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
    .window-notice .panel{
        width: 100%;
        display: block;
        text-align: center;
        padding: 10px;
    }
    .window-notice .panel .divis {
        width: 49%;
        display: inline-block;
        vertical-align: top;
    }

    .window-notice .panel .campo{
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 5px;
    }
    .window-notice .panel .compl{
        width: 98%;
    }
    .window-notice .panel .medio{
        width: 49%;
    }
    .window-notice .panel .campo label{
        width: 100%;
        display: inline-block;
        text-align: left;
        color: #555;
        font-size: 12px;
    }
    
    .window-notice .panel .campo textarea{
        width: 100%;
        display: inline-block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 3px;
        border: 1px solid #ccc;
        border-radius: 4px;
        height: 80px;
    }
    .window-notice .panel .campo select{
        width: 100%;
        display: inline-block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 3px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .window-notice .panel .campo select.divla{
        width: 20%;
        text-align: center;
    }
    .window-notice .panel .campo input.divla{
        width: 20%;
        text-align: right;
    }
    .window-notice .panel .campo label.divla{
        width: 78%;
        font-size: 14px;
    }
    .window-notice .panel .marc{
        padding: 10px 0px;
    }
    .window-notice .panel .campo input{
        width: 100%;
        display: inline-block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 3px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .window-notice .panel .campo input.divi{
        width: 85%;
    }
    
    .window-notice .panel .campo a.busq{
        width: 13%;
        display: inline-block;
        text-align: center;
        padding: 2px;
        border-radius: 4px;
        background: red;
        vertical-align: middle;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
    }
    .window-notice .panel .campo a.busq img{
        width: 15px;
        height: 15px;
        display: inline-block;
        vertical-align: middle;
    }
    .window-notice .panel .lisresmed {
        width: 100%;
        display: block;
        text-align: center;
        height: 70vh;
        overflow-y: scroll;
    }
    .window-notice .panel .lisresmed::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .window-notice .panel .lisresmed::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .window-notice .panel .lisresmed::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
    .window-notice .panel .lisresmed a {
        width: 98%;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 5px;
        transition: 400ms;
        margin-bottom: 5px;
    }
    .window-notice .panel .lisresmed a:hover {
        background: #e6e6e6;
        transition: 400ms;
    }
    .window-notice .panel .lisresmed a label{
        width: 100%;
        display: block;
        text-align: left;
        cursor: pointer;
    }
    .window-notice .panel .lisresmed a label.subt{
        font-size: 12px;
        color: #555;
        cursor: pointer;
    }
    .window-notice .panel .lisresmed a label.enuc{
        font-size: 16px;
        color: #333;
        margin-bottom: 3px;
        cursor: pointer;
    }
    .window-notice .panel a.limp,
    .window-notice .panel button{
        width: 70%;
        display: inline-block;
        text-align: center;
        color: #fff;
        padding: 5px;
        border-radius: 4px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border: none;
        cursor: pointer;
        background: red;
        transition: 400ms;
        margin-top: 10px;
        font-size: 14px;
    } 
    .window-notice .panel a.limp:hover,
    .window-notice .panel button:hover{
        background: #333;
        transition: 400ms;
    }

    .window-notice .panel .datareg {
        width: 100%;
        display: block;
        text-align: center;
    }
    .window-notice .panel .datareg .espac{
        display: inline-block;
        text-align: center;
        margin-bottom: 5px;
    }
    .window-notice .panel .datareg .compl{
        width: 100%;
    }
    .window-notice .panel .datareg .medio{
        width: 49%;
    }
    .window-notice .panel .datareg .espac label{
        width: 100%;
        display: inline-block;
        text-align: left;
    }
    .window-notice .panel .datareg .espac label.tit{
        font-size: 12px;
        color: #555;
    }
    .window-notice .panel .datareg .espac label.res{
        font-size: 16px;
        color: #333;
        border-bottom: 1px solid #e6e6e6;
        padding: 0px 5px;
    }
    .window-notice .panel a.rem,
    .window-notice .panel .datareg a.func {
        width: 45%;
        display: inline-block;
        text-align: center;
        padding: 5px;
        border-radius: 5px;
        color: #fff;
        font-size: 14px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        transition: 400ms;
        margin-top: 10px;
    }
    .window-notice .panel a.rem,
    .window-notice .panel .datareg a.quit {
        background: red;
    }
    .window-notice .panel .datareg a.quit:hover {
        background: rgb(155, 0, 0);
        transition: 400ms;
    }
    .window-notice .panel .datareg a.suma {
        background: green;
    }
    .window-notice .panel .datareg a.suma:hover {
        background: rgb(0, 80, 0);
        transition: 400ms;
    }
    .window-notice .panel .datareg .model {
        width: 100%;
        display: block;
        border-radius: 4px;
        border: 1px solid #ccc;
        margin-top: 15px;
        padding: 10px 5px;
        text-align: center;
    }
    .window-notice .panel .datareg .model label {
        width: 100%;
        display: inline-block;
        text-align: center;
        font-size: 12px;
        color: #555;
    }
    .window-notice .panel .datareg .model input {
        width: 40%;
        display: inline-block;
        text-align: right;
        font-size: 16px;
        color: #333;
        padding: 3px 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .window-notice .panel .lispst {
        width: 98%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
    }
    .window-notice .panel .lispst .super {
        width: 100%;
        display: inline-block;
        text-align: center;
        border-bottom: 1px solid #ccc;
        font-size: 16px;
        color: #333;
        padding: 5px 0px;
    }
    .window-notice .panel .lispst .opti{
        width: 100%;
        display: inline-block;
        text-align: center;
        border-bottom: 1px solid #ccc;
        font-size: 16px;
        color: #333;
        padding: 5px 0px;
    }
    .window-notice .panel .lispst .pue{
        background: #e6e6e6;
    }
    .window-notice .panel .lispst .opti input {
        width: 10%;
        padding: 4px 3px;
        display: inline-block;
        text-align: right;
        vertical-align: middle;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .window-notice .panel .lispst .opti input[type="checkbox"]{
        width: 20px;
        height: 20px;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
    }
    .window-notice .panel .lispst .opti label{
        width: 80%;
        height: auto;
        display: inline-block;
        text-align: left;
        font-size: 14px;
        vertical-align: middle;
    }
    .window-notice .panel .lispst .opti label.leni{
        width: 85%;
    }
    .window-notice .panel .lispst .opti label.cani{
        width: 12%;
        text-align: right;
    }
    .window-notice .panel .lispst .opti img{
        width: 20px;
        height: 20px;
        display: inline-block;
        object-fit: cover;
        font-size: 14px;
        vertical-align: middle;
    }
    .window-notice .panel .lispst .avinot {
        width: 100%;
        display: inline-block;
        text-align: center;
        font-size: 14px;
        vertical-align: middle;
        border-bottom: 1px solid #ccc;
        padding: 5px 0px;
        background: #e6e6e6;
    }
    .window-notice .totgen {
        width: 100%;
        display: inline-block;
        text-align: center;
    }
    .window-notice .panel .avisocom {
        width: 100%;
        display: block;
        text-align: center;
        color: #333;
        font-size: 14px;
        margin: 10px 0px;
    }



}

/* ventana flotante */
@media screen and (min-width: 800px) {
    .window-notice .medicasi {
        width: 90%;
        display: flex;
        box-shadow: 0 1px 3px rgba(33, 41, 52, .75);
        box-sizing: content-box;
        flex-direction: column;
        margin: auto;
        overflow: hidden;
        position: relative;
        font-size: 1.3rem;
        border-radius: 10px;
        background: #fff;
    }
}





/* panel para movil */

/*Formulario de inicio sesion*/
@media screen and (max-width: 800px) {
    .inicioS {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url("../sources/fondo-movil.png");
        background-size: cover;
    }
    .inicioS .formul {
        width: 95%;
        display: inline-block;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);
        border: 1px solid #929292;
        border-radius: 40px;
        padding: 30px 20px 30px 20px;
        background-color: rgba(255, 255, 255, 0.486);
        /* background: #fff; */
        backdrop-filter: blur(20px);
        text-align: center;
    }

    .inicioS .formul label.titulo {
        display: inline-block;
        font-size: 50px;
        font-weight: bold;
        color: #fff;
        text-align: left;
    }
    
    .inicioS .formul label.subti {
        display: inline-block;
        font-size: 18px;
        margin-bottom: 30px;
        color: #fff;
        text-align: left;
    }

    .inicioS .formul .linea{
        width: 100%;
        display: inline-block;
        text-align: center;
        padding: 5px 0px;
        margin-bottom: 10px;
    }
    .inicioS .formul .linea label{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 14px;
    }
    .inicioS .formul .linea input{
        width: 100%;
        display: inline-block;
        text-align: left;
        padding: 8px 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 18px;
    }
    .inicioS .formul .linea input:focus{
        outline: none;
        border: 1px solid #555;
    }
    .inicioS .formul button {
        background: #555;
        border: none;
        width: 100%;
        padding: 10px 0px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: 400ms;
        border-radius: 10px;
        font-size: 16px;
        color: #fff;
        cursor: pointer;
        transition: 400ms;
    }

    .inicioS .formul button:hover {
        background: #292929;
        transition: 400ms;
    }
    .inicioS .formul img {
        width: 80%;
        display: inline-block;
        margin-top: 40px;
    }
}

/*Menu cabecera PC*/
@media screen and (max-width: 800px) {
    .menu-flotante {
        background: #fff;
        font-size: 20px;
        text-transform: uppercase;
        font-weight: bold;
        color: #ffffff;
        letter-spacing: 2px;
        padding: 0px 0px;
        position: fixed;
        top: 0px;
        left: 0px;
        transition: all 300ms ease 0ms;
        box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.2);
        z-index: 99;
        width: 100%;
        transition: 400ms;
        display: inline-block;
        border-bottom: 2px solid red;
        vertical-align: middle;
    }

    .menu-flotante:hover {
        box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.4);
        transition: 400ms;
    }

    .menu-flotante .izq {
        width: 30%;
        display: inline-block;
        vertical-align: middle;
    }

    
    .menu-flotante .izq a {
        width: 100%;
        display: inline-block;
        text-align: center;
        margin: 0px;
        vertical-align: middle;
        padding: 15px 5px;
    }
    
    .menu-flotante .izq label {
        display: inline-block;
        font-size: 18px;
        vertical-align: middle;
        color: #000;
    }

    .menu-flotante .izq a img {
        width: 20px;
        max-height: 20px;
        object-fit: cover;
        vertical-align: middle;
        cursor: pointer;
        margin: 0px;
    }


    .menu-flotante .der {
        width: 65%;
        display: inline-block;
        text-align: right;
        padding: 0px;
        margin: 0px;
    }

    .menu-flotante .der a {
        width: 18%;
        display: inline-block;
        text-align: center;
        margin: 0px;
        vertical-align: middle;
        padding: 15px 5px;
        transition: 400ms;
    }
    .menu-flotante .der a:hover {
        background: #e6e6e6;
        transition: 400ms;
    }

    .menu-flotante .der a img {
        max-width: 30px;
        height: 22px;
        object-fit: cover;
        vertical-align: middle;
        cursor: pointer;
        margin: 0px;
    }

    .menu-flotante .der label {
        color: #5678EF;
        vertical-align: middle;
        cursor: pointer;
    }

    .menuDes {
        font-size: 20px;
        font-weight: bold;
        color: #ffffff;
        border-radius: 0px 0px 5px 5px;
        letter-spacing: 2px;
        background-color: #fff;
        position: fixed;
        box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
        z-index: 99;
        width: 90%;
        left: 0px;
    }

    .menuDes {
        height: 90vh;
        top: 0px;
    }

    .menuDes .barra {
        width: 100%;
        display: block;
        padding: 5px 15px;
        border-bottom: 1px solid #ccc;
    }


    .menuDes a {
        color: #333;
        width: 100%;
        display: block;
    }

    .menuDes img {
        vertical-align: middle;
        max-width: 25px;
        max-height: 25px;
    }

    .menuDes label {
        vertical-align: middle;
        cursor: pointer;
    }

    .menuDes2 {
        font-size: 20px;
        font-weight: bold;
        color: #ffffff;
        letter-spacing: 2px;
        background-color: #fff;
        position: fixed;
        box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
        z-index: 99;
        width: 90%;
        left: 0px;
        height: 10vh;
        bottom: 0px;
        padding: 0px 0px;
    }

    .menuDes2 a {
        width: 100%;
        display: inline-block;
        text-align: center;
        align-items: center;
        vertical-align: middle;
        background: #fff;
        display: flex;
        height: 100%;
        transition: 400ms;
        cursor: pointer;
        border-top: 2px solid red;
        padding: 0px 10px;
        margin: 0px;
    }
    
    .menuDes2 a:hover {
        background: #ccc;
        transition: 400ms;
    }

    .menuDes2 a label {
        width: 90%;
        display: inline-block;
        color: #000;
        font-size: 18px;
        padding: 0px 10px;
        vertical-align: middle;
        text-align: right;
    }
    .menuDes2 a img {
        display: inline-block;
        max-width: 30px;
        max-height: 30px;
        border-radius: 4px;
        vertical-align: middle;
        object-fit: cover;
    }
    .interno {
        padding: 80px 10px 20px 10px;
        display: block;
        width: 100%;
        text-align: center
    }
}

/* panel de home */
@media screen and (max-width: 800px) {
    .home {
        width: 100%;
        display: block;
        text-align: center;
    }
    .home .bienve{
        width: 100%;
        padding: 0px 1%;
        display: block;
        text-align: left;
        font-size: 16px;
        color: #333;
        margin-bottom: 15px;
    }
    .home .ficha{
        width: 45%;
        display: inline-block;
        text-align: center;
        background: red;
        border-radius: 10px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        padding: 10px 5px;
        transition: 400ms;
        margin: 0px 2% 20px 2%;
    }
    .home .ficha:hover{
        background: rgb(206, 0, 0);
        transition: 400ms;
    }
    .home .ficha img{
        max-width: 90%;
        display: inline-block;
        height: 120px;
        object-fit: cover;
    }
    .home .ficha label{
        width: 100%;
        display: inline-block;
        text-align: center;
        color: #fff;
        font-weight: bold;
    }
}

/* panel de cargos */
@media screen and (max-width: 800px) {
    .cargos {
        width: 100%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .cargos .caja{
        width: 100%;
        display: inline-block;
        text-align: left;
        vertical-align: bottom;
        margin-bottom: 10px;
    }
    .cargos .caja .campo{
        width: 100%;
        display: inline-block;
        text-align: left;
    }
    .cargos .caja .campo label{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 12px;
    }
    .cargos .caja .campo input{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 3px 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .cargos .caja a {
        width: 40%;
        display: inline-block;
        text-align: center;
        color: #fff;
        background: red;
        padding: 5px 0px;
        border-radius: 5px;
        font-size: 14px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        margin-top: 10px;
    }
    .cargos .lista {
        width: 100%;
        display: block;
        border: 1px solid #ccc;
        text-align: center;
    }
    .cargos .lista a{
        color: #333;
    }
    
    .cargos .lista .sup{
        background: #e6e6e6;
    }
    .cargos .lista .barra{
        width: 100%;
        display: block;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        transition: 400ms;
    }
    .cargos .lista .baj:hover{
        background: #e6e6e6;
        transition: 400ms;
    }
    .cargos .lista .barra .celda{
        display: inline-block;
        padding: 5px 3px;
    }
    .cargos .lista .barra .lat{
        border-left: 1px solid #ccc;
    }
    .cargos .lista .barra .min{
        width: 10%;
    }
    .cargos .lista .barra .medio{
        width: 75%;
        text-align: left;
    }
    .cargos .lista .result{
        height: 65vh;
        overflow-y: scroll;
    }
    .cargos .lista .result::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .cargos .lista .result::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .cargos .lista .result::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
}

/* ventana de añadir cargos */
@media screen and (max-width: 800px) {
    .window-notice .media {
        box-shadow: 0 1px 3px rgba(33, 41, 52, .75);
        box-sizing: content-box;
        display: flex;
        flex-direction: column;
        margin: auto;
        width: 98%;
        overflow: hidden;
        position: relative;
        font-size: 1.3rem;
        border-radius: 10px;
        background: #fff;
    }
    .window-notice .media .desl{
        overflow-y: scroll;
        max-height: 90vh;
    }
    .window-notice .media .desl::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .window-notice .media .desl::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .window-notice .media .desl::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
    .window-notice .media .formu{
        width: 100%;
        display: block;
        text-align: center;
        padding: 10px;
        max-height: 80vh;
        overflow-y: scroll;
    }
    .window-notice .panel .formu::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .window-notice .panel .formu::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .window-notice .panel .formu::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
    .window-notice .media .formu .avisar{
        width: 100%;
        display: block;
        text-align: center;
        font-size: 16px;
        color: #333;
        padding: 10px;
    }
    .window-notice .media .formu .notas{
        width: 100%;
        display: block;
        text-align: left;
        font-size: 16px;
        color: #333;
    }
    .window-notice .media .formu .aviso{
        width: 100%;
        display: block;
        text-align: center;
        font-size: 16px;
        color: #333;
        margin-bottom: 15px;
    }
    .window-notice .media .formu .campo{
        display: inline-block;
        margin-bottom: 15px;
    }
    .window-notice .media .formu .compl{
        width: 100%;
    }
    .window-notice .media .formu .campo label{
        width: 100%;
        display: block;
        text-align: left;
        color: #555;
        font-size: 12px;
    }
    .window-notice .media .formu .campo select,
    .window-notice .media .formu .campo input{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 3px 5px;
        border-radius: 4px;
        border: 1px solid #ccc;
    }
    .window-notice .media .formu .campo textarea{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 5px;
        border-radius: 4px;
        border: 1px solid #555;
        height: 20vh;
    }

    .window-notice .media .formu .permiso{
        display: inline-block;
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
        transition: 400ms;
        padding: 5px 0px;
    }
    .window-notice .media .formu .permiso:hover{
        background: #e6e6e6;
        transition: 400ms;
    }
    .window-notice .media .formu .permiso label{
        width: 80%;
        display: inline-block;
        text-align: left;
        color: #555;
        font-size: 14px;
    }
    .window-notice .media .formu .permiso select{
        width: 18%;
        display: inline-block;
        text-align: left;
        color: #333;
        font-size: 14px;
        padding: 3px 5px;
        border-radius: 4px;
        border: 1px solid #ccc;
    }

    .window-notice .media .formu a.cambven{
        width: 60%;
        display: inline-block;
        text-align: center;
        color: #fff;
        padding: 5px;
        border-radius: 4px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border: none;
        cursor: pointer;
        background: #555;
        transition: 400ms;
        margin-top: 10px;
        font-size: 14px;
    } 
    .window-notice .media .formu .rechaz {
        width: 100%;
        display: block;
        text-align: center;
        background: red;
        color: #fff;
        padding: 5px;
        font-size: 14px;
    }
    .window-notice .media .formu a,
    .window-notice .media .formu button{
        width: 49%;
        display: inline-block;
        text-align: center;
        color: #fff;
        padding: 5px;
        border-radius: 4px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border: none;
        cursor: pointer;
        background: red;
        transition: 400ms;
        font-size: 16px;
        margin-bottom: 5px;
    } 
    .window-notice .media .formu button:hover{
        background: #333;
        transition: 400ms;
    }
    
    .window-notice .media .formu .titular {
        width: 100%;
        display: block;
        text-align: center;
        margin: 20px 0px 10px 0px;
    }
    .window-notice .media .formu .listado {
        width: 100%;
        display: block;
        text-align: center;
        border: 1px solid #ccc;
    }
    .window-notice .media .formu .listado .barra{
        width: 100%;
        display: block;
        text-align: center;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
    }
    .window-notice .media .formu .listado .sup{
        background: #e6e6e6;
    }
    .window-notice .media .formu .listado .celda{
        display: inline-block;
        padding: 4px 3px;
    }
    .window-notice .media .formu .listado .gra{
        width: 60%;
        text-align: left;
    }
    .window-notice .media .formu .listado .med{
        width: 38%;
        text-align: right;
    }
    .window-notice .media .formu .listado .resul{
        height: 60vh;
        overflow-y: scroll;
    }
    .window-notice .media .formu .listado .resul::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .window-notice .media .formu .listado .resul::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .window-notice .media .formu .listado .resul::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
    .window-notice .media .formu .radio-group {
        width: 100%;
        display: inline-block;
        text-align: left;
    }
    .window-notice .media .formu .radio-item {
        width: 30%;
        display: inline-block;
    }
    .window-notice .media .formu .radio-item input[type="radio"]{
        width: 10%;
        height: auto;
        display: inline-block;
        -ms-transform: scale(1.5);     /* IE 9 */
        -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
        transform: scale(1.5); 
    }
    .window-notice .media .formu .radio-item label {
        width: 80%;
        display: inline-block;
        text-align: left;
        font-size: 14px;
        color: #555;
    }
}

/* panel de usuarios */
@media screen and (max-width: 800px) {
    .usuarios {
        width: 100%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .usuarios .caja{
        width: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: bottom;
        margin-bottom: 10px;
    }
    .usuarios .caja .campo{
        width: 60%;
        display: inline-block;
        text-align: left;
    }
    .usuarios .caja .campo label{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 12px;
    }
    .usuarios .caja .campo input{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 3px 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .usuarios .caja a {
        width: 35%;
        display: inline-block;
        text-align: center;
        color: #fff;
        background: red;
        padding: 5px 0px;
        border-radius: 5px;
        font-size: 12px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
    }
    .usuarios .lista {
        width: 100%;
        display: block;
        border: 1px solid #ccc;
        text-align: center;
    }
    .usuarios .lista a{
        color: #333;
    }
    
    .usuarios .lista .sup{
        background: #e6e6e6;
    }
    .usuarios .lista .barra{
        width: 100%;
        display: block;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        transition: 400ms;
    }
    .usuarios .lista .baj:hover{
        background: #e6e6e6;
        transition: 400ms;
    }
    .usuarios .lista .barra .celda{
        display: inline-block;
        padding: 5px 3px;
    }
    .usuarios .lista .barra .lat{
        border-left: 1px solid #ccc;
    }
    .usuarios .lista .barra .min{
        width: 15%;
    }
    .usuarios .lista .barra .med{
        width: 40%;
        text-align: left;
    }
    .usuarios .lista .barra .peq{
        width: 12%;
        text-align: left;
    }
    .usuarios .lista .result{
        height: 65vh;
        overflow-y: scroll;
    }
    .usuarios .lista .result::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .usuarios .lista .result::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .usuarios .lista .result::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
}

/* panel de localidades */
@media screen and (max-width: 800px) {
    .localidades {
        width: 100%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .localidades .caja{
        width: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: bottom;
        margin-bottom: 10px;
    }
    .localidades .caja .campo{
        width: 100%;
        display: inline-block;
        text-align: left;
        margin-bottom: 10px;
    }
    .localidades .caja .campo label{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 12px;
    }
    .localidades .caja .campo label.titulo{
        font-size: 16px;
        text-align: center;
    }
    .localidades .caja .campo input{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 3px 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .localidades .caja a {
        width: 45%;
        display: inline-block;
        text-align: center;
        color: #fff;
        background: red;
        padding: 5px 0px;
        border-radius: 5px;
        font-size: 14px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
    }
    .localidades .lista {
        width: 100%;
        display: block;
        border: 1px solid #ccc;
        text-align: center;
    }
    .localidades .lista a{
        color: #333;
    }
    
    .localidades .lista .sup{
        background: #e6e6e6;
    }
    .localidades .lista .barra{
        width: 100%;
        display: block;
        border-bottom: 1px solid #ccc;
        font-size: 12px;
        transition: 400ms;
    }
    .localidades .lista .baj:hover{
        background: #e6e6e6;
        transition: 400ms;
    }
    .localidades .lista .barra .celda{
        display: inline-block;
        padding: 5px 3px;
    }
    .localidades .lista .barra .lat{
        border-left: 1px solid #ccc;
    }
    .localidades .lista .barra .min{
        width: 18%;
        text-align: left;
    }
    .localidades .lista .barra .medio{
        width: 43%;
        text-align: left;
    }
    .localidades .lista .barra .grand{
        width: 80%;
        text-align: left;
    }
    .localidades .lista .barra .peq{
        width: 12%;
        text-align: left;
    }
    .localidades .lista .result{
        height: 65vh;
        overflow-y: scroll;
    }
    .localidades .lista .result::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .localidades .lista .result::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .localidades .lista .result::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
}

/* panel de centros */
@media screen and (max-width: 800px) {
    .centros {
        width: 100%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .centros .caja{
        width: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: bottom;
        margin-bottom: 10px;
    }
    .centros .caja .campo{
        width: 100%;
        display: inline-block;
        text-align: left;
    }
    .centros .caja .campo label{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 12px;
    }
    .centros .caja .campo input{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 3px 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .centros .caja a {
        width: 49%;
        display: inline-block;
        text-align: center;
        color: #fff;
        background: red;
        padding: 5px 0px;
        border-radius: 5px;
        font-size: 14px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        margin-top: 10px;
    }
    .centros .lista {
        width: 100%;
        display: block;
        border: 1px solid #ccc;
        text-align: center;
    }
    .centros .lista a{
        color: #333;
    }
    
    .centros .lista .sup{
        background: #e6e6e6;
    }
    .centros .lista .barra{
        width: 100%;
        display: block;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        transition: 400ms;
    }
    .centros .lista .baj:hover{
        background: #e6e6e6;
        transition: 400ms;
    }
    .centros .lista .barra .celda{
        display: inline-block;
        padding: 5px 3px;
    }
    .centros .lista .barra .lat{
        border-left: 1px solid #ccc;
    }
    .centros .lista .barra .min{
        width: 10%;
    }
    .centros .lista .barra .medio{
        width: 43%;
        text-align: left;
    }
    .centros .lista .barra .peq{
        width: 12%;
        text-align: left;
    }
    .centros .lista .result{
        height: 65vh;
        overflow-y: scroll;
    }
    .centros .lista .result::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .centros .lista .result::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .centros .lista .result::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
}

/*Formulario de encuesta registro PC*/
@media screen and (max-width: 800px) {
    .registro {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url("../sources/fondo-sesion.png");
        background-size: cover;
    }
    .registro .encuest {
        width: 95%;
        display: inline-block;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);
        padding: 20px 20px 20px 20px;
        /* background-color: rgba(255, 255, 255, 0.486); */
        background: #fff;
        backdrop-filter: blur(20px);
        text-align: center;
        overflow-y: scroll;
        max-height: 90vh;
    }
    .registro .encuest::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
        border-radius: 10px; /* Bordes redondeados del deslizador */
    }

    .registro .encuest::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 10px; /* Bordes redondeados del deslizador */
    }

    .registro .encuest::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }

    .registro .encuest label.titulo {
        display: inline-block;
        font-size: 50px;
        font-weight: bold;
        color: red;
        text-align: left;
    }
    
    .registro .encuest label.subti {
        width: 100%;
        display: inline-block;
        font-size: 18px;
        margin: 10px 0px;
        padding-top: 10px;
        border-top: 2px solid red;
        color: #333;
        text-align: center;
    }

    .registro .encuest .linea{
        width: 100%;
        display: inline-block;
        text-align: center;
        padding: 5px 0px;
        margin-bottom: 10px;
    }
    .registro .encuest .linea label{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 14px;
    }
    .registro .encuest .linea select,
    .registro .encuest .linea input{
        width: 100%;
        display: inline-block;
        text-align: left;
        padding: 5px 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
    }
    .registro .encuest .linea input:focus{
        outline: none;
        border: 1px solid #555;
    }
    .registro .encuest a,
    .registro .encuest button {
        width: 80%;
        display: inline-block;
        background: #555;
        border: none;
        width: 100%;
        padding: 5px 0px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: 400ms;
        border-radius: 5px;
        font-size: 16px;
        color: #fff;
        cursor: pointer;
        transition: 400ms;
    }

    .registro .encuest button:hover {
        background: #292929;
        transition: 400ms;
    }
    .registro .encuest img {
        width: 80%;
        display: inline-block;
    }
}

/* panel de instituciones */
@media screen and (max-width: 800px) {
    .institucion {
        width: 100%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .institucion .caja{
        width: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: bottom;
        margin-bottom: 10px;
    }
    .institucion .caja .campo{
        width: 60%;
        display: inline-block;
        text-align: left;
    }
    .institucion .caja .campo label{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 12px;
    }
    .institucion .caja .campo input{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 3px 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .institucion .caja button,
    .institucion .caja a {
        width: 35%;
        display: inline-block;
        text-align: center;
        color: #fff;
        background: red;
        padding: 5px 0px;
        border-radius: 5px;
        font-size: 12px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border: none;
        cursor: pointer;
    }
    .institucion .lista {
        width: 100%;
        display: block;
        border: 1px solid #ccc;
        text-align: center;
    }
    .institucion .lista a{
        color: #333;
    }
    
    .institucion .lista .sup{
        background: #e6e6e6;
    }
    .institucion .lista .barra{
        width: 100%;
        display: block;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        transition: 400ms;
    }
    .institucion .lista .baj:hover{
        background: #e6e6e6;
        transition: 400ms;
    }
    .institucion .lista .barra .celda{
        display: inline-block;
        padding: 5px 3px;
    }
    .institucion .lista .barra .lat{
        border-left: 1px solid #ccc;
    }
    .institucion .lista .barra .min{
        width: 15%;
    }
    .institucion .lista .barra .med{
        width: 40%;
        text-align: left;
    }
    .institucion .lista .barra .grand{
        width: 80%;
        text-align: left;
    }
    .institucion .lista .barra .peq{
        width: 12%;
        text-align: left;
    }
    .institucion .lista .result{
        height: 65vh;
        overflow-y: scroll;
    }
    .institucion .lista .result::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .institucion .lista .result::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .institucion .lista .result::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
}

/* panel de asics */
@media screen and (max-width: 800px) {
    .asics {
        width: 100%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .asics .caja{
        width: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: bottom;
        margin-bottom: 10px;
    }
    .asics .caja .campo{
        width: 60%;
        display: inline-block;
        text-align: left;
    }
    .asics .caja .campo label{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 12px;
    }
    .asics .caja .campo input{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 3px 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .asics .caja a {
        width: 35%;
        display: inline-block;
        text-align: center;
        color: #fff;
        background: red;
        padding: 5px 0px;
        border-radius: 5px;
        font-size: 12px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
    }
    .asics .lista {
        width: 100%;
        display: block;
        border: 1px solid #ccc;
        text-align: center;
    }
    .asics .lista a{
        color: #333;
    }
    
    .asics .lista .sup{
        background: #e6e6e6;
    }
    .asics .lista .barra{
        width: 100%;
        display: block;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        transition: 400ms;
    }
    .asics .lista .baj:hover{
        background: #e6e6e6;
        transition: 400ms;
    }
    .asics .lista .barra .celda{
        display: inline-block;
        padding: 5px 3px;
    }
    .asics .lista .barra .lat{
        border-left: 1px solid #ccc;
    }
    .asics .lista .barra .min{
        width: 15%;
    }
    .asics .lista .barra .med{
        width: 40%;
        text-align: left;
    }
    .asics .lista .barra .peq{
        width: 12%;
        text-align: left;
    }
    .asics .lista .result{
        height: 65vh;
        overflow-y: scroll;
    }
    .asics .lista .result::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .asics .lista .result::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .asics .lista .result::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
}

/* Puesto de salud individual */
@media screen and (max-width: 800px) {
    .puestos {
        width: 100%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .puestos .caja{
        width: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: bottom;
        margin-bottom: 10px;
    }
    .puestos .caja .campo{
        display: inline-block;
        margin-bottom: 10px;
    }
    .puestos .caja .compl{
        width: 100%;
    }
    .puestos .caja .cuar{
        width: 100%;
    }
    .puestos .caja .tria{
        width: 100%;
    }
    .puestos .caja .campo label{
        width: 100%;
        display: block;
        text-align: left;
        font-size: 12px;
        color: #555;
        margin-bottom: 2px;
    }
    .puestos .caja .campo select,
    .puestos .caja .campo input{
        width: 100%;
        display: block;
        text-align: left;
        font-size: 16px;
        color: #333;
        padding: 3px 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .puestos .inforact {
        width: 100%;
        display: block;
        text-align: left;
        font-size: 12px;
    }
    .puestos .inventario {
        width: 100%;
        display: block;
        text-align: left;
    }
    .puestos .inventario .funciones{
        width: 100%;
        display: block;
        text-align: right;
    }
    .puestos .inventario .funciones a {
        width: 40%;
        display: inline-block;
        border-radius: 5px;
        background: red;
        padding: 5px;
        color: #fff;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        font-size: 16px;
        border: none;
        cursor: pointer;
        transition: 400ms;
        text-align: center;
    }
    .puestos .inventario .titular{
        width: 100%;
        display: block;
        text-align: left;
        font-size: 16px;
        color: #333;
        border-bottom: 2px solid red;
        font-weight: bold;
        padding: 3px 5px;
        margin-bottom: 10px;
    }
    .puestos .inventario .campo {
        width: 100%;
        display: inline-block;
        text-align: left;
        vertical-align: middle;
        margin-bottom: 15px;
        transition: 400ms;
        padding: 3px 0px;
    }
    .puestos .inventario .campo:hover {
        background: #e6e6e6;
        transition: 400ms;
    }
    .puestos .inventario .campo label{
        width: 80%;
        display: inline-block;
        font-size: 14px;
        color: #333;
        text-align: left;
    }
    .puestos .inventario .campo select,
    .puestos .inventario .campo input{
        width: 18%;
        display: inline-block;
        font-size: 14px;
        color: #333;
        text-align: left;
        padding: 3px;
        border: 1px solid #ccc;
        border-radius: 4px;
        text-align: right;
    }
    .puestos .inventario button {
        width: 100%;
        display: block;
        border-radius: 5px;
        background: red;
        padding: 5px;
        color: #fff;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        font-size: 16px;
        border: none;
        cursor: pointer;
        transition: 400ms;
    }
    .puestos .inventario button:hover {
        background: rgb(168, 0, 0);
        transition: 400ms;
    }

}

/* Registros de imagenologia */
@media screen and (max-width: 800px) {
    .imagenol {
        width: 100%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .imagenol .caja{
        width: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: bottom;
        margin-bottom: 10px;
    }
    .imagenol .caja .campo{
        display: inline-block;
        margin-bottom: 10px;
    }
    .imagenol .caja .compl{
        width: 98%;
    }
    .imagenol .caja .cuar{
        width: 98%;
    }
    .imagenol .caja .tria{
        width: 98%;
    }
    .imagenol .caja .campo label{
        width: 100%;
        display: block;
        text-align: left;
        font-size: 12px;
        color: #555;
        margin-bottom: 2px;
    }
    .imagenol .caja .campo select,
    .imagenol .caja .campo input{
        width: 100%;
        display: block;
        text-align: left;
        font-size: 16px;
        color: #333;
        padding: 3px 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .imagenol .inforact {
        width: 100%;
        display: block;
        text-align: left;
        font-size: 12px;
    }
    .imagenol .inventario {
        width: 100%;
        display: block;
        text-align: left;
    }
    .imagenol .inventario .funciones{
        width: 100%;
        display: block;
        text-align: right;
    }
    .imagenol .inventario .funciones a {
        width: 20%;
        display: inline-block;
        border-radius: 5px;
        background: red;
        padding: 5px;
        color: #fff;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        font-size: 16px;
        border: none;
        cursor: pointer;
        transition: 400ms;
        text-align: center;
    }
    .imagenol .inventario .titular{
        width: 100%;
        display: block;
        text-align: left;
        font-size: 16px;
        color: #333;
        border-bottom: 2px solid red;
        font-weight: bold;
        padding: 3px 5px;
        margin-bottom: 10px;
    }
    .imagenol .inventario .campo {
        width: 100%;
        display: inline-block;
        text-align: left;
        vertical-align: middle;
        margin-bottom: 15px;
        transition: 400ms;
        padding: 3px 0px;
        border-bottom: 1px solid #e6e6e6;
    }
    .imagenol .inventario .campo:hover {
        background: #e6e6e6;
        transition: 400ms;
    }
    .imagenol .inventario .celda {
        width: 100%;
        display: inline-block;
        margin-bottom: 5px;
    }
    .imagenol .inventario .campo label{
        width: 80%;
        display: inline-block;
        font-size: 14px;
        color: #333;
        text-align: left;
    }
    .imagenol .inventario .campo input{
        width: 18%;
        display: inline-block;
        font-size: 14px;
        color: #333;
        padding: 3px;
        border: 1px solid #ccc;
        border-radius: 4px;
        text-align: right;
    }
    .imagenol .inventario .campo select{
        width: 18%;
        display: inline-block;
        font-size: 14px;
        color: #333;
        text-align: center;
        padding: 3px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .imagenol .inventario button {
        width: 100%;
        display: block;
        border-radius: 5px;
        background: red;
        padding: 5px;
        color: #fff;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        font-size: 16px;
        border: none;
        cursor: pointer;
        transition: 400ms;
    }
    .imagenol .inventario button:hover {
        background: rgb(168, 0, 0);
        transition: 400ms;
    }

}

/* panel de centros medicos */
@media screen and (max-width: 800px) {
    .comunicas {
        width: 100%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .comunicas .superior {
        width: 100%;
        text-align: left;
        color: #333;
        font-size: 18px;
        display: block;
    }
    .comunicas .listado {
        width: 100%;
        text-align: left;
        display: block;
        height: 75vh;
        overflow-y: scroll;
        padding: 10px 5px;
    }
    .comunicas .listado::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .comunicas .listado::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .comunicas .listado::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
    .comunicas .listado .infor{
        width: 100%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-bottom: 15px;
        padding: 5px;
        vertical-align: middle;
    }
    .comunicas .listado .infor .celda{
        display: inline-block;
        vertical-align: middle;
    }
    .comunicas .listado .infor .gran{
        width: 100%;
        margin-bottom: 10px
    }
    .comunicas .listado .infor .baj{
        width: 100%;
        font-size: 14px;
        color: #333;
        text-align: center;
        vertical-align: middle;
        margin-bottom: 10px
    }
    .comunicas .listado .infor .celda label.subt{
        width: 100%;
        display: inline-block;
        text-align: left;
        font-size: 12px;
        color: #555;
        vertical-align: middle;
    }
    .comunicas .listado .infor .celda label.nomb{
        width: 100%;
        display: inline-block;
        text-align: left;
        font-size: 16px;
        color: #333;
        vertical-align: middle;
    }
    .comunicas .listado .infor .celda a,
    .comunicas .listado .infor .celda button {
        width: 60%;
        display: inline-block;
        background: #5678EF;
        color: #fff;
        border-radius: 5px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border: none;
        cursor: pointer;
        padding: 5px 0px;
        vertical-align: middle;
    }
}

/*VENTANA EMERGENTE */
@media screen and (max-width: 800px) {
    .window-notice {
        background: rgba(33, 41, 52, .85);
        left: 0;
        bottom: 0;
        right: 0;
        top: 0;
        display: flex;
        position: fixed;
        z-index: 999;
        width: 100%;
    }

    .window-notice .barraCierre {
        width: 100%;
        display: block;
        padding: 5px 0px;
        padding: 10px 10px 10px 0px;
        border-radius: 10px 10px 0px 0px;
        border-bottom: 2px solid red;
    }

    .window-notice .barraCierre label {
        width: 88%;
        display: inline-block;
        color: #333;
        font-weight: bold;
        font-size: 16px;
        letter-spacing: 0.5px;
        text-align: left;
        padding-left: 20px;
    }

    .window-notice .barraCierre a {
        width: 10%;
        display: inline-block;
        color: #333;
        font-weight: bold;
        font-size: 16px;
        letter-spacing: 0.5px;
        text-align: right;
        padding-right: 10px;
    }

    .window-notice .content {
        background: #fff;
        box-shadow: 0 1px 3px rgba(33, 41, 52, .75);
        box-sizing: content-box;
        display: flex;
        flex-direction: column;
        margin: auto;
        width: 40%;
        overflow: hidden;
        position: relative;
        font-size: 1.3rem;
        border-radius: 10px;
    }
}

/* ventana añadir medicamento */
@media screen and (max-width: 800px) {
    .window-notice .medicad {
        width: 98%;
        display: flex;
        box-shadow: 0 1px 3px rgba(33, 41, 52, .75);
        box-sizing: content-box;
        flex-direction: column;
        margin: auto;
        overflow: hidden;
        position: relative;
        font-size: 1.3rem;
        border-radius: 10px;
        background: #fff;
        max-height: 90vh;
    }
    .window-notice .desl{
        overflow-y: scroll;
        max-height: 90vh;
    }
    .window-notice .desl::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .window-notice .desl::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .window-notice .desl::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
    .window-notice .panel{
        width: 100%;
        display: block;
        text-align: center;
        padding: 10px;
    }
    .window-notice .panel .campo{
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 5px;
    }
    .window-notice .panel .compl{
        width: 98%;
    }
    .window-notice .panel .medio{
        width: 49%;
    }
    .window-notice .panel .campo label{
        width: 100%;
        display: inline-block;
        text-align: left;
        color: #555;
        font-size: 12px;
    }
    .window-notice .panel .campo textarea{
        width: 100%;
        display: inline-block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 3px;
        border: 1px solid #ccc;
        border-radius: 4px;
        height: 80px;
    }
    .window-notice .panel .campo select{
        width: 100%;
        display: inline-block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 3px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .window-notice .panel .campo select.divla{
        width: 20%;
        text-align: center;
    }
    .window-notice .panel .campo input.divla{
        width: 20%;
        text-align: right;
    }
    .window-notice .panel .campo label.divla{
        width: 78%;
        font-size: 14px;
    }
    .window-notice .panel .marc{
        padding: 10px 0px;
    }
    .window-notice .panel .campo input{
        display: inline-block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 3px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .window-notice .panel .campo input.divi{
        width: 85%;
    }
    .window-notice .panel .campo input.tota{
        width: 100%;
    }
    .window-notice .panel .campo a.busq{
        width: 13%;
        display: inline-block;
        text-align: center;
        padding: 2px;
        border-radius: 4px;
        background: red;
        vertical-align: middle;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
    }
    .window-notice .panel .campo a.busq img{
        width: 15px;
        height: 15px;
        display: inline-block;
        vertical-align: middle;
    }
    .window-notice .panel .lisresmed {
        width: 100%;
        display: block;
        text-align: center;
        height: 70vh;
        overflow-y: scroll;
    }
    .window-notice .panel .lisresmed::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .window-notice .panel .lisresmed::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .window-notice .panel .lisresmed::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
    .window-notice .panel .lisresmed a {
        width: 98%;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 5px;
        transition: 400ms;
        margin-bottom: 5px;
    }
    .window-notice .panel .lisresmed a:hover {
        background: #e6e6e6;
        transition: 400ms;
    }
    .window-notice .panel .lisresmed a label{
        width: 100%;
        display: block;
        text-align: left;
        cursor: pointer;
    }
    .window-notice .panel .lisresmed a label.subt{
        font-size: 12px;
        color: #555;
        cursor: pointer;
    }
    .window-notice .panel .lisresmed a label.enuc{
        font-size: 16px;
        color: #333;
        margin-bottom: 3px;
        cursor: pointer;
    }
    .window-notice .panel a.limp,
    .window-notice .panel button{
        width: 70%;
        display: inline-block;
        text-align: center;
        color: #fff;
        padding: 5px;
        border-radius: 4px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border: none;
        cursor: pointer;
        background: red;
        transition: 400ms;
        margin-top: 10px;
        font-size: 14px;
    } 
    .window-notice .panel a.limp:hover,
    .window-notice .panel button:hover{
        background: #333;
        transition: 400ms;
    }
    
    .window-notice .panel .datareg {
        width: 100%;
        display: block;
        text-align: center;
    }
    .window-notice .panel .datareg .espac{
        display: inline-block;
        text-align: center;
        margin-bottom: 5px;
    }
    .window-notice .panel .datareg .compl{
        width: 100%;
    }
    .window-notice .panel .datareg .medio{
        width: 49%;
    }
    .window-notice .panel .datareg .espac label{
        width: 100%;
        display: inline-block;
        text-align: left;
    }
    .window-notice .panel .datareg .espac label.tit{
        font-size: 12px;
        color: #555;
    }
    .window-notice .panel .datareg .espac label.res{
        font-size: 16px;
        color: #333;
        border-bottom: 1px solid #e6e6e6;
        padding: 0px 5px;
    }
    .window-notice .panel .datareg a.rem,
    .window-notice .panel .datareg a.func {
        width: 45%;
        display: inline-block;
        text-align: center;
        padding: 5px;
        border-radius: 5px;
        color: #fff;
        font-size: 14px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        transition: 400ms;
        margin-top: 10px;
    }
    .window-notice .panel .datareg a.rem,
    .window-notice .panel .datareg a.quit {
        background: red;
    }
    .window-notice .panel .datareg a.rem:hover,
    .window-notice .panel .datareg a.quit:hover {
        background: rgb(155, 0, 0);
        transition: 400ms;
    }
    .window-notice .panel .datareg a.suma {
        background: green;
    }
    .window-notice .panel .datareg a.suma:hover {
        background: rgb(0, 80, 0);
        transition: 400ms;
    }
    .window-notice .panel .datareg .model {
        width: 100%;
        display: block;
        border-radius: 4px;
        border: 1px solid #ccc;
        margin-top: 15px;
        padding: 10px 5px;
        text-align: center;
    }
    .window-notice .panel .datareg .model label {
        width: 100%;
        display: inline-block;
        text-align: center;
        font-size: 12px;
        color: #555;
    }
    .window-notice .panel .datareg .model input {
        width: 40%;
        display: inline-block;
        text-align: right;
        font-size: 16px;
        color: #333;
        padding: 3px 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .window-notice .panel .lispst {
        width: 98%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
    }
    .window-notice .panel .lispst .super {
        width: 100%;
        display: inline-block;
        text-align: center;
        border-bottom: 1px solid #ccc;
        font-size: 16px;
        color: #333;
        padding: 5px 0px;
    }
    .window-notice .panel .lispst .opti{
        width: 100%;
        display: inline-block;
        text-align: center;
        border-bottom: 1px solid #ccc;
        font-size: 16px;
        color: #333;
        padding: 5px 0px;
    }
    .window-notice .panel .lispst .pue{
        background: #e6e6e6;
    }
    .window-notice .panel .lispst .opti input {
        width: 10%;
        padding: 4px 3px;
        display: inline-block;
        text-align: right;
        vertical-align: middle;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .window-notice .panel .lispst .opti input[type="checkbox"]{
        width: 20px;
        height: 20px;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
    }
    .window-notice .panel .lispst .opti label{
        width: 80%;
        height: auto;
        display: inline-block;
        text-align: left;
        font-size: 14px;
        vertical-align: middle;
    }
    .window-notice .panel .lispst .opti label.leni{
        width: 85%;
    }
    .window-notice .panel .lispst .opti label.cani{
        width: 12%;
        text-align: right;
    }
    .window-notice .panel .lispst .opti img{
        width: 20px;
        height: 20px;
        display: inline-block;
        object-fit: cover;
        font-size: 14px;
        vertical-align: middle;
    }
    .window-notice .panel .lispst .avinot {
        width: 100%;
        display: inline-block;
        text-align: center;
        font-size: 14px;
        vertical-align: middle;
        border-bottom: 1px solid #ccc;
        padding: 5px 0px;
        background: #e6e6e6;
    }
    .window-notice .totgen {
        width: 100%;
        display: inline-block;
        text-align: center;
    }
    .window-notice .panel .avisocom {
        width: 100%;
        display: block;
        text-align: center;
        color: #333;
        font-size: 14px;
        margin: 10px 0px;
    }
}


/* panel de guias y gestion */
@media screen and (max-width: 800px) {
    .ingeguia {
        width: 98%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .ingeguia .caja{
        width: 100%;
        display: inline-block;
        text-align: center;
        vertical-align: bottom;
        margin-bottom: 10px;
    }
    .ingeguia .caja .campo{
        width: 100%;
        display: inline-block;
        text-align: left;
        margin-bottom: 10px;
    }

    .ingeguia .caja .campo label{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 12px;
    }
    .ingeguia .caja .campo select,
    .ingeguia .caja .campo input{
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 16px;
        padding: 3px 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .ingeguia .caja a {
        display: inline-block;
        text-align: center;
        color: #fff;
        background: red;
        padding: 5px 15px;
        border-radius: 5px;
        font-size: 14px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        margin: 10px 0px;
    }
    .ingeguia .lista {
        width: 100%;
        display: block;
        border: 1px solid #ccc;
        text-align: center;
    }
    .ingeguia .lista a{
        color: #333;
    }
    
    .ingeguia .lista .sup{
        background: #e6e6e6;
    }
    .ingeguia .lista .barra{
        width: 100%;
        display: block;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        transition: 400ms;
    }
    .ingeguia .lista .baj:hover{
        background: #e6e6e6;
        transition: 400ms;
    }
    .ingeguia .lista .barra .celda{
        display: inline-block;
        padding: 5px 3px;
        font-size: 14px;
    }
    .ingeguia .lista .barra .lat{
        border-left: 1px solid #ccc;
    }
    .ingeguia .lista .barra .lad{
        text-align: left;
    }
    .ingeguia .lista .barra .min{
        width: 8%;
    }
    .ingeguia .lista .barra .grande{
        width: 40%;
        text-align: left;
    }
    .ingeguia .lista .barra .llen{
        width: 100%;
        text-align: left;
    }
    .ingeguia .lista .barra .medio{
        width: 16%;
    }

    .ingeguia .lista .barra .celda label.edoba{
        width: 90%;
        display: inline-block;
        text-align: center;
        padding: 2px;
        font-size: 10px;
        color: #fff;
        border-radius: 4px;
    }




    .ingeguia .lista .result{
        height: 65vh;
        overflow-y: scroll;
    }


    .ingeguia .lista .result::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .ingeguia .lista .result::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .ingeguia .lista .result::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }

    .ingeguia .lista .result .regui{
        width: 100%;
        display: block;
        text-align: center;
        border-bottom: 1px solid #ccc;
        padding: 5px;
    }
    .ingeguia .lista .result .regui .lin{
        width: 100%;
        display: block;
        text-align: center;
    }
    .ingeguia .lista .result .regui .lin .lat{
        width: 49%;
        display: inline-block;
        font-size: 12px;
        color: #000;
    }
    .ingeguia .lista .result .regui .lin .izq{
        text-align: left;
    }
    .ingeguia .lista .result .regui .lin .der{
        text-align: right;
    }
    .ingeguia .lista .result .regui .lin .lat .edo{
        width: 80%;
        display: inline-block;
        text-align: center;
        color: #fff;
        padding: 3px 0px;
        border-radius: 4px;
        background: #ccc;
    }
    .ingeguia .lista .result .regui .lin .sub {
        width: 100%;
        display: block;
        text-align: left;
        color: #555;
        font-size: 12px;
        margin-bottom: -3px;
    }
    .ingeguia .lista .result .regui .lin .inf {
        width: 100%;
        display: block;
        text-align: left;
        color: #333;
        font-size: 14px;
    }

    .ingeguia .superior {
        width: 100%;
        display: block;
        text-align: center;
        border: 1px solid #ccc;
        font-size: 14px;
        color: #333;
    }
    .ingeguia .superior .compl{
        width: 100%;
        display: block;
        padding: 4px 0px;
    }
    .ingeguia .superior .tria{
        width: 100%;
        display: inline-block;
        padding: 4px 4px;
        text-align: left;
        border-bottom: 1px solid #ccc;
    }
    .ingeguia .superior .tria label.tit{
        width: 100%;
        display: block;
        font-size: 12px;
        color: #555;
    }
    .ingeguia .contener {
        width: 100%;
        display: block;
        text-align: center;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
    .ingeguia .contener .funcion{
        width: 100%;
        display: block;
        text-align: left;
        padding: 10px 5px;
    }
    .ingeguia .contener .funcion a{
        width: 98%;
        display: inline-block;
        color: #fff;
        background: red;
        padding: 5px;
        border-radius: 4px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        text-align: center;
        font-size: 14px;
    }
    .ingeguia .contener .funcion a:hover{
        background: rgb(180, 0, 0);
        transition: 400ms;
    }
    .ingeguia .contener .funcion .busq{
        width: 100%;
        display: inline-block;
        margin-bottom: 10px;
    }
    .ingeguia .contener .funcion .busq label{
        width: 100%;
        display: inline-block;
        text-align: left;
        font-size: 12px;
        color: #555;
    }
    .ingeguia .contener .funcion .busq input{
        width: 100%;
        display: inline-block;
        text-align: left;
        font-size: 16px;
        color: #333;
        padding: 3px;
        border-radius: 4px;
        border: 1px solid #ccc;
    }
    .ingeguia .contener .resmed {
        width: 100%;
        display: block;
        text-align: center;
    }
    .ingeguia .contener .resmed .barra{
        width: 100%;
        display: block;
        text-align: center;
        border-bottom: 1px solid #ccc;
    }
    .ingeguia .contener .resmed .baj:hover{
        background: #e6e6e6;
    }
    .ingeguia .contener .resmed .sup{
        border-top: 1px solid #ccc;
        background: #e6e6e6;
    }
    .ingeguia .contener .resmed .barra .celda{
        display: inline-block;
        text-align: center;
        padding: 4px;
        vertical-align: middle;
        color: #333;
    }
    .ingeguia .contener .resmed .barra .celda label{
        width: 100%;
        display: inline-block;
        text-align: left;
        color: #333;
        vertical-align: middle;
    }
    .ingeguia .contener .resmed .barra .celda label.llen{
        font-size: 16px;
    }
    .ingeguia .contener .resmed .barra .celda label.subb{
        font-size: 12px;
    }
    .ingeguia .contener .resmed .barra .medi{
        width: 12%;
        font-size: 14px;
    }
    .ingeguia .contener .resmed .barra .min{
        width: 10%;
        font-size: 14px;
        text-align: left;
    }
    .ingeguia .contener .resmed .barra .lat{
        border-right: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }
    .ingeguia .contener .resmed .barra .gran{
        width: 60%;
        text-align: left;
    }
    .ingeguia .contener .resmed .medice {
        width: 100%;
        display: block;
        text-align: center;
        overflow-y: scroll;
        height: 50vh;
    }
    .ingeguia .contener .resmed .medice::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .ingeguia .contener .resmed .medice::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .ingeguia .contener .resmed .medice::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
    .ingeguia a.cont {
        width: 80%;
        display: inline-block;
        color: #fff;
        background: #555;
        padding: 5px;
        border-radius: 4px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        text-align: center;
        font-size: 14px;
        margin: 10px 0px;
    }
}

/* panel de inventario general */
@media screen and (max-width: 800px) {
    .invenge {
        width: 100%;
        display: inline-block;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 10px;
    }
    .invenge .contener {
        width: 100%;
        display: block;
        text-align: center;
    }
    .invenge .contener .funcion{
        width: 100%;
        display: block;
        text-align: left;
        padding: 10px 5px;
    }
    .invenge .contener .funcion a{
        width: 25%;
        display: inline-block;
        color: #fff;
        background: red;
        padding: 5px;
        border-radius: 4px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        text-align: center;
        font-size: 14px;
    }
    .invenge .contener .funcion a:hover{
        background: rgb(180, 0, 0);
        transition: 400ms;
    }
    .invenge .contener .funcion .busq{
        width: 100%;
        display: inline-block;
    }
    .invenge .contener .funcion .busq label{
        width: 100%;
        display: inline-block;
        text-align: left;
        font-size: 12px;
        color: #555;
    }
    .invenge .contener .funcion .busq input{
        width: 100%;
        display: inline-block;
        text-align: left;
        font-size: 16px;
        color: #333;
        padding: 3px;
        border-radius: 4px;
        border: 1px solid #ccc;
    }
    .invenge .contener .resmed {
        width: 100%;
        display: block;
        text-align: center;
        border: 1px solid #ccc;
    }
    .invenge .contener .resmed .barra{
        width: 100%;
        display: block;
        text-align: center;
        border-bottom: 1px solid #ccc;
    }
    .invenge .contener .resmed .baj:hover{
        background: #e6e6e6;
    }
    .invenge .contener .resmed .sup{
        background: #e6e6e6;
    }
    .invenge .contener .resmed .barra .celda{
        display: inline-block;
        text-align: center;
        padding: 4px;
        vertical-align: middle;
        color: #333;
    }
    .invenge .contener .resmed .barra .celda label{
        width: 100%;
        display: inline-block;
        text-align: left;
        color: #333;
        vertical-align: middle;
    }
    .invenge .contener .resmed .barra .celda label.llen{
        font-size: 16px;
    }
    .invenge .contener .resmed .barra .celda label.subb{
        font-size: 12px;
    }
    .invenge .contener .resmed .barra .medi{
        width: 17%;
        font-size: 14px;
    }
    .invenge .contener .resmed .barra .min{
        width: 10%;
        font-size: 14px;
    }
    .invenge .contener .resmed .barra .cont{
        text-align: left;
    }
    .invenge .contener .resmed .barra .lat{
        border-right: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }
    .invenge .contener .resmed .barra .gran{
        width: 60%;
        text-align: left;
    }
    .invenge .contener .resmed .medice {
        width: 100%;
        display: block;
        text-align: center;
        overflow-y: scroll;
        height: 70vh;
    }
    .invenge .contener .resmed .medice::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .invenge .contener .resmed .medice::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .invenge .contener .resmed .medice::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }
}

/* ventana lista medicamentos por guia */
@media screen and (max-width: 800px) {
    .window-notice .medicalis {
        width: 98%;
        display: flex;
        box-shadow: 0 1px 3px rgba(33, 41, 52, .75);
        box-sizing: content-box;
        flex-direction: column;
        margin: auto;
        overflow: hidden;
        position: relative;
        font-size: 1.3rem;
        border-radius: 10px;
        background: #fff;
    }
    .window-notice .medicalis .desl{
        overflow-y: scroll;
        max-height: 70vh;
    }
    .window-notice .medicalis .lismed{
        width: 100%;
        display: block;
        background: #fff;
        padding: 10px 5px;
        text-align: center;
    }
    .window-notice .medicalis .desl::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .window-notice .medicalis .desl::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .window-notice .medicalis .desl::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }


    .window-notice .medicalis .reslis{
        overflow-y: scroll;
        height: 60vh;
        margin-bottom: 10px;
    }
    .window-notice .medicalis .reslis::-webkit-scrollbar {
        width: 5px; /* Ancho de la barra de desplazamiento */
    }

    .window-notice .medicalis .reslis::-webkit-scrollbar-thumb {
        background-color: #888; /* Color del deslizador */
        border-radius: 5px; /* Bordes redondeados del deslizador */
    }

    .window-notice .medicalis .reslis::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Color de la pista */
    }


    .window-notice .medicalis .lismed .caja{
        width: 98%;
        display: inline-block;
        text-align: center;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 14px;
        vertical-align: middle;
        margin-bottom: 10px;
    }
    .window-notice .medicalis .lismed .caja .celda{
        display: inline-block;
        vertical-align: middle;
    }
    .window-notice .medicalis .lismed .caja .gran{
        width: 50%;
    }
    .window-notice .medicalis .lismed .caja .min{
        width: 23.5%;
    }
    .window-notice .medicalis .lismed .caja .lat{
        border-left: 1px solid #ccc;
    }
    .window-notice .medicalis .lismed .caja .celda label{
        width: 100%;
        display: block;
    }
    .window-notice .medicalis .lismed .caja .celda label.lad{
        text-align: left;
    }
    .window-notice .medicalis .lismed .caja .celda label.sub{
        font-size: 12px;
        color: #555;
    }
    .window-notice .medicalis .lismed .caja .celda label.llen{
        font-size: 12px;
    }

    .window-notice .medicalis .lismed .campo {
        display: inline-block;
        text-align: center;
        margin-bottom: 10px;
    }
    .window-notice .medicalis .lismed .compl {
        width: 98%;
    }
    .window-notice .medicalis .lismed .medl {
        width: 48.5%;
    }
    .window-notice .medicalis .lismed .campo label {
        width: 100%;
        display: inline-block;
        text-align: left;
        color: #555;
        font-size: 12px;
    }
    .window-notice .medicalis .lismed .campo select,
    .window-notice .medicalis .lismed .campo input {
        width: 100%;
        display: inline-block;
        text-align: left;
        color: #000;
        font-size: 14px;
        padding: 5px 3px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .window-notice .medicalis .lismed .campo textarea {
        width: 100%;
        display: inline-block;
        text-align: left;
        color: #000;
        font-size: 14px;
        padding: 5px 3px;
        border: 1px solid #ccc;
        border-radius: 4px;
        height: 50px;
    }

    .window-notice .medicalis .lismed button {
        width: 98%;
        display: inline-block;
        text-align: center;
        color: #fff;
        padding: 5px;
        border: none;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        margin-bottom: 10px;
        background: red;
        cursor: pointer;
        transition: 400ms;
    }
    .window-notice .medicalis .lismed button:hover {
        background: rgb(155, 0, 0);
        transition: 400ms;
    }
    
    .window-notice .medicalis .totalcan{
        width: 100%;
        display: inline-block;
        padding: 5px 5px;
        text-align: center;
        border: 1px solid #ccc;
        font-size: 14px;
        color: #333;
    }
    .window-notice .medicalis .totalcan label.enun{
        width: 70%;
        display: inline-block;
        text-align: left;
    }
    .window-notice .medicalis .totalcan label.nume{
        width: 28%;
        display: inline-block;
        text-align: right;
    }
}

/* ventana flotante */
@media screen and (max-width: 800px) {
    .window-notice .medicasi {
        width: 95%;
        display: flex;
        box-shadow: 0 1px 3px rgba(33, 41, 52, .75);
        box-sizing: content-box;
        flex-direction: column;
        margin: auto;
        overflow: hidden;
        position: relative;
        font-size: 1.3rem;
        border-radius: 10px;
        background: #fff;
    }
}







/* OCULTAR EN MOVIL */
@media screen and (max-width: 800px) {
    .PC {
        display: none;
    }
}

/* OCULTAR EN PC */
@media screen and (min-width: 800px) {
    .MOVIL {
        display: none;
    }
}


/*LOADER PANEL DE CARGA PAGINA MOVIL*/
@media screen and (max-width: 800px) {
    .carga {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        left: 0;
        bottom: 0;
        right: 0;
        top: 0;
        display: flex;
        position: fixed;
        z-index: 999;
        width: 100%;
    }

    .carga img {
        width: 500px;
        padding: 5px;
        background: red;
        border-radius: 10px;
        margin: 0px 20px;
    }

    .lds-roller {
        /* change color here */
        color: red
    }

    .lds-roller,
    .lds-roller div,
    .lds-roller div:after {
        box-sizing: border-box;
    }

    .lds-roller {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 80px;
    }

    .lds-roller div {
        animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        transform-origin: 40px 40px;
    }

    .lds-roller div:after {
        content: " ";
        display: block;
        position: absolute;
        width: 7.2px;
        height: 7.2px;
        border-radius: 50%;
        background: currentColor;
        margin: -3.6px 0 0 -3.6px;
    }

    .lds-roller div:nth-child(1) {
        animation-delay: -0.036s;
    }

    .lds-roller div:nth-child(1):after {
        top: 62.62742px;
        left: 62.62742px;
    }

    .lds-roller div:nth-child(2) {
        animation-delay: -0.072s;
    }

    .lds-roller div:nth-child(2):after {
        top: 67.71281px;
        left: 56px;
    }

    .lds-roller div:nth-child(3) {
        animation-delay: -0.108s;
    }

    .lds-roller div:nth-child(3):after {
        top: 70.90963px;
        left: 48.28221px;
    }

    .lds-roller div:nth-child(4) {
        animation-delay: -0.144s;
    }

    .lds-roller div:nth-child(4):after {
        top: 72px;
        left: 40px;
    }

    .lds-roller div:nth-child(5) {
        animation-delay: -0.18s;
    }

    .lds-roller div:nth-child(5):after {
        top: 70.90963px;
        left: 31.71779px;
    }

    .lds-roller div:nth-child(6) {
        animation-delay: -0.216s;
    }

    .lds-roller div:nth-child(6):after {
        top: 67.71281px;
        left: 24px;
    }

    .lds-roller div:nth-child(7) {
        animation-delay: -0.252s;
    }

    .lds-roller div:nth-child(7):after {
        top: 62.62742px;
        left: 17.37258px;
    }

    .lds-roller div:nth-child(8) {
        animation-delay: -0.288s;
    }

    .lds-roller div:nth-child(8):after {
        top: 56px;
        left: 12.28719px;
    }

    @keyframes lds-roller {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
}

/*LOADER PANEL DE CARGA PAGINA PC*/
@media screen and (min-width: 800px) {
    .carga {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        left: 0;
        bottom: 0;
        right: 0;
        top: 0;
        display: flex;
        position: fixed;
        z-index: 999;
        width: 100%;
    }

    .carga img {
        width: 500px;
        padding: 5px;
        background: red;
        border-radius: 10px;
        margin: 0px 20px;
    }

    .lds-roller {
        /* change color here */
        color: red
    }

    .lds-roller,
    .lds-roller div,
    .lds-roller div:after {
        box-sizing: border-box;
    }

    .lds-roller {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 80px;
    }

    .lds-roller div {
        animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        transform-origin: 40px 40px;
    }

    .lds-roller div:after {
        content: " ";
        display: block;
        position: absolute;
        width: 7.2px;
        height: 7.2px;
        border-radius: 50%;
        background: currentColor;
        margin: -3.6px 0 0 -3.6px;
    }

    .lds-roller div:nth-child(1) {
        animation-delay: -0.036s;
    }

    .lds-roller div:nth-child(1):after {
        top: 62.62742px;
        left: 62.62742px;
    }

    .lds-roller div:nth-child(2) {
        animation-delay: -0.072s;
    }

    .lds-roller div:nth-child(2):after {
        top: 67.71281px;
        left: 56px;
    }

    .lds-roller div:nth-child(3) {
        animation-delay: -0.108s;
    }

    .lds-roller div:nth-child(3):after {
        top: 70.90963px;
        left: 48.28221px;
    }

    .lds-roller div:nth-child(4) {
        animation-delay: -0.144s;
    }

    .lds-roller div:nth-child(4):after {
        top: 72px;
        left: 40px;
    }

    .lds-roller div:nth-child(5) {
        animation-delay: -0.18s;
    }

    .lds-roller div:nth-child(5):after {
        top: 70.90963px;
        left: 31.71779px;
    }

    .lds-roller div:nth-child(6) {
        animation-delay: -0.216s;
    }

    .lds-roller div:nth-child(6):after {
        top: 67.71281px;
        left: 24px;
    }

    .lds-roller div:nth-child(7) {
        animation-delay: -0.252s;
    }

    .lds-roller div:nth-child(7):after {
        top: 62.62742px;
        left: 17.37258px;
    }

    .lds-roller div:nth-child(8) {
        animation-delay: -0.288s;
    }

    .lds-roller div:nth-child(8):after {
        top: 56px;
        left: 12.28719px;
    }

    @keyframes lds-roller {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
}