/* =====================================================================
   Logic UI — componentes do Logic Hub extraídos para reuso
   Depende de: ../tokens/logic-tokens.css (+ ../fonts/fonts.css)

   Todas as classes têm prefixo "lg-" para não colidir com Bootstrap
   (painel interno em Adianti) nem com outras bibliotecas.
   Convenção: bloco (.lg-btn) + modificador (.lg-btn--primary) + estado por
   atributo ARIA quando existir (aria-pressed, aria-selected, aria-current).

   Dois "sabores" convivem:
     PAINEL  (desktop, plataforma Logic)  → cantos 4–6px, densidade média
     APP     (mobile, morador/hóspede)    → vidro, cantos 14–22px, alvos ≥ 44px
   ===================================================================== */

/* ---------- Base ---------- */
.lg-root,.lg-root *{box-sizing:border-box}
.lg-root{margin:0;background:var(--lg-bg);color:var(--lg-ink);font-family:var(--lg-font);
  font-size:var(--lg-fs-body);line-height:var(--lg-lh-body);-webkit-font-smoothing:antialiased}
:where(.lg-root) :where(button,input,select,textarea){font-family:inherit;font-size:inherit;color:inherit} /* especificidade zero: não briga com os componentes */
:where(.lg-root) a:not([class]){color:var(--lg-accent)}  /* só links de texto; componentes com classe controlam a própria cor */
.lg-root :focus-visible{outline:2px solid var(--lg-focus);outline-offset:2px}
.lg-i{display:block;flex-shrink:0}
.lg-num{font-variant-numeric:tabular-nums}
.lg-mono{font-family:var(--lg-font-mono);font-size:var(--lg-fs-caption)}
.lg-muted{color:var(--lg-ink-muted)}
.lg-note{font-size:var(--lg-fs-caption);color:var(--lg-ink-muted)}
.lg-label{font-size:var(--lg-fs-label);font-weight:var(--lg-fw-semibold);letter-spacing:var(--lg-ls-label);
  text-transform:uppercase;color:var(--lg-ink-muted)}
.lg-hidden{display:none!important}

/* ---------- Layout ---------- */
.lg-row{display:flex;gap:var(--lg-space-4);align-items:center;flex-wrap:wrap}
.lg-col{display:flex;flex-direction:column;gap:var(--lg-space-5)}
.lg-grow{flex:1 1 auto;min-width:0}
.lg-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--lg-space-7)}
.lg-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--lg-space-6)}
.lg-g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--lg-space-5)}
.lg-g21{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--lg-space-7)}
@media (max-width:1100px){.lg-g4{grid-template-columns:repeat(2,minmax(0,1fr))}.lg-g3,.lg-g21{grid-template-columns:1fr}}
@media (max-width:860px){.lg-g2{grid-template-columns:1fr}}

/* ---------- PAINEL: shell com barra lateral ---------- */
.lg-shell{display:flex;min-height:100vh}
.lg-side{width:var(--lg-sidebar);flex-shrink:0;position:sticky;top:0;height:100vh;overflow:auto;
  padding:22px 14px;border-right:1px solid var(--lg-line);display:flex;flex-direction:column;gap:16px;
  background:var(--lg-bg);z-index:20}
.lg-brand{display:flex;align-items:center;gap:10px;padding:0 10px}
.lg-brand img,.lg-brand svg{width:120px;height:auto}
.lg-word{font-weight:var(--lg-fw-display);font-size:28px;letter-spacing:.32em;line-height:1}  /* "LOGIC" tipográfico */
.lg-hubtag{font-size:var(--lg-fs-micro);font-weight:var(--lg-fw-semibold);letter-spacing:.2em;color:var(--lg-accent);
  border:1px solid var(--lg-accent-border);padding:2px 6px;border-radius:var(--lg-r-xs)}               /* selo "HUB" */
.lg-context{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:var(--lg-surface);
  border:1px solid var(--lg-line);border-radius:var(--lg-r-sm);text-align:left;cursor:pointer}  /* seletor de instalação/obra */
.lg-context small{display:block;font-size:var(--lg-fs-micro);letter-spacing:var(--lg-ls-label);color:var(--lg-ink-muted);
  font-weight:var(--lg-fw-semibold);text-transform:uppercase}
