/* ================================================
   CRM CONVERSION - DESIGN SYSTEM v2.0
   ================================================ */

/* ================================================
   SIDEBAR SIEMPRE EXPANDIDO
   Forzar el sidebar de Frappe a estar siempre expandido
   ================================================ */
.body-sidebar-container {
    width: fit-content !important;
}

.body-sidebar-container .body-sidebar {
    position: absolute !important;
    width: var(--sidebar-width, 220px) !important;
}

.body-sidebar-container .body-sidebar-placeholder {
    display: flex !important;
    width: var(--sidebar-width, 220px) !important;
}

.body-sidebar-container .sidebar-item-label {
    display: inline !important;
}

.body-sidebar-container .collapse-sidebar-link span {
    display: inline !important;
}

/* ================================================
   GOOGLE FONTS - Plus Jakarta Sans
   ================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

/* ================================================
   VARIABLES CSS - DESIGN TOKENS
   ================================================ */
:root,
[data-theme="light"] {
    /* ===== COLORES PRINCIPALES ===== */
    --crm-primary: #5e72e4;
    --crm-primary-dark: #4c5cc4;
    --crm-primary-light: #8898f5;
    --crm-primary-bg: rgba(94, 114, 228, 0.08);
    --crm-secondary: #667eea;
    --crm-accent: #764ba2;
    
    /* ===== COLORES FUNCIONALES ===== */
    --crm-success: #2dce89;
    --crm-success-dark: #24a46d;
    --crm-success-bg: rgba(45, 206, 137, 0.12);
    --crm-warning: #fb6340;
    --crm-warning-bg: rgba(251, 99, 64, 0.12);
    --crm-danger: #f5365c;
    --crm-danger-bg: rgba(245, 54, 92, 0.12);
    --crm-info: #11cdef;
    --crm-info-bg: rgba(17, 205, 239, 0.12);
    --crm-neutral: #8898aa;
    --crm-neutral-bg: rgba(136, 152, 170, 0.12);
    
    /* ===== COLORES WHATSAPP ===== */
    --crm-whatsapp: #25d366;
    --crm-whatsapp-dark: #128C7E;
    --crm-whatsapp-light: #dcf8c6;
    
    /* ===== SOBRESCRIBIR FRAPPE ===== */
    --primary: #5e72e4 !important;
    --primary-color: #5e72e4 !important;
    --brand-color: #5e72e4 !important;
    --btn-primary: #5e72e4 !important;
    --border-primary: #5e72e4 !important;
    
    /* ===== FONDOS ===== */
    --crm-bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --crm-bg-light: #f8f9fe;
    --crm-bg-sidebar: #f4f5f7;
    --crm-bg-card: #ffffff;
    --crm-bg-hover: rgba(94, 114, 228, 0.04);
    --bg-color: #f8f9fe;
    
    /* ===== TEXTOS ===== */
    --crm-text-primary: #32325d;
    --crm-text-secondary: #525f7f;
    --crm-text-muted: #8898aa;
    --crm-text-inverse: #ffffff;
    
    /* ===== BORDES ===== */
    --crm-border-color: #e9ecef;
    --crm-border-light: #f0f2f5;
    
    /* ===== TIPOGRAFÍA ===== */
    --crm-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --crm-font-size-xs: 0.6875rem;   /* 11px */
    --crm-font-size-sm: 0.75rem;     /* 12px */
    --crm-font-size-base: 0.875rem;  /* 14px */
    --crm-font-size-md: 1rem;        /* 16px */
    --crm-font-size-lg: 1.125rem;    /* 18px */
    --crm-font-size-xl: 1.25rem;     /* 20px */
    --crm-font-size-2xl: 1.5rem;     /* 24px */
    --crm-font-size-3xl: 1.875rem;   /* 30px */
    --crm-font-size-4xl: 2.25rem;    /* 36px */
    --crm-line-height: 1.5;
    --crm-line-height-tight: 1.25;
    
    /* ===== ESPACIADO ===== */
    --crm-spacing-xs: 4px;
    --crm-spacing-sm: 8px;
    --crm-spacing-md: 16px;
    --crm-spacing-lg: 24px;
    --crm-spacing-xl: 32px;
    --crm-spacing-2xl: 48px;
    
    /* ===== BORDES REDONDEADOS ===== */
    --crm-radius-sm: 4px;
    --crm-radius-md: 8px;
    --crm-radius-lg: 12px;
    --crm-radius-xl: 16px;
    --crm-radius-full: 9999px;
    
    /* ===== SOMBRAS ===== */
    --crm-shadow-sm: 0 1px 2px rgba(50, 50, 93, 0.05);
    --crm-shadow-md: 0 2px 12px rgba(50, 50, 93, 0.08);
    --crm-shadow-lg: 0 4px 20px rgba(50, 50, 93, 0.12);
    --crm-shadow-xl: 0 8px 30px rgba(50, 50, 93, 0.15);
    
    /* ===== TRANSICIONES ===== */
    --crm-transition-fast: 0.15s ease;
    --crm-transition-normal: 0.2s ease;
    --crm-transition-slow: 0.3s ease;
}

/* ================================================
   TIPOGRAFÍA GLOBAL
   ================================================ */
body,
.frappe-control,
.form-control,
.btn,
input,
textarea,
select {
    font-family: var(--crm-font-family);
    font-size: var(--crm-font-size-base);
    line-height: var(--crm-line-height);
    color: var(--crm-text-primary);
}

h1, .h1 { font-size: var(--crm-font-size-4xl); font-weight: 700; line-height: var(--crm-line-height-tight); }
h2, .h2 { font-size: var(--crm-font-size-3xl); font-weight: 700; line-height: var(--crm-line-height-tight); }
h3, .h3 { font-size: var(--crm-font-size-2xl); font-weight: 600; line-height: var(--crm-line-height-tight); }
h4, .h4 { font-size: var(--crm-font-size-xl); font-weight: 600; line-height: var(--crm-line-height-tight); }
h5, .h5 { font-size: var(--crm-font-size-lg); font-weight: 600; line-height: var(--crm-line-height-tight); }
h6, .h6 { font-size: var(--crm-font-size-md); font-weight: 600; line-height: var(--crm-line-height-tight); }

.text-xs { font-size: var(--crm-font-size-xs); }
.text-sm { font-size: var(--crm-font-size-sm); }
.text-base { font-size: var(--crm-font-size-base); }
.text-lg { font-size: var(--crm-font-size-lg); }
.text-xl { font-size: var(--crm-font-size-xl); }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* ================================================
   CHIPS / BADGES DE ESTADO
   ================================================ */
.crm-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--crm-spacing-xs);
    padding: 4px 12px;
    border-radius: var(--crm-radius-full);
    font-size: var(--crm-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    transition: var(--crm-transition-fast);
}

.crm-chip-success {
    background: var(--crm-success-bg);
    color: var(--crm-success-dark);
}

.crm-chip-warning {
    background: var(--crm-warning-bg);
    color: #c53030;
}

.crm-chip-danger {
    background: var(--crm-danger-bg);
    color: var(--crm-danger);
}

.crm-chip-info {
    background: var(--crm-info-bg);
    color: #0987a0;
}

.crm-chip-neutral {
    background: var(--crm-neutral-bg);
    color: var(--crm-text-secondary);
}

.crm-chip-primary {
    background: var(--crm-primary-bg);
    color: var(--crm-primary);
}

.crm-chip-whatsapp {
    background: rgba(37, 211, 102, 0.12);
    color: var(--crm-whatsapp-dark);
}

/* Chip con icono */
.crm-chip i,
.crm-chip svg {
    font-size: 10px;
    width: 10px;
    height: 10px;
}

/* ================================================
   KPI CARDS CON SPARKLINES
   ================================================ */
.crm-kpi-card {
    background: var(--crm-bg-card);
    border-radius: var(--crm-radius-lg);
    padding: var(--crm-spacing-lg);
    box-shadow: var(--crm-shadow-md);
    border: 1px solid var(--crm-border-color);
    display: flex;
    flex-direction: column;
    gap: var(--crm-spacing-sm);
    transition: var(--crm-transition-normal);
    position: relative;
    overflow: hidden;
}

.crm-kpi-card:hover {
    box-shadow: var(--crm-shadow-lg);
    transform: translateY(-2px);
}

.crm-kpi-card .kpi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.crm-kpi-card .kpi-label {
    font-size: var(--crm-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--crm-text-muted);
}

.crm-kpi-card .kpi-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--crm-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.crm-kpi-card .kpi-icon.icon-primary { background: var(--crm-primary-bg); color: var(--crm-primary); }
.crm-kpi-card .kpi-icon.icon-success { background: var(--crm-success-bg); color: var(--crm-success); }
.crm-kpi-card .kpi-icon.icon-warning { background: var(--crm-warning-bg); color: var(--crm-warning); }
.crm-kpi-card .kpi-icon.icon-danger { background: var(--crm-danger-bg); color: var(--crm-danger); }

.crm-kpi-card .kpi-value {
    font-size: var(--crm-font-size-3xl);
    font-weight: 700;
    color: var(--crm-text-primary);
    line-height: 1;
    margin: var(--crm-spacing-xs) 0;
}

.crm-kpi-card .kpi-value.gradient {
    background: var(--crm-bg-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.crm-kpi-card .kpi-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--crm-spacing-md);
}

.crm-kpi-card .kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--crm-font-size-sm);
    font-weight: 500;
}

.crm-kpi-card .kpi-delta.positive {
    color: var(--crm-success);
}

.crm-kpi-card .kpi-delta.negative {
    color: var(--crm-danger);
}

.crm-kpi-card .kpi-delta i {
    font-size: 10px;
}

.crm-kpi-card .kpi-period {
    font-size: var(--crm-font-size-xs);
    color: var(--crm-text-muted);
}

.crm-kpi-card .kpi-sparkline {
    height: 40px;
    margin-top: var(--crm-spacing-sm);
}

/* KPI Card variantes */
.crm-kpi-card.kpi-gradient {
    background: var(--crm-bg-gradient);
    border: none;
}

.crm-kpi-card.kpi-gradient .kpi-label,
.crm-kpi-card.kpi-gradient .kpi-period {
    color: rgba(255, 255, 255, 0.7);
}

.crm-kpi-card.kpi-gradient .kpi-value {
    color: var(--crm-text-inverse);
}

.crm-kpi-card.kpi-gradient .kpi-delta {
    color: rgba(255, 255, 255, 0.9);
}

/* ================================================
   PANEL STICKY SUPERIOR (FORMULARIOS)
   ================================================ */
.crm-panel-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--crm-bg-card);
    padding: var(--crm-spacing-md) var(--crm-spacing-lg);
    margin: calc(-1 * var(--crm-spacing-md)) calc(-1 * var(--crm-spacing-lg)) var(--crm-spacing-lg);
    border-bottom: 1px solid var(--crm-border-color);
    box-shadow: var(--crm-shadow-sm);
}

.crm-panel-sticky .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--crm-spacing-md);
}

.crm-panel-sticky .panel-title-section {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-md);
}

.crm-panel-sticky .panel-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--crm-radius-full);
    background: var(--crm-primary-bg);
    color: var(--crm-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
}

.crm-panel-sticky .panel-title {
    font-size: var(--crm-font-size-xl);
    font-weight: 600;
    color: var(--crm-text-primary);
    margin: 0;
}

.crm-panel-sticky .panel-subtitle {
    font-size: var(--crm-font-size-sm);
    color: var(--crm-text-muted);
    margin-top: 2px;
}

.crm-panel-sticky .panel-badges {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-sm);
    margin-top: var(--crm-spacing-xs);
}

.crm-panel-sticky .panel-actions {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-sm);
}

.crm-panel-sticky .panel-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: var(--crm-font-size-sm);
    font-weight: 500;
    border-radius: var(--crm-radius-md);
}

.crm-panel-sticky .panel-actions .btn i {
    font-size: 14px;
}

/* Health Score Badge */
.crm-health-score {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--crm-radius-full);
    font-size: var(--crm-font-size-sm);
    font-weight: 600;
}

.crm-health-score.health-good {
    background: var(--crm-success-bg);
    color: var(--crm-success-dark);
}

.crm-health-score.health-warning {
    background: var(--crm-warning-bg);
    color: #c53030;
}

.crm-health-score.health-danger {
    background: var(--crm-danger-bg);
    color: var(--crm-danger);
}

/* ================================================
   LAYOUT 30/70 PARA FORMULARIOS
   ================================================ */
.crm-layout-30-70 {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: var(--crm-spacing-lg);
}

@media (max-width: 992px) {
    .crm-layout-30-70 {
        grid-template-columns: 1fr;
    }
}

.crm-layout-30-70 .crm-identity-panel {
    position: sticky;
    top: 120px;
    height: fit-content;
}

.crm-identity-card {
    background: var(--crm-bg-card);
    border-radius: var(--crm-radius-lg);
    padding: var(--crm-spacing-lg);
    box-shadow: var(--crm-shadow-md);
    border: 1px solid var(--crm-border-color);
}

.crm-identity-card .identity-avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--crm-radius-full);
    background: var(--crm-bg-gradient);
    color: var(--crm-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 600;
    margin: 0 auto var(--crm-spacing-md);
}

.crm-identity-card .identity-name {
    text-align: center;
    font-size: var(--crm-font-size-lg);
    font-weight: 600;
    color: var(--crm-text-primary);
    margin-bottom: var(--crm-spacing-xs);
}

.crm-identity-card .identity-role {
    text-align: center;
    font-size: var(--crm-font-size-sm);
    color: var(--crm-text-muted);
    margin-bottom: var(--crm-spacing-md);
}

.crm-identity-card .identity-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--crm-spacing-sm);
    padding-top: var(--crm-spacing-md);
    border-top: 1px solid var(--crm-border-color);
}

.crm-identity-card .stat-item {
    text-align: center;
    padding: var(--crm-spacing-sm);
}

