/* Design System Galeria · componentes · v2 (03/10/2026)
   Feito para ser copiado. Carregue depois de galeria-tokens.css.
   Regras: só tokens semânticos (nenhum hex, nenhum primitivo); classes com prefixo g-;
   a bancada é qualquer área dentro de [data-mode="bancada"]; a plataforma vem de [data-accent] no <html>. */
/* fontes: arquivos locais do kit, sem rede. Em Next.js, as duas entram por next/font/local com as variáveis
   --font-galeria e --font-galeria-nome, e os @font-face abaixo ficam sem uso (o nome literal é só reserva). */
@font-face{font-family:"Host Grotesk";src:url("host-grotesk.woff2") format("woff2");font-weight:300 800;font-display:swap}

/* ---------- token de componente: o vidro (camada 0, princípio 4) ---------- */
:root{--glass-fill:color-mix(in srgb,var(--surface-ground) calc(var(--glass) * 100%),transparent)}
:root[data-theme="dark"]{--glass-fill:color-mix(in srgb,var(--surface-raised) calc(var(--glass) * 100%),transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glass-fill:color-mix(in srgb,var(--surface-raised) calc(var(--glass) * 100%),transparent)}}

/* ---------- nome gerado: zero cortado (camada 1, decidido em 03/10/2026) ----------
   Galeria Nome é a Host Grotesk sem alternativa contextual e sem ligaduras, com o zero cortado (decidido em 04/10/2026):
   quem usar a família leva a regra junto, sem depender de seletor. O zero é esboço até o desenho final. */
@font-face{font-family:"Galeria Nome";src:url("galeria-nome.woff2") format("woff2");font-weight:300 800;font-display:swap}

/* ---------- base ---------- */
.g-app{font-family:var(--font-sans);font-size:1rem;line-height:1.5rem;background:var(--surface-ground);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
.g-app *,.g-app *::before,.g-app *::after{box-sizing:border-box}
.g-app :where(h1,h2,h3,p,ul,ol,figure){margin:0}
.g-app :where(button,input,select,textarea){font:inherit;color:inherit}
.g-app :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:0;box-shadow:0 0 0 var(--focus-ring-inner-width) var(--focus-ring-inner),0 0 0 var(--focus-ring-outer-width) var(--focus-ring-outer)}
/* 04/10/2026: o foco do sistema vale também para a peça g- fora do .g-app, para a plataforma que migra por partes */
:where(a,button,input,select,textarea,summary,[tabindex]):where([class^="g-"],[class*=" g-"]):focus-visible{outline:0;box-shadow:0 0 0 var(--focus-ring-inner-width) var(--focus-ring-inner),0 0 0 var(--focus-ring-outer-width) var(--focus-ring-outer)}
.g-support{color:var(--text-support)}
.g-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- moldura: a faixa do topo ---------- */
.g-frame{position:sticky;top:0;z-index:20;height:var(--bar-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-24);padding:0 var(--space-48);background:var(--surface-ground)}
.g-frame.g-is-scrolled,[data-mode="bancada"] .g-frame{box-shadow:inset 0 -1px 0 var(--line-structure)}
.g-frame__id{display:flex;align-items:center;gap:var(--space-16);min-width:0;white-space:nowrap}
.g-frame__logo{height:16px;width:auto;display:block}
.g-frame__name{font-weight:800;font-size:1.25rem;line-height:1.5rem;letter-spacing:-.04em;padding-left:var(--space-16);box-shadow:inset 1px 0 0 var(--line-structure)}
.g-frame__nav{display:flex;gap:var(--space-4);padding:var(--space-4);border-radius:var(--radius-pill);background:var(--surface-hover)}
.g-frame__nav a{display:flex;align-items:center;min-height:var(--touch-min);padding:0 var(--space-16);border-radius:var(--radius-pill);color:var(--text-primary);text-decoration:none}
.g-frame__nav a[aria-current="page"]{background:var(--text-primary);color:var(--surface-ground)}
.g-frame__nav a:not([aria-current="page"]):hover{background:var(--surface-hover-deep)}
.g-frame > .g-frame__id{grid-column:1;grid-row:1}
.g-frame > .g-frame__nav,.g-frame > .g-sections{grid-column:2;grid-row:1;justify-self:center}
.g-frame__acts{grid-column:-2/-1;grid-row:1;justify-self:end;display:flex;align-items:center;gap:var(--space-8)}
.g-person{display:flex;align-items:center;gap:var(--space-8);min-height:var(--touch-min);padding:var(--space-4) var(--space-16) var(--space-4) var(--space-4);border-radius:var(--radius-pill);background:var(--surface-hover);border:0;cursor:pointer}
.g-person__photo{width:36px;height:36px;border-radius:var(--radius-mark);object-fit:cover;background:var(--text-primary);color:var(--surface-ground);display:grid;place-items:center;font-size:.75rem;font-weight:500}
@media (max-width:900px){.g-frame{height:var(--bar-h-mobile);padding:0 var(--space-16);gap:var(--space-8)}.g-frame:not([data-medida]) .g-frame__nav,.g-frame__name,.g-person__name{display:none}.g-person{padding:var(--space-4)}}

