/* Barlow 500 só no desktop — o móvel continua com 400/600/700 já carregados. */
@media (min-width: 1280px){
  @font-face{font-family:Barlow;src:url(../fonts/Barlow-Medium.ttf);font-weight:500;font-display:swap}
}

/* CG Drywall · layout desktop (≥1280 px, alvo 1440).
   Tokens oficiais do Designer: css/tokens-desktop.css
   ([data-tema="d2"][data-layout="desktop"]).
   Este ficheiro mapeia-os para --d-* (fáceis de trocar) e aplica a estrutura.
   Núcleo intocado: logo oficial, verde #5BA898, Barlow. */

/* ---- Mapeamento dos tokens (estrutura; valores de recurso se o guia ainda não estiver activo) ---- */
:root{
  /* Tipografia */
  --d-font: var(--f-familia, var(--font, Barlow, system-ui, sans-serif));
  --d-font-display: var(--f-familia, var(--font-display, "Barlow Condensed", Barlow, system-ui, sans-serif));
  --d-fw-regular: 400;
  --d-fw-semibold: 600;
  --d-fw-bold: 700;
  --d-fs-12: 12px;
  --d-fs-14: 14px;
  --d-fs-16: 16px;
  --d-fs-22: 22px;
  --d-fs-32: 32px;
  --d-fs-40: 40px;
  --d-fs-48: 48px;
  --d-lh-display: 48px;
  --d-lh-h1: 40px;
  --d-lh-h2: 30px;
  --d-lh-kpi: 52px;
  --d-lh-corpo: 24px;
  --d-lh-pequeno: 20px;
  --d-lh-micro: 16px;
  --d-f-display: var(--f-display, 600 40px/48px var(--d-font));
  --d-f-h1: var(--f-h1, 600 32px/40px var(--d-font));
  --d-f-h2: var(--f-h2, 600 22px/30px var(--d-font));
  --d-f-kpi: var(--f-kpi, 600 48px/52px var(--d-font));
  --d-f-corpo: var(--f-corpo, 400 16px/24px var(--d-font));
  --d-f-pequeno: var(--f-pequeno, 400 14px/20px var(--d-font));
  --d-f-micro: var(--f-micro, 600 12px/16px var(--d-font));

  /* Espaçamentos */
  --d-sp-1: var(--e-1, 4px);
  --d-sp-2: var(--e-2, 8px);
  --d-sp-3: var(--e-3, 12px);
  --d-sp-4: var(--e-4, 16px);
  --d-sp-5: var(--e-5, 24px);
  --d-sp-6: var(--e-6, 32px);
  --d-sp-7: var(--e-7, 40px);
  --d-sp-8: var(--e-8, 48px);
  --d-sp-9: var(--e-9, 64px);
  --d-pad-screen: var(--margem-ecra, 40px);
  --d-gap: var(--gutter, 24px);
  --d-gap-lg: var(--gutter, 24px);
  --d-tap: 44px;

  /* Raios */
  --d-r-chip: var(--r-chip, 999px);
  --d-r-botao: var(--r-botao, 12px);
  --d-r-lg: var(--r-cartao, 20px);
  --d-r-xl: var(--r-painel, 24px);
  --d-r-pill: var(--r-chip, 999px);

  /* Sombras */
  --d-sh-1: var(--s-1, 0 1px 0 rgba(255,255,255,.04) inset, 0 2px 6px rgba(0,0,0,.25));
  --d-sh-2: var(--s-2, 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px rgba(0,0,0,.35));
  --d-sh-3: var(--s-3, 0 1px 0 rgba(255,255,255,.06) inset, 0 20px 48px rgba(0,0,0,.45));
  --d-glow: var(--s-brilho-verde, 0 0 0 1px rgba(91,168,152,.55), 0 0 24px rgba(91,168,152,.25));

  /* Movimento */
  --d-dur-xs: var(--m-rapido, 120ms);
  --d-dur-sm: var(--m-base, 220ms);
  --d-dur-md: var(--m-entrada, 420ms);
  --d-dur-lg: var(--m-cena, 700ms);
  --d-stagger: var(--m-escalonar, 60ms);
  --d-ease-out: var(--m-ease-saida, cubic-bezier(.22, 1, .36, 1));
  --d-ease-in-out: var(--m-ease-padrao, cubic-bezier(.4, 0, .2, 1));
  --d-ease-spring: var(--m-ease-mola, cubic-bezier(.34, 1.56, .64, 1));

  /* Menu e grelha */
  --d-bp: 1280px;
  --d-side-w: var(--sidebar, 248px);
  --d-top-h: 64px;
  --d-content-max: var(--layout-max, 1600px);
  --d-colunas: var(--colunas, 12);
  --d-grid-gap: var(--gutter, 24px);
  --d-grid-min: 280px;
  --d-emails-lista: 40%;
  --d-v3d-painel: 360px;
  --d-v3d-min: 560px;
  --d-v3d-h: calc(100vh - 48px);
  --d-icon: 28px;
  --d-cat-min: 140px;
  --d-cot-min: 120px;
  --d-logo-h: 40px;
}