.crm-identity-card .stat-value {
    font-size: var(--crm-font-size-lg);
    font-weight: 700;
    color: var(--crm-primary);
}

.crm-identity-card .stat-label {
    font-size: var(--crm-font-size-xs);
    color: var(--crm-text-muted);
    text-transform: uppercase;
}

.crm-identity-card .identity-fields {
    margin-top: var(--crm-spacing-md);
    padding-top: var(--crm-spacing-md);
    border-top: 1px solid var(--crm-border-color);
}

.crm-identity-card .field-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--crm-spacing-sm) 0;
    border-bottom: 1px solid var(--crm-border-light);
}

.crm-identity-card .field-row:last-child {
    border-bottom: none;
}

.crm-identity-card .field-label {
    font-size: var(--crm-font-size-sm);
    color: var(--crm-text-muted);
}

.crm-identity-card .field-value {
    font-size: var(--crm-font-size-sm);
    color: var(--crm-text-primary);
    font-weight: 500;
    text-align: right;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================================================
   JOURNEY TIMELINE
   ================================================ */
.crm-journey-timeline {
    display: flex;
    align-items: center;
    padding: var(--crm-spacing-md) 0;
    overflow-x: auto;
    gap: 0;
}

.crm-journey-timeline::-webkit-scrollbar {
    height: 4px;
}

.crm-journey-timeline::-webkit-scrollbar-track {
    background: var(--crm-border-light);
    border-radius: 2px;
}

.crm-journey-timeline::-webkit-scrollbar-thumb {
    background: var(--crm-primary-light);
    border-radius: 2px;
}

.crm-journey-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    position: relative;
    cursor: pointer;
    transition: var(--crm-transition-fast);
}

.crm-journey-node:hover {
    transform: translateY(-2px);
}

.crm-journey-node .node-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--crm-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--crm-text-inverse);
    position: relative;
    z-index: 2;
    box-shadow: var(--crm-shadow-md);
}

.crm-journey-node .node-icon.channel-ads { background: #4285f4; }
.crm-journey-node .node-icon.channel-linkedin { background: #0077b5; }
.crm-journey-node .node-icon.channel-facebook { background: #1877f2; }
.crm-journey-node .node-icon.channel-email { background: #ea4335; }
.crm-journey-node .node-icon.channel-organic { background: var(--crm-success); }
.crm-journey-node .node-icon.channel-direct { background: var(--crm-neutral); }
.crm-journey-node .node-icon.channel-whatsapp { background: var(--crm-whatsapp); }
.crm-journey-node .node-icon.channel-call { background: var(--crm-primary); }
.crm-journey-node .node-icon.channel-webinar { background: var(--crm-accent); }
.crm-journey-node .node-icon.channel-demo { background: var(--crm-warning); }

.crm-journey-node .node-label {
    font-size: var(--crm-font-size-xs);
    color: var(--crm-text-secondary);
    margin-top: var(--crm-spacing-xs);
    text-align: center;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-journey-node .node-date {
    font-size: 10px;
    color: var(--crm-text-muted);
    margin-top: 2px;
}

.crm-journey-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, var(--crm-primary-light) 0%, var(--crm-primary) 100%);
    min-width: 30px;
    position: relative;
    top: -18px;
}

.crm-journey-line::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid var(--crm-primary);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

/* Journey Timeline Container */
.crm-journey-container {
    background: var(--crm-bg-card);
    border-radius: var(--crm-radius-lg);
    padding: var(--crm-spacing-lg);
    box-shadow: var(--crm-shadow-md);
    border: 1px solid var(--crm-border-color);
    margin-bottom: var(--crm-spacing-lg);
}

.crm-journey-container .journey-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--crm-spacing-md);
}

.crm-journey-container .journey-title {
    font-size: var(--crm-font-size-md);
    font-weight: 600;
    color: var(--crm-text-primary);
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-sm);
}

.crm-journey-container .journey-title i {
    color: var(--crm-primary);
}

.crm-journey-container .journey-count {
    font-size: var(--crm-font-size-sm);
    color: var(--crm-text-muted);
}

/* ================================================
   NEXT BEST ACTION CARD
   ================================================ */
.crm-nba-card {
    background: linear-gradient(135deg, var(--crm-primary-bg) 0%, rgba(118, 75, 162, 0.08) 100%);
    border: 1px solid var(--crm-primary-light);
    border-radius: var(--crm-radius-lg);
    padding: var(--crm-spacing-md);
    margin-bottom: var(--crm-spacing-lg);
}

.crm-nba-card .nba-header {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-sm);
    margin-bottom: var(--crm-spacing-sm);
}

.crm-nba-card .nba-header i {
    color: var(--crm-primary);
    font-size: 16px;
}

.crm-nba-card .nba-title {
    font-size: var(--crm-font-size-sm);
    font-weight: 600;
    color: var(--crm-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.crm-nba-card .nba-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.crm-nba-card .nba-item {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-sm);
    padding: var(--crm-spacing-sm) 0;
    border-bottom: 1px solid rgba(94, 114, 228, 0.1);
}

.crm-nba-card .nba-item:last-child {
    border-bottom: none;
}

.crm-nba-card .nba-item-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--crm-radius-md);
    background: var(--crm-bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--crm-primary);
    flex-shrink: 0;
}

.crm-nba-card .nba-item-content {
    flex: 1;
}

.crm-nba-card .nba-item-label {
    font-size: var(--crm-font-size-sm);
    font-weight: 500;
    color: var(--crm-text-primary);
}

.crm-nba-card .nba-item-reason {
    font-size: var(--crm-font-size-xs);
    color: var(--crm-text-muted);
}

/* ================================================
   WATERFALL / ATTRIBUTION CHART
   ================================================ */
.crm-attribution-card {
    background: var(--crm-bg-card);
    border-radius: var(--crm-radius-lg);
    padding: var(--crm-spacing-lg);
    box-shadow: var(--crm-shadow-md);
    border: 1px solid var(--crm-border-color);
}

.crm-attribution-card .attribution-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--crm-spacing-md);
}

.crm-attribution-card .attribution-title {
    font-size: var(--crm-font-size-md);
    font-weight: 600;
    color: var(--crm-text-primary);
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-sm);
}

.crm-attribution-card .attribution-title i {
    color: var(--crm-accent);
}

.crm-attribution-card .attribution-total {
    font-size: var(--crm-font-size-lg);
    font-weight: 700;
    color: var(--crm-primary);
}

.crm-attribution-bar {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-md);
    padding: var(--crm-spacing-sm) 0;
    border-bottom: 1px solid var(--crm-border-light);
}

.crm-attribution-bar:last-child {
    border-bottom: none;
}

.crm-attribution-bar .bar-label {
    width: 120px;
    font-size: var(--crm-font-size-sm);
    color: var(--crm-text-secondary);
    flex-shrink: 0;
}

.crm-attribution-bar .bar-container {
    flex: 1;
    height: 24px;
    background: var(--crm-border-light);
    border-radius: var(--crm-radius-sm);
    overflow: hidden;
}

.crm-attribution-bar .bar-fill {
    height: 100%;
    background: var(--crm-bg-gradient);
    border-radius: var(--crm-radius-sm);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--crm-spacing-sm);
    min-width: 40px;
    transition: width 0.5s ease;
}

.crm-attribution-bar .bar-value {
    font-size: var(--crm-font-size-xs);
    font-weight: 600;
    color: var(--crm-text-inverse);
}

.crm-attribution-bar .bar-amount {
    width: 80px;
    text-align: right;
    font-size: var(--crm-font-size-sm);
    font-weight: 600;
    color: var(--crm-text-primary);
    flex-shrink: 0;
}

/* ================================================
   ACTIVITY TICKER
   ================================================ */
.crm-activity-ticker {
    background: var(--crm-bg-card);
    border-radius: var(--crm-radius-lg);
    border: 1px solid var(--crm-border-color);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.crm-activity-ticker .ticker-header {
    padding: var(--crm-spacing-md);
    border-bottom: 1px solid var(--crm-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.crm-activity-ticker .ticker-title {
    font-size: var(--crm-font-size-sm);
    font-weight: 600;
    color: var(--crm-text-primary);
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-sm);
}

.crm-activity-ticker .ticker-title i {
    color: var(--crm-primary);
}

.crm-activity-ticker .ticker-badge {
    background: var(--crm-success-bg);
    color: var(--crm-success);
    font-size: var(--crm-font-size-xs);
    padding: 2px 8px;
    border-radius: var(--crm-radius-full);
    font-weight: 600;
}

.crm-activity-ticker .ticker-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--crm-spacing-sm);
}

.crm-activity-ticker .ticker-item {
    display: flex;
    gap: var(--crm-spacing-sm);
    padding: var(--crm-spacing-sm);
    border-radius: var(--crm-radius-md);
    transition: var(--crm-transition-fast);
    cursor: pointer;
}

.crm-activity-ticker .ticker-item:hover {
    background: var(--crm-bg-hover);
}

.crm-activity-ticker .ticker-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--crm-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.crm-activity-ticker .ticker-icon.type-lead { background: var(--crm-primary-bg); color: var(--crm-primary); }
.crm-activity-ticker .ticker-icon.type-deal { background: var(--crm-success-bg); color: var(--crm-success); }
.crm-activity-ticker .ticker-icon.type-whatsapp { background: rgba(37, 211, 102, 0.12); color: var(--crm-whatsapp); }
.crm-activity-ticker .ticker-icon.type-call { background: var(--crm-info-bg); color: var(--crm-info); }

.crm-activity-ticker .ticker-content {
    flex: 1;
    min-width: 0;
}

.crm-activity-ticker .ticker-text {
    font-size: var(--crm-font-size-sm);
    color: var(--crm-text-primary);
    line-height: 1.4;
}

.crm-activity-ticker .ticker-text strong {
    color: var(--crm-primary);
}

.crm-activity-ticker .ticker-time {
    font-size: var(--crm-font-size-xs);
    color: var(--crm-text-muted);
    margin-top: 2px;
}

/* ================================================
   FILTERS BAR (DASHBOARD)
   ================================================ */
.crm-filters-bar {
    background: var(--crm-bg-card);
    border-radius: var(--crm-radius-lg);
    padding: var(--crm-spacing-md) var(--crm-spacing-lg);
    box-shadow: var(--crm-shadow-sm);
    border: 1px solid var(--crm-border-color);
    margin-bottom: var(--crm-spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-lg);
    flex-wrap: wrap;
}

.crm-filters-bar .filter-group {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-sm);
}

.crm-filters-bar .filter-label {
    font-size: var(--crm-font-size-sm);
    font-weight: 500;
    color: var(--crm-text-muted);
}

.crm-filters-bar .filter-select {
    padding: 6px 12px;
    border: 1px solid var(--crm-border-color);
    border-radius: var(--crm-radius-md);
    font-size: var(--crm-font-size-sm);
    color: var(--crm-text-primary);
    background: var(--crm-bg-card);
    cursor: pointer;
    transition: var(--crm-transition-fast);
}

.crm-filters-bar .filter-select:focus {
    outline: none;
    border-color: var(--crm-primary);
    box-shadow: 0 0 0 3px var(--crm-primary-bg);
}

.crm-filters-bar .filter-pills {
    display: flex;
    gap: var(--crm-spacing-xs);
}

.crm-filters-bar .filter-pill {
    padding: 6px 14px;
    border-radius: var(--crm-radius-full);
    font-size: var(--crm-font-size-sm);
    font-weight: 500;
    background: transparent;
    border: 1px solid var(--crm-border-color);
    color: var(--crm-text-secondary);
    cursor: pointer;
    transition: var(--crm-transition-fast);
}

.crm-filters-bar .filter-pill:hover {
    border-color: var(--crm-primary);
    color: var(--crm-primary);
}

.crm-filters-bar .filter-pill.active {
    background: var(--crm-primary);
    border-color: var(--crm-primary);
    color: var(--crm-text-inverse);
}

/* ================================================
   WHATSAPP FAB (FLOATING ACTION BUTTON)
   ================================================ */
.crm-wa-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: var(--crm-radius-full);
    background: var(--crm-whatsapp);
    color: var(--crm-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
    z-index: 1000;
    transition: var(--crm-transition-normal);
    border: none;
}

.crm-wa-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

.crm-wa-fab:active {
    transform: scale(0.95);
}

.crm-wa-fab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--crm-danger);
    color: var(--crm-text-inverse);
    border-radius: var(--crm-radius-full);
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: crm-pulse 2s infinite;
}

@keyframes crm-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ================================================
   QUICK ACTIONS PANEL
   ================================================ */
.crm-quick-actions-panel {
    background: var(--crm-bg-card);
    border-radius: var(--crm-radius-lg);
    padding: var(--crm-spacing-md);
    margin-bottom: var(--crm-spacing-md);
    box-shadow: var(--crm-shadow-sm);
    border: 1px solid var(--crm-border-color);
}

.crm-quick-actions-panel .quick-actions-title {
    font-size: var(--crm-font-size-sm);
    font-weight: 600;
    color: var(--crm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--crm-spacing-sm);
}

.crm-quick-actions-panel .quick-actions-buttons {
    display: flex;
    gap: var(--crm-spacing-sm);
    flex-wrap: wrap;
}

.crm-quick-actions-panel .btn-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: var(--crm-radius-md);
    font-size: var(--crm-font-size-sm);
    font-weight: 500;
    transition: var(--crm-transition-fast);
}

.crm-quick-actions-panel .btn-action i {
    font-size: 14px;
}

.crm-quick-actions-panel .btn-whatsapp {
    background: var(--crm-whatsapp) !important;
    border-color: var(--crm-whatsapp) !important;
    color: var(--crm-text-inverse) !important;
}

.crm-quick-actions-panel .btn-whatsapp:hover {
    background: var(--crm-whatsapp-dark) !important;
}

/* ================================================
   NAVBAR - OCULTAR COMPLETAMENTE
   ================================================ */
header.navbar,
.navbar,
body .navbar,
html body .navbar,
.sticky-top > header.navbar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Asegurar que sticky-top no ocupe espacio */
.sticky-top {
    position: static !important;
}

