/* Variables CSS de Zamglobos para una gestión de colores más sencilla */
:root {
    --primary-color-main: #00bcd4; /* Azul turquesa de Zamglobos main */
    --secondary-color-main: #00838f; /* Azul más oscuro para gradientes de Zamglobos main */
    --accent-color-main: #9400d3; /* Violeta para acentos de Zamglobos main */
    --text-color-main: #ffffff; /* Texto claro para Zamglobos main */
    --background-color-main: #0a0a0a; /* Fondo oscuro de Zamglobos main */

    /* Colores para el formulario de cotización */
    --primary-color: #4A00B7; /* Morado oscuro/Azul de ZAM */
    --secondary-color: #FF7B00; /* Naranja brillante de GLOBOS y globos */
    --accent-color: #FFD700; /* Dorado/Amarillo para acentos y textos resaltados */
    --whatsapp-color: #25D366; /* Verde de WhatsApp */
    --text-dark: #333;
    --text-light: #f8f9fa;
    --bg-light: #ffffff;
    --bg-dark: #f0f2f5; /* Un gris claro para secciones */
    --red-promo: #DC143C; /* Rojo cereza para la promoción */

    /* Colores para el simulador de WhatsApp (no directamente usados aquí, pero para coherencia) */
    --whatsapp-bg-light: #E5DDD5; 
    --whatsapp-bubble-received: #FFFFFF;
    --whatsapp-bubble-sent: #DCF8C6;
    --whatsapp-text-dark: #222222;
    --whatsapp-text-light: #777777;

    /* NUEVA VARIABLE: Fuente para el título COTIZACIÓN en PDF */
    --pdf-cotizacion-title-font: 'Roboto', sans-serif; /* Puedes probar con 'Montserrat', 'Open Sans', 'Lato' */
}

/* Reset básico para limpiar estilos por defecto del navegador */
body, h1, h2, h3, p, ul, li, form, input, textarea, button, table, th, td {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Incluye padding y border en el ancho/alto total */
}

/* Estilos globales del cuerpo de la página */
html {
    height: 100%; /* Asegura que html ocupe el 100% de la ventana */
    width: 100%;
    background-color: var(--background-color-main); /* El color de fondo principal va en html */
}

body {
    font-family: 'Montserrat', sans-serif; 
    color: var(--text-dark); 
    display: flex; /* Mantenemos display:flex para centrar el cotizacion-container */
    justify-content: center; 
    padding: 20px; /* Volvemos a añadir padding al body para que el cotizacion-container no se pegue a los bordes */
    min-height: 100vh; /* Mantenemos el min-height */
    overflow-y: auto; /* PERMITIMOS EL SCROLL VERTICAL POR DEFECTO */
    position: relative; 
    width: 100%; /* Aseguramos que el body ocupe el ancho completo */
}

body.modal-open {
    overflow: hidden; /* El scroll se oculta SOLO cuando el modal está abierto */
}

/* ESTILOS PARA EL FONDO DE PARTÍCULAS DEL MODAL (REPLICANDO LA WEB PRINCIPAL) */
#tsparticles-modal {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: transparent; 
}

/* Contenedor principal de la cotización */
.cotizacion-container {
    background-color: var(--bg-light); 
    padding: 30px;
    border-radius: 8px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    width: 100%;
    max-width: 900px; 
    margin: auto; 
    visibility: hidden; 
    opacity: 0;
    transition: opacity 0.5s ease;
    position: relative; 
    z-index: 10; 
}

.cotizacion-container.loaded {
    visibility: visible;
    opacity: 1;
}

/* CABECERA DE LA COTIZACIÓN */
.cotizacion-header {
    display: flex;
    justify-content: space-between; 
    align-items: flex-start; 
    margin-bottom: 30px;
    flex-wrap: wrap; 
    gap: 15px; 
}

/* Sección del logo (para el navegador) */
.header-logo-section {
    flex-shrink: 0; 
    width: 150px; 
    height: 80px; 
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px; 
    overflow: hidden; 
}

.header-logo-section img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; 
    display: block; 
}

/* Título principal de la cotización */
.cotizacion-title {
    flex-grow: 1; 
    text-align: center;
    font-size: 2.5em; 
    font-family: 'Pacifico', cursive; 
    color: var(--primary-color); 
    margin: 0 20px; 
    align-self: center; 
    min-width: 200px; 
}

