:root {
    --colorDestacado: #FF2D55;
    --colorDestacadoOscuro: #c2213e;

    --colorAzul: #007AFF;
    --colorAzulOscuro: #0263cb;

    --colorSecundario1: #5856D6;
    --colorSecundario2: #34C759;

    --gris: #f5f5f5;
    --grisClaro: #FFF;
    --grisOscuro: #dcdcde;
    --grisOscuro2: #656570;
    --grisTextoClaro: #7f7f7f;

    --oscuro: #0C0C21;
    --oscuroClaro: #151539;

    --font-textos: "Roboto Flex", serif;
}

* {
    box-sizing: border-box;
}

body.darkmode {
    --grisClaro: #3C3C3C;
    --gris: #6A6767;
    --colorAzul: #f2f2f7;
    --colorTexto: #F2F2F7;
    --colorPlaceholder: #e7e7ea;
}

.darkmode input::placeholder,
.darkmode textarea::placeholder {
    color: var(--colorPlaceholder);
}

.darkmode input,
.darkmode select,
.darkmode textarea {
    color: var(--colorTexto);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-textos);
    text-transform: uppercase;
}

body {
    margin: 0;
    border: 0;
    font-family: var(--font-textos);
    color: var(--colorTexto);
}

body.darkmode {
    background-color: var(--grisClaro);
}

.fondoPag {
    background: url("../img/fondo.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: -1;
    margin: 0;
    top: 0;
}

.pantallaCarga {
    cursor: progress;
}

.textoCentrado {
    text-align: center !important;
}

.navbar {
    background-color: var(--oscuro);
    color: var(--grisClaro);
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.darkmode .navbarMenu li a {
    color: var(--colorTexto);
}

.iconoLogin {
    position: absolute;
    top: 20px;
    right: 40px;
    color: var(--grisClaro);
}

.iconoLogin svg {
    transform: scale(1.25);
}

.darkmode .iconoLogin svg {
    color: var(--colorTexto);
}

.h-90 {
    height: 90px !important;
}

.navbarLogo {
    width: 200px;
}

.navbarBtnMobile {
    color: var(--grisClaro);
}

.darkmode .navbarBtnMobile {
    color: var(--colorTexto);
    transform: scale(2);
}

.navbarLogo img {
    width: 100%;
}

.navbarMenu {
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.navbarMenu li {
    font-size: 12px;
    font-weight: 100;
}

.navbarMenu li a {
    text-decoration: none;
    color: var(--grisClaro);
}

.contenedor {
    width: 80%;
    margin-left: 10%;
    min-height: 60vh;
}


.tituloContenedor {
    text-align: center;
    margin-top: 60px;
}


.tituloContenedor p {
    padding: 0 70px;
    font-size: 14px;
    font-weight: 100;
    text-align: left;
}

.contendorChips {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px 25px;
    border-radius: 10px;
    padding: 20px 40px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
    background-color: var(--grisClaro);
}

.chipsTitulos {
    width: 100%;
    text-align: center;
}

.chipsTitulos p {
    font-weight: 300;
    font-size: 14px;
}

.ChipsNombreFiltros {
    margin: 0;
}

.CardsChipsActas {
    display: flex;
    flex-direction: column;
    background-color: var(--gris);
    border-radius: 20px;
    border: 1px solid var(--colorAzul);
    padding: 20px;
    width: 300px;
}

.actasLimpiar {
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}

.CardsChips {
    display: flex;
    flex-direction: column;
    background-color: var(--gris);
    border-radius: 20px;
    border: 1px solid var(--colorAzul);
    padding: 20px;
}

.CardsChipsTitulos {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid var(--colorAzul);
    margin-bottom: 15px;
    padding-bottom: 5px;
    position: relative;
    align-items: center;
    min-height: 46px;
}

.popoverInfoTitulos {
    position: absolute;
    background-color: var(--grisClaro);
    border: 1px solid var(--colorAzul);
    border-radius: 10px;
    padding: 10px 20px;
    max-width: 250px;
    font-size: 14px;
    right: 40px;
    top: -15px;
    z-index: 20;
}

.iconoPopover {
    background-color: var(--gris);
    padding: 10px;
    color: var(--oscuro);
}

.darkmode .iconoPopover {
    color: var(--colorTexto);
}

.CardsChips h4 {
    margin: 0;
}

.CC_LG {
    width: 100%;
}

.CC_LG .contenedorChips {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.tituloActas {
    text-align: center;
}

.contenedorActasFiltros {
    display: flex;
    flex-direction: row;
    gap: 40px;
    justify-content: center;
}

.contenedorChipsActas {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.capsulasConPopover {
    position: relative;
}

.contenedorChipsActas .cadaCapsula {
    background-color: var(--grisOscuro);
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 12px;
    user-select: none;
    cursor: pointer;
}

.popoverAT {
    position: absolute;
    background-color: var(--gris);
    border: 1px solid var(--colorAzul);
    padding: 5px 15px;
    border-radius: 5px;
    bottom: 130%;
    width: 400px;
    left: 0;
}

.popoverAT::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 20px;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: var(--colorAzul) transparent transparent transparent;
}

.popoverAT h5 {
    border-bottom: 1px solid var(--colorAzul);
    padding: 5px 0;
    margin: 5px 0;
    font-size: 12px;
}

.popoverAT p {
    margin: 0;
    margin-left: 5px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.darkmode .contenedorChipsActas .cadaCapsula {
    background-color: var(--grisClaro);
}

.CardsChipsActas .contenedorSelect {
    position: relative;
    display: inline-block;
}

.CardsChipsActas .flechaSelect {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: var(--grisOscuro2);
    clip-path: polygon(100% 90%, 0% 90%, 50% 20%);
}

.actaAnio {
    font-size: 12px;
    margin: 5px;
}

.datosActas {
    display: flex;
    flex-direction: column;
}

.datosActas .titulo {
    margin: 0;
    margin-left: 15px;
}

.contenedorChipsActas .activo {
    background-color: var(--grisClaro);
    border: 1px solid var(--colorAzul);
}

.CardsChipsActas select {
    width: 100%;
    background-color: var(--grisOscuro);
    border: none;
    border: 20px;
    padding: 5px;
    padding-left: 15px;
    border-radius: 20px;
    appearance: none;
}

.darkmode .CardsChipsActas select {
    color: var(--colorTexto);
    background-color: var(--grisClaro);
}

.contenedorChips2 {
    display: flex;
    flex-direction: row;
    gap: 20px;
    row-gap: 10px;
    flex-wrap: wrap;
}

.CC_LG .cadaCapsula,
.CC_LG .cadaCapsulaAP {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    background-color: var(--grisOscuro);
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 12px;
    user-select: none;
    cursor: pointer;
}

.darkmode .CC_LG .cadaCapsula,
.darkmode .CC_LG .cadaCapsulaAP {
    background-color: #999;
}

.CC_LG .cadaCapsula.activo,
.CC_LG .cadaCapsulaAP.activo {
    background-color: white;
    border: 1px solid var(--colorAzul);
}

.darkmode .CC_LG .cadaCapsula.activo,
.darkmode .CC_LG .cadaCapsulaAP.activo {
    color: var(--grisClaro);
    border: 1px solid #007AFF;
}

.CC_LG .cadaCapsula s,
.CC_LG .cadaCapsulaAP div {
    max-width: 12px;
    max-height: 12px;
    min-width: 12px;
    min-height: 12px;
    border-radius: 10px;
    background-color: var(--gris);
}

.CC_ColorS1 .activo s {
    background-color: var(--colorSecundario1);
}


.CC_ColorS2 .activo div {
    background-color: var(--colorSecundario2);
}

.CC_XS {
    flex: 1;
}

.CC_XS .contenedorSelect {
    position: relative;
    display: inline-block;
}

.CC_XS .flechaSelect {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: var(--grisOscuro2);
    clip-path: polygon(100% 90%, 0% 90%, 50% 20%);

}

.CC_XS select {
    width: 100%;
    background-color: var(--grisOscuro);
    border: none;
    border: 20px;
    padding: 5px;
    padding-left: 15px;
    border-radius: 20px;
    appearance: none;
}

.CC_MD {
    flex: 1;
}

.contenedorFechas {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 5px;
}


.fechas {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 40%;
}

.fechas p {
    color: var(--grisOscuro2);
    margin: 0;
}

.darkmode .fechas p {
    color: var(--colorTexto);
}

.fechas .meses {
    width: 60%;
    border: none;
    border-radius: 20px;
    background-color: var(--grisOscuro);
    padding: 10px 10px;
}

.darkmode .fechas .meses::placeholder {
    color: var(--grisClaro);
}

.darkmode .CC_XS select {
    color: var(--grisClaro);
}

.contenedorBuscador {
    width: 100%;
    border-top: 1px solid var(--colorAzul);
    margin-top: 20px;
}

.contenedorBuscador h4 {
    margin-top: 15px;
    margin-bottom: 10px;
}

.degradado {
    position: absolute;
    width: 100%;
    height: 120px;
    left: 0;
    bottom: 0;
    background: linear-gradient(to top, var(--grisClaro) 40%, transparent);
    border-radius: 0 0 10px 10px;
}

#buscador {
    width: 100%;
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 20px;
    border: 1px solid var(--colorAzul);
    background-color: var(--gris);
}

.darkmode #buscador {
    color: var(--colorTexto);
}

.contenedorResultados {
    position: relative;
    margin-top: 60px;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
    background-color: var(--grisClaro);
    margin-bottom: 20px;
    min-height: 150px;
}

.resultadosHeader h4 {
    margin-bottom: 0;
}

.headerTextos,
.headerTextosActas {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.headerTextosActas {
    justify-content: space-between;
    padding: 0 20px;
}

#resultadoRespuesta {
    font-size: 14px;
}

.capsulasHeader {
    display: flex;
    flex-direction: row;
    padding: 0 20px;
    gap: 5px;
}

.capsulasHeaderActa {
    margin-left: 20px;
    text-decoration: underline;
}

.capsulasHeader div {
    border-radius: 20px;
    background-color: var(--grisOscuro);
    padding: 5px 15px;
    font-size: 12px;
    position: relative;
    display: none;
    border: 1px solid var(--colorAzul);
    cursor: pointer;
}

.darkmode .capsulasHeader div {
    background-color: var(--grisClaro);
    color: var(--colorTexto);
}

.btnCerrarCapsulas {
    position: absolute;
    margin: 0;
    right: -5px;
    top: -5px;
    font-size: 8px;
    font-weight: 600;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--colorAzul);
    display: flex;
    justify-content: center;
    align-items: center;
}

.darkmode .btnCerrarCapsulas {
    background-color: var(--gris);
}

#AT_buscador {
    border-color: var(--colorSecundario1);
}

#AP_buscador {
    border-color: var(--colorSecundario2);
}