/* Ocultar breadcrumbs del navbar - ya tenemos nuestra propia navegación */
#navbar-breadcrumbs,
.navbar #navbar-breadcrumbs,
header .navbar #navbar-breadcrumbs,
.page-breadcrumbs,
.breadcrumb-home,
.navbar-home,
.btn-home,
a.navbar-home,
a.btn-home {
    display: none !important;
    visibility: hidden !important;
}

/* ================================================
   SIDEBAR CORPORATIVO
   ================================================ */
.layout-side-section,
.desk-sidebar {
    background: #f4f5f7;
    border-right: 1px solid #e9ecef;
}

.desk-sidebar .sidebar-menu .sidebar-label,
.layout-side-section .sidebar-label {
    color: var(--crm-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
}

.desk-sidebar .sidebar-menu .sidebar-link,
.layout-side-section a {
    color: var(--crm-text-primary);
    transition: all 0.2s ease;
}

.desk-sidebar .sidebar-menu .sidebar-link:hover,
.layout-side-section a:hover {
    color: var(--crm-primary);
    background: rgba(94, 114, 228, 0.08);
}

.desk-sidebar .sidebar-menu .sidebar-link.active,
.desk-sidebar .sidebar-menu .sidebar-link.selected {
    color: var(--crm-primary);
    background: rgba(94, 114, 228, 0.12);
    border-left: 3px solid var(--crm-primary);
    font-weight: 500;
}

/* ================================================
   BOTONES CORPORATIVOS
   ================================================ */
.btn-primary,
.btn-primary-dark {
    background: var(--crm-primary) !important;
    border-color: var(--crm-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(94, 114, 228, 0.25);
    transition: all 0.2s ease;
}

.btn-primary:hover,
.btn-primary-dark:hover,
.btn-primary:focus {
    background: var(--crm-primary-dark) !important;
    border-color: var(--crm-primary-dark) !important;
    box-shadow: 0 6px 12px rgba(94, 114, 228, 0.35);
    transform: translateY(-1px);
}

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

.btn-primary-light {
    background: rgba(94, 114, 228, 0.1) !important;
    color: var(--crm-primary) !important;
    border: 1px solid transparent !important;
}

.btn-primary-light:hover {
    background: rgba(94, 114, 228, 0.2) !important;
}

/* Botón secundario/default */
.btn-default,
.btn-secondary {
    background: #f4f5f7 !important;
    border: 1px solid #e9ecef !important;
    color: var(--crm-text-primary) !important;
}

.btn-default:hover,
.btn-secondary:hover {
    background: #e9ecef !important;
    border-color: #dee2e6 !important;
}

/* Botón éxito */
.btn-success {
    background: var(--crm-success) !important;
    border-color: var(--crm-success) !important;
    box-shadow: 0 4px 6px rgba(45, 206, 137, 0.25);
}

.btn-success:hover {
    background: var(--crm-success-dark) !important;
    border-color: var(--crm-success-dark) !important;
    box-shadow: 0 6px 12px rgba(45, 206, 137, 0.35);
}

/* ================================================
   FORMULARIOS Y CONTROLES
   ================================================ */
.frappe-control input[type="text"],
.frappe-control input[type="email"],
.frappe-control input[type="password"],
.frappe-control input[type="number"],
.frappe-control textarea,
.frappe-control select,
.form-control {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.frappe-control input:focus,
.frappe-control textarea:focus,
.frappe-control select:focus,
.form-control:focus {
    border-color: var(--crm-primary) !important;
    box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.15) !important;
    outline: none;
}

/* Labels */
.frappe-control .control-label,
.form-group label {
    color: var(--crm-text-secondary);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Links */
.like-disabled-input a,
.form-links a,
a.text-muted:hover {
    color: var(--crm-primary) !important;
}

/* Checkbox */
input[type="checkbox"]:checked {
    background-color: var(--crm-primary) !important;
    border-color: var(--crm-primary) !important;
}

/* ================================================
   TARJETAS Y WIDGETS
   ================================================ */
.frappe-card,
.widget,
.card {
    background: #ffffff;
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(50, 50, 93, 0.08);
    transition: box-shadow 0.2s ease;
}

.frappe-card:hover,
.widget:hover {
    box-shadow: 0 4px 20px rgba(50, 50, 93, 0.12);
}

/* Headers de sección */
.section-head,
.form-section .section-head {
    color: var(--crm-text-primary);
    font-weight: 600;
    border-bottom: 2px solid var(--crm-primary);
    padding-bottom: 8px;
    margin-bottom: 16px;
}

/* ================================================
   LISTA Y TABLAS
   ================================================ */
.frappe-list .list-row:hover,
.datatable .dt-row:hover {
    background: rgba(94, 114, 228, 0.04) !important;
}

.frappe-list .list-row.selected,
.frappe-list .list-row-check:checked + .list-row {
    background: rgba(94, 114, 228, 0.08) !important;
    border-left: 3px solid var(--crm-primary);
}

/* Headers de tabla */
.datatable .dt-header .dt-cell,
.frappe-list .list-header {
    background: #f8f9fe;
    color: var(--crm-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

/* ================================================
   INDICADORES Y BADGES
   ================================================ */
.indicator-pill {
    border-radius: 20px;
    padding: 4px 12px;
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.indicator-pill.blue,
.indicator-pill.primary {
    background: rgba(94, 114, 228, 0.15) !important;
    color: var(--crm-primary) !important;
}

.indicator-pill.green {
    background: rgba(45, 206, 137, 0.15) !important;
    color: var(--crm-success) !important;
}

.indicator-pill.orange,
.indicator-pill.yellow {
    background: rgba(251, 99, 64, 0.15) !important;
    color: var(--crm-warning) !important;
}

.indicator-pill.red {
    background: rgba(245, 54, 92, 0.15) !important;
    color: var(--crm-danger) !important;
}

/* ================================================
   WORKSPACE Y DASHBOARD
   ================================================ */
.workspace-container .widget.shortcut-widget-box {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    transition: all 0.25s ease;
}

.workspace-container .widget.shortcut-widget-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(94, 114, 228, 0.15);
    border-color: var(--crm-primary);
}

.workspace-container .number-widget-box {
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.workspace-container .number-widget-box .widget-head {
    color: rgba(255, 255, 255, 0.8);
}

.workspace-container .number-widget-box .number-card-value {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 700;
}

/* ================================================
   TABS
   ================================================ */
.form-tabs .nav-link,
.nav-tabs .nav-link {
    color: var(--crm-text-secondary);
    border: none;
    padding: 12px 20px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.form-tabs .nav-link:hover,
.nav-tabs .nav-link:hover {
    color: var(--crm-primary);
    background: rgba(94, 114, 228, 0.05);
}

.form-tabs .nav-link.active,
.nav-tabs .nav-link.active {
    color: var(--crm-primary) !important;
    border-bottom: 3px solid var(--crm-primary) !important;
    background: transparent;
}

/* ================================================
   MODALES
   ================================================ */
.modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
}

.modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    border-radius: 16px 16px 0 0;
    border: none;
}

.modal-header .modal-title {
    color: #ffffff;
    font-weight: 600;
}

.modal-header .btn-close,
.modal-header .close {
    color: #ffffff;
    opacity: 0.8;
}

.modal-header .btn-close:hover,
.modal-header .close:hover {
    opacity: 1;
}

/* ================================================
   ALERTAS
   ================================================ */
.alert-info,
.msgprint {
    background: rgba(94, 114, 228, 0.1);
    border: 1px solid rgba(94, 114, 228, 0.3);
    color: var(--crm-primary-dark);
    border-radius: 8px;
}

.alert-success {
    background: rgba(45, 206, 137, 0.1);
    border: 1px solid rgba(45, 206, 137, 0.3);
    color: var(--crm-success-dark);
    border-radius: 8px;
}

.alert-warning {
    background: rgba(251, 99, 64, 0.1);
    border: 1px solid rgba(251, 99, 64, 0.3);
    color: #c53030;
    border-radius: 8px;
}

.alert-danger {
    background: rgba(245, 54, 92, 0.1);
    border: 1px solid rgba(245, 54, 92, 0.3);
    color: #c53030;
    border-radius: 8px;
}

/* ================================================
   PROGRESS BAR
   ================================================ */
.progress {
    background: #e9ecef;
    border-radius: 10px;
    height: 8px;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
}

/* ================================================
   DROPDOWNS
   ================================================ */
.dropdown-menu {
    border: 1px solid var(--crm-border-color, #e9ecef) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 40px rgba(50, 50, 93, 0.15) !important;
    padding: 8px !important;
    background: #ffffff !important;
    min-width: 180px !important;
}

.dropdown-item,
.dropdown-menu .dropdown-item,
.dropdown-menu a,
.dropdown-menu button {
    border-radius: 6px !important;
    padding: 10px 14px !important;
    color: var(--crm-text-primary, #32325d) !important;
    transition: all 0.15s ease !important;
    display: block !important;
    background: transparent !important;
    text-decoration: none !important;
}

.dropdown-item:hover,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu a:hover,
.dropdown-menu button:hover {
    background: rgba(94, 114, 228, 0.08) !important;
    color: var(--crm-primary, #5e72e4) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--crm-primary) !important;
    color: #ffffff !important;
}

.dropdown-divider {
    border-top: 1px solid var(--crm-border-color, #e9ecef) !important;
    margin: 4px 0 !important;
}

/* ================================================
   PÁGINA PRINCIPAL
   ================================================ */
.page-container,
.main-section {
    background: #f8f9fe;
}

.page-head {
    background: #ffffff;
    border-bottom: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(50, 50, 93, 0.04);
}

.page-head .page-title {
    color: var(--crm-text-primary);
    font-weight: 600;
}

/* ================================================
   ESTILOS ESPECÍFICOS CRM
   ================================================ */
.crm-dashboard-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(50, 50, 93, 0.08);
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
}

.crm-metric .metric-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--crm-primary);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.crm-metric .metric-label {
    color: var(--crm-text-muted);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 768px) {
    .navbar {
        padding: 8px 12px;
    }
    
    .crm-metric .metric-value {
        font-size: 1.8rem;
    }
}

/* ================================================
   DARK THEME SUPPORT
   ================================================ */
[data-theme="dark"] {
    --crm-bg-light: #1a1d21;
    --crm-bg-sidebar: #1f2227;
    --crm-text-primary: #f8f9fa;
    --crm-text-secondary: #adb5bd;
    --crm-text-muted: #6c757d;
}

[data-theme="dark"] .navbar {
    background: linear-gradient(135deg, #4c5cc4 0%, #6a3fa3 100%) !important;
}

[data-theme="dark"] .frappe-card,
[data-theme="dark"] .widget,
[data-theme="dark"] .card {
    background: #1f2227;
    border-color: #2d3238;
}

[data-theme="dark"] .desk-sidebar,
[data-theme="dark"] .layout-side-section {
    background: #1a1d21;
    border-color: #2d3238;
}

[data-theme="dark"] .modal-content {
    background: #1f2227;
}

[data-theme="dark"] .dropdown-menu {
    background: #1f2227;
    border: 1px solid #2d3238;
}

[data-theme="dark"] .page-container,
[data-theme="dark"] .main-section {
    background: #121417;
}

[data-theme="dark"] .btn-default,
[data-theme="dark"] .btn-secondary {
    background: #2d3238 !important;
    border-color: #3d4248 !important;
    color: #f8f9fa !important;
}

[data-theme="dark"] .crm-kpi-card,
[data-theme="dark"] .crm-identity-card,
[data-theme="dark"] .crm-journey-container,
[data-theme="dark"] .crm-attribution-card,
[data-theme="dark"] .crm-activity-ticker,
[data-theme="dark"] .crm-filters-bar,
[data-theme="dark"] .crm-nba-card {
    background: #1f2227;
    border-color: #2d3238;
}

[data-theme="dark"] .crm-panel-sticky {
    background: #1f2227;
    border-color: #2d3238;
}

/* ================================================
   FUNNEL CHART STYLES
   ================================================ */
.crm-funnel-container {
    background: var(--crm-bg-card);
    border-radius: var(--crm-radius-lg);
    padding: var(--crm-spacing-lg);
    box-shadow: var(--crm-shadow-md);
    border: 1px solid var(--crm-border-color);
}

.crm-funnel-container .funnel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--crm-spacing-lg);
}

.crm-funnel-container .funnel-title {
    font-size: var(--crm-font-size-md);
    font-weight: 600;
    color: var(--crm-text-primary);
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-sm);
}

.crm-funnel-container .funnel-title i {
    color: var(--crm-primary);
}

.crm-funnel-stage {
    display: flex;
    align-items: center;
    margin-bottom: var(--crm-spacing-sm);
}

.crm-funnel-stage .stage-label {
    width: 100px;
    font-size: var(--crm-font-size-sm);
    font-weight: 500;
    color: var(--crm-text-secondary);
    flex-shrink: 0;
}

.crm-funnel-stage .stage-bar-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-sm);
}

.crm-funnel-stage .stage-bar {
    height: 32px;
    background: var(--crm-bg-gradient);
    border-radius: var(--crm-radius-sm);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--crm-spacing-sm);
    transition: width 0.5s ease;
    min-width: 50px;
}

.crm-funnel-stage .stage-bar .stage-value {
    font-size: var(--crm-font-size-sm);
    font-weight: 600;
    color: var(--crm-text-inverse);
}

.crm-funnel-stage .stage-conversion {
    font-size: var(--crm-font-size-xs);
    color: var(--crm-text-muted);
    width: 60px;
    text-align: right;
}

/* ================================================
   TOP JOURNEYS TABLE
   ================================================ */
.crm-journeys-table {
    background: var(--crm-bg-card);
    border-radius: var(--crm-radius-lg);
    box-shadow: var(--crm-shadow-md);
    border: 1px solid var(--crm-border-color);
    overflow: hidden;
}

.crm-journeys-table .table-header {
    padding: var(--crm-spacing-md) var(--crm-spacing-lg);
    border-bottom: 1px solid var(--crm-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.crm-journeys-table .table-title {
    font-size: var(--crm-font-size-md);
    font-weight: 600;
    color: var(--crm-text-primary);
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-sm);
}

.crm-journeys-table .table-title i {
    color: var(--crm-accent);
}

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

.crm-journeys-table th {
    padding: var(--crm-spacing-sm) var(--crm-spacing-md);
    text-align: left;
    font-size: var(--crm-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--crm-text-muted);
    background: var(--crm-bg-light);
    border-bottom: 1px solid var(--crm-border-color);
}

.crm-journeys-table td {
    padding: var(--crm-spacing-sm) var(--crm-spacing-md);
    font-size: var(--crm-font-size-sm);
    color: var(--crm-text-primary);
    border-bottom: 1px solid var(--crm-border-light);
}

.crm-journeys-table tr:hover td {
    background: var(--crm-bg-hover);
}

.crm-journeys-table .journey-path {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.crm-journeys-table .journey-step {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--crm-primary-bg);
    color: var(--crm-primary);
    border-radius: var(--crm-radius-sm);
    font-size: var(--crm-font-size-xs);
    font-weight: 500;
}

.crm-journeys-table .journey-arrow {
    color: var(--crm-text-muted);
    font-size: 10px;
}

/* ================================================
   SANKEY CHART CONTAINER
   ================================================ */
.crm-sankey-container {
    background: var(--crm-bg-card);
    border-radius: var(--crm-radius-lg);
    padding: var(--crm-spacing-lg);
    box-shadow: var(--crm-shadow-md);
    border: 1px solid var(--crm-border-color);
    min-height: 400px;
}

.crm-sankey-container .sankey-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--crm-spacing-md);
}

.crm-sankey-container .sankey-title {
    font-size: var(--crm-font-size-md);
    font-weight: 600;
    color: var(--crm-text-primary);
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-sm);
}