/* ---------- botões ---------- */
.g-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);min-height:48px;padding:0 var(--space-24);border:0;border-radius:var(--radius-pill);font-weight:500;white-space:nowrap;cursor:pointer;text-decoration:none;transition:background-color var(--duration-fast) var(--ease-dry),color var(--duration-fast) var(--ease-dry),transform var(--duration-fast) var(--ease-dry)}
.g-btn--primary{background:var(--platform-primary);color:var(--platform-on-primary)}
.g-btn--primary:hover{background:var(--platform-primary-hover)}
.g-btn--primary:active{background:var(--platform-primary-pressed)}
.g-btn--secondary{background:transparent;color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--line-strong)}
.g-btn--quiet{background:transparent;color:var(--text-primary);padding:0 var(--space-16)}
.g-btn--secondary:hover,.g-btn--quiet:hover{background:var(--surface-hover)}
.g-btn--secondary:active,.g-btn--quiet:active{background:var(--field-fill-focus)}
.g-btn--destroy{background:var(--state-error);color:var(--state-on-error)}
/* botão denso (04/10/2026): só em barra que acompanha a grade; nunca em ação principal */
.g-btn--denso{min-height:var(--touch-min);padding:0 var(--space-16);font-size:.8125rem;line-height:1rem}
.g-btn:active{transform:scale(var(--pressed-scale))}
/* botão de ícone (04/10/2026): redondo, 44px, só ícone; o nome vai no aria-label e na dica */
.g-icon-btn{display:inline-grid;place-items:center;flex:none;width:var(--touch-min);height:var(--touch-min);padding:0;border:0;border-radius:var(--radius-mark);background:var(--surface-hover);color:var(--text-primary);cursor:pointer;text-decoration:none;transition:background-color var(--duration-fast) var(--ease-dry)}
.g-icon-btn svg{width:20px;height:20px}
.g-icon-btn:hover{background:var(--surface-hover-deep)}
.g-icon-btn--quiet{background:transparent}
.g-icon-btn--quiet:hover{background:var(--surface-hover)}
.g-icon-btn:active{transform:scale(var(--pressed-scale))}
.g-icon-btn[aria-expanded="true"],.g-icon-btn[aria-pressed="true"]{background:var(--text-primary);color:var(--surface-ground)}
.g-icon-btn:is(:disabled,[aria-disabled="true"]){background:var(--disabled-fill);color:var(--disabled-text);cursor:var(--cursor-disabled);transform:none}
.g-btn:is(:disabled,[aria-disabled="true"]){background:var(--disabled-fill);color:var(--disabled-text);box-shadow:none;cursor:var(--cursor-disabled);transform:none}
@media (hover:none){.g-btn--quiet{background:var(--surface-hover)}}
/* esperando dentro do botão: o contorno que corre (camada 3) */
.g-btn[aria-busy="true"]{background:transparent;color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--line-structure);cursor:progress}
.g-btn__run{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.g-btn__run rect{x:1px;y:1px;width:calc(100% - 2px);height:calc(100% - 2px);rx:23px;ry:23px;fill:none;stroke:var(--platform-accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:22 78;animation:g-run var(--duration-loop) linear infinite}
@keyframes g-run{to{stroke-dashoffset:-100}}

/* ---------- chips de filtro ---------- */
.g-chips{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.g-chip{display:inline-flex;align-items:center;min-height:var(--touch-min);padding:0 var(--space-16);border-radius:var(--radius-pill);border:1px solid var(--line-control);background:transparent;color:var(--text-primary);font-size:.875rem;cursor:pointer;transition:background-color var(--duration-fast) var(--ease-dry)}
.g-chip:hover{background:var(--surface-hover)}
.g-chip[aria-pressed="true"]{background:var(--text-primary);color:var(--surface-ground);border-color:var(--text-primary)}

/* ---------- campo tonal ---------- */
.g-field{display:flex;flex-direction:column;gap:var(--space-8);max-width:var(--measure-max)}
.g-field__label{font-size:.875rem;line-height:1.25rem;font-weight:500}
.g-field__input{min-height:var(--touch-min);padding:0 var(--space-16);border:0;border-radius:var(--radius-s) var(--radius-s) 0 0;background:var(--field-fill);box-shadow:inset 0 -1px 0 var(--field-line);color:var(--text-primary)}
.g-field__input:focus,.g-field__input:focus-visible{outline:0;background:var(--field-fill-focus);box-shadow:inset 0 -2px 0 var(--platform-accent)}
.g-field__input::placeholder{color:var(--text-support)}
/* área de texto (05/10/2026): o campo de várias linhas ganha respiro vertical; a altura mínima de uma linha continua 44px */
textarea.g-field__input{padding-block:var(--space-8);min-height:calc(var(--touch-min) * 2);resize:vertical}
.g-field__hint{font-size:.875rem;line-height:1.25rem;color:var(--text-support)}
.g-field.g-is-error .g-field__input{box-shadow:inset 0 -2px 0 var(--state-error)}
.g-field.g-is-error .g-field__hint{color:var(--text-primary)}

/* ---------- alternador e caixa de marcação ---------- */
.g-switch{display:inline-flex;align-items:center;gap:var(--space-16);min-height:var(--touch-min);cursor:pointer}
.g-switch input{position:absolute;opacity:0;width:1px;height:1px}
.g-switch__track{position:relative;width:52px;height:30px;flex:none;border-radius:var(--radius-pill);background:var(--toggle-track-off);transition:background-color var(--duration-base) var(--ease-dry)}
.g-switch__track::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:var(--radius-mark);background:var(--toggle-knob-off);transition:left var(--duration-base) var(--ease-dry),background-color var(--duration-base) var(--ease-dry)}
.g-switch input:checked + .g-switch__track,[aria-checked="true"] > .g-switch__track{background:var(--toggle-track-on)}
.g-switch input:checked + .g-switch__track::after,[aria-checked="true"] > .g-switch__track::after{left:25px;background:var(--toggle-knob-on)}
.g-switch__track::before{content:"";position:absolute;z-index:1;top:9px;left:34px;width:6px;height:11px;box-sizing:border-box;border:solid var(--toggle-check);border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0;transition:opacity var(--duration-base) var(--ease-dry)}
.g-switch input:checked + .g-switch__track::before,[aria-checked="true"] > .g-switch__track::before{opacity:1}
.g-switch input:focus-visible + .g-switch__track{box-shadow:0 0 0 var(--focus-ring-inner-width) var(--focus-ring-inner),0 0 0 var(--focus-ring-outer-width) var(--focus-ring-outer)}
.g-check{width:20px;height:20px;accent-color:var(--platform-accent);border-radius:0}
@media (prefers-reduced-motion:reduce){.g-icon-btn{transition:none}.g-switch__track,.g-switch__track::after,.g-switch__track::before{transition:none}}

/* ---------- superfícies ---------- */
.g-card{background:var(--surface-hover);border-radius:var(--radius-s);padding:var(--space-24);display:flex;flex-direction:column;gap:var(--space-8);min-width:0}
.g-card--raised{background:var(--surface-raised)}
.g-card--float{background:var(--surface-float);color:var(--text-on-float);border-radius:var(--radius-l);box-shadow:var(--elevation-3)}
.g-glass{background:var(--glass-fill);-webkit-backdrop-filter:blur(var(--blur-glass)) saturate(1.3);backdrop-filter:blur(var(--blur-glass)) saturate(1.3);border-radius:var(--radius-l);box-shadow:var(--elevation-2);padding:var(--space-24);color:var(--text-primary)}
.g-glass .g-support,.g-glass .g-field__hint{color:var(--text-primary)}
.g-tip{position:absolute;z-index:30;max-width:280px;padding:var(--space-8) var(--space-16);border-radius:var(--radius-s);background:color-mix(in srgb,var(--surface-raised) calc(var(--glass-tip) * 100%),transparent);-webkit-backdrop-filter:blur(var(--blur-tip)) saturate(1.3);backdrop-filter:blur(var(--blur-tip)) saturate(1.3);box-shadow:var(--elevation-2);font-size:.875rem;line-height:1.25rem}
.g-tip b{display:block;font-weight:500}
.g-has-tip{text-decoration:underline dotted var(--text-support);text-underline-offset:3px;cursor:help}

/* ---------- estado: forma e palavra, nunca só cor ---------- */
.g-status{display:inline-flex;align-items:center;gap:var(--space-8);color:var(--text-primary)}
.g-status::before{content:"";width:8px;height:8px;flex:none}
.g-status--error::before{background:var(--state-error)}
.g-status--warning::before{background:var(--state-warning);transform:rotate(45deg) scale(.85)}
.g-status--success::before{background:var(--state-success);border-radius:var(--radius-mark)}
/* status do domínio (03/10/2026): forma vazada é a variação do estado; nenhuma cor nova */
.g-status--review::before{background:none;box-shadow:inset 0 0 0 2px var(--state-warning);transform:rotate(45deg) scale(.85)}
.g-status--legacy::before{background:none;box-shadow:inset 0 0 0 2px var(--line-control)}
.g-status--draft::before{background:none;box-shadow:inset 0 0 0 2px var(--line-control);border-radius:var(--radius-mark)}
/* bloco (05/10/2026): frase de várias linhas; o marcador fica na altura da primeira linha e a frase quebra inteira ao lado */
.g-status--bloco{display:flex;align-items:flex-start}
.g-status--bloco::before{margin-top:calc((1lh - 8px) / 2)}

/* ---------- número e texto do modelo ---------- */
.g-kpi__label{font-size:.875rem;line-height:1.25rem;color:var(--text-support)}
.g-kpi__value{font-size:3.5rem;line-height:3.5rem;letter-spacing:-.04em;font-weight:400}
.g-source{font-size:.75rem;line-height:1rem;color:var(--text-support)}
.g-ai{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:var(--space-32);row-gap:var(--space-8)}
.g-ai__title{font-weight:500}
.g-ai__text{display:flex;flex-direction:column;gap:var(--space-16);max-width:var(--measure-max)}
@media (max-width:760px){.g-ai{grid-template-columns:1fr}}

/* ---------- tabelas ---------- */
.g-table{width:100%;border-collapse:collapse;font-size:.875rem;line-height:1.25rem}
.g-table th{position:sticky;top:var(--g-table-top,0px);z-index:1;background:var(--surface-ground);text-align:left;font-size:.8125rem;line-height:1rem;font-weight:500;color:var(--text-support);box-shadow:inset 0 -1px 0 var(--line-strong)}
.g-table td{border-bottom:1px solid var(--line-structure)}
.g-table .g-num{text-align:right}
.g-table--read th{height:var(--table-header-reading);padding:0 var(--space-16)}
.g-table--read td{height:var(--table-row-reading);padding:0 var(--space-16)}
.g-app:has(.g-frame){--g-table-top:var(--bar-h)}
@media (max-width:900px){.g-app:has(.g-frame){--g-table-top:var(--bar-h-mobile)}}
.g-table--read tbody tr{position:relative;cursor:pointer}
.g-table__open{color:inherit;text-decoration:none}
.g-table__open::after{content:"";position:absolute;inset:0}
.g-table__open:focus-visible{outline:0}
.g-table--read tbody tr:has(.g-table__open:focus-visible){outline:var(--focus-ring-inner-width) solid var(--focus-ring-outer);outline-offset:calc(var(--focus-ring-inner-width) * -1)}
.g-table--read tbody tr:hover,.g-table--read tbody tr:focus-within{background:var(--surface-hover)}
.g-table--read td.g-go,.g-table--read th.g-go{width:32px;padding-left:0;padding-right:var(--space-8);text-align:right;color:var(--text-support)}
.g-table--read tr.g-is-client td:first-child{font-weight:500}
.g-table--read tr.g-is-brand td{color:var(--text-support)}
.g-table--read tr.g-is-brand td:first-child{padding-left:var(--space-48)}
.g-table--grid th{height:var(--grid-header);padding:0 var(--space-8)}
.g-table--grid td{height:var(--grid-row);padding:0}
.g-table--grid td input{width:100%;height:100%;min-height:var(--grid-row);padding:0 var(--space-8);border:0;background:transparent}
.g-table--grid td input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--focus-ring-outer)}
/* linha inválida: a única exceção à regra de estado (03/10/2026). Véu de state-veil (12%) na linha, contorno de 2px na célula que falhou */
.g-table--grid tr.g-is-invalid td,.g-table--grid tr.g-is-invalid:hover td{background:color-mix(in srgb,var(--state-error) calc(var(--state-veil) * 100%),var(--surface-raised))}
.g-table--grid tr.g-is-invalid td[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--state-error)}
.g-table--grid tr.g-is-invalid td[aria-invalid="true"] input:focus{box-shadow:inset 0 0 0 2px var(--state-error),inset 0 0 0 4px var(--focus-ring-outer)}
.g-name{font-family:var(--font-galeria-nome,"Galeria Nome"),var(--font-sans);font-variant-numeric:tabular-nums}
.g-table--grid td.g-name{padding:0 var(--space-8);white-space:nowrap}
.g-name__bad{background:none;color:inherit;font-weight:500;text-decoration:underline 2px var(--state-error);text-underline-offset:4px}
.g-table--grid .g-grid__status{position:sticky;left:0;z-index:1;white-space:nowrap;padding:0 var(--space-8);background:inherit}

