/**
 * Estilos del Módulo de Documentos
 * Diseño estilo Google Drive con estética OpenAI
 */

/* ============================================== 
   PESTAÑAS DE VENTAS - DISEÑO MODERNO
   ============================================== */

.ventas-tabs {
    display: flex;
    gap: 4px;
    padding: 0 16px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ventas-tabs::-webkit-scrollbar {
    display: none;
}

.ventas-tab {
    position: relative;
    padding: 14px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
    color: #6b7280;
    transition: all 0.2s ease;
    font-size: 14px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ventas-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    border-radius: 2px 2px 0 0;
    transition: background 0.2s ease;
}

.ventas-tab:hover {
    color: #111827;
    background: #f9fafb;
}

.ventas-tab.active {
    color: #3b82f6;
    font-weight: 600;
}

.ventas-tab.active::after {
    background: #f59e0b;
}

/* Badge de contador en tabs */
.ventas-tab-badge,
.ventas-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    background: #e5e7eb;
    color: #6b7280;
    border-radius: 10px;
}

.ventas-tab.active .ventas-tab-badge,
.ventas-tab.active .ventas-tab-count {
    background: #dbeafe;
    color: #3b82f6;
}

/* Separador minimalista antes de la tab Rectificativas */
.ventas-tabs-separator {
    display: inline-flex;
    align-self: center;
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: #d1d5db;
    border-radius: 1px;
}

/* Fila de factura sustituida por rectificativa (gris / tachada visual) */
tr.table-doc-row.documento-sustituido {
    opacity: 0.75;
}
tr.table-doc-row.documento-sustituido .doc-numeracion,
tr.table-doc-row.documento-sustituido .doc-total {
    text-decoration: line-through;
}

/* Tab con icono de información */
.ventas-tab-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #9ca3af;
    font-size: 10px;
    cursor: help;
}

.ventas-tab-info:hover {
    background: #d1d5db;
    color: #6b7280;
}

/* ============================================== 
   LAYOUT PRINCIPAL
   ============================================== */

.documentos-container {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 12px;
}

/* Contenedor de ventas con split-view */
#ventas {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 !important; /* Eliminar padding para que el split-view ocupe todo el espacio */
}

#ventas .ventas-split-view {
    flex: 1;
    min-height: 0; /* Permite que el flex item se reduzca */
}

.documento-datos-container{
    width: 50%;
    padding: 10px;
}

/* ============================================== 
   TOOLBAR SUPERIOR
   ============================================== */

.docs-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.docs-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.docs-search {
    position: relative;
    flex: 1;
    max-width: 500px;
}

.docs-search-input {
    width: 100%;
    padding: 10px 12px 10px 38px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    background-color: #f9fafb;
}

.docs-search-input:focus {
    outline: none;
    border-color: #9ca3af;
    background-color: #ffffff;
}

.docs-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

/* Resultados de búsqueda */
.docs-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.docs-search-results.active {
    display: block;
}

.docs-search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
}

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

.docs-search-result-item:hover {
    background: #f9fafb;
}

.docs-search-result-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 6px;
    flex-shrink: 0;
}

.docs-search-result-icon svg {
    width: 18px;
    height: 18px;
    color: #6b7280;
}

.docs-search-result-content {
    flex: 1;
    min-width: 0;
}

.docs-search-result-name {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.docs-search-result-path {
    font-size: 12px;
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.docs-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============================================== 
   BREADCRUMB / NAVEGACIÓN
   ============================================== */

.docs-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow-x: auto;
}

.docs-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
    white-space: nowrap;
}

.docs-breadcrumb-item.clickable {
    cursor: pointer;
    color: #111827;
    font-weight: 500;
    transition: color 0.2s ease;
}

.docs-breadcrumb-item.clickable:hover {
    color: #3b82f6;
}

.docs-breadcrumb-separator {
    color: #d1d5db;
}

/* ============================================== 
   CONTENIDO PRINCIPAL - GRID
   ============================================== */

.docs-content {
    flex: 1;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
}

.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

/* ============================================== 
   ITEMS (CARPETAS Y DOCUMENTOS)
   ============================================== */

.docs-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #ffffff;
}

.docs-item:hover {
    border-color: #9ca3af;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.docs-item.selected {
    border-color: #3b82f6;
    background: #eff6ff;
}

.docs-item-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.docs-item-icon svg {
    width: 48px;
    height: 48px;
}

/* Iconos de carpeta con colores */
.docs-item.folder .docs-item-icon svg {
    fill: currentColor;
}