@media (prefers-reduced-motion: reduce){
  :root, [data-layout="desktop"]{
    --d-dur-xs: 0ms; --d-dur-sm: 0ms; --d-dur-md: 0ms; --d-dur-lg: 0ms; --d-stagger: 0ms;
  }
}

.em-acoes-desk{display:none}
@media (min-width:1280px){html[data-layout="desktop"] .em-acoes-desk{display:flex}}

/* Grelha dos widgets: empilha no móvel; no desktop enche 12 colunas sem buracos. */
#cg-painel-widgets,
.d-grelha,
.opo-widgets{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row dense;
  gap: var(--d-grid-gap);
  margin: 0 0 var(--d-gap);
  align-items: stretch;
}
#cg-painel-widgets > [hidden],
.d-grelha > [hidden],
.opo-widgets > [hidden]{ display: none !important; }
#cg-painel-widgets:empty{ margin: 0; display: none; }

/* Abaixo de 1280 px: layout móvel actual (menu inferior, sem barra lateral). */
@media (max-width: 1279px){
  html[data-layout="movel"] .app{ grid-template-columns: 1fr; }
  html[data-layout="movel"] .side{ display: none; }
  html[data-layout="movel"] .top .m-logo{ display: flex; align-items: center; flex: none; }
  html[data-layout="movel"] .bnav{ display: flex; }
  #cvApp .cv-side{ display: none !important; }
}