/* Sección de la fecha */
.header-date-section {
    flex-shrink: 0;
    width: 180px; 
    text-align: right;
    display: flex; 
    align-items: center;
    justify-content: flex-end; 
}

.header-date-section label {
    font-weight: bold;
    margin-right: 10px;
}
.header-date-section input[type="date"] {
    border: 1px solid var(--primary-color); 
    padding: 8px;
    border-radius: 4px;
    font-size: 0.9em;
}

/* NUEVOS ESTILOS: Sección de datos de la empresa para factura fiscal (en el navegador) */
.empresa-fiscal-section {
    display: flex; 
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 25px;
    border: 1px solid var(--bg-dark);
    padding: 15px;
    border-radius: 6px;
    background-color: var(--bg-dark);
}

/* Sección de datos del cliente e información adicional (navegador) */
.cliente-data, .cotizacion-info-extra {
    display: flex;
    flex-wrap: wrap; 
    gap: 15px; 
    margin-bottom: 25px;
    border: 1px solid var(--bg-dark); 
    padding: 15px;
    border-radius: 6px;
    background-color: var(--bg-dark); 
}
/* NUEVO: Ocultar sección de cliente completamente si tiene la clase hide-for-fiscal */
.cliente-data.hide-for-fiscal {
    display: none; 
    visibility: hidden;
}

/* *** ESTILOS: Sección de Datos Bancarios (solo para cotización normal, en navegador) *** */
/* Esta sección NO será inyectada en el DOM, solo se crea en memoria para el PDF */

/* Input Group Base Styles */
.input-group {
    flex: 1 1 calc(50% - 7.5px); 
    display: flex;
    flex-direction: column;
}

.input-group.full-width {
    flex: 1 1 100%; 
}

.input-group label {
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--primary-color); 
    font-size: 0.9em;
}

.input-group input[type="text"],
.input-group input[type="tel"],
.input-group input[type="number"],
.input-group input[type="email"], 
.input-group textarea {
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    width: 100%; 
    transition: border-color 0.2s, box-shadow 0.2s; 
}

.input-group input:focus,
.input-group textarea:focus {
    border-color: var(--secondary-color); 
    outline: none;
    box-shadow: 0 0 5px rgba(255, 123, 0, 0.3); 
}

textarea {
    resize: vertical; 
    min-height: 50px;
    max-height: 150px;
}
/* Sección de Ítemes de la Cotización (tabla, navegador) */
.cotizacion-items {
    margin-bottom: 25px;
}

table {
    width: 100%;
    border-collapse: collapse; 
    margin-bottom: 15px;
    background-color: #fff;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
    vertical-align: middle;
}

table thead th {
    background-color: var(--primary-color); 
    font-weight: bold;
    color: var(--text-light); 
}

table tbody tr:nth-child(even) { 
    background-color: var(--bg-dark); 
}

table td input {
    width: 100%;
    border: none;
    padding: 5px 0;
    font-size: 0.95em;
    background-color: transparent; 
    text-align: inherit; 
}

table td input:focus {
    background-color: #ffe0b2; 
    outline: none;
}

/* Ancho específico y alineación para columnas de la tabla */
table th:nth-child(1), table td:nth-child(1) { /* CANTIDAD */
    width: 10%;
    text-align: center;
}
table th:nth-child(2), table td:nth-child(2) { /* CONCEPTO - REFERENCIA */
    width: 55%;
}
table th:nth-child(3), table td:nth-child(3) { /* UNIDAD */
    width: 15%;
    text-align: right;
}
table th:nth-child(4), table td:nth-child(4) { /* TOTAL por línea */
    width: 15%;
    text-align: right;
    background-color: var(--bg-dark); 
    color: var(--red-promo); 
    font-weight: bold; 
}
table th:last-child, table td:last-child { /* Para el botón de eliminar línea */
    width: 5%;
    text-align: center;
}

.delete-row-btn {
    background: none;
    border: none;
    color: var(--red-promo); 
    font-size: 1.2em;
    cursor: pointer;
    opacity: 0.7; 
    transition: opacity 0.2s;
    line-height: 1;
}
.delete-row-btn:hover {
    opacity: 1;
}

/* Botón Añadir Línea */
#addRowBtn {
    background-color: var(--whatsapp-color); 
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s;
    display: inline-block; 
    margin-top: 10px; 
}

#addRowBtn:hover {
    background-color: #218838;
}