.docs-item.folder[data-color] .docs-item-icon {
    color: var(--folder-color, #FFA500);
}

/* Iconos de documentos por tipo */
.docs-item.document .docs-item-icon svg {
    color: #6b7280;
}

.docs-item-name {
    font-size: 13px;
    color: #111827;
    text-align: center;
    word-break: break-word;
    line-height: 1.4;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.docs-item-meta {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 4px;
}

/* Estados de drag & drop */
.docs-item.dragging {
    opacity: 0.5;
    cursor: move;
}

.docs-item.drag-over {
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* ============================================== 
   ESTADO VACÍO
   ============================================== */

.docs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    grid-column: 1 / -1;
    padding: 40px 0 !important;
}

.docs-empty svg {
    width: 64px;
    height: 64px;
    color: #d1d5db;
    margin-bottom: 16px;
}

.docs-empty h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.docs-empty p {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}

/* ============================================== 
   MODAL DE CARPETA
   ============================================== */

.docs-folder-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    display: none;
}

.docs-folder-modal.active {
    display: flex;
}

.docs-folder-modal-content {
    background: #ffffff;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.docs-folder-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.docs-folder-modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #111827;
}

.docs-folder-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.docs-folder-modal-close:hover {
    background: #f3f4f6;
}

.docs-folder-modal-body {
    padding: 24px;
}

.docs-folder-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.docs-color-picker {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.docs-color-option {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.docs-color-option:hover {
    transform: scale(1.1);
}

.docs-color-option.selected {
    border-color: #111827;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #111827;
}

/* ============================================== 
   MODAL DE INCIDENTES
   ============================================== */

.docs-incident-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    display: none;
}

.docs-incident-modal.active {
    display: flex;
}

.docs-incident-modal-content {
    background: #ffffff;
    border-radius: 12px;
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.docs-incident-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.docs-incident-modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #111827;
}

.docs-incident-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.docs-incident-modal-close:hover {
    background: #f3f4f6;
}

.docs-incident-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.docs-incident-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

.docs-incident-log {
    margin-top: 32px;
}

.docs-incident-log h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.docs-incident-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.docs-incident-item {
    padding: 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.docs-incident-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.docs-incident-item-user {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.docs-incident-item-date {
    font-size: 12px;
    color: #9ca3af;
}

.docs-incident-item-subject {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 4px;
}

.docs-incident-item-message {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
}

/* ============================================== 
   ZONA DE ARRASTRE
   ============================================== */

.docs-drop-zone {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(59, 130, 246, 0.1);
    border: 3px dashed #3b82f6;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
}

.docs-drop-zone.active {
    display: flex;
}

.docs-drop-zone-content {
    text-align: center;
    color: #3b82f6;
}

.docs-drop-zone-content svg {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
}

.docs-drop-zone-content h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

/* ============================================== 
   SCROLLBAR
   ============================================== */

.docs-content::-webkit-scrollbar {
    width: 8px;
}

.docs-content::-webkit-scrollbar-track {
    background: #f3f4f6;
}

.docs-content::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.docs-content::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ============================================== 
   RESPONSIVE
   ============================================== */

@media (max-width: 768px) {
    .documentos-container {
        padding: 12px;
    }

    .docs-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .docs-toolbar-left,
    .docs-toolbar-right {
        width: 100%;
    }

    .docs-search {
        max-width: none;
    }

    .docs-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }

    .docs-item {
        padding: 12px;
    }

    .docs-item-icon {
        width: 48px;
        height: 48px;
    }

    .docs-item-icon svg {
        width: 36px;
        height: 36px;
    }

    .docs-breadcrumb {
        padding: 8px 12px;
    }

    .docs-table-container table {
        font-size: 12px;
    }

    .docs-table-container th,
    .docs-table-container td {
        padding: 12px 8px !important;
    }
}

/* ============================================== 
   TOOLBAR DE BÚSQUEDA Y FILTROS
   ============================================== */

.docs-toolbar-search {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.docs-toolbar-search .table-search {
    flex: 1;
    max-width: 400px;
}

.docs-toolbar-search .table-search-input {
    width: 100%;
    padding: 10px 12px 10px 40px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    background: #f9fafb;
    transition: all 0.2s ease;
}

.docs-toolbar-search .table-search-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.docs-filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.docs-filter-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

.docs-filter-btn svg {
    width: 18px;
    height: 18px;
    stroke: #6b7280;
}

/* ============================================== 
   VISTA DE TABLA (MODO LISTADO)
   ============================================== */

.docs-table-container {
    width: 100%;
}

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

.docs-table-container thead {
    background: #f9fafb;
}

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

.docs-table-container tbody tr:hover {
    background-color: #f9fafb;
}

/* Estado vacío para tabla */
.table-empty-state {
    padding: 64px 24px !important;
    text-align: center;
    text-align: center;
    width: 100%;
    display: table-cell;
}

.table-empty-state svg {
    margin-bottom: 16px;
    color: #d1d5db;
}

.table-empty-state h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.table-empty-state p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

/* Botones de acción en tabla */
.table-action-btn {
    padding: 6px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.table-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: #6b7280;
}

.table-action-btn:hover {
    background-color: #f3f4f6;
}

.table-action-btn:hover svg {
    stroke: #111827;
}

.table-action-btn-primary:hover {
    background-color: #dbeafe;
}

.table-action-btn-primary:hover svg {
    stroke: #2563eb;
}

.table-action-btn-danger:hover {
    background-color: #fee2e2;
}

.table-action-btn-danger:hover svg {
    stroke: #dc2626;
}

/* Checkboxes personalizados */
.checkbox-select,
.checkbox-doc {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3b82f6;
    transition: transform 0.15s ease;
}

.checkbox-select:hover,
.checkbox-doc:hover {
    transform: scale(1.1);
}

/* Fila seleccionada */
.table-doc-row.row-selected {
    background-color: #eff6ff !important;
    border-left: 3px solid #3b82f6;
}

.table-doc-row.row-selected:hover {
    background-color: #dbeafe !important;
}

/* Barra de selección flotante - Diseño moderno (estilo imagen) */
.selection-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    border-radius: 50px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.1);
    padding: 12px 20px;
    z-index: 9999;
    animation: slideUpFadeIn 0.3s ease-out;
    max-width: 90vw;
}

@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.selection-bar-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selection-bar-info {
    display: none;
}

.selection-bar-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Botones de la barra de selección */
.selection-bar-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: 25px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.selection-bar-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.selection-bar-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    flex-shrink: 0;
}

/* Separador vertical */
.selection-bar-separator {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 8px;
}

/* Botón de eliminar (rojo al hover) */
.selection-bar-btn.btn-delete:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

/* Botón aceptado (verde al hover) */
.selection-bar-btn.btn-success:hover {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

/* Botón rechazado (rojo al hover) */
.selection-bar-btn.btn-danger:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

/* ============================================== 
   ESTILOS PARA TABLA DE LISTADO DE DOCUMENTOS
   ============================================== */

.documentos-list-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.documentos-list-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.documentos-list-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
    user-select: none;
}

/* Columnas ordenables */
.documentos-list-table th.sortable {
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.documentos-list-table th.sortable:hover {
    color: #111827;
    background: #f3f4f6;
}

.documentos-list-table th.sortable .sort-icon {
    display: inline-flex;
    margin-left: 6px;
    opacity: 0.3;
    transition: opacity 0.2s ease;
}

.documentos-list-table th.sortable:hover .sort-icon {
    opacity: 0.6;
}

.documentos-list-table th.sortable.sorted .sort-icon {
    opacity: 1;
    color: #3b82f6;
}

.documentos-list-table th.sortable.sorted {
    color: #3b82f6;
}

.documentos-list-table th.text-right {
    text-align: right;
}

.documentos-list-table th.text-center {
    text-align: center;
}

.documentos-list-table th.text-left {
    text-align: left;
}

/* Fila de filtros por columna (mismo estilo que clientes/proveedores en entity-management.css) */
.documentos-list-table-wrapper .entity-th-filters th,
.documentos-list-table-wrapper .docs-col-filters th {
    padding: 8px;
    vertical-align: middle;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.documentos-list-table-wrapper .entity-th-filters .form-input-sm,
.documentos-list-table-wrapper .entity-th-filters .entity-col-filter-input,
.documentos-list-table-wrapper .docs-col-filters .form-input-sm,
.documentos-list-table-wrapper .docs-col-filters .entity-col-filter-input {
    width: calc(100% - 16px);
    min-width: 0;
    padding: 6px 8px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.documentos-list-table-wrapper .entity-th-filters .form-input-sm:focus,
.documentos-list-table-wrapper .entity-th-filters .entity-col-filter-input:focus,
.documentos-list-table-wrapper .docs-col-filters .form-input-sm:focus,
.documentos-list-table-wrapper .docs-col-filters .entity-col-filter-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.documentos-list-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
    vertical-align: middle;
}

.documentos-list-table td.text-right {
    text-align: right;
}

.documentos-list-table td.text-center {
    text-align: center;
}

.documentos-list-table tbody tr {
    cursor: pointer;
    transition: all 0.15s ease;
}

.documentos-list-table tbody tr:hover {
    background-color: #f9fafb;
}

/* Estilos de celdas específicas */
.documentos-list-table .doc-numeracion {
    font-weight: 500;
    color: #111827;
}

.documentos-list-table .doc-cliente {
    color: #374151;
}

.documentos-list-table .doc-referencia {
    color: #6b7280;
}

.documentos-list-table .doc-fecha {
    color: #374151;
}

.documentos-list-table .doc-vencimiento {
    color: #6b7280;
}

.documentos-list-table .doc-total {
    font-weight: 600;
    color: #111827;
}

/* Badges de estado mejorados */
.documentos-list-table .badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

.badge-secondary {
    background: #f3f4f6;
    color: #6b7280;
}

.badge-success {
    background: #d1fae5;
    color: #059669;
}

.badge-danger {
    background: #fee2e2;
    color: #dc2626;
}

.badge-warning {
    background: #fef3c7;
    color: #d97706;
}

.badge-info {
    background: #dbeafe;
    color: #2563eb;
}

.badge-primary {
    background: #e0e7ff;
    color: #4f46e5;
}

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

.documentos-list-table .table-loading {
    padding: 64px 24px !important;
    text-align: center;
}

.documentos-list-table .table-actions {
    display: inline-flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

.documentos-list-table .table-empty-state {
    padding: 64px 24px !important;
    text-align: center;
    width: 100%;
    display: table-cell;
}

.documentos-list-table .table-empty-state svg {
    margin-bottom: 16px;
    color: #d1d5db;
}

.documentos-list-table .table-empty-state h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.documentos-list-table .table-empty-state p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

/* ============================================== 
   ESTILOS PARA SELECCIÓN MÚLTIPLE EN VENTAS
   ============================================== */

/* Checkboxes personalizados (ventas, presupuestos, pedidos: mismo estilo) */
.checkbox-select,
.checkbox-venta,
.checkbox-presupuesto,
.checkbox-pedido,
.checkbox-proyecto {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3b82f6;
    transition: transform 0.15s ease;
}

.checkbox-select:hover,
.checkbox-venta:hover,
.checkbox-presupuesto:hover,
.checkbox-pedido:hover {
    transform: scale(1.1);
}

/* Fila seleccionada */
.documentos-list-table tbody tr.row-selected {
    background-color: #eff6ff !important;
}

.documentos-list-table tbody tr.row-selected:hover {
    background-color: #dbeafe !important;
}

/* Fila activa (siendo visualizada) */
.documentos-list-table tbody tr.row-active {
    background-color: #f0f9ff !important;
    border-left: 3px solid #3b82f6;
}

.documentos-list-table tbody tr.row-active:hover {
    background-color: #e0f2fe !important;
}

/* Barra de selección flotante (ventas, presupuestos, pedidos: mismo diseño) */
#ventas-selection-bar.selection-bar,
#presupuestos-selection-bar.selection-bar,
#pedidos-selection-bar.selection-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    border-radius: 50px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.1);
    padding: 10px 16px;
    z-index: 9999;
    animation: slideUpFadeIn 0.3s ease-out;
    max-width: 95vw;
}

#ventas-selection-bar .selection-bar-content,
#presupuestos-selection-bar .selection-bar-content,
#pedidos-selection-bar .selection-bar-content {
    display: flex !important;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    visibility: visible;
    justify-content: center;
}

#ventas-selection-bar .selection-bar-actions,
#presupuestos-selection-bar .selection-bar-actions,
#pedidos-selection-bar .selection-bar-actions {
    display: flex !important;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

#ventas-selection-bar .selection-bar-btn,
#presupuestos-selection-bar .selection-bar-btn,
#pedidos-selection-bar .selection-bar-btn {
    color: #ffffff;
    visibility: visible;
}

/* ============================================== 
   ESTILOS PARA SPLIT-VIEW DE VENTAS
   ============================================== */

.ventas-split-view {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 0;
    overflow: hidden;
}

.ventas-list-panel {
    width: 50%;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e5e7eb;
    background: #ffffff;
    overflow: hidden;
    height: 100%;
    transition: width 0.3s ease;
}

/* Panel de lista a ancho completo cuando el detalle está oculto */
.ventas-list-panel.ventas-list-panel-full {
    width: 100%;
    max-width: 100%;
    border-right: none;
}

.ventas-list-panel .table-filters {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.ventas-list-panel .ventas-tabs {
    padding: 0 16px;
    margin: 0;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.ventas-list-panel .documentos-list-table-wrapper {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ventas-list-panel #ventas-pagination {
    padding: 16px;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.ventas-detail-panel {
    position: fixed;
    top: 60px;
    right: 0;
    width: 75%;
    max-width: 100%;
    height: calc(100vh - 60px);
    display: none;
    flex-direction: column;
    background: #ffffff;
    overflow: hidden;
    padding: 0;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    animation: slideInRight 0.3s ease;
}

.ventas-detail-panel.active {
    display: flex;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Overlay cuando el panel está abierto */
.ventas-detail-overlay {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
    display: none;
}

.ventas-detail-overlay.active {
    display: block;
}

.ventas-detail-panel #ventas-detail-content, #presupuestos-detail-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    overflow: hidden;
}



/* Fila activa en el listado */
.documentos-list-table tbody tr.row-active {
    background-color: #eff6ff !important;
    border-left: 3px solid #3b82f6;
}

.documentos-list-table tbody tr.row-active:hover {
    background-color: #dbeafe !important;
}

/* Responsive para ventas split-view y barra de selección */
@media (max-width: 992px) {
    .ventas-split-view {
        flex-direction: column;
        height: auto;
    }

    .ventas-list-panel {
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100vh - 120px);
        border-right: none;
    }

    .ventas-detail-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        z-index: 2000;
    }

    #ventas-selection-bar.selection-bar,
    #presupuestos-selection-bar.selection-bar,
    #pedidos-selection-bar.selection-bar {
        bottom: 16px;
        left: 16px;
        right: 16px;
        transform: none;
        width: auto;
        padding: 8px 12px;
        border-radius: 30px;
    }
    
    /* Tabla responsive */
    .documentos-list-table-wrapper {
        overflow-x: auto;
    }
    
    .documentos-list-table {
        min-width: 700px;
    }
}

/* ============================================== 
   ESTILOS PARA TABLA DE LÍNEAS DE DOCUMENTOS
   ============================================== */

.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    min-width: 0;
}

