/* ===== ESTILOS GENERALES Y DE ESTRUCTURA ===== */
:root {
    /* Colores para estilos moderno y clásico */
    --color-primary: #1a3a6c; /* Azul oscuro profesional */
    --color-secondary: #4a6fa5; /* Azul medio */
    --color-accent: #e63946; /* Rojo para acentos */
    --color-light: #f8f9fa;
    --color-dark: #212529;
    --color-border: #dee2e6;
    --color-table-header: #e9ecef;
    --color-table-row: #f8f9fa;
    --color-table-row-alt: #ffffff;
    --color-text: #333;
    --color-text-light: #6c757d;
    /* Colores para estilo azul */
    --color-blue-primary: #007bff; /* Azul principal */
    --color-blue-light: #cce5ff; /* Azul claro para fondos */
    --color-blue-text: #343a40; /* Gris oscuro para texto */
    --color-blue-border: #007bff; /* Borde azul */
    --color-blue-bg: #ffffff; /* Fondo blanco */
}

/* Asegurar box-sizing global (como en Bootstrap) */
*,
*::before,
*::after {
    box-sizing: border-box;
}

@media print {
    @page {
        size: auto;
        margin: 0;
    }
    body {
        font-size: 9pt;
        color: #000 !important;
        margin: 0;
        padding: 0;
        background-color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .no-print { display: none !important; }
    .print-only { display: block !important; }
    .bg-light { background-color: #fff !important; }
    .preview-container {
        box-shadow: none !important;
        border: none !important;
        height: auto !important; /* Permitir altura dinámica para múltiples páginas */
        min-height: 0 !important;
    }
    .watermark { 
        display: block !important; 
        opacity: 0.1;
    }
    .section-divider {
        border: none !important; /* Eliminar borde en impresión */
        margin: 1mm 0 !important;
        opacity: 1 !important;
    }
    body.format-carta @page { size: 8.5in 11in; margin: 0.5in; }
    body.format-carta .preview-container { width: 8.5in; padding: 0.5in !important; margin: 0; }
    body.format-media-carta @page { size: 8.5in 5.5in; margin: 0.25in; }
    body.format-media-carta .preview-container { width: 8.5in; padding: 0.15in !important; margin: 0; }
    body.format-ticket @page { size: 80mm auto; margin: 2mm; }
    body.format-ticket .preview-container { width: 80mm; padding: 2mm !important; margin: 0; }
    body.format-ticket .section-divider { margin: 1mm 0 !important; }
    body.style-moderno.format-carta .items-table,
    body.style-clasico.format-carta .items-table,
    body.style-azul.format-carta .items-table,
    body.style-moderno.format-media-carta .items-table,
    body.style-clasico.format-media-carta .items-table,
    body.style-azul.format-media-carta .items-table {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
        word-wrap: break-word;
        color: #000 !important;
        break-inside: auto !important; /* Permitir paginación */
    }
    body.style-moderno.format-ticket .items-table,
    body.style-clasico.format-ticket .items-table,
    body.style-azul.format-ticket .items-table {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
        word-wrap: break-word;
        font-size: 7pt !important;
        color: #000 !important;
    }
    body.style-moderno.format-carta .items-table th,
    body.style-moderno.format-media-carta .items-table th {
        background-color: #e9ecef !important;
        color: #000 !important;
    }
    body.style-clasico.format-carta .items-table th,
    body.style-clasico.format-media-carta .items-table th {
        background-color: #e7f5ff !important;
        color: #000 !important;
    }
    body.style-azul.format-carta .items-table th,
    body.style-azul.format-media-carta .items-table th {
        background-color: var(--color-blue-primary) !important; /* Mantener azul en impresión */
        color: #fff !important;
    }
    body.style-moderno.format-ticket .items-table th,
    body.style-clasico.format-ticket .items-table th,
    body.style-azul.format-ticket .items-table th {
        background-color: #fff !important;
        color: #000 !important;
        border-bottom: 1px dashed #000 !important;
    }
    body.style-moderno.format-carta .items-table thead,
    body.style-clasico.format-carta .items-table thead,
    body.style-azul.format-carta .items-table thead,
    body.style-moderno.format-media-carta .items-table thead,
    body.style-clasico.format-media-carta .items-table thead,
    body.style-azul.format-media-carta .items-table thead {
        display: table-header-group !important; /* Repetir encabezados en cada página */
    }
    body.style-moderno.format-carta .items-table tr,
    body.style-clasico.format-carta .items-table tr,
    body.style-azul.format-carta .items-table tr,
    body.style-moderno.format-media-carta .items-table tr,
    body.style-clasico.format-media-carta .items-table tr,
    body.style-azul.format-media-carta .items-table tr {
        page-break-inside: auto !important; /* Permitir división de filas */
        break-inside: auto !important;
        page-break-after: auto !important; /* Evitar cortes innecesarios */
    }
    body.style-moderno.format-carta .total-section,
    body.style-moderno.format-media-carta .total-section,
    body.style-moderno.format-ticket .total-section,
    body.style-clasico.format-carta .total-section,
    body.style-clasico.format-media-carta .total-section,
    body.style-clasico.format-ticket .total-section,
    body.style-azul.format-carta .total-section,
    body.style-azul.format-media-carta .total-section,
    body.style-azul.format-ticket .total-section {
        color: #000 !important;
        break-inside: avoid !important; /* Evitar dividir la sección de totales */
    }
    body.style-moderno.format-carta .total-section strong,
    body.style-moderno.format-media-carta .total-section strong,
    body.style-moderno.format-ticket .total-section strong,
    body.style-clasico.format-carta .total-section strong,
    body.style-clasico.format-media-carta .total-section strong,
    body.style-clasico.format-ticket .total-section strong,
    body.style-azul.format-carta .total-section strong,
    body.style-azul.format-media-carta .total-section strong,
    body.style-azul.format-ticket .total-section strong {
        color: #000 !important;
    }
}

.no-print { display: block; }
.print-only { display: none; }
.preview-container {
    background: white;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    margin: 20px auto;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}
.watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    color: rgba(0, 0, 0, 0.08);
    font-weight: bold;
    font-size: 40pt;
    z-index: 0;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    opacity: 0.15;
}
.format-selectors-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background: white;
    padding: 12px 15px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    border: 1px solid var(--color-border);
    display: flex;
    gap: 15px;
}
.upload-area {
    border: 2px dashed var(--color-primary);
    border-radius: 8px;
    padding: 25px;
    text-align: center;
    background: var(--color-light);
    transition: all 0.3s ease;
}
.upload-area:hover {
    background: #eef2f7;
    transform: translateY(-3px);
}
.section-divider {
    border: none; /* Eliminar borde en pantalla */
    margin: 2mm 0;
    opacity: 0.5;
}
.info-box {
    padding: 0.1in;
    margin: 0.1in 0;
    background: var(--color-light);
    border-radius: 5px;
    border-left: 3px solid var(--color-primary);
}

