/* ====================
   Variables Globales
   ======================================= */
:root {
    --primary-color: #4f46e5;
    --primary-hover: #4338ca;
    --primary-light: #eef2ff;
    --success-color: #10b981;
    --success-light: #d1fae5;
    --danger-color: #ef4444;
    --danger-light: #fee2e2;
    --warning-color: #f59e0b;
    --warning-light: #fef3c7;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --border-radius: 12px;
    --border-radius-sm: 8px;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Breakpoints */
    --bp-laptop: 1200px;
    --bp-desktop: 1400px;

    /* Content widths */
    --content-max-width: 1400px;
    --form-max-width: 900px;
}

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--gray-200);
    color: var(--gray-800);
}

a, .btn-link {
    color: var(--primary-color);
}

/* ========================================
   Botones
   ======================================== */
.btn {
    font-weight: 500;
    border-radius: var(--border-radius-sm);
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.btn-primary {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Boton primario grande - Accion principal de la pagina */
.btn-primary-lg {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    padding: 0.625rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: var(--shadow);
}

.btn-primary-lg:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: #fff;
}

.btn-success-light {
    background-color: #34d399;
    border-color: #34d399;
    color: white;
}

.btn-success-light:hover {
    background-color: #10b981;
    border-color: #10b981;
    color: white;
}

.btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
}

.btn-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
}

.btn-secondary {
    background-color: var(--gray-100);
    border-color: var(--gray-300);
    color: var(--gray-700);
}

.btn-secondary:hover {
    background-color: var(--gray-200);
    border-color: var(--gray-400);
    color: var(--gray-800);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: white;
}

.btn-outline-danger {
    color: var(--danger-color);
    border-color: var(--danger-color);
}

.btn-outline-danger:hover {
    background-color: var(--danger-color);
    color: white;
}

.btn-clear-filter {
    background-color: var(--danger-light);
    border: 1px solid #fca5a5;
    color: var(--danger-color);
    white-space: nowrap;
    padding: 0.25rem 0.6rem;
    font-size: 0.82rem;
}

.btn-clear-filter:hover {
    background-color: #fecaca;
    border-color: #f87171;
    color: #dc2626;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

/* ========================================
   Formularios
   ======================================== */
.form-control, .form-select {
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--gray-400);
    padding: 0.625rem 0.875rem;
    transition: all 0.2s ease;
    background-color: white;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

.form-label {
    font-weight: 500;
    color: #000000;
    margin-bottom: 0.375rem;
    font-size: 0.8rem;
}

/* Override Bootstrap text-muted para mejor contraste */
.text-muted {
    color: var(--gray-600) !important;
}

.valid.modified:not([type=checkbox]) {
    border-color: var(--success-color);
}

.invalid {
    border-color: var(--danger-color);
}

.validation-message {
    color: var(--danger-color);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* ========================================
   Cards Modernos
   ======================================== */
.card {
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    background: white;
}

.card-body {
    padding: 1.5rem;
}

/* ========================================
   Page Header - Cabecera de Pagina
   ======================================== */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-header h3 {
    margin: 0;
    font-weight: 600;
    color: var(--gray-800);
}

.page-header-content {
    flex: 1;
}

.page-header-content h2 {
    margin: 0 0 0.25rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
}

.page-header-content p {
    margin: 0;
    color: var(--gray-700);
    font-size: 1rem;
}

.page-breadcrumb {
    font-size: 0.8rem;
    color: var(--gray-400);
    margin-bottom: 0.5rem;
}

.page-breadcrumb a {
    color: var(--gray-500);
    text-decoration: none;
}

.page-breadcrumb a:hover {
    color: var(--primary-color);
}

/* ========================================
   Page Header Card - Cabecera con Icono
   ======================================== */
.page-header-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    background: white;
    border-radius: var(--border-radius);
    border: 1px solid var(--gray-300);
    box-shadow: var(--shadow);
    margin-bottom: 0.75rem;
}

.page-header-icon {
    width: 45px;
    height: 45px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.page-header-icon.purple {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

.page-header-icon.green {
    background: linear-gradient(135deg, #10b981, #34d399);
    color: white;
}

.page-header-icon.blue {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    color: white;
}

.page-header-icon.orange {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: white;
}

.page-header-icon.red {
    background: linear-gradient(135deg, #ef4444, #f87171);
    color: white;
}

.page-header-icon.slate {
    background: linear-gradient(135deg, #475569, #64748b);
    color: white;
}

.page-header-card .page-header-content {
    flex: 1;
    min-width: 0;
}

.page-header-card .page-header-content h2 {
    margin: 0 0 0.15rem 0;
    font-size: 1.175rem;
    font-weight: 700;
    color: var(--gray-900);
}

.page-header-card .page-header-content p {
    margin: 0;
    color: var(--gray-700);
    font-size: 0.825rem;
}

@media (max-width: 640px) {
    .page-header-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .page-header-card .btn-primary-lg {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   Stats Cards - Tarjetas de Estadisticas
   ======================================== */
/* ========================================
   Filter Bar
   ======================================== */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-right: 0.25rem;
}

.filter-chip {
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-700);
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip:hover {
    background: var(--gray-200);
    border-color: var(--gray-300);
}

.filter-chip.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.filter-chip.active:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* ========================================
   Producto Selector (Autocomplete)
   ======================================== */
.producto-selector {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.producto-selector .tipo-select {
    width: 110px;
    flex-shrink: 0;
}

.producto-selector .autocomplete-wrapper {
    flex: 1;
    position: relative;
}

.producto-selector .btn {
    flex-shrink: 0;
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-lg);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1050;
}

/* Permitir que el dropdown salga del contenedor */
.card-body:has(.producto-selector) {
    overflow: visible;
}

.card-body:has(.producto-selector) .table-responsive {
    overflow: visible;
}

.autocomplete-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
}

.autocomplete-item:hover {
    background: var(--gray-50);
}

.autocomplete-item i {
    color: var(--gray-400);
}

.autocomplete-item span {
    flex: 1;
}

.autocomplete-empty {
    padding: 1rem;
    text-align: center;
    color: var(--gray-600);
}

/* Search Modal */
.modal-card.modal-lg {
    max-width: 700px;
}

.search-inputs-row {
    display: flex;
    gap: 0.5rem;
}

.search-inputs-row .form-control {
    flex: 1;
}

.filter-chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.search-results {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-sm);
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--gray-100);
}

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

.search-result-item:hover {
    background: var(--gray-50);
}

.search-result-item .result-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border-radius: 50%;
    color: var(--gray-600);
}

.search-result-item .result-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.search-result-item .result-info small {
    font-size: 0.8rem;
}

.search-empty {
    padding: 3rem;
    text-align: center;
    color: var(--gray-400);
}

.search-empty i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

/* ========================================
   Stats Row
   ======================================== */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.stat-card {
    background: white;
    border-radius: var(--border-radius);
    padding: 0.7rem 0.875rem;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid var(--gray-300);
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--gray-400);
}

.stat-card.active {
    border: 2px solid var(--primary-color);
    background: var(--primary-light);
}

.stat-card.clickable:active {
    transform: translateY(0);
}

.stat-card.static,
.stat-card.static:hover {
    cursor: default;
    box-shadow: var(--shadow);
    border-color: var(--gray-300);
}

.stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.stat-icon.primary {
    background: var(--primary-light);
    color: var(--primary-color);
}

.stat-icon.success {
    background: var(--success-light);
    color: var(--success-color);
}

.stat-icon.warning {
    background: var(--warning-light);
    color: var(--warning-color);
}

.stat-icon.danger {
    background: var(--danger-light);
    color: var(--danger-color);
}

.stat-content h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-800);
    line-height: 1;
}