.table-wrapper table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Tabla de líneas de documento: ancho mínimo para scroll horizontal en lugar de columnas encimadas */
.table-wrapper .documento-lineas-table {
    min-width: 850px;
}

.table-wrapper table th {
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: #6b7280;
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}

.table-wrapper table th.text-right {
    text-align: right;
}

.table-wrapper table td:first-child {

}

/* Clases para columnas específicas */
.table-col-articulo {
    min-width: 200px;
    max-width: 300px;
}

.table-col-cantidad {
    width: 80px;
}

.table-col-precio {
    width: 100px;
}

.table-col-iva {
    width: 80px;
}

.table-col-descuento {
    width: 120px;
}

.table-col-subtotal {
    width: 100px;
}

.table-col-actions {
    width: 50px;
}

.table-empty-state {
    text-align: center;
    padding: 40px;
    color: #9ca3af;
}

.linea-nombre-wrapper {
    position: relative;
}

.table-wrapper table input[type="text"],
.table-wrapper table input[type="number"],
.table-wrapper table select {
    width: calc(100% - 16px);
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
}

.table-wrapper table input[type="text"]:focus,
.table-wrapper table input[type="number"]:focus,
.table-wrapper table select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Estilos para componente de descuento */
.descuento-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
}

.descuento-input-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.descuento-tipo-select {
    width: 60px;
    padding: 4px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 11px;
    background: #ffffff;
}

.descuento-value-input {
    flex: 1;
    min-width: 60px;
    padding: 4px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 12px;
}

.descuento-btn {
    padding: 4px 8px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    color: #6b7280;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.descuento-btn:hover {
    background: #e5e7eb;
    color: #111827;
}

.descuento-btn img,
.descuento-btn svg {
    width: 14px;
    height: 14px;
}

.descuento-display {
    font-size: 13px;
    color: #6b7280;
}

.descuento-display.has-descuento {
    color: #dc2626;
    font-weight: 500;
}

/* Estilos para totales */
.documento-totals {
    margin-top: 24px;
    padding: 20px;
    background: #f9fafb;
    border-radius: 8px;
    display: flex;
    justify-content: flex-end;
}

.documento-totals-content {
    max-width: 300px;
    width: 100%;
}

.documento-totals-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
    color: #6b7280;
}

.documento-totals-row-label {
    font-weight: 600;
}

.documento-totals-row-value {
    font-weight: 600;
}

.documento-totals-row-descuento {
    color: #dc2626;
}

.documento-totals-total {
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 2px solid #e5e7eb;
    font-size: 18px;
    color: #111827;
}

.documento-totals-total-label {
    font-weight: 700;
}

.documento-totals-total-value {
    font-weight: 700;
}

/* Responsive para barra de selección */
@media (max-width: 768px) {
    .selection-bar {
        bottom: 16px;
        left: 16px;
        right: 16px;
        transform: none;
        padding: 8px 12px;
        border-radius: 30px;
    }
    
    .selection-bar-content {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }
    
    .selection-bar-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .selection-bar-btn span {
        display: none;
    }
    
    .selection-bar-btn svg {
        margin: 0;
    }
    
    .selection-bar-separator {
        display: none;
    }
}

/* Tabs responsive */
@media (max-width: 768px) {
    .ventas-tabs {
        padding: 0 12px;
    }
    
    .ventas-tab {
        padding: 12px 14px;
        font-size: 13px;
    }
    
    .ventas-tab-badge {
        font-size: 10px;
        min-width: 18px;
        height: 18px;
    }
}

/* ============================================== 
   UPLOAD ZONE Y DRAG & DROP
   ============================================== */

.modal-upload-container {
    padding: 20px;
}

.upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    background: #f9fafb;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 200px;
}

.upload-zone:hover {
    border-color: #3b82f6;
    background: #f0f9ff;
}

.upload-zone.drag-over {
    border-color: #3b82f6;
    background: #dbeafe;
    transform: scale(1.02);
}

.upload-zone-svg {
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

.upload-zone.drag-over .upload-zone-svg {
    color: #3b82f6 !important;
    transform: scale(1.1);
}

.upload-zone-title {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 8px 0;
}

.upload-zone-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 20px 0;
    text-align: center;
}

.upload-buttons-container {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ============================================== 
   BOTÓN CREAR CLIENTE EN BUSCADOR
   ============================================== */

.cliente-result-create {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

.btn-create-cliente {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: #f3f4f6;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    color: #3b82f6;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s;
}

.btn-create-cliente:hover {
    background: #e5e7eb;
    border-color: #3b82f6;
    color: #2563eb;
}

.btn-create-cliente svg {
    flex-shrink: 0;
}


#create-cliente-modal .modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

#create-cliente-modal .modal-close:hover {
    background: #f3f4f6;
    color: #374151;
}

#create-cliente-modal .modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 0;
    margin-top: 24px;
    border-top: none;
}

.upload-info-text {
    font-size: 12px;
    color: #6b7280;
    text-align: center;
    margin: 16px 0 0 0;
}

.upload-file-item {
    transition: all 0.2s ease;
}

.upload-file-item:hover {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
}

.upload-file-item button:hover {
    background: #dc2626 !important;
    color: white !important;
}

/* ============================================== 
   CARDS DE DOCUMENTOS (VENTAS)
   ============================================== */

.documentos-list-cards-wrapper {
    display: flex;
    flex-direction: column;
}

