/* ====================================================
   🎨 SISTEMA DE COLORES CORPORATIVOS legalverso
   ====================================================
   Variables CSS centralizadas para identidad visual
   consistente en toda la aplicación
   ================================================== */

   :root {

    --legalverso-primary: #7a6b63;
    --legalverso-primary-hover: #6c5e57;
    --legalverso-primary-light: #8a7b73;
    --legalverso-primary-lighter: #b1a7a1;
    --legalverso-primary-lightest: #e5dcd6;
    --legalverso-primary-pale: #fcfaf9;
    --legalverso-primary-btn: #7a6b63;
    
    /* Color acompañante */
    --legalverso-info: #eef1f2;
    --legalverso-info-hover: #e3e7ea;    /* Un poco más saturado para el hover */
    --legalverso-info-pale: #f7f9fa;     /* Versión muy sutil */

    /* Graduaciones del "info" */
    --legalverso-info-xlight: #e8ecee;   /* medio-bajo */
    --legalverso-info-light: #d1d9dd;    /* medio     */
    --legalverso-info-mid: #e3e7ea;      /* medio-alto */    /* Graduaciones del "info" */

    --legalverso-warning: #F0AD4E;    /* medio     */
    --legalverso-warning-mid: #F1D3A6;      /* medio-alto */
    --legalverso-warning-light: #FDF8E1;    /* medio    */
    --legalverso-warning-subtle: #FDFCEF;   /* ultra claro para fondos con mejor contraste */
    
    /* Success */
    --legalverso-success-mid: #28a745;
    --legalverso-success-light: #CFEAD9;
    --legalverso-success: #EAF7F0;    /* sutil */

    /* Danger */
    --legalverso-danger-mid: #dc3545;
    --legalverso-danger-light: #F5C6CB;
    --legalverso-danger: #FDEDEF;     /* sutil */

    /* Secondary */
    --legalverso-secondary-mid: #6c757d;
    --legalverso-secondary-light: #DDE2E6;
    --legalverso-secondary: #EFF2F4;

    /* Estados de Notificación - Colores Suaves Corporativos */
    /* Notificado (Verde Suave) */
    --legalverso-notified-bg: #F8FDF9;        /* Verde muy suave para fondo */
    --legalverso-notified-text: #4A7C4E;      /* Verde corporativo para texto */
    --legalverso-notified-border: #B8E6BC;    /* Verde suave para bordes */

    /* Documentos Recibidos (Gris Info) */
    --legalverso-documents-bg: #f7f9fa;       /* Gris muy suave para fondo */
    --legalverso-documents-text: #4e342e;     /* Texto corporativo */
    --legalverso-documents-border: #d1d9dd;   /* Gris suave para bordes */

    /* Pendiente (Gris Corporativo) */
    --legalverso-pending-bg: #F8F9FA;         /* Gris muy suave */
    --legalverso-pending-text: #5A6C7D;       /* Gris corporativo */
    --legalverso-pending-border: #C2CFD6;     /* Gris suave para bordes */

    /* Texto cuando el fondo sea mid */
    --legalverso-info-text-contrast: var(--legalverso-text-primary);

    --legalverso-text-primary: #4e342e;
    --legalverso-text-secondary: #6c757d;
    --legalverso-text-muted: #9e938c;
    /* Texto gris corporativo (alias explícito para uso en tablas/UX) */
    --legalverso-text-secondary-mid: var(--legalverso-secondary-mid);
    
    --legalverso-bg-primary: #ffffff;
    --legalverso-bg-light: #fcfaf9;
    --legalverso-bg-info: #f8f9fa;
    --legalverso-bg-white: #ffffff;
    
    /* ===== Calculadora Tributaria (tokens de diseño) ===== */
    /* Encabezados de secciones/accordion con alto contraste */
    --calculator-header-bg: var(--legalverso-primary); /* usar primary del proyecto como en chat */
    --calculator-header-text: #ffffff;        
    --calculator-header-border: #17365E;      /* borde sutil */

    /* Caja de resultados (fondo agradable del nuevo diseño) */
    --calculator-result-bg: #FAFCFE;          /* usa el mismo que --legalverso-bg-info para continuidad */
    --calculator-result-bg-gradient: linear-gradient(180deg, #FFFFFF 0%, var(--legalverso-bg-info) 100%);
    --calculator-result-border: var(--legalverso-primary-lighter);      /* borde sutil */
    --calculator-result-shadow: 0 1px 2px rgba(78, 52, 46, 0.06);
    --calculator-result-var: var(--legalverso-primary-btn);         /* color para nombre de variable */
    --calculator-result-value: var(--legalverso-text-primary);       /* color para valor calculado */
    
    /* Header de panel derecho (tarjeta de indicadores) */
    --calculator-panel-header-bg: var(--legalverso-primary);
    --calculator-panel-header-text: #ffffff;
    --calculator-panel-header-border: var(--calculator-header-border);
    
    /* Borders and radii */
    --legalverso-border: 1px solid #dee2e6;
    --legalverso-border-radius: 0.375rem;
    --legalverso-border-radius-lg: 0.8rem;
    --legalverso-border-radius-xl: 1rem;
    --legalverso-transition: all 0.2s ease-in-out;
    
    /* Tipografía unificada */
    --legalverso-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;


}

/* ===== TIPOGRAFÍA BASE ===== */
body, .dashboard-card, .table, .btn, .form-control, .form-check-label {
    font-family: var(--legalverso-font-family) !important;
}

/* ===== BOTONES GLOBALES ===== */

/* ===== BOTONES primary ===== */
.btn-primary {
    background-color: var(--legalverso-primary-btn) !important;
    border-color: var(--legalverso-primary-btn) !important;
    color: white !important;
}

.btn-primary:hover {
    background-color: var(--legalverso-primary-hover) !important;
    border-color: var(--legalverso-primary-hover) !important;
    color: white !important;
}

.btn-outline-primary {
    color: var(--legalverso-primary-btn) !important;
    border-color: var(--legalverso-primary-btn) !important;
    background-color: transparent !important;
}

  /* Hover / focus / active */
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
    color: white !important;
    background-color: var(--legalverso-primary-btn) !important;
    border-color: var(--legalverso-primary-btn) !important;
}
/* ===== BOTONES info ===== */
/* Botón outline info (estado normal) */
.btn-outline-info {
    color: var(--legalverso-info-mid) !important;         /* texto */
    border-color: var(--legalverso-info-light) !important;/* borde */
    background-color: transparent !important;
    transition: var(--legalverso-transition) !important;
  }
  
  /* Hover / focus / active */
  .btn-outline-info:hover,
  .btn-outline-info:focus,
  .btn-outline-info:active,
  .btn-outline-info.active {
    color: var(--legalverso-info) !important;
    background-color: var(--legalverso-info-mid) !important;
    border-color: var(--legalverso-info-mid) !important;
  }

