:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #3f6ad8;
    --secondary: #6c757d;
    --success: #3ac47d;
    f --info: #16aaff;
    --warning: #f7b924;
    --danger: #d92550;
    --light: #eee;
    --dark: #343a40;
    --focus: #444054;
    --alternate: #794c8a;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.jqstooltip {
    position: absolute;
    left: 0px;
    top: 0px;
    visibility: hidden;
    background: rgb(0, 0, 0) transparent;
    background-color: rgba(0,0,0,0.6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
    color: white;
    font: 10px arial, san serif;
    text-align: left;
    white-space: nowrap;
    padding: 5px;
    border: 1px solid white;
    box-sizing: content-box;
    z-index: 10000;
}

.jqsfield {
    color: white;
    font: 10px arial, san serif;
    text-align: left;
}
/*-------------------------------------------------------------*/
html {
    padding: 0px;
    margin: 0px;
}


/*------------------------------------------------------------*/
body {
    font-family: "Roboto", sans-serif;
    height: 100dvh;
    overflow: hidden;
    background: #f1f4f6;
}



.hide {
    display: none !important;
}

.vaccine-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 600px;
    margin: auto;
    margin-bottom: 5px;
}

.vaccine-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.06);
    padding: 1rem 1.2rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: transform 0.2s ease;
}

    .vaccine-card:hover {
        transform: scale(1.02);
    }

.vaccine-icon {
    font-size: 2rem;
    color: #3f6ad8; /* Color personalizado */
    flex-shrink: 0;
}

.vaccine-content {
    flex-grow: 1;
}

.vaccine-name {
    font-size: 1rem;
    font-weight: 600;
    color: #666565;
    margin-bottom: 0.5rem;
    width: 55%;
}

.vaccine-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.vaccine-date {
    background-color: #eaf1f8;
    color: #34495e;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    border-left: 4px solid #3f6ad8; /* También aplicado al borde de fecha */
}

/* Responsive tweaks */
@media (min-width: 480px) {
    .vaccine-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

.box {
    position:relative;
    width: 93%;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    border-radius: 5%;
    padding: 7px;
    color: #6c757d;
}

.form-control {
    display: block;
    width: 90%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .form-control:focus {
        color: #212529;
        background-color: #fff;
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(13,110,253,0.25);
    }

.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.375rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-primary {
    background-color: #fff;
    color: #adb5bd;
    font-size: 11pt;
    border: 1px solid #ccc;
}

.btn-dark {
    background: #000000;
    background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(48, 48, 48, 1) 100%);
    color: white;
}

.btn-alt, #ojo_ok {
    color: #fff;
    background-color: #3f6ad8;
    border-color: #3f6ad8;
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
}

.btn-success {
    background: #00cc00;
    background: linear-gradient(90deg,rgba(0, 204, 0, 1) 0%, rgba(0, 135, 0, 1) 100%);
    color: white;
}

.btn-danger {
    background: #cc0000;
    background: linear-gradient(90deg,rgba(204, 0, 0, 1) 0%, rgba(135, 0, 0, 1) 100%);
    color: white;
}

.btn-warning {
    background: #fff04f;
    background: linear-gradient(90deg,rgba(255, 240, 79, 1) 0%, rgba(227, 227, 0, 1) 100%);
    color: black;
}

a {
    color: #3f6ad8;
    margin: 6px;
    /* text-decoration: underline; */
}


h1 {
    text-align: center;
    color: #6c757d;
    margin-bottom: 9px;
    margin-top: 9px;
}

h2 {
    text-align: center;
    color: #6c757d;
    margin-bottom: 9px;
    margin-top: 9px;
}

h3 {
    text-align: center;
    margin-top: 4px;
    margin-bottom: 4px;
}

h4 {
    color: #6c757d;
    font-size: 20px;
    margin: 15px;
    font-weight: bold;
}

.footer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 12px;
    color: #495057;
    text-align: center;
    width: 100%;
    background: #fafbfc;
    border-left: #e9ecef solid 1px;
}

.ui-loader-header {
    display: none !important;
}

.msg-error {
    position: fixed;
    width: 77%;
    margin-left: 0%;
    background-color: #9f0000b3;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 22px;
    /*height: 5dvh;*/
    padding: 20px;
    top: 40dvh;
    left: 6%;
}


