:root{ /* Bellagio Design System v1.1 — camada marca: off-white #CDCDCD · azul #8495A3 · terracota #844F31 · musgo #463F25 · preto #141615. Tema claro: o mais limpo possível — branco, bordas finas e tons de azul (#8495A3 diluído) para contraste; terracota só como pontuação. */ --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F2F5F7; --surface-3:#E4E9ED; --border:#D5DBE0; --ink:#141615; --ink-muted:#55503A; --ink-faint:#706851; --accent:#844F31; --accent-ink:#FFFFFF; --accent-soft:#EAEFF3; --clay:#844F31; --clay-soft:#EEE6E2; --gold:#96701F; --gold-soft:#F1E6CC; --success:#5F6B45; --success-soft:#E6EADB; --warning:#85602F; --warning-soft:#F1E6D4; --critical:#8A3F32; --critical-soft:#F1E0DB; --info:#4F6172; --info-soft:#E3E7EA; /* sombra quase ausente: a marca trabalha por contraste de cor, não por profundidade */ --shadow: none; --shadow-raised: 0 4px 16px rgba(20,22,21,.10); --focus: #844F31; /* ===== PADRÃO TIPOGRÁFICO DO SISTEMA — use SEMPRE estes tokens, nunca px soltos ===== Famílias: Cormorant Garamond (títulos) · Inter (interface e texto) · IBM Plex Mono (números/códigos). Texto (Inter): --fs-2xs 12px rótulo em caixa alta, etiqueta, contador --fs-xs 13px nota, ajuda, legenda, dado secundário --fs-sm 14px texto denso: tabela, botão, campo, menu, corpo da interface (padrão do ) --fs-md 15px texto de leitura: parágrafo, lista, descrição --fs-lg 16px destaque dentro do texto Títulos (Cormorant Garamond 600): --fs-h1 30px título de página (caixa alta, entreletras .06em) --fs-h2 26px título de seção grande --fs-h3 22px título de painel / janela (caixa alta no cabeçalho) --fs-h4 19px subtítulo / título de cartão ou bloco --fs-num 36px número de destaque (indicadores) Títulos

–

pegam o tamanho da própria tag; não coloque font-size inline neles. / --fs-2xs:12px; --fs-xs:13px; --fs-sm:14px; --fs-md:15px; --fs-lg:16px; --fs-h4:19px; --fs-h3:22px; --fs-h2:26px; --fs-h1:30px; --fs-num:36px; / forma: caixas quase retas (2px), controles 4px, botões e etiquetas em pílula (o arco do símbolo) / --r-box:2px; --r-ctl:4px; --r-pill:999px; / Curvas de movimento: as nativas do CSS são fracas; estas dão o "soco" inicial / --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ / Tema escuro = tema "preto" do Design System: preto #141615, superfície #1D201E, texto musgo-200/300 para leitura (≥4,5:1) / --bg:#141615; --surface:#1D201E; --surface-2:#262A28; --surface-3:#303431; --border:#363A37; --ink:#CDCDCD; --ink-muted:#B5AD9B; --ink-faint:#968E7A; --accent:#8495A3; --accent-ink:#141615; --accent-soft:#242B2F; --clay:#A0765C; --clay-soft:#2A211B; --gold:#E3BE68; --gold-soft:#3A3018; --success:#A5B37F; --success-soft:#283022; --warning:#E3BE68; --warning-soft:#3A2F18; --critical:#DE8E7E; --critical-soft:#3B241F; --info:#A0AAB2; --info-soft:#232A2F; --shadow: 0 1px 2px rgba(0,0,0,.3); --shadow-raised: 0 8px 24px rgba(0,0,0,.5); --focus:#8495A3; } } :root[data-theme="dark"]{ --bg:#141615; --surface:#1D201E; --surface-2:#262A28; --surface-3:#303431; --border:#363A37; --ink:#CDCDCD; --ink-muted:#B5AD9B; --ink-faint:#968E7A; --accent:#8495A3; --accent-ink:#141615; --accent-soft:#242B2F; --clay:#A0765C; --clay-soft:#2A211B; --gold:#E3BE68; --gold-soft:#3A3018; --success:#A5B37F; --success-soft:#283022; --warning:#E3BE68; --warning-soft:#3A2F18; --critical:#DE8E7E; --critical-soft:#3B241F; --info:#A0AAB2; --info-soft:#232A2F; --shadow: 0 1px 2px rgba(0,0,0,.3); --shadow-raised: 0 8px 24px rgba(0,0,0,.5); --focus:#8495A3; } :root{color-scheme:light} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}} :root[data-theme="dark"]{color-scheme:dark} / barras de rolagem discretas, na cor do tema (a nativa clara estoura no modo escuro) / {scrollbar-width:thin;scrollbar-color:var(--border) transparent} ,::before,::after{box-sizing:border-box} [hidden]{display:none!important} html,body{height:100%} body{ margin:0; background:var(--bg); color:var(--ink); font-family:"Inter",-apple-system,"Segoe UI",sans-serif; font-size:var(--fs-sm); line-height:1.45; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-tap-highlight-color:transparent; } h1,h2,h3,h4{ font-family:"Cormorant Garamond",Georgia,serif; font-weight:600; margin:0; text-wrap:balance; color:var(--ink); letter-spacing:0; line-height:1.1; } h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)} h4{font-size:var(--fs-h4)} p,li{font-size:var(--fs-md)} a{color:inherit} button{font-family:inherit;touch-action:manipulation} p,li{text-wrap:pretty} input,select,textarea{font-family:inherit;font-size:inherit;color:var(--ink);background:var(--surface)} ::selection{background:var(--accent-soft)} :focus-visible{outline:2px solid var(--focus);outline-offset:2px} input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 22%,transparent)} input,select,textarea{transition:border-color 150ms ease,box-shadow 150ms ease,background-color 150ms ease} .mono{font-family:"IBM Plex Mono",ui-monospace,monospace} .num{font-variant-numeric:tabular-nums} #app{display:flex;min-height:100vh} / ---------- Sidebar ---------- / .sidebar{ width:236px;flex:none; background:var(--surface); border-right:1px solid var(--border); display:flex;flex-direction:column; position:sticky;top:0;height:100vh; overflow:hidden; transition:width 260ms var(--ease-drawer); } / Menu recolhido: some com a barra lateral pra dar mais espaço à tela — o botão pra reabrir fica na topbar (não some junto), veja .collapse-btn. / body.sidebar-collapsed .sidebar{width:0;border-right-color:transparent} .collapse-btn{ display:inline-flex;align-items:center;justify-content:center;flex:none; width:36px;height:36px;padding:0;margin-right:2px; border:1px solid var(--border);border-radius:var(--r-ctl); background:var(--surface);color:var(--ink-muted);font-size:var(--fs-md);line-height:1;cursor:pointer; transition:color 150ms ease,border-color 150ms ease,transform 160ms var(--ease-out); } .collapse-btn:active{transform:scale(.95)} @media (hover:hover) and (pointer:fine){.collapse-btn:hover{color:var(--ink);border-color:var(--accent)}} .brand{ padding:20px 20px 16px; border-bottom:1px solid var(--border); display:flex; justify-content:center; } .brand-logo{ width:132px; height:auto; display:block; color:var(--ink); } nav.tabs{padding:14px 10px;display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto} .tab-btn{ display:flex;align-items:center;justify-content:space-between;gap:8px; padding:9px 12px;border:none;background:transparent;border-radius:var(--r-ctl); color:var(--ink-muted);font-size:var(--fs-sm);font-weight:500;text-align:left;cursor:pointer; border-left:3px solid transparent; transition:background-color 120ms ease,color 120ms ease,border-color 120ms ease; } @media (hover:hover) and (pointer:fine){.tab-btn:hover{background:var(--surface-2);color:var(--ink)}} .tab-btn.active,.tab-btn.active:hover{background:var(--accent-soft);color:var(--accent);border-left-color:var(--accent);font-weight:600} .tab-count{ font-family:"IBM Plex Mono",monospace;font-size:var(--fs-2xs);font-weight:600; background:var(--surface-3);color:var(--ink-muted);border-radius:20px;padding:1px 7px; } .tab-btn.active .tab-count{background:var(--accent);color:var(--accent-ink)} .painel-section-title{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-faint);margin:26px 0 10px} .painel-section-title:first-child{margin-top:0} .nav-group-label{padding:14px 12px 4px;font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-faint)} .nav-group-label:first-child{padding-top:2px} nav.tabs .tab-btn{padding-left:14px} nav.tabs > .tab-btn.top-level{font-weight:600} .sidebar-tema{padding:0 20px 16px} .sidebar-foot{padding:14px 20px 18px;border-top:1px solid var(--border);color:var(--ink-faint);font-size:var(--fs-2xs);line-height:1.5} .db-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--success);margin-right:6px;position:relative;top:-1px} .db-dot.off{background:var(--ink-faint)} / ---------- Main ---------- / main{flex:1;min-width:0;display:flex;flex-direction:column} .topbar{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:20px 32px;border-bottom:1px solid var(--border); position:sticky;top:0;background:var(--bg);z-index:5; } / títulos em Romana: caixa alta, entreletras .06em, entrelinha 1,05 (Design System 8.1) / .topbar h1{font-size:var(--fs-h1);text-transform:uppercase;letter-spacing:.06em;line-height:1.05} .view{padding:26px 32px 60px} .view-wide{max-width:none} / ---------- Buttons ---------- / .btn{ display:inline-flex;align-items:center;gap:6px; padding:8px 14px;border-radius:var(--r-ctl);border:1px solid var(--border); background:var(--surface);color:var(--ink);font-size:var(--fs-sm);font-weight:600; cursor:pointer;white-space:nowrap;line-height:1.2; transition:background-color 150ms ease,border-color 150ms ease,color 150ms ease,filter 150ms ease,transform 160ms var(--ease-out); } .btn:active:not([disabled]){transform:scale(.97)} @media (hover:hover) and (pointer:fine){.btn:hover{background:var(--surface-2)}} .btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} @media (hover:hover) and (pointer:fine){.btn-primary:hover{background:var(--accent);filter:brightness(1.08)}} .btn-ghost{border-color:transparent;background:transparent} @media (hover:hover) and (pointer:fine){.btn-ghost:hover{background:var(--surface-2)}} .btn-danger{color:var(--critical)} / botões e etiquetas são pílula: cita o arco do símbolo (Design System, Raio de canto) / .btn,.btn-sm,.tag,.oi-acab-btn{border-radius:var(--r-pill)} .btn{padding:8px 16px} .btn-sm{padding:5px 12px} .tag{padding:2px 10px} .oi-acab-btn{padding:0 12px} .btn-sm{padding:5px 10px;font-size:var(--fs-xs);border-radius:var(--r-ctl)} .btn[disabled]{opacity:.45;cursor:not-allowed} .icon-btn{padding:6px;border-radius:var(--r-ctl);border:1px solid transparent;background:transparent;cursor:pointer;color:var(--ink-muted);transition:background-color 150ms ease,color 150ms ease,transform 160ms var(--ease-out)} .icon-btn:active{transform:scale(.92)} @media (hover:hover) and (pointer:fine){.icon-btn:hover{background:var(--surface-2);color:var(--ink)}} .inline-edit{cursor:pointer;border-bottom:1px dashed var(--border);padding:2px 3px;border-radius:var(--r-ctl)} .inline-edit:hover{background:var(--surface-2);border-bottom-color:var(--accent)} .inline-edit-input{width:100%;min-width:90px;padding:4px 6px;border:1px solid var(--accent);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink);font:inherit} / ---------- Cards / stats ---------- / .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px} .stat-tile{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r-box); padding:16px 18px;box-shadow:var(--shadow); } .stat-label{font-size:var(--fs-xs);color:var(--ink-muted);text-transform:uppercase;letter-spacing:.1em;font-weight:600;line-height:1.3} .stat-value{font-family:"Cormorant Garamond",Georgia,serif;font-size:var(--fs-num);font-weight:600;margin-top:4px;letter-spacing:0;line-height:1.1;font-variant-numeric:lining-nums tabular-nums} .stat-value.accent{color:var(--accent)} .stat-value.clay{color:var(--clay)} .stat-value.warn{color:var(--warning)} .stat-note{font-size:var(--fs-xs);color:var(--ink-faint);margin-top:4px} .panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-box);box-shadow:var(--shadow)} .panel + .panel{margin-top:18px} .panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border)} .panel-head h3{font-size:var(--fs-h3);text-transform:uppercase;letter-spacing:.06em} .panel-head .hint{font-size:var(--fs-xs);color:var(--ink-muted);font-weight:400;margin-top:2px} .panel-body{padding:16px 20px} .panel-body.pad0{padding:0} / ---------- Tables ---------- / .tbl-wrap{overflow-x:auto} table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);font-variant-numeric:tabular-nums} thead th{ text-align:left;font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.1em; color:var(--ink-muted);font-weight:600;padding:10px 20px;border-bottom:1px solid var(--border); white-space:nowrap;background:var(--surface-2); } tbody td{padding:11px 20px;border-bottom:1px solid var(--border);vertical-align:top} tbody tr:last-child td{border-bottom:none} tbody tr{transition:background-color 120ms ease} @media (hover:hover) and (pointer:fine){tbody tr:hover{background:var(--surface-2)}} td.num,th.num{text-align:right;font-family:"IBM Plex Mono",monospace} .row-muted{color:var(--ink-muted)} .cell-title{font-weight:600} .cell-sub{color:var(--ink-muted);font-size:var(--fs-xs);margin-top:2px} / ---------- Badges / pills ---------- / .pill{ display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px; font-size:var(--fs-xs);font-weight:600;white-space:nowrap;line-height:1.5; } .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .pill-pendente{background:var(--surface-3);color:var(--ink-muted)} .pill-cotando{background:var(--info-soft);color:var(--info)} .pill-cotado{background:var(--gold-soft);color:var(--gold)} .pill-em_pedido{background:var(--info-soft);color:var(--info)} .pill-comprado{background:var(--warning-soft);color:var(--warning)} .pill-recebido{background:var(--success-soft);color:var(--success)} .pill-nao_iniciada{background:var(--surface-3);color:var(--ink-muted)} .pill-em_andamento{background:var(--info-soft);color:var(--info)} .pill-concluida{background:var(--success-soft);color:var(--success)} .pill-atrasada{background:var(--critical-soft);color:var(--critical)} .pill-rascunho{background:var(--surface-3);color:var(--ink-muted)} .pill-enviado{background:var(--info-soft);color:var(--info)} .pill-confirmado{background:var(--gold-soft);color:var(--gold)} .pill-parcial{background:var(--info-soft);color:var(--info)} .pill-vendida{background:var(--info-soft);color:var(--info)} .pill-nao_iniciado{background:var(--surface-3);color:var(--ink-muted)} .pill-em_preparacao{background:var(--info-soft);color:var(--info)} .pill-em_execucao{background:var(--gold-soft);color:var(--gold)} .pill-em_garantia{background:var(--warning-soft);color:var(--warning)} .pill-aberta{background:var(--info-soft);color:var(--info)} .pill-ganha{background:var(--success-soft);color:var(--success)} .pill-perdida{background:var(--critical-soft);color:var(--critical)} .pill-prospeccao{background:var(--surface-3);color:var(--ink-muted)} .pill-visita{background:var(--info-soft);color:var(--info)} .pill-projeto{background:var(--gold-soft);color:var(--gold)} .pill-orcamento{background:var(--gold-soft);color:var(--gold)} .pill-apresentacao{background:var(--warning-soft);color:var(--warning)} .pill-revisao{background:var(--warning-soft);color:var(--warning)} .pill-negociacao{background:var(--success-soft);color:var(--success)} .pill-pago{background:var(--success-soft);color:var(--success)} .pill-contato{background:var(--surface-3);color:var(--ink-muted)} .pill-fechado{background:var(--success-soft);color:var(--success)} .pill-cancelado{background:var(--critical-soft);color:var(--critical)} .pill-ouro{background:var(--gold-soft);color:var(--gold)} .pill-prata{background:var(--info-soft);color:var(--info)} .pill-bronze{background:var(--warning-soft);color:var(--warning)} .pill-novo{background:var(--surface-3);color:var(--ink-muted)} .pill-aprovada{background:var(--success-soft);color:var(--success)} .pill-comprada{background:var(--success-soft);color:var(--success)} .pill-rejeitada{background:var(--critical-soft);color:var(--critical)} .tag{display:inline-block;padding:2px 8px;border-radius:var(--r-ctl);background:var(--surface-3);color:var(--ink-muted);font-size:var(--fs-2xs);font-weight:600} .sku{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-xs);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-ctl);padding:1px 6px;color:var(--ink-muted)} / ---------- Forms ---------- / .field{display:flex;flex-direction:column;gap:5px} .field label{font-size:var(--fs-xs);font-weight:600;color:var(--ink-muted)} .field .help{font-size:var(--fs-2xs);color:var(--ink-faint);font-weight:400} .field input,.field select,.field textarea{ padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink); } .field textarea{resize:vertical;min-height:60px} .field input[type="file"]{padding:5px} .field input[type="file"]::file-selector-button, .field input[type="file"]::-webkit-file-upload-button{ display:inline-flex;align-items:center;gap:6px; padding:7px 12px;margin-right:10px;border-radius:var(--r-ctl);border:1px solid var(--border); background:var(--surface-2);color:var(--ink);font-size:var(--fs-sm);font-weight:600; cursor:pointer;font-family:inherit; } .field input[type="file"]::file-selector-button:hover, .field input[type="file"]::-webkit-file-upload-button:hover{background:var(--surface-3)} .form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .form-grid.c3{grid-template-columns:repeat(3,1fr)} .form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--border)} .span2{grid-column:span 2} / ---------- Autocomplete (catálogo search) ---------- / .autocomplete-list{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-ctl);box-shadow:var(--shadow-raised);max-height:220px;overflow-y:auto;z-index:10} .autocomplete-item{padding:8px 10px;font-size:var(--fs-sm);cursor:pointer;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:8px} .autocomplete-item:last-child{border-bottom:none} .autocomplete-item{transition:background-color 100ms ease} @media (hover:hover) and (pointer:fine){.autocomplete-item:hover{background:var(--surface-2)}} .autocomplete-list{transform-origin:top center;animation:pop-in 150ms var(--ease-out)} .autocomplete-item .row-muted{white-space:nowrap} / ---------- Import (orçamento JSON) ---------- / .import-hint{background:var(--accent-soft);border:1px solid var(--border);border-radius:var(--r-ctl);padding:10px 12px;font-size:var(--fs-sm);color:var(--ink-muted);margin-bottom:14px;line-height:1.5} .import-hint b{color:var(--ink)} .import-example{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-ctl);padding:10px 12px;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-2xs);color:var(--ink-muted);overflow-x:auto;white-space:pre;margin-bottom:14px} textarea.mono{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-xs);min-height:220px} / ---------- Modal ---------- / .modal-veil{position:fixed;inset:0;background:rgba(20,24,17,.45);display:flex;align-items:flex-start;justify-content:center;padding:5vh 20px;z-index:50;overflow-y:auto} :root[data-theme="dark"] .modal-veil, @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .modal-veil{background:rgba(0,0,0,.6)}} .modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-box);box-shadow:var(--shadow-raised);width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column} .modal.wide{max-width:760px} .modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--border)} .modal-head h3{font-size:var(--fs-h3);text-transform:uppercase;letter-spacing:.06em} .modal-body{padding:20px 22px;overflow-y:auto} / Entrada de modal: raro o bastante para ter movimento; nasce de scale(.96)+opacity, nunca de 0; fica centrado / .modal-veil{animation:veil-in 180ms ease-out} .modal{animation:modal-in 220ms var(--ease-out);transform-origin:center} @keyframes veil-in{from{opacity:0}to{opacity:1}} @keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}} @keyframes pop-in{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:none}} / ---------- Empty state ---------- / .empty{padding:44px 20px;text-align:center;color:var(--ink-muted)} .empty h4{color:var(--ink);font-size:var(--fs-h4);margin-bottom:6px} .empty p{max-width:420px;margin:0 auto 16px;font-size:var(--fs-sm)} / ---------- Obra card / list ---------- / .obra-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;border-bottom:1px solid var(--border);cursor:pointer} .obra-card:last-child{border-bottom:none} .obra-card{transition:background-color 120ms ease} @media (hover:hover) and (pointer:fine){.obra-card:hover{background:var(--surface-2)}} .obra-name{font-weight:600;font-size:var(--fs-md)} .obra-meta{color:var(--ink-muted);font-size:var(--fs-xs);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap} .obra-progress{width:120px} .bar-track{height:6px;border-radius:var(--r-ctl);background:var(--surface-3);overflow:hidden} .bar-fill{height:100%;background:var(--accent)} .crumb{display:flex;align-items:center;gap:8px;color:var(--ink-muted);font-size:var(--fs-sm);margin-bottom:6px} .crumb button{background:none;border:none;color:var(--accent);font-weight:600;cursor:pointer;padding:0;font-size:var(--fs-sm)} .subtabs{display:flex;flex-wrap:wrap;gap:0 4px;border-bottom:1px solid var(--border);margin-bottom:18px} .subtab{padding:9px 4px;margin-right:20px;background:none;border:none;border-bottom:2px solid transparent;color:var(--ink-muted);font-weight:600;font-size:var(--fs-sm);cursor:pointer} .subtab{transition:color 150ms ease,border-color 150ms ease} @media (hover:hover) and (pointer:fine){.subtab:not(.active):hover{color:var(--ink)}} .subtab.active{color:var(--accent);border-bottom-color:var(--accent)} .subtab .tab-count{margin-left:6px} .item-row{display:grid;grid-template-columns:1fr auto auto auto auto;gap:10px;align-items:center;padding:10px 20px;border-bottom:1px solid var(--border)} .item-row:last-child{border-bottom:none} / ---------- Lançamento rápido de itens de proposta (por ambiente) ---------- / .oi-ambiente{margin-bottom:14px} .oi-amb-nome{outline:none;border-radius:var(--r-ctl);padding:2px 6px;margin:-2px -6px} .oi-amb-nome:focus{background:var(--surface-2);box-shadow:0 0 0 2px var(--accent)} .oi-linhas{display:flex;flex-direction:column} .oi-row{border-bottom:1px solid var(--border);padding:10px 0} .oi-row.oi-row-auto{background:var(--accent-soft)} .oi-secao{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint);margin:0 16px;padding-top:4px} .oi-secao-linha{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end;padding:4px 16px} .oi-field{display:flex;flex-direction:column;gap:3px} .oi-field label{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .oi-field input,.oi-field select{padding:6px 8px;border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink);font-size:var(--fs-sm);font-family:inherit;height:36px} .oi-w-xs{width:96px} .oi-w-sm{width:118px} .oi-w-md{width:188px} .oi-w-lg{flex:1 1 200px;min-width:200px} .oi-field input[readonly]{background:var(--surface-2);color:var(--ink-muted);cursor:default;border-style:dashed} .oi-total{font-weight:700;white-space:nowrap;padding:0 2px;height:36px;display:flex;align-items:center} .oi-del-row{align-self:center;margin-left:2px} .oi-acab-wrap{display:flex;flex-direction:column;gap:3px} .oi-acab-wrap>label{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--ink-faint)} .oi-acab-botoes{display:flex;flex-wrap:wrap;gap:6px} .oi-acab-btn{padding:0 10px;height:36px;border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink-muted);font-size:var(--fs-xs);font-family:inherit;cursor:pointer;white-space:nowrap} .oi-acab-btn{transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease,transform 160ms var(--ease-out)} .oi-acab-btn:active{transform:scale(.97)} .oi-acab-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600} .oi-obs-row{padding:0 16px 10px} .oi-obs-row:last-child{padding-bottom:14px} .oi-obs-row input{width:100%;padding:5px 8px;border:1px solid transparent;border-radius:var(--r-ctl);background:transparent;color:var(--ink-muted);font-size:var(--fs-xs);font-style:italic} .oi-obs-row input:focus{background:var(--surface);border-color:var(--border);font-style:normal;color:var(--ink)} @media (max-width:720px){ .oi-w-xs,.oi-w-sm,.oi-w-md{width:calc(50% - 4px)} .oi-w-lg{min-width:100%} } .group-block{border-bottom:1px solid var(--border)} .group-block:last-child{border-bottom:none} .group-head{display:flex;align-items:center;justify-content:space-between;padding:13px 20px;background:var(--surface-2);gap:12px;flex-wrap:wrap} .group-head .gtitle{font-weight:600;font-size:var(--fs-sm)} .group-head .gmeta{font-size:var(--fs-xs);color:var(--ink-muted)} .contrib-list{font-size:var(--fs-xs);color:var(--ink-muted);margin-top:3px} .quote-row{display:grid;grid-template-columns:1fr 110px 90px 100px 34px;gap:8px;align-items:center;padding:8px 0} .quote-row input,.quote-row select{width:100%} .quote-row3{display:grid;grid-template-columns:1.4fr 90px 90px 80px 140px 34px;gap:8px;align-items:center;padding:6px 0} .quote-row3 input,.quote-row3 select{width:100%} @media (max-width:760px){.quote-row3{grid-template-columns:1fr 1fr}} .quote-pick{border:1px solid var(--border);border-radius:var(--r-ctl);padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px} .quote-pick.winner{border-color:var(--success);background:var(--success-soft)} / ---------- Gantt ---------- / .gantt-wrap{overflow-x:auto} .gantt{min-width:900px} .gantt-ruler{display:flex;border-bottom:1px solid var(--border);padding-left:220px;position:relative;height:28px} .gantt-row{display:flex;align-items:center;border-bottom:1px solid var(--border);min-height:40px} .gantt-row:last-child{border-bottom:none} .gantt-label{width:220px;flex:none;padding:8px 14px 8px 20px;font-size:var(--fs-sm);font-weight:600} .gantt-track{flex:1;position:relative;height:40px;background-image:linear-gradient(to right, var(--border) 1px, transparent 1px),linear-gradient(to right, transparent 71.4286%, var(--surface-2) 71.4286%);background-size:var(--gw,8.33%) 100%,var(--gw,8.33%) 100%} .gantt-bar{position:absolute;top:9px;height:22px;border-radius:var(--r-ctl);font-size:var(--fs-2xs);color:var(--accent-ink);display:flex;align-items:center;padding:0 8px;white-space:nowrap;overflow:hidden;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.15)} .gantt-today{position:absolute;top:0;bottom:0;width:2px;background:var(--clay);z-index:2} .gantt-week{position:absolute;top:0;font-size:var(--fs-2xs);color:var(--ink-faint);transform:translateX(-50%);font-family:"IBM Plex Mono",monospace} .gantt-group-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 20px;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:var(--fs-sm);font-weight:700} .gantt-group-row .gmeta{font-weight:500;color:var(--ink-muted);font-size:var(--fs-xs)} .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:600;box-shadow:var(--shadow-raised);z-index:100;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(12px);transition:opacity 200ms var(--ease-out),transform 260ms var(--ease-out)} .toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)} .divider{height:1px;background:var(--border);margin:16px 0} .muted{color:var(--ink-muted)} .faint{color:var(--ink-faint)} .flex{display:flex;align-items:center} .flex-between{display:flex;align-items:center;justify-content:space-between} .gap8{gap:8px} .gap12{gap:12px} .wrap{flex-wrap:wrap} @media (max-width:900px){ .stat-row{grid-template-columns:repeat(2,1fr)} .form-grid{grid-template-columns:1fr} .span2{grid-column:span 1} } #printArea{display:none} .prop-print{font-family:Georgia,"Times New Roman",serif;color:#463F25;max-width:760px;margin:0 auto;padding:20px} .prop-print h1,.prop-print h2,.prop-print h3{font-family:Arial,Helvetica,sans-serif} .prop-head{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:3px solid #6A3F27;padding-bottom:14px;margin-bottom:18px} .prop-head .prop-logo{height:52px;width:auto;flex:none;display:block} .prop-head .prop-head-txt{flex:1;min-width:0} .prop-head .prop-brand{font-size:20px;font-weight:700;color:#6A3F27;font-family:Arial,Helvetica,sans-serif} .prop-head .prop-brand-sub{font-size:11.5px;color:#5A543E} .prop-head .prop-meta{text-align:right;font-size:12px;color:#5A543E;flex:none;white-space:nowrap} .prop-head .prop-meta b{color:#463F25} .prop-section-title{font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#6A3F27;border-bottom:1px solid #B7B6B2;padding-bottom:4px;margin:22px 0 10px;break-after:avoid} .prop-client{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;font-size:13px;margin-bottom:4px} .prop-client div span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:#6F6A57;font-family:Arial,Helvetica,sans-serif} .prop-empty{font-size:12.5px;color:#5A543E} .prop-amb{margin-bottom:14px;break-inside:avoid;page-break-inside:avoid} .prop-amb h4{font-family:Arial,Helvetica,sans-serif;font-size:13px;margin:0 0 6px;color:#463F25} .prop-tbl{width:100%;border-collapse:collapse;font-size:12px} .prop-tbl th,.prop-tbl td,.prop-resumo-tbl th,.prop-resumo-tbl td,.prop-pag-tbl th,.prop-pag-tbl td{text-align:left} .pleft{text-align:left!important} .pcenter{text-align:center!important} .pnum{text-align:right!important;white-space:nowrap} .prop-tbl th{font-family:Arial,Helvetica,sans-serif;font-size:10.5px;text-transform:uppercase;letter-spacing:.02em;color:#5A543E;border-bottom:1px solid #B7B6B2;padding:5px 6px} .prop-tbl td{padding:5px 6px;border-bottom:1px solid #E2DFD8;vertical-align:top} .prop-tbl tr{break-inside:avoid;page-break-inside:avoid} .prop-cientifico{font-style:italic} .prop-selo-cot{display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:#8a6d1a;background:#F7EFD6;border-radius:var(--r-ctl);padding:1px 6px;vertical-align:middle} .prop-nota-cotacao{font-size:10.5px;font-style:italic;color:#6F6A57;margin-top:8px} .prop-resumo-tbl{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:8px} .prop-resumo-tbl th{font-family:Arial,Helvetica,sans-serif;font-size:10.5px;text-transform:uppercase;letter-spacing:.02em;color:#5A543E;border-bottom:1px solid #B7B6B2;padding:5px 6px} .prop-resumo-tbl td{padding:5px 6px} .prop-resumo-tbl td.pnum{font-weight:600} .prop-obs-row td.prop-obs{padding:0 6px 6px!important;border-bottom:1px solid #E2DFD8;font-size:11px;font-style:italic;color:#6F6A57} .prop-prereq-list{margin:4px 0 0;padding-left:18px;font-size:12px;color:#463F25} .prop-prereq-list li{margin-bottom:2px} .prop-total{display:flex;justify-content:space-between;align-items:baseline;background:#F0EAE6;border:1px solid #B7B6B2;border-radius:var(--r-ctl);padding:12px 16px;margin:14px 0;break-inside:avoid} .prop-total .lbl{font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:700;color:#463F25} .prop-total .val{font-family:Arial,Helvetica,sans-serif;font-size:22px;font-weight:700;color:#6A3F27} .prop-pag-tbl{width:100%;border-collapse:collapse;font-size:12.5px} .prop-pag-tbl th{font-family:Arial,Helvetica,sans-serif;font-size:10.5px;text-transform:uppercase;color:#5A543E;border-bottom:1px solid #B7B6B2;padding:5px 6px} .prop-pag-tbl td{padding:6px;border-bottom:1px solid #E2DFD8} .prop-footer{margin-top:24px;padding-top:12px;border-top:1px solid #B7B6B2;font-size:11px;color:#6F6A57;display:flex;justify-content:space-between;break-inside:avoid} @media print{ body {visibility:hidden} #printArea, #printArea {visibility:visible} #printArea{display:block;position:absolute;left:0;top:0;width:100%} @page{margin:16mm} } / ---------- Etiquetas de pallet/volume (10x15cm) ---------- / .pallet-label{ width:100mm; min-height:150mm; box-sizing:border-box; padding:30mm 6mm 6mm; position:relative; font-family:Arial,Helvetica,sans-serif; color:#463F25; display:flex; flex-direction:column; page-break-after:always; break-after:page; } .pallet-label:last-child{page-break-after:auto; break-after:auto} .pallet-label .fold-hint{position:absolute; top:3mm; left:0; right:0; text-align:center; font-size:7pt; color:#999; letter-spacing:.06em; text-transform:uppercase} .pallet-label .fold-line{position:absolute; top:30mm; left:0; right:0; border-top:1px dashed #999} .pallet-label-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6mm} .pallet-label-head svg{height:14mm; width:auto; color:#463F25} .pallet-label-vol{background:#463F25; color:#fff; font-weight:800; font-size:20pt; padding:2mm 5mm; border-radius:3mm; line-height:1; white-space:nowrap} .pallet-label-obra{font-size:19pt; font-weight:800; line-height:1.15; margin-bottom:5mm; word-break:break-word} .pallet-label-itens{font-size:11pt; line-height:1.5; flex:1} .pallet-label-itens ul{margin:0; padding-left:5mm} .pallet-label-foot{font-size:8pt; color:#666; border-top:1px solid #ccc; padding-top:2mm; margin-top:2mm} / ============================= LOGIN (Supabase) ============================= / .login-root{ display:none; min-height:100vh; align-items:center; justify-content:center; background:var(--bg); } .login-card{ width:320px; max-width:90vw; padding:32px 28px; border:1px solid var(--border); border-radius:var(--r-box); background:var(--surface, var(--bg)); display:flex; flex-direction:column; gap:10px; box-shadow:0 8px 30px rgba(0,0,0,.08); } .login-card h1{ margin:0; font-family:"Cormorant Garamond",Georgia,serif; font-size:var(--fs-h1); text-transform:uppercase; letter-spacing:.06em } .login-card input{ padding:10px 12px; border-radius:var(--r-ctl); border:1px solid var(--border); background:transparent; color:inherit; font-size:var(--fs-sm); } .login-card .btn{ margin-top:6px; justify-content:center } .login-erro{ color:#C0392B; font-size:var(--fs-xs); min-height:14px } / ===== CRM (Oportunidades) ===== / .crm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .crm-seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-box);overflow:hidden;background:var(--surface)} .crm-seg button{padding:8px 16px;border:none;background:none;color:var(--ink-muted);font-weight:600;font-size:var(--fs-sm);cursor:pointer} .crm-seg button.on{background:var(--accent);color:var(--accent-ink)} .crm-seg button .tag{margin-left:6px} .crm-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap} .crm-vista{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-ctl);overflow:hidden;background:var(--surface)} .crm-vista button{padding:6px 14px;border:none;background:none;color:var(--ink-muted);font-weight:600;font-size:var(--fs-sm);cursor:pointer} .crm-vista button.on{background:var(--accent-soft);color:var(--accent)} .crm-filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px} .crm-filtros input,.crm-filtros select{padding:7px 10px;border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink);font-size:var(--fs-sm)} .crm-datef{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--ink-muted)} .crm-check-inline{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--ink-muted);cursor:pointer} .crm-th{cursor:pointer;user-select:none;white-space:nowrap} .crm-th:hover{color:var(--accent)} .crm-acoes{min-width:250px} .crm-acoes .btn{margin:0 3px 4px 0} .crm-prox{font-weight:600;font-size:var(--fs-sm);max-width:220px} .crm-prox.atrasada{color:var(--critical)} .crm-agendar{border-color:var(--warning);color:var(--warning)} .crm-link{color:var(--accent);font-weight:600;text-decoration:none} .crm-link:hover{text-decoration:underline} .crm-kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px} .crm-col{background:var(--surface-2);border-radius:var(--r-box);min-height:240px;display:flex;flex-direction:column;border:2px dashed transparent} .crm-col.sobre{border-color:var(--accent);background:var(--accent-soft)} .crm-col-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 2px;font-weight:700;font-size:var(--fs-sm)} .crm-col-body{padding:6px 8px 10px;display:flex;flex-direction:column;gap:8px;flex:1} .crm-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-box);padding:10px 11px;cursor:grab;box-shadow:var(--shadow)} .crm-card:hover{border-color:var(--accent)} .crm-card.arrastando{opacity:.4} .crm-card-nome{font-weight:700;font-size:var(--fs-sm)} .crm-card-valor{font-size:var(--fs-sm);margin:2px 0 6px} .crm-card-meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:6px} .crm-avatar{width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:var(--fs-2xs);font-weight:700;display:inline-flex;align-items:center;justify-content:center} .crm-card-prox{font-size:var(--fs-xs);color:var(--ink-muted);border-top:1px solid var(--border);padding-top:6px} .crm-card-prox.sem{color:var(--warning);font-weight:600} .crm-card-prox.atrasada{color:var(--critical);font-weight:600} .crm-vazio{font-size:var(--fs-xs);color:var(--ink-faint);text-align:center;padding:14px 6px} .crm-dropzones{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px} .crm-drop{border:2px dashed var(--border);border-radius:var(--r-box);padding:16px;text-align:center;font-size:var(--fs-sm);color:var(--ink-muted);font-weight:600} .crm-drop.ok.sobre{border-color:var(--success);background:var(--success-soft);color:var(--success)} .crm-drop.crit.sobre{border-color:var(--critical);background:var(--critical-soft);color:var(--critical)} .crm-strip{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} .crm-chip{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-box);padding:6px 12px;display:flex;flex-direction:column;font-size:var(--fs-2xs);color:var(--ink-muted)} .crm-chip b{font-size:var(--fs-sm);color:var(--ink);font-weight:600} .crm-chip.warn{border-color:var(--warning);background:var(--warning-soft)} .crm-chip.crit{border-color:var(--critical);background:var(--critical-soft)} .crm-chip.ok{border-color:var(--success)} .crm-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:18px;align-items:start} .crm-tarefa{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)} .crm-tarefa.feita{opacity:.6} .crm-tarefa-corpo{flex:1;min-width:0} .crm-tarefa-titulo{font-weight:600;font-size:var(--fs-sm)} .crm-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);background:var(--surface);cursor:pointer;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-xs);padding:0;margin-top:1px} .crm-check:hover{border-color:var(--accent);background:var(--accent-soft)} .crm-check.on{background:var(--success);border-color:var(--success);color:#fff;cursor:default} .crm-alerta{padding:12px;border-radius:var(--r-ctl);background:var(--warning-soft);color:var(--warning);font-size:var(--fs-sm)} .crm-sec-label{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);font-weight:700;margin:14px 0 4px} .crm-feed{display:flex;gap:10px;padding:8px 0} .crm-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);margin-top:6px;flex-shrink:0} .crm-feed.mudanca .crm-dot{background:var(--ink-faint)} .crm-dot.t-ligacao,.crm-dot.t-email{background:var(--info)} .crm-dot.t-whatsapp{background:var(--success)} .crm-dot.t-visita,.crm-dot.t-reuniao{background:var(--gold)} .crm-dot.t-proposta{background:var(--warning)} .crm-dot.t-nota{background:var(--ink-faint)} .crm-feed-corpo{flex:1;min-width:0;border-bottom:1px solid var(--border);padding-bottom:8px} .crm-feed-head{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);flex-wrap:wrap} .crm-feed-texto{font-size:var(--fs-sm);margin-top:4px;white-space:pre-line} .crm-barra-bg{height:6px;border-radius:var(--r-ctl);background:var(--surface-3);overflow:hidden;margin-top:4px} .crm-barra-fg{height:100%;border-radius:var(--r-ctl)} .crm-usuario{margin-left:8px;max-width:120px;padding:3px 6px;border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink);font-size:var(--fs-xs)} @media (max-width:900px){ .crm-cols{grid-template-columns:1fr} .crm-dropzones{grid-template-columns:1fr} } / ===== Agenda ===== / .ag-nav{display:flex;align-items:center;gap:6px} .ag-rotulo{margin-left:10px;font-size:var(--fs-md)} .ag-legenda{display:flex;gap:12px;margin-left:auto;font-size:var(--fs-xs);color:var(--ink-muted)} .ag-legenda i{display:inline-block;width:10px;height:10px;border-radius:var(--r-ctl);margin-right:5px;vertical-align:-1px} .ag-semana{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:8px;overflow-x:auto} .ag-dia{background:var(--surface-2);border-radius:var(--r-box);min-height:260px;display:flex;flex-direction:column;border:2px solid transparent} .ag-dia.hoje{border-color:var(--accent)} .ag-dia-head{display:flex;justify-content:space-between;align-items:baseline;padding:10px 12px 6px;font-size:var(--fs-xs);color:var(--ink-muted)} .ag-dia-head b{color:var(--ink);font-size:var(--fs-sm)} .ag-dia-corpo{padding:0 8px 10px;display:flex;flex-direction:column;gap:6px;flex:1} .ag-card{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--ink-muted);border-radius:var(--r-ctl);padding:7px 9px;cursor:pointer} .ag-card:hover{border-color:var(--accent)} .ag-card.feito{opacity:.55} .ag-card.feito .ag-titulo{text-decoration:line-through} .ag-card.multi{background:var(--surface-3)} .ag-hora{font-size:var(--fs-2xs);font-weight:700;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.03em} .ag-titulo{font-size:var(--fs-sm);font-weight:600;margin-top:1px} .ag-sub{font-size:var(--fs-xs);color:var(--ink-muted);margin-top:1px} .panel-body .ag-card{margin-bottom:6px} .ag-mes-head,.ag-mes-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px} .ag-mes-head div{font-size:var(--fs-2xs);font-weight:700;color:var(--ink-muted);text-transform:uppercase;padding:4px 6px} .ag-cel{background:var(--surface-2);border-radius:var(--r-ctl);min-height:100px;padding:6px;cursor:pointer;border:2px solid transparent} .ag-cel.fora{opacity:.45} .ag-cel.hoje{border-color:var(--accent)} .ag-num{font-size:var(--fs-xs);font-weight:700;color:var(--ink-muted);margin-bottom:3px} .ag-chip{background:var(--surface);border-left:3px solid var(--ink-muted);border-radius:var(--r-ctl);padding:2px 5px;margin-bottom:2px;font-size:var(--fs-2xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ag-chip.feito{opacity:.5;text-decoration:line-through} .ag-mais{font-size:var(--fs-2xs);color:var(--ink-muted);padding-left:4px} @media (max-width:900px){ .ag-legenda{display:none} } .acesso-badge{margin-top:8px;font-size:var(--fs-xs);color:var(--ink-muted);display:flex;flex-direction:column;line-height:1.3} .acesso-badge b{color:var(--ink);font-size:var(--fs-sm)} / Obras — kanban / .kb-modo{display:inline-flex;gap:4px} .kb-board{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;align-items:flex-start} .kb-col{flex:0 0 270px;background:var(--surface-2,var(--surface));border:1px solid var(--border);border-radius:var(--r-box);min-height:120px} .kb-col.kb-over{border-color:var(--accent);background:var(--accent-soft)} .kb-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;font-weight:600;font-size:var(--fs-sm);border-bottom:1px solid var(--border)} .kb-body{padding:10px;display:flex;flex-direction:column;gap:10px} .kb-vazio{color:var(--ink-muted);text-align:center;padding:14px 0;font-size:var(--fs-xs)} .kb-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-ctl);padding:10px 12px;cursor:pointer} .kb-card:hover{border-color:var(--accent)} .kb-card.kb-arrastando{opacity:.4} .kb-nome{font-weight:600;font-size:var(--fs-sm)} .kb-sub{font-size:var(--fs-xs);color:var(--ink-muted)} .kb-etapa{font-size:var(--fs-xs);margin-top:6px} .kb-resp{color:var(--ink-muted)} .kb-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px} .kb-tag{font-size:var(--fs-2xs);padding:2px 6px;border-radius:999px;background:var(--surface-3)} .kb-crit{background:var(--critical-soft);color:var(--critical)} .kb-warn{background:var(--warning-soft);color:var(--warning)} .kb-valor{display:flex;justify-content:space-between;font-size:var(--fs-xs);font-weight:600;margin-top:8px} .kb-mover{margin-top:8px;width:100%;font-size:var(--fs-xs);padding:4px 6px;background:var(--surface);color:var(--ink-muted);border:1px solid var(--border);border-radius:var(--r-ctl)} / Obras — liberação / .lib-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;margin-bottom:14px;border:1px solid var(--warning);background:var(--warning-soft);border-radius:var(--r-ctl);font-size:var(--fs-sm)} .lib-det{font-size:var(--fs-xs);color:var(--ink-muted);margin-top:2px} .lib-linha{font-size:var(--fs-xs);color:var(--ink-muted);margin:-8px 0 12px} .kb-lib{font-size:var(--fs-xs);color:var(--warning);margin-top:6px} / Obras — saúde e pós-obra / .saude-pill{display:inline-block;font-size:var(--fs-2xs);font-weight:600;padding:2px 8px;border-radius:999px;margin-left:6px} .saude-pill.saude-ok{background:var(--success-soft);color:var(--success)} .saude-pill.saude-atencao{background:var(--warning-soft);color:var(--warning)} .saude-pill.saude-critico{background:var(--critical-soft);color:var(--critical)} .saude-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;background:var(--success)} .saude-dot.saude-atencao{background:var(--warning)} .saude-dot.saude-critico{background:var(--critical)} .saude-box{padding:10px 14px;margin-bottom:14px;border-radius:var(--r-ctl);font-size:var(--fs-sm);border:1px solid var(--border)} .saude-box.saude-atencao{border-color:var(--warning);background:var(--warning-soft)} .saude-box.saude-critico{border-color:var(--critical);background:var(--critical-soft)} .saude-box.saude-ok{background:var(--success-soft);border-color:var(--success)} .saude-box ul{margin:6px 0 0;padding-left:18px} .enc-lista{list-style:none;margin:0;padding:0;font-size:var(--fs-sm)} .enc-lista li{padding:4px 0} .enc-ok span{color:var(--success);font-weight:700} .enc-pend span{color:var(--warning);font-weight:700} .gantt-bar.gantt-bar-lib{background:repeating-linear-gradient(45deg,var(--warning),var(--warning) 6px,transparent 6px,transparent 12px);color:var(--ink);border:1px solid var(--warning)} .gantt-bar.gantt-bar-atr{color:#fff} .gantt-row:hover .gantt-track{background-color:var(--surface-2)} .gantt-mark{position:absolute;top:10px;transform:translateX(-50%);font-size:var(--fs-sm);line-height:20px;font-weight:700;z-index:1} .gantt-ghost{position:absolute;top:33px;height:3px;border-radius:2px;background:var(--ink-muted);opacity:.7} .gantt-bar.gantt-bar-conf{outline:2px solid var(--warning);outline-offset:1px} .gantt-bar.gantt-bar-ed{cursor:grab;touch-action:none;user-select:none} .gantt-bar.gantt-bar-ed:active{cursor:grabbing} .gantt-h{position:absolute;top:0;bottom:0;width:7px;cursor:ew-resize;z-index:2} .gantt-h-l{left:0} .gantt-h-r{right:0} .gantt-h:hover{background:rgba(255,255,255,.25)} .gantt-drag-label{position:fixed;z-index:9999;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:var(--r-ctl);padding:4px 8px;font-size:var(--fs-xs);font-weight:600;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.3)} / Obras — diário / .dia-links{list-style:none;margin:0;padding:0;font-size:var(--fs-sm)} .dia-links li{padding:4px 0} .dia-item{padding:12px 0;border-bottom:1px solid var(--border)} .dia-item:last-child{border-bottom:none} .dia-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-sm)} .dia-acoes{margin-left:auto} .dia-texto{font-size:var(--fs-sm);margin-top:6px;line-height:1.5} .dia-pend{font-size:var(--fs-sm);margin-top:6px;color:var(--warning)} .dia-fotos{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .dia-foto{font-size:var(--fs-xs);padding:3px 9px;border:1px solid var(--border);border-radius:999px;text-decoration:none;color:var(--ink)} .dia-foto:hover{border-color:var(--accent)} .dia-frow{display:grid;grid-template-columns:2fr 1fr 34px;gap:8px;margin-bottom:6px} .dia-frow input{width:100%} / ============ Celular: menu em gaveta, toque e telas estreitas ============ / .menu-btn,.nav-scrim{display:none} @media (max-width:820px){ .collapse-btn{display:none} body.sidebar-collapsed .sidebar{width:min(84vw,300px)} / recolher é coisa de desktop; no celular ignora / html{-webkit-text-size-adjust:100%} #app{display:block} / menu vira gaveta / .sidebar{position:fixed;left:0;top:0;bottom:0;height:auto;width:min(84vw,300px);z-index:60;transform:translateX(-104%);transition:transform .22s ease;padding-bottom:env(safe-area-inset-bottom)} body.nav-open .sidebar{transform:none;box-shadow:0 0 40px rgba(0,0,0,.35)} .nav-scrim{display:block;position:fixed;inset:0;background:rgba(20,24,17,.5);z-index:55;opacity:0;pointer-events:none;transition:opacity .22s} body.nav-open .nav-scrim{opacity:1;pointer-events:auto} body.nav-open{overflow:hidden} .tab-btn{padding-top:12px;padding-bottom:12px;font-size:var(--fs-md)} .menu-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;padding:0;border:1px solid var(--border);border-radius:var(--r-box);background:var(--surface);color:var(--ink);font-size:var(--fs-h3);line-height:1;cursor:pointer} / topo / .topbar{flex-wrap:wrap;gap:8px 10px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top))} .topbar > div:nth-child(2){flex:1;min-width:0} .topbar h1{font-size:var(--fs-h1)} #topbarActions{width:100%;order:3;flex-wrap:wrap;gap:8px} .view{padding:16px 14px calc(70px + env(safe-area-inset-bottom))} .panel-head{flex-wrap:wrap;padding:12px 14px} .panel-body{padding:12px 14px} .stat-row{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px} .stat-tile{padding:12px 14px} .stat-value{font-size:var(--fs-h2)} / toque: alvos maiores e sem zoom automático do iPhone nos campos / .btn{min-height:40px} .btn-sm{min-height:34px} .icon-btn{min-width:38px;min-height:38px} input,select,textarea{font-size:16px !important} input:not([type=checkbox]):not([type=radio]),select{min-height:42px} / tabelas rolam para o lado; abas e filtros se ajustam / .tbl-wrap{-webkit-overflow-scrolling:touch} .subtabs{overflow-x:auto;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch} .subtabs::-webkit-scrollbar{display:none} .subtab{flex:none} .crm-filtros input,.crm-filtros select{flex:1 1 140px;min-width:0 !important} .crm-acoes{min-width:0} .crm-kanban{grid-auto-columns:minmax(78vw,1fr);scroll-snap-type:x proximity} .crm-col{scroll-snap-align:start} / janelas (modais) como folha na parte de baixo da tela / .modal-veil{padding:0;align-items:flex-end} .modal,.modal.wide{max-width:none;max-height:94vh;max-height:94dvh;border-radius:16px 16px 0 0;border-bottom:none} .modal-head{padding:14px 16px} .modal-body{padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom))} .form-actions{flex-wrap:wrap} .toast{bottom:calc(20px + env(safe-area-inset-bottom));max-width:92vw;text-align:center} } / ---------- Processos: mapa, fluxograma, cargos e manual ---------- / .pf-aviso{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 14px;margin-bottom:14px;border-radius:var(--r-box);border:1px solid var(--gold);background:var(--gold-soft);color:var(--ink);font:inherit;font-size:var(--fs-sm);cursor:pointer} .pf-aviso:hover{filter:brightness(.98)} .pf-aviso-ir{margin-left:auto;font-weight:700;color:var(--gold);white-space:nowrap} .pf-tag{display:inline-block;padding:1px 7px;border-radius:var(--r-ctl);background:var(--surface-3);color:var(--ink-muted);font-size:var(--fs-2xs);font-weight:600;white-space:nowrap;line-height:1.6} .pf-tag.ap-manual{background:var(--surface-3);color:var(--ink-muted)} .pf-tag.ap-parcial{background:var(--info-soft);color:var(--info)} .pf-tag.ap-automatico{background:var(--success-soft);color:var(--success)} .pf-tag.sit-a_validar{background:var(--surface-3);color:var(--ink-muted)} .pf-tag.sit-validada{background:var(--success-soft);color:var(--success)} .pf-tag.sit-gargalo,.pf-tag.trava,.pf-tag.sug-critico{background:var(--critical-soft);color:var(--critical)} .pf-tag.sug-atencao{background:var(--warning-soft);color:var(--warning)} .pf-tag.sug-info{background:var(--info-soft);color:var(--info)} .pf-tag.cargo{background:var(--accent-soft);color:var(--accent)} .pf-leg{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--ink-muted)} .pf-leg i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-left:8px} .pf-leg i.ap-automatico,.pf-bar .ap-automatico{background:var(--success)} .pf-leg i.ap-parcial,.pf-bar .ap-parcial{background:var(--info)} .pf-leg i.ap-manual,.pf-bar .ap-manual{background:var(--ink-faint)} .pf-bar{display:flex;height:6px;border-radius:var(--r-ctl);overflow:hidden;background:var(--surface-3);gap:2px} .pf-bar span{height:100%} / mapa da empresa / .pm-rot{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);font-weight:700;margin:4px 0 10px} .pm-linha{display:flex;gap:0;margin-bottom:22px;overflow-x:auto;padding-bottom:4px} .pm-apoio{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px} .pm-card{display:flex;flex-direction:column;gap:6px;text-align:left;font:inherit;color:var(--ink);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-box);padding:12px 14px;cursor:pointer;min-width:0} .pm-card:hover{border-color:var(--accent)} .pm-card:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .pm-card.principal{flex:1 0 200px;border-radius:0;padding:12px 26px 12px 30px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%,16px 50%);background:var(--accent-soft);border:none;margin-right:-10px} .pm-card.principal:first-child{clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%);padding-left:16px;border-radius:10px 0 0 10px} .pm-card.principal:hover{background:var(--clay-soft)} .pm-card-nome{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:var(--fs-h4);line-height:1.2} .pm-card-desc{font-size:var(--fs-xs);color:var(--ink-muted);line-height:1.35} .pm-card-dono{font-size:var(--fs-xs);color:var(--ink-faint)} .pm-card-stats{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:var(--fs-xs);color:var(--ink-muted)} .pm-card-stats .warn{color:var(--warning);font-weight:700} .pm-card-stats .crit{color:var(--critical);font-weight:700} .pm-matriz th.num{white-space:normal;min-width:78px;font-size:var(--fs-xs);line-height:1.25} .pm-cel{--i:.5;min-width:30px;padding:3px 8px;border-radius:var(--r-ctl);border:none;font:inherit;font-weight:700;cursor:pointer;color:var(--ink);background:color-mix(in srgb, var(--accent) calc(var(--i) 45%), var(--surface-2))} .pm-cel:hover{outline:2px solid var(--accent)} .pm-sugs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px} .pm-sug{border:1px solid var(--border);border-left:4px solid var(--info);border-radius:var(--r-box);padding:12px 14px;display:flex;flex-direction:column;gap:7px;background:var(--surface)} .pm-sug.sug-critico{border-left-color:var(--critical)} .pm-sug.sug-atencao{border-left-color:var(--warning)} .pm-sug-head{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-sm);line-height:1.35} .pm-sug-det{font-size:var(--fs-sm);color:var(--ink-muted);line-height:1.45} .pm-sug-fazer{font-size:var(--fs-sm);line-height:1.45;background:var(--surface-2);border-radius:var(--r-ctl);padding:8px 10px} .pm-sug-fazer span{display:block;font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--ink-faint);margin-bottom:2px} .pm-sug-links{display:flex;flex-wrap:wrap;gap:6px;align-items:center} /* fluxograma / .pf-procs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px} .pf-chip{padding:5px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--ink-muted);font:inherit;font-size:var(--fs-xs);font-weight:600;cursor:pointer} .pf-chip small{font-weight:400;color:var(--ink-faint)} .pf-chip:hover{background:var(--surface-2)} .pf-chip.apoio{border-style:dashed} .pf-chip.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .pf-chip.active small{color:inherit;opacity:.8} .pf-barra{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px} .pf-barra-info{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--ink-muted)} .pf-barra-info b{font-family:"Cormorant Garamond",Georgia,serif;font-size:var(--fs-h3);font-weight:600;color:var(--ink)} .pf-barra-acoes{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pf-travas{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--ink-muted);font:inherit;font-size:var(--fs-xs);font-weight:600} button.pf-travas{cursor:pointer} .pf-travas.on{background:var(--critical-soft);border-color:var(--critical);color:var(--critical)} .pf-seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-ctl);overflow:hidden} .pf-seg button{border:none;background:var(--surface);color:var(--ink-muted);font:inherit;font-size:var(--fs-xs);font-weight:600;padding:5px 12px;cursor:pointer} .pf-seg button.active{background:var(--accent);color:var(--accent-ink)} .pf-conectar{padding:10px 12px;border-radius:var(--r-ctl);background:var(--info-soft);color:var(--info);font-size:var(--fs-sm);margin-bottom:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .pf-legenda{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:var(--fs-xs);color:var(--ink-muted);margin-bottom:8px} .pf-legenda span{display:inline-flex;align-items:center;gap:6px} .pf-legenda i{display:inline-block;width:22px;height:0;border-top:2px solid var(--ink-faint)} .pf-legenda i.l-trava{border-top:2.5px solid var(--critical)} .pf-legenda i.l-ret{border-top:2px dashed var(--ink-faint)} .pf-legenda i.l-ghost{width:14px;height:10px;border:1.5px dashed var(--ink-faint);border-radius:var(--r-ctl)} .pf-legenda-dica{margin-left:auto;color:var(--ink-faint)} .pf-scroll{overflow:auto;border:1px solid var(--border);border-radius:var(--r-box);background:var(--surface);box-shadow:var(--shadow);max-height:calc(100vh - 250px);min-height:320px} .pf-canvas{position:relative} .pf-lbls{position:sticky;left:0;z-index:6;width:132px;pointer-events:none} .pf-lbl{position:absolute;left:0;width:132px;padding:12px 10px;background:var(--surface);border-right:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:2px;pointer-events:auto} .pf-lbl.alt{background:var(--surface-2)} .pf-lbl b{font-size:var(--fs-sm);line-height:1.25} .pf-lbl small{font-size:var(--fs-2xs);color:var(--ink-faint)} .pf-raia{position:absolute;left:0;right:0;border-bottom:1px solid var(--border)} .pf-raia.alt{background:var(--surface-2)} .pf-raia.outros{background:repeating-linear-gradient(135deg,transparent 0 10px,var(--surface-2) 10px 11px);border-top:1px dashed var(--border)} .pf-lbl.outros{background:var(--surface-2);border-top:1px dashed var(--border)} .pf-lbl.outros b{color:var(--ink-muted)} .pf-faixa{position:absolute;top:6px;height:22px;border-radius:var(--r-ctl);background:var(--accent-soft);color:var(--accent);font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden} .pf-svg{position:absolute;left:0;top:0;z-index:2;pointer-events:none;overflow:visible} .pf-line{fill:none;stroke:var(--ink-faint);stroke-width:1.6} .pf-edge.ret .pf-line{stroke-dasharray:5 4} .pf-edge.trava .pf-line{stroke:var(--critical);stroke-width:2.4} .pf-edge.trava.off .pf-line{stroke-dasharray:7 4} .pf-hit{fill:none;stroke:transparent;stroke-width:14;pointer-events:stroke;cursor:pointer} .pf-edge:hover .pf-line{stroke:var(--accent)} .pf-seta{fill:var(--ink-faint)} .pf-seta-t{fill:var(--critical)} .pf-elbl{position:absolute;z-index:4;transform:translate(-50%,-50%);padding:1px 7px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:var(--fs-2xs);font-weight:600;color:var(--ink-muted);white-space:nowrap;cursor:pointer;max-width:150px;overflow:hidden;text-overflow:ellipsis} .pf-elbl.trava{border-color:var(--critical);color:var(--critical);background:var(--critical-soft)} .pf-no{position:absolute;z-index:3;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--info);border-radius:var(--r-ctl);padding:7px 9px;display:flex;flex-direction:column;gap:3px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.06);transition:box-shadow .15s,transform .15s} .pf-no.ap-automatico{border-left-color:var(--success)} .pf-no.ap-manual{border-left-color:var(--ink-faint)} .pf-no:hover{box-shadow:var(--shadow);transform:translateY(-1px)} .pf-no:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .pf-no.dec{background:var(--gold-soft);border-color:var(--gold);border-left-color:var(--gold);border-radius:var(--r-box)} .pf-no.ghost{background:transparent;border:1.5px dashed var(--border);box-shadow:none;opacity:.85} .pf-no.ghost:hover{opacity:1;border-color:var(--accent)} .pf-no.conectando:hover{outline:2px dashed var(--info);outline-offset:2px} .pf-no.sel{outline:3px solid var(--info);outline-offset:2px} .pf-no-top{display:flex;align-items:center;gap:5px;min-height:16px} .pf-num{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-2xs);color:var(--ink-faint)} .pf-dec{font-size:var(--fs-2xs);font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.04em} .pf-ghost{font-size:var(--fs-2xs);color:var(--ink-faint);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pf-icons{margin-left:auto;display:inline-flex;gap:4px;align-items:center;font-size:var(--fs-2xs)} .pf-sug{font-size:var(--fs-2xs);font-weight:700;color:var(--warning);background:var(--warning-soft);border-radius:999px;padding:0 5px} .pf-garg{width:15px;height:15px;border-radius:50%;background:var(--critical);color:#fff;font-weight:800;font-size:var(--fs-2xs);display:inline-flex;align-items:center;justify-content:center} .pf-ok{color:var(--success);font-weight:800} .pf-no-nome{font-weight:600;font-size:var(--fs-sm);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pf-no-foot{margin-top:auto;display:flex;align-items:center;gap:6px;min-width:0} .pf-prazo{font-size:var(--fs-2xs);color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pf-tab td{vertical-align:top;font-size:var(--fs-sm)} .pf-row{cursor:pointer} .pf-row:hover{background:var(--surface-2)} .pf-row:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} / ficha e formulários / .pf-ficha-head{display:flex;flex-direction:column;gap:6px;margin-bottom:14px} .pf-ficha-proc{font-size:var(--fs-xs);color:var(--ink-muted)} .pf-ficha-tags{display:flex;flex-wrap:wrap;gap:5px} .pf-ficha-sug{display:flex;flex-direction:column;gap:8px;margin-bottom:14px} .pf-sug-item{border-radius:var(--r-ctl);padding:10px 12px;font-size:var(--fs-sm);line-height:1.45;background:var(--info-soft);display:flex;flex-direction:column;gap:3px} .pf-sug-item.sug-critico{background:var(--critical-soft)} .pf-sug-item.sug-atencao{background:var(--warning-soft)} .pf-sug-fazer{font-weight:600} .pf-obj{font-size:var(--fs-sm);line-height:1.5;margin:0 0 8px} .pf-passos{margin:0 0 10px;padding-left:22px;font-size:var(--fs-sm);line-height:1.55} .pf-passos li{margin-bottom:3px} .pf-pronto,.pf-atencao,.pf-docs{font-size:var(--fs-sm);line-height:1.5;padding:7px 10px;border-radius:var(--r-ctl);margin-bottom:6px} .pf-pronto{background:var(--success-soft)} .pf-atencao{background:var(--warning-soft)} .pf-docs{background:var(--surface-2)} .pf-io{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0;font-size:var(--fs-sm);line-height:1.45} .pf-io span,.mn-io span{display:block;font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);font-weight:700;margin-bottom:2px} .pf-con{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:var(--fs-sm)} .pf-con ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px} .pf-con li{line-height:1.4} .pf-con p{margin:0;font-size:var(--fs-sm)} .pf-link{cursor:pointer;border-radius:var(--r-ctl);padding:3px 6px;margin:-3px -6px} .pf-link:hover{background:var(--surface-2)} .pf-garg-box{margin-top:12px;padding:10px 12px;border-radius:var(--r-ctl);background:var(--critical-soft);font-size:var(--fs-sm);line-height:1.5} .pe-saida{display:grid;grid-template-columns:1.3fr 1fr auto auto;gap:8px;align-items:center;margin-bottom:8px} .pe-saida select,.pe-saida input[type="text"]{padding:7px 9px;border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-sm);min-width:0} .pe-trava{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-sm);font-weight:600;white-space:nowrap;cursor:pointer} .pe-trava.big{font-size:var(--fs-sm);white-space:normal} .pf-con-par{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-bottom:14px} .pf-con-par > div:not(.pf-con-seta){background:var(--surface-2);border-radius:var(--r-ctl);padding:8px 10px;display:flex;flex-direction:column;font-size:var(--fs-sm)} .pf-con-par span{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);font-weight:700} .pf-con-par small{color:var(--ink-muted);font-size:var(--fs-xs)} .pf-con-seta{font-size:var(--fs-h3);color:var(--ink-faint)} .pf-bloq{display:flex;gap:14px;align-items:flex-start} .pf-bloq-ico{font-size:var(--fs-h1);line-height:1} .pf-bloq-lista{margin:0;padding-left:18px;font-size:var(--fs-sm);line-height:1.5;display:flex;flex-direction:column;gap:6px} .pg-telas{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px} .pg-grupo{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm)} .pg-grupo b{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint)} .pg-grupo label{display:flex;align-items:center;gap:6px;cursor:pointer} .pg-resumo{margin-top:14px;font-size:var(--fs-sm);color:var(--ink-muted)} / organograma / .org{overflow-x:auto;padding:4px 0 8px} .org ul{position:relative;display:flex;justify-content:center;padding:18px 0 0;margin:0} .org > ul{padding-top:0;width:max-content;margin:0 auto} .org li{list-style:none;position:relative;padding:18px 6px 0;display:flex;flex-direction:column;align-items:center} .org li::before,.org li::after{content:"";position:absolute;top:0;right:50%;width:50%;height:18px;border-top:1.5px solid var(--border)} .org li::after{right:auto;left:50%;border-left:1.5px solid var(--border)} .org li:only-child::before,.org li:only-child::after{display:none} .org li:only-child{padding-top:0} .org li:first-child::before,.org li:last-child::after{border:0 none} .org li:last-child::before{border-right:1.5px solid var(--border);border-radius:0 6px 0 0} .org li:first-child::after{border-radius:6px 0 0 0} .org ul ul::before{content:"";position:absolute;top:0;left:50%;height:18px;border-left:1.5px solid var(--border)} .org > ul > li{padding-top:0} .org > ul > li::before,.org > ul > li::after{display:none} .org-no{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:150px;max-width:190px;padding:10px 12px;border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:var(--r-box);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;box-shadow:var(--shadow);text-align:center} .org-no:hover{border-color:var(--accent)} .org-no:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .org-no b{font-size:var(--fs-sm);line-height:1.25} .org-area{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);font-weight:700} .org-pessoas{font-size:var(--fs-xs);color:var(--ink-muted);display:flex;flex-wrap:wrap;gap:4px;justify-content:center;align-items:center} .org-pessoas i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:var(--fs-2xs);font-weight:700;margin-right:2px} .org-pessoas em{color:var(--warning);font-style:normal;font-weight:600} .org-meta{font-size:var(--fs-2xs);color:var(--ink-faint)} .org-ext{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--border);font-size:var(--fs-xs);color:var(--ink-muted)} / manual do cargo / .mn-cab{border-bottom:1px solid var(--border);padding-bottom:14px;margin-bottom:6px} .mn-area{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);font-weight:700} .mn-cab h2{font-family:"Cormorant Garamond",Georgia,serif;font-size:var(--fs-h2);font-weight:600;margin:2px 0 6px} .mn-missao{font-size:var(--fs-sm);line-height:1.5;margin:0 0 10px} .mn-dados{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-sm);color:var(--ink-muted);line-height:1.45} .mn-proc h3{font-family:"Cormorant Garamond",Georgia,serif;font-size:var(--fs-h3);font-weight:600;margin:22px 0 10px;display:flex;align-items:baseline;gap:8px} .mn-proc h3 small{font-family:"Inter",sans-serif;font-size:var(--fs-xs);font-weight:500;color:var(--ink-faint)} .mn-etapa{border:1px solid var(--border);border-radius:var(--r-box);padding:14px 16px;margin-bottom:12px;break-inside:avoid} .mn-etapa-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px} .mn-etapa-head h4{font-size:var(--fs-h4);margin:0;margin-right:auto} .mn-num{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-xs);color:var(--accent-ink);background:var(--accent);border-radius:var(--r-ctl);padding:1px 7px} .mn-io{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;font-size:var(--fs-sm);line-height:1.45;margin-bottom:10px} .mn-trava{font-size:var(--fs-sm);padding:7px 10px;border-radius:var(--r-ctl);background:var(--critical-soft);color:var(--critical);margin-bottom:10px} .mn-etapa .pf-con{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)} .mn-rodape{font-size:var(--fs-2xs);color:#777;margin-top:20px} .mn-print{font-family:"Inter",sans-serif;color:#222} .mn-print .pf-tag,.mn-print .pf-pronto,.mn-print .pf-atencao,.mn-print .pf-docs,.mn-print .mn-trava{background:#f2f2f2;color:#222} .mn-print .mn-num{background:#333;color:#fff} / acessos por cargo / .ac-cargos{display:flex;flex-wrap:wrap;gap:4px 10px;max-width:520px} .ac-cargo{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);white-space:nowrap;cursor:pointer} @media (max-width:820px){ .pf-legenda-dica{display:none} .pf-scroll{max-height:none} .pf-io,.pf-con,.mn-io{grid-template-columns:1fr} .pe-saida{grid-template-columns:1fr auto auto} .pe-saida select{grid-column:1/-1} .pm-card.principal{flex-basis:180px} .pm-sugs{grid-template-columns:1fr} } / ---------- Movimento reduzido: mantém opacidade/cor (ajudam a entender), tira deslocamento e escala ---------- / @media (prefers-reduced-motion:reduce){ ,::before,::after{scroll-behavior:auto!important} .modal,.autocomplete-list{animation:veil-in 150ms ease-out} .btn:active:not([disabled]),.icon-btn:active,.collapse-btn:active,.oi-acab-btn:active{transform:none} .toast,.toast.show{transform:translateX(-50%)} .sidebar{transition:none} } / ---------- Cartões de indicador: sem caixa dentro de caixa; rótulo/valor/nota alinhados entre cartões da mesma fileira ---------- / .panel .stat-tile{box-shadow:none;border-color:transparent;background:var(--surface-2)} @supports (grid-template-rows:subgrid){ .stat-row{row-gap:0;margin-bottom:12px} .stat-tile{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;margin-bottom:14px;align-content:start} .stat-tile .stat-note{margin-top:4px} } / ---------- Toque (tablet/celular): alvos de 40–44 px e campos em 16 px (evita o zoom automático do iOS) ---------- / @media (pointer:coarse){ .btn{min-height:44px} .btn-sm{min-height:40px} .icon-btn,.collapse-btn{min-width:40px;min-height:40px} .tab-btn,.subtab{min-height:44px} .field input,.field select,.field textarea{min-height:44px;font-size:var(--fs-lg)} } / ---------- Barra superior: as ações quebram de linha em vez de estourar a largura da página ---------- / #topbarActions{flex-wrap:wrap;justify-content:flex-end;min-width:0}