/*z de linear z-index: 1000002; paneles poup
     z-index: 1000003; alaertas
    */

div::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

div::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 10px;
}

div::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.125);
    border-radius: 10px;
}

:root {
    --space: 3rem;
    --cubo-caja: 1rem;
    --color-transp: rgba(0, 0, 0, 0.175);
    --naranja: #ff5b00;
    --w-100:0%;
}

.combo-separacion select {
    margin-bottom: var(--medida-local, 5px) !important;
}

.z-p-poup {
    z-index: 1000002 !important;
}

.div-busqueda {
    width: min-content;
    column-gap: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-control {
    margin-bottom: 0px !important;
}

.div-m-es {
    width: calc(100% - var(--local-w,0px));
}

.div-flex-25 {
    flex: 1 1 25%;
}

.rad-cent-cab {
    display: flex;
    justify-content: center;
}

    .rad-cent-cab tr {
        display: flex;
        column-gap: 10px;
    }

        .rad-cent-cab tr td {
            display: flex;
            column-gap: 5px;
        }

.navig-title-1 {
    display: flex;
}

.caja-spc-1 {
    padding: var(--cubo-caja) var(--cubo-caja);
}

.bg-color-v {
    background-color: #28b463;
}

.bg-color-nj {
    background-color: #ff7500;
}

.espacio-left {
    padding-right: calc(var(--space) * 0.5);
    padding-left: calc(var(--space) * 0.5);
}

.radio-s-5 {
    /*  border-top: 2px solid #000;  Borde superior */
    border-radius: 5px 5px 0 0; /* Esquinas superiores redondeadas */
}

.lista-botones {
    display: grid;
    overflow-y: auto;
    white-space: nowrap;
    padding: 0;
}

.cubo-botones {
    width: 200px;
    max-width: 200px;
    max-width: 200px !important;
}

.caja-border {
    border: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 10px 10px 5px 5px;
}

.alerta-poup {
    width: auto;
    min-width: 700px; /* Ancho mínimo inicial */
    max-width: 900px; /* Asegura que no exceda el ancho de la pantalla */
    height: 7px;
    z-index: 1000003;
    position: fixed;
    top: 20px;
    right: 20px; /* Posiciona el diálogo a 20px del borde derecho */
    text-align: right;
}

    .alerta-poup #Error {
        width: 700px; /* Ancho mínimo inicial */
    }

/* Botón de toggle que permanece pegado al borde izquierdo del div */
.ventana-lateral-derecha {
    position: absolute;
    top: 100px;
    left: -25px; /* El botón está fuera del borde izquierdo del contenedor */
    width: 25px;
    height: 25px;
    background-color: white;
    color: #007bff;
    border: none;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border: 1px solid #007bff;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    cursor: pointer;
    z-index: 1050;
    display: none;
    transition: left 0.3s ease-in-out; /* Suaviza el movimiento del botón */
}

.cuadro-33 {
    flex: 0 0 auto;
    width: 33.33333333%;
}

.cuadro-66 {
    flex: 0 0 auto;
    width: 66.66666667%;
}

.poup-dimio-8 {
    width: 100%;
    max-width: calc(100% - 80%);
    padding: 5px 10px;
    min-width: 250px;
}

.poup-dimio-75 {
    width: 100%;
    max-width: calc(100% - 75%);
    padding: 5px 10px;
    min-width: 390px;
}

.poup-dimio-7 {
    width: 100%;
    max-width: calc(100% - 70%);
    padding: 5px 10px;
}

.poup-dimio-6 {
    width: 100%;
    max-width: calc(100% - 60%);
    padding: 5px 10px;
}

.poup-medio-45 {
    width: 100%;
    max-width: calc(100% - 45%);
    min-width: 740px;
    padding: 5px 10px;
}

.poup-medio {
    width: 100%;
    max-width: calc(100% - 50%);
    padding: 5px 10px;
}

.poup-total-2 {
    width: 100%;
    max-width: calc(100% - 20%);
    padding: 5px 10px;
    overflow: hidden;
}

.poup-total-h2 {
    height: 100%;
    max-height: calc(100% - 20px);
    overflow: hidden;
}

