/*
Variables
*/

:root {
    --crd-color-az: #004899;
    --crd-color-bc: #fff;
    --crd-color-pl0: #595959;
    --crd-color-pl1: #717171;
    --crd-color-pl2: #949494;
    /*  --crd-maxancho: 1366px;*/
    --crd-maxancho: 1766px;
    --bs-Azuliv: #004899;
}

/*Contenedores*/
.crd-content {
    max-width: var(--crd-maxancho);
}
.form-container-pay {
    max-width: 454px;
}

.crd-content-login {
    width: 100%;
    /*max-width: 30rem;*/
    max-width: 364px;
    width: 364px;
    background: #FFFFFF;
    border: 1px solid #D4D4D4;
    box-shadow: 5px 6px 8px rgba(0, 0, 0, 0.15);
    border-radius: 15px;
}
.crd-content-add-user {
    width: 100%;
    /*max-width: 30rem;*/
    max-width: 536px;
    width: 628px;
    background: #FFFFFF;
    border: 1px solid #D4D4D4;
    box-shadow: 5px 6px 8px rgba(0, 0, 0, 0.15);
    border-radius: 15px;
    padding-left: 25px;
    padding-right: 25px
}
.crd-content-add-pay {
    width: 100%;
    /*max-width: 30rem;*/
    max-width: 454px;
    width: 454px;
    background: #FFFFFF;
    border: 1px solid #D4D4D4;
    box-shadow: 5px 6px 8px rgba(0, 0, 0, 0.15);
    border-radius:15px;
}
.crd-content-mis-facturas {
    width: 100%;
    /*max-width: 30rem;*/
    max-width: 1230px;
    width: 1230px;
    background: #FFFFFF;
    border: 1px solid #D4D4D4;
    box-shadow: 5px 6px 8px rgba(0, 0, 0, 0.15);
    border-radius: 15px;
}
 
.crd-contentlogin {
    padding: 25px;
}

.crd-ct-center {
    margin: 0 auto;
}

.crd-content-header {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
}

.crd-content-footer {
    width: 100%;
    box-shadow: 1px -3px 8px rgba(0, 0, 0, 0.13);
    padding-top: 13.5px;
    padding-bottom: 13.5px;
}

    .crd-content-footer span {
        font-weight: 400;
        font-size: 15px;
        line-height: 18px;
        color: #595959;
        font-family: "barlowregular";
    }

        .crd-content-footer span a {
            font-weight: 600;
            font-size: 15px;
            line-height: 18px;
            color: var(--crd-color-az);
        }
/*Fuentes y letras*/
.crd-titulo-log {
    font-size: 38px;
    flex-grow:1;
    font-family: "barlowbold_italic";
    line-height: 46px;
    font-weight: 700;
}
.custom-select .activo{
    background-color:blue;
}

.crd-negrilla {
    font-weight: 600;
    font-size: 17px;
    line-height: 20px;
    color: var(--crd-color-pl0);
    font-family: "barlowsemibold";
}
.crd-pop-validacion {
    font-weight: 600;
    font-size: 17px;
    line-height: 20px;
    color: #595959;
    font-family: "barlowregular";
    padding-left: 25px;
    padding-right: 25px;
}
/*Formulario*/
.crd-input {
    position: relative;
    text-align: center;
    margin-bottom: 18px;
}

    .crd-input .crd-formcontrol {
        font-size: 17px;
        padding: 13px;
        border: 1.5px solid #8f8f8fa3;
        /*background: var(--crd-color-bc);*/
        color: var(--crd-color-pl1);
        outline: none;
        font-family: "barlowsemibold";
        width: 283px;
        padding-left: 6px;
        border-radius: 4px;
    }

    .crd-input label {
        position: absolute;
        top: 50%;
        left: 15px;
        transform: translateY(-50%);
        color: var(--crd-color-pl2);
        pointer-events: none;
        transition: 0.3s;
        font-family: "barlowsemibold";
        font-weight: 600;
        font-size: 17px;
        line-height: 20px;
        padding-left: 6px;
        margin-left: 5px;
    }
    crd-input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
}

    crd-input[type="password"]:focus {
        outline: none;
        border-color: #003399;
        box-shadow: 0 0 5px rgba(0, 51, 153, 0.5);
    }


.crd-input-rec-pas {
    position: relative;
    
    text-align: center;
    margin-bottom: 18px;
}

    .crd-input-rec-pas .crd-formcontrolrec {
        font-size: 17px;
        padding: 13px;
        border: 1.5px solid #8f8f8fa3;
        background: var(--crd-color-bc);
        color: var(--crd-color-pl1);
        outline: none;
        font-family: "barlowsemibold";
        width: 283px;
    }

    .crd-input-rec-pas label {
        /*position: absolute;*/
        
        color: #8F8F8F;
        text-align: left;
        top: 50%;
        left: 15px;
        /*transform: translateY(-50%);*/
        color: var(--crd-color-pl2);
        pointer-events: none;
        transition: 0.3s;
        font-family: "barlowsemibold";
        font-weight: 600;
        font-size: 14px;
        line-height: 20px;
        width: 283px;
    }
 