#AT_buscador .btnCerrarCapsulas {
    background-color: var(--colorSecundario1);
}

#AP_buscador .btnCerrarCapsulas {
    background-color: var(--colorSecundario2);
}

#resultados {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    max-height: 1700px;
    overflow-y: scroll;
    margin-bottom: 50px;
}

.tarjetaDocumento {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 20px;
    z-index: 20;
    position: relative;
}

.fotoTarjetaDoc {
    padding: 10px;
    background-color: var(--gris);
    border-radius: 15px;
    display: flex;
    border: 1px solid var(--colorAzul);
}

.darkmode .fotoTarjetaDoc {
    border: none;
}

.datosTarjetaDoc {
    flex: 1;
    padding: 32px;
    background-color: var(--gris);
    border-radius: 15px;
    border: 1px solid var(--colorAzul);
}

.darkmode .datosTarjetaDoc {
    border: none;
}

.fotoTarjetaDoc img {
    max-width: 150px;
    height: 100%;
    object-fit: contain;
    border-radius: 5px;
}

.datosTarjetaDoc .titulo {
    margin: 10px 0;
    font-size: 20px;
    color: var(--grisTextoClaro);
    font-weight: 400;
}

.darkmode .datosTarjetaDoc .titulo {
    color: var(--colorTexto);
}

