:root{--color-text-primary:#1a1a2e;--color-text-secondary:#555570;--color-text-muted:#8888a0;--color-background-primary:#f0f2f5;--color-background-secondary:#fff;--color-background-tertiary:#e8eaef;--color-border:#d8dbe5;--color-accent:#4f6ef7;--color-accent-hover:#3b57d9;--color-accent-light:rgba(79,110,247,.1);--color-danger:#e74c5e;--color-danger-hover:#d13a4b;--color-danger-light:rgba(231,76,94,.1);--color-orange:#f97316;--color-orange-light:rgba(249,115,22,.12);--color-warning:#f0a500;--color-warning-light:rgba(240,165,0,.1);--color-success:#2ecc71;--color-success-light:rgba(46,204,113,.1);--color-info:#3498db;--color-info-light:rgba(52,152,219,.1);--color-shadow:rgba(0,0,0,.06);--color-shadow-lg:rgba(0,0,0,.1);--color-overlay:rgba(0,0,0,.45);--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--transition:.2s ease}
[data-theme="dark"]{--color-text-primary:#e8e8f0;--color-text-secondary:#a0a0b8;--color-text-muted:#6c6c85;--color-background-primary:#0f0f1a;--color-background-secondary:#1a1a2e;--color-background-tertiary:#25253d;--color-border:#2e2e4a;--color-accent:#6b8aff;--color-accent-hover:#8da4ff;--color-accent-light:rgba(107,138,255,.12);--color-danger-light:rgba(231,76,94,.15);--color-orange-light:rgba(249,115,22,.15);--color-warning-light:rgba(240,165,0,.15);--color-success-light:rgba(46,204,113,.15);--color-info-light:rgba(52,152,219,.15);--color-shadow:rgba(0,0,0,.2);--color-shadow-lg:rgba(0,0,0,.35);--color-overlay:rgba(0,0,0,.6)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--color-background-primary);color:var(--color-text-primary);line-height:1.6;min-height:100vh;transition:background var(--transition),color var(--transition)}
a{color:var(--color-accent)}

/* Header */
.app-header{background:var(--color-background-secondary);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:50;box-shadow:0 1px 4px var(--color-shadow)}
.header-content{max-width:1320px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px}
.logo-icon{font-size:1.6rem;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--color-accent-light);border-radius:var(--radius-md);animation:spin 8s linear infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.logo h1{font-size:1.15rem;font-weight:700;letter-spacing:-.3px}
.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Exchange Rate */
.exchange-rate-badge{display:flex;align-items:center;gap:8px;background:var(--color-background-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:6px 12px;font-size:.8rem}
.exchange-flag{font-size:1.2rem}
.exchange-info{display:flex;flex-direction:column;line-height:1.2}
.exchange-label{font-size:.65rem;color:var(--color-text-muted);text-transform:uppercase;font-weight:700;letter-spacing:.5px}
.exchange-value{font-weight:700;font-size:.82rem;color:var(--color-accent)}
.btn-refresh-rate{background:none;border:none;cursor:pointer;font-size:1rem;color:var(--color-text-muted);padding:2px;border-radius:50%;transition:all var(--transition);line-height:1}
.btn-refresh-rate:hover{color:var(--color-accent);background:var(--color-accent-light)}
.btn-refresh-rate.spinning{animation:spin .6s linear}

/* Nav */
.header-nav{display:flex;gap:3px;background:var(--color-background-tertiary);border-radius:var(--radius-sm);padding:3px;border:1px solid var(--color-border)}
.nav-tab{background:none;border:none;padding:7px 12px;font-size:.78rem;font-weight:600;color:var(--color-text-secondary);cursor:pointer;border-radius:4px;transition:all var(--transition);font-family:inherit;white-space:nowrap}
.nav-tab:hover{color:var(--color-text-primary)}
.nav-tab.active{background:var(--color-accent);color:#fff;box-shadow:0 2px 6px rgba(79,110,247,.3)}
.alert-count{background:var(--color-danger);color:#fff;font-size:.65rem;font-weight:700;padding:1px 5px;border-radius:10px;margin-left:2px;min-width:16px;text-align:center;display:inline-block}
.nav-tab.active .alert-count{background:#fff;color:var(--color-danger)}
.btn-theme{background:var(--color-background-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-sm);width:38px;height:38px;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.btn-theme:hover{background:var(--color-accent-light);border-color:var(--color-accent)}

/* Layout */
.container{max-width:1320px;margin:0 auto;padding:24px}
.tab-content{display:none}.tab-content.active{display:block}
.section-title h2{font-size:1.1rem;font-weight:700}
.section-subtitle{font-size:.82rem;color:var(--color-text-muted);margin-top:2px}

/* Dashboard */
.dashboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px}
.metric-card{background:var(--color-background-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:20px;display:flex;align-items:center;gap:16px;transition:transform var(--transition),box-shadow var(--transition);box-shadow:0 2px 8px var(--color-shadow)}
.metric-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px var(--color-shadow-lg)}
.metric-icon{font-size:1.8rem;width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--color-accent-light);flex-shrink:0}
.metric-danger .metric-icon{background:var(--color-danger-light)}
.metric-warning .metric-icon{background:var(--color-warning-light)}
.metric-success .metric-icon{background:var(--color-success-light)}
.metric-info{display:flex;flex-direction:column}
.metric-value{font-size:1.8rem;font-weight:800;line-height:1.1}
.metric-label{font-size:.82rem;color:var(--color-text-secondary);font-weight:500}

/* Toolbar */
.toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.filters{display:flex;gap:10px;flex-wrap:wrap;flex:1}
.input-field{background:var(--color-background-secondary);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:9px 14px;color:var(--color-text-primary);font-size:.88rem;transition:border-color var(--transition),box-shadow var(--transition);outline:none;font-family:inherit}
.input-field:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-light)}
.filters .input-field{min-width:160px;flex:1;max-width:260px}

/* Buttons */
.btn-primary{background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-sm);padding:10px 20px;font-size:.88rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all var(--transition);white-space:nowrap;font-family:inherit}
.btn-primary:hover{background:var(--color-accent-hover);transform:translateY(-1px)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-secondary{background:var(--color-background-tertiary);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:9px 18px;font-size:.88rem;font-weight:500;cursor:pointer;transition:all var(--transition);font-family:inherit}
.btn-secondary:hover{background:var(--color-border)}
.btn-danger{background:var(--color-danger);color:#fff;border:none;border-radius:var(--radius-sm);padding:9px 18px;font-size:.88rem;font-weight:600;cursor:pointer;transition:all var(--transition);font-family:inherit}
.btn-danger:hover{background:var(--color-danger-hover)}
.btn-icon{background:none;border:none;cursor:pointer;padding:6px;border-radius:var(--radius-sm);font-size:1rem;transition:all var(--transition);display:inline-flex;align-items:center;justify-content:center}
.btn-icon:hover{background:var(--color-background-tertiary)}
.btn-icon.edit:hover{background:var(--color-accent-light)}
.btn-icon.renew:hover{background:var(--color-success-light)}
.btn-icon.delete:hover{background:var(--color-danger-light)}
.btn-sm{padding:6px 12px;font-size:.78rem;border-radius:var(--radius-sm);font-weight:600;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:4px;transition:all var(--transition);font-family:inherit}
.btn-email{background:var(--color-info-light);color:var(--color-info)}
.btn-email:hover{background:var(--color-info);color:#fff}
.btn-whatsapp{background:rgba(37,211,102,.12);color:#25D366;padding:8px 14px!important;text-decoration:none}
.btn-whatsapp:hover{background:#25D366;color:#fff}

/* Table */
.table-container{background:var(--color-background-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 2px 8px var(--color-shadow)}
.services-table{width:100%;border-collapse:collapse}
.services-table thead{background:var(--color-background-tertiary)}
.services-table th{padding:13px 16px;text-align:left;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-secondary);border-bottom:1px solid var(--color-border)}
.services-table td{padding:14px 16px;font-size:.88rem;border-bottom:1px solid var(--color-border);vertical-align:middle}
.services-table tbody tr{transition:background var(--transition);animation:fadeInUp .3s ease both}
.services-table tbody tr:hover{background:var(--color-accent-light)}
.services-table tbody tr:last-child td{border-bottom:none}
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:.76rem;font-weight:600;white-space:nowrap}
.badge-danger{background:var(--color-danger-light);color:var(--color-danger)}
.badge-orange{background:var(--color-orange-light);color:var(--color-orange)}
.badge-warning{background:var(--color-warning-light);color:var(--color-warning)}
.badge-success{background:var(--color-success-light);color:var(--color-success)}
.badge-info{background:var(--color-info-light);color:var(--color-info)}
.badge-tipo{background:var(--color-accent-light);color:var(--color-accent);padding:3px 9px;border-radius:20px;font-size:.76rem;font-weight:600}
.days-count{font-weight:700;font-size:.9rem}
.days-count.danger{color:var(--color-danger)}.days-count.orange{color:var(--color-orange)}.days-count.warning{color:var(--color-warning)}.days-count.success{color:var(--color-success)}.days-count.info{color:var(--color-info)}
.cell-actions{display:flex;gap:4px}
.monto-cell{display:flex;flex-direction:column;line-height:1.3}
.monto-main{font-weight:600}
.monto-alt{font-size:.72rem;color:var(--color-text-muted)}
.svc-count{font-size:.72rem;color:var(--color-text-muted);font-weight:500}

/* Alert Legend */
.alert-legend{display:flex;gap:16px;flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--color-text-secondary);font-weight:500}
.legend-dot{width:10px;height:10px;border-radius:50%}
.legend-dot.danger{background:var(--color-danger)}.legend-dot.orange{background:var(--color-orange)}.legend-dot.warning{background:var(--color-warning)}.legend-dot.info{background:var(--color-info)}

/* Empty */
/* Cat list */
#catList{margin-top:4px}
.cat-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);margin-bottom:6px;transition:background var(--transition)}
.cat-item:hover{background:var(--color-background-tertiary)}
.cat-name{font-weight:600;font-size:.88rem}

.empty-state{text-align:center;padding:60px 20px;display:none}
.empty-state.visible{display:block}
.empty-icon{font-size:3rem;display:block;margin-bottom:12px}
.empty-state p{color:var(--color-text-secondary);font-size:1rem;font-weight:600}
.empty-sub{color:var(--color-text-muted)!important;font-weight:400!important;font-size:.88rem!important;margin-top:4px}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:var(--color-overlay);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;padding:20px}
.modal-overlay.active{opacity:1;visibility:visible}
.modal{background:var(--color-background-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px var(--color-shadow-lg);transform:translateY(20px) scale(.97);transition:transform .25s ease}
.modal-overlay.active .modal{transform:translateY(0) scale(1)}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--color-border)}
.modal-header h2{font-size:1.1rem;font-weight:700}
.btn-close{background:var(--color-background-tertiary);border:none;width:32px;height:32px;border-radius:var(--radius-sm);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);transition:all var(--transition)}
.btn-close:hover{background:var(--color-danger-light);color:var(--color-danger)}
form{padding:24px}
.form-group{margin-bottom:18px;position:relative}
.form-group label{display:block;font-size:.82rem;font-weight:600;margin-bottom:6px;color:var(--color-text-secondary)}
.form-group .input-field{width:100%}
.form-group textarea.input-field{resize:vertical;min-height:50px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.required{color:var(--color-danger)}
.error-msg{display:none;font-size:.76rem;color:var(--color-danger);margin-top:4px;font-weight:500}
.form-group.has-error .input-field{border-color:var(--color-danger);box-shadow:0 0 0 3px var(--color-danger-light)}
.form-group.has-error .error-msg{display:block}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding-top:10px}
.modal-confirm{max-width:400px}
.confirm-text{padding:20px 24px;font-size:.92rem;color:var(--color-text-secondary);line-height:1.5}
.modal-confirm .modal-footer{padding:0 24px 24px}
.conversion-preview{background:var(--color-accent-light);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:8px 14px;margin:-10px 0 18px;font-size:.82rem;font-weight:600;color:var(--color-accent)}
.client-preview{background:var(--color-success-light);border-radius:var(--radius-sm);padding:8px 14px;margin:-10px 0 18px;font-size:.82rem;font-weight:600;color:var(--color-success)}