.crd-btn-rec-pas {
    width: 283px;
    height: 48px;
    background: var(--crd-color-az);
    font-family: "barlowsemibold";
    font-weight: 600;
    font-size: 17px;
    line-height: 20px;
    text-align: center;
    color: var(--crd-color-bc);
    cursor: pointer;
    border: 0px;
    border-radius: 8px;
}
.crd-formcontrol:focus {
    border: 1px solid var(--crd-color-az); /*var(--crd-color-az);*/
}

    .crd-formcontrol:focus ~ label,
    .crd-formcontrol:valid ~ label {
        top: 0;
        left: 15px;
        font-weight: 600;
        font-size: 17px;
        line-height: 20px;
        color: var(--crd-color-az); /* #8F8F8F;*/
        padding: 0 2px;
        background: var(--crd-color-bc);
    }
/*.crd-formcontrol:valid {
    border-color: #003399; height: 200px;
    box-shadow: 0 0 5px rgba(0, 51, 153, 0.5);
    background-color: #ffffff;
}*/

.crd-btn-login {
    width: 100%;
    height: 48px;
    background: var(--crd-color-az);
    font-family: "barlowsemibold";
    font-weight: 600;
    font-size: 17px;
    line-height: 20px;
    text-align: center;
    color: var(--crd-color-bc);
    cursor: pointer;
    border: 0px;
    border-radius: 8px;
}
    .crd-btn-login:disabled {
        background-color: gray; /* Color cuando está deshabilitado */
        background: gray;
         
    }

/*Comtenid de página de administración*/

.menuadmin {
  /*  display:inline-block;*/
    /*overflow:hidden;*/
    height: auto;
    background: #FCFBFB;
    border: 1px solid #D4D4D4;
    box-shadow: 2px 5px 6px rgba(0, 0, 0, 0.25);
    margin: 1px;
  /*  padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 49px;
    padding-left: 80px;*/

}
 
.menucabecera {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 0px;
    place-items: center;
    width: 100%;
    /* height:auto;
    overflow:auto;*/
}

.item1 {
    padding: 8px;
    display:inline-block
}
.item2 {
    margin:5px;
    padding: 8px;
}

.item3 {
    padding: 8px;
}

.return {
    font-family: "barlowsemibold";
    font-weight: 600;
    font-size: 17px;
    line-height: 20px;
    text-decoration: none;
    color: var(--crd-color-az);
}

.menucliente {
    margin: 0px;
    padding: 0px;
    text-align: right;
}

    .menucliente li {
        display: inline-block;
        margin-right: 60px;
        white-space: nowrap;
    }

        .menucliente li:last-child {
            margin-right: 0px !important;
        }

        .menucliente li a {
            text-decoration: none;
            font-weight: 600;
            font-size: 17px;
            line-height: 20px;
            font-family: "barlowsemibold";
            color: #595959;
        }

            .menucliente li a:hover {
                font-family: 'Montserrat';
                font-style: normal;
                font-weight: 700;
                font-size: 17px;
                line-height: 21px;
                color: #004899;
                text-decoration: underline;
            }

    .menucliente .activo {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 700;
        font-size: 17px;
        line-height: 21px;
        color: #004899;
        text-decoration: underline;
        text-decoration-thickness: 2.5px;
    }







/* Reset básico */
/** {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}*/

/*body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    line-height: 1.6;
}

.containerx {
    width: 100%;
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: black;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}*/

/* Estilo para filas */
/*.row {
    display: flex;*/ /* Utiliza Flexbox */
    /*gap: 20px;*/ /* Espacio entre columnas */
    /*margin-bottom: 20px;*/ /* Espacio entre filas */
    /*width: 454px;
    height: 619px;
    
    color:aliceblue;

}*/

/* Estilo para columnas */
/*.column {
    flex: 1;*/ /* Las columnas ocupan el mismo ancho */
    /*padding: 20px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: blue;
    width: 454px;
    height: 619px;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #003366;
}

h2 {
    color: blue;
    margin-bottom: 10px;
}*/

/* Responsividad para móviles */
/*@media (max-width: 768px) {
    .row {
        flex-direction: column;*/ /* Las columnas se apilan en pantallas pequeñas */
    /*}
}*/


























.dateRange {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px;
}

/*----------region pagos---------*/
.pay-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    color: gray;
    /* Opción de Pago */

    font-family: 'barlowsemibold';
    font-style: normal;
    font-size: 16px;
    color: #8F8F8F;
}

    .pay-divider::before,
    .pay-divider::after {
        content: '';
        flex: 1;
        border-top: 1px solid lightgray;
        margin: 0 10px;
    }

.crd-ct-left {
    flex: 1;
}

.crd-ct-rigth {
    flex: 2;
}

.row-pay {
    display: flex;
    gap: 60px;
    margin-bottom: 20px;
    justify-content: center;
    /*   width: 454px;
    height: 619px;
    
    color:aliceblue;*/
}

/* Asegurado: */
.txt-pay-detalle{

 display:flex;
/*position: initial;*/
/*width: 138.98px;
height: 17.71px;*/
font-family: 'barlowsemibold';
font-style: normal;
/*font-weight: 600;*/
font-size: 16px;
/*line-height: 19px;*/
color: #595959;
align-items:center;
}
.row-pay-form {
    display: flex;
    gap: 1px;
    margin-bottom: 15px;
    justify-content: start;
 /*   vertical-align:central;*/
}
.row-pay-form-fac {
    display: flex;
    gap: 1px;
    margin-bottom: 1px;
    justify-content: start;
    /*   vertical-align:central;*/
}
.row-fit-content{
    display:block;
    width:auto;
}
 

.box-45 {
    width: 45%; /* Elemento ocupa el 30% del ancho */
    background-color: white;
    text-align: start center;
    vertical-align: central;
}