.datosTarjetaDoc .resumen {
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.accionesTarjetaDoc {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 50px;
}

.capsulasTarjetaDoc {
    display: flex;
    flex-direction: column;

}

.tituloTarjetaDoc {
    margin-bottom: 5px;
    color: var(--grisTextoClaro);
    margin-top: 10px;
}

.darkmode .tituloTarjetaDoc {
    color: var(--colorTexto);
}

.contenedorTarjetas {
    display: flex;
    flex-direction: row;
    gap: 8px;
    position: relative;
    margin-bottom: 5px;
}

.cadaTarjeta,
.cadaTarjetaAp {
    display: flex;
    flex-direction: column;
    position: relative;
}

.popover {
    position: absolute;
    background-color: var(--colorDestacado);
    padding: 5px 10px;
    width: max-content;
    top: 45px;
    color: white;
    left: -5px;
    display: none;
    border-radius: 5px;
    z-index: 10;
}

.popover::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 20px;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent var(--colorDestacado) transparent;
}

.capTarjetaDoc {
    background-color: var(--grisOscuro);
    font-size: 10px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: var(--grisOscuro2);
    user-select: none;
    cursor: pointer;
}

.darkmode .capTarjetaDoc {
    color: var(--colorTexto);
    background-color: #999;
}

.tarjetaActiva {
    background-color: var(--colorAzul);
    color: var(--grisClaro);
}

.darkmode .tarjetaActiva {
    background-color: var(--colorAzul);
    color: var(--grisClaro);
}

.btnTarjetaDoc {
    display: flex;
    gap: 20px;
}

.btnCompartir {
    width: 180px;
    height: 40px;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid var(--colorAzul);
    color: var(--colorAzul);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .4s ease-out;
    cursor: pointer;
}

.btnCompartir:hover {
    background-color: var(--colorAzul);
    color: white;
}

.btnLeer {
    width: 180px;
    height: 40px;
    border-radius: 20px;
    text-decoration: none;
    color: white;
    background-color: var(--colorAzul);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .4s ease-out;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

.btnLeer:hover {
    background-color: #0357b0;
}

.btnEliminarActa{
    width: 180px;
    height: 40px;
    border-radius: 20px;
    text-decoration: none;
    color: white;
    background-color: var(--colorDestacado);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .4s ease-out;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

.btnEliminarActa:hover{
    background-color: var(--colorDestacadoOscuro);
}

.darkmode .btnLeer {
    background-color: var(--grisClaro);
}

.darkmode .btnLeer:hover {
    background-color: #292929;
}

.contenedorPopCompartir {
    z-index: 100;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
}

.popCompartir {
    /* display: none; */
    position: relative;
    flex-direction: column;
    background-color: var(--grisClaro);
    border-radius: 8px;
    padding: 20px 60px;
    text-align: center;
    box-shadow: 0 5px 15px black;
}

.popCompartir h4 {
    margin-top: 18px;
    margin-bottom: 10px;
}

.compartirBotones {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    background-color: var(--gris);
    padding: 12px;
    border-radius: 4px;
}

.compartirBotones a {
    color: var(--colorAzul);
}

.compartirLink {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: var(--gris);
    padding: 4px 12px;
    border-radius: 4px;
    gap: 8px;
}

.compartirLink p {
    white-space: nowrap;
    overflow: scroll;
    text-overflow: ellipsis;
    width: 200px;
    user-select: none;
}

.compartirLink button {
    background-color: var(--grisOscuro);
    border-radius: 4px;
    padding: 8px;
    border: none;
    color: #0C0C21;
}

.btnCerrar {
    background-color: var(--colorDestacado);
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 0 5px 0 0;
    cursor: pointer;
}

.contenedorNuevos {
    margin-top: 60px;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 10px 15px var(--grisOscuro2);
    background-color: var(--grisClaro);
    margin-bottom: 60px;
    position: relative;
}

.darkmode .contenedorNuevos {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
}

.ocultarPopUp {
    display: none;
}

#resultadoCopiar {
    height: 10px;
}



.nuevosConte {
    padding-bottom: 30px;
    width: 96%;
    margin-left: 2%;
}

.contenedorTarjetas,
.contenedorTarjetasAP {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 10px;
}

.cadaTarjetas {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background-color: var(--grisOscuro2);
    font-size: 7px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--grisClaro);
}

.cadaTarjetas.activo {
    background-color: var(--colorAzul);
}

