/* ========================== */
/* TICKET 80MM (Modificado)   */
/* ========================== */


.ticket-80 {
    /* 80mm es el papel, pero la zona imprimible suele ser 72-76mm */
    /* Usamos px para asegurar la escala en html2canvas */
    width: 280px;
    margin: 0 auto; /* Centrarlo si se ve en pantalla */
    background-color: #fff;
    font-family: "Arial Narrow", "Arial", sans-serif;
    font-size: 9px;
    padding: 2px 5px; /* Reducimos padding para ganar espacio */
    color: #000;
}
.logo-center {
    display: flex;
    justify-content: center;
    margin-bottom: 4px;
}

    /* Alineaciones y Estilos de Texto */
    .ticket-80 .center {
        text-align: center;
    }

    .ticket-80 .right {
        text-align: right;
    }

    .ticket-80 .left {
        text-align: left;
    }

    .ticket-80 .bold {
        font-weight: bold;
    }

 /*   .ticket-80 .uppercase {
        text-transform: uppercase;
    }*/

    /* Encabezado */
    .ticket-80 .header-title {
        font-size: 12px;
        /*font-weight: bold;*/
        text-align: center;
        margin-bottom: 2px;
    }

    .ticket-80 .header-sub {
        font-size: 7px;
        text-align: center;
        margin-bottom: 1px;
    }

    /* Documento Info */
    .ticket-80 .doc-title {
        margin-top: 10px;
        font-size: 12px;
        /*font-weight: bold;*/
        text-align: center;
    }

    /* Tablas Generales */
    /* Forzar que las tablas usen todo el ancho */
    .ticket-80 table {
        width: 100%;
        table-layout: fixed; /* Ayuda a respetar los anchos */
    }

    /* Tabla de Items (Productos) */
    .ticket-80 .tbl-items thead th {
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        font-size: 9px;
        padding: 3px 0;
        text-align: right; /* Por defecto a la derecha para números */
    }

        .ticket-80 .tbl-items thead th:first-child {
            text-align: left; /* Concepto a la izquierda */
        }

    .ticket-80 .tbl-items td {
        padding: 1px 0;
        vertical-align: top;
    }

    /* Filas especiales para Items */
    .ticket-80 .item-desc {
        padding-top: 4px;
        font-weight: normal;
        text-align: left;
    }

    .ticket-80 .item-attr {
        font-size: 10px;
        padding-left: 5px;
        color: #333;
        text-align: left;
    }

    .ticket-80 .item-numbers td {
        text-align: right;
        font-weight: bold; /* El importe suele resaltar */
    }

        .ticket-80 .item-numbers td.cant {
            text-align: center;
            font-weight: normal;
        }

        .ticket-80 .item-numbers td.precio {
            font-weight: normal;
        }

    /* Totales */
    .ticket-80 .totals-row {
        margin-top: 5px;
        text-align: right;
    }

    .ticket-80 .total-pagar {
        font-size: 9px;
        font-weight: bold;
        border-top: 1px solid #000; /* Línea antes del total */
        padding-top: 2px;
    }

    /* Texto en Letras */
    .ticket-80 .son-text {
        margin-top: 5px;
        font-size: 10px;
        border-bottom: 1px solid #000;
        padding-bottom: 5px;
    }

    /* Tabla de Pagos */
    .ticket-80 .tbl-pagos {
        margin-top: 5px;
        font-size: 9px;
    }

        .ticket-80 .tbl-pagos th {
            border-bottom: 1px solid #000;
            text-align: left;
        }

        .ticket-80 .tbl-pagos td {
            text-align: left;
        }

        .ticket-80 .tbl-pagos .monto {
            text-align: right;
        }

        .ticket-80 .tbl-pagos .total-pagos {
            border-top: 1px solid #000;
            font-weight: bold;
            text-align: right;
        }

    /* Footer y QR */
    .ticket-80 .footer-info {
        margin-top: 10px;
        font-size: 10px;
    }