.box-55 {
    width: 55%; /* Elemento ocupa el 30% del ancho */
    background-color: white;
    text-align: start center;
    vertical-align: central;
}

.box-30 {
    width: 40%; /* Elemento ocupa el 30% del ancho */
    background-color: white;
    text-align: start center;
    vertical-align:central;
    
}

.box-70 {
    width: 60%; /* Elemento ocupa el 70% del ancho */
    background-color: white;
    text-align: start;
    vertical-align: central;
}
.box-50 {
    width: 50%; /* Elemento ocupa el 50% del ancho */
    background-color: white;
    text-align: start;
    vertical-align: central;

}
.row-pay-form-img {
    display: flex;
    gap: 1px;
    margin-bottom: 15px;
    justify-content: center;
    vertical-align: central;
    padding-left: 25px;
    padding-right: 25px;
    cursor:pointer;
}
.box-40 {
    width: 40%; /* Elemento ocupa el 50% del ancho */
    background-color: white;
    text-align: start;
    vertical-align: central;
}
.box-60 {
    width: 60%; /* Elemento ocupa el 50% del ancho */
    background-color: white;
    text-align: start;
    vertical-align: central;
}
.box-100 {
    width: 100%; /* Elemento ocupa el 70% del ancho */
    background-color: white;
    text-align: start;
    vertical-align: central;
}
.pay-form-control {
    width: 100%;
    padding: 1px;
    padding-left:6px;
    border: 1px solid #cccccc;
    border-radius: 0px;
    font-size: 14px;
    height: 33.24px;
    font-family:'barlowregular';
}
.pay-form-control-add {
    width: 100%;
    padding: 1px;
    padding-left: 6px;
    border: 1px solid #cccccc;
    border-radius: 0px;
    font-size: 14px;
    height: 33.24px;
    font-family: 'barlowregular';
}
.pay-margin-0{
    margin: 0px;
}

/*.custom-select-pay {
    position: relative;
    display: inline-block;
    width: 200px;*/ /* Ajusta el ancho según necesidad */
/*}
select.custom-select-pay {*/ /* Usando la clase de Bootstrap si la tienes */
    /*padding: 0.375rem 0.75rem;*/ /* Ajusta el padding según necesites */
    /*border: 1px solid #ced4da;*/ /* Borde gris claro */
    /*border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;*/ /* Transiciones suaves */
/*}*/

    /* Estilo al pasar el mouse */
    /*select.custom-select-pay:hover {
        background-color: #e0f2f7;*/ /* Un azul muy claro como fondo */
        /*border-color: #81d4fa;*/ /* Un azul claro para el borde */
        /*cursor: pointer;
    }*/
    /*.custom-select-pay select {
        appearance: none;*/ /* Elimina los estilos nativos */
        /*width: 100%;
        padding: 8px 30px 8px 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: red;
        cursor: pointer;
        outline: none;*/ /* Quita el outline predeterminado */
    /*}

    .custom-select-pay::after {*/ /* Crea la flecha desplegable */
        /*content: "\25BC";
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .custom-select-pay option:hover {
        background-color: red;*/ /* Color de fondo al pasar el ratón */
        /*border-color: #64b5f6;
    }
    .custom-select-pay .active {
        background-color: orangered;
        color:black;
      
    }*/

/* Estilo para el foco (importante para accesibilidad) */
/*select.custom-select-pay:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}*/

.pay-form-control-hover {
    width: 100%;
    padding: 1px;
    padding-left: 6px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 14px;
    height: 33.24px;
}
 
.pay-form-control-hover, option:hover {
    font-family: Arial;
    color: green;
    background-color: lightyellow;
    cursor: pointer;
}
    .pay-form-control-hover ,option:focus {
        color: blue;
        background-color: red;
        box-shadow: 0 0 5px rgba(0, 0, 255, 0.3);
    }


.select-btn {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    text-align: left;
    cursor: pointer;
}

.checkbox-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border: 1px solid #ccc;
    background-color: #fff;
    z-index: 1000;
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;
    display: none; /* Oculto por defecto */
}

    .checkbox-dropdown label {
        display: block;
        padding: 5px;
        cursor: pointer;
    }

    .checkbox-dropdown input[type="checkbox"] {
        margin-right: 10px;
        margin-left:10px;
    }

.custom-select {
    position: relative;
    display: inline-block;
    width: 200px;
    background-color: var(--crd-color-bc);
}
/*.custom-select {
    background-color: blueviolet;
    position: relative;
    display: inline-block;
}*/

.crd-btn-pendientes {
    width: 100%;
    height: 48px;
    background-color:antiquewhite;
    background: var(--crd-color-az);
    font-family: "barlowsemibold";
    font-weight: 600;
    font-size: 10px;
    line-height: 20px;
    text-align: center;
    color: var(--crd-color-bc);
    cursor: pointer;
    border: 0px;
}

.dropdown-menu {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 1000;
    top: 100%; /* Coloca el menú justo debajo del elemento */
    left: 0; /* Alinea el menú con el lado izquierdo del elemento */
    margin-top: 5px; /* Espacio entre el elemento y el menú */
   
}
.dropdown-menu-pay {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 1000;
    top: 100%;
    left: 0;
    margin-top: 5px;
    display: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    
}
.dropdown-pay {
    position: relative;
    display: block;
    width: 100.8%;
    box-shadow: 5px 6px 8px rgba(0, 0, 0, 0.15);
    border-radius: 1px;
    margin-left:-1px;
    margin-right: 0px;
    border: 1px solid #ccc;
}
.dropdown-pay.show{
    display:block;
}



