/* ===== VARIABLES CSS ===== */
:root {
    --primary-blue: #1e40af;
    --secondary-blue: #3b82f6;
    --accent-blue: #2563eb;
    --dark-gray: #374151;
    --light-gray: #f3f4f6;
    --success-green: #10b981;
    --warning-orange: #f59e0b;
    --danger-red: #ef4444;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --border-color: #e5e7eb;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --sidebar-expanded: 220px;
    --sidebar-collapsed: 80px;
    --sidebar-mobile: 64px;
    --bg-primary: #f9fafb;
    --bg-secondary: #ffffff;
    --print-text-color: #000000; /* Color de texto para impresión */
    --print-background-color: #ffffff; /* Color de fondo para impresión */
    
    /* Colores adicionales para mejor contraste */
    --sidebar-text: #1f2937; /* Texto del sidebar en modo claro */
    --sidebar-hover-bg: #dbeafe; /* Fondo hover del sidebar */
    --sidebar-hover-text: #1e40af; /* Texto hover del sidebar */
    --sidebar-active-text: #ffffff; /* Texto activo del sidebar */
    --dropdown-bg: #ffffff; /* Fondo de dropdowns */
    --dropdown-border: #d1d5db; /* Borde de dropdowns */
    --dropdown-hover-bg: #dbeafe; /* Fondo hover de dropdowns */
    --dropdown-hover-text: #1e40af; /* Texto hover de dropdowns */
    --dropdown-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* Sombra de dropdowns */
    
    /* Colores de fondo y gradientes */
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
    --topbar-bg: linear-gradient(135deg, #e5f0ff 0%, #dbeafe 100%);
    --main-bg: #f9fafb;
    --card-bg: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    --settings-header-bg: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
    
    /* Colores de texto específicos */
    --page-title-color: #0f172a;
    --page-subtitle-color: #4b5563;
    --section-title-color: #1f2937;
    --feature-title-color: #1f2937;
    --feature-desc-color: #4b5563;
    
    /* Colores de elementos UI */
    --table-header-bg: #f9fafb;
    --table-header-color: #374151;
    --table-cell-color: #1f2937;
    --table-row-hover: #f3f4f6;
    --table-row-even: #fcfcfd;
    --table-link-color: #2563eb;
    
    /* Colores de badges */
    --badge-success-bg: #d1fae5;
    --badge-success-color: #065f46;
    --badge-muted-bg: #e5e7eb;
    --badge-muted-color: #374151;
    
    /* Colores de iconos de módulos */
    --icon-blue-bg: #dbeafe;
    --icon-blue-color: #2563eb;
    --icon-indigo-bg: #e0e7ff;
    --icon-indigo-color: #4f46e5;
    --icon-cyan-bg: #cffafe;
    --icon-cyan-color: #0891b2;
    --icon-purple-bg: #efe3ff;
    --icon-purple-color: #7c3aed;
    --icon-amber-bg: #fef3c7;
    --icon-amber-color: #d97706;
    --icon-slate-bg: #e2e8f0;
    --icon-slate-color: #334155;
    
    /* Espaciado estandarizado para tablas */
    --table-cell-padding: 1rem 1.5rem;
    --table-header-padding: 1rem 1.5rem;
    --table-container-padding: 1.5rem;
}

/* Alpine.js x-cloak directive */
[x-cloak] { display: none !important; }

/* Dark mode variables */
body[data-theme="dark"] {
    --text-primary: #ffffff;
    --text-secondary: #e2e8f0;
    --border-color: #374151;
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    
    /* Variables específicas para modo oscuro */
    --sidebar-text: var(--text-secondary);
    --sidebar-hover-bg: #374151;
    --sidebar-hover-text: #e5e7eb;
    --sidebar-active-text: var(--text-secondary);
    --dropdown-bg: #1f2937;
    --dropdown-border: #374151;
    --dropdown-hover-bg: #374151;
    --dropdown-hover-text: #e5e7eb;
    --dropdown-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    
    /* Colores de fondo y gradientes - modo oscuro */
    --sidebar-bg: linear-gradient(180deg, #0b1220 0%, #111827 100%);
    --topbar-bg: linear-gradient(135deg, #111827 0%, #0b1220 100%);
    --main-bg: #0f172a;
    --card-bg: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    --settings-header-bg: linear-gradient(135deg, #0b1220 0%, #111827 100%);
    
    /* Colores de texto específicos - modo oscuro */
    --page-title-color: #ffffff;
    --page-subtitle-color: #e2e8f0;
    --section-title-color: #f1f5f9;
    --feature-title-color: #f1f5f9;
    --feature-desc-color: #cbd5e1;
    
    /* Colores de elementos UI - modo oscuro */
    --table-header-bg: #1f2937;
    --table-header-color: #f1f5f9;
    --table-cell-color: #e2e8f0;
    --table-row-hover: rgba(59,130,246,0.12);
    --table-row-even: #0b1220;
    --table-link-color: #93c5fd;
    
    /* Colores de badges - modo oscuro */
    --badge-success-bg: #065f46;
    --badge-success-color: #bbf7d0;
    --badge-muted-bg: #374151;
    --badge-muted-color: #e5e7eb;
    
    /* Colores de iconos de módulos - modo oscuro */
    --icon-blue-bg: #1e3a8a;
    --icon-blue-color: #bfdbfe;
    --icon-indigo-bg: #3730a3;
    --icon-indigo-color: #c7d2fe;
    --icon-cyan-bg: #155e75;
    --icon-cyan-color: #7dd3fc;
    --icon-purple-bg: #581c87;
    --icon-purple-color: #ddd6fe;
    --icon-amber-bg: #92400e;
    --icon-amber-color: #fde68a;
    --icon-slate-bg: #1e293b;
    --icon-slate-color: #e2e8f0;
    
    /* Espaciado estandarizado para tablas - modo oscuro */
    --table-cell-padding: 1rem 1.5rem;
    --table-header-padding: 1rem 1.5rem;
    --table-container-padding: 1.5rem;
}

/* ===== RESET Y BASE ===== */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--main-bg);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ===== TITULOS DE PÁGINA REUTILIZABLES ===== */
.page-title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 800; /* extrabold */
    color: var(--page-title-color);
    letter-spacing: -0.01em;
}
.page-subtitle {
    color: var(--page-subtitle-color);
    margin-top: 0.25rem;
}
/* Dark mode handled by CSS variables */

/* ===== SETTINGS HEADER ===== */
.settings-header { background: var(--settings-header-bg); color: #fff; border: none; }
.settings-header .settings-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; }
.settings-header .settings-subtitle { opacity: .9; }
/* Dark mode handled by CSS variables */
.settings-header .fa-cog { color: #fff; }

/* Sub-secciones dentro de tarjetas */
.section-title { font-weight: 700; color: var(--section-title-color); margin: .5rem 0; border-left: 4px solid var(--secondary-blue); padding-left: .5rem; }
/* Dark mode handled by CSS variables */

/* ===== CARD DE TABLA REUTILIZABLE ===== */
.table-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    overflow: auto; /* permitir scroll cuando no quepa */
    padding: var(--table-container-padding);
}
/* Dark mode handled by CSS variables */

/* ===== DATA TABLE ===== */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.data-table thead th {
    font-size: 0.75rem; /* text-xs */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: var(--table-header-padding);
    color: var(--table-header-color);
    background: var(--table-header-bg);
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: middle;
}
.data-table tbody td {
    padding: var(--table-cell-padding);
    border-bottom: 1px solid var(--border-color);
    color: var(--table-cell-color);
}
.data-table tbody tr:hover { background: var(--table-row-hover); }
.data-table tbody tr:nth-child(even) { background: var(--table-row-even); }

/* Dark mode handled by CSS variables */

/* Resaltado de celdas primarias (links) */
.table-link { color: var(--table-link-color); font-weight: 600; text-decoration: none; }
.table-link:hover { text-decoration: underline; }
/* Dark mode handled by CSS variables */

/* Columna de acción centrada */
.data-table thead th.col-action, .data-table tbody td.col-action { text-align: center; vertical-align: middle; }

/* Asegurar color de texto y espaciado en todas las tablas */
table td, table th, .table td, .table th {
    color: var(--table-cell-color);
    padding: var(--table-cell-padding);
}

/* Headers de tabla con espaciado estandarizado */
table th, .table th {
    color: var(--table-header-color);
    padding: var(--table-header-padding);
}

/* Asegurar colores y espaciado correctos en modo oscuro para tablas */
body[data-theme="dark"] table td,
body[data-theme="dark"] .table td,
body[data-theme="dark"] .data-table tbody td {
    color: var(--table-cell-color) !important;
    padding: var(--table-cell-padding) !important;
}

body[data-theme="dark"] table th,
body[data-theme="dark"] .table th,
body[data-theme="dark"] .data-table thead th {
    color: var(--table-header-color) !important;
    padding: var(--table-header-padding) !important;
}

/* Enlaces en tablas en modo oscuro */
body[data-theme="dark"] table a,
body[data-theme="dark"] .table a,
body[data-theme="dark"] .data-table a {
    color: var(--table-link-color) !important;
}

/* Espaciado específico para tablas de facturas y documentos */
.invoice-table,
.invoice-table td,
.invoice-table th,
.document-table,
.document-table td,
.document-table th {
    padding: var(--table-cell-padding);
}

.invoice-table th,
.document-table th {
    padding: var(--table-header-padding);
}

/* Estandarización de alineación en tablas */
.data-table th,
.data-table td,
table th,
table td,
.table th,
.table td {
    text-align: left; /* Por defecto, todo alineado a la izquierda */
}

/* Columnas numéricas alineadas a la derecha */
.data-table th.text-right,
.data-table td.text-right,
table th.text-right,
table td.text-right,
.table th.text-right,
.table td.text-right {
    text-align: right;
}

/* Columnas centradas (para botones de acción) */
.data-table th.text-center,
.data-table td.text-center,
table th.text-center,
table td.text-center,
.table th.text-center,
.table td.text-center {
    text-align: center;
}

/* Columnas de acción siempre centradas */
.data-table th.col-action,
.data-table td.col-action,
table th.col-action,
table td.col-action,
.table th.col-action,
.table td.col-action {
    text-align: center;
    vertical-align: middle;
}

/* Reglas específicas para columnas de facturas */
.data-table th:nth-child(1), /* Artículo */
.data-table td:nth-child(1),
.data-table th:nth-child(2), /* Descripción */
.data-table td:nth-child(2) {
    text-align: left;
}

.data-table th:nth-child(3), /* Cantidad */
.data-table td:nth-child(3),
.data-table th:nth-child(4), /* Precio */
.data-table td:nth-child(4),
.data-table th:nth-child(5), /* ITBIS % */
.data-table td:nth-child(5),
.data-table th:nth-child(6), /* Total */
.data-table td:nth-child(6) {
    text-align: right;
}

/* Asegurar que las columnas numéricas estén alineadas a la derecha */
.data-table td[class*="text-right"],
.data-table th[class*="text-right"] {
    text-align: right !important;
}

/* Asegurar que las columnas centradas estén centradas */
.data-table td[class*="text-center"],
.data-table th[class*="text-center"] {
    text-align: center !important;
}

/* Reglas específicas para tablas con clases de Tailwind */
table.min-w-full th,
table.min-w-full td {
    padding: var(--table-cell-padding);
}

table.min-w-full th {
    padding: var(--table-header-padding);
}

/* Asegurar alineación correcta en tablas de Tailwind */
table.min-w-full th.text-left,
table.min-w-full td.text-left {
    text-align: left !important;
}

table.min-w-full th.text-right,
table.min-w-full td.text-right {
    text-align: right !important;
}

table.min-w-full th.text-center,
table.min-w-full td.text-center {
    text-align: center !important;
}

/* Contenedores de tablas con padding estandarizado */
.table-container,
.table-wrapper {
    padding: var(--table-container-padding);
}

/* Mejorar espaciado en elementos de facturas */
.invoice-detail,
.invoice-summary,
.invoice-items {
    padding: var(--table-container-padding);
}

/* Espaciado específico para contenedores de tablas en facturas */
.module-card .overflow-x-auto {
    margin: 0;
    padding: var(--table-container-padding);
}

.module-card table {
    margin: 0;
    width: 100%;
}

/* Asegurar que las tablas dentro de module-card tengan el espaciado correcto */
.module-card table th,
.module-card table td {
    padding: var(--table-cell-padding);
}

.module-card table th {
    padding: var(--table-header-padding);
}

/* Asegurar que las tablas dentro de module-card tengan el espaciado del contenedor */
.module-card .data-table {
    margin: 0;
    width: 100%;
}

.module-card .data-table thead th {
    padding: var(--table-header-padding);
}

.module-card .data-table tbody td {
    padding: var(--table-cell-padding);
}

/* Reglas específicas para la tabla de facturas (invoice_detail.html) */
.module-card .data-table th:first-child, /* Artículo */
.module-card .data-table td:first-child,
.module-card .data-table th:nth-child(2), /* Descripción */
.module-card .data-table td:nth-child(2) {
    text-align: left !important;
}

.module-card .data-table th:nth-child(3), /* Cantidad */
.module-card .data-table td:nth-child(3),
.module-card .data-table th:nth-child(4), /* Precio */
.module-card .data-table td:nth-child(4),
.module-card .data-table th:nth-child(5), /* ITBIS % */
.module-card .data-table td:nth-child(5),
.module-card .data-table th:nth-child(6), /* Total */
.module-card .data-table td:nth-child(6) {
    text-align: right !important;
}

/* Estilos específicos para invoice_detail.html */
.invoice-detail-container {
    max-width: 1000px;
    margin: 0 auto;
}

.invoice-detail-header {
    margin-bottom: 2rem;
}

.invoice-detail-info {
    margin-bottom: 2.5rem;
}

.invoice-detail-table {
    margin: 2rem 0;
}

.invoice-detail-totals {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--border-color);
}

.invoice-detail-totals .w-64 {
    width: 280px;
}

.invoice-detail-totals .flex {
    padding: 0.5rem 0;
    font-size: 1rem;
}

.invoice-detail-totals .border-t {
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
    padding-top: 1rem;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Asegurar que las columnas de acción estén centradas */
.module-card .data-table th.col-action,
.module-card .data-table td.col-action {
    text-align: center !important;
    vertical-align: middle !important;
}

/* Reglas específicas para tablas con clases de Tailwind en contenedores */
.overflow-x-auto table th,
.overflow-x-auto table td {
    padding: var(--table-cell-padding);
}

.overflow-x-auto table th {
    padding: var(--table-header-padding);
}

/* Asegurar alineación correcta en tablas de Tailwind dentro de contenedores */
.overflow-x-auto table th.text-left,
.overflow-x-auto table td.text-left {
    text-align: left !important;
}

.overflow-x-auto table th.text-right,
.overflow-x-auto table td.text-right {
    text-align: right !important;
}

.overflow-x-auto table th.text-center,
.overflow-x-auto table td.text-center {
    text-align: center !important;
}

/* Espaciado estandarizado para listas de elementos */
.item-list,
.product-list {
    padding: 1rem 0;
}

.item-list .item,
.product-list .product {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.item-list .item:last-child,
.product-list .product:last-child {
    border-bottom: none;
}

/* Reglas específicas para mejorar el espaciado en tablas de facturas */
.grid table th,
.grid table td {
    padding: var(--table-cell-padding);
}

.grid table th {
    padding: var(--table-header-padding);
}

/* Asegurar que las tablas en grids tengan el espaciado correcto */
.grid .overflow-x-auto {
    padding: var(--table-container-padding);
}

/* Reglas específicas para tablas en contenedores con clases específicas */
.bg-white table th,
.bg-white table td,
.dark\:bg-gray-800 table th,
.dark\:bg-gray-800 table td {
    padding: var(--table-cell-padding);
}

.bg-white table th,
.dark\:bg-gray-800 table th {
    padding: var(--table-header-padding);
}

/* Reglas específicas para tablas en contenedores con clases específicas de Tailwind */
.text-gray-900 table th,
.text-gray-900 table td,
.dark\:text-gray-100 table th,
.dark\:text-gray-100 table td {
    padding: var(--table-cell-padding);
}

.text-gray-900 table th,
.dark\:text-gray-100 table th {
    padding: var(--table-header-padding);
}

/* Asegurar que las tablas en contenedores con text-gray-900 tengan el espaciado correcto */
.text-gray-900 .overflow-x-auto,
.dark\:text-gray-100 .overflow-x-auto {
    padding: var(--table-container-padding);
}

/* Reglas específicas para mejorar el espaciado en tablas de facturas */
.text-gray-600 table th,
.text-gray-600 table td,
.dark\:text-gray-400 table th,
.dark\:text-gray-400 table td {
    padding: var(--table-cell-padding);
}

.text-gray-600 table th,
.dark\:text-gray-400 table th {
    padding: var(--table-header-padding);
}

/* Asegurar que las tablas en contenedores con text-gray-600 tengan el espaciado correcto */
.text-gray-600 .overflow-x-auto,
.dark\:text-gray-400 .overflow-x-auto {
    padding: var(--table-container-padding);
}


/* Reglas generales para todas las tablas - aplicar espaciado estandarizado */
table th,
table td,
.data-table th,
.data-table td {
    padding: var(--table-cell-padding) !important;
}

table th,
.data-table th {
    padding: var(--table-header-padding) !important;
}

/* Asegurar que todos los contenedores de tablas tengan el espaciado correcto */
.overflow-x-auto,
.table-container,
.table-wrapper {
    padding: var(--table-container-padding) !important;
}

/* Espaciado específico para cards de módulos */
.module-card .overflow-x-auto {
    padding: var(--table-container-padding) !important;
    margin: 0 !important;
}

/* Asegurar que las tablas dentro de cards tengan espaciado adecuado */
.module-card .data-table,
.module-card table {
    margin: 0 !important;
    width: 100% !important;
}

/* Espaciado específico para el contenido de las tablas en cards */
.module-card .data-table thead th,
.module-card .data-table tbody td,
.module-card table th,
.module-card table td {
    padding: var(--table-cell-padding) !important;
}

.module-card .data-table thead th,
.module-card table th {
    padding: var(--table-header-padding) !important;
}

/* Reglas específicas para alineación de columnas */
table th:first-child,
table td:first-child,
.data-table th:first-child,
.data-table td:first-child,
table th:nth-child(2),
table td:nth-child(2),
.data-table th:nth-child(2),
.data-table td:nth-child(2) {
    text-align: left !important;
}

table th:nth-child(3),
table td:nth-child(3),
table th:nth-child(4),
table td:nth-child(4),
table th:nth-child(5),
table td:nth-child(5),
table th:nth-child(6),
table td:nth-child(6),
.data-table th:nth-child(3),
.data-table td:nth-child(3),
.data-table th:nth-child(4),
.data-table td:nth-child(4),
.data-table th:nth-child(5),
.data-table td:nth-child(5),
.data-table th:nth-child(6),
.data-table td:nth-child(6) {
    text-align: right !important;
}

/* Columnas de acción siempre centradas */
table th.col-action,
table td.col-action,
.data-table th.col-action,
.data-table td.col-action {
    text-align: center !important;
    vertical-align: middle !important;
}

/* ===== BADGES ===== */
.badge { display: inline-flex; align-items: center; border-radius: 9999px; padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 600; }
.badge-success { background: var(--badge-success-bg); color: var(--badge-success-color); }
.badge-muted { background: var(--badge-muted-bg); color: var(--badge-muted-color); }
/* Dark mode handled by CSS variables */

/* ===== LANDING PAGE BUTTONS ===== */
.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 2px solid transparent;
    min-width: 160px;
    position: relative;
    overflow: hidden;
}

.hero-button-primary {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-blue) 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.hero-button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--secondary-blue) 100%);
}