.nuevoHeader {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.nuevoHeader h4 {
    font-weight: 400;
}

.nuevoHeaderImg {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    overflow: hidden;
    border-radius: 5px;
    width: 100%;
}

.nuevoHeaderImg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.splide__number {
    background-color: var(--gris);
    border: 1px solid var(--colorAzul);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.darkmode .splide__number {
    border: 0;
}

.nuevoFooter {
    margin-top: 20px;
}

.nuevoFooter p {
    margin-bottom: 5px;
    font-size: 12px;
}

.nuevoFooterBtns {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.legal {
    background-color: var(--grisOscuro);
    display: flex;
    flex-direction: column;
    padding: 5px 80px;
    padding-bottom: 15px;
    font-size: 14px;
    color: var(--colorTexto);
}

.darkmode .legal {
    background-color: var(--grisClaro);
}

.legal1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.legal1 svg {
    transform: scale(2);
    margin-right: 20px;
}

.contenedorLegal {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.legal2,
.legal3 {
    font-size: 12px;
    margin-bottom: 0;
}

.tabulacion {
    padding-left: 20px;
}

.legal p {
    font-style: italic;
}


/*
.legal{
    background-color: var(--grisOscuro);
    display: flex;
    flex-direction: row;
    padding: 30px 80px;
    font-size: 14px;
}
.legal1{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.legal1 svg{
    transform: scale(2);
    height: 40px;
    margin-left: 6px;
}

.legal1 h5{
    width: 90%;
    margin: 0;
}

.legal2{
    flex: 1;
    padding-top: 25px;
    font-style: italic;
}

.legal2 p{
    margin: 0;
    margin-bottom: 5px;
}

.legal2 b{
    font-style: normal;
}

.legal3{
    flex: 1;
}

.legal3{
    font-style: italic;
}

.legal3 b{
    font-style: normal;
}

*/

.splide__pagination {
    bottom: -30px;
}

.splide__arrow {
    background: transparent;
}

.splide__arrow--next {
    right: -30px;
}

.splide__arrow--prev {
    left: -30px;
}

.splide__pagination__page {
    background: var(--grisOscuro);
}

.splide__pagination__page.is-active {
    background: var(--colorAzul);
}

.footer {
    width: 100%;
    background: linear-gradient(to top, var(--oscuro) 75%, transparent);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 30px 50px;
    padding-top: 100px;
    color: var(--grisClaro);
    margin-top: 60px;
}

.darkmode .footer {
    color: var(--colorTexto);
}

.logoFooter {
    width: 240px;
    margin-left: 50px;
}

.logoFooter img {
    width: 100%;
}

.datosFooter {
    padding: 10px;
    padding-right: 100px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--grisClaro);
    padding-left: 20px;
}

.datosFooter p {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 5px;
}

.datosFooter a {
    color: var(--grisClaro);
}

.darkmode .datosFooter a {
    color: var(--colorTexto);
}

.datosFooterRedes {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.datosFooterRedes {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.datosFooterRedesIcono {
    transform: scale(1.5);
}

.contenedorDark {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.contenedorDark a {
    font-size: 14px;
}

.switch {
    --button-width: 40px;
    --button-height: 20px;
    --toggle-diameter: 16px;
    --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
    --toggle-shadow-offset: 10px;
    --toggle-wider: 3em;
    --color-grey: #cccccc;
    --color-green: #007aff;
}

.slider {
    display: inline-block;
    width: var(--button-width);
    height: var(--button-height);
    background-color: var(--color-grey);
    border-radius: calc(var(--button-height) / 2);
    position: relative;
    transition: 0.3s all ease-in-out;
}

.slider::after {
    content: "";
    display: inline-block;
    width: var(--toggle-diameter);
    height: var(--toggle-diameter);
    background-color: #fff;
    border-radius: calc(var(--toggle-diameter) / 2);
    position: absolute;
    top: var(--button-toggle-offset);
    transform: translateX(var(--button-toggle-offset));
    box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
    transition: 0.3s all ease-in-out;
}

.switch input[type="checkbox"]:checked+.slider {
    background-color: var(--color-green);
}

.switch input[type="checkbox"]:checked+.slider::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}

.switch input[type="checkbox"] {
    display: none;
}

.switch input[type="checkbox"]:active+.slider::after {
    width: var(--toggle-wider);
}

.switch input[type="checkbox"]:checked:active+.slider::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}



.ND_contenedorPantallas {
    background-color: var(--grisClaro);
    padding: 30px;
    border-radius: 10px;
}

.ND_contenidoPantalla {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ND_contenidoPantalla h3 {
    text-align: center;
}

.ND_cargadorArchivo {
    border: 2px dashed var(--colorAzul);
    border-radius: 10px;
    padding: 20px;
    width: 60%;
    background-color: var(--gris);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    transition: background 0.3s;
}

.ND_cargadorArchivo:hover {
    background-color: #e9e9e9;
}

.darkmode .ND_cargadorArchivo:hover {
    background-color: rgba(0, 0, 0, 0.15);
}

.ND_cargadorArchivo svg {
    transform: scale(2.5);
    color: var(--grisOscuro2);
}

.ND_cargadorTexto {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
}

.darkmode .ND_cargadorTexto {
    color: var(--colorTexto)
}

.ND_contenedorCargar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
}

.darkmode .ND_contenedorCargar {
    color: var(--colorTexto);
}

.darkmode .ND_contenedorCargar svg {
    color: var(--colorTexto);
}

.ND_cargadorBtn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.ND_cargadorBtn:hover {
    background-color: #0056b3;
}

#fileInput {
    display: none;
}

.ND_p2Header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 40%;
    margin-left: 30%;
    position: relative;
}

.ND_p2HeaderNum {
    background-color: var(--grisOscuro);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all .6s ease-out;
}

.ND_p2HeaderNum.proceso {
    border: 2px solid var(--colorAzul);
}

.ND_p2HeaderNum.active {
    background-color: var(--colorAzul);
    color: var(--grisClaro);
}

.darkmode .ND_p2HeaderNum {
    color: var(--colorTexto);
    background-color: var(--gris);
}

.darkmode .ND_p2HeaderNum.proceso {
    border: 2px solid var(--colorTexto);
    background-color: var(--gris);
    color: var(--colorTexto);
}

.darkmode .ND_p2HeaderNum.active {
    background-color: var(--colorAzul);
    color: var(--grisClaro);
}

.linea {
    position: absolute;
    top: 45%;
    width: 45%;
    height: 10%;
    background-color: var(--grisOscuro);
}

.darkmode .linea {
    background-color: var(--gris);
}

.l1 {
    left: 3%;
}

.l2 {
    right: 3%;
}

.lineaActa span,
.linea span {
    position: absolute;
    background-color: var(--colorAzul);
    width: 1px;
    height: 100%;
}

.linea.active span,
.lineaActa.active span {
    animation: avanzarLinea 1s ease-out forwards;
}

@keyframes avanzarLinea {
    from {
        width: 1px;
    }

    to {
        width: 100%;
    }
}

.ND_p2Body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}

.ND_p2Bodyp1 {
    flex: 1;
    /* width: 30%; */
}

.ND_p2Bodyp1Img {
    background-color: var(--gris);
    border-radius: 10px;
    padding: 20px;
    width: 100%;
}

.ND_p2Bodyp1Img img {
    width: 100%;
}

.ND_p2Bodyp1Img canvas {
    width: 100%;
}

.ND_p2Bodyp2 {
    flex: 3;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ND_p2Bodyp2Dato {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ND_p2Bodyp2DatoRadio {
    display: flex;
    flex-direction: row;
    flex: 1;
}

.ND_p2Bodyp2Dato label {
    margin-bottom: 10px;
}

.ND_p2Bodyp2Dato input,
.ND_p2Bodyp2Dato textarea {
    width: 100%;
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 20px;
    border: 1px solid var(--colorAzul);
    background-color: var(--gris);
}

.ND_p2Bodyp2Dato select {
    width: 100%;
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 20px;
    border: 1px solid var(--colorAzul);
    background-color: var(--gris);
}

.ND_p2Bodyp2Dato textarea {
    height: 100px;
}

.ND_p2Bodyp2DatoCont {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.autoresSeleccionados {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.etiquetaAutor {
    padding: 10px 20px;
    border-radius: 20px;
    border: 1px solid var(--colorAzul);
    background-color: var(--gris);
    cursor: pointer;
}

.buscadorOpciones {
    position: relative;
    width: 100%;
}

.inputDeSelect {
    background-color: var(--gris) !important;
    position: absolute;
    width: 98% !important;
    left: 1%;
    top: 5px;
    border-radius: 15px !important;
}

.inputDeChips {
    padding: 10px 20px;
    border: 1px solid var(--colorAzul);
    background-color: var(--grisClaro) !important;
    width: 100% !important;
    border-radius: 15px !important;
}

.inputDeSelect:focus {
    background-color: var(--grisClaro) !important;
}

.selectConInput {
    padding-top: 50px !important;
}

.forzarAlto {
    padding: 0 !important;
    height: 0;
    overflow: hidden;
    margin-bottom: 50px;
    border: 0 !important;
}

#ND_p2Body_v2 {
    flex-direction: column;
}

.ND_p2BodyV2_p {
    text-align: center;
    width: 100%;
}

.ND_p2BodyV2_cont {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
}

.ND_p2BodyV2_contendorChips {
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
    background-color: var(--gris);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--colorAzul);
}

.ND_p2BodyV2_contendorChipsHeader {
    width: 100%;
}

.ND_p2BodyV2_contendorChipsBody {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
}

.ND_p2BodyV2_contendorChips h3 {
    width: 100%;
    margin: 0;
}

.ND_p2BodyV2_contendorChips p {
    width: 100%;
    margin: 0;
    font-size: 14px;
}

.ND_p2BodyV2_chip {
    padding: 10px;
    background-color: var(--grisOscuro);
    border: 1px solid var(--grisOscuro);
    border-radius: 10px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all .4s ease-out;
}

.darkmode .ND_p2BodyV2_chip {
    background-color: var(--grisClaro);
}

.darkmode .ND_p2BodyV2_chip:hover {
    background-color: var(--gris);
}

.ND_p2BodyV2_chip:hover {
    border: 1px solid var(--colorAzul);
    background-color: var(--grisClaro);
}

.ND_p2BodyV2_chip.active {
    background-color: var(--colorAzul);
    color: var(--grisClaro);
}

.ND_botonera {
    position: relative;
    width: 100%;
    height: 150px;
}

.ND_botonesSig,
.ND_botonesAtras {
    position: absolute;
    text-align: center;
    border-radius: 30px;
    background-color: var(--grisOscuro);
    color: var(--grisOscuro2);
    padding: 10px 40px;
    margin-top: 20px;
    cursor: not-allowed;
    transition: all .6s ease-out;
}

.darkmode .ND_botonesSig,
.darkmode .ND_botonesAtras {
    background-color: var(--gris);
}

.ND_botonesSig {
    right: 10px;
}

.ND_botonesAtras {
    left: 10px;
}

.ND_botonesSig.active,
.ND_botonesAtras.active {
    background-color: var(--colorAzul);
    color: var(--grisClaro);
    cursor: pointer;
}

.noMostrar {
    display: none;
}

.adminContenedorDocumentos {
    position: relative;
    margin-top: 50px;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 10px 15px var(--grisOscuro2);
    background-color: var(--grisClaro);
    margin-bottom: 20px;
    min-height: 150px;
}

.adminContenedorDocumentos .contenedorBuscador {
    border: 0;
}

.tarjetaDocumentoAdmin {
    margin-bottom: 20px;
}

.datosTarjetaDocAdmin {
    padding: 10px 10px;
    background-color: var(--gris);
    border-radius: 15px;
    border: 1px dashed var(--colorAzul);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.datosTarjetaDocAdmin h4 {
    margin: 10px;
}

.contenedorBtnAdmin {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.btnEliminarAdmin button {
    background-color: var(--colorDestacado);
    padding: 10px 30px;
    color: var(--grisClaro);
    border: none;
    border-radius: 20px;
    transition: background .4s ease-out;
    cursor: pointer;
}

.eliminarContBtn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.eliminarContBtn a {
    border: 1px solid var(--colorAzul);
    padding: 7px 40px;
    border-radius: 20px;
    text-decoration: none;
    cursor: pointer;
    color: var(--colorAzul);
}

.btnEliminarAdmin button:hover {
    background-color: var(--colorDestacadoOscuro);
}

.btnEditarAdmin button {
    background-color: transparent;
    padding: 10px 30px;
    border: none;
    border-radius: 20px;
    color: var(--colorAzul);
    border: 1px solid var(--colorAzul);
    transition: background .4s ease-out, color .4s ease-out;
    cursor: pointer;
}

.btnEditarAdmin button:hover {
    background-color: var(--colorAzul);
    color: var(--grisClaro);
}

.contenedorResultadosAdmin {
    position: relative;
    margin-top: 30px;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 10px 15px var(--grisOscuro2);
    background-color: var(--grisClaro);
    margin-bottom: 20px;
    min-height: 150px;
}

.contenedorNuevoDocAdmin {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.subirNuevoDocAdmin {
    max-width: 400px;
    box-shadow: 0 10px 15px var(--grisOscuro2);
    background-color: var(--grisClaro);
    border-radius: 20px;
    padding: 30px 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 30px;
    color: var(--oscuro);
    text-decoration: none;
    transition: color .4s ease-out, padding .4s ease-out;
}

.darkmode .subirNuevoDocAdmin {
    color: var(--colorTexto);
}

.darkmode .subirNuevoDocAdmin svg {
    color: var(--colorTexto);
}

.subirNuevoDocAdmin svg {
    transform: scale(2);
    color: var(--oscuro);
    transition: color .4s ease-out;
}

.subirNuevoDocAdmin:hover {
    color: var(--colorAzul);
    padding: 30px 35px;
}

.subirNuevoDocAdmin:hover svg {
    color: var(--colorAzul);
}

.eliminar.ND_p2Bodyp2 {
    gap: 0;
}

.eliminarFecha {
    color: var(--grisOscuro2);
    margin: 0;
}

.eliminarTitulo {
    margin: 0;
}

.eliminarResumen {
    margin: 0;
    margin-top: 10px;
    padding: 0 20px;
    color: var(--grisOscuro2);
    font-style: italic;
    font-weight: 300;
}

.eliminarAutor {
    margin: 0;
    margin-top: 40px;
    margin-bottom: 10px;
    font-weight: 700;
}

.eliminarAutores {
    margin: 0;
    padding: 0 20px;
    font-weight: 400;
    text-transform: capitalize;
}

.eliminarPC {
    margin: 0;
    margin-top: 40px;
    font-weight: 700;
}

.eliminarGridPC {
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 10px;
    padding: 20px;
    list-style: none;
    margin: 0;
}

.eliminarGridList {
    padding: 5px 15px;
    background-color: var(--gris);
    border-left: 3px solid var(--colorAzul);
    font-size: 14px;
}

.eliminarChips {
    background-color: var(--grisClaro);
    border: 1px solid var(--colorAzul);
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 12px;
    width: 40%;
    margin-left: 20px;
}

.contenedorChipsEliminar {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.eliminarContendorChipsHeader {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--gris);
    border-radius: 20px;
    padding: 10px;
}

.eliminarContendorChipsHeader p {
    width: 100%;
    font-weight: 700;
    text-align: center;
}

.eliminarContendorChipsHeader .ND_p2BodyV2_chip {
    background-color: var(--grisClaro);
    color: var(--colorAzul);
    border: 1px solid var(--colorAzul);
    padding: 5px 20px;
}

.eliminarContenedorChipsRow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.eliminarMensajeFinal {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ND_botonesEliminar {
    background-color: var(--colorDestacado);
    padding: 10px 50px;
    color: var(--grisClaro);
    border: none;
    border-radius: 20px;
    transition: background .4s ease-out;
    cursor: pointer;
}

.ND_botonesEliminar:hover {
    background-color: var(--colorDestacadoOscuro);
}

.contenedorLogin {
    display: flex;
    justify-content: center;
    margin-top: 10vh;
    gap: 40px;
}

.formularioLogin {
    display: flex;
    flex-direction: column;
    gap: 30px;
    background-color: var(--gris);
    box-shadow: 0 10px 15px var(--grisOscuro2);
    border-radius: 10px;
    padding: 80px 40px;
    width: 40%;
}

.contenidoLogin {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contenidoLogin label {
    font-size: 12px;
}

.loginIcono {
    height: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.loginIcono p {
    margin: 0;
}

.loginIcono svg {
    transform: scale(4);
    color: var(--colorAzul);
}

.contenidoLogin select,
.contenidoLogin input {
    width: 100%;
    font-size: 16px;
    padding: 5px 20px;
    border-radius: 20px;
    border: 1px solid var(--colorAzul);
    background-color: var(--grisClaro);
}

.formularioLoginHeader h3 {
    text-align: center;
    margin-bottom: 10px;
}

.formularioLoginHeader p {
    font-size: 14px;
}

.formularioLogin button {
    background-color: var(--colorAzul);
    border: none;
    border-radius: 20px;
    padding: 10px 40px;
    color: var(--grisClaro);
    cursor: pointer;
    transition: background .4s ease-out;
}

.formularioLogin button:hover {
    background-color: var(--colorAzulOscuro);
}

.darkmode .formularioLogin button {
    background-color: var(--grisClaro);
    color: var(--colorTexto);
}

#respuestaLogin {
    color: var(--colorDestacadoOscuro);
    font-size: 14px;
}

.darkmode #respuestaLogin {
    color: var(--colorTexto);
}

.contenedorHistoria {
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 10px 15px var(--grisOscuro2);
    background-color: var(--grisClaro);
    margin-bottom: 20px;
}

.darkmode .contenedorHistoria {
    box-shadow: 10px 10px 15px #272727;
}

.HT_tituloCont {
    text-align: center;
    color: var(--grisOscuro2);
    font-weight: 400;
    font-size: 24px;
    margin-bottom: 10px;
}

.darkmode .HT_tituloCont {
    color: var(--colorTexto);
}

.historiaOrdenar {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
}

.HT_ordenarFlecha {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    cursor: pointer;
}

.girar180 {
    transform: rotate(180deg);
}

.HT_ordenarBtn {
    border: none;
    background-color: transparent;
    width: 140px;
    padding-left: 10px;
    font-size: 16px;
}

.darkmode .HT_ordenarBtn {
    color: var(--colorTexto);
}

.HT_ordenarSeparador {
    width: 100%;
    height: 2px;
    margin-right: 30px;
    margin-left: 10px;
    background-color: var(--colorAzul);
}

.historiaTitulo {
    text-align: center;
}

.historiaContenedorTarjetas {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.historiaTarjeta {
    background-color: var(--gris);
    display: flex;
    flex-direction: row;
    position: relative;
    border-radius: 20px;
    box-shadow: 10px 10px 10px var(--grisOscuro);
}

.darkmode .historiaTarjeta {
    box-shadow: 10px 10px 10px #272727;
}

.HT_hitos {
    flex: 1;
}

.HT_hitosHeader {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.HT_fecha2 {
    padding: 10px 40px;
    background-color: var(--grisClaro);
    margin: 0;
    border-radius: 0 0 20px 0;
    position: relative;
    font-size: 28px;
}

.HT_fecha2::after {
    content: "";
    position: absolute;
    background-color: transparent;
    right: -50px;
    top: 0;
    width: 50px;
    height: 40px;
    border-top-left-radius: 25px;
    box-shadow: -25px 0 0 0 var(--grisClaro);
}

.HT_fecha2::before {
    content: "";
    position: absolute;
    background-color: transparent;
    left: 0;
    bottom: -50px;
    height: 50px;
    width: 25px;
    border-top-left-radius: 25px;
    box-shadow: 0 -25px 0 0 var(--grisClaro);
}

.HT_hitosTit,
.HT_publicacionesTit {
    padding-left: 40px;
    color: var(--grisOscuro2);
    font-weight: 400;
}

.darkmode .HT_hitosTit,
.darkmode .HT_publicacionesTit {
    color: var(--colorTexto);
}

.HT_hitosCont {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    padding: 20px;
    margin-bottom: 20px;
    height: 80%;
}


.HT_hitosCada {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.HT_hitosCadap1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    justify-content: center;
}

.HT_hitosCadap1 img {
    width: 80%;
}

.HT_hitosCadap1 p {
    margin: 0;
}

.HT_hitosCadap2 {
    flex: 3;
    display: flex;
    align-items: center;
}

.HT_hitosCadap2 p {
    color: var(--oscuro);
    font-weight: 300;
    font-size: 14px;
}

.darkmode .HT_hitosCadap2 p {
    color: var(--colorTexto);
}

.HT_publicaciones {
    flex: 2;
}

.HT_publicacionesTit {
    padding-left: 100px;
}

.HT_publiContenedor {
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: flex-start;
    padding: 40px;
    /* border-left: 2px solid var(--colorAzul); */
}

.HT_separador {
    width: 2px;
    background-color: var(--colorAzul);
    background: linear-gradient(to bottom, #f5f5f5 70px, #007AFF 70px, #007AFF 90%, #f5f5f5 90%);
}

.darkmode .HT_separador {
    background: linear-gradient(to bottom, var(--gris) 70px, var(--colorAzul) 70px, var(--colorAzul) 90%, var(--gris) 90%);
}

.HT_publiContenedorLimite {
    max-height: 350px;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: flex-start;
    padding-bottom: 25px;
}

.HT_publiCada {
    margin: 0 15px;
    background-color: var(--grisClaro);
    padding: 15px 25px;
    border: 1px solid var(--colorAzul);
    border-radius: 20px;
    box-shadow: 0 10px 15px var(--grisOscuro);
}

.darkmode .HT_publiCada {
    box-shadow: none;
}

.HT_publiCada a {
    color: var(--oscuro);
    text-decoration: none;
}

.darkmode .HT_publiCada a {
    color: var(--colorTexto);
}

.HT_publiCada.j100 {
    border: 2px solid var(--colorAzulOscuro);
}

.darkmode .HT_publiCada.j100 {
    background-color: var(--grisOscuro);
}

.HT_publiCada.j100 a {
    color: var(--colorAzulOscuro);
}

.HT_publiContenedorBtn {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 0 30px;
}

.HT_publiBtn {
    background-color: var(--grisClaro);
    padding: 5px 30px;
    border: 1px solid var(--colorAzul);
    border-radius: 20px;
    color: var(--oscuro);
    text-decoration: none;
    box-shadow: 0 10px 15px var(--grisOscuro);
    transition: background .4s ease-out, color .4s ease-out;
}

.darkmode .HT_publiBtn {
    box-shadow: none;
    color: var(--colorTexto);
    box-shadow: 0 5px 15px #272727;
}

.HT_publiBtn:hover {
    background-color: var(--colorAzul);
    color: var(--grisClaro);
}

.GH_header {
    text-align: center;
}

.lineaActa {
    position: absolute;
    top: 45%;
    width: 95%;
    height: 10%;
    background-color: var(--grisOscuro);
}

.contPDFHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 10vh;
}

.contPDFHeader a {
    color: var(--grisOscuro2);
    text-decoration: none;
    width: 120px;
}

.darkmode .contPDFHeader a {
    color: var(--colorTexto);
}

.contPDFHeader a svg {
    margin-right: 10px;
}

embed {
    width: 100%;
    height: 90vh;
}

.contenedorInformes {
    margin-top: 40px;
    background-color: var(--grisClaro);
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
}

.informesHeader {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
}

.informesHeader h3 {
    width: 100%;
}

.informesHeader select {
    width: 20%;
    margin: 8px 0;
}

.informeTablaHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    background-color: var(--colorAzul);
    color: #fff;
    font-weight: 700;
}



.informeTablaFooter {
    background-color: var(--gris);
    color: var(--colorTexto);
    text-align: center;
    padding: 12px 0;
    margin-top: 6px;
    margin-bottom: 40px;
}

.informeTablaFooter a {
    margin: 0;
    color: var(--colorTexto);
    cursor: pointer;
    text-decoration: none;
}

.informeTablaFila {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.informeTablaFila:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.1);
}

.informeTablaCol {
    flex: 2;
    text-align: center;
    padding: 5px 0;
    position: relative;
}

.informeTablaCol:nth-child(1) {
    flex: 1;
}

.informeTablaCol:nth-child(2) {
    flex: 13;
    text-align: left;
}

.informeTablaCol.colAncha {
    flex: 4;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    padding: 0;
}

.informeTablaColB {
    display: flex;
}

.informeTablaColH {
    padding: 5px 0;
    background-color: var(--colorAzulOscuro);
}

.informeTablaColI {
    flex: 1;
    padding: 5px 0;
}

.informeTablaColI:nth-child(odd) {
    background-color: #248eff;
}




.informeTablaCol.ordenar::before {
    position: absolute;
    content: '';
    top: 12px;
    left: 80%;
    transform: translateX(-50%);
    border-top: 6px solid #fff;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.informeTabalColSubC {
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: center;
}

/* TABLET */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .CC_MD {
        flex: none;
        width: 100%;
    }

    .CC_LG .contenedorChips {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .fotoTarjetaDoc {
        display: none;
    }

    .datosTarjetaDoc {
        padding: 18px;
        width: 100%;
    }

    .btnCompartir,
    .btnLeer {
        width: 140px;
    }

    .ND_p2Header {
        width: 60%;
        margin-left: 20%;
    }

    .ND_cargadorArchivo {
        width: 70%;
    }

    .ND_p2Bodyp1 {
        flex: none;
        width: 50%;
    }

    .ND_p2Body {
        flex-direction: column;
        align-items: center;
    }

    .ND_p2Bodyp2 {
        flex: none;
        width: 100%;
    }

    .ND_p2BodyV2_cont {
        flex-direction: column;
    }

    .HT_hitos {
        width: 30%;
    }

    .HT_hitosCada {
        flex-direction: column;
        gap: 0;
    }

    .HT_hitosHeader {
        flex-direction: column;
    }

    .HT_hitosCadap1 img {
        width: 50%;
    }

    .HT_publiContenedorLimite {
        gap: 20px;
    }

    .HT_publiContenedor {
        padding: 0;
    }

    .HT_publiContenedorBtn {
        margin-bottom: 15px;
        gap: 10px;
    }

    .HT_publiBtn {
        padding: 5px 10px;
    }

    .accionesTarjetaDoc {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .footer {
        padding: 30px 0;
        padding-top: 100px;
    }

    .formularioLogin {
        width: 80%;
    }

    .informeTablaFila {
        align-items: center;
    }

    .informesHeader select {
        width: 30%;
    }
}

/* MOBILE */
@media screen and (max-width: 767px) {
    .contenedor {
        width: 90%;
        margin-left: 5%;
    }

    .contendorChips {
        padding: 20px 30px;
    }

    .CC_XS {
        width: 100%;
        flex: none;
    }

    .tituloContenedor p {
        padding: 0 30px;
    }

    .CC_LG .contenedorChips {
        flex-direction: column;
        gap: 10px;
    }

    .fotoTarjetaDoc {
        display: none;
    }

    .datosTarjetaDoc {
        padding: 15px;
        width: 100%;
    }

    .accionesTarjetaDoc {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 15px;
        margin-top: 20px;
    }

    .btnTarjetaDoc {
        flex-direction: column;
        width: 100%;
    }

    .btnCompartir,
    .btnLeer {
        width: 100%;
    }

    .headerTextos {
        flex-direction: column;
        align-items: flex-start;
    }

    .capsulasHeader {
        flex-wrap: wrap;
    }

    .datosTarjetaDocAdmin {
        flex-direction: column;
        align-items: flex-start;
    }

    .datosTarjetaDocAdmin h4 {
        text-align: center;
    }

    .ND_p2Header {
        width: 80%;
        margin-left: 10%;
    }

    .ND_cargadorArchivo {
        width: 90%;
    }

    .ND_p2Bodyp1 {
        flex: none;
        width: 80%;
    }

    .ND_p2Body {
        flex-direction: column;
        align-items: center;
    }

    .ND_p2Bodyp2 {
        flex: none;
        width: 100%;
    }

    .ND_p2BodyV2_cont {
        flex-direction: column;
    }

    .ND_contenedorCargar {
        justify-content: flex-end;
    }

    .ND_cargadorTexto {
        width: 60%;
    }

    .historiaTarjeta {
        flex-direction: column;
    }

    .HT_publiContenedor {
        border: none;
        padding: 40px 20px;
    }

    .HT_publiContenedorBtn {
        flex-direction: column;
        padding: 0;
    }

    .HT_publiBtn {
        text-align: center;
    }

    .iconoLogin {
        position: relative;
        top: 0;
        right: 0;
    }

    .navbarMenu {
        gap: 15px;
        flex-direction: column;
        align-items: flex-end;
        position: absolute;
        right: 0;
        top: 80px;
        background-color: rgba(21, 21, 57, 0.9);
        padding: 30px;
        width: 100%;
    }

    .HT_publiContenedorLimite {
        gap: 20px;
    }

    .HT_separador {
        width: 90%;
        margin-left: 5%;
        height: 2px;
        background: var(--colorAzul);
    }

    .noMobile {
        display: none;
    }

    .popCompartir {
        padding: 20px;
    }

    .popoverAT {
        width: auto;
    }

    .contenedorFechas {
        flex-direction: column;
    }

    .fechas {
        width: 100%;
    }

    .footer {
        flex-direction: column;
        gap: 30px;
    }

    .datosFooter {
        border: 0;
        padding: 10px;
        gap: 20px;
    }

    .contenedorDark {
        justify-content: center;
    }

    .contenedorActasFiltros {
        flex-direction: column;
        align-items: center;
        margin-top: 30px;
    }

    .datosActas {
        width: 100%;
    }

    .datosTarjetaDocAdmin h4 {
        text-align: left;
    }

    .contenedorBtnAdmin {
        width: 100%;
    }

    .headerTextosActas {
        flex-direction: column;
        padding: 0;
    }

    .formularioLogin {
        width: 90%;
        padding: 60px 40px;
    }

    .h-90 {
        height: 120px !important;
    }

    .contenedorNuevoDocAdmin {
        flex-direction: column;
    }

    .eliminarContBtn {
        flex-direction: column-reverse;
    }

    .loginIcono {
        height: 110px;
    }

    .legal {
        padding: 15px 30px;
    }

    .contenedorLegal {
        flex-direction: column;
        gap: 0;
        font-size: 10px;
    }

    .legal1 {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .legal1 svg {
        width: 40px;
        margin-left: 15px;
    }

    .informeTablaCol p {
        display: none;
    }

    .informeTablaCol:nth-child(1) {
        display: none;
    }

    .informeTablaCol:nth-child(2) {
        padding-right: 5px;
    }

    .informeTablaFila {
        align-items: center;
    }

    .informeTablaFila .informeTablaCol {
        font-size: 12px;
    }

    .informeTablaFila .informeTablaCol:nth-child(2),
    .informeTablaHeader .informeTablaCol:nth-child(2) {
        flex: 8;
    }

    .informeTablaFila .informeTablaCol:nth-child(n+3),
    .informeTablaHeader .informeTablaCol:nth-child(n+3) {
        flex: 2;
    }

    .informeRedes {
        width: auto;
        overflow-x: scroll;
    }

    .informeRedes .informeTablaHeader,
    .informeRedes #informeTablaRedes,
    .informeRedes .informeTablaFooter {
        width: 500px;
    }

    .colAncha {
        flex: 4 !important;
    }

    .informesHeader {
        flex-wrap: wrap;
        gap: 5px;
    }

    .informesHeader select {
        width: 100%;
        padding: 5px;
    }
}