/****************************************************************
Este archivo es el que contiene todos los estilos del sitio.
Se estructura de la siguiente manera:


****************************************************************/


/****************************************************************
Body, footer y Contenedor principal
****************************************************************/
a {color: var(--primaryColor);text-decoration: none;}
body {font-family: var(--bodyFontFamily);background-color: var(--backgroundColorMain);box-sizing: border-box;overflow-x: hidden;font-size: var(--bodyFontSize);font-weight: var(--bodyFontWeight);line-height: var(--bodyLineHeight);color: var(--bodyColor);}
table {caption-side: bottom;border-collapse: collapse;}
footer {text-align: center;padding: 20px 0 8px 0;font-size: 0.8rem;}
#main-container {box-sizing: border-box;}
.content-holder {width: 96%;margin: 0 auto;}

/* Offcanvas para las versiones normales el movil se redefine por pantalla. */
.offcanvas {--bs-offcanvas-width: 50vw}
.offcanvas-header {color: var(--azulPlantilla);}
.offcanvas-body>div {width: 90%;margin: 0 auto;display: grid;grid-template-columns: 1fr 1fr;align-items: center;box-sizing: border-box;border-bottom: 1px dashed var(--azulPlantilla);padding: 8px;}
.offcanvas-body>div:hover {box-shadow: inset 0 0 0 9999px rgba(51, 118, 252, 0.2);}
.offcanvas-body>div>span {align-items: center;}
.offcanvas-body>div>span>img {width: 80px;float: left;border: 2px dashed #dedede;border-radius: 6px;}
.offcanvas-body .dropzone {padding: 0;border: 2px dashed #dedede;min-height: 10px;width: 80px;margin-left: 100px;}
.offcanvas-body .dropzone .dz-message {margin: 0;padding: 0;font-size: 12px;}
.simpleedit>button {background-color: #ebebeb;border: 1px solid #9c9c9c;background-color: transparent;border-radius: 6px;}
.simpleedit>button:hover {background-color: var(--azulPlantilla);}
.simpleedit button.submit,
.simpleedit button.abort {text-shadow: 0 0 0 var(--azulPlantilla);}
.simpleedit button.submit:hover,
.simpleedit button.abort:hover {text-shadow: 0 0 0 #fff;}

/*****************************************
Navegacion
*****************************************/
nav {display: flex;justify-content: space-between;align-items: center;position: relative;box-shadow: 0px 0px 28px 0px rgba(32, 102, 156, 0.13);}
#nav-logo>img {height: 65px;background-color: black;padding: 15px 40px;border-radius: 0 6px 6px 0;}
.navbar-toggler {display: none;}
nav ul {list-style: none;padding: 0;margin: 0 20px 0 0;display: flex;gap: var(--gap, 0.7rem);}
nav>ul>li {display: inline;font-size: 0.9rem;padding: 2px;margin: 0 0 0 -3px;}
nav>ul>li:hover {background-color: var(--menuActiveColor);border-radius: 50%;}
nav>ul>li>a {text-decoration: none;}
nav>ul>li.nav-selected {background-color: var(--menuActiveColor);border-radius: 50%;}
nav>ul>li>a>span {display: none;}
nav>ul>li>a>img {height: 26px;}
nav>ul>li>a>img.menu-avatar {border-radius: 50%;}
.submenu-container {position: absolute;top: 70px;right: 3%;width: 300px;height: 440px;padding: 20px;background-color: var(--subMenuBack);border-color: #e2e5ec;border-radius: 6px;border-width: 0;box-shadow: 0 2px 6px rgba(205, 221, 239, 0.1), 0 6px 6px rgba(130, 130, 130, 0.1);z-index: 100;display: none;}
.submenu-title {font-weight: 600;font-size: 15px;color: #212830;margin-bottom: 12px;height: 48px;border-bottom: 1px solid #e2e5ec;display: flex;align-items: center;padding: 0 15px;}
.submenu-title p {font-size: 1.1rem;margin: 0;padding: 0;font-weight: 300;}
.submenu-title span {font-weight: 200;font-size: 0.8rem;}
.submenu-opts {padding: 0;display: grid;gap: 0;grid-template-columns: 1fr;text-align: left;}
.submenu-opts a {background-color: var(--subMenuColorActive);font-weight: 300;color: black;font-size: 0.9rem;white-space: nowrap;display: flex;align-items: center;justify-content: flex-start;border-radius: 6px;}
.submenu-opts a img {height: 40px;padding: 4px 4px 3px 4px;}
.submenu-opts a:hover {background-color: var(--menuActiveColor);}
.submenu-title-profile {padding: 20px 10px;display: grid;grid-template-columns: 1fr;gap: 1rem;color: black;}
.submenu-title-profile p {font-size: 1.1rem;margin: 0;padding: 0;font-weight: 300;}
.submenu-title-profile span {font-weight: 200;font-size: 0.8rem;}
.submenu-title-profile img.submenu-profile-pic {height: 60px;border-radius: 50%;width: 60px;}


/*****************************************
Estilos Generales 
*****************************************/

/* IMPORTANTE: Esta clase es la que encierra en un bloque blanco con sombreado */
/* Es importante usarlo solo en contenidos. Para catálogos y otras opciones */
/* existe su propia clase más abajo */
.inms-card {background-color: var(--backWhite);border-radius: 6px;padding: 12px 12px 10px 10px;border: 1px solid rgba(0, 0, 0, 0);box-shadow: 0 1px 2px rgba(204, 210, 218, .07), 0 2px 4px rgba(204, 210, 218, .07), 0 4px 8px rgba(204, 210, 218, .07), 0 8px 16px rgba(204, 210, 218, .07), 0 16px 32px rgba(204, 210, 218, .07), 0 32px 64px rgba(204, 210, 218, .07);transition: all .15s;box-sizing: border-box;margin-top: 10px;position: relative;z-index: auto;}
.inms-card-content_header {border-bottom: 1px solid rgba(226, 229, 236, .55);background-color: rgba(0, 0, 0, 0);padding: 15px;display: flex;align-items: center;justify-content: space-between;margin-bottom: 1rem;}

/* Barra de parametros de busqueda */
#inms-search {background-color: var(--backWhite);border-radius: 6px;margin-top: 30px;border: 1px solid rgba(0, 0, 0, 0);padding: 10px;box-shadow: 0 1px 2px rgba(204, 210, 218, .07), 0 2px 4px rgba(204, 210, 218, .07), 0 4px 8px rgba(204, 210, 218, .07), 0 8px 16px rgba(204, 210, 218, .07), 0 16px 32px rgba(204, 210, 218, .07), 0 32px 64px rgba(204, 210, 218, .07);transition: all .15s;box-sizing: border-box;text-transform: uppercase;overflow-x: auto;}
#inms-search,
#divBusquedaSimple,
#busquedaLog {display: flex;justify-content: space-between;align-items: center;gap: 1rem;}
#divFiltroAvanzado {display: grid;grid-template-columns: repeat(4, 1fr);gap: 1rem;}
.search-title {font-weight: 600;color: var(--searchTitle);}
.search-title i {margin-left: 10px;}
a.search-title-options {text-transform: uppercase;margin: 0 8px;padding: 3px 16px;border-radius: 1rem;color: var(--searchTitle);font-weight: 500;font-size: 0.8rem;}
a.search-title-options:hover {background-color: var(--searchActive);color: var(--searchActiveText);}
a.section-selected {background-color: var(--searchActive);color: var(--searchActiveText);}
.search-options {margin-right: 6%;}
.search-options a {text-transform: uppercase;margin: 0 8px;padding: 3px 16px;border-radius: 1rem;color: var(--searchTitle);font-weight: 500;font-size: 0.8rem;}
.search-options a:hover {background-color: var(--searchActive);color: var(--searchActiveText);}
.search-options a.active-search {background-color: var(--searchActive);color: var(--searchActiveText);}

/* Tablas */
.inms-tabla {border-collapse: collapse;box-sizing: border-box;caption-side: bottom;color: rgb(65, 80, 95);font-size: 14px;font-weight: 400;line-height: 21px;margin-bottom: 0px;overflow-wrap: break-word;text-align: start;vertical-align: top;width: 100%;overflow-x: auto;}
thead,
tbody,
tfoot,
tr,
td,
th {border-color: inherit;border-top-color: inherit;border-style: solid;border-width: 0;border-top-width: 0px;}
.inms-tabla>thead {vertical-align: bottom;}
.inms-tabla thead th {font-weight: 600;font-size: .8125rem;}
.inms-tabla> :not(caption)>*>* {padding: .5rem .5rem;background-color: transparent;border-bottom: 1px solid var(--borderColorMuted);}
.table-striped>tbody>tr:nth-of-type(2n+1)>* {--bs-table-accent-bg: rgba(0, 0, 0, 0.05);color: var(--body-color);}
.table-striped>tbody>tr:nth-of-type(2n+1)>* {box-shadow: inset 0 0 0 9999px rgba(243, 245, 249, .6);}
.table-hover>tbody>tr:hover {box-shadow: inset 0 0 0 9999px rgba(51, 118, 252, 0.2);}

/* Tipografias */
h1 {font-size: 21px;color: #212830;letter-spacing: -0.2px;text-indent: -1px;margin-top: 20px;font-weight: 400;padding: 12px;}
h2 {font-weight: 600;font-size: 15px;color: #212830;margin-bottom: 0;line-height: 1.4;}

/* Formas y Botones */
*:focus {outline: none;}
.inms-input-group {width: 100%;}
.inms-button-group {text-align: right;min-width: 170px;}
.inms-input-group label {text-transform: capitalize;font-size: 0.8rem;font-weight: 300;}
.inms-input {position: relative;display: flex;}
.inms-input i {position: absolute;bottom: .6rem;right: 0px;font-size: 1rem;color: var(--colorMuted);}
.inms-input input[type="text"],
.inms-input input[type="date"],
.inms-input input[type="mail"],
.inms-input input[type="number"],
.inms-input textarea,
.inms-input .ms-parent {display: block;width: 100%;padding: .375rem 0;font-size: 1rem;font-weight: 400;line-height: 1.5;color: var(--inputColor);background-color: #fff;background-clip: padding-box;border: 0;border-bottom: 1px solid var(--inputBorderColor);-webkit-appearance: none;-moz-appearance: none;appearance: none;transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}
button.ms-choice {border: none;}
.inms-input select {width: 100%;padding: .375rem 0;display: block;font-size: 1rem;font-weight: 400;line-height: 1.5;color: var(--inputColor);background-color: #fff;background-clip: padding-box;border: 0;border-bottom: 1px solid var(--inputBorderColor);transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}
.inms-input:focus {border-bottom: 1px solid var(--inputActiveColor);}

/* Badges */
.badge-primary {background-color: var(--azulPlantilla);}
.badge-secondary {background-color: var(--grisPlantilla);}
.badge-danger {background-color: var(--estatusRojo);}
.badge-success {background-color: var(--verdePlantilla);}
.badge-info {background-color: var(--primaryColorActive);}
.badge-black {background-color: black;}
.badge-muted {background-color: transparent;-webkit-animation: AnimateBG 4s ease infinite;animation: AnimateBG 4s ease infinite;}

@-webkit-keyframes AnimateBG {0% {background-color: var(--grisPlantilla);}

    33% {background-color: transparent;}

    66% {background-color: var(--primaryColorActive);}

    100% {background-color: transparent;}
}

@keyframes AnimateBG {0% {background-color: var(--grisPlantilla);}

    33% {background-color: transparent;}

    66% {background-color: var(--primaryColorActive);}

    100% {background-color: transparent;}
}


/* FoRMATOS ALTAS */
.inms-formas-datos {width: 90%;margin: 30px auto;}
.inms-formas-nav {text-align: left;border-bottom: 1px solid #e3e5eb;display: flex;gap: 2rem;justify-content: flex-start;align-items: center;margin-bottom: 30px;overflow-x: auto;}
.inms-formas-nav a {font-size: 14px;padding: 0;color: var(--grisPlantilla);padding: 8px;font-weight: 400;}
.inms-formas-nav a:hover {color: #212830;}
.inms-formas-nav a.formas_menu_activo {color: #212830;font-weight: 600;position: relative;}
.inms-formas-nav a.formas_menu_activo:before {content: "";position: absolute;bottom: 0;left: 0;right: 0;border-bottom: 1.5px solid #506fd9;}
.inms-formas-datos>div:not(:first-of-type) {background-color: var(--backWhite);border-radius: 6px;border: 1px solid rgba(0, 0, 0, 0);padding: 0 0 20px 0;box-shadow: 0 1px 2px rgba(204, 210, 218, .07), 0 2px 4px rgba(204, 210, 218, .07), 0 4px 8px rgba(204, 210, 218, .07), 0 8px 16px rgba(204, 210, 218, .07), 0 16px 32px rgba(204, 210, 218, .07), 0 32px 64px rgba(204, 210, 218, .07);transition: all .15s;box-sizing: border-box;margin-top: 20px;}
.inms-formas-datos p {display: grid;grid-template-columns: 1fr 1fr;gap: 1rem;width: 95%;margin: 8px auto 16px auto;padding: 6px 6px 20px 6px;font-size: 14px;color: #212830;border-bottom: 1px solid #e3e5eb;}
.inms-formas-datos p label {font-weight: 500;font-size: 14px;}
.inms-formas-datos p label span {font-size: 12px;color: #707984;font-weight: 300;}
.inms-formas-datos p div {display: grid;grid-template-columns: 1fr;gap: 0.5rem;}
.inms-formas-datos p input[type="text"],
.inms-formas-datos p input[type="date"],
.inms-formas-datos p input[type="password"],
.inms-formas-datos p input[type="tel"],
.inms-formas-datos p input[type="number"],
.inms-formas-datos p input[type="mail"],
.inms-formas-datos p textarea,
.inms-formas-datos p select {border: 1px solid #d4d4d4;padding: 8px;border-radius: 4px;color: #41505f;}
.inms-formas-datos p input[type="checkbox"] {}
.contenedor-cargar {display: grid;grid-template-columns: 1fr 1fr;gap: 1rem;width: 95%;margin: 8px auto 16px auto;padding: 6px 6px 20px 6px;font-size: 14px;color: #212830;border-bottom: 1px solid #e3e5eb;}
.contenedor-cargar>div>img {width: 70%;margin: 10px auto;display: block;}
.mapa-enlace {width: 95%;margin: 0 auto;min-height: 200px;background-color: #d4d4d4;}
.formas_actions {display: flex;align-items: center;justify-content: flex-end;width: 90%;margin: 0 auto;}


/*****************************************
Paginacion
*****************************************/
.inms-paginacion {background-color: var(--backWhite);border-radius: 6px;margin-top: 30px;border: 1px solid rgba(0, 0, 0, 0);padding: 10px;box-shadow: 0 1px 2px rgba(204, 210, 218, .07), 0 2px 4px rgba(204, 210, 218, .07), 0 4px 8px rgba(204, 210, 218, .07), 0 8px 16px rgba(204, 210, 218, .07), 0 16px 32px rgba(204, 210, 218, .07), 0 32px 64px rgba(204, 210, 218, .07);transition: all .15s;box-sizing: border-box;text-transform: uppercase;overflow-x: auto;display: flex;justify-content: space-between;align-items: center;}
#divPaginacion>nav {box-shadow: none;}



/*******************************************************
Login
*******************************************************/
#main-login-screen {display: grid;gap: 0;grid-template-columns: 1fr 1fr;height: 100vh;}
#login-banner {background-image: var(--loginBack);background-repeat: no-repeat;background-size: cover;position: relative;}
#login-banner p {font-size: 0.8rem;position: absolute;bottom: 10px;left: 5%;width: 90%;text-align: center;color: white;}
#login-card {background-color: black;color: #fff;}
#login-formato {width: 70%;margin: 10vh auto 0 auto;border-radius: 12px;padding: 24px;background-color: #111111;box-sizing: border-box;max-width: 400px;}
#login-formato img {width: 70%;margin: 30px auto 40px auto;display: block;}
#login-formato input[type="text"],
#login-formato input[type="password"] {border: 1px solid black;width: 100%;margin: 0 auto 20px auto;padding: 12px 8px;border-radius: 6px;font-size: 0.9rem;}
#login-formato button {display: block;margin: 12px auto;border: 1px solid var(--primaryColor);background-color: var(--primaryColor);color: white;padding: 6px 18px;border-radius: 4px;font-size: 0.9rem;}
#login-formato button:hover {background-color: var(--primaryColorActive);border: 1px solid var(--primaryColorActive);}
#login-formato a {border: 1px solid var(--greyBtn);background-color: var(--greyBtn);width: 100%;color: white;padding: 6px 10px;text-align: center;border-radius: 4px;display: inline-block;font-size: 0.9rem;margin-top: 10px;}
#login-formato a:hover {background-color: var(--greyBtnActive);border: 1px solid var(--greyBtnActive);}

/*****************************************
Sistema
*****************************************/
.inms-pop-menu {display: none;width: 130px;box-sizing: border-box;background-color: white;border: 1px solid #d4d4d4;border-radius: 4px;position: absolute;inset: 12px 33px auto auto;margin: 0px;z-index: 10;}
.inms-pop-menu a {width: 100%;display: block;text-decoration: none;padding: 3px 3px 3px 10px;}


/*****************************************
Configuracion
*****************************************/
.inms-subnav-horizontal {text-align: left;border-bottom: 1px solid #e3e5eb;display: flex;gap: 2rem;justify-content: flex-start;align-items: center;margin-bottom: 30px;overflow-x: auto;}
.inms-subnav-horizontal a {font-size: 14px;padding: 0;color: var(--grisPlantilla);padding: 8px;font-weight: 400;}
.inms-subnav-horizontal a:hover {color: #212830;}
.inms-subnav-horizontal a.menu_horizontal_activo {color: #212830;font-weight: 600;position: relative;}
.inms-subnav-horizontal a.menu_horizontal_activo:before {content: "";position: absolute;bottom: 0;left: 0;right: 0;border-bottom: 1.5px solid #506fd9;}
#inms-catalogos-listado {position: relative;}
.inms-catalogos-listado-titulos {display: grid;box-sizing: border-box;padding: 12px 12px 0px 10px;grid-template-columns: 60% 1fr 1fr 20px;gap: 1rem;}
.inms-catalogos-entry {background-color: var(--backWhite);border-radius: 6px;padding: 12px 12px 10px 10px;border: 1px solid rgba(0, 0, 0, 0);box-shadow: 0 1px 2px rgba(204, 210, 218, .07), 0 2px 4px rgba(204, 210, 218, .07), 0 4px 8px rgba(204, 210, 218, .07), 0 8px 16px rgba(204, 210, 218, .07), 0 16px 32px rgba(204, 210, 218, .07), 0 32px 64px rgba(204, 210, 218, .07);transition: all .15s;box-sizing: border-box;margin-top: 10px;position: relative;display: grid;grid-template-columns: 60% 1fr 1fr 20px;gap: 1rem;z-index: auto;}
.catalogo-selected, .tabla-tr-selected {background-color: var(--azulPlantilla);color: #fff;}
.inms-catalogos-entry button {margin: 0;padding: 3px 5px;border: none;border-radius: 3px;}
.inms-pop-menu {display: none;width: 130px;box-sizing: border-box;background-color: white;border: 1px solid #d4d4d4;border-radius: 4px;position: absolute;inset: 12px 33px auto auto;margin: 0px;z-index: 10;}
.inms-pop-menu a {width: 100%;display: block;text-decoration: none;padding: 3px 3px 3px 10px;}






/*****************************************
Poblacion
*****************************************/
#perfil-interno-container {display: grid;grid-template-columns: 250px 1fr;gap: 1rem;box-sizing: border-box;}
.perfil-interno-lateral {padding: 0 8px;}
.perfil-interno-lateral img {width: 95%;margin: 0 auto 10px auto;display: block;border-radius: 18px;}
.perfil-interno-lateral strong {color: var(--azulPlantilla);}

#tabDatos h2, #tabAdministrativos h2 {font-size: 1.2rem;font-weight: 200;color: var(--azulPlantilla);margin: 20px 0 10px 0;}
#tabDatos p, #tabAdministrativos p {display: grid;grid-template-columns: 1fr 1fr;gap: 1rem;margin: 8px auto 16px auto;padding: 12px 20px;font-size: 14px;color: #212830;background-color: var(--backWhite);border-radius: 6px;border: 1px solid rgba(0, 0, 0, 0);box-shadow: 0 1px 2px rgba(204, 210, 218, .07), 0 2px 4px rgba(204, 210, 218, .07), 0 4px 8px rgba(204, 210, 218, .07), 0 8px 16px rgba(204, 210, 218, .07), 0 16px 32px rgba(204, 210, 218, .07), 0 32px 64px rgba(204, 210, 218, .07);transition: all .15s;}
#tabDatos p span, #tabAdministrativos p span {border: 1px solid #d4d4d4;padding: 8px;border-radius: 4px;color: #41505f;}
#tabDatos p strong, #tabAdministrativos p strong {font-weight: 500;}
#tabDatos p strong span, #tabAdministrativos p strong span {font-size: 12px;color: #707984;border: none;padding: 0;margin: 0;border-radius: none;font-weight: 300;}

#tabRostro, #tabHuellas, #tabIris, #tabVoz {margin: 8px auto 16px auto;padding: 12px 20px;font-size: 14px;color: #212830;background-color: var(--backWhite);border-radius: 6px;border: 1px solid rgba(0, 0, 0, 0);box-shadow: 0 1px 2px rgba(204, 210, 218, .07), 0 2px 4px rgba(204, 210, 218, .07), 0 4px 8px rgba(204, 210, 218, .07), 0 8px 16px rgba(204, 210, 218, .07), 0 16px 32px rgba(204, 210, 218, .07), 0 32px 64px rgba(204, 210, 218, .07);transition: all .15s;}


#tabRostro{display: grid;grid-template-columns: repeat(4,1fr);gap: 1rem;}
#tabRostro > div > img, #tabHuellas .tabHuellas_container img{width: 100%;display: block;}
#tabRostro > div > form > button{width: 100%;}
.tabHuellas_container{display: grid;grid-template-columns: repeat(5,1fr);gap: 2rem;}
.huellas_top_margin{margin-top: 40px;}
#tabHuellas_btns{display: grid;grid-template-columns: 1fr;}
#tabHuellas_btns .btn{width: 100%;margin-bottom: 4px;}
.tabRostro-Title{grid-column: span 4;}

.tabIris_container{display: grid;grid-template-columns: repeat(3,1fr);gap: 1rem;}
.tabIris_container > div{text-align: center;}
.tabIris_container > div > img{width: 100%;}
.tabIris_container > div > form > .btn{display: block;width: 100%;margin-top: 8px;}



#interno_huellas-container{display: grid;grid-template-columns: 1fr 1fr;gap: 2rem;margin-bottom: 30px;}
.contenedor_captura_huellas-botones{text-align: right;}


.custom-checkbox{display: flex;justify-content: flex-start;align-items: center;gap: 0.4rem;border-bottom: 1px solid darkgray;padding: 4px 0;}
    .custom-checkbox *, .custom-checkbox ::after, .custom-checkbox ::before {box-sizing: border-box;}
    .custom-checkbox [type=checkbox].substituted {margin: 0;width: 0;height: 0;display: inline;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
    .custom-checkbox [type=checkbox].substituted + label:before {content: "";display: inline-block;vertical-align: top;height: 1.15em;width: 1.15em;margin-right: 0.6em;color: rgba(0, 0, 0, 0.275);border: solid 0.06em;box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em inset, 0 0 0 0.07em transparent inset;border-radius: 0.2em;background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" fill="white" viewBox="0 0 9 9"><rect x="0" y="4.3" transform="matrix(-0.707 -0.7072 0.7072 -0.707 0.5891 10.4702)" width="4.3" height="1.6" /><rect x="2.2" y="2.9" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 12.1877 2.9833)" width="6.1" height="1.7" /></svg>') no-repeat center, white;background-size: 0;will-change: color, border, background, background-size, box-shadow;transform: translate3d(0, 0, 0);transition: color 0.1s, border 0.1s, background 0.15s, box-shadow 0.1s;}
    .custom-checkbox [type=checkbox].substituted:enabled:active + label:before, .custom-checkbox [type=checkbox].substituted:enabled + label:active:before {box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em transparent inset, 0 0 0 0.07em rgba(0, 0, 0, 0.1) inset;background-color: #f0f0f0;}
    .custom-checkbox [type=checkbox].substituted:checked + label:before {background-color: #3B99FC;background-size: 0.75em;color: rgba(0, 0, 0, 0.075);}
    .custom-checkbox [type=checkbox].substituted:checked:enabled:active + label:before, .custom-checkbox [type=checkbox].substituted:checked:enabled + label:active:before {background-color: #0a7ffb;color: rgba(0, 0, 0, 0.275);}
    .custom-checkbox [type=checkbox].substituted:focus + label:before {box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em transparent inset, 0 0 0 0.07em rgba(0, 0, 0, 0.1) inset, 0 0 0 3.3px rgba(65, 159, 255, 0.55), 0 0 0 5px rgba(65, 159, 255, 0.3);}
    .custom-checkbox [type=checkbox].substituted:focus:active + label:before,
    .custom-checkbox [type=checkbox].substituted:focus + label:active:before {box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em transparent inset, 0 0 0 0.07em rgba(0, 0, 0, 0.1) inset, 0 0 0 3.3px rgba(65, 159, 255, 0.55), 0 0 0 5px rgba(65, 159, 255, 0.3);}
    .custom-checkbox [type=checkbox].substituted:disabled + label:before {opacity: 0.5;}

    .custom-checkbox [type=checkbox].substituted.dark + label:before {color: rgba(255, 255, 255, 0.275);background-color: #222;background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" fill="rgba(34, 34, 34, 0.999)" viewBox="0 0 9 9"><rect x="0" y="4.3" transform="matrix(-0.707 -0.7072 0.7072 -0.707 0.5891 10.4702)" width="4.3" height="1.6" /><rect x="2.2" y="2.9" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 12.1877 2.9833)" width="6.1" height="1.7" /></svg>');}
    .custom-checkbox [type=checkbox].substituted.dark:enabled:active + label:before,
    .custom-checkbox [type=checkbox].substituted.dark:enabled + label:active:before {background-color: #444;box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em transparent inset, 0 0 0 0.07em rgba(255, 255, 255, 0.1) inset;}
    .custom-checkbox [type=checkbox].substituted.dark:checked + label:before {background-color: #a97035;color: rgba(255, 255, 255, 0.075);}
    .custom-checkbox [type=checkbox].substituted.dark:checked:enabled:active + label:before,
    .custom-checkbox [type=checkbox].substituted.dark:checked:enabled + label:active:before {background-color: #c68035;color: rgba(0, 0, 0, 0.275);}

.kdc-botones-opcion{width: 90%;margin: 0px auto;text-align: right;}
.kdc-audio-play{width: 90%;margin: 0px auto 30px auto;}

#kdc-grabar-container{display: grid;grid-template-columns: 1fr 1fr;gap: 2rem;}

/*****************************************
Reportes
*****************************************/



/*****************************************
CAS
*****************************************/


/*****************************************
Perfil
*****************************************/




/****************************************************
b) Pantallas HD > 1200 px
*****************************************************/
@media (min-width: 1200px) {}

/****************************************************
c) Pantallas Móviles < 800 px
*****************************************************/
@media (max-width: 800px) {}

/****************************************************
Ajustes Móvil base 640 px
*****************************************************/
@media (max-width: 640px) {

    /* NAV */
    #navbar {display: none;position: fixed;top: 0px;right: 0px;background-color: white;width: 60vw;height: 100vh;box-sizing: border-box;padding: 60px 20px 20px 20px;margin: 0;flex-direction: column;transition: transform 2s ease;z-index: 100;}

    nav>ul>li.nav-selected {border-radius: 10px;}

    nav>ul>li>a {display: flex;gap: 6px;align-items: center;color: black;}

    nav>ul>li>a>span {display: block;}

    nav>ul>li:hover {border-radius: 10px;}

    .navbar-toggler {display: block;margin-right: 8px;font-size: 24px;z-index: 999;}

    /* Inputs */
    .inms-input-group {width: 100%;max-width: 300px;}

    /* Offcanvas */
    .offcanvas {--bs-offcanvas-width: 90vw;}

}

/****************************************************
Ajustes Móvil landscape base 480 px
*****************************************************/
@media (max-width: 490px) {}

/****************************************************
Ajustes Móvil base 320 px
*****************************************************/
@media (max-width: 400px) {}





/*******************************************************
d) Extras
*******************************************************/

.ui_tpicker_second_label.ui_tpicker_unit_hide,
.ui_tpicker_second.ui_tpicker_unit_hide,
.ui_tpicker_millisec_label.ui_tpicker_unit_hide,
.ui_tpicker_millisec.ui_tpicker_unit_hide,
.ui_tpicker_microsec_label.ui_tpicker_unit_hide,
.ui_tpicker_microsec.ui_tpicker_unit_hide,
.ui_tpicker_timezone_label.ui_tpicker_unit_hide,
.ui_tpicker_timezone.ui_tpicker_unit_hide {display: none;}

.container_crop {margin: 20px auto;width: 480px;height: 640px;}

.container_crop img {width: 480px;height: 640px;}