/* =============================================================================
   gg-ds.css — sistema de design "gg-ds" (identidade visual unica)
   Build: gg-ds-v4-colab+alias-completos(portal-07)+f1-fundacao(2026-10-16) · 2026-10-10 · Bruno · spec: Clara (spec_cockpit_gg_ds.md + spec_vista_colaborador.md)

   ONDA 0 (este ficheiro) -- tokens + componentes C1-C5. SEM efeito visual nas
   paginas existentes: so' define variaveis --gg-* e classes .gg-*. Nenhum
   selector aqui apanha elementos que ja' existam nas paginas actuais, e os
   tokens legados (--n-* · --bri-* · --bg/--tile-*) NAO sao tocados.

   TEMA: SISTEMA por defeito + toggle (nao ha tema "o" tema). Os dois conjuntos
   de tokens tem o mesmo peso. O mecanismo e' o que ja' existe nas paginas
   (boot em linha no <head>: localStorage['gg-theme'] + classes html.dark /
   html.light-mode, seguindo prefers-color-scheme enquanto nao houver escolha
   guardada). Este ficheiro NAO cria outro: le as mesmas classes. Sem classe
   nenhuma (pagina sem boot), cai no @media prefers-color-scheme.

   REGRA DE COR (a do Guilherme -- monocromatico, cor so' em alertas): verde e
   vermelho aparecem SO' onde ha comparacao a ritmo ou a objectivo (arco, fill
   da barra, chip de estado). Numeros, rotulos, tiles e barras de ranking sao
   neutros. Nunca cor decorativa; cor nunca e' o unico sinal (icone + palavra).
   ============================================================================= */

/* Tokens (largura + cor/espaco): UM ficheiro so' -- assets/gg-tokens.css (portal-06). O @import tem de ser a 1.a regra. */
@import url("gg-tokens.css");

/* ── Aliases dos tokens legados -> --gg-* (portal-07: COMPLETOS · ONDAS 2-4 · DESLIGADOS) ─────────────────
   Quando uma pagina migra, ganha <html class="gg-unificado"> e as familias legadas (--bri-* · --sem-* · --n-* ·
   hub --bg, --tile-*, --btn-* · regioes --surface, --line, ...) deixam de ter valores proprios e apontam para --gg-*.
   Reverter e' tirar a classe. DORMENTE: nenhuma pagina tem a classe, logo nada muda no visual de nenhuma pagina.
   SELECTOR  `:root.gg-unificado` (0,2,0, o mesmo elemento que `html.gg-unificado`): ganha a `html.dark` /
   `html.light-mode` (0,1,1) das folhas legadas e a `:root` (0,1,0) dos <style> locais, QUALQUER que seja a ordem de
   carregamento (com `html.gg-unificado` (0,1,1) o empate decidia-se pela ordem do <link>).
   NAO aliasados de proposito (decisao da Clara, passos 12+): --bri-fg-sub/-bg-alt/-perigo/-bg-sidebar/-bg-elev/-hover
   (usados, MAS nao definidos em lado nenhum); tokens locais a 1 pagina (--bri-code-*, --bri-table-header, --sem-*-fg do
   briefing, --sem-erro); --chat-* e --orange (D8 pendente); --dm-* (parametros do .gg-dmhead, ja' seguem os tokens). */
:root.gg-unificado {
  /* xiaomi-common.css */
  --bri-bg: var(--gg-bg);
  --bri-bg-card: var(--gg-card);
  --bri-fg: var(--gg-texto);
  --bri-fg-muted: var(--gg-texto-2);
  --bri-fg-faint: var(--gg-texto-3);
  --bri-border: var(--gg-linha);
  --bri-border-strong: var(--gg-linha);
  --bri-divider: var(--gg-linha);
  --bri-accent: var(--gg-texto);          /* o acento laranja neutraliza-se: cor so' em alertas (spec 3.1.5) */
  --bri-accent-fg: var(--gg-bg);          /* texto por cima do acento */
  --bri-header-bg: var(--gg-bg);          /* era translucido (#...cc + blur); opaco aqui */
  /* semaforo-tokens.css + style.css: verde/ambar/vermelho so' em estado; neutro em cinza */
  --sem-good: var(--gg-acima);
  --sem-warn: var(--gg-atencao);
  --sem-bad: var(--gg-abaixo);
  --sem-neutral: var(--gg-texto-3);
  --sem-good-bg-dark: var(--gg-acima-bg);    --sem-good-bg-light: var(--gg-acima-bg);
  --sem-good-border-dark: var(--gg-acima-bg); --sem-good-border-light: var(--gg-acima-bg);   /* chip sem filete, como o .gg-chip */
  --sem-good-text-dark: var(--gg-acima);     --sem-good-text-light: var(--gg-acima);
  --sem-warn-bg-dark: var(--gg-atencao-bg);  --sem-warn-bg-light: var(--gg-atencao-bg);
  --sem-warn-border-dark: var(--gg-atencao-bg); --sem-warn-border-light: var(--gg-atencao-bg);
  --sem-warn-text-dark: var(--gg-atencao);   --sem-warn-text-light: var(--gg-atencao);
  --sem-bad-bg-dark: var(--gg-abaixo-bg);    --sem-bad-bg-light: var(--gg-abaixo-bg);
  --sem-bad-border-dark: var(--gg-abaixo-bg); --sem-bad-border-light: var(--gg-abaixo-bg);
  --sem-bad-text-dark: var(--gg-abaixo);     --sem-bad-text-light: var(--gg-abaixo);
  --sem-neut-bg-dark: var(--gg-card-2);      --sem-neut-bg-light: var(--gg-card-2);
  --sem-neut-border-dark: var(--gg-linha);   --sem-neut-border-light: var(--gg-linha);
  --sem-neut-text-dark: var(--gg-texto-2);   --sem-neut-text-light: var(--gg-texto-2);
  /* personal.html (Notion) */
  --n-bg: var(--gg-bg);
  --n-fg: var(--gg-texto);
  --n-fg-sub: var(--gg-texto-2);
  --n-fg-light: var(--gg-texto-3);
  --n-border: var(--gg-linha);
  --n-hover: var(--gg-card-2);
  --n-radius: var(--gg-raio-barra);
  --n-blue: var(--gg-texto);
  /* style.css (hub): botao e cartao como o .gg-btn / .gg-card (sem sombra, filete) */
  --bg: var(--gg-bg);
  --fg: var(--gg-texto);
  --fg-muted: var(--gg-texto-2);
  --border: var(--gg-linha);
  --tile-bg: var(--gg-card);
  --tile-shadow: none;
  --tile-shadow-hover: none;
  --btn-bg: var(--gg-card-2);
  --btn-fg: var(--gg-texto);
  --btn-hover-bg: var(--gg-track);
  --radius-tile: var(--gg-raio-tile);
  --radius-btn: 12px;                     /* = .gg-btn */
  /* paginas das regioes (gerar_tarefas_regiao.py) */
  --surface: var(--gg-card);
  --muted: var(--gg-texto-2);
  --line: var(--gg-linha);
  --accent: var(--gg-texto);
  --ok-bg: var(--gg-card-2);
  --ok-fg: var(--gg-texto-2);
  --pend-bg: var(--gg-atencao-bg);
  --pend-fg: var(--gg-atencao);
  --chip: var(--gg-card-2);
  --desv: var(--gg-abaixo);
  --th: var(--gg-card-2);
}