.documentos-list-cards-header {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.documentos-list-cards {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.documento-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.documento-card:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.documento-card-alt {
    background: #f9fafb;
}

.documento-card-alt:hover {
    background: #f3f4f6;
}

.documento-card-selected {
    background: #eff6ff;
    border-color: #3b82f6;
}

.documento-card-active {
    background: #eff6ff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.documento-card-checkbox {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.documento-card-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.documento-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.documento-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.documento-card-nombre {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.documento-card-total {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    flex-shrink: 0;
}

.documento-card-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
}

.documento-card-numeracion {
    font-weight: 500;
    color: #374151;
}

.documento-card-separator {
    color: #d1d5db;
}

.documento-card-fecha {
    color: #6b7280;
}

.documento-card-estado-wrapper {
    margin-top: 4px;
}

.documento-card-estado {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.documento-card-estado-borrador {
    background: #f3f4f6;
    color: #6b7280;
}

.documento-card-estado-vencido {
    background: #fef3c7;
    color: #d97706;
}

.documento-card-estado-hoy {
    background: #fee2e2;
    color: #dc2626;
}

.documento-card-estado-pendiente {
    background: #dbeafe;
    color: #2563eb;
}

.documentos-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.documentos-empty-state svg {
    margin-bottom: 16px;
    color: #d1d5db;
}

.documentos-empty-state h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.documentos-empty-state p {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}

.documentos-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
}

/* ============================================== 
   PLACEHOLDER DEL PANEL DE DETALLE
   ============================================== */

.ventas-detail-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    padding: 60px 40px;
    text-align: center;
}

.ventas-detail-placeholder-icon {
    margin-bottom: 24px;
    color: #d1d5db;
    opacity: 0.6;
}

.ventas-detail-placeholder-icon svg {
    width: 80px;
    height: 80px;
}

.ventas-detail-placeholder-title {
    margin: 0 0 12px 0;
    font-size: 20px;
    font-weight: 600;
    color: #111827;
}

.ventas-detail-placeholder-text {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
    max-width: 300px;
}

/* ============================================== 
   BOTÓN NUEVO DOCUMENTO (ESTILO OPENAI)
   ============================================== */

.content-header {
    position: relative;
}

.btn-new-documento {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #3b82f6;
    border: 1px solid #e5e7eb;
    border-radius: 50px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: 12px;
    height: 32px;
    line-height: 1;
}

.btn-new-documento:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #111827;
}

.btn-new-documento:active {
    background: #f3f4f6;
    transform: scale(0.98);
}

.btn-new-documento svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.btn-new-documento span {
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Desplegable Ventas: Nuevo Ticket / Nueva Factura */
.ventas-new-dropdown-wrapper {
    position: relative;
    display: inline-block;
    margin-left: 12px;
    overflow: visible;
}
.ventas-new-dropdown-wrapper .btn-new-documento {
    margin-left: 0;
    padding-right: 13px;
}
.ventas-new-dropdown-wrapper .dropdown-chevron {
    margin-left: 4px;
    opacity: 0.9;
}
.ventas-new-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 9999;
    padding: 4px 0;
    display: none;
}
.ventas-new-dropdown-menu.open,
.ventas-new-dropdown-menu[aria-hidden="false"] {
    display: block;
}
.ventas-new-dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    border: none;
    background: none;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s;
}
.ventas-new-dropdown-item:hover {
    background: #f3f4f6;
}
.ventas-new-dropdown-item:active {
    background: #e5e7eb;
}

/* Etiqueta opcional en formularios (ticket sin cliente) */
.field-optional {
    font-weight: normal;
    color: #6b7280;
    font-size: 0.9em;
}

/* Asegurar que el h1 y el botón estén en la misma línea */
.content-header h1 {
    display: inline-block;
    margin: 0;
}


.btn-clear-item {
    position: absolute;
    right: 32px;
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    height: 37px;
    line-height: 3;
}



/* Responsive: ocultar texto en móvil, solo mostrar icono */
@media (max-width: 768px) {
    .btn-new-documento span {
        display: none;
    }
    
    .btn-new-documento {
        padding: 6px;
        width: 32px;
        justify-content: center;
        margin-left: 8px;
    }
}

/* ============================================== 
   PANEL DE INFORMACIÓN DEL CLIENTE
   ============================================== */

.cliente-info-panel {
    margin-top: 12px;
    padding: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.cliente-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #6b7280;
}

.cliente-info-item:last-of-type {
    margin-bottom: 0;
}

.cliente-info-icon {
    flex-shrink: 0;
}

.btn-edit-cliente-from-doc {
    margin-top: 4px;
}

.btn-edit-cliente-from-doc .btn-icon {
    margin-right: 4px;
}



/* ==========================================
   ESTILOS RESPONSIVOS (MÓVIL / TABLET)
   ========================================== */


/* Estilos base para el header móvil (oculto en desktop) */
.mobile-back-header {
    display: none;
}


/* ==========================================
   ESTILOS DE TARJETAS PARA TABLAS MÓVILES
   ========================================== */



/* ==========================================
   MEJORAS MÓVILES - DISEÑO COMPLETO
   ========================================== */