.sp_atras {
    position: fixed;
    top: 10px;
    left: 10px;
}

.navegador-cuadro {
    width: 19%;
    height: 15px;
    background-color: #3f6ad8;
    float: left;
    border-top: 1px solid #ffffffc9;
    border-bottom: 1px solid #ffffffc9;
}

.celda-navegador {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navegador-inicio {
    border-radius: 2px 0px 0px 2px;
    border-left: 1px solid #ffffffc9;
}

.navegador-fin {
    border-radius: 0px 2px 2px 0px;
    border-right: 1px solid #ffffffc9;
}

.cuadro-activo {
    background-color: #794c8a;
}

.bi-blue {
    color: #007bff;
    border-color: #007bff;
}

.bi-red {
    color: #dc3545;
    border-color: #dc3545;
}

.bi-cuadro {
    width: 50%;
    font-weight: bold;
    border: 1px solid;
    padding: 14px;
    min-height: 93px;
    border-radius: 8px;
}

.bi-cuadro-icono {
    width: 100%;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
}

.bi-cuadro-letras {
    text-align: center;
    font-size: 15px;
}

.center {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
    float: none !important;
}

.retrato, .historial-retrato {
    width: 80px;
    height: 80px;
    border: 2px solid white;
    border-radius: 50px;
    overflow: hidden;
}

.elemento-lista-texto {
    padding-top: 18px;
}

.el-name {
    font-weight: bold;
    font-size: 15px;
}

.el-numero, #h_titulo, .sp_num_afiliacion {
    font-weight: 15;
    color: gray;
}

.retrato img, .historial-retrato img {
    height: 100%;
    width: 100%;
}

.elemento-lista-beneficiarios {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    position: relative;
    display: block;
    padding: .75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
}

    .elemento-lista-beneficiarios .el-name {
        opacity: .8;
        font-weight: bold;
    }

.notificacion-globo {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    font-weight: bold;
    position: relative;
    margin-right: -20px;
    /*z-index: 999999;*/
    top: 60px;
    left: 60px;
}

.elemento-lista-beneficiarios:nth-of-type(odd) {
    background-color: #f8f9fa;
}

.elemento-lista-beneficiarios:nth-of-type(even) {
    background-color: #e0f3ff;
}

.sp_volver_menu, .sp_volver_desplegable {
    position: absolute;
    left: 10px;
    top: 10px;
}

.desplegar-menu {
    background-color: white;
    height: 100%;
    z-index: 10000;
    position: absolute;
    overflow: hidden;
}

ul.menu-bootones {
    list-style: none;
    font-size: 20px;
    /* font-style: unset; */
    /* text-decoration: none; */
}

.menu-bootones a {
    color: #343a40;
    text-decoration: none;
}

.menu-bootones li {
    padding: 12px;
}

.menu-bootones i {
    color: #6c757d78;
    margin-left: -15px;
    margin-right: 20px;
}

.boton-celda-menu, .boton-celda-menu-esp, #pagina1 .boton-celda-menu-esp {
    width: 40%;
    color: white;
    aspect-ratio: 1 / 1;
    float: left;
    margin-left: 7.5%;
    margin-bottom: 15px;
    display: flex;
    height: 95px;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
}

.SupPantalla1 .celda-menu .boton-celda-menu {
    height: 101px;
}