.lg-context select{all:unset;cursor:pointer;width:100%;font-size:var(--lg-fs-ui)}
.lg-nav-group{display:flex;flex-direction:column;gap:2px}
.lg-nav-group h6{margin:0 0 4px;padding:0 12px;font-size:var(--lg-fs-micro);font-weight:var(--lg-fw-semibold);
  letter-spacing:.16em;text-transform:uppercase;color:var(--lg-ink-muted)}
.lg-nav{display:flex;align-items:center;gap:12px;height:var(--lg-ctl);padding:0 12px;border-radius:var(--lg-r-sm);
  text-decoration:none;font-size:var(--lg-fs-ui);color:var(--lg-ink-soft)}
.lg-nav:hover{background:rgba(255,255,255,.05);color:var(--lg-ink)}
.lg-nav[aria-current="page"]{background:var(--lg-accent-soft);color:var(--lg-accent);font-weight:var(--lg-fw-medium)}
.lg-nav .lg-badge{margin-left:auto}
.lg-me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px;border-top:1px solid var(--lg-line)}
.lg-avatar{width:34px;height:34px;border-radius:50%;background:var(--lg-surface-raised);color:var(--lg-accent);
  display:inline-flex;align-items:center;justify-content:center;font-size:var(--lg-fs-small);font-weight:var(--lg-fw-semibold);flex-shrink:0}
.lg-main{flex:1;min-width:0;padding:34px 40px 64px;display:flex;flex-direction:column;gap:24px;max-width:var(--lg-content-max)}
.lg-mtop{display:none}
@media (max-width:860px){
  .lg-shell{flex-direction:column}
  .lg-side{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform var(--lg-dur)}
  .lg-shell.is-menu-open .lg-side{transform:none;box-shadow:var(--lg-shadow-drawer)}
  .lg-mtop{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--lg-line);
    position:sticky;top:0;background:var(--lg-bg);z-index:10}
  .lg-main{padding:20px var(--lg-gutter-mobile) 48px}
}

/* Cabeçalho de página */
.lg-hdr{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.lg-hdr h1{margin:0;font-size:var(--lg-fs-h1);font-weight:var(--lg-fw-light);line-height:var(--lg-lh-h1);text-wrap:balance}
.lg-hdr p{margin:6px 0 0;color:var(--lg-ink-muted);font-size:var(--lg-fs-ui)}
.lg-crumb{font-size:var(--lg-fs-label);letter-spacing:var(--lg-ls-label);text-transform:uppercase;color:var(--lg-ink-muted);
  font-weight:var(--lg-fw-semibold);margin-bottom:6px}
.lg-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@media (max-width:860px){.lg-hdr h1{font-size:28px}}

/* ---------- Botões ---------- */
.lg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--lg-ctl);padding:0 14px;
  border-radius:var(--lg-r-sm);font-size:var(--lg-fs-ui);font-weight:var(--lg-fw-medium);letter-spacing:.01em;cursor:pointer;
  white-space:nowrap;text-decoration:none;border:1px solid var(--lg-line-strong);background:transparent;color:var(--lg-ink);
  transition:background var(--lg-dur-fast),border-color var(--lg-dur-fast)}