@media (max-width: 992px) {
    /* ===== CONTENEDOR PRINCIPAL ===== */
    .ventas-split-view {
        display: block;
        position: relative;
        height: calc(100vh - 60px);
        overflow: hidden;
    }

    .ventas-list-panel {
        width: 100%;
        height: 100%;
        border-right: none;
        padding-bottom: 80px;
    }

    .ventas-detail-panel {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2000;
        background-color: #ffffff;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        display: flex !important;
        flex-direction: column;
        opacity: 0;
        visibility: hidden;
    }

    .ventas-detail-panel.mobile-active {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        padding: 0 !important;
    }

    /* Mostrar botón de cerrar en mobile */
    .btn-close-detail-mobile {
        display: flex !important;
    }

    #ventas-detail-content, 
    #presupuestos-detail-content,
    #pedidos-detail-content {
        flex: 1;
        overflow-y: auto;
        padding: 0 !important;
        padding-bottom: 100px;
        -webkit-overflow-scrolling: touch;
        background-color: #f9fafb;
    }

    .ventas-detail-placeholder {
        display: none !important;
    }

    /* ===== HEADER MÓVIL ===== */
    .mobile-back-header {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        background: white;
        border-bottom: 1px solid #e5e7eb;
        position: sticky;
        top: 0;
        z-index: 10;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .btn-mobile-back {
        display: flex;
        align-items: center;
        gap: 8px;
        background: none;
        border: none;
        color: #374151;
        font-weight: 600;
        font-size: 16px;
        padding: 8px 0;
        cursor: pointer;
    }

    /* ===== CONTENIDO DEL FORMULARIO ===== */
    #ventas-detail-content > div,
    #presupuestos-detail-content > div,
    #pedidos-detail-content > div {
        padding: 20px 16px;
    }

    /* ===== TÍTULO Y BOTONES DE ACCIÓN ===== */
    #ventas-detail-content h2,
    #presupuestos-detail-content h2,
    #pedidos-detail-content h2 {
        font-size: 20px;
        margin: 0 0 20px 0;
        padding: 0 16px;
        font-weight: 700;
    }

    .documento-header-actions {
        display: flex;
        gap: 10px;
        padding: 0 16px 20px 16px;
        flex-wrap: wrap;
    }

    .documento-header-actions .btn {
        flex: 1;
        min-width: 100px;
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 600;
        border-radius: 8px;
    }

    /* ===== SECCIÓN DE DATOS BÁSICOS (Grid 2 columnas -> 1 columna) ===== */
    #ventas-detail-content > div > div[style*="grid-template-columns"],
    #presupuestos-detail-content > div > div[style*="grid-template-columns"],
    #pedidos-detail-content > div > div[style*="grid-template-columns"] {
        display: block !important;
        gap: 0 !important;
        margin-bottom: 24px !important;
    }

    #ventas-detail-content > div > div[style*="grid-template-columns"] > div,
    #presupuestos-detail-content > div > div[style*="grid-template-columns"] > div,
    #pedidos-detail-content > div > div[style*="grid-template-columns"] > div {
        margin-bottom: 24px;
        padding: 16px;
        background: white;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    #ventas-detail-content > div > div[style*="grid-template-columns"] > div:last-child,
    #presupuestos-detail-content > div > div[style*="grid-template-columns"] > div:last-child,
    #pedidos-detail-content > div > div[style*="grid-template-columns"] > div:last-child {
        margin-bottom: 0;
    }

    /* ===== TÍTULOS DE SECCIÓN ===== */
    h3 {
        font-size: 16px;
        font-weight: 700;
        margin: 0 0 12px 0;
        color: #111827;
    }

    /* ===== HEADER DEL DOCUMENTO EN MOBILE ===== */
    .documento-view-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 16px;
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 10;
    }
    
    .documento-view-header-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0;
        flex-shrink: 0;
    }
    
    /* Ocultar título y badge en mobile - se muestra en sección Información */
    .documento-view-title,
    .documento-view-header-left .badge {
        display: none !important;
    }
    
    /* Botón volver en mobile */
    .documento-view-header-left .btn-close-detail-mobile,
    .documento-view-header-left #btn-back-to-list,
    .documento-view-header-left #btn-cancel-ventas,
    .documento-view-header-left #btn-cancel-presupuestos,
    .documento-view-header-left #btn-cancel-pedidos {
        width: 40px;
        height: 40px;
        min-width: 40px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: #f3f4f6;
        border: none;
        color: #374151;
        flex-shrink: 0;
    }
    
    .documento-view-header-left .btn-close-detail-mobile span,
    .documento-view-header-left #btn-back-to-list span {
        display: none;
    }
    
    .documento-view-header-left .btn-close-detail-mobile svg,
    .documento-view-header-left #btn-back-to-list svg {
        width: 20px;
        height: 20px;
    }
    
    /* Mostrar número de factura en sección información */
    .documento-numero-mobile {
        display: block;
        grid-column: 1 / -1;
        padding-bottom: 12px;
        margin-bottom: 8px;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .documento-datos-value-destacado {
        font-size: 20px;
        font-weight: 700;
        color: #111827;
        margin: 0;
    }
    
    .documento-view-header-right {
        display: flex;
        gap: 8px;
        flex: 1;
        justify-content: flex-end;
    }
    
    .documento-view-header-right .btn {
        height: 40px;
        min-width: 40px;
        padding: 0 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        gap: 6px;
    }
    
    /* Botones con icono solo */
    .documento-view-header-right .btn-secondary,
    .documento-view-header-right .btn-warning,
    .documento-view-header-right .btn-danger {
        width: 40px;
        padding: 0;
        font-size: 0;
    }
    
    .documento-view-header-right .btn-secondary span,
    .documento-view-header-right .btn-warning span,
    .documento-view-header-right .btn-danger span {
        display: none;
    }
    
    .documento-view-header-right .btn svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }
    
    /* Colores de botones */
    .documento-view-header-right .btn-secondary {
        background: #f3f4f6;
        border: none;
        color: #374151;
    }
    
    .documento-view-header-right .btn-warning {
        background: #fef3c7;
        border: none;
        color: #92400e;
    }
    
    .documento-view-header-right .btn-danger {
        background: #fee2e2;
        border: none;
        color: #dc2626;
    }
    
    /* Botón primario con texto */
    .documento-view-header-right .btn-primary {
        width: auto;
        background: #111827;
        color: white;
        font-weight: 600;
    }
    
    /* ===== CONTENEDOR DEL FORMULARIO ===== */
    .documento-view-form-container {
        padding: 16px;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid #e5e7eb;
    }

    /* ===== INPUTS Y FORMULARIOS ===== */
    .form-input {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: white;
        margin-bottom: 12px;
        box-sizing: border-box;
    }

    .form-input:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
    
    /* ===== DOCUMENTO DATOS GRID - CORREGIR OVERFLOW ===== */
    .documento-datos-grid,
    .documento-datos-grid *,
    .documento-datos-section-content,
    .documento-datos-section-content * {
        box-sizing: border-box;
    }
    
    .documento-datos-section-content {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    
    .documento-datos-field {
        width: 100%;
    }
    
    .documento-datos-field input,
    .documento-datos-field select,
    .documento-datos-field textarea {
        width: calc(100% - 24px);
        max-width: 100%;
        box-sizing: border-box;
    }

    /* ===== BOTÓN CAMBIAR CLIENTE ===== */
    .btn-change-cliente,
    .btn-change-proveedor {
        width: 100%;
        margin-top: 8px;
        padding: 10px;
        font-size: 14px;
    }

    /* ===== DROPDOWN DE BÚSQUEDA DE CLIENTES/PROVEEDORES ===== */
    .cliente-search-results,
    .proveedor-search-results {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: 50vh !important;
        z-index: 20000 !important;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .cliente-result-item,
    .proveedor-result-item {
        padding: 14px 16px;
        min-height: 48px;
    }
    
    /* ===== PANEL DE INFORMACIÓN DEL CLIENTE ===== */
    .cliente-info-panel {
        margin-top: 12px;
        padding: 12px;
        background: #f9fafb;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
    }

    .cliente-info-item {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 8px;
        font-size: 14px;
        color: #374151;
    }

    .cliente-info-item:last-child {
        margin-bottom: 0;
    }

    /* ===== SECCIÓN DE LÍNEAS ===== */
    h3 + div {
        margin-top: 16px;
    }

    /* ===== TABLA DE LÍNEAS -> TARJETAS ===== */
    .table-wrapper {
        margin: 0;
        width: 100%;
        border: none;
        border-radius: 0;
        overflow: visible;
    }
    
    /* Box-sizing para todos los elementos de la tabla */
    .table-wrapper *,
    .table-wrapper *::before,
    .table-wrapper *::after {
        box-sizing: border-box;
    }

    .table-wrapper table, 
    .table-wrapper thead, 
    .table-wrapper tbody, 
    .table-wrapper th, 
    .table-wrapper td, 
    .table-wrapper tr { 
        display: block; 
    }

    .table-wrapper thead tr { 
        display: none;
    }

    .table-wrapper tr { 
        margin-bottom: 12px;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: white;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        padding: 12px;
        padding-top: 40px;
        position: relative;
    }

    .table-wrapper td { 
        border: none;
        border-bottom: 1px solid #f3f4f6; 
        padding: 8px 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left !important;
        width: 100%;
    }

    .table-wrapper td:last-child {
        border-bottom: none;
    }

    .table-wrapper td::before { 
        content: attr(data-label);
        font-size: 10px;
        text-transform: uppercase;
        color: #6b7280;
        font-weight: 600;
        margin-bottom: 4px;
        display: block;
        letter-spacing: 0.3px;
    }

    .table-wrapper td[data-label=""]::before,
    .table-wrapper td:not([data-label])::before {
        display: none;
    }

    /* Artículo destacado */
    .table-wrapper td.table-col-articulo {
        padding-top: 0;
        margin-bottom: 8px;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 10px;
    }
    
    .table-wrapper td.table-col-articulo::before {
        display: none;
    }
    
    .table-wrapper td.table-col-articulo input.linea-nombre {
        font-weight: 500;
        font-size: 15px;
        border: 1px solid #d1d5db;
        padding: 10px;
        border-radius: 6px;
        background-color: #f9fafb;
        width: 100%;
        -webkit-appearance: none;
        appearance: none;
    }
    
    /* Wrapper de linea-nombre para posicionamiento del dropdown */
    .linea-nombre-wrapper {
        position: relative;
        width: 100%;
    }
    
    /* Dropdown de búsqueda de items en mobile */
    .pedido-item-results {
        position: fixed !important;
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
        max-width: calc(100% - 32px) !important;
        max-height: 50vh !important;
        z-index: 20000 !important;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    }
    
    .pedido-item-results .item-result-item {
        padding: 14px 16px;
        min-height: 48px;
        cursor: pointer;
    }
    
    .pedido-item-results .item-result-nombre {
        font-size: 16px;
    }
    
    /* Botón cambiar item en mobile */
    .linea-item-badge-container {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        flex-wrap: wrap;
    }
    
    .linea-item-btn,
    .btn-clear-item {
        padding: 8px 16px !important;
        font-size: 14px !important;
        min-height: 40px;
        touch-action: manipulation;
    }

    

    /* Inputs numéricos */
    .table-wrapper input[type="number"], 
    .table-wrapper select {
        height: 42px;
        width: 100%;
        font-size: 15px;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        padding: 0 10px;
        background: white;
    }

    /* Botón eliminar línea */
    .table-wrapper td.table-col-actions {
        position: absolute;
        top: 8px;
        right: 8px;
        width: auto;
        padding: 0;
        border: none;
    }
    
    .table-wrapper td.table-col-actions::before {
        display: none;
    }
    
    .btn-remove-linea {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fee2e2;
        color: #ef4444;
        border-radius: 50%;
        border: none;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08);
        cursor: pointer;
    }
    
    .btn-remove-linea svg {
        width: 14px;
        height: 14px;
    }

    /* Subtotal destacado */
    .table-wrapper td.table-col-subtotal {
        background-color: #f3f4f6;
        border-radius: 6px;
        padding: 10px 12px;
        margin-top: 8px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        color: #111827;
        font-weight: 600;
        font-size: 16px;
        border: none;
    }
    
    .table-wrapper td.table-col-subtotal::before {
        margin-bottom: 0;
        font-size: 11px;
    }

    /* Descuento */
    .descuento-input-group {
        width: 100%;
    }
    
    .descuento-details {
        position: static;
        width: 100%;
        margin-top: 8px;
        box-shadow: none;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 12px;
        background: #f9fafb;
    }

    /* Botón Añadir Línea */
    #btn-add-linea {
        width: 100%;
        justify-content: center;
        margin-top: 12px;
        padding: 12px;
        font-size: 14px;
        font-weight: 500;
        background-color: white;
        color: #374151;
        border: 1px dashed #d1d5db;
        border-radius: 8px;
        transition: all 0.2s;
    }

    #btn-add-linea:hover {
        background-color: #f9fafb;
        border-color: #9ca3af;
    }
    
    /* ===== TOTALES DEL DOCUMENTO ===== */
    .documento-totals {
        padding: 14px;
        border-radius: 8px;
        margin: 12px 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        border: 1px solid #e5e7eb;
        background: white;
    }
    
    .documento-totals-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        font-size: 14px;
    }
    
    .documento-totals-row.total {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #e5e7eb;
        font-size: 18px;
        font-weight: 700;
    }

    .documento-totals-row-value {
        font-weight: 600;
    }

    /* ===== BOTONES DE GUARDAR/CANCELAR ===== */
    .documento-form-actions {
        position: sticky;
        bottom: 0;
        background: white;
        border-top: 1px solid #e5e7eb;
        padding: 16px;
        display: flex;
        gap: 12px;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
        z-index: 100;
    }

    .documento-form-actions .btn {
        flex: 1;
        padding: 14px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 8px;
    }

    /* ===== SECCIÓN DE PAGOS Y NOTAS ===== */
    .documento-pagos-section,
    .documento-notas-section {
        margin-top: 24px;
        padding: 16px;
        background: white;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
    }

    /* ===== BADGES Y ETIQUETAS ===== */
    .badge {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
    }

    /* ===== AJUSTES GENERALES ===== */
    .content-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }
    
    .content-header h1 {
        font-size: 24px;
        margin: 0;
    }

    .documento-card {
        margin-bottom: 12px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        border-radius: 12px;
    }
}

