/* CG Drywall · Painel C «Isométrico de obra» — só telemóvel (≤ 599 px), só no Painel (html.pc-painel).
   Aprovado pelo Gustavo 12/11/2026 (via Designer CG). Núcleo: verde #5BA898 com texto #0f2420; branco só sobre #1F4842 (mais escuro que #2F6B5F).
   No desktop/tablet nada disto aparece: o Painel fica como estava. */
.pc-banner,.k-art,.pc-hb,.t-art,.t-bar{display:none}

/* Abas «Obras em andamento / concluídas / em pausa / a começar» (12/11/2026) — substituem a barra de período, em todos os ecrãs.
   Aba ativa: fundo #5BA898 com texto #0f2420 (nunca branco). */
.seg.ob-estados{display:flex;flex-wrap:wrap;gap:4px;grid-auto-flow:unset}
.seg.ob-estados .thumb{display:none}
.seg.ob-estados button{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;border-radius:var(--r-sm)}
.seg.ob-estados button[aria-selected=true]{background:var(--cg-green);color:var(--cg-on-green)}
.seg.ob-estados .obt-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--st-apr-bg);color:var(--st-apr-fg)}
.seg.ob-estados button[aria-selected=true] .obt-n{background:rgba(15,36,32,.14);color:var(--cg-on-green)}
.seg.ob-estados button:focus-visible{outline:2px solid var(--cg-green-dark);outline-offset:2px}
@media (max-width:599px){
  .filters .seg.ob-estados{display:grid;grid-template-columns:1fr 1fr;width:100%;flex:none}
  .filters .seg.ob-estados button{padding:0 8px;font-size:13.5px;min-height:var(--tap)}
  html.pc-painel #seg.ob-estados{border-radius:18px;padding:5px}
  html.pc-painel #seg.ob-estados button{border-radius:14px}
}