.lg-btn:hover{background:rgba(255,255,255,.06)}
[data-theme="claro"] .lg-btn{background:#fff}
[data-theme="claro"] .lg-btn:hover{background:var(--lg-bg)}
.lg-btn--primary{background:var(--lg-accent);border-color:var(--lg-accent);color:var(--lg-ink-on-accent)}
.lg-btn--primary:hover,[data-theme="claro"] .lg-btn--primary:hover{background:var(--lg-accent-hover);border-color:var(--lg-accent-hover)}
[data-theme="claro"] .lg-btn--primary{background:var(--lg-accent)}
.lg-btn--ghost{border-color:transparent;color:var(--lg-citrico-claro)}
.lg-btn--danger{color:var(--lg-erro);border-color:var(--lg-erro-border)}
.lg-btn--danger:hover{background:var(--lg-erro-bg)}
.lg-btn--raised{background:var(--lg-surface-raised);border-color:var(--lg-line)}
.lg-btn--sm{height:var(--lg-ctl-sm);padding:0 10px;font-size:var(--lg-fs-small)}
.lg-btn--lg{height:var(--lg-ctl-lg);font-size:var(--lg-fs-body);padding:0 16px}
.lg-btn--icon{width:var(--lg-ctl);padding:0}
.lg-btn--block{width:100%}
.lg-btn[disabled],.lg-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
/* App: botões com canto generoso */
.lg-app .lg-btn{height:var(--lg-ctl-lg);border-radius:var(--lg-r-app);font-size:var(--lg-fs-body)}

/* ---------- Card, KPI ---------- */
.lg-card{background:var(--lg-surface);border:1px solid var(--lg-line);border-radius:var(--lg-r-md);padding:20px}
.lg-card__title{margin:0 0 14px;font-size:var(--lg-fs-h3);font-weight:var(--lg-fw-medium)}
.lg-card__title small{font-weight:var(--lg-fw-regular);color:var(--lg-ink-muted);font-size:var(--lg-fs-small);margin-left:8px}
[data-theme="claro"] .lg-card{border-radius:var(--lg-r-lg)}
.lg-kpi{background:var(--lg-surface);border:1px solid var(--lg-line);border-radius:var(--lg-r-md);padding:16px 18px;
  display:flex;flex-direction:column;gap:6px;text-align:left;color:inherit}
.lg-kpi b{font-size:var(--lg-fs-kpi);font-weight:var(--lg-fw-light);line-height:1;font-variant-numeric:tabular-nums}
.lg-kpi>span{font-size:var(--lg-fs-small);color:var(--lg-ink-muted)}
button.lg-kpi{cursor:pointer;font:inherit}

/* ---------- Pílula de estado, tag, badge, ponto ---------- */
/* Pílula = ESTADO (online, validado, offline). Sempre com texto; a cor nunca é a única pista. */
.lg-pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:var(--lg-r-pill-rect);
  border:1px solid currentColor;font-size:var(--lg-fs-micro);font-weight:var(--lg-fw-semibold);letter-spacing:var(--lg-ls-micro);
  text-transform:uppercase;white-space:nowrap;color:var(--lg-neutro)}
.lg-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.lg-pill--ok{color:var(--lg-ok)}
.lg-pill--aviso{color:var(--lg-aviso)}
.lg-pill--erro{color:var(--lg-erro)}
.lg-pill--info{color:var(--lg-info)}
.lg-pill--off{color:var(--lg-ink-muted)}
.lg-pill--live{background:var(--lg-citrico);border-color:var(--lg-citrico);color:var(--lg-navy)}   /* "ao vivo", "ativo agora" */
.lg-app .lg-pill{height:24px;padding:0 10px;border-radius:12px}
/* Tag = ATRIBUTO (driver, perfil, codec). Neutra. */
.lg-tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:var(--lg-r-pill-rect);
  background:rgba(255,255,255,.06);border:1px solid var(--lg-line);font-size:var(--lg-fs-caption);white-space:nowrap}
[data-theme="claro"] .lg-tag{background:var(--lg-bg)}
.lg-tag--accent{background:var(--lg-accent-soft);border-color:rgba(232,236,151,.3);color:var(--lg-accent)}
.lg-badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--lg-erro);color:var(--lg-azul-profundo);
  font-size:var(--lg-fs-label);font-weight:var(--lg-fw-semibold);display:inline-flex;align-items:center;justify-content:center}
.lg-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;background:var(--lg-ink-muted)}
.lg-dot--ok{background:var(--lg-ok)}.lg-dot--aviso{background:var(--lg-aviso)}.lg-dot--erro{background:var(--lg-erro)}.lg-dot--info{background:var(--lg-info)}

/* ---------- Alerta ---------- */
.lg-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--lg-r-sm);font-size:var(--lg-fs-ui)}
.lg-alert .lg-i{margin-top:1px}
.lg-alert--aviso{background:var(--lg-aviso-bg);border:1px solid var(--lg-aviso-border);color:var(--lg-aviso)}
.lg-alert--erro{background:var(--lg-erro-bg);border:1px solid var(--lg-erro-border);color:var(--lg-erro)}
.lg-alert--info{background:var(--lg-info-bg);border:1px solid var(--lg-info-border);color:var(--lg-info)}
.lg-alert--ok{background:var(--lg-ok-bg);border:1px solid var(--lg-ok-border);color:var(--lg-ok)}

/* ---------- Barra de progresso ---------- */
.lg-bar{height:4px;border-radius:2px;background:var(--lg-track);overflow:hidden}
.lg-bar>i{display:block;height:100%;background:var(--lg-accent);border-radius:2px}
.lg-bar--aviso>i{background:var(--lg-aviso)}
.lg-bar--erro>i{background:var(--lg-erro)}
.lg-app .lg-bar{height:6px;border-radius:3px}