.crm-sankey-container .sankey-title i {
    color: var(--crm-secondary);
}

.crm-sankey-container .sankey-chart {
    height: 350px;
}

/* ================================================
   INTEGRATION STATUS CARDS
   ================================================ */
.crm-integration-status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--crm-spacing-md);
    margin-bottom: var(--crm-spacing-lg);
}

.crm-integration-card {
    background: var(--crm-bg-card);
    border-radius: var(--crm-radius-lg);
    padding: var(--crm-spacing-md);
    border: 1px solid var(--crm-border-color);
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-md);
    transition: var(--crm-transition-fast);
}

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

.crm-integration-card .integration-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--crm-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.crm-integration-card .integration-icon.ga4 { background: #f9e5c9; color: #e37400; }
.crm-integration-card .integration-icon.gads { background: #d4e8fc; color: #4285f4; }
.crm-integration-card .integration-icon.facebook { background: #dbe8f6; color: #1877f2; }
.crm-integration-card .integration-icon.mia { background: var(--crm-primary-bg); color: var(--crm-primary); }
.crm-integration-card .integration-icon.tracker { background: var(--crm-success-bg); color: var(--crm-success); }

.crm-integration-card .integration-info {
    flex: 1;
}

.crm-integration-card .integration-name {
    font-size: var(--crm-font-size-sm);
    font-weight: 600;
    color: var(--crm-text-primary);
}

.crm-integration-card .integration-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--crm-font-size-xs);
    margin-top: 2px;
}

.crm-integration-card .integration-status.active { color: var(--crm-success); }
.crm-integration-card .integration-status.inactive { color: var(--crm-text-muted); }
.crm-integration-card .integration-status.error { color: var(--crm-danger); }

.crm-integration-card .status-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--crm-radius-full);
}

.crm-integration-card .status-dot.active { background: var(--crm-success); }
.crm-integration-card .status-dot.inactive { background: var(--crm-text-muted); }
.crm-integration-card .status-dot.error { background: var(--crm-danger); }

/* ================================================
   SETUP WIZARD STYLES
   ================================================ */
.crm-wizard {
    max-width: 700px;
    margin: 0 auto;
}

.crm-wizard-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--crm-spacing-xl);
    padding: 0 var(--crm-spacing-lg);
}

.crm-wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
}

.crm-wizard-step::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--crm-border-color);
    z-index: 0;
}

.crm-wizard-step:last-child::after {
    display: none;
}

.crm-wizard-step.completed::after {
    background: var(--crm-primary);
}

.crm-wizard-step .step-number {
    width: 32px;
    height: 32px;
    border-radius: var(--crm-radius-full);
    background: var(--crm-border-color);
    color: var(--crm-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--crm-font-size-sm);
    font-weight: 600;
    position: relative;
    z-index: 1;
    transition: var(--crm-transition-normal);
}

.crm-wizard-step.active .step-number {
    background: var(--crm-primary);
    color: var(--crm-text-inverse);
    box-shadow: 0 0 0 4px var(--crm-primary-bg);
}

.crm-wizard-step.completed .step-number {
    background: var(--crm-success);
    color: var(--crm-text-inverse);
}

.crm-wizard-step .step-label {
    font-size: var(--crm-font-size-xs);
    color: var(--crm-text-muted);
    margin-top: var(--crm-spacing-sm);
    text-align: center;
}

.crm-wizard-step.active .step-label {
    color: var(--crm-primary);
    font-weight: 500;
}

.crm-wizard-content {
    background: var(--crm-bg-card);
    border-radius: var(--crm-radius-lg);
    padding: var(--crm-spacing-xl);
    box-shadow: var(--crm-shadow-md);
    border: 1px solid var(--crm-border-color);
}

.crm-wizard-content .wizard-title {
    font-size: var(--crm-font-size-xl);
    font-weight: 600;
    color: var(--crm-text-primary);
    margin-bottom: var(--crm-spacing-sm);
}

.crm-wizard-content .wizard-description {
    font-size: var(--crm-font-size-sm);
    color: var(--crm-text-muted);
    margin-bottom: var(--crm-spacing-lg);
}

.crm-wizard-actions {
    display: flex;
    justify-content: space-between;
    margin-top: var(--crm-spacing-xl);
    padding-top: var(--crm-spacing-lg);
    border-top: 1px solid var(--crm-border-color);
}

/* ================================================
   SLIDER / RANGE INPUT
   ================================================ */
.crm-slider-container {
    padding: var(--crm-spacing-md) 0;
}

.crm-slider-container .slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--crm-spacing-sm);
}

.crm-slider-container .slider-label {
    font-size: var(--crm-font-size-sm);
    font-weight: 500;
    color: var(--crm-text-secondary);
}

.crm-slider-container .slider-value {
    font-size: var(--crm-font-size-sm);
    font-weight: 600;
    color: var(--crm-primary);
    background: var(--crm-primary-bg);
    padding: 2px 10px;
    border-radius: var(--crm-radius-full);
}

.crm-slider-container input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: var(--crm-radius-full);
    background: var(--crm-border-color);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.crm-slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: var(--crm-radius-full);
    background: var(--crm-primary);
    cursor: pointer;
    box-shadow: var(--crm-shadow-md);
    transition: var(--crm-transition-fast);
}

.crm-slider-container input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.crm-slider-container .slider-marks {
    display: flex;
    justify-content: space-between;
    margin-top: var(--crm-spacing-xs);
}

.crm-slider-container .slider-mark {
    font-size: var(--crm-font-size-xs);
    color: var(--crm-text-muted);
}

/* ================================================
   CODE SNIPPET BOX
   ================================================ */
.crm-code-snippet {
    background: #1e1e1e;
    border-radius: var(--crm-radius-md);
    overflow: hidden;
}

.crm-code-snippet .snippet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--crm-spacing-sm) var(--crm-spacing-md);
    background: #2d2d2d;
    border-bottom: 1px solid #3d3d3d;
}

.crm-code-snippet .snippet-title {
    font-size: var(--crm-font-size-xs);
    color: #888;
    font-weight: 500;
}

.crm-code-snippet .snippet-copy {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid #555;
    border-radius: var(--crm-radius-sm);
    color: #888;
    font-size: var(--crm-font-size-xs);
    cursor: pointer;
    transition: var(--crm-transition-fast);
}

.crm-code-snippet .snippet-copy:hover {
    background: #3d3d3d;
    color: #fff;
}

.crm-code-snippet pre {
    margin: 0;
    padding: var(--crm-spacing-md);
    overflow-x: auto;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    line-height: 1.5;
    color: #d4d4d4;
}

.crm-code-snippet code {
    background: transparent;
}

/* ================================================
   GLOBAL NAVIGATION BAR
   ================================================ */
.crm-nav-bar {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-md);
    padding: 0 var(--crm-spacing-lg);
    height: 48px;
    background: var(--crm-bg-card);
    border-bottom: 1px solid var(--crm-border-color);
    box-shadow: var(--crm-shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
    overflow: visible;
}

.crm-nav-brand {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-sm);
    font-weight: 700;
    font-size: var(--crm-font-size-md);
    text-decoration: none;
    color: var(--crm-text-primary);
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.crm-nav-brand:hover {
    color: var(--crm-primary);
    text-decoration: none;
    transform: translateY(-1px);
}

.crm-nav-brand:focus {
    outline: none;
    color: var(--crm-primary);
    color: var(--crm-primary);
    padding-right: var(--crm-spacing-lg);
    border-right: 1px solid var(--crm-border-color);
    margin-right: var(--crm-spacing-md);
}

.crm-nav-brand i {
    font-size: var(--crm-font-size-lg);
}

.crm-nav-items {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-xs);
    flex: 1;
    overflow: visible;
}

.crm-nav-item {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-sm);
    padding: var(--crm-spacing-sm) var(--crm-spacing-md);
    color: var(--crm-text-secondary);
    text-decoration: none;
    font-size: var(--crm-font-size-sm);
    font-weight: 500;
    border-radius: var(--crm-radius-md);
    transition: var(--crm-transition-fast);
    white-space: nowrap;
}

.crm-nav-item:hover {
    background: var(--crm-bg-hover);
    color: var(--crm-primary);
    text-decoration: none;
}

.crm-nav-item.active {
    background: var(--crm-primary-bg);
    color: var(--crm-primary);
}

.crm-nav-item i {
    font-size: var(--crm-font-size-base);
}

.crm-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--crm-radius-md);
    background: transparent;
    color: var(--crm-text-secondary);
    cursor: pointer;
    transition: var(--crm-transition-fast);
}

.crm-nav-toggle:hover {
    background: var(--crm-bg-hover);
    color: var(--crm-primary);
}

/* Keyboard shortcuts hint */
.crm-nav-item .nav-shortcut {
    font-size: 10px;
    color: var(--crm-text-muted);
    background: var(--crm-bg-light);
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: var(--crm-spacing-sm);
}

/* Dropdown menu styles */
.crm-nav-dropdown {
    position: relative;
    display: inline-flex;
    z-index: 1001;
}

.crm-nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-xs);
}

.crm-nav-dropdown-toggle .dropdown-arrow {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.crm-nav-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.crm-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    max-height: 400px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: all 0.2s ease;
    z-index: 999999;
    margin-top: 6px;
}

.crm-nav-dropdown:hover .crm-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.crm-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: #333333;
    text-decoration: none;
    transition: all 0.15s ease;
    font-size: 13px;
    font-weight: 500;
}

.crm-dropdown-item:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    text-decoration: none;
}

.crm-dropdown-item i {
    width: 18px;
    text-align: center;
    color: #666666;
    font-size: 14px;
}

.crm-dropdown-item:hover i {
    color: #ffffff;
}

.crm-dropdown-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 6px 0;
}

.crm-nav-dropdown.active .crm-nav-item {
    background: var(--crm-primary-bg);
    color: var(--crm-primary);
}

/* ================================================
   RESPONSIVE UTILITIES
   ================================================ */
@media (max-width: 1200px) {
    .crm-nav-item .nav-label {
        display: none;
    }
    
    .crm-nav-item {
        padding: var(--crm-spacing-sm) var(--crm-spacing-sm);
    }
    
    .crm-nav-item i {
        font-size: var(--crm-font-size-lg);
    }
}

@media (max-width: 768px) {
    .crm-nav-bar {
        flex-wrap: wrap;
        height: auto;
        padding: var(--crm-spacing-sm) var(--crm-spacing-md);
    }
    
    .crm-nav-brand {
        border-right: none;
        padding-right: 0;
        margin-right: auto;
    }
    
    .crm-nav-toggle {
        display: flex;
    }
    
    .crm-nav-items {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        padding-top: var(--crm-spacing-md);
        border-top: 1px solid var(--crm-border-color);
        margin-top: var(--crm-spacing-sm);
    }
    
    .crm-nav-bar.expanded .crm-nav-items {
        display: flex;
    }
    
    .crm-nav-item {
        justify-content: flex-start;
    }
    
    .crm-nav-item .nav-label {
        display: inline;
    }
    
    .crm-breadcrumbs-bar {
        flex-direction: column;
        padding: var(--crm-spacing-sm) var(--crm-spacing-md);
    }
    
    .crm-breadcrumb-list {
        margin-bottom: var(--crm-spacing-sm);
    }
    
    .crm-layout-30-70 {
        grid-template-columns: 1fr;
    }
    
    .crm-layout-30-70 .crm-identity-panel {
        position: relative;
        top: 0;
    }
    
    .crm-filters-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .crm-filters-bar .filter-group {
        flex-wrap: wrap;
    }
    
    .crm-panel-sticky .panel-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .crm-panel-sticky .panel-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .crm-kpi-card .kpi-value {
        font-size: var(--crm-font-size-2xl);
    }
    
    .crm-wizard-progress {
        padding: 0;
    }
    
    .crm-wizard-step .step-label {
        display: none;
    }
}

/* ================================================
   BREADCRUMBS & PAGE NAVIGATION
   ================================================ */