/* Email Modal */
.modal-email{max-width:580px}
.email-preview{padding:20px 24px}
.email-field{display:flex;gap:10px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--color-border);font-size:.88rem}
.email-field label{font-weight:700;color:var(--color-text-secondary);min-width:60px}
.email-body{background:var(--color-background-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:16px;font-size:.86rem;line-height:1.6;color:var(--color-text-primary);white-space:pre-line;margin-top:10px;max-height:300px;overflow-y:auto}

/* Config */
.config-card{background:var(--color-background-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:24px;box-shadow:0 2px 8px var(--color-shadow)}
.config-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--color-border)}
.step{display:flex;gap:12px;align-items:flex-start}
.step-num{background:var(--color-accent);color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex-shrink:0}
.step p{font-size:.78rem;color:var(--color-text-muted);margin-top:2px}
.step code{background:var(--color-background-tertiary);padding:1px 5px;border-radius:3px;font-size:.75rem}
.config-form{padding:0!important}
.config-form .form-group{margin-bottom:16px}
.config-status{margin-top:16px;padding:12px;border-radius:var(--radius-sm);font-size:.86rem;font-weight:500;display:none}
.config-status.ok{display:block;background:var(--color-success-light);color:var(--color-success)}
.config-status.err{display:block;background:var(--color-danger-light);color:var(--color-danger)}