.stat-content p {
    margin: 0.125rem 0 0 0;
    font-size: 0.75rem;
    color: var(--gray-600);
    font-weight: 500;
}

/* ========================================
   Data Table - Tabla de Datos
   ======================================== */
.data-table-container {
    background: white;
    border-radius: var(--border-radius);
    border: 1px solid var(--gray-300);
    box-shadow: var(--shadow);
    overflow-x: auto;
    overflow-y: hidden;
}

.data-table-header {
    padding: 0.5rem 1rem;
    background: var(--gray-200);
    border-bottom: 1px solid var(--gray-300);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.data-table-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
}

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

.data-table thead {
    background: var(--gray-50);
}

.data-table th {
    padding: 0.5rem 1rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-600);
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-300);
}

.data-table th.sortable-header {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}

.data-table th.sortable-header:hover {
    color: var(--gray-800);
    background: var(--gray-200);
}

.data-table th.sortable-header i {
    font-size: 0.75rem;
    margin-left: 0.3rem;
}

.data-table td {
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid var(--gray-200);
    color: var(--gray-800);
    font-size: 0.875rem;
}

.data-table-fixed {
    table-layout: fixed;
}

.data-table-fixed th {
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-table-fixed td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.data-table tbody tr {
    transition: background-color 0.15s ease;
}

.data-table tbody tr:nth-child(even) {
    background-color: var(--gray-50);
}

.data-table tbody tr:hover {
    background-color: #f0f4ff;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table-report th {
    background: inherit;
}

/* DICOSE Section - Estructura compacta */
.dicose-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
}

.dicose-info-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.dicose-info-item .label {
    color: var(--gray-600);
    font-weight: 500;
}

.dicose-info-item .value {
    color: var(--gray-900);
    font-weight: 600;
}

.dicose-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin: 0.5rem 0;
}

.dicose-table th {
    padding: 0.375rem 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gray-800);
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-300);
}

.dicose-table td {
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid var(--gray-200);
    color: var(--gray-800);
}

.dicose-table .row-label {
    font-weight: 600;
    color: var(--gray-600);
    background: var(--gray-50);
    width: 100px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dicose-table tbody tr:last-child td {
    border-bottom: none;
}

.dicose-table .dicose-code {
    font-family: monospace;
    font-size: 0.8rem;
    background: var(--gray-100);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
}

/* Badges/Status */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.9rem;
    border-radius: 9999px;
    font-size: 0.825rem;
    font-weight: 600;
}

.status-badge.active {
    background: var(--success-light);
    color: var(--success-color);
}

.status-badge.inactive {
    background: var(--gray-200);
    color: var(--gray-700);
}

.status-badge i {
    font-size: 0.5rem;
}

/* Data Tags - badges elegantes para datos en grillas */
.data-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.data-tag.neutral {
    background: var(--gray-100);
    color: var(--gray-600);
}

.data-tag.primary {
    background: #dbeafe;
    color: #1e40af;
}

.data-tag.info {
    background: #cffafe;
    color: #0e7490;
}

.data-tag.success {
    background: #d1fae5;
    color: #047857;
}

.data-tag.teal {
    background: #93eaab;
    color: #166534;
}

.data-tag.warning {
    background: #fef3c7;
    color: #92400e;
}

.data-tag.purple {
    background: #ede9fe;
    color: #5b21b6;
}

.data-tag.danger {
    background: #fee2e2;
    color: #b91c1c;
}

/* Tags en grupo */
.data-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.data-tags .data-tag {
    margin: 0;
}

/* Action Buttons en tabla */
.action-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.btn-action {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--gray-200);
    background: white;
    color: var(--gray-500);
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.btn-action:hover {
    transform: translateY(-1px);
}

/* Ver - Info (azul) */
.btn-action.info {
    color: #0284c7;
    border-color: #7dd3fc;
    background: #e0f2fe;
}

.btn-action.info:hover {
    color: white;
    border-color: #0284c7;
    background: #0ea5e9;
}

/* Editar - Warning (amarillo) */
.btn-action.warning {
    color: #b45309;
    border-color: #fcd34d;
    background: #fef3c7;
}

.btn-action.warning:hover {
    color: white;
    border-color: #d97706;
    background: #f59e0b;
}

/* Desactivar - Secondary (gris) */
.btn-action.secondary {
    color: #6b7280;
    border-color: #d1d5db;
    background: #f3f4f6;
}

.btn-action.secondary:hover {
    color: #374151;
    border-color: #9ca3af;
    background: #e5e7eb;
}

/* Reactivar - Success (verde) */
.btn-action.success {
    color: #16a34a;
    border-color: #86efac;
    background: #dcfce7;
}

.btn-action.success:hover {
    color: #15803d;
    border-color: #4ade80;
    background: #a7f3d0;
}

/* Eliminar - Danger (rojo) */
.btn-action.danger {
    color: #dc2626;
    border-color: #fca5a5;
    background: #fee2e2;
}

.btn-action.danger:hover:not(:disabled) {
    color: white;
    border-color: #dc2626;
    background: #ef4444;
}

/* Botones deshabilitados */
.btn-action:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
}

/* Tooltips para botones */
.btn-action[title] {
    position: relative;
}

.btn-action::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    transform: none;
    padding: 0.375rem 0.625rem;
    background: var(--gray-800);
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 9999;
}

.btn-action::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    right: 12px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: var(--gray-800);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 9999;
}

.btn-action:hover::after,
.btn-action:hover::before {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   Empty State
   ======================================== */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    background: var(--gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--gray-400);
}

.empty-state h4 {
    margin: 0 0 0.5rem 0;
    color: var(--gray-700);
    font-weight: 600;
}

.empty-state p {
    margin: 0 0 1.5rem 0;
    color: var(--gray-700);
    font-size: 1rem;
}

/* ========================================
   Loading State
   ======================================== */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-container p {
    margin: 1rem 0 0 0;
    color: var(--gray-700);
    font-size: 1rem;
}

/* ========================================
   Modal Mejorado
   ======================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-card {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 420px;
    margin: 1rem;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-card-header.danger {
    background: var(--danger-light);
}

.modal-card-header.warning {
    background: var(--warning-light);
}

.modal-card-header i {
    font-size: 1.25rem;
    color: var(--danger-color);
}

.modal-card-header.warning i {
    color: #b45309;
}

.modal-card-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
}

.modal-card-body {
    padding: 1.5rem;
}

.modal-card-body p {
    margin: 0;
    color: var(--gray-600);
    line-height: 1.5;
}

.modal-card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-card-footer .btn:focus {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.35);
    outline: none;
}

.btn-tipo-crear {
    width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    border: 2px solid var(--gray-200);
    border-radius: 0.75rem;
    background: var(--white);
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 500;
}

.btn-tipo-crear:hover,
.btn-tipo-crear:focus {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--primary-bg);
    outline: none;
}

.btn-tipo-crear:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: var(--gray-200);
    color: var(--gray-400);
    background: var(--gray-50);
}

.btn-tipo-crear:disabled:hover {
    border-color: var(--gray-200);
    color: var(--gray-400);
    background: var(--gray-50);
}

/* ========================================
   Form Card
   ======================================== */