/* ---------- Abas ---------- */
.lg-tabs{display:flex;gap:4px;border-bottom:1px solid var(--lg-line);flex-wrap:wrap}
.lg-tab{height:40px;padding:0 14px;border:none;background:none;cursor:pointer;color:var(--lg-ink-muted);font-size:var(--lg-fs-ui);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.lg-tab[aria-selected="true"]{color:var(--lg-accent);border-bottom-color:var(--lg-accent)}
.lg-tab[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- Tabela ---------- */
.lg-table-wrap{overflow-x:auto;border:1px solid var(--lg-line);border-radius:var(--lg-r-md);background:var(--lg-surface)}
.lg-table{width:100%;border-collapse:collapse;font-size:var(--lg-fs-ui)}
.lg-table th{text-align:left;font-size:var(--lg-fs-micro);font-weight:var(--lg-fw-semibold);letter-spacing:var(--lg-ls-label);
  text-transform:uppercase;color:var(--lg-ink-muted);padding:12px 14px;border-bottom:1px solid var(--lg-line);white-space:nowrap}
.lg-table td{padding:11px 14px;border-bottom:1px solid var(--lg-line);vertical-align:middle}
.lg-table tr:last-child td{border-bottom:none}
.lg-table tr.is-clickable{cursor:pointer}
.lg-table tr.is-clickable:hover td{background:rgba(255,255,255,.03)}
.lg-table .lg-sub,.lg-sub{display:block;font-size:var(--lg-fs-caption);color:var(--lg-ink-muted)}
.lg-table td.lg-right,.lg-table th.lg-right{text-align:right}

/* ---------- Formulário ---------- */
.lg-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.lg-field>label,.lg-field>legend{font-size:var(--lg-fs-small);font-weight:var(--lg-fw-medium)}
.lg-field .lg-hint{font-size:var(--lg-fs-caption);color:var(--lg-ink-muted)}
.lg-field .lg-error{font-size:var(--lg-fs-caption);color:var(--lg-erro)}
.lg-input{height:var(--lg-ctl);padding:0 10px;background:var(--lg-surface-sunken);border:1px solid var(--lg-line-strong);
  border-radius:var(--lg-r-sm);color:var(--lg-ink);font-size:var(--lg-fs-ui);width:100%}
.lg-input:focus{border-color:var(--lg-focus);outline:none}
.lg-input::placeholder{color:var(--lg-ink-placeholder)}
.lg-input[readonly]{color:var(--lg-ink-soft);font-family:var(--lg-font-mono);font-size:var(--lg-fs-caption)}
.lg-input[aria-invalid="true"]{border-color:var(--lg-erro)}
textarea.lg-input{height:auto;padding:12px;line-height:1.45;resize:vertical}
select.lg-input{cursor:pointer}
select.lg-input option{background:var(--lg-surface);color:var(--lg-ink)}
.lg-input--touch{height:var(--lg-ctl-touch);font-size:var(--lg-fs-body);padding:0 12px}
[data-theme="claro"] .lg-input{background:#fff}
.lg-search{position:relative;flex:1 1 240px;max-width:360px}
.lg-search .lg-i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--lg-ink-muted);pointer-events:none}
.lg-search .lg-input{padding-left:34px}
input[type=range].lg-range{width:100%;accent-color:var(--lg-accent);height:30px;margin:0}
.lg-check{display:inline-flex;align-items:center;gap:10px;min-height:var(--lg-ctl-touch);cursor:pointer;font-size:var(--lg-fs-ui)}
.lg-check input{width:18px;height:18px;accent-color:var(--lg-accent);margin:0}
.lg-radio{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:var(--lg-r-sm);
  border:1px solid var(--lg-line-strong);cursor:pointer;font-size:var(--lg-fs-ui)}
.lg-radio input{accent-color:var(--lg-accent);margin:0}
.lg-radio:has(input:checked){border-color:var(--lg-accent);background:var(--lg-accent-soft);color:var(--lg-accent)}

/* Chip de filtro (toggle) */
.lg-chips{display:flex;gap:6px;flex-wrap:wrap}
.lg-chip{height:var(--lg-ctl-sm);padding:0 12px;border-radius:16px;border:1px solid var(--lg-line-strong);background:transparent;
  cursor:pointer;font-size:var(--lg-fs-small);color:var(--lg-ink-soft)}
.lg-chip[aria-pressed="true"]{background:var(--lg-accent-soft);border-color:var(--lg-accent-border);color:var(--lg-accent)}

/* Interruptor (switch) — use <button role="switch" aria-checked> ou aria-pressed */
.lg-switch{position:relative;width:42px;height:24px;border-radius:12px;border:none;background:var(--lg-switch-off);
  cursor:pointer;flex-shrink:0;padding:0;transition:background var(--lg-dur-fast)}
.lg-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  transition:left var(--lg-dur-fast),background var(--lg-dur-fast)}
.lg-switch[aria-pressed="true"],.lg-switch[aria-checked="true"]{background:var(--lg-accent)}
.lg-switch[aria-pressed="true"]::after,.lg-switch[aria-checked="true"]::after{left:21px;background:var(--lg-navy)}
[data-theme="claro"] .lg-switch::after{box-shadow:0 1px 3px rgba(0,0,0,.25)}
[data-theme="claro"] .lg-switch[aria-pressed="true"]::after,[data-theme="claro"] .lg-switch[aria-checked="true"]::after{background:#fff}
.lg-switch--lg,.lg-app .lg-switch{width:52px;height:30px;border-radius:15px}
.lg-switch--lg::after,.lg-app .lg-switch::after{width:24px;height:24px}
.lg-switch--lg[aria-pressed="true"]::after,.lg-switch--lg[aria-checked="true"]::after,
.lg-app .lg-switch[aria-pressed="true"]::after,.lg-app .lg-switch[aria-checked="true"]::after{left:25px}

/* Controle segmentado */
.lg-seg{display:inline-flex;border:1px solid var(--lg-line-strong);border-radius:var(--lg-r-sm);overflow:hidden}
.lg-seg button{height:36px;min-width:52px;padding:0 14px;background:none;border:none;color:var(--lg-ink-soft);cursor:pointer;font-size:var(--lg-fs-ui)}
.lg-seg button[aria-pressed="true"]{background:var(--lg-accent);color:var(--lg-ink-on-accent);font-weight:var(--lg-fw-medium)}

/* ---------- Drawer lateral e lista chave-valor ---------- */
.lg-scrim{position:fixed;inset:0;background:var(--lg-scrim);z-index:40;display:none}
.lg-drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--lg-bg);border-left:1px solid var(--lg-line-strong);
  z-index:41;transform:translateX(100%);transition:transform var(--lg-dur);overflow:auto;padding:26px 26px 40px;display:flex;flex-direction:column;gap:18px}