.hero-button-primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.hero-button-secondary {
    background: transparent;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1);
}

.hero-button-secondary:hover {
    background: var(--primary-blue);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.hero-button-secondary:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1);
}

/* ===== LANDING PAGE FEATURES ===== */
.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-blue) 100%);
    color: white;
    border-radius: 12px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.feature-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.feature-description {
    font-size: 1rem;
    color: #4b5563;
    line-height: 1.6;
}

/* ===== LAYOUT COMPONENTS ===== */
.sidebar {
    background: var(--sidebar-bg);
    box-shadow: var(--shadow-lg);
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 50;
    border-right: 1px solid var(--border-color);
}

/* Asegurar que el sidebar esté por encima del header en desktop */
@media (min-width: 769px) {
    .sidebar {
        z-index: 70;
    }
}
/* Dark mode handled by CSS variables */

.top-bar {
    background: var(--topbar-bg);
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: 60;
}

/* Ajustar z-index del header para que no interfiera con el sidebar */
@media (min-width: 769px) {
    .top-bar {
        z-index: 65;
    }
}
/* Dark mode handled by CSS variables */
/* Mejor contraste en modo oscuro */
body[data-theme="dark"] .top-bar { box-shadow: 0 2px 8px rgba(0,0,0,0.45), inset 0 -1px 0 #223045; }

/* Trial badge - modo oscuro */
body[data-theme="dark"] .trial-badge {
  background: rgba(255,255,255,0.08);
  border: 1px solid #334155;
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
body[data-theme="dark"] .trial-badge span { color: #e5e7eb !important; }
body[data-theme="dark"] .top-bar .trial-badge button {
  background: #e5e7eb !important;
  color: #1e3a8a !important;
}
body[data-theme="dark"] .top-bar .trial-badge button:hover { background: #ffffff !important; }

/* User dropdown - modo oscuro forzado */
body[data-theme="dark"] .user-dropdown { background: #0f172a; color: #e5e7eb; border-color: #334155; }
body[data-theme="dark"] .user-dropdown__header { color: #e5e7eb; border-color: #334155; }
body[data-theme="dark"] .user-dropdown__link { color: #e5e7eb; }
body[data-theme="dark"] .user-dropdown__link:hover { background: #1f2937; }
body[data-theme="dark"] .user-dropdown__divider { border-color: #334155; }

.main-content {
    margin-left: 80px;
    min-height: 100vh;
    background-color: var(--main-bg);
    transition: all 0.3s ease;
}
/* Dark mode handled by CSS variables */

/* Top bar alignment with sidebar */
.top-bar { 
    margin-left: var(--sidebar-expanded); 
    width: calc(100% - var(--sidebar-expanded)); 
    padding-left: 0; 
    padding-right: 0; 
    position: relative;
    z-index: 60;
}

body.sidebar-collapsed .top-bar { 
    margin-left: var(--sidebar-collapsed); 
    width: calc(100% - var(--sidebar-collapsed)); 
}

@media (max-width: 1024px) { 
    .top-bar { 
        margin-left: var(--sidebar-collapsed); 
        width: calc(100% - var(--sidebar-collapsed)); 
    } 
}

/* Asegurar que el header no se superponga al sidebar en desktop */
@media (min-width: 769px) {
    .top-bar {
        z-index: 65;
    }
    
    .sidebar {
        z-index: 70;
    }
}
.top-bar, .top-bar a, .top-bar span, .top-bar button { color: #1f2937; }
body[data-theme="dark"] .top-bar, body[data-theme="dark"] .top-bar a, body[data-theme="dark"] .top-bar span, body[data-theme="dark"] .top-bar button { color: #e5e7eb; }
/* Dropdown del usuario en modo oscuro */
body[data-theme="dark"] .top-bar .relative .bg-white.bg-opacity-20 { background: rgba(255,255,255,0.18); }
/* Botones/iconos en topbar oscuro con mejor contraste al pasar el mouse */
body[data-theme="dark"] .top-bar button:hover, body[data-theme="dark"] .top-bar a:hover { color: #ffffff; }

/* ===== SIDEBAR ITEMS ===== */
.sidebar-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 12px;
    margin: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: white;
    text-decoration: none;
}

.sidebar-item:hover {
    background: rgba(59, 130, 246, 0.15);
    transform: translateX(4px);
    color: #93c5fd;
}

.sidebar-item.active {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--secondary-blue) 100%);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    color: white;
}

.sidebar-item.active:hover {
    transform: translateX(4px) scale(1.05);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5);
}

/* ===== MODULE CARDS ===== */
.module-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    padding: 2rem;
}

/* Reusable module section header */
.module-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.module-icon {
    padding: 0.5rem;
    border-radius: 10px;
    margin-right: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.module-title {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600;
    color: var(--text-primary);
}

/* Color variants for module icons */
.module-icon--blue { background: var(--icon-blue-bg); color: var(--icon-blue-color); }
.module-icon--indigo { background: var(--icon-indigo-bg); color: var(--icon-indigo-color); }
.module-icon--cyan { background: var(--icon-cyan-bg); color: var(--icon-cyan-color); }
.module-icon--purple { background: var(--icon-purple-bg); color: var(--icon-purple-color); }
.module-icon--amber { background: var(--icon-amber-bg); color: var(--icon-amber-color); }
.module-icon--slate { background: var(--icon-slate-bg); color: var(--icon-slate-color); }

/* Accent title base (already has dark override) */
.accent-title { color: #0f172a; letter-spacing: -0.01em; }
body[data-theme="dark"] .accent-title { color: #e5f2ff !important; text-shadow: 0 0 8px rgba(96,165,250,0.25); }

.module-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--secondary-blue);
}

.module-card.new-item {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-blue) 100%);
    color: white;
    border: none;
}

.module-card.new-item:hover {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--secondary-blue) 100%);
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.4);
}

/* ===== BUTTONS ===== */
.btn-primary {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--secondary-blue) 100%);
    color: white;
    border: none;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-create {
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
    color: white;
    border: none;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
}

.btn-create:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.45);
    background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 100%);
}

.btn-create:active {
    transform: translateY(0);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
}

.btn-secondary {
    background: #f3f4f6;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-secondary:hover {
    background: #e5e7eb;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-back {
    background: transparent;
    color: var(--accent-blue);
    border: 2px solid var(--accent-blue);
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-back:hover {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--secondary-blue) 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
}

.btn-size-md {
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
}

.btn-size-sm {
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
}