/* Header móvil oculto en desktop */
.mobile-back-header {
    display: none;
}


/* ==========================================
   CLASES PARA REEMPLAZAR ESTILOS INLINE
   ========================================== */

/* Layout del formulario */
.documento-form-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.documento-form-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 8px;
}

.documento-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
    padding-top: 8px;
}

.documento-form-wrapper {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
}

.documento-datos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.documento-section-title {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
}

.documento-entidad-wrapper {
    position: relative;
}

.documento-entidad-name {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.documento-cliente-details {
    margin-top: 8px;
    font-size: 13px;
    color: #6b7280;
}

.documento-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.documento-field-label {
    font-size: 13px;
    color: #6b7280;
    display: block;
    margin-bottom: 4px;
}

.documento-field-value {
    margin: 0;
}

.documento-section {
    margin-bottom: 32px;
}

.documento-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.documento-section-title-inline {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.documento-notas-text {
    margin: 0;
    color: #6b7280;
    white-space: pre-wrap;
}

.badge-flex {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pago-porcentaje-container {
    text-align: center;
}

.pago-porcentaje-value {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 2px;
}

.pago-porcentaje-amount {
    font-size: 11px;
    color: #9ca3af;
}

.hidden {
    display: none !important;
}

.documento-edit-view {
    padding: 20px;
}

/* Sección de pagos */
.documento-pagos-section {
    margin-top: 32px;
}

.documento-pagos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.documento-pagos-table-wrapper {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.documento-pagos-table {
    width: 100%;
    border-collapse: collapse;
    min-width: fit-content;
}

.documento-pagos-table thead tr {
    border-bottom: 1px solid #e5e7eb;
}

.documento-pagos-table th {
    text-align: left;
    padding: 8px;
    font-size: 13px;
    color: #6b7280;
    font-weight: 600;
}

.documento-pagos-table th.text-right {
    text-align: right;
}

.documento-pagos-table th.text-center {
    text-align: center;
}

.documento-pagos-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
}

.documento-pagos-table td {
    padding: 12px 8px;
    font-size: 14px;
}

.documento-pagos-table td.text-right {
    text-align: right;
    font-weight: 500;
}

.documento-pagos-table td.text-center {
    text-align: center;
}

.documento-pagos-summary {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.documento-pagos-summary-item {
    text-align: center;
}

.documento-pagos-summary-label {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
    display: block;
}

.documento-pagos-summary-value {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

.documento-pagos-summary-value.pendiente {
    color: #ef4444;
}

.documento-pagos-summary-value.pagado {
    color: #10b981;
}

/* Estilos para tabla de documentos */
.table-doc-entidad-name {
    font-weight: 500;
    color: #111827;
}

.table-doc-notas {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
}

.table-doc-usuario {
    font-size: 13px;
    color: #6b7280;
}

/* ==========================================
   AJUSTES MÓVILES PARA NUEVAS CLASES
   ========================================== */

@media (max-width: 992px) {
    /* Grid de datos básicos -> una columna */
    .documento-datos-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .documento-datos-section {
        padding: 16px;
        background: white;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    /* Grid de información -> una columna */
    .documento-info-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Resumen de pagos -> una columna */
    .documento-pagos-summary {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .documento-pagos-summary-item {
        padding: 12px;
        background: white;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
    }

    /* Tabla de pagos responsive */
    .documento-pagos-table-wrapper {
        overflow-x: auto;
    }

    .documento-pagos-table {
        min-width: 400px;
    }
}

/* Tabla de líneas del documento */
.documento-lineas-table {
    table-layout: fixed;
    width: 100%;
}

/* En móvil, eliminar min-width y permitir que se ajuste */
@media (max-width: 992px) {
    .documento-lineas-table {
        min-width: auto !important;
        width: 100% !important;
    }
    
    .documento-lineas-table colgroup {
        display: none;
    }
}

/* ==========================================
   CLASES PARA REEMPLAZAR ESTILOS INLINE
   ========================================== */

/* Utilidades generales */
.hidden-input {
    display: none;
}

.d-none {
    display: none;
}

/* Modales de pagos */
.modal-pago-content {
    max-width: 500px;
}

.modal-pago-field {
    margin-bottom: 16px;
}

.modal-pago-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
}

/* Pendiente por pagar en modal Añadir pago */
.pago-pendiente-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: 20px;
    background: #fff8e6;
    border: 1px solid #f59e0b;
    border-radius: 8px;
}

.pago-pendiente-label {
    font-size: 14px;
    font-weight: 500;
    color: #92400e;
}

.pago-pendiente-value {
    font-size: 18px;
    font-weight: 700;
    color: #b45309;
}

.pago-quedara-pendiente {
    margin-top: 8px;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 6px;
    font-size: 13px;
}

.pago-quedara-label {
    color: #64748b;
    margin-right: 8px;
}

.pago-quedara-value {
    font-weight: 600;
    color: #0f172a;
}

.pago-metodo-info-adicional {
    margin-top: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #475569;
    background: #f1f5f9;
    border-radius: 6px;
    white-space: pre-wrap;
}

/* Layout de documento */
.documento-view-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.documento-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
}

.documento-view-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.documento-view-header-right {
    display: flex;
    gap: 12px;
}

.documento-view-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.documento-view-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 8px;
}

.documento-view-form-container {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
}

/* Grid de datos básicos */
.documento-datos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.documento-datos-section-title {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
}

.documento-datos-section-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* Ocultar número de factura en desktop - solo se muestra en mobile */
.documento-numero-mobile {
    display: none;
}

.documento-datos-field {
    position: relative;
}

.documento-datos-label {
    font-size: 13px;
    color: #6b7280;
    display: block;
    margin-bottom: 4px;
}

.documento-datos-value {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.documento-datos-value-small {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

.documento-datos-value-notes {
    margin-top: 8px;
    font-size: 13px;
    color: #6b7280;
}

/* Secciones */
.documento-section {
    margin-bottom: 32px;
}

.documento-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.documento-section-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.documento-section-notes {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
}

.documento-notes-text {
    margin: 0;
    color: #6b7280;
    white-space: pre-wrap;
}

/* Tabla de líneas */
.documento-lineas-table {
    table-layout: fixed;
    width: 100%;
    min-width: 600px;
}

/* Badges y estados */
.badge-flex {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-small {
    font-size: 11px;
}

/* Tabla de documentos */
.table-doc-entidad {
    font-weight: 500;
    color: #111827;
}

.table-doc-notas-preview {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
}

.table-doc-usuario {
    font-size: 13px;
    color: #6b7280;
}

/* Pagos */
.pagos-section {
    padding: 14px 30px;
    margin: 0;
}

.pagos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.pagos-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.pagos-table-container {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 16px;
}

.pagos-table {
    width: 100%;
    border-collapse: collapse;
    min-width: fit-content;
}

.pagos-table thead tr {
    border-bottom: 1px solid #e5e7eb;
}

.pagos-table th {
    text-align: left;
    padding: 8px;
    font-size: 13px;
    color: #6b7280;
    font-weight: 600;
}

.pagos-table th.text-right {
    text-align: right;
}

.pagos-table th.text-center {
    text-align: center;
    width: 100px;
}

.pagos-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
}

.pagos-table tbody tr.pago-row-clickable {
    cursor: pointer;
}

.pagos-table tbody tr.pago-row-clickable:hover {
    background-color: #f3f4f6;
}

.pagos-table td {
    padding: 12px 8px;
    font-size: 14px;
}

.pagos-table td.text-right {
    text-align: right;
    font-weight: 500;
}

.pagos-table td.text-center {
    text-align: center;
}

.pagos-empty {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    color: #9ca3af;
}

.pagos-summary {
    display: flex;
    justify-content: flex-end;
    gap: 24px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 2px solid #e5e7eb;
}

.pagos-summary-item {
    text-align: right;
}

.pagos-summary-label {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 4px;
}

.pagos-summary-value {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.pagos-summary-value.success {
    color: #059669;
}

.pagos-summary-value.danger {
    color: #dc2626;
}

/* Resultados de búsqueda de entidades */
.entidad-result-create {
    border-top: 1px solid #e5e7eb;
    padding-top: 8px;
    margin-top: 8px;
}

.btn-create-entidad {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: #f3f4f6;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    color: #3b82f6;
    font-weight: 500;
    transition: all 0.2s;
}

/* Líneas de documento */
.linea-item-badge-container {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.linea-item-badge {
    font-size: 11px;
}

.linea-item-btn {
    padding: 2px 8px;
    font-size: 11px;
}

/* Selector de almacén por línea (ventas: de qué almacén descontar stock) */
.linea-almacen-selector {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    position: relative;
}
/* Evitar que la celda de la tabla recorte el dropdown */
td:has(.linea-almacen-selector) {
    overflow: visible;
}
.linea-almacen-label {
    font-size: 11px;
    color: #6b7280;
}
.linea-almacen-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 11px;
    color: #374151;
}
.linea-almacen-trigger:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}
.linea-almacen-badge {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.linea-almacen-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.linea-almacen-stock {
    margin-left: 4px;
    color: #6b7280;
    font-size: 10px;
}
.linea-almacen-stock-value {
    font-weight: 600;
    color: #111827;
}
.linea-almacen-chevron {
    flex-shrink: 0;
    opacity: 0.6;
}
.linea-almacen-dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 2px;
    min-width: 160px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;
    padding: 4px;
    max-height: 200px;
    overflow-y: auto;
}
.linea-almacen-dropdown[aria-hidden="true"] {
    display: none;
}
.linea-almacen-dropdown.open {
    display: block;
}
.linea-almacen-option {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    text-align: left;
    color: #374151;
}
.linea-almacen-option:hover {
    background: #f3f4f6;
}
.linea-almacen-option .linea-almacen-badge {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.linea-almacen-defecto-tag {
    font-size: 10px;
    color: #9ca3af;
    margin-left: auto;
}
.linea-almacen-muted {
    font-size: 11px;
    color: #9ca3af;
}

/* Stock en resultados de búsqueda de items */
.item-result-info .result-stock {
    font-size: 11px;
    color: #059669;
    margin-left: 4px;
}

/* Pago porcentaje */
.pago-porcentaje-container {
    text-align: center;
}

.pago-porcentaje-value {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 2px;
}

.pago-porcentaje-amount {
    font-size: 11px;
    color: #9ca3af;
}

/* Edit view */
.edit-view-container {
    padding: 20px;
}

/* Colgroup widths - se mantienen inline porque son dinámicos */

/* ============================================== 
   NUEVA VISTA DE DETALLE - PDF + SIDEBAR
   ============================================== */

.documento-detail-split {
    display: flex;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Panel izquierdo - iframe con visor PDF integrado del navegador */
.documento-pdf-preview {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #525659;
}

.documento-pdf-iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 400px;
    border: none;
    flex: 1;
}

.documento-pdf-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: #6b7280;
    text-align: center;
}

.documento-pdf-placeholder svg {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* Panel derecho - Sidebar de detalle */
.documento-detail-sidebar {
    width: 430px;
    min-width: 320px;
    max-width: 430px;
    background: #ffffff;
    border-left: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.documento-detail-sidebar-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.documento-detail-sidebar-header h2 {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.documento-detail-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Resumen de factura */
.documento-resumen {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.documento-resumen-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.documento-resumen-label {
    color: #6b7280;
    font-size: 14px;
}

.documento-resumen-value {
    color: #111827;
    font-size: 14px;
    font-weight: 500;
    text-align: right;
}

.documento-resumen-value.total,
.documento-resumen-total .documento-resumen-value {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}
.documento-resumen-cliente .documento-resumen-value {
    font-weight: 500;
}

.documento-resumen-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid #f3f4f6;
    font-size: 13px;
    color: #6b7280;
}

.documento-estado-badge {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    background: #f3f4f6;
    color: #6b7280;
}

.documento-estado-badge.borrador {
    background: #fef3c7;
    color: #d97706;
}

.documento-estado-badge.emitida {
    background: #d1fae5;
    color: #059669;
}

.documento-estado-badge.pagada {
    background: #dbeafe;
    color: #2563eb;
}

/* Botón principal de emitir */
.documento-cta-section {
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.documento-derivados-section {
    padding: 12px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.documento-derivados-section .documento-derivado-btn {
    flex: 1;
    min-width: 140px;
}

.btn-emitir-factura {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-emitir-factura:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Banner de seguimiento */
.documento-tracking-banner {
    margin: 16px 24px;
    padding: 16px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.documento-tracking-banner-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.documento-tracking-banner-content {
    flex: 1;
}

.documento-tracking-banner-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #22c55e;
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.documento-tracking-banner-text {
    font-size: 13px;
    color: #374151;
    margin: 0;
    line-height: 1.4;
}

.documento-tracking-banner-link {
    color: #059669;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.documento-tracking-banner-link:hover {
    text-decoration: underline;
}

.documento-tracking-banner-close {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #6b7280;
}

/* Acciones de documento */
.documento-actions-section {
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.documento-action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

.documento-action-btn:hover {
    background: #f9fafb;
}

.documento-action-btn svg {
    width: 20px;
    height: 20px;
    color: #6b7280;
    flex-shrink: 0;
}

.documento-action-btn.danger {
    color: #dc2626;
}

.documento-action-btn.danger svg {
    color: #dc2626;
}

.documento-action-btn.danger:hover {
    background: #fef2f2;
}

/* Historial */
.documento-historial-section {
    padding: 20px 24px;
}

.documento-historial-title {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.documento-historial-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

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

.documento-historial-info {
    flex: 1;
}

.documento-historial-action {
    font-size: 14px;
    color: #111827;
    font-weight: 500;
    margin: 0 0 2px 0;
}

.documento-historial-user {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}

.documento-historial-meta {
    text-align: right;
    flex-shrink: 0;
}

.documento-historial-date {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 4px 0;
}

.documento-historial-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 4px;
    background: #f3f4f6;
    color: #6b7280;
}

/* ============================================== 
   NUEVA VISTA DE EDICIÓN PROFESIONAL
   ============================================== */

.documento-edit-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f9fafb;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Banner modo rectificativa */
.documento-rectificativa-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-bottom: 1px solid #f59e0b;
    color: #92400e;
    font-size: 14px;
    font-weight: 500;
    flex-shrink: 0;
}
.documento-rectificativa-banner-icon {
    font-size: 18px;
    line-height: 1;
}
.documento-edit-fullscreen-rectificativa .documento-edit-header {
    border-top: none;
}

.documento-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.documento-edit-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.documento-edit-header-left .btn-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: #3b82f6;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
}

.documento-edit-header-left .btn-back:hover {
    background: #eff6ff;
}

.documento-edit-header-left h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #3b82f6;
}

.documento-edit-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.documento-edit-step {
    font-size: 13px;
    color: #6b7280;
}

.documento-edit-step span {
    color: #f59e0b;
    font-weight: 600;
}

/* Contenedor principal de edición */
.documento-edit-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.documento-edit-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Sección de cabecera de factura */
.documento-edit-section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 24px;

}

.documento-edit-section-title {
    padding: 16px 24px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #374151;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.documento-edit-section-content {
    padding: 24px;
}

/* Grid de campos de cabecera */
.documento-edit-fields-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.documento-edit-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.documento-edit-field label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.documento-edit-field label .required {
    color: #ef4444;
}

.documento-edit-field .field-hint {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 4px;
}

.documento-edit-field input,
.documento-edit-field select {
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    width: calc(100% - 25px) !important;
}

.documento-edit-field input:focus,
.documento-edit-field select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Campo de cliente con badge */
.cliente-field-wrapper {
    position: relative;
}

.cliente-field-input {

}

.cliente-field-badge {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
}

.cliente-nif-badge {
    padding: 4px 8px;
    background: #fef3c7;
    color: #d97706;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
}

.cliente-nif-badge.valid {
    background: #d1fae5;
    color: #059669;
}

.cliente-clear-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #9ca3af;
}

.cliente-clear-btn:hover {
    color: #6b7280;
}

/* Datos del cliente expandible */
.cliente-datos-panel {
    margin-top: 16px;
    padding: 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.cliente-datos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cliente-datos-title {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cliente-datos-edit-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.cliente-datos-edit-btn:hover {
    background: #ffffff;
    border-color: #9ca3af;
}

.cliente-datos-content {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.6;
}

/* Sección de conceptos: wrapper para scroll horizontal en pantallas estrechas */
.conceptos-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    min-width: 0;
}

.conceptos-table-wrapper .conceptos-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}

.conceptos-table-wrapper::-webkit-scrollbar {
    height: 8px;
}

.conceptos-table-wrapper::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}

.conceptos-table-wrapper::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.conceptos-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

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

.conceptos-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.conceptos-table th.text-right {
    text-align: right;
}

.conceptos-table td {
    padding: 12px 16px;
    vertical-align: middle;
    border-bottom: 1px solid #f3f4f6;
}

.concepto-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    background: #ffffff;
    transition: all 0.2s;
}

.concepto-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.concepto-input.with-search {

}

.min-w-110{
    min-width: 110px;
}

.linea-descuento-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-descuento-tipo.linea-descuento-tipo-btn {
    flex-shrink: 0;
    min-width: 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.btn-descuento-tipo.linea-descuento-tipo-btn:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.concepto-search-icon {
    position: absolute;
    right: -6px;
    color: #9ca3af;
    height: 37px;
    line-height: 3.2;
    padding: 0 7px;
}

.concepto-total-cell-wrapper {
    text-align: right;
}

.concepto-total-cell {
    font-weight: 600;
    color: #111827;
    text-align: right;
}

input.concepto-total-cell {
    width: 100%;
    max-width: 100px;
    box-sizing: border-box;
    font-weight: 600;
    color: #111827;
}

.concepto-actions-cell {
    width: 40px;
    text-align: center;
}

.concepto-more-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #9ca3af;
    border-radius: 4px;
}

.concepto-more-btn:hover {
    background: #f3f4f6;
    color: #6b7280;
}

.concepto-hint {
    padding: 8px 16px;
    font-size: 12px;
    color: #9ca3af;
}

.concepto-info-adicional {
    margin: 8px 16px;
    padding: 10px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    color: #6b7280;
}

.concepto-info-adicional::placeholder {
    color: #9ca3af;
}

/* Botones de añadir */
.conceptos-add-buttons {
    display: flex;
    gap: 16px;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
}

.btn-add-concepto {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: #3b82f6;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
}

.btn-add-concepto:hover {
    background: #eff6ff;
}

/* Opciones avanzadas colapsable */
.documento-opciones-avanzadas {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 24px;
    background: #ffffff;
    overflow: hidden;
}

.opciones-avanzadas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: #ffffff;
    cursor: pointer;
    transition: background 0.2s;
}

.opciones-avanzadas-header:hover {
    background: #f9fafb;
}

.opciones-avanzadas-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #374151;
}

.opciones-avanzadas-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #3b82f6;
    font-size: 13px;
    font-weight: 500;
}

.opciones-avanzadas-content {
    padding: 0 24px 24px;
    display: none;
}

.opciones-avanzadas-content.open {
    display: block;
}

.opcion-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

.opcion-checkbox:last-child {
    border-bottom: none;
}

.opcion-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #3b82f6;
}

.opcion-checkbox label {
    font-size: 14px;
    color: #374151;
}

.opcion-fiscal-pct {
    padding: 8px 0 12px 32px;
    border-bottom: 1px solid #f3f4f6;
}

.opcion-fiscal-pct label {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
}

.opcion-select-pct {
    min-width: 100px;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
}

.opcion-textarea {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    width: 100%;
    min-height: 80px;
    font-size: 14px;
    resize: vertical;
}

/* Sección de moneda */
.documento-moneda-section {
    padding: 20px 24px;
    border-top: 1px solid #e5e7eb;
}

.documento-moneda-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin-bottom: 8px;
}

.documento-moneda-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    background: #ffffff;
}