.poup-total {
    width: 100%;
    max-width: calc(100% - 20px);
    padding: 5px 10px;
    overflow: hidden;
}

.oc-650 {
    display: inline;
}

.ms-650 {
    display: none;
}

.total-ver-med-6 {
    width: calc(100% - 60%);
}

.tab-lay-undex {
    padding: 5px;
    border: 1px solid #dee2e6;
}

.transmor {
    order: 0; /* Valor por defecto */
}
.min-dim {
    min-width: var(--local-x, 0px);
    min-height: var(--local-y, 0px);
}

.mod-orden-440 {
    justify-content: flex-start;
}

.div-m50 {
    width: max-content;
}

.flex-1 {
    flex: 1;
}

.button-acua input {
    background-color: #129afe;
    border: 1px solid #ccc;
    box-shadow: none;
    color: #fff;
    padding: 3px 6px;
    border-radius: 5px;
    margin: 2px 0px;
}

.button-morado-2 input {
    background-color: #9559bc;
    border: 1px solid #ccc;
    box-shadow: none;
    color: #fff;
    padding: 3px 6px;
    border-radius: 5px;
    margin: 2px 0px;
}

.button-morado-1 input {
    background-color: #8f71a3;
    border: 1px solid #ccc;
    box-shadow: none;
    color: #fff;
    padding: 3px 6px;
    border-radius: 5px;
    margin: 2px 0px;
}

.button-verde input {
    background-color: #28b463;
    border: 1px solid #ccc;
    box-shadow: none;
    color: #fff;
    padding: 3px 6px;
    border-radius: 5px;
    margin: 2px 0px;
}

.button-verde-1 input {
    background-color: #11d533;
    border: 1px solid #ccc;
    box-shadow: none;
    color: #fff;
    padding: 3px 6px;
    border-radius: 5px;
    margin: 2px 0px;
}

.button-azul input {
    background-color: #003366;
    border: 1px solid #ccc;
    box-shadow: none;
    color: #fff;
    padding: 3px 6px;
    border-radius: 5px;
    margin: 2px 0px;
}

.button-azul-1 input {
    background-color: #33508e;
    border: 1px solid #ccc;
    box-shadow: none;
    color: #fff;
    padding: 3px 6px;
    border-radius: 5px;
    margin: 2px 0px;
}

.button-rojo input {
    background-color: #ff0000;
    border: 1px solid #ccc;
    box-shadow: none;
    color: #fff;
    padding: 3px 6px;
    border-radius: 5px;
    margin: 2px 0px;
}

.button-naranja input {
    background-color: #f67e02;
    border: 1px solid #ccc;
    box-shadow: none;
    color: #fff;
    padding: 3px 6px;
    border-radius: 5px;
    margin: 2px 0px;
}


@media (max-width: 1500px) {
    .total-ver-med {
        width: calc(100% - 70%);
    }
}

@media (max-width: 1200px) {
    .poup-dimio-7 {
        max-width: calc(100% - 60%);
    }
}

@media (max-width: 1000px) {
    .navig-title-1 {
        max-width: calc(100% / 2);
        display: flex;
    }
    .div-m-es {
    width: calc(100% - var(--local-w-1,0px));
    }
}

/* Mostrar el botón solo en pantallas menores a 900px */
@media (max-width: 952px) {
    .linea-centro {
        display: flex;
        justify-content: center;
    }

    .cubo-personalizado {
        width: 70% !important;
    }

    .lista-botones {
        display: grid; /* Hace que los elementos de la lista se ubiquen en línea */
        overflow-x: auto; /* Habilita el scroll horizontal */
        white-space: nowrap; /* Previene que los elementos se envuelvan en varias líneas */
        padding: 0;
    }

    .cubo-botones .list-group-item {
        min-width: 200px; /* Establece un ancho mínimo para los elementos */
        margin-right: 10px; /* Espacio entre los elementos */
    }

    .ventana-lateral-derecha {
        display: flex;
    }

    #lateral_derecho {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        width: 300px;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1000002;
        background-color: white;
        box-shadow: -4px 0 6px rgba(0, 0, 0, 0.1);
    }

    #div_lateral_derecho {
        padding: 0px;
        overflow-y: auto;
        height: 100%;
    }
}

