/* Moldura do computador, painéis, tabelas, formulários e botões. */
.app{display:grid; grid-template-columns:252px minmax(0,1fr); min-height:100%}
.side{background:var(--side); color:var(--side-ink); padding:22px 14px; display:flex; flex-direction:column; gap:18px; position:sticky; top:0; height:100vh; overflow:auto}
.brand{padding:4px 10px 0}
.brand .mk{font-family:var(--f-display); font-weight:200; font-size:23px; letter-spacing:.02em; line-height:1}
.brand .mk b{font-weight:600; color:var(--accent); transition:color .4s}
.brand small{display:block; color:var(--side-muted); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; margin-top:8px}
.nav{display:flex; flex-direction:column; gap:2px}
.nav .grp{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--side-muted); padding:12px 12px 5px}
.nav button{all:unset; cursor:pointer; display:flex; align-items:center; gap:11px; padding:8px 12px; border-radius:8px; color:var(--side-ink); font-size:14.5px; position:relative; transition:background .2s}
.nav button:hover{background:var(--side-hover)}
.nav button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.nav button[aria-current="page"]{background:var(--side-hover)}
.nav button[aria-current="page"]::before{content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:2px; background:var(--accent)}
.nav svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6; opacity:.85; flex:none}
.nav .tag{margin-left:auto; font-size:11px; background:var(--accent); color:#111; border-radius:20px; padding:0 7px; font-weight:600}
.me{margin-top:auto; display:flex; gap:10px; align-items:center; padding:12px 10px 0; border-top:1px solid var(--side-hover)}
.avatar{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-display); font-weight:500; background:var(--side-hover); color:var(--side-ink); flex:none}
.me b{font-size:14px}

.main{min-width:0; display:flex; flex-direction:column}
.top{position:sticky; top:0; z-index:5; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 24px}
.menu-btn{display:none; border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:6px 10px; cursor:pointer}
.seg{display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:3px; gap:2px; flex-wrap:wrap}
.seg button{border:0; background:none; padding:5px 13px; border-radius:999px; cursor:pointer; font-size:13.5px; color:var(--muted); transition:background .25s,color .25s}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--surface)}
.seg button:focus-visible{outline:2px solid var(--accent)}
.top .spacer{flex:1}
.eye{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:5px 12px; cursor:pointer; font-size:13px; color:var(--muted)}
.eye svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7}
.eye[aria-pressed="true"]{color:var(--ink); border-color:var(--ink)}
.today{font-family:var(--f-mono); font-size:12.5px; color:var(--muted)}

.view{padding:26px 24px 70px; display:flex; flex-direction:column; gap:18px; max-width:1360px; width:100%}
.head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.head h1{font-size:30px; font-weight:300}
.head p{margin:4px 0 0; color:var(--muted); max-width:74ch}
.head .acts{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end}
.eyebrow{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600}
.back{all:unset; cursor:pointer; color:var(--muted); font-size:13.5px}
.back:hover{color:var(--ink)}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 20px; box-shadow:var(--shadow); min-width:0}
.panel h2{font-size:17px}
.sub{color:var(--muted); font-size:13px; margin-top:2px}
.ph{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; flex-wrap:wrap}
.ph .acts{display:flex; gap:8px; flex-wrap:wrap}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:12px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:15px 16px 14px; display:flex; flex-direction:column; gap:4px; box-shadow:var(--shadow); min-width:0}
.kpi .l{font-size:12.5px; color:var(--muted)}
.kpi .v{font-family:var(--f-display); font-size:25px; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.15; overflow-wrap:anywhere}
.kpi .d{font-size:12.5px; color:var(--muted)}
.kpi.hero{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.kpi.hero .l,.kpi.hero .d{color:color-mix(in srgb,var(--surface) 70%,transparent)}
.up{color:var(--ok)!important} .down{color:var(--bad)!important}

.grid2{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:16px; align-items:start}
.stack{display:flex; flex-direction:column; gap:16px; min-width:0}
.grid2.even{grid-template-columns:repeat(2,minmax(0,1fr))}

.pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:2px 9px; border-radius:999px; white-space:nowrap}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.pill.ok{background:var(--ok-soft); color:var(--ok)} .pill.warn{background:var(--warn-soft); color:var(--warn)} .pill.bad{background:var(--bad-soft); color:var(--bad)}
.pill.neu{background:var(--surface-2); color:var(--muted); border:1px solid var(--line)}
.chip{font-size:11.5px; font-weight:600; letter-spacing:.04em; padding:1px 8px; border-radius:5px; border:1px solid currentColor; white-space:nowrap; display:inline-block}
.chip.alm{color:var(--steel)} .chip.rf{color:var(--gold)} .chip.both{color:var(--muted)}
.chips{display:inline-flex; gap:5px; flex-wrap:wrap; vertical-align:middle}