.elemento-referencia {
    border: 1px solid #ccc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

    .elemento-referencia {
        border: 1px solid #ccc;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    .boton-celda-menu ul, .boton-celda-menu-esp ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
        text-align: center;
    }

.icono-celda-menu, .icono-celda-menu-esp, .span-icon-letra {
    font-size: 50px;
    color: #3f6ad8;
}

.desc-celda-menu, .desc-celda-menu-esp {
    padding: 7px;
}

.contador-celda-menu {
    background-color: #794c8a;
    padding: 2px;
    height: 15px;
    width: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    font-weight: bolder;
    position: relative;
    margin-right: -16px;
    top: -35px;
    left: 0;
    float: left;
}

.elemento-filtro-icono i, .elemento-filtro-icono i {
    font-size: 50px;
    color: #3f6ad8;
}




.elemento-tipo-filtro li:nth-child(-n + 2) {
    margin-top: 8px;
}

.retrato-perfil {
    width: 90px;
    border-radius: 45px;
    height: 90px;
    overflow: hidden;
}

.elemento-expansion-header {
    height: 82px;
    padding: 13px;
    background-color: #16aaff;
    margin-top: 19px;
    width: 91%;
    border-left: 5px solid #3f6ad8 !important;
}

img.pf_img {
    height: 100%;
    width: 100%;
}


.elemento-expansion-header.el-name {
    font-size: 6px !important;
}

.menu-header-image {
    height: 107px;
    margin-top: -13px;
    position: relative;
    opacity: 0.2;
    z-index: 999;
    margin-left: -13px;
    top: 0;
    left: 0;
    margin-bottom: -94px;
    width: 109%;
}

.elemento-lista {
    width: 97%;
    padding: 5px;
    border: 1px solid #ddd;
    background-color: #fff;
    border-radius: 10px;
}

    .elemento-lista b {
        font-size: 20px;
        color: #3f6ad8;
    }

    .elemento-lista i {
        display: block;
        text-align: right;
        width: 100%;
    }

.celda-filtros {
    width: 100%;
    height: 16dvh;
    padding-top: 2px;
    padding-bottom: 8px;
    margin-top: -2px;
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 10px;
}

.celda-larga-filtros {
    width: max-content;
}

.elemento-filtro {
    text-align: center;
    font-size: 19px;
    width: 110px;
    height: 110px;
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
    border: 2px solid #16aaff;
    float: left;
    margin: 6px;
    overflow: hidden;
    border-radius:10px;
}

.select {
    border-color: #794c8a;
    color: #794c8a !important;
}

    .select .elemento-tipo-filtro {
        color: #794c8a !important;
    }

.elemento-tipo-filtro {
    list-style: none;
    margin: 0px;
    padding: 0px;
    color: #16aaff;
    padding-top: 24px;
}

.elemento-filtro-icono {
    width: 40px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -1px;
    font-size: 25px;
}

.celda-lista-historial {
    width: 100%;
    height: 69dvh;
    overflow: auto;
}



.btn_cita {
    height: 120px;
    margin-top: 5px;
    margin-bottom: 19px;
    background-color: white;
    /*box-shadow: 0px 3px 2px 0px #ababab;*/
}


.elemento-linea-color {
    float: left;
    height: 110px;
    border: 0px;
    /*width: 10px;*/
    z-index: 10000000;
    margin-right: -60px;
    writing-mode: vertical-lr;
    text-align: center;
    font-size: 15px;
    overflow: hidden;
}

.historial-especialidad {
    font-size: 14px;
    font-family: Arial Narrow;
}

.historial-califica {
    position: relative;
    font-size: 40px;
    right: 0;
    top: 29px;
}

.celda-encuesta {
    width: 100%;
    color: black;
    font-size: 20px;
    text-align: center;
}


.preguntas {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffffbf;
    border-radius: 25px;
    padding: 25px;
}



span#Panel4 {
    max-height: 90dvh;
    overflow-y: auto;
    display: block;
    /*padding-bottom: 45px;*/
    overflow-x: hidden;
}

.elemento-caja {
    width: 95%;
    border: 1px solid #007bff;
    margin-bottom: 10px;
    border-radius: 5px;
    padding: 8px;
}

.caja-header {
    background: #4d8aeb;
    background: linear-gradient(90deg,rgba(77, 138, 235, 1) 0%, rgba(60, 114, 201, 1) 100%);
    width: 103%;
    margin-left: -3%;
    color: white;
    font-weight: bold;
    padding: 4px;
    min-height: 24px;
    margin-top: -10px;
    border-radius: 5px 5px 0px 0px;
}
/*
.caja-footer {
    background: #4d8aeb;
    background: linear-gradient(90deg, rgba(77, 138, 235, 1) 0%, rgba(60, 114, 201, 1) 100%);
    color: white;
    text-align: center;
    font-weight: bolder;
    text-decoration: underline;
    font-size: 20px;
    width: 105%;
    padding: 1px;
    margin-left: -3%;
    margin-bottom: -8px;
    height: 29px;
    border-radius: 0px 0px 5px 5px;
}
*/
.header-bar {
    background: #fafbfc !important;
    background: linear-gradient(90deg,rgba(0, 78, 204, 1) 0%, rgba(0, 59, 153, 1) 100%);
    width: 106%;
    margin-left: -3%;
    margin-top: -9px;
    padding-top: 9px;
    padding-bottom: 4px;
    color: white;
}