.dropdown-menu.show {
    display: block;
}
.btn-primary-dropdown {
    color: #fff;
    background-color: #004899;
    border-color: #004899;
    align-content: center;
} 
/*.step-container {
    display: flex;
    align-items: center;
   
    justify-content: center;*//*space-between;*/ 
/*}*/
 
/*.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    color: #777;*/ /* Color por defecto */
/*}*/

    /*.step .circle {*/
        /*width: 30px;
        height: 30px;*/
        /*padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 14px;
        padding-right: 14px;
        border-radius: 50%;
        background: #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-family: sans-serif;*//*'barlowbold_italic'*/
        /*font-size: 23px;
        margin-left: 0px;
        font-weight: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }*/

    /*.step.active .circle {
        background: #004080;*/ /* Color activo */
    /*}*/

   /* .step.active {
        color: red;
    }*/

/*.line {
    width: 69px;
    height: 5px;
    background: #ccc;
    margin-left: 35px;
}*/

.step.active + .line {
    background: #004080; /* Línea activa */
}
.txt-opciones-pago {
    font-size: 20px;
    /* Datos de Pago */
    font-family: 'barlowbold_italic';
    color: #004899;

}


.contenedor-horizontal {
    /* Datos de Pago */
    flex-direction:column;
    font-size: 20px;
    /* Datos de Pago */
    font-family: 'Inter';
    font-style: italic;
    color: #004899;
    display: flex; /* Habilita Flexbox para el contenedor */
    /* Propiedades opcionales para controlar la alineación y el espaciado: */
    justify-content: space-between; /* Distribuye el espacio entre los hijos */
    align-items: center; /* Centra los hijos verticalmente */
    gap: 10px; /* Espacio entre los hijos (alternativa moderna a margin) */
}
.progress-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin: 40px auto;
    max-width: 800px;
    padding: 0 20px;
}

    .progress-wrapper::before {
        content: '';
        position: absolute;
        top: 12px; /* mitad del alto del círculo */
        left: 17.5%; /* <-- ajuste aquí */
        right: 17.5%; /* <-- ajuste aquí */
        height: 3px;
        background-color: #00489b;
        z-index: 0;
    }


.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    width: 33.33%;
    text-align: center;
}

.progress-circle {
    width: 24px;
    height: 24px;
    border: 2px solid #00489b;
    background-color: #fff;
    border-radius: 50%;
    color: transparent;
    display: flex;
    align-items: self-end;/*center;*/
    justify-content: center;
    font-size: 14px;
    z-index: 1;
}

.progress-step.active .progress-circle {
    background-color: #00489b;
    color: white;
}

.progress-label {
    margin-top: 6px;
    font-size: 13px;
    color: #888;
    line-height: 1.2;
}

.progress-step.active .progress-label {
    color: #00489b;
    font-weight: bold;
}
.hijo-horizontal {
    /* Estilos para los hijos (opcional) */
    background-color: lightblue;
    padding: 10px;
    border: 1px solid black;
}
.pay-button {
    width: 100%;
    padding: 5px 10px; /* Ajusta para un botón más cómodo */
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 14px;
    height: 36px; /* Ajusta la altura del botón */
    background-color: #f5f5f5; /* Fondo del botón */
    color: #333333; /* Color del texto */
    cursor: pointer;
    text-align: start;
    display: inline-block;
    transition: background-color 0.3s ease, border-color 0.3s ease;

}
.pay-buttonx{ 
    width: 100%;
    padding: 5px 10px; /* Ajusta para un botón más cómodo */
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 14px;
    height: 36px; /* Ajusta la altura del botón */
    background-color: #f5f5f5; /* Fondo del botón */
    color: #333333; /* Color del texto */
    cursor: pointer;
    text-align: start;
    display: inline-block;
    transition: background-color 0.3s ease, border-color 0.3s ease;

}


.pay-button:hover {
    background-color: #e6e6e6;
    border-color: #b3b3b3;
}

    .pay-button:active {
        background-color: #d9d9d9;
        border-color: #999999;
    }

    .pay-button:disabled {
        background-color: #f9f9f9;
        border-color: #e6e6e6;
        color: #cccccc;
        cursor: not-allowed;
    }

.lbl-pequeno {
    font-size: 16px;
    color: var( --crd-color-az);
    display: inline-block;
    height: 100%;
}

/*
.checkbox-container {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
}

    .checkbox-container label {
        display: block;
        margin-bottom: 5px;
        cursor: pointer;
    }

    .checkbox-container input[type="checkbox"] {
        margin-right: 10px;
    }
*/