.list{display:flex; flex-direction:column}
.row{display:grid; grid-template-columns:4px minmax(0,1fr) auto; gap:12px; padding:11px 0; border-top:1px solid var(--line); align-items:center}
.row:first-child{border-top:0}
.row .sev{align-self:stretch; border-radius:2px; background:var(--plan)}
.row .t{font-weight:600; font-size:14px} .row .m{font-size:13px; color:var(--muted)}
.row .acts{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.sev.bad{background:var(--bad)} .sev.warn{background:var(--warn)} .sev.ok{background:var(--ok)} .sev.acc{background:var(--accent)}

.ag-item{display:grid; grid-template-columns:58px minmax(0,1fr) auto; gap:12px; padding:10px 0; border-top:1px solid var(--line); align-items:center}
.ag-item:first-child{border-top:0}
.ag-date{font-family:var(--f-display); line-height:1.05; text-align:center; border:1px solid var(--line); border-radius:8px; padding:5px 0}
.ag-date b{display:block; font-size:20px; font-weight:500}
.ag-date span{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.ag-item .t{font-weight:600; font-size:14px} .ag-item .m{font-size:12.5px; color:var(--muted)}
.bell{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:2px}
.bell svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.7}

.tw{overflow-x:auto; margin:0 -4px}
table{width:100%; border-collapse:collapse; font-size:14px}
th{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
tr:last-child td{border-bottom:0}
th.n,td.n{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
tbody tr{transition:background .15s}
tbody tr:hover{background:var(--surface-2)}
tr.click{cursor:pointer}
tfoot td{font-weight:600; border-top:1px solid var(--ink); border-bottom:0}
td .acts{display:flex; gap:4px; justify-content:flex-end}
.bar{height:6px; background:var(--surface-2); border:1px solid var(--line); border-radius:4px; overflow:hidden; min-width:70px}
.bar i{display:block; height:100%; background:var(--accent); border-radius:4px; transform-origin:left; animation:grow .9s cubic-bezier(.2,.7,.2,1) both}
.cell-prog{display:flex; align-items:center; gap:9px}
.cell-prog span{font-variant-numeric:tabular-nums; font-size:13px; color:var(--muted); width:36px}
.split{display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line)}
.split i{display:block; height:100%; transform-origin:left; animation:grow .9s cubic-bezier(.2,.7,.2,1) both}

svg.chart{width:100%; height:auto; display:block; overflow:visible}
svg.chart text{fill:var(--muted); font:11px var(--f-body)}
svg.chart .grid{stroke:var(--line); stroke-width:1}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--muted)}
.legend span{display:flex; align-items:center; gap:6px}
.legend i{width:14px; height:3px; border-radius:2px; display:inline-block}
.legend i.sq{height:10px; width:10px; border-radius:2px}
.draw{stroke-dasharray:1400; stroke-dashoffset:1400; animation:draw 1.4s .15s ease forwards}