@media (max-width:599px){
  /* fundo papel com grelha subtil de planta */
  html.pc-painel[data-theme=light] body{background-color:var(--cg-paper,#F0F2EF);background-image:linear-gradient(rgba(47,107,95,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(47,107,95,.05) 1px,transparent 1px);background-size:22px 22px,22px 22px;background-attachment:fixed}
  html.pc-painel .backdrop{opacity:0}
  /* topo: logo oficial maior (quadrado, sem esticar) + botão de definições; o título passa para o banner */
  html.pc-painel .top{position:relative;min-height:72px;background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  html.pc-painel .top .m-logo img{height:44px;max-width:150px}
  html.pc-painel .top>div:has(#title){position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html.pc-painel #prefsBtn{width:46px;height:46px;border-radius:50%;border:0;background:var(--surface);box-shadow:0 4px 14px rgba(22,40,36,.08);color:var(--text)}
  /* banner verde escuro com a casa LSF */
  html.pc-painel .pc-banner{display:block;position:relative;margin:4px 16px 0;height:124px;border-radius:20px;background:#1F4842;box-shadow:0 10px 26px rgba(22,40,36,.14);color:#fff;touch-action:manipulation}
  .pc-b-copy{position:absolute;left:20px;top:0;bottom:0;width:46%;display:flex;flex-direction:column;justify-content:center;z-index:2}
  .pc-b-copy h2{margin:0;font-family:var(--font-display,Barlow),Barlow,system-ui,sans-serif;font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.05;color:#fff}
  .pc-b-s{margin:6px 0 0;font-size:13px;font-weight:500;color:rgba(255,255,255,.84)}
  .pc-casa{position:absolute;right:-6px;top:-40px;width:232px;height:174px;z-index:1;pointer-events:none}
  .pc-casa img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right bottom;display:block}
  /* separadores e seletor */
  html.pc-painel #tabs{display:none}
  html.pc-painel .filters{padding:12px 16px 0;gap:10px}
  html.pc-painel #seg{border-radius:999px;border:0;box-shadow:0 6px 18px rgba(22,40,36,.06);padding:5px}
  html.pc-painel #seg button{border-radius:999px;font-size:14px;color:var(--text)}
  html.pc-painel #seg button[aria-selected=true]{color:var(--cg-on-green)}
  html.pc-painel #seg .thumb{border-radius:999px;top:5px;bottom:5px}
  html.pc-painel .filters .select select{border:0;border-radius:14px;box-shadow:0 6px 18px rgba(22,40,36,.06);font-size:15px}
  html.pc-painel .view{padding-top:12px}
  /* cartões KPI: ilustração à esquerda, números à direita */
  html.pc-painel .kpis.k4{gap:10px}
  html.pc-painel .kpis .kpi{display:grid;grid-template-columns:40% minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:4px;overflow:hidden;align-content:start;min-height:124px;padding:14px 10px 12px 2px;border:0;border-radius:18px;box-shadow:0 6px 20px rgba(22,40,36,.07)}
  html.pc-painel .kpi>.k-art{display:block;grid-column:1;grid-row:1/-1;align-self:center}
  html.pc-painel .kpi>:not(.k-art):not(.skl){grid-column:2;min-width:0}
  html.pc-painel .kpi>.k-top{display:none}
  html.pc-painel .kpi>.label{margin:0;font-size:9.5px;line-height:1.25;letter-spacing:.07em;white-space:normal;color:var(--accent-text)}
  html.pc-painel .kpi .k-val{margin-top:4px;font-size:30px;font-weight:700;letter-spacing:-.03em}
  html.pc-painel .kpi .k-val small{font-size:13px;font-weight:600;color:var(--text)}
  html.pc-painel .kpi[data-kpi=horas] .k-val small{font-weight:500;color:var(--text-2)}
  html.pc-painel .kpi .k-foot{margin-top:6px;font-size:11px;line-height:1.35;min-height:0;align-items:flex-start;gap:4px}
  html.pc-painel .kpi .k-foot .st.sm{height:auto;min-height:20px;font-size:10.5px;line-height:1.2;padding:3px 6px;white-space:normal;max-width:100%}
  html.pc-painel .kpi.alert .badge-dot{margin-top:4px;flex:none}
  html.pc-painel .kpi[data-kpi=horas] .bar2{display:none}
  html.pc-painel .pc-hb{display:flex;gap:3px;margin:2px 0;width:100%}
  .pc-hb i{flex:1 1 0;max-width:12px;height:9px;border-radius:3px;background:#DFE8E5}
  .pc-hb i.on{background:var(--cg-green)}
  [data-theme=dark] .pc-hb i:not(.on){background:#2A3D38}
  html.pc-painel .kpi .hsplit{font-size:11px}
  /* ilustrações (pré-renderizadas, WebP) */
  .pc-ic{position:relative;display:block;width:100%;aspect-ratio:1/1.05;perspective:600px}
  .pc-ic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
  .pc-float{position:absolute;inset:0;transform-origin:50% 70%}
  .pc-p0{clip-path:inset(78% 0 0 0)}.pc-p1{clip-path:inset(68% 0 20% 0)}.pc-p2{clip-path:inset(58% 0 30% 0)}
  .pc-p3{clip-path:inset(46% 0 40% 0)}.pc-p4{clip-path:inset(32% 0 52% 0)}.pc-p5{clip-path:inset(0 0 66% 0)}
  .pc-chk{transform-origin:35% 40%}
  .pc-c1{clip-path:inset(22% 0 68% 0)}.pc-c2{clip-path:inset(34.5% 0 56% 0)}.pc-c3{clip-path:inset(46.5% 0 44% 0)}
  /* lista de obras do Painel: linha com ilustração, nome (principal), sigla e barra da % (média das etapas) */
  html.pc-painel .obras-sec{border:0;border-radius:20px;box-shadow:0 6px 20px rgba(22,40,36,.07);padding:16px 14px}
  html.pc-painel .obras-sec .card-h h2{font-size:22px;font-weight:700;letter-spacing:-.02em}
  html.pc-painel .obras-sec .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;margin:0 -2px}
  html.pc-painel .obras-sec .chips::-webkit-scrollbar{display:none}
  html.pc-painel .obras-sec .chip{min-height:var(--tap);padding:0 12px;font-size:13px}
  html.pc-painel .obras-sec .tiles{display:flex;flex-direction:column;gap:0}
  html.pc-painel .obras-sec .tile{display:grid;grid-template-columns:62px minmax(0,1fr) auto;grid-template-areas:"art name st" "art code code" "art bar bar" "art foot foot";column-gap:12px;row-gap:2px;align-items:center;min-height:0;padding:10px 2px;border:0;border-radius:12px;background:transparent;box-shadow:none}
  html.pc-painel .obras-sec .tile+.tile{border-top:1px solid var(--line);border-radius:0}
  html.pc-painel .obras-sec .tile:hover{transform:none;box-shadow:none}
  html.pc-painel .obras-sec .tile.sel{box-shadow:inset 3px 0 0 var(--cg-green)}
  html.pc-painel .obras-sec .tile.nova{display:none}
  html.pc-painel .obras-sec .t-art{display:block;grid-area:art;width:62px;height:62px}
  .t-art img{width:100%;height:100%;object-fit:contain;display:block}
  html.pc-painel .obras-sec .t-top{grid-area:st;display:flex;flex-direction:row;align-items:center;gap:6px;width:auto;margin:0}
  html.pc-painel .obras-sec .t-top .ring{display:none}
  html.pc-painel .obras-sec .t-top .st{margin:0;height:20px;font-size:11px;padding:0 7px}
  html.pc-painel .obras-sec .tile .flag{position:static;box-shadow:none;width:20px;height:20px}
  html.pc-painel .obras-sec .t-name{grid-area:name;font-size:16px;font-weight:600;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html.pc-painel .obras-sec .t-code{grid-area:code;font-size:11.5px}
  html.pc-painel .obras-sec .t-loc,html.pc-painel .obras-sec .t-areas,html.pc-painel .obras-sec .t-pct{display:none!important}
  html.pc-painel .obras-sec .t-bar{grid-area:bar;display:flex;align-items:center;gap:8px;margin-top:4px}
  html.pc-painel .obras-sec .t-bar .ptrack{flex:1;height:7px;border-radius:4px}
  html.pc-painel .obras-sec .t-bar .ptrack i{background:var(--cg-green);border-radius:4px}
  html.pc-painel .obras-sec .t-bar b{font-size:12px;font-weight:600;color:var(--text-2);min-width:32px;text-align:right}
  html.pc-painel .obras-sec .t-foot{grid-area:foot;font-size:11px;margin:0;min-height:0}
  html.pc-painel .obras-sec .t-foot:not(:has(.t-pend)){display:none}
}