.form-card {
    background: white;
    border-radius: var(--border-radius);
    border: 1px solid var(--gray-300);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: var(--form-max-width);
}

.form-card-header {
    padding: 1rem 1.5rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.form-card-header h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-700);
}

.form-card-body {
    padding: 1.5rem;
}

.form-card-body .row {
    margin-bottom: 1rem;
}

.form-card-body .row:last-child {
    margin-bottom: 0;
}

.form-card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

/* Alert mejorado */
.alert {
    border: none;
    border-radius: var(--border-radius-sm);
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
}

.alert-danger {
    background: var(--danger-light);
    color: #991b1b;
}

.alert-info {
    background: var(--primary-light);
    color: #3730a3;
}

.alert-success {
    background: var(--success-light);
    color: #065f46;
}

/* ========================================
   Blazor Defaults
   ======================================== */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: var(--border-radius-sm);
}

.blazor-error-boundary::after {
    content: "Ha ocurrido un error."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ========================================
   Form Check Card - Toggle Activo/Inactivo
   ======================================== */
.form-check-card {
    display: flex;
    align-items: center;
    padding: 0.875rem 1rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--gray-200);
    background: var(--gray-50);
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-check-card:hover {
    border-color: var(--gray-300);
}

.form-check-card.active {
    border-color: var(--success-color);
    background: var(--success-light);
}

.form-check-card .form-check-input {
    margin-right: 0.75rem;
    cursor: pointer;
}

.form-check-card .form-check-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0;
    font-weight: 500;
}

.text-muted {
    color: var(--gray-700) !important;
    font-size: 0.9rem;
}

.text-success {
    color: var(--success-color) !important;
}

.text-secondary {
    color: var(--gray-700) !important;
}

/* ========================================
   Form Page - Layout con Footer Fijo
   ======================================== */
.form-page-container {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 80px);
}

.form-page-content {
    flex: 1;
    padding-bottom: 100px;
}

.form-page-footer {
    position: fixed;
    bottom: 0;
    left: 240px;
    right: 0;
    background: white;
    border-top: 1px solid var(--gray-200);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
    z-index: 100;
    box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.05);
}

/* Header colapsable clickeable */
.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.collapsible-header:hover {
    background-color: var(--gray-100);
}

/* Footer Layout */
.footer-left {
    display: flex;
    align-items: center;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Totales Inline */
.footer-totals-inline {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.total-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
}

.total-label {
    font-size: 0.825rem;
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.total-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
}

.total-value.final {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--success-color);
}

/* Para compras: azul */
.total-value.final.compra {
    color: var(--primary-color);
}

.total-final-group {
    padding-left: 1.5rem;
    border-left: 2px solid var(--gray-300);
}

/* Tooltip de impuestos */
.impuestos-group {
    cursor: help;
}

.impuestos-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 0;
    background: var(--gray-800);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    margin-bottom: 8px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.impuestos-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 20px;
    border: 6px solid transparent;
    border-top-color: var(--gray-800);
}

.impuestos-group:hover .impuestos-tooltip {
    display: block;
}

.footer-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .form-page-footer {
        left: 0;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .footer-left {
        order: 2;
        width: 100%;
    }

    .footer-left .btn {
        width: 100%;
    }

    .footer-right {
        order: 1;
        width: 100%;
        flex-direction: column;
        gap: 1rem;
    }

    .footer-totals-inline {
        width: 100%;
        justify-content: space-between;
    }

    .footer-right .btn {
        width: 100%;
    }
}

/* ========================================
   Responsive - Sidebar Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Sidebar oculto por defecto en mobile */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    /* Sidebar visible cuando sidebar-open está activo */
    .sidebar-open .sidebar {
        transform: translateX(0);
    }

    /* Header con más espacio en mobile */
    .sidebar-header {
        height: 4.5rem;
        padding: 0.5rem 0;
    }

    .logo-container {
        padding: 0 18px;
    }
}

/* ========================================
   Tree View (Jerarquía)
   ======================================== */
.tree-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.tree-item.expandable {
    cursor: pointer;
}

.tree-item.expandable:hover {
    color: var(--primary-color);
}

.tree-chevron {
    color: var(--gray-400);
    font-size: 0.875rem;
    transition: transform 0.2s ease;
}

.tree-chevron.expanded {
    transform: rotate(90deg);
}

.tree-item.expandable:hover .tree-chevron {
    color: var(--primary-color);
}

.tree-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--primary-color);
    margin-left: 6px;
}

/* ========================================
   Responsive - Laptop (hasta 1600px)
   ======================================== */
