/* Copiado tal cual de webventasapp/Web.App/Content/assets/css/Impresion.css (pedido explícito del
   usuario) — NO modificar este archivo para "arreglar" algo puntual de esta app; cualquier ajuste
   nuestro va en un archivo aparte (ver ReciboImprimibleExtra en app.css) para poder diferenciar
   siempre qué es del original y qué es nuestro. */

/* Ajustes de tamaño */
.container {
    font-size: 14px;
    margin: 0;
    padding: 0;
}

h4 {
    font-size: 16px;
}

.border p {
    font-size: 12px;
    text-align: center;
    margin: 0;
}

.table th,
.table td {
    font-size: 12px;
}

.row {
    margin: 0;
}

.boleta p {
    font-size: 20px;
    font-weight: bold;
}

.resultados p {
    font-weight: bold;
    text-align: justify;
}

.observacion p {
    text-align: justify;

}



/* Estilo para justificar el texto "SON :" */
.son-label {
    float: left;
}

/* Estilo para centrar el contenido de response.data.ImporteLetras */
.importe-letras {
    display: inline-block;
    text-align: center;
}

.DatosCliente p {
    text-align: justify;

}


/* Agrega estilos de borde a la tabla y sus celdas */
.table-bordered {
    border: 1px solid #000;
}

    .table-bordered th,
    .table-bordered td {
        border: 1px solid #000;
        padding-left: 10px; /* Ajusta el valor según sea necesario */
        padding-right: 10px; /* Ajusta el valor según sea necesario */
    }

.table th,
.table td {
    padding: 8px !important; /* Ajusta el relleno según tus necesidades */
}
@media print {
    body * {
        visibility: hidden;
    }

        .container, .container * {
            visibility: visible;
        }

    .container {
        font-size: 10px;
        /*margin: -40px;*/
        margin: 0;
        padding: 0;

        position: fixed; /* Cambiado a fixed */
        top: 0;
        left: 0;
        /*width: 100%;*/ /* Asegura que ocupe todo el ancho de la página */
        z-index: 100;
    }


    h4 {
        font-size: 12px;
    }

    .container {
        width: 100vw !important;
    }


    .border p {
        font-size: 10px;
        text-align: center;
        margin: 0;
    }

    .table th,
    .table td {
        font-size: 10px;
    }

    .row {
        margin: 0;
    }

    .boleta p {
        font-size: 15px;
        font-weight: bold;
    }

    .resultados p {
        font-weight: bold;
        text-align: justify;
    }

    .observacion p {
        text-align: justify;
    }
    .DatosCliente p {
        text-align: justify;
    }


}

/* Nuevo media query */
@media(max-width: 750px) {

    .row {
        align-items: flex-start;
    }

    .DatosEmpresa {
        flex-direction: row;
    }

    .DireccionEmpresa h4, p {
        font-size: 12px !important;
    }

    .DatosEmpresa div {
        width: 100% !important;
    }

    .DatosCliente p {
        text-align: start;
    }

    .boleta p {
        text-align: center !important;
    }

    .col-3 img {
        order: -1; /* Cambia el orden para mover la imagen arriba */
    }

    .col-5, .col-4 {
        order: 0; /* Mantiene el orden original para los otros dos elementos */
    }

    /* Agrega esta regla para quitar los bordes */
    .border, .border * {
        border: none !important;
    }

        /* Reducir el tamaño de la fuente en el media query más pequeño */
        .border p {
            font-size: 13px !important;
            text-align: start;
        }

    /* Agrega bordes horizontales a la tabla */
    .table th, .table td, .table {
        border-left: none !important;
        border-right: none !important;
        border-top: 1px solid #000 !important; /* Cambia #000 al color que desees para el borde superior */
        border-bottom: 1px solid #000 !important; /* Cambia #000 al color que desees para el borde inferior */
    }

    .GrupoResultados {
        flex-direction: row !important;
    }

    .resultados p {
        align-items: flex-start;
    }
    /* Reducir el tamaño de la fuente dentro de la tabla */
    .table th,
    .table td {
        font-size: 13px !important;
        padding: 12px !important; /* Ajusta el relleno según tus necesidades */
    }

    /* Ajustar el tamaño de las filas en la tabla */
    .product-row td {
        padding: 13px !important; /* Ajusta el relleno según tus necesidades */
    }

    .Container-imagen {
        text-align: center;
    }
    /*#ImagenEmpresa {
        width:250px;
    }*/
    #ImagenEmpresa {
        width: 250px;
    }

    /* Agrega el desplazamiento horizontal */
    .table-responsive {
        overflow-y: hidden;
    }

    .GrupoFooter {
        margin-top: 10px;
        flex-direction: column-reverse;
        text-align: center;
    }
    .Container-imagen2 {
        margin-top: 20px;
    }
}

