/* Design system Polaris (Shopify) com as cores da EcomSmart (revisão 4, R10.7).
   Os pacotes @shopify/polaris e @shopify/polaris-tokens não são usados (a licença limita o uso a apps da Shopify): aqui
   ficam só a escala de espaço de 4 px, a tipografia, os raios, as sombras, o foco e a anatomia dos componentes (Page,
   Card, IndexTable, Badge, Banner, Tabs, Button, TextField, Select, Modal, Toast, ProgressBar, EmptyState, Skeleton),
   com as cores vindas dos tokens da EcomSmart (skill identidade-ecomsmart, tokens.css; nada de verde Shopify).
   Tema claro e escuro: prefers-color-scheme e a escolha manual em Conta (data-tema="claro" ou "escuro" no <html>).
   O escuro é o azul-noite da marca (#0A0F1F), nunca roxo. Contraste conferido pela fórmula da WCAG (AA).
   Este arquivo carrega por último: as classes do kit (.btn, .card, .lozenge, .msg-secao, .tabela...) viram apelidos
   das classes Polaris e herdam a mesma anatomia; o kit-sistema.css fica só com o que o Polaris não cobre. */

/* ================================================================ tokens */
:root {
  color-scheme: light;
  /* espaço: base de 4 px (nomes do Polaris: 100 = 4 px) */
  --p-space-0: 0; --p-space-025: 1px; --p-space-050: 2px; --p-space-100: 4px; --p-space-150: 6px; --p-space-200: 8px;
  --p-space-300: 12px; --p-space-400: 16px; --p-space-500: 20px; --p-space-600: 24px; --p-space-800: 32px;
  --p-space-1000: 40px; --p-space-1200: 48px; --p-space-1600: 64px;
  /* tipografia: Figtree (a mesma da família), escala do Polaris */
  --p-font-family-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --p-font-family-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --p-font-size-275: 11px; --p-font-size-300: 12px; --p-font-size-325: 13px; --p-font-size-350: 14px;
  --p-font-size-400: 16px; --p-font-size-450: 18px; --p-font-size-500: 20px; --p-font-size-600: 24px; --p-font-size-750: 30px;
  --p-font-weight-regular: 450; --p-font-weight-medium: 550; --p-font-weight-semibold: 650; --p-font-weight-bold: 700;
  --p-font-line-height-300: 16px; --p-font-line-height-400: 20px; --p-font-line-height-500: 24px; --p-font-line-height-600: 28px;
  /* raios */
  --p-border-radius-100: 4px; --p-border-radius-150: 6px; --p-border-radius-200: 8px; --p-border-radius-300: 12px;
  --p-border-radius-400: 16px; --p-border-radius-full: 9999px;
  --p-border-width-025: 1px; --p-border-width-050: 2px;
  /* movimento */
  --p-motion-duration-100: 100ms; --p-motion-duration-200: 200ms; --p-motion-ease: cubic-bezier(.25, .1, .25, 1);
  /* alturas de toque: 36 px no computador, 44 px no celular e em tela de toque */
  --p-altura-controle: 36px; --p-altura-controle-p: 32px;

  /* cores (EcomSmart, claro) */
  --p-color-bg: #FFFFFF;
  --p-color-bg-surface: #FFFFFF;
  --p-color-bg-surface-secondary: #F6F8FC;
  --p-color-bg-surface-tertiary: #EEF1F7;
  --p-color-bg-surface-hover: #F6F8FC;
  --p-color-bg-surface-active: #EEF1F7;
  --p-color-bg-surface-selected: #EEF4FF;
  --p-color-bg-surface-inverse: #0B1033;
  --p-color-bg-fill-brand: #0A5BF0;
  --p-color-bg-fill-brand-hover: #0849C4;
  --p-color-bg-fill-brand-active: #0A3FB0;
  --p-color-bg-fill-secondary: #FFFFFF;
  --p-color-bg-fill-secondary-hover: #F6F8FC;
  --p-color-bg-fill-tertiary-hover: #EEF1F7;
  --p-color-bg-fill-critical: #B42318;
  --p-color-bg-fill-critical-hover: #912018;
  --p-color-bg-fill-success-secondary: #E7F6EC;
  --p-color-bg-fill-warning-secondary: #FFF4D6;
  --p-color-bg-fill-critical-secondary: #FDECEA;
  --p-color-bg-fill-info-secondary: #EEF4FF;
  --p-color-bg-fill-caution-secondary: #FFF5D6;
  --p-color-bg-fill-neutral-secondary: #EEF1F7;
  --p-color-text: #0B1033;
  --p-color-text-secondary: #5F6B85;
  --p-color-text-disabled: #7E8AA2;
  --p-color-text-brand: #0A5BF0;
  --p-color-text-brand-strong: #0A3FB0;
  --p-color-text-link: #0A5BF0;
  --p-color-text-on-fill: #FFFFFF;
  --p-color-text-inverse: #FFFFFF;
  --p-color-text-success: #1F7A3D;
  --p-color-text-warning: #9A5B00;
  --p-color-text-critical: #B42318;
  --p-color-text-info: #0A3FB0;
  --p-color-text-caution: #7A5200;
  --p-color-border: #E1E6F0;
  --p-color-border-secondary: #EEF1F7;
  --p-color-border-strong: #C9D1E0;
  --p-color-border-input: #8A94AB;
  --p-color-border-focus: #0A5BF0;
  --p-color-border-brand: #0A5BF0;
  --p-color-border-success: #A6D9B6;
  --p-color-border-warning: #F2D38A;
  --p-color-border-critical: #F4B4AD;
  --p-color-border-info: #B9D0FF;
  --p-color-icon: #4A5670;
  --p-color-icon-secondary: #7E8AA2;
  --p-color-overlay: rgb(11 16 51 / .55);
  --p-color-skeleton: #E6EAF2;
  /* sombras: cartão com borda de 1 px desenhada pela sombra, botões com a quina de baixo (sem brilho nem degradê) */
  --p-shadow-100: 0 1px 0 rgb(11 16 51 / .05), 0 0 0 1px var(--p-color-border);
  --p-shadow-200: 0 3px 1px -1px rgb(11 16 51 / .06), 0 0 0 1px var(--p-color-border);
  --p-shadow-300: 0 6px 16px -6px rgb(11 16 51 / .18), 0 0 0 1px var(--p-color-border);
  --p-shadow-600: 0 24px 48px -16px rgb(11 16 51 / .35), 0 0 0 1px rgb(11 16 51 / .08);
  --p-shadow-button: 0 -1px 0 0 rgb(11 16 51 / .12) inset, 0 0 0 1px var(--p-color-border-strong) inset;
  --p-shadow-button-primary: 0 -1px 0 0 rgb(0 0 0 / .28) inset;
  --p-shadow-focus: 0 0 0 2px var(--p-color-bg-surface), 0 0 0 4px var(--p-color-border-focus);
}

