@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--navy:#0a3038;--navy-2:#10414a;--blue:#0f9f99;--blue-2:#e5f8f5;--cyan:#38c9bf;--ink:#17253b;--muted:#758298;--line:#e7edf4;--surface:#fff;--bg:#f5f7fb;--green:#16876a;--green-bg:#e7f7f1;--amber:#a7650c;--amber-bg:#fff3dc;--red:#cc4b55;--red-bg:#ffebed;--shadow:0 6px 24px rgba(28,52,84,.055)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}.app-shell{display:flex;min-height:100vh}.sidebar{width:254px;background:var(--navy);color:#eaf2fd;display:flex;flex-direction:column;min-height:100vh;padding:25px 14px 16px;flex-shrink:0}.brand{display:flex;align-items:center;gap:12px;padding:0 10px 32px}.brand-mark{width:34px;height:34px;background:linear-gradient(145deg,#43dfd0,#0e8f98);border-radius:11px;display:flex;align-items:flex-end;gap:3px;padding:8px;box-shadow:0 6px 18px #0b99944a}.brand-mark span{display:block;background:white;border-radius:3px;width:4px}.brand-mark span:nth-child(1){height:9px;opacity:.75}.brand-mark span:nth-child(2){height:16px}.brand-mark span:nth-child(3){height:12px;opacity:.86}.brand-name{font-family:Manrope,sans-serif;font-weight:800;letter-spacing:-.5px;font-size:19px;color:#fff}.brand-name span{color:#74e6dc;margin-left:4px;font-weight:600}.brand-caption{font-size:8px;letter-spacing:1.7px;color:#81b8bd;margin-top:2px}.workspace-label,.nav-label{font-size:9px;letter-spacing:1.3px;font-weight:700;color:#66809f;padding:0 12px 10px}.workspace{display:flex;align-items:center;gap:10px;background:#123f47;border:1px solid #28555c;border-radius:10px;padding:10px;margin:0 2px 28px}.workspace-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:8px;background:#14777e;color:#fff;font-size:11px;font-weight:700}.workspace-text{display:flex;flex-direction:column;gap:3px;flex:1}.workspace-text strong{font-size:12px;color:white}.workspace-text small{font-size:10px;color:#96abc5}.chevron{color:#8395ad}.main-nav{display:flex;flex-direction:column;gap:5px}.nav-label{padding-top:0;padding-bottom:9px}.nav-label-spaced{padding-top:25px}.nav-item{width:100%;border:0;background:transparent;color:#93a7bf;padding:11px 13px;display:flex;align-items:center;gap:12px;text-align:left;border-radius:8px;font-size:12px;transition:.18s}.nav-item:hover{background:#123d45;color:#eef6ff}.nav-item.active{background:linear-gradient(100deg,#13aaa2,#087f86);color:#fff;box-shadow:0 5px 16px #078b8540}.nav-icon{width:18px;text-align:center;font-size:17px;line-height:1}.nav-count{margin-left:auto;font-size:10px;background:#174750;color:#c3d5e9;border-radius:6px;padding:3px 7px}.alert-count{background:#563748;color:#ffb6bf}.sidebar-bottom{margin-top:auto}.connection-card{padding:13px;background:#102944;border:1px solid #1b3a59;border-radius:10px;margin:22px 2px 17px}.connection-title{font-size:11px;font-weight:700;color:#d5e6f8;display:flex;align-items:center;gap:8px}.pulse-dot{width:7px;height:7px;border-radius:50%;background:#e9aa50;box-shadow:0 0 0 3px #e9aa5022;display:inline-block;flex-shrink:0}.connection-card p{color:#839db9;font-size:10px;line-height:1.5;margin:8px 0}.connection-tag{font-size:8px;letter-spacing:1px;color:#65dcd2;font-weight:700}.sidebar-user{display:flex;align-items:center;gap:9px;border-top:1px solid #1e3b59;padding:16px 5px 0}.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;flex-shrink:0}.avatar-blue{background:#d8f3f0;color:#0c7974}.sidebar-user-text{display:flex;flex-direction:column;gap:3px;flex:1}.sidebar-user-text strong{font-size:11px;color:#e7f1fd}.sidebar-user-text small{font-size:10px;color:#7791af}.more-button{background:transparent;border:0;color:#9ab0ca;font-size:19px;letter-spacing:1px}.main-content{flex:1;min-width:0}.topbar{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px;position:sticky;top:0;z-index:10}.breadcrumb{display:flex;align-items:center;gap:10px;font-size:12px;color:#8793a5}.breadcrumb strong{color:#26364e;font-weight:700}.crumb-slash{color:#c5cdd7}.topbar-actions{display:flex;align-items:center;gap:14px}.demo-pill{display:flex;align-items:center;gap:8px;background:#fff8e8;color:#9b6819;border:1px solid #f3e2bb;border-radius:20px;padding:7px 11px;font-size:10px;font-weight:700}.demo-pill .pulse-dot{width:6px;height:6px}.icon-button{border:1px solid var(--line);border-radius:50%;width:29px;height:29px;background:#fff;color:#76859a;font-weight:700}.profile-switch{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:#fff;color:#5e6d82}.profile-icon{font-size:15px}.profile-switch select{color:#46556b;border:0;outline:none;background:transparent;font-size:10px;max-width:145px;appearance:none}.mobile-menu{display:none;background:transparent;border:0;font-size:22px;color:#456}.page-wrap{max-width:1560px;padding:29px 34px 16px;margin:0 auto}.page-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:23px}.eyebrow{color:#108f89;font-size:9px;font-weight:800;letter-spacing:1.45px;text-transform:uppercase;margin-bottom:7px}.page-heading h1{font-family:Manrope,sans-serif;font-size:25px;letter-spacing:-.8px;line-height:1.22;margin:0;color:#162842;font-weight:800}.page-heading p{margin:8px 0 0;color:#8793a5;font-size:12px;max-width:650px;line-height:1.55}.heading-actions{display:flex;align-items:center;gap:9px}.btn{border:1px solid #dfe7f0;background:#fff;border-radius:8px;padding:10px 13px;color:#506078;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:.2s}.btn:hover{border-color:#a6e5df;transform:translateY(-1px)}.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 5px 12px #0f9f992b}.btn-primary:hover{background:#087f86;color:#fff}.btn-soft{background:#e3f8f5;border-color:#c8eee9;color:#117d79}.btn-small{padding:7px 9px;font-size:10px}.icon-plus{font-size:15px;font-weight:400}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:19px}.stat-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 18px 16px;box-shadow:var(--shadow);min-width:0}.stat-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.stat-label{font-size:11px;color:#7a8799;font-weight:600}.stat-icon{height:32px;width:32px;border-radius:9px;display:grid;place-items:center;font-size:16px}.tone-blue{background:#e3f8f5;color:#118e89}.tone-green{background:#e6f7f0;color:#1b9a70}.tone-amber{background:#fff4df;color:#c48522}.tone-red{background:#ffebed;color:#d2525d}.stat-value{font-family:Manrope,sans-serif;font-size:27px;font-weight:800;letter-spacing:-1px;margin:14px 0 7px;color:#1b2a40}.stat-foot{display:flex;gap:7px;align-items:center;color:#96a1b0;font-size:10px}.trend-up{color:#148b68;font-weight:700}.trend-down{color:#c36a2a;font-weight:700}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:17px;margin-bottom:18px}.panel{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);min-width:0}.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:19px 20px 12px}.panel-title{font-size:13px;font-weight:800;color:#25364e}.panel-subtitle{font-size:10px;color:#99a4b3;margin-top:5px;line-height:1.45}.panel-actions{display:flex;align-items:center;gap:7px}.select-small{border:1px solid #e1e8f0;background:white;border-radius:7px;padding:7px 9px;color:#67758a;font-size:10px;max-width:160px}.chart-area{padding:4px 15px 15px;min-height:250px}.chart-svg{width:100%;height:auto;display:block;overflow:visible}.chart-legend{display:flex;align-items:center;gap:16px;font-size:10px;color:#8793a5;padding:0 22px 18px}.legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:5px}.legend-blue{background:#0fa7a0}.legend-sky{background:#87ddd6}.insight-list{padding:0 20px 9px}.insight{display:flex;align-items:flex-start;gap:11px;padding:14px 0;border-bottom:1px solid #f0f3f7}.insight:last-child{border-bottom:0}.insight-symbol{height:31px;width:31px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex-shrink:0}.insight-copy{flex:1;min-width:0}.insight-copy strong{font-size:11px;color:#33435a;display:block;margin:2px 0 4px}.insight-copy p{font-size:10px;color:#95a0b0;margin:0;line-height:1.55}.insight-meta{font-size:9px;color:#a2adbb;white-space:nowrap;margin-top:3px}.section-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:24px 0 12px}.section-row h2{font-family:Manrope,sans-serif;font-size:15px;letter-spacing:-.3px;margin:0;color:#21324a}.link-button{border:0;background:transparent;color:#0b8883;font-size:10px;font-weight:800;padding:5px}.table-wrap{overflow-x:auto}.data-table{width:100%;border-collapse:collapse;white-space:nowrap}.data-table thead th{text-align:left;font-size:9px;text-transform:uppercase;letter-spacing:.65px;color:#a1aab7;font-weight:800;padding:13px 17px;background:#fbfcfe;border-top:1px solid #f0f3f7;border-bottom:1px solid #edf1f6}.data-table tbody td{padding:14px 17px;border-bottom:1px solid #f0f3f7;color:#536178;font-size:11px}.data-table tbody tr:last-child td{border-bottom:0}.data-table tbody tr:hover{background:#fbfdff}.meter-cell{display:flex;align-items:center;gap:10px}.meter-chip{width:30px;height:30px;border-radius:8px;background:#e3f8f5;color:#0e8884;display:grid;place-items:center;font-size:13px;flex-shrink:0}.meter-main{display:flex;flex-direction:column;gap:4px}.meter-main strong{font-size:11px;color:#2e3c51}.meter-main small{font-size:9px;color:#98a4b3}.status{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:5px;font-size:9px;font-weight:800}.status:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}.status-ok{color:#138765;background:#e5f7f0}.status-warn{color:#aa7015;background:#fff4df}.status-bad{color:#c34755;background:#ffeaec}.status-muted{color:#7d899a;background:#eef1f5}.table-number{font-variant-numeric:tabular-nums;font-weight:700;color:#31435a!important}.muted{color:#97a2b1!important}.page-controls{display:flex;flex-wrap:wrap;align-items:center;gap:9px}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:10px;font-weight:700;color:#738197}.field input,.field select,.field textarea{border:1px solid #dfe7f0;border-radius:8px;padding:10px 11px;background:#fff;color:#36465c;outline:none;min-width:0}.field input:focus,.field select:focus,.field textarea:focus{border-color:#57c9c2;box-shadow:0 0 0 3px #0c9c9116}.filters{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;padding:14px 17px;border-bottom:1px solid #edf1f6}.search-box{position:relative;min-width:220px;max-width:320px;flex:1}.search-box input{width:100%;padding-left:34px}.search-icon{position:absolute;left:12px;top:10px;color:#9aa6b5}.empty-state{padding:38px 22px;text-align:center;color:#8c98a8;font-size:12px}.empty-state strong{display:block;color:#43536a;font-size:13px;margin-bottom:6px}.two-col{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);gap:17px}.meter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.meter-card{padding:16px;border:1px solid var(--line);background:#fff;border-radius:11px;box-shadow:var(--shadow);cursor:pointer;transition:.18s}.meter-card:hover{border-color:#a6e5df;transform:translateY(-2px)}.meter-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.meter-card-id{display:flex;align-items:center;gap:9px}.meter-card h3{margin:0;font-size:12px}.meter-card p{margin:4px 0 0;color:#98a4b3;font-size:10px}.meter-card-reading{margin:22px 0 5px;font-family:Manrope,sans-serif;font-size:27px;font-weight:800;letter-spacing:-1px}.meter-card-reading small{font:500 11px 'DM Sans',sans-serif;letter-spacing:0;color:#8a98a9}.meter-card-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #edf1f6;margin-top:15px;padding-top:12px;font-size:10px;color:#8793a3}.alarm-list{display:flex;flex-direction:column}.alarm-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:start;padding:16px 19px;border-bottom:1px solid #edf1f6}.alarm-row:last-child{border-bottom:0}.alarm-symbol{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:15px}.alarm-content strong{display:block;font-size:12px;margin:1px 0 5px;color:#324259}.alarm-content p{font-size:10px;margin:0;color:#8c98a8;line-height:1.5}.alarm-content small{display:block;margin-top:8px;color:#abb4c0;font-size:9px}.alarm-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.role-notice{background:#fff7e8;border:1px solid #f1ddb0;color:#8b651f;border-radius:8px;padding:10px 13px;font-size:11px;margin-bottom:18px;line-height:1.5}.hidden{display:none!important}.user-role{display:inline-flex;padding:5px 8px;border-radius:5px;background:#e3f8f5;color:#167c78;font-weight:800;font-size:9px}.permission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.permission-card{border:1px solid var(--line);background:#fff;border-radius:10px;padding:15px}.permission-card h3{font-size:12px;margin:0 0 6px}.permission-card p{color:#8a96a6;font-size:10px;line-height:1.5;margin:0 0 10px}.permission-list{padding:0;margin:0;list-style:none;display:flex;flex-direction:column;gap:8px}.permission-list li{display:flex;gap:7px;align-items:flex-start;font-size:10px;color:#58687e}.check{color:#169269;font-weight:800}.cross{color:#c35a60;font-weight:800}.settings-list{display:flex;flex-direction:column}.setting-row{display:grid;grid-template-columns:minmax(140px,.8fr) minmax(0,1.6fr);gap:25px;padding:17px 20px;border-bottom:1px solid #edf1f6}.setting-row:last-child{border-bottom:0}.setting-name strong{display:block;font-size:11px;color:#314158;margin-bottom:4px}.setting-name small{font-size:10px;color:#9aa4b2;line-height:1.45}.setting-value{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;color:#53647b;min-width:0}.code-value{font-family:monospace;background:#f3f6fa;border:1px solid #e8edf4;padding:8px;border-radius:6px;font-size:10px;overflow-wrap:anywhere}.footer{display:flex;justify-content:space-between;gap:16px;padding:24px 3px 0;color:#a1abba;font-size:9px;line-height:1.5}.modal-backdrop{position:fixed;inset:0;background:#0b1d356e;display:grid;place-items:center;padding:20px;z-index:30}.modal{width:min(100%,510px);max-height:90vh;overflow:auto;background:#fff;border-radius:14px;box-shadow:0 24px 90px #07172b40}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;padding:22px 22px 14px}.modal-head h2{font-family:Manrope,sans-serif;font-size:18px;margin:0;letter-spacing:-.5px}.modal-head p{margin:6px 0 0;color:#8d99a9;font-size:11px;line-height:1.5}.close-modal{border:0;background:#f3f6fa;border-radius:7px;width:30px;height:30px;color:#65758a;font-size:17px}.modal-body{padding:8px 22px 22px}.modal-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.modal-form .wide{grid-column:1/-1}.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid #edf1f6}.toast-root{position:fixed;bottom:22px;right:22px;z-index:50;display:flex;flex-direction:column;gap:8px}.toast{background:#102944;color:#f7fbff;padding:12px 16px;border-radius:9px;box-shadow:0 10px 28px #07172b33;font-size:11px;max-width:360px;animation:toastin .2s ease-out}.toast strong{color:#77d8b6}@keyframes toastin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}.demo-banner{border:1px dashed #a6e5df;background:#edfbf9;color:#527982;border-radius:8px;padding:10px 12px;font-size:10px;line-height:1.55;margin:0 0 17px}.demo-banner strong{color:#128b83}.raw-frame{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f7f9fc;color:#536984;padding:11px;border:1px solid #e6edf5;border-radius:7px;word-break:break-all;font-size:10px;line-height:1.7}
@media(max-width:1100px){.sidebar{width:225px}.page-wrap{padding:25px 22px 15px}.topbar{padding:0 22px}.stats-grid{gap:10px}.stat-card{padding:15px}.stat-value{font-size:24px}.dashboard-grid{grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr)}.meter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.sidebar{position:fixed;left:-260px;top:0;bottom:0;z-index:25;width:254px;transition:left .22s;box-shadow:15px 0 45px #07172b25}.sidebar.open{left:0}.mobile-menu{display:inline-block}.topbar{gap:12px;padding:0 16px}.breadcrumb{margin-right:auto}.topbar-actions{gap:8px}.profile-switch{padding:6px}.profile-switch select{max-width:112px}.demo-pill{padding:7px 8px;font-size:9px}.page-wrap{padding:22px 16px 15px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid,.two-col{grid-template-columns:1fr}.permission-grid{grid-template-columns:1fr}.footer{flex-direction:column;gap:5px}.page-heading h1{font-size:23px}}
@media(max-width:550px){.topbar{height:62px}.breadcrumb span:first-child,.crumb-slash{display:none}.profile-switch{max-width:37px;overflow:hidden}.profile-switch select,.profile-switch .chevron{display:none}.demo-pill{display:none}.page-heading{flex-direction:column;align-items:stretch}.heading-actions{justify-content:flex-start;flex-wrap:wrap}.stats-grid{gap:9px}.stat-card{padding:13px}.stat-label{font-size:10px}.stat-value{font-size:24px;margin:11px 0 6px}.stat-foot{font-size:9px}.meter-grid{grid-template-columns:1fr}.panel-header{padding:16px 14px 10px}.chart-area{padding:2px 8px 10px}.chart-legend{padding-left:14px}.filters{align-items:stretch}.search-box{min-width:100%;max-width:none}.page-controls{width:100%}.page-controls>*{flex:1}.setting-row{grid-template-columns:1fr;gap:9px}.modal-form{grid-template-columns:1fr}.modal-form .wide{grid-column:auto}.data-table thead th,.data-table tbody td{padding:12px}.alarm-row{grid-template-columns:32px minmax(0,1fr);gap:9px;padding:14px}.alarm-actions{grid-column:2;flex-direction:row;align-items:center;justify-content:flex-start}.stat-top{align-items:flex-start}.page-heading p{font-size:11px}}

/* Flusytec Remote v0.4 — identidad visual Flusytec */
.live-payload{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;line-height:1.65;white-space:normal;overflow-wrap:anywhere;color:#243b53;max-width:430px}
.live-json{white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto;padding:10px;background:#f4f7fb;border-radius:8px;font:10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:#334155}
#frameLoginForm{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));align-items:end;gap:12px}
#frameLoginForm .field{margin:0}
#frameLoginForm input{width:100%;box-sizing:border-box}
@media(max-width:720px){#frameLoginForm{grid-template-columns:1fr}}