/* Sección de Totales (navegador) */
.cotizacion-totales {
    display: flex;
    flex-direction: column; 
    align-items: flex-end; 
    margin-bottom: 30px;
    border-top: 1px solid #ddd;
    padding-top: 15px;
}

.total-line {
    display: flex; /* Asegura que siempre sea flex por defecto */
    justify-content: space-between; 
    width: 100%;
    max-width: 300px; 
    margin-bottom: 10px;
    font-size: 1.1em;
}

.total-line span {
    font-weight: bold;
    color: var(--primary-color); 
    flex-shrink: 0;
    margin-right: 10px;
}

.total-line input {
    border: none;
    background-color: transparent;
    text-align: right;
    font-weight: bold;
    width: 120px;
    flex-grow: 1;
}

.total-line input#ivaPorcentaje {
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 5px;
    width: 60px;
}
/* Estilos para el campo de IVA deshabilitado (factura fiscal) */
.total-line input#ivaPorcentaje:disabled {
    background-color: #f0f0f0; 
    cursor: not-allowed;
    border-color: #ddd;
}


.total-line.total-final {
    font-size: 1.3em;
    color: var(--secondary-color); 
    border-top: 2px solid var(--secondary-color); 
    padding-top: 10px;
    margin-top: 10px;
}

/* Botón de Descarga (navegador) */
.download-button {
    display: block;
    width: 100%;
    padding: 15px 20px;
    background-color: var(--primary-color); 
    color: white;
    font-size: 1.2em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 30px;
}

.download-button:hover {
    background-color: #380092; 
}

/* --- ESTILOS MEJORADOS PARA EL MODAL DE SELECCIÓN DE TIPO DE COTIZACIÓN --- */
.modal {
    display: flex; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto; 
    background-color: rgba(26, 26, 26, 0.75); 
    backdrop-filter: blur(8px);
    justify-content: center; 
    align-items: center; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.show {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: rgba(30, 30, 30, 0.9); 
    padding: 40px; 
    border-radius: 12px; 
    box-shadow: 0 0 25px rgba(0, 200, 255, 0.4), 0 0 10px var(--accent-color-main); 
    max-width: 600px; 
    text-align: center;
    position: relative;
    transition: transform 0.4s ease; 
    color: var(--text-color-main); 
    z-index: 1001; 
    border: 1px solid rgba(0, 188, 212, 0.3); 
    animation: fadeInScale 0.4s ease-out forwards;
}

/* Keyframe para una animación de entrada más bonita y centrada */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px); 
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0); 
    }
}


.modal-content h2 {
    font-family: 'Oswald', sans-serif; 
    color: var(--primary-color-main); 
    margin-bottom: 25px; 
    font-size: 2.8em; 
    text-shadow: 0 0 10px rgba(0, 200, 255, 0.4); 
}

.modal-content p {
    font-size: 1.2em; 
    margin-bottom: 40px; 
    color: var(--text-color-main); 
    line-height: 1.5;
}

.modal-buttons {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    gap: 20px; 
}

/* Reutilizar la clase .cta-button de la web principal para los botones del modal */
.modal-buttons .cta-button {
    background: none; 
    
    display: inline-block; 
    padding: 15px 35px; 
    background: linear-gradient(90deg, var(--primary-color-main) 0%, var(--secondary-color-main) 100%); 
    color: var(--text-color-main); 
    border: none; 
    border-radius: 10px; 
    font-size: 1.35em; 
    font-weight: bold;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; 
    box-shadow: 0 7px 20px rgba(0, 188, 212, 0.4); 
    text-decoration: none; 
    margin-top: 0; 
}


.modal-buttons .cta-button:hover {
    transform: translateY(-4px); 
    box-shadow: 0 10px 25px rgba(0, 188, 212, 0.6); 
}