/* escuro: o aparelho pede (e a pessoa não escolheu o claro em Conta) ... */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --p-color-bg: #0A0F1F;
    --p-color-bg-surface: #121A33;
    --p-color-bg-surface-secondary: #0F1630;
    --p-color-bg-surface-tertiary: #1E2742;
    --p-color-bg-surface-hover: #1A2442;
    --p-color-bg-surface-active: #1E2742;
    --p-color-bg-surface-selected: #16264D;
    --p-color-bg-surface-inverse: #E9EDF7;
    --p-color-bg-fill-brand: #0A5BF0;
    --p-color-bg-fill-brand-hover: #1F66F2;
    --p-color-bg-fill-brand-active: #0849C4;
    --p-color-bg-fill-secondary: #1A2442;
    --p-color-bg-fill-secondary-hover: #222D50;
    --p-color-bg-fill-tertiary-hover: #1E2742;
    --p-color-bg-fill-critical: #C0271B;
    --p-color-bg-fill-critical-hover: #A32016;
    --p-color-bg-fill-success-secondary: #0F2E1D;
    --p-color-bg-fill-warning-secondary: #33260A;
    --p-color-bg-fill-critical-secondary: #3A1414;
    --p-color-bg-fill-info-secondary: #13254D;
    --p-color-bg-fill-caution-secondary: #302608;
    --p-color-bg-fill-neutral-secondary: #1E2742;
    --p-color-text: #E9EDF7;
    --p-color-text-secondary: #A7B1C8;
    --p-color-text-disabled: #7E8AA6;
    --p-color-text-brand: #7FA8FF;
    --p-color-text-brand-strong: #9DBEFF;
    --p-color-text-link: #7FA8FF;
    --p-color-text-on-fill: #FFFFFF;
    --p-color-text-inverse: #0B1033;
    --p-color-text-success: #5FD08A;
    --p-color-text-warning: #F5B94A;
    --p-color-text-critical: #FF8A80;
    --p-color-text-info: #9DBEFF;
    --p-color-text-caution: #F2CF6B;
    --p-color-border: #27304D;
    --p-color-border-secondary: #1E2742;
    --p-color-border-strong: #3A4566;
    --p-color-border-input: #6B7795;
    --p-color-border-focus: #7FA8FF;
    --p-color-border-brand: #7FA8FF;
    --p-color-border-success: #2C6B45;
    --p-color-border-warning: #7A5A18;
    --p-color-border-critical: #7A2B26;
    --p-color-border-info: #2B4A8F;
    --p-color-icon: #C7CFE0;
    --p-color-icon-secondary: #8E99B4;
    --p-color-overlay: rgb(3 6 15 / .72);
    --p-color-skeleton: #1E2742;
    --p-shadow-100: 0 0 0 1px var(--p-color-border);
    --p-shadow-200: 0 3px 1px -1px rgb(0 0 0 / .3), 0 0 0 1px var(--p-color-border);
    --p-shadow-300: 0 8px 20px -6px rgb(0 0 0 / .55), 0 0 0 1px var(--p-color-border);
    --p-shadow-600: 0 24px 48px -16px rgb(0 0 0 / .7), 0 0 0 1px var(--p-color-border-strong);
    --p-shadow-button: 0 -1px 0 0 rgb(0 0 0 / .35) inset, 0 0 0 1px var(--p-color-border-strong) inset;
    --p-shadow-button-primary: 0 -1px 0 0 rgb(0 0 0 / .4) inset;
  }
}
/* ... ou a pessoa escolheu o escuro em Conta (mesmos valores do bloco acima) */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --p-color-bg: #0A0F1F;
  --p-color-bg-surface: #121A33;
  --p-color-bg-surface-secondary: #0F1630;
  --p-color-bg-surface-tertiary: #1E2742;
  --p-color-bg-surface-hover: #1A2442;
  --p-color-bg-surface-active: #1E2742;
  --p-color-bg-surface-selected: #16264D;
  --p-color-bg-surface-inverse: #E9EDF7;
  --p-color-bg-fill-brand: #0A5BF0;
  --p-color-bg-fill-brand-hover: #1F66F2;
  --p-color-bg-fill-brand-active: #0849C4;
  --p-color-bg-fill-secondary: #1A2442;
  --p-color-bg-fill-secondary-hover: #222D50;
  --p-color-bg-fill-tertiary-hover: #1E2742;
  --p-color-bg-fill-critical: #C0271B;
  --p-color-bg-fill-critical-hover: #A32016;
  --p-color-bg-fill-success-secondary: #0F2E1D;
  --p-color-bg-fill-warning-secondary: #33260A;
  --p-color-bg-fill-critical-secondary: #3A1414;
  --p-color-bg-fill-info-secondary: #13254D;
  --p-color-bg-fill-caution-secondary: #302608;
  --p-color-bg-fill-neutral-secondary: #1E2742;
  --p-color-text: #E9EDF7;
  --p-color-text-secondary: #A7B1C8;
  --p-color-text-disabled: #7E8AA6;
  --p-color-text-brand: #7FA8FF;
  --p-color-text-brand-strong: #9DBEFF;
  --p-color-text-link: #7FA8FF;
  --p-color-text-on-fill: #FFFFFF;
  --p-color-text-inverse: #0B1033;
  --p-color-text-success: #5FD08A;
  --p-color-text-warning: #F5B94A;
  --p-color-text-critical: #FF8A80;
  --p-color-text-info: #9DBEFF;
  --p-color-text-caution: #F2CF6B;
  --p-color-border: #27304D;
  --p-color-border-secondary: #1E2742;
  --p-color-border-strong: #3A4566;
  --p-color-border-input: #6B7795;
  --p-color-border-focus: #7FA8FF;
  --p-color-border-brand: #7FA8FF;
  --p-color-border-success: #2C6B45;
  --p-color-border-warning: #7A5A18;
  --p-color-border-critical: #7A2B26;
  --p-color-border-info: #2B4A8F;
  --p-color-icon: #C7CFE0;
  --p-color-icon-secondary: #8E99B4;
  --p-color-overlay: rgb(3 6 15 / .72);
  --p-color-skeleton: #1E2742;
  --p-shadow-100: 0 0 0 1px var(--p-color-border);
  --p-shadow-200: 0 3px 1px -1px rgb(0 0 0 / .3), 0 0 0 1px var(--p-color-border);
  --p-shadow-300: 0 8px 20px -6px rgb(0 0 0 / .55), 0 0 0 1px var(--p-color-border);
  --p-shadow-600: 0 24px 48px -16px rgb(0 0 0 / .7), 0 0 0 1px var(--p-color-border-strong);
  --p-shadow-button: 0 -1px 0 0 rgb(0 0 0 / .35) inset, 0 0 0 1px var(--p-color-border-strong) inset;
  --p-shadow-button-primary: 0 -1px 0 0 rgb(0 0 0 / .4) inset;
}