/*region resumen pago*/
body {
    font-family: Arial, sans-serif;
   /* background-color: #f8f9fa;*/
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.progreso {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

    .progreso .paso {
        width: 30px;
        height: 30px;
        background-color: #ccc;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .progreso .activo {
        background-color: #003399;
    }

    .progreso .linea {
        flex: 1;
        height: 2px;
        background-color: #ccc;
        margin: 0 10px;
    }

.pago-contenedor {
    display: flex;
    gap: 20px;
}

.formulario-pago, .resumen-pago {
    flex: 1;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .formulario-pago h2, .resumen-pago h2 {
        color: #003399;
        font-weight: bold;
    }

.form-control {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.opciones-pago {
    display: flex;
    justify-content: space-between;
}

    .opciones-pago div img {
        width: 80px;
        height: auto;
        cursor: pointer;
    }

.fila {
    display: flex;
    justify-content: space-between;
}

.total {
    font-weight: bold;
    font-size: 1.2em;
}

.monto-total {
    color: #003399;
}

.btn-primary {
    background-color: #003399;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

    .btn-primary:hover {
        background-color: #002266;
    }

.marked {
    stroke: red;
    stroke-width: 2;
}
/*end region resumen pago*/

/*
.pay-crd-negrilla {
    width: 150.98px;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: var(--crd-color-pl0);
    font-family: "barlowsemibold";
}


.pay-form-control {
    width: 100%;
    padding: 8px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 14px;
}

    .pay-form-control:focus {
        border-color: #0056b3;
        outline: none;
        box-shadow: 0 0 4px rgba(0, 86, 179, 0.3);
    }


.form-group {
    margin-bottom: 15px;
}
    .form-group label {
        display: block;
        font-weight: bold;
        margin-bottom: 5px;
        color: #333333;
    }
*/












































/*.bodypay {
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.containerpay {
    display: flex;
    gap: 20px;*/ /* Espacio entre las tarjetas */
    /*width: 90%;*/ /* Ancho total del contenedor */
    /*max-width: 1200px;
}

.cardpay {
    background-color: #fff;
    border-radius: 15px;*/ /* Bordes redondeados */
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/ /* Sombra suave */
    /*padding: 20px;
    flex: 1;*/ /* Distribuye el espacio */
    /*display: flex;
    flex-direction: column;
}

.card-leftpay {
    flex: 2;*/ /* La tarjeta izquierda ocupa más espacio */
/*}

.card-rightpay {
    flex: 1;*/ /* La tarjeta derecha ocupa menos espacio */
/*}

.card-titlepay {
    font-size: 1.5rem;
    color: #003366;*/ /* Azul oscuro */
    /*font-weight: bold;
    font-style: italic;
    margin-bottom: 10px;
}

.card-contentpay {
    flex: 1;*/
    /* Contenido de ejemplo */
    /*color: #666;
}*/


/*
Autor:Rodrigo Chambi
Para mostrar asistente de progreso
*/
/*.crd-wizard {
    box-sizing: border-box;
    background: none;
}

    .crd-wizard .crd-wizard-header {
        height: 64px;
        min-width: 1314px;
    }

        .crd-wizard .crd-wizard-header ol {
            margin: 0px;
            padding: 0px;
        }

            .crd-wizard .crd-wizard-header ol li {
                display: inline-block;
                width: 17%;
            }

                .crd-wizard .crd-wizard-header ol li:last-child {
                    width: 17% !important;
                }

                .crd-wizard .crd-wizard-header ol li a {
                    text-decoration: none;
                }

                    .crd-wizard .crd-wizard-header ol li a svg {
                        vertical-align: middle;
                        fill: #8F8F8F;
                    }

                    .crd-wizard .crd-wizard-header ol li a span {
                        position: static;
                        z-index: 4;
                        background: #ffffff;
                        margin-left: -4px;
                        padding-left: 4px;
                        padding-right: 4px;
                    }

                .crd-wizard .crd-wizard-header ol li .progress {
                    border-top: 5px solid #cccdce;*/ /* #8F8F8F;*/
                    /*position: relative;
                    top: -20px;
                    z-index: -1;
                    left: 40px;
                }

                .crd-wizard .crd-wizard-header ol li a {
                    color: #8F8F8F;
                    text-decoration: none;
                }

                    .crd-wizard .crd-wizard-header ol li a svg {
                        fill: #8F8F8F;
                    }

                .crd-wizard .crd-wizard-header ol li.active .progress {
                    border-top: 5px solid #004899;*/ /* #8F8F8F;*/
                    /*position: relative;
                    top: -20px;
                    z-index: -1;
                }

                .crd-wizard .crd-wizard-header ol li.active a {
                    color: #004899;
                    text-decoration: none;
                }

                    .crd-wizard .crd-wizard-header ol li.active a svg {
                        fill: #004899;
                    }

    .crd-wizard .content-wizard .active {
        display: block;
    }

    .crd-wizard .content-wizard div {
        display: none;
    }

@media only screen and (max-width:768px),only screen and (max-width:820px),only screen and (max-width:834px) {
    .crd-wizard .crd-wizard-header {
        min-width: 100% !important;
    }

        .crd-wizard .crd-wizard-header ol li {
            display: block;
            margin-bottom: 10px;
            width: 100%;
        }

            .crd-wizard .crd-wizard-header ol li:last-child {
                display: block;
                margin-bottom: 10px;
                width: 100% !important;
            }

    .crd-wizard .crd-wizard-header {
        height: auto;
    }

        .crd-wizard .crd-wizard-header ol li .progress {
            border-top: 0px;
        }

        .crd-wizard .crd-wizard-header ol li.active .progress {
            border-top: 0px;*/ /* #8F8F8F;*/
        /*}
}*/
.modal-contentpopup { /* Contenedor principal */
    position: relative;
    display: flex;
    flex-direction: column;
    width: 364px;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 1rem;
    outline: 0;
}
 

.btn-closepopup {
    box-sizing: content-box;
    margin: 10px 15px 0px auto;
    /*width: 100%;*/
    height: 20px; /*1em;*/
    width:20PX;
    padding: 0em 0.25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: 0.25rem;
    opacity: 0.5;
    display: flex;
    justify-content: end;
    margin-left: auto;
}
.modal-header-pop {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    padding: 0rem 1rem 1rem 1rem;
    border-bottom: 0px solid #dee2e6;
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);
}


.modal-body-pop {
    position: relative;
    flex: 1 1 auto;
    padding: 1px 50px 30px 50px;
    text-align: center;
    font-family: 'barlowregular';
    font-size: 17px;
    font-style: normal;
    color: #595959;
}

.no-border-bottom-fac {
    border-bottom: none; /* Elimina la línea inferior */
    /* 55436784 */

    
    font-family: 'barlowregular';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    /* identical to box height */

    color: #595959;
}
.border-bottom-fac {
    border-bottom: 1.5px solid #8F8F8F;
    border-top: 1.5px solid #8F8F8F;
    /* No. Factura */


    font-family: 'barlowsemibold';
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    text-align: start;
    color: #595959;
}
.line-pay {
    width: 50px;
    height: 5px;
    /*background: #ccc;*/
}
.padding_abajo_null{
    padding-bottom: 0px;
}
.modal-body-pop-qr {
    position: relative;
    flex: 1 1 auto;
    padding-top: 5px;
}













/* Contenedor personalizado del select */
.custom-select-pay {
    position: relative;
    display: inline-block;
    width: 100%;
}

    /* Estilo del select */
    .custom-select-pay select {
        width: 100%;
        padding: 10px 12px;
        font-size: 14px;
        color: red;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: red;
        appearance: none; /* Elimina flecha predeterminada */
        -webkit-appearance: none;
        -moz-appearance: none;
        outline: none;
        cursor: pointer;
        transition: border-color 0.3s ease-in-out;
    }

    /* Flecha personalizada */
    .custom-select-pay::after {
        content: '▼';
        font-size: 12px;
        color: #333;
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        pointer-events: none;
    }

    /* Estilo al hacer hover o focus */
    .custom-select-pay select:hover,
    .custom-select-pay select:focus {
        border-color: #007bff; /* Color azul para el borde */
        box-shadow: 0 0 4px rgba(0, 123, 255, 0.4);
    }

/* Estilo de las opciones */
.custom-select-pay select option {
    padding: 10px;
    font-size: 134px;
    color: #333;
    background-color:coral;
}


 


.select-polizas {
    /*padding: 10px;*/

    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0px;
    padding-left: 0px;
    text-indent: 3px;
    padding-right: 0px;
    border: 1px solid #cccccc;
    border-radius: 0px;
    font-size: 14px;
    height: 33.24px;
    display: inline-block;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    /*background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23007bff" viewBox="0 0 16 16"><path d="M1.5 6.5l6 6 6-6h-12z"/></svg>');*/
    background-image: url('data:image/svg+xml;charset=UTF-8, <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 4 L12 15 L22 4" stroke="currentColor"   stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/> </svg>');
    background-repeat: no-repeat;
    background-position: right 3px center;
    background-size: 9px;
    background-color: white;
    /*width: 100%;
    padding: 5px 10px;*/ /* Ajusta para un botón más cómodo */
    /*border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 14px;
    height: 36px;*/ /* Ajusta la altura del botón */
    /*background-color: #f5f5f5;*/ /* Fondo del botón */
    /*color: #333333;*/ /* Color del texto */
    /*cursor: pointer;
    text-align: center;
    display: inline-block; crd-input
    transition: background-color 0.3s ease, border-color 0.3s ease;*/
}
.select-polizas:hover{
    background-color: white;
}
    .select-polizas span {
       vertical-align: -webkit-baseline-middle;

    }
.select-polizasb {
    /*padding: 10px;*/

    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0px;
    padding-left: 0px;
    text-indent: 3px;
    padding-right: 0px;
    /*border: 1px solid #8F8F8F;*/
    border: 1px solid rgba(143, 143, 143, 0.64);
    border-radius: 0px;
    font-size: 14px;
    height: 33.24px;
    display: inline-block;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    /*background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23007bff" viewBox="0 0 16 16"><path d="M1.5 6.5l6 6 6-6h-12z"/></svg>');*/
    background-image: url("../images/flecha.svg");
    background-repeat: no-repeat;
    background-position: right 3px center;
    background-size: 24px;
    background-color: white;
    /*width: 100%;
    padding: 5px 10px;*/ /* Ajusta para un botón más cómodo */
    /*border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 14px;
    height: 36px;*/ /* Ajusta la altura del botón */
    /*background-color: #f5f5f5;*/ /* Fondo del botón */
    /*color: #333333;*/ /* Color del texto */
    /*cursor: pointer;
    text-align: center;
    display: inline-block; crd-input
    transition: background-color 0.3s ease, border-color 0.3s ease;*/
}

.select-polizas:hover {
    background-color: white;
}

.select-polizas span {
    vertical-align: -webkit-baseline-middle;
}

.dropdown {
    width: 200px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 1px;
    position: relative;
}
 
.select-polizasx {
    /*padding: 10px;*/

    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0px;
    padding-left: 0px;
    text-indent: 3px;
    padding-right: 0px;
    border: 1px solid #cccccc;
    border-radius: 0px;
    font-size: 14px;
    height: 33.24px;
    display: inline-block;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    /*background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23007bff" viewBox="0 0 16 16"><path d="M1.5 6.5l6 6 6-6h-12z"/></svg>');*/
    background-image: url('data:image/svg+xml;charset=UTF-8, <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 4 L12 15 L22 4" stroke="currentColor"   stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/> </svg>');
    background-repeat: no-repeat;
    background-position: right 3px center;
    background-size: 9px;
    background-color: white;
    /*width: 100%;
    padding: 5px 10px;*/ /* Ajusta para un botón más cómodo */
    /*border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 14px;
    height: 36px;*/ /* Ajusta la altura del botón */
    /*background-color: #f5f5f5;*/ /* Fondo del botón */
    /*color: #333333;*/ /* Color del texto */
    /*cursor: pointer;
    text-align: center;
    display: inline-block; crd-input
    transition: background-color 0.3s ease, border-color 0.3s ease;*/
}
    .dropdown ul {
        padding-left: 0px;
    }


.dropdown-item-pay {
    padding: 0px;
    cursor: pointer;
    font-family:'barlowregular';
    font-size: 14px;
    list-style-type:none;
    text-align:start;
    padding: 4px 0px 4px 0px;
}
 
 .dropdown-item-pay:focus {
        background-color: white;
         
        /*outline: none;*/
        /*accent-color:blue;*/
    }

    .dropdown-item-pay:hover {
        /*color: red;*/
        
        background-color: white;
        font-family:'barlowsemibold';
       /* font-size: 34px;
        font-style: italic;*/
       /* accent-color: red;*/
    }

.dropdown-item-pay-cuo {
    padding: 0px;
    cursor: pointer;
    font-family: 'barlowregular';
    font-size: 14px;
    list-style-type: none;
    text-align: start;
    padding: 4px 0px 4px 0px;
}

    .dropdown-item-pay-cuo:focus {
        background-color: white;
        /*outline: none;*/
        /*accent-color:blue;*/
    }

    .dropdown-item-pay-cuo:hover {
        /*color: red;*/
        
        background-color: white;
        font-family: 'barlowsemibold';
        /* font-size: 34px;
        font-style: italic;*/
        /* accent-color: red;*/
    }

    .ul-pay{
        padding:0px;
        gap:10px;
        position:relative;
        display:inline-block;
        margin-bottom:0px;
        width:100%;
    }
.ul-pay-fac {
    padding: 0px;
    gap: 10px;
    position: absolute;
    display: inline-block;
    margin-bottom: 0px;
    width: 300%;
    background-color: white;
    border: 1px solid rgba(143, 143, 143, 0.64);
}
   /* .dropdown-item-pay:focus,
    .dropdown-item-pay:hover {
        color: red;
        background-color: red;
        font-size: 34px;
        font-style: italic;
        accent-color: red; crd-negrilla
    }*/
.oculto {
    /*display: none;*/
}
 
.ocultob {
    display: none;
}

.clr-azulos-txt-pop {
    color: var(--bs-Azuliv);
}
.clr-rojoos-txt-pop{
    color: red;
}
dropdown-pay custom-select
/*----------------------------------------------*/
/*---------------     password     --------------*/
/*----------------------------------------------*/
.password-container {
    position: relative;
    display: inline-block;
}

.password-input {
    padding-right: 30px; /* Espacio para el icono */
}

.toggle-password {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: gray;
}












 
.dropdownfac {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px;
    width: 200px;
    position: relative;
    cursor: pointer;
    background-color: white;
}

    .dropdownfac i {
        margin-right: 8px;
        color: #555;
    }

.dropdownfac-text {
    flex-grow: 1;
}

.dropdownfac .arrow {
    margin-left: auto;
    color: #555;
}

.dropdownfac-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border: 1px solid #ccc;
    background-color: white;
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 5px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

    .dropdownfac-list li {
        padding: 8px;
        cursor: pointer;
    }

        .dropdownfac-list li:hover {
            background-color: #f0f0f0;
        }

.dropdownfac.open .dropdownfac-list {
    display: block;
}
.facturas-opciones {
    display: flex;
    justify-content: space-between;
    margin-right: 15px;
    vertical-align: central;
    height: 50px;
    width: 100%;
    gap: 5px;
}
.factabvisible{
    visibility:visible;
}
.color-fondo-pay {
    background-color: #F5F5F5;
}
#div_esp_fac {
    height: 45px;
}

#div_esp_met {
    height: 45px;
}
#btnPagar{
    visibility:visible;
}
#btnPagarB {
    visibility: hidden;
}
#div_btnPagar {
    visibility: visible;
    height: 46px;
}