.alergia {
    background-color: #fd831a;
    padding: 15px;
    border-radius: 10px;
    color: white;
    margin-bottom: 10px;
}

img.img_tuto {
    position: fixed;
    top: -17px;
    left: 0px;
    height: 101dvh;
    width: 100%;
}

.dialogo {
    margin-bottom: 5px;
    padding: 3px;
    font-weight: bolder;
    text-align: center;
    color: #6c757d;
    border-left: 5px solid #3f6ad8;
}

    .dialogo i {
        font-size: 23px;
    }

.celda-donde {
    width: 83%;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    border-top: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
}

.donde-icono {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #6c757d;
    font-size: 40px;
    font-weight: 100;
}

.donde-texto {
    padding-top: 5px;
    color: #6c757d;
}

.ringlon-ubicacion, .elemento-lista-beneficiarios-med, .elemento-dia {
    color: #6c757d;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    float: left;
    width: 99%;
    margin-bottom: 8px;
    justify-content: space-between;
}

.elemento-dia {
    margin-bottom: 8px;
}

.ringlon-ubicacion div {
    margin-left: 5px;
}

.ringlon-ubicacion::before {
    content: "";
    position: absolute;
    height: 22%;
    margin-top: 9px;
    width: 4px;
    background-color: #3f6ad8;
}

.ubicacion-nombre {
    padding: 5px;
}

.ubicacion-texto {
    font-size: 14px;
    color: #343a40;
    padding: 5px;
}

    .ubicacion-texto i {
        font-weight: bold;
    }

.ubicacion-telefono a {
    font-size: 40px;
}

.ubicacion-telefono {
    text-align: right;
}



.celda-citas {
    height: 62dvh;
    overflow-y: auto;
    overflow-x: hidden;
}


.header-dia {
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 104%;
    margin-top: -6px;
    margin-left: -2%;
    position: relative;
}

    .header-dia::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0; /* Positions the border at the bottom of the parent */
        left: 15%; /* (100% - 70%) / 2 = 15% for centering */
        width: 70%;
        border-bottom: 2px solid #3f6ad8; /* Customize thickness, style, and color */
    }

.titulo-dia, .fecha-dia {
    margin-top: 8px;
    margin-bottom: 2px;
}

.titulo-dia {
    margin-right:3px;
}


.hora {
    padding: 5px;
    width: 26%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1%;
    float: left;
    margin-bottom: 5px;
    padding: 3px;
    font-weight: bolder;
    text-align: center;
    color: #6c757d;
    border: 1px solid #ccc;
    border-left: 5px solid #3f6ad8;
    margin-left: 10px;
}

.nombre-medico {
    color: #6c757d;
    border-bottom: 1px solid #3f6ad8;
}


.btn-confirmar {
    width: 38%;
    float: left;
    margin-right: 1%;
    margin-left: 1%;
}

.pf_fecha_cita {
    text-align: right;
    display: block;
    text-transform: uppercase;
    color: rgba(13, 27, 62, 0.7);
    font-weight: bold;
    font-size: 0.88rem;
}

.row {
    width: 100%;
    clear: left;
    padding-top: 5px;
}

.proxima-cita-caja {
    background-color: #ffffff;
    box-shadow: 4px 6px 23px 1px #cacaca;
    border-radius: 10px;
}


.msj-error {
    position: absolute;
    top: 45%;
    left: 10%;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    text-align: center;
    background-color: #cb1a1acc;
    padding: 1%;
    color: white;
    font-weight: bold;
    border: 2px solid #560000;
    border-radius: 12px;
}


#dv_botones {
    padding-left: 9%;
    height: 7dvh;
}




.elemento-fecha {
    text-align: center;
    font-size: 19px;
    width: 110px;
    height: 110px;
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
    border: 2px solid #16aaff;
    float: left;
    margin: 6px;
    overflow: hidden;
    border-radius: 10px;
}

.fecha-numero {
}

.fecha-mes {
}



.elemento-fecha-seleccionado .fecha-numero {
}

.elemento-fecha ul {
    list-style: none;
    padding: 0px;
    text-align: center;
}

.elemento-fecha-seleccionado .fecha-mes {
}

