/**
 * Estilos Unificados para Módulos de Gestión de Entidades
 * (Clientes, Proveedores, etc.)
 * Diseño limpio, minimalista estilo OpenAI
 */

/* ============================================== 
   ALIASES PARA COMPATIBILIDAD CON MÓDULO DE CLIENTES
   ============================================== */
.clientes-layout { display: flex; flex-direction: column; gap: 24px; padding: 20px; min-width: 0; }
.clientes-list-view { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.clientes-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.clientes-search-container { position: relative; flex: 1; max-width: 500px; }
.clientes-search-input { width: 100%; max-width: 350px; padding: 10px 12px 10px 38px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; transition: all 0.2s ease; background-color: #f9fafb; }
.clientes-search-input:focus { outline: none; border-color: #9ca3af; background-color: #ffffff; }
.clientes-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #9ca3af; pointer-events: none; }
.clientes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.clientes-loading { grid-column: 1 / -1; padding: 60px 20px; text-align: center; color: #9ca3af; font-size: 14px; }
.cliente-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; display: flex; gap: 16px; }
.cliente-card:hover { border-color: #9ca3af; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.cliente-card-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 600; font-size: 16px; flex-shrink: 0; }
.cliente-card-content { flex: 1; min-width: 0; }
.cliente-card-title { margin: 0 0 8px 0; font-size: 16px; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cliente-card-info { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.cliente-info-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cliente-card-location { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #9ca3af; padding-top: 8px; border-top: 1px solid #f3f4f6; }
.clientes-empty-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; color: #9ca3af; }
.clientes-empty-state svg { margin-bottom: 16px; opacity: 0.5; }
.clientes-empty-state p { margin: 0; font-size: 16px; }
.clientes-detail-view { display: flex; flex-direction: column; }
.cliente-detail-container { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.cliente-detail-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; }
.cliente-detail-profile { display: flex; align-items: center; gap: 24px; padding: 32px 24px; border-bottom: 1px solid #e5e7eb; }
.cliente-detail-avatar { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 700; font-size: 32px; }
.cliente-detail-title h1 { margin: 0 0 4px 0; font-size: 28px; font-weight: 600; color: #111827; }
.cliente-detail-nif { margin: 0; font-size: 16px; color: #6b7280; }
.cliente-detail-tabs { display: flex; gap: 0; padding: 0 24px; border-bottom: 2px solid #e5e7eb; background: #ffffff; }
.cliente-tab { padding: 14px 20px; border: none; background: transparent; border-bottom: 2px solid transparent; margin-bottom: -2px; font-size: 14px; font-weight: 500; color: #6b7280; cursor: pointer; transition: all 0.2s ease; position: relative; }
.cliente-tab:hover { color: #111827; }
.cliente-tab.active { color: #111827; border-bottom-color: #111827; }
.cliente-detail-content { padding: 32px 24px; }
.cliente-tab-content { display: none; }
.cliente-tab-content.active { display: block; }
.cliente-detail-section { margin-bottom: 32px; }
.cliente-detail-section:last-child { margin-bottom: 0; }
.cliente-section-title { margin: 0 0 16px 0; font-size: 16px; font-weight: 600; color: #111827; }
.cliente-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cliente-info-field { display: flex; flex-direction: column; gap: 6px; }
.cliente-info-field label { font-size: 13px; color: #6b7280; font-weight: 500; }
.cliente-info-value { font-size: 14px; color: #111827; display: flex; align-items: center; gap: 8px; }
.cliente-facturas-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; text-align: center; }
.cliente-facturas-placeholder svg { margin-bottom: 16px; color: #d1d5db; }
.cliente-facturas-placeholder h3 { margin: 0 0 8px 0; font-size: 18px; font-weight: 600; color: #111827; }
.cliente-facturas-placeholder p { margin: 0; font-size: 14px; color: #6b7280; }
.clientes-edit-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; display: none; }
.clientes-edit-modal.active { display: flex !important; }
.clientes-edit-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); }
.clientes-edit-panel { position: absolute; top: 0; right: 0; width: 100%; max-width: 500px; height: 100%; background: #ffffff; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; animation: slideInRight 0.3s ease-out; }
.clientes-edit-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #e5e7eb; }
.clientes-edit-header h2 { margin: 0; font-size: 20px; font-weight: 600; color: #111827; }
.clientes-edit-close { width: 36px; height: 36px; border: none; background: transparent; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; }
.clientes-edit-close:hover { background: #f3f4f6; }
.clientes-edit-close svg { color: #6b7280; }
.clientes-edit-body { flex: 1; overflow-y: auto; padding: 24px; }
.clientes-edit-body::-webkit-scrollbar { width: 8px; }
.clientes-edit-body::-webkit-scrollbar-track { background: #f3f4f6; }
.clientes-edit-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.clientes-edit-body::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ============================================== 
   ESTILOS GENÉRICOS REUTILIZABLES
   ============================================== */

/* Layout principal */
.entity-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px;
    min-width: 0;
}

/* Vista de lista: flex para que la tabla ocupe el espacio disponible */
.entity-list-view {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    min-width: 0;
    flex: 1;
}

/* Header */
.entity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

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

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

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

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

/* Grid de entidades */
.entity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.entity-loading {
    grid-column: 1 / -1;
    padding: 60px 20px;
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
}

/* Tarjeta de entidad */
.entity-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    gap: 16px;
}

.entity-card:hover {
    border-color: #9ca3af;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.entity-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
}

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

.entity-card-title {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-card-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.entity-info-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-info-item svg {
    flex-shrink: 0;
}

.entity-card-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #9ca3af;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
}

.entity-card-location svg {
    flex-shrink: 0;
}

/* Estado vacío */
.entity-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #9ca3af;
}

.entity-empty-state svg {
    margin-bottom: 16px;
    opacity: 0.5;
}

.entity-empty-state p {
    margin: 0;
    font-size: 16px;
}

/* Paginación */
.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-top: 1px solid #e5e7eb;
}

.pagination-info {
    font-size: 14px;
    color: #6b7280;
}

.pagination-buttons {
    display: flex;
    gap: 4px;
}

.pagination-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    border-radius: 6px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-btn:hover:not(.disabled) {
    border-color: #9ca3af;
    background: #f9fafb;
}

.pagination-btn.active {
    background: #111827;
    color: #ffffff;
    border-color: #111827;
}

.pagination-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ==============================================
   VISTA DE DETALLE
   ============================================== */

.entity-detail-view {
    display: flex;
    flex-direction: column;
}

.entity-detail-container {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.entity-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.entity-detail-profile {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.entity-detail-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 32px;
}

.entity-detail-title h1 {
    margin: 0 0 4px 0;
    font-size: 28px;
    font-weight: 600;
    color: #111827;
}

.entity-detail-subtitle {
    margin: 0;
    font-size: 16px;
    color: #6b7280;
}

/* Tabs estilo usuarios */
.entity-tabs {
    display: flex;
    gap: 0;
    padding: 0 24px;
    border-bottom: 2px solid #e5e7eb;
    background: #ffffff;
}

.entity-tab {
    padding: 14px 20px;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.entity-tab:hover {
    color: #111827;
}

.entity-tab.active {
    color: #111827;
    border-bottom-color: #111827;
}

/* Contenido de tabs */
.entity-detail-content {
    padding: 32px 24px;
}

.entity-tab-content {
    display: none;
}

.entity-tab-content.active {
    display: block;
}

.entity-detail-section {
    margin-bottom: 32px;
}

.entity-detail-section:last-child {
    margin-bottom: 0;
}

.entity-section-title {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

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

.entity-info-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.entity-info-field label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.entity-info-value {
    font-size: 14px;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
}

.entity-info-value svg {
    color: #9ca3af;
    flex-shrink: 0;
}

.text-muted {
    color: #9ca3af;
}

/* Placeholder para tabs */
.entity-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.entity-placeholder svg {
    margin-bottom: 16px;
    color: #d1d5db;
}

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

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

/* ==============================================
   MODAL DE EDICIÓN (SLIDE-IN)
   ============================================== */

.entity-edit-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
}

.entity-edit-modal.active {
    display: flex;
}

.entity-edit-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.entity-edit-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 500px;
    height: 100%;
    background: #ffffff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease-out;
}

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

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

.entity-edit-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #111827;
}

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

.entity-edit-close:hover {
    background: #f3f4f6;
}

.entity-edit-close svg {
    color: #6b7280;
}

.entity-edit-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Formulario */
.entity-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-section h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 4px !important;
}

.form-group label {
    font-size: 13px;
    color: #374151;
    font-weight: 500;
}

.form-input {
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    background-color: #ffffff;
    color: #111827;
}

.form-input:focus {
    outline: none;
    border-color: #9ca3af;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.form-actions {
    display: flex;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
    justify-content: end;
}


.btn-change-proveedor {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 8px;
}

/* Utility */
.d-none {
    display: none !important;
}

/* Scrollbar */
.entity-edit-body::-webkit-scrollbar {
    width: 8px;
}

.entity-edit-body::-webkit-scrollbar-track {
    background: #f3f4f6;
}

.entity-edit-body::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.entity-edit-body::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Responsive */
@media (max-width: 1024px) {
    .entity-info-grid {
        grid-template-columns: 1fr;
    }
}

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

    .entity-search-container {
        max-width: none;
    }

    .entity-grid {
        grid-template-columns: 1fr;
    }

    .entity-detail-profile {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .entity-edit-panel {
        max-width: 100%;
    }

    .pagination-controls {
        flex-direction: column;
        gap: 16px;
    }

    .pagination-info {
        text-align: center;
    }
}

/* ==============================================
   TABLA ENTIDADES (Clientes / Proveedores) - estilo Gastos
   Altura acotada al viewport, scroll horizontal en viewports estrechos
   ============================================== */
.table-wrapper.entity-table-wrapper {
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    max-height: calc(100vh - 220px);
    min-height: 200px;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.entity-table-wrapper table {
    width: 1200px;
    min-width: 1200px;
    border-collapse: collapse;
    font-size: 14px;
    table-layout: fixed;
}

.entity-table-wrapper thead th {
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    color: #374151;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: 0 1px 0 0 #e5e7eb;
    white-space: nowrap;
}

/* Segunda fila (filtros) también fija al hacer scroll vertical */
.entity-table-wrapper .entity-th-filters th {
    padding: 8px;
    vertical-align: middle;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 49px;
    z-index: 2;
    box-shadow: 0 1px 0 0 #e2e8f0;
}

.entity-table-wrapper .entity-th-filters .form-input-sm,
.entity-table-wrapper .entity-th-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;
}

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

.entity-table-wrapper tbody tr.entity-table-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.entity-table-wrapper tbody tr.entity-table-row:hover {
    background: #f8fafc;
}

.entity-table-wrapper tbody tr.row-selected {
    background: #eff6ff;
}



.entity-table-wrapper th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.entity-table-wrapper th.sortable:hover {
    color: #3b82f6;
}

.entity-table-wrapper th.sortable .sort-indicator {
    display: inline-block;
    margin-left: 4px;
    opacity: 0.4;
    transition: opacity 0.15s ease;
}

.entity-table-wrapper th.sortable:hover .sort-indicator,
.entity-table-wrapper th.sortable.sort-asc .sort-indicator,
.entity-table-wrapper th.sortable.sort-desc .sort-indicator {
    opacity: 1;
}

.entity-table-wrapper th.sortable.sort-asc .sort-indicator::after {
    content: '▲';
    font-size: 10px;
}

.entity-table-wrapper th.sortable.sort-desc .sort-indicator::after {
    content: '▼';
    font-size: 10px;
}

.entity-table-wrapper th.sortable:not(.sort-asc):not(.sort-desc) .sort-indicator::after {
    content: '⇅';
    font-size: 10px;
}

/* Barra de selección múltiple (estilo ventas: fija abajo de la pantalla) */
#clientes-selection-bar.selection-bar,
#proveedores-selection-bar.selection-bar,
#personal-selection-bar.selection-bar,
#stock-selection-bar.selection-bar,
#productos-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: entitySelectionBarSlideUp 0.3s ease-out;
    max-width: 95vw;
}

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

#clientes-selection-bar .selection-bar-content,
#proveedores-selection-bar .selection-bar-content,
#personal-selection-bar .selection-bar-content,
#stock-selection-bar .selection-bar-content,
#productos-selection-bar .selection-bar-content {
    display: flex !important;
    align-items: center;
    gap: 12px;
    color: #ffffff;
}

#clientes-selection-bar .selection-bar-info,
#proveedores-selection-bar .selection-bar-info,
#personal-selection-bar .selection-bar-info,
#stock-selection-bar .selection-bar-info,
#productos-selection-bar .selection-bar-info {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
}

#clientes-selection-bar .selection-bar-actions,
#proveedores-selection-bar .selection-bar-actions,
#personal-selection-bar .selection-bar-actions,
#stock-selection-bar .selection-bar-actions,
#productos-selection-bar .selection-bar-actions {
    display: flex !important;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

#clientes-selection-bar .selection-bar-btn,
#proveedores-selection-bar .selection-bar-btn,
#personal-selection-bar .selection-bar-btn,
#stock-selection-bar .selection-bar-btn,
#productos-selection-bar .selection-bar-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    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;
}

#clientes-selection-bar .selection-bar-btn:hover,
#proveedores-selection-bar .selection-bar-btn:hover,
#personal-selection-bar .selection-bar-btn:hover,
#stock-selection-bar .selection-bar-btn:hover,
#productos-selection-bar .selection-bar-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

#clientes-selection-bar .selection-bar-btn.btn-delete:hover,
#proveedores-selection-bar .selection-bar-btn.btn-delete:hover,
#personal-selection-bar .selection-bar-btn.btn-delete:hover,
#stock-selection-bar .selection-bar-btn.btn-delete:hover,
#productos-selection-bar .selection-bar-btn.btn-delete:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

#clientes-selection-bar .selection-bar-btn svg,
#proveedores-selection-bar .selection-bar-btn svg,
#personal-selection-bar .selection-bar-btn svg,
#stock-selection-bar .selection-bar-btn svg,
#productos-selection-bar .selection-bar-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    flex-shrink: 0;
}

/* Checkboxes clientes/proveedores: mismo estilo que ventas (más grandes) */
#clientes .checkbox-select,
#clientes .checkbox-cliente,
#proveedores .checkbox-select,
#proveedores .checkbox-proveedor,
#personal .checkbox-select,
#personal .checkbox-empleado {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3b82f6;
    transition: transform 0.15s ease;
}

#clientes .checkbox-select:hover,
#clientes .checkbox-cliente:hover,
#proveedores .checkbox-select:hover,
#proveedores .checkbox-proveedor:hover,
#personal .checkbox-select:hover,
#personal .checkbox-empleado:hover {
    transform: scale(1.1);
}

/* Estado vacío en tabla */
.entity-table-wrapper .table-empty-state {
    padding: 48px 24px;
    text-align: center;
    color: #6b7280;
}

.entity-table-wrapper .table-empty-state svg {
    display: block;
    margin: 0 auto 16px;
    opacity: 0.5;
}

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

.entity-table-wrapper .table-empty-state p {
    margin: 0;
    font-size: 14px;
}

/* Filtros bar (compartido con clientes/proveedores) */
.filters-bar-search {
    flex: 1;
    max-width: 400px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
}
.filters-bar-search:focus {
    outline: none;
    border-color: #3b82f6;
}

/* ==============================================
   TAGS (badges) en proveedores/clientes
   ============================================== */
.entity-tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    background: var(--tag-color, #6b7280);
    margin: 1px 2px 1px 0;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.entity-tag-badge .tag-remove,
.entity-tag-badge .tag-edit {
    padding: 0 2px;
    cursor: pointer;
    opacity: 0.9;
    border: none;
    background: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.entity-tag-badge .tag-remove:hover,
.entity-tag-badge .tag-edit:hover {
    opacity: 1;
}
.entity-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 32px;
}
.entity-tags-input-wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    min-height: 40px;
}
.entity-tags-input-wrap:focus-within {
    border-color: #3b82f6;
    outline: none;
}
.entity-tags-input-wrap input.entity-tag-input {
    border: none;
    outline: none;
    padding: 4px 0;
    min-width: 120px;
    font-size: 14px;
}
.entity-tag-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
}
.entity-tag-suggestions .tag-suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.entity-tag-suggestions .tag-suggestion-item:hover {
    background: #f3f4f6;
}
.entity-tag-suggestions .tag-suggestion-item .tag-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* Modal minimalista editar tag */
.tag-edit-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tag-edit-modal {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    min-width: 280px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.tag-edit-modal h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}
.tag-edit-modal .form-group {
    margin-bottom: 12px;
}
.tag-edit-modal .form-group label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: #6b7280;
}
.tag-edit-modal .form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}
/* Celda de tags: permite wrap de badges; overflow para no solapar */
.entity-table-wrapper .entity-tags-cell {
    white-space: normal;
    overflow: hidden;
    min-width: 120px;
}
.entity-table-wrapper .entity-tags-cell .entity-tag-badge {
    cursor: default;
}

/* Con table-layout: fixed, los anchos del thead definen cada columna para que no se solapen */
.entity-table-wrapper thead th:first-child,
.entity-table-wrapper .entity-th-filters th:first-child,
.entity-table-wrapper tbody td:first-child {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    text-align: center;
}
/* Anchos por columna (data-sort en thead; aplica a proveedores y clientes) */
.entity-table-wrapper thead th[data-sort="nombre"] { width: 140px; min-width: 140px; }
.entity-table-wrapper thead th[data-sort="razon_social"] { width: 150px; min-width: 150px; }
.entity-table-wrapper thead th[data-sort="rs"] { width: 160px; min-width: 160px; }
.entity-table-wrapper thead th[data-sort="nif"] { width: 110px; min-width: 110px; }
.entity-table-wrapper thead th[data-sort="email"] { width: 220px; min-width: 220px; }
.entity-table-wrapper thead th[data-sort="telefono"] { width: 120px; min-width: 120px; }
.entity-table-wrapper thead th[data-sort="localidad"] { width: 120px; min-width: 120px; }
.entity-table-wrapper thead th[data-sort="provincia"] { width: 110px; min-width: 110px; }
.entity-table-wrapper thead th.entity-th-tags,
.entity-table-wrapper .entity-th-filters th.entity-filter-tags-wrap,
.entity-table-wrapper tbody td.entity-tags-cell {
    width: 140px;
    min-width: 140px;
}
/* Scrollbars visibles */
.entity-table-wrapper::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}
.entity-table-wrapper::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 5px;
}
.entity-table-wrapper::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 5px;
}
.entity-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}
.entity-table-wrapper::-webkit-scrollbar-corner {
    background: #f3f4f6;
}
/* Filtro por tags (multiselect) */
.entity-filter-tags-wrap {
    position: relative;
}
.entity-filter-tags-select {
    min-width: 140px;
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
}

/* Validador visual CIF/NIF en formulario de clientes */
.cliente-nif-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cliente-nif-wrap .form-input {
    flex: 1;
    min-width: 180px;
}
.cliente-nif-feedback {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.cliente-nif-feedback.valid {
    color: #059669;
}
.cliente-nif-feedback.invalid {
    color: #dc2626;
}
.cliente-nif-hint {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
}