:root{--bg:#ffffff;--bg2:#ffffff;--fg:#1e293b;--muted:#64748b;--border:#b2b2b2;--accent:#00C96B;--radius:14px;--radius-sm:10px;--transition:.2s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--fg);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}ul{list-style:none}.navbar{position:fixed;top:0;left:0;right:0;z-index:200;padding:0 44px;height:64px;display:flex;justify-content:space-between;align-items:center;background:#0e0837;border-bottom:1px solid var(--border)}.navbar-logo{display:flex;align-items:center;height:64px}.navbar-logo img{height:28px;width:auto}.navbar-left{display:flex;align-items:center;gap:32px;height:100%}.navbar-links{display:flex;align-items:center;gap:2px;height:100%}.navbar-links a{display:flex;align-items:center;padding:0 18px;height:64px;font-size:13px;font-weight:500;color:#edede899;transition:color .2s ease;white-space:nowrap;border-bottom:2px solid transparent}.navbar-links a:hover{color:#edede8}.navbar-links a.active{color:#edede8;border-bottom-color:var(--accent)}.navbar-right{display:flex;align-items:center;gap:12px;height:100%}.navbar-user{display:flex;align-items:center;gap:8px;background:#edede814;border:none;border-radius:100px;padding:7px 16px;color:#edede8b3;font-family:Inter,sans-serif;font-size:12px;font-weight:500;transition:all .2s ease;cursor:pointer;white-space:nowrap}.navbar-user:hover{background:#edede826;color:#edede8}.navbar-user i{font-size:14px;color:var(--accent)}.content{min-height:100vh;padding:100px 110px 32px;position:relative}.content-inner{background:var(--bg);margin:0}.section-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:10px;font-weight:600}.section-title{font-family:Inter,sans-serif;font-size:clamp(28px,3.5vw,48px);font-weight:800;letter-spacing:-.035em;line-height:1.05;margin-bottom:24px}.section-sub{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:32px;max-width:640px}.card{background:var(--bg2);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden}.card-header{padding:20px 28px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}.card-header h3{margin:0;font-size:15px;font-weight:700;color:var(--fg);letter-spacing:-.02em}.card-body{padding:24px 28px}.card-footer{padding:16px 28px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 22px;border-radius:100px;font-weight:600;font-size:13px;line-height:1.4;border:none;cursor:pointer;transition:all .2s ease;text-decoration:none;white-space:nowrap;font-family:Inter,sans-serif}.btn:hover{text-decoration:none;transform:translateY(-1px)}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:#00b85e;box-shadow:0 4px 16px #00c96b40}.btn-danger{background:#ef4444;color:#fff}.btn-danger:hover{background:#dc2626;color:#fff}.btn-warning{background:#f59e0b;color:#fff}.btn-warning:hover{background:#d97706;color:#fff}.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}.btn-ghost:hover{background:var(--bg2);color:var(--fg)}.btn-ghost-danger{background:transparent;color:#ef4444;border:1px solid rgba(239,68,68,.2)}.btn-ghost-danger:hover{background:#ef44440f;border-color:#ef44444d}.btn-sm{padding:6px 14px;font-size:12px}.btn-xs{padding:4px 10px;font-size:11px}.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:100px;font-size:11px;font-weight:600;letter-spacing:.02em;white-space:nowrap}.badge-success{background:#00c96b1a;color:#059669;border:1px solid rgba(0,201,107,.2)}.badge-danger{background:#ef444414;color:#dc2626;border:1px solid rgba(239,68,68,.2)}.badge-warning{background:#f59e0b1a;color:#d97706;border:1px solid rgba(245,158,11,.2)}.badge-neutral{background:var(--bg2);color:var(--muted);border:1px solid transparent}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-dot.online{background:#00c96b;box-shadow:0 0 8px #00c96b66}.status-dot.offline{background:#ef4444;box-shadow:0 0 8px #ef444466}.ping{position:relative}.ping:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:50%;animation:ping 2s ease infinite}.ping.online:before{background:#00c96b4d}.ping.offline:before{background:#ef44444d}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.form-group{margin-bottom:20px}.form-group label{font-weight:600;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;display:block}.form-control{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;font-size:14px;color:var(--fg);width:100%;transition:border-color .2s,box-shadow .2s;font-family:Inter,sans-serif}.form-control:focus{border-color:#00c96b;box-shadow:0 0 0 3px #00c96b14;outline:none}.form-control::placeholder{color:var(--muted);opacity:.6}select.form-control{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2393938F' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}.form-check{display:flex;align-items:center;gap:8px}.form-check input[type=checkbox]{width:18px;height:18px;accent-color:#00C96B;cursor:pointer}.form-check label{font-size:14px;color:var(--muted);cursor:pointer;margin:0}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}table thead th{padding:14px 16px;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}table tbody td{padding:12px 16px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--fg)}table tbody tr:last-child td{border-bottom:none}table tbody tr:hover td{background:var(--bg2)}.alert{padding:12px 20px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:13px}.alert-danger{background:#ef44440f;color:#dc2626;border:1px solid rgba(239,68,68,.2)}.loading-spinner{display:flex;align-items:center;justify-content:center;height:60vh;color:var(--muted)}.loading-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;color:var(--muted)}.route-loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:100}.empty-state{text-align:center;padding:80px 20px;color:var(--muted)}.empty-state i{font-size:48px;display:block;margin-bottom:16px;opacity:.3}.empty-state h3{font-size:18px;font-weight:600;color:var(--fg);margin-bottom:8px}.empty-state p{font-size:14px;color:var(--muted)}.qnap-card{background:var(--bg2);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;transition:box-shadow .25s ease}.qnap-card:hover{box-shadow:0 4px 20px #0000000f}.qnap-card-header{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:var(--bg)}.qnap-card-name{font-size:16px;font-weight:700;color:var(--fg);display:flex;align-items:center;gap:10px}.qnap-card-split{display:grid;grid-template-columns:1fr 1fr;align-items:center}.qnap-card-right{padding:20px 16px;overflow:hidden}.qnap-card-body{display:grid;grid-template-columns:repeat(3,1fr)}.qnap-stat{padding:20px;text-align:center;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}.qnap-stat:nth-child(3n){border-right:none}.qnap-stat:nth-last-child(-n+3){border-bottom:none}.qnap-stat-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:4px}.qnap-stat-value{font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.2}.qnap-detail-section{padding:20px 24px;border-top:1px solid var(--border)}.qnap-detail-title{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;display:flex;align-items:center;gap:8px}.backup-week-title{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;display:flex;align-items:center;gap:8px}.backup-week-scroll{overflow-x:auto}.backup-week-table{width:100%;border-collapse:collapse;min-width:500px;border:1px solid var(--border)}.backup-week-table th,.backup-week-table td{border:1px solid var(--border);padding:8px 6px;text-align:center;vertical-align:middle;font-size:11px}.backup-week-table th{color:var(--muted);font-weight:700;text-transform:uppercase}.backup-week-table td:first-child{text-align:left;font-weight:700;color:var(--fg);padding-left:12px;font-size:13px;white-space:nowrap}.backup-badges{display:flex;justify-content:center;gap:3px}.backup-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:14px;border-radius:2px;font-size:9px;font-weight:700;font-family:sans-serif}.backup-badge.green{background:#10b981;color:#fff}.backup-badge.grey{background:var(--border);color:var(--muted)}.backup-badge.orange{background:#f59e0b;color:#fff}.backup-badge.red{background:#ef4444;color:#fff}@media(max-width:1100px){.qnap-card-split{grid-template-columns:1fr}}.progress-bar{height:6px;background:var(--bg);border-radius:3px;overflow:hidden}.progress-bar-fill{height:100%;border-radius:3px;background:#00c96b;transition:width .8s ease-in-out}.progress-bar-fill.warning{background:#f59e0b}.progress-bar-fill.danger{background:#ef4444}.backup-table{width:100%}.backup-table th{padding:12px 16px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:1px solid var(--border);text-align:left}.backup-table td{padding:10px 16px;font-size:13px;border-bottom:1px solid var(--border);color:var(--fg)}.backup-table tr:last-child td{border-bottom:none}.backup-table tr:hover td{background:#f8fafc}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}.metric-row{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.metric-item{padding:16px;text-align:center;border-right:1px solid var(--border);background:var(--bg)}.metric-item:last-child{border-right:none}.metric-item-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:4px}.metric-item-value{font-size:24px;font-weight:800;letter-spacing:-.03em}.chart-card{background:var(--bg2);border-radius:var(--radius);border:1px solid var(--border);padding:20px}.chart-card h4{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:16px}.last-update{text-align:right;font-size:12px;color:var(--muted);padding:12px 0;border-top:1px solid var(--border);margin-top:32px}.swal2-popup{background:var(--bg2)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;color:var(--fg)!important}.swal2-title{color:var(--fg)!important}.swal2-html-container{color:var(--muted)!important}.swal2-confirm{border-radius:100px!important}.swal2-cancel{border-radius:100px!important;background:var(--bg)!important;color:var(--muted)!important}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--bg)}.login-card{width:100%;max-width:420px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:48px 40px;box-shadow:0 4px 24px #0000000a}.login-logo{text-align:center;margin-bottom:32px}.login-logo h1{font-family:Syne,sans-serif;font-size:28px;font-weight:800;letter-spacing:-.03em;color:var(--fg);margin-bottom:4px}.login-logo p{font-size:14px;color:var(--muted)}.login-card .form-group{margin-bottom:20px}.login-card label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;display:block}.login-card input[type=email],.login-card input[type=password]{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;font-size:15px;color:var(--fg);width:100%;transition:border-color .2s;font-family:Inter,sans-serif}.login-card input:focus{border-color:#00c96b;outline:none;box-shadow:0 0 0 3px #00c96b14}.login-card .btn-login{width:100%;padding:12px;background:#000039;color:#fff;border:none;border-radius:100px;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;font-family:Inter,sans-serif;margin-top:8px}.login-card .btn-login:hover{background:#000060;box-shadow:0 4px 16px #00003933}.login-card .btn-login:disabled{opacity:.5;cursor:not-allowed}.sinc-wrap{display:flex;flex-direction:column;gap:36px}.sinc-head{margin-bottom:4px}.sinc-title{font-size:clamp(24px,3vw,36px);font-weight:800;color:#0f172a;letter-spacing:-.035em;line-height:1.1;margin-bottom:4px}.sinc-desc{font-size:14px;color:#94a3b8}.sinc-qnap{background:#fff;border-radius:16px;border:1px solid #e2e8f0;box-shadow:0 1px 3px #0000000a;overflow-x:auto}.sinc-qnap-head{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.sinc-qnap-name{font-size:16px;font-weight:700;color:#0f172a}.sinc-qnap-num{font-size:12px;color:#94a3b8;margin-top:1px;display:block}.sinc-ov{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:100px;font-size:12px;font-weight:600}.sinc-ov.green{background:#ecfdf5;color:#065f46}.sinc-ov.red{background:#fef2f2;color:#991b1b}.sinc-ov.yellow{background:#fffbeb;color:#92400e}.sinc-ov-dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:sincPulse 2s ease-in-out infinite}@keyframes sincPulse{0%,to{opacity:1}50%{opacity:.4}}.sinc-list-head{display:flex;align-items:center;padding:8px 24px 6px 32px;border-bottom:1px solid #e2e8f0;background:#f8fafc;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;white-space:nowrap}.sinc-head-name{flex:1;min-width:0}.sinc-head-right{display:flex;align-items:center;margin-left:auto}.sinc-head-dir{width:72px;text-align:center;flex-shrink:0;margin-right:200px;display:inline-flex;justify-content:center}.sinc-head-item{width:140px;flex-shrink:0}.sinc-head-status{width:180px;flex-shrink:0}.sinc-row{display:flex;flex-direction:column;border-bottom:1px solid #f1f5f9;position:relative;transition:background .15s}.sinc-row:last-child{border-bottom:none}.sinc-row:hover,.sinc-row.green{background:#f0fdf4}.sinc-row.green:hover{background:#dcfce7}.sinc-row.red{background:#fef2f2}.sinc-row.red:hover{background:#fee2e2}.sinc-row-edge{position:absolute;left:0;top:0;bottom:0;width:4px}.sinc-row.green .sinc-row-edge{background:#10b981}.sinc-row.red .sinc-row-edge{background:#ef4444}.sinc-row.gray .sinc-row-edge{background:#cbd5e1}.sinc-row-main{padding:16px 24px 16px 32px}.sinc-row-top{display:flex;align-items:center;gap:0;flex-wrap:nowrap}.sinc-row-top-right{display:flex;align-items:center;gap:0;margin-left:auto}.sinc-dir{display:inline-flex;padding:3px 10px;border-radius:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;width:72px;justify-content:center;box-sizing:border-box;margin-right:200px}.sinc-dir.sinc-enviar{background:#eff6ff;color:#1d4ed8}.sinc-dir.sinc-recibir{background:#fef3c7;color:#b45309}.sinc-row-name{font-size:14px;font-weight:600;color:#0f172a;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.sinc-row-top-right .sinc-mid-item{display:flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0;width:140px;justify-content:flex-start;box-sizing:border-box}.sinc-status-txt{font-size:12px;font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;width:180px;box-sizing:border-box}.sinc-last-val{font-size:11px;font-weight:500;color:#64748b;white-space:nowrap;flex-shrink:0}.sinc-head-last{width:170px;flex-shrink:0}.sinc-mid-lbl{font-size:10px;color:#94a3b8;font-weight:500}.sinc-bar-wrap{display:flex;align-items:center;gap:6px}.sinc-mid-bar{width:80px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden}.sinc-mid-fill{height:100%;border-radius:3px;background:#10b981;transition:width .5s ease}.sinc-row.red .sinc-mid-fill{background:#ef4444}.sinc-bar-pct{font-size:13px;font-weight:700;color:#0f172a;font-variant-numeric:tabular-nums;min-width:36px}.sinc-row-bot{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap;padding-top:10px;border-top:1px solid #f1f5f9}.sinc-bot-item{font-size:12px;color:#94a3b8;display:flex;align-items:center;gap:4px}.sinc-bot-item i{font-size:11px}.sinc-bot-sep{color:#e2e8f0;font-size:11px}.sinc-row-err{font-size:12px;color:#dc2626;background:#fef2f2;padding:8px 28px 8px 32px;border-top:1px solid #fecaca}.sinc-foot{text-align:right;font-size:12px;color:#94a3b8;padding-top:8px}.search-wrap{position:relative;max-width:320px}.search-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px}.search-wrap input{width:100%;padding:10px 14px 10px 36px;background:var(--bg2);border:1px solid var(--border);border-radius:100px;font-size:13px;color:var(--fg);transition:border-color .2s;font-family:Inter,sans-serif}.search-wrap input:focus{border-color:#00c96b;outline:none}.search-wrap input::placeholder{color:var(--muted);opacity:.6}@media(max-width:900px){.navbar{padding:0 24px}.navbar-links{display:none}.content{padding-left:24px;padding-right:24px}.job-detail-grid,.qnap-card-body{grid-template-columns:1fr 1fr}.qnap-stat:nth-child(2n){border-right:none}.qnap-stat:nth-child(3n){border-right:1px solid var(--border)}}@media(max-width:640px){.navbar-links{display:none}.content{padding-left:16px;padding-right:16px}.qnap-card-body{grid-template-columns:1fr 1fr}.qnap-stat:nth-child(2n){border-right:none}.qnap-stat:last-child{border-bottom:1px solid var(--border)}.qnap-stat:nth-last-child(-n+3){border-bottom:none}}@keyframes spin{to{transform:rotate(360deg)}}.fa-spinner{animation:spin 1s linear infinite}.recharts-cartesian-grid-horizontal line,.recharts-cartesian-grid-vertical line{stroke:var(--border)!important}.recharts-text{fill:var(--muted)!important;font-size:10px!important}.recharts-tooltip-wrapper .recharts-default-tooltip{background:var(--bg2)!important;border:1px solid var(--border)!important;border-radius:8px!important}