/* ── Base dos componentes ─────────────────────────────────────────────────── */
.gg-ds, .gg-ds * { box-sizing: border-box; }
.gg-ds {
  font-family: var(--gg-fonte);
  color: var(--gg-texto);
  -webkit-font-smoothing: antialiased;
}
.gg-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.gg-unid { font-size: .5em; color: var(--gg-texto-2); font-weight: 600; margin-left: .15em; letter-spacing: 0; }
.gg-card {
  background: var(--gg-card);
  border-radius: var(--gg-raio-card);
  padding: var(--gg-e5);
  border: 1px solid var(--gg-linha);
}
.gg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Grelha da ficha (v2, spec_cockpit_gg_ds_v2_layout) ───────────────────────
   UMA ficha de cada vez, em largura util (tecto = --gg-largura; era 1280 fixo ate' dm-largura-v1). Os breakpoints medem-se no
   CONTENTOR da ficha (container query), nao no viewport: o cockpit tem margens e
   cabecalho. xs < 640 · md 640-1023 · lg >= 1024. Sem suporte a container
   queries, o bloco @supports not (...) repete as mesmas regras com media queries
   (largura do viewport). */
.gg-fichas { display: block; margin: 0 0 var(--gg-e4); }
.gg-ficha { container-type: inline-size; container-name: gg; width: 100%; max-width: var(--gg-largura, none); margin: 0 auto; }
.gg-fgrid {
  display: grid; gap: 12px; align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "fat" "obj" "hom" "vend" "oq" "rod";
}
.gg-fgrid--colab { grid-template-areas: "head" "fat" "obj" "par" "vend" "oq" "rod"; }
.gg-a-head { grid-area: head; }
.gg-a-fat  { grid-area: fat; }
.gg-a-obj  { grid-area: obj; }
.gg-a-hom  { grid-area: hom; }
.gg-a-vend { grid-area: vend; }
.gg-a-rod  { grid-area: rod; }
.gg-a-fat > .gg-card, .gg-a-hom > .gg-card, .gg-a-par > .gg-card, .gg-a-obj > .gg-card { height: 100%; }
.gg-vend { display: flex; flex-direction: column; gap: 12px; }
.gg-v-outras { order: 1; } .gg-v-tickets { order: 2; } .gg-v-foot { order: 3; }
.gg-vend > div:empty { display: none; }
.gg-vend .gg-tiles-tit { margin-top: 0; }
.gg-cabeca { display: flex; flex-direction: column; gap: var(--gg-e2); }
.gg-v-outras { grid-area: outras; } .gg-v-tickets { grid-area: tickets; } .gg-v-foot { grid-area: foot; }

/* md e lg: os 3 grupos de tiles passam a celulas PROPRIAS da grelha (display: contents),
   para o Homologo (alto: 9 linhas + tendencia) poder abranger varias linhas ao lado de
   uma pilha de cartoes -- sem cartoes a meio vazios (regra da spec §3). */
@container gg (min-width: 640px) {
  .gg-fgrid {
    gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "head   head   head   head   head   head   head   head   head   head   head   head"
      "fat    fat    fat    fat    fat    fat    fat    fat    fat    fat    fat    fat"
      "obj    obj    obj    obj    obj    obj    hom    hom    hom    hom    hom    hom"
      "outras outras outras outras outras outras hom    hom    hom    hom    hom    hom"
      "foot   foot   foot   foot   foot   foot   hom    hom    hom    hom    hom    hom"
      "tickets tickets tickets tickets tickets tickets hom   hom    hom    hom    hom    hom"
      "oq    oq    oq    oq    oq    oq    oq    oq    oq    oq    oq    oq"
      "rod    rod    rod    rod    rod    rod    rod    rod    rod    rod    rod    rod";
  }
  .gg-fgrid--colab {
    grid-template-areas:
      "head   head   head   head   head   head   head   head   head   head   head   head"
      "fat    fat    fat    fat    fat    fat    fat    fat    fat    fat    fat    fat"
      "obj    obj    obj    obj    obj    obj    par    par    par    par    par    par"
      "outras outras outras outras outras outras par    par    par    par    par    par"
      "tickets tickets tickets tickets tickets tickets par   par    par    par    par    par"
      "oq    oq    oq    oq    oq    oq    oq    oq    oq    oq    oq    oq"
      "rod    rod    rod    rod    rod    rod    rod    rod    rod    rod    rod    rod";
  }
  .gg-vend { display: contents; }
  .gg-v-outras, .gg-v-tickets, .gg-v-foot { order: 0; }
}
@container gg (min-width: 1024px) {
  .gg-fgrid {
    grid-template-areas:
      "head   head   head   head   head   head   head   head   head   head   head   head"
      "fat    fat    fat    fat    fat    fat    fat    hom    hom    hom    hom    hom"
      "obj    obj    obj    obj    obj    obj    obj    hom    hom    hom    hom    hom"
      "outras outras outras outras tickets tickets tickets tickets foot  foot   foot   foot"
      "oq    oq    oq    oq    oq    oq    oq    oq    oq    oq    oq    oq"
      "rod    rod    rod    rod    rod    rod    rod    rod    rod    rod    rod    rod";
  }
  .gg-fgrid--colab {
    grid-template-areas:
      "head   head   head   head   head   head   head   head   head   head   head   head"
      "fat    fat    fat    fat    fat    fat    fat    par    par    par    par    par"
      "obj    obj    obj    obj    obj    obj    obj    par    par    par    par    par"
      "outras outras outras outras outras outras tickets tickets tickets tickets tickets tickets"
      "oq    oq    oq    oq    oq    oq    oq    oq    oq    oq    oq    oq"
      "rod    rod    rod    rod    rod    rod    rod    rod    rod    rod    rod    rod";
  }
}

/* xl (dm-largura-v1): a ficha da LOJA enche larguras grandes por REFLUXO -- 3 colunas (Faturacao | Objectivos | Homologo)
   em vez de esticar a grelha de 7+5. A Faturacao e os Objectivos ficam lado a lado, o Homologo (alto) ocupa as 3 linhas da
   coluna da direita e os tiles descem para debaixo. So' a ficha da loja; a do colaborador mantem o lg. */
@container gg (min-width: 1500px) {
  .gg-fgrid:not(.gg-fgrid--colab) {
    grid-template-areas:
      "head   head   head   head   head   head   head   head   head   head   head   head"
      "fat    fat    fat    fat    obj    obj    obj    obj    hom    hom    hom    hom"
      "outras outras outras outras tickets tickets tickets tickets hom   hom    hom    hom"
      "foot   foot   foot   foot   foot   foot   foot   foot   hom    hom    hom    hom"
      "oq    oq    oq    oq    oq    oq    oq    oq    oq    oq    oq    oq"
      "rod    rod    rod    rod    rod    rod    rod    rod    rod    rod    rod    rod";
  }
}

/* Fallback: sem container queries -> as mesmas regras por largura do viewport. */
@supports not (container-type: inline-size) {
  @media (min-width: 640px) {
    .gg-fgrid { gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-template-areas:
        "head   head   head   head   head   head   head   head   head   head   head   head"
        "fat    fat    fat    fat    fat    fat    fat    fat    fat    fat    fat    fat"
        "obj    obj    obj    obj    obj    obj    hom    hom    hom    hom    hom    hom"
        "outras outras outras outras outras outras hom    hom    hom    hom    hom    hom"
        "foot   foot   foot   foot   foot   foot   hom    hom    hom    hom    hom    hom"
        "tickets tickets tickets tickets tickets tickets hom   hom    hom    hom    hom    hom"
        "oq    oq    oq    oq    oq    oq    oq    oq    oq    oq    oq    oq"
        "rod    rod    rod    rod    rod    rod    rod    rod    rod    rod    rod    rod"; }
    .gg-fgrid--colab { grid-template-areas:
        "head   head   head   head   head   head   head   head   head   head   head   head"
        "fat    fat    fat    fat    fat    fat    fat    fat    fat    fat    fat    fat"
        "obj    obj    obj    obj    obj    obj    par    par    par    par    par    par"
        "outras outras outras outras outras outras par    par    par    par    par    par"
        "tickets tickets tickets tickets tickets tickets par   par    par    par    par    par"
        "oq    oq    oq    oq    oq    oq    oq    oq    oq    oq    oq    oq"
        "rod    rod    rod    rod    rod    rod    rod    rod    rod    rod    rod    rod"; }
    .gg-vend { display: contents; } .gg-v-outras, .gg-v-tickets, .gg-v-foot { order: 0; }
  }
  @media (min-width: 1024px) {
    .gg-fgrid { grid-template-areas:
        "head   head   head   head   head   head   head   head   head   head   head   head"
        "fat    fat    fat    fat    fat    fat    fat    hom    hom    hom    hom    hom"
        "obj    obj    obj    obj    obj    obj    obj    hom    hom    hom    hom    hom"
        "outras outras outras outras tickets tickets tickets tickets foot  foot   foot   foot"
        "oq    oq    oq    oq    oq    oq    oq    oq    oq    oq    oq    oq"
        "rod    rod    rod    rod    rod    rod    rod    rod    rod    rod    rod    rod"; }
    .gg-fgrid--colab { grid-template-areas:
        "head   head   head   head   head   head   head   head   head   head   head   head"
        "fat    fat    fat    fat    fat    fat    fat    par    par    par    par    par"
        "obj    obj    obj    obj    obj    obj    obj    par    par    par    par    par"
        "outras outras outras outras outras outras tickets tickets tickets tickets tickets tickets"
        "oq    oq    oq    oq    oq    oq    oq    oq    oq    oq    oq    oq"
        "rod    rod    rod    rod    rod    rod    rod    rod    rod    rod    rod    rod"; }
  }
}

/* ── Estados (regra unica, cor + icone + palavra) ─────────────────────────── */
.gg-e-acima, .gg-e-atingido { --gg-estado: var(--gg-acima);  --gg-estado-bg: var(--gg-acima-bg); }
.gg-e-abaixo               { --gg-estado: var(--gg-abaixo); --gg-estado-bg: var(--gg-abaixo-bg); }
.gg-e-atencao              { --gg-estado: var(--gg-atencao); --gg-estado-bg: var(--gg-atencao-bg); }
.gg-e-neutro, .gg-e-nd     { --gg-estado: var(--gg-texto-3); --gg-estado-bg: transparent; }
.gg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--gg-raio-chip);
  padding: 4px 10px;
  font-size: 12px; font-weight: 600; line-height: 1.2;
  color: var(--gg-estado, var(--gg-texto-3));
  background: var(--gg-estado-bg, transparent);
}
.gg-e-neutro .gg-chip, .gg-e-nd .gg-chip { padding-left: 0; }

/* ── C1 · Cabecalho com freshness ─────────────────────────────────────────── */
.gg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gg-e3); }
.gg-head-txt { min-width: 0; }
.gg-head-ate { font-size: 13px; color: var(--gg-texto-2); }
.gg-head-ate.gg-stale { color: var(--gg-fresh); }
.gg-head-extra { font-size: 12px; color: var(--gg-texto-3); margin-top: 2px; }
.gg-head-nome { font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 0; overflow-wrap: anywhere; }
.gg-refresh {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gg-card-2); color: var(--gg-texto); border: 1px solid var(--gg-linha);
  cursor: pointer; font-size: 18px; line-height: 1; font-family: inherit;
}
.gg-refresh:disabled { opacity: .45; cursor: default; }
.gg-titulo { font-size: 17px; line-height: 1.35; font-weight: 600; margin: 0; color: var(--gg-texto); }
.gg-erro { font-size: 13px; color: var(--gg-texto-2); padding: var(--gg-e3) 0; }

/* ── C2 · Gauge radial ────────────────────────────────────────────────────── */
.gg-gauge-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--gg-e3); flex-wrap: wrap; }
.gg-gauge-titulo { font-size: 17px; font-weight: 600; }
.gg-gauge-corpo { display: block; }
.gg-gauge-svg { display: block; width: 100%; max-width: 360px; height: auto; margin: var(--gg-e2) auto 0; overflow: visible; }
.gg-g-track { fill: none; stroke: var(--gg-track); stroke-width: 16; stroke-linecap: round; }
.gg-g-fill  { fill: none; stroke: var(--gg-estado, var(--gg-texto-3)); stroke-width: 16; stroke-linecap: round; }
.gg-e-nd .gg-g-track { stroke-dasharray: 3 9; }
.gg-g-marca { stroke: var(--gg-marca); stroke-width: 3; stroke-linecap: butt; }
.gg-g-ban   { fill: var(--gg-texto); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-anchor: middle; }
.gg-g-suf   { fill: var(--gg-texto-2); font-weight: 600; }
.gg-g-leg   { fill: var(--gg-texto-2); font-size: 13px; text-anchor: middle; }
.gg-g-ext   { fill: var(--gg-texto-3); font-size: 12px; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .gg-g-fill { transition: stroke-dashoffset .4s ease; }
}
.gg-gauge-rodape {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gg-e2);
  border-top: 1px solid var(--gg-linha); margin-top: var(--gg-e3); padding-top: var(--gg-e3);
}
.gg-rp-l { font-size: 12px; color: var(--gg-texto-2); }
.gg-rp-v { font-size: 17px; margin-top: 2px; }

/* ── C3 · Barra de progresso com marcador de ritmo ────────────────────────── */
.gg-obj-lista { display: flex; flex-direction: column; }
.gg-obj { padding: var(--gg-e3) 0; border-top: 1px solid var(--gg-linha); }
.gg-obj:first-child { border-top: 0; padding-top: 0; }
.gg-obj:last-child { padding-bottom: 0; }
.gg-obj-l1 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gg-e3); }
.gg-obj-label { font-size: 17px; font-weight: 600; }
.gg-obj-vals { font-size: 13px; color: var(--gg-texto-2); text-align: right; }
.gg-obj-vals .gg-num { font-size: 22px; color: var(--gg-texto); }
.gg-obj-barra { position: relative; height: 10px; border-radius: var(--gg-raio-barra); background: var(--gg-track); margin: var(--gg-e3) 0 var(--gg-e2); }
.gg-obj-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--gg-raio-barra); background: var(--gg-estado, var(--gg-texto-3)); }
.gg-obj-marca { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; background: var(--gg-marca); border-radius: 1px; }
.gg-obj-l3 { display: flex; align-items: center; justify-content: space-between; gap: var(--gg-e3); font-size: 13px; }
.gg-obj-l3 .gg-chip { padding: 0; background: transparent; }
.gg-obj-dir { color: var(--gg-texto-2); white-space: nowrap; }
.gg-obj-nota { font-size: 13px; color: var(--gg-texto-3); margin-top: var(--gg-e2); }
/* E3 (portal-02): homologo por linha, NEUTRO (cor so' em barra e chip de estado). Glifo ▲▼▬ + sinal dizem o sentido. */
.gg-obj-hom { display: flex; align-items: center; gap: 6px; margin-top: var(--gg-e2); font-size: 13px; color: var(--gg-texto-2); }
.gg-obj-hom b { font-weight: 600; color: var(--gg-texto); font-variant-numeric: tabular-nums; }