#div_btnPagarB {
    visibility: hidden;
    height:0;
}
.btn_pagar {
    fill-opacity: 0.5;
    color: #8F8F8F;
}

.btn_libelula_selec {
    fill-opacity: 1;
    color: #5450A3;
}
.btn_qrbcp_selec {
    fill-opacity: 1;
    color: #004899;
}
#div_esp_met {
    height: 10px;
}
/*Celulares pequeños*/
@media (min-width: 320px) and (max-width: 399px) {
    .progress-wrapper{
        padding:0;
        margin: 10px auto;
    }
     #table_fac{
         visibility:collapse;
         height:0;
     }
    #listafacturas {
        
    }
    #btnPagar {
        visibility: hidden;
    }

    #btnPagarB {
        visibility: visible;
        width:70%;
    }
    #div_btnPagar {
        visibility: hidden;
        height: 0px;
    }

    #div_btnPagarB {
        visibility: visible;
        height: 46px;
    }
    #fac_card_body {
    padding-left: 40px;
    padding-right: 40px;
}
.shadow-sm {
    border: none !important;
    box-shadow: none !important;
}
    .sin-borde-mov {
        border: none !important;
        box-shadow: none !important;
    }
    .txt-pay-detalle {
        margin-top: 15px;
    }
    .crd-content {
        /*width: 100px;*/
    }

    .row-pay-form {
        display: contents;
       
    }

    .crd-content-add-pay {
        width: 100%;
        border: none;
        box-shadow: none;
    }

    .color-fondo-pay {
        background-color: white;
    }

    .row-pay {
        display: block;
        margin-left: 0px;
    }

    .line {
        margin-left: 0;
        width: 0;
    }

    .step-container {
        justify-content: left;
    }

    .facturas-opciones {
        display: block;
        height: auto;
        /*   justify-content: space-between;
        margin-right: 15px;
        vertical-align: central;
    
        width: 100%;
        gap: 5px;*/
    }

    .crd-content-add-user {
        width: 100%;
        /*max-width: 30rem;*/
        max-width: 399px;
        width: auto;
        background: #FFFFFF;
        border: 1px solid #D4D4D4;
        box-shadow: 5px 6px 8px rgba(0, 0, 0, 0.15);
        border-radius: 15px;
        padding-left: 2px;
        padding-right: 2px
    }

    .factabvisible {
        visibility: hidden;
        max-width: 0px;
        content: "";
        display: none;
    }

    #div_text_return {
        visibility: hidden;
        width: 0;
        padding: 0;
        margin: 0;
    }

    #div_esp_fac {
        height: 0px;
    }
    #div_esp_met {
        height: 0px;
    }

    .menucliente li {
        display: inline-block;
        margin-right: 0;
        white-space: nowrap;
    }
    /*pagos en línea*/
    .btnPagos {
        position: absolute;
        width: 263.83px;
        height: 44475px;
        left: 498px;
        top: 548px;
    }
    /*pagos en línea*/
    /*.btnPagos{
        position: absolute;
        width: 263.83px;
        height: 44475px;
        left: 498px;
        top: 548px;

    }*/

    .crd-content-mis-facturas {
        border: none;
        box-shadow: none;
        border-radius: 0;
        width: fit-content;
    }

    #fac_card_body {
        padding-left: 4px;
        padding-right: 4px;

    }

    .card {
        border: none !important ;
        box-shadow: none !important;
    }

    .menucabecera {
        display: flex;
    }

    .item3 {
        width: inherit;
    }

    .no-border-bottom-fac {
        padding: 5px;
    }

    .ul-pay-fac {
        width: fit-content;
    }

    .opciones-datfac-fec-mob {
        visibility: hidden;
        height: 0;
    }



    .factura-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 12px;
    }

    .factura-item {
        font-size: 14px;
        color: #595959;
    }

        .factura-item.full {
            grid-column: 1 / -1;
        }











    /* Celulares grandes*/
    @media (min-width: 400px) and (max-width: 440px) {
    }
    /*Tabletas*/
    @media (min-width: 768px) and (max-width: 884px) {
    }
    /*Pantallas con mas resolucion*/
    @media only screen and (min-width:1549px) and (max-width:2880px) {


        /*pagos en línea*/
        .btnPagos {
            position: absolute;
            width: 263.83px;
            height: 44475px;
            left: 498px;
            top: 548px;
        }
    }


    @media (max-width: 768px) {
        /*.responsive-table {
        width: 100%;
        border-collapse: collapse;
    }*/
        .responsive-table thead {
            display: none;
        }

        .responsive-table tbody tr {
            display: block;
            border: 1px solid #ccc;
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 16px;
        }

        .responsive-table td {
            display: block;
            width: 100%;
            padding: 5px;
            box-sizing: border-box;
            text-align: left;
        }

            /* Mostrar Nombre y Estado en una línea */
            /*.responsive-table td[data-label="Factura"],
        .responsive-table td[data-label="x"] {
            width: 50%;*/ /* cada uno ocupa la mitad */
            /*display: block;
        }*/

           
            .responsive-table td::before {
                content: attr(data-label) ": ";
                font-weight: bold;
                display: inline-block;
                width: 40%;
            }
        
        .nombre-agrupado,
        .nit-agrupado {
            display: inline-block;
            width: 48%;
            vertical-align: top;
        }

            .nombre-agrupado::before,
            .nit-agrupado::before {
                width: auto;
                display: inline;
                font-weight: bold;
            }
        /* Ajuste visual opcional */
        /* .responsive-table td:not([data-label="Factura"]):not([data-label="_"]) {
            border-top: 1px solid #eee;
            margin-top: 5px;
        }*/


        /*
    .responsive-table thead {
        display: none;
    }*/
        /* Nombre y Estado en la misma línea */
        /*    .responsive-table td[data-label="Factura"],
    .responsive-table td[data-label="x"] {
        width: 50%;
    }*/

        /*.responsive-table tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #ccc;
        border-radius: 6px;
        padding: 0.5rem;
    }

    .responsive-table td {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem;
        border: none;
        border-bottom: 1px solid #eee;
    }

        .responsive-table td::before {
            content: attr(data-label);
            font-weight: bold;
            flex-shrink: 0;
            margin-right: 1rem;
        }
    .responsive-table tbody tr {
        display: flex;
        flex-direction: column;
        border: 1px solid #ccc;
        margin-bottom: 10px;
        padding: 10px;
    }

    .responsive-table td {
        display: none; 
    }

        .responsive-table td[data-label="No. Factura"],
        .responsive-table td[data-label=""] {
            display: block;
        }

            .responsive-table td[data-label="No. Factura"]::before {
                content: "No. Factura: ";
                font-weight: bold;
            }

            .responsive-table td[data-label=""]::before {
                content: "";
                font-weight: bold;
            }
*/

    }
}