.is-drawer-open .lg-scrim{display:block}
.is-drawer-open .lg-drawer{transform:none}
.lg-drawer h2{margin:0;font-weight:var(--lg-fw-light);font-size:var(--lg-fs-h2)}
.lg-kv{display:grid;grid-template-columns:140px 1fr;gap:8px 14px;font-size:var(--lg-fs-ui);margin:0}
.lg-kv dt{color:var(--lg-ink-muted)}
.lg-kv dd{margin:0}
@media (max-width:860px){.lg-kv{grid-template-columns:1fr}}

/* ---------- Câmera (tile) ---------- */
.lg-cam{position:relative;aspect-ratio:16/9;border-radius:var(--lg-r-md);overflow:hidden;border:1px solid var(--lg-line);
  background:#06121d;padding:0;text-align:left;color:var(--lg-branco)}
.lg-cam>video,.lg-cam>img,.lg-cam>.lg-cam__feed{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lg-cam__ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:10px 12px;
  background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 30%,transparent 70%,rgba(0,0,0,.55))}
.lg-cam__name{font-size:var(--lg-fs-ui);font-weight:var(--lg-fw-medium)}
.lg-cam__ts{font-family:var(--lg-font-mono);font-size:var(--lg-fs-micro);color:var(--lg-ink-soft)}
.lg-cam.is-offline>video,.lg-cam.is-offline>img,.lg-cam.is-offline>.lg-cam__feed{opacity:.25}
.lg-app .lg-cam{border-radius:var(--lg-r-app);aspect-ratio:16/10;cursor:pointer}
.lg-app .lg-cam--wide{grid-column:1/-1;aspect-ratio:16/9}

/* ---------- Etapas (stepper de comissionamento/obra) ---------- */
.lg-steps{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.lg-step{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--lg-line)}
.lg-step:last-child{border-bottom:none}
.lg-step__n{width:28px;height:28px;border-radius:50%;border:1px solid var(--lg-line-strong);display:inline-flex;align-items:center;
  justify-content:center;font-size:var(--lg-fs-small);flex-shrink:0}
