/* dialogo */
.dialogo {
    visibility: hidden;
}

.dialogo.activo {
    z-index: 4;
    visibility: visible;
}

.dialogo>.contenido {
    position: relative;
    display: block;
    padding: 20px 10px 30px 10px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 230px);
}

.dialogo>.pie {
    position: relative;
    display: block;
    bottom: 10px;
    left: 0;
    right: 0;
    padding: 0 10px;
}

.dialogo>.contenedor-titulo {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    padding: 5px 10px;
}

.dialogo>.contenedor-titulo .subtitulo {
    font-weight: var(--letra-mediana);
}

.dialogo>.contenedor-titulo>.opciones {
    position: relative;
    padding-top: 10px;
}

.dialogo .dialogo-opciones {
    position: absolute;
    right: 10px;
    top: 10px;
}

.dialogo>.contenedor-titulo>.opciones>a,
.dialogo .dialogo-opciones>a {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: var(--color-negro);
    font-weight: var(--letra-delgada);
    font-size: 1.2em;
    margin: 0 2px;
    line-height: 25px;
}

.dialogo>.contenedor-titulo>.opciones>a.cerrar,
.dialogo .dialogo-opciones>a.cerrar {
    color: var(--color-negro);
    font-weight: var(--letra-gruesa);
    font-size: 1.7em;
}

.dialogo>.contenedor-titulo>.opciones>a.mover,
.dialogo .dialogo-opciones>a.mover {
    cursor: move;
}



.dialogo>.pie>div {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10%;
}

.dialogo>.pie>div>div {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 10px;
}

.dialogo>.pie>div>div>a {
    position: relative;
    width: 100%;
}


.dialogo-lateral .pie {
    position: absolute;
    display: block;
    bottom: 10px;
    left: 0;
    right: 0;
}

/* mensaje sistema */
.mensaje-sistema {
    position: fixed;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 10px;
    opacity: 1;
    z-index: 6;
    background-color: var(--color-blanco);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-inferior-derecho);
    -webkit-box-shadow: var(--box-shadow-inferior-derecho);
    -moz-box-shadow: var(--box-shadow-inferior-derecho);
}

.mensaje-sistema>i {
    color: var(--color-negro);
    font-size: 34px;
}

.mensaje-sistema>div>label {
    font-weight: var(--letra-gruesa);
}

.mensaje-sistema>div>p {
    font-size: var(--font-size-13px);
    font-weight: var(--letra-semi-gruesa);
    margin-bottom: 0;
    color: var(--color-negro);
}