.documento-config-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: #3b82f6;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

/* Footer de edición con totales y métodos de pago */
.documento-edit-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
    padding-bottom: 100px;
}

.documento-comentarios {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px 24px;
}

.documento-comentarios-title {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 8px 0;
}

.documento-comentarios-hint {
    font-size: 12px;
    color: #9ca3af;
    margin: 0 0 12px 0;
}

.documento-comentarios-textarea {
    width: calc(100% - 28px);
    min-height: 80px;
    padding: 12px 14px;
    font-size: 14px;
    color: #374151;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    resize: vertical;
}

.documento-comentarios-textarea::placeholder {
    color: #9ca3af;
}

.documento-comentarios-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* Totales */
.documento-totales-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px 24px;
}

.totales-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.totales-row.subtotal {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 12px;
    margin-bottom: 8px;
}

.totales-label {
    font-size: 14px;
    color: #6b7280;
}

.totales-value {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.totales-row.total {
    padding-top: 12px;
    border-top: 2px solid #e5e7eb;
    margin-top: 8px;
}

.totales-row.total .totales-label {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.totales-row.total .totales-value {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
}

/* Botón flotante aplicar */
.documento-edit-apply-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
    transition: all 0.2s;
}

.documento-edit-apply-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(59, 130, 246, 0.5);
}