/* Modificación para el botón fiscal-option */
.modal-buttons button.fiscal-option {
    background: linear-gradient(90deg, var(--accent-color-main) 0%, #7e00b0 100%); 
    box-shadow: 0 7px 20px rgba(148, 0, 211, 0.4); 
    margin-top: 0; 
}

.modal-buttons button.fiscal-option:hover {
    background: linear-gradient(90deg, #7e00b0 0%, #680092 100%); 
    box-shadow: 0 10px 25px rgba(148, 0, 211, 0.6); 
}


/* Media Queries para Responsividad (PARA LA PANTALLA, NO EL PDF) */
@media (max-width: 768px) {
    .cotizacion-header { flex-direction: column; align-items: center; }
    .header-logo-section, .header-date-section { width: 100%; text-align: center; margin-bottom: 15px; }
    .cotizacion-title { margin: 15px 0; font-size: 2em; }
    .cliente-data, .cotizacion-info-extra, .empresa-fiscal-section { flex-direction: column; } 
    .input-group { flex: 1 1 100%; }
    .cotizacion-totales { align-items: center; }
    .total-line { max-width: 90%; }
    table th:nth-child(1), table td:nth-child(1) { width: 15%; }
    table th:nth-child(2), table td:nth-child(2) { width: 45%; }
    table th:nth-child(3), table td:nth-child(3) { width: 20%; }
    table th:nth-child(4), table td:nth-child(4) { width: 20%; }
    table th:last-child, table td:last-child { width: auto; }

    .modal-content {
        max-width: 90%;
        padding: 25px; 
    }
    .modal-content h2 {
        font-size: 2.2em; 
    }
    .modal-content p {
        font-size: 1.1em;
    }
    .modal-buttons .cta-button {
        font-size: 1.1em;
        padding: 12px 25px;
        margin: 8px; 
        margin-top: 0; 
    }
}

@media (max-width: 480px) {
    .cotizacion-container { padding: 15px; }
    .cotizacion-title { font-size: 1.8em; }
    table th, table td { font-size: 0.9em; padding: 8px; }
    table td input { font-size: 0.9em; }
    .modal-content h2 {
        font-size: 1.8em;
    }
    .modal-content p {
        font-size: 1em;
    }
    .modal-buttons .cta-button {
        width: calc(100% - 20px); 
        margin: 5px 10px; 
    }
}

/* ESTILOS ESPECÍFICOS PARA LA IMPRESIÓN (APLICADOS SOLO DURANTE LA GENERACIÓN DEL PDF) */
.pdf-export-mode {
    background-color: #fff !important; 
    margin: 0 !important; padding: 0 !important; box-shadow: none !important; 
    width: 100% !important; min-height: auto !important; 
    font-size: 10pt !important; 
    line-height: 1.2 !important; 
    font-family: 'Montserrat', sans-serif !important; 
}
/* CAMBIO: Usamos la nueva variable para la fuente del título */
.pdf-export-mode .cotizacion-title {
    font-family: var(--pdf-cotizacion-title-font) !important; /* Fuente más normal y bonita */
    font-weight: bold !important; /* Asegurar que sea negrita */
}


.pdf-export-mode .cotizacion-container {
    width: 210mm !important; 
    min-height: 297mm !important; 
    padding: 15mm !important; 
    box-shadow: none !important; border: none !important; overflow: hidden !important; 
    max-width: none !important; font-size: 10pt !important; 
    display: flex !important; 
    flex-direction: column !important; 
    /* Ajuste de gap para asegurar que las secciones no se solapen */
    gap: 5mm !important; 
}

/* Ocultar elementos no deseados en el PDF */
.pdf-export-mode .download-button, .pdf-export-mode #addRowBtn, .pdf-export-mode #logoUpload, 
.pdf-export-mode .logo-upload-button label, .pdf-export-mode #tipoCotizacion, 
.pdf-export-mode .small-logo-button { 
    display: none !important;
}

/* Estilos para los campos de texto que se convierten a <span> o <div> para el PDF */
.pdf-export-mode .pdf-text-field {
    border: none !important; padding: 0 !important; background-color: transparent !important;
    pointer-events: none !important; resize: none !important; outline: none !important; 
    white-space: normal !important; 
    word-wrap: break-word !important; overflow: visible !important; 
    height: auto !important; 
    min-height: unset !important; box-shadow: none !important;
    line-height: inherit !important; vertical-align: top !important; 
    display: inline-block !important; 
    width: 100% !important; 
    box-sizing: border-box !important;
    color: #000 !important; 
}

.pdf-export-mode textarea { 
    min-height: 5mm !important; 
}

/* Reglas para asegurar que inputs no convertidos se oculten */
.pdf-export-mode input[type="number"], .pdf-export-mode input[type="date"], 
.pdf-export-mode input[type="text"]:not(.pdf-text-field), 
.pdf-export-mode input[type="tel"]:not(.pdf-text-field),
.pdf-export-mode input[type="email"]:not(.pdf-text-field),
.pdf-export-mode textarea:not(.pdf-text-field) {
    display: none !important; 
}

/* ENCABEZADO DEL DOCUMENTO: Logo, Título, Fecha para PDF */
.pdf-export-mode .cotizacion-header {
    display: flex !important; 
    flex-direction: row !important; 
    justify-content: space-between !important; 
    align-items: center !important; /* Centrar verticalmente todos los elementos del header */
    flex-wrap: nowrap !important; 
    margin-bottom: 0 !important; 
    font-size: 9pt !important;
    position: relative !important; 
    padding: 5mm 0 !important; /* Un poco de padding vertical */
    height: auto !important; 
}

/* MODIFICADO: Sección del logo en el header para PDF */
.pdf-export-mode .header-logo-section {
    flex-shrink: 0 !important; 
    width: 60mm !important; /* Ancho fijo para el área del logo */
    height: 40mm !important; /* Alto fijo para el área del logo */
    display: flex !important;
    justify-content: flex-start !important; /* Alineación a la izquierda */
    align-items: center !important; /* Centrado vertical */
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important; 
}

/* MODIFICADO: Contenedor de logos dentro del header-logo-section */
.pdf-export-mode .pdf-stacked-logos { 
    display: flex !important;
    flex-direction: column !important; /* CAMBIO CLAVE: Logos apilados verticalmente si hay más de uno (principal + fiscal) */
    justify-content: flex-start !important; /* Alineación a la izquierda */
    align-items: flex-start !important; /* Alineación a la izquierda de los logos internos */
    width: auto !important; /* Que el contenedor se ajuste al contenido */
    max-width: 100% !important; /* No exceda el área designada */
    height: auto !important; 
    gap: 1mm !important; /* Espacio pequeño entre logos apilados */
    flex-shrink: 0 !important;
    margin: 0 !important; /* Sin márgenes automáticos */
}

/* MODIFICADO: Tamaños de logos en el header */
.pdf-export-mode .pdf-stacked-logos .pdf-logo-main {
    width: auto !important; 
    max-width: 55mm !important; /* Ajustar el tamaño del logo principal */
    height: auto !important;
    max-height: 30mm !important; /* Ajustar la altura máxima */
    object-fit: contain !important; 
}
.pdf-export-mode .pdf-stacked-logos .pdf-logo-fiscal-img { 
    width: auto !important; 
    max-width: 45mm !important; /* Ajustar el tamaño del logo fiscal */
    height: auto !important;
    max-height: 25mm !important; /* Ajustar la altura máxima */
    object-fit: contain !important; 
    margin-top: 2mm !important; /* Pequeño margen entre logos */
}


.pdf-export-mode .cotizacion-title {
    font-size: 20pt !important; 
    text-align: center !important; 
    flex-grow: 1 !important; 
    margin: 0 10mm !important; /* Margen para centrarlo mejor entre logo y fecha */
    padding-left: 0 !important; 
    width: auto !important; 
    min-width: 200px !important; 
    align-self: center !important; 
    color: #000 !important; 
}

.pdf-export-mode .header-date-section {
    flex-shrink: 0 !important;
    width: 50mm !important; /* Ancho fijo para la sección de la fecha */
    min-width: unset !important; 
    display: flex !important; 
    justify-content: flex-end !important;
    align-items: center !important; 
    font-size: 10pt !important; /* Fecha un poco más grande */
    margin-left: 0 !important; 
}
.pdf-export-mode .header-date-section label {
    margin-right: 2mm !important; font-weight: bold !important; white-space: nowrap !important;
    color: #000 !important; 
}
.pdf-export-mode .header-date-section .pdf-text-field { 
    text-align: right !important; 
    width: 35mm !important; /* Ancho para el valor de la fecha */
    padding: 0 !important;
    color: #000 !important; 
}

/* NUEVOS ESTILOS PARA DATOS DE LA EMPRESA (COTIZACIÓN FISCAL) EN PDF */
.pdf-export-mode .empresa-fiscal-section { 
    display: flex !important;
    flex-direction: column !important; 
    gap: 1mm !important; 
    width: 100% !important;
    border: 1px solid #eee !important; 
    background-color: #f9f9f9 !important; 
    padding: 5mm !important; 
    margin-top: 5mm !important; 
    margin-bottom: 5mm !important;
    font-size: 8pt !important;
}

.pdf-export-mode .empresa-fiscal-section .input-group {
    flex-direction: row !important; 
    align-items: baseline !important;
    gap: 1mm !important;
    margin-bottom: 0 !important;
    font-size: 8pt !important; 
}
/* Ancho para las etiquetas de datos de empresa para alineación */
.pdf-export-mode .empresa-fiscal-section .input-group label {
    width: 28mm !important; 
    min-width: 28mm !important;
    flex-shrink: 0 !important;
    text-align: left !important;
    padding-right: 2mm !important;
    font-weight: bold !important;
    color: #000 !important;
}
.pdf-export-mode .empresa-fiscal-section .input-group .pdf-text-field {
    text-align: left !important;
    padding-left: 0 !important;
    color: #000 !important;
}

/* NUEVOS ESTILOS PARA DATOS DEL CLIENTE (NORMAL) EN PDF (EN 2 COLUMNAS) */
.pdf-export-mode .cliente-data {
    display: flex !important; /* Habilitamos flexbox */
    flex-wrap: wrap !important; /* Permitimos que los elementos salten de línea */
    justify-content: space-between !important; /* Distribuye el espacio entre columnas */
    gap: 5mm !important; /* Espacio entre las filas (verticalmente) */
    width: 100% !important;
    border: 1px solid #eee !important;
    background-color: #f9f9f9 !important;
    padding: 5mm !important; 
    margin-top: 5mm !important; 
    margin-bottom: 5mm !important;
    font-size: 8pt !important;
    page-break-inside: avoid !important;
}

.pdf-export-mode .cliente-data .pdf-cliente-title {
    width: 100% !important;
    font-size: 12pt !important; /* Título "Datos del Cliente:" legible */
    font-weight: bold !important;
    color: #333 !important;
    margin-bottom: 3mm !important; /* Espacio debajo del título */
    text-align: left !important;
    display: block !important;
}

.pdf-export-mode .cliente-data .input-group {
    flex-direction: row !important; /* Hacemos que label y campo estén en la misma línea */
    align-items: baseline !important; /* Alineación por línea base */
    gap: 1mm !important;
    margin-bottom: 0 !important; /* El gap de .cliente-data controla el espaciado vertical */
    flex: 1 1 calc(50% - 2.5mm) !important; /* DOS COLUMNAS: Restamos la mitad del gap general */
    max-width: calc(50% - 2.5mm) !important; /* Aseguramos que no crezca más */
    font-size: 9pt !important; /* Texto un poco más grande para legibilidad */
}

.pdf-export-mode .cliente-data .input-group label {
    width: 25mm !important; /* Ancho fijo para las etiquetas */
    min-width: 25mm !important;
    flex-shrink: 0 !important;
    text-align: left !important;
    padding-right: 2mm !important;
    font-weight: bold !important;
    color: #000 !important;
}

.pdf-export-mode .cliente-data .input-group .pdf-text-field {
    text-align: left !important;
    padding-left: 0 !important;
    color: #000 !important;
    width: auto !important; /* El texto ocupa el resto del espacio */
    flex-grow: 1 !important;
}

.pdf-export-mode .cliente-data .input-group.full-width {
    flex: 1 1 100% !important; /* La dirección ocupa todo el ancho */
    max-width: 100% !important;
    margin-top: 3mm !important; /* Pequeño margen extra para separarla de los campos superiores */
}

/* TABLA DE ÍTEMS PARA PDF */
.pdf-export-mode .cotizacion-items {
    margin-top: 5mm !important; 
    margin-bottom: 0 !important; 
    page-break-inside: avoid !important; 
    box-sizing: border-box !important;
}

.pdf-export-mode table {
    width: 100% !important; 
    table-layout: fixed !important; 
    border-collapse: collapse !important;
    background-color: #fff !important;
    margin-bottom: 0 !important; 
    font-size: 9pt !important; 
    border: 1px solid #ddd !important; 
}

.pdf-export-mode table th, .pdf-export-mode table td {
    border: 1px solid #ddd !important; 
    padding: 1mm !important; 
    vertical-align: middle !important; 
    word-wrap: break-word !important; 
    white-space: normal !important; 
    overflow: hidden !important; 
    line-height: 1.2 !important; 
    box-sizing: border-box !important;
    color: #000 !important; 
}

.pdf-export-mode table thead th {
    background-color: var(--primary-color) !important;
    font-weight: bold !important; color: #fff !important;
    text-align: center !important; 
    padding: 2mm 1mm !important; 
}

/* ANCHOS DE COLUMNAS DE LA TABLA EN EL PDF */
.pdf-export-mode table th:nth-child(1), .pdf-export-mode table td:nth-child(1) { 
    width: 10% !important; 
    text-align: center !important;
}
.pdf-export-mode table th:nth-child(2), table td:nth-child(2) { 
    width: 58% !important; 
    text-align: left !important;
}
.pdf-export-mode table th:nth-child(3), table td:nth-child(3) { 
    width: 16% !important; 
    text-align: right !important;
}
.pdf-export-mode table th:nth-child(4), table td:nth-child(4) { 
    width: 16% !important; 
    text-align: right !important;
    background-color: #f0f0f0 !important; 
    color: var(--red-promo) !important; 
    font-weight: bold !important;
}
.pdf-export-mode table th:last-child, .pdf-export-mode table td:last-child { 
    width: 0 !important; padding: 0 !important; border: none !important;
    display: none !important; 
}

/* Estilos de los campos de texto reemplazados en la tabla */
.pdf-export-mode table td .pdf-text-field { 
    font-size: 9pt !important;
    padding: 0 1mm !important; 
    border: none !important;
    background-color: transparent !important;
    text-align: inherit !important; 
    width: 100% !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    display: inline-block !important; 
    height: auto !important; 
    color: #000 !important; 
}


/* SECCIÓN DE TOTALES PARA PDF */
.pdf-export-mode .cotizacion-totales {
    margin-bottom: 0 !important; 
    padding-top: 10mm !important; 
    border-top: 1px solid #ddd !important; 
    align-items: flex-end !important;
}
.pdf-export-mode .total-line {
    font-size: 10pt !important; 
    width: 90mm !important; 
    margin-left: auto !important; 
    margin-right: 0 !important; 
    margin-bottom: 5mm !important;
    display: flex !important; justify-content: space-between !important; 
    align-items: baseline !important; flex-wrap: nowrap !important;
}

.pdf-export-mode .total-line span { 
    flex-grow: 0 !important; flex-shrink: 0 !important;
    width: auto !important; 
    text-align: left !important; 
    margin-right: 5mm !important; 
    color: #000 !important; 
}

.pdf-export-mode .total-line .pdf-text-field { 
    flex-grow: 1 !important; flex-shrink: 0 !important; 
    min-width: 40mm !important; 
    max-width: 40mm !important; 
    text-align: right !important; 
    font-size: 10pt !important;
    padding: 0 !important; 
    border: none !important; 
    background-color: transparent !important;
    box-sizing: border-box !important;
    color: #000 !important; 
}


/* *** ESTILOS PARA LA SECCIÓN DE VENDEDOR Y OBSERVACIONES EN PDF (CORREGIDO: legible y vertical, NO ENORME) *** */
.pdf-export-mode .cotizacion-info-extra {
    display: flex !important;
    flex-direction: column !important; /* Apilar verticalmente */
    width: 100% !important;
    border: 1px solid #eee !important;
    background-color: #f9f9f9 !important;
    padding: 7mm !important; /* Padding ajustado */
    margin-top: 10mm !important; /* Margen ajustado */
    margin-bottom: 8mm !important; /* Margen ajustado */
    font-size: 10pt !important; /* Base font size, más normal */
    line-height: 1.3 !important; /* Interlineado normal */
}

.pdf-export-mode .cotizacion-info-extra .pdf-vendedor-title {
    font-size: 12pt !important; /* Título "Datos del Vendedor:" legible, no gigante */
    font-weight: bold !important;
    color: #333 !important;
    margin-top: 0 !important; /* No necesita margen superior aquí */
    margin-bottom: 5mm !important; /* Más margen debajo del título */
    text-align: left !important; /* Alineación a la izquierda */
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-family: 'Montserrat', sans-serif !important;
}

.pdf-export-mode .cotizacion-info-extra .input-group {
    flex-direction: column !important; /* Label y valor apilados verticalmente */
    align-items: flex-start !important; /* Alinear todo a la izquierda */
    gap: 1mm !important; /* Espacio mínimo entre label y valor */
    margin-bottom: 4mm !important; /* Espacio entre cada grupo (Vendedor, Teléfono, Observaciones) */
    width: 100% !important;
}

.pdf-export-mode .cotizacion-info-extra .input-group label {
    font-size: 10pt !important; /* Etiqueta (VENDEDOR:, TELEFONO:, OBSERVACIONES:) en tamaño normal */
    font-weight: bold !important;
    color: #000 !important;
    width: auto !important;
    min-width: unset !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
}

.pdf-export-mode .cotizacion-info-extra .input-group .pdf-text-field {
    font-size: 10pt !important; /* Texto del valor (YOSNAIKER, número, TASA BCV) en tamaño normal */
    text-align: left !important;
    padding-left: 0 !important;
    color: #000 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.pdf-export-mode .cotizacion-info-extra .input-group.full-width {
    flex-direction: column !important; /* Asegurar que Observaciones también sea columna */
}

/* *** ESTILOS PARA DATOS BANCARIOS EN PDF (¡¡ENORME Y SÚPER LEGIBLE, COMO ME PEDISTE!!) *** */
.pdf-export-mode .datos-bancarios-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centrar el título y el contenedor de bancos */
    width: 100% !important;
    margin-top: 15mm !important; /* Más separación del contenido anterior */
    margin-bottom: 0 !important; 
    border: 1px solid #eee !important;
    background-color: #f9f9f9 !important;
    padding: 15mm !important; /* Más padding general */
    font-size: 18pt !important; /* Base font size para esta sección (¡MUCHO MÁS GRANDE!) */
}

.pdf-export-mode .datos-bancarios-section h3 {
    width: 100% !important;
    text-align: center !important;
    color: #000 !important;
    margin-bottom: 15mm !important; /* Más margen debajo del título principal */
    font-size: 30pt !important; /* ¡TÍTULO "DATOS PARA TRANSFERENCIA" GIGANTE! */
    font-weight: bold !important; /* Asegurar que sea bien negrita */
}

.pdf-export-mode .pdf-banco-info-container { /* Contenedor para los dos bloques de banco */
    display: flex !important;
    flex-direction: column !important; /* Apilado verticalmente */
    width: 100% !important;
    gap: 20mm !important; /* Espacio vertical ENORME entre los bloques de banco */
    justify-content: center !important; 
    align-items: center !important; /* Centrar los bloques de banco horizontalmente */
}

.pdf-export-mode .banco-info {
    flex: 0 0 auto !important; 
    width: 100% !important; /* Ocupa el ancho completo del contenedor */
    max-width: 180mm !important; /* Ancho máximo para cada bloque de banco (210mm de ancho de A4 - 15mm de padding a cada lado del section) */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Alinear contenido interno a la izquierda */
    border: 2px solid #ddd !important; /* Borde más grueso para resaltar */
    background-color: #fff !important;
    padding: 15mm !important; /* Aumentar padding interno SIGNIFICATIVAMENTE */
    font-size: 16pt !important; /* Base font size para este bloque, aún más grande */
    line-height: 1.4 !important; /* Mayor interlineado para mejor legibilidad */
}

.pdf-export-mode .banco-info .logo-banco {
    display: flex !important;
    justify-content: center !important; /* Centrar el logo dentro de su propio div */
    align-items: center !important;
    height: 70mm !important; /* ¡Logo MUCHO más grande en PDF! */
    margin-bottom: 10mm !important; /* Más margen debajo del logo */
    width: 100% !important; 
}

.pdf-export-mode .banco-info .logo-banco img {
    max-width: 95% !important; /* Permitir que el logo sea lo más grande posible */
    max-height: 95% !important;
    object-fit: contain !important;
}

.pdf-export-mode .banco-info h4 {
    text-align: center !important; /* Centrar el nombre del banco */
    color: #000 !important;
    margin-bottom: 8mm !important; /* Más margen debajo del nombre del banco */
    font-size: 24pt !important; /* ¡Nombre del banco ENORME! */
    font-weight: bold !important; /* Más negrita */
    width: 100% !important; 
}

.pdf-export-mode .banco-info p {
    margin-bottom: 5mm !important; /* Más margen entre líneas de detalle */
    color: #000 !important;
    font-size: 18pt !important; /* ¡Texto de detalles GIGANTE! */
    width: 100% !important; 
    text-align: left !important; 
}

.pdf-export-mode .banco-info p strong {
    color: #000 !important;
    display: inline-block !important;
    min-width: 60mm !important; /* Ancho para etiquetas en PDF (¡aún más ancho para alinear perfectamente!) */
    font-weight: bold !important;
}