.card-solid-red {
    color: white;
    background-color: indianred;
    border-color: #cc0000;
}

.card {
    text-align: justify;
    padding: 19px;
    border-radius: 10px;
    border: 1px solid;
}

    .card b {
        display: block;
        margin-top: 5px;
        margin-bottom: 10px;
    }

.globo_conteo_menu_esp {
    width: 29px;
    height: 29px;
    background-color: #6f42c1;
    border-radius: 29px;
    color: white;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    margin-left: -9%;
    margin-top: 3px;
}

.in-line {
    float: none;
    margin-left: 2px;
    display: inline-flex;
}

.preg_valor {
    font-size: 19px;
    font-weight: bold;
    margin-left: 5px;
}

.elemento_historial_denuncias {
    width: 94%;
    /*border: 2px solid #dddd;*/
    background-color: #fff;
    margin-left: 1%;
    padding: 6px;
    border-radius: 5px;
    box-shadow: -1px 1px 3px 0px #cccc;
    margin-bottom: 10px;
}

#historial_lista {
    overflow-x: hidden;
    overflow-y: auto;
    height: 60dvh;
}

.cuadro-estado {
    color: #6c757d;
}

.denuncias_subtipo {
    padding: 3px 0 0;
    font-size: .88rem;
    opacity: .6;
}

}

.denuncias_fecha {
    text-align: center;
    font-size: 14px;
    padding: 4px;
}

.denuncias_icono {
    font-size: 114px;
    color: #007bff;
}

.denuncias_comentario {
    color: #6c757d;
    padding: 8px;
    font-size: 15px;
    text-align: justify;
}

.denuncias_imagens img {
    width: 80px;
    margin: 10px;
    height: 80px;
    border: 1px solid #233669;
    border-radius: 9px;
}

.lista-opcion {
    width: 95%;
    padding: 2%;
    border: 2px solid #dddd;
    background-color: #fff;
    font-size: 25px;
    color: #6c757d;
    font-weight: bolder;
    margin-bottom: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.input_chosen {
    width: 80%;
    font-size: 20px;
    height: 30px;
    float: left;
}

.btn_chosen {
    width: 14%;
    float: left;
    height: 30px;
    font-size: 43px;
    margin-top: -8px;
    color: #a5a5a5;
    cursor: pointer;
}


.elemento_chosen {
    width: 96%;
    background-color: #cad9e7;
    font-size: 21px;
    color: #6c757d;
    padding: 2%;
    border-bottom: 2px solid;
    margin-top: 6px;
}

.lista_chosen {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 22px;
    background-color: #dbe9f5;
    border: 3px solid #ddd;
    height: 40dvh;
}

.textarea_style {
    height: 120px !important;
    width: 95%;
    font-size: 15px;
}

.dv_pregunta {
    padding: 10px;
    border: 1px solid #ccc !important;
    background: #fff;
    margin-bottom: 7px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.modal-fondo {
    background-color: #00000087;
    width: 100%;
    height: 100dvh;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 200;
}

.modal-contenido {
    position: fixed;
    background-color: white;
    z-index: 299;
    width: 74%;
    margin-left: 10%;
    margin-right: 10%;
    padding: 3%;
    border-radius: 15px;
    border: 1px solid blue;
    top: 35%;
}

.modal-cabecera {
    text-align: center;
    font-size: 25px;
    border-bottom: 1px solid black;
}

.modal-cuerpo {
    font-size: 15px;
    text-align: justify;
    margin: 6px;
}

.elemento-caja-historial {
    /* width: 99%;
    height: 120px;*/
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}

    .elemento-caja-historial .historial-retrato {
        height: 110px;
        border-radius: 0px;
        /*margin-left: 14px;*/
        width: 88%;
        font-size: 50px;
        color: #ccc;
        border: none;
    }

.etapa_flecha {
    width: 7%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    color: #6c757d;
    font-size: 50px;
    z-index: 9999999999999999;
}

.box_etapa {
    width: 75%;
    float: left;
    padding: 3%;
    border: 2px solid #ccc;
    border-radius: 15px;
    height: 125px;
    background: #fff;
}

    .box_etapa i {
        color: #3f6ad8;
    }

    .etapa-nombre {
    text-align: center;
    font-size: 15px;
    color: #3f6ad8;
}

.etapa-responsable {
    text-align: center;
    color: gray;
    font-size: 15px;
    font-weight: bold;
}

.etapa-fecha {
    text-align: center;
    color: #343a40;
    font-size: 15px;
}

.etapa-contador {
    text-align: right;
    color: #3f6ad8;
    font-size: 14px;
}

.imagen_etapa {
    aspect-ratio: 1 / 1;
    font-size: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 75px;
    overflow: hidden;
}

.dialogo-etapa {
    background-color: gray;
    color: #fff !important;
    font-weight: normal !important;
}

.dialogo-supetapa {
    background-color: indianred;
    color: #fff !important;
    border-left: 5px solid #000 !important;
}

.imagen_etapa img {
    width: 100%;
    height: auto;
}

.hora_resalta {
    font-size: 20px;
    font-weight: bold;
    display: block;
}

.contador-etapa {
    display: inline-block;
    margin-bottom: 5px;
    padding: 3px;
    text-align: center;
    font-family:Arial narrow;
    color: #6c757d;
    border-left: 5px solid #3f6ad8;
}


.sin_datos {    
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 14px;
    color: #636363;
    background-color:#fff;
}


.icono-referencia {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 45px;
}

.body-texto-referencia {
    /*margin-top: 30px;*/
}

.texto-referencia {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    margin: 2%;
}


.elemento-dia-disponibilidades {
    border: 2px solid #007bff;
    padding: 7px;
    border-radius: 4px;
    color: #007bff;
    font-weight: bold;
}

.elemento-disponibles {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 38px;
}

.pf_diagnostico b {
    margin-left: 10px;
    font-family: Arial Narrow;
}

.pf_doctor {
    font-size: 0.88rem;
    opacity: 0.6;
}

.pf_especialidad, .elemento_historial_denuncias .row .denuncias_comentario, .historial-fecha {
    margin-top: 8px;
    display: inline-block;
    background: #eaf4ff;
    color: #0077cc;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
}

.historial-fecha {
    float: right;
    margin-right: -14px;
}


.pf_especialidad::before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    content: "\f0f1";
}

#Panel5 h1.h1_bene_titulo::before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    content: "\f4fd";
    margin-right: 5px;
}