.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px}
.obra{display:flex; flex-direction:column; gap:12px; cursor:pointer; transition:border-color .2s, transform .2s; text-align:left}
.obra:hover{border-color:var(--accent); transform:translateY(-2px)}
.obra:focus-visible{outline:2px solid var(--accent)}
.obra .tl{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.obra h3{font-size:18px}
.kv{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 14px}
.kv div{display:flex; flex-direction:column; min-width:0}
.kv span{font-size:12px; color:var(--muted)}
.kv b{font-family:var(--f-display); font-weight:500; font-size:16px; font-variant-numeric:tabular-nums}
.ctr{border-top:1px solid var(--line); padding-top:10px; display:flex; flex-direction:column; gap:8px}
.ctr-line{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; font-size:13.5px}
.ctr-line .bar{min-width:0}

.gantt{display:grid; grid-template-columns:minmax(170px,250px) minmax(520px,1fr); font-size:13.5px}
.g-row{display:contents}
.g-name{padding:8px 10px 8px 0; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px}
.g-name .crit{width:7px; height:7px; border-radius:50%; background:var(--bad); flex:none}
.g-name .nocrit{width:7px; height:7px; flex:none}
.g-track{position:relative; border-bottom:1px solid var(--line); height:42px}
.g-grid{position:absolute; inset:0; display:grid}
.g-grid i{border-left:1px solid var(--line)}
.g-bar{position:absolute; top:12px; height:18px; border-radius:5px; border:1.5px solid var(--plan); background:var(--surface-2); overflow:hidden}
.g-bar i{position:absolute; inset:0 auto 0 0; opacity:.85; animation:grow 1s cubic-bezier(.2,.7,.2,1) both; transform-origin:left}
.g-bar.late{border-color:var(--bad)}
/* Plano combinado (linha de base, item 20): faixa cinza fina embaixo da barra. */
.g-base{position:absolute; top:33px; height:4px; border-radius:2px; background:var(--muted); opacity:.5}
.legend .g-base-leg{background:var(--muted); opacity:.5; height:4px; border-radius:2px; align-self:center}
.g-pct{position:absolute; top:12px; font-size:11.5px; color:var(--muted); line-height:18px; padding-left:6px; font-variant-numeric:tabular-nums; white-space:nowrap}
.g-head{display:grid; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--line); padding-bottom:6px}
.g-today{position:absolute; top:-26px; bottom:0; width:0; border-left:2px dashed var(--ink); z-index:1}
/* "hoje" fica logo abaixo da linha das datas, com fundo, para não cobrir a data da semana (visto em 06/11). */
.g-today span{position:absolute; top:27px; left:4px; font-size:11px; line-height:13px; color:var(--ink); font-weight:600; white-space:nowrap; background:var(--surface); padding:0 4px; border-radius:4px; z-index:2}

.models{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px}
.model{all:unset; cursor:pointer; border:1px solid var(--line); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:3px; background:var(--surface); transition:border-color .2s}
.model:hover{border-color:var(--accent)}
.model:focus-visible{outline:2px solid var(--accent)}
.model b{font-weight:600} .model span{font-size:12.5px; color:var(--muted)}

.crew{display:flex; flex-direction:column}
.crew label{display:grid; grid-template-columns:22px minmax(0,1fr) 120px; gap:12px; align-items:center; padding:9px 4px; border-top:1px solid var(--line); cursor:pointer}
.crew label:first-child{border-top:0}
.crew input[type=checkbox]{width:18px; height:18px; accent-color:var(--accent)}
.crew .who b{font-weight:600} .crew .who span{display:block; font-size:12.5px; color:var(--muted)}
.crew input[type=text]{width:100%; text-align:right; border:1px solid var(--line); background:var(--surface-2); border-radius:7px; padding:5px 8px; font-variant-numeric:tabular-nums}

.form-row{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end}
.form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.field{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--muted); min-width:0}
.form-row .field{min-width:150px; flex:1}
.field.full{grid-column:1/-1}
.field select,.field input,.field textarea{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:14.5px; color:var(--ink); width:100%}
.field textarea{resize:vertical; min-height:70px}
.field .dica{font-size:12px; color:var(--muted)}
.field .req{color:var(--bad); font-weight:600}
.checks{display:flex; gap:14px; flex-wrap:wrap; padding:6px 0}
.checks label{display:flex; gap:7px; align-items:center; color:var(--ink); font-size:14px}
.checks input{width:17px; height:17px; accent-color:var(--accent)}

.btn{border:1px solid var(--line); background:var(--surface); border-radius:9px; padding:8px 14px; cursor:pointer; font-weight:600; font-size:14px; transition:transform .15s, background .2s; white-space:nowrap; color:var(--ink)}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.06); background:var(--accent)}
.btn.danger{color:var(--bad)}
.btn.sm{padding:5px 10px; font-size:13px}
.btn.xs{padding:2px 8px; font-size:12.5px; border-radius:7px}
.btn:disabled{opacity:.5; cursor:default}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn .lk{opacity:.55; margin-left:4px; font-size:12px}
.sum{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding-top:14px; margin-top:6px; border-top:1px solid var(--line)}
.big{font-family:var(--f-display); font-size:24px; font-weight:500; font-variant-numeric:tabular-nums}

.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.tabs button{border:0; background:none; padding:9px 14px; cursor:pointer; color:var(--muted); font-weight:600; border-bottom:2px solid transparent; margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--ink); border-color:var(--accent)}
.tabs button:focus-visible{outline:2px solid var(--accent)}