@media (max-width: 1600px) {
    :root {
        --form-max-width: 100%;
    }

    /* Page Header más compacto */
    .page-header-card {
        padding: 0.875rem 1rem;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .page-header-card .page-header-content h2 {
        font-size: 1.2rem;
    }

    .page-header-card .page-header-content p {
        font-size: 0.9rem;
    }

    .page-header-icon {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    /* Stats más compactas */
    .stats-row {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: 0.625rem;
        margin-bottom: 1rem;
    }

    .stat-card {
        padding: 0.75rem;
    }

    .stat-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .stat-content h4 {
        font-size: 1.1rem;
    }

    .stat-content p {
        font-size: 0.825rem;
    }

    /* Tabla más compacta */
    .data-table-header {
        padding: 0.75rem 1rem;
    }

    .data-table th,
    .data-table td {
        padding: 0.625rem 1rem;
    }

    /* Form Card más compacto */
    .form-card-header {
        padding: 0.75rem 1rem;
    }

    .form-card-header h4 {
        font-size: 0.875rem;
    }

    .form-card-body {
        padding: 1rem;
    }

    .form-card-footer {
        padding: 0.75rem 1rem;
    }

    .form-group {
        margin-bottom: 0.875rem;
    }

    .form-label {
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
    }

    .form-control, .form-select {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    /* Botones más compactos */
    .btn {
        padding: 0.4rem 0.875rem;
        font-size: 0.875rem;
    }

    .btn-primary-lg {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}

/* ========================================
   Responsive - Laptop chica (< 1024px)
   ======================================== */
@media (max-width: 1024px) {
    .page-header-card {
        flex-wrap: wrap;
    }

    .page-header-card .page-header-content {
        flex: 1 1 100%;
        order: 1;
    }

    .page-header-card .page-header-icon {
        order: 0;
    }

    .page-header-card .btn,
    .page-header-card a.btn {
        order: 2;
        margin-left: auto;
    }
}

/* ========================================
   Search Box - Input de Búsqueda
   ======================================== */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box > i {
    position: absolute;
    left: 0.75rem;
    color: var(--gray-400);
    font-size: 0.875rem;
    pointer-events: none;
}

.search-box input {
    padding: 0.5rem 2rem 0.5rem 2.25rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius-sm);
    font-size: 0.875rem;
    width: 200px;
    transition: all 0.2s ease;
    background: white;
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    width: 250px;
}

.search-box input::placeholder {
    color: var(--gray-400);
}

.search-clear {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.15s ease;
}

.search-clear:hover {
    background: var(--gray-100);
    color: var(--gray-600);
}

.search-clear i {
    font-size: 0.75rem;
}

@media (max-width: 768px) {
    .search-box input {
        width: 150px;
    }

    .search-box input:focus {
        width: 180px;
    }
}

/* ========================================
   Filter Bar - Barra de Filtros
   ======================================== */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.75rem 1rem;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    margin-bottom: 0.75rem;
}

.filter-bar.filter-bar-with-labels {
    align-items: flex-end;
    gap: 1rem;
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-field-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555555;
    white-space: nowrap;
    margin: 0;
    line-height: 1.2;
}

.filter-field .ms-select-toggle {
    min-width: 145px;
    justify-content: space-between;
}

/* Look "form-select" para MultiSelectDropdown usado como filtro en grillas */
.ms-select-form-style .ms-select,
.ms-select-form-style .ms-select-toggle {
    width: 100%;
}
.ms-select-form-style .ms-select-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-color: #dee2e6;
    color: #212529;
    font-weight: 400;
}
.ms-select-form-style .ms-select-toggle:hover,
.ms-select-form-style .ms-select-toggle:focus,
.ms-select-form-style .ms-select-toggle:active {
    background-color: #fff;
    border-color: #86b7fe;
    color: #212529;
}

.filter-bar .search-box input {
    width: 200px;
    padding: 0.375rem 2rem 0.375rem 2.25rem;
}

.filter-bar .search-box input:focus {
    width: 200px;
}

.filter-bar .filter-group .cliente-search-box {
    width: 100%;
}

.filter-bar .cliente-search-box input {
    padding: 0.375rem 2rem 0.375rem 2.25rem;
}

.filter-bar .cliente-search-box > i {
    left: 0.75rem;
    font-size: 0.875rem;
}

.filter-bar .cliente-clear {
    width: 20px;
    height: 20px;
}

.filter-bar .form-select,
.filter-bar .form-control {
    font-size: 0.875rem;
    border-color: var(--gray-300);
    padding: 0.375rem 0.625rem;
    height: auto;
}

.filter-bar .form-select:focus,
.filter-bar .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.filter-bar .additional-filters {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.filter-bar .additional-filters .filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-bar .additional-filters label {
    font-size: 0.8rem;
    color: var(--gray-600);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-bar .search-box {
        width: 100%;
    }

    .filter-bar .search-box input,
    .filter-bar .search-box input:focus {
        width: 100%;
    }

    .filter-bar .form-select,
    .filter-bar .form-control {
        width: 100% !important;
    }
}

/* ========================================
   Filter Cuenta Search (filter bar autocomplete)
   ======================================== */
.filter-cuenta-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 200px;
}

.filter-cuenta-search > i {
    position: absolute;
    left: 0.625rem;
    color: var(--gray-400);
    font-size: 0.8rem;
    pointer-events: none;
}

.filter-cuenta-search input {
    width: 100%;
    padding: 0.375rem 2rem 0.375rem 2rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius-sm);
    font-size: 0.875rem;
    background: white;
    transition: all 0.2s;
}

.filter-cuenta-search input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.filter-cuenta-search input::placeholder {
    color: var(--gray-400);
}

.filter-cuenta-clear {
    position: absolute;
    right: 0.375rem;
    width: 20px;
    height: 20px;
    border: none;
    background: var(--gray-200);
    border-radius: 50%;
    color: var(--gray-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    padding: 0;
}

.filter-cuenta-clear:hover {
    background: var(--gray-300);
}

.filter-cuenta-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    max-height: 280px;
    overflow-y: auto;
    margin-top: 0.25rem;
    z-index: 100;
    min-width: 280px;
}

.filter-cuenta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--gray-100);
}

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

.filter-cuenta-item:hover,
.filter-cuenta-item.highlighted {
    background: var(--primary-light);
}

.filter-cuenta-item i {
    color: var(--primary-color);
    font-size: 0.9rem;
}

.filter-cuenta-item-info {
    display: flex;
    flex-direction: column;
}

.filter-cuenta-item-info span {
    font-weight: 500;
    color: var(--gray-800);
    font-size: 0.825rem;
}

.filter-cuenta-item-info small {
    color: var(--gray-500);
    font-size: 0.725rem;
}

.filter-cuenta-empty {
    padding: 1rem;
    text-align: center;
    color: var(--gray-500);
    font-size: 0.825rem;
}

@media (max-width: 768px) {
    .filter-cuenta-search {
        width: 100%;
    }
}

/* ========================================
   INVOICE PAGE - Diseño 2 columnas
   ======================================== */
.invoice-page {
    height: calc(100vh - 80px);
    background: var(--gray-100);
    margin: -1.5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.invoice-header {
    background: linear-gradient(135deg, #102361 0%, #380545 100%);
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.invoice-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.invoice-icon {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.invoice-header h1 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.invoice-header p {
    margin: 0.125rem 0 0 0;
    opacity: 0.85;
    font-size: 0.8rem;
}

.invoice-header-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-header-cancel {
    padding: 0.4rem 0.875rem;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    color: white;
    font-weight: 500;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.2s;
}

.btn-header-cancel:hover {
    background: rgba(255,255,255,0.25);
}

.btn-header-save {
    padding: 0.4rem 1rem;
    background: white;
    border: none;
    border-radius: 8px;
    color: #6366f1;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-header-save:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.btn-header-save:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.invoice-body {
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.invoice-left {
    background: white;
    padding: 1rem 1.25rem;
    border-right: 1px solid var(--gray-200);
    overflow-y: auto;
}

.invoice-right {
    background: var(--gray-50);
    padding: 1rem;
    padding-bottom: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 0.75rem;
    overflow: hidden;
}

.invoice-section {
    margin-bottom: 0.875rem;
    background: var(--gray-50);
    padding: 0.875rem;
    border-radius: 10px;
    border: 1px solid var(--gray-200);
}

.invoice-section.client-section {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border: 1px solid #c7d2fe;
}

.section-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.section-label i {
    color: var(--primary-color);
    font-size: 0.9rem;
}

.invoice-fields-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.invoice-field.medium {
    min-width: 180px;
}

.invoice-field.medium + .invoice-field label {
    white-space: nowrap;
}

.invoice-field.medium + .invoice-field .form-control {
    min-width: 120px;
}

.invoice-field.wide {
    grid-column: span 2;
}

.invoice-field-row {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.invoice-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gray-600);
    margin-bottom: 0.375rem;
}

.invoice-field .form-control,
.invoice-field .form-select {
    padding: 0.375rem 0.625rem;
    font-size: 0.8rem;
}

/* Cliente Search Box */
.cliente-search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.cliente-search-box > i {
    position: absolute;
    left: 0.875rem;
    color: var(--gray-400);
    font-size: 0.9rem;
    pointer-events: none;
}

.cliente-search-box input {
    width: 100%;
    padding: 0.625rem 2.5rem 0.625rem 2.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.875rem;
    background: white;
    transition: all 0.2s;
}

.cliente-search-box input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.cliente-clear {
    position: absolute;
    right: 0.5rem;
    width: 24px;
    height: 24px;
    border: none;
    background: var(--gray-200);
    border-radius: 50%;
    color: var(--gray-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.cliente-clear:hover {
    background: var(--gray-300);
}

.cliente-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    max-height: 280px;
    overflow-y: auto;
    margin-top: 0.25rem;
    z-index: 100;
}

.cliente-search-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--gray-100);
}

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

.cliente-search-item:hover,
.cliente-search-item.highlighted {
    background: var(--primary-light);
}

.cliente-search-item i {
    color: var(--primary-color);
    font-size: 1rem;
}

.cliente-item-info {
    display: flex;
    flex-direction: column;
}

.cliente-item-info span {
    font-weight: 500;
    color: var(--gray-800);
    font-size: 0.85rem;
}

.cliente-item-info small {
    color: var(--gray-500);
    font-size: 0.75rem;
}

.cliente-search-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--gray-500);
    font-size: 0.85rem;
}

.invoice-section.collapsible {
    background: transparent;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
}

.section-toggle {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: var(--gray-50);
    border: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gray-700);
}