.lg-step.is-done .lg-step__n{background:var(--lg-ok);border-color:var(--lg-ok);color:var(--lg-azul-profundo)}
.lg-step.is-current .lg-step__n{background:var(--lg-citrico);border-color:var(--lg-citrico);color:var(--lg-navy)}
.lg-step.is-blocked .lg-step__n{border-color:var(--lg-erro);color:var(--lg-erro)}

/* ---------- Árvore de condição (editor de regra) ---------- */
.lg-tree{border-left:2px solid var(--lg-line-strong);margin-left:6px;padding-left:16px;display:flex;flex-direction:column;gap:8px}
.lg-cond{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;background:var(--lg-surface-sunken);
  border:1px solid var(--lg-line);border-radius:var(--lg-r-sm);font-size:var(--lg-fs-ui)}
.lg-op{font-size:var(--lg-fs-micro);font-weight:var(--lg-fw-semibold);letter-spacing:var(--lg-ls-label);color:var(--lg-accent);
  border:1px solid var(--lg-accent-border);padding:2px 6px;border-radius:var(--lg-r-xs)}

/* ---------- Conversa (Jarvis) ---------- */
.lg-msgs{display:flex;flex-direction:column;gap:10px}
.lg-msg{max-width:78%;padding:10px 12px;border-radius:var(--lg-r-lg);font-size:var(--lg-fs-ui);background:var(--lg-surface-raised);align-self:flex-start}
.lg-msg--me{align-self:flex-end;background:rgba(232,236,151,.14);border:1px solid rgba(232,236,151,.25)}
.lg-msg__meta{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.lg-msg small{display:block;font-size:var(--lg-fs-label);opacity:.7;margin-top:4px}
.lg-app .lg-msg{max-width:82%;padding:10px 13px;border-radius:16px;font-size:var(--lg-fs-body);background:var(--lg-glass);
  border:1px solid var(--lg-line);border-bottom-left-radius:4px}
.lg-app .lg-msg--me{background:var(--lg-citrico);color:var(--lg-navy);border:none;border-radius:16px;border-bottom-right-radius:4px}

/* ---------- Toast ---------- */
.lg-toast{position:fixed;left:50%;top:18px;transform:translate(-50%,calc(-100% - 40px));visibility:hidden;
  transition:transform var(--lg-dur),visibility var(--lg-dur);z-index:60;padding:12px 16px;border-radius:var(--lg-r-app);
  background:var(--lg-citrico);color:var(--lg-navy);font-weight:var(--lg-fw-medium);max-width:90%}
.lg-toast.is-visible{transform:translate(-50%,0);visibility:visible}

/* =====================================================================
   APP (mobile) — morador, proprietário, hóspede
   ===================================================================== */
.lg-app-host{background:var(--lg-fundo-app-externo)}
.lg-app{position:relative;max-width:var(--lg-app-max);margin:0 auto;min-height:100vh;overflow:hidden;background:var(--lg-gradiente-app);color:var(--lg-ink)}
@media (min-width:600px){.lg-app-host{padding:24px 0}.lg-app{min-height:880px;border-radius:28px;border:1px solid var(--lg-line-strong);box-shadow:var(--lg-shadow-phone)}}
.lg-app-screen{padding:20px 16px 110px;display:flex;flex-direction:column;gap:18px}
.lg-app-top{display:flex;align-items:center;gap:12px}
.lg-app-top h1{margin:0;font-size:var(--lg-fs-h1-app);font-weight:var(--lg-fw-light);line-height:var(--lg-lh-h1-app)}
.lg-app-top p{margin:2px 0 0;color:var(--lg-ink-muted);font-size:var(--lg-fs-ui)}
.lg-section{display:flex;flex-direction:column;gap:10px}
.lg-section__head{display:flex;align-items:baseline;justify-content:space-between}
.lg-section__head a{color:var(--lg-citrico);font-size:var(--lg-fs-small);text-decoration:none}

/* Botão redondo de ícone (voltar, sino, +/-) */
.lg-iconbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--lg-line-strong);background:var(--lg-glass-2);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;position:relative;flex-shrink:0;color:inherit}
.lg-iconbtn__dot{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--lg-erro)}
.lg-iconbtn--accent{background:var(--lg-citrico);color:var(--lg-navy);border:none}