.mensaje-sistema>div.icono {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

.mensaje-sistema>div.icono:before {
    font-family: 'Font Awesome 5 Free';
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    /*border-radius: 50vh;*/
}

.mensaje-sistema .cerrar-mensaje-informativo {
    /*border-left: 1px solid var(--color-gris-300);*/
    margin-left: auto;
}

.mensaje-sistema .cerrar-mensaje-informativo,
.mensaje-sistema .mensaje {
    align-self: center;
}

.mensaje-sistema .cerrar-mensaje-informativo a {
    padding: 10px;
    font-size: 24px;
    color: var(--color-gris-300);
}



.mensaje-sistema.correcto>div:first-of-type {
    background-color: var(--color-verde);
}


.mensaje-sistema.correcto>div.icono:before {
    content: '\f00c';
    font-size: 24px;
    /*opacity: 0.65;*/
    color: var(--color-blanco);
    padding: 8px;
    font-weight: 400;
}

.mensaje-sistema.advertencia>div:first-of-type {
    background-color: var(--color-amarillo);
}

.mensaje-sistema.advertencia>div.icono:before {
    content: '\f12a';
    font-size: 22px;
    color: var(--color-blanco);
    padding: 8px;
    font-weight: 600;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

.mensaje-sistema.error>div:first-of-type {
    background-color: var(--color-rojo);
}

.mensaje-sistema.error>div.icono:before {
    content: '\f00d';
    font-size: 24px;
    color: var(--color-blanco);
    /*border-radius: 50vh;*/
    /*padding: 5px 8px;*/
    padding: 8px;
    font-weight: 400;
}

.mensaje-sistema.despedida>div:first-of-type {
    background-color: var(--color-auxiliar-100);
}

.mensaje-sistema.despedida>div.icono:before {
    /*content: '\f25b';*/
    content: '\f256';
    font-size: 24px;
    color: var(--color-secundario);
    /*border-radius: 50vh;
        padding: 5px 8px;*/
    padding: 8px;
    font-weight: 600;
}


/* menu contextual */
.menu-contextual {
    position: relative;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    transition: all 0.5s ease;
}

.menu-contextual>a {
    position: relative;
    background-color: transparent;
    /*color: var(--color-negro);
        border-radius: 50%;
        padding: 5px 8px;
        border: 1px solid var(--color-gris-300);*/
    border: 1px solid var(--color-gris-300);
    color: var(--color-negro);
    font-weight: var(--letra-gruesa);
    border-radius: 50%;
    padding: 5px 8px;
}


.menu-contextual>ul {
    position: absolute;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    top: 0;
    right: 90%;
    z-index: 0;
    /*padding: 5px 0;*/
    list-style: none;
    width: max-content;
    font-size: var(--font-size-13px);
    background-color: var(--color-blanco);
    color: var(--color-negro);
    border-radius: var(--border-radius);
    transition: all 0.5s ease;
    box-shadow: var(--box-shadow);
}

.menu-contextual>ul>li>a {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: center;
    gap: 15px;
    padding: 10px 8px;
    color: var(--color-negro);
    text-transform: capitalize;
}

.menu-contextual>ul>li>a:hover {
    background-color: var(--color-gris-100);
}

.menu-contextual>ul>li>a:first-child:hover {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.menu-contextual>ul>li>a:last-child:hover {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}


.menu-contextual>ul>li>a>i {
    color: var(--color-negro) !important;
    width: 20px;
}

.menu-contextual>ul.mostrandose {
    right: 100%;
    opacity: 1;
    z-index: 1;
    visibility: visible;
    transition: all 0.5s ease;
}


/* icono menu hamburguesa */
.hamburguesa {
    /*width: 20px;
    height: 20px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.hamburguesa .line {
    width: 15px;
    display: inline-block;
    transition: background-color 0.3s;
}

.hamburguesa.open .line,
.hamburguesa.open .line:before,
.hamburguesa.open .line:after {

    background-color: var(--color-negro) !important;
    border-radius: var(--border-radius);
}

.line,
.line:before,
.line:after {
    width: 25px;
    height: 2px;
    background-color: var(--color-blanco);
    border-radius: var(--border-radius);
}

.line:before,
.line:after {
    content: "";
    position: absolute;
    transition: transform 0.3s;
}

.line:before {
    transform: translateY(-10px);
}

.line:after {
    transform: translateY(10px);
}

.hamburguesa.open .line {
    background-color: transparent;
}

.hamburguesa.open .line::before {
    transform: rotate(-225deg);
}

.hamburguesa.open .line::after {
    transform: rotate(225deg);
}


.sticky {
    position: sticky;
    display: block;
    top: 90px;
    background-color: var(--color-blanco);
}

#capa-cargando {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 5;
}

.reloj {
    position: absolute;
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 2px solid var(--color-auxiliar-300);
    margin-right: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
}

.reloj::after {
    content: "";
    position: absolute;
    display: block;
    bottom: 50%;
    left: 50%;
    transform-origin: 0% 100%;
    width: 2px;
    height: 36px;
    background: var(--color-primario);
    animation: reloj 1s infinite linear;
}

@keyframes reloj {
    to {
        transform: rotate(356deg);
    }
}


/* botones en general actualizar */
a.actualizar.cargando {
    animation: girar 1s infinite linear;
}

@keyframes girar {
    to {
        transform: rotate(360deg);
    }
}

/* dialogo de confirmacion */
#dgoDataAccionConfirmacion .contenido .icono i {
    font-size: 7rem;
    color: var(--color-auxiliar-300);
    margin-bottom: 30px;
}

#dgoDataAccionConfirmacion .contenido :is(h1, h2, h3, h4, h5, h6) {
    position: relative;
    margin-bottom: 20px;
}


#dgoDataAccionConfirmacion .contenido p {
    position: relative;
    margin-bottom: 10px;
}

/* listas con tablas */
.lista .encabezado {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 20px 0;
}


.lista .lista-no-registros {
    position: relative;
    display: inline-block;
    margin-top: 50px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.lista .lista-no-registros * {
    position: relative;
    display: block;
    margin-bottom: 30px;
}

.lista .lista-no-registros p a {
    position: relative;
    display: inline;
    color: var(--color-secundario);
    text-decoration: underline;
}

.lista .lista-no-registros i {
    font-size: 10em;
    color: var(--color-auxiliar-300);
}

.lista .lista-no-registros i.gris {
    color: var(--color-gris-300);
}


.lista .paginacion {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: auto;
}

.lista .paginacion .total-registros {
    color: var(--color-negro);
    font-size: 22px;
    font-weight: var(--letra-super-gruesa);
    border-right: 1px dotted var(--color-gris-300);
    padding-right: 10px;
}

.lista .paginacion .total-registros>span {
    position: absolute;
    bottom: 0;
    right: 3px;
    background-color: var(--color-gris-100);
    color: var(--color-gris-400);
    border-radius: 20px;
    font-size: 13px;
    padding: 0 2px;
    font-weight: var(--letra-super-gruesa);
}

.lista .paginacion div a,
li.paginate_button a,
.dt-buttons .btn {
    color: var(--color-negro);
    font-size: 18px;
    font-weight: var(--letra-mediana);
    /*margin: 0 3px;*/
    border-radius: 50%;
    padding: 4px 12px;
}

.lista .paginacion div a:hover,
ul.pagination li a:hover {
    background-color: var(--color-gris-200);
}

.lista .paginacion div a.seleccionado,
ul.pagination li.active a {
    color: var(--color-primario);
    background-color: var(--color-auxiliar-100);
}

.lista .paginacion>div {
    display: flex;
    min-height: min-content;
    /* needs vendor prefixes */
}

ul.pagination {
    position: relative;
    display: flex;
}

ul.pagination li {
    list-style: none;
}

.dataTables_wrapper>div {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}


/*.dataTables_filter {
    margin-bottom: 20px;
}*/

.dataTables_filter+div {
    width: 100%;
    margin-bottom: 10px;
}

.dataTables_filter {
    margin-left: auto;
}


.dataTables_filter input[type=search] {
    position: relative;
    display: block;
    padding: 8px 10px 10px 30px;
    margin-bottom: 0;
    color: var(--color-negro);
    font-weight: var(--letra-semi-gruesa);
    font-size: var(--font-size);
    border-radius: var(--border-radius);
    resize: none;
    line-height: 20px;
    font-family: var(--font-family);
    background-color: var(--color-blanco);
    border: 1px solid var(--color-gris-300);
    outline: none;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}

.dataTables_filter input[type=search]:focus {
    box-shadow: none;
    border: 1px solid var(--color-auxiliar-300) !important;
}

.dataTables_filter>label:before {
    content: "\f002";
    position: absolute;
    font-family: "FontAwesome";
    top: 12px;
    left: 10px;
    z-index: 1;
    font-size: 16px;
    /*font-family: "Font Awesome 5 Free";*/
}


.lista-estados {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 30px;
    gap: 10px;
}

.lista-estados a {
    position: relative;
    padding: 5px;
    border-radius: var(--border-radius);
    background-color: var(--color-gris-300);
    color: var(--color-negro);
}

.lista-opciones {
    position: fixed;
    display: none;
    flex-direction: column;
    bottom: 30px;
    right: 30px;
    gap: 10px;
    transition: all 0.5s ease;
}

.lista-opciones.mostrandose {
    display: flex;
    transition: all 0.5s ease;
}

.lista-opciones a {
    position: relative;
    /*background-color: var(--color-gris-300);
        color: var(--color-negro);*/
    background-color: var(--color-blanco);
    color: var(--color-negro);
    border-radius: 100%;
    box-shadow: 0 0.5rem 0.875rem rgba(0, 0, 0, .5);
    padding: 10px 15px;
    font-size: 20px;
}

.lista-opciones a:not(.subir) {
    background-color: var(--color-negro);
    color: var(--color-blanco);
}

.lista-opciones a:hover>i {
    transform: scale(0.8);
}

.lista-opciones a>span.contador {
    position: absolute;
    display: block;
    bottom: 15%;
    right: 10%;
    background-color: var(--color-gris-200);
    color: var(--color-negro);
    border-radius: 100%;
    padding: 0 2px;
}

/* lista eliminar */
.eliminar-registro>div {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    grid-gap: 10px;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    top: 0;
    right: -15px;
    z-index: 0;
    list-style: none;
    width: max-content;
    padding: 8px;
    /*text-transform: capitalize;*/
    font-size: var(--font-size-13px);
    background-color: var(--color-blanco);
    color: var(--color-negro);
    border-radius: var(--border-radius);
    transition: all 0.5s ease;
    box-shadow: var(--box-shadow-inferior-derecho);
}

.eliminar-registro>div .boton {
    padding: 0 8px !important;
}

.eliminar-registro>div>div:first-of-type,
.eliminar-registro>div>div:first-of-type>i {
    color: var(--color-rojo);
    font-weight: var(--letra-gruesa);
}


.eliminar-registro>a.mostrandose+div {
    right: 0;
    opacity: 1;
    z-index: 1;
    visibility: visible;
    transition: all 0.5s ease;
}

/*.contador-lista-detalle .contador {
    }*/

/*.eliminar-registro {
}*/

.eliminar-registro i {
    color: var(--color-negro);
}

.registro-estado {
    /*position: relative;
    display: block;*/
    /*width: 100%;*/
    border-radius: 8px;
    font-weight: var(--letra-gruesa);
    padding: 5px;
    font-size: 13px;
}

.contenedor-titulo-formulario .registro-estado {
    /*font-size: 13px;*/
    margin-bottom: 5px;
    padding: 5px 8px;
}

.registro-estado.nuevo,
.registro-estado.nueva {
    background-color: var(--color-gris-200);
    color: var(--color-negro);
}

.registro-estado.aprobado,
.registro-estado.aprobada {
    background-color: var(--color-verde-auxiliar);
    color: var(--color-verde);
}

.registro-estado.enviado,
.registro-estado.enviada {
    background-color: var(--color-amarillo-auxiliar);
    color: var(--color-amarillo);
}

.registro-estado.cancelado,
.registro-estado.cancelada {
    background-color: var(--color-rojo-auxiliar);
    color: var(--color-rojo);
}

.registro-estado.rechazado,
.registro-estado.rechazada {
    background-color: var(--color-rojo-auxiliar);
    color: var(--color-rojo);
}

.registro-estado.aplicado,
.registro-estado.aplicada {
    /*background-color: var(--color-input-otro-auxiliar);
    color: var(--color-input-otro);*/
    background-color: var(--color-verde-auxiliar);
    color: var(--color-verde);
}

.registro-estado.finalizado,
.registro-estado.finalizada {
    background-color: var(--color-gris-400);
    color: var(--color-blanco);
}

.registro-estado.PENDIENTE {
    background-color: var(--color-cafe-auxiliar);
    color: var(--color-cafe);
}

.registro-estado.otro {
    background-color: var(--color-gris-300);
    color: var(--color-negro);
}

.contador-lista-detalle {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: var(--letra-semi-gruesa);
}

.registro-estado.azul {
    background-color: var(--color-azul-auxiliar-300);
    color: var(--color-azul);
}

.registro-estado.naranja {
    background-color: var(--color-naranja-auxiliar-300);
    color: var(--color-naranja);
}

.registro-estado.verde,
.registro-estado.AUTORIZADO {
    background-color: var(--color-verde-auxiliar-300);
    color: var(--color-verde);
}

.registro-estado.morado {
    background-color: var(--color-morado-auxiliar-300);
    color: var(--color-morado);
}

.registro-estado.cafe {
    background-color: var(--color-cafe-auxiliar-300);
    color: var(--color-cafe);
}

.registro-estado.rojo,
.registro-estado.RECHAZADO {
    background-color: var(--color-rojo-auxiliar-300);
    color: var(--color-rojo);
}

.registro-estado.amarillo {
    background-color: var(--color-amarillo-auxiliar-300);
    color: var(--color-amarillo);
}

/* historial */
.historial-renglon {
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 10px;
    /*margin-bottom: 10px;
    padding: 10px 5px;*/
}

.historial-renglon .dia {
    align-self: flex-start;
    font-size: 22px;
    font-weight: var(--letra-mediana);
}

.historial-renglon .dias-transcurridos {
    margin-top: 30px;
    color: var(--color-gris-400);
    font-weight: var(--letra-mediana);
}

.historial-renglon:first-of-type .dias-transcurridos {
    margin-top: 0;
    display: none;
}


.historial-renglon>div.informacion {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    padding: 5px 0px 5px 30px;
}

.historial-renglon .estado {
    font-weight: var(--letra-semi-gruesa);
    margin-bottom: 3px;
}

.historial-renglon .fecha-hora {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    color: var(--color-gris-400);
    font-weight: var(--letra-mediana);
    /*border-bottom: 1px solid var(--color-gris-200);*/
    padding-bottom: 15px;
}

.historial-renglon .fecha-hora span {
    color: var(--color-gris-500);
    font-weight: var(--letra-semi-gruesa);
    text-transform: capitalize;
}



.historial-renglon .fecha-hora i {
    color: var(--color-gris-400);
}

.historial-renglon .fecha-hora .nombre-usuario {
    text-transform: capitalize;
}

.historial-renglon>div.informacion>div {
    position: relative;
    display: flex;
    flex-direction: column;
}

.historial-renglon .usuario {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /*margin-left: auto;*/
    flex-direction: row;
    font-size: 13px;
    gap: 5px;
    color: var(--color-gris-400);
}

.historial-renglon img {
    /*display: none;*/
    width: 40px;
    height: 40px;
    border-radius: 100%;
}

/* historial 3 */
.historial-3 {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/*.historial-3 > div:nth-of-type(2n+1){
        background-color: var(--color-gris-100);
    }*/

.historial-3>div {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-bottom: 1px dotted var(--color-gris-200);
    padding-bottom: 5px;
    /*border-bottom: 1px solid var(--color-gris-100);*/
}

.historial-3 div>div {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex: 1;
}

.historial-3 div>div img {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    margin-right: 5px;
}

.historial-3 div.estado {
    font-weight: var(--letra-gruesa);
}

.historial-3 div.fecha-hora {
    font-weight: var(--letra-mediana);
    color: var(--color-gris-500);
}

.historial-3 div.usuario {
    font-weight: var(--letra-mediana);
    text-transform: uppercase;
    color: var(--color-gris-500);
}

/* .input-archivo-drag */
.input-archivo-drag {
    position: relative;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-archivo-drag .file-drop-area {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%;
    padding: 5px;
    background-color: var(--color-blanco);
    border-radius: var(--border-radius);
    /*box-shadow: 0 10px 20px rgba(0,0,0,0.1);*/
    /*box-shadow: var(--box-shadow-inferior-derecho);*/
    border: 1px dotted var(--color-gris-300);
    transition: 0.3s;
}

.input-archivo-drag .file-drop-area.is-active {
    background-color: var(--color-gris-200);
}

.input-archivo-drag .file-drop-area:hover {
    background-color: var(--color-gris-100);
}

.input-archivo-drag .fake-btn {
    /*display: none;*/
    flex-shrink: 0;
    background-color: var(--color-gris-200);
    border-radius: var(--border-radius);
    padding: 5px 10px;
    margin-right: 10px;
    font-weight: var(--letra-semi-gruesa);
    color: var(--color-negro);
    /*border: 1px dotted var(--color-gris-300);*/
}

.input-archivo-drag:hover .fake-btn {
    /*display: none;*/
    flex-shrink: 0;
    background-color: var(--color-gris-100);
    color: var(--color-primario);
    cursor: pointer;
    /*border: 1px dotted var(--color-gris-300);*/
}

.input-archivo-drag .file-msg {
    color: var(--color-negro);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.input-archivo-drag .item-delete {
    display: none;
    position: absolute;
    right: 10px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    color: var(--color-rojo);
}

.input-archivo-drag .item-delete:before {
    /*content: "\f2ed";*/
    content: "\f1f8";
    font-family: 'Font Awesome 5 Free';
    font-weight: var(--letra-gruesa);
    position: absolute;
    right: 0;
    transition: 0.3s;
    top: 0;
    z-index: 1;
    color: var(--color-rojo);
    /*width: 100%;
            height: 100%;*/
    /*background-size: cover;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='%23bac1cb' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 438.5 438.5'%3e%3cpath d='M417.7 75.7A8.9 8.9 0 00411 73H323l-20-47.7c-2.8-7-8-13-15.4-18S272.5 0 264.9 0h-91.3C166 0 158.5 2.5 151 7.4c-7.4 5-12.5 11-15.4 18l-20 47.7H27.4a9 9 0 00-6.6 2.6 9 9 0 00-2.5 6.5v18.3c0 2.7.8 4.8 2.5 6.6a8.9 8.9 0 006.6 2.5h27.4v271.8c0 15.8 4.5 29.3 13.4 40.4a40.2 40.2 0 0032.3 16.7H338c12.6 0 23.4-5.7 32.3-17.2a64.8 64.8 0 0013.4-41V109.6h27.4c2.7 0 4.9-.8 6.6-2.5a8.9 8.9 0 002.6-6.6V82.2a9 9 0 00-2.6-6.5zm-248.4-36a8 8 0 014.9-3.2h90.5a8 8 0 014.8 3.2L283.2 73H155.3l14-33.4zm177.9 340.6a32.4 32.4 0 01-6.2 19.3c-1.4 1.6-2.4 2.4-3 2.4H100.5c-.6 0-1.6-.8-3-2.4a32.5 32.5 0 01-6.1-19.3V109.6h255.8v270.7z'/%3e%3cpath d='M137 347.2h18.3c2.7 0 4.9-.9 6.6-2.6a9 9 0 002.5-6.6V173.6a9 9 0 00-2.5-6.6 8.9 8.9 0 00-6.6-2.6H137c-2.6 0-4.8.9-6.5 2.6a8.9 8.9 0 00-2.6 6.6V338c0 2.7.9 4.9 2.6 6.6a8.9 8.9 0 006.5 2.6zM210.1 347.2h18.3a8.9 8.9 0 009.1-9.1V173.5c0-2.7-.8-4.9-2.5-6.6a8.9 8.9 0 00-6.6-2.6h-18.3a8.9 8.9 0 00-9.1 9.1V338a8.9 8.9 0 009.1 9.1zM283.2 347.2h18.3c2.7 0 4.8-.9 6.6-2.6a8.9 8.9 0 002.5-6.6V173.6c0-2.7-.8-4.9-2.5-6.6a8.9 8.9 0 00-6.6-2.6h-18.3a9 9 0 00-6.6 2.6 8.9 8.9 0 00-2.5 6.6V338a9 9 0 002.5 6.6 9 9 0 006.6 2.6z'/%3e%3c/svg%3e");*/
}


/*input-archivo-drag .item-delete:after {
            content: "";
            position: absolute;
            opacity: 0;
            left: 50%;
            top: 50%;
            width: 100%;
            height: 100%;
            transform: translate(-50%, -50%) scale(0);
            background-color: var(--color-gris-400);
            border-radius: 50%;
            transition: .3s;
        }

        .input-archivo-drag .item-delete:hover:after {
            transform: translate(-50%, -50%) scale(2.2);
            opacity: 1;
        }*/

.input-archivo-drag .item-delete:hover:before {
    color: var(--color-negro) !important;
    /*background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='%234f555f' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 438.5 438.5'%3e%3cpath d='M417.7 75.7A8.9 8.9 0 00411 73H323l-20-47.7c-2.8-7-8-13-15.4-18S272.5 0 264.9 0h-91.3C166 0 158.5 2.5 151 7.4c-7.4 5-12.5 11-15.4 18l-20 47.7H27.4a9 9 0 00-6.6 2.6 9 9 0 00-2.5 6.5v18.3c0 2.7.8 4.8 2.5 6.6a8.9 8.9 0 006.6 2.5h27.4v271.8c0 15.8 4.5 29.3 13.4 40.4a40.2 40.2 0 0032.3 16.7H338c12.6 0 23.4-5.7 32.3-17.2a64.8 64.8 0 0013.4-41V109.6h27.4c2.7 0 4.9-.8 6.6-2.5a8.9 8.9 0 002.6-6.6V82.2a9 9 0 00-2.6-6.5zm-248.4-36a8 8 0 014.9-3.2h90.5a8 8 0 014.8 3.2L283.2 73H155.3l14-33.4zm177.9 340.6a32.4 32.4 0 01-6.2 19.3c-1.4 1.6-2.4 2.4-3 2.4H100.5c-.6 0-1.6-.8-3-2.4a32.5 32.5 0 01-6.1-19.3V109.6h255.8v270.7z'/%3e%3cpath d='M137 347.2h18.3c2.7 0 4.9-.9 6.6-2.6a9 9 0 002.5-6.6V173.6a9 9 0 00-2.5-6.6 8.9 8.9 0 00-6.6-2.6H137c-2.6 0-4.8.9-6.5 2.6a8.9 8.9 0 00-2.6 6.6V338c0 2.7.9 4.9 2.6 6.6a8.9 8.9 0 006.5 2.6zM210.1 347.2h18.3a8.9 8.9 0 009.1-9.1V173.5c0-2.7-.8-4.9-2.5-6.6a8.9 8.9 0 00-6.6-2.6h-18.3a8.9 8.9 0 00-9.1 9.1V338a8.9 8.9 0 009.1 9.1zM283.2 347.2h18.3c2.7 0 4.8-.9 6.6-2.6a8.9 8.9 0 002.5-6.6V173.6c0-2.7-.8-4.9-2.5-6.6a8.9 8.9 0 00-6.6-2.6h-18.3a9 9 0 00-6.6 2.6 8.9 8.9 0 00-2.5 6.6V338a9 9 0 002.5 6.6 9 9 0 006.6 2.6z'/%3e%3c/svg%3e");*/
}

.input-archivo-drag .file-input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
    opacity: 0;
}

.input-archivo-drag .file-input:focus {
    outline: none;
}


.input-textarea .input-total-caracteres {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: var(--color-gris-400);
}

/* formulario opciones */
.formulario-opciones {
    position: fixed;
    display: block;
    bottom: 30px;
    right: 30px;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius-dialogo);
    background-color: rgba(255, 255, 255, .15);
    backdrop-filter: blur(3px);
}

.formulario-opciones ul {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*gap: 10px;*/
    list-style: none;
    transition: all 0.5s ease;
}

/*.formulario-opciones ul li {
            padding: 5px;
        }*/

.formulario-opciones ul li a {
    position: relative;
    display: flex;
    /*background-color: var(--color-gris-300);
            color: var(--color-negro);*/
    /*background-color: var(--color-blanco);*/
    color: var(--color-negro);
    /*border-radius: 100%;*/
    /*box-shadow: 0 0.5rem 0.875rem rgba(0,0,0,.5);*/
    font-size: 22px;
    padding: 12px 15px;
    /*border: 1px solid transparent;*/
}

/*.formulario-opciones > *.extra {
            font-weight: var(--letra-mediana);
        }*/

.formulario-opciones ul li.separador:before {
    content: "";
    display: flex;
    border-top: 1px solid var(--color-gris-300);
    padding: 5px 0px;
}

.formulario-opciones ul li a:hover>i {
    transform: scale(0.8);
}

.formulario-opciones ul li a>span {
    position: absolute;
    display: inline-block;
    visibility: hidden;
    opacity: 0;
    right: 40%;
    top: 50%;
    width: max-content;
    font-size: var(--font-size-13px);
    background-color: var(--color-negro);
    color: var(--color-blanco);
    padding: 2px 5px;
    border-radius: var(--border-radius);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transition: all 0.5s ease;
}

/*.formulario-opciones ul li a > span {
        top: 50%;
    }*/


/*.formulario-opciones ul li a > span {
        top: calc(50% + 15px);
    }*/

.formulario-opciones ul li a:hover>span {
    right: 110%;
    opacity: 1;
    visibility: visible;
    transition: all 0.5s ease;
}


.formulario .renglon {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px 30px;
}

/* mensaje informativo */
.mensaje-informativo {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    /*flex-wrap: wrap;*/
    background-color: var(--color-gris-200);
    border-radius: var(--border-radius);
    padding: 10px;
    margin-bottom: 30px;
    box-shadow: var(--box-shadow-inferior-derecho);
    -moz-box-shadow: var(--box-shadow-inferior-derecho);
    -webkit-box-shadow: var(--box-shadow-inferior-derecho);
}

.mensaje-informativo.no-sombra {
    box-shadow: none;
}

.mensaje-informativo>i {
    font-size: 28px;
    color: var(--color-negro);
    /*align-self: flex-start;*/
}

.mensaje-informativo>i.fa-duotone {
    background-color: var(--color-gris-400);
    color: var(--color-blanco);
    border-radius: 50%;
}

.mensaje-informativo p {
    margin-bottom: 0;
    font-weight: var(--letra-semi-gruesa);
    color: var(--color-negro);
}

.mensaje-informativo span.titulo {
    display: block;
    font-weight: var(--letra-gruesa);
    color: var(--color-negro);
}

.mensaje-informativo .contador {
    border-radius: 50%;
    background-color: var(--color-gris-300);
    color: var(--color-gris-500);
    padding: 4px;
    font-size: 14px;
    font-weight: var(--letra-super-gruesa);
}

.mensaje-informativo .contador.ancho {
    padding: 4px 8px;
}

.mensaje-informativo a,
.mensaje-informativo button {
    margin-left: auto;
    background-color: var(--color-blanco);
    color: var(--color-gris-500);
    border-radius: var(--border-radius);
    padding: 8px;
    /*box-shadow: var(--box-shadow-inferior-derecho);*/
}


.mensaje-informativo a i {
    color: var(--color-blanco) !important;
}

/*.mensaje-informativo span {
        font-weight: var(--letra-gruesa);
    }*/

.mensaje-informativo.error {
    background-color: var(--color-rojo-auxiliar-200);
}

.mensaje-informativo.error>i {
    color: var(--color-rojo);
    border-radius: 50%;
}

.mensaje-informativo.error>i.fa-duotone {
    background-color: var(--color-rojo);
    color: var(--color-blanco);
    border-radius: 50%;
}

.mensaje-informativo.error .contador {
    background-color: var(--color-rojo);
    color: var(--color-blanco);
}

/*.mensaje-informativo.error span {
            color: var(--color-rojo);
            font-weight: var(--letra-gruesa);
        }*/

.mensaje-informativo.advertencia {
    background-color: var(--color-amarillo-auxiliar-200);
}

.mensaje-informativo.advertencia>i {
    color: var(--color-amarillo);
    border-radius: 50%;
}

.mensaje-informativo.advertencia>i.fa-duotone {
    background-color: var(--color-amarillo);
    color: var(--color-blanco);
    border-radius: 50%;
}

.mensaje-informativo.advertencia .contador {
    background-color: var(--color-amarillo);
    color: var(--color-blanco);
}

.mensaje-informativo.advertencia a {
    background-color: var(--color-amarillo);
    /*font-weight: var(--letra-gruesa);*/
    color: var(--color-blanco);
}



.mensaje-informativo.verde {
    background-color: var(--color-verde-auxiliar-200);
}

.mensaje-informativo.verde>i {
    color: var(--color-verde);
    border-radius: 50%;
}

.mensaje-informativo.verde>i.fa-duotone {
    background-color: var(--color-verde);
    color: var(--color-blanco);
    border-radius: 50%;
}

.mensaje-informativo.verde .contador {
    background-color: var(--color-verde);
    color: var(--color-blanco);
}

.mensaje-informativo.verde a {
    background-color: var(--color-verde);
    /*font-weight: var(--letra-gruesa);*/
    color: var(--color-blanco);
}

.mensaje-informativo.rojo {
    background-color: var(--color-rojo-auxiliar-200);
}

.mensaje-informativo.rojo>i {
    color: var(--color-rojo);
    border-radius: 50%;
}

.mensaje-informativo.rojo>i.fa-duotone {
    background-color: var(--color-rojo);
    color: var(--color-blanco);
    border-radius: 50%;
}

.mensaje-informativo.rojo .contador {
    background-color: var(--color-rojo);
    color: var(--color-blanco);
}

.mensaje-informativo.rojo a {
    background-color: var(--color-rojo);
    /*font-weight: var(--letra-gruesa);*/
    color: var(--color-blanco);
}


.mensaje-informativo.cafe {
    background-color: var(--color-cafe-auxiliar-200);
}

.mensaje-informativo.cafe>i {
    color: var(--color-cafe);
    border-radius: 50%;
}

.mensaje-informativo.cafe>i.fa-duotone {
    background-color: var(--color-cafe);
    color: var(--color-blanco);
    border-radius: 50%;
}

.mensaje-informativo.cafe .contador {
    background-color: var(--color-cafe);
    color: var(--color-blanco);
}

.mensaje-informativo.cafe a {
    background-color: var(--color-cafe);
    /*font-weight: var(--letra-gruesa);*/
    color: var(--color-blanco);
}

.mensaje-informativo.naranja {
    background-color: var(--color-naranja-auxiliar-200);
}

.mensaje-informativo.naranja>i {
    color: var(--color-naranja);
    border-radius: 50%;
}

.mensaje-informativo.naranja>i.fa-duotone {
    background-color: var(--color-naranja);
    color: var(--color-blanco);
    border-radius: 50%;
}

.mensaje-informativo.naranja .contador {
    background-color: var(--color-naranja);
    color: var(--color-blanco);
}

.mensaje-informativo.naranja a {
    background-color: var(--color-naranja);
    /*font-weight: var(--letra-gruesa);*/
    color: var(--color-blanco);
}

.mensaje-informativo.morado {
    background-color: var(--color-morado-auxiliar-200);
}

.mensaje-informativo.morado>i {
    color: var(--color-morado);
    border-radius: 50%;
}

.mensaje-informativo.morado>i.fa-duotone {
    background-color: var(--color-morado);
    color: var(--color-blanco);
    border-radius: 50%;
}

.mensaje-informativo.morado .contador {
    background-color: var(--color-morado);
    color: var(--color-blanco);
}

.mensaje-informativo.morado a {
    background-color: var(--color-morado);
    /*font-weight: var(--letra-gruesa);*/
    color: var(--color-blanco);
}

.mensaje-informativo.azul {
    background-color: var(--color-azul-auxiliar-200);
}

.mensaje-informativo.azul>i {
    color: var(--color-azul);
    border-radius: 50%;
}

.mensaje-informativo.azul>i.fa-duotone {
    background-color: var(--color-azul);
    color: var(--color-blanco);
    border-radius: 50%;
}

.mensaje-informativo.azul .contador {
    background-color: var(--color-azul);
    color: var(--color-blanco);
}

.mensaje-informativo.azul a {
    background-color: var(--color-azul);
    /*font-weight: var(--letra-gruesa);*/
    color: var(--color-blanco);
}

.mensaje-informativo.amarillo {
    background-color: var(--color-amarillo-auxiliar-200);
}

.mensaje-informativo.amarillo>i {
    color: var(--color-amarillo);
    border-radius: 50%;
}

.mensaje-informativo.amarillo>i.fa-duotone {
    background-color: var(--color-amarillo);
    color: var(--color-blanco);
    border-radius: 50%;
}

.mensaje-informativo.amarillo .contador {
    background-color: var(--color-amarillo);
    color: var(--color-blanco);
}

.mensaje-informativo.amarillo a {
    background-color: var(--color-amarillo);
    /*font-weight: var(--letra-gruesa);*/
    color: var(--color-blanco);
}

/*.mensaje-informativo.advertencia p {
            color: var(--color-amarillo);
            font-weight: var(--letra-super-gruesa);
        }*/


/* pulsos detras */
.pulso-detras {
    background: transparent;
    border-radius: 100%;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    /*margin: 10px;*/
    /*height: 20px;
    width: 20px;*/
    transform: scale(1);
    animation: pulso 2s infinite;
}


@keyframes pulso {
    0% {
        /*transform: scale(0.95);*/
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
    }

    70% {
        /*transform: scale(1);*/
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        /*transform: scale(0.95);*/
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}


@keyframes pulso-advertencia {
    0% {
        /*transform: scale(0.95);*/
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
    }

    70% {
        /*transform: scale(1);*/
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        /*transform: scale(0.95);*/
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}


/*#lnkVerSistemas {
    font-weight: var(--letra-gruesa);
    background-color: var(--color-gris-300);
    color: var(--color-gris-500);
}*/

.pasos-vertical .usuario-sistemas-renglon {
    position: relative;
    display: flex;
    counter-increment: step;
}

.pasos-vertical .usuario-sistemas-renglon:before {
    content: counter(step);
    flex: 0 0 50px;
    text-align: center;
    height: 50px;
    border-radius: 50%;
    background-color: var(--color-gris-200);
    color: var(--color-gris-500);
    font-size: 20px;
    padding-top: 10px;
}

.pasos-vertical .usuario-sistemas-renglon:not(:last-child):after {
    content: "";
    position: absolute;
    left: 30px;
    top: 70px;
    bottom: -10px;
    z-index: -1;
    transform: translateX(-50%);
    width: 2px;
    background-color: var(--color-gris-300);
}


/*.lista-contador {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 50px;
    border-radius: 50%;
    background-color: var(--color-gris-200);
    height: 50px;
    color: var(--color-gris-500);
    font-size: 20px;
}

    .lista-contador:not(:last-child):after {
        content: "";
        position: absolute;
        left: 0;
        top: calc(var(--circle-size) + var(--spacing));
        bottom: var(--spacing);
        z-index: -1;
        transform: translateX(calc(var(--circle-size) / 2));
        width: 2px;
        background-color: var(--color-gris-200);
    }*/


/* stepper */
:root {
    /*--circle-size: clamp(1.5rem, 5vw, 3rem);*/
    --circle-size: 50px;
    --spacing: clamp(0.25rem, 2vw, 0.5rem);
}

.c-stepper__item {
    position: relative;
    display: flex;
    gap: 20px;
    padding-bottom: 15px;
}

.c-stepper__item:before {
    content: "";
    flex: 0 0 var(--circle-size);
    height: var(--circle-size);
    border-radius: 50%;
    background-color: var(--color-gris-200);
}

.c-stepper__item:not(:last-child):after {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--circle-size) + var(--spacing));
    bottom: var(--spacing);
    z-index: -1;
    transform: translateX(calc(var(--circle-size) / 2));
    width: 2px;
    background-color: var(--color-gris-200);
}

.c-stepper__title {
    text-transform: uppercase;
    font-weight: var(--letra-semi-gruesa);
    margin-bottom: 3px;
}


/*** Non-demo CSS ***/
/*.wrapper {
    max-width: 1000px;
    margin: 2rem auto 0;
}*/

/**,
*:before,
*:after {
    box-sizing: border-box;
}*/
h5>.contador {
    border-radius: 50%;
    background-color: var(--color-auxiliar-200);
    color: var(--color-primario);
    padding: 4px 8px;
    font-weight: var(--letra-mediana);
}

a span.contador {
    border-radius: 50%;
    padding: 2px 8px;
    font-size: 14px;
    color: var(--color-primario);
    background-color: var(--color-auxiliar-200);
    font-weight: var(--letra-gruesa);
}


/* seccion busqueda */
.seccion-busqueda {
    position: fixed;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    gap: 30px;
    z-index: 2;
    background-color: transparent;
    flex: 0 1 auto;
    height: 85%;
}

/*.seccion-busqueda .caja-busqueda {
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    
    }*/

.seccion-busqueda>div {
    width: 100%;
}

/*.seccion-busqueda .caja-busqueda {
        position: relative;

       
    }*/

.seccion-busqueda.mostrandose {
    display: flex;
}

.seccion-busqueda .caja-busqueda i {
    position: absolute;
    z-index: 3;
}

.seccion-busqueda .caja-busqueda input[type=search] {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: var(--border-radius);
    border: 0;
    outline: none;
    font-weight: var(--letra-delgada);
}

.seccion-busqueda .caja-busqueda .buscando {
    position: absolute;
    display: none;
    background-color: transparent;
    pointer-events: none;
    border-radius: 50%;
    border: 3px solid var(--color-gris-300);
    border-top-color: var(--color-negro);
    animation: girar 1s linear infinite;
    /* animation: girar 1.4s ease 0.5s infinite; */
}

.seccion-busqueda .resultados {
    position: relative;
    display: none;
    padding: 10px;
    background-color: var(--color-blanco);
    border-radius: var(--border-radius);
    max-height: 600px;
    overflow-y: auto;
}

.seccion-busqueda .resultados :is(h1h2, h3, h4, h5, h6) {
    margin-bottom: 30px;
}

@keyframes girar {
    to {
        transform: rotate(360deg);
    }
}

.seccion-busqueda .resultados .lista-resultados {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

.seccion-busqueda .resultados .lista-resultados>div {
    border-radius: var(--border-radius);
}

.seccion-busqueda .resultados .lista-resultados-servidor {
    display: none;
}

/* shimmer */
.shimmer {
    position: relative;
    /*display: none;*/
    width: 100%;
    height: 80px;
    background-image: linear-gradient(90deg, #eeeeee 0%, #eeeeee 40%, #dddddd 50%, #dddddd 55%, #eeeeee 65%, #eeeeee 100%);
    background-size: 400%;
    animation: shimmer 1500ms infinite;
    border-radius: var(--border-radius);
}

.seccion-busqueda .cerrar-busqueda {
    margin-top: auto;
    text-align: center;
}

.seccion-busqueda .cerrar-busqueda a {
    background-color: var(--color-negro);
    color: var(--color-blanco);
    font-size: 32px;
    border-radius: 100%;
    padding: 4px 15px;
    box-shadow: var(--box-shadow-suave);
}

@keyframes shimmer {
    from {
        background-position: 100% 100%;
    }

    to {
        background-position: 0 0;
    }
}


/* evaluacion */
.evaluacion {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.evaluacion>div {
    color: var(--color-negro);
    border: 1px solid var(--color-gris-300);
    font-size: 18px;
    font-weight: var(--letra-mediana);
    border-radius: 50%;
    padding: 4px 12px;
    cursor: pointer;
}

.evaluacion>div:hover {
    border: 1px solid var(--color-gris-200);
    background-color: var(--color-gris-200);
}

.evaluacion>div.seleccionado {
    border: 1px solid var(--color-auxiliar-300);
    color: var(--color-primario);
    background-color: var(--color-auxiliar-300);
}

/* folios */
div.registros {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

div.registros>div.registro {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: var(--box-shadow-suave);
    /*box-shadow: var(--box-shadow);*/
    /*box-shadow: var(--box-shadow-inferior-derecho);*/
    border-radius: var(--border-radius);
    padding: 10px;
}

div.registros>div.registro.nuevo {
    border-left: 3px solid var(--color-gris-300);
}

div.registros>div.registro>div.informacion-principal {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

div.registros>div.registro>div.informacion-principal>div {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}

div.registros>div.registro>div.informacion-principal>div>a {
    color: var(--color-gris-500);
}

div.registros>div.registro>div.informacion-principal .folio {
    position: relative;
    border-radius: var(--border-radius);
    font-weight: var(--letra-gruesa);
    padding: 5px;
    font-size: 13px;
    background-color: var(--color-negro);
    color: var(--color-blanco);
}

div.registros>div.registro>div.informacion-principal .folio:after {
    content: '';
    position: absolute;
    border-left: 1px dotted var(--color-gris-300);
    top: 0;
    right: -8px;
    /* adjust this */
    height: 100%;
    /* adjust this */
}

div.registros>div.registro>div.informacion-adicional>div {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 5px;
    padding: 3px 0;
}

div.registros>div.registro>div.informacion-adicional>div:nth-child(2n+1) {
    background-color: var(--color-gris-100);
}

div.registros>div.registro>div.informacion-adicional>div>label {
    color: var(--color-gris-500);
    font-weight: var(--letra-mediana);
    min-width: 30%;
}

div.registros>div.registro>div.informacion-adicional>div>span {
    color: var(--color-negro);
    font-weight: var(--letra-gruesa);
}

/* pestañas tabs */
.pestanias {
    position: relative;
    display: block;
}

.pestanias .pestanias-opciones ul {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    list-style: none;
}

.pestanias .pestanias-opciones ul li {
    color: var(--color-gris-400);
    cursor: pointer;
}

.pestanias .pestanias-opciones ul li:hover {
    color: var(--color-primario);
}

.pestanias .pestanias-opciones ul li.seleccionado {
    color: var(--color-primario);
    font-weight: var(--letra-gruesa);
}

.pestanias .pestanias-opciones ul li.seleccionado:after {
    content: '';
    position: relative;
    display: block;
    background-color: var(--color-secundario);
    width: 100%;
    height: 2px;
    bottom: -5px;
    left: 0;
}

.pestanias .pestanias-contenido {
    position: relative;
    display: block;
    padding: 20px 0 0 0;
}

.pestanias .pestanias-contenido .pestania {
    display: none;
}

.pestanias .pestanias-contenido .pestania.seleccionado {
    display: block;
}

.pestanias .pestanias-contenido .pestania.seleccionado table td {
    color: var(--color-gris-500);
}

.flujo .paso {
    position: relative;
    display: flex;
    counter-increment: step;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    padding: 15px 0;
    flex-direction: row;
    border-radius: var(--border-radius);
}

.flujo .paso:not(.completado):before {
    content: counter(step);
    flex: 0 0 50px;
    text-align: center;
    height: 50px;
    border-radius: 50%;
    background-color: var(--color-gris-200);
    color: var(--color-gris-500);
    font-size: 20px;
    padding-top: 10px;
}

.flujo .paso:is(.completado):before {
    content: "\f00c";
    font-family: "FontAwesome" !important;
    flex: 0 0 50px;
    text-align: center;
    height: 50px;
    border-radius: 50%;
    background-color: var(--color-verde-auxiliar);
    color: var(--color-verde);
    font-size: 28px;
    padding-top: 10px;
}

.flujo .paso:not(:last-child):after {
    content: "";
    position: absolute;
    left: 25px;
    top: 70px;
    bottom: -10px;
    z-index: -1;
    transform: translateX(-50%);
    width: 2px;
    background-color: var(--color-gris-300);
}

.flujo .paso:is(.completado):not(:last-child):after {
    content: "";
    position: absolute;
    left: 25px;
    top: 70px;
    bottom: -10px;
    z-index: -1;
    transform: translateX(-50%);
    width: 2px;
    background-color: var(--color-verde-secundario);
}

/*.flujo .paso div:last-of-type {
        flex: 1 1 auto;
    }*/

.flujo .paso div {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.flujo .paso div.informacion {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    text-transform: capitalize;
    gap: 5px;
}

.flujo .paso div.informacion div {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    text-transform: capitalize;
    gap: 5px;
}

.flujo .paso div.informacion div:last-of-type {
    margin-left: auto;
}

.flujo .paso div.informacion div label {
    color: var(--color-gris-500);
    font-weight: var(--letra-semi-gruesa);
    /*font-size: var(--font-size);*/
}

.flujo .paso .informacion img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.flujo .paso .informacion i {
    color: var(--color-gris-400);
}

.flujo .paso p {
    margin-bottom: 15px;
}


/* progressbar circle */
.circle-chart {
    width: 50px !important;
    height: 50px !important;
}


.progreso {
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
}

.progreso div:first-of-type {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.progreso div:first-of-type>span {
    font-weight: var(--letra-semi-gruesa);
    color: var(--color-gris-500);
}

progress {
    /* style rules */
    width: 100%;
    height: 10px;
    border-radius: var(--border-radius);
}

progress::-webkit-progress-bar {
    /* style rules */
    background-color: var(--color-gris-300);
    border-radius: var(--border-radius);
}

progress::-webkit-progress-value {
    /* style rules */
    background-color: var(--color-gris-400);
    border-radius: var(--border-radius);
}

/* progress::-moz-progress-bar {
    /* style rules 
} */

/*.progreso div:last-of-type{
        align-self: flex-start;
       
    }*/


.progreso-circular {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.progreso-circular div:last-of-type>label {
    font-weight: var(--letra-gruesa);
    color: var(--color-negro);
}

.progreso-circular div:last-of-type>label:last-of-type {
    font-weight: var(--letra-mediana);
    color: var(--color-gris-500);
    font-size: 15px;
}

.progreso-circular div:last-of-type>label:last-of-type>span {
    font-weight: var(--letra-semi-gruesa);
    font-size: 13px;
    /*color: var(--color-gris-500);*/
}

/* burbujas */
.burbujas {
    position: relative;
    display: flex;
    justify-content: flex-start;
    gap: 5px;
}

.burbujas>label {
    background-color: var(--color-gris-200);
    font-weight: var(--letra-mediana);
    color: var(--color-negro);
    padding: 5px 10px;
    border-radius: var(--border-radius-dialogo);
}

.burbujas>label:hover {
    background-color: var(--color-gris-300);
}

.burbujas>label:hover>span {
    opacity: 1;
    visibility: visible;
}

.burbujas>label>span {
    position: absolute;
    opacity: 0;
    top: 110%;
    left: 50%;
    z-index: 1;
    visibility: hidden;
    background-color: var(--color-gris-500);
    font-size: 12px;
    color: var(--color-blanco);
    padding: 2px 5px;
    border-radius: var(--border-radius);
}


/* totales */
.totales {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 10px;
    /*border: 1px solid var(--color-gris-300);*/
    border-radius: var(--border-radius);
    padding: 15px 10px;
    box-shadow: var(--box-shadow-suave);
    margin-bottom: 30px;
}

.totales div {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.totales i {
    font-size: 1.6em;
    font-weight: var(--letra-delgada);
    color: var(--color-gris-400);
}

.totales div label {
    line-height: 1.2;
    font-size: 1.1em;
    color: var(--color-negro);
    font-weight: var(--letra-mediana);
}

.totales div span {
    line-height: 1.2;
    font-size: 1.3em;
    color: var(--color-negro);
    font-weight: var(--letra-semi-gruesa);
}

/* flex */
.flex-renglon {
    flex-direction: row !important;

}

.flex-columna {
    flex-direction: column !important;
}

.disenio-columnas {
    position: relative;
    display: flex !important;
    flex-direction: row !important;
    gap: 1.125rem;
}


/* bi columna */
.bi-resultado {
    margin-bottom: 20px;
}

.bi-resultado>div {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.bi-resultado i {
    font-size: 1.6em;
    font-weight: var(--letra-delgada);
    color: var(--color-gris-400);
}

.bi-resultado div label {
    line-height: 1.2;
    font-size: 1.1em;
    color: var(--color-negro);
    font-weight: var(--letra-mediana);
    margin-bottom: 5px;
}

.bi-resultado div span {
    position: relative;
    display: block;
    line-height: 1.2;
    font-size: 1.5em;
    color: var(--color-negro);
    font-weight: var(--letra-semi-gruesa);
}

.sombreado {
    border-radius: var(--border-radius);
    padding: 8px;
    box-shadow: var(--box-shadow-suave);
    overflow: hidden;
}

.sombreado>.grid_12:not(:last-child),
.bordeado>.grid_12:not(:last-child) {
    margin-bottom: 20px;
}

.bordeado {
    /*border: 1px solid var(--color-gris-300);*/
    border-radius: var(--border-radius);
    padding: 8px;
    box-shadow: var(--box-shadow-inferior-derecho);
    overflow: hidden;
}




.grid-wrapper {
    display: grid;
    grid-gap: 30px;
    place-items: center;
    place-content: center;
}

.grid-col-auto {
    grid-auto-flow: column;
    grid-template-rows: auto;
}