.crm-breadcrumbs-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--crm-spacing-sm) var(--crm-spacing-lg);
    background: var(--crm-bg-card);
    border-bottom: 1px solid var(--crm-border-color);
    min-height: 52px;
    flex-wrap: wrap;
    gap: var(--crm-spacing-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--crm-shadow-sm);
}

.crm-breadcrumb-list {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-xs);
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.crm-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-xs);
    font-size: var(--crm-font-size-sm);
    color: var(--crm-text-muted);
}

.crm-breadcrumb-item a {
    color: var(--crm-text-secondary);
    text-decoration: none;
    transition: var(--crm-transition-fast);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: var(--crm-radius-sm);
}

.crm-breadcrumb-item a:hover {
    color: var(--crm-primary);
    background: var(--crm-primary-bg);
    text-decoration: none;
}

.crm-breadcrumb-item a i {
    font-size: 12px;
}

.crm-breadcrumb-item.active {
    color: var(--crm-text-primary);
    font-weight: 500;
}

.crm-breadcrumb-separator {
    color: var(--crm-text-muted);
    font-size: 10px;
    opacity: 0.6;
}

/* Breadcrumb Home Icon */
.crm-breadcrumb-home {
    color: var(--crm-primary);
}

.crm-breadcrumb-home:hover {
    transform: scale(1.1);
}

/* Page Navigation Buttons */
.crm-page-nav {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-sm);
}

.crm-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: var(--crm-font-size-sm);
    font-weight: 500;
    color: var(--crm-text-secondary);
    background: transparent;
    border: 1px solid var(--crm-border-color);
    border-radius: var(--crm-radius-md);
    cursor: pointer;
    transition: var(--crm-transition-fast);
    text-decoration: none;
    white-space: nowrap;
}

.crm-nav-btn:hover {
    color: var(--crm-primary);
    border-color: var(--crm-primary);
    background: var(--crm-primary-bg);
    text-decoration: none;
}

.crm-nav-btn:active {
    transform: scale(0.98);
}

.crm-nav-btn:disabled,
.crm-nav-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.crm-nav-btn i {
    font-size: 12px;
}

/* Variantes de botones */
.crm-nav-btn.btn-back {
    padding-left: 10px;
}

.crm-nav-btn.btn-back i {
    margin-right: 2px;
}

.crm-nav-btn.btn-forward {
    padding-right: 10px;
}

.crm-nav-btn.btn-forward i {
    margin-left: 2px;
}

.crm-nav-btn.btn-primary {
    background: var(--crm-primary);
    border-color: var(--crm-primary);
    color: var(--crm-text-inverse);
}

.crm-nav-btn.btn-primary:hover {
    background: var(--crm-primary-dark);
    border-color: var(--crm-primary-dark);
    color: var(--crm-text-inverse);
}

.crm-nav-btn.btn-success {
    background: var(--crm-success);
    border-color: var(--crm-success);
    color: var(--crm-text-inverse);
}

.crm-nav-btn.btn-success:hover {
    background: var(--crm-success-dark);
    border-color: var(--crm-success-dark);
    color: var(--crm-text-inverse);
}

/* History Navigation Buttons */
/* App Logo */
.crm-app-logo {
    display: flex;
    align-items: center;
    margin-right: var(--crm-spacing-md);
    padding-right: var(--crm-spacing-md);
    border-right: 1px solid var(--crm-border-color);
}

.crm-logo-img {
    height: 28px;
    width: auto;
    object-fit: contain;
}

.crm-history-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: var(--crm-spacing-sm);
    padding-right: var(--crm-spacing-sm);
    border-right: 1px solid var(--crm-border-color);
}

.crm-history-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--crm-radius-md);
    background: transparent;
    border: 1px solid transparent;
    color: var(--crm-text-muted);
    cursor: pointer;
    transition: var(--crm-transition-fast);
}

.crm-history-btn:hover:not(:disabled) {
    color: var(--crm-primary);
    background: var(--crm-primary-bg);
    border-color: var(--crm-primary-light);
}

.crm-history-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.crm-history-btn i {
    font-size: 14px;
}

/* Quick Navigation Links */
.crm-quick-nav {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-md);
    padding: var(--crm-spacing-sm) 0;
    margin-top: var(--crm-spacing-sm);
    border-top: 1px solid var(--crm-border-light);
}

.crm-quick-nav-label {
    font-size: var(--crm-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--crm-text-muted);
}

.crm-quick-nav-links {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-xs);
    flex-wrap: wrap;
}

.crm-quick-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: var(--crm-font-size-xs);
    color: var(--crm-text-secondary);
    background: var(--crm-bg-light);
    border-radius: var(--crm-radius-full);
    text-decoration: none;
    transition: var(--crm-transition-fast);
}

.crm-quick-nav-link:hover {
    background: var(--crm-primary-bg);
    color: var(--crm-primary);
    text-decoration: none;
}

.crm-quick-nav-link i {
    font-size: 10px;
}

/* Page Header with Navigation Context */
.crm-page-header-nav {
    background: var(--crm-bg-card);
    border-radius: var(--crm-radius-lg);
    padding: var(--crm-spacing-lg);
    margin-bottom: var(--crm-spacing-lg);
    box-shadow: var(--crm-shadow-md);
    border: 1px solid var(--crm-border-color);
}

.crm-page-header-nav .header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--crm-spacing-md);
    margin-bottom: var(--crm-spacing-md);
}

.crm-page-header-nav .header-title {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-md);
}

.crm-page-header-nav .header-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--crm-radius-lg);
    background: var(--crm-bg-gradient);
    color: var(--crm-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.crm-page-header-nav .header-text h1 {
    font-size: var(--crm-font-size-xl);
    font-weight: 600;
    color: var(--crm-text-primary);
    margin: 0;
    line-height: 1.3;
}

.crm-page-header-nav .header-text .subtitle {
    font-size: var(--crm-font-size-sm);
    color: var(--crm-text-muted);
    margin-top: 2px;
}

.crm-page-header-nav .header-actions {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-sm);
}

/* Context Navigation Card */
.crm-context-nav {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-lg);
    padding-top: var(--crm-spacing-md);
    border-top: 1px solid var(--crm-border-light);
    flex-wrap: wrap;
}

.crm-context-nav-section {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-sm);
}

.crm-context-nav-section .section-label {
    font-size: var(--crm-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--crm-text-muted);
    white-space: nowrap;
}

.crm-context-nav-section .section-links {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-xs);
}

.crm-context-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: var(--crm-font-size-sm);
    font-weight: 500;
    color: var(--crm-text-secondary);
    background: var(--crm-bg-light);
    border: 1px solid var(--crm-border-color);
    border-radius: var(--crm-radius-md);
    text-decoration: none;
    transition: var(--crm-transition-fast);
}

.crm-context-link:hover {
    border-color: var(--crm-primary);
    color: var(--crm-primary);
    background: var(--crm-primary-bg);
    text-decoration: none;
}

.crm-context-link i {
    font-size: 12px;
    color: var(--crm-primary);
}

.crm-context-link.active {
    background: var(--crm-primary);
    border-color: var(--crm-primary);
    color: var(--crm-text-inverse);
}

.crm-context-link.active i {
    color: var(--crm-text-inverse);
}

/* Dark Theme Support */
[data-theme="dark"] .crm-breadcrumbs-bar {
    background: #1f2227;
    border-color: #2d3238;
}

[data-theme="dark"] .crm-nav-btn {
    border-color: #3d4248;
    color: #adb5bd;
}

[data-theme="dark"] .crm-nav-btn:hover {
    background: rgba(94, 114, 228, 0.15);
}

[data-theme="dark"] .crm-history-nav {
    border-color: #3d4248;
}

[data-theme="dark"] .crm-page-header-nav {
    background: #1f2227;
    border-color: #2d3238;
}

[data-theme="dark"] .crm-quick-nav,
[data-theme="dark"] .crm-context-nav {
    border-color: #2d3238;
}

[data-theme="dark"] .crm-quick-nav-link,
[data-theme="dark"] .crm-context-link {
    background: #2d3238;
    border-color: #3d4248;
    color: #adb5bd;
}

/* ================================================
   TOOLBAR ICONS (Notificaciones y Usuario)
   ================================================ */
.crm-toolbar-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: var(--crm-spacing-md);
    padding-left: var(--crm-spacing-md);
    border-left: 1px solid var(--crm-border-color);
}

.crm-toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--crm-radius-md);
    background: transparent;
    border: none;
    color: var(--crm-text-secondary);
    cursor: pointer;
    transition: var(--crm-transition-fast);
    position: relative;
}

.crm-toolbar-btn:hover {
    background: var(--crm-bg-hover);
    color: var(--crm-primary);
}

.crm-toolbar-btn i {
    font-size: 16px;
}

/* Notification Badge */
.crm-notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--crm-danger);
    color: var(--crm-text-inverse);
    border-radius: var(--crm-radius-full);
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* User Avatar */
.crm-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--crm-radius-full);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--crm-bg-gradient);
    color: var(--crm-text-inverse);
    font-size: 12px;
    font-weight: 600;
}

.crm-user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crm-user-avatar-initials {
    font-size: 12px;
    font-weight: 600;
}

.crm-user-avatar-large {
    width: 48px;
    height: 48px;
    border-radius: var(--crm-radius-full);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--crm-bg-gradient);
    color: var(--crm-text-inverse);
    font-size: 16px;
    font-weight: 600;
    flex-shrink: 0;
}

.crm-user-avatar-large .crm-user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dropdown Containers */
.crm-notification-dropdown,
.crm-user-dropdown {
    position: relative;
}

/* Notification Panel */
.crm-notifications-panel,
.crm-user-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 320px;
    background: var(--crm-bg-card);
    border: 1px solid var(--crm-border-color);
    border-radius: var(--crm-radius-lg);
    box-shadow: var(--crm-shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 9999;
}

.crm-notifications-panel.active,
.crm-user-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Notifications Header */
.crm-notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--crm-spacing-md);
    border-bottom: 1px solid var(--crm-border-color);
}

.crm-notifications-title {
    font-size: var(--crm-font-size-sm);
    font-weight: 600;
    color: var(--crm-text-primary);
}

.crm-notifications-link {
    font-size: var(--crm-font-size-xs);
    color: var(--crm-primary);
    text-decoration: none;
}

.crm-notifications-link:hover {
    text-decoration: underline;
}

/* Notifications Body */
.crm-notifications-body {
    max-height: 320px;
    overflow-y: auto;
}

.crm-notifications-loading {
    padding: var(--crm-spacing-xl);
    text-align: center;
    color: var(--crm-text-muted);
}

.crm-notifications-empty {
    padding: var(--crm-spacing-xl);
    text-align: center;
    color: var(--crm-text-muted);
}

.crm-notifications-empty i {
    font-size: 32px;
    margin-bottom: var(--crm-spacing-sm);
    opacity: 0.5;
}

.crm-notifications-empty p {
    margin: 0;
    font-size: var(--crm-font-size-sm);
}

/* Notification Item */
.crm-notification-item {
    display: flex;
    gap: var(--crm-spacing-sm);
    padding: var(--crm-spacing-sm) var(--crm-spacing-md);
    border-bottom: 1px solid var(--crm-border-light);
    cursor: pointer;
    transition: var(--crm-transition-fast);
}

.crm-notification-item:hover {
    background: var(--crm-bg-hover);
}

.crm-notification-item.unread {
    background: rgba(94, 114, 228, 0.04);
}