/* Responsive para vista de detalle y edición */
@media (max-width: 992px) {
    .documento-detail-split {
        flex-direction: column;
    }
    
    .documento-pdf-preview {
        min-height: 50vh;
    }
    
    .documento-detail-sidebar {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }
    
    .documento-edit-fields-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .documento-edit-footer {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .documento-edit-fields-grid {
        grid-template-columns: 1fr;
    }
    
    .documento-edit-header {
        padding: 12px 16px;
    }
    
    .documento-edit-body {
        padding: 16px;
    }
    
    .documento-edit-section-content {
        padding: 16px;
    }
}

/* ===== Modal Configuración envío facturas ===== */
.modal-envio-facturas-content {
    max-width: 520px;
}

.envio-factura-rows {
    margin-bottom: 16px;
}

.envio-factura-row {
    margin-bottom: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.envio-factura-row:last-child {
    border-bottom: none;
}

.envio-factura-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.envio-factura-numero {
    font-weight: 600;
    color: #1f2937;
}

.envio-factura-cliente {
    color: #6b7280;
    font-size: 0.9rem;
}

.envio-factura-email-wrap {
    margin-top: 6px;
}

.envio-factura-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.envio-factura-label .required {
    color: #dc2626;
}

.envio-factura-email {
    width: calc(100% - 25px);
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
}

.envio-factura-field {
    margin-bottom: 14px;
}

.envio-factura-field .form-control {
    width: calc(100% - 25px);
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
}

.envio-factura-field textarea.form-control {
    min-height: 90px;
    resize: vertical;
}

.envio-factura-options {
    margin-bottom: 12px;
}

.envio-factura-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.875rem;
    color: #4b5563;
    cursor: pointer;
}

.envio-factura-placeholders {
    margin-bottom: 14px;
}

.envio-factura-placeholder-hint {
    font-size: 0.8rem;
    color: #6b7280;
}

.envio-factura-placeholder-hint code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
}

.envio-factura-adjuntos {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

.envio-factura-adjuntos-title {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
}

.envio-factura-adjuntos-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.envio-adjunto-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 0.875rem;
}

.envio-adjunto-icon {
    font-size: 1rem;
}

.envio-adjunto-numero {
    font-weight: 500;
    color: #1f2937;
}