.btn-size-lg {
    padding: 0.75rem 2rem;
    font-size: 1rem;
}

/* Responsive action bar for header/footer buttons */
.action-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .action-bar .btn-create,
    .action-bar .btn-back,
    .action-bar .btn-secondary,
    .action-bar .btn-primary {
        width: 100%;
        justify-content: center;
    }
}

.add-item-btn {
    background: linear-gradient(135deg, var(--success-green) 0%, #059669 100%);
    color: white;
    border: none;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.add-item-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.remove-item-btn {
    background: linear-gradient(135deg, var(--danger-red) 0%, #dc2626 100%);
    color: white;
    border: none;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.remove-item-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

/* ===== FORM ELEMENTS ===== */
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.875rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: rgba(255,255,255,0.96);
    color: var(--text-primary);
}

.form-input:focus {
    outline: none;
    border-color: var(--secondary-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input:disabled {
    background-color: rgba(249,250,251,0.86);
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* Estilos para select */
select.form-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.form-checkbox:checked {
    background-color: var(--secondary-blue);
    border-color: var(--secondary-blue);
}

/* ===== INVOICE ITEMS ===== */
.invoice-item {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 1rem;
}

.invoice-item:hover {
    background: #f1f5f9;
    border-color: var(--secondary-blue);
    box-shadow: var(--shadow-md);
}

/* ===== UTILITY CLASSES ===== */
.text-gradient {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shadow-glow {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

/* ===== MODAL STYLES ===== */
/* Clase utility para ocultar elementos */
.hidden {
    display: none !important;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.modal-close:hover {
    background-color: var(--light-gray);
    color: var(--text-primary);
}

/* Dark mode for modal */
body[data-theme="dark"] .modal-content {
    background: #1f2937;
    border: 1px solid #374151;
}

body[data-theme="dark"] .modal-title {
    color: #f9fafb;
}

body[data-theme="dark"] .modal-close {
    color: #d1d5db;
}

body[data-theme="dark"] .modal-close:hover {
    background-color: #374151;
    color: #f9fafb;
}

/* Estilos mejorados para modal en modo oscuro */
body[data-theme="dark"] .modal-body label {
    color: #e5e7eb !important;
    font-weight: 500;
}

body[data-theme="dark"] .modal-footer .btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

body[data-theme="dark"] .modal-footer .btn-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

body[data-theme="dark"] .modal-footer .btn-secondary {
    background: #374151;
    color: #e5e7eb;
    border: 1px solid #4b5563;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body[data-theme="dark"] .modal-footer .btn-secondary:hover {
    background: #4b5563;
    color: #f3f4f6;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Área de información del monto en modo oscuro */
body[data-theme="dark"] .bg-blue-50 {
    background-color: rgba(30, 58, 138, 0.2) !important;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

body[data-theme="dark"] .text-blue-700 {
    color: #93c5fd !important;
}

/* Mejorar contraste de textarea en modo oscuro */
body[data-theme="dark"] textarea.form-input {
    background-color: rgba(31, 41, 55, 0.95);
    border-color: #4b5563;
    color: #f3f4f6;
}

body[data-theme="dark"] textarea.form-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Mejorar select en modo oscuro */
body[data-theme="dark"] select.form-input {
    background-color: rgba(31, 41, 55, 0.95);
    border-color: #4b5563;
    color: #f3f4f6;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23e5e7eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

body[data-theme="dark"] select.form-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Mejorar espaciado y apariencia del modal */
.modal-body {
    padding: 0;
}

.modal-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

body[data-theme="dark"] .modal-footer {
    border-top-color: #374151;
}

/* Mejorar el input de fecha en modo oscuro */
body[data-theme="dark"] input[type="date"].form-input {
    background-color: rgba(31, 41, 55, 0.95);
    border-color: #4b5563;
    color: #f3f4f6;
    color-scheme: dark;
}

body[data-theme="dark"] input[type="date"].form-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.8;
}

/* Mejorar el contraste del texto en el área de información */
body[data-theme="dark"] .bg-blue-50 strong {
    color: #bfdbfe !important;
    font-weight: 600;
}

/* Mejorar contraste de etiquetas y textos pequeños en modo oscuro */
body[data-theme="dark"] .text-sm,
body[data-theme="dark"] .text-xs,
body[data-theme="dark"] .form-label,
body[data-theme="dark"] label {
    color: #e2e8f0 !important;
}

/* Mejorar contraste de textos de información secundaria */
body[data-theme="dark"] .text-gray-600,
body[data-theme="dark"] .text-gray-500,
body[data-theme="dark"] .text-gray-400 {
    color: #cbd5e1 !important;
}

/* Mejorar contraste de encabezados de sección */
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4,
body[data-theme="dark"] h5,
body[data-theme="dark"] h6 {
    color: #f1f5f9 !important;
}

/* Mejorar contraste de títulos de módulos */
body[data-theme="dark"] .module-title,
body[data-theme="dark"] .feature-title {
    color: #f1f5f9 !important;
}

/* Mejorar contraste de descripciones */
body[data-theme="dark"] .module-description,
body[data-theme="dark"] .feature-description {
    color: #cbd5e1 !important;
}

/* Animaciones suaves para los botones del modal */
.modal-footer button {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mejorar el overlay del modal en modo oscuro */
body[data-theme="dark"] .modal {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Sombra más pronunciada para el modal en modo oscuro */
body[data-theme="dark"] .modal-content {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Mejorar botón principal de marcar como pagada en modo oscuro */
body[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

body[data-theme="dark"] .btn-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
}

/* Mejorar iconos de acciones en modo oscuro */
body[data-theme="dark"] .icon-btn--success {
    background-color: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

body[data-theme="dark"] .icon-btn--success:hover {
    background-color: rgba(34, 197, 94, 0.25);
    color: #22c55e;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .sidebar {
        width: 60px;
    }
    
    .main-content {
        margin-left: 60px;
    }
    
    .sidebar-item {
        width: 40px;
        height: 40px;
        margin: 2px 4px;
    }
    
    .module-card {
        border-radius: 12px;
    }
    
    .hero-button {
        min-width: 140px;
        padding: 0.625rem 1.5rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 640px) {
    .sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        height: 60px;
        background: linear-gradient(90deg, var(--dark-gray) 0%, #1f2937 100%);
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0 1rem;
    }
    
    .main-content {
        margin-left: 0;
        margin-bottom: 60px;
    }
    
    .sidebar-item {
        width: 40px;
        height: 40px;
        margin: 0;
    }
    
    .hero-button {
        min-width: 120px;
        padding: 0.5rem 1.25rem;
        font-size: 0.8rem;
    }
}

/* ===== DARK MODE SUPPORT ===== */
body[data-theme="dark"] {
    background-color: var(--bg-primary);
}

/* Evitar 'pestañeo' al cargar en dark: color base del html antes de CSS */
html[data-theme="dark"] { background-color: #0b1220; }

/* Transiciones suaves solo después de la primera pintura */
html:not(.no-theme-transition) body,
html:not(.no-theme-transition) .module-card,
html:not(.no-theme-transition) .sidebar,
html:not(.no-theme-transition) .top-bar {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Dark mode handled by CSS variables */

body[data-theme="dark"] .module-card:hover {
    border-color: #60a5fa;
    box-shadow: 0 10px 24px rgba(59,130,246,0.15);
}

/* Texto destacado en tarjetas (números/valores) */
body[data-theme="dark"] .module-card h1,
body[data-theme="dark"] .module-card h2,
body[data-theme="dark"] .module-card h3,
body[data-theme="dark"] .module-card p,
body[data-theme="dark"] .module-card span,
body[data-theme="dark"] .module-card .text-2xl,
body[data-theme="dark"] .module-card .font-bold {
    color: #f9fafb !important;
    text-shadow: 0 0 6px rgba(255,255,255,0.06);
}

/* Subtítulos/meta en tarjetas */
body[data-theme="dark"] .module-card .text-sm,
body[data-theme="dark"] .module-card .text-gray-600 {
    color: #cbd5e1 !important;
}

/* Badges de estados recientes en dark */
body[data-theme="dark"] .bg-gray-50 { background-color: #1f2937 !important; }
body[data-theme="dark"] .bg-gray-800 { background-color: #0f172a !important; }

/* Botones rápidos (new-item) mejor contraste en dark */
body[data-theme="dark"] .module-card.new-item {
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
    color: #e5f2ff;
}

body[data-theme="dark"] .module-card.new-item i,
body[data-theme="dark"] .module-card.new-item h3 { color: #ffffff; }

/* Botón primario contraste en dark */
body[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    color: #ffffff;
}

/* Canvas borde en dark para destacarlo */
body[data-theme="dark"] canvas#salesChart { border: 1px solid #334155; border-radius: 8px; }

body[data-theme="dark"] .form-input {
    background-color: rgba(55,65,81,0.95);
    border-color: #4b5563;
    color: #f3f4f6;
}
body[data-theme="dark"] .form-input:disabled,
body[data-theme="dark"] .form-input[readonly] {
    background-color: rgba(31,41,55,0.9);
    color: #d1d5db;
    border-color: #374151;
}

body[data-theme="dark"] .form-input:focus {
    border-color: var(--secondary-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

body[data-theme="dark"] .invoice-item {
    background: #1f2937;
    border-color: #374151;
}

body[data-theme="dark"] .invoice-item:hover {
    background: #374151;
}

body[data-theme="dark"] .btn-secondary {
    background: #374151;
    color: var(--text-primary);
    border-color: #4b5563;
}

body[data-theme="dark"] .btn-secondary:hover {
    background: #4b5563;
}

/* Dark mode for landing page */
body[data-theme="dark"] .feature-title {
    color: #fbbf24;
}

body[data-theme="dark"] .feature-description {
    color: #fcd34d;
}

body[data-theme="dark"] .hero-button-secondary {
    color: #93c5fd;
    border-color: #93c5fd;
}

body[data-theme="dark"] .hero-button-secondary:hover {
    background: #93c5fd;
    color: #1e293b;
}

/* Acentos de títulos en dark (más brillo) */
body[data-theme="dark"] .accent-title { color: #e5f2ff !important; text-shadow: 0 0 8px rgba(96,165,250,0.25); }

/* Card de Ver reportes en dark */
body[data-theme="dark"] .reports-card { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important; color: #ffffff !important; border: none; }
body[data-theme="dark"] .reports-card:hover { box-shadow: 0 10px 24px rgba(59,130,246,0.3); transform: translateY(-2px); }

/* Monto de facturas recientes en dark */
body[data-theme="dark"] .recent-amount { color: #fef3c7 !important; } /* amber-100 */

/* Dropdown de autocompletado con mejor contraste - now handled by CSS variables */
.autocomplete-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--dropdown-bg) !important; /* Using CSS variable for dropdown background */
    border: 1px solid var(--dropdown-border) !important; /* Using CSS variable for dropdown border */
    border-radius: 0.5rem !important;
    box-shadow: var(--dropdown-shadow) !important; /* Using CSS variable for dropdown shadow */
    z-index: 99999 !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    backdrop-filter: blur(10px) !important;
}

.autocomplete-dropdown.dropdown-up {
    top: auto !important;
    bottom: 100% !important;
}

/* Dropdown específico para productos en tabla - usar position fixed */
[id^="product-results-"] {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

.autocomplete-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-primary);
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover {
    background: var(--dropdown-hover-bg); /* Using CSS variable for hover background */
    color: var(--dropdown-hover-text); /* Using CSS variable for hover text */
}

.autocomplete-item.selected {
    background: var(--primary-blue);
    color: white;
}

.autocomplete-item .item-main {
    flex: 1;
}

.autocomplete-item .item-main .font-medium {
    color: inherit;
}

.autocomplete-item .item-main .text-xs {
    color: inherit;
    opacity: 0.8;
}

.autocomplete-item .item-secondary {
    font-size: 0.875rem;
    opacity: 0.8;
    margin-left: 1rem;
    color: inherit;
}

/* Contenedor relativo para posicionamiento del dropdown */
.autocomplete-container {
    position: relative !important;
    z-index: 1 !important;
}

/* Asegurar que los dropdowns no sean afectados por overflow de cards */
.module-card {
    overflow: visible !important;
}

/* Específico para la tabla de artículos */
.module-card .overflow-x-auto {
    overflow: visible !important;
}

/* Asegurar que las celdas de la tabla no corten los dropdowns */
.module-card table td {
    overflow: visible !important;
}

/* Scrollbar personalizado para el dropdown */
.autocomplete-dropdown::-webkit-scrollbar {
    width: 6px;
}

.autocomplete-dropdown::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}

.autocomplete-dropdown::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--primary-blue);
}

/* Estados de carga y error en dropdowns */
.autocomplete-item .item-main.text-center {
    text-align: center;
    width: 100%;
}

.autocomplete-item .item-main.text-center.text-red-500 {
    color: #ef4444 !important;
}

/* ===== PRINT STYLES ===== */
@media print {
    /* Forzar fondo blanco y texto negro para todos los elementos */
    * {
        background: var(--print-background-color) !important;
        color: var(--print-text-color) !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    body {
        background: var(--print-background-color) !important;
        color: var(--print-text-color) !important;
    }

    .sidebar,
    .top-bar,
    .btn-primary,
    .btn-secondary,
    .add-item-btn,
    .remove-item-btn,
    .hero-button {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0 !important;
        background: var(--print-background-color) !important;
    }
    
    .module-card,
    .max-w-5xl.mx-auto.bg-white.p-8.shadow.print\:shadow-none.print\:p-0 {
        box-shadow: none !important;
        border: 1px solid var(--print-text-color) !important; /* Borde negro para contraste */
        background: var(--print-background-color) !important;
        max-width: 100% !important; /* Asegurar ancho completo en impresión */
        padding: 0.5cm !important; /* Ajustar padding para impresión */
    }

    /* Asegurar que el texto dentro de las tablas sea negro */
    .data-table thead th,
    .data-table tbody td,
    table.min-w-full.text-sm th,
    table.min-w-full.text-sm td {
        color: var(--print-text-color) !important;
        background: var(--print-background-color) !important;
        border-color: #ccc !important; /* Bordes grises claros para las tablas */
        width: auto !important; /* Permitir que las columnas se ajusten */
    }
    table.min-w-full.text-sm {
        table-layout: fixed !important; /* Forzar el diseño de tabla fijo */
        width: 100% !important; /* Asegurar que la tabla ocupe todo el ancho */
    }
    .data-table tbody tr:hover,
    .data-table tbody tr:nth-child(even) {
        background: var(--print-background-color) !important;
    }

    /* Asegurar que los links se vean como texto */
    .table-link {
        color: var(--print-text-color) !important;
        text-decoration: none !important;
    }

    /* Colores para el detalle de factura/cotización */
    .text-gray-600,
    .font-semibold,
    .font-medium,
    .text-sm,
    p,
    span,
    h1,
    h2,
    h3,
    div,
    th,
    td,
    label,
    a {
        color: var(--print-text-color) !important;
        background: var(--print-background-color) !important; /* Asegurar que los fondos de estos elementos también sean blancos */
    }
    
    /* Forzar color para cualquier clase de texto de Tailwind */
    .text-gray-900, .dark\:text-gray-100, .text-gray-700, .text-gray-500, .text-black, .text-white {
        color: var(--print-text-color) !important;
    }

    /* Asegurar bordes visibles para impresión */
    .border-b,
    .border-t,
    .border {
        border-color: #ccc !important;
    }

    /* Esconder elementos que no deben imprimirse */
    .print-hide {
        display: none !important;
    }
} 

/* ===== SIDEBAR REFINEMENTS ===== */
/* Expanded default */
.sidebar { 
    width: var(--sidebar-expanded); 
    transition: width 0.3s ease;
}
.main-content { 
    margin-left: var(--sidebar-expanded); 
    transition: margin-left 0.3s ease;
}
.topbar-inner { 
    padding-left: 0; 
    transition: padding 0.25s ease; 
}

/* Overlay oculto por defecto */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(1px); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 40; }
body.sidebar-open .overlay { opacity: 1; pointer-events: auto; }

/* Botón menú móvil oculto en escritorio */
.mobile-menu-btn { display: none; background: rgba(0,0,0,0.08); padding: 8px 10px; border-radius: 8px; }
.mobile-menu-btn i { color: #1f2937; }
body[data-theme="dark"] .mobile-menu-btn { background: rgba(255,255,255,0.12); }
body[data-theme="dark"] .mobile-menu-btn i { color: #e5e7eb; }

.sidebar .sidebar-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: calc(100% - 16px);
  height: 44px;
  margin: 4px 8px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--sidebar-text); /* Using CSS variable for better maintainability */
  text-decoration: none;
}
/* Removed duplicate rule - now handled by CSS variables */
.sidebar .sidebar-item i { width: 24px; text-align: center; }
.sidebar .sidebar-item .label { display: inline-block; font-size: 0.9rem; white-space: nowrap; }
.sidebar .sidebar-item:hover { 
  background: var(--sidebar-hover-bg); /* Using CSS variable for hover background */
  transform: none; 
  color: var(--sidebar-hover-text); /* Using CSS variable for hover text */
  box-shadow: 0 2px 8px rgba(59,130,246,0.2);
}
.sidebar .sidebar-item.active { 
  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--secondary-blue) 100%); 
  color: var(--sidebar-active-text); /* Using CSS variable for active text */
  box-shadow: 0 4px 12px rgba(59,130,246,0.35); 
}
.sidebar .sidebar-item.active:hover { 
  transform: none; 
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%); /* Slightly darker blue on hover */
  box-shadow: 0 6px 16px rgba(59,130,246,0.4);
}

/* Collapsed state */
body.sidebar-collapsed .sidebar { 
    width: var(--sidebar-collapsed); 
    transition: width 0.3s ease;
}
body.sidebar-collapsed .main-content { 
    margin-left: var(--sidebar-collapsed); 
    transition: margin-left 0.3s ease;
}
body.sidebar-collapsed .topbar-inner { 
    padding-left: 0; 
    transition: padding 0.25s ease;
}
body.sidebar-collapsed .sidebar .label { 
    display: none; 
    transition: opacity 0.2s ease;
}
body.sidebar-collapsed .sidebar .sidebar-item { 
    width: 48px; 
    height: 48px; 
    padding: 0; 
    justify-content: center; 
    transition: all 0.3s ease;
}
body.sidebar-collapsed .sidebar .sidebar-item i { 
    width: auto; 
}
body.sidebar-collapsed .sidebar .brand { 
    display: none; 
    transition: opacity 0.2s ease;
}

/* Optimización de espacio cuando sidebar está colapsado */
body.sidebar-collapsed .main-content {
    max-width: none;
}

body.sidebar-collapsed .main-content .p-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Contenedores más anchos cuando sidebar está colapsado */
body.sidebar-collapsed .table-card,
body.sidebar-collapsed .bg-white.dark\\:bg-gray-800.rounded-lg {
    max-width: none;
}

/* Filtros más compactos en sidebar colapsado */
body.sidebar-collapsed .space-y-3 .flex.flex-wrap.items-end.gap-3 > div {
    min-width: auto;
}

body.sidebar-collapsed .min-w-64 {
    min-width: 200px;
}

body.sidebar-collapsed .min-w-32 {
    min-width: 120px;
}

body.sidebar-collapsed .min-w-28 {
    min-width: 110px;
}

/* Solo aplicar estas reglas en móvil (cuando el sidebar se oculta) */
@media (max-width: 768px) {
    /* Asegurar que el main-content ocupe todo el ancho cuando el sidebar no está visible */
    body:not(.sidebar-open) .main-content {
        margin-left: 0 !important;
    }

    body:not(.sidebar-open) .top-bar {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Forzar que el sidebar esté completamente oculto cuando no está abierto */
    body:not(.sidebar-open) .sidebar {
        left: -100% !important;
        width: 0 !important;
        overflow: hidden !important;
    }

    /* Asegurar que cuando el sidebar está oculto, no deje espacio en blanco */
    body:not(.sidebar-open) .main-content,
    body:not(.sidebar-open) .top-bar {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Forzar que el contenido ocupe todo el ancho cuando el sidebar está oculto */
    body:not(.sidebar-open) .main-content > * {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Asegurar que las tarjetas y contenedores se expandan completamente */
    body:not(.sidebar-open) .max-w-7xl,
    body:not(.sidebar-open) .max-w-6xl,
    body:not(.sidebar-open) .max-w-5xl,
    body:not(.sidebar-open) .max-w-4xl {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Asegurar que el sidebar esté siempre visible en desktop */
@media (min-width: 769px) {
    .sidebar {
        z-index: 70 !important;
        left: 0 !important;
        display: block !important;
        position: fixed !important;
        width: var(--sidebar-expanded);
        transition: width 0.3s ease;
    }
    
    .top-bar {
        z-index: 65 !important;
    }
    
    /* Asegurar que el contenido se ajuste correctamente */
    .main-content {
        transition: margin-left 0.3s ease !important;
        margin-left: var(--sidebar-expanded);
    }
    
    /* Estado expandido por defecto en desktop */
    .sidebar:not(.sidebar-collapsed) {
        width: var(--sidebar-expanded) !important;
    }
    
    .main-content:not(.sidebar-collapsed) {
        margin-left: var(--sidebar-expanded) !important;
    }
    
    /* En desktop, el sidebar siempre está visible (expandido o colapsado) */
}

/* En desktop, cuando sidebar está colapsado, mantener el margen mínimo */
@media (min-width: 769px) {
    body.sidebar-collapsed .sidebar {
        width: var(--sidebar-collapsed) !important;
    }
    
    body.sidebar-collapsed .main-content {
        margin-left: var(--sidebar-collapsed) !important;
    }
    
    body.sidebar-collapsed .top-bar {
        margin-left: var(--sidebar-collapsed) !important;
        width: calc(100% - var(--sidebar-collapsed)) !important;
    }
    
    /* Forzar estado expandido cuando no está colapsado */
    body:not(.sidebar-collapsed) .sidebar {
        width: var(--sidebar-expanded) !important;
    }
    
    body:not(.sidebar-collapsed) .main-content {
        margin-left: var(--sidebar-expanded) !important;
    }
    
    body:not(.sidebar-collapsed) .top-bar {
        margin-left: var(--sidebar-expanded) !important;
        width: calc(100% - var(--sidebar-expanded)) !important;
    }
}

/* Responsive filters improvements */
@media (max-width: 1200px) {
    /* Ajustar filtros en pantallas medianas */
    .min-w-64 {
        min-width: 200px;
    }
    
    .w-40.min-w-32 {
        width: 140px;
        min-width: 120px;
    }
    
    .w-36.min-w-28 {
        width: 130px;
        min-width: 110px;
    }
}

@media (max-width: 768px) {
    /* Filtros apilados en móvil */
    .space-y-3 .flex.flex-wrap.items-end.gap-3 {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .space-y-3 .flex.flex-wrap.items-end.gap-3 > div {
        width: 100% !important;
        min-width: 100% !important;
    }
    
    /* Botones en móvil */
    .flex.flex-wrap.items-center.justify-between.gap-3 {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .flex.flex-wrap.gap-2 {
        justify-content: center;
    }
    
    .text-sm.text-gray-600 {
        text-align: center;
    }
}

@media (max-width: 640px) {
    /* Filtros ultra compactos en móviles pequeños */
    .bg-white.dark\\:bg-gray-800.rounded-lg.shadow-sm.p-4 {
        padding: 1rem;
    }
    
    .btn-primary.btn-size-sm,
    .btn-secondary.btn-size-sm {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}

/* Invoice filters container styling */
.invoice-filters-container {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.invoice-filters-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-blue) 0%, var(--secondary-blue) 100%);
}

/* Dark mode for filters container */
body[data-theme="dark"] .invoice-filters-container {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-color: #334155;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}

body[data-theme="dark"] .invoice-filters-container::before {
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
}

/* Responsive header buttons improvements */
@media (max-width: 1023px) {
    /* Botones del encabezado más compactos en tablet/móvil */
    .btn-size-md {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Mejorar espaciado del encabezado */
    .page-title {
        font-size: 1.75rem;
        margin-bottom: 0.25rem;
    }
    
    .page-subtitle {
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 767px) {
    /* En móvil, botones ocupan ancho completo */
    .flex.flex-wrap.gap-2.lg\\:flex-nowrap {
        gap: 0.75rem;
    }
    
    .flex-1.lg\\:flex-none {
        min-height: 44px; /* Altura mínima para mejor toque */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Título más compacto en móvil */
    .page-title {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    .page-subtitle {
        font-size: 0.8rem;
        opacity: 0.8;
    }
    
    /* Padding del contenedor principal más compacto */
    .space-y-6 {
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    /* Botones apilados verticalmente en pantallas muy pequeñas */
    .flex.flex-wrap.gap-2.lg\\:flex-nowrap {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .btn-size-md {
        padding: 0.75rem 1rem;
        width: 100%;
        justify-content: center;
    }
}
/* Alinear header y botón en colapsado */
.sidebar-header { padding-left: 8px; padding-right: 8px; }
.sidebar-header .brand { margin-left: 8px; }
/* Asegurar misma guía x (8px) para el primer elemento en ambos estados */
.sidebar .sidebar-item:first-child { margin-left: 8px; }
body.sidebar-collapsed .sidebar .sidebar-item { margin-left: 8px; }
.sidebar-toggle-btn { 
  width: 48px; 
  height: 48px; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: 12px; 
  background: transparent; 
  color: var(--sidebar-text); /* Using CSS variable for better maintainability */
  transition: all .2s; 
  margin: 4px 8px; 
  border: none; 
}
/* Removed duplicate rule - now handled by CSS variables */
.sidebar-toggle-btn:hover { 
  background: var(--sidebar-hover-bg); /* Using CSS variable for hover background */
  color: var(--sidebar-hover-text); /* Using CSS variable for hover text */
  transform: none; 
  box-shadow: 0 2px 8px rgba(59,130,246,0.2);
}
body.sidebar-collapsed .sidebar-header { justify-content: flex-start; padding-left: 0; padding-right: 0; }

@media (max-width: 1024px) {
  .sidebar { width: var(--sidebar-collapsed); }
  .main-content { margin-left: var(--sidebar-collapsed); }
  .topbar-inner { padding-left: 0; }
  .top-bar { margin-left: var(--sidebar-collapsed); width: calc(100% - var(--sidebar-collapsed)); }
  .sidebar .label { display: none; }
  .sidebar .sidebar-item { width: 48px; height: 48px; padding: 0; justify-content: center; }
  .sidebar .brand { display: none; }
} 

/* Brand icon contrast for light/dark */
.brand-logo { background: #1f2937; color: #ffffff; }
body[data-theme="dark"] .brand-logo { background: #e5e7eb; color: #1e40af; }

/* Brand text color for dark mode */
body[data-theme="dark"] .brand .label { color: #ffffff; }

/* Auto-collapse behaviour */
@media (max-width: 768px) {
  html, body { min-width: 360px; }
  .sidebar { width: var(--sidebar-mobile); position: fixed; left: -100%; top: 0; bottom: 0; z-index: 50; transition: left .2s ease; }
  body.sidebar-open .sidebar { left: 0; }
  .main-content { margin-left: 0 !important; }
  .topbar-inner { padding-left: 0; }
  .top-bar { margin-left: 0 !important; width: 100% !important; }
  .sidebar .label { display: none; }
  /* Ocultar bloque de periodo de prueba en top bar */
  .top-bar .bg-white.bg-opacity-20 { display: none; }
  /* Ocultar nombre del usuario, dejar solo icono */
  .top-bar .relative > button .w-8.h-8 + span { display: none; }
  /* Top bar compacto en móvil: mantener una sola fila */
  .top-bar .flex.justify-between { flex-direction: row; align-items: center; gap: 8px; }
  .mobile-menu-btn { display: inline-flex; }
}

/* Expand/collapse threshold helpers */
/* Removed conflicting rule that was forcing collapsed state */

/* Icon actions (tabla) */
.icon-actions { display: inline-flex; align-items: center; gap: 0.5rem; justify-content: center; }
.icon-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--border-color); background: #ffffff; color: #374151; transition: all .2s; }
.icon-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.icon-btn--edit { color: #2563eb; border-color: #93c5fd; background: #eff6ff; }
.icon-btn--edit:hover { background: #dbeafe; }
.icon-btn--delete { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
.icon-btn--delete:hover { background: #fee2e2; }

body[data-theme="dark"] .icon-btn { background: #0b1220; border-color: #334155; color: #e5e7eb; }
body[data-theme="dark"] .icon-btn--edit { color: #93c5fd; border-color: #1d4ed8; background: #0b2a5b; }
body[data-theme="dark"] .icon-btn--edit:hover { background: #0f3a7a; }
body[data-theme="dark"] .icon-btn--delete { color: #fca5a5; border-color: #7f1d1d; background: #2b0b0b; }
body[data-theme="dark"] .icon-btn--delete:hover { background: #3f0f0f; } 

/* Mejorar visibilidad de placeholders en ambos temas */
.form-input::placeholder {
    color: #64748b;
    opacity: 1;
}

body[data-theme="dark"] .form-input::placeholder {
    color: #cbd5e1;
    opacity: 0.9;
} 

/* Estilos para NCF preview en modo oscuro */
body[data-theme="dark"] .ncf-preview-text {
    color: #f3f4f6 !important;
    background-color: rgba(31, 41, 55, 0.9) !important;
    border: 1px solid #4b5563 !important;
    padding: 0.5rem !important;
    border-radius: 0.375rem !important;
}

body[data-theme="dark"] .ncf-preview-badge {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
    border: 1px solid #3b82f6 !important;
}

body[data-theme="dark"] .ncf-preview-badge.remaining {
    background-color: rgba(107, 114, 128, 0.2) !important;
    color: #d1d5db !important;
    border: 1px solid #6b7280 !important;
}

body[data-theme="dark"] .ncf-preview-badge.expiration {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
    border: 1px solid #f59e0b !important;
}

/* Estilos para modo claro */
.ncf-preview-text {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 0.5rem;
    border-radius: 0.375rem;
}

.ncf-preview-badge {
    background-color: #dbeafe;
    color: #1e40af;
    border: 1px solid #3b82f6;
}

.ncf-preview-badge.remaining {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #6b7280;
}

.ncf-preview-badge.expiration {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
}

/* ===== INVOICE PDF STYLES ===== */
/* PDF Page Settings */
@page {
    size: A4;
    margin: 2cm;
}

/* PDF Base Styles */
body { 
    font-family: Arial, sans-serif; 
    line-height: 1.4; 
    color: #333; 
    font-size: 12px;
    margin: 0;
    padding: 20px;
    background-color: #f5f5f5;
}

/* PDF Page Container */
.pdf-page-container {
    max-width: 21cm;
    min-height: 29.7cm;
    margin: 0 auto;
    background: white;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

/* PDF Print Actions */
.pdf-print-actions { 
    position: fixed; 
    top: 20px; 
    right: 20px; 
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.pdf-btn { 
    padding: 10px 20px; 
    margin-left: 10px; 
    border: none; 
    border-radius: 6px; 
    cursor: pointer; 
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
}

.pdf-btn-primary { 
    background: #ffffff; 
    color: var(--primary-blue, #1e40af); 
    border: 2px solid var(--primary-blue, #1e40af);
}

.pdf-btn-secondary { 
    background: #ffffff; 
    color: #4a5568; 
    border: 2px solid #4a5568;
}

.pdf-btn:hover { 
    opacity: 0.9; 
}

/* PDF Header */
.pdf-header {
    color: white;
    padding: 20px;
    margin-bottom: 0;
    background-color: #dc3545;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.pdf-header-table {
    width: 100%;
    border-collapse: collapse;
}

.pdf-header-table td {
    vertical-align: top;
    padding: 5px;
}

.pdf-header-left {
    width: 70%;
    vertical-align: top;
    padding-right: 20px;
}

.pdf-header-right {
    width: 30%;
    text-align: right;
    vertical-align: top;
    padding-left: 20px;
}

/* Mejoras para alineación del header */
.pdf-company-info {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    min-height: 120px;
}

.pdf-company-details {
    flex: 1;
}

.pdf-invoice-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    min-height: 120px;
}

.pdf-invoice-details {
    margin-top: 10px;
}

/* Asegurar que el header tenga altura mínima consistente */
.pdf-header-table tr {
    height: 120px;
}

.pdf-header-table td {
    vertical-align: top;
    padding: 10px;
}

.pdf-company-logo {
    max-height: 60px;
    margin-bottom: 10px;
}

.pdf-header h1 {
    font-size: 24px;
    margin: 0 0 10px 0;
}

.pdf-header h2 {
    font-size: 20px;
    margin: 0 0 10px 0;
}

.pdf-header p {
    margin: 2px 0;
    font-size: 12px;
}

/* PDF Buttons */
.pdf-btn {
    background-color: #2c3e50 !important;
    color: white !important;
    border: 2px solid #2c3e50 !important;
    font-weight: bold !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin: 5px !important;
    transition: all 0.3s ease !important;
}

.pdf-btn:hover {
    background-color: #34495e !important;
    border-color: #34495e !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(44, 62, 80, 0.3) !important;
}

.pdf-btn-secondary {
    background-color: #34495e !important;
    border-color: #34495e !important;
}

.pdf-btn-secondary:hover {
    background-color: #2c3e50 !important;
    border-color: #2c3e50 !important;
}

/* PDF Content */
.pdf-customer-section {
    margin-bottom: 20px;
}

.pdf-customer-section h3 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.pdf-customer-info {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #007bff;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: start;
}

.pdf-customer-info p {
    margin: 8px 0;
    font-size: 14px;
    line-height: 1.4;
}

/* Agrupar información del cliente en columnas */
.pdf-customer-info .customer-main {
    grid-column: 1 / -1;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
}

.pdf-customer-info .customer-details {
    display: contents;
}

.pdf-terms-section {
    margin-top: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #28a745;
}

.pdf-terms-section h3 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.pdf-terms-section p {
    margin: 5px 0;
    font-size: 14px;
    line-height: 1.5;
}

/* Contenedor de tabla mejorado */
.pdf-table-container {
    margin: 25px 0;
    overflow-x: auto;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.pdf-items {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    table-layout: auto;
}

.pdf-items th,
.pdf-items td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.pdf-items th {
    background-color: #2c3e50 !important;
    color: white !important;
    font-weight: bold !important;
    text-align: center !important;
    font-size: 14px;
    white-space: nowrap;
    padding: 15px 10px !important;
}

.pdf-items td {
    vertical-align: top;
}

.pdf-item-description {
    max-width: 300px;
    word-wrap: break-word;
    text-align: left;
    font-weight: 500;
}

/* Estilos para datos monetarios */
.pdf-items td:nth-child(3),
.pdf-items td:nth-child(5) {
    font-family: 'Courier New', monospace;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Mejorar la visualización de cantidades */
.pdf-items td:nth-child(2) {
    font-family: 'Courier New', monospace;
    font-weight: 500;
}

/* Mejorar la visualización de porcentajes */
.pdf-items td:nth-child(4) {
    font-weight: 500;
}

/* Ajuste automático de celdas */
.pdf-items td,
.pdf-items th {
    width: auto;
}

/* Columna de descripción más flexible */
.pdf-items td:first-child {
    width: auto;
    max-width: 300px;
}

.pdf-items .center {
    text-align: center;
}

.pdf-items .right {
    text-align: right;
}

/* Ajustar ancho de columnas - Adaptativo al contenido */
.pdf-items-desc {
    width: auto;
    min-width: 200px;
    max-width: none;
}

.pdf-items-qty {
    width: auto;
    min-width: 60px;
    text-align: center !important;
    white-space: nowrap;
}

.pdf-items-price {
    width: auto;
    min-width: 100px;
    text-align: right !important;
    white-space: nowrap;
}

.pdf-items-disc {
    width: auto;
    min-width: 60px;
    text-align: center !important;
    white-space: nowrap;
}

.pdf-items-total {
    width: auto;
    min-width: 120px;
    text-align: right !important;
    white-space: nowrap;
}

/* Reglas específicas para cada tipo de celda */
.pdf-items td:first-child,
.pdf-items th:first-child {
    text-align: left !important;
    padding-left: 15px;
}

.pdf-items td:nth-child(2),
.pdf-items th:nth-child(2) {
    text-align: center !important;
}

.pdf-items td:nth-child(3),
.pdf-items th:nth-child(3) {
    text-align: right !important;
    padding-right: 15px;
}

.pdf-items td:nth-child(4),
.pdf-items th:nth-child(4) {
    text-align: center !important;
}

.pdf-items td:nth-child(5),
.pdf-items th:nth-child(5) {
    text-align: right !important;
    padding-right: 15px;
    font-weight: 600;
}
.pdf-content {
    padding: 0 30px 30px 30px;
}

/* Mejoras para la sección de totales */
.pdf-totals {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.pdf-totals-box {
    width: 280px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-left: 3px solid #007bff;
    padding: 18px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.pdf-total-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}

.pdf-total-line span:last-child {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.pdf-total-line.final {
    border-top: 2px solid #007bff;
    padding-top: 10px;
    margin-top: 10px;
    font-weight: bold;
    font-size: 16px;
}

.pdf-section {
    margin-bottom: 25px;
}

.pdf-section-table {
    width: 100%;
    border-collapse: collapse;
}

.pdf-section-table td {
    vertical-align: top;
    padding: 10px;
    width: 50%;
}

.pdf-section h3 {
    font-size: 14px;
    margin: 0 0 10px 0;
    color: #4a5568;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 5px;
}

.pdf-section p {
    margin: 3px 0;
    font-size: 12px;
}

/* PDF Items Table */
.pdf-items {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.pdf-items th {
    color: white;
    padding: 10px;
    text-align: left;
    font-size: 11px;
    border: 1px solid #ddd;
}

.pdf-items td {
    padding: 8px;
    border: 1px solid #ddd;
    font-size: 11px;
}

.pdf-items .right {
    text-align: right;
}

.pdf-items .center {
    text-align: center;
}

.pdf-items tr:nth-child(even) {
    background-color: #f8f9fa;
}

.pdf-no-items {
    color: #999;
}

.pdf-items-desc {
    width: 50%;
}

.pdf-items-qty {
    width: 10%;
}

.pdf-items-price {
    width: 15%;
}

.pdf-items-disc {
    width: 10%;
}

.pdf-items-total {
    width: 15%;
}

/* PDF Totals */
.pdf-totals {
    margin: 20px 0;
    text-align: right;
}

.pdf-totals-box {
    display: inline-block;
    background-color: #f8f9fa;
    padding: 15px;
    min-width: 250px;
}

.pdf-total-line {
    margin: 5px 0;
    font-size: 12px;
}

.pdf-total-line.final {
    font-size: 16px;
    font-weight: bold;
    border-top: 2px solid #cbd5e0;
    padding-top: 8px;
    margin-top: 8px;
}

/* PDF Notes */
.pdf-notes {
    background-color: #f8f9fa;
    padding: 15px;
    margin: 20px 0;
}

.pdf-notes h3 {
    font-size: 14px;
    margin: 0 0 8px 0;
}

/* PDF Signature Section */
.pdf-signature-section {
    margin-top: 60px;
    margin-bottom: 40px;
}

.pdf-signature-table {
    width: 100%;
    border-collapse: collapse;
}

.pdf-signature-table td {
    width: 50%;
    text-align: center;
    vertical-align: top;
    padding: 30px 20px;
    border-top: 1px solid #e2e8f0;
}

.pdf-signature-box {
    min-height: 120px;
    text-align: center;
    padding-top: 20px;
}

.pdf-signature-image, .pdf-stamp-image {
    max-width: 120px;
    max-height: 60px;
    margin-bottom: 2px; /* Reducido de 5px a 2px */
}

.pdf-signature-line {
    border-top: 1px solid #333;
    width: 180px;
    margin: 5px auto 5px auto; /* Reducido de 15px a 5px */
    padding-top: 5px;
    font-size: 10px;
    color: #666;
}

/* PDF QR Section */
.pdf-qr-section {
    text-align: center;
    margin: 30px 0 20px 0;
}

.pdf-qr-code {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border: 1px solid #e2e8f0;
    display: inline-block;
}

/* PDF Bottom Group */
.pdf-bottom-group {
    margin-top: 40px;
}

/* PDF Footer - DISABLED - Using newer version below */

/* PDF Status Badges */
.pdf-status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.pdf-status-sent { background: #bee3f8; color: #2b6cb0; }
.pdf-status-paid { background: #c6f6d5; color: #2f855a; }
.pdf-status-draft { background: #fed7d7; color: #c53030; }
.pdf-status-overdue { background: #fbb6ce; color: #b83280; }

/* PDF Print Styles */
@media print {
    .pdf-print-actions { display: none !important; }
    
    body { 
        background: white !important; 
        padding: 0 !important;
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
    
    .pdf-page-container { 
        box-shadow: none !important; 
        border-radius: 0 !important;
        max-width: none !important;
        min-height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    /* Optimización de espacios para impresión */
    .pdf-header {
        padding: 15px !important;
        margin-bottom: 10px !important;
        page-break-inside: avoid;
    }
    
    .pdf-content {
        padding: 0 15px !important;
    }
    
    .pdf-section {
        margin-bottom: 15px !important;
        page-break-inside: avoid;
    }
    
    .pdf-items {
        margin: 15px 0 !important;
        page-break-inside: auto;
    }
    
    .pdf-items thead {
        page-break-inside: avoid;
        page-break-after: avoid;
    }
    
    .pdf-items tbody tr {
        page-break-inside: avoid;
    }
    
    .pdf-totals {
        margin: 15px 0 !important;
        page-break-inside: avoid;
    }
    
    .pdf-notes {
        margin: 15px 0 !important;
        page-break-inside: avoid;
    }
    
    /* Firmas, sello y QR siempre en la última página */
    .pdf-signature-section {
        margin-top: 30px !important;
        margin-bottom: 20px !important;
        page-break-inside: avoid;
        page-break-before: auto;
    }
    
    .pdf-qr-section {
        margin: 20px 0 !important;
        page-break-inside: avoid;
        page-break-before: avoid;
    }
    
    .pdf-footer {
        margin-top: 10px !important;
        padding: 10px 15px !important;
        page-break-inside: avoid;
        page-break-before: avoid;
    }
    
    /* Evitar que elementos se corten */
    .pdf-signature-section,
    .pdf-qr-section,
    .pdf-footer {
        break-inside: avoid;
        -webkit-break-inside: avoid;
    }
    
    /* Grupo de elementos del pie - siempre juntos */
    .pdf-bottom-group {
        page-break-inside: avoid;
        break-inside: avoid;
        -webkit-break-inside: avoid;
        page-break-before: auto;
    }
    
    /* Reducir espacios en tablas para ahorrar espacio */
    .pdf-items th,
    .pdf-items td {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }
    
    .pdf-header h1 {
        font-size: 20px !important;
        margin: 0 0 8px 0 !important;
    }
    
    .pdf-header h2 {
        font-size: 18px !important;
        margin: 0 0 8px 0 !important;
    }
    
    .pdf-header p {
        margin: 1px 0 !important;
        font-size: 11px !important;
    }
    
    .pdf-section h3 {
        font-size: 13px !important;
        margin: 0 0 8px 0 !important;
    }
    
    .pdf-section p {
        margin: 2px 0 !important;
        font-size: 11px !important;
    }
}

/* PDF Mode Styles - DISABLED - Causing conflicts with new layout */

/* /* .pdf-mode body - DISABLED - Using base styles */

/* PDF Mode - ELIMINADO - Usando template dedicado con estilos inline */

/* .pdf-mode .pdf-page-container - DISABLED - Using base styles */

/* .pdf-mode .pdf-header - ELIMINADO */

/* .pdf-mode .pdf-header h1 - ELIMINADO */

/* .pdf-mode .pdf-header h2 - ELIMINADO */

/* .pdf-mode .pdf-header p - ELIMINADO */

/* .pdf-mode .pdf-content - ELIMINADO */

/* .pdf-mode .pdf-section h3 - ELIMINADO */

/* .pdf-mode .pdf-customer-info,
/* .pdf-mode .pdf-terms-section - ELIMINADO */

/* .pdf-mode .pdf-table-container - ELIMINADO */

/* .pdf-mode .pdf-items - ELIMINADO */

/* .pdf-mode .pdf-items th - ELIMINADO */

/* .pdf-mode .pdf-items td - ELIMINADO */

/* .pdf-mode .pdf-totals - ELIMINADO */

/* .pdf-mode .pdf-totals-box - ELIMINADO */

/* .pdf-mode .pdf-total-line - ELIMINADO */

/* .pdf-mode .pdf-total-line.final - ELIMINADO */

/* .pdf-mode .pdf-signature-section,
.pdf-mode .pdf-qr-section,
/* .pdf-mode .pdf-footer - ELIMINADO */

/* .pdf-mode .pdf-signature-table td - ELIMINADO */

/* .pdf-mode .pdf-signature-image,
/* .pdf-mode .pdf-stamp-image - ELIMINADO */

/* .pdf-mode .pdf-qr-code - ELIMINADO */

/* .pdf-mode .pdf-bottom-group - ELIMINADO */

/* .pdf-mode h3 - ELIMINADO */

/* .pdf-mode p - ELIMINADO */

/* .pdf-mode .pdf-header-table - ELIMINADO */

/* .pdf-mode .pdf-header-table td - ELIMINADO */

/* .pdf-mode .pdf-items td:nth-child(2),
.pdf-mode .pdf-items td:nth-child(3),
/* .pdf-mode .pdf-items td:nth-child(5) - ELIMINADO */

/* .pdf-mode .pdf-customer-info p - ELIMINADO */

/* .pdf-mode .pdf-customer-info p:first-child - ELIMINADO */

/* .pdf-mode .pdf-items th,
.pdf-mode .pdf-items td - ELIMINADO */

/* /* .pdf-mode .pdf-footer - DISABLED - Using base .pdf-footer instead */

/* .pdf-mode .pdf-signature-section - ELIMINADO */

/* .pdf-mode .pdf-signature-line - ELIMINADO */

/* No comprimir items en PDF */
/* .pdf-mode .pdf-items tbody tr td - ELIMINADO */

/* Estilos específicos solo para impresión (Ctrl+P) - Optimizado para una página */
@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    @page {
        size: A4;
        margin: 0.5in !important;
    }
    
    body {
        background: white !important;
        color: black !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }
    
    .pdf-page-container {
        box-shadow: none !important;
        border-radius: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    .pdf-header {
        color: white !important;
        padding: 10px !important;
        margin-bottom: 10px !important;
        font-size: 11px !important;
    }
    
    .pdf-header h1 {
        font-size: 18px !important;
        margin: 0 0 5px 0 !important;
    }
    
    .pdf-header h2 {
        font-size: 16px !important;
        margin: 0 0 5px 0 !important;
    }
    
    .pdf-header p {
        margin: 1px 0 !important;
        font-size: 10px !important;
    }
    
    .pdf-content {
        padding: 10px !important;
        font-size: 11px !important;
    }
    
    .pdf-section h3 {
        font-size: 14px !important;
        margin: 5px 0 !important;
    }
    
    .pdf-customer-info,
    .pdf-terms-section {
        background-color: #f8f9fa !important;
        border-left: 2px solid #007bff !important;
        padding: 6px !important;
        margin: 5px 0 !important;
        font-size: 10px !important;
        border-radius: 4px !important;
    }
    
    .pdf-table-container {
        margin: 10px 0 !important;
    }
    
    .pdf-items {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 10px !important;
    }
    
    .pdf-items th {
        background-color: #2c3e50 !important;
        color: white !important;
        padding: 6px 4px !important;
        font-size: 10px !important;
        font-weight: bold !important;
    }
    
    .pdf-items td {
        padding: 4px !important;
        border: 1px solid #ddd !important;
        font-size: 10px !important;
        vertical-align: top !important;
    }
    
    .pdf-totals {
        margin-top: 10px !important;
        display: flex !important;
        justify-content: flex-end !important;
    }
    
    .pdf-totals-box {
        width: 180px !important;
        background-color: #f8f9fa !important;
        border: 1px solid #dee2e6 !important;
        border-left: 2px solid #007bff !important;
        padding: 6px !important;
        font-size: 10px !important;
        border-radius: 4px !important;
    }
    
    .pdf-total-line {
        margin-bottom: 2px !important;
        font-size: 9px !important;
        padding: 1px 0 !important;
    }
    
    .pdf-total-line.final {
        border-top: 1px solid #007bff !important;
        padding-top: 2px !important;
        margin-top: 3px !important;
        font-weight: bold !important;
        font-size: 10px !important;
    }
    
    .pdf-signature-section,
    .pdf-qr-section,
    .pdf-footer {
        margin-top: 10px !important;
        font-size: 9px !important;
        page-break-inside: avoid !important;
    }
    
    .pdf-signature-table td {
        padding: 5px !important;
        text-align: center !important;
    }
    
    .pdf-signature-image,
    .pdf-stamp-image {
        max-height: 30px !important;
        max-width: 60px !important;
    }
    
    .pdf-qr-code {
        max-width: 60px !important;
        max-height: 60px !important;
    }
    
    .pdf-print-actions {
        display: none !important;
    }
    
    /* Forzar que todo quepa en una página */
    .pdf-bottom-group {
        margin-top: 5px !important;
    }
    
    /* Reducir espaciado entre elementos */
    h3 {
        margin: 5px 0 3px 0 !important;
    }
    
    p {
        margin: 2px 0 !important;
    }
    
    /* Optimizaciones adicionales para que quepa en una página */
    .pdf-header-table {
        margin-bottom: 5px !important;
    }
    
    .pdf-header-table td {
        padding: 3px !important;
        vertical-align: top !important;
    }
    
    /* Hacer que las fuentes monospace sean más compactas */
    .pdf-items td:nth-child(2),
    .pdf-items td:nth-child(3),
    .pdf-items td:nth-child(5) {
        font-family: 'Courier New', monospace !important;
        font-size: 9px !important;
        letter-spacing: -0.2px !important;
    }
    
    /* Compactar la información del cliente */
    .pdf-customer-info p {
        margin: 0px 0 1px 0 !important;
        font-size: 9px !important;
        line-height: 1.0 !important;
    }
    
    .pdf-customer-info p:first-child {
        font-size: 10px !important;
        font-weight: bold !important;
        margin-bottom: 2px !important;
    }
    
    /* Ajustar el espaciado de la tabla */
    .pdf-items th,
    .pdf-items td {
        line-height: 1.1 !important;
    }
    
    /* Reducir altura del footer */
    .pdf-footer {
        font-size: 8px !important;
        margin-top: 5px !important;
        padding: 3px 0 !important;
    }
    
    /* Compactar las firmas y QR */
    .pdf-signature-section {
        margin-top: 5px !important;
    }
    
    .pdf-signature-line {
        font-size: 8px !important;
        margin-top: 2px !important;
    }
    
    /* Evitar saltos de página innecesarios */
    .pdf-section,
    .pdf-table-container,
    .pdf-totals {
        page-break-inside: avoid !important;
    }
    
    /* Si hay muchos items, reducir más el espaciado */
    .pdf-items tbody tr:nth-child(n+5) td {
        padding: 2px !important;
        font-size: 9px !important;
    }
}

/* Estilos para impresión - Solo para print view */
@media print {
    .pdf-header {
        color: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* Forzar el color del header si no está definido */
    .pdf-header:not([style*="background-color"]) {
        background-color: #dc3545 !important;
    }
    
    /* Estilos para el badge de estado */
    .pdf-status {
        background-color: #28a745 !important;
        color: white !important;
        padding: 4px 8px !important;
        border-radius: 4px !important;
        font-size: 12px !important;
        font-weight: bold !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    .pdf-status-pending {
        background-color: #ffc107 !important;
        color: #000 !important;
    }
    
    .pdf-status-paid {
        background-color: #28a745 !important;
        color: white !important;
    }
    
    .pdf-status-sent {
        background-color: #17a2b8 !important;
        color: white !important;
    }
    
    .pdf-items th {
        background-color: #2c3e50 !important;
        color: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    .pdf-customer-info,
    .pdf-terms-section,
    .pdf-totals-box {
        background-color: #f8f9fa !important;
        border-left: 4px solid #007bff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    .pdf-print-actions {
        display: none !important;
    }
    
    .pdf-page-container {
        box-shadow: none !important;
        border-radius: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* Asegurar que las fuentes monospace se mantengan */
    .pdf-items td:nth-child(2),
    .pdf-items td:nth-child(3),
    .pdf-items td:nth-child(5) {
        font-family: 'Courier New', monospace !important;
    }
    
    /* Asegurar que la tabla mantenga su estructura */
    .pdf-items {
        width: 100% !important;
        border-collapse: collapse !important;
        table-layout: auto !important;
    }
    
    .pdf-items td,
    .pdf-items th {
        border: 1px solid #ddd !important;
        padding: 12px 10px !important;
        vertical-align: middle !important;
    }
    
    /* Asegurar que los totales se vean correctamente */
    .pdf-totals {
        margin-top: 25px !important;
        display: flex !important;
        justify-content: flex-end !important;
    }
    
    /* Asegurar que el contenido tenga el espaciado correcto */
    .pdf-content {
        padding: 0 30px 30px 30px !important;
    }
    
    /* Asegurar que las firmas y QR se vean */
    .pdf-signature-section,
    .pdf-qr-section,
    .pdf-footer {
        page-break-inside: avoid !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ========================================
   NUEVOS ESTILOS MEJORADOS PARA PDF
   ======================================== */

/* Mejorar el diseño general del PDF */
.pdf-page-container {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
    color: #1a1a1a !important;
    line-height: 1.5 !important;
}

/* Header Section Mejorado */
.pdf-header-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 30px !important;
}

.pdf-header-left {
    flex: 1 !important;
}

.pdf-header-right {
    flex-shrink: 0 !important;
}

/* Company Section */
.pdf-company-section {
    display: flex !important;
    align-items: flex-start !important;
    gap: 20px !important;
}

.pdf-company-logo {
    width: 70px !important;
    height: 70px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
}

.pdf-company-logo-placeholder {
    width: 70px !important;
    height: 70px !important;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 32px !important;
    font-weight: bold !important;
}

.pdf-company-name {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 4px 0 !important;
}

.pdf-company-tagline {
    font-size: 12px !important;
    color: #6b7280 !important;
    margin: 0 0 8px 0 !important;
}

.pdf-company-rnc {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin: 0 0 6px 0 !important;
}

.pdf-company-address {
    font-size: 11px !important;
    color: #6b7280 !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.4 !important;
}

.pdf-company-contact {
    font-size: 11px !important;
    color: #6b7280 !important;
    margin: 0 !important;
}

/* Invoice Badge */
.pdf-invoice-badge {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border-radius: 10px !important;
    padding: 15px 20px !important;
    color: white !important;
    min-width: 180px !important;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.15) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.pdf-invoice-badge h2 {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 0 12px 0 !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
}

.pdf-invoice-number,
.pdf-invoice-ncf,
.pdf-invoice-ncf-expiry,
.pdf-invoice-date,
.pdf-invoice-due {
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
    font-size: 12px !important;
}

.pdf-invoice-badge .label {
    font-weight: 400 !important;
    opacity: 0.9 !important;
}

.pdf-invoice-badge .value {
    font-weight: 600 !important;
}

.pdf-invoice-status {
    margin-top: 10px !important;
    text-align: center !important;
}

.pdf-status {
    display: inline-block !important;
    padding: 3px 10px !important;
    border-radius: 15px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
}

/* Customer Section Mejorado */
.pdf-customer-section {
    padding: 0 30px !important;
    margin-bottom: 25px !important;
}

.pdf-customer-box {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
    border-radius: 10px !important;
    padding: 18px 22px !important;
    border-left: 4px solid #3b82f6 !important;
    margin-bottom: 15px !important;
}

.pdf-customer-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    margin: 0 0 10px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.pdf-customer-content {
    padding-left: 8px !important;
}

.pdf-customer-name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 0 8px 0 !important;
}

.pdf-customer-tax,
.pdf-customer-address,
.pdf-customer-location,
.pdf-customer-phone,
.pdf-customer-email {
    font-size: 12px !important;
    color: #475569 !important;
    margin: 0 0 5px 0 !important;
    line-height: 1.4 !important;
}

.pdf-customer-tax strong {
    color: #1e293b !important;
    font-weight: 600 !important;
}

/* Terms Box */
.pdf-terms-box {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
    border-radius: 10px !important;
    padding: 18px 22px !important;
    border-left: 4px solid #22c55e !important;
}

.pdf-terms-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #16a34a !important;
    margin: 0 0 8px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.pdf-terms-content {
    font-size: 12px !important;
    color: #15803d !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    padding-left: 8px !important;
}

/* Table Section Mejorado */
.pdf-table-section {
    padding: 0 !important;
    margin-bottom: 15px !important;
}

.pdf-items-table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: white !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.pdf-items-table thead,
.pdf-table-header {
    background: #dc3545 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.pdf-items-table th {
    color: #1f2937 !important;
    padding: 8px 8px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    text-shadow: 0 1px 1px rgba(255,255,255,0.3) !important;
}

.pdf-th-desc {
    text-align: left !important;
    width: 40% !important;
}

.pdf-th-qty {
    text-align: center !important;
    width: 12% !important;
}

.pdf-th-price {
    text-align: right !important;
    width: 18% !important;
}

.pdf-th-disc {
    text-align: center !important;
    width: 12% !important;
}

.pdf-th-total {
    text-align: right !important;
    width: 18% !important;
}

.pdf-items-table tbody tr {
    border-bottom: 1px solid #e5e7eb !important;
}

.pdf-items-table tbody tr:nth-child(even) {
    background-color: #f9fafb !important;
}

.pdf-items-table td {
    padding: 6px 8px !important;
    font-size: 12px !important;
    color: #374151 !important;
    line-height: 1.3 !important;
}

.pdf-td-desc {
    text-align: left !important;
}

.pdf-item-name {
    display: block !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 2px !important;
    font-size: 11px !important;
}

.pdf-item-detail {
    display: block !important;
    font-size: 10px !important;
    color: #6b7280 !important;
}

.pdf-td-qty {
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #1f2937 !important;
}

.pdf-td-price {
    text-align: right !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 500 !important;
    font-size: 12px !important;
}

.pdf-td-disc {
    text-align: center !important;
    color: #dc2626 !important;
    font-weight: 500 !important;
}

.pdf-td-total {
    text-align: right !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    font-size: 13px !important;
}

.pdf-no-items {
    text-align: center !important;
    padding: 25px !important;
    color: #9ca3af !important;
    font-style: italic !important;
}

/* Totals Section Mejorado */
.pdf-totals-section {
    padding: 0 30px !important;
    margin-bottom: 35px !important;
}

.pdf-totals-container {
    margin-left: auto !important;
    width: 280px !important;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
    border-radius: 10px !important;
    padding: 18px 22px !important;
    border: 2px solid #e2e8f0 !important;
}

.pdf-total-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 6px 0 !important;
    font-size: 13px !important;
}

.pdf-total-label {
    color: #64748b !important;
    font-weight: 500 !important;
}

.pdf-total-value {
    font-family: 'Courier New', monospace !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}

.pdf-total-value.discount {
    color: #dc2626 !important;
}

.pdf-total-final {
    border-top: 2px solid #3b82f6 !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
}

.pdf-total-final .pdf-total-label {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

.pdf-total-final .pdf-total-value {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #3b82f6 !important;
}

/* Bottom Section Mejorado */
.pdf-bottom-section {
    padding: 35px 30px 20px 30px !important;
    margin-top: auto !important;
}

.pdf-bottom-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 25px !important;
}

.pdf-signatures-area {
    flex: 1 !important;
    display: flex !important;
    gap: 40px !important;
}

.pdf-signature-box,
.pdf-stamp-box {
    flex: 1 !important;
    text-align: center !important;
}

.pdf-signature-space,
.pdf-stamp-space {
    height: 70px !important;
    border-bottom: 2px solid #cbd5e1 !important;
    margin-bottom: 8px !important;
}

.pdf-signature-img,
.pdf-stamp-img {
    max-width: 130px !important;
    max-height: 70px !important;
    object-fit: contain !important;
    margin-bottom: 8px !important;
}

.pdf-signature-label,
.pdf-stamp-label {
    font-size: 11px !important;
    color: #64748b !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* QR Code Area Mejorado */
.pdf-qr-area {
    flex-shrink: 0 !important;
}

.pdf-qr-image {
    width: 130px !important;
    height: 130px !important;
    border: 3px solid #e2e8f0 !important;
    padding: 8px !important;
    background: white !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

/* Footer Mejorado - DISABLED - Using newer version below */

/* .pdf-footer p - DISABLED - Using .pdf-footer-text instead */

/* Ajustes específicos para modo PDF - DISABLED - Using base styles */

/* Media Queries para impresión */
@media print {
    .pdf-header,
    .pdf-invoice-badge,
    .pdf-items-table thead,
    .pdf-footer {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    .pdf-page-container {
        box-shadow: none !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    .pdf-print-actions {
        display: none !important;
    }
}

/* ========================================
   ESTILOS ESPECÍFICOS PARA PDF BÁSICO
   ======================================== */

/* Configuración de página para PDF */
@page {
    size: A4;
    margin: 15mm;
}

/* Estilos base para PDF - DISABLED - Using base styles */

.pdf-page-container {
    width: 100%;
    background: white;
    margin: 0;
    padding: 0;
}

/* Vista previa en pantalla */
@media screen {
    .pdf-page-container {
        width: 210mm;
        min-height: 297mm;
        margin: 0 auto;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    
    body {
        background: #f5f5f5;
        padding: 20px 0;
    }
}

/* Ocultar botones en modo PDF */
/* .pdf-mode .pdf-print-actions - ELIMINADO */

.pdf-print-actions {
    margin: 20px auto;
    text-align: center;
    max-width: 210mm;
}

/* Botones de acción */
.pdf-btn {
    background-color: #2c3e50;
    color: white;
    border: 2px solid #2c3e50;
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    margin: 5px;
    transition: all 0.3s ease;
}

.pdf-btn:hover {
    background-color: #34495e;
    border-color: #34495e;
}

.pdf-btn-secondary {
    background-color: #34495e;
    border-color: #34495e;
}

/* Header del PDF - Estructura Ultra Compacta */
.pdf-header-compact {
    margin: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    height: 120px;
}

.pdf-header-logo {
    width: 120px !important;
    padding: 12px !important;
}

.pdf-logo-mini {
    width: 104px !important;
    height: 104px !important;
    border-radius: 15px !important;
    object-fit: contain !important;
    background: #ffffff !important;
    border: 4px solid #ffffff !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

.pdf-logo-mini-placeholder {
    width: 104px !important;
    height: 104px !important;
    background-color: #22c55e !important;
    border-radius: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 48px !important;
    font-weight: 900 !important;
    border: 4px solid #ffffff !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

.pdf-header-company {
    padding: 4px 10px;
    vertical-align: top;
}

.pdf-company-name-mini {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
    line-height: 1.1;
    margin: 0 0 3px 0;
}

.pdf-company-data-mini {
    font-size: 11px;
    color: #444444;
    line-height: 1.3;
}

.pdf-data-item {
    white-space: nowrap;
}

.pdf-header-invoice {
    padding: 4px;
    vertical-align: top;
}

.pdf-invoice-mini {
    padding: 12px 14px !important;
    border-radius: 10px !important;
    color: white !important;
    min-width: 180px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
    border: 3px solid rgba(255,255,255,0.2) !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.1) 100%) !important;
}

.pdf-invoice-header-mini {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.pdf-invoice-title-mini {
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #1a1a1a !important;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8) !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.pdf-invoice-status-mini {
    background: rgba(255,255,255,0.9) !important;
    color: #1a1a1a !important;
    padding: 3px 6px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    border: 2px solid rgba(0,0,0,0.1) !important;
}

.pdf-invoice-data-mini {
    font-size: 12px !important;
    color: #1a1a1a !important;
    line-height: 1.4 !important;
    text-shadow: 0 1px 1px rgba(255,255,255,0.6) !important;
    font-weight: 700 !important;
}

.pdf-invoice-data-mini div {
    margin: 0;
    padding: 0;
}

.pdf-invoice-data-mini strong {
    font-weight: 900 !important;
    color: #000000 !important;
    text-shadow: 0 1px 1px rgba(255,255,255,0.8) !important;
    font-size: 13px !important;
}

.pdf-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    min-height: 90px;
}

.pdf-company-section {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
}

.pdf-logo-container {
    flex-shrink: 0;
    margin-top: 0;
}

.pdf-company-logo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: contain;
}

.pdf-logo-placeholder {
    width: 70px;
    height: 70px;
    background-color: #22c55e;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    font-weight: bold;
}

.pdf-company-info {
    flex: 1;
    padding-top: 0;
}

.pdf-company-name {
    margin: 0 0 2px 0;
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    line-height: 1.1;
}

.pdf-company-business {
    margin: 0 0 3px 0;
    font-size: 10px;
    color: #555555;
    line-height: 1.1;
}

.pdf-company-rnc {
    margin: 0 0 2px 0;
    font-size: 11px;
    font-weight: 600;
    color: #000000;
    line-height: 1.1;
}

.pdf-company-address,
.pdf-company-location,
.pdf-company-contact {
    margin: 0 0 2px 0;
    font-size: 10px;
    color: #444444;
    line-height: 1.2;
}

.pdf-header-grid {
    width: 100%;
}

.pdf-header-col-left { padding-right: 6px; }
.pdf-header-col-right { padding-left: 6px; }

/* Logo + Nombre */
.pdf-logo-cell { width: 32px; }
.pdf-company-logo {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    object-fit: contain;
    background: #ffffff;
}
.pdf-company-name-cell { padding-left: 6px; }
.pdf-company-name {
    font-size: 14px;
    font-weight: 600;
    color: #000000;
    line-height: 1.0;
    margin: 0;
}

/* Pares etiqueta/valor */
.pdf-company-meta-list { margin-top: 1px; }
.pdf-company-meta-list td { padding: 0px 4px 1px 0; vertical-align: top; }
.pdf-meta-pair-label, .pdf-company-meta-list .pdf-meta-label {
    font-size: 8px;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    width: 60px;
    white-space: nowrap;
}
.pdf-meta-pair-value, .pdf-company-meta-list .pdf-meta-value {
    font-size: 10px;
    color: #111827;
    line-height: 1.1;
    word-break: normal;
    white-space: nowrap;
}
.pdf-meta-pair-value.rnc,
.pdf-meta-pair-value.tel,
.pdf-company-meta-list .pdf-meta-value.rnc,
.pdf-company-meta-list .pdf-meta-value.tel { white-space: nowrap; }
.pdf-meta-pair-value.email,
.pdf-company-meta-list .pdf-meta-value.email { white-space: nowrap; }

/* Invoice Badge */
.pdf-invoice-section {
    flex-shrink: 0;
}

.pdf-invoice-badge {
    padding: 6px 8px;
    border-radius: 6px;
    color: white;
    min-width: 140px;
    max-width: 160px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.pdf-invoice-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.pdf-invoice-title { font-size: 11px; font-weight: 600; color: #ffffff; letter-spacing: 0.01em; }
.pdf-invoice-pill { background: rgba(255,255,255,0.18); color: #ffffff; padding: 1px 3px; border-radius: 999px; font-size: 7px; font-weight: 700; text-transform: uppercase; }

.pdf-invoice-details { margin-bottom: 8px; }

.pdf-invoice-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    font-size: 11px;
    line-height: 1.3;
}

.pdf-invoice-fields { font-size: 9px; }
.pdf-badge-label { color: rgba(255,255,255,0.85); padding: 0px 0; }
.pdf-badge-value { color: #ffffff; font-weight: 700; padding: 0px 0; font-size: 10px; }

.pdf-label {
    color: white;
    opacity: 0.9;
}

.pdf-value {
    font-weight: bold;
    color: white;
}

.pdf-invoice-status {
    text-align: center;
}

.pdf-status {
    background-color: rgba(255,255,255,0.25);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Content */
.pdf-content {
    padding: 30px;
}

/* Customer Section */
.pdf-customer-section {
    margin-bottom: 15px;
}

.pdf-customer-box {
    background-color: #f8fafc;
    border-radius: 8px;
    padding: 14px 18px;
    border-left: 4px solid #2563eb;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.pdf-terms-box {
    background-color: #f0fdf4;
    border-radius: 8px;
    padding: 18px 22px;
    border-left: 4px solid #22c55e;
}

.pdf-section-title {
    margin: 0 0 8px 0;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pdf-customer-info {
    padding-left: 8px;
}

.pdf-customer-name {
    margin: 0 0 5px 0;
    font-size: 14px;
    font-weight: bold;
    color: #1e293b;
}

.pdf-customer-detail {
    margin: 0 0 3px 0;
    font-size: 12px;
    color: #475569;
    line-height: 1.3;
}

.pdf-customer-detail strong {
    color: #1e293b;
}

.pdf-terms-content {
    margin: 0;
    font-size: 13px;
    color: #15803d;
    line-height: 1.6;
    padding-left: 10px;
}

/* Items Table */
.pdf-table-section {
    margin-bottom: 20px;
    margin-top: 8px;
}

.pdf-items-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border: 1px solid #d1d5db;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.pdf-table-header {
    background-color: #2c3e50;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.pdf-th {
    padding: 14px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    letter-spacing: 0.5px;
    border: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pdf-th-desc {
    text-align: left;
}

.pdf-th-qty,
.pdf-th-disc {
    text-align: center;
}

.pdf-th-price,
.pdf-th-total {
    text-align: right;
}

.pdf-table-row {
    border-bottom: 1px solid #e5e7eb;
}

.pdf-table-row:nth-child(even) {
    background-color: #f9fafb;
}

.pdf-table-row:hover {
    background-color: #f3f4f6;
}

.pdf-td {
    padding: 12px;
    font-size: 13px;
    color: #374151;
    vertical-align: top;
    font-weight: 500;
}

.pdf-td-desc {
    text-align: left;
}

.pdf-item-name {
    display: block;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 3px;
    font-size: 14px;
}

.pdf-item-detail {
    display: block;
    font-size: 12px;
    color: #64748b;
    font-style: italic;
}

.pdf-td-qty {
    text-align: center;
    font-weight: 600;
    color: #475569;
}

.pdf-td-price {
    text-align: right;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #475569;
}

.pdf-td-disc {
    text-align: center;
    color: #dc2626;
    font-weight: 600;
}

.pdf-td-total {
    text-align: right;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: #1e293b;
    font-size: 14px;
}

.pdf-no-items {
    text-align: center;
    padding: 30px;
    color: #9ca3af;
    font-style: italic;
}

/* Container para totales e información adicional */
.pdf-totals-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 35px;
    margin-bottom: 30px;
    margin-top: 20px;
}

/* Tabla alternativa de totales (compatible con xhtml2pdf) */
.pdf-totals-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    margin-bottom: 10px;
}

.pdf-totals-left {
    padding-right: 15px;
}

.pdf-totals-right {
    padding-left: 15px;
}

/* Información adicional (lado izquierdo) */
.pdf-additional-info {
    flex: 1;
    max-width: 300px;
}

.pdf-notes-compact,
.pdf-payment-info {
    background-color: #f8fafc;
    border-radius: 8px;
    padding: 16px 20px;
    border-left: 4px solid #3b82f6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.pdf-notes-title,
.pdf-payment-title {
    margin: 0 0 10px 0;
    font-size: 13px;
    font-weight: 700;
    color: #1e40af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pdf-notes-text,
.pdf-payment-text {
    margin: 0 0 6px 0;
    font-size: 12px;
    color: #475569;
    line-height: 1.5;
    font-weight: 500;
}

.pdf-payment-text:last-child {
    margin-bottom: 0;
}

/* Totales (lado derecho) */
.pdf-totals-section {
    flex-shrink: 0;
}

.pdf-totals-box {
    width: 340px;
    background-color: #ffffff;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    padding: 20px 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
}

.pdf-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    line-height: 1.3;
    border-bottom: 1px solid #f1f5f9;
}

.pdf-total-row:last-child {
    border-bottom: none;
}

.pdf-total-label {
    color: #64748b;
    font-weight: 600;
}

.pdf-total-value {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: #1e293b;
    text-align: right;
    font-size: 14px;
}

.pdf-total-discount {
    color: #dc2626;
}

.pdf-total-final {
    border-top: 3px solid #2563eb;
    margin-top: 12px;
    padding-top: 12px;
    background-color: #f8fafc;
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 0 0 8px 8px;
}

.pdf-total-final .pdf-total-label {
    font-size: 16px;
    font-weight: 800;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pdf-total-final-value {
    font-size: 18px;
    font-weight: 800;
    color: #2563eb;
}

/* Notes */
.pdf-notes-section {
    margin-bottom: 30px;
}

.pdf-notes-box {
    background-color: #f0f8ff;
    border-radius: 8px;
    padding: 18px 22px;
    border-left: 4px solid #48bb78;
}

.pdf-notes-content {
    margin: 0;
    font-size: 13px;
    color: #1565c0;
    line-height: 1.6;
}

/* Bottom Section */
.pdf-bottom-section {
    margin-top: 35px;
    margin-bottom: 25px;
}

.pdf-signatures-area {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    gap: 30px;
    padding: 0 20px;
}

.pdf-signature-box,
.pdf-stamp-box {
    flex: 1;
    text-align: center;
    max-width: 180px;
}

.pdf-qr-box {
    flex-shrink: 0;
    text-align: center;
    width: 140px;
}

.pdf-signature-img,
.pdf-stamp-img {
    max-width: 120px;
    max-height: 60px;
    margin-bottom: 8px;
    object-fit: contain;
}

.pdf-signature-space {
    height: 60px;
    margin-bottom: 8px;
    border-bottom: 2px solid #9ca3af;
    margin-left: 20px;
    margin-right: 20px;
}

.pdf-stamp-space {
    height: 60px;
    margin-bottom: 8px;
    border: 2px solid #2563eb;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #2563eb;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 12px;
}

.pdf-signature-label {
    border-top: 1px solid #9ca3af;
    margin: 8px 15px 0 15px;
    padding-top: 6px;
    font-size: 10px;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.pdf-qr-image {
    width: 110px;
    height: 110px;
    border: 2px solid #d1d5db;
    padding: 4px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Footer - FINAL VERSION */
.pdf-footer {
    text-align: center !important;
    padding: 18px 25px !important;
    margin-top: 30px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* background-color is set via inline style in template */
    color: inherit !important;
    border: none !important;
    border-top: none !important;
    background: none !important; /* Clear any previous background */
}

.pdf-footer-text {
    margin: 0;
    font-size: 12px;
    color: #1f2937;
    letter-spacing: 0.3px;
    font-weight: 700;
    line-height: 1.4;
    text-shadow: 0 1px 1px rgba(255,255,255,0.3);
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

/* Responsive para dispositivos pequeños */
@media screen and (max-width: 210mm) {
    .pdf-page-container {
        width: 100%;
        box-shadow: none;
        margin: 0;
    }
    
    body {
        background: white;
        padding: 0;
    }
    
    .pdf-print-actions {
        margin: 10px;
    }
    
    .pdf-header-content {
        flex-direction: column;
        gap: 15px;
        min-height: auto;
    }
    
    .pdf-totals-container {
        flex-direction: column;
        gap: 20px;
    }
    
    .pdf-additional-info {
        max-width: 100%;
    }
    
    .pdf-totals-box {
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }
    
    .pdf-signatures-area {
        flex-direction: column;
        gap: 30px;
        padding: 0 10px;
    }
}

/* ======================================== 
   CUSTOMER SECTION COMPACTO 
   ======================================== */

.pdf-customer-section-compact {
    margin: 8px 0 15px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pdf-customer-compact {
    background: #f8fafc;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 4px solid #2563eb;
    font-size: 13px;
    line-height: 1.4;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.pdf-customer-label {
    font-weight: 700;
    color: #1e293b;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pdf-customer-name-inline {
    font-weight: 600;
    color: #0f172a;
    margin-left: 6px;
}

.pdf-customer-detail-inline {
    color: #475569;
    font-size: 12px;
}

.pdf-terms-compact {
    background: #f0fdf4;
    padding: 6px 12px;
    border-radius: 6px;
    border-left: 4px solid #48bb78;
    font-size: 12px;
    line-height: 1.3;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.pdf-terms-label {
    font-weight: 700;
    color: #166534;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pdf-terms-text-inline {
    color: #15803d;
    margin-left: 6px;
    font-style: italic;
}

/* ======================================== 
   TOTALS Y NOTAS COMPACTO 
   ======================================== */

.pdf-totals-compact-container {
    margin: 15px 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pdf-notes-inline {
    background: #f0fdf4;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 4px solid #48bb78;
    font-size: 12px;
    line-height: 1.4;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.pdf-notes-label {
    font-weight: 700;
    color: #166534;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pdf-notes-text-compact {
    color: #15803d;
    margin-left: 6px;
    font-style: italic;
}

.pdf-totals-vertical {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    margin-top: 10px;
}

.pdf-total-row-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 300px;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid #e5e7eb;
}

.pdf-total-label-compact {
    color: #374151;
    font-weight: 500;
    text-align: left;
}

.pdf-total-value-compact {
    color: #111827;
    font-weight: 600;
    text-align: right;
}

.pdf-discount {
    color: #dc2626 !important;
}

.pdf-total-final-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 300px;
    padding: 8px 0;
    margin-top: 4px;
    border-top: 2px solid #dc2626;
    font-weight: 700;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.pdf-total-final-label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    color: #1f2937;
}

.pdf-total-final-amount {
    font-size: 16px;
    font-weight: 900;
    text-align: right;
    color: #dc2626;
}