#Panel3 .notificacion-globo {
    top: 0;
    left: 0;
    color: #fff;
    background-color: #d92550;
}

.historial-nombre {
    padding: 3px 0 0;
    font-size: .88rem;
    opacity: .6;
}

.boton-celda-menu, .boton-celda-menu-esp, .elemento-referencia {
    background-color: #fff;
}

    .desc-celda-menu b, .boton-celda-menu-esp b, .elemento-referencia b {
        color: #adb5bd;
        font-size: 12pt;
        margin: 5px 0 0;
        font-weight: normal !important;
    }

.elemento-filtro li {
    color: #adb5bd;
    font-size: 12pt;
    font-weight: normal !important;
}

.celda-navegador, .elemento-lista {
    margin-top: 5px;
}

.navegador-cuadro {
    font-size: 12pt !important;
    color: #fff;
    text-align: center;
    position: relative;
    height: 26px;
    border-left: 1px solid #fff;
}

    .navegador-cuadro span {
        margin-top: 3px;
        position: absolute;
        font-weight: bold;
    }

.sp_ficha_titulo {
    font-size: 1.25rem;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";    
    color: #3f6ad8;
}
    .elemento-lista b {
    font-size: 1.25rem;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    line-height: 1.5;
    color: #3f6ad8;
}

.elemento-expansion-header, .elemento-caja-historial, .elemento-fecha {
    color: #000;
    background-color: #fff;
    border: 1px solid #ddd;
    float: left;
}    

#Panel4 .elemento-caja-historial {
    margin-bottom: 0 !important;
    margin-top: 8px;
}