/* ===== Login Screen ===== */
.login-screen{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);padding:20px}
.login-card{background:var(--color-background-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);width:100%;max-width:420px;box-shadow:0 24px 80px rgba(0,0,0,.3);animation:fadeInUp .5s ease}
.login-logo{text-align:center;padding:36px 24px 10px}
.login-logo-icon{font-size:3rem;display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;background:var(--color-accent-light);border-radius:50%;margin-bottom:16px;animation:spin 8s linear infinite}
.login-logo h1{font-size:1.3rem;font-weight:700;margin-bottom:4px}
.login-subtitle{font-size:.85rem;color:var(--color-text-muted);font-weight:400}
.auth-form{padding:24px 28px 28px}
.auth-form .form-group{margin-bottom:16px}
.auth-form .form-group label{font-size:.82rem;font-weight:600;color:var(--color-text-secondary);display:block;margin-bottom:6px}
.auth-form .input-field{width:100%;padding:11px 14px;font-size:.9rem}
.btn-auth{width:100%;justify-content:center;padding:12px;font-size:.92rem;margin-top:6px}
.auth-switch{text-align:center;font-size:.82rem;color:var(--color-text-muted);margin-top:16px}
.auth-switch a{color:var(--color-accent);font-weight:600;text-decoration:none}
.auth-switch a:hover{text-decoration:underline}
.auth-error{color:var(--color-danger);font-size:.8rem;font-weight:500;text-align:center;min-height:20px;margin-bottom:4px}
.pass-wrapper{position:relative;display:flex;align-items:center}
.pass-wrapper .input-field{padding-right:40px}
.btn-toggle-pass{position:absolute;right:8px;background:none;border:none;cursor:pointer;font-size:1rem;padding:4px;color:var(--color-text-muted);transition:color var(--transition)}
.btn-toggle-pass:hover{color:var(--color-text-primary)}