/* ===== BOTONES warning ===== */
/* Botón outline warning (estado normal) */
.btn-outline-warning {
    color: var(--legalverso-warning) !important;         /* texto */
    border-color: var(--legalverso-warning) !important;/* borde */
    background-color: transparent !important;
    transition: var(--legalverso-transition) !important;
  }
  
  /* Hover / focus / active */
  .btn-outline-warning:hover,
  .btn-outline-warning:focus,
  .btn-outline-warning:active,
  .btn-outline-warning.active {
    color: white !important;
    background-color: var(--legalverso-warning) !important;
    border-color: var(--legalverso-warning) !important;
  }

/* ===== TOPBAR STYLING GLOBAL ===== */
/* Iconos principales - color corporativo primario */
.sb-topnav .navbar-nav .nav-item > a > i {
    color: var(--legalverso-primary) !important;
}

.sb-topnav .btn-link i {
    color: var(--legalverso-primary) !important;
}

/* Sub-iconos en dropdowns - color más oscuro */
.sb-topnav .dropdown-item i {
    color: var(--legalverso-text-primary) !important;
}

/* Botón de búsqueda específico */
#btnNavbarSearch {
    background-color: var(--legalverso-primary) !important;
    border-color: var(--legalverso-primary) !important;
    color: white !important;
    transition: var(--legalverso-transition) !important;
}