/* ===== DEFINICIÓN DE TAMAÑOS DE FORMATO ===== */
/* --- Formato Carta --- */
@media screen {
    body.format-carta .preview-container { max-width: 8.5in; min-height: 11in; padding: 0.7in; }
}
/* --- Formato Media Carta --- */
@media screen {
    body.format-media-carta .preview-container { max-width: 8.5in; min-height: 5.5in; height: auto; padding: 0.25in; }
}
/* --- Formato Ticket --- */
@media screen {
    body.format-ticket .preview-container { width: 80mm; padding: 5mm; }
    body.format-ticket .watermark { display: none !important; }
}

/*
==================================================================
||                        ESTILO 1: MODERNO                     ||
==================================================================
*/
/* --- CARTA MODERNO --- */
body.style-moderno.format-carta { 
    font-family: 'Roboto', 'Arial', sans-serif; 
    font-size: 10pt; 
    color: var(--color-text);
}
body.style-moderno.format-carta .header { 
    display: flex; 
    align-items: center; 
    margin-bottom: 0.3in;
    padding-bottom: 0.1in;
    border-bottom: 2px solid var(--color-primary);
}
body.style-moderno.format-carta .logo-container { 
    flex: 0 0 25%; 
    padding-right: 0.2in;
}
body.style-moderno.format-carta .logo { 
    max-width: 1.5in;
    max-height: 1.5in;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
body.style-moderno.format-carta .company-info { 
    flex: 1; 
}
body.style-moderno.format-carta .company-name { 
    font-size: 18pt; 
    font-weight: 700; 
    color: var(--color-primary);
    margin-bottom: 0.05in;
}
body.style-moderno.format-carta .client-invoice-section { 
    display: flex; 
    gap: 0.2in; 
    margin-bottom: 0.4in; 
}
body.style-moderno.format-carta .client-info, 
body.style-moderno.format-carta .invoice-info { 
    flex: 1; 
    padding: 0.15in; 
    border-radius: 6px;
    background-color: #fff;
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}
body.style-moderno.format-carta .client-info:hover, 
body.style-moderno.format-carta .invoice-info:hover {
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}
body.style-moderno.format-carta .info-box-title { 
    font-size: 10pt; 
    border-bottom: 1px solid var(--color-border); 
    padding-bottom: 0.05em; 
    margin-bottom: 0.1in;
    color: var(--color-primary);
    font-weight: 600;
    text-transform: uppercase;
}
body.style-moderno.format-carta .items-table { 
    font-size: 9pt; 
    margin-bottom: 0.4in; 
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border-radius: 6px;
    overflow: hidden;
}
body.style-moderno.format-carta .items-table th, 
body.style-moderno.format-carta .items-table td { 
    padding: 0.1in 0.2in; 
    border: 1px solid var(--color-border);
}
body.style-moderno.format-carta .items-table th { 
    background-color: var(--color-primary);
    color: white;
    font-weight: 600;
    text-align: left;
}
body.style-moderno.format-carta .items-table tbody tr {
    background-color: var(--color-table-row);
}
body.style-moderno.format-carta .items-table tbody tr:nth-child(odd) {
    background-color: var(--color-table-row-alt);
}
body.style-moderno.format-carta .items-table tbody tr:hover {
    background-color: #f0f4f8;
}
body.style-moderno.format-carta .bottom-section { 
    display: flex; 
    gap: 0.2in; 
    margin-top: 0.2in; 
    align-items: flex-start;
}
body.style-moderno.format-carta .frases-section { 
    flex: 2; 
    font-size: 8pt; 
    padding: 0.15in; 
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
body.style-moderno.format-carta .total-section { 
    flex: 1; 
    font-size: 9.5pt; 
    padding: 0.15in; 
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
body.style-moderno.format-carta .total-section div {
    padding: 0.05in 0;
    display: flex;
    justify-content: space-between;
}
body.style-moderno.format-carta .total-section div:last-child {
    border-top: 1px solid var(--color-border);
    margin-top: 0.05in;
    padding-top: 0.1in;
    font-size: 1.1em;
}
body.style-moderno.format-carta .total-section strong { 
    font-size: 12pt; 
    color: var(--color-primary);
}
body.style-moderno.format-carta .qr-section { 
    flex: 1; 
    text-align: center; 
    padding: 0.15in; 
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
body.style-moderno.format-carta .qr-code { 
    max-width: 1.2in; 
    max-height: 1.2in; 
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 3px;
    background: white;
}
body.style-moderno.format-carta .qr-section .small {
    margin-top: 0.1in;
    font-size: 0.8em;
    color: var(--color-text-light);
}
body.style-moderno.format-carta .footer { 
    font-size: 7.5pt; 
    margin-top: 0.5in; 
    padding: 0.15in;
    border-top: 2px solid var(--color-primary); 
    background: rgba(26, 58, 108, 0.03);
    border-radius: 6px;
    text-align: center;
}

/* --- MEDIA CARTA MODERNO --- */
body.style-moderno.format-media-carta { 
    font-family: 'Roboto', 'Arial', sans-serif; 
    font-size: 8.5pt; 
    color: var(--color-text);
}
body.style-moderno.format-media-carta .header { 
    display: flex; 
    align-items: center; 
    margin-bottom: 0.1in; 
    padding-bottom: 0.1in; 
    border-bottom: 1px solid var(--color-primary);
}
body.style-moderno.format-media-carta .logo-container { 
    flex: 0 0 22%; 
    padding-right: 0.1in;
}
body.style-moderno.format-media-carta .logo { 
    max-width: 1.1in; 
    max-height: 1.1in; 
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
body.style-moderno.format-media-carta .company-info { 
    flex: 1; 
}
body.style-moderno.format-media-carta .company-name { 
    font-size: 13.5pt; 
    font-weight: 700; 
    color: var(--color-primary);
}
body.style-moderno.format-media-carta .client-invoice-section { 
    display: flex; 
    gap: 0.1in; 
    margin-bottom: 0.2in; 
}
body.style-moderno.format-media-carta .client-info, 
body.style-moderno.format-media-carta .invoice-info { 
    flex: 1; 
    font-size: 7.5pt; 
    padding: 0.1in; 
    border-radius: 5px; 
    background: #fff;
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
body.style-moderno.format-media-carta .info-box-title { 
    font-size: 8pt; 
    border-bottom: 1px solid var(--color-border); 
    padding-bottom: 0.05em; 
    margin-bottom: 0.1in;
    color: var(--color-primary);
    font-weight: 600;
}
body.style-moderno.format-media-carta .items-table { 
    font-size: 7pt; 
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
}
body.style-moderno.format-media-carta .items-table th, 
body.style-moderno.format-media-carta .items-table td { 
    padding: 0.05in; 
    border: 1px solid var(--color-border);
}
body.style-moderno.format-media-carta .items-table th { 
    background-color: var(--color-primary);
    color: white;
    font-weight: 600;
}
body.style-moderno.format-media-carta .items-table tbody tr {
    background-color: var(--color-table-row);
}
body.style-moderno.format-media-carta .items-table tbody tr:nth-child(odd) {
    background-color: var(--color-table-row-alt);
}
body.style-moderno.format-media-carta .bottom-section { 
    display: flex; 
    gap: 0.1in; 
    margin-top: 0.1in; 
    flex-wrap: wrap;
}
body.style-moderno.format-media-carta .frases-section, 
body.style-moderno.format-media-carta .total-section, 
body.style-moderno.format-media-carta .qr-section { 
    border: 1px solid var(--color-border); 
    padding: 0.1in; 
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
body.style-moderno.format-media-carta .frases-section { 
    flex: 3; 
    font-size: 6.5pt; 
    order: 1; 
}
body.style-moderno.format-media-carta .total-section { 
    flex: 1.5; 
    font-size: 7.5pt; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-end; 
    order: 2; 
}
body.style-moderno.format-media-carta .total-section div {
    display: flex;
    justify-content: space-between;
}
body.style-moderno.format-media-carta .total-section div:last-child {
    border-top: 1px solid var(--color-border);
    margin-top: 0.05in;
    padding-top: 0.1in;
}
body.style-moderno.format-media-carta .qr-section { 
    flex: 1; 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    order: 3; 
}
body.style-moderno.format-media-carta .qr-code { 
    max-width: 0.8in; 
    max-height: 0.8in; 
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 2px;
    background: white;
}
body.style-moderno.format-media-carta .qr-section .small {
    margin-top: 0.1in;
    font-size: 0.8em;
    color: var(--color-text-light);
}
body.style-moderno.format-media-carta .footer { 
    font-size: 6.5pt; 
    margin-top: 0.2in; 
    padding: 0.1in;
    border-top: 1px solid var(--color-primary); 
    background: rgba(26, 58, 108, 0.03);
    border-radius: 6px;
    text-align: center;
}

/* --- TICKET MODERNO --- */
body.style-moderno.format-ticket { 
    font-family: 'Courier New', monospace; 
    font-size: 8pt; 
    line-height: 1.2; 
    color: var(--color-text);
}
body.style-moderno.format-ticket .header { 
    text-align: center; 
    border-bottom: 1px dashed var(--color-border); 
    margin-bottom: 3mm; 
    padding-bottom: 3mm;
}
body.style-moderno.format-ticket .logo { 
    max-width: 40mm; 
    max-height: 20mm; 
    margin: 0 auto 3mm; 
    border-radius: 3px;
}
body.style-moderno.format-ticket .company-name { 
    font-size: 10pt; 
    font-weight: bold; 
    text-transform: uppercase; 
    color: var(--color-primary);
}
body.style-moderno.format-ticket .company-details { 
    font-size: 7pt; 
    color: var(--color-text-light);
}
body.style-moderno.format-ticket .client-invoice-section { 
    display: block; 
}
body.style-moderno.format-ticket .info-box-title { 
    text-align: center; 
    font-weight: bold; 
    color: var(--color-primary);
    margin-top: 3mm;
}
body.style-moderno.format-ticket .items-table td, 
body.style-moderno.format-ticket .items-table th { 
    padding: 1.5mm 0; 
    border: none; 
}
body.style-moderno.format-ticket .items-table thead th { 
    border-bottom: 1px dashed var(--color-border); 
    text-align: left; 
    font-weight: bold;
}
body.style-moderno.format-ticket .bottom-section { 
    display: block; 
}
body.style-moderno.format-ticket .total-section { 
    padding: 3mm 0; 
    border-top: 1px dashed var(--color-border); 
    border-bottom: 1px dashed var(--color-border);
}
body.style-moderno.format-ticket .total-section div { 
    padding: 0.5mm 0; 
    display: flex;
    justify-content: space-between;
}
body.style-moderno.format-ticket .total-section div:last-child {
    border-top: 1px dashed var(--color-border);
    margin-top: 1mm;
    padding-top: 1mm;
    font-weight: bold;
}
body.style-moderno.format-ticket .total-section strong { 
    font-size: 9pt; 
}
body.style-moderno.format-ticket .qr-section { 
    text-align: center; 
    padding: 3mm 0; 
}
body.style-moderno.format-ticket .qr-code { 
    width: 30mm; 
    height: 30mm; 
    margin: 3mm auto; 
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 2px;
    background: white;
}
body.style-moderno.format-ticket .qr-section .small {
    margin-top: 2mm;
    font-size: 0.8em;
    color: var(--color-text-light);
}
body.style-moderno.format-ticket .footer { 
    font-size: 7pt; 
    text-align: center; 
    margin-top: 3mm; 
    padding-top: 2mm;
    border-top: 1px dashed var(--color-border);
    color: var(--color-text-light);
}

/*
==================================================================
||                        ESTILO 2: CLÁSICO                     ||
==================================================================
*/
/* --- CARTA CLÁSICO --- */
body.style-clasico { 
    font-family: 'Segoe UI', Tahoma, sans-serif; 
    color: var(--color-text);
}
body.style-clasico.format-carta { 
    font-size: 10pt; 
}
body.style-clasico.format-carta .header { 
    display: flex; 
    align-items: center; 
    margin-bottom: 0.3in; 
    padding-bottom: 0.1in; 
    border-bottom: 2px solid var(--color-primary);
}
body.style-clasico.format-carta .logo-container { 
    flex: 0 0 25%; 
    padding-right: 0.2in;
}
body.style-clasico.format-carta .logo { 
    max-width: 1.5in; 
    max-height: 1.5in; 
    border: 1px solid #ddd;
    border-radius: 4px;
}
body.style-clasico.format-carta .company-info { 
    flex: 1; 
    text-align: center;
}
body.style-clasico.format-carta .company-name { 
    font-size: 18pt; 
    font-weight: bold; 
    color: var(--color-primary);
    margin-bottom: 0.05in;
}
body.style-clasico.format-carta .client-invoice-section { 
    display: flex; 
    gap: 0.2in; 
    margin-bottom: 0.3in; 
}
body.style-clasico.format-carta .client-info, 
body.style-clasico.format-carta .invoice-info { 
    flex: 1; 
    padding: 0.15in; 
    border: 1px solid var(--color-primary); 
    border-radius: 5px; 
    font-size: 9pt; 
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
body.style-clasico.format-carta .info-box-title { 
    font-size: 10pt; 
    border-bottom: 1px solid var(--color-primary); 
    color: var(--color-primary); 
    padding-bottom: 0.05em; 
    margin-bottom: 0.1in;
    font-weight: 600;
}
body.style-clasico.format-carta .items-table { 
    font-size: 9pt; 
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
    border: 1px solid var(--color-primary);
    border-radius: 5px;
    overflow: hidden;
}
body.style-clasico.format-carta .items-table th, 
body.style-clasico.format-carta .items-table td { 
    padding: 0.1in; 
    border: 1px solid var(--color-primary);
}
body.style-clasico.format-carta .items-table th { 
    background-color: #e7f5ff; 
    color: var(--color-text);
    font-weight: 600;
}
body.style-clasico.format-carta .bottom-section { 
    display: flex; 
    gap: 0.2in; 
    margin-top: 0.3in; 
    align-items: flex-start;
}
body.style-clasico.format-carta .frases-section, 
body.style-clasico.format-carta .total-section { 
    border: 1px solid var(--color-primary); 
    padding: 0.15in; 
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
body.style-clasico.format-carta .frases-section { 
    flex: 2; 
    font-size: 8pt; 
}
body.style-clasico.format-carta .total-section { 
    flex: 1; 
    font-size: 9.5pt; 
}
body.style-clasico.format-carta .total-section div {
    display: flex;
    justify-content: space-between;
}
body.style-clasico.format-carta .total-section div:last-child {
    border-top: 1px solid var(--color-primary);
    margin-top: 0.05in;
    padding-top: 0.1in;
    font-weight: bold;
}
body.style-clasico.format-carta .qr-section { 
    flex: 1; 
    text-align: center; 
    background: #fff;
    border: 1px solid var(--color-primary);
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    padding: 0.15in;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
body.style-clasico.format-carta .qr-code { 
    max-width: 1in; 
    max-height: 1in; 
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 3px;
    background: white;
}
body.style-clasico.format-carta .qr-section .small {
    margin-top: 0.1in;
    font-size: 0.8em;
    color: var(--color-text-light);
}
body.style-clasico.format-carta .footer { 
    font-size: 8pt; 
    margin-top: 0.3in; 
    padding: 0.15in;
    border-top: 2px solid var(--color-primary); 
    background: rgba(26, 58, 108, 0.03);
    border-radius: 5px;
    text-align: center;
}

/* --- MEDIA CARTA CLÁSICO --- */
body.style-clasico.format-media-carta { 
    font-size: 8pt; 
}
body.style-clasico.format-media-carta .header { 
    display: flex; 
    align-items: center; 
    margin-bottom: 0.15in; 
    padding-bottom: 0.1in; 
    border-bottom: 1px solid var(--color-primary);
}
body.style-clasico.format-media-carta .logo-container { 
    flex: 0 0 20%; 
    padding-right: 0.1in;
}
body.style-clasico.format-media-carta .logo { 
    max-width: 1.2in; 
    max-height: 1.2in; 
    border: 1px solid #ddd;
    border-radius: 4px;
}
body.style-clasico.format-media-carta .company-info { 
    flex: 1; 
    text-align: center;
}
body.style-clasico.format-media-carta .company-name { 
    font-size: 14pt; 
    font-weight: bold; 
    color: var(--color-primary);
    margin-bottom: 0.05in;
}
body.style-clasico.format-media-carta .client-invoice-section { 
    display: flex; 
    gap: 0.15in; 
    margin-bottom: 0.15in; 
}
body.style-clasico.format-media-carta .client-info, 
body.style-clasico.format-media-carta .invoice-info { 
    flex: 1; 
    padding: 0.1in; 
    border: 1px solid var(--color-primary); 
    font-size: 7.5pt; 
    border-radius: 5px; 
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
body.style-clasico.format-media-carta .info-box-title { 
    font-size: 8pt; 
    border-bottom: 1px solid var(--color-primary); 
    color: var(--color-primary); 
    padding-bottom: 0.05em; 
    margin-bottom: 0.1in;
    font-weight: 600;
}
body.style-clasico.format-media-carta .items-table { 
    font-size: 7.5pt; 
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
    border: 1px solid var(--color-primary);
    border-radius: 5px;
    overflow: hidden;
}
body.style-clasico.format-media-carta .items-table th, 
body.style-clasico.format-media-carta .items-table td { 
    padding: 0.05in; 
    border: 1px solid var(--color-primary);
}
body.style-clasico.format-media-carta .items-table th { 
    background-color: #e7f5ff; 
    color: var(--color-text);
    font-weight: 600;
}
body.style-clasico.format-media-carta .bottom-section { 
    display: flex; 
    gap: 0.15in; 
    margin-top: 0.15in; 
}
body.style-clasico.format-media-carta .frases-section, 
body.style-clasico.format-media-carta .total-section { 
    border: 1px solid var(--color-primary); 
    padding: 0.1in; 
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
body.style-clasico.format-media-carta .frases-section { 
    flex: 2; 
    font-size: 7pt; 
}
body.style-clasico.format-media-carta .total-section { 
    flex: 1.5; 
    font-size: 7.5pt; 
}
body.style-clasico.format-media-carta .total-section div {
    display: flex;
    justify-content: space-between;
}
body.style-clasico.format-media-carta .total-section div:last-child {
    border-top: 1px solid var(--color-primary);
    margin-top: 0.05in;
    padding-top: 0.1in;
    font-weight: bold;
}
body.style-clasico.format-media-carta .qr-section { 
    flex: 1; 
    text-align: center; 
    align-self: center; 
    background: #fff;
    border: 1px solid var(--color-primary);
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    padding: 0.1in;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
body.style-clasico.format-media-carta .qr-code { 
    max-width: 0.8in; 
    max-height: 0.8in; 
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px;
    background: white;
}
body.style-clasico.format-media-carta .qr-section .small {
    margin-top: 0.1in;
    font-size: 0.8em;
    color: var(--color-text-light);
}
body.style-clasico.format-media-carta .footer { 
    font-size: 7pt; 
    margin-top: 0.15in; 
    padding: 0.1in;
    border-top: 1px solid var(--color-primary); 
    background: rgba(26, 58, 108, 0.03);
    border-radius: 5px;
    text-align: center;
}

/* --- TICKET CLÁSICO --- */
body.style-clasico.format-ticket { 
    font-family: 'Courier New', monospace; 
    font-size: 8pt; 
    line-height: 1.2; 
    color: var(--color-text);
}
body.style-clasico.format-ticket .header { 
    text-align: center; 
    border-bottom: 1px dashed var(--color-primary); 
    margin-bottom: 3mm; 
    padding-bottom: 3mm; 
}
body.style-clasico.format-ticket .logo { 
    max-width: 40mm; 
    max-height: 20mm; 
    margin: 0 auto 3mm; 
    border: 1px solid #ddd;
    border-radius: 3px;
}
body.style-clasico.format-ticket .company-name { 
    font-size: 10pt; 
    font-weight: bold; 
    text-transform: uppercase; 
    color: var(--color-primary);
}
body.style-clasico.format-ticket .company-details { 
    font-size: 7pt; 
    color: var(--color-text-light);
}
body.style-clasico.format-ticket .client-invoice-section { 
    display: block; 
}
body.style-clasico.format-ticket .info-box-title { 
    text-align: center; 
    font-weight: bold; 
    color: var(--color-primary);
    margin-top: 3mm;
}
body.style-clasico.format-ticket .items-table td, 
body.style-clasico.format-ticket .items-table th { 
    padding: 1.5mm 0; 
    border: none; 
}
body.style-clasico.format-ticket .items-table thead th { 
    border-bottom: 1px dashed var(--color-primary); 
    text-align: left; 
    font-weight: bold;
}
body.style-clasico.format-ticket .bottom-section { 
    display: block; 
}
body.style-clasico.format-ticket .total-section { 
    border-top: 1px dashed var(--color-primary); 
    border-bottom: 1px dashed var(--color-primary); 
    padding: 3mm 0;
}
body.style-clasico.format-ticket .total-section div { 
    padding: 0.5mm 0; 
    display: flex;
    justify-content: space-between;
}
body.style-clasico.format-ticket .total-section div:last-child {
    border-top: 1px dashed var(--color-primary);
    margin-top: 1mm;
    padding-top: 1mm;
    font-weight: bold;
}
body.style-clasico.format-ticket .total-section strong { 
    font-size: 9pt; 
}
body.style-clasico.format-ticket .qr-section { 
    text-align: center; 
    padding: 3mm 0; 
}
body.style-clasico.format-ticket .qr-code { 
    width: 30mm; 
    height: 30mm; 
    margin: 3mm auto; 
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px;
    background: white;
}
body.style-clasico.format-ticket .qr-section .small {
    margin-top: 2mm;
    font-size: 0.8em;
    color: var(--color-text-light);
}
body.style-clasico.format-ticket .footer { 
    font-size: 7pt; 
    text-align: center; 
    margin-top: 3mm; 
    padding-top: 2mm;
    border-top: 1px dashed var(--color-primary);
    color: var(--color-text-light);
}

/*
==================================================================
||                        ESTILO 3: AZUL                        ||
==================================================================
*/
/* --- CARTA AZUL --- */
body.style-azul { 
    font-family: 'Open Sans', 'Arial', sans-serif; 
    color: var(--color-blue-text);
}
body.style-azul.format-carta { 
    font-size: 10pt; 
}
body.style-azul.format-carta .header { 
    display: flex; 
    align-items: center; 
    margin-bottom: 0.3in; 
    padding-bottom: 0.1in; 
    border-bottom: 1px solid var(--color-blue-border); /* Borde sutil */
    padding: 0.2in;
}
body.style-azul.format-carta .logo-container { 
    flex: 0 0 25%; 
    padding-right: 0.2in;
}
body.style-azul.format-carta .logo { 
    max-width: 1.5in; 
    max-height: 1.5in; 
    border-radius: 4px;
    background: white;
}
body.style-azul.format-carta .company-info { 
    flex: 1; 
    text-align: center;
}
body.style-azul.format-carta .company-name { 
    font-size: 18pt; 
    font-weight: bold; 
    color: var(--color-blue-primary);
    margin-bottom: 0.05in;
}
body.style-azul.format-carta .client-invoice-section { 
    display: flex; 
    gap: 0.2in; 
    margin-bottom: 0.3in; 
}
body.style-azul.format-carta .client-info, 
body.style-azul.format-carta .invoice-info { 
    flex: 1; 
    padding: 0.15in; 
    border: 1px solid var(--color-blue-border); 
    border-radius: 5px; 
    font-size: 9pt; 
    background: var(--color-blue-bg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
body.style-azul.format-carta .info-box-title { 
    font-size: 10pt; 
    border-bottom: 1px solid var(--color-blue-border); 
    color: var(--color-blue-primary); 
    padding-bottom: 0.05em; 
    margin-bottom: 0.1in;
    font-weight: 600;
}
body.style-azul.format-carta .items-table { 
    font-size: 9pt; 
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
    border: 1px solid var(--color-blue-border);
    border-radius: 5px;
    overflow: hidden;
}
body.style-azul.format-carta .items-table th, 
body.style-azul.format-carta .items-table td { 
    padding: 0.1in; 
    border: 1px solid var(--color-blue-border);
}
body.style-azul.format-carta .items-table th { 
    background-color: var(--color-blue-primary); 
    color: white;
    font-weight: 600;
}
body.style-azul.format-carta .items-table tbody tr {
    background-color: var(--color-blue-bg);
}
body.style-azul.format-carta .items-table tbody tr:nth-child(odd) {
    background-color: var(--color-blue-light);
}
body.style-azul.format-carta .items-table tbody tr:hover {
    background-color: #d6e8ff; /* Hover más notorio */
}
body.style-azul.format-carta .bottom-section { 
    display: flex; 
    gap: 0.2in; 
    margin-top: 0.3in; 
    align-items: flex-start;
}
body.style-azul.format-carta .frases-section, 
body.style-azul.format-carta .total-section { 
    border: 1px solid var(--color-blue-border); 
    padding: 0.15in; 
    background: var(--color-blue-bg);
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
body.style-azul.format-carta .frases-section { 
    flex: 2; 
    font-size: 8pt; 
}
body.style-azul.format-carta .total-section { 
    flex: 1; 
    font-size: 9.5pt; 
}
body.style-azul.format-carta .total-section div {
    display: flex;
    justify-content: space-between;
}
body.style-azul.format-carta .total-section div:last-child {
    border-top: 1px solid var(--color-blue-border);
    margin-top: 0.05in;
    padding-top: 0.1in;
    font-weight: bold;
}
body.style-azul.format-carta .total-section strong { 
    font-size: 12pt; 
    color: var(--color-blue-primary);
}
body.style-azul.format-carta .qr-section { 
    flex: 1; 
    text-align: center; 
    background: var(--color-blue-bg);
    border: 1px solid var(--color-blue-border);
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    padding: 0.15in;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
body.style-azul.format-carta .qr-code { 
    max-width: 1in; 
    max-height: 1in; 
    border: 1px solid var(--color-blue-border);
    border-radius: 4px;
    padding: 3px;
    background: white;
}
body.style-azul.format-carta .qr-section .small {
    margin-top: 0.1in;
    font-size: 0.8em;
    color: var(--color-text-light);
}
body.style-azul.format-carta .footer { 
    font-size: 8pt; 
    margin-top: 0.3in; 
    padding: 0.15in;
    border-top: 2px solid var(--color-blue-primary); 
    background: var(--color-blue-light);
    border-radius: 5px;
    text-align: center;
    color: var(--color-blue-text); /* Mejor contraste */
}

/* --- MEDIA CARTA AZUL --- */
body.style-azul.format-media-carta { 
    font-size: 8pt; 
}
body.style-azul.format-media-carta .header { 
    display: flex; 
    align-items: center; 
    margin-bottom: 0.15in; 
    padding-bottom: 0.1in; 
    border-bottom: 1px solid var(--color-blue-border);
    background: var(--color-blue-light); /* Fondo claro */
    color: var(--color-blue-text);
    padding: 0.1in;
    border-radius: 5px;
}
body.style-azul.format-media-carta .logo-container { 
    flex: 0 0 20%; 
    padding-right: 0.1in;
}
body.style-azul.format-media-carta .logo { 
    max-width: 1.1in; 
    max-height: 1.1in; 
    border-radius: 4px;
    background: white;
}
body.style-azul.format-media-carta .company-info { 
    flex: 1; 
    text-align: center;
}
body.style-azul.format-media-carta .company-name { 
    font-size: 14pt; 
    font-weight: bold; 
    color: var(--color-blue-primary);
    margin-bottom: 0.05in;
}
body.style-azul.format-media-carta .client-invoice-section { 
    display: flex; 
    gap: 0.15in; 
    margin-bottom: 0.15in; 
}
body.style-azul.format-media-carta .client-info, 
body.style-azul.format-media-carta .invoice-info { 
    flex: 1; 
    padding: 0.1in; 
    border: 1px solid var(--color-blue-border); 
    font-size: 7.5pt; 
    border-radius: 5px; 
    background: var(--color-blue-bg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
body.style-azul.format-media-carta .info-box-title { 
    font-size: 8pt; 
    border-bottom: 1px solid var(--color-blue-border); 
    color: var(--color-blue-primary); 
    padding-bottom: 0.05em; 
    margin-bottom: 0.1in;
    font-weight: 600;
}
body.style-azul.format-media-carta .items-table { 
    font-size: 7.5pt; 
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
    border: 1px solid var(--color-blue-border);
    border-radius: 5px;
    overflow: hidden;
}
body.style-azul.format-media-carta .items-table th, 
body.style-azul.format-media-carta .items-table td { 
    padding: 0.05in; 
    border: 1px solid var(--color-blue-border);
}
body.style-azul.format-media-carta .items-table th { 
    background-color: var(--color-blue-primary); 
    color: white;
    font-weight: 600;
}
body.style-azul.format-media-carta .items-table tbody tr {
    background-color: var(--color-blue-bg);
}
body.style-azul.format-media-carta .items-table tbody tr:nth-child(odd) {
    background-color: var(--color-blue-light);
}
body.style-azul.format-media-carta .items-table tbody tr:hover {
    background-color: #d6e8ff; /* Hover más notorio */
}
body.style-azul.format-media-carta .bottom-section { 
    display: flex; 
    gap: 0.15in; 
    margin-top: 0.15in; 
}
body.style-azul.format-media-carta .frases-section, 
body.style-azul.format-media-carta .total-section { 
    border: 1px solid var(--color-blue-border); 
    padding: 0.1in; 
    background: var(--color-blue-bg);
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
body.style-azul.format-media-carta .frases-section { 
    flex: 2; 
    font-size: 7pt; 
}
body.style-azul.format-media-carta .total-section { 
    flex: 1.5; 
    font-size: 7.5pt; 
}
body.style-azul.format-media-carta .total-section div {
    display: flex;
    justify-content: space-between;
}
body.style-azul.format-media-carta .total-section div:last-child {
    border-top: 1px solid var(--color-blue-border);
    margin-top: 0.05in;
    padding-top: 0.1in;
    font-weight: bold;
}
body.style-azul.format-media-carta .qr-section { 
    flex: 1; 
    text-align: center; 
    align-self: center; 
    background: var(--color-blue-bg);
    border: 1px solid var(--color-blue-border);
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    padding: 0.1in;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
body.style-azul.format-media-carta .qr-code { 
    max-width: 0.8in; 
    max-height: 0.8in; 
    border: 1px solid var(--color-blue-border);
    border-radius: 4px;
    padding: 2px;
    background: white;
}
body.style-azul.format-media-carta .qr-section .small {
    margin-top: 0.1in;
    font-size: 0.8em;
    color: var(--color-text-light);
}
body.style-azul.format-media-carta .footer { 
    font-size: 7pt; 
    margin-top: 0.15in; 
    padding: 0.1in;
    border-top: 1px solid var(--color-blue-primary); 
    background: var(--color-blue-light);
    border-radius: 5px;
    text-align: center;
    color: var(--color-blue-text); /* Mejor contraste */
}

/* --- TICKET AZUL --- */
body.style-azul.format-ticket { 
    font-family: 'Open Sans', 'Arial', sans-serif; /* Cambiado a Open Sans */
    font-weight: 400; /* Peso ligero para mejor legibilidad */
    font-size: 8pt; 
    line-height: 1.2; 
    color: var(--color-blue-text);
}
body.style-azul.format-ticket .header { 
    text-align: center; 
    border-bottom: 1px dashed var(--color-blue-border); 
    margin-bottom: 3mm; 
    padding-bottom: 3mm; 
  /*  background: var(--color-blue-primary);*/
    color: white;
}
body.style-azul.format-ticket .logo { 
    max-width: 40mm; 
    max-height: 20mm; 
    margin: 0 auto 3mm; 
    border: 1px solid var(--color-blue-border);
    border-radius: 3px;
    background: white;
}
body.style-azul.format-ticket .company-name { 
    font-size: 10pt; 
    font-weight: bold; 
    text-transform: uppercase; 
    color: var(--color-blue-primary);
}
body.style-azul.format-ticket .company-details { 
    font-size: 7pt; 
    color: var(--color-text-light);
}
body.style-azul.format-ticket .client-invoice-section { 
    display: block; 
}
body.style-azul.format-ticket .info-box-title { 
    text-align: center; 
    font-weight: bold; 
    color: var(--color-blue-primary);
    margin-top: 3mm;
}
body.style-azul.format-ticket .items-table td, 
body.style-azul.format-ticket .items-table th { 
    padding: 1.5mm 0; 
    border: none; 
}
body.style-azul.format-ticket .items-table thead th { 
    border-bottom: 1px dashed var(--color-blue-border); 
    text-align: left; 
    font-weight: bold;
    background: var(--color-blue-primary);
    color: white;
}
body.style-azul.format-ticket .items-table tbody tr {
    background-color: var(--color-blue-bg);
}
body.style-azul.format-ticket .items-table tbody tr:nth-child(odd) {
    background-color: var(--color-blue-light);
}
body.style-azul.format-ticket .bottom-section { 
    display: block; 
}
body.style-azul.format-ticket .total-section { 
    border-top: 1px dashed var(--color-blue-border); 
    border-bottom: 1px dashed var(--color-blue-border); 
    padding: 3mm 0;
}
body.style-azul.format-ticket .total-section div { 
    padding: 0.5mm 0; 
    display: flex;
    justify-content: space-between;
}
body.style-azul.format-ticket .total-section div:last-child {
    border-top: 1px dashed var(--color-blue-border);
    margin-top: 1mm;
    padding-top: 1mm;
    font-weight: bold;
}
body.style-azul.format-ticket .total-section strong { 
    font-size: 9pt; 
    color: var(--color-blue-primary);
}
body.style-azul.format-ticket .qr-section { 
    text-align: center; 
    padding: 3mm 0; 
}
body.style-azul.format-ticket .qr-code { 
    width: 30mm; 
    height: 30mm; 
    margin: 3mm auto; 
    border: 1px solid var(--color-blue-border);
    border-radius: 4px;
    padding: 2px;
    background: white;
}
body.style-azul.format-ticket .qr-section .small {
    margin-top: 2mm;
    font-size: 0.8em;
    color: var(--color-text-light);
}
body.style-azul.format-ticket .footer { 
    font-size: 7pt; 
    text-align: center; 
    margin-top: 3mm; 
    padding-top: 2mm;
    border-top: 1px dashed var(--color-blue-border);
    background: var(--color-blue-light);
    color: var(--color-blue-text); /* Mejor contraste */
}