/* User Menu */
.user-menu{display:flex;align-items:center;gap:6px}
.user-badge{font-size:.78rem;font-weight:600;color:var(--color-text-secondary);white-space:nowrap;padding:4px 8px;background:var(--color-background-tertiary);border-radius:var(--radius-sm);border:1px solid var(--color-border)}
.btn-change-pass{background:var(--color-background-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-sm);width:34px;height:34px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.btn-change-pass:hover{background:var(--color-accent-light);border-color:var(--color-accent)}
.btn-logout{background:var(--color-danger-light);color:var(--color-danger);border:none;border-radius:var(--radius-sm);padding:6px 12px;font-size:.76rem;font-weight:600;cursor:pointer;transition:all var(--transition);font-family:inherit;white-space:nowrap}
.btn-logout:hover{background:var(--color-danger);color:#fff}

/* Toast */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--color-background-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:14px 20px;box-shadow:0 8px 24px var(--color-shadow-lg);display:flex;align-items:center;gap:10px;font-size:.86rem;font-weight:500;animation:slideInRight .3s ease,fadeOut .3s ease 3s forwards;min-width:280px;max-width:420px}
.toast-success{border-left:4px solid var(--color-success)}.toast-error{border-left:4px solid var(--color-danger)}.toast-info{border-left:4px solid var(--color-info)}
@keyframes slideInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Responsive */
@media(max-width:900px){.header-content{flex-direction:column;align-items:stretch;gap:10px}.header-actions{flex-wrap:wrap;justify-content:center}.exchange-rate-badge{flex:1;justify-content:center}}
@media(max-width:768px){.container{padding:16px}.dashboard{grid-template-columns:repeat(2,1fr);gap:10px}.metric-card{padding:14px}.metric-value{font-size:1.4rem}.toolbar{flex-direction:column;align-items:stretch}.filters{flex-direction:column}.filters .input-field{max-width:100%}.btn-primary{justify-content:center}.form-row{grid-template-columns:1fr}.table-container{overflow-x:auto}.services-table{min-width:700px}.alert-legend{justify-content:center}.config-steps{grid-template-columns:1fr}}
@media(max-width:480px){.dashboard{grid-template-columns:1fr}.logo h1{font-size:1rem}.header-nav{flex-wrap:wrap;justify-content:center}}