.section-toggle:hover {
    background: var(--gray-100);
}

.section-toggle .bi-chevron-down,
.section-toggle .bi-chevron-up {
    margin-left: auto;
    color: var(--gray-400);
}

.badge-optional {
    font-size: 0.65rem;
    padding: 0.125rem 0.375rem;
    background: var(--gray-200);
    color: var(--gray-600);
    border-radius: 4px;
    font-weight: 500;
}

.invoice-section.collapsible .invoice-fields-grid {
    padding: 0 0.875rem 0.875rem 0.875rem;
}

.invoice-section.collapsible .section-label {
    padding-left: 0.875rem;
}

.invoice-section textarea.form-control {
    font-size: 0.8rem;
    padding: 0.5rem 0.625rem;
}

/* DICOSE Groups */
.dicose-group {
    background: var(--gray-100);
    border-radius: var(--border-radius-sm);
    padding: 0.75rem;
    margin: 0 0.875rem;
}

.dicose-group-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.dicose-group-label i {
    font-size: 0.875rem;
}

.dicose-group .invoice-fields-grid {
    padding: 0;
}

/* Product Search */
.product-search-section {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--gray-50);
    padding-bottom: 0.375rem;
}

.product-search-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.product-search-box {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
}

.btn-search-modal {
    width: 38px;
    height: 38px;
    border: 1px solid var(--primary-color);
    background: var(--primary-light);
    border-radius: 8px;
    color: var(--primary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-search-modal:hover {
    background: var(--primary-color);
    color: white;
}

.product-search-box > i {
    position: absolute;
    left: 0.75rem;
    color: var(--gray-400);
    font-size: 0.875rem;
}

.product-search-box input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.8rem;
    background: white;
    transition: all 0.2s;
}

.product-search-box input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.product-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    max-height: 280px;
    overflow-y: auto;
    margin-top: 0.25rem;
    z-index: 100;
}

.search-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--gray-100);
}

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

.search-item:hover,
.search-item.highlighted {
    background: var(--primary-light);
}

.search-item i {
    font-size: 0.875rem;
}

.search-item.animal {
    border-left: 3px solid #6366f1;
}

.search-item.animal:hover {
    background: #eef2ff;
}

.search-item.animal i {
    color: #6366f1;
}

.search-item.articulo {
    border-left: 3px solid #10b981;
}

.search-item.articulo:hover {
    background: #ecfdf5;
}

.search-item.articulo i {
    color: #10b981;
}

.search-item-info {
    display: flex;
    flex-direction: column;
}

.search-item-info span {
    font-weight: 500;
    color: var(--gray-800);
    font-size: 0.8rem;
}

.search-item-info small {
    color: var(--gray-500);
    font-size: 0.7rem;
}

.search-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--gray-500);
    font-size: 0.8rem;
}

/* Products List */
.products-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
    overflow: visible;
}

.products-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #111827;
    gap: 0.375rem;
}

.products-empty i {
    font-size: 2.25rem;
}

.products-empty p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Product Card */
.product-card {
    background: white;
    border-radius: 8px;
    border: 1px solid var(--gray-400);
    overflow: hidden;
    transition: all 0.2s;
    flex-shrink: 0;
    box-shadow: var(--shadow);
}

.product-card:hover {
    box-shadow: var(--shadow-md);
}

.product-card.animal {
    border-left: 4px solid #10b981;
}

.product-card.articulo {
    border-left: 4px solid #6366f1;
}

.product-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
}

.product-type-badge {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.product-card.animal .product-type-badge {
    background: #d1fae5;
    color: #10b981;
}

.product-card.articulo .product-type-badge {
    background: #e0e7ff;
    color: #6366f1;
}

.product-name {
    flex: 1;
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-remove {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: none;
    background: #fee2e2;
    color: #f87171;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    font-size: 0.8rem;
}

.product-remove:hover {
    background: #fecaca;
    color: #ef4444;
}

.product-card-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 0.5rem;
    padding: 0.625rem;
    align-items: end;
}

.product-card.animal .product-card-body {
    grid-template-columns: repeat(10, 1fr) auto;
}

.product-field {
    min-width: 0;
}

.product-field label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.25rem;
}

.product-field input {
    width: 100%;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--gray-400);
    border-radius: 6px;
    font-size: 0.75rem;
    text-align: right;
}

.product-field input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.product-field.readonly .field-value {
    display: block;
    padding: 0.3rem 0.4rem;
    background: var(--gray-200);
    border: 1px solid var(--gray-400);
    border-radius: 6px;
    font-size: 0.75rem;
    text-align: right;
    color: var(--gray-800);
    font-weight: 500;
}

.product-total {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gray-900);
    padding: 0.3rem 0;
    text-align: right;
    white-space: nowrap;
}

/* Product Table Sections */
.product-table-section {
    background: white;
    border-radius: 10px;
    margin-bottom: 0.5rem;
    border: 1px solid var(--gray-300);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.product-table-section.animal {
    border-left: 4px solid #6366f1;
    border-top: 1px solid #c7d2fe;
}

.product-table-section.articulo {
    border-left: 4px solid #10b981;
    border-top: 1px solid #a7f3d0;
}

.product-table-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--gray-200);
    font-weight: 600;
    font-size: 0.85rem;
}

.product-table-section.animal .product-table-header {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    color: #4338ca;
}

.product-table-section.animal .product-table-header i {
    color: #6366f1;
    font-size: 1rem;
}

.product-table-section.articulo .product-table-header {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: #047857;
}

.product-table-section.articulo .product-table-header i {
    color: #10b981;
    font-size: 1rem;
}