/* ---------- gráficos: vitrine com degradê, bancada chapada ---------- */
.g-bars{display:flex;flex-direction:column;gap:var(--space-16)}
.g-bar__head{display:flex;justify-content:space-between;font-size:.875rem;line-height:1.25rem;margin-bottom:var(--space-8)}
.g-bar__track{height:8px;border-radius:var(--radius-pill);background:var(--surface-hover);overflow:hidden}
.g-bar__fill{display:block;height:100%;width:var(--v,0%);border-radius:var(--radius-pill);background-image:linear-gradient(90deg,var(--chart-bar-base),var(--chart-bar-tip));transition:width var(--duration-chart) var(--ease-reveal)}
.g-cols{display:flex;align-items:flex-end;gap:var(--space-16);height:200px;box-shadow:inset 0 -1px 0 var(--line-strong)}
.g-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;height:100%;gap:var(--space-8)}
.g-col__value{font-size:1.75rem;line-height:2rem;letter-spacing:-.03em}
.g-col__bar{height:var(--v,0%);border-radius:var(--radius-l) var(--radius-l) 0 0;background-image:linear-gradient(0deg,var(--chart-bar-base),var(--chart-bar-tip))}
.g-compose{display:flex;gap:var(--chart-gap);height:36px}
.g-compose > span{display:flex;align-items:center;padding-left:var(--space-8);min-width:0;overflow:hidden;white-space:nowrap;font-size:.75rem;font-weight:500}
.g-compose > span:first-child{border-radius:var(--radius-l) 0 0 var(--radius-l)}
.g-compose > span:last-child{border-radius:0 var(--radius-l) var(--radius-l) 0}
.g-compose > span:nth-child(1){background:var(--chart-cat-1);color:var(--chart-on-cat-1)}
.g-compose > span:nth-child(2){background:var(--chart-cat-2);color:var(--chart-on-cat-2)}
.g-compose > span:nth-child(3){background:var(--chart-cat-3);color:var(--chart-on-cat-3)}
.g-compose > span:nth-child(4){background:var(--chart-cat-4);color:var(--chart-on-cat-4)}
[data-mode="bancada"] :is(.g-bar__track,.g-bar__fill,.g-col__bar,.g-compose > span){border-radius:0}
[data-mode="bancada"] :is(.g-bar__fill,.g-col__bar){background-image:none;background-color:var(--chart-series);transition:none}
@media (prefers-reduced-motion:reduce){.g-bar__fill{transition:none}}