/* Vidro */
.lg-glass{background:var(--lg-glass);border:1px solid var(--lg-line);border-radius:var(--lg-r-app-card);
  backdrop-filter:blur(var(--lg-blur-glass));-webkit-backdrop-filter:blur(var(--lg-blur-glass))}
.lg-glass--pad{padding:16px}

/* Modo da casa (segmentado grande) */
.lg-modes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:5px}
.lg-mode{height:40px;border-radius:var(--lg-r-app-ctl);border:none;background:transparent;cursor:pointer;color:var(--lg-ink-soft);font-size:var(--lg-fs-ui)}
.lg-mode[aria-pressed="true"]{background:var(--lg-citrico);color:var(--lg-navy);font-weight:var(--lg-fw-semibold)}

/* Chips de estado (rolagem horizontal) */
.lg-state-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.lg-state-chips::-webkit-scrollbar{display:none}
.lg-state-chip{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--lg-r-app);background:var(--lg-glass-2);
  border:1px solid var(--lg-line);font-size:var(--lg-fs-ui);white-space:nowrap;cursor:pointer;color:inherit;text-decoration:none}
.lg-state-chip small{display:block;font-size:var(--lg-fs-label);color:var(--lg-ink-muted)}
.lg-state-chip.is-on{border-color:var(--lg-accent-border);background:var(--lg-accent-soft)}

/* Cena */
.lg-scenes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.lg-scene{display:flex;align-items:center;gap:10px;padding:14px;border-radius:var(--lg-r-app);border:1px solid var(--lg-line);
  background:var(--lg-glass-2);cursor:pointer;text-align:left;min-height:60px;color:inherit}
.lg-scene.is-running{background:var(--lg-citrico);color:var(--lg-navy);border-color:var(--lg-citrico)}

/* Ambiente */
.lg-rooms{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.lg-room{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--lg-r-app-card);text-decoration:none;color:inherit}
.lg-room b{font-weight:var(--lg-fw-medium);font-size:var(--lg-fs-h3)}
.lg-room__state{font-size:var(--lg-fs-small);color:var(--lg-ink-muted)}
.lg-room__icons{display:flex;gap:6px}
.lg-dotc{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08)}
.lg-dotc.is-on{background:var(--lg-citrico);color:var(--lg-navy)}

/* Linha de dispositivo e item de lista */
.lg-dev,.lg-li{display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid var(--lg-line);text-decoration:none;color:inherit}
.lg-li{padding:14px 16px}
.lg-dev:last-child,.lg-li:last-child{border-bottom:none}
.lg-dev b,.lg-li b{font-weight:var(--lg-fw-medium)}

/* Ação grande (portão, porta) */
.lg-big-action{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--lg-r-app-card);cursor:pointer;width:100%;
  text-align:left;border:1px solid var(--lg-line);background:var(--lg-glass);color:inherit}
.lg-big-action__icon{width:52px;height:52px;border-radius:50%;background:rgba(232,236,151,.12);color:var(--lg-citrico);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lg-big-action b{font-weight:var(--lg-fw-medium);font-size:var(--lg-fs-h3)}

/* Setpoint (ar-condicionado) */
.lg-setpoint{display:flex;align-items:center;justify-content:center;gap:24px}
.lg-setpoint b{font-size:var(--lg-fs-display);font-weight:var(--lg-fw-display);line-height:1;font-variant-numeric:tabular-nums}
.lg-seg-app{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.lg-seg-app button{height:40px;border-radius:10px;border:1px solid var(--lg-line-strong);background:transparent;cursor:pointer;font-size:var(--lg-fs-small);color:inherit}
.lg-seg-app button[aria-pressed="true"]{border-color:var(--lg-citrico);color:var(--lg-citrico);background:rgba(232,236,151,.08)}
/* Evidência: comando enviado vs. medido (dispositivo sem retorno de estado) */
.lg-evidence{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lg-evidence>div{padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.18)}
.lg-evidence small{display:block;font-size:var(--lg-fs-label);color:var(--lg-ink-muted)}

/* Gráfico de barras simples (energia) */
.lg-bars{display:flex;align-items:flex-end;gap:6px;height:120px;padding-top:10px}
.lg-bars i{flex:1;background:rgba(232,236,151,.35);border-radius:4px 4px 0 0}
.lg-bars i.is-now{background:var(--lg-citrico)}

/* Barra de abas inferior */
.lg-tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:12px;width:calc(min(430px,100%) - 24px);display:grid;
  grid-template-columns:repeat(5,1fr);padding:6px;border-radius:var(--lg-r-sheet);z-index:30;background:rgba(11,28,43,.82);
  border:1px solid var(--lg-line-strong);backdrop-filter:blur(var(--lg-blur-bar));-webkit-backdrop-filter:blur(var(--lg-blur-bar))}
@media (min-width:600px){.lg-tabbar{bottom:36px}}
.lg-tabbar__item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0;border-radius:16px;text-decoration:none;
  color:var(--lg-ink-muted);font-size:var(--lg-fs-label);font-weight:var(--lg-fw-medium);letter-spacing:.04em}