@media (max-width: 900px) {
    .navig-title-1 {
        max-width: 200px;
        display: flex;
    }

    .cuadro-33 {
        flex: 0 0 auto;
        width: 50%;
    }

    .cuadro-66 {
        flex: 0 0 auto;
        width: 50%;
    }

    .alerta-poup {
        transform: translateX(0%);
        width: auto;
        min-width: 500px;
        max-width: 700px;
    }

    .poup-medio {
        max-width: calc(100% - 40%);
    }

    .poup-medio-45 {
        min-width: 700px;
    }

    .poup-dimio-7 {
        max-width: calc(100% - 40%);
    }

    .alerta-poup #Error {
        width: 600px; /* Ancho mínimo inicial */
    }
}

/* Mostrar el botón solo en pantallas menores a 767px */
@media (max-width: 768px) {


    .cubo-personalizado {
        width: 100% !important;
    }


    .cubo-botones {
        width: 100%;
        max-width: 100% !important;
    }

    .poup-medio-45 {
        min-width: 650px;
    }

    .poup-total-h2 {
        max-height: calc(100% - 20%);
    }

    .button-acua input {
        max-width: 200px;
    }

    .lista-botones {
        display: block;
    }
}

@media (max-width: 700px) {
    .navig-title-1 {
        max-width: 150px;
    }

    .alerta-poup {
        min-width: 200px; /* Ajusta el ancho mínimo */
        max-width: calc(100% - 40px); /* Evita que toque los bordes */
        top: 20px; /* Mantén la distancia desde la parte superior */
        left: 50%; /* Centra horizontalmente */
        transform: translateX(-50%); /* Ajusta el elemento para que esté realmente centrado */
        right: auto; /* Elimina la fijación al borde derecho */
        text-align: center; /* Cambia alineación del texto al centro */
    }

    .poup-medio-45 {
        max-width: calc(100% - 20px);
        min-width: auto;
    }

    .poup-total-2 {
        max-width: calc(100% - 20px);
    }

    .alerta-poup #Error {
        width: 100%; /* Ancho mínimo inicial */
    }

    .poup-dimio-75 {
        /*max-width: calc(100% - 20px);*/
    }

    .poup-dimio-7 {
        max-width: calc(100% - 20px);
    }

    .poup-medio {
        max-width: calc(100% - 20px);
    }

    .tab-lay-undex {
        padding: 0px;
        border: 0px solid #dee2e6;
    }
}

@media (max-width: 650px) {
    .flex-col-650 {
        flex-direction: column;
        min-width: 100%;
    }
   .flex-col-650 .min-dim {
        min-width: 100%;
    }
    .oc-650 {
        display: none;
    }

    .ms-650 {
        display: inline;
    }
}

@media (max-width: 552px) {
    :root {
        --space: 0rem;
    }

    .cuadro-33 {
        flex: 0 0 auto;
        width: 100%;
    }

    .cuadro-66 {
        flex: 0 0 auto;
        width: 100%;
    }

    .flex-1 {
        flex: auto;
    }

    .div-m50 {
        display: contents;
        width: calc(100% - 50%);
    }

    .transmor:first-child {
        order: 2; /* Pasa al segundo lugar */
    }

    .transmor:nth-child(2) {
        order: 1; /* Pasa al primer lugar */
    }

    .total-ver-med-6 {
        min-width: 100%;
    }
}

@media (max-width: 500px) {
    .poup-dimio-75 {
        max-width: calc(100% - 20px);
        min-width: auto;
    }

    .poup-dimio-8 {
        max-width: calc(100% - 20px);
        min-width: auto;
    }

    .total-ver-med-6 {
        min-width: 100%;
    }
}

@media (max-width: 440px) {
    .div-flex-25 {
        flex: 1 1 100%;
    }

    .mod-orden-440 {
        justify-content: center;
    }
}

@media (max-width: 320px) {
    .navig-title-1 {
        max-width: 100px;
    }
}

.borde-grid-inf {
    border-bottom: 1px solid #80aaff; /* Esto crea un borde inferior en la grid */
}

.container-fluid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


.list-group-item {
    flex: 0 0 auto; /* Los elementos no se estiran y se mantienen en su tamaño original */
}

#lateral_derecho {
}

