:root {
  --bg: #f5f7fb; --card: #fff; --text: #172033; --muted: #687188; --line: #e4e8f0;
  --accent: #2f6fed; --accent-soft: #eef4ff; --danger: #dc3545; --danger-soft: #fff0f2;
  --success: #22a653; --success-soft: #ecfaef; --shadow: 0 10px 30px rgba(28,40,66,.08); --radius: 18px;
}
* { box-sizing: border-box; }
html { min-height:100%; -webkit-text-size-adjust:100%; }
body { min-height:100%; margin:0; padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif; background:var(--bg); color:var(--text); -webkit-tap-highlight-color:transparent; }
a { color:var(--accent); text-decoration:none; } button,input { font:inherit; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:0; font-size:clamp(24px,3vw,36px); }
.eyebrow { margin-bottom:6px; color:var(--accent); font-weight:800; font-size:11px; letter-spacing:.16em; }
.topbar { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px clamp(18px,4vw,56px); background:rgba(245,247,251,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
.top-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.container { width:min(1500px,calc(100% - 24px)); margin:28px auto 60px; } .narrow { width:min(860px,calc(100% - 28px)); }
.btn { border:0; border-radius:12px; padding:11px 15px; cursor:pointer; font-weight:700; transition:.18s ease; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn:hover { transform:translateY(-1px); } .btn-primary { background:var(--accent); color:white; } .btn-ghost { background:white; color:var(--text); border:1px solid var(--line); }
.btn-small { padding:8px 11px; font-size:13px; }
.sync-line { margin-top:8px; color:var(--muted); font-size:12px; display:flex; align-items:center; gap:7px; max-width:560px; }
.sync-dot { width:8px; height:8px; border-radius:50%; background:#adb5bd; flex:none; } .sync-dot.ok { background:var(--success); box-shadow:0 0 0 4px rgba(34,166,83,.1); } .sync-dot.error { background:var(--danger); }
.groups { display:block; }
.controls-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; align-items:stretch; }
.device { position:relative; min-width:0; min-height:154px; background:white; border:1px solid var(--line); border-radius:14px; padding:12px 10px 14px; display:flex; flex-direction:column; align-items:center; text-align:center; box-shadow:0 5px 16px rgba(28,40,66,.055); }
.device-room { width:100%; padding:0 24px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:800; color:var(--text); }
.device-description { width:100%; margin:7px 0 8px; min-height:34px; display:flex; align-items:center; justify-content:center; font-size:14px; line-height:1.18; text-align:center; }
.remove-btn { position:absolute; right:7px; top:5px; border:0; background:transparent; color:#a8b0bf; cursor:pointer; font-size:17px; line-height:1; padding:3px; }
.remove-btn:hover { color:var(--danger); }
.status-chip { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:3px; font-size:9px; font-weight:700; color:var(--muted); }
.status-chip span { width:6px; height:6px; border-radius:50%; background:#adb5bd; }
.status-chip.online span { background:var(--success); } .status-chip.offline span { background:var(--danger); }
.switch-row { margin-top:auto; min-height:47px; width:100%; display:flex; justify-content:center; align-items:center; }
.smart-toggle { position:relative; width:124px; height:43px; border:1px solid #b8bec8; border-radius:24px; background:linear-gradient(#f8f8f8,#d9dce0); box-shadow:inset 0 1px 2px rgba(0,0,0,.16),0 2px 5px rgba(0,0,0,.08); cursor:pointer; overflow:hidden; transition:.22s ease; }
.smart-toggle::before { content:""; position:absolute; inset:4px; border-radius:20px; background:#eef0f2; box-shadow:inset 0 1px 3px rgba(0,0,0,.18); }
.toggle-thumb { position:absolute; z-index:2; top:5px; left:5px; width:55px; height:31px; border-radius:18px; background:linear-gradient(#fff,#d8dadd); border:1px solid #a9afb7; box-shadow:0 2px 5px rgba(0,0,0,.2); transition:transform .28s cubic-bezier(.2,.8,.2,1); }
.smart-toggle.is-off .toggle-thumb { transform:translateX(58px); }
.toggle-label { position:absolute; z-index:3; top:0; height:43px; width:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:900; pointer-events:none; transition:color .25s ease; }
.on-label { left:0; } .off-label { right:0; }
.smart-toggle.is-on .on-label { color:var(--success); } .smart-toggle.is-on .off-label { color:#555b63; }
.smart-toggle.is-off .on-label { color:#555b63; } .smart-toggle.is-off .off-label { color:var(--danger); }
.smart-toggle.is-pending,.smart-triple.is-pending { opacity:.72; }
.smart-toggle.is-disabled,.smart-triple.is-disabled { opacity:.45; cursor:not-allowed; filter:grayscale(.35); }
.smart-triple { width:164px; height:44px; padding:4px; display:grid; grid-template-columns:repeat(3,1fr); gap:2px; border:1px solid #b8bec8; border-radius:24px; background:linear-gradient(#f8f8f8,#d9dce0); box-shadow:inset 0 1px 2px rgba(0,0,0,.16),0 2px 5px rgba(0,0,0,.08); transition:.2s ease; }
.triple-option { min-width:0; border:1px solid transparent; border-radius:18px; background:transparent; color:#5c626c; cursor:pointer; padding:2px 1px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; font-size:7px; font-weight:900; line-height:1; transition:.22s ease; }
.triple-option:hover { background:rgba(255,255,255,.55); }
.triple-option.is-active { background:linear-gradient(#fff,#dfe2e5); border-color:#a9afb7; color:var(--accent); box-shadow:0 1px 4px rgba(0,0,0,.18); }
.triple-option:disabled { cursor:not-allowed; }
.triple-icon { width:18px; height:18px; display:grid; place-items:center; }
.triple-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.triple-icon svg rect { fill:currentColor; stroke:none; }
.unsupported { min-height:43px; width:140px; border:1px dashed #ccd3e0; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--muted); text-align:center; font-size:10px; }
.unsupported strong { font-size:9px; }
.unsupported small { font-size:8px; }
.icon-btn { border:0; background:transparent; font-size:28px; cursor:pointer; color:var(--muted); line-height:1; }
.modal { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; } .modal.hidden,.hidden { display:none !important; } .modal-backdrop { position:absolute; inset:0; background:rgba(12,19,34,.48); }
.modal-card { position:relative; width:min(840px,100%); max-height:88vh; overflow:auto; background:white; border-radius:22px; box-shadow:0 30px 80px rgba(0,0,0,.25); padding:22px; }
.modal-header { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; } .tabs { display:flex; gap:8px; margin:16px 0; border-bottom:1px solid var(--line); }
.tab { border:0; background:transparent; padding:10px 12px; cursor:pointer; color:var(--muted); font-weight:700; border-bottom:2px solid transparent; } .tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab-panel { display:none; } .tab-panel.active { display:block; } .available-list { display:grid; gap:8px; margin-top:12px; }
.available-item { border:1px solid var(--line); border-radius:13px; padding:12px; display:flex; justify-content:space-between; gap:14px; align-items:center; } .available-item strong { display:block; } .available-item small { color:var(--muted); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .form-grid label,.login-form label { display:flex; flex-direction:column; gap:7px; font-size:13px; font-weight:700; color:#48536b; }
.full { grid-column:1 / -1; } .input { width:100%; border:1px solid #d8deea; border-radius:11px; padding:11px 12px; background:white; color:var(--text); outline:none; }
.input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,111,237,.1); } .mono,code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.form-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:8px; flex-wrap:wrap; } .panel { background:white; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; }
.muted { color:var(--muted); } .check-row { flex-direction:row !important; align-items:center; padding-top:28px; }
.notice,.status-box { border-radius:13px; padding:14px 16px; margin-bottom:18px; background:#fff8e6; border:1px solid #f4df9e; } .status-box.success { background:var(--success-soft); border-color:#ccebdd; color:#126a47; } .status-box.error { background:var(--danger-soft); border-color:#ffd9dd; color:#a62f3b; }
.loading { color:var(--muted); padding:30px 0; text-align:center; } .empty { background:white; border:1px dashed #ccd3e0; border-radius:var(--radius); padding:42px; text-align:center; color:var(--muted); }
.toast { position:fixed; right:20px; bottom:20px; z-index:90; max-width:min(420px,calc(100% - 40px)); padding:13px 16px; background:#172033; color:white; border-radius:12px; box-shadow:var(--shadow); } .toast.error { background:#9f2f3b; } .toast.success { background:#14714c; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at top,#edf3ff 0,#f5f7fb 45%); }
.login-card { width:min(430px,100%); background:white; border:1px solid var(--line); border-radius:24px; padding:30px; box-shadow:0 24px 70px rgba(28,40,66,.14); } .login-card h1 { margin-bottom:10px; } .login-form { display:grid; gap:16px; margin-top:24px; } .login-form .btn { width:100%; padding:13px; }
.pwa-install-btn { position:fixed; z-index:95; left:max(14px,env(safe-area-inset-left)); bottom:max(14px,env(safe-area-inset-bottom)); min-height:44px; border:1px solid rgba(255,255,255,.2); border-radius:13px; padding:10px 14px; background:#172033; color:#fff; font-weight:800; box-shadow:0 8px 28px rgba(0,0,0,.28); cursor:pointer; }
.pwa-install-btn[hidden] { display:none; }
@media (max-width:1200px) { .controls-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (max-width:980px) { .controls-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:760px) { .controls-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .topbar { align-items:flex-start; flex-direction:column; padding:14px 12px; } .top-actions { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .top-actions .btn { width:100%; min-height:44px; padding:9px 8px; } .container { margin-top:16px; } .form-grid { grid-template-columns:1fr; } .full { grid-column:auto; } .input { min-height:44px; font-size:16px; } .modal { padding:0; align-items:end; } .modal-card { width:100%; max-height:92dvh; border-radius:20px 20px 0 0; padding:18px 14px max(18px,env(safe-area-inset-bottom)); } .panel { padding:18px 14px; } }
@media (max-width:520px) { .controls-grid { grid-template-columns:1fr; gap:10px; } .device { min-height:148px; padding-left:10px; padding-right:10px; } .smart-toggle { width:124px; } .toggle-thumb { width:55px; } .smart-toggle.is-off .toggle-thumb { transform:translateX(58px); } .smart-triple { width:164px; } .available-item { align-items:flex-start; flex-direction:column; } .available-item .btn { width:100%; } .login-page { padding:12px; } .login-card { padding:24px 18px; border-radius:20px; } }
@media (max-width:360px) { .controls-grid { grid-template-columns:1fr; } }

/* Controle percentual */
.percent-control { width:100%; max-width:190px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.percent-control.is-disabled { opacity:.45; pointer-events:none; }
.percent-value { font-size:15px; font-weight:900; color:var(--text); min-height:20px; }
.percent-line { width:100%; display:grid; grid-template-columns:30px 1fr 30px; gap:7px; align-items:center; }
.step-btn { width:30px; height:30px; border-radius:50%; border:1px solid #aeb5bf; background:linear-gradient(#fff,#dfe2e5); box-shadow:0 1px 4px rgba(0,0,0,.16); color:#414750; font-size:20px; font-weight:800; line-height:1; cursor:pointer; transition:.18s ease; }
.step-btn:hover { transform:translateY(-1px); background:#fff; }
.range-wrap { position:relative; height:36px; display:flex; align-items:center; }
.percent-range { width:100%; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; }
.percent-range::-webkit-slider-runnable-track { height:7px; border-radius:6px; background:linear-gradient(90deg,#39b96c 0,#39b96c var(--range-pct,0%),#dedfe2 var(--range-pct,0%),#dedfe2 100%); box-shadow:inset 0 1px 2px rgba(0,0,0,.12); }
.percent-range::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:linear-gradient(#fff,#e5e6e8); border:1px solid #b8bcc3; box-shadow:0 2px 5px rgba(0,0,0,.18); margin-top:-6.5px; }
.percent-range::-moz-range-track { height:7px; border-radius:6px; background:#dedfe2; }
.percent-range::-moz-range-progress { height:7px; border-radius:6px; background:#39b96c; }
.percent-range::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:linear-gradient(#fff,#e5e6e8); border:1px solid #b8bcc3; box-shadow:0 2px 5px rgba(0,0,0,.18); }
.range-bubble { position:absolute; top:-10px; transform:translateX(-50%); background:#202633; color:#fff; border-radius:7px; padding:2px 5px; font-size:9px; font-weight:800; opacity:0; pointer-events:none; transition:opacity .12s ease; }
.range-wrap:focus-within .range-bubble,.range-wrap:hover .range-bubble { opacity:1; }

/* Mapa de lâmpadas */
.map-page { min-height:100dvh; padding:0; background:#eef1f5; overflow:hidden; }
.map-sidebar { position:fixed; z-index:20; inset:0 auto 0 0; width:148px; padding:max(14px,env(safe-area-inset-top)) 10px max(14px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); background:rgba(245,247,251,.97); border-right:1px solid var(--line); backdrop-filter:blur(14px); display:flex; flex-direction:column; gap:18px; overflow-y:auto; }
.map-sidebar .eyebrow { font-size:9px; }
.map-sidebar h1 { font-size:19px; line-height:1.05; }
.map-side-actions { display:flex; flex:1; flex-direction:column; align-items:stretch; gap:8px; }
.map-side-actions .btn { width:100%; min-height:42px; padding:8px 7px; font-size:12px; text-align:center; }
.map-side-actions #logoutBtn { margin-top:auto; }
.map-toolbar-state { padding:4px; text-align:center; font-size:11px; font-weight:800; color:var(--accent); }
.floor-indicator { display:grid; gap:5px; }
.floor-card { position:relative; min-width:0; border:1px solid var(--line); border-radius:9px; background:#fff; }
.floor-card > [data-floor-select] { width:100%; min-width:0; border:0; border-radius:8px; padding:6px 25px 6px 5px; background:transparent; color:var(--muted); display:flex; flex-direction:column; align-items:center; cursor:pointer; }
.floor-card > [data-floor-select] span { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:800; }
.floor-card > [data-floor-select] small { font-size:8px; }
.floor-card.active { border-color:var(--accent); background:var(--accent-soft); }
.floor-card.active > [data-floor-select] { color:var(--accent); }
.floor-card > [data-floor-select]:disabled { cursor:default; opacity:1; padding-right:5px; }
.floor-delete { position:absolute; z-index:2; right:-6px; top:-6px; width:19px; height:19px; border:0; border-radius:50%; padding:0; background:var(--danger); color:#fff; font-size:14px; font-weight:900; line-height:19px; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.map-shell { width:calc(100% - 148px); height:100dvh; margin-left:148px; padding:10px; }
.map-stage { position:relative; width:100%; height:100%; border-radius:16px; background:#dfe3e9; overflow:hidden; box-shadow:inset 0 0 0 1px #ccd2dc; touch-action:none; }
.map-stage.editing { box-shadow:inset 0 0 0 2px var(--accent); }
.floor-layer { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; will-change:transform,opacity; }
.floorplan-img { max-width:100%; max-height:100%; width:auto; height:auto; display:block; user-select:none; -webkit-user-drag:none; }
.map-empty { width:min(560px,90%); text-align:center; background:white; border:1px dashed #b9c2d1; border-radius:18px; padding:36px 24px; }
.map-empty h2 { margin-bottom:8px; }
.map-item { position:absolute; z-index:4; width:var(--icon-size,48px); height:var(--icon-size,48px); transform:translate(-50%,-50%); touch-action:none; user-select:none; }
.map-item.editable { cursor:grab; }
.map-item.editable:active { cursor:grabbing; }
.map-lamp { position:absolute; inset:0; width:100%; height:100%; display:grid; place-items:center; border:0; background:transparent; box-shadow:none; color:#000; transition:filter .2s ease,transform .2s ease; cursor:pointer; padding:0; }
.map-lamp svg { width:88%; height:88%; fill:none; stroke:#000; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.map-lamp svg .icon-surface { fill:#f5f5f5; }
.map-item.is-on .map-lamp { filter:drop-shadow(0 0 5px rgba(255,240,72,.95)) drop-shadow(0 0 13px rgba(255,235,59,.72)); }
.map-item.is-on .map-lamp svg .icon-surface { fill:#fffec4; }
.map-item.is-off .map-lamp { color:#000; }
.map-item.is-offline .map-lamp { opacity:.42; filter:grayscale(.6); }
.map-tool { position:absolute; z-index:8; width:22px; height:22px; border-radius:50%; border:0; color:#fff; font-size:15px; line-height:22px; font-weight:900; text-align:center; padding:0; cursor:pointer; display:none; box-shadow:0 1px 4px rgba(0,0,0,.28); }
.map-item.editable .map-tool { display:block; }
.map-remove { right:-10px; top:-10px; background:#d93f4a; }
.map-rotate { left:-10px; top:-10px; background:#536171; font-size:16px; }
.map-smaller { left:-10px; bottom:-10px; background:#536171; }
.map-larger { right:-10px; bottom:-10px; background:#536171; }
.map-device-actions { position:absolute; z-index:7; top:calc(100% + 5px); left:50%; transform:translateX(-50%); display:flex; gap:4px; padding:3px; border-radius:12px; background:rgba(255,255,255,.82); box-shadow:0 2px 8px rgba(0,0,0,.14); }
.map-item.editable .map-device-actions { display:none; }
.map-device-actions button { width:27px; height:27px; border:1.5px solid #30343a; border-radius:8px; background:#f5f5f5; color:#111; padding:3px; display:grid; place-items:center; cursor:pointer; }
.map-device-actions button:hover { background:#fffec4; }
.map-device-actions svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.map-item.is-offline .map-device-actions { opacity:.42; pointer-events:none; }
.map-edit-note { position:absolute; left:14px; bottom:12px; z-index:7; padding:7px 10px; border-radius:9px; background:rgba(20,29,45,.78); color:#fff; font-size:11px; display:none; }
.map-stage.editing .map-edit-note { display:block; }
.map-modal-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
.icon-picker { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.icon-choice { position:relative; }
.icon-choice input { position:absolute; opacity:0; pointer-events:none; }
.icon-card { min-height:96px; border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; cursor:pointer; background:#fff; transition:.18s ease; font-size:11px; font-weight:800; }
.icon-card svg { width:38px; height:38px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.icon-card svg .icon-surface { fill:#f5f5f5; }
.icon-choice input:checked + .icon-card { border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,111,237,.12); color:var(--accent); background:#f7faff; }
.map-upload-input { display:none; }
.orientation-hint { display:none; position:fixed; z-index:100; inset:0; padding:24px; background:rgba(18,26,40,.94); color:#fff; place-items:center; text-align:center; }
.orientation-hint.dismissed { display:none !important; }
.orientation-card { width:min(360px,100%); }
.orientation-card h2 { margin-bottom:8px; }
.orientation-card p { color:#dbe2ee; line-height:1.5; }
.rotate-phone-icon { width:66px; height:96px; margin:0 auto 24px; border:4px solid #fff; border-radius:12px; display:grid; place-items:center; font-size:34px; animation:phone-turn 1.8s ease-in-out infinite; }
@keyframes phone-turn { 0%,20%{transform:rotate(0)} 70%,100%{transform:rotate(90deg)} }
.map-page .pwa-install-btn { left:auto; right:max(14px,env(safe-area-inset-right)); }
@media (max-width:900px){ .map-sidebar{width:112px;padding-left:max(7px,env(safe-area-inset-left));padding-right:7px;gap:10px}.map-sidebar h1{font-size:16px}.map-sidebar .eyebrow{display:none}.map-side-actions{gap:5px}.map-side-actions .btn{min-height:38px;font-size:10px;padding:6px 4px}.map-shell{width:calc(100% - 112px);margin-left:112px;padding:4px}.map-modal-grid{grid-template-columns:1fr}.icon-picker{grid-template-columns:repeat(3,1fr)}.icon-card{min-height:78px} }
@media (orientation:portrait) and (max-width:900px){ .orientation-hint{display:grid} }
@media (max-width:520px){ .icon-picker{grid-template-columns:repeat(2,1fr)} }