.lg-tabbar__item[aria-current="page"]{color:var(--lg-citrico);background:rgba(232,236,151,.1)}

/* Bottom sheet / modal */
.lg-modal{position:fixed;inset:0;z-index:50;display:none;align-items:flex-end;justify-content:center;background:rgba(3,10,16,.6)}
.lg-modal.is-open{display:flex}
.lg-sheet{width:min(430px,100%);padding:22px 20px calc(30px + env(safe-area-inset-bottom,0px));border-radius:var(--lg-r-sheet) var(--lg-r-sheet) 0 0;
  background:var(--lg-sheet);border:1px solid var(--lg-line-strong);display:flex;flex-direction:column;gap:16px;color:var(--lg-ink)}

/* PIN */
.lg-pin-dots{display:flex;justify-content:center;gap:14px}
.lg-pin-dots span{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--lg-ink-soft)}
.lg-pin-dots span.is-filled{background:var(--lg-citrico);border-color:var(--lg-citrico)}
.lg-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lg-keypad button{height:56px;border-radius:var(--lg-r-app);border:1px solid var(--lg-line);background:var(--lg-glass-2);
  font-size:24px;font-weight:var(--lg-fw-light);cursor:pointer;color:inherit}

/* Composer do chat */
.lg-composer{position:sticky;bottom:86px;display:flex;gap:8px;padding:8px;border-radius:24px}
.lg-composer input{flex:1;height:44px;border:none;background:transparent;padding:0 10px;outline:none;color:inherit}
.lg-suggestions{display:flex;gap:6px;flex-wrap:wrap}
.lg-suggestion{height:34px;padding:0 12px;border-radius:17px;border:1px solid var(--lg-line-strong);background:transparent;cursor:pointer;
  font-size:var(--lg-fs-small);color:var(--lg-ink-soft)}

/* =====================================================================
   PORTAL CLARO (hóspede) — usar dentro de [data-theme="claro"]
   ===================================================================== */
.lg-portal{min-height:100vh;background:var(--lg-bg);color:var(--lg-ink);display:flex;justify-content:center}
.lg-portal__wrap{width:100%;max-width:440px;display:flex;flex-direction:column;background:var(--lg-bg)}
@media (min-width:600px){.lg-portal{background:#e6e9e2;padding-block:24px}.lg-portal__wrap{border-radius:14px;overflow:hidden;box-shadow:var(--lg-shadow-portal)}}
.lg-portal__head{background:var(--lg-navy);color:var(--lg-branco);padding:20px 16px 24px;display:flex;flex-direction:column;gap:14px}
.lg-portal__head .lg-hi{font-size:var(--lg-fs-body);color:var(--lg-citrico-claro)}
.lg-portal__head .lg-name{font-size:var(--lg-fs-h1);font-weight:var(--lg-fw-light);line-height:1.1}
.lg-portal__main{padding:16px;display:flex;flex-direction:column;gap:12px}
.lg-portal-icon{width:40px;height:40px;border-radius:50%;background:var(--lg-navy);color:var(--lg-citrico);display:inline-flex;
  align-items:center;justify-content:center;flex-shrink:0}
.lg-digits{display:flex;justify-content:space-between;gap:6px}
.lg-digits span{flex:1;max-width:52px;height:56px;border-radius:var(--lg-r-md);background:var(--lg-bg);border:1px solid var(--lg-line);
  display:inline-flex;align-items:center;justify-content:center;font-size:32px;color:var(--lg-ink);font-variant-numeric:tabular-nums}
[data-theme="claro"] .lg-btn--lg{border-radius:var(--lg-r-md)}