.crm-notification-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--crm-radius-full);
    background: var(--crm-primary-bg);
    color: var(--crm-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.crm-notification-content {
    flex: 1;
    min-width: 0;
}

.crm-notification-text {
    font-size: var(--crm-font-size-sm);
    color: var(--crm-text-primary);
    margin: 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-notification-time {
    font-size: var(--crm-font-size-xs);
    color: var(--crm-text-muted);
}

/* User Panel */
.crm-user-panel {
    min-width: 240px;
}

.crm-user-header {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-md);
    padding: var(--crm-spacing-md);
    border-bottom: 1px solid var(--crm-border-color);
}

.crm-user-info {
    flex: 1;
    min-width: 0;
}

.crm-user-name {
    display: block;
    font-size: var(--crm-font-size-sm);
    font-weight: 600;
    color: var(--crm-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-user-email {
    display: block;
    font-size: var(--crm-font-size-xs);
    color: var(--crm-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* User Menu */
.crm-user-menu {
    padding: var(--crm-spacing-sm) 0;
}

.crm-user-menu-item {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-sm);
    padding: var(--crm-spacing-sm) var(--crm-spacing-md);
    font-size: var(--crm-font-size-sm);
    color: var(--crm-text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: var(--crm-transition-fast);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}

.crm-user-menu-item:hover {
    background: var(--crm-bg-hover);
    color: var(--crm-primary);
    text-decoration: none;
}

.crm-user-menu-item i {
    width: 16px;
    text-align: center;
    color: var(--crm-text-muted);
}

.crm-user-menu-item:hover i {
    color: var(--crm-primary);
}

.crm-user-menu-divider {
    height: 1px;
    background: var(--crm-border-color);
    margin: var(--crm-spacing-xs) 0;
}

.crm-logout-btn {
    color: var(--crm-danger) !important;
}

.crm-logout-btn i {
    color: var(--crm-danger) !important;
}

.crm-logout-btn:hover {
    background: var(--crm-danger-bg) !important;
}

/* Dark Theme for Toolbar */
[data-theme="dark"] .crm-toolbar-icons {
    border-color: #3d4248;
}

[data-theme="dark"] .crm-notifications-panel,
[data-theme="dark"] .crm-user-panel {
    background: #1f2227;
    border-color: #3d4248;
}

[data-theme="dark"] .crm-notifications-header,
[data-theme="dark"] .crm-user-header {
    border-color: #3d4248;
}

[data-theme="dark"] .crm-notification-item {
    border-color: #2d3238;
}

[data-theme="dark"] .crm-user-menu-divider {
    background: #3d4248;
}

[data-theme="dark"] .crm-app-logo {
    border-color: #3d4248;
}

[data-theme="dark"] .crm-logo-img {
    filter: brightness(1.2);
}

/* ================================================
   VISTA DE LISTA - CRM WHATSAPP AUDIENCE
   Ocultar sidebar de filtros y limpiar UI
   ================================================ */

/* Ocultar el sidebar de filtros completo cuando estamos en la lista de audiencias */
body[data-route="List/CRM WhatsApp Audience"] .layout-side-section,
body[data-route*="crm-whatsapp-audience"] .layout-side-section,
.page-container[data-page-container*="CRM WhatsApp Audience"] .layout-side-section,
.frappe-list[data-doctype="CRM WhatsApp Audience"] ~ .layout-side-section,
[data-page-container="List/CRM WhatsApp Audience/List"] .layout-side-section {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Expandir el área principal al 100% cuando el sidebar está oculto */
body[data-route="List/CRM WhatsApp Audience"] .layout-main-section-wrapper,
body[data-route*="crm-whatsapp-audience"] .layout-main-section-wrapper,
[data-page-container="List/CRM WhatsApp Audience/List"] .layout-main-section-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: var(--crm-spacing-lg) !important;
}

/* Ocultar el campo de búsqueda por ID y reemplazarlo visualmente */
body[data-route*="crm-whatsapp-audience"] .list-row-head .frappe-control[data-fieldname="name"] input::placeholder,
[data-page-container*="CRM WhatsApp Audience"] .list-row-head input[data-fieldname="name"]::placeholder {
    content: "Nombre de la Audiencia";
    color: var(--crm-text-muted);
}

/* Ocultar "ID" en el menú de ordenamiento */
body[data-route*="crm-whatsapp-audience"] .sort-selector .dropdown-menu [data-sort-by="name"],
body[data-route*="crm-whatsapp-audience"] .list-header-subject .dropdown-menu li:has(a[data-fieldname="name"]) {
    display: none !important;
}

/* ================================================
   CAMPAIGN METRICS DASHBOARD
   Dashboard visual para ver métricas de campañas
   ================================================ */

.campaign-metrics-dashboard {
    background: var(--crm-bg-card);
    border-radius: var(--crm-radius-lg);
    padding: var(--crm-spacing-xl);
    margin-bottom: var(--crm-spacing-xl);
    box-shadow: var(--crm-shadow-lg);
    border: 1px solid var(--crm-border-color);
}

/* Campaign Header */
.campaign-metrics-dashboard .campaign-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--crm-spacing-xl);
    flex-wrap: wrap;
    gap: var(--crm-spacing-md);
}

.campaign-metrics-dashboard .campaign-title-section {
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-md);
    flex-wrap: wrap;
}

.campaign-metrics-dashboard .campaign-title {
    font-size: var(--crm-font-size-2xl);
    font-weight: 700;
    color: var(--crm-text-primary);
    margin: 0;
    line-height: 1.2;
}

.campaign-metrics-dashboard .campaign-status {
    padding: 6px 16px;
    font-size: var(--crm-font-size-sm);
    font-weight: 600;
    border-radius: var(--crm-radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.campaign-metrics-dashboard .campaign-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--crm-spacing-md);
}

.campaign-metrics-dashboard .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--crm-font-size-sm);
    color: var(--crm-text-muted);
}

.campaign-metrics-dashboard .meta-item i {
    color: var(--crm-primary);
}

/* KPIs Grid */
.campaign-metrics-dashboard .campaign-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--crm-spacing-md);
    margin-bottom: var(--crm-spacing-xl);
}

.campaign-metrics-dashboard .kpi-card {
    display: flex;
    align-items: flex-start;
    gap: var(--crm-spacing-md);
    padding: var(--crm-spacing-md);
    background: var(--crm-bg-light);
    border-radius: var(--crm-radius-lg);
    border: 1px solid var(--crm-border-light);
    transition: var(--crm-transition-fast);
}

.campaign-metrics-dashboard .kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--crm-shadow-md);
}

.campaign-metrics-dashboard .kpi-card.has-errors {
    background: var(--crm-danger-bg);
    border-color: rgba(245, 54, 92, 0.3);
}

.campaign-metrics-dashboard .kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--crm-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--crm-primary-bg);
    color: var(--crm-primary);
    flex-shrink: 0;
}

.campaign-metrics-dashboard .kpi-icon.delivered {
    background: var(--crm-success-bg);
    color: var(--crm-success);
}

.campaign-metrics-dashboard .kpi-icon.read {
    background: var(--crm-info-bg);
    color: var(--crm-info);
}

.campaign-metrics-dashboard .kpi-icon.responses {
    background: rgba(118, 75, 162, 0.12);
    color: var(--crm-accent);
}

.campaign-metrics-dashboard .kpi-icon.clicks {
    background: rgba(251, 191, 36, 0.15);
    color: #d97706;
}

.campaign-metrics-dashboard .kpi-icon.failed {
    background: var(--crm-danger-bg);
    color: var(--crm-danger);
}

.campaign-metrics-dashboard .kpi-content {
    flex: 1;
    min-width: 0;
}

.campaign-metrics-dashboard .kpi-value {
    font-size: var(--crm-font-size-2xl);
    font-weight: 700;
    color: var(--crm-text-primary);
    line-height: 1;
    margin-bottom: 4px;
}

.campaign-metrics-dashboard .kpi-label {
    font-size: var(--crm-font-size-sm);
    font-weight: 500;
    color: var(--crm-text-secondary);
    margin-bottom: 2px;
}

.campaign-metrics-dashboard .kpi-sublabel {
    font-size: var(--crm-font-size-xs);
    color: var(--crm-text-muted);
}

/* Progress Section */
.campaign-metrics-dashboard .campaign-progress-section {
    margin-bottom: var(--crm-spacing-xl);
    padding: var(--crm-spacing-md);
    background: var(--crm-bg-light);
    border-radius: var(--crm-radius-lg);
}

.campaign-metrics-dashboard .progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--crm-spacing-sm);
    font-size: var(--crm-font-size-sm);
    font-weight: 500;
    color: var(--crm-text-secondary);
}

.campaign-metrics-dashboard .progress-percent {
    font-weight: 700;
    color: var(--crm-primary);
}

.campaign-metrics-dashboard .progress-bar-container {
    height: 12px;
    background: var(--crm-border-color);
    border-radius: var(--crm-radius-full);
    overflow: hidden;
    position: relative;
}

.campaign-metrics-dashboard .progress-bar-container .progress-bar {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: var(--crm-radius-full);
    transition: width 0.5s ease;
}

.campaign-metrics-dashboard .progress-bar.sent {
    background: var(--crm-primary);
    z-index: 1;
}

.campaign-metrics-dashboard .progress-bar.delivered {
    background: var(--crm-success);
    z-index: 2;
}

.campaign-metrics-dashboard .progress-bar.read {
    background: var(--crm-info);
    z-index: 3;
}

.campaign-metrics-dashboard .progress-legend {
    display: flex;
    gap: var(--crm-spacing-lg);
    margin-top: var(--crm-spacing-sm);
    flex-wrap: wrap;
}

.campaign-metrics-dashboard .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--crm-font-size-xs);
    color: var(--crm-text-muted);
}

.campaign-metrics-dashboard .legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.campaign-metrics-dashboard .legend-color.sent {
    background: var(--crm-primary);
}

.campaign-metrics-dashboard .legend-color.delivered {
    background: var(--crm-success);
}

.campaign-metrics-dashboard .legend-color.read {
    background: var(--crm-info);
}

/* Panels (Click Tracking, Errors, A/B Test) */
.campaign-metrics-dashboard .click-tracking-panel,
.campaign-metrics-dashboard .errors-panel,
.campaign-metrics-dashboard .ab-test-panel {
    margin-bottom: var(--crm-spacing-lg);
    border: 1px solid var(--crm-border-color);
    border-radius: var(--crm-radius-lg);
    overflow: hidden;
}

.campaign-metrics-dashboard .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--crm-spacing-md);
    background: var(--crm-bg-light);
    border-bottom: 1px solid var(--crm-border-color);
}

.campaign-metrics-dashboard .panel-header h4 {
    margin: 0;
    font-size: var(--crm-font-size-base);
    font-weight: 600;
    color: var(--crm-text-primary);
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-sm);
}

.campaign-metrics-dashboard .panel-header h4 i {
    color: var(--crm-primary);
}

.campaign-metrics-dashboard .tracking-url {
    font-size: var(--crm-font-size-xs);
    color: var(--crm-text-muted);
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-metrics-dashboard .winner-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(251, 191, 36, 0.15);
    color: #d97706;
    border-radius: var(--crm-radius-full);
    font-size: var(--crm-font-size-xs);
    font-weight: 600;
}

.campaign-metrics-dashboard .click-logs-container,
.campaign-metrics-dashboard .errors-container,
.campaign-metrics-dashboard .ab-variants-container {
    padding: var(--crm-spacing-md);
}

.campaign-metrics-dashboard .loading-placeholder {
    text-align: center;
    padding: var(--crm-spacing-lg);
    color: var(--crm-text-muted);
}

.campaign-metrics-dashboard .loading-placeholder i {
    margin-right: var(--crm-spacing-sm);
}

/* Tables inside panels */
.campaign-metrics-dashboard .clicks-table,
.campaign-metrics-dashboard .errors-table {
    width: 100%;
    margin: 0;
}

.campaign-metrics-dashboard .clicks-table th,
.campaign-metrics-dashboard .errors-table th {
    font-size: var(--crm-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--crm-text-muted);
    padding: var(--crm-spacing-sm);
    border-bottom: 1px solid var(--crm-border-color);
}

.campaign-metrics-dashboard .clicks-table td,
.campaign-metrics-dashboard .errors-table td {
    padding: var(--crm-spacing-sm);
    font-size: var(--crm-font-size-sm);
    border-bottom: 1px solid var(--crm-border-light);
}

.campaign-metrics-dashboard .clicks-table tr:last-child td,
.campaign-metrics-dashboard .errors-table tr:last-child td {
    border-bottom: none;
}

.campaign-metrics-dashboard .badge-danger {
    background: var(--crm-danger-bg);
    color: var(--crm-danger);
    padding: 2px 8px;
    border-radius: var(--crm-radius-full);
    font-size: var(--crm-font-size-xs);
    font-weight: 600;
}

/* A/B Test Variants Grid */
.campaign-metrics-dashboard .ab-variants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--crm-spacing-md);
}

.campaign-metrics-dashboard .variant-card {
    background: var(--crm-bg-light);
    border: 2px solid var(--crm-border-color);
    border-radius: var(--crm-radius-lg);
    padding: var(--crm-spacing-md);
    transition: var(--crm-transition-fast);
}

.campaign-metrics-dashboard .variant-card.winner {
    border-color: var(--crm-success);
    background: var(--crm-success-bg);
}

.campaign-metrics-dashboard .variant-card.winner .variant-header {
    color: var(--crm-success);
}

.campaign-metrics-dashboard .variant-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--crm-spacing-md);
}

.campaign-metrics-dashboard .variant-label {
    font-size: var(--crm-font-size-sm);
    font-weight: 600;
    color: var(--crm-text-primary);
}

.campaign-metrics-dashboard .variant-header i {
    color: #d97706;
}

.campaign-metrics-dashboard .variant-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--crm-spacing-sm);
}

.campaign-metrics-dashboard .variant-stats .stat {
    text-align: center;
    padding: var(--crm-spacing-xs);
}

.campaign-metrics-dashboard .variant-stats .stat-value {
    display: block;
    font-size: var(--crm-font-size-lg);
    font-weight: 700;
    color: var(--crm-text-primary);
}

.campaign-metrics-dashboard .variant-stats .stat-label {
    display: block;
    font-size: var(--crm-font-size-xs);
    color: var(--crm-text-muted);
    text-transform: uppercase;
}

/* Quick Actions */
.campaign-metrics-dashboard .campaign-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--crm-spacing-sm);
    padding-top: var(--crm-spacing-lg);
    border-top: 1px solid var(--crm-border-color);
}

.campaign-metrics-dashboard .campaign-quick-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.campaign-metrics-dashboard .toggle-form-btn {
    margin-left: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .campaign-metrics-dashboard {
        padding: var(--crm-spacing-md);
    }
    
    .campaign-metrics-dashboard .campaign-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .campaign-metrics-dashboard .campaign-title {
        font-size: var(--crm-font-size-xl);
    }
    
    .campaign-metrics-dashboard .kpi-value {
        font-size: var(--crm-font-size-xl);
    }
    
    .campaign-metrics-dashboard .campaign-quick-actions {
        flex-direction: column;
    }
    
    .campaign-metrics-dashboard .toggle-form-btn {
        margin-left: 0;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .campaign-metrics-dashboard {
    background: #1f2227;
    border-color: #2d3238;
}

[data-theme="dark"] .campaign-metrics-dashboard .kpi-card {
    background: #2d3238;
    border-color: #3d4248;
}

[data-theme="dark"] .campaign-metrics-dashboard .campaign-progress-section {
    background: #2d3238;
}

[data-theme="dark"] .campaign-metrics-dashboard .progress-bar-container {
    background: #3d4248;
}

[data-theme="dark"] .campaign-metrics-dashboard .panel-header {
    background: #2d3238;
    border-color: #3d4248;
}

[data-theme="dark"] .campaign-metrics-dashboard .click-tracking-panel,
[data-theme="dark"] .campaign-metrics-dashboard .errors-panel,
[data-theme="dark"] .campaign-metrics-dashboard .ab-test-panel {
    border-color: #3d4248;
}

[data-theme="dark"] .campaign-metrics-dashboard .variant-card {
    background: #2d3238;
    border-color: #3d4248;
}

/* ================================================
   CAMPAIGN DASHBOARD - Vista simplificada
   ================================================ */

.campaign-dashboard {
    background: var(--crm-bg-card);
    border-radius: var(--crm-radius-lg);
    padding: var(--crm-spacing-xl);
    margin-bottom: var(--crm-spacing-xl);
    box-shadow: var(--crm-shadow-md);
    border: 1px solid var(--crm-border-color);
}

/* Header */
.campaign-dashboard .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--crm-spacing-xl);
    padding-bottom: var(--crm-spacing-lg);
    border-bottom: 1px solid var(--crm-border-color);
}