/* legenda e tabela equivalente: todo gráfico se lê também como texto */
.g-compose__legend{list-style:none;margin:var(--space-8) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-8) var(--space-16);font-size:.75rem;line-height:1rem;color:var(--text-support)}
.g-compose__legend li{display:inline-flex;align-items:center;gap:var(--space-8)}
.g-compose__legend li::before{content:"";width:8px;height:8px;flex:none;background:var(--c)}
.g-chart-table{margin-top:var(--space-8)}
.g-chart-table > summary{display:inline-flex;align-items:center;min-height:var(--touch-min);list-style:none;cursor:pointer;font-size:.875rem;line-height:1.25rem;color:var(--text-primary);text-decoration:underline;text-underline-offset:3px}
.g-chart-table > summary::-webkit-details-marker{display:none}

/* ---------- seções no celular: botão em pílula que abre a folha ---------- */
.g-sections{display:none;position:relative}
.g-sections__button{display:inline-flex;align-items:center;gap:var(--space-8);min-height:var(--touch-min);padding:0 var(--space-16);border:0;border-radius:var(--radius-pill);background:var(--surface-hover);color:var(--text-primary);font:inherit;font-weight:500;cursor:pointer}
.g-sections__button:hover{background:var(--surface-hover-deep)}
.g-sections__button[aria-expanded="true"]{background:var(--text-primary);color:var(--surface-ground)}
.g-sections__sheet{position:absolute;top:calc(100% + var(--space-8));left:50%;transform:translateX(-50%);min-width:240px;z-index:30;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-8);border-radius:var(--radius-l);background:var(--glass-fill);-webkit-backdrop-filter:blur(var(--blur-glass)) saturate(1.3);backdrop-filter:blur(var(--blur-glass)) saturate(1.3);box-shadow:var(--elevation-2)}
.g-sections__sheet[hidden]{display:none}
.g-sections__client{padding:var(--space-8) var(--space-16);font-weight:500;color:var(--text-primary)}
.g-sections__sheet a{display:flex;align-items:center;min-height:var(--touch-min);padding:0 var(--space-16);border-radius:var(--radius-pill);color:var(--text-primary);text-decoration:none;white-space:nowrap}
.g-sections__sheet a:not([aria-current="page"]):hover{background:var(--surface-hover)}
.g-sections__sheet a[aria-current="page"]{background:var(--text-primary);color:var(--surface-ground)}
.g-frame--secoes .g-frame__nav{display:none}
.g-frame--secoes .g-sections{display:block}
@media (max-width:900px){.g-sections{display:block}.g-frame[data-medida]:not(.g-frame--secoes) .g-sections{display:none}.g-sections__sheet{position:fixed;top:auto;left:var(--space-16);right:var(--space-16);bottom:var(--space-16);transform:none;padding:var(--space-16);box-shadow:var(--elevation-3)}}
/* menu do perfil (04/10/2026): vidro, como a folha das Seções; sobre vidro, só text-primary */
.g-menu{position:relative}
.g-menu__panel{position:absolute;top:calc(100% + var(--space-8));right:0;z-index:30;min-width:260px;display:flex;flex-direction:column;padding:var(--space-8);border-radius:var(--radius-l);background:var(--glass-fill);-webkit-backdrop-filter:blur(var(--blur-glass)) saturate(1.3);backdrop-filter:blur(var(--blur-glass)) saturate(1.3);box-shadow:var(--elevation-2)}
.g-menu__panel[hidden]{display:none}
/* menu de ação (05/10/2026): abre sob o botão, alinhado ao começo dele; no celular desce como o do perfil */
.g-menu__panel--acao{right:auto;left:0}
.g-menu__head{padding:var(--space-8);font-weight:500;color:var(--text-primary);overflow-wrap:anywhere}
.g-menu__note{padding:0 var(--space-8) var(--space-8);font-size:.875rem;line-height:1.25rem;color:var(--text-primary)}
.g-menu__sep{height:1px;margin:var(--space-4) 0;background:var(--line-structure);border:0}
.g-menu__item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);width:100%;min-height:var(--touch-min);padding:0 var(--space-8);border:0;border-radius:var(--radius-s);background:none;color:var(--text-primary);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.g-menu__item:hover,.g-menu__item:focus-visible{background:var(--surface-hover)}
.g-menu__item > .g-switch__track{pointer-events:none}
@media (max-width:900px){.g-menu__panel{position:fixed;top:auto;left:var(--space-16);right:var(--space-16);bottom:var(--space-16);min-width:0;padding:var(--space-16);box-shadow:var(--elevation-3)}}