/* Nuevo media query */
@media(max-width: 517px) {

    .row {
        align-items: flex-start;
    }

    .DatosEmpresa {
        flex-direction: column;

    }
    .DireccionEmpresa h4, p {
        font-size:10px !important;
    }

    .DatosEmpresa div {
        width: 100% !important;
    }

    .DatosCliente p {
        text-align: start;
    }

    .boleta p {
        text-align: center !important;
    }

    .col-3 img {
        order: -1; /* Cambia el orden para mover la imagen arriba */
    }

    .col-5, .col-4 {
        order: 0; /* Mantiene el orden original para los otros dos elementos */
    }

    /* Agrega esta regla para quitar los bordes */
    .border, .border * {
        border: none !important;
    }

        /* Reducir el tamaño de la fuente en el media query más pequeño */
        .border p {
            font-size: 8.5px !important;
            text-align: start;
        }

    /* Agrega bordes horizontales a la tabla */
    .table th, .table td, .table {
        border-left: none !important;
        border-right: none !important;
        border-top: 1px solid #000 !important; /* Cambia #000 al color que desees para el borde superior */
        border-bottom: 1px solid #000 !important; /* Cambia #000 al color que desees para el borde inferior */
    }

    .GrupoResultados {
        flex-direction: row !important;
    }

    .resultados p {
        align-items: flex-start;
    }

    /* Reducir el tamaño de la fuente dentro de la tabla */
    .table th, .table td {
    font-size: 8px !important;
    padding: 7px !important; /* Ajusta el relleno según tus necesidades */
    }

    /* Ajustar el tamaño de las filas en la tabla */
    .product-row td {
        padding: 4px !important; /* Ajusta el relleno según tus necesidades */
    }

    .Container-imagen {
        text-align: center;
    }
    /*#ImagenEmpresa {
        width:250px;
    }*/
    #ImagenEmpresa {
        width:150px;
    }
    .GrupoFooter {
        align-items: center;
    }
    .Container-imagen2 {
       width:140px;
    }

    /* Agrega el desplazamiento horizontal */
    .table-responsive {
        overflow-y: hidden;
    }

    .btn {
        font-size:8.5px;
    }
}

@media(max-width: 391px) {
    .table th, .table td {
        font-size: 7px !important;
    }

/*     Reducir el tamaño de la fuente en el media query más pequeño */
    .border p {
        font-size: 7px !important;
        text-align: start;
    }

    .DireccionEmpresa h4, p {
        font-size: 8px !important;
    }
    .Container-imagen {
        text-align: center;
    }
    #ImagenEmpresa {
        width: 140px;
    }
    .Container-imagen2 {
        width: 120px;
    }
}

/*@media(max-width: 350px) {
    .table th, .table td {
        font-size: 6px !important;
    }*/

    /* Reducir el tamaño de la fuente en el media query más pequeño */
    /*.border p {
        font-size: 6px !important;
        text-align: start;
    }

    .DireccionEmpresa h4, p {
        font-size: 7px !important;
    }

    .Container-imagen {
        text-align: center;
    }

    #ImagenEmpresa {
        width: 140px;
    }
}*/