/* Linha de Balanço - estilos da view, escopados em .lob-root e com tokens próprios (--lob-*) para não colidir com a página hospedeira (Torre ou standalone). Claro/escuro seguem o data-tema do do host. A Torre sobrescreve --lob-accent para o indigo da marca (ver app/index.html). */ .lob-root { --lob-bg:#ffffff; --lob-bg-soft:#f7f8fa; --lob-card:#ffffff; --lob-ink:#0e1116; --lob-text:#3a424e; --lob-muted:#6b7480; --lob-line:#e7e9ee; --lob-line-strong:#d7dbe2; --lob-accent:#243ee0; --lob-accent-ink:#ffffff; --lob-accent-soft:#eef1ff; --lob-bad:#c0392b; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:15px; line-height:1.5; color:var(--lob-text); } [data-tema="dark"] .lob-root { --lob-bg:#0b0c0f; --lob-bg-soft:#101218; --lob-card:#13151b; --lob-ink:#f1f3f8; --lob-text:#bcc4cf; --lob-muted:#828b99; --lob-line:#22252d; --lob-line-strong:#2f333d; --lob-accent:#7d97ff; --lob-accent-ink:#0a0e1f; --lob-accent-soft:#161b2b; --lob-bad:#f87171; } .lob-root * { box-sizing:border-box; } /* Honrar o atributo [hidden] mesmo em elementos com display de classe (ex.: o seletor de Prédio .lob-grp, escondido quando há um único prédio na Torre). */ .lob-root [hidden] { display:none !important; } /* Layout: fill (standalone) ocupa a altura do pai; sem fill (aba) usa altura fixa. */ .lob-root.lob-fill { flex:1; min-height:0; display:flex; flex-direction:column; } .lob-root .lob-main { display:flex; flex-direction:column; height:78vh; min-height:420px; } .lob-root.lob-fill .lob-main { height:auto; flex:1; min-height:0; } .lob-root .view { flex:1; min-height:0; display:none; } .lob-root .view.on { display:flex; flex-direction:column; } /* Embutido na Torre (não-fill): a área de views acompanha o conteúdo, sem reservar 78vh, então grade curta não deixa espaço vazio embaixo. Grade alta rola dentro do wrap (cabeçalho de dia continua fixo), limitada à altura da viewport. */ .lob-root:not(.lob-fill) .lob-main { height:auto; min-height:0; } .lob-root:not(.lob-fill) .view { flex:none; } .lob-root:not(.lob-fill) .grade-wrap, .lob-root:not(.lob-fill) .classica-wrap, .lob-root:not(.lob-fill) .barras-wrap { flex:none; max-height:calc(100vh - 210px); } /* Botões. */ .lob-root .btn { font:inherit; font-size:14px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:9px; border:1px solid var(--lob-line-strong); background:var(--lob-card); color:var(--lob-ink); transition:.15s; white-space:nowrap; } .lob-root .btn:hover { border-color:var(--lob-muted); } .lob-root .btn.primary { background:var(--lob-accent); border-color:var(--lob-accent); color:var(--lob-accent-ink); } .lob-root .btn.primary:hover { filter:brightness(.94); } .lob-root .btn svg { width:16px; height:16px; } .lob-root .icon-btn { width:36px; height:36px; border:1px solid var(--lob-line); background:var(--lob-card); border-radius:9px; cursor:pointer; color:var(--lob-text); display:grid; place-items:center; padding:0; } .lob-root .icon-btn:hover { border-color:var(--lob-line-strong); color:var(--lob-ink); } .lob-root .icon-btn svg { width:18px; height:18px; } /* Barra de controle. */ .lob-root .lob-control { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--lob-line); background:var(--lob-bg-soft); } .lob-root .lob-grp { display:flex; align-items:center; gap:8px; } .lob-root .lob-lbl { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--lob-muted); } .lob-root select, .lob-root input[type="date"] { font:inherit; font-size:14px; color:var(--lob-ink); background:var(--lob-card); border:1px solid var(--lob-line-strong); border-radius:8px; padding:7px 10px; } .lob-root select:focus, .lob-root input:focus { outline:none; border-color:var(--lob-accent); } /* Zoom (+/-). */ .lob-root .zoomctl { display:inline-flex; align-items:center; gap:2px; border:1px solid var(--lob-line-strong); border-radius:9px; background:var(--lob-card); padding:2px; } .lob-root .zoomctl .zb { width:28px; height:28px; border:none; background:transparent; color:var(--lob-ink); font-size:18px; line-height:1; cursor:pointer; border-radius:7px; padding:0; } .lob-root .zoomctl .zb:hover { background:var(--lob-bg-soft); } .lob-root .zoomctl #lob-zoom-lvl { min-width:44px; text-align:center; font-size:12.5px; font-weight:600; color:var(--lob-muted); font-variant-numeric:tabular-nums; } /* Segmented control. */ .lob-root .seg { display:inline-flex; border:1px solid var(--lob-line-strong); border-radius:9px; overflow:hidden; background:var(--lob-card); } .lob-root .seg button { font:inherit; font-size:13.5px; font-weight:600; border:none; background:transparent; color:var(--lob-muted); padding:8px 14px; cursor:pointer; } .lob-root .seg button + button { border-left:1px solid var(--lob-line); } .lob-root .seg button.on { background:var(--lob-accent); color:var(--lob-accent-ink); } /* Switch (baseline / tooltip). */ .lob-root .switch { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--lob-text); cursor:pointer; user-select:none; } .lob-root .switch input { display:none; } .lob-root .switch .track { width:38px; height:22px; border-radius:11px; background:var(--lob-line-strong); position:relative; transition:.15s; flex:none; } .lob-root .switch .track::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:.15s; } .lob-root .switch input:checked + .track { background:var(--lob-accent); } .lob-root .switch input:checked + .track::after { transform:translateX(16px); } /* Filtros. */ .lob-root .filtros { display:flex; align-items:center; gap:18px 22px; flex-wrap:wrap; padding:11px 16px; border-bottom:1px solid var(--lob-line); } .lob-root .filtros .blk { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .lob-root .filtros .cap { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--lob-muted); } .lob-root .chip { font:inherit; font-size:12.5px; font-weight:600; border:1px solid var(--lob-line-strong); background:var(--lob-card); color:var(--lob-muted); border-radius:999px; padding:5px 11px; cursor:pointer; transition:.12s; white-space:nowrap; } .lob-root .chip:hover { border-color:var(--lob-muted); color:var(--lob-ink); } .lob-root .chip.on { background:var(--lob-accent-soft); border-color:var(--lob-accent); color:var(--lob-accent); } .lob-root details.serv-dd { position:relative; } .lob-root details.serv-dd > summary { list-style:none; cursor:pointer; } .lob-root details.serv-dd > summary::-webkit-details-marker { display:none; } .lob-root details.serv-dd .pop { position:absolute; z-index:30; top:120%; left:0; width:300px; max-height:340px; overflow:auto; background:var(--lob-card); border:1px solid var(--lob-line-strong); border-radius:10px; padding:10px; box-shadow:0 18px 40px -24px rgba(20,30,60,.4); } .lob-root details.serv-dd .pop .gh { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--lob-muted); margin:8px 0 4px; } .lob-root details.serv-dd .pop label { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--lob-text); padding:3px 0; cursor:pointer; } /* Período: presets + calendário arrastável. */ .lob-root .per-dd .per-pop { left:auto; right:0; width:286px; max-height:none; overflow:visible; } .lob-root .per-presets { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--lob-line); } .lob-root .per-cal-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:2px 0 7px; } .lob-root .per-cal-nav .nav-b { width:27px; height:27px; border:1px solid var(--lob-line-strong); background:var(--lob-card); border-radius:7px; cursor:pointer; color:var(--lob-text); font-size:15px; line-height:1; padding:0; } .lob-root .per-cal-nav .nav-b:hover { border-color:var(--lob-muted); color:var(--lob-ink); } .lob-root .per-cal-lbl { font-weight:700; font-size:13.5px; color:var(--lob-ink); text-transform:capitalize; } .lob-root .per-cal-h { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:3px; } .lob-root .per-cal-h span { text-align:center; font-size:10px; font-weight:700; color:var(--lob-muted); text-transform:uppercase; } .lob-root .per-cal-b { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; touch-action:none; } .lob-root .per-d { border:none; background:transparent; border-radius:6px; padding:7px 0; font-size:12.5px; font-weight:600; color:var(--lob-text); cursor:pointer; font:inherit; user-select:none; } .lob-root .per-d:hover { background:var(--lob-bg-soft); } .lob-root .per-d.fora { color:var(--lob-muted); opacity:.5; } .lob-root .per-d.hoje { outline:1.5px solid var(--lob-accent); outline-offset:-2px; } .lob-root .per-d.sel { background:var(--lob-accent-soft); border-radius:0; color:var(--lob-accent); } .lob-root .per-d.ini { background:var(--lob-accent); color:var(--lob-accent-ink); border-radius:6px 0 0 6px; } .lob-root .per-d.fim { background:var(--lob-accent); color:var(--lob-accent-ink); border-radius:0 6px 6px 0; } .lob-root .per-d.ini.fim { border-radius:6px; } .lob-root .per-sel { font-size:12px; color:var(--lob-muted); margin:9px 0 0; text-align:center; } .lob-root .per-sel b { color:var(--lob-ink); font-weight:600; } /* Grade dia x atividade. --g-zoom escala fonte e células. */ .lob-root .grade-wrap { flex:1; overflow:auto; --g-zoom:1; } /* table-layout:fixed trava a largura de cada coluna no valor declarado (não varia com o conteúdo nem com o filtro). width:auto deixa a tabela do tamanho da soma das colunas, encostada à esquerda (não estica para preencher). */ .lob-root table.grade { border-collapse:separate; border-spacing:0; font-size:calc(11.5px * var(--g-zoom)); table-layout:fixed; width:auto; } .lob-root table.grade th, .lob-root table.grade td { border-right:1px solid var(--lob-line); border-bottom:1px solid var(--lob-line); padding:0; } .lob-root table.grade thead th { position:sticky; top:0; z-index:3; background:var(--lob-bg-soft); color:var(--lob-ink); font-weight:700; font-size:calc(11px * var(--g-zoom)); width:calc(96px * var(--g-zoom)); min-width:calc(96px * var(--g-zoom)); min-height:calc(52px * var(--g-zoom)); vertical-align:bottom; padding:6px 6px 8px; text-align:left; } .lob-root table.grade thead th .sv { display:block; white-space:normal; overflow-wrap:anywhere; word-break:break-word; line-height:1.18; } .lob-root table.grade thead th .ds { display:block; font-size:calc(9.5px * var(--g-zoom)); font-weight:600; color:var(--lob-muted); text-transform:uppercase; letter-spacing:.03em; white-space:normal; } .lob-root table.grade th.dia { position:sticky; left:0; z-index:2; background:var(--lob-bg-soft); color:var(--lob-text); font-weight:600; font-size:calc(11px * var(--g-zoom)); width:calc(112px * var(--g-zoom)); min-width:calc(112px * var(--g-zoom)); text-align:left; padding:4px 8px; white-space:nowrap; } .lob-root table.grade thead th.canto { position:sticky; left:0; top:0; z-index:5; width:calc(112px * var(--g-zoom)); min-width:calc(112px * var(--g-zoom)); } .lob-root table.grade td { width:calc(96px * var(--g-zoom)); min-width:calc(96px * var(--g-zoom)); height:calc(22px * var(--g-zoom)); text-align:center; color:#222; font-weight:600; white-space:nowrap; overflow:hidden; } .lob-root table.grade tr.dom th.dia { color:var(--lob-muted); font-style:italic; background:var(--lob-bg); } .lob-root table.grade tr.dom td { background:var(--lob-bg); } .lob-root table.grade td.atras { box-shadow:inset 0 0 0 2px var(--lob-bad); } /* "!" vermelho encostado à direita: a célula tem restrição não fechada. */ .lob-root table.grade td.has-restri { position:relative; } .lob-root table.grade td.has-restri .restri-i { position:absolute; right:4px; top:50%; transform:translateY(-50%); color:#dc2626; font-weight:900; font-size:calc(13px * var(--g-zoom)); line-height:1; cursor:pointer; } .lob-root table.grade td.has-restri .restri-i:hover { color:#b91c1c; } .lob-root table.grade tr:hover th.dia { color:var(--lob-accent); } /* Linha de balanço clássica. */ .lob-root .classica-wrap { flex:1; overflow:auto; padding:14px 16px; } .lob-root .classica-wrap svg { display:block; background:var(--lob-card); border:1px solid var(--lob-line); border-radius:12px; } .lob-root .lg-grid { stroke:var(--lob-line); stroke-width:1; } .lob-root .lg-grid.month { stroke-dasharray:2 5; } .lob-root .lg-axis-txt { fill:var(--lob-muted); font-size:10px; } .lob-root .lg-loc-txt { fill:var(--lob-text); font-size:11px; font-weight:600; } .lob-root .lg-status { stroke:var(--lob-bad); stroke-width:1.5; stroke-dasharray:4 4; } .lob-root .lg-bl { stroke:var(--lob-line-strong); stroke-width:5; fill:none; stroke-linejoin:round; stroke-linecap:round; opacity:.55; } .lob-root .lg-line { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; } .lob-root .lg-pt { cursor:pointer; } .lob-root .classica-wrap.sem-tip .lg-pt { display:none; } /* Barras por pavimento (Gantt por local). SVG como a clássica; cada tarefa é um retângulo na linha do pavimento, cor por serviço, rótulo abreviado. */ .lob-root .barras-wrap { flex:1; overflow:auto; padding:14px 16px; } .lob-root .barras-wrap svg { display:block; background:var(--lob-card); border:1px solid var(--lob-line); border-radius:12px; } .lob-root .bl-band { fill:var(--lob-bg-soft); } .lob-root .bl-bar { cursor:pointer; } .lob-root .bl-bar-txt { fill:#fff; font-weight:600; pointer-events:none; } .lob-root .bl-fimbase { stroke:#2f9e44; stroke-width:1.5; stroke-dasharray:4 4; } .lob-root .bl-fimbase-lbl { fill:#2f9e44; font-size:10px; font-weight:700; } .lob-root .bl-restri { fill:#dc2626; font-weight:900; cursor:pointer; } /* Legenda. */ .lob-root .legenda { display:flex; flex-wrap:wrap; gap:6px 16px; padding:10px 16px; border-top:1px solid var(--lob-line); background:var(--lob-bg-soft); font-size:12px; color:var(--lob-text); } .lob-root .legenda .it { display:flex; align-items:center; gap:7px; } .lob-root .legenda .sw { width:14px; height:3px; border-radius:2px; display:inline-block; } /* Tooltip (fixed, fora do fluxo). */ .lob-root .lg-tip { position:fixed; z-index:60; pointer-events:none; background:var(--lob-card); border:1px solid var(--lob-line-strong); border-radius:10px; padding:9px 11px; font-size:12px; color:var(--lob-text); box-shadow:0 14px 32px -14px rgba(20,30,60,.45); max-width:300px; } .lob-root .lg-tip .tt-h { font-weight:700; color:var(--lob-ink); font-size:12.5px; margin-bottom:6px; letter-spacing:-.01em; } .lob-root .lg-tip .tt-r { display:flex; justify-content:space-between; gap:18px; padding:1px 0; } .lob-root .lg-tip .tt-r span { color:var(--lob-muted); } .lob-root .lg-tip .tt-r b { color:var(--lob-ink); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; } /* Drawer de localizações. */ .lob-root .scrim { position:fixed; inset:0; background:rgba(8,10,16,.45); z-index:50; display:none; } .lob-root .scrim.on { display:block; } .lob-root .drawer { position:fixed; top:0; right:0; bottom:0; width:380px; max-width:92vw; background:var(--lob-card); border-left:1px solid var(--lob-line-strong); z-index:51; transform:translateX(100%); transition:transform .2s ease; display:flex; flex-direction:column; } .lob-root .drawer.on { transform:none; } .lob-root .drawer h3 { margin:0; font-size:16px; font-weight:700; color:var(--lob-ink); } .lob-root .drawer .dh { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--lob-line); } .lob-root .drawer .db { flex:1; overflow:auto; padding:10px 14px; } .lob-root .drawer .hint { font-size:12.5px; color:var(--lob-muted); padding:0 4px 8px; } .lob-root .loc-row { display:flex; align-items:center; gap:8px; padding:6px 6px; border:1px solid var(--lob-line); border-radius:9px; margin-bottom:6px; background:var(--lob-bg-soft); } .lob-root .loc-row .sw { width:14px; height:14px; border-radius:4px; flex:none; } .lob-root .loc-row input.nm { flex:1; min-width:0; font:inherit; font-size:13px; color:var(--lob-ink); background:transparent; border:none; border-bottom:1px dashed transparent; padding:2px 0; } .lob-root .loc-row input.nm:focus { outline:none; border-bottom-color:var(--lob-accent); } .lob-root .loc-row .mv { width:26px; height:24px; border:1px solid var(--lob-line-strong); background:var(--lob-card); border-radius:6px; cursor:pointer; color:var(--lob-muted); font-size:12px; line-height:1; } .lob-root .loc-row .mv:hover { color:var(--lob-ink); } .lob-root .loc-row .vis { cursor:pointer; } .lob-root .loc-row.hid { opacity:.45; } /* Estados. */ .lob-root .empty { flex:1; display:grid; place-items:center; color:var(--lob-muted); text-align:center; padding:40px; } .lob-root .empty .big { font-size:17px; font-weight:600; color:var(--lob-ink); margin-bottom:6px; } .lob-root .meta-strip { padding:8px 16px; font-size:12.5px; color:var(--lob-muted); border-bottom:1px solid var(--lob-line); background:var(--lob-bg); } .lob-root .meta-strip b { color:var(--lob-ink); font-weight:600; }