/* Os tokens do kit v4 passam a vir dos tokens Polaris: toda tela que usa --tinta, --fundo, --linha... segue o tema */
:root {
  --tinta: var(--p-color-text);
  --texto: var(--p-color-text);
  --texto-2: var(--p-color-text-secondary);
  --texto-3: var(--p-color-text-disabled);
  --branco: var(--p-color-bg-surface);
  --fundo: var(--p-color-bg-surface);
  --fundo-2: var(--p-color-bg-surface-secondary);
  --fundo-3: var(--p-color-bg);
  --superficie-3: var(--p-color-bg-surface-tertiary);
  --linha: var(--p-color-border-secondary);
  --borda: var(--p-color-border);
  --borda-forte: var(--p-color-border-strong);
  --borda-campo: var(--p-color-border-input);
  --ok: var(--p-color-text-success); --ok-fundo: var(--p-color-bg-fill-success-secondary);
  --atencao: var(--p-color-text-warning); --atencao-fundo: var(--p-color-bg-fill-warning-secondary);
  --erro: var(--p-color-text-critical); --erro-fundo: var(--p-color-bg-fill-critical-secondary);
  --info-fundo: var(--p-color-bg-fill-info-secondary);
  --marca: var(--p-color-bg-fill-brand);
  --marca-hover: var(--p-color-bg-fill-brand-hover);
  --marca-forte: var(--p-color-text-brand-strong);
  --marca-suave: var(--p-color-bg-surface-selected);
  --marca-suave-2: var(--p-color-border-info);
  --marca-contraste: var(--p-color-text-on-fill);
  --link: var(--p-color-text-link);
  --foco: var(--p-color-border-focus);
  --sombra-1: var(--p-shadow-100);
  --sombra-2: var(--p-shadow-300);
  --sombra-3: var(--p-shadow-600);
  --carregando-fundo: var(--p-color-bg);
  --fonte: var(--p-font-family-sans);
}
/* texto corrido um tom abaixo do título, como no kit (Grafite #4A5670 no claro) */
:root { --texto: #4A5670; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --texto: #C7CFE0; } }
:root[data-tema="escuro"] { --texto: #C7CFE0; }

@media (pointer: coarse), (max-width: 719px) {
  :root { --p-altura-controle: 44px; --p-altura-controle-p: 44px; }
}

/* ================================================================ base */
html, body { background: var(--p-color-bg); color: var(--p-color-text); }
body { font-family: var(--p-font-family-sans); }
::selection { background: var(--p-color-bg-fill-info-secondary); color: var(--p-color-text); }
:focus-visible { outline: 2px solid var(--p-color-border-focus); outline-offset: 2px; }
a { color: var(--p-color-text-link); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn:hover, .p-button:hover, .trilho-item:hover, .subnav-item:hover, .menu-conta-lista a:hover, .kpi:hover { text-decoration: none; }
code { font-family: var(--p-font-family-mono); font-size: .92em; padding: 1px 4px; border-radius: var(--p-border-radius-100); background: var(--p-color-bg-surface-tertiary); color: var(--p-color-text); }
.texto-2 { color: var(--p-color-text-secondary); }
.peq { font-size: var(--p-font-size-350); }
.p-text-secondary { color: var(--p-color-text-secondary); }
.p-text-mono { font-family: var(--p-font-family-mono); }

/* ================================================================ casca (Frame): trilho, cabeçalho e conteúdo */
.app { background: var(--p-color-bg); gap: var(--p-space-200); padding: var(--p-space-200); }
.app-trilho > .trilho { background: var(--p-color-bg-surface); box-shadow: var(--p-shadow-100); }
.trilho-logo { background: var(--p-color-bg-surface-selected); color: var(--p-color-bg-fill-brand); }
.trilho-logo:hover { background: var(--p-color-bg-surface-active); }
.trilho-item { color: var(--p-color-text-secondary); border-radius: var(--p-border-radius-200); font-weight: var(--p-font-weight-medium); }
.trilho-item .rot { font-size: 11px; overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.trilho-item:hover { background: var(--p-color-bg-surface-hover); color: var(--p-color-text); }
.trilho-item.ativo { background: var(--p-color-bg-surface-selected); color: var(--p-color-text-brand-strong); }
.trilho-item.ativo .ico { color: var(--p-color-text-brand); }
.trilho-item .contador { box-shadow: 0 0 0 2px var(--p-color-bg-surface); }
.trilho-item.ativo .contador { box-shadow: 0 0 0 2px var(--p-color-bg-surface-selected); }
.app-painel { background: var(--p-color-bg); border-radius: 0; overflow: visible; }
.app-cab, .p-page-header {
  min-height: 64px; padding: var(--p-space-300) var(--p-space-600); gap: var(--p-space-300);
  border-bottom: 0; background: var(--p-color-bg-surface); border-radius: var(--p-border-radius-300); box-shadow: var(--p-shadow-100);
}
.app-cab h1, .p-page-title { font-size: var(--p-font-size-600); line-height: var(--p-font-line-height-600); font-weight: var(--p-font-weight-bold); letter-spacing: -.01em; color: var(--p-color-text); }
.subnav, .p-tabs {
  margin-top: var(--p-space-200); padding: var(--p-space-100); gap: var(--p-space-100); border-bottom: 0;
  background: var(--p-color-bg-surface); border-radius: var(--p-border-radius-300); box-shadow: var(--p-shadow-100);
}
.subnav-item, .p-tab {
  min-height: var(--p-altura-controle); margin: 0; padding: 0 var(--p-space-300); border: 0; border-radius: var(--p-border-radius-200);
  color: var(--p-color-text-secondary); font-size: var(--p-font-size-350); font-weight: var(--p-font-weight-medium);
  transition: background var(--p-motion-duration-100) var(--p-motion-ease), color var(--p-motion-duration-100);
}
.subnav-item:hover, .p-tab:hover { background: var(--p-color-bg-surface-hover); color: var(--p-color-text); }
.subnav-item[aria-current="page"], .p-tab[aria-selected="true"], .p-tab--selected {
  background: var(--p-color-bg-surface-selected); color: var(--p-color-text-brand-strong); font-weight: var(--p-font-weight-semibold); border-bottom-color: transparent;
}
.subnav-item:focus-visible { outline-offset: -2px; }
.app-conteudo, .p-page { padding: var(--p-space-400) 0 var(--p-space-600); gap: var(--p-space-400); }
.app-conteudo > p.desc, .desc { color: var(--p-color-text-secondary); font-size: var(--p-font-size-350); line-height: var(--p-font-line-height-400); }
.pagina-acoes { gap: var(--p-space-300); }
.voltar { color: var(--p-color-icon); border-radius: var(--p-border-radius-200); }
.voltar:hover { background: var(--p-color-bg-surface-hover); color: var(--p-color-text); }
@media (min-width: 768px) {
  .app { padding: var(--p-space-300); gap: var(--p-space-300); }
  .app-painel { padding: 0; }
}
@media (max-width: 767px) {
  .app.app-trilho::after { background: var(--p-color-bg-surface); border-top-color: var(--p-color-border); }
  .trilho-item.fixo { background: var(--p-color-bg-surface); box-shadow: -4px 0 0 var(--p-color-bg-surface); }
  .app-trilho > .trilho { box-shadow: none; }
}
@media (max-width: 719px) {
  /* D11: com a Cluster são 6 destinos; todos cabem na barra de baixo, sem rolar de lado (o kit só divide até 5) */
  .app-trilho > .trilho > .trilho-grupo { display: contents; }
  .app-trilho > .trilho .trilho-item { flex: 1 1 0; width: auto; min-width: 0; padding-inline: 1px; }
  .app-cab, .p-page-header { min-height: 56px; padding: var(--p-space-200) var(--p-space-300); }
  .app-cab h1, .p-page-title { font-size: var(--p-font-size-500); line-height: var(--p-font-line-height-500); }
  .subnav { margin-top: var(--p-space-200); }
  .app-conteudo { padding: var(--p-space-300) 0 var(--p-space-600); gap: var(--p-space-300); }
}

/* menu da conta (Popover do Polaris) */
.menu-conta-botao { color: var(--p-color-text); }
.menu-conta-botao:hover, .menu-conta-botao[aria-expanded="true"] { background: var(--p-color-bg-surface-hover); }
.menu-conta-lista, .p-popover {
  background: var(--p-color-bg-surface); border: 0; border-radius: var(--p-border-radius-300); box-shadow: var(--p-shadow-600); padding: var(--p-space-150);
}
.menu-conta-quem { border-bottom-color: var(--p-color-border-secondary); }
.menu-conta-quem strong { color: var(--p-color-text); }
.menu-conta-lista a, .menu-conta-lista button { color: var(--p-color-text); border-radius: var(--p-border-radius-200); }
.menu-conta-lista a:hover, .menu-conta-lista button:hover { background: var(--p-color-bg-surface-hover); }
.menu-conta-lista a[aria-current="page"] { background: var(--p-color-bg-surface-selected); color: var(--p-color-text-brand-strong); }
.menu-conta-lista .menu-conta-sair { border-top-color: var(--p-color-border-secondary); }
.avatar { background: var(--p-color-bg-surface-selected); color: var(--p-color-text-brand-strong); }
.suspenso, .menu-mais { background: var(--p-color-bg-surface); border: 0; border-radius: var(--p-border-radius-300); box-shadow: var(--p-shadow-600); }
.menu-mais button { color: var(--p-color-text); border-radius: var(--p-border-radius-200); }
.menu-mais button:hover { background: var(--p-color-bg-surface-hover); }

/* ================================================================ Card */
.card, .p-card {
  display: grid; gap: var(--p-space-300); padding: var(--p-space-400);
  background: var(--p-color-bg-surface); border: 0; border-radius: var(--p-border-radius-300); box-shadow: var(--p-shadow-100); color: var(--p-color-text);
}
.card > h2, .p-card > h2, .card-cab > h2, .p-card-title, .grafico-titulos h2 {
  font-size: var(--p-font-size-350); line-height: var(--p-font-line-height-400); font-weight: var(--p-font-weight-semibold); letter-spacing: 0; color: var(--p-color-text);
}
.card .lin { display: flex; justify-content: space-between; align-items: center; gap: var(--p-space-300); padding: 10px 0; border-bottom: 1px solid var(--p-color-border-secondary); font-size: var(--p-font-size-350); color: var(--p-color-text-secondary); }
.card .lin:last-child { border-bottom: 0; }
.card .lin b { font-weight: var(--p-font-weight-semibold); }
@media (max-width: 719px) {
  .card .lin { flex-wrap: wrap; }
  .card .lin:has(> .toggle) { flex-wrap: nowrap; }
  .card .lin .campo-linha { width: 100%; }
}
.card .lin b { color: var(--p-color-text); }
.p-card-secao { display: grid; gap: var(--p-space-200); padding-top: var(--p-space-300); border-top: 1px solid var(--p-color-border-secondary); }
.card-destaque { background: var(--p-color-bg-surface-selected); box-shadow: 0 0 0 1px var(--p-color-border-info); }
.card-claro { background: var(--p-color-bg-surface); }
/* cartões internos das telas: superfície e borda do tema */
.peca, .sessao-cartao, .projeto-cartao, .tarefa-cartao, .pareamento, .esqueleto-bloco, .esqueleto-tabela-linhas, .escolha, .publica-detalhes, .codigo, .coluna, .kpi {
  border-color: var(--p-color-border); border-radius: var(--p-border-radius-300);
}
.peca, .sessao-cartao, .projeto-cartao, .pareamento { background: var(--p-color-bg-surface); border: 0; box-shadow: var(--p-shadow-100); }
.tarefa-cartao { background: var(--p-color-bg-surface); border-radius: var(--p-border-radius-200); }
.coluna { background: var(--p-color-bg-surface-secondary); }
.coluna.alvo { background: var(--p-color-bg-surface-selected); border-color: var(--p-color-border-brand); }
.peca-legenda, .peca-ajuste { background: var(--p-color-bg-surface-secondary); border-color: var(--p-color-border-secondary); }
.peca-ajuste textarea { background: var(--p-color-bg-surface); color: var(--p-color-text); border-color: var(--p-color-border-input); }
.codigo { background: var(--p-color-bg-surface-secondary); color: var(--p-color-text); }
.escolha { background: var(--p-color-bg-surface); }
.escolha.marcada { background: var(--p-color-bg-surface-selected); border-color: var(--p-color-border-brand); }

/* indicadores (KPI) */
.kpi { background: var(--p-color-bg-surface); border: 0; box-shadow: var(--p-shadow-100); padding: var(--p-space-300) var(--p-space-400); }
.kpi .kpi-rotulo { color: var(--p-color-text-secondary); font-weight: var(--p-font-weight-medium); }
.kpi .numero { color: var(--p-color-text); font-weight: var(--p-font-weight-bold); }
a.kpi { color: inherit; transition: background var(--p-motion-duration-100); }
a.kpi:hover { background: var(--p-color-bg-surface-hover); }

/* ================================================================ Button */
.btn, .p-button {
  --btn-alt: var(--p-altura-controle);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--p-space-150);
  min-height: var(--btn-alt); height: auto; padding: 0 var(--p-space-300);
  border: 0; border-radius: var(--p-border-radius-200);
  font: var(--p-font-weight-semibold) var(--p-font-size-350)/1.2 var(--p-font-family-sans); letter-spacing: 0;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--p-motion-duration-100) var(--p-motion-ease), box-shadow var(--p-motion-duration-100), color var(--p-motion-duration-100), transform .1s;
}
.btn:active, .p-button:active { transform: translateY(1px); }
.btn:focus-visible, .p-button:focus-visible { outline: 2px solid var(--p-color-border-focus); outline-offset: 2px; }
/* primário: azul da marca */
.btn-pri, .p-button--primary { background: var(--p-color-bg-fill-brand); color: var(--p-color-text-on-fill); box-shadow: var(--p-shadow-button-primary); }
.btn-pri:hover, .p-button--primary:hover { background: var(--p-color-bg-fill-brand-hover); box-shadow: var(--p-shadow-button-primary); }
.btn-pri:active, .p-button--primary:active { background: var(--p-color-bg-fill-brand-active); }
/* secundário: superfície com contorno */
.btn-sec, .btn-branco, .p-button--secondary { background: var(--p-color-bg-fill-secondary); color: var(--p-color-text); box-shadow: var(--p-shadow-button); font-weight: var(--p-font-weight-semibold); }
.btn-sec:hover, .btn-branco:hover, .p-button--secondary:hover { background: var(--p-color-bg-fill-secondary-hover); }
/* terciário: sem fundo até passar o mouse */
.btn-contorno, .p-button--tertiary { background: transparent; color: var(--p-color-text); border: 0; box-shadow: none; font-weight: var(--p-font-weight-semibold); }
.btn-contorno:hover, .p-button--tertiary:hover { background: var(--p-color-bg-fill-tertiary-hover); border: 0; }
/* simples: parece um link */
.p-button--plain { min-height: 0; padding: 0; background: none; box-shadow: none; color: var(--p-color-text-link); }
.p-button--plain:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
/* destrutivo */
.btn-perigo, .p-button--critical { background: var(--p-color-bg-fill-critical); color: var(--p-color-text-on-fill); box-shadow: var(--p-shadow-button-primary); }
.btn-perigo:hover, .p-button--critical:hover { background: var(--p-color-bg-fill-critical-hover); }
.btn-p, .p-button--slim { --btn-alt: var(--p-altura-controle-p); padding: 0 var(--p-space-300); font-size: var(--p-font-size-325); }
.btn-g, .p-button--large { --btn-alt: 44px; padding: 0 var(--p-space-500); font-size: var(--p-font-size-400); }
.btn-bloco, .p-button--full { width: 100%; }
.btn-icone { width: var(--btn-alt); padding: 0; }
.btn[disabled], .btn[aria-disabled="true"], .p-button[aria-disabled="true"] { opacity: 1; pointer-events: none; background: var(--p-color-bg-surface-tertiary); color: var(--p-color-text-disabled); box-shadow: none; }
.btn.entrar-ocupado[aria-disabled="true"] { pointer-events: auto; cursor: progress; }
.btn-pri.entrar-ocupado[aria-disabled="true"] { background: var(--p-color-bg-fill-brand); color: var(--p-color-text-on-fill); }
.btn-sec.entrar-ocupado[aria-disabled="true"] { background: var(--p-color-bg-fill-secondary); color: var(--p-color-text); box-shadow: var(--p-shadow-button); }
.btn-perigo.entrar-ocupado[aria-disabled="true"] { background: var(--p-color-bg-fill-critical); color: var(--p-color-text-on-fill); }
.entrar-anel { width: 16px; height: 16px; }
.msg-acao { color: var(--p-color-text); }
.link-celula { color: var(--p-color-text-link); }

/* ================================================================ Badge */
.lozenge, .p-badge {
  display: inline-flex; align-items: center; gap: var(--p-space-100); height: auto; min-height: 20px; padding: var(--p-space-050) var(--p-space-200);
  border-radius: var(--p-border-radius-200); font-size: var(--p-font-size-300); font-weight: var(--p-font-weight-medium); line-height: var(--p-font-line-height-300);
  white-space: nowrap; background: var(--p-color-bg-fill-neutral-secondary); color: var(--p-color-text);
}
.lozenge.marca, .p-badge--info { background: var(--p-color-bg-fill-info-secondary); color: var(--p-color-text-info); }
.lozenge.ok, .p-badge--success { background: var(--p-color-bg-fill-success-secondary); color: var(--p-color-text-success); }
.lozenge.atencao, .lozenge.validar, .p-badge--warning { background: var(--p-color-bg-fill-warning-secondary); color: var(--p-color-text-warning); }
.lozenge.erro, .p-badge--critical { background: var(--p-color-bg-fill-critical-secondary); color: var(--p-color-text-critical); }
.lozenge.cuidado, .p-badge--caution { background: var(--p-color-bg-fill-caution-secondary); color: var(--p-color-text-caution); }
.lozenge.forte, .p-badge--strong { background: var(--p-color-bg-surface-inverse); color: var(--p-color-text-inverse); }
@media (max-width: 719px) { .lozenge, .p-badge { font-size: var(--p-font-size-350); } }
.contador.neutro, .abas-filtro .contador, .subnav-item .contador { background: var(--p-color-bg-surface-tertiary); color: var(--p-color-text); }

/* ================================================================ Banner */
.msg-secao, .p-banner {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: var(--p-space-200) var(--p-space-300);
  padding: var(--p-space-300) var(--p-space-400); border-radius: var(--p-border-radius-300); border: 1px solid var(--p-color-border);
  background: var(--p-color-bg-surface); color: var(--p-color-text); font-size: var(--p-font-size-350); line-height: var(--p-font-line-height-400);
}
.msg-secao > .ico, .p-banner > .ico { width: 20px; height: 20px; color: var(--p-color-icon); }
.msg-secao.info, .p-banner--info { background: var(--p-color-bg-fill-info-secondary); border-color: var(--p-color-border-info); }
.msg-secao.info > .ico, .p-banner--info > .ico { color: var(--p-color-text-info); }
.msg-secao.ok, .p-banner--success { background: var(--p-color-bg-fill-success-secondary); border-color: var(--p-color-border-success); }
.msg-secao.ok > .ico, .p-banner--success > .ico { color: var(--p-color-text-success); }
.msg-secao.atencao, .p-banner--warning { background: var(--p-color-bg-fill-warning-secondary); border-color: var(--p-color-border-warning); }
.msg-secao.atencao > .ico, .p-banner--warning > .ico { color: var(--p-color-text-warning); }
.msg-secao.erro, .p-banner--critical { background: var(--p-color-bg-fill-critical-secondary); border-color: var(--p-color-border-critical); }
.msg-secao.erro > .ico, .p-banner--critical > .ico { color: var(--p-color-text-critical); }
.msg-secao > span, .p-banner > span, .msg-secao > .msg-corpo { min-width: 0; overflow-wrap: anywhere; }

/* ================================================================ IndexTable */
.tabela-caixa, .p-index-table { border: 0; border-radius: var(--p-border-radius-300); box-shadow: var(--p-shadow-100); background: var(--p-color-bg-surface); }
.card .tabela-caixa, .p-card .p-index-table { box-shadow: 0 0 0 1px var(--p-color-border-secondary); }
.tabela { color: var(--p-color-text); font-size: var(--p-font-size-350); }
.tabela th { background: var(--p-color-bg-surface-secondary); color: var(--p-color-text-secondary); font-size: var(--p-font-size-325); font-weight: var(--p-font-weight-medium); padding: var(--p-space-200) var(--p-space-300); border-bottom: 1px solid var(--p-color-border); }
.tabela th[data-ordenar]::after { color: var(--p-color-icon-secondary); }
.tabela th[aria-sort="ascending"]::after, .tabela th[aria-sort="descending"]::after { color: var(--p-color-text-brand); }
.tabela td { color: var(--p-color-text); padding: var(--p-space-200) var(--p-space-300); border-bottom: 1px solid var(--p-color-border-secondary); }
.tabela tbody tr:hover td { background: var(--p-color-bg-surface-hover); }
.tabela-resumo { color: var(--p-color-text-secondary); font-size: var(--p-font-size-325); }
@media (max-width: 719px) {
  .tabela-caixa .tabela.tabela-cartoes tr { border: 0; box-shadow: var(--p-shadow-100); border-radius: var(--p-border-radius-300); background: var(--p-color-bg-surface); }
  .tabela-caixa.p-index-table { box-shadow: none; background: none; }
  .tabela-caixa .tabela.tabela-cartoes tbody tr:hover td { background: none; }
  .tabela-caixa .tabela.tabela-cartoes td { color: var(--p-color-text-secondary); padding: 0; border-bottom: 0; }
  .tabela-caixa .tabela.tabela-cartoes td.c-titulo, .tabela-caixa .tabela.tabela-cartoes td.c-situacao { color: var(--p-color-text); }
}

/* ================================================================ Tabs de filtro (abas-filtro) */
.abas.abas-filtro { gap: var(--p-space-100); }
.abas-filtro .aba {
  min-height: var(--p-altura-controle); padding: 0 var(--p-space-300); border: 0; border-radius: var(--p-border-radius-200);
  background: transparent; color: var(--p-color-text-secondary); font-size: var(--p-font-size-350); font-weight: var(--p-font-weight-medium);
  display: inline-flex; align-items: center; gap: var(--p-space-150);
}
.abas-filtro .aba:hover { background: var(--p-color-bg-surface-hover); color: var(--p-color-text); }
.abas-filtro .aba[aria-selected="true"] { background: var(--p-color-bg-surface); color: var(--p-color-text); font-weight: var(--p-font-weight-semibold); box-shadow: var(--p-shadow-button); }
.abas-filtro .contador { min-width: 20px; height: 20px; padding: 0 6px; font-size: var(--p-font-size-300); font-weight: var(--p-font-weight-semibold); }
.abas-filtro .aba[aria-selected="true"] .contador { background: var(--p-color-bg-surface-selected); color: var(--p-color-text-brand-strong); }

/* segmentado (ButtonGroup segmentado do Polaris) */
.segm { display: inline-flex; gap: 2px; padding: 3px; background: var(--p-color-bg-surface-tertiary); border-radius: var(--p-border-radius-200); }
.segm button { height: auto; padding: 0 var(--p-space-300); border: 0; background: none; font-size: var(--p-font-size-350); cursor: pointer; color: var(--p-color-text-secondary); border-radius: var(--p-border-radius-150); font-weight: var(--p-font-weight-medium); min-height: calc(var(--p-altura-controle) - 6px); }
.segm button[aria-pressed="true"] { background: var(--p-color-bg-surface); color: var(--p-color-text); box-shadow: var(--p-shadow-button); }

/* ================================================================ TextField e Select */
.campo, .p-text-field { gap: var(--p-space-100); }
.campo label, .campo .campo-rotulo, .p-label { font-size: var(--p-font-size-350); font-weight: var(--p-font-weight-medium); color: var(--p-color-text); }
.campo-linha { width: 220px; max-width: 100%; }
.filtro .campo-linha { width: auto; }
@media (max-width: 719px) { .filtro .campo-linha { min-width: 0; max-width: none; flex: 1; } }
.campo input, .campo select, .campo textarea { width: 100%; }
.campo input, .campo select, .campo textarea, .campo-linha, .p-input, .p-select {
  min-height: var(--p-altura-controle); padding: var(--p-space-150) var(--p-space-300);
  border: 1px solid var(--p-color-border-input); border-radius: var(--p-border-radius-200);
  background: var(--p-color-bg-surface); color: var(--p-color-text); font: inherit; font-size: var(--p-font-size-350); line-height: var(--p-font-line-height-400);
}
.campo textarea, textarea.p-input { padding-block: var(--p-space-200); }
.campo input::placeholder, .campo textarea::placeholder, .campo-linha::placeholder, .p-input::placeholder { color: var(--p-color-text-disabled); }
.campo input:hover, .campo select:hover, .campo textarea:hover, .campo-linha:hover { border-color: var(--p-color-text-secondary); }
.campo input:focus, .campo select:focus, .campo textarea:focus, .campo-linha:focus, .p-input:focus, .p-select:focus {
  outline: 2px solid var(--p-color-border-focus); outline-offset: 1px; border-color: var(--p-color-border-focus);
}
.campo .ajuda, .p-help-text { color: var(--p-color-text-secondary); }
.campo.erro input, .campo.erro select, .campo.erro textarea, .p-input[aria-invalid="true"] { border-color: var(--p-color-text-critical); background: var(--p-color-bg-fill-critical-secondary); }
.campo .msg-erro, .msg-erro, .p-error { color: var(--p-color-text-critical); }
.campo-prefixo { background: var(--p-color-bg-surface); border-color: var(--p-color-border-input); border-radius: var(--p-border-radius-200); }
.campo-prefixo span { background: var(--p-color-bg-surface-secondary); color: var(--p-color-text-secondary); border-right-color: var(--p-color-border); }
select.campo-linha, .campo select, .p-select { cursor: pointer; }
/* o campo usa 16 px no celular para o navegador não aproximar a tela */
@media (max-width: 719px) { .campo input, .campo select, .campo textarea, .campo-linha, .p-input, .p-select { font-size: 16px; } }
.filtro { color: var(--p-color-text-secondary); }
.filtro-check input, .escolha input, input[type="checkbox"], input[type="radio"] { accent-color: var(--p-color-bg-fill-brand); }
/* interruptor */
.toggle { background: var(--p-color-border-strong); }
.lin-toggle input:checked + .toggle, .toggle[aria-pressed="true"] { background: var(--p-color-bg-fill-brand); }

/* ================================================================ Modal */
.previa, .p-modal-fundo { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--p-space-600); background: var(--p-color-overlay); }
.previa-caixa, .p-modal { width: min(100%, 480px); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; overflow: hidden; }
.previa-caixa.larga { width: min(100%, 620px); }
.previa-cab, .p-modal-cab { display: flex; align-items: flex-start; gap: var(--p-space-200); flex: none; }
.previa-cab > div { flex: 1; min-width: 0; display: grid; gap: 2px; padding-top: 3px; }
.previa-cab h2 { line-height: 1.3; }
.previa-fechar { width: 44px; height: 44px; border: 0; display: grid; place-items: center; flex: none; cursor: pointer; }
.previa-corpo, .p-modal-corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-auto-rows: max-content; gap: var(--p-space-300); align-content: start; }
.previa-corpo:focus-visible { outline-offset: -2px; }
.previa-pe, .p-modal-pe { flex: none; display: flex; flex-wrap: wrap; gap: var(--p-space-200); }
@media (max-width: 719px) {
  .previa { padding: 0; }
  .previa-caixa, .p-modal { width: 100%; height: 100dvh; max-height: none; border-radius: 0; }
  .previa-caixa.larga { width: 100%; }
}
.previa-caixa, .p-modal {
  background: var(--p-color-bg-surface); color: var(--p-color-text); border-radius: var(--p-border-radius-400); box-shadow: var(--p-shadow-600);
}
.previa-cab, .p-modal-cab { padding: var(--p-space-300) var(--p-space-300) var(--p-space-300) var(--p-space-400); border-bottom: 1px solid var(--p-color-border-secondary); background: var(--p-color-bg-surface-secondary); }
.previa-cab h2 { font-size: var(--p-font-size-400); font-weight: var(--p-font-weight-semibold); color: var(--p-color-text); }
.previa-rotulo { color: var(--p-color-text-secondary); font-size: var(--p-font-size-325); }
.previa-fechar { background: transparent; color: var(--p-color-icon); border-radius: var(--p-border-radius-200); }
.previa-fechar:hover { background: var(--p-color-bg-fill-tertiary-hover); }
.previa-corpo, .p-modal-corpo { padding: var(--p-space-400); }
.previa-pe, .p-modal-pe { justify-content: flex-end; padding: var(--p-space-300) var(--p-space-400) calc(var(--p-space-300) + env(safe-area-inset-bottom)); border-top: 1px solid var(--p-color-border-secondary); background: var(--p-color-bg-surface); }
.previa-pe .btn { flex: 0 0 auto; }
.previa-texto { color: var(--p-color-text); }
@media (max-width: 719px) {
  .previa-pe .btn { flex: 1 1 0; }
}