/* ========== Desktop ≥ 1280 px ========== */
@media (min-width: 1280px){
  html[data-layout="desktop"]{
    --side-w: var(--d-side-w);
    --top-h: var(--d-top-h);
    --d-kpi-ico: clamp(40px, 3.6vw, 56px);
  }

  html[data-layout="desktop"] .app{
    grid-template-columns: var(--d-side-w) minmax(0, 1fr);
  }
  html[data-layout="desktop"] .side{
    width: var(--d-side-w);
    padding: var(--d-sp-5) var(--d-sp-4);
    gap: var(--d-sp-5);
  }
  html[data-layout="desktop"] .side .logo{ height: var(--d-logo-h); padding: 0 var(--d-sp-2); }
  html[data-layout="desktop"] .side .logo img{ height: var(--d-logo-h); width: auto; max-width: 100%; object-fit: contain; }
  html[data-layout="desktop"] .nav a.on{ color: var(--c-sobre-verde, #0f2420); }
  html[data-layout="desktop"] .main{ min-width: 0; }
  html[data-layout="desktop"] .top{
    min-height: var(--d-top-h);
    padding: var(--d-sp-3) var(--d-pad-screen);
  }
  html[data-layout="desktop"] .top h1{ font: var(--d-f-h1); margin: 0; }
  html[data-layout="desktop"] .filters{ padding: var(--d-sp-4) var(--d-pad-screen) 0; gap: var(--d-sp-3); }
  html[data-layout="desktop"] .view{
    max-width: var(--d-content-max);
    width: 100%;
    padding: var(--d-sp-5) var(--d-pad-screen) var(--d-sp-8);
    box-sizing: border-box;
  }
  /* No Painel, a saudação substitui a barra de título (como no guia). */
  html[data-layout="desktop"].pc-painel .top,
  html[data-layout="desktop"][data-route="emails"] .top,
  html[data-layout="desktop"] .d-sem-topo .top{ display: none; }
  html[data-layout="desktop"].pc-painel .filters{ display: none; }

  /* 12 colunas + gutter 24 + margem 40. Área principal (herói 3D) ~8/12 ≈ 67%. */
  html[data-layout="desktop"] .d-painel-top{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--d-grid-gap);
    margin: 0 0 var(--d-grid-gap);
    align-items: stretch;
  }
  html[data-layout="desktop"] .d-heroi{ grid-column: span 8; min-width: 0; position: relative; overflow: hidden; }
  html[data-layout="desktop"] .d-kpis3{
    grid-column: span 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: var(--d-grid-gap);
    min-width: 0;
  }
  html[data-layout="desktop"] .d-kpis3 > .card{ min-width: 0; margin: 0; }

  html[data-layout="desktop"] #cg-painel-widgets,
  html[data-layout="desktop"] .d-grelha,
  html[data-layout="desktop"] .opo-widgets{
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: var(--d-grid-gap);
    margin: 0 0 var(--d-sp-6);
  }
  html[data-layout="desktop"] #cg-painel-widgets > .card,
  html[data-layout="desktop"] .d-grelha > .card,
  html[data-layout="desktop"] .opo-widgets > .card{
    grid-column: span 6; /* 2 por linha; 3 → span 4; 4 → dois pares de 6 */
    min-width: 0;
    margin: 0;
    height: auto;
    min-height: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  /* Sem buracos: 1 ou 3 widgets ocupam a linha toda; 2 ou 4 ficam em pares de 6. */
  html[data-layout="desktop"] #cg-painel-widgets:has(> :nth-child(1):last-child) > .card{ grid-column: span 12; }
  html[data-layout="desktop"] #cg-painel-widgets:has(> :nth-child(2):last-child) > .card{ grid-column: span 6; }
  html[data-layout="desktop"] #cg-painel-widgets:has(> :nth-child(3):last-child) > .card{ grid-column: span 4; }

  /* Saudação */
  html[data-layout="desktop"] .d-saudacao-wrap{ margin: 0 0 var(--d-sp-5); }
  html[data-layout="desktop"] .d-saudacao{
    font: var(--d-f-display);
    margin: 0;
    letter-spacing: -0.01em;
  }
  html[data-layout="desktop"] .d-saudacao-data{
    font: var(--d-f-pequeno);
    font-weight: 400;
    margin-left: var(--d-sp-3);
    color: var(--c-texto-2, var(--text-2));
    vertical-align: middle;
  }

  /* Área principal para o 3D no Painel (pronta para o próximo protótipo). */
  html[data-layout="desktop"] .d-heroi{
    /* Alto o suficiente em ecrãs grandes; nunca come o primeiro ecrã (dvh). */
    min-height: 220px;
    height: clamp(220px, 46dvh, min(560px, calc(100dvh - 18rem)));
    max-height: min(560px, calc(100dvh - 16rem));
    border-radius: var(--d-r-lg);
    box-shadow: var(--d-sh-2);
    display: flex;
    flex-direction: column;
    justify-content: stretch;
  }
  html[data-layout="desktop"] .d-heroi-cena{
    flex: 1;
    position: relative;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
  }
  html[data-layout="desktop"] .d-heroi-cena img{
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
  }
  html[data-layout="desktop"] .d-heroi-cena .v3d-palco,
  html[data-layout="desktop"] .d-heroi-cena .v3d-heroi{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    background: transparent;
    border-radius: inherit;
  }
  html[data-layout="desktop"] .d-heroi-cena .v3d-heroi canvas{
    display: block;
    width: 100%;
    height: 100%;
  }
  html[data-layout="desktop"] .d-heroi-cena:has(canvas) > img{ visibility: hidden; }
  html[data-layout="desktop"] .d-heroi .v3d-toolbar,
  html[data-layout="desktop"] .d-heroi .v3d-dica-canto,
  html[data-layout="desktop"] .d-heroi-btn,
  html[data-layout="desktop"] .d-heroi [data-vista3d]{ display: none; }

  /* Cartões e hover (guia: raio 20, s-2, sobe 2 px → s-3) */
  html[data-layout="desktop"] .view .card{
    border-radius: var(--d-r-lg);
    box-shadow: var(--d-sh-2);
    transition: transform var(--d-dur-xs) var(--d-ease-out), box-shadow var(--d-dur-sm) var(--d-ease-out);
  }
  html[data-layout="desktop"] .view .card:hover{
    transform: translateY(-2px);
    box-shadow: var(--d-sh-3);
  }
  html[data-layout="desktop"] .d-kpis3 .k-val,
  html[data-layout="desktop"] .d-kpis3 [data-count]{ font: var(--d-f-kpi); }
  html[data-layout="desktop"] .card-h h2,
  html[data-layout="desktop"] .emh-card h2,
  html[data-layout="desktop"] .nt-card h2,
  html[data-layout="desktop"] .pr-card h2,
  html[data-layout="desktop"] .opo-card h2{ font: var(--d-f-h2); }
  /* Labels KPI: micro 12 px, maiúsculas, sem cortar. Ícone 56 px no canto superior direito. */
  html[data-layout="desktop"] .d-kpis3 > .card.d-kpi,
  html[data-layout="desktop"] .d-kpis3 > .d-kpi{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 4px;
    padding: var(--d-sp-4);
    padding-right: 76px;
    text-align: left;
  }
  html[data-layout="desktop"] .d-kpis3 .label{
    font: var(--d-f-micro);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    margin: 0;
    max-width: 100%;
    color: var(--c-texto-2, #9DB3AD);
  }
  html[data-layout="desktop"] .d-kpi-ico{
    position: absolute;
    top: var(--d-sp-4);
    right: var(--d-sp-4);
    width: var(--d-kpi-ico, 56px);
    height: var(--d-kpi-ico, 56px);
    display: grid;
    place-items: center;
    pointer-events: none;
  }
  html[data-layout="desktop"] .d-kpi-ico .ica,
  html[data-layout="desktop"] .d-kpi-ico svg,
  html[data-layout="desktop"] .d-kpi-ico img{
    width: var(--d-kpi-ico, 56px);
    height: var(--d-kpi-ico, 56px);
  }

  /* Vista 3D: palco + painel de vidro 360 + controlos */
  html[data-layout="desktop"] .v3d-palco.d-v3d,
  html[data-layout="desktop"] .d-v3d.v3d-palco{
    min-height: var(--d-v3d-min);
    height: var(--d-v3d-h);
    border-radius: var(--d-r-xl);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--d-v3d-painel);
    grid-template-rows: 1fr auto;
  }
  html[data-layout="desktop"] .d-v3d > canvas{
    grid-column: 1;
    grid-row: 1 / -1;
    width: 100% !important;
    height: 100% !important;
  }
  html[data-layout="desktop"] .d-v3d .v3d-toolbar{ grid-column: 1 / -1; grid-row: 1; align-self: start; }
  html[data-layout="desktop"] .d-v3d-vidro{
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: var(--d-sp-5);
    padding: var(--d-sp-5);
    border-radius: var(--d-r-xl);
    background: rgba(18, 48, 43, .72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(230, 239, 236, .08);
    box-shadow: var(--d-sh-2);
    z-index: 4;
    color: var(--c-texto, #E6EFEC);
  }
  html[data-layout="desktop"] .d-v3d-vidro h2{ font: var(--d-f-h1); margin: 0 0 4px; }
  html[data-layout="desktop"] .d-v3d-sub{ font: var(--d-f-pequeno); color: var(--c-texto-2, #9DB3AD); margin: 0 0 var(--d-sp-4); }
  html[data-layout="desktop"] .d-v3d-lista{ list-style: none; margin: 0 0 var(--d-sp-5); padding: 0; display: grid; gap: var(--d-sp-3); }
  html[data-layout="desktop"] .d-v3d-lista li{ display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font: var(--d-f-pequeno); }
  html[data-layout="desktop"] .d-v3d-bar{ grid-column: 1 / -1; height: 6px; border-radius: var(--d-r-pill); background: rgba(230,239,236,.08); overflow: hidden; }
  html[data-layout="desktop"] .d-v3d-bar i{ display: block; height: 100%; background: var(--c-verde, #5BA898); border-radius: inherit; }
  html[data-layout="desktop"] .d-v3d-abrir{ display: block; text-align: center; text-decoration: none; }
  html[data-layout="desktop"] .d-v3d-controlos{
    grid-column: 1;
    grid-row: 2;
    z-index: 4;
    justify-self: start;
    margin: 0 0 var(--d-sp-5) var(--d-sp-5);
    display: flex;
    align-items: center;
    gap: var(--d-sp-2);
    padding: 8px 10px;
    border-radius: var(--d-r-pill);
    background: rgba(18, 48, 43, .72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(230, 239, 236, .08);
  }
  html[data-layout="desktop"] .d-v3d-btn{
    width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer;
  }
  html[data-layout="desktop"] .d-v3d-btn:hover{ background: rgba(91,168,152,.18); }
  html[data-layout="desktop"] .d-v3d-expl{
    display: inline-flex; align-items: center; gap: 8px;
    font: var(--d-f-pequeno); padding: 0 8px; cursor: pointer;
  }
  html[data-layout="desktop"] .d-v3d-expl input{ accent-color: var(--c-verde, #5BA898); }

  /* E-mails 40 / 60 */
  html[data-layout="desktop"] .em-wrap.em-desk{
    max-width: none;
    height: calc(100vh - var(--d-sp-8));
    min-height: 520px;
    gap: var(--d-grid-gap);
  }
  html[data-layout="desktop"] .em-desk-grid{
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: var(--d-grid-gap);
    align-items: stretch;
    min-height: 0;
    flex: 1;
  }
  html[data-layout="desktop"] .em-desk-lista,
  html[data-layout="desktop"] .em-desk-conv{
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }
  html[data-layout="desktop"] .em-desk .em-lista,
  html[data-layout="desktop"] .em-desk-conv .em-det{
    margin: 0;
    flex: 1 1 auto;
    min-height: 100%;
    border-radius: var(--d-r-lg);
    box-shadow: var(--d-sh-2);
  }
  html[data-layout="desktop"] .em-desk .em-row.on,
  html[data-layout="desktop"] .em-desk .em-row[aria-current="page"]{
    background: rgba(91,168,152,.12);
    box-shadow: inset 3px 0 0 var(--c-verde, #5BA898);
  }
  html[data-layout="desktop"] .em-desk .em-dh,
  html[data-layout="desktop"] .em-desk [data-em-voltar]{ display: none; }
  html[data-layout="desktop"] .em-chips{
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  }
  html[data-layout="desktop"] .em-chips button,
  html[data-layout="desktop"] .em-chip{
    appearance: none; font: var(--d-f-pequeno); font-weight: 600;
    min-height: 36px; padding: 0 14px; border-radius: var(--d-r-chip);
    border: 1px solid var(--c-linha, var(--line));
    background: transparent; color: inherit; cursor: pointer;
  }
  html[data-layout="desktop"] .em-chips button[aria-selected="true"],
  html[data-layout="desktop"] .em-chip.on{
    background: var(--c-verde, #5BA898); color: var(--c-sobre-verde, #0f2420); border-color: transparent;
  }
  html[data-layout="desktop"] .em-acoes-desk{ display: flex; gap: 12px; margin-top: var(--d-sp-5); }
  html[data-layout="desktop"] .em-acoes-desk .btn.pri{
    background: var(--c-verde, #5BA898); color: var(--c-sobre-verde, #0f2420);
  }

  /* Catálogos e cotações: 3–4 por linha */
  html[data-layout="desktop"] .cat-marcas{ grid-template-columns: repeat(auto-fill, minmax(var(--d-cat-min), 1fr)); gap: var(--d-sp-3); }
  html[data-layout="desktop"] .cot-tiles{ grid-template-columns: repeat(auto-fill, minmax(var(--d-cot-min), 1fr)); gap: var(--d-sp-3); }

  html[data-layout="desktop"] .grid.g-split,
  html[data-layout="desktop"] .grid.g-charts{ gap: var(--d-grid-gap); }

  /* Cliente / convidado / equipa externa */
  html[data-layout="desktop"] #cvApp.cv{
    display: grid;
    grid-template-columns: var(--d-side-w) minmax(0, 1fr);
    min-height: 100vh;
  }
  html[data-layout="desktop"] #cvApp .cv-side{
    display: flex; position: sticky; top: 0; height: 100vh;
    flex-direction: column; gap: var(--d-sp-5);
    width: var(--d-side-w); padding: var(--d-sp-5) var(--d-sp-4);
    border-width: 0 1px 0 0; z-index: 30;
  }
  html[data-layout="desktop"] #cvApp .cv-side .logo img{ height: var(--d-logo-h); width: auto; }
  html[data-layout="desktop"] #cvApp .cv-side .nav{ display: flex; flex-direction: column; gap: 2px; }
  html[data-layout="desktop"] #cvApp .cv-side .nav button{
    appearance: none; font: inherit; font-weight: 600; text-align: left; width: 100%;
    display: flex; align-items: center; gap: var(--d-sp-3);
    min-height: var(--d-tap); padding: 0 var(--d-sp-3);
    border: 0; border-radius: var(--d-r-lg); background: transparent; color: var(--text-2); cursor: pointer;
  }
  html[data-layout="desktop"] #cvApp .cv-side .nav button.on{
    color: var(--c-sobre-verde, #0f2420); background: var(--c-verde, #5BA898);
  }
  html[data-layout="desktop"] #cvApp .cv-shell{ min-width: 0; display: flex; flex-direction: column; }
  html[data-layout="desktop"] #cvApp .cv-top{ min-height: var(--d-top-h); padding: var(--d-sp-3) var(--d-pad-screen); }
  html[data-layout="desktop"] #cvApp .cv-top .cv-brand{ display: none; }
  html[data-layout="desktop"] #cvApp .cv-tabs{ display: none; }
  html[data-layout="desktop"] #cvApp .cv-main{
    max-width: var(--d-content-max); width: 100%; box-sizing: border-box;
    padding: var(--d-sp-5) var(--d-pad-screen) var(--d-sp-8);
  }
  html[data-layout="desktop"] #cvApp .cv-h1{ font: var(--d-f-h1); }
  html[data-layout="desktop"] .d-cliente .filters{ display: none !important; }
  html[data-layout="desktop"] .side .side-pref .radios{ grid-auto-flow: row; }

  html[data-layout="desktop"] .nav a,
  html[data-layout="desktop"] .em-row,
  html[data-layout="desktop"] .btn,
  html[data-layout="desktop"] .icon-btn{
    transition: background var(--d-dur-sm) var(--d-ease-out), color var(--d-dur-sm) var(--d-ease-out);
  }
}

/* Tema D2: cartões e fundo alinhados ao guia (só com o seletor do Designer). */
@media (min-width: 1280px){
  [data-tema="d2"][data-layout="desktop"] .view .card,
  [data-tema="d2"][data-layout="desktop"] .d-heroi,
  [data-tema="d2"][data-layout="desktop"] .em-desk .em-lista,
  [data-tema="d2"][data-layout="desktop"] .em-desk-conv .em-det{
    background: var(--c-superficie, #12302B);
    border-radius: var(--r-cartao, 20px);
  }
}


/* Ajustes só desktop (≥1280): menu do utilizador, grelha sem buracos, reserva 3D. */
@media (min-width: 1280px){
  /* 4 cartões por baixo do herói: duas colunas de 6, alturas iguais na linha. */
  html[data-layout="desktop"] #cg-painel-widgets:has(> :nth-child(4):last-child) > .card{ grid-column: span 6; }
  html[data-layout="desktop"] #cg-painel-widgets,
  html[data-layout="desktop"] .d-grelha{ align-items: stretch; }

  html[data-layout="desktop"] .obras-sec{
    margin: 0 0 var(--d-grid-gap);
  }
  html[data-layout="desktop"] .grid.g-split,
  html[data-layout="desktop"] .grid.g-charts{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--d-grid-gap);
    margin: 0 0 var(--d-grid-gap);
    align-items: stretch;
  }
  html[data-layout="desktop"] .grid.g-split > .card,
  html[data-layout="desktop"] .grid.g-charts > .card{
    grid-column: span 6;
    margin: 0;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  /* 13/11 correção: na vista da obra (#/obra/…) e no Início do funcionário, a g-split não tem cartões
     directos mas colunas (.col / div). Com a grelha de 12 colunas cada coluna ficava com 1/12 (≈ 90 px),
     e os cartões ficavam sobrepostos e fora da grelha. Repõe as duas colunas aprovadas (1,15 : 1), como antes de 12/11 22:06. */
  html[data-layout="desktop"] .grid.g-split:has(> :not(.card)){
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
  }
  html[data-layout="desktop"] .grid.g-split:has(> :not(.card)) > *{
    grid-column: auto;
    min-width: 0;
  }

  /* Sem entrada/botão «Vista 3D» a duplicar a área do Painel. */
  html[data-layout="desktop"] .nav a[data-route="vista3d"],
  html[data-layout="desktop"] .nav a[href="#/vista3d"],
  html[data-layout="desktop"] .obras-sec [data-vista3d]{ display: none; }

  /* Barra: só etiqueta EXEMPLO; preferências passam ao menu do cartão do utilizador. */
  html[data-layout="desktop"] .side .foot{ position: relative; gap: var(--d-sp-3); }
  html[data-layout="desktop"] .side .foot > .ex-tag{
    font-size: 0;
    letter-spacing: 0;
    align-self: flex-start;
    padding: 3px 8px;
  }
  html[data-layout="desktop"] .side .foot > .ex-tag::after{
    content: "EXEMPLO";
    font: var(--d-f-micro);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  html[data-layout="desktop"] .side .foot > .side-pref{ display: none; }
  html[data-layout="desktop"] .side #me{
    cursor: pointer;
    border-radius: var(--d-r-botao);
    padding: 8px;
    margin: 0 -8px;
  }
  html[data-layout="desktop"] .side #me:hover,
  html[data-layout="desktop"] .side #me[aria-expanded="true"]{
    background: rgba(91,168,152,.12);
  }
  html[data-layout="desktop"] .d-me-menu{
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 40;
    padding: var(--d-sp-3);
    border-radius: var(--d-r-lg);
    background: var(--c-superficie-2, #162824);
    box-shadow: var(--d-sh-3);
    display: flex;
    flex-direction: column;
    gap: var(--d-sp-3);
  }
  html[data-layout="desktop"] .d-me-menu[hidden]{ display: none; }
  html[data-layout="desktop"] .d-me-menu .side-pref{ display: block; margin: 0; }
  html[data-layout="desktop"] .d-me-menu .side-pref .radios{
    grid-auto-flow: row;
    gap: 4px;
  }
  html[data-layout="desktop"] .d-me-menu .side-pref label{
    font: var(--d-f-pequeno);
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
  }

  html[data-layout="desktop"] .nav a[data-route="painel"] .ica,
  html[data-layout="desktop"] .nav a[data-route="painel"] svg{
    width: 28px;
    height: 28px;
  }
}


/* ---- Painel fluido: ecrãs baixos (prioridade 1366×650) e grelha por altura ---- */
@media (min-width: 1280px) and (max-height: 760px){
  html[data-layout="desktop"]{
    --d-grid-gap: 12px;
    --d-kpi-ico: 40px;
    --d-pad-screen: 20px;
  }
  html[data-layout="desktop"] .view{
    padding: 12px var(--d-pad-screen) 10px;
  }
  html[data-layout="desktop"].pc-painel .view{
    padding-bottom: 10px;
  }
  html[data-layout="desktop"] .d-saudacao-wrap{ margin: 0 0 8px; }
  html[data-layout="desktop"] .d-painel-top{
    gap: 12px;
    margin: 0 0 12px;
  }
  /* Herói reduzido: deixa sítio à primeira fila de janelas, sem scroll no primeiro ecrã. */
  html[data-layout="desktop"] .d-heroi{
    min-height: 200px;
    height: clamp(200px, calc(100dvh - 20.5rem), 300px);
    max-height: calc(100dvh - 20.5rem);
  }
  html[data-layout="desktop"] .d-kpis3{ gap: 12px; }
  html[data-layout="desktop"] .d-kpis3 > .card.d-kpi,
  html[data-layout="desktop"] .d-kpis3 > .d-kpi{
    padding: 10px 12px;
    padding-right: 56px;
  }
  html[data-layout="desktop"] #cg-painel-widgets,
  html[data-layout="desktop"] .d-grelha{
    gap: 12px;
    margin: 0 0 12px;
  }
  html[data-layout="desktop"] #cg-painel-widgets > .card{
    padding: 10px 14px;
  }
  html[data-layout="desktop"] .side{
    padding: 12px 12px;
    gap: 12px;
  }
}

/* Ecrãs altos: o herói pode crescer um pouco, sem passar de 56dvh. */
@media (min-width: 1280px) and (min-height: 1000px){
  html[data-layout="desktop"] .d-heroi{
    height: clamp(280px, 48dvh, 620px);
    max-height: min(620px, calc(100dvh - 16rem));
  }
}

/* ===== Disposição do Painel v2 (12/11, só desktop ≥1280 px) =====
   Uma linha de topo com altura única (herói + KPI), gaps 20–24 px, 1.ª fila de cartões acima da dobra,
   cartões com alturas iguais por fila e página curta (conteúdo longo rola dentro do cartão). */
@media (min-width: 1280px){
  html[data-layout="desktop"]{
    --d-grid-gap: clamp(20px, 1.5vw, 24px);
    --d-topo-h: clamp(250px, calc(100dvh - 330px), 560px);
    --d-fila-h: clamp(260px, calc(100dvh - 380px), 420px);
  }
  html[data-layout="desktop"] .d-painel-top{
    gap: var(--d-grid-gap);
    margin: 0 0 var(--d-grid-gap);
    grid-template-rows: var(--d-topo-h);
  }
  html[data-layout="desktop"] .d-heroi{
    height: var(--d-topo-h); min-height: 0; max-height: none;
  }
  html[data-layout="desktop"] .d-heroi-cena{ height: 100%; }
  html[data-layout="desktop"] .d-heroi-carrega{ position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(60% 55% at 50% 50%, rgba(91,168,152,.10), transparent 70%); }
  html[data-layout="desktop"] .d-heroi-pronto .d-heroi-carrega{ display: none; }
  html[data-layout="desktop"] .d-kpis3{
    height: var(--d-topo-h); min-height: 0;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: var(--d-grid-gap);
  }
  html[data-layout="desktop"] .d-kpis3 > .card.d-kpi,
  html[data-layout="desktop"] .d-kpis3 > .d-kpi{
    min-height: 0; height: auto; overflow: hidden;
    padding: clamp(10px, 1.6dvh, 20px) clamp(12px, 1.1vw, 20px);
    padding-right: calc(var(--d-kpi-ico, 48px) + 24px);
    justify-content: center;
  }
  html[data-layout="desktop"] .d-kpis3 .k-val,
  html[data-layout="desktop"] .d-kpis3 [data-count]{ font-size: clamp(26px, 4.6dvh, 48px); line-height: 1.05; }
  html[data-layout="desktop"] .d-kpi-ico{ top: 50%; transform: translateY(-50%); }
  html[data-layout="desktop"]{ --d-kpi-ico: clamp(36px, min(3.4vw, 6dvh), 56px); }

  /* Fila de widgets (E-mails, Oportunidades, …): mesma altura, rola por dentro. */
  html[data-layout="desktop"] #cg-painel-widgets,
  html[data-layout="desktop"] .d-grelha{ gap: var(--d-grid-gap); margin: 0 0 var(--d-grid-gap); }
  html[data-layout="desktop"] #cg-painel-widgets > .card{
    max-height: var(--d-fila-h); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
  html[data-layout="desktop"] .obras-sec{ margin: 0 0 var(--d-grid-gap); }
  html[data-layout="desktop"] #view > .grid.g-split{ gap: var(--d-grid-gap); margin: 0 0 var(--d-grid-gap); }
  /* Mapa + lista: a lista não estica a fila; rola dentro da altura do mapa. */
  html[data-layout="desktop"] #view > .grid.g-split:has(.map) > .card:not(:has(.map)){
    contain: size; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
  html[data-layout="desktop"] #view > .grid.g-split:empty{ display: none; }
  html[data-layout="desktop"].pc-painel .view{ padding-bottom: var(--d-grid-gap); }

  /* Botão «Expandir» e Vista 3D expandida (ocupa a área de conteúdo, por cima do resto). */
  html[data-layout="desktop"] .d-heroi-expandir{
    position: absolute; top: 12px; right: 12px; z-index: 3;
    background: rgba(10,18,16,.55); backdrop-filter: blur(8px); border: 1px solid rgba(230,239,236,.14);
  }
  html[data-layout="desktop"] .d-heroi.d-heroi-aberto{
    position: fixed; z-index: 60; inset: 16px 16px 16px calc(var(--d-side-w) + 16px);
    height: auto; max-height: none; transform: none;
  }
  html[data-layout="desktop"] .d-heroi.d-heroi-aberto .v3d-toolbar,
  html[data-layout="desktop"] .d-heroi.d-heroi-aberto .v3d-dica-canto{ display: flex; }
  html[data-layout="desktop"].d-3d-aberto .view > :not(.d-painel-top),
  html[data-layout="desktop"].d-3d-aberto .d-kpis3{ visibility: hidden; }
}
/* Ecrãs baixos (≤760 px de altura, ex. 1366×768 com barras ≈ 650): saudação compacta. */
@media (min-width: 1280px) and (max-height: 760px){
  html[data-layout="desktop"] .view{ padding-top: 10px; }
  html[data-layout="desktop"] .d-saudacao-wrap{ margin: 0 0 10px; }
  html[data-layout="desktop"] .d-painel-top{ gap: var(--d-grid-gap); margin: 0 0 var(--d-grid-gap); }
  html[data-layout="desktop"] .d-kpis3{ gap: 14px; }
  html[data-layout="desktop"] #cg-painel-widgets, html[data-layout="desktop"] .d-grelha{ gap: var(--d-grid-gap); }
}
/* Ecrãs altos (≥1000 px): topo pode crescer até 600 px. */
@media (min-width: 1280px) and (min-height: 1000px){
  html[data-layout="desktop"]{
    --d-topo-h: clamp(420px, calc(100dvh - 520px), 600px);
    --d-fila-h: clamp(320px, 34dvh, 460px);
  }
}
/* Ecrãs muito largos: a área cresce com o ecrã (até 2100 px) e fica centrada, sem faixa vazia à direita. */
@media (min-width: 1280px){
  html[data-layout="desktop"] .view{ margin-inline: auto; }
}
@media (min-width: 2000px){
  html[data-layout="desktop"]{ --d-content-max: clamp(1600px, 82vw, 2100px); }
}

/* ===== Materiais e catálogos das marcas: fotos (só desktop) =====
   Sem foto segura → só o nome (sem ícone genérico). */
@media (min-width: 1280px) {
  [data-layout="desktop"] .m-ph-ic { display: none !important; }
  [data-layout="desktop"] .m-ph:not(:has(img)) { aspect-ratio: auto; min-height: 0; padding: 10px 12px 0; background: none; border-bottom: 0; display: flex; justify-content: flex-start; }
  [data-layout="desktop"] .m-ph:not(:has(img)) .m-badge { position: static; }
  [data-layout="desktop"] .mt-ph:not(:has(img)) { display: none; }
  [data-layout="desktop"] .cat-prod.tem-foto { gap: 12px; }
  [data-layout="desktop"] .cat-prod-foto { flex: 0 0 64px; width: 64px; height: 48px; object-fit: contain; background: #fff; border-radius: 8px; padding: 3px; border: 1px solid var(--line-2); }
}

/* ===== Cotações: cartões (só desktop) ===== */
@media (min-width: 1280px) {
  html[data-layout="desktop"] .cot-tiles.cot-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--d-grid-gap, 20px); max-width: 1600px; }
  html[data-layout="desktop"] .cot-forn-g { margin: 0 0 14px; }
  html[data-layout="desktop"] .cot-card { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; text-align: left; border-radius: 14px; background: var(--d-card, var(--surface)); min-height: 132px; }
  html[data-layout="desktop"] .cot-card.on { outline: 2px solid var(--accent-text); outline-offset: 0; }
  html[data-layout="desktop"] .cot-card-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
  html[data-layout="desktop"] .cot-card .cot-ic { flex: 0 0 48px; width: 48px; height: 48px; background: #fff; border-radius: 10px; padding: 4px; box-sizing: border-box; }
  html[data-layout="desktop"] .cot-card .cot-ic img { width: 100%; height: 100%; }
  html[data-layout="desktop"] .cot-card .cot-ic.cot-ic-escuro { background: #162824; }
  html[data-layout="desktop"] .cot-card .cot-ic:not(:has(img)) { background: none; padding: 0; }
  html[data-layout="desktop"] .cot-card-f { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
  html[data-layout="desktop"] .cot-card-f b, html[data-layout="desktop"] .cot-card-f span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-layout="desktop"] .cot-card-f span { font-size: 12px; }
  html[data-layout="desktop"] .cot-card .st { flex: 0 0 auto; }
  html[data-layout="desktop"] .cot-card-b { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px 12px; }
  html[data-layout="desktop"] .cot-card-b > span { display: flex; flex-direction: column; min-width: 0; }
  html[data-layout="desktop"] .cot-card-b small { font-size: 11px; color: var(--muted, inherit); opacity: .8; }
  html[data-layout="desktop"] .cot-card-b b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
}
@media (min-width: 1280px) {
  html[data-layout="desktop"] .cot-card-f .cot-card-cod { display: flex; align-items: center; gap: 8px; margin-top: 3px; overflow: visible; }
}
/* DESIGN.conf [cotacoes]: no máximo 5 colunas (3 a 1280, 4 a 1366/1536, 5 a 1920/2560) */
@media (min-width: 1280px) {
  html[data-layout="desktop"] .cot-tiles.cot-cards { grid-template-columns: repeat(auto-fill, minmax(max(240px, calc((100% - 4 * var(--d-grid-gap, 20px)) / 5)), 1fr)); }
}