:root{--brand: #2563eb;--brand-hover: #1d4ed8;--brand-subtle: #eff6ff;--brand-ring: rgba(37, 99, 235, .15);--surface: #ffffff;--surface-secondary: #f8fafc;--surface-sidebar: #0f172a;--surface-sidebar-hover: #1e293b;--text: #0f172a;--text-secondary: #475569;--text-muted: #94a3b8;--text-on-dark: #cbd5e1;--text-on-dark-secondary: #64748b;--border: #e2e8f0;--border-subtle: #f1f5f9;--success: #059669;--success-bg: #ecfdf5;--error: #dc2626;--error-bg: #fef2f2;--font-display: "Outfit", system-ui, sans-serif;--font-body: "Inter", system-ui, sans-serif;--text-xs: .75rem;--text-sm: .8125rem;--text-base: .9375rem;--text-lg: 1.125rem;--text-xl: 1.375rem;--text-2xl: 1.75rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--radius-sm: 6px;--radius: 10px;--radius-lg: 14px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);--shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 12px rgba(0, 0, 0, .06);--shadow-lg: 0 12px 30px rgba(0, 0, 0, .08);--shadow-xl: 0 20px 50px rgba(0, 0, 0, .12)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);font-size:var(--text-base);color:var(--text);background:var(--surface-secondary);line-height:1.6;-webkit-font-smoothing:antialiased;overflow:hidden}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background-color:var(--surface-sidebar);background-image:radial-gradient(circle,rgba(37,99,235,.06) 1px,transparent 1px);background-size:22px 22px;padding:var(--space-4)}.login-card{background:var(--surface);border-radius:var(--radius-lg);padding:2.5rem 2rem;width:100%;max-width:400px;box-shadow:var(--shadow-xl)}.login-card h1{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;color:var(--text);text-align:center;letter-spacing:-.02em}.login-card .brand-accent{display:block;width:36px;height:3px;background:var(--brand);border-radius:2px;margin:var(--space-3) auto 0}.login-subtitle{text-align:center;color:var(--text-secondary);margin:var(--space-5) 0 var(--space-8);font-size:var(--text-sm)}.form-group{margin-bottom:var(--space-4)}.form-group label{display:block;font-size:var(--text-xs);font-weight:500;color:var(--text-secondary);margin-bottom:var(--space-1);font-family:var(--font-body)}.form-group input,.form-group select,.form-group textarea{width:100%;padding:.5rem .625rem;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--text-sm);font-family:var(--font-body);color:var(--text);background:var(--surface);transition:border-color .15s,box-shadow .15s}.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-muted)}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}.form-group input:disabled{background:var(--surface-secondary);cursor:not-allowed}.form-group textarea{resize:vertical;min-height:80px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.625rem 1.25rem;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:600;font-family:var(--font-body);border:none;cursor:pointer;transition:all .15s ease;letter-spacing:.01em}.btn-primary{background:var(--brand);color:#fff;width:100%}.btn-primary:hover:not(:disabled){background:var(--brand-hover)}.btn-primary:disabled{opacity:.55;cursor:not-allowed}.btn-logout{background:transparent;color:var(--text-on-dark-secondary);border:1px solid rgba(255,255,255,.08);width:100%;font-size:var(--text-xs);padding:.5rem var(--space-3);border-radius:var(--radius-sm);font-family:var(--font-body)}.btn-logout:hover{background:#ffffff0f;color:var(--text-on-dark)}.alert{padding:.625rem var(--space-3);border-radius:var(--radius-sm);font-size:var(--text-sm);margin-bottom:var(--space-5)}.alert-error{background:var(--error-bg);color:var(--error);border:1px solid #fecaca}.app-layout{display:flex;min-height:100vh}.sidebar{width:240px;background:var(--surface-sidebar);color:var(--text-on-dark);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:10}.sidebar-header{padding:var(--space-6) var(--space-5);border-bottom:1px solid rgba(255,255,255,.06)}.sidebar-header h2{font-family:var(--font-display);font-size:var(--text-lg);color:#fff;font-weight:600;letter-spacing:-.01em}.sidebar-subtitle{display:block;font-size:.65rem;color:var(--text-on-dark-secondary);text-transform:uppercase;letter-spacing:.12em;font-weight:500;margin-top:var(--space-3)}.sidebar-nav{flex:1;padding:var(--space-3) var(--space-3);display:flex;flex-direction:column;gap:2px}.nav-link{display:flex;align-items:center;gap:.625rem;padding:.5625rem var(--space-3);border-radius:var(--radius-sm);color:var(--text-on-dark-secondary);text-decoration:none;font-size:var(--text-sm);font-weight:500;transition:all .12s ease}.nav-link:hover{background:var(--surface-sidebar-hover);color:var(--text-on-dark)}.nav-link.active{background:var(--brand);color:#fff}.nav-icon{font-size:1rem;width:20px;text-align:center;flex-shrink:0}.sidebar-footer{padding:var(--space-4) var(--space-3);border-top:1px solid rgba(255,255,255,.06)}.gateway-status{display:flex;align-items:center;gap:.5rem;font-size:var(--text-xs);color:var(--text-on-dark-secondary);margin-bottom:var(--space-4);padding:0 var(--space-3)}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--error);flex-shrink:0}.status-dot.online{background:var(--success);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.user-info{margin-bottom:var(--space-3);padding:0 var(--space-3)}.user-name{display:block;font-size:var(--text-sm);color:var(--text-on-dark);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-display)}.user-ruc{font-size:var(--text-xs);color:var(--text-on-dark-secondary)}.main-content{flex:1;margin-left:240px;padding:var(--space-6) var(--space-8);height:100vh;overflow-y:auto}.page h2{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;color:var(--text);margin-bottom:var(--space-4);letter-spacing:-.01em}.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);margin-bottom:var(--space-4)}.stat-card{background:var(--surface);border-radius:var(--radius);padding:var(--space-4);box-shadow:var(--shadow-sm);border:1px solid var(--border-subtle)}.stat-card.highlight{border-left:3px solid var(--brand);padding-left:calc(var(--space-4) - 3px)}.stat-number{display:block;font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;color:var(--text);line-height:1;letter-spacing:-.02em}.stat-label{display:block;font-size:var(--text-xs);color:var(--text-secondary);margin-top:2px;font-weight:500}.tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:0}.tab{padding:.625rem 1rem;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .12s;font-family:var(--font-body)}.tab:hover{color:var(--text)}.tab.active{color:var(--brand);border-bottom-color:var(--brand)}.tab-content{background:var(--surface);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius);padding:var(--space-5);box-shadow:var(--shadow-sm)}.campana-form{display:flex;flex-direction:column;gap:0}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}.campana-form .btn-primary{width:auto;align-self:flex-start;padding:.5rem 1.5rem}.table-responsive{overflow-x:auto}.data-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.data-table th{text-align:left;padding:.625rem var(--space-3);background:var(--surface-secondary);color:var(--text-secondary);font-weight:500;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border)}.data-table td{padding:.625rem var(--space-3);border-bottom:1px solid var(--border-subtle);color:var(--text)}.data-table tr:last-child td{border-bottom:none}.data-table tr:hover td{background:var(--surface-secondary)}.empty-row{text-align:center;color:var(--text-secondary);padding:3rem var(--space-4);background:transparent!important}.config-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-5);margin-bottom:var(--space-4);box-shadow:var(--shadow-sm)}.config-section h3{font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--border-subtle);letter-spacing:-.01em}.config-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--border-subtle)}.config-item:last-child{border-bottom:none}.config-label{font-size:var(--text-sm);color:var(--text-secondary)}.config-value{font-size:var(--text-sm);color:var(--text);font-weight:500}.status-label{font-size:var(--text-xs);font-weight:600;padding:.1875rem .5rem;border-radius:100px;text-transform:uppercase;letter-spacing:.04em}.status-label.disconnected{background:var(--error-bg);color:var(--error)}.status-label.connected{background:var(--success-bg);color:var(--success)}.channel-email{background:var(--brand-subtle);color:var(--brand)}.config-input{width:90px;padding:.375rem .5rem;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--text-sm);text-align:center;font-family:var(--font-body);color:var(--text)}.config-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-ring)}.placeholder-text{color:var(--text-secondary);font-size:var(--text-sm);padding:var(--space-4) 0}.empty-state{text-align:center;padding:var(--space-8) var(--space-4)}.empty-state p{color:var(--text-secondary);font-size:var(--text-sm);margin-bottom:var(--space-4)}.alert-success{background:var(--success-bg);color:var(--success);border:1px solid #a7f3d0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a80;display:flex;align-items:center;justify-content:center;z-index:100;padding:var(--space-4)}.modal{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);width:100%;max-width:520px;max-height:90vh;overflow-y:auto;padding:var(--space-6)}.modal-wide{max-width:640px}.modal-send{max-width:600px;display:flex;flex-direction:column;max-height:85vh}.modal-send .modal-header{flex-shrink:0}.modal-body{flex:1;overflow-y:auto;padding:var(--space-5)}.modal-body::-webkit-scrollbar{width:4px}.modal-footer{flex-shrink:0;display:flex;gap:var(--space-3);justify-content:flex-end;padding:var(--space-4) var(--space-5);border-top:1px solid var(--border-subtle)}.client-count{font-size:var(--text-xs);color:var(--text-secondary);padding:0 0 var(--space-3)}.client-list{max-height:280px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:var(--space-4)}.client-row{display:flex;align-items:center;justify-content:space-between;padding:.5rem var(--space-3);border-bottom:1px solid var(--border-subtle);font-size:var(--text-sm)}.client-row:last-child{border-bottom:none}.client-row:hover{background:var(--surface-secondary)}.client-name{font-weight:500;color:var(--text)}.client-contact{font-size:var(--text-xs);color:var(--text-secondary);margin-top:1px}.client-list-checkable{max-height:340px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-sm)}.client-row-checkable{display:flex;align-items:center;gap:.625rem;padding:.5rem var(--space-3);border-bottom:1px solid var(--border-subtle);cursor:pointer;font-size:var(--text-sm)}.client-row-checkable:hover{background:var(--surface-secondary)}.client-row-checkable:last-child{border-bottom:none}.client-row-checkable input[type=checkbox]{width:16px;height:16px;flex-shrink:0;accent-color:var(--brand);cursor:pointer}.channel-section{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:var(--space-3);overflow:hidden}.channel-toggle{display:flex;align-items:center;gap:.5rem;padding:.625rem var(--space-3);cursor:pointer;font-size:var(--text-sm);font-weight:500;background:var(--surface-secondary)}.channel-toggle.disabled{cursor:not-allowed;opacity:.55}.channel-toggle input[type=checkbox]{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;flex-shrink:0}.channel-label-main{font-weight:600;color:var(--text)}.channel-label{font-weight:600;color:var(--text);min-width:80px}.channel-hint{font-size:var(--text-xs);color:var(--text-muted);margin-left:auto}.channel-accounts{padding:var(--space-2) var(--space-3) var(--space-3);border-top:1px solid var(--border-subtle)}.account-toggle{display:flex;align-items:center;gap:.5rem;padding:.375rem 0;cursor:pointer;font-size:var(--text-sm);color:var(--text-secondary)}.account-toggle:hover{color:var(--text)}.account-toggle input[type=checkbox]{width:14px;height:14px;accent-color:var(--brand);cursor:pointer;flex-shrink:0}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}.modal-header h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;letter-spacing:-.01em}.modal-close{background:none;border:none;font-size:1.5rem;color:var(--text-muted);cursor:pointer;line-height:1;padding:0 var(--space-1)}.modal-close:hover{color:var(--text)}.modal-subtitle{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-5)}.modal-actions{display:flex;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-4)}.modal-actions .btn-primary{width:auto}.btn-sm{padding:.3125rem .75rem;font-size:var(--text-xs);font-weight:500;background:var(--brand-subtle);color:var(--brand);border:1px solid transparent;border-radius:var(--radius-sm);font-family:var(--font-body);cursor:pointer}.btn-sm:hover{background:var(--brand);color:#fff}.btn-icon{display:inline-flex;align-items:center;justify-content:center;padding:6px;background:none;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;font-family:var(--font-body);transition:all .12s}.btn-icon:hover{background:var(--brand);color:#fff;border-color:var(--brand)}.btn-icon-danger:hover{background:var(--error);border-color:var(--error)}.btn-link{background:none;border:none;color:var(--brand);font-size:var(--text-sm);font-weight:500;cursor:pointer;font-family:var(--font-body);padding:0;width:auto}.btn-link:hover{text-decoration:underline}.btn-cancel{background:var(--surface-secondary);color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);padding:.5rem 1rem;font-size:var(--text-sm);cursor:pointer}.btn-cancel:hover{background:var(--border);color:var(--text)}.cell-title{font-weight:500;color:var(--text)}.cell-sub{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.image-preview{margin-top:var(--space-3)}.image-preview img{max-width:100%;max-height:180px;border-radius:var(--radius-sm);border:1px solid var(--border);object-fit:cover}.image-preview.current{margin-top:var(--space-2);opacity:.7}.image-label{display:block;font-size:var(--text-xs);color:var(--text-muted);margin-bottom:var(--space-2)}.skeleton{display:inline-block;background:linear-gradient(90deg,var(--border-subtle) 25%,var(--border) 50%,var(--border-subtle) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-sm)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.filters-bar{display:flex;gap:var(--space-4);margin-bottom:var(--space-5);align-items:flex-end;flex-wrap:wrap}.filters-bar .form-group{margin-bottom:0}.form-section-title{font-family:var(--font-display);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);margin:var(--space-5) 0 var(--space-3);padding-top:var(--space-4);border-top:1px solid var(--border)}.form-section-title:first-child{margin-top:0;padding-top:0;border-top:none}.form-section-desc{font-size:var(--text-xs);color:var(--text-muted);margin-bottom:var(--space-3)}.form-hint{display:block;font-size:var(--text-xs);color:var(--text-muted);margin-top:2px}.theme-btn{background:none;border:none;color:var(--text-on-dark-secondary);cursor:pointer;padding:6px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;line-height:1}.theme-btn:hover{background:#ffffff14;color:var(--text-on-dark)}[data-theme=dark]{--surface: #1e293b;--surface-secondary: #0f172a;--bg: #0f172a;--text: #f1f5f9;--text-secondary: #94a3b8;--text-muted: #64748b;--border: #334155;--border-subtle: #1e293b;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow: 0 1px 3px rgba(0, 0, 0, .4);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 12px 30px rgba(0, 0, 0, .5);--shadow-xl: 0 20px 50px rgba(0, 0, 0, .6);--brand-subtle: #1e3a5f;--brand-ring: rgba(37, 99, 235, .25);--success-bg: #064e3b;--error-bg: #450a0a}[data-theme=dark] .data-table th,[data-theme=dark] .data-table tr:hover td{background:#1e293b}[data-theme=dark] .modal-backdrop{background:#000000b3}[data-theme=dark] .login-page{background-color:#020617;background-image:radial-gradient(circle,rgba(37,99,235,.08) 1px,transparent 1px)}[data-theme=dark] .btn-cancel{background:#334155;color:#cbd5e1;border-color:#475569}[data-theme=dark] .btn-cancel:hover{background:#475569;color:#f1f5f9}.token-code{font-family:Courier New,Courier,monospace;font-size:1.75rem;font-weight:700;letter-spacing:.2em;color:var(--brand);background:var(--brand-subtle);padding:var(--space-3) var(--space-5);border-radius:var(--radius);border:2px dashed var(--brand)}.token-code-sm{font-family:Courier New,Courier,monospace;font-size:var(--text-xs);font-weight:600;letter-spacing:.1em;color:var(--brand)}.token-highlight{text-align:center;padding:var(--space-5)}@media (max-width: 768px){.app-layout{flex-direction:column}.sidebar{position:relative;width:100%;height:auto;flex-shrink:0}.sidebar-nav{flex-direction:row;padding:var(--space-3)}.sidebar-header,.sidebar-footer{display:none}.main-content{margin-left:0;padding:var(--space-4)}.form-row{grid-template-columns:1fr}.stats-bar{grid-template-columns:1fr 1fr}}