.elemento-filtro {
    background-color: #fff;
    color: white;
    aspect-ratio: 1 / 1;
    float: left;
    margin-bottom: 15px;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.elemento-caja {
    background-color: #fff;
    margin-bottom: 18px;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    box-shadow: none !important;
}


.elemento-tipo-filtro {
    margin-top: -5px;
}

.caja-footer {
    margin-bottom: -19px;
    border-radius: initial;
    height: auto;
    padding: 0;
    width: 100%;
    font-weight: normal;
    font-size: initial;
    background-color: #e9ecef !important;
    border-radius: .3rem;
    font-size: .88rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    border: 1px #ccc solid;
}

.ct-series-a .ct-bar, .ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-slice-donut {
    stroke: indianred !important;
}

.dv_modal_frame {
    position: fixed;
    top: 5px;
    left: 5px;
    background-color: white;
    /* background-color: aquamarine; */
    width: 97%;
    height: 90dvh;
}

.denuncias_numerofolio {
    margin-left: 5px;
}

#unidad-conteo {
    color: rgba(13, 27, 62, 0.7);
    padding: 3px;
}

.dv_modal_frame iframe {
    width: 100%;
    height: 85dvh;
}

.bg-primary {
    position: relative;
}

    .bg-primary::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10%; /* deja 10% arriba */
        height: 80%; /* solo el 80% de alto */
        width: 4px;
        background-color: #3f6ad8;
    }

.bg-secondary {
    position: relative;
}

    .bg-secondary::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10%; /* deja 10% arriba */
        height: 80%; /* solo el 80% de alto */
        width: 4px;
        background-color: #6c757d;
    }


.bg-success {
    position: relative;
}

    .bg-success::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10%; /* deja 10% arriba */
        height: 80%; /* solo el 80% de alto */
        width: 4px;
        background-color: #3ac47d;
    }


.bg-info {
    position: relative;
}

    .bg-info::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10%; /* deja 10% arriba */
        height: 80%; /* solo el 80% de alto */
        width: 4px;
        background-color: #16aaff;
    }

.bg-warning {
    position: relative;
}

    .bg-warning::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10%; /* deja 10% arriba */
        height: 80%; /* solo el 80% de alto */
        width: 4px;
        background-color: #f7b924;
    }

.bg-danger {
    position: relative;
}

    .bg-danger::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10%; /* deja 10% arriba */
        height: 80%; /* solo el 80% de alto */
        width: 4px;
        background-color: #d92550;
    }



.bg-light {
    position: relative;
}

    .bg-light::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10%; /* deja 10% arriba */
        height: 80%; /* solo el 80% de alto */
        width: 4px;
        background-color: #eee;
    }


.bg-dark {
    position: relative;
}

    .bg-dark::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10%; /* deja 10% arriba */
        height: 80%; /* solo el 80% de alto */
        width: 4px;
        background-color: #343a40;
    }

.bg-focus {
    position: relative;
}

    .bg-focus::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10%; /* deja 10% arriba */
        height: 80%; /* solo el 80% de alto */
        width: 4px;
        background-color: #444054;
    }

.bg-alternate {
    position: relative;
}

    .bg-alternate::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10%; /* deja 10% arriba */
        height: 80%; /* solo el 80% de alto */
        width: 4px;
        background-color: #794c8a;
    }

.btn-exaltar, .select {
    position: relative;
}


    .btn-exaltar::before, .select::before, .elemento-cuadro-confirmar::before, .box::before, .elemento-fecha-seleccionado::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10%; /* deja 10% arriba */
        height: 80%; /* solo el 80% de alto */
        width: 4px;
        background-color: #794c8a;
    }

.nombre-medico i, .
i {
    color: #3f6ad8;
}

.datos-confirmar {
    font-size: 13pt;
}

#pre-data {
    margin-bottom: 10px;
}

.dialogo .fa-dot-circle, .datos-confirmar .fa-dot-circle {
    display: none;
}

.elemento-cuadro-confirmar {
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

#btn_confirmar {
    background-color: #3f6ad8;
    color: #fff;
}
.elemento-cuadro-confirmar {
    background: #fff;
    border: 1px solid #ccc;
}

.registra p {
    padding-right: 15px;
    padding-left: 15px;
    text-align: justify;
}

#inp-celular {
    width: 83%;
    margin-left: 22px;
}

.celda-listado {
    display: inline-block;
    width: 99.5%;
}

.elemento-expansion-header .fa-id-card, .pf_nacimiento, .pf_edad, .pf_rfc, .pf_descsex, .pf_tiposangre, .pf_contacto_emergencias {
    color: gray;
}

.celda-mensaje .elemento-caja-historial {
    float: none !important;
    background-color:#fff;
}

.celda-mensaje .elemento-caja-historial .historial-fecha {
    margin-right: 3px;
    margin-top: 4px;
}