.product-table-wrapper {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Tablas dinamicas: 1 tabla = crece, 2 tablas = compactas */
.products-list.single-table .product-table-section {
    max-height: 665px;
}

.products-list.dual-tables .product-table-section {
    max-height: 328px;
}

/* Error message en invoice-page */
.invoice-page > .error-message {
    margin-top: 0.4rem;
}

.product-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.product-table thead {
    background: #e8e8e8;
    position: sticky;
    top: 0;
    z-index: 1;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

.product-table th {
    padding: 0.5rem 0.4rem;
    text-align: center;
    font-weight: 600;
    color: #333;
    font-size: 0.7rem;
    white-space: nowrap;
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    border-right: 1px solid #ccc;
}

.product-table th:last-child {
    border-right: none;
}

.product-table th.col-desc {
    text-align: left;
    padding-left: 0.75rem;
}

.product-table tbody tr {
    border-bottom: 1px solid var(--gray-200);
    transition: background 0.15s ease;
}

.product-table tbody tr:last-child {
    border-bottom: 1px solid var(--gray-200);
}

.product-table tbody tr:nth-child(even) {
    background: var(--gray-50);
}

.product-table tbody tr:hover {
    background: var(--gray-100);
}

.product-table td {
    padding: 0.4rem 0.3rem;
    vertical-align: middle;
}

.product-table td.col-desc {
    color: var(--gray-900);
    padding-left: 0.5rem;
    font-size: 0.8rem;
}

.product-table td.col-num {
    text-align: center;
}

.product-table th.col-num-sm,
.product-table td.col-num-sm {
    width: 160px;
    text-align: center;
}

.product-table td.col-num-sm input {
    text-align: center;
}

.product-table td.col-num.readonly {
    color: var(--gray-600);
    font-weight: 500;
    font-size: 0.75rem;
}

.product-table td.col-num.readonly span {
    display: block;
    width: 100%;
    padding: 0.25rem 0.4rem;
    background: #f5f5f5;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    text-align: left;
    box-sizing: border-box;
}

.product-table td.col-total {
    text-align: right;
    font-weight: 700;
    padding-right: 0.5rem;
    white-space: nowrap;
    font-size: 0.85rem;
}

.product-table-section.animal .product-table td.col-total {
    color: #059669;
}

.product-table-section.articulo .product-table td.col-total {
    color: #059669;
}

.product-table td.col-action {
    text-align: center;
    width: 32px;
}

/* Código column */
.product-table th.col-code {
    text-align: left;
    padding-left: 0.5rem;
    width: 130px;
    min-width: 110px;
}

.product-table td.col-code {
    padding: 0.2rem 0.3rem;
    position: relative;
    width: 130px;
    min-width: 110px;
}

.line-search-box {
    position: relative;
}

.line-search-box input {
    width: 100%;
    max-width: none !important;
    min-width: 90px !important;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: 0.75rem;
    text-align: left;
}

.line-search-box input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.line-search-dropdown {
    position: fixed;
    min-width: 260px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    max-height: 220px;
    overflow-y: auto;
    z-index: 9999;
}

.product-table input {
    width: 100%;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: 0.75rem;
    text-align: left;
    box-sizing: border-box;
}

.product-table input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.product-table select {
    width: 100%;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: 0.75rem;
    box-sizing: border-box;
    background-color: #fff;
}

.product-table select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.product-table .btn-remove {
    background: #fef2f2;
    border: none;
    color: #f87171;
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 4px;
    transition: all 0.15s;
    font-size: 1rem;
}

.product-table .btn-remove:hover {
    background: #fee2e2;
    color: #ef4444;
}

/* Totals Card - Se extiende hasta el borde del panel izquierdo */
.totals-card {
    background: white;
    border-top: 2px solid var(--gray-200);
    border-radius: 0;
    padding: 1rem;
    margin-left: -1rem;
    margin-right: -1rem;
}

.totals-row {
    display: flex;
    justify-content: space-between;
    padding: 0.375rem 0;
    font-size: 0.85rem;
    color: var(--gray-600);
}

.totals-row.tax {
    color: var(--gray-700);
    font-size: 0.75rem;
}

.totals-summary {
    border-top: 1px solid var(--gray-200);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.totals-row.minor {
    font-size: 0.8rem;
    color: var(--gray-500);
}

.totals-row.final {
    border-top: 2px solid var(--gray-300);
    margin-top: 0.375rem;
    padding-top: 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--success-color);
}

/* Error Message */
.error-message {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.35rem 0.75rem;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 0.8rem;
    font-weight: 500;
}

.error-message .error-dismiss {
    background: transparent;
    border: none;
    color: #dc2626;
    cursor: pointer;
    padding: 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.15s, background 0.15s;
}

.error-message .error-dismiss i {
    font-size: 1.35rem;
}

.error-message .error-dismiss:hover {
    opacity: 1;
    background: rgba(220, 38, 38, 0.1);
}

/* Responsive */
@media (max-width: 900px) {
    .invoice-body {
        grid-template-columns: 1fr;
    }

    .invoice-left {
        border-right: none;
        border-bottom: 1px solid var(--gray-200);
    }

    .invoice-header {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .invoice-header-left {
        flex-direction: column;
    }

    .invoice-fields-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   Modo Inmersivo - Oculta sidebar
   ======================================== */
.immersive-mode .sidebar {
    display: none;
}

.immersive-mode .main-content {
    margin-left: 0 !important;
}

.immersive-mode .content {
    padding: 0;
}

.immersive-mode .invoice-page {
    height: 100vh;
    margin: 0;
}

/* ========================================
   INVOICE PAGE V2 - Layout Horizontal
   ======================================== */

/* Data Wrapper - Contenedor padre de todos los datos */
.invoice-data-wrapper {
    background: rgb(243, 246, 255);
    padding: 0.375rem;
    border-bottom: 1px solid #e0e7ff;
}

/* Data Card - Card blanca contenedora */
.invoice-data-card {
    background: white;
    border: 1px solid #e0e7ff;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08);
    padding: 0.375rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* Data Row - Cada fila dentro de la card */
.invoice-data-row {
    display: flex;
    gap: 0.375rem;
    align-items: stretch;
}

.invoice-data-col {
    background: var(--gray-50);
    padding: 0.375rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--gray-200);
}

.invoice-data-col .section-label {
    margin-bottom: 0.375rem;
    font-size: 0.8rem;
}

/* Cliente Column - Violeta/Indigo */
.invoice-data-col.cliente-col.cliente-col-wide {
    min-width: 360px;
    width: 360px;
}

.invoice-data-col.cliente-col {
    min-width: 260px;
    width: 260px;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border: 1px solid #c7d2fe;
    display: flex;
    flex-direction: column;
}

.cliente-col .section-label {
    color: #4f46e5;
}

.cliente-col .section-label i {
    color: #6366f1;
}

.cliente-col .cliente-search-box {
    flex: 1;
    display: flex;
    align-items: center;
}

.cliente-col .cliente-search-box input {
    font-size: 0.8rem;
    padding: 0.5rem 2rem 0.5rem 2rem;
    border-color: #a5b4fc;
}

.cliente-col .cliente-search-box input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Comprobante Column - Violeta */
.invoice-data-col.comprobante-col {
    flex: 1;
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border: 1px solid #c7d2fe;
}

.comprobante-fields-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    flex-wrap: nowrap;
}

.comprobante-fields-row .invoice-field {
    flex: 1;
}

.comprobante-fields-row .invoice-field.field-tipo {
    flex: 1;
    max-width: 220px;
}

.comprobante-fields-row .invoice-field.field-narrow {
    flex: 0.3;
}

.comprobante-fields-row .invoice-field.field-condicion {
    flex: 0.4;
}

.comprobante-fields-row .invoice-field.field-mini {
    flex: 0.18;
}

.comprobante-fields-row .invoice-field label {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
    color: #111827;
    font-weight: 600;
}

.comprobante-fields-row .invoice-field .form-control,
.comprobante-fields-row .invoice-field .form-select {
    padding: 0.375rem 0.5rem;
    font-size: 0.8rem;
}

.btn-hacienda-toggle {
    width: 36px;
    height: 36px;
    border: 1.5px solid #f59e0b;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 8px;
    color: #b45309;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-hacienda-toggle:hover {
    background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
    border-color: #d97706;
    color: #92400e;
    transform: scale(1.05);
}

.btn-hacienda-toggle.active {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-color: #92400e;
    color: white;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.5);
}

/* Hacienda Section */
.hacienda-section {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border: 1px solid #c7d2fe;
    border-radius: 6px;
    padding: 0.625rem;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Fila de datos básicos */
.hacienda-datos-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.hacienda-datos-row .invoice-field {
    flex: 1;
    min-width: 100px;
}

.hacienda-datos-row .invoice-field label {
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
    display: block;
    color: #111827;
    font-weight: 600;
}

.hacienda-datos-row .invoice-field .form-control,
.hacienda-datos-row .invoice-field .form-select {
    padding: 0.3rem 0.4rem;
    font-size: 0.75rem;
}

/* Fila Vendedor | Comprador */
.hacienda-dicose-row {
    display: flex;
    gap: 1rem;
}

.dicose-section {
    flex: 1;
    background: white;
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #a5b4fc;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.1);
}

.dicose-section.vendedor {
    border-left: 4px solid #6366f1;
}

.dicose-section.comprador {
    border-left: 4px solid #f59e0b;
}

.dicose-title {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.dicose-section.vendedor .dicose-title {
    color: #4f46e5;
}

.dicose-section.vendedor .dicose-title i {
    color: #6366f1;
}

.dicose-section.comprador .dicose-title {
    color: #b45309;
}

.dicose-section.comprador .dicose-title i {
    color: #f59e0b;
}

.dicose-fields {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.dicose-fields .invoice-field {
    flex: 1;
    min-width: 70px;
}

.dicose-fields .invoice-field label {
    font-size: 0.75rem;
    margin-bottom: 0.35rem;
    display: block;
    color: #111827;
    font-weight: 600;
}

.dicose-fields .invoice-field .form-control,
.dicose-fields .invoice-field .form-select {
    padding: 0.25rem 0.35rem;
    font-size: 0.7rem;
}

/* Guías de Salida - Lista dinámica */
.guias-salida-field {
    min-width: 280px !important;
}

.guias-salida-row {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.guias-salida-row .form-control {
    flex: 1;
    min-width: 0;
}

.guias-salida-row .guias-salida-select {
    flex: 1;
    min-width: 0;
}

.guias-salida-btn {
    padding: 0.25rem 0.45rem;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Observaciones Column - Violeta */
.invoice-data-col.observaciones-col {
    min-width: 360px;
    width: 360px;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border: 1px solid #c7d2fe;
    padding: 0.375rem 0.5rem;
    display: flex;
    flex-direction: column;
}

.observaciones-col .section-label {
    color: #4f46e5;
    margin-bottom: 0.25rem;
}

.observaciones-col .section-label i {
    color: #6366f1;
}

.observaciones-col textarea {
    font-size: 0.75rem;
    padding: 0.375rem 0.5rem;
    resize: none;
    flex: 1;
    min-height: 28px;
    border-color: #c7d2fe;
    background: white;
}

.observaciones-col textarea:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Items Section */
.invoice-items-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgb(235, 240, 255);
    min-height: 0;
    overflow: hidden;
}

.invoice-items-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    margin: 0.375rem;
    background: white;
    border: 1px solid #e0e7ff;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08);
    overflow: hidden;
}

.invoice-items-content .product-search-section {
    flex-shrink: 0;
    background: white;
    padding: 0.25rem 0.375rem;
    border-radius: 12px;
    border: 1px solid var(--gray-300);
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-sm);
}

.invoice-items-content .products-list {
    flex: 1;
    overflow-y: visible;
    overflow-x: hidden;
    margin-bottom: 0;
}

.invoice-items-content > .data-table-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ========================================
   LAYOUT 80/20 - Main + Sidebar
   ======================================== */
.invoice-main-layout {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.invoice-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* Sidebar Derecho */
.invoice-sidebar {
    width: 280px;
    min-width: 280px;
    background: white;
    border-left: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    gap: 0.5rem;
    overflow-y: auto;
}

.sidebar-section {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 0.5rem;
}

.sidebar-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.sidebar-label i {
    font-size: 0.75rem;
}

/* Totales Card - Diseño unificado */
.sidebar-totales-card {
    flex: 6;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Subtotal header */
.sidebar-subtotal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: #374151;
    background: #e5e7eb;
    border-bottom: 1px solid #d1d5db;
}

/* Sección de impuestos */
.sidebar-taxes {
    flex: 1;
    padding: 0.5rem;
    overflow-y: auto;
}


.sidebar-taxes-empty {
    color: #9ca3af;
    font-size: 0.75rem;
    text-align: center;
    padding: 0.5rem;
}

.sidebar-tax-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.75rem;
    color: #1f2937;
}

/* Sección de subtotales */
.sidebar-subtotals {
    padding: 0.5rem;
    border-top: 1px solid #111827;
    border-bottom: 1px solid var(--gray-200);
}

.sidebar-row {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}

/* Total final */
.sidebar-total-final {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border-top: 2px solid #22c55e;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.sidebar-total-final span:first-child {
    font-size: 0.9rem;
    font-weight: 700;
    color: #16a34a;
}

.sidebar-total-final span:last-child {
    font-size: 1.1rem;
    font-weight: 700;
    color: #16a34a;
}

/* Observaciones - 40% */
.sidebar-section.observaciones {
    flex: 4;
    display: flex;
    flex-direction: column;
    min-height: 60px;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    background: #f3f4f6;
    border-color: #d1d5db;
}

.sidebar-section.observaciones .sidebar-label {
    color: #111827;
    font-size: 0.8rem;
}

.sidebar-section.observaciones .sidebar-label i {
    color: #374151;
    font-size: 0.85rem;
}

.sidebar-section.observaciones textarea {
    flex: 1;
    font-size: 0.75rem;
    padding: 0.375rem;
    resize: none;
    min-height: 60px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: white;
}

.sidebar-section.observaciones textarea:focus {
    border-color: #6b7280;
    box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.15);
    outline: none;
}

/* Pagos (Contado) */
.sidebar-section.pagos {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.sidebar-section.pagos .sidebar-label {
    color: var(--gray-900);
    font-size: 0.8rem;
}

.sidebar-section.pagos .sidebar-label i {
    color: var(--gray-700);
    font-size: 0.85rem;
}

.pago-row {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}

.pago-row .form-select {
    flex: 1;
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
    height: 30px;
}

.pago-row .pago-monto {
    width: 100px;
    flex: 0 0 100px;
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
    height: 30px;
    text-align: right;
}

.pago-row .btn-remove {
    padding: 0.15rem 0.3rem;
    font-size: 0.7rem;
    color: var(--gray-400);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

.pago-row .btn-remove:hover {
    color: var(--danger-color);
    background: #fee2e2;
}

.pago-block {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.pago-cotizacion-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding-left: 0.3rem;
}

.pago-cotiz-label {
    font-size: 0.7rem;
    color: var(--gray-500);
    white-space: nowrap;
}

.pago-cotiz {
    width: 70px;
    flex: 0 0 70px;
    font-size: 0.7rem;
    padding: 0.15rem 0.3rem;
    height: 24px;
    text-align: right;
}

.pago-equiv {
    font-size: 0.7rem;
    color: var(--gray-500);
    white-space: nowrap;
}

.btn-add-pago {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--gray-500);
    background: none;
    border: 1px dashed var(--gray-300);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    width: 100%;
    justify-content: center;
}

.btn-add-pago:hover {
    color: var(--gray-700);
    border-color: var(--gray-400);
    background: var(--gray-50);
}

.pago-summary {
    border-top: 1px solid var(--gray-200);
    padding-top: 0.3rem;
    margin-top: 0.2rem;
}

.pago-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--gray-700);
    padding: 0.1rem 0;
}

.pago-summary-row.diferencia {
    font-weight: 600;
}

/* Responsive para layout horizontal */
@media (max-width: 1200px) {
    .invoice-data-section {
        flex-wrap: wrap;
    }

    .invoice-data-col.cliente-col {
        max-width: none;
        flex: 1;
        min-width: 180px;
    }

    .invoice-data-col.observaciones-col {
        max-width: none;
        flex: 1;
        min-width: 180px;
    }

    .invoice-data-col.comprobante-col {
        flex: 100%;
        order: 3;
    }
}

@media (max-width: 1024px) {
    .invoice-sidebar {
        width: 200px;
        min-width: 200px;
    }
}

@media (max-width: 768px) {
    .invoice-main-layout {
        flex-direction: column;
    }

    .invoice-sidebar {
        width: 100%;
        min-width: 0;
        border-left: none;
        border-top: 1px solid var(--gray-200);
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .sidebar-section {
        flex: 1;
        min-width: 150px;
    }

    .sidebar-section.observaciones {
        flex: 100%;
        min-height: 60px;
    }

    .invoice-data-section {
        flex-direction: column;
        padding: 0.5rem;
    }

    .invoice-data-col.cliente-col,
    .invoice-data-col.comprobante-col,
    .invoice-data-col.observaciones-col {
        max-width: none;
        min-width: 0;
        width: 100%;
    }

    .comprobante-fields-row {
        flex-direction: column;
    }

    .comprobante-fields-row .invoice-field {
        min-width: 0;
        width: 100%;
    }

    .hacienda-dicose-row {
        flex-direction: column;
    }

    .dicose-section {
        min-width: 0;
    }
}

/* ========================================
   VIEW MODE - Estilos para ViewV2.razor
   ======================================== */

/* Valores en modo vista (reemplaza inputs) */
.field-value {
    font-size: 0.8rem;
    font-weight: 500;
    color: #1f2937;
    padding: 0.35rem 0.5rem;
    background: var(--gray-100);
    border-radius: 6px;
    min-height: 32px;
    display: flex;
    align-items: center;
}

.field-value.dicose {
    font-family: monospace;
    font-size: 0.75rem;
    background: #e0e7ff;
    color: #3730a3;
    font-weight: 600;
}

/* Cliente display (reemplaza search box) */
.cliente-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fbbf24;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #92400e;
}

.cliente-display i {
    font-size: 1rem;
    color: #d97706;
}

/* Observaciones como texto (reemplaza textarea) */
.observaciones-text {
    font-size: 0.8rem;
    color: #374151;
    padding: 0.5rem;
    background: white;
    border-radius: 4px;
    border: 1px solid #d1d5db;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Tabla de productos en modo vista */
.product-table.view-mode td {
    padding: 0.5rem 0.4rem;
    font-size: 0.8rem;
}

.product-table.view-mode .col-desc {
    font-weight: 500;
}

.product-table.view-mode .col-num {
    text-align: right;
}

.product-table.view-mode .col-total {
    font-weight: 600;
    color: #16a34a;
}

/* ========================================
   Permisos - Tabs y Grupos
   ======================================== */
.permisos-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.permisos-tab {
    display: flex;
    align-items: center;
    padding: 0.6rem 1.2rem;
    border: 2px solid var(--gray-200);
    background: white;
    border-radius: 25px;
    color: var(--gray-600);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.permisos-tab:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.permisos-tab.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.permisos-tab-badge {
    margin-left: 0.5rem;
    background: rgba(255,255,255,0.25);
    padding: 0.15rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.permisos-tab:not(.active) .permisos-tab-badge {
    background: var(--success-color);
    color: white;
}

.permisos-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.permiso-grupo {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.permiso-grupo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid var(--gray-200);
}

.permiso-grupo-titulo {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 1rem;
}

.permiso-grupo-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.permiso-grupo-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.25rem;
    background: var(--gray-50);
}

.permiso-item {
    display: flex;
    align-items: center;
}

.permiso-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.9rem;
    user-select: none;
}

.permiso-check:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.permiso-check.selected {
    background: var(--success-color);
    border-color: var(--success-color);
}

.permiso-check.selected .permiso-check-label {
    color: white;
    font-weight: 600;
}

.permiso-check.selected:hover {
    background: #0d9668;
    border-color: #0d9668;
}

.permiso-check.has-filters {
    background: var(--success-color);
    border-color: var(--success-color);
}

.permiso-check-label {
    color: var(--gray-600);
}

.permiso-filter-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    margin-left: 0.5rem;
    border-radius: 6px;
    background: rgba(0,0,0,0.15);
    color: white;
    font-size: 0.8rem;
    transition: all 0.15s;
}

.permiso-filter-btn:hover {
    background: rgba(0,0,0,0.3);
}

.permiso-check.has-filters .permiso-filter-btn {
    background: #047857;
}

/* Restricciones Modal Grid */
.restricciones-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.restriccion-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.restriccion-item:hover {
    border-color: var(--primary-color);
    background: white;
}

.restriccion-item.checked {
    background: var(--success-light);
    border-color: var(--success-color);
}

.restriccion-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--success-color);
}

.restriccion-nombre {
    font-weight: 500;
    color: var(--gray-800);
    font-size: 0.85rem;
    flex: 1;
}

.restriccion-tipo {
    font-size: 0.7rem;
    color: var(--gray-500);
    background: var(--gray-100);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

.restriccion-item.checked .restriccion-tipo {
    background: var(--success-color);
    color: white;
}

.btn-restricciones {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
}

.btn-restricciones.tiene-restricciones {
    background: var(--warning-color);
    border-color: var(--warning-color);
    color: white;
}

.btn-restricciones.sin-restricciones {
    background: white;
    border: 1px solid var(--gray-300);
    color: var(--gray-600);
}

.btn-restricciones.sin-restricciones:hover {
    border-color: var(--warning-color);
    color: var(--warning-color);
}