.campaign-dashboard .header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.campaign-dashboard .campaign-name {
    font-size: var(--crm-font-size-2xl);
    font-weight: 700;
    color: var(--crm-text-primary);
    margin: 0;
}

.campaign-dashboard .campaign-id {
    font-size: var(--crm-font-size-sm);
}

.campaign-dashboard .status-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: var(--crm-radius-full);
    font-size: var(--crm-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.campaign-dashboard .status-gray { background: var(--crm-neutral-bg); color: var(--crm-text-secondary); }
.campaign-dashboard .status-blue { background: rgba(17, 205, 239, 0.15); color: #0987a0; }
.campaign-dashboard .status-green { background: var(--crm-success-bg); color: var(--crm-success-dark); }
.campaign-dashboard .status-yellow { background: rgba(251, 191, 36, 0.15); color: #b45309; }
.campaign-dashboard .status-orange { background: var(--crm-warning-bg); color: #c53030; }
.campaign-dashboard .status-red { background: var(--crm-danger-bg); color: var(--crm-danger); }

/* Section Title */
.campaign-dashboard .section-title {
    font-size: var(--crm-font-size-md);
    font-weight: 600;
    color: var(--crm-text-primary);
    margin: 0 0 var(--crm-spacing-md) 0;
    display: flex;
    align-items: center;
    gap: var(--crm-spacing-sm);
}

.campaign-dashboard .section-title i {
    color: var(--crm-primary);
}

/* Metrics Section */
.campaign-dashboard .metrics-section {
    margin-bottom: var(--crm-spacing-xl);
}

.campaign-dashboard .metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--crm-spacing-md);
    margin-bottom: var(--crm-spacing-lg);
}

.campaign-dashboard .metric-card {
    background: var(--crm-bg-light);
    border-radius: var(--crm-radius-lg);
    padding: var(--crm-spacing-md);
    text-align: center;
    border: 1px solid var(--crm-border-light);
    transition: var(--crm-transition-fast);
}

.campaign-dashboard .metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--crm-shadow-sm);
}

.campaign-dashboard .metric-card.has-errors {
    background: var(--crm-danger-bg);
    border-color: rgba(245, 54, 92, 0.2);
}

.campaign-dashboard .metric-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--crm-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--crm-spacing-sm);
    font-size: 16px;
}

.campaign-dashboard .metric-icon.sent { background: var(--crm-primary-bg); color: var(--crm-primary); }
.campaign-dashboard .metric-icon.delivered { background: var(--crm-success-bg); color: var(--crm-success); }
.campaign-dashboard .metric-icon.read { background: var(--crm-info-bg); color: var(--crm-info); }
.campaign-dashboard .metric-icon.responses { background: rgba(118, 75, 162, 0.12); color: var(--crm-accent); }
.campaign-dashboard .metric-icon.clicks { background: rgba(251, 191, 36, 0.15); color: #d97706; }
.campaign-dashboard .metric-icon.failed { background: var(--crm-danger-bg); color: var(--crm-danger); }

.campaign-dashboard .metric-value {
    font-size: var(--crm-font-size-2xl);
    font-weight: 700;
    color: var(--crm-text-primary);
    line-height: 1.2;
}

.campaign-dashboard .metric-label {
    font-size: var(--crm-font-size-sm);
    font-weight: 500;
    color: var(--crm-text-secondary);
    margin-top: 2px;
}

.campaign-dashboard .metric-sub {
    font-size: var(--crm-font-size-xs);
    color: var(--crm-text-muted);
}

/* Progress Section */
.campaign-dashboard .progress-section {
    background: var(--crm-bg-light);
    border-radius: var(--crm-radius-md);
    padding: var(--crm-spacing-md);
}

.campaign-dashboard .progress-info {
    display: flex;
    justify-content: space-between;
    font-size: var(--crm-font-size-sm);
    color: var(--crm-text-secondary);
    margin-bottom: var(--crm-spacing-sm);
}

.campaign-dashboard .progress-value {
    font-weight: 700;
    color: var(--crm-primary);
}

.campaign-dashboard .progress-bar-bg {
    height: 10px;
    background: var(--crm-border-color);
    border-radius: var(--crm-radius-full);
    overflow: hidden;
}

.campaign-dashboard .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--crm-primary), var(--crm-secondary));
    border-radius: var(--crm-radius-full);
    transition: width 0.5s ease;
}

/* Recipients Section */
.campaign-dashboard .recipients-section {
    margin-bottom: var(--crm-spacing-lg);
}

.campaign-dashboard .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--crm-spacing-md);
    flex-wrap: wrap;
    gap: var(--crm-spacing-sm);
}

.campaign-dashboard .section-actions {
    display: flex;
    gap: var(--crm-spacing-sm);
}

.campaign-dashboard .recipient-search {
    width: 200px;
    padding: 6px 12px;
    font-size: var(--crm-font-size-sm);
    border: 1px solid var(--crm-border-color);
    border-radius: var(--crm-radius-md);
}

.campaign-dashboard .recipient-search:focus {
    outline: none;
    border-color: var(--crm-primary);
    box-shadow: 0 0 0 3px var(--crm-primary-bg);
}

/* Recipients Table */
.campaign-dashboard .recipients-table-container {
    overflow-x: auto;
    border: 1px solid var(--crm-border-color);
    border-radius: var(--crm-radius-md);
}

.campaign-dashboard .recipients-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--crm-font-size-sm);
}

.campaign-dashboard .recipients-table th {
    background: var(--crm-bg-light);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: var(--crm-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--crm-text-muted);
    border-bottom: 1px solid var(--crm-border-color);
}

.campaign-dashboard .recipients-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--crm-border-light);
    color: var(--crm-text-primary);
}

.campaign-dashboard .recipients-table tr:last-child td {
    border-bottom: none;
}

.campaign-dashboard .recipients-table tr:hover td {
    background: var(--crm-bg-hover);
}

.campaign-dashboard .recipients-table .text-center {
    text-align: center;
}

.campaign-dashboard .recipients-table .phone-link {
    color: var(--crm-primary);
    text-decoration: none;
    font-weight: 500;
}

.campaign-dashboard .recipients-table .phone-link:hover {
    text-decoration: underline;
}

.campaign-dashboard .recipients-table .text-success {
    color: var(--crm-success);
}

.campaign-dashboard .recipients-table .text-muted {
    color: var(--crm-text-muted);
}

/* Indicator Pills in Table */
.campaign-dashboard .indicator-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--crm-radius-full);
    font-size: var(--crm-font-size-xs);
    font-weight: 500;
}

.campaign-dashboard .indicator-pill.gray { background: var(--crm-neutral-bg); color: var(--crm-text-secondary); }
.campaign-dashboard .indicator-pill.blue { background: rgba(17, 205, 239, 0.15); color: #0987a0; }
.campaign-dashboard .indicator-pill.cyan { background: rgba(17, 205, 239, 0.15); color: #0987a0; }
.campaign-dashboard .indicator-pill.green { background: var(--crm-success-bg); color: var(--crm-success-dark); }
.campaign-dashboard .indicator-pill.red { background: var(--crm-danger-bg); color: var(--crm-danger); }

/* Table Footer */
.campaign-dashboard .table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--crm-spacing-md);
    flex-wrap: wrap;
    gap: var(--crm-spacing-sm);
}

.campaign-dashboard .pagination-info {
    font-size: var(--crm-font-size-sm);
    color: var(--crm-text-muted);
}

.campaign-dashboard .pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.campaign-dashboard .pagination-btn {
    min-width: 32px;
}

.campaign-dashboard .pagination-ellipsis {
    padding: 0 8px;
    color: var(--crm-text-muted);
}

/* Dashboard Actions */
.campaign-dashboard .dashboard-actions {
    display: flex;
    gap: var(--crm-spacing-sm);
    padding-top: var(--crm-spacing-lg);
    border-top: 1px solid var(--crm-border-color);
}

/* Responsive */
@media (max-width: 768px) {
    .campaign-dashboard {
        padding: var(--crm-spacing-md);
    }
    
    .campaign-dashboard .dashboard-header {
        flex-direction: column;
        gap: var(--crm-spacing-md);
    }
    
    .campaign-dashboard .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .campaign-dashboard .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .campaign-dashboard .recipient-search {
        width: 100%;
    }
}

/* Dark Theme */
[data-theme="dark"] .campaign-dashboard {
    background: #1f2227;
    border-color: #2d3238;
}

[data-theme="dark"] .campaign-dashboard .metric-card {
    background: #2d3238;
    border-color: #3d4248;
}

[data-theme="dark"] .campaign-dashboard .progress-section {
    background: #2d3238;
}

[data-theme="dark"] .campaign-dashboard .progress-bar-bg {
    background: #3d4248;
}

[data-theme="dark"] .campaign-dashboard .recipients-table-container {
    border-color: #3d4248;
}

[data-theme="dark"] .campaign-dashboard .recipients-table th {
    background: #2d3238;
    border-color: #3d4248;
}

[data-theme="dark"] .campaign-dashboard .recipients-table td {
    border-color: #2d3238;
}

/* ================================================
 * HIDE FRAPPE BRANDING
 * Ocultar todas las menciones de Frappe para white-label
 * ================================================ */