#btnNavbarSearch:hover {
    background-color: var(--legalverso-primary-hover) !important;
    border-color: var(--legalverso-primary-hover) !important;
    color: white !important;
    transform: translateY(-1px);
}

#btnNavbarSearch:focus, #btnNavbarSearch:active {
    background-color: var(--legalverso-primary-hover) !important;
    border-color: var(--legalverso-primary-hover) !important;
    box-shadow: 0 0 0 0.2rem rgba(122, 107, 99, 0.25) !important;
}


/* ===== FORM CONTROLS GLOBALES ===== */
.form-control:focus {
    border-color: var(--legalverso-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(122, 107, 99, 0.25) !important;
}

.form-check-input:checked {
    background-color: var(--legalverso-primary) !important;
    border-color: var(--legalverso-primary) !important;
}

.form-check-input:focus {
    border-color: var(--legalverso-primary-lighter) !important;
    box-shadow: 0 0 0 0.2rem rgba(122, 107, 99, 0.25) !important;
}

/* ===== BADGES Y ALERTS ===== */
.badge {
    background-color: var(--legalverso-primary) !important;
}

.alert-primary {
    color: var(--legalverso-text-primary) !important;
    background-color: var(--legalverso-primary-pale) !important;
    border-color: var(--legalverso-primary-lightest) !important;
}

.alert-info {
    color: var(--legalverso-text-primary) !important;
    background-color: var(--legalverso-info) !important;
    border-color: var(--legalverso-info-light) !important;
    box-shadow: 0 1px 2px 0 rgba(227, 231, 234, 0.04);
}

/* ===== UTILIDADES BG INFO (alineadas al color corporativo) ===== */
/* Forzar los helpers de Bootstrap a usar nuestra paleta corporativa */
.bg-info {
    background-color: var(--legalverso-info-mid) !important;
    color: var(--legalverso-info-text-contrast) !important;
}

/* Bootstrap 5.3: variantes sutiles */
.bg-info-subtle,
.text-bg-info {
    background-color: var(--legalverso-info) !important; /* fondo claro */
    color: var(--legalverso-text-primary) !important;
    border-color: var(--legalverso-info-light) !important;
}

.text-info { color: var(--legalverso-info-mid) !important; }
.border-info { border-color: var(--legalverso-info-mid) !important; }

/* Badges con bg-info deben mantener contraste correcto */
.badge.bg-info { background-color: var(--legalverso-info-mid) !important; color: #fff !important; }

/* ===== UTILIDADES PRIMARY SUTILES (faltantes) ===== */
/* Fondos y bordes basados en la paleta primary para replicar diseños minimalistas */
.bg-primary-pale { background-color: var(--legalverso-primary-pale) !important; color: var(--legalverso-text-primary) !important; }
.bg-primary-lightest { background-color: var(--legalverso-primary-lightest) !important; color: var(--legalverso-text-primary) !important; }
.border-primary-light { border-color: var(--legalverso-primary-light) !important; }
.border-primary-lightest { border-color: var(--legalverso-primary-lightest) !important; }
.text-primary-btn { color: var(--legalverso-primary-btn) !important; }

/* ===== UTILIDADES PARA EL RESTO DE COLORES ===== */
/* Success */
.bg-success { background-color: var(--legalverso-success-mid) !important; color: #fff !important; }
.bg-success-subtle, .text-bg-success {
    background-color: var(--legalverso-success) !important;
    color: var(--legalverso-text-primary) !important;
    border-color: var(--legalverso-success-light) !important;
}
.text-success { color: var(--legalverso-success-mid) !important; }
.border-success { border-color: var(--legalverso-success-mid) !important; }
.badge.bg-success { background-color: var(--legalverso-success-mid) !important; color: #fff !important; }

/* Danger */
.bg-danger { background-color: var(--legalverso-danger-mid) !important; color: #fff !important; }
.bg-danger-subtle, .text-bg-danger {
    background-color: var(--legalverso-danger) !important;
    color: var(--legalverso-text-primary) !important;
    border-color: var(--legalverso-danger-light) !important;
}
.text-danger { color: var(--legalverso-danger-mid) !important; }
.border-danger { border-color: var(--legalverso-danger-mid) !important; }
.badge.bg-danger { background-color: var(--legalverso-danger-mid) !important; color: #fff !important; }

/* Warning */
.bg-warning { background-color: var(--legalverso-warning) !important; color: #212529 !important; }
.bg-warning-subtle, .text-bg-warning {
    background-color: var(--legalverso-warning-light) !important;
    color: var(--legalverso-text-primary) !important;
    border-color: var(--legalverso-warning-mid) !important;
}
.text-warning { color: var(--legalverso-warning) !important; }
.border-warning { border-color: var(--legalverso-warning) !important; }
.badge.bg-warning { background-color: var(--legalverso-warning) !important; color: #212529 !important; }

/* Secondary */
.bg-secondary { background-color: var(--legalverso-secondary-mid) !important; color: #fff !important; }
.bg-secondary-subtle, .text-bg-secondary {
    background-color: var(--legalverso-secondary) !important;
    color: var(--legalverso-text-primary) !important;
    border-color: var(--legalverso-secondary-light) !important;
}
.text-secondary { color: var(--legalverso-secondary-mid) !important; }
.border-secondary { border-color: var(--legalverso-secondary-mid) !important; }
.badge.bg-secondary { background-color: var(--legalverso-secondary-mid) !important; color: #fff !important; }

/* Alerts coherentes con la paleta */
.alert-success { color: var(--legalverso-text-primary) !important; background-color: var(--legalverso-success) !important; border-color: var(--legalverso-success-light) !important; }
.alert-danger  { color: var(--legalverso-text-primary) !important; background-color: var(--legalverso-danger) !important;  border-color: var(--legalverso-danger-light) !important; }
.alert-warning { color: var(--legalverso-text-primary) !important; background-color: var(--legalverso-warning-light) !important; border-color: var(--legalverso-warning-mid) !important; }

/* ===== Tables ===== */

/* .table {
    border: var(--legalverso-border);
    border-radius: var(--legalverso-border-radius);
}
.card {
    border: var(--legalverso-border);
    border-radius: var(--legalverso-border-radius);
} */

/* ===== STATUS BADGES GLOBALES =====
   Estándar reutilizable para chips de estado en todo el proyecto.
   Inspirado en el diseño refinado de select_clients.html con border y background sutiles. */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
    transition: var(--legalverso-transition);
    border: 1px solid; /* Border refinado agregado */
}

/* ===== BADGES CORPORATIVOS legalverso =====
   Nuevas variantes con diseño refinado: background sutil + border + color contrastante
   
   ESTÁNDAR DEL PROYECTO:
   - Usar estas clases .badge-legalverso-* en lugar de .badge simples de Bootstrap
   - Cada badge tiene background sutil, border definido y color contrastante
   - Diseño inspirado en select_clients.html para consistencia visual
   - Perfectos para totales, estados y métricas importantes
   
   USO RECOMENDADO:
   - .badge-legalverso-primary: Para información general, totales principales
   - .badge-legalverso-success: Para ingresos, completados, éxitos
   - .badge-legalverso-info: Para información adicional, documentos
   - .badge-legalverso-warning: Para advertencias, pendientes
   - .badge-legalverso-danger: Para errores, vencidos, problemas */

/* Badge Primary Corporativo */
.badge-legalverso-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
    transition: var(--legalverso-transition);
    background-color: var(--legalverso-primary-lightest);
    color: var(--legalverso-primary-btn);
    border: 1px solid var(--legalverso-primary-light);
}

/* Badge Success Corporativo */
.badge-legalverso-success {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
    transition: var(--legalverso-transition);
    background-color: var(--legalverso-success);
    color: var(--legalverso-success-mid);
    border: 1px solid var(--legalverso-success-light);
}

/* Badge Info Corporativo */
.badge-legalverso-info {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
    transition: var(--legalverso-transition);
    background-color: var(--legalverso-info);
    color: var(--legalverso-primary-btn);
    border: 1px solid var(--legalverso-info-light);
}

/* Badge Warning Corporativo */
.badge-legalverso-warning {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
    transition: var(--legalverso-transition);
    background-color: var(--legalverso-warning-subtle);
    color: var(--legalverso-warning);
    border: 1px solid var(--legalverso-warning-light);
}

/* Badge Secondary Corporativo */
.badge-legalverso-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
    transition: var(--legalverso-transition);
    background-color: var(--legalverso-secondary);
    color: var(--legalverso-secondary-mid);
    border: 1px solid var(--legalverso-secondary-light);
}

/* Badge Danger Corporativo */
.badge-legalverso-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
    transition: var(--legalverso-transition);
    background-color: var(--legalverso-danger);
    color: var(--legalverso-danger-mid);
    border: 1px solid var(--legalverso-danger-light);
}

/* Primary (alias de Pending) - Colores Suaves */
.status-badge.pending,
.status-badge.primary {
    background-color: var(--legalverso-pending-bg);         /* #F8F9FA */
    color: var(--legalverso-pending-text);                  /* #5A6C7D */
    border: 1px solid var(--legalverso-pending-border);     /* #C2CFD6 */
}
.status-badge.pending i,
.status-badge.primary i {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Success (alias de Notified) - Verde Suave Corporativo */
.status-badge.notified,
.status-badge.success {
    background-color: var(--legalverso-notified-bg);        /* #F8FDF9 */
    color: var(--legalverso-notified-text);                 /* #4A7C4E */
    border: 1px solid var(--legalverso-notified-border);    /* #B8E6BC */
}

/* Documentos Recibidos - Azul Suave Corporativo */
.status-badge.documents {
    background-color: var(--legalverso-documents-bg);       /* #F6FBFE */
    color: var(--legalverso-documents-text);                /* #2E5C7A */
    border: 1px solid var(--legalverso-documents-border);   /* #A8CDE8 */
}

/* Completed (azul suave corporativo) */
.status-badge.completed {
    background-color: var(--legalverso-primary-lightest);   /* #E3F2FD */
    color: var(--legalverso-text-primary);                  /* #02314B */
    border: 1px solid var(--legalverso-primary);            /* #7392A4 */
}

/* Warning */
.status-badge.warning {
    background-color: var(--legalverso-warning-light);
    color: var(--legalverso-warning);
    border: 1px solid var(--legalverso-warning-mid);
}

/* Danger (alias de Error) */
.status-badge.error,
.status-badge.danger {
    background-color: var(--legalverso-danger);             /* #FDEDEF */
    color: var(--legalverso-danger-mid);                    /* #dc3545 */
    border: 1px solid var(--legalverso-danger-mid);         /* borde rojo medio */
}

/* ===== BOOTSTRAP TABLE ROWS CON COLORES CORPORATIVOS SUAVES ===== */
/* Sobrescribe los colores por defecto de Bootstrap para usar los colores corporativos de notificación */

/* Table Success (Filas Notificadas) - Verde Suave Corporativo */
.table-success,
.table > tbody > tr.table-success > td,
.table > tbody > tr.table-success > th,
.table > thead > tr.table-success > td,
.table > thead > tr.table-success > th,
.table > tfoot > tr.table-success > td,
.table > tfoot > tr.table-success > th {
    background-color: var(--legalverso-notified-bg) !important; /* #F8FDF9 */
    color: var(--legalverso-notified-text) !important;         /* #4A7C4E */
    border-color: var(--legalverso-notified-border) !important; /* #B8E6BC */
}

/* Table Info (Filas Documentos Recibidos) - Azul Suave Corporativo */
.table-info,
.table > tbody > tr.table-info > td,
.table > tbody > tr.table-info > th,
.table > thead > tr.table-info > td,
.table > thead > tr.table-info > th,
.table > tfoot > tr.table-info > td,
.table > tfoot > tr.table-info > th {
    background-color: var(--legalverso-documents-bg) !important; /* #F6FBFE */
    color: var(--legalverso-documents-text) !important;         /* #2E5C7A */
    border-color: var(--legalverso-documents-border) !important; /* #A8CDE8 */
}

/* Table Secondary (Filas Excluidas/Opt-out) - Gris Suave Corporativo */
.table-secondary,
.table > tbody > tr.table-secondary > td,
.table > tbody > tr.table-secondary > th,
.table > thead > tr.table-secondary > td,
.table > thead > tr.table-secondary > th,
.table > tfoot > tr.table-secondary > td,
.table > tfoot > tr.table-secondary > th {
    background-color: var(--legalverso-pending-bg) !important; /* #F8F9FA */
    color: var(--legalverso-pending-text) !important;         /* #5A6C7D */
    border-color: var(--legalverso-pending-border) !important; /* #C2CFD6 */
}

/* Hover States para las filas con estados de notificación */
.table-success:hover,
.table > tbody > tr.table-success:hover > td {
    background-color: color-mix(in srgb, var(--legalverso-notified-bg) 85%, var(--legalverso-notified-border)) !important;
}

.table-info:hover,
.table > tbody > tr.table-info:hover > td {
    background-color: color-mix(in srgb, var(--legalverso-documents-bg) 85%, var(--legalverso-documents-border)) !important;
}

.table-secondary:hover,
.table > tbody > tr.table-secondary:hover > td {
    background-color: color-mix(in srgb, var(--legalverso-pending-bg) 85%, var(--legalverso-pending-border)) !important;
}

/* ====== COMPONENTES GLOBALES REUTILIZABLES ====== */

/* Hero Wrapper - Encabezado con ícono y título usado en múltiples vistas */
.hero-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.hero-left {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.hero-icon {
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    color: var(--legalverso-primary-btn);
}

.hero-wrapper h1 {
    margin: 0;
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--legalverso-text-primary);
}

.hero-wrapper p {
    margin: 0;
    color: var(--legalverso-text-secondary);
    font-size: 0.9rem;
}

/* Filtros Compactos - Sistema estándar para filtros en todo el proyecto */
.compact-filters {
    background: var(--legalverso-bg-white);
    border: var(--legalverso-border);
    border-radius: var(--legalverso-border-radius-xl);
    padding: 0.8rem;
    margin-bottom: 1rem;
}

.compact-filters .form-label {
    margin-bottom: 0.2rem;
    color: var(--legalverso-text-secondary);
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: 0.02em;
}

.compact-filters .form-control,
.compact-filters .form-select {
    padding: 0.35rem 0.6rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    transition: var(--legalverso-transition);
}

.compact-filters .form-control:focus,
.compact-filters .form-select:focus {
    border-color: var(--legalverso-primary);
    box-shadow: 0 0 0 0.2rem rgba(122, 107, 99, 0.25);
}

.filter-actions {
    display: flex;
    gap: 0.4rem;
    align-items: end;
}

.btn-filter {
    padding: 0.35rem 0.8rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Tabla Moderna - Tabla con primera columna sticky para vistas complejas */
.table-container {
    position: relative;
    width: 100%;
    overflow: auto;
    background: var(--legalverso-bg-white);
    border-radius: var(--legalverso-border-radius-xl);
    border: var(--legalverso-border);
    max-height: calc(100vh - 200px);
}

.table-modern {
    margin: 0;
    border-collapse: collapse;
    width: 100%;
}

.table-modern thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--legalverso-bg-info);
    font-weight: 600;
    text-align: center;
    padding: 0.6rem 0.5rem;
    border: none;
    border-bottom: 1px solid var(--legalverso-primary-light);
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: 0.025em;
    white-space: nowrap;
    color: var(--legalverso-text-primary);
}

.table-modern td {
    padding: 0.5rem 0.6rem;
    border: none;
    border-bottom: 1px solid #f5f5f5;
    text-align: center;
    font-size: 0.875rem;
    vertical-align: middle;
}

.table-modern td:first-child {
    text-align: left;
    font-weight: 500;
    position: sticky;
    left: 0;
    background-color: var(--legalverso-bg-white);
    z-index: 1;
    border-right: 2px solid var(--legalverso-border);
    min-width: 180px;
    padding: 0.5rem 0.8rem;
}

.table-modern tbody tr {
    transition: var(--legalverso-transition);
}

.table-modern tbody tr:hover td {
    background-color: var(--legalverso-primary-pale);
}

.table-modern tbody tr:hover td:first-child {
    background-color: var(--legalverso-primary-pale);
}

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

/* Status Icons - Botones de estado compactos */
.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    font-size: 0.75rem;
    border: 1px solid;
    transition: var(--legalverso-transition);
}

.status-icon.success {
    background-color: var(--legalverso-success-light);
    color: var(--legalverso-success-mid);
    border-color: var(--legalverso-success-mid);
}

.status-icon.danger {
    background-color: var(--legalverso-danger-light);
    color: var(--legalverso-danger-mid);
    border-color: var(--legalverso-danger-mid);
}

.status-icon.warning {
    background-color: var(--legalverso-warning-light);
    color: var(--legalverso-warning);
    border-color: var(--legalverso-warning);
}

/* Simple Survey Modal Components (mantenido para compatibilidad) */
.simple-table-container { background: var(--legalverso-bg-white); border-radius: var(--legalverso-border-radius-xl); overflow: hidden; border: var(--legalverso-border); }
.table-simple { margin:0; border:none; font-size:0.875rem; width:100%; table-layout:fixed; }
/* Removed default column widths to allow custom width attributes */
.table-simple th { background-color: var(--legalverso-bg-info); color: var(--legalverso-text-primary); font-weight:600; font-size:.8rem; text-transform:none; letter-spacing:.025em; padding:.6rem .8rem; border:none; }
.table-simple thead tr { border-bottom: 1px solid var(--legalverso-primary-light); }
.table-simple td { padding:.5rem .8rem; vertical-align: middle; border:none; border-bottom:1px solid #f5f5f5; font-size:.875rem; }
.table-simple tbody tr:last-child td { border-bottom:none; }
.table-simple tbody tr { transition: var(--legalverso-transition); }
.table-simple tbody tr:hover td { background-color: var(--legalverso-primary-pale); }

/* Enhanced hover styles for clickable rows */
.table-simple tbody tr[style*="cursor: pointer"]:hover {
    background-color: var(--legalverso-primary-pale) !important;
    transform: translateY(-1px);
}

.table-simple tbody tr[style*="cursor: pointer"]:hover td {
    background-color: var(--legalverso-primary-pale) !important;
}

.modal-title-icon { display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; background:var(--legalverso-primary-pale); border:1px solid var(--legalverso-primary-light); border-radius:.6rem; margin-right:.6rem; color:var(--legalverso-primary-btn); }

.compact-summary { background: var(--legalverso-bg-info); border-radius: var(--legalverso-border-radius-lg); padding:.8rem 1rem; margin-bottom:1rem; border: var(--legalverso-border); }
.summary-line { display:flex; align-items:center; justify-content:space-between; font-size:.875rem; font-weight:500; }
.summary-stats { display:flex; align-items:center; gap:.8rem; }
.progress-container { display:flex; align-items:center; gap:.5rem; min-width:200px; }
.compact-progress { height:10px; background:#e9ecef; border-radius:6px; overflow:hidden; flex:1; position:relative; display:flex; }
.progress-yes { height:100%; background: var(--legalverso-primary); transition: width .3s ease; }
.progress-no { height:100%; background: var(--legalverso-danger-mid); transition: width .3s ease; }
.progress-data .progress-yes { width: var(--yes-pct); }
.progress-data .progress-no { width: var(--no-pct); }
.progress-labels { font-size:.75rem; color: var(--legalverso-text-secondary); font-weight:600; }

.modal-footer-compact { padding:.8rem 1rem; background: var(--legalverso-bg-white); border-top: var(--legalverso-border); gap:.6rem; }
.btn-primary-action { background: var(--legalverso-primary-btn); border:1px solid var(--legalverso-primary-btn); color:#fff; font-weight:600; padding:.75rem 1.2rem; border-radius: var(--legalverso-border-radius-lg); flex:1 1 0; }
.btn-secondary-action { background: transparent; border:1px solid var(--legalverso-primary-light); color: var(--legalverso-text-secondary); font-weight:600; padding:.75rem 1rem; border-radius: var(--legalverso-border-radius-lg); flex:1 1 0; }
.btn-icon-action { background: transparent; border:1px solid var(--legalverso-primary-light); color: var(--legalverso-primary); padding:.5rem; border-radius: var(--legalverso-border-radius-lg); width:2.5rem; height:2.5rem; display:flex; align-items:center; justify-content:center; }
.btn-primary-action:hover, .btn-secondary-action:hover, .btn-icon-action:hover { transform: translateY(-1px); transition: var(--legalverso-transition); }
.btn-success-action { background:#fff; border:1px solid var(--legalverso-success-mid); color: var(--legalverso-success-mid); font-weight:600; padding:.75rem 1rem; border-radius: var(--legalverso-border-radius-lg); flex:1 1 0; }
.btn-success-action:hover { background: var(--legalverso-success-mid); color:#fff; border-color: var(--legalverso-success-mid); }

/* ===== DROPDOWN CORPORATIVO: Selector de documentos ===== */
.doc-selector .dropdown-menu {
    min-width: 280px;
    background-color: var(--legalverso-bg-white);
    border: 1px solid var(--legalverso-primary-light);
    border-radius: var(--legalverso-border-radius-lg);
    box-shadow: 0 6px 24px rgba(78, 52, 46, 0.08);
    padding: .35rem;
}

.doc-selector .dropdown-item {
    color: var(--legalverso-text-primary);
    border-radius: .35rem;
    padding: .5rem .8rem;
    font-size: .875rem;
}

.doc-selector .dropdown-item:hover,
.doc-selector .dropdown-item:focus {
    background-color: var(--legalverso-primary-pale);
    color: var(--legalverso-text-primary);
}

.doc-selector .dropdown-item.active,
.doc-selector .dropdown-item:active {
    background-color: var(--legalverso-primary-lightest);
    color: var(--legalverso-primary-btn);
}

.doc-selector .dropdown-divider {
    border-top-color: var(--legalverso-primary-lightest);
}

/* CTA tipo ghost: texto primary, fondo blanco, sin borde; hover con pale */
.doc-selector .dropdown-item.cta-ghost {
    background-color: var(--legalverso-bg-white);
    color: var(--legalverso-primary-btn);
    border: none !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.doc-selector .dropdown-item.cta-ghost:hover,
.doc-selector .dropdown-item.cta-ghost:focus {
    background-color: var(--legalverso-primary-pale);
    color: var(--legalverso-primary-btn);
}

/* Navegación suave para tabs (azul corporativo) */
.nav-soft { background: var(--legalverso-bg-white); border: var(--legalverso-border); border-radius: var(--legalverso-border-radius-lg); padding:.25rem; display:flex; gap:.4rem; }
.nav-soft .nav-link { border-radius:.5rem; padding:.35rem .75rem; color: var(--legalverso-text-primary); font-weight:600; display:inline-flex; align-items:center; gap:.4rem; }
.nav-soft .nav-link.active { background: var(--legalverso-primary-lightest); color: var(--legalverso-primary-btn); border:1px solid var(--legalverso-primary-light); }

/* Variante destacada para tabs específicos (Equipo/Clientes) usando primary fuerte */
.nav-soft .nav-link.nav-primary { 
    color: var(--legalverso-primary-btn) !important; 
    background: var(--legalverso-primary-pale) !important; 
    border: 1px solid var(--legalverso-primary-btn) !important; 
}
.nav-soft .nav-link.nav-primary:hover, 
.nav-soft .nav-link.nav-primary:focus { 
    background: var(--legalverso-primary-lightest) !important; 
    color: var(--legalverso-primary-btn) !important; 
}
.nav-soft .nav-link.nav-primary.active { 
    background: var(--legalverso-primary-btn) !important; 
    color: #fff !important; 
    border-color: var(--legalverso-primary-btn) !important; 
}

/* Contador compacto para tabs (reemplaza badges en navegación) */
.nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .4rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    background: var(--legalverso-secondary);
    color: var(--legalverso-secondary-mid);
    border: 1px solid var(--legalverso-secondary-light);
}

.nav-soft .nav-link.nav-primary .nav-count {
    background: var(--legalverso-primary-lightest);
    color: var(--legalverso-primary-btn);
    border-color: var(--legalverso-primary-light);
}

.nav-soft .nav-link.nav-primary.active .nav-count {
    background: #fff;
    color: var(--legalverso-primary-btn);
    border-color: #fff;
}