/* ── C4 · Stat tiles / BAN ────────────────────────────────────────────────── */
.gg-tiles-tit { font-size: 13px; font-weight: 600; color: var(--gg-texto-2); margin: 0 0 var(--gg-e2); }
.gg-tiles { display: grid; border-radius: var(--gg-raio-tile); background: var(--gg-card); border: 1px solid var(--gg-linha); overflow: hidden; }
.gg-tiles.gg-n2 { grid-template-columns: repeat(2, 1fr); }
.gg-tiles.gg-n3 { grid-template-columns: repeat(3, 1fr); }
.gg-tile { padding: var(--gg-e4); min-width: 0; border-left: 1px solid var(--gg-linha); }
.gg-tile:first-child { border-left: 0; }
.gg-tile-l { font-size: 12px; color: var(--gg-texto-2); }
.gg-tile-v { font-size: 28px; line-height: 1.15; margin-top: 4px; white-space: nowrap; }
.gg-tiles.gg-n3 .gg-tile-v { font-size: clamp(20px, 6vw, 28px); }
.gg-tiles.gg-n3 .gg-tile { padding: var(--gg-e3); }
.gg-tile-n { font-size: 12px; color: var(--gg-texto-3); margin-top: 4px; }
.gg-tile .gg-chip { margin-top: 6px; padding: 3px 8px; font-size: 11px; }
@media (max-width: 359px) {
  .gg-tiles.gg-n3 { grid-template-columns: 1fr; }
  .gg-tiles.gg-n3 .gg-tile { border-left: 0; border-top: 1px solid var(--gg-linha); }
  .gg-tiles.gg-n3 .gg-tile:first-child { border-top: 0; }
}

/* ── C5 · Ranking ─────────────────────────────────────────────────────────── */
.gg-rank-tit { font-size: 17px; font-weight: 600; margin: 0; }
.gg-rank-met { font-size: 12px; color: var(--gg-texto-3); margin: 2px 0 var(--gg-e3); }
.gg-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.gg-rank-lin {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center;
  gap: var(--gg-e2); padding: 8px 10px; border-radius: 12px; font-size: 15px;
}
.gg-rank-lin.gg-foco { background: var(--gg-card-2); font-weight: 700; }
.gg-rank-pos { color: var(--gg-texto-3); font-variant-numeric: tabular-nums; }
.gg-rank-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-rank-val { color: var(--gg-texto-2); font-variant-numeric: tabular-nums; text-align: right; }
.gg-rank-barra { grid-column: 2 / 4; height: 6px; border-radius: var(--gg-raio-barra); background: var(--gg-track); overflow: hidden; }
.gg-rank-barra > i { display: block; height: 100%; background: var(--gg-texto-3); opacity: .4; border-radius: var(--gg-raio-barra); }
.gg-foco .gg-rank-barra > i { background: var(--gg-texto); opacity: 1; }
.gg-rank-chip { font-size: 11px; margin-left: 6px; color: var(--gg-estado); }
.gg-rank-sep { text-align: center; color: var(--gg-texto-3); font-size: 12px; line-height: 1; padding: 2px 0; }

/* ── Rodape da marca ─────────────────────────────────────────────────────── */
.gg-rodape { font-size: 12px; color: var(--gg-texto-2); line-height: 1.5; }
.gg-rodape p { margin: 0 0 4px; }
.gg-rodape .gg-r3 { color: var(--gg-texto-3); }
.gg-marca-ex { display: inline-block; width: 3px; height: 12px; background: var(--gg-marca); vertical-align: -2px; margin: 0 2px; border-radius: 1px; }

/* ── Controlos da ficha (selector de colaborador) ─────────────────────────── */
.gg-sel {
  background-color: var(--gg-card-2); color: var(--gg-texto); border: 1px solid var(--gg-linha);
  border-radius: 12px; padding: 0 12px; font: inherit; font-size: 15px;
  height: 44px; min-height: 44px; box-sizing: border-box; max-width: 100%;
}
/* <select>: o nativo (Safari/iOS) ignora min-height e fica baixo -> appearance:none + height fixa, e a seta
   desenhada com 2 gradientes nos tokens (acompanha o tema; zero hex, zero imagem). */
select.gg-sel {
  -webkit-appearance: none; appearance: none; padding-right: 32px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gg-texto-2) 50%), linear-gradient(135deg, var(--gg-texto-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
/* <input type=date> (iOS/Safari): sem isto o nativo traz a sua LARGURA INTRINSECA e ignora o contentor -- no iPhone o
   campo da data da visita saia do ecra. appearance:none + min-width:0 deixam a regra da barra (.gg-barra-dir .gg-sel{width:100%} em
   ecra estreito) MANDAR na largura -- NAO se poe width:100% aqui: no desktop o campo tem de ficar na linha dos outros controlos; o texto alinha-se a esquerda
   (o iOS centra-o) e o seletor nativo continua a abrir ao toque. (2026-10-10, portal-limpeza) */
input[type=date].gg-sel {
  -webkit-appearance: none; appearance: none; min-width: 0; text-align: left;
}
input[type=date].gg-sel { line-height: 42px; }   /* centra o texto na altura fixa de 44px (o nativo alinha ao topo) */
input[type=date].gg-sel::-webkit-date-and-time-value { text-align: left; min-height: 0; }
.gg-sel:focus-visible, .gg-btn:focus-visible { outline: 2px solid var(--gg-texto); outline-offset: 2px; }

/* ── Barra de controlos da Preparacao de Visita (Clara, 2026-10-10) ─────────────
   Tudo a 44px / raio 12: toggle (.gg-segm), loja/data (.gg-sel), Actualizar (.gg-btn).
   A barra e' o seu proprio contentor (nao esta' dentro de .gg-ficha, que e' o contentor "gg").
   Sem cor: o activo do toggle e' preenchido invertido + "check". */
.gg-barra-c { container-type: inline-size; container-name: gg-barra; margin: 0 0 14px; }
.gg-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.gg-barra-dir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.gg-segm {
  display: inline-flex; gap: 2px; padding: 3px; height: 44px; box-sizing: border-box;
  background: var(--gg-card-2); border: 1px solid var(--gg-linha); border-radius: 12px;
}
.gg-segm > button {
  -webkit-appearance: none; appearance: none; border: 0; border-radius: 9px; background: transparent;
  color: var(--gg-texto-2); font: inherit; font-size: 14px; font-weight: 600; padding: 0 14px;
  cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s;
}
.gg-segm > button[aria-pressed="true"] { background: var(--gg-texto); color: var(--gg-card); }
.gg-segm > button:focus-visible { outline: 2px solid var(--gg-texto); outline-offset: 2px; }
.gg-segm-v { display: none; }
.gg-segm > button[aria-pressed="true"] .gg-segm-v { display: inline; }
.gg-btn {
  -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; box-sizing: border-box; padding: 0 18px; border-radius: 12px; white-space: nowrap;
  background: var(--gg-card-2); color: var(--gg-texto); border: 1px solid var(--gg-linha);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: border-color .15s, opacity .15s;
}
.gg-btn:hover:not(:disabled) { border-color: var(--gg-texto-3); }
.gg-btn:disabled { opacity: .6; cursor: default; }
.gg-btn[aria-busy="true"]::before { content: "\21BB"; }
@container gg-barra (max-width: 639px) {
  .gg-barra, .gg-barra-dir { flex-direction: column; align-items: stretch; width: 100%; margin-left: 0; }
  .gg-segm { display: flex; } .gg-segm > button { flex: 1 1 0; padding: 0 8px; }
  .gg-barra-dir .gg-sel, .gg-barra-dir .gg-btn { width: 100%; max-width: none; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 639px) {
    .gg-barra, .gg-barra-dir { flex-direction: column; align-items: stretch; width: 100%; margin-left: 0; }
    .gg-segm { display: flex; } .gg-segm > button { flex: 1 1 0; padding: 0 8px; }
    .gg-barra-dir .gg-sel, .gg-barra-dir .gg-btn { width: 100%; max-width: none; }
  }
}
.gg-skel { background: linear-gradient(90deg, var(--gg-card-2), var(--gg-track), var(--gg-card-2)); border-radius: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .gg-skel { background-size: 200% 100%; animation: gg-skel 1.4s linear infinite; }
  @keyframes gg-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
}


/* ── v2: densidade por contentor ───────────────────────────────────────────── */
@container gg (min-width: 640px) {
  .gg-card { padding: 20px; }
  /* Gauge INLINE: gauge a esquerda, as 3 celulas em coluna a direita. */
  .gg-gauge-corpo { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 24px; align-items: center; }
  .gg-gauge-corpo .gg-gauge-svg { margin: 0 auto; max-width: 260px; }
  .gg-gauge-corpo .gg-gauge-rodape { grid-template-columns: 1fr; gap: 0; border-top: 0; margin-top: 0; padding-top: 0; }
  .gg-gauge-corpo .gg-gauge-rodape > div { padding: 10px 0; border-top: 1px solid var(--gg-linha); }
  .gg-gauge-corpo .gg-gauge-rodape > div:first-child { border-top: 0; }
  .gg-gauge-corpo .gg-rp-v { font-size: 22px; }
  /* Objectivos compactos */
  .gg-obj { padding: 10px 0; }
  .gg-obj-barra { height: 8px; margin: 8px 0 6px; }
  .gg-obj-label { font-size: 15px; }
  .gg-obj-vals .gg-num { font-size: 18px; }
  /* Tiles compactos */
  .gg-tile { padding: 12px 16px; }
  .gg-tile-v { font-size: 24px; }
}
@container gg (max-width: 639px) {
  .gg-card { padding: 16px; }
}

/* ── v2: cartao Homologo e tendencia ───────────────────────────────────────── */
.gg-hom-tit { font-size: 17px; font-weight: 600; }
.gg-hom-leg { font-size: 12px; color: var(--gg-texto-3); margin: 2px 0 var(--gg-e3); }
.gg-hom-nd { font-size: 13px; color: var(--gg-texto-3); padding: var(--gg-e3) 0; }
.gg-hom-sub { font-size: 13px; font-weight: 600; color: var(--gg-texto-2); margin: var(--gg-e4) 0 var(--gg-e2); padding-top: var(--gg-e3); border-top: 1px solid var(--gg-linha); }
.gg-hom-tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.gg-hom-tab th, .gg-hom-tab td { padding: 6px 4px; text-align: right; font-variant-numeric: tabular-nums; border-top: 1px solid var(--gg-linha); }
.gg-hom-tab thead th { font-size: 12px; font-weight: 600; color: var(--gg-texto-2); border-top: 0; }
.gg-hom-tab thead th:first-child, .gg-hom-tab tbody th { text-align: left; font-weight: 600; }
.gg-hom-tab tbody th { color: var(--gg-texto); }
.gg-hom-nota { font-weight: 400; color: var(--gg-texto-3); font-size: 12px; }
.gg-h-hom { color: var(--gg-texto-2); }
.gg-h-lbl { display: none; }
.gg-hd { display: inline-flex; gap: 4px; align-items: baseline; white-space: nowrap; font-weight: 600; color: var(--gg-estado, var(--gg-texto-3)); }
.gg-h-real { color: var(--gg-texto); font-weight: 700; }
.gg-tend { display: flex; flex-direction: column; gap: 6px; }
.gg-tend-m { display: grid; grid-template-columns: auto minmax(40px, 1fr) minmax(0, auto); gap: 10px; align-items: center; font-size: 13px; }
.gg-tend-l { color: var(--gg-texto-2); white-space: nowrap; min-width: 4.2em; }
.gg-tend-b { height: 10px; border-radius: var(--gg-raio-barra); background: var(--gg-track); overflow: hidden; }
.gg-tend-b > i { display: block; height: 100%; background: var(--gg-texto-3); border-radius: var(--gg-raio-barra); }
.gg-em-curso .gg-tend-b > i { background: repeating-linear-gradient(135deg, var(--gg-texto-3) 0 5px, transparent 5px 9px); outline: 1px dashed var(--gg-texto-3); outline-offset: -1px; }
.gg-tend-v { color: var(--gg-texto); font-variant-numeric: tabular-nums; text-align: right; }
.gg-tend-v em { font-style: normal; color: var(--gg-texto-3); font-size: 12px; }
/* estreito: linhas de 2 niveis (KPI + delta em cima, "hom. X" por baixo) */
@container gg (max-width: 639px) {
  .gg-hom-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .gg-hom-tab, .gg-hom-tab tbody { display: block; }
  .gg-hom-tab tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--gg-linha); }
  .gg-hom-tab th, .gg-hom-tab td { border: 0; padding: 0; }
  .gg-hom-tab tbody th { grid-column: 1; }
  .gg-h-real { grid-column: 2; }
  .gg-h-delta { grid-column: 3; }
  .gg-h-hom { grid-column: 1 / -1; grid-row: 2; text-align: left; font-size: 12px; margin-top: 2px; }
  .gg-h-lbl { display: inline; }
}