/* ================================================================ Toast */
.avisos { position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--p-space-600); z-index: 100; width: min(480px, calc(100vw - 32px)); display: grid; gap: var(--p-space-200); justify-items: center; pointer-events: none; }
.toast, .p-toast { pointer-events: auto; display: flex; align-items: center; gap: var(--p-space-200); min-height: 48px; padding: var(--p-space-100) var(--p-space-100) var(--p-space-100) var(--p-space-400); line-height: 1.4; animation: p-toast-entra .2s var(--p-motion-ease); }
.toast span { flex: 1; min-width: 0; padding-block: 10px; }
.toast button { flex: none; min-height: 44px; padding: 0 var(--p-space-300); border: 0; border-radius: var(--p-border-radius-200); background: none; font: inherit; font-weight: var(--p-font-weight-bold); cursor: pointer; }
@keyframes p-toast-entra { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .toast, .p-toast { animation: none; } }
.toast, .p-toast {
  background: var(--p-color-bg-surface-inverse); color: var(--p-color-text-inverse); border-radius: var(--p-border-radius-300); box-shadow: var(--p-shadow-600);
  font-size: var(--p-font-size-350); font-weight: var(--p-font-weight-medium);
}
.toast.erro, .p-toast--critical { background: var(--p-color-bg-fill-critical); color: var(--p-color-text-on-fill); }
.toast button { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.toast button:hover { background: rgb(127 127 127 / .18); }
.toast button:focus-visible { outline-color: currentColor; }
@media (max-width: 719px) { .avisos { left: 16px; right: 16px; width: auto; transform: none; bottom: calc(80px + env(safe-area-inset-bottom)); } }

/* ================================================================ ProgressBar */
.progresso-trilho, .p-progress-bar { height: 8px; border-radius: var(--p-border-radius-full); background: var(--p-color-bg-surface-tertiary); overflow: hidden; }
.progresso-barra, .p-progress-bar-indicador { background: var(--p-color-bg-fill-brand); border-radius: inherit; transition: width var(--p-motion-duration-200) var(--p-motion-ease); }
.progresso.ok .progresso-barra, .p-progress-bar--success .p-progress-bar-indicador { background: var(--p-color-text-success); }
.progresso .numero { color: var(--p-color-text); }

/* ================================================================ EmptyState */
.vazio, .p-empty-state {
  display: grid; justify-items: center; gap: var(--p-space-200); padding: var(--p-space-1000) var(--p-space-400); text-align: center;
  background: var(--p-color-bg-surface); border: 0; border-radius: var(--p-border-radius-300); box-shadow: var(--p-shadow-100); color: var(--p-color-text-secondary);
}
.card .vazio, .card .p-empty-state, .p-card .p-empty-state { box-shadow: none; padding: var(--p-space-600) var(--p-space-200); }
.vazio > .ico, .p-empty-state > .ico { width: 40px; height: 40px; color: var(--p-color-icon-secondary); }
.vazio strong, .p-empty-state strong { font-size: var(--p-font-size-400); font-weight: var(--p-font-weight-semibold); color: var(--p-color-text); }
.vazio span, .p-empty-state span { max-width: 52ch; font-size: var(--p-font-size-350); }

/* ================================================================ Skeleton */
.esqueleto-bloco, .esqueleto-tabela-linhas, .p-skeleton-caixa { background: var(--p-color-bg-surface); border: 0; box-shadow: var(--p-shadow-100); }
.esqueleto { display: grid; gap: 10px; }
.esqueleto i, .p-skeleton { display: block; height: 12px; border-radius: var(--p-border-radius-100); background: var(--p-color-skeleton); animation: p-pulsar 1.6s ease-in-out infinite; }
@keyframes p-pulsar { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .esqueleto i, .p-skeleton { animation: none; } }

/* ================================================================ peças do kit em superfície do tema */
.clara-msg.dela { background: var(--p-color-bg-surface-secondary); color: var(--p-color-text); box-shadow: 0 0 0 1px var(--p-color-border-secondary); }
.clara-msg.sua { background: var(--p-color-bg-fill-brand); color: var(--p-color-text-on-fill); }
.entrar { background: var(--p-color-bg-surface); color: var(--p-color-text-secondary); }
.publica { background: var(--p-color-bg); }
.peca-mais-lista { background: var(--p-color-bg-surface); border-color: var(--p-color-border); }
.peca-mais-lista button { color: var(--p-color-text); }
.peca-mais-lista button:hover { background: var(--p-color-bg-surface-hover); }
.tecla { background: var(--p-color-bg-surface); border-color: var(--p-color-border-strong); color: var(--p-color-text-secondary); }
.filtro-chip { background: var(--p-color-bg-surface-tertiary); color: var(--p-color-text); }

/* ================================================================ toque e foco */
@media (pointer: coarse) {
  .menu-conta-lista a, .menu-conta-lista button, .menu-mais button { min-height: 44px; }
  .card-cab-link, .coluna-mais { min-height: 44px; }
}