/* Ocultar footer "Built on Frappe" en templates web */
.footer-powered,
.footer-powered-by,
.frappe-powered,
a[href*="frappeframework.com"],
a[href*="frappe.io"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Ocultar botón "Login with Frappe Cloud" */
.btn-login-with-frappe-cloud,
.login-button-wrapper:has(.btn-login-with-frappe-cloud) {
    display: none !important;
}

/* Ocultar cualquier elemento que contenga "Frappe" en el texto */
.frappe-brand,
.frappe-footer,
.frappe-credit {
    display: none !important;
}

/* Asegurar que el footer del website esté limpio */
footer .powered-by,
.web-footer .powered-by,
.frappe-powered-by {
    display: none !important;
}

/* ================================================
 * CRM LEAD - LAYOUT SIMPLIFICADO
 * Vista enfocada para agentes de ventas
 * ================================================ */

/* Ocultar sidebar de Frappe en el formulario del Lead */
.crm-lead-simplified .form-sidebar,
.crm-lead-page [data-doctype="CRM Lead"] .form-sidebar {
    display: none !important;
}

/* Expandir contenido principal cuando la sidebar está oculta */
.crm-lead-simplified .form-column.col-sm-10,
.crm-lead-simplified .form-column.col-md-10,
.crm-lead-page [data-doctype="CRM Lead"] .form-column.col-sm-10,
.crm-lead-page [data-doctype="CRM Lead"] .form-column.col-md-10 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

.crm-lead-simplified .form-layout,
.crm-lead-page [data-doctype="CRM Lead"] .form-layout {
    max-width: 100% !important;
}

/* === Panel de Acciones Rápidas === */
.crm-quick-actions-panel {
    padding: 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.crm-quick-actions-panel .quick-actions-title {
    font-weight: 600;
    font-size: 13px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.crm-quick-actions-panel .quick-actions-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.crm-quick-actions-panel .btn-action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.crm-quick-actions-panel .btn-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.crm-quick-actions-panel .btn-whatsapp {
    background: #25d366;
    border-color: #25d366;
    color: white;
}

.crm-quick-actions-panel .btn-whatsapp:hover {
    background: #20bd5a;
    border-color: #20bd5a;
    color: white;
}

.crm-quick-actions-panel .btn-call {
    background: #5e72e4;
    border-color: #5e72e4;
    color: white;
}

.crm-quick-actions-panel .btn-call:hover {
    background: #4c5fd7;
    border-color: #4c5fd7;
    color: white;
}

.crm-quick-actions-panel .btn-convert {
    background: #2dce89;
    border-color: #2dce89;
    color: white;
}

.crm-quick-actions-panel .btn-convert:hover {
    background: #26b374;
    border-color: #26b374;
    color: white;
}

/* === Sección de Actividad/Notas === */
.crm-activity-section {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
}

.crm-activity-section .activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.crm-activity-section .activity-title {
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 8px;
}

.crm-activity-section .activity-title i {
    color: #5e72e4;
}

.crm-activity-section .btn-add-note {
    background: #5e72e4;
    border-color: #5e72e4;
    color: white;
    font-weight: 500;
}

.crm-activity-section .btn-add-note:hover {
    background: #4c5fd7;
    border-color: #4c5fd7;
    color: white;
}

.crm-activity-section .activity-list {
    max-height: 400px;
    overflow-y: auto;
}

.crm-activity-section .activity-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
}

.crm-activity-section .activity-item:last-child {
    border-bottom: none;
}

.crm-activity-section .activity-item.system-note {
    opacity: 0.8;
}

.crm-activity-section .activity-avatar {
    flex-shrink: 0;
}

.crm-activity-section .activity-content {
    flex: 1;
    min-width: 0;
}

.crm-activity-section .activity-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.crm-activity-section .activity-author {
    font-weight: 600;
    font-size: 13px;
    color: #2d3748;
}

.crm-activity-section .activity-time {
    font-size: 12px;
    color: #8898aa;
}

.crm-activity-section .activity-text {
    font-size: 14px;
    color: #525f7f;
    line-height: 1.5;
}

.crm-activity-section .activity-empty {
    text-align: center;
    padding: 40px 20px;
    color: #8898aa;
}

.crm-activity-section .activity-empty i {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.crm-activity-section .activity-empty p {
    margin: 0;
    font-size: 14px;
}

/* ================================================
   CLEAN LIST VIEW - Sin sidebar ni menú de filtros
   Para vistas de lista tipo tabla limpias
   ================================================ */

/* === RUTAS APLICABLES === */
/* Vistas de lista: crm-whatsapp-flow, crm-whatsapp-flow-log, crm-whatsapp-account, crm-whatsapp-quick-reply, crm-whatsapp-audience, crm-whatsapp-template, crm-whatsapp-campaign */
/* Vistas de formulario: Se aplican cuando la ruta contiene el nombre del doctype seguido de un ID/nombre */

/* 1. Ocultar sidebar izquierdo de filtros */
body[data-route*="crm-whatsapp-flow"] .layout-side-section,
body[data-route*="crm-whatsapp-account"] .layout-side-section,
body[data-route*="crm-whatsapp-quick-reply"] .layout-side-section,
body[data-route*="crm-whatsapp-audience"] .layout-side-section,
body[data-route*="crm-whatsapp-template"] .layout-side-section,
body[data-route*="crm-whatsapp-campaign"] .layout-side-section {
    display: none !important;
}

/* 2. Ocultar la columna de filtros laterales (.list-sidebar) */
body[data-route*="crm-whatsapp-flow"] .list-sidebar,
body[data-route*="crm-whatsapp-account"] .list-sidebar,
body[data-route*="crm-whatsapp-quick-reply"] .list-sidebar,
body[data-route*="crm-whatsapp-audience"] .list-sidebar,
body[data-route*="crm-whatsapp-template"] .list-sidebar,
body[data-route*="crm-whatsapp-campaign"] .list-sidebar {
    display: none !important;
}

/* 3. Ocultar menú de puntos (...) */
body[data-route*="crm-whatsapp-flow"] .page-actions .menu-btn-group,
body[data-route*="crm-whatsapp-account"] .page-actions .menu-btn-group,
body[data-route*="crm-whatsapp-quick-reply"] .page-actions .menu-btn-group,
body[data-route*="crm-whatsapp-audience"] .page-actions .menu-btn-group,
body[data-route*="crm-whatsapp-template"] .page-actions .menu-btn-group,
body[data-route*="crm-whatsapp-campaign"] .page-actions .menu-btn-group {
    display: none !important;
}

/* 4. Ocultar botón de Filtros (.filter-selector) y botón de refresh (.sort-selector) */
body[data-route*="crm-whatsapp-flow"] .filter-selector,
body[data-route*="crm-whatsapp-account"] .filter-selector,
body[data-route*="crm-whatsapp-quick-reply"] .filter-selector,
body[data-route*="crm-whatsapp-audience"] .filter-selector,
body[data-route*="crm-whatsapp-template"] .filter-selector,
body[data-route*="crm-whatsapp-campaign"] .filter-selector,
body[data-route*="crm-whatsapp-flow"] .sort-selector,
body[data-route*="crm-whatsapp-account"] .sort-selector,
body[data-route*="crm-whatsapp-quick-reply"] .sort-selector,
body[data-route*="crm-whatsapp-audience"] .sort-selector,
body[data-route*="crm-whatsapp-template"] .sort-selector,
body[data-route*="crm-whatsapp-campaign"] .sort-selector {
    display: none !important;
}

/* 5. Ocultar TODO el área de acciones personalizadas (Filtros, Vista de Lista, etc.) */
body[data-route*="crm-whatsapp-flow"] .page-actions .custom-actions,
body[data-route*="crm-whatsapp-account"] .page-actions .custom-actions,
body[data-route*="crm-whatsapp-quick-reply"] .page-actions .custom-actions,
body[data-route*="crm-whatsapp-audience"] .page-actions .custom-actions,
body[data-route*="crm-whatsapp-template"] .page-actions .custom-actions,
body[data-route*="crm-whatsapp-campaign"] .page-actions .custom-actions {
    display: none !important;
}

/* 6. Ocultar selector de Vista de Lista (dropdown en .page-actions .filters) */
body[data-route*="crm-whatsapp-flow"] .page-actions .filters > .btn-group,
body[data-route*="crm-whatsapp-account"] .page-actions .filters > .btn-group,
body[data-route*="crm-whatsapp-quick-reply"] .page-actions .filters > .btn-group,
body[data-route*="crm-whatsapp-audience"] .page-actions .filters > .btn-group,
body[data-route*="crm-whatsapp-template"] .page-actions .filters > .btn-group,
body[data-route*="crm-whatsapp-campaign"] .page-actions .filters > .btn-group {
    display: none !important;
}

/* 7. Ocultar dropdown "Vista de Lista" en la barra de la página */
body[data-route*="crm-whatsapp-flow"] .page-head .standard-actions > .btn-group:first-child,
body[data-route*="crm-whatsapp-account"] .page-head .standard-actions > .btn-group:first-child,
body[data-route*="crm-whatsapp-quick-reply"] .page-head .standard-actions > .btn-group:first-child,
body[data-route*="crm-whatsapp-audience"] .page-head .standard-actions > .btn-group:first-child,
body[data-route*="crm-whatsapp-template"] .page-head .standard-actions > .btn-group:first-child,
body[data-route*="crm-whatsapp-campaign"] .page-head .standard-actions > .btn-group:first-child {
    display: none !important;
}

/* 8. Ocultar botón de refresh (icono de recargar) */
body[data-route*="crm-whatsapp-flow"] .page-icon-group,
body[data-route*="crm-whatsapp-account"] .page-icon-group,
body[data-route*="crm-whatsapp-quick-reply"] .page-icon-group,
body[data-route*="crm-whatsapp-audience"] .page-icon-group,
body[data-route*="crm-whatsapp-template"] .page-icon-group,
body[data-route*="crm-whatsapp-campaign"] .page-icon-group {
    display: none !important;
}

/* 9. Ocultar los standard filters inline (ID, Nombre, Categoría, etc.) */
body[data-route*="crm-whatsapp-flow"] .standard-filter-section,
body[data-route*="crm-whatsapp-account"] .standard-filter-section,
body[data-route*="crm-whatsapp-quick-reply"] .standard-filter-section,
body[data-route*="crm-whatsapp-audience"] .standard-filter-section,
body[data-route*="crm-whatsapp-template"] .standard-filter-section,
body[data-route*="crm-whatsapp-campaign"] .standard-filter-section {
    display: none !important;
}

/* 10. Ocultar el área de filtros y ordenamiento de la lista (embudo, X, Prioridad) */
body[data-route*="crm-whatsapp-flow"] .frappe-list .filter-section,
body[data-route*="crm-whatsapp-account"] .frappe-list .filter-section,
body[data-route*="crm-whatsapp-quick-reply"] .frappe-list .filter-section,
body[data-route*="crm-whatsapp-audience"] .frappe-list .filter-section,
body[data-route*="crm-whatsapp-template"] .frappe-list .filter-section,
body[data-route*="crm-whatsapp-campaign"] .frappe-list .filter-section {
    display: none !important;
}

/* 11. Ocultar barra de filtros/ordenamiento completa dentro de list-row-container */
body[data-route*="crm-whatsapp-flow"] .result .list-row-container .filter-section,
body[data-route*="crm-whatsapp-account"] .result .list-row-container .filter-section,
body[data-route*="crm-whatsapp-quick-reply"] .result .list-row-container .filter-section,
body[data-route*="crm-whatsapp-flow"] .frappe-list .list-row-head,
body[data-route*="crm-whatsapp-account"] .frappe-list .list-row-head,
body[data-route*="crm-whatsapp-quick-reply"] .frappe-list .list-row-head {
    /* Solo ocultar los controles de filtro/orden, no la cabecera de la lista */
}

/* 12. Ocultar botones de filtrar y ordenar en la barra de la lista */
body[data-route*="crm-whatsapp-flow"] .filter-button,
body[data-route*="crm-whatsapp-account"] .filter-button,
body[data-route*="crm-whatsapp-quick-reply"] .filter-button,
body[data-route*="crm-whatsapp-audience"] .filter-button,
body[data-route*="crm-whatsapp-template"] .filter-button,
body[data-route*="crm-whatsapp-campaign"] .filter-button {
    display: none !important;
}

/* 13. Ocultar todo el área de acciones de filtro/orden encima de la lista */
body[data-route*="crm-whatsapp-flow"] .frappe-list .filter-area,
body[data-route*="crm-whatsapp-account"] .frappe-list .filter-area,
body[data-route*="crm-whatsapp-quick-reply"] .frappe-list .filter-area,
body[data-route*="crm-whatsapp-audience"] .frappe-list .filter-area,
body[data-route*="crm-whatsapp-template"] .frappe-list .filter-area,
body[data-route*="crm-whatsapp-campaign"] .frappe-list .filter-area {
    display: none !important;
}

/* 14. Ocultar el selector de ordenamiento (Prioridad, ascendente, etc.) */
body[data-route*="crm-whatsapp-flow"] .sort-selector,
body[data-route*="crm-whatsapp-account"] .sort-selector,
body[data-route*="crm-whatsapp-quick-reply"] .sort-selector,
body[data-route*="crm-whatsapp-audience"] .sort-selector,
body[data-route*="crm-whatsapp-template"] .sort-selector,
body[data-route*="crm-whatsapp-campaign"] .sort-selector {
    display: none !important;
}

/* 15. Ocultar TODOS los elementos de filtro/ordenamiento de page_form */
body[data-route*="crm-whatsapp-flow"] .page-form,
body[data-route*="crm-whatsapp-account"] .page-form,
body[data-route*="crm-whatsapp-quick-reply"] .page-form,
body[data-route*="crm-whatsapp-audience"] .page-form,
body[data-route*="crm-whatsapp-template"] .page-form,
body[data-route*="crm-whatsapp-campaign"] .page-form {
    display: none !important;
}

/* 16. Ocultar botón X de limpiar filtros */
body[data-route*="crm-whatsapp-flow"] .filter-x-button,
body[data-route*="crm-whatsapp-account"] .filter-x-button,
body[data-route*="crm-whatsapp-quick-reply"] .filter-x-button,
body[data-route*="crm-whatsapp-audience"] .filter-x-button,
body[data-route*="crm-whatsapp-template"] .filter-x-button,
body[data-route*="crm-whatsapp-campaign"] .filter-x-button {
    display: none !important;
}

/* 9. Ocultar área de filtros inline en la lista */
body[data-route*="crm-whatsapp-flow"] .frappe-list .filter-section,
body[data-route*="crm-whatsapp-account"] .frappe-list .filter-section,
body[data-route*="crm-whatsapp-quick-reply"] .frappe-list .filter-section {
    display: none !important;
}

/* 10. Expandir contenido principal cuando sidebar está oculto */
body[data-route*="crm-whatsapp-flow"] .frappe-list .col-lg-10,
body[data-route*="crm-whatsapp-account"] .frappe-list .col-lg-10,
body[data-route*="crm-whatsapp-quick-reply"] .frappe-list .col-lg-10 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

body[data-route*="crm-whatsapp-flow"] .layout-main-section,
body[data-route*="crm-whatsapp-account"] .layout-main-section,
body[data-route*="crm-whatsapp-quick-reply"] .layout-main-section {
    width: 100% !important;
    max-width: 100% !important;
}

/* ================================================
   CLEAN FORM VIEW - Sin menú de puntos (...) en formularios
   Para vistas de formulario de WhatsApp
   ================================================ */

/* 17. Ocultar menú de puntos (...) en vistas de formulario */
/* Frappe v15 usa data-page-container en lugar de data-route para formularios */
/* El body tiene class "frappe-control" y el formulario está en [data-page-container="form"] */
body[data-route*="CRM WhatsApp Campaign"] .page-actions .menu-btn-group,
body[data-route*="CRM WhatsApp Audience"] .page-actions .menu-btn-group,
body[data-route*="CRM WhatsApp Account"] .page-actions .menu-btn-group,
body[data-route*="CRM WhatsApp Template"] .page-actions .menu-btn-group,
body[data-route*="CRM WhatsApp Flow/"] .page-actions .menu-btn-group,
body[data-route*="CRM WhatsApp Quick Reply"] .page-actions .menu-btn-group {
    display: none !important;
}

/* 18. Ocultar sidebar derecho (Assigned, Attachments, etc.) en formularios */
body[data-route*="CRM WhatsApp Campaign"] .form-sidebar,
body[data-route*="CRM WhatsApp Audience"] .form-sidebar,
body[data-route*="CRM WhatsApp Account"] .form-sidebar,
body[data-route*="CRM WhatsApp Template"] .form-sidebar,
body[data-route*="CRM WhatsApp Flow/"] .form-sidebar,
body[data-route*="CRM WhatsApp Quick Reply"] .form-sidebar {
    display: none !important;
}

/* 19. Expandir formulario cuando sidebar está oculto */
body[data-route*="CRM WhatsApp Campaign"] .form-page .col-lg-10,
body[data-route*="CRM WhatsApp Audience"] .form-page .col-lg-10,
body[data-route*="CRM WhatsApp Account"] .form-page .col-lg-10,
body[data-route*="CRM WhatsApp Template"] .form-page .col-lg-10,
body[data-route*="CRM WhatsApp Flow/"] .form-page .col-lg-10,
body[data-route*="CRM WhatsApp Quick Reply"] .form-page .col-lg-10 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* === ESTILOS VISUALES === */

/* Mejorar estilo de las filas de lista */
body[data-route*="crm-whatsapp-flow"] .frappe-list .list-row,
body[data-route*="crm-whatsapp-account"] .frappe-list .list-row,
body[data-route*="crm-whatsapp-quick-reply"] .frappe-list .list-row {
    padding: 12px 16px;
    transition: background-color 0.15s ease;
}

body[data-route*="crm-whatsapp-flow"] .frappe-list .list-row:hover,
body[data-route*="crm-whatsapp-account"] .frappe-list .list-row:hover,
body[data-route*="crm-whatsapp-quick-reply"] .frappe-list .list-row:hover {
    background-color: var(--crm-bg-hover, rgba(94, 114, 228, 0.04));
}

/* Estilo para código inline en listas */
body[data-route*="crm-whatsapp"] .frappe-list code {
    background: var(--crm-primary-bg, rgba(94, 114, 228, 0.08));
    color: var(--crm-primary, #5e72e4);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
}