#div_lateral_derecho {
}

.list-group-item {
    width: 100px;
}


.textBoxMeus .form-control {
    border: 1px solid #7faece;
}

.textBoxMeus {
    position: relative;
    width: 100%;
    margin-top: 5px;
}

    .textBoxMeus label {
        position: absolute;
        top: -10px;
        left: 10px;
        background-color: transparent;
        padding: 0 5px;
        color: var(--color-def, #2f6ba7);
        font-size: 10pt;
        pointer-events: none;
        z-index: 1; /* Asegura que la etiqueta esté al frente */
        transition: color 0.3s ease-in-out;
        text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    }

.spanBoxMeus .form-control {
    border: 1px solid #7faece;
}

.spanBoxMeus {
    position: relative;
    width: 100%;
    margin-top: 5px;
}

    .spanBoxMeus span {
        position: absolute;
        top: -10px;
        left: 10px;
        background-color: transparent;
        padding: 0 5px;
        color: #2f6ba7;
        font-size: 10pt;
        pointer-events: none;
        z-index: 1; /* Asegura que la etiqueta esté al frente */
        transition: color 0.3s ease-in-out;
        text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    }


.labelBoxMeus {
    min-height: 15px;
    position: relative;
    width: 100%;
    padding: 0px 5px;
    margin-top: 6px;
    border: 0px solid #7faece;
}

    .labelBoxMeus label {
        position: absolute;
        top: -10px;
        left: 0px;
        background-color: transparent;
        padding: 0px;
        color: #ff0000;
        font-size: 10pt;
        pointer-events: none;
        z-index: 1; /* Asegura que la etiqueta esté al frente */
        transition: color 0.3s ease-in-out;
        text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    }




.label-titulos {
    color: #08326e;
    font-size: 12pt;
    font-weight: 700;
}
/* Cambia la posición del botón cuando el div está activo */
#lateral_derecho.active + .ventana-lateral-derecha {
    left: -20px; /* Ajusta la posición cuando el div está abierto */
}

/* Mostrar el tercer div */
#lateral_derecho.active {
    transform: translateX(0);
}

.combo-style select {
    color: blue;
    box-shadow: 0 0 1px #fff;
}

.combo-color select {
    box-shadow: 0 0 3px var(--color-def) !important;
}

.combo-modo-1 select {
    color: #4f4f4f;
    height: 25px !important;
    font-size: 10pt;
    box-shadow: 0 0 3px #4b97cb;
}


/* Asegurarse de que las celdas de la tabla estén centradas verticalmente */
.tabla-center {
    width: 100%; /* Aseguramos que la tabla ocupe todo el ancho disponible */
    border-collapse: collapse; /* Para evitar espacios extraños entre celdas */
}

    .tabla-center td {
        vertical-align: middle; /* Centra el contenido verticalmente */
        text-align: center; /* Centra el contenido horizontalmente */
        padding: 0px 5px; /* Agregar algo de espacio dentro de las celdas */
    }

    /* Asegurarse de que los dropdowns tengan el mismo estilo y se centren correctamente */
    .tabla-center select {
        height: 30px; /* Establecer altura específica para que se vea más centrado */
        box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
        margin: 0; /* Eliminar márgenes adicionales */
    }

    /* Asegurar que los textos en los dropdowns se alineen bien */
    .tabla-center label {
        display: block; /* Asegura que las etiquetas ocupen su propia línea */
        margin-bottom: 5px; /* Separación entre el combo y la etiqueta */
        text-align: center; /* Centrar la etiqueta horizontalmente */
    }

.disolver {
    display: none;
}

.div-m100 {
    width: 100%;
}

.div-h100 {
    height: 100%; /* Asegura que este div ocupe el 100% de la altura del panel */
    overflow: hidden; /* Evita que el contenido sobrepase el div */
}

.div-center {
    display: block;
    text-align: center;
}

.div-celdas {
    display: flex;
    flex-wrap: wrap;
}

.div-columnas {
    display: flex;
    flex-direction: column;
}

.div-flex {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 5px; /* Espaciado entre los elementos */
}

.div-centro-lf {
    display: flex;
    align-items: center;
    text-align: center;
}