/* ---------- carregamento ---------- */
.g-progress{position:relative;height:3px;overflow:hidden;border-radius:var(--radius-pill)}
.g-progress > i{position:absolute;top:0;bottom:0;left:0;width:var(--p,0%);border-radius:var(--radius-pill);background:var(--platform-accent);transition:width var(--duration-progress) linear}
.g-progress.g-is-unknown > i{width:30%;animation:g-sweep var(--duration-loop) var(--ease-sweep) infinite}
@keyframes g-sweep{0%{left:-30%}100%{left:100%}}
.g-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-16);padding:var(--space-48);color:var(--text-support);font-size:.875rem}
.g-shape{display:block;width:20px;height:20px;background:var(--platform-accent);border-radius:var(--radius-mark);animation:g-shape calc(var(--duration-loop) * 1.5) var(--ease-dry) infinite}
@keyframes g-shape{0%{width:20px;border-radius:var(--radius-mark);transform:rotate(0)}25%{width:36px;border-radius:var(--radius-pill);transform:rotate(0)}50%{width:20px;border-radius:var(--radius-s);transform:rotate(90deg)}75%{width:20px;border-radius:var(--radius-s);transform:rotate(180deg)}100%{width:20px;border-radius:var(--radius-mark);transform:rotate(180deg)}}
@media (prefers-reduced-motion:reduce){.g-shape,.g-btn__run rect,.g-progress.g-is-unknown > i{animation:none}.g-btn__run rect{stroke-dasharray:none;opacity:var(--step-inactive)}.g-progress.g-is-unknown > i{left:0;width:100%;opacity:var(--step-inactive)}}

/* ---------- rodapé ---------- */
.g-foot{padding:var(--space-48);font-size:.75rem;line-height:1rem;color:var(--text-support)}

/* ---------- tarja de ambiente de teste: a segunda área com cor de estado (04/10/2026) ---------- */
.g-tarja-ambiente{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-4) var(--space-8);padding:var(--space-8) var(--space-24);background:color-mix(in srgb,var(--state-error) calc(var(--state-veil) * 100%),var(--surface-raised));box-shadow:inset 0 -2px 0 var(--state-error);font-size:.875rem;line-height:1.25rem;color:var(--text-primary)}
.g-tarja-ambiente__rotulo{font-weight:500;color:var(--state-error)}
.g-foot--restrito{padding:var(--space-8) var(--space-24);box-shadow:inset 0 1px 0 var(--line-structure);color:var(--text-support)}
.g-foot--restrito::before{content:"";display:inline-block;width:8px;height:8px;border-radius:var(--radius-mark);background:var(--state-warning);margin-right:var(--space-8);vertical-align:.1em}