@container gg (max-width: 1023px) { .gg-hom-tab { font-size: 13px; } .gg-hom-tab th, .gg-hom-tab td { padding: 5px 3px; } }
/* Os grupos de tiles sao contentores PROPRIOS: o mesmo grupo de 3 celulas aparece em
   colunas de larguras muito diferentes (largo, meia coluna do md, telemovel) e a letra
   tem de acompanhar a largura DO GRUPO, nao a da ficha. */
.gg-vend > div { container-type: inline-size; }
@container (max-width: 440px) {
  .gg-tiles.gg-n3 .gg-tile { padding: 10px 8px; }
  .gg-tiles.gg-n3 .gg-tile-v { font-size: 17px; letter-spacing: -0.03em; }
  .gg-tiles.gg-n3 .gg-tile-l { font-size: 11px; }
}

/* Homologo indisponivel (Colaborador): cartao compacto, nao estica a altura da linha. */
.gg-a-hom > .gg-card.gg-hom--nd { height: auto; align-self: start; }

/* FIX-TEND (hunk separado, defeito PRE-EXISTENTE medido no vivo): a 390 px em MTD-Y o texto do mes em curso
   ("74 % ao ritmo · 22,48 K em curso", 211 px) comia a coluna da barra (0 px) e cortava o rotulo "Out 2026" 6 px.
   A 3.a coluna passa a poder encolher e o texto a quebrar; a barra tem sempre >= 40 px. */
/* ═══ OQPDS — "O que preciso de saber" (build oqpds-v1, 2026-10-09) ════════════
   Monocromatico: a cor so' aparece em --gg-estado (acima/abaixo), SEMPRE com glifo
   e palavra. Alvos de toque >= 44 px. Sem scroll horizontal a 390/820/1280. */
.gg-a-oq { grid-area: oq; min-width: 0; }
.gg-oq { background: var(--gg-card); border: 1px solid var(--gg-linha); border-radius: var(--gg-raio-card); padding: var(--gg-e4) var(--gg-e5); }
.gg-oq-tit { font-size: 17px; font-weight: 600; margin: 0; }
.gg-oq-intro { font-size: 12px; color: var(--gg-texto-3); margin: 2px 0 var(--gg-e2); }
.gg-oq-lista { list-style: none; margin: 0; padding: 0; }
.gg-oq-item { border-top: 1px solid var(--gg-linha); }
.gg-oq-item:first-child { border-top: 0; }
/* N1 · linha-acordeao */
.gg-oq-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center;
  width: 100%; min-height: 44px; padding: 10px 0; text-align: left; cursor: pointer;
  background: transparent; border: 0; color: var(--gg-texto); font: inherit;
}
.gg-oq-row:focus-visible { outline: 2px solid var(--gg-texto); outline-offset: 2px; border-radius: 8px; }
.gg-oq-nome { font-size: 15px; font-weight: 600; grid-column: 1; }
.gg-oq-res { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--gg-texto-2); min-width: 0; overflow-wrap: anywhere; }
.gg-oq-chev { grid-column: 2; grid-row: 1 / span 2; font-size: 20px; color: var(--gg-texto-3); transition: transform .18s ease; }
.gg-oq-item.gg-aberto .gg-oq-chev { transform: rotate(90deg); }
.gg-oq-res-nd { color: var(--gg-texto-3); }
.gg-oq-sep { color: var(--gg-texto-3); }
.gg-oq-painel { padding: 4px 0 var(--gg-e4); min-width: 0; }
@container gg (min-width: 640px) {
  .gg-oq-row { grid-template-columns: minmax(180px, 280px) minmax(0, 1fr) auto; }
  .gg-oq-res { grid-column: 2; grid-row: 1; }
  .gg-oq-chev { grid-column: 3; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) { .gg-oq-chev { transition: none; } }
.gg-oq-aviso { font-size: 13px; color: var(--gg-texto-2); margin: 6px 0; }
.gg-oq-nota { font-size: 12px; color: var(--gg-texto-3); margin: 8px 0 0; }
.gg-oq-sub { font-size: 13px; font-weight: 600; color: var(--gg-texto-2); margin: var(--gg-e4) 0 var(--gg-e2); }
.gg-oq-total { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 6px 0 10px; border-bottom: 1px solid var(--gg-linha); margin-bottom: 4px; font-size: 14px; }
.gg-oq-total > span:first-child { color: var(--gg-texto-2); flex: 1 1 auto; }
.gg-oq-total .gg-num { font-size: 20px; font-weight: 700; }
/* N2 · barra divergente de delta */
.gg-dv-lista { list-style: none; margin: 0; padding: 0; }
.gg-dv-aparte { margin-top: 8px; border-top: 1px dashed var(--gg-linha); padding-top: 4px; }
.gg-dv-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 4px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--gg-linha); font-size: 14px; }
.gg-dv-row:first-child { border-top: 0; }
.gg-dv-l { grid-column: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.gg-dv-v { grid-column: 2; text-align: right; font-variant-numeric: tabular-nums; }
.gg-dv { grid-column: 1; display: flex; height: 8px; min-width: 0; }
/* xs: etiqueta em linha inteira; por baixo barra | valor; por baixo o delta (barras do mesmo comprimento em todas as linhas) */
.gg-dv-row > .gg-dv-l { grid-column: 1 / -1; grid-row: 1; }
.gg-dv-row > .gg-dv { grid-column: 1; grid-row: 2; align-self: center; }
.gg-dv-row > .gg-dv-v { grid-column: 2; grid-row: 2; }
.gg-dv-row > .gg-dv-d { grid-column: 1 / -1; grid-row: 3; text-align: left; }
.gg-dv-h { flex: 1 1 50%; position: relative; background: var(--gg-track); height: 8px; }
.gg-dv-neg { border-radius: 4px 0 0 4px; } .gg-dv-pos { border-radius: 0 4px 4px 0; margin-left: 2px; }
.gg-dv-neg > i { position: absolute; right: 0; top: 0; bottom: 0; background: var(--gg-abaixo); border-radius: 4px 0 0 4px; }
.gg-dv-pos > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gg-acima); border-radius: 0 4px 4px 0; }
.gg-dv-d { font-size: 13px; }
.gg-dv-fora .gg-dv { visibility: hidden; }
@container gg (min-width: 640px) {
  /* colunas de largura FIXA (menos a 1.a, flexivel): as barras alinham-se entre linhas */
  .gg-dv-row { grid-template-columns: minmax(0, 1.25fr) 84px minmax(100px, 1fr) 176px; gap: 12px; }
  .gg-dv-row > .gg-dv-l { grid-column: 1; grid-row: auto; } .gg-dv-row > .gg-dv-v { grid-column: 2; grid-row: auto; }
  .gg-dv-row > .gg-dv { grid-column: 3; grid-row: auto; } .gg-dv-row > .gg-dv-d { grid-column: 4; grid-row: auto; text-align: right; white-space: nowrap; }
}
@container gg (max-width: 639px) { .gg-dv-sub { display: block; } }
/* Seguros por familia: lista (nao tabela) -- empilha em 390 sem esmagar colunas */
.gg-sf-lista { margin-top: 4px; }
.gg-sf-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--gg-linha); font-size: 14px; }
.gg-sf-row:first-child { border-top: 0; }
.gg-sf-row .gg-dv-l { grid-column: 1; } .gg-sf-row .gg-dv-v { grid-column: 2; }
.gg-sf-row .gg-dv-d { grid-column: 1 / -1; text-align: left; }
.gg-sf-m { grid-column: 1 / -1; font-size: 12px; color: var(--gg-texto-2); }
@container gg (min-width: 640px) {
  .gg-sf-row { grid-template-columns: minmax(0, 1.25fr) 84px 176px minmax(0, 1.2fr); gap: 12px; }
  .gg-sf-row .gg-dv-l { grid-column: 1; } .gg-sf-row .gg-dv-v { grid-column: 2; } .gg-sf-row .gg-dv-d { grid-column: 3; text-align: right; } .gg-sf-m { grid-column: 4; text-align: right; }
}
/* N3 · dot plot */
.gg-dots { list-style: none; margin: 0; padding: 0; }
.gg-dots-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 6px 0; font-size: 14px; }
.gg-dots-n { grid-column: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.gg-dots-v { grid-column: 2; text-align: right; font-variant-numeric: tabular-nums; }
.gg-dots-pista { grid-column: 1 / -1; position: relative; height: 18px; border-bottom: 1px solid var(--gg-linha); }
.gg-dots-dot { position: absolute; top: 3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--gg-texto); }
.gg-dots-ref { position: absolute; top: 0; bottom: 0; width: 0; margin-left: -1px; }
.gg-ref-loja { border-left: 2px solid var(--gg-texto-2); }
.gg-ref-rede { border-left: 2px dashed var(--gg-texto-3); }
.gg-ref-alvo { border-left: 2px dotted var(--gg-texto); }
.gg-dots-leg { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--gg-texto-2); margin-top: 6px; }
.gg-leg-i { display: inline-block; height: 12px; width: 0; margin-right: 6px; vertical-align: -1px; }
@container gg (min-width: 640px) {
  .gg-dots-row { grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) 90px; }
  .gg-dots-n { grid-column: 1; } .gg-dots-pista { grid-column: 2; } .gg-dots-v { grid-column: 3; }
}
/* tabelas simples (poucos vendedores · seguros por familia): sem scroll horizontal */
.gg-oq-tab { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.gg-oq-tab th, .gg-oq-tab td { padding: 6px 4px; text-align: right; border-top: 1px solid var(--gg-linha); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; vertical-align: top; }
.gg-oq-tab thead th { font-size: 12px; color: var(--gg-texto-2); border-top: 0; font-weight: 600; }
.gg-oq-tab thead th:first-child, .gg-oq-tab tbody th { text-align: left; }
.gg-oq-tab tbody th { font-weight: 600; width: 34%; }
/* N4 · selector de ordenacao (segmented/select, alvo >= 44) */
.gg-seg { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gg-texto-2); margin: 8px 0; }
.gg-seg .gg-sel { min-height: 44px; flex: 1 1 auto; min-width: 0; }
.gg-oq-gap { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.gg-oq-gap li { padding: 6px 0; border-top: 1px solid var(--gg-linha); }
.gg-oq-gap li:first-child { border-top: 0; }
/* Conversao por dia da semana */
.gg-cv-lista { list-style: none; margin: 0; padding: 0; }
.gg-cv-row { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 6px 0; font-size: 14px; }
.gg-cv-l { font-weight: 600; }
.gg-cv-b { height: 10px; border-radius: 5px; background: var(--gg-track); overflow: hidden; }
.gg-cv-b > i { display: block; height: 100%; background: var(--gg-texto-3); border-radius: 5px; }
.gg-cv-melhor .gg-cv-b > i { background: var(--gg-acima); } .gg-cv-pior .gg-cv-b > i { background: var(--gg-abaixo); }
.gg-cv-v { grid-column: 2; font-variant-numeric: tabular-nums; }
.gg-cv-nd .gg-cv-b { background: repeating-linear-gradient(135deg, var(--gg-track) 0 5px, transparent 5px 9px); outline: 1px dashed var(--gg-linha); outline-offset: -1px; }
.gg-cv-nd .gg-cv-v { color: var(--gg-texto-3); }
/* A linha `oq` existe em todas as grelhas da ficha Loja; quando o bloco nao esta no DOM
   (MTD, MOM, vista Colaborador) a linha vazia nao pode deixar um "buraco" de gap. */
@container gg (max-width: 639px) { .gg-fgrid:not(:has(.gg-a-oq > section)) .gg-a-rod { margin-top: -12px; } }
@container gg (min-width: 640px) { .gg-fgrid:not(.gg-fgrid--colab):not(:has(.gg-a-oq > section)) .gg-a-rod { margin-top: -16px; } }

/* ═══ PLANO "Onde atuar e como" — build gg-pl-v1 (2026-10-10) ═══════════════════
   Mesma lingua do OQPDS (.gg-oq): cartao, linhas separadas por --gg-linha, grelha
   minmax(180px,280px) / 1fr a partir de 640 px do contentor (alinha com .gg-oq-row).
   A COR vive so' no chip (--gg-estado). Zero hex: so' tokens --gg-*. */
.gg-a-oq { display: flex; flex-direction: column; gap: var(--gg-e4); }
.gg-a-oq:not(:has(> section)) { display: none; }
.gg-pl-lista { list-style: none; margin: 0; padding: 0; }
.gg-pl-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--gg-linha); }
.gg-pl-quem { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.gg-pl-area { font-size: 13px; font-weight: 600; color: var(--gg-texto-2); }
.gg-pl .gg-chip { background: transparent; padding: 0; }
.gg-pl-txt { min-width: 0; }
.gg-pl-acao { font-size: 15px; font-weight: 600; color: var(--gg-texto); overflow-wrap: anywhere; }
.gg-pl-como { font-size: 13px; line-height: 1.45; color: var(--gg-texto-2); margin-top: 2px; overflow-wrap: anywhere; }
@container gg (min-width: 640px) {
  .gg-pl-item { grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); }
}