.celda-mensaje .elemento-caja-historial .fa-check-circle {
    display:none;
}

.proxima-cita-caja .historial-fecha {
    margin-right: 3px !important;
    margin-top: 5px !important;
}

.proxima-cita-caja .historial-retrato {
    margin-top: 8px;
}

.proxima-cita-caja {
    background-color: #fff;
}

.historial-detalles div {
    margin:5px;
}

.cuadro_inactivo {
    cursor: not-allowed;    
    user-select: none; /* evita seleccionar texto */
    opacity: 0.72; /* aspecto tenue */
    transform: translateY(0) scale(0.997);
    filter: grayscale(45%) contrast(0.92) brightness(0.95) saturate(60%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 18px rgba(8,10,12,0.35), inset 0 1px 0 rgba(255,255,255,0.01);
}

.peligro {
    background-color:indianred !important;
    color:#ccc;
}

/* Caja de alarma/alergia */
.alerta-paciente {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    /* background: #6c757d; */
    color: #f8d7da;
    /* border-left: 6px solid indianred; */
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin: 1rem 0;
    /* box-shadow: 0 1px 0px rgba(0, 0, 0, 0.4); */
    animation: alertaFade .3s ease-out;
    border: 1px solid #ccc;
    border-left: 6px solid
}

    .alerta-paciente i {
        font-size: 1.8rem;
        color: indianred;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .alerta-paciente .alerta-contenido {
        flex: 1;
    }

    .alerta-paciente .alerta-titulo {
        font-weight: bold;
        font-size: 1.1rem;
        margin-bottom: .3rem;
        color: indianred;
    }

    .alerta-paciente .alerta-detalle {
        color:gray;
    }

    .alerta-paciente .alerta-detalle b {
        font-size: .95rem;
        color: indianred;
    }

/* Animaci?n */
@keyframes alertaFade {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn-danger {
    background: indianred;
    color: white;
}


.aviso-citas {
    max-width: 500px;
    margin: 40px auto;
    padding: 25px 30px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #333;
    transition: all 0.3s ease;
}

    .aviso-citas:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    }

    .aviso-citas h2 {
        font-size: 1.8rem;
        font-weight: 700;
        color: #2d89ef;
        margin-bottom: 12px;
    }

    .aviso-citas p {
        font-size: 1rem;
        color: #666;
        line-height: 1.5;
    }

        .aviso-citas p span {
            font-weight: 600;
            color: #2d89ef;
            cursor: pointer;
        }

            .aviso-citas p span:hover {
                text-decoration: underline;
            }

.elemento-caja-historial {
    display: flex;
    align-items: flex-start;
    background: #ffffff;
    border-radius: 16px;
    padding: 11px;
    margin: 12px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 93%;
}

.bg-yellow {
    background-color: indianred;
}

.bg-green {
    background-color: MediumSeaGreen;
    color: #fff;
}

#inpusts_subirAt {
    text-align:center;
}

#barra_seccion1 {
    margin-top: 5px;
}


.dv_listado_beneficiarios .elemento-lista-beneficiarios {
    margin-bottom: 5px;
}


.caja-body b {
    color: #16aaff;
}

.caja-body .fad {
    color: #16aaff;
}

.caja-qr {border: 6px solid #16aaff;width: max-content;border-radius: 10px;margin-left: auto;margin-right: auto;}

.caja-body small {
    display: block;
    margin: 10px;
    background-color: #ddd;
    color: #606060;
    padding: 3px;
    border: 1px solid #606060;
    border-radius: 9px;
    text-align: center;
}

#Panel1 .elemento-lista-beneficiarios {
    border-radius:10px;
}

.celda-perfil .celda-listado {
    margin-top: 5px;
}

.celda-perfil .elemento-expansion-header {
    border-radius: 10px;
    width: 90%;
}

.botones {
        max-height: 80vh;
        overflow: auto;
}

#Panel1 .elemento-lista-beneficiarios, .celda-ubicaciones .elemento-referencia {
    border-radius: 10px;
}

.boton-celda-menu-esp, #pagina1 .boton-celda-menu-esp {
    margin-left: 10px;
}

.celda-larga-filtros {
    position: relative;
}

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

#correo-hash {
    text-transform: lowercase;
    font-weight:bold;
}