.qr-area {
    width: 150px;
    height: 150px;
    margin: 10px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
    .qr-area canvas,
    .qr-area img {
        display: block;
        margin: 0 auto;
    }


.ticket-80 a {
    color: #000;
    text-decoration: none;
}
.ticket-80 .codigo-hash {
    font-size: 7px;
    word-break: break-all;
    line-height: 1.1;
}

/* ========================== */
/* TICKET 80MM (Mantenido)    */
/* ========================== */
/* ... (Deja aquí el CSS de .ticket-80 anterior) ... */

/* ========================== */
/* FORMATO A4 (Modificado)    */
/* ========================== */

/* Contenedor Principal A4 */
.a4 {
    width: 760px;
    font-family: Arial, sans-serif;
    font-size: 11px;
    padding: 25px;
    margin: 0 auto;
    background: #fff;
    color: #000;
}

    /* --- CABECERA DE 3 COLUMNAS --- */
    .a4 .header-grid {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 20px;
    }

    .a4 .header-col-logo {
        width: 25%;
    }

        .a4 .header-col-logo img {
            max-width: 160px;
            max-height: 90px;
            display: block;
        }

    .a4 .header-col-empresa {
        width: 45%;
        text-align: center;
    }

    .a4 .empresa-nombre {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 4px;
    }

    .a4 .empresa-det {
        font-size: 10px;
        line-height: 1.2;
    }

    .a4 .header-col-recuadro {
        width: 30%;
    }

    .a4 .box-comprobante {
        border: 1.5px solid #000;
        padding: 12px 5px;
        text-align: center;
    }

        .a4 .box-comprobante .tipo {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 5px;
        }

    /* --- SECCION INFORMACIÓN CLIENTE --- */
    .a4 .client-info-container {
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        padding: 10px 0;
        margin-bottom: 15px;
    }

    .a4 .info-table {
        width: 100%;
        border-collapse: collapse;
    }

    /* --- TABLA DE ITEMS / PRODUCTOS --- */
    .a4 .tbl-items {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
    }

        .a4 .tbl-items thead th {
            background: #f4f4f4;
            border: 1px solid #000;
            padding: 6px;
            font-weight: bold;
            text-align: center;
        }

            .a4 .tbl-items thead th:first-child {
                text-align: left;
            }

        .a4 .tbl-items td {
            padding: 4px;
            vertical-align: top;
        }

    .a4 .item-desc {
        /*font-weight: bold;*/
        border: none;
    }

    .a4 .item-attr, .a4 .item-series {
        font-size: 10px;
        padding-left: 15px;
        border: none;
    }

    .a4 .item-numbers td {
        text-align: right;
    }

        .a4 .item-numbers td:nth-child(2) {
            text-align: center; /* Cantidad */
        }

    .a4 .tbl-items tr:last-child td {
        border-bottom: 1px solid #000;
    }

    /* --- TOTALES --- */
    .a4 .totals-area {
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;
        width: 100%;
    }

    .a4 .totals-box {
        width: 250px;
        text-align: right;
        font-size: 11px;
    }

        .a4 .totals-box div {
            padding: 2px 0;
        }

    .a4 .total-pagar {
        font-size: 12px;
        font-weight: bold;
        border-top: 1px solid #000;
        margin-top: 5px;
        padding-top: 5px !important;
    }

    /* --- SECCIÓN INFERIOR (PAGOS Y QR) --- */
    .a4 .pagos-qr-container {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-top: 15px;
    }

    .a4 .pagos-info-area {
        width: 60%;
    }

    .a4 .son-text {
        margin-top: 15px;
        font-size: 11px;
    }

    /* --- TABLA DE PAGOS (IGUAL A LA PRINCIPAL) --- */
    .a4 .tbl-pagos {
        width: 100%;
        max-width: 400px;
        margin-top: 10px;
        border-collapse: collapse;
    }

        .a4 .tbl-pagos thead th {
            background: #f4f4f4; /* Mismo gris que la tabla principal */
            border: 1px solid #000;
            padding: 5px;
            font-weight: bold;
            text-align: left;
        }

        .a4 .tbl-pagos tbody td {
            padding: 4px 5px;
            border: none; /* Mantener filas limpias, o puedes poner 1px solid #eee si prefieres */
        }

        .a4 .tbl-pagos .monto {
            text-align: right;
        }

        .a4 .tbl-pagos .total-pagos {
            border-top: 1px solid #000;
            font-weight: bold;
            text-align: right;
            padding-top: 5px;
        }

    .a4 .qr-area {
        width: 110px;
        height: 110px;
        margin-right: 5px;
    }

    /* --- FOOTER --- */
    .a4 .footer-info {
        margin-top: 25px;
        font-size: 9px;
        text-align: center;
        color: #555;
        border-top: 1px solid #eee;
        padding-top: 10px;
    }

    /* --- CLASES AUXILIARES --- */
    .a4 .uppercase {
        text-transform: uppercase;
    }

    .a4 .center {
        text-align: center;
    }

    .a4 .right {
        text-align: right;
    }

    .a4 .bold {
        font-weight: bold;
    }

    .a4 .totals-box .total-row {
        display: flex;
        justify-content: space-between; /* izquierda | derecha */
        align-items: center;
        padding: 2px 0;
    }

        .a4 .totals-box .total-row strong {
            text-align: left;
        }

        .a4 .totals-box .total-row span {
            text-align: right;
            white-space: nowrap;
        }


<style >
.item-attr {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    line-height: 1.15;
    margin: 0;
    font-size: 12px;
}

.item-attr strong {
    font-weight: 600;
}

.item-row-a4 {
    page-break-inside: avoid;
    break-inside: avoid;
}

    .item-row-a4 td {
        padding-top: 6px;
        padding-bottom: 6px;
        vertical-align: top;
        border-bottom: 1px solid #ddd;
    }

.item-index {
    text-align: center;
    vertical-align: top;
    font-weight: bold;
    white-space: nowrap;
}

.item-desc-cell {
    text-align: left;
    line-height: 1.25;
    word-break: break-word;
}

.item-desc-main {
    font-size: 11px;
    margin-bottom: 2px;
}

.item-attr-line,
.item-series-line {
    font-size: 10px;
    line-height: 1.2;
    margin-top: 2px;
    padding-left: 8px;
}

.tbl-items tbody tr:last-child td {
    border-bottom: 1px solid #000;
}

/*para compra comprobante*/

.compra-a4 .compra-header-grid {
    margin-bottom: 16px;
}

.compra-a4 .compra-box {
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.compra-a4 .compra-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 14px;
}

    .compra-a4 .compra-info-table td {
        padding: 4px 6px;
        vertical-align: top;
        border-bottom: none;
    }

.compra-a4 .compra-tbl-items {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

    .compra-a4 .compra-tbl-items thead th {
        background: #f4f4f4;
        border: 1px solid #000;
        padding: 6px;
        text-align: center;
        font-weight: bold;
    }

    .compra-a4 .compra-tbl-items tbody td {
        padding: 6px 5px;
        border-bottom: 1px solid #dcdcdc;
        vertical-align: top;
    }

.compra-a4 .compra-item-main {
    border-bottom: 1px solid #000;
}

.compra-a4 .compra-item-attr {
    margin-top: 3px;
    font-size: 10px;
    color: #444;
    border-top: 1px dashed #bbb;
    padding-top: 2px;
}

.compra-a4 .compra-totals-box {
    width: 280px;
}

    .compra-a4 .compra-totals-box .total-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 3px 0;
    }

    .compra-a4 .compra-totals-box .total-pagar {
        margin-top: 6px;
        border-top: 1px solid #000;
        padding-top: 6px;
        font-size: 13px;
        font-weight: bold;
    }

/*fin de comproabtne*/