/* ═══ FACE AOS PARES — build colab-v1 (2026-10-10; spec: Clara, spec_vista_colaborador.md §4) ═══════════
   Cartao da vista "Por colaborador": ocupa a area `par` da ficha (o lugar do antigo Homologo). Lista <ul> de
   linhas, nao <table>. A COR e' SO' o gap material negativo (.gg-par-mat = --gg-abaixo, sempre com a palavra
   "material"); acima / em linha / abaixo sem gap material sao neutros. Amostra pequena a --gg-texto-3.
   O cartao e' um contentor PROPRIO: ocupa 5/12 da ficha em lg e 6/12 em md, por isso o layout muda pela
   largura DO CARTAO (nunca pelo viewport). Zero hex: so' tokens --gg-*. */
.gg-a-par { grid-area: par; min-width: 0; container-type: inline-size; container-name: gg-par; }
.gg-par-sub { font-size: 12px; color: var(--gg-texto-3); margin: 2px 0 var(--gg-e3); line-height: 1.45; }
.gg-par .gg-segm { margin: 0 0 var(--gg-e2); }
.gg-par-meta { font-size: 13px; color: var(--gg-texto-2); margin: 0 0 2px; font-variant-numeric: tabular-nums; }
.gg-par-meta .gg-chip { padding: 0 0 0 6px; background: transparent; }
.gg-par-jan { font-size: 12px; color: var(--gg-texto-3); margin: 0 0 var(--gg-e2); line-height: 1.45; }
.gg-par-lista { list-style: none; margin: 0; padding: 0; }
.gg-par-cab { display: none; }
.gg-par-lin { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--gg-linha); font-size: 14px; }
.gg-par-lista > .gg-par-lin:first-child { border-top: 0; }
.gg-par-m { grid-column: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.gg-par-m .gg-chip { padding: 0 0 0 6px; background: transparent; font-weight: 600; }
.gg-par-v { grid-column: 2; text-align: right; font-size: 15px; white-space: nowrap; }
.gg-par-d { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 13px; color: var(--gg-texto-2); }
.gg-par-ref { flex: 0 0 2.6em; font-size: 11px; font-weight: 600; color: var(--gg-texto-3); }
.gg-par-mk { font-weight: 600; white-space: nowrap; }
.gg-par-mk.gg-par-mat { color: var(--gg-abaixo); }
.gg-par-dl { font-size: 12px; color: var(--gg-texto-3); font-variant-numeric: tabular-nums; }
.gg-par-nd { color: var(--gg-texto-3); }
.gg-par-peq .gg-par-m, .gg-par-peq .gg-par-v, .gg-par-peq .gg-par-d { color: var(--gg-texto-3); }
.gg-par-rod { margin: var(--gg-e3) 0 0; font-size: 12px; line-height: 1.5; color: var(--gg-texto-3); }
@container gg-par (min-width: 600px) {
  .gg-par-cab, .gg-par-lin { display: grid; grid-template-columns: minmax(150px, 1.5fr) minmax(90px, 1fr) minmax(130px, 1.4fr) minmax(130px, 1.4fr); gap: 2px 12px; }
  .gg-par-cab { padding: 0 0 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--gg-texto-2); }
  .gg-par-cab > div:nth-child(2) { text-align: right; }
  .gg-par-v { grid-column: 2; text-align: right; }
  .gg-par-d { grid-column: auto; display: block; }
  .gg-par-ref { display: none; }
  .gg-par-dl { display: block; }
}

/* =============================================================================
   F1 · FUNDACAO DO PORTAL (2026-10-16) -- componentes partilhados das paginas-filhas e do hub
   Promovido SEM redesenho de Team inbox/mock_portal_gg-ds/extensoes.css (Clara; ja' provado em 12 renderizacoes
   -- hub, KPI, Personal x 390/1280 x claro/escuro). Divergencias deliberadas face ao mock (so' estas 7):
     1) `body {...}` do mock NAO entra: regra global afectaria TODAS as paginas que carregam este ficheiro.
        Fica `body.gg-ds` (so' quando a pagina opta por <body class="gg-ds">).
     2) .gg-ib ganha os estados do cockpit que o mock omitia (.gg-ib-ico/.gg-ib-err/.is-refreshing/.is-refresh-error):
        sao os que o ggPortalRefresh (auth-session.js) acende; sem eles o botao Actualizar nao mostra rotacao nem erro.
     3) A linha 2 de contexto (mes) a <=520px aplica-se SO' a topbars com .gg-topbar-esq (Portal + Voltar): o cockpit
        (xiaomi-gestor.html, que tem a sua propria copia inline destas regras) nao tem .gg-topbar-esq e fica como esta'.
     4) Sem .gg-pagina-cab: continua a ser do cockpit (inline); as paginas novas usam .gg-pagina.
   5) `.gg-topbar-acoes .gg-btn`: o "Sair" do hub vinha com style= no mock; passa a regra (o GG.topbar nao emite style=).
   6) `.gg-ib-ico[hidden]`: o GG.topbar alterna sol/lua com o atributo hidden; sem esta regra o display do .gg-ib-ico (cockpit) anula-o.
   7) `flex-wrap` da .gg-topbar-in so' com `:has(> .gg-topbar-esq)`: o cockpit nao pode mexer a nenhuma largura (medido: sem isto muda a 320px).
   Regra de cor: NENHUMA cor nova. Verde/ambar/vermelho so' via GG.chip / --gg-estado. Nomes sem colisao medida no
   /var/www/landing e nos .py (so' xiaomi-gestor.html tem .gg-topbar*, .gg-ib*, .gg-pagina-cab*).
   ============================================================================= */
body.gg-ds { margin: 0; background: var(--gg-bg); -webkit-text-size-adjust: 100%; }
.gg-pag { max-width: var(--gg-largura, none); margin: 0 auto; padding: 0 var(--gg-gutter, 16px) 40px; min-width: 0; }

/* ── gg-topbar (copia do cockpit portal-16b + .gg-topbar-esq / .gg-voltar / .gg-topbar-id) ───────────── */
.gg-topbar { position: sticky; top: 0; z-index: 50; padding-top: env(safe-area-inset-top);
  background: var(--gg-card); border-bottom: 1px solid var(--gg-linha);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gg-topbar-in { display: flex; align-items: center; gap: 4px; padding: 6px var(--gg-gutter, 12px);
  max-width: var(--gg-largura, none); margin: 0 auto; min-width: 0; }
/* so' quando ha .gg-topbar-esq (Portal + Voltar): o cockpit (sem .gg-topbar-esq) fica a ZERO alteracao, tambem a 320px (decisao F1) */
.gg-topbar-in:has(> .gg-topbar-esq) { flex-wrap: wrap; }
.gg-topbar-esq { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; min-width: 0; }
.gg-topbar-mes { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.gg-topbar-mes-l { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 76px; text-align: center;
  color: var(--gg-texto); white-space: nowrap; }
.gg-topbar-acoes { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: 0 0 auto; }
.gg-topbar-acoes .gg-btn { height: 44px; padding: 0 14px; font-size: 14px; }   /* "Sair" do hub (o mock tinha-o em style=) */
.gg-ib { text-decoration: none; -webkit-tap-highlight-color: transparent; }
.gg-ib svg { width: 20px; height: 20px; flex: 0 0 auto; }
.gg-ib-mes { font-size: 14px; }
.gg-ib[aria-disabled="true"] { opacity: .35; cursor: default; }
.gg-ib:focus-visible { outline: 2px solid var(--gg-texto); outline-offset: 2px; }
.gg-ib-ico { display: inline-flex; }
.gg-ib-ico[hidden] { display: none; }   /* o display acima ganha ao [hidden] do navegador: sem esta regra o botao de tema mostrava sol E lua */
.gg-ib-err { display: none; font-size: 20px; font-weight: 700; line-height: 1; }
@media (prefers-reduced-motion: no-preference) {
  .gg-ib.is-refreshing .gg-ib-ico { animation: gg-ib-rodar 1s linear infinite; }
  @keyframes gg-ib-rodar { to { transform: rotate(360deg); } }
}
.gg-ib.is-refreshing { opacity: .7; }
/* erro de refresh: o GLIFO muda (↻ -> !) e ha contorno; a cor so' reforca (nunca e' o unico sinal) */
.gg-ib.is-refresh-error { border: 2px solid var(--gg-abaixo); color: var(--gg-abaixo); }
.gg-ib.is-refresh-error .gg-ib-ico { display: none; }
.gg-ib.is-refresh-error .gg-ib-err { display: inline; }
/* "voltar" com palavra (nunca so' a seta): pilula de 44px */
.gg-voltar { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px 0 10px; box-sizing: border-box;
  border-radius: var(--gg-raio-chip); background: var(--gg-card-2); border: 1px solid var(--gg-linha);
  color: var(--gg-texto); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.gg-voltar svg { width: 18px; height: 18px; }
.gg-voltar:focus-visible { outline: 2px solid var(--gg-texto); outline-offset: 2px; }
/* identidade (so' o portal-raiz): iniciais + nome */
.gg-topbar-id { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; padding-left: 4px; }
.gg-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--gg-card-2); border: 1px solid var(--gg-linha);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--gg-texto); }
.gg-topbar-nome { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* linha 2 de contexto (mes) a <=520px: nao cabe com Portal + Voltar + acoes. SO' com .gg-topbar-esq (divergencia 3). */
@media (max-width: 520px) {
  .gg-topbar-esq ~ .gg-topbar-mes { order: 3; flex: 1 0 100%; justify-content: center; border-top: 1px solid var(--gg-linha); margin-top: 4px; padding-top: 4px; }
}

/* ── nav3 · Fase 0 (2026-10-28, Bruno): migalhas. Selectores NOVOS -- nada existente muda. Monocromatico (so' --gg-texto/-2). ── */
.gg-migalhas { min-width: 0; }
.gg-migalhas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px;
  font-size: 12px; line-height: 1.4; color: var(--gg-texto-2); }
.gg-migalhas li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.gg-migalhas a { display: inline-block; padding: 14px 0; margin: -7px 0; /* alvo de toque 44px (45 medidos) sem engordar a linha: o padding compra a area, a margem negativa devolve a altura (nav3 F1, 2026-10-29) */
  color: var(--gg-texto-2); text-decoration: none; max-width: 40vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-migalhas a:hover { color: var(--gg-texto); text-decoration: underline; text-underline-offset: 3px; }
.gg-migalhas a:focus-visible { outline: 2px solid var(--gg-texto); outline-offset: 2px; border-radius: 2px; }
.gg-migalhas [aria-current="page"] { color: var(--gg-texto); font-weight: 600; display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-migalhas-sep { color: var(--gg-texto-3, var(--gg-texto-2)); }

/* nav3: o stepper do mes (◀ Out 2026 ▶) nao pode colar ao ▣ -- a seta ◀ do mes e a seta ← do Voltar ficariam lado a lado. So' com nav3 e so' em linha 1 (>520px). */
@media (min-width: 521px) { .gg-topbar-esq[data-gg-nav3] ~ .gg-topbar-mes { margin-left: 16px; } }

/* ── gg-pagina (cabecalho de pagina PARTILHAVEL; generaliza o .gg-pagina-cab do cockpit) ─────────────── */
.gg-pagina { display: flex; flex-direction: column; gap: 2px; padding: 16px 0 4px; min-width: 0; }
.gg-pagina-eb { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gg-texto-2); }
.gg-pagina-t { font-size: 22px; line-height: 1.25; font-weight: 700; margin: 0; color: var(--gg-texto); text-wrap: balance; }
.gg-pagina-meta { font-size: 13px; line-height: 1.4; color: var(--gg-texto-2); margin: 4px 0 0; }
.gg-pagina-meta--2 { font-size: 12px; color: var(--gg-texto-3); margin-top: 0; }
@media (min-width: 1024px) { .gg-pagina-t { font-size: 26px; } }

/* ── gg-lista / gg-link: linha clicavel com icone, titulo, sub, estado e › ──────────────────────────── */
.gg-lista { list-style: none; margin: 0; padding: 0; }
.gg-link { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center;
  min-height: 56px; padding: 10px 0; color: var(--gg-texto); text-decoration: none; box-shadow: inset 0 1px 0 var(--gg-linha); }
/* portal-12b: o filete e' sombra interior (nao border-top): deixa de contar para a altura, logo todas as linhas medem o mesmo. */
.gg-lista > li:first-child .gg-link { box-shadow: none; }
.gg-link-st { grid-column: 2; margin-top: 2px; }
.gg-link:focus-visible { outline: 2px solid var(--gg-texto); outline-offset: 2px; border-radius: 12px; }
.gg-link-ico { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 12px; background: var(--gg-card-2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--gg-texto); }
.gg-link-ico svg { width: 22px; height: 22px; }
.gg-link-t { font-size: 16px; font-weight: 600; grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
.gg-link-s { font-size: 13px; color: var(--gg-texto-2); grid-column: 2; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* rede de seguranca: subtitulo nunca quebra (altura uniforme) */
.gg-link-fim { grid-column: 3; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 8px; color: var(--gg-texto-3); }
.gg-link-fim .gg-seta { font-size: 22px; line-height: 1; }
.gg-link--atenuado .gg-link-t, .gg-link--atenuado .gg-link-s { color: var(--gg-texto-2); }
.gg-link--atenuado .gg-link-ico { opacity: .6; }
.gg-sec-t { font-size: 13px; font-weight: 600; color: var(--gg-texto-2); margin: 0 0 var(--gg-e2); }

/* gg-grupo (portal-12b): seccao recolhivel com o rotulo FORA do cartao (como o "Hoje"). <details class="gg-grupo"> +
   <summary class="gg-grupo-cab"> (rotulo .gg-sec-t + .gg-grupo-acao) + corpo (.gg-card). Aberto por defeito. */
.gg-grupo { margin-top: var(--gg-e6); }
.gg-grupo-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--gg-e3); min-height: 44px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.gg-grupo-cab::-webkit-details-marker { display: none; }
.gg-grupo-cab::marker { content: ""; }
.gg-grupo-cab:focus-visible { outline: 2px solid var(--gg-texto); outline-offset: 2px; border-radius: 12px; }
.gg-grupo-cab .gg-sec-t { margin: 0; }
.gg-grupo-acao { display: inline-flex; align-items: center; gap: var(--gg-e2); font-size: 13px; font-weight: 600; color: var(--gg-texto-2); }
.gg-grupo-chev { display: inline-block; font-size: 22px; line-height: 1; color: var(--gg-texto-3); transition: transform 150ms ease; }
.gg-grupo[open] .gg-grupo-chev { transform: rotate(90deg); }
.gg-grupo-a-abrir { display: inline; }
.gg-grupo-a-fechar { display: none; }
.gg-grupo[open] .gg-grupo-a-abrir { display: none; }
.gg-grupo[open] .gg-grupo-a-fechar { display: inline; }
@media (prefers-reduced-motion: reduce) { .gg-grupo-chev { transition: none; } }
/* 320-359px: o cartao tem 288px uteis e o subtitulo mais longo ("Todas as paginas, por area", 174px) so caberia por -1px; 16px laterais devolvem 8px. */
@media (max-width: 359px) { .gg-grupo-corpo { padding-left: var(--gg-e4); padding-right: var(--gg-e4); } }

/* gg-destino: tile grande (so' o hub: 2 destinos primarios lado a lado) */
.gg-destinos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gg-destino { display: flex; flex-direction: column; gap: 6px; min-height: 132px; box-sizing: border-box; padding: 16px;
  border-radius: var(--gg-raio-tile); background: var(--gg-card); border: 1px solid var(--gg-linha); color: var(--gg-texto); text-decoration: none; }
.gg-destino:focus-visible { outline: 2px solid var(--gg-texto); outline-offset: 2px; }
.gg-destino-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--gg-card-2); display: inline-flex; align-items: center; justify-content: center; }
.gg-destino-ico svg { width: 22px; height: 22px; }
.gg-destino-t { font-size: 17px; font-weight: 600; }
.gg-destino-s { font-size: 13px; color: var(--gg-texto-2); line-height: 1.35; }
.gg-destino .gg-chip { align-self: flex-start; margin-top: auto; }

/* ── gg-tabela ──────────────────────────────────────────────────────────────────────────────────────── */
.gg-tabela-w { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.gg-tabela { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.gg-tabela th { text-align: left; font-size: 12px; font-weight: 600; color: var(--gg-texto-2); padding: 8px 8px; white-space: nowrap;
  border-bottom: 1px solid var(--gg-linha); }
.gg-tabela td { padding: 0 8px; height: 48px; border-bottom: 1px solid var(--gg-linha); vertical-align: middle; }
.gg-tabela .gg-n { text-align: right; white-space: nowrap; }
.gg-tabela th.gg-n { text-align: right; }
.gg-tabela tbody tr:last-child td { border-bottom: 0; }
.gg-tabela .gg-nome { font-weight: 600; }
.gg-tabela .gg-pos { width: 28px; color: var(--gg-texto-3); }
.gg-tabela tr.gg-clicavel { cursor: pointer; }
.gg-tabela tr.gg-clicavel:focus-visible, .gg-tabela tr.gg-clicavel:hover td { background: var(--gg-card-2); }
.gg-tabela .gg-seta { color: var(--gg-texto-3); font-size: 20px; width: 20px; }
.gg-tabela tfoot td { font-weight: 700; border-top: 1px solid var(--gg-texto-3); border-bottom: 0; }
.gg-tabela .gg-delta { color: var(--gg-texto-2); font-size: 13px; } /* homologo SEMPRE neutro (D2): glifo + numero */
/* colunas secundarias: escondem-se pela largura do CONTENTOR (cartao), nao do ecra */
.gg-tabela-c { container-type: inline-size; container-name: gg-tab; }
@container gg-tab (max-width: 560px) { .gg-tabela .gg-sec, .gg-tabela .gg-pos, .gg-tabela .gg-seta { display: none; } .gg-tabela td, .gg-tabela th { padding-left: 6px; padding-right: 6px; } }

/* ── gg-vazio ───────────────────────────────────────────────────────────────────────────────────────── */
.gg-vazio { text-align: center; padding: 28px 16px; color: var(--gg-texto-2); font-size: 14px; }
.gg-vazio b { display: block; color: var(--gg-texto); font-size: 16px; margin-bottom: 4px; }
.gg-vazio .gg-btn { margin-top: 12px; }

/* ── gg-campo / gg-rotulo / gg-form-linha (spec v2.1 do Quadro de Tarefas) ──────────────────────────── */
.gg-rotulo { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gg-texto-2); margin: 0 0 4px; }
.gg-campo { height: 44px; min-height: 44px; box-sizing: border-box; width: 100%; padding: 0 12px; border-radius: 12px;
  background: var(--gg-card-2); color: var(--gg-texto); border: 1px solid var(--gg-linha); font: inherit; font-size: 16px; }
.gg-campo:focus-visible { outline: 2px solid var(--gg-texto); outline-offset: 2px; }
.gg-campo[aria-invalid="true"] { border-color: var(--gg-abaixo); }
.gg-campo:disabled { opacity: .45; }
.gg-form-linha { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; }

/* ── extras do mock (usados pelas paginas-modelo; nao estavam na lista da fundacao -- ver nota ao revisor) ── */
.gg-rodape-sis { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--gg-texto-3);
  padding: 20px 0 8px; }
.gg-rodape-sis a { color: var(--gg-texto-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.gg-nota { font-size: 12px; line-height: 1.5; color: var(--gg-texto-3); margin: 12px 0 0; }
.gg-meteo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; margin: 12px 0 16px;
  border-radius: var(--gg-raio-tile); background: var(--gg-card); border: 1px solid var(--gg-linha); font-size: 14px; }
.gg-meteo b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gg-meteo span { color: var(--gg-texto-2); }
/* prioridade no plano de accao: texto, nunca cor */
.gg-prio { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gg-texto-2); margin-right: 6px; }
.gg-acoes-l { list-style: none; margin: 0; padding: 0; }
.gg-acoes-l li { padding: 10px 0; border-top: 1px solid var(--gg-linha); font-size: 14px; line-height: 1.45; }
.gg-acoes-l li:first-child { border-top: 0; }
/* barra de controlos da pagina KPI (periodo + top N) */
.gg-controlos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 4px; }
.gg-controlos label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gg-texto-2); }
.gg-controlos .gg-sel { width: 100%; text-transform: none; letter-spacing: 0; font-weight: 400; }
/* grelha de cartoes da pagina KPI: 1 coluna no telemovel, 2 acima de 900px */
.gg-grelha { display: grid; gap: 16px; margin-top: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .gg-grelha--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .gg-destinos--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .gg-hub-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; } }

/* =============================================================================
   F2 · PAGINA-MODELO KPI (/xiaomi/faturacao) -- 2026-10-16, Bruno; spec: Clara. SO' ACRESCENTA (nenhuma regra acima mudou).
   Cada selector abaixo e' NOVO e so' apanha markup NOVO (provado por grep nas 7 paginas que carregam este ficheiro).
   ============================================================================= */
/* 1) Barra divergente NEUTRA: GG.dvLista(..., {neutro:true}) poe .gg-dv--neutro na lista. A variacao mostra o SENTIDO, nao e' alerta:
      barras em --gg-texto-3, texto do delta em --gg-texto-2. Especificidade (0,2,1) / (0,2,0) > base (0,1,1) / (0,1,0): sem !important.
      (A spec pedia "apos .gg-dv-pos>i"; a ordem e' indiferente porque a especificidade ja' decide, por isso vai tudo num bloco no fim.) */
.gg-dv--neutro .gg-dv-neg > i, .gg-dv--neutro .gg-dv-pos > i { background: var(--gg-texto-3); }
.gg-dv--neutro .gg-e-acima, .gg-dv--neutro .gg-e-abaixo { --gg-estado: var(--gg-texto-2); --gg-estado-bg: transparent; }
/* 2) [x-cloak]: vinha de xiaomi-common.css, que as paginas gg-ds deixam de carregar; sem isto ha' flash de Alpine. Mesma regra, mesmo valor. */
[x-cloak] { display: none !important; }
/* 3) Linhas de reconciliacao de uma .gg-tabela (Outras familias / Subtotal Xiaomi / Nao-Xiaomi): atenuadas, sem style="". */
.gg-tabela tr.gg-sub td { color: var(--gg-texto-2); font-weight: 400; }
/* 4) Nome da linha clicavel e' um <a href> (abre em novo separador, rato do meio, leitor de ecra): sem azul nem sublinhado. */
.gg-tabela .gg-nome a { color: inherit; text-decoration: none; }

/* =============================================================================
   portal-08 + portal-09 (2026-10-19, Bruno) -- componentes FORMAIS: gg-pagina (cabecalho de pagina, spec DM),
   gg-segm de ligacoes, gg-tabela--cartoes (tabela larga -> cartoes), gg-vazio (variantes), gg-form (campo + erro).
   SO' ACRESCENTA: nenhuma regra acima mudou (provado por diff: so' linhas '+'). Cada selector novo so' apanha markup NOVO
   (grep a /var/www/landing, aos .py e ao harness: zero ocorrencias de qualquer nome abaixo).
   Cor: NENHUMA nova. Unica cor e' --gg-abaixo/-bg no ERRO de campo (e' um alerta), sempre com glifo "!" + palavras.
   Compatibilidade com o cockpit (xiaomi-gestor.html, copia INLINE de .gg-topbar* e .gg-pagina-cab*):
     - .gg-topbar* : o formal (F1) e' a mesma regra, identico nas 17 regras comuns (comparadas por script, normalizando espacos) -> nada a mudar aqui.
     - .gg-pagina-cab -> `.gg-pagina.gg-pagina--cab` : mesma caixa (tecto --gg-largura, gutter), 22px/1.2, e em >=1024px
       eyebrow e titulo na mesma linha com " ·". Renomear -eb/-t para .gg-pagina-eb/.gg-pagina-t substitui sem regressao.
   ============================================================================= */

/* 1) botao primario (acao principal de um formulario/cabecalho) e botao que e' ligacao */
.gg-btn--primario { background: var(--gg-texto); color: var(--gg-card); border-color: var(--gg-texto); }
.gg-btn--primario:hover:not(:disabled) { border-color: var(--gg-texto); opacity: .88; }
a.gg-btn.gg-btn--lig { text-decoration: none; }   /* so' o botao-ligacao NOVO (o GG.pagina emite gg-btn--lig): <a class="gg-btn"> ja' existe no cockpit e em personal-carreira e nao muda */

/* 2) segmentado de LIGACOES (navegacao entre separadores de uma pagina): <nav class="gg-segm gg-segm--cheio"> com <a aria-current="page">.
      O activo e' o preenchido invertido + o "check" (nunca so' cor), como o .gg-segm de botoes. --cheio = largura toda, metades iguais. */
.gg-segm > a { display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: transparent;
  color: var(--gg-texto-2); font: inherit; font-size: 14px; font-weight: 600; padding: 0 14px; text-decoration: none;
  white-space: nowrap; transition: background-color .15s, color .15s; }
.gg-segm > a[aria-current="page"] { background: var(--gg-texto); color: var(--gg-card); }
.gg-segm > a[aria-current="page"] .gg-segm-v { display: inline; }
.gg-segm > a:focus-visible { outline: 2px solid var(--gg-texto); outline-offset: 2px; }
.gg-segm--cheio { display: flex; width: 100%; height: 52px; }   /* 52 = 44px de alvo util em cada metade (spec DM 7: >=44px) */
.gg-segm--cheio > a, .gg-segm--cheio > button { flex: 1 1 0; min-width: 0; padding: 0 8px; justify-content: center; }

/* 3) gg-pagina, parte DM: segmentado + linha de contexto/estado + accoes (spec_cabecalho_dm_regiao.md, VERSAO FINAL).
      Ordem: eyebrow, titulo, segmentado, meta-linha (contexto .... cadeado "Só leitura"), accoes (botao + carimbo). */
.gg-pagina-seg { margin-top: 12px; }
.gg-pagina-ml { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 14px; margin: 12px 0 0; min-width: 0; }
.gg-pagina-ml .gg-pagina-meta { margin: 0; min-width: 0; }
.gg-pagina-ro { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gg-texto-2); white-space: nowrap; }
.gg-pagina-ro svg { flex: 0 0 auto; width: 12px; height: 12px; }
.gg-pagina-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; min-width: 0; }
.gg-pagina-carimbo { font-size: 12px; color: var(--gg-texto-2); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 359px) { .gg-pagina-ml { flex-direction: column; align-items: flex-start; } }
/* variante do cockpit (substitui .gg-pagina-cab inline sem regressao): caixa propria + eyebrow e titulo na mesma linha a >=1024px */
.gg-pagina--cab { max-width: var(--gg-largura, none); margin: 0 auto; padding: 16px var(--gg-gutter, 1rem) 0; }
.gg-pagina--cab .gg-pagina-t { font-size: 22px; line-height: 1.2; }
@media (min-width: 1024px) {
  .gg-pagina--cab { flex-direction: row; align-items: baseline; gap: 8px; }
  .gg-pagina--cab .gg-pagina-eb::after { content: " \00B7"; }
}

/* 4) gg-tabela--cartoes: a tabela larga (8+ colunas) vira UM CARTAO POR LINHA quando o CONTENTOR (.gg-tabela-c) tem <=719px.
      Cada td leva data-rotulo (o GG.tabela escreve-o); o cabecalho fica so' para leitor de ecra. Sem esta classe a tabela nao muda.
      Nesta variante TODAS as colunas aparecem (incl. .gg-sec, que a regra de 560px esconderia): e' a razao de ser dos cartoes. */