.quick{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px}
.qa{all:unset; cursor:pointer; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow); transition:border-color .2s, transform .2s}
.qa:hover{border-color:var(--accent); transform:translateY(-2px)}
.qa:focus-visible{outline:2px solid var(--accent)}
.qa svg{width:22px; height:22px; stroke:var(--accent); fill:none; stroke-width:1.6}
.qa b{font-family:var(--f-display); font-weight:500; font-size:16px}
.qa span{font-size:13px; color:var(--muted)}

.note{font-size:13.5px; color:var(--muted); background:var(--surface-2); border:1px dashed var(--line); border-radius:10px; padding:12px 14px}
.note b{color:var(--ink)}
.empty{padding:22px; text-align:center; color:var(--muted); font-size:14px}
.check{color:var(--ok); font-weight:700} .dash{color:var(--plan)}
.diff{font-family:var(--f-mono); font-size:12px}
.diff s{color:var(--bad)} .diff b{color:var(--ok); font-weight:500}

.sim-out{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.tl-bars{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.tl-bar{display:grid; grid-template-columns:110px minmax(0,1fr); gap:10px; align-items:center; font-size:13px}
.tl-bar .track{position:relative; height:22px; background:var(--surface-2); border:1px solid var(--line); border-radius:6px}
.tl-bar .fill{position:absolute; inset:0 auto 0 0; border-radius:5px; transition:width .6s cubic-bezier(.2,.7,.2,1); display:flex; align-items:center; justify-content:flex-end; padding-right:8px; color:#fff; font-size:12px; font-weight:600; white-space:nowrap}
.tl-bar .dl{position:absolute; top:-4px; bottom:-4px; border-left:2px dashed var(--bad)}
.eff-box{display:flex; align-items:center; gap:6px; color:var(--ink)}
.field input.eff{width:72px; text-align:right; background:var(--surface-2); padding:6px 8px}

.ph-models{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px}
.ph-model ol{margin:8px 0 0; padding-left:18px; font-size:13.5px; display:flex; flex-direction:column; gap:3px}
.ph-model ol span{color:var(--muted); font-size:12.5px; display:block}
.shots{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.shot{border:1.5px dashed var(--line); border-radius:10px; aspect-ratio:4/3; max-width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; padding:8px; position:relative; overflow:hidden; cursor:pointer; background:var(--surface-2); font-size:12.5px; color:var(--muted)}
.shot b{color:var(--ink); font-size:13px}
.shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.shot.done{border-style:solid; border-color:var(--ok)}
.shot.sending::after{content:"Enviando…"; position:absolute; inset:auto 0 0 0; background:rgba(0,0,0,.6); color:#fff; font-size:12px; padding:4px}
.shot input{position:absolute; inset:0; opacity:0; cursor:pointer}
.thumbs{display:flex; gap:6px; flex-wrap:wrap}
.thumbs img{width:64px; height:48px; object-fit:cover; border-radius:6px; border:1px solid var(--line)}
.logo-prev{max-height:56px; max-width:200px; background:#fff; padding:6px; border-radius:8px; border:1px solid var(--line)}

/* Botão Atualizar e faixa de versão nova (item 28.1). */
.top .atualizar{display:inline-flex; align-items:center; gap:6px}
.top .atualizar svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8}
.faixa-versao{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:60; display:flex; align-items:center; gap:12px;
  background:var(--ink); color:var(--surface); border-radius:12px; padding:10px 14px; box-shadow:0 8px 24px rgba(0,0,0,.25); max-width:calc(100% - 32px); font-size:14.5px}
@media (max-width:900px){ .top .atualizar span{display:none}
  /* Celular (04/11/2026): faixa de ponta a ponta logo acima da barra de baixo; texto curto numa linha e o botão sem encolher. */
  .faixa-versao{left:16px; right:16px; transform:none; max-width:none; justify-content:space-between; bottom:calc(76px + env(safe-area-inset-bottom, 0px)); font-size:16px}
  .faixa-versao .fv-mais{display:none} }
.faixa-versao .fv-txt{flex:1; min-width:0}
.faixa-versao .btn{flex:none; white-space:nowrap}
body:has(.f-nav) .faixa-versao{bottom:calc(76px + env(safe-area-inset-bottom, 0px))}