.div-centro {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.div-flex-cm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.div-scroll-vertical {
    overflow-y: scroll;
}

.div-scroll-horizontal {
    overflow-x: scroll;
}

.tabla-poup-encabezado {
    width: 100%;
    display: flex;
    margin: 0px 0px 10px 0px;
}

    .tabla-poup-encabezado > div:first-child {
        flex: 1;
    }

    .tabla-poup-encabezado > div:last-child {
        flex: 0;
    }

.btnCerrar {
    width: 25px;
    height: 25px;
}

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


.image-content {
    overflow: hidden;
    border: 1px dashed #A8B3E3;
    padding: 5px;
}

    .image-content input {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.combo-boton {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .combo-boton .textBoxMeus {
        flex-grow: 1;
    }

.alinecion-vertical {
    display: flex;
    align-items: center;
    gap: 5px;
}

.impa-dual-all {
    display: flex;
    flex-wrap: wrap;
    column-gap: 5px;
    row-gap: 3px;
    margin-top: 3px;
}

    .impa-dual-all .spanBoxMeus {
        flex: 1 1 48%; /* 50% menos un pequeño espacio para el gap */
        min-width: 200px;
    }

    .impa-dual-all .textBoxMeus {
        flex: 1 1 48%; /* 50% menos un pequeño espacio para el gap */
        min-width: 200px;
    }

    .impa-dual-all .labelBoxMeus {
        flex: 1 1 48%; /* 50% menos un pequeño espacio para el gap */
        min-width: 140px;
    }

    .impa-dual-all .Objetivo {
        flex: 1 1 50%; /* 50% menos un pequeño espacio para el gap */
        min-width: calc(100% - 50%);
    }

.impa-dual-combo {
    display: flex;
    flex-wrap: wrap;
    column-gap: 5px;
    row-gap: 3px;
}

    .impa-dual-combo .combo-boton {
        flex: 1 1 48%; /* 50% menos un pequeño espacio para el gap */
        min-width: 200px;
    }

.impa-dual-span {
    display: flex;
    flex-wrap: wrap;
    column-gap: 5px;
    row-gap: 3px;
}

    .impa-dual-span .spanBoxMeus {
        flex: 1 1 48%; /* 50% menos un pequeño espacio para el gap */
        min-width: 200px;
    }



.dramLaft-pdf {
    width: 100%;
    height: 100%;
}

.full-height > div > div {
    height: 100%;
}

.full-height > div {
    height: 100%; /* Hace que los divs hijos ocupen el 100% de la altura de su contenedor */
    box-sizing: border-box; /* Asegura que el padding y los bordes no afecten el tamaño */
}

.check-visto input {
    border-radius: 50%;
    background: #fff;
    width: 1em;
    height: 1em;
    margin-top: .25em;
    vertical-align: top;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid #000;
    appearance: none;
}

    .check-visto input:checked {
        background-color: #000;
        border-color: #000;
        background-image: url('/Imagenes/download.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

.chek-verd input {
    border: 1px solid #28b463;
}

    .chek-verd input:checked {
        background-color: #28b463;
        border-color: #28b463;
    }

.chek-mord input {
    border: 1px solid #8628b4;
}

    .chek-mord input:checked {
        background-color: #8628b4;
        border-color: #8628b4;
    }

.label-title-1 {
    font-family: tahoma;
    font-size: 11pt;
    font-weight: 700;
    color: #353a7d;
}

.label-title-2 {
}

.label-subtitle-1 {
    font-family: tahoma;
    font-size: 9pt;
    font-weight: 600;
    color: #bc0000;
}

.label-read-1 {
    font-family: tahoma;
    font-size: 9pt;
}

.label-read-2 {
    font-family: tahoma;
    font-size: 9pt;
    font-weight: 600;
}

.label-minread-1 {
    font-family: tahoma;
    font-size: 6pt;
}

.text-mg-1 input {
    margin-bottom: 1px !important;
}

.nav-link {
    border: 3px solid #4064a196 !important;
    color: #4064a196;
    border-top: none !important;
    border-right: none !important;
}

    .nav-link.active {
        border: 3px solid #0d6efd !important;
        background-color: #fff !important;
        color: #0d6efd !important;
        border-top: none !important;
        border-right: none !important;
    }