@container gg-tab (max-width: 719px) {
  .gg-tabela.gg-tabela--cartoes, .gg-tabela--cartoes tbody, .gg-tabela--cartoes tfoot { display: block; }
  .gg-tabela--cartoes thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gg-tabela--cartoes thead tr, .gg-tabela--cartoes thead th { display: block; padding: 0; border: 0; }
  .gg-tabela--cartoes tbody tr, .gg-tabela--cartoes tfoot tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px;
    padding: 14px 0; border-bottom: 1px solid var(--gg-linha); }
  .gg-tabela--cartoes tbody tr:last-child { border-bottom: 0; }
  .gg-tabela--cartoes tfoot tr { border-top: 1px solid var(--gg-texto-3); border-bottom: 0; }
  .gg-tabela--cartoes td, .gg-tabela--cartoes tfoot td { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; height: auto;
    padding: 0; border: 0; text-align: left; white-space: normal; min-width: 0; }
  .gg-tabela--cartoes td::before { content: attr(data-rotulo); font-size: 11px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--gg-texto-2); }
  .gg-tabela--cartoes td.gg-nome { grid-column: 1 / -1; font-size: 16px; }
  .gg-tabela--cartoes td.gg-nome::before { content: none; }
  .gg-tabela--cartoes td.gg-n, .gg-tabela--cartoes td.gg-sec { display: flex; text-align: left; white-space: normal; }
  .gg-tabela--cartoes td.gg-pos, .gg-tabela--cartoes td.gg-seta { display: none; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 719px) {
    .gg-tabela.gg-tabela--cartoes, .gg-tabela--cartoes tbody, .gg-tabela--cartoes tfoot { display: block; }
    .gg-tabela--cartoes thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .gg-tabela--cartoes thead tr, .gg-tabela--cartoes thead th { display: block; padding: 0; border: 0; }
    .gg-tabela--cartoes tbody tr, .gg-tabela--cartoes tfoot tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px;
      padding: 14px 0; border-bottom: 1px solid var(--gg-linha); }
    .gg-tabela--cartoes tbody tr:last-child { border-bottom: 0; }
    .gg-tabela--cartoes tfoot tr { border-top: 1px solid var(--gg-texto-3); border-bottom: 0; }
    .gg-tabela--cartoes td, .gg-tabela--cartoes tfoot td { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; height: auto;
      padding: 0; border: 0; text-align: left; white-space: normal; min-width: 0; }
    .gg-tabela--cartoes td::before { content: attr(data-rotulo); font-size: 11px; font-weight: 600; letter-spacing: .04em;
      text-transform: uppercase; color: var(--gg-texto-2); }
    .gg-tabela--cartoes td.gg-nome { grid-column: 1 / -1; font-size: 16px; }
    .gg-tabela--cartoes td.gg-nome::before { content: none; }
    .gg-tabela--cartoes td.gg-n, .gg-tabela--cartoes td.gg-sec { display: flex; text-align: left; white-space: normal; }
    .gg-tabela--cartoes td.gg-pos, .gg-tabela--cartoes td.gg-seta { display: none; }
  }
}

/* 5) gg-vazio: variante compacta (dentro de cartao pequeno / resultado de filtro) + icone neutro opcional */
.gg-vazio--compacto { padding: 16px 12px; }
.gg-vazio-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--gg-card-2); color: var(--gg-texto-2); margin-bottom: 8px; }
.gg-vazio-ico svg { width: 22px; height: 22px; }

/* 6) gg-form: grupo de campo (rotulo + campo + ajuda + ERRO), resumo de erros, accoes.
      O erro e' sempre texto + glifo "!" (a cor --gg-abaixo so' reforca; unico sitio de cor, porque e' um alerta).
      aria-invalid="true" no campo (regra .gg-campo[aria-invalid] ja' existia) ganha contorno de 2px; aria-describedby liga ajuda e erro. */
.gg-form { display: grid; gap: 16px; max-width: 480px; min-width: 0; }
.gg-campo-g { min-width: 0; }
.gg-obrig { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--gg-texto-3); }
.gg-campo-g .gg-campo[aria-invalid="true"] { border-width: 2px; padding: 0 11px; }   /* dentro do grupo NOVO: o .gg-campo[aria-invalid] solto fica como estava */
.gg-campo-g select.gg-campo { -webkit-appearance: none; appearance: none; padding-right: 32px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gg-texto-2) 50%), linear-gradient(135deg, var(--gg-texto-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.gg-campo-g textarea.gg-campo { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.4; resize: vertical; }
.gg-campo-ajuda { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--gg-texto-2); }
.gg-campo-erro { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 0; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--gg-abaixo); }
.gg-campo-erro[hidden] { display: none; }
.gg-campo-erro-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-top: 1px;
  border: 1.5px solid currentColor; border-radius: 50%; font-size: 11px; font-weight: 700; line-height: 1; }
.gg-form-resumo { padding: 12px 14px; border: 1px solid var(--gg-abaixo); background: var(--gg-abaixo-bg); border-radius: 12px; color: var(--gg-abaixo); font-size: 14px; line-height: 1.45; }
.gg-form-resumo[hidden] { display: none; }
.gg-form-resumo b { display: block; margin-bottom: 4px; }
.gg-form-resumo ul { margin: 0; padding-left: 18px; }
.gg-form-resumo a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.gg-form-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
@media (max-width: 520px) { .gg-form-acoes .gg-btn { flex: 1 1 100%; } }

/* ── RANKING DE LOJAS + FOOTFALL YoY (por-50 / por-51 · 2026-10-29 · Bruno) · so' tokens --gg-*; monocromatico; 390px sem scroll horizontal ── */
.gg-rk .gg-rk-ord { -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 8px 0; margin: 0; font: inherit; font-weight: 600; color: inherit; cursor: pointer; min-height: 44px; white-space: nowrap; }
.gg-rk .gg-rk-ord:focus-visible { outline: 2px solid var(--gg-texto); outline-offset: 2px; border-radius: 6px; }
.gg-rk .gg-rk-ord:hover { color: var(--gg-texto); }
.gg-rk .gg-tabela tfoot td { font-weight: 700; }
.gg-rk .gg-rk-sel { display: none; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; color: var(--gg-texto-2); }
.gg-rk .gg-rk-sel .gg-sel { font-size: 16px; min-height: 44px; }
@container gg-tab (max-width: 719px) { .gg-rk .gg-rk-sel { display: flex; } }
.gg-ffy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.gg-ffy-c { background: var(--gg-card-2); border: 1px solid var(--gg-linha); border-radius: var(--gg-raio-card); padding: 12px 14px; min-width: 0; transition: border-color .15s; }
.gg-ffy-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin-bottom: 6px; }
.gg-ffy-n { margin: 0; font-size: 15px; font-weight: 700; color: var(--gg-texto); }
.gg-ffy-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.gg-ffy-l { margin: 8px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gg-texto-3); }
.gg-ffy-v { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--gg-texto); }
.gg-ffy-v2 { margin: 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gg-texto); }
.gg-ffy-s { margin: 2px 0 0; font-size: 13px; font-weight: 400; color: var(--gg-texto-2); font-variant-numeric: tabular-nums; }
.gg-ffy-var { color: var(--gg-texto-2); }
.gg-ffy-a { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--gg-texto-2); }
.gg-ffy-c[data-gg-ffy-estado="nao_fiavel"] .gg-ffy-v { color: var(--gg-texto-3); }

/* ══════════════════════════════════════════════════════════════════════════
   tabelas-d1 (2026-11-05, Bruno; spec: maqueta aprovada) · prefixo gg-tab-* (NAO reutiliza .gg-dv-row/.gg-oq-row: os asserts do visual-check agarram-se a essas).
   Celula = valor em cima + delta discreto por baixo (2 linhas, altura uniforme). MONOCROMATICO: zero cor nos deltas (so' formas e cinzentos);
   a unica cor e' o semaforo (GG.chip), que NAO se toca. Indicativo = cinzento + italico.
   ══════════════════════════════════════════════════════════════════════════ */
.gg-tab-c { display: block; text-align: right; }
.gg-tab-v { display: block; font-size: 15px; font-weight: 600; line-height: 20px; font-variant-numeric: tabular-nums; color: var(--gg-texto); }
.gg-tab-v--0 { color: var(--gg-texto-3); }
.gg-tab-d { display: block; height: 16px; margin-top: 1px; font-size: 12px; font-weight: 400; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: clip; color: var(--gg-texto-2); font-variant-numeric: tabular-nums; }
.gg-tab-d--ind { font-style: italic; color: var(--gg-texto-3); }
.gg-tab-d--flat, .gg-tab-d--sem, .gg-tab-d--sv { color: var(--gg-texto-3); }
.gg-tab-am { color: var(--gg-texto-2); font-weight: 400; }
.gg-tab-ind { font-style: italic; font-weight: 400; }        /* delta indicativo numa LINHA (gg-hd) */
.gg-tab-sv { font-weight: 400; }
.gg-tab-leg { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--gg-texto-3); }
.gg-tab-ban { margin: 0 0 8px; padding: 6px 10px; border: 1px solid var(--gg-linha); border-radius: 8px; font-size: 12px; line-height: 1.45; color: var(--gg-texto-2); }
.gg-tab-z [data-z="1"] { background: var(--gg-zebra); }       /* zebra por indice VISIVEL (GG.tabZebra), nunca :nth-child: linhas escondidas distorcem o indice */

/* ══════════════════════════════════════════════════════════════════════════
   tabelas-d2 (2026-11-05, Bruno) · GG.tabPlana (loja x metricas) · prefixo gg-tab-* (NAO reutiliza .gg-dv-row/.gg-oq-row).
   1.a coluna FIXA com o scroll lateral (sticky; border-collapse:separate porque collapse + sticky perde as bordas), linha «topo» (Rede) fixa e sem zebra, bloco «fundo» (Online) separado.
   MONOCROMATICO: neutros de legibilidade (--gg-card-2, --gg-linha, --gg-texto-3, --gg-zebra); a unica cor da pagina continua a ser o semaforo (GG.chip), que nao se toca.
   ══════════════════════════════════════════════════════════════════════════ */
.gg-tab-t { border-collapse: separate; border-spacing: 0; }
.gg-tab-t th.gg-tab-n1 { text-align: left; position: sticky; left: 0; z-index: 1; background-color: var(--gg-card); }
.gg-tab-t thead th.gg-tab-n1 { z-index: 2; }
.gg-tab-t tbody th.gg-tab-n1 { height: 48px; min-width: 104px; max-width: 168px; padding: 0 12px 0 8px; font-size: 14px; font-weight: 600; color: var(--gg-texto);
  white-space: normal; overflow-wrap: break-word; vertical-align: middle; border-bottom: 1px solid var(--gg-linha); }      /* break-word (NAO anywhere): «Matosinhos» nunca se parte a meio da palavra */
.gg-tab-t th a { color: inherit; text-decoration: none; }
.gg-tab-t th a:hover, .gg-tab-t th a:focus-visible { text-decoration: underline; }
.gg-tab-t td.gg-tab-cel { min-width: 96px; padding: 0 10px; }
.gg-tab-z [data-z="1"] > .gg-tab-n1 { background-image: linear-gradient(var(--gg-zebra), var(--gg-zebra)); }       /* a celula fixa e' opaca: repete a zebra por cima do cartao */
.gg-tab-t tbody .gg-tab-r--topo > th, .gg-tab-t tbody .gg-tab-r--topo > td { background-color: var(--gg-card-2); border-bottom: 1px solid var(--gg-texto-3); }
.gg-tab-t tbody .gg-tab-r--topo > th { font-weight: 700; }
.gg-tab-t .gg-tab-r--fundo1 > th, .gg-tab-t .gg-tab-r--fundo1 > td { border-top: 1px solid var(--gg-texto-3); }
.gg-tab-t tbody tr:last-child > th { border-bottom: 0; }