/* Portal — Banco de Talentos
   Tokens fonte: DESIGN.md (identidade herdada de documentos/DESIGN-institucional.md,
   racionada para registro de produto). Cores em hex = valor normativo do DESIGN.md;
   tons derivados (hover, tint, foco) usam color-mix() em oklch para blends
   perceptualmente uniformes sem redefinir a cor-base. */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-var.b2c9031d9fd6.woff2") format('woff2-variations'), url("../fonts/ibm-plex-sans-var.b2c9031d9fd6.woff2") format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400.79936b18df9f.woff2") format('woff2');
}

:root {
  /* Cor — marca (herdada, racionada) */
  --color-signal-yellow: #ffff00;
  --color-signal-yellow-dim: #999933;
  --color-tool-indigo: #524fc6;
  --color-tool-indigo-dim: #3d3a9e;

  /* Cor — neutros (achromáticos, sem tint) */
  --color-void-black: #000000;
  --color-console-gray: #999798;
  --color-surface-subtle: #f4f4f5;
  --color-paper-white: #ffffff;
  --color-border: #d9d9da;

  /* Cor — status semântico */
  --color-status-success: #1a7a4d;
  --color-status-warning: #955708;
  --color-status-danger: #b42318;
  --color-status-neutral: var(--color-console-gray);

  /* Papéis semânticos */
  --color-bg: var(--color-paper-white);
  --color-surface: var(--color-surface-subtle);
  --color-ink: var(--color-void-black);
  --color-ink-muted: color-mix(in oklch, var(--color-void-black) 55%, var(--color-paper-white));
  --color-accent: var(--color-tool-indigo);
  --color-accent-hover: var(--color-tool-indigo-dim);
  --color-accent-strong: var(--color-tool-indigo-dim);
  --color-primary-action: var(--color-signal-yellow);
  --color-primary-action-hover: var(--color-signal-yellow-dim);

  --color-row-hover: color-mix(in oklch, var(--color-tool-indigo) 6%, var(--color-paper-white));
  --color-row-selected: color-mix(in oklch, var(--color-tool-indigo) 12%, var(--color-paper-white));
  --color-focus-ring: var(--color-tool-indigo);

  /* Tipografia — família única, escala fixa (registro de produto) */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --text-label: 0.8125rem;   /* 13px — rótulos, cabeçalhos de tabela, botões */
  --text-mono: 0.875rem;     /* 14px — dados técnicos: CPF, telefone, IDs */
  --text-body: 1rem;         /* 16px — corpo */
  --text-title: 1.25rem;     /* 20px — cabeçalho de seção */
  --text-headline: 1.75rem;  /* 28px — título de página, fixo (não fluido: registro de produto) */

  --leading-tight: 1.2;
  --leading-title: 1.3;
  --leading-body: 1.5;

  /* Espaçamento — escala 4pt */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;
  --space-2xl: 64px;

  /* Forma */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Elevação — só UI flutuante, ver DESIGN.md § 4 */
  --shadow-floating-low: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-floating-high: 0 8px 24px rgba(0, 0, 0, 0.16);
  --shadow-toast: 0 4px 16px rgba(0, 0, 0, 0.18);

  /* Escala z-index semântica */
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-modal-backdrop: 1200;
  --z-modal: 1300;
  --z-toast: 1400;
  --z-tooltip: 1500;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
}

/* Reset mínimo */
*, *::before, *::after { box-sizing: border-box; }
/* Topbar fixa de 48px: sem isso, o campo focado com Shift+Tab ficava atrás dela. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 56px; }
/* ponytail: altura fixa do cabeçalho sticky (~113px + topbar); se um cabeçalho crescer
   muito, medir via JS. No celular os forms de cliente/fornecedor soltam o cabeçalho. */
html:has(.page-header--sticky) { scroll-padding-top: 170px; }
@media (max-width: 960px) {
  html:has(.cliente-form-page, .fornecedor-form-page) { scroll-padding-top: 56px; }
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
/* [hidden] deve sempre vencer: qualquer classe de layout (.field, .cluster
   etc.) tem a mesma especificidade e, sem isso, sobrescreve o atributo. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* separate, não collapse: um <th> com position:sticky dentro de uma tabela
   com border-collapse:collapse colapsa a altura da linha do cabeçalho em
   alguns motores de render, fazendo a primeira linha do corpo desenhar por
   cima dele. Como só usamos border-bottom (sem bordas verticais), não há
   risco de borda dupla ao trocar para separate. */
table { border-collapse: separate; border-spacing: 0; }

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Foco visível — só teclado, alto contraste, sempre Tool Indigo (nunca amarelo:
   foco é constante em toda tela, ação primária é rara — não podem competir) */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -48px;
  background: var(--color-void-black);
  color: var(--color-paper-white);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  z-index: var(--z-tooltip);
  transition: top var(--duration-base) var(--ease-out-expo);
}
.skip-link:focus-visible { top: var(--space-md); }

/* Shell / navegação ----------------------------------------------------- */

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.app-shell__body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-void-black);
  color: var(--color-paper-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 0 var(--space-lg);
  height: 48px;
  flex-shrink: 0;
}
.app-topbar__left { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
/* Ambiente local (DEBUG): barra em grafite e selo, pra não confundir com produção. */
.app-topbar--dev { background: color-mix(in srgb, var(--color-void-black) 60%, var(--color-paper-white)); }  /* #666: 40% clareado, srgb pra conta ser literal */
.app-topbar__ambiente { border: 1px solid currentColor; border-radius: var(--radius-sm); padding: 0 var(--space-xs); font-size: var(--text-label); font-weight: 600; letter-spacing: 0.08em; }
.app-topbar__menu-toggle {
  display: none;
  width: 44px;  /* alvo de toque (crítica do portal, 28/09) */
  height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-paper-white);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.app-topbar__menu-toggle:hover { background: color-mix(in oklch, var(--color-paper-white) 12%, transparent); }
.app-topbar__brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.02em;
  color: var(--color-paper-white);
  white-space: nowrap;
}
.app-topbar__dot {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--color-signal-yellow);
  align-self: center;
  flex-shrink: 0;
}
.app-topbar__brand strong { font-weight: 600; }
.app-topbar__brand span { color: color-mix(in oklch, var(--color-paper-white) 60%, transparent); }
.app-topbar__logo-chip {
  display: flex;
  align-items: center;
  line-height: 0;
}
.app-topbar__logo {
  height: 40px;
  width: auto;
  display: block;
}
.app-topbar__search {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 1 1 auto;
  max-width: 420px;
  margin: 0 var(--space-md);
  padding: 6px var(--space-md);
  /* Teto para a busca nao engolir o espaco da conta, que saia truncada em
     "Raph...". Tambem aproxima o campo do modelo: pill centrado, nao faixa. */
  max-width: 460px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--color-paper-white) 12%, transparent);
  color: color-mix(in oklch, var(--color-paper-white) 60%, transparent);
}
.app-topbar__search:focus-within {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 1px;
}
.app-topbar__search svg { flex-shrink: 0; }
.app-topbar__search input {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--color-paper-white);
  font-size: var(--text-label);
}
.app-topbar__search input::placeholder { color: color-mix(in oklch, var(--color-paper-white) 60%, transparent); }
.app-topbar__search input:focus { outline: none; }
.app-topbar__user {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-label);
  white-space: nowrap;
  min-width: 0;
}
/* Conta: avatar + nome sobre o nivel, tudo num alvo so, que leva ao Perfil. */
.app-topbar__conta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  padding: 4px var(--space-sm) 4px 4px;
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard);
}
.app-topbar__conta:hover,
.app-topbar__conta:focus-visible {
  background: color-mix(in oklch, var(--color-paper-white) 12%, transparent);
}
.app-topbar__avatar {
  display: block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 999px;
  object-fit: cover;
  background: color-mix(in oklch, var(--color-paper-white) 18%, transparent);
}
.app-topbar__avatar--vazio {
  border: 1px dashed color-mix(in oklch, var(--color-paper-white) 40%, transparent);
}
.app-topbar__conta-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.app-topbar__user-name {
  color: var(--color-paper-white);
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-topbar__user-role {
  color: color-mix(in oklch, var(--color-paper-white) 60%, transparent);
  flex-shrink: 0;
}
.app-topbar__logout-form { display: inline; }
.app-topbar__user-role a,
.app-topbar__logout {
  color: color-mix(in oklch, var(--color-paper-white) 88%, transparent);
  text-decoration: none;
  transition:
    color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}
.app-topbar__user-role a:hover,
.app-topbar__user-role a:focus-visible,
.app-topbar__logout:hover,
.app-topbar__logout:focus-visible {
  color: var(--color-paper-white);
  text-decoration: none;
}
.app-topbar__logout {
  display: inline-flex;
  align-items: center;
  /* Media 23x20px, colado no bloco da conta: alvo abaixo do minimo, e o vizinho
     e justamente o botao que desloga (02/10). */
  min-height: 32px;
  padding: 0 var(--space-sm);
  border: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
}
.app-topbar__logout:hover,
.app-topbar__logout:focus-visible {
  background: color-mix(in oklch, var(--color-paper-white) 12%, transparent);
}

.app-sidebar {
  width: 244px;
  flex-shrink: 0;
  background: var(--color-paper-white);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  padding: var(--space-md) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app-sidebar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px var(--space-xs);
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-void-black);
  border-radius: var(--radius-sm);
}
.app-sidebar__item:hover { background: var(--color-surface-subtle); text-decoration: none; }
.app-sidebar__item[aria-current='page'] {
  background: color-mix(in oklch, var(--color-tool-indigo) 10%, var(--color-paper-white));
  box-shadow: inset 2px 0 0 var(--color-tool-indigo);
  color: var(--color-void-black);
}
.app-sidebar__icon { display: flex; width: 18px; height: 18px; flex-shrink: 0; color: var(--color-ink-muted); }
.app-sidebar__icon svg { width: 100%; height: 100%; }
.app-sidebar__item[aria-current='page'] .app-sidebar__icon { color: var(--color-tool-indigo); }
.app-sidebar__badge {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
  color: var(--color-ink-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}
.app-sidebar-calendario { padding-bottom: var(--space-sm); margin: 0 var(--space-2xs) var(--space-xs); border-bottom: 1px solid var(--color-border); }
.app-sidebar-calendario .dashboard-agenda-calendario__titulo-mes { font-size: var(--text-label); font-weight: 600; }
.app-sidebar-calendario .dashboard-agenda-calendario__nav-btn { width: 24px; height: 24px; font-size: 0.85rem; }
.app-sidebar-calendario .dashboard-agenda-calendario__dia-semana { font-size: 0.7rem; padding-bottom: 4px; }
.app-sidebar-calendario .dashboard-agenda-calendario__dia { max-width: 28px; font-size: 0.7rem; }
.app-sidebar-calendario .dashboard-agenda-calendario__dia-numero { width: 22px; height: 22px; aspect-ratio: 1; flex-shrink: 0; line-height: 1; }
.app-sidebar__preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: var(--space-xs) var(--space-xs) var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}
.app-sidebar__preview-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app-sidebar__preview-kicker {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-void-black);
}
.app-sidebar__preview-state,
.app-sidebar__preview-current {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--color-ink-muted);
}
.app-sidebar__preview-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.app-sidebar__preview-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-void-black);
}
.app-sidebar__preview-select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-paper-white);
  color: var(--color-void-black);
  padding: 8px 10px;
  font-size: var(--text-label);
}
.app-sidebar__preview-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.app-sidebar__preview-areas a {
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-paper-white);
  color: var(--color-void-black);
  font-size: 0.75rem;
  text-decoration: none;
}
.app-sidebar__preview-areas a:hover {
  border-color: var(--color-tool-indigo);
  color: var(--color-tool-indigo);
}
.app-sidebar__preview-select:focus-visible {
  border-color: var(--color-tool-indigo);
}
.preview-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid color-mix(in oklch, var(--color-tool-indigo) 28%, var(--color-border));
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-tool-indigo) 7%, var(--color-paper-white));
}
.preview-banner strong {
  color: var(--color-void-black);
}
.preview-banner p {
  margin-top: 2px;
  color: var(--color-ink-muted);
  font-size: var(--text-label);
}

.app-sidebar__divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-sm) var(--space-xs);
}

.app-sidebar__group-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px var(--space-xs);
  font: inherit;
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-void-black);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.app-sidebar__group-toggle:hover { background: var(--color-surface-subtle); }
.app-sidebar__chevron {
  width: 14px;
  height: 14px;
  margin-left: auto;
  color: var(--color-ink-muted);
  transition: transform var(--duration-base) var(--ease-out-expo);
}
.app-sidebar__group.is-open .app-sidebar__chevron { transform: rotate(90deg); }
/* grid-template-rows anima a altura sem tocar em height/max-height —
   evita o layout thrash de animar uma propriedade de layout direto. */
.app-sidebar__group-items {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-base) var(--ease-out-expo);
}
.app-sidebar__group.is-open .app-sidebar__group-items { grid-template-rows: 1fr; }
.app-sidebar__group-items-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 26px;
}
.app-sidebar__group-items-inner .app-sidebar__item { padding: 7px var(--space-xs); }

.app-sidebar-backdrop { display: none; }

.app-main {
  flex: 1;
  min-width: 0;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-lg);
  width: 100%;
}
.app-shell .app-main {
  max-width: 100%;
  padding: var(--space-md);
}

@media (max-width: 900px) {
  .app-topbar__menu-toggle { display: flex; }
  /* No celular sai so o nivel de acesso. O caminho pro Perfil e o bloco da conta
     (avatar + nome), que fica visivel: era por esta regra, quando ela escondia o
     link "Perfil", que a tela ficava inalcancavel no celular (02/10). */
  .app-topbar__user-role { display: none; }
  .app-topbar__search { display: none; }
  /* Visualização DEV no celular: sai o "Visualização: nome" para caber "Voltar ao cadastro". */
  .app-topbar__ambiente ~ .app-topbar__user-name { display: none; }
}
@media (max-width: 480px) {
  .app-topbar__user > .app-topbar__ambiente { display: none; }

  .app-sidebar {
    position: fixed;
    top: 48px;
    left: 0;
    bottom: 0;
    z-index: var(--z-modal);
    width: 272px;
    transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease-out-expo);
    box-shadow: var(--shadow-floating-high);
  }
  .app-sidebar.is-open { transform: translateX(0); }

  .app-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 48px 0 0 0;
    z-index: var(--z-modal-backdrop);
    background: rgba(0, 0, 0, 0.4);
  }
  .app-sidebar-backdrop[hidden] { display: none; }

  .app-main { padding: var(--space-md); }
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-lg);
}
.page-header h1 {
  font-size: var(--text-headline);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
}
.page-header__meta {
  font-size: var(--text-label);
  color: var(--color-ink-muted);
}
.triagem-search {
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.triagem-search__bar {
  align-items: flex-end;
}
.triagem-search__field {
  flex: 1;
  min-width: 220px;
}
.triagem-search__hint {
  margin: 0;
  font-size: var(--text-label);
  color: var(--color-ink-muted);
}

/* Botões ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out-expo),
              border-color var(--duration-fast) var(--ease-out-expo);
}
.btn-primary {
  background: var(--color-primary-action);
  color: var(--color-void-black);
}
.btn-primary:hover { background: var(--color-primary-action-hover); text-decoration: none; }
.btn-secondary {
  background: var(--color-paper-white);
  color: var(--color-void-black);
  border-color: var(--color-void-black);
}
.btn-secondary:hover { background: var(--color-surface-subtle); text-decoration: none; }
/* Fantasma: sem preenchimento, mas com borda neutra em repouso — sem isso,
   viram texto indistinguível numa linha com várias ações lado a lado. */
.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-border);
  padding: 6px 10px;
}
.btn-ghost:hover { background: var(--color-surface-subtle); border-color: var(--color-ink); text-decoration: none; }
.btn-danger-ghost {
  background: transparent;
  color: var(--color-status-danger);
  border-color: var(--color-border);
  padding: 6px 10px;
}
.btn-danger-ghost:hover { background: color-mix(in oklch, var(--color-status-danger) 8%, white); border-color: var(--color-status-danger); text-decoration: none; }
.btn-success-ghost {
  background: transparent;
  color: var(--color-status-success);
  border-color: var(--color-border);
  padding: 6px 10px;
}
.btn-success-ghost:hover { background: color-mix(in oklch, var(--color-status-success) 8%, white); border-color: var(--color-status-success); text-decoration: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-sm { padding: 6px 12px; font-size: var(--text-label); }
/* Exceção deliberada à Regra do foco em Tool Indigo (linha ~137): DESIGN.md
   especifica foco Amarelo Sinal nos botões. Amarelo puro sozinho não bate
   3:1 contra branco nem contra o próprio fundo amarelo do botão primário —
   o anel preto companheiro garante o contraste WCAG que o próprio DESIGN.md
   invoca como motivo da regra. */
.btn:focus-visible {
  outline: 2px solid var(--color-void-black);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-signal-yellow);
}

/* Selos / badges ----------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.badge-success { background: var(--color-status-success); color: var(--color-paper-white); }
.badge-warning { background: var(--color-status-warning); color: var(--color-paper-white); }
.badge-danger { background: var(--color-status-danger); color: var(--color-paper-white); }
.badge-info {
  background: color-mix(in oklch, var(--color-tool-indigo) 12%, white);
  color: var(--color-tool-indigo-dim);
  border: 1px solid color-mix(in oklch, var(--color-tool-indigo) 28%, white);
}
.badge-neutral { background: var(--color-console-gray); color: var(--color-void-black); }
.badge-outline {
  background: transparent;
  color: var(--color-ink-muted);
  border: 1px solid var(--color-border);
}
.badge-review {
  background: color-mix(in oklch, var(--color-status-warning) 12%, white);
  color: color-mix(in oklch, var(--color-status-warning) 85%, black);
  border: 1px solid color-mix(in oklch, var(--color-status-warning) 35%, white);
}

.pill-group { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

/* Campos de formulário ------------------------------------------------------ */

.field { display: flex; flex-direction: column; gap: 4px; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.field label,
.field legend {
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-ink);
}
.field .hint { font-size: var(--text-label); color: var(--color-ink-muted); }
/* O reset global zera list-style, entao as regras de senha viravam texto corrido.
   E soltas entre dois campos elas ocupavam mais espaco que os proprios campos:
   num bloco sutil, leem-se como nota de apoio, nao como mais um campo (02/10). */
.field__regras {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
}
.field__regras ul {
  margin: 0;
  padding-left: var(--space-md);
  list-style: disc;
}
/* Agrupa um formulário longo em blocos nomeados sem virar card dentro de card —
   o diálogo já é a superfície elevada; aqui basta a legenda e uma divisória. */
.field-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.field-group + .field-group { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
/* Entre secoes recolhidas o respiro pode ser menor: sao tres cabecalhos de uma
   linha em sequencia, nao tres blocos de conteudo. */
details.field-group + details.field-group { margin-top: var(--space-sm); padding-top: var(--space-sm); }
.field-group > legend,
.field-group > summary { padding: 0; margin-bottom: var(--space-sm); font-size: var(--text-label); font-weight: 600; color: var(--color-ink); }
/* Bloco recolhido: mesma legenda dos outros, mais a seta e o alvo de clique. */
.field-group > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--space-2xs); }
.field-group > summary::-webkit-details-marker { display: none; }
.field-group > summary::before {
  content: '';
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform var(--duration-fast) var(--ease-out-expo);
}
.field-group[open] > summary::before { transform: rotate(90deg); }
.field-group > summary:hover { color: var(--color-tool-indigo); }
/* Lista por exclusao em vez de por tipo: enumerar deixava number, tel, time e
   url de fora, sem padding nenhum e 9px mais baixos que os vizinhos. */
.field input:where(:not([type='checkbox']):not([type='radio']):not([type='file'])),
.field select,
.field textarea {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-paper-white);
  padding: 8px 12px;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  width: 100%;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 1px;
  border-color: var(--color-focus-ring);
}
.field input[type='file'] {
  font-size: var(--text-body);
  width: 100%;
  max-width: 100%;
}
.field input[type='file']::file-selector-button {
  appearance: none;
  margin-right: var(--space-sm);
  border: 1px solid var(--color-void-black);
  border-radius: var(--radius-sm);
  background: var(--color-paper-white);
  color: var(--color-void-black);
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out-expo);
}
.field input[type='file']::file-selector-button:hover {
  background: var(--color-surface-subtle);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--color-status-danger);
}
.field .error-message {
  font-size: var(--text-label);
  color: var(--color-status-danger);
}
.field textarea { resize: vertical; min-height: 5.5rem; }

.checkbox-row { display: flex; align-items: center; gap: var(--space-xs); }

/* Recorte de foto (autoatendimento) ----------------------------------------- */

input[type="file"] {
  display: block;
  font: inherit;
  color: var(--color-ink-muted, #666);
  max-width: 100%;
}
input[type="file"]::file-selector-button {
  margin-right: var(--space-sm);
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-paper-white);
  color: var(--color-ink);
  font-weight: 500;
  font-size: var(--text-label);
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
  background: var(--color-surface-subtle);
}

/* Perfil: um assunto por vez, em abas (Raphael, 02/10: "separa em sessoes, abas").
   Antes eram dois paineis irmaos competindo pelo mesmo peso — e o breakpoint de
   duas colunas, que media o viewport e ignorava os 244px da sidebar, saiu junto. */
.perfil-painel { max-width: 780px; }
/* Marcador de pendencia na aba: mesmo idioma das contagens que as outras abas do
   Portal ja usam, so que carregando urgencia em vez de quantidade. */
.tab__pendencia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: var(--space-2xs);
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-status-warning);
  color: var(--color-paper-white);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.perfil-pendencias { margin-bottom: var(--space-md); }
.perfil-erro { color: var(--color-status-danger); }

/* Perfil: estado da foto antes de enviar outra — a pessoa precisa ver qual foto
   esta la, e nao so ler "Foto ja cadastrada" (02/10). */
/* A Foto eram 5 pedacos empilhados no mesmo nivel dos campos (miniatura, badge,
   texto, botao, dica) — "tudo misturado" (Raphael, 02/10). Agora e um bloco so,
   com fundo proprio, que se le como uma unidade dentro do formulario. */
.perfil-foto-bloco {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}
.perfil-foto {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.perfil-foto__vazia {
  display: block;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-full, 999px);
  background: var(--color-surface-subtle);
}
.perfil-foto__estado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  min-width: 0;
}
.perfil-foto .photo-thumb { flex-shrink: 0; }
.perfil-foto__recusa { margin-bottom: var(--space-sm); }
.foto-cropper__aviso { margin-top: var(--space-xs); }
/* A acao de salvar colava no ultimo campo; separada, o painel ganha um rodape. */
.panel__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}
/* Hint de duas linhas escalonava a altura das linhas do grid e os campos da
   coluna seguinte pareciam flutuar. */
.form-grid { align-items: start; }
.perfil-foto__botao { display: inline-block; cursor: pointer; }
/* .sr-only sozinho perde para `.field input[type='file'] { width: 100% }`, que e
   mais especifico — sem isto o input escondido estoura a largura da pagina. */
.field input[type='file'].sr-only { width: 1px; max-width: 1px; }
/* O input e .sr-only, entao o foco de teclado precisa aparecer no rotulo. */
.foto-cropper input[type='file']:focus-visible + .perfil-foto__botao {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.foto-cropper__editor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
  padding: var(--space-md);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-floating-low);
}
.foto-cropper__stage {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-void-black);
  cursor: grab;
  touch-action: none;
}
.foto-cropper__stage:active { cursor: grabbing; }
.foto-cropper__stage:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.foto-cropper__canvas {
  position: absolute;
  inset: 0;
  user-select: none;
  -webkit-user-drag: none;
}
.foto-cropper__mask {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-paper-white);
  box-shadow: 0 0 0 999px color-mix(in oklch, var(--color-void-black) 55%, transparent);
  pointer-events: none;
}
.foto-cropper__controls {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 280px;
}
.foto-cropper__zoom {
  flex: 1;
  accent-color: var(--color-tool-indigo);
}
.foto-cropper__zoom-icon {
  color: var(--color-ink-muted);
  font-size: var(--text-label);
  line-height: 1;
}
.foto-cropper__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-xs);
  width: 280px;
}
.foto-cropper__preview {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}
.foto-cropper__preview-img {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full, 999px);
  object-fit: cover;
  border: 1px solid var(--color-border);
}

/* Tabela ------------------------------------------------------------------- */

.data-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.data-table { width: 100%; min-width: 720px; font-size: var(--text-body); }
.data-table thead th {
  background: var(--color-paper-white);
  text-align: left;
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-ink-muted);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.data-table tbody tr:nth-child(even) { background: var(--color-surface-subtle); }
.data-table tbody tr:hover { background: var(--color-row-hover); }
.data-table tbody tr.is-selected {
  background: var(--color-row-selected);
  box-shadow: inset 2px 0 0 var(--color-tool-indigo);
}
.data-table td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
/* Rodapé (totais) alinha com as células: sem isto o th herda o padding de 1px do navegador. */
.data-table tfoot th {
  padding: var(--space-xs) var(--space-sm);
  vertical-align: middle;
}
/* Botão de ação numa célula nunca quebra em duas linhas — a coluna cede
   largura ao texto, não o contrário (linha de 70px virava 45px). */
.data-table td .btn { white-space: nowrap; }
.data-table td.cell-wrap {
  white-space: normal;
  min-width: 22ch;
  max-width: 44ch;
  overflow-wrap: anywhere;
}
.data-table td.merge-choice-cell,
.data-table td.merge-result-cell {
  min-width: 20ch;
}
.merge-choice-cell {
  transition:
    background-color var(--duration-base) var(--ease-out-expo),
    box-shadow var(--duration-base) var(--ease-out-expo),
    border-color var(--duration-base) var(--ease-out-expo);
}
.merge-choice-label {
  display: block;
  cursor: pointer;
}
.merge-choice-cell.is-selected {
  background: color-mix(in oklch, var(--color-status-success) 18%, white);
  box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--color-status-success) 72%, black);
}
.merge-result-cell {
  display: grid;
  gap: var(--space-2xs);
  align-content: center;
}
.merge-result-value {
  font-weight: 500;
  overflow-wrap: anywhere;
}
.merge-choice-action {
  justify-self: flex-start;
}
.merge-choice-action.is-selected {
  background: color-mix(in oklch, var(--color-status-success) 14%, white);
  border-color: color-mix(in oklch, var(--color-status-success) 72%, black);
  color: color-mix(in oklch, var(--color-status-success) 72%, black);
}
.merge-compare {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-paper-white);
}
.merge-compare::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--color-border);
  transform: translateX(-50%);
}
.merge-compare__card {
  position: relative;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 100%;
}
.merge-compare__connector {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.merge-compare__connector .badge {
  min-width: 56px;
  justify-content: center;
  background: var(--color-paper-white);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table a.row-link { color: var(--color-ink); font-weight: 500; }
.data-table a.row-link:hover { color: var(--color-accent); }
.sortable-table thead a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-tool-indigo);
  text-decoration: none;
}
.sortable-table thead a:hover {
  color: var(--color-tool-indigo-dim);
  text-decoration: underline;
}
.sortable-table thead span {
  color: var(--color-ink-muted);
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22ch;
  display: inline-block;
  vertical-align: bottom;
}

.mono { font-family: var(--font-mono); font-size: var(--text-mono); }

/* Destaque de trecho buscado (Tool Indigo, não Amarelo Sinal — o amarelo
   fica reservado à ação primária / estado ativo, ver Rationed Signal Rule) */
mark {
  background: color-mix(in oklch, var(--color-tool-indigo) 18%, white);
  color: var(--color-tool-indigo-dim);
  font-weight: 600;
  padding: 0 2px;
  border-radius: 2px;
}

/* Estado vazio / carregando -------------------------------------------------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding: var(--space-xl) var(--space-lg);
  color: var(--color-ink-muted);
  text-align: left;
}
.empty-state h3 { font-size: var(--text-title); color: var(--color-ink); font-weight: 600; }
.empty-state p { max-width: 60ch; }
.triagem-empty-state {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--color-surface-subtle) 55%, white),
    white
  );
}

.htmx-indicator { opacity: 0; transition: opacity var(--duration-base) var(--ease-out-expo); }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }
.results-region { position: relative; }
.results-region.htmx-request { opacity: 0.6; transition: opacity var(--duration-base) var(--ease-out-expo); }

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.skeleton-row td {
  padding: var(--space-xs) var(--space-sm);
}
.skeleton-block {
  background: var(--color-surface-subtle);
  border-radius: var(--radius-sm);
  height: 1em;
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Alvo de toque de 44px (WCAG 2.5.5) so em ponteiro grosso. No desktop a
   densidade fica como esta: e ferramenta de mesa, lida por hora, e 44px em
   tabela densa custaria mais legibilidade do que resolveria. */
@media (pointer: coarse) {
  .field input:where(:not([type='checkbox']):not([type='radio'])),
  .field select,
  .btn {
    min-height: 44px;
  }
}

/* Abas ----------------------------------------------------------------------- */

.tabs {
  border-bottom: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}
/* Faixa das abas com um destino externo: a borda inferior passa para o container,
   senao ela pararia onde as abas acabam. Raphael, 13/10, pediu o link "como uma nova
   aba" — ele se veste de aba e segue a fila, mas continua fora do role="tablist",
   porque um <a> ali dentro quebraria a navegacao por setas do tablist. O icone de
   link externo fica: o clique sai da pagina, e isso tem que se ver antes. */
.tabs-bar {
  display: flex;
  align-items: stretch;
  gap: var(--space-lg);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border);
}
.tabs-bar > .tabs {
  flex: 1 1 auto;
  min-width: 0;
  border-bottom: 0;
}
/* Aba que e um link para outra tela: o visual vem de `.tab`; so o sublinhado de link sai. */
a.tab, a.tab:hover { text-decoration: none; }
.tab {
  background: none;
  border: none;
  padding: var(--space-sm) 2px;
  margin-bottom: -1px;
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-ink-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
/* `aria-current`: a aba que é um link para outra tela (o acesso operacional), e não um painel. */
.tab[aria-selected='true'], .tab[aria-current] { color: var(--color-ink); border-bottom-color: var(--color-tool-indigo); }
.tab:hover { color: var(--color-ink); }
.tabpanel { padding-top: var(--space-lg); }
.tabpanel.htmx-request { opacity: 0.6; pointer-events: none; transition: opacity var(--duration-base) var(--ease-out-expo); }

.relatorios-stack {
  padding-bottom: var(--space-xl);
}
.reports-overview {
  display: grid;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--color-surface-subtle) 82%, white) 0%, white 100%);
}
.reports-overview__intro {
  max-width: 72ch;
}
.reports-overview__eyebrow {
  font-size: var(--text-label);
  margin-bottom: var(--space-xs);
}
.reports-overview__title {
  font-size: var(--text-title);
  line-height: var(--leading-title);
}
.reports-overview__groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}
.reports-overview__group {
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.92);
}
.reports-overview__group-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.reports-overview__group-title {
  margin: 0;
  font-size: 1rem;
}
.reports-overview__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-paper-white);
  color: var(--color-ink);
  font-size: var(--text-label);
  font-weight: 500;
  white-space: nowrap;
}
.reports-overview__link:hover {
  text-decoration: none;
  border-color: color-mix(in oklch, var(--color-tool-indigo) 35%, var(--color-border));
  color: var(--color-ink);
}
.reports-overview__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.reports-overview__chip {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-paper-white);
  color: var(--color-ink);
  min-width: 180px;
}
.reports-overview__chip:hover {
  text-decoration: none;
  border-color: color-mix(in oklch, var(--color-tool-indigo) 35%, var(--color-border));
  box-shadow: 0 10px 24px rgba(41, 38, 94, 0.08);
}
.reports-overview__chip small {
  color: var(--color-ink-muted);
}
.report-section {
  padding: var(--space-lg);
}
.report-tabs {
  margin-top: var(--space-lg);
}
.report-tabs__list {
  gap: var(--space-md);
  padding-bottom: var(--space-xs);
  flex-wrap: wrap;
  overflow: visible;
  scrollbar-width: auto;
}
.report-tabpanel {
  display: grid;
  gap: var(--space-md);
}
.report-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
}
.report-hero__title {
  font-size: var(--text-title);
  line-height: var(--leading-title);
}
.report-hero__body {
  margin-top: 0;
  max-width: 68ch;
}
.report-hero__link {
  margin: 0;
}
.report-hero__link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-label);
  font-weight: 500;
}
.report-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
  margin: 0;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}
.report-facts__item {
  min-width: 0;
}
.report-facts__item dt {
  font-size: var(--text-label);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2xs);
}
.report-facts__item dd {
  margin: 0;
}
.report-coverage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}
.report-coverage--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.report-coverage__item {
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-surface-subtle) 35%, white);
}
.report-coverage__label {
  display: block;
  font-size: var(--text-label);
  color: var(--color-ink-muted);
}
.report-coverage__value {
  display: block;
  margin-top: 4px;
  font-size: 1.125rem;
}
.report-coverage__sub {
  display: block;
  font-size: var(--text-label);
  font-weight: 500;
  font-family: var(--font-sans);
}
.report-callout {
  display: grid;
  gap: var(--space-sm);
}
.report-callout__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
}
.report-callout__header h4 {
  margin: 0;
  font-size: 1rem;
}
.campaign-toolbelt {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-surface-subtle) 45%, white);
}
.campaign-toolbelt__intro {
  max-width: 52ch;
}
.campaign-toolbelt__intro h2 {
  margin: 0 0 4px;
  font-size: var(--text-title);
}
.campaign-toolbelt__intro p {
  margin: 0;
  color: var(--color-ink-muted);
}
.campaign-toolbelt__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-end;
}
.campaign-toolbelt__button {
  width: fit-content;
}
.finance-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
}
.finance-event {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.finance-event__headline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.finance-event__headline strong {
  font-size: 1rem;
}
.finance-event__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--color-ink-muted);
  font-size: var(--text-label);
}
.finance-event__meta span:not(:last-child)::after {
  content: "·";
  margin-left: 10px;
}
.finance-readiness {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.finance-readiness__text {
  color: var(--color-ink-muted);
  font-size: var(--text-label);
  max-width: 30ch;
}
.finance-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.finance-metric strong {
  font-size: 1rem;
}
.finance-metric span {
  color: var(--color-ink-muted);
  font-size: var(--text-label);
}
.finance-row-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}
.finance-row-actions__secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.finance-row-actions__secondary a:not(.btn) {
  color: var(--color-tool-indigo);
  font-size: var(--text-label);
  font-weight: 500;
  text-decoration: none;
}
.finance-row-actions__secondary a:not(.btn):hover {
  color: var(--color-tool-indigo-dim);
  text-decoration: underline;
}
/* Radar de prazos (taxas/documentos) — chips de arquivo, alerta em texto,
   select de estado. A tabela vive num wrap com overflow-x. */
.deadline-files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-2xs);
}
.deadline-files a.review-summary-badge { text-decoration: none; }
.deadline-files a.review-summary-badge:hover { border-color: var(--color-tool-indigo); color: var(--color-tool-indigo); }
.deadline-alert { display: flex; flex-direction: column; gap: var(--space-2xs); align-items: flex-start; }
.deadline-alert .badge { white-space: normal; text-align: left; line-height: 1.35; }
/* Alerta em texto com ponto, não em bloco sólido: 36 badges vermelhos viram
   ruído; a cor fica no ponto e no número, o texto fica legível e calmo. */
.deadline-alert__text {
  position: relative;
  padding-left: 14px;
  font-size: var(--text-label);
  line-height: 1.4;
  color: var(--color-ink);
}
.deadline-alert__text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.deadline-alert__text.is-danger { color: var(--color-status-danger); }
.deadline-alert__text.is-warning { color: var(--color-status-warning); }
.deadline-alert__text strong { font-weight: 600; }
.deadline-trail { display: block; margin-top: 3px; font-size: 11px; line-height: 1.35; color: var(--color-ink-muted); }
.deadline-th-alert { min-width: 220px; }
.deadline-th-files { min-width: 96px; }
.deadline-td-name { min-width: 16ch; max-width: 24ch; }
/* Cabeçalho preso sob a topbar (48px) — só onde a tabela cabe na largura
   (sidebar 272 + main ≤1280); o wrap precisa deixar de ser scroll
   container pra sticky funcionar. Abaixo disso rola na horizontal. */
@media (min-width: 1560px) {
  .data-table-wrap--sticky { overflow-x: visible; }
  .data-table-wrap--sticky thead th { position: sticky; top: 48px; z-index: 2; box-shadow: 0 1px 0 var(--color-border); }
}
.deadline-chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
/* Menu de acoes da reconciliacao: um botao, as acoes num painel flutuante.
   Shadow porque e UI temporaria sobre a pagina (Floating-Only Rule do DESIGN.md). */
.acoes-menu { position: relative; }
.acoes-menu > summary { list-style: none; }
.acoes-menu > summary::-webkit-details-marker { display: none; }
.acoes-menu__painel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: var(--z-dropdown);
  display: grid;
  gap: var(--space-2xs);
  min-width: 300px;
  padding: var(--space-sm) 0;
  background: var(--color-paper-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-floating-low);
  text-align: left;
}
/* Item do menu: <a> ou <button class="acoes-menu__item"> (ação por POST, dentro de um
   <form>); o form vira transparente pro grid do painel (tela do contrato, 12/10). */
.acoes-menu__painel form { display: contents; }
.acoes-menu__painel a,
.acoes-menu__painel .acoes-menu__item {
  min-height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 var(--space-md);
  color: var(--color-ink);
  text-decoration: none;
  font: inherit;
  font-size: var(--text-label);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.acoes-menu__painel a:hover,
.acoes-menu__painel .acoes-menu__item:hover { background: var(--color-surface-subtle); }
.acoes-menu__painel .acoes-menu__item--perigo { color: var(--color-status-danger); }
.acoes-menu__titulo {
  margin: var(--space-2xs) 0 0;
  padding: 0 var(--space-md);
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--color-ink-muted);
}
.acoes-menu__titulo + a { margin-top: var(--space-2xs); }
.acoes-menu__nota {
  margin: 0;
  padding: 0 var(--space-md);
  font-size: var(--text-label);
  color: var(--color-ink-muted);
  max-width: 34ch;
}
.acoes-menu__form {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-md) 0;
}
.acoes-menu__form label { font-size: var(--text-label); font-weight: 500; }
/* No celular o painel de 300px estourava a tela: passa a ocupar a largura do bloco. */
@media (max-width: 600px) {
  .acoes-menu { position: static; }
  .acoes-menu__painel { left: 0; right: 0; min-width: 0; }
}

/* Reconciliacao: filtro e exportacoes dividem a linha acima da tabela. */
.reconciliacao-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.deadline-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px;
  border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-paper-white);
  font-size: var(--text-label); font-weight: 500; color: var(--color-ink); text-decoration: none;
}
.deadline-chip:hover { border-color: var(--color-ink); text-decoration: none; }
.deadline-chip.is-active { background: var(--color-void-black); color: var(--color-paper-white); border-color: var(--color-void-black); }
.deadline-chip__n { font-family: var(--font-mono); font-size: 11px; opacity: .75; }
.file-chip.is-readonly { cursor: default; }
.file-chip.is-readonly:hover { border-color: var(--color-border); color: var(--color-ink-muted); border-style: dashed; }
.deadline-select:disabled { opacity: .7; cursor: not-allowed; }
/* Chip de arquivo: vazio = tracejado, área de soltar/clicar (o input cobre
   o chip); cheio = link pro arquivo. */
.file-chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.file-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.2;
  border: 1px dashed var(--color-border);
  color: var(--color-ink-muted);
  cursor: pointer;
  overflow: hidden;
}
.file-chip input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.file-chip:hover, .file-chip:focus-within { border-color: var(--color-tool-indigo); color: var(--color-tool-indigo); border-style: solid; }
.file-chip.is-filled {
  border: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
  color: var(--color-ink);
  text-decoration: none;
}
.file-chip.is-filled:hover { border-color: var(--color-ink); }
.file-chip.is-filled::after { content: '↗'; color: var(--color-ink-muted); font-size: 11px; }
.file-chip__swap {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 3px 4px;
  font-size: 11px;
  color: var(--color-ink-muted);
  cursor: pointer;
  overflow: hidden;
}
.file-chip__swap:hover, .file-chip__swap:focus-within { color: var(--color-tool-indigo); text-decoration: underline; }
.file-chip__swap input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
/* Select de estado na linha: salva no change (htmx); a cor diz onde está */
.deadline-select {
  min-height: 30px;
  padding: 3px 26px 3px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-paper-white);
  font: inherit;
  font-size: var(--text-label);
  color: var(--color-ink);
  max-width: 100%;
}
.deadline-select:hover { border-color: var(--color-ink); }
.deadline-select:focus-visible { outline: 2px solid var(--color-tool-indigo); outline-offset: 1px; }
/* Cor da borda diz onde a linha está: cinza tracejado = nada feito,
   indigo = em andamento, verde = concluído, cinza = fora do jogo. */
.deadline-select.is-pendente, .deadline-select.is-empty { color: var(--color-ink-muted); border-style: dashed; }
.deadline-select.is-solicitada, .deadline-select.is-boleto_emitido, .deadline-select.is-encaminhado_cliente {
  border-color: color-mix(in oklch, var(--color-tool-indigo) 55%, white);
  box-shadow: inset 3px 0 0 var(--color-tool-indigo);
  padding-left: 11px;
}
.deadline-select.is-paga, .deadline-select.is-enviado, .deadline-select.is-aprovado {
  color: var(--color-status-success);
  border-color: color-mix(in oklch, var(--color-status-success) 45%, white);
  box-shadow: inset 3px 0 0 var(--color-status-success);
  padding-left: 11px;
}
.deadline-select.is-nao_aplicavel { color: var(--color-ink-muted); background: var(--color-surface-subtle); }
form.htmx-request .deadline-select { opacity: 0.5; }
.deadline-th-state { min-width: 150px; }
/* Painel "Responsáveis por estande" acima da matriz */
.responsaveis > summary { list-style: none; display: inline-flex; align-items: center; gap: var(--space-xs); cursor: pointer; }
.responsaveis > summary::-webkit-details-marker { display: none; }

/* Disclosure cujo gatilho é um botão, com painel de campos abaixo —
   "Cadastrar no estande/cliente" da Revisão de cadastro. Sem a largura
   travada, o <summary> vira uma barra do tamanho do container e some a
   leitura de botão. */
.disclosure-btn > summary { list-style: none; display: inline-flex; width: max-content; cursor: pointer; }
.disclosure-btn > summary::-webkit-details-marker { display: none; }
.disclosure-btn__painel {
  align-items: flex-end;
  width: max-content;
  max-width: 100%;
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.disclosure-btn__painel .field > span { font-size: var(--text-label); font-weight: 500; color: var(--color-ink-muted); }
.disclosure-btn__painel select { min-width: 190px; }
.disclosure-btn__nota { flex-basis: 100%; font-size: var(--text-label); color: var(--color-ink-muted); }
.responsaveis__pendente { font-size: var(--text-label); font-weight: 500; color: var(--color-status-warning); }
.responsaveis__grid {
  display: grid;
  grid-template-columns: minmax(120px, max-content) minmax(180px, 1fr) minmax(180px, 1fr);
  gap: var(--space-2xs) var(--space-md);
  align-items: center;
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-paper-white);
  max-width: 720px;
}
.responsaveis__head { font-size: var(--text-label); color: var(--color-ink-muted); }
.responsaveis__nome { font-weight: 500; }
.responsaveis__grid form { display: flex; gap: var(--space-2xs); align-items: center; }
.responsaveis__grid .deadline-select { width: 100%; }
@media (max-width: 640px) {
  .responsaveis__grid { grid-template-columns: 1fr; max-width: none; }
  .responsaveis__head { display: none; }
  .responsaveis__nome { margin-top: var(--space-xs); }
}
.data-table tbody tr:target { background: color-mix(in oklch, var(--color-signal-yellow) 22%, var(--color-paper-white)); }
.data-table tbody tr:target td { scroll-margin-top: 96px; }
.campaign-toolbelt__icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
}
.campaign-toolbelt__icon svg {
  width: 100%;
  height: 100%;
}
.campaign-link-preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
  min-width: min(100%, 420px);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid color-mix(in oklch, var(--color-tool-indigo) 22%, white);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-tool-indigo) 7%, white);
}
.campaign-link-preview__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.campaign-link-preview__copy span {
  font-size: var(--text-label);
  color: var(--color-ink-muted);
  max-width: 36ch;
}
.campaign-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-surface-subtle) 45%, white);
}
/* Com gente marcada, a barra acompanha a rolagem: o botão que dispara e-mail real para N
   pessoas não pode ficar a trinta linhas de distância de quem está marcando (21/10). */
/* Procurar à esquerda, agir à direita, numa linha só. "Refinar seleção" fica no meio e abre
   em largura total, abaixo (Raphael, 21/10: filtro, aviso e ação tinham virado três linhas de
   pílulas iguais). */
.campanha-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.campanha-barra__busca { flex: 1 1 260px; }
/* Linha própria, abaixo da busca, aberto ou fechado: antes o resumo pulava da direita do campo
   para baixo dele ao abrir, e o olho perdia o controle (Raphael, 21/10). */
.campanha-barra__refinar { flex: 0 0 100%; order: 3; }
.page-header__acoes { display: flex; align-items: center; gap: var(--space-sm); }
/* Dez campos com dez larguras diferentes (349, 200, 160, 240…): nenhuma coluna alinhava com a
   de cima, e era isso que fazia a área parecer bagunçada (medição de 21/10). */
.refino-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.refino-grade .field { min-width: 0; }
.refino-grade select,
.refino-grade input { width: 100%; }

/* As entradas da operação (pedidos de saída, candidatos do site, quem levantou a mão) viram
   uma linha de chips; o painel aberto toma a largura toda, abaixo deles (21/10). */
.entradas-faixa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-md); }
.entradas-faixa:empty { display: none; }
.entradas-faixa__rotulo {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}
.entrada > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--text-label);
  white-space: nowrap;
}
.entrada > summary::-webkit-details-marker { display: none; }
.entrada > summary { background: var(--color-surface-subtle); }
.entrada > summary::before { content: "↗ "; color: var(--color-ink-muted); }
.entrada[open] { flex-basis: 100%; }
.entrada[open] > summary { background: var(--color-surface-subtle); margin-bottom: var(--space-xs); }
.entrada .panel { margin-bottom: 0 !important; }

/* Sem ninguém marcado, o disparo é uma linha: canal, cliente e botão ocupavam 231px parados
   entre os filtros e a lista (medição de 21/10). */
.campaign-bulk-bar:not(.campaign-bulk-bar--ativa) .campaign-bulk-bar__controls { display: none; }
.campaign-bulk-bar:not(.campaign-bulk-bar--ativa) {
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-ink-muted);
}
.campaign-bulk-bar:not(.campaign-bulk-bar--ativa) [data-disparo-contagem] { font-weight: 400; }
.campaign-bulk-bar--ativa {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: var(--color-paper-white);
  box-shadow: 0 -2px 12px rgb(0 0 0 / 0.08);
}
.campaign-bulk-bar [data-disparo-contagem] { font-variant-numeric: tabular-nums; }
.campaign-bulk-bar__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.campaign-bulk-bar__copy span {
  font-size: var(--text-label);
  color: var(--color-ink-muted);
  max-width: 48ch;
}
.campaign-bulk-bar__controls {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-sm);
}
.campaign-group-row td {
  padding: 0;
  border-bottom: 1px solid var(--color-border);
}
.campaign-group-row__content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  align-items: baseline;
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in oklch, var(--color-surface-subtle) 68%, white);
}
.campaign-group-row__content strong {
  font-size: var(--text-label);
}
.campaign-group-row__content span {
  font-size: var(--text-label);
  color: var(--color-ink-muted);
}
.campaign-candidate-cell {
  min-width: 340px;
}
.campaign-candidate {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}
/* O selo do Portal mora sobre a foto, e a foto pode ter overflow:hidden — daí o invólucro (23/10).
   Serve a toda lista de pessoas: o include é talentos/_selo_portal.html. */
.foto-com-selo { position: relative; display: inline-flex; flex-shrink: 0; }
.portal-selo {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full, 999px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-status-success);
  color: var(--color-paper-white);
  border: 2px solid var(--color-paper-white);
}
/* Acesso criado e nunca usado não é a mesma coisa que estar no Portal: selo vazado. */
.portal-selo--nao-entrou {
  background: var(--color-paper-white);
  color: var(--color-ink-muted);
  border-color: var(--color-border);
}
.campaign-candidate__photo,
.campaign-candidate__photo--placeholder {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full, 999px);
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
}
.campaign-candidate__photo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.campaign-candidate__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.campaign-candidate__photo:hover img,
.campaign-candidate__photo:focus-visible img {
  border-color: var(--color-void-black);
}
.campaign-candidate__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.campaign-candidate__name {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .campaign-candidate-cell {
    min-width: 0;
  }
  .reports-overview__groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .report-tabs__list {
    gap: var(--space-sm);
  }
  /* Rolagem horizontal sem barra escondia metade das abas sem nenhuma pista
     visual de que havia mais. Quebrar linha mostra todas. */
  .tabs {
    flex-wrap: wrap;
    gap: 0 var(--space-md);
    overflow-x: visible;
  }
  .tab {
    padding-inline: 0;
  }
  .campaign-toolbelt__actions {
    align-items: stretch;
    width: 100%;
  }
  .finance-section-heading {
    align-items: stretch;
  }
  .campaign-link-preview {
    min-width: 0;
  }
  .campaign-candidate-cell {
    min-width: 280px;
  }
}

@media (max-width: 760px) {
  .review-focus__facts {
    grid-template-columns: 1fr;
  }
  .review-support-card__form {
    align-items: stretch;
  }
  .review-support-card__form > * {
    width: 100%;
  }
  .review-suggestion {
    flex-direction: column;
    align-items: stretch;
  }
  .review-suggestion form,
  .review-suggestion .btn {
    width: 100%;
  }
  .reports-overview {
    gap: var(--space-md);
  }
  .reports-overview__groups {
    grid-template-columns: 1fr;
  }
  .reports-overview__group {
    padding: var(--space-sm);
  }
  .report-tabs {
    margin-top: var(--space-md);
  }
  .report-tabs__list {
    gap: var(--space-xs) var(--space-sm);
    align-items: flex-start;
  }
  .report-tabpanel {
    gap: var(--space-md);
  }
  .report-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .report-coverage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .data-table-wrap {
    overflow: visible;
  }
  .data-table-wrap .data-table,
  .data-table-wrap .data-table thead,
  .data-table-wrap .data-table tbody,
  .data-table-wrap .data-table tr,
  .data-table-wrap .data-table th,
  .data-table-wrap .data-table td {
    display: block;
    width: 100%;
  }
  .data-table-wrap .data-table thead {
    display: none;
  }
  .data-table-wrap .data-table tbody {
    display: grid;
    gap: var(--space-sm);
  }
  .data-table-wrap .data-table tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    background: var(--color-paper-white);
  }
  .data-table-wrap .data-table td {
    border: 0;
    padding: 0;
  }
  .data-table-wrap .data-table td + td {
    margin-top: var(--space-sm);
  }
  .data-table-wrap .data-table {
    min-width: 0;
  }
  .data-table-wrap .data-table td[data-label="Foto"]::before,
  .data-table-wrap .data-table td[data-label="Selecionar"]::before {
    display: none;
  }
  .data-table-wrap .data-table td[data-label="Foto"],
  .data-table-wrap .data-table td[data-label="Selecionar"] {
    display: inline-block;
    width: auto;
    vertical-align: middle;
    margin-right: var(--space-sm);
  }
  .data-table-wrap .data-table td[data-label="Foto"] + td,
  .data-table-wrap .data-table td[data-label="Selecionar"] + td {
    margin-top: 0;
  }
  /* Matrizes de taxas/documentos no celular: rótulo e valor na mesma
     linha (36 linhas × 8 células empilhadas davam ~20k px). O nome fica
     em bloco e sem rótulo — é o título do card. */
  .data-table-wrap .data-table--compact td { display: flex; align-items: baseline; gap: var(--space-sm); }
  .data-table-wrap .data-table--compact td + td { margin-top: var(--space-2xs); }
  .data-table-wrap .data-table--compact td::before { flex: 0 0 96px; margin-bottom: 0 !important; }
  .data-table-wrap .data-table--compact td.deadline-td-name { display: block; max-width: none; font-weight: 600; }
  .data-table-wrap .data-table--compact td.deadline-td-name::before { display: none; }
  .data-table-wrap .data-table--compact td.deadline-td-name .deadline-trail { font-weight: 400; }
  .data-table-wrap .data-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: var(--text-label);
    color: var(--color-ink-muted);
    font-family: var(--font-sans);
  }
  .campaign-bulk-bar {
    align-items: stretch;
  }
  .campaign-bulk-bar__controls {
    width: 100%;
  }
  .campaign-bulk-bar__controls > * {
    width: 100%;
  }
  .finance-row-actions__secondary {
    flex-direction: column;
    gap: 4px;
  }
  .campaign-candidate {
    align-items: center;
  }
}

@media (max-width: 640px) {
  .review-overview__header,
  .review-section__header,
  .review-focus__hero-header,
  .review-queue__header,
  .review-match-card {
    flex-direction: column;
    align-items: stretch;
  }
  .review-summary-badge {
    width: fit-content;
  }
  .review-person {
    align-items: stretch;
  }
  .review-person__actions > * {
    width: 100%;
  }
  .review-person__actions .btn {
    width: 100%;
  }
  .merge-compare {
    grid-template-columns: 1fr;
  }
  .merge-compare::before {
    display: none;
  }
  .merge-compare__connector {
    position: static;
    transform: none;
    justify-self: center;
    margin: calc(var(--space-xs) * -1) 0;
  }
  .report-section {
    padding: var(--space-md);
  }
  .reports-overview__group-header {
    flex-direction: column;
    align-items: stretch;
  }
  .reports-overview__chip {
    min-width: 0;
    width: 100%;
  }
  .report-facts {
    grid-template-columns: 1fr;
  }
  .report-coverage {
    grid-template-columns: 1fr;
  }
}

/* Auditoria de desempenho — console administrativo, não dashboard genérico. */
.performance-console { max-width: 1440px; }
.performance-console__header { align-items: flex-end; }
.performance-console__header .page-header__meta { max-width: 78ch; }
.performance-console__notice { display: grid; justify-items: end; gap: var(--space-sm); max-width: 34ch; margin: 0; }
.performance-console__notice p { max-width: 30ch; margin: 0; color: var(--color-ink-muted); font-size: var(--text-label); text-align: right; }
.performance-console__stamp { margin: var(--space-sm) 0 0; color: var(--color-ink-muted); font-size: var(--text-label); font-variant-numeric: tabular-nums; }
.performance-filters { align-items: end; margin-bottom: var(--space-xl); }
.performance-filters .field { min-width: 148px; }
.performance-cuts__start, .performance-cuts__compare, .performance-cuts__active { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border); }
.performance-cuts__start .field, .performance-cuts__compare .field { min-width: min(100%, 240px); flex: 1 1 240px; }
.performance-cuts__active { align-items: center; justify-content: space-between; }
.performance-cuts__active strong, .performance-cuts__active span { display: block; }
.performance-cuts__active span, .performance-cuts__hint, .performance-cuts__warning { color: var(--color-ink-muted); font-size: var(--text-label); }
.performance-cuts__warning { margin: 0 0 var(--space-md); color: var(--color-status-warning); }
.performance-sample-warning { color: var(--color-status-warning); font-size: var(--text-label); font-weight: 600; }
.performance-reading { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 4px solid var(--color-ink); border-bottom: 1px solid var(--color-border); }
.performance-reading > div { display: grid; align-content: start; gap: var(--space-xs); min-height: 126px; padding: var(--space-md); border-right: 1px solid var(--color-border); }
.performance-reading > div:last-child { border-right: 0; }
.performance-reading span { color: var(--color-ink-muted); font-size: var(--text-label); }
.performance-reading strong { font-size: clamp(1.65rem, 3vw, 2.65rem); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.performance-reading strong small { font-family: var(--font-mono); font-size: .68em; font-weight: 400; letter-spacing: 0; }
.performance-section { margin-top: var(--space-xl); border-top: 4px solid var(--color-ink); }
.performance-section__heading { display: flex; justify-content: space-between; gap: var(--space-lg); padding: var(--space-md) 0; }
.performance-section__heading h2 { margin: 0; font-size: var(--text-title); }
.performance-section__heading p { max-width: 65ch; margin: var(--space-xs) 0 0; color: var(--color-ink-muted); font-size: var(--text-label); }
.performance-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.performance-table td:first-child { min-width: 270px; white-space: normal; }
.performance-table a { color: var(--color-ink); text-decoration: none; }
.performance-table a:hover { color: var(--color-accent); text-decoration: none; }
.performance-table small { display: block; max-width: 60ch; overflow: hidden; color: var(--color-ink-muted); font-family: var(--font-mono); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.performance-table code { font-size: .76rem; }
.performance-share { position: relative; display: block; min-width: 140px; padding: 2px 0 2px 6px; font-variant-numeric: tabular-nums; }
.performance-share i { position: absolute; inset: 0 auto 0 0; background: color-mix(in oklch, var(--color-tool-indigo) 22%, white); }
.performance-share b { position: relative; font-weight: 400; }
/* Cockpit: a leitura ocupa uma janela só. Os painéis rolam por dentro, a
   página não rola, e o cabeçalho de cada tabela fica fixo enquanto se varre. */
.performance-console--cockpit .performance-reading > div { min-height: 92px; padding: var(--space-sm) var(--space-md); }
.performance-console--cockpit .performance-reading strong { font-size: clamp(1.35rem, 2.2vw, 2rem); }
.performance-console--cockpit .performance-filters { margin-bottom: var(--space-md); }
/* Piso calibrado na máquina real da equipe: 1366x768, onde a janela útil fica
   perto de 620px depois da barra do navegador. Um piso de 620px empurrava o
   deck para fora da tela justamente em 83% dos acessos da Door. */
.performance-console--cockpit { display: flex; flex-direction: column; height: calc(100vh - 80px); min-height: 460px; }
.performance-cockpit { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); gap: var(--space-lg); margin-top: var(--space-lg); flex: 1 1 auto; min-height: 340px; }
.performance-cockpit__wide { grid-column: 1 / -1; }
.performance-cockpit--config { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.config-table tr.config-group th { padding-top: var(--space-md); background: var(--color-paper-white); color: var(--color-ink-muted); font-size: var(--text-label); text-align: left; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--color-ink); }
.config-table td:first-child { white-space: normal; }
.drill-table .performance-share { min-width: 88px; }
.drill-toggle { display: flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.drill-toggle:hover { color: var(--color-accent); }
.drill-chevron { width: 13px; height: 13px; transform: rotate(90deg); transition: transform .15s ease; }
.drill-table tbody.is-fechado .drill-chevron { transform: rotate(0deg); }
.drill-table tbody.is-fechado .drill-detalhe { display: none; }
.drill-table .drill-detalhe > td { padding: 0 0 var(--space-md) var(--space-lg); white-space: normal; }
.drill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-md); }
.drill-grid h3 { margin: 0 0 var(--space-xs); color: var(--color-ink-muted); font-size: var(--text-label); text-transform: uppercase; letter-spacing: .05em; }
.drill-grid ul { margin: 0; padding: 0; list-style: none; }
.drill-grid li { display: flex; justify-content: space-between; gap: var(--space-sm); padding: 3px 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-label); }
.drill-grid li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drill-grid li b { font-variant-numeric: tabular-nums; }
.drill-grid .drill-vazio { display: block; color: var(--color-ink-muted); border-bottom: 0; }
.config-group__toggle { display: flex; align-items: center; gap: 6px; width: 100%; padding: 0; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; }
.config-group__toggle:hover { color: var(--color-accent); }
.config-group__toggle span { color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.config-group__falta { color: var(--color-status-warning); font-weight: 600; }
.config-group__chevron { width: 13px; height: 13px; transform: rotate(90deg); transition: transform .15s ease; }
.config-table tbody.is-fechado .config-group__chevron { transform: rotate(0deg); }
.config-table tbody.is-fechado tr:not(.config-group) { display: none; }
a.config-tag--edit { text-decoration: none; }
a.config-tag--edit:hover { background: var(--color-tool-indigo); color: var(--color-paper-white); }
.config-table small { display: block; color: var(--color-ink-muted); font-family: var(--font-mono); font-size: .7rem; }
.performance-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; overflow: hidden; border-top: 4px solid var(--color-ink); }
.performance-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) 0 var(--space-md); }
.performance-panel__head h2 { margin: 0; font-size: var(--text-title); }
.performance-panel__head p { max-width: 58ch; margin: 0; color: var(--color-ink-muted); font-size: var(--text-label); }
.performance-panel__body { overflow: auto; min-height: 0; border-bottom: 1px solid var(--color-border); }
.performance-cockpit .data-table { min-width: 0; }
.performance-cockpit .performance-table td:first-child { min-width: 0; max-width: 34ch; }
.performance-cockpit .performance-table td:first-child code { overflow-wrap: anywhere; }
.performance-cockpit .performance-table small { max-width: 34ch; }
.performance-cockpit__side .performance-table td:first-child { min-width: 0; }
.performance-cockpit__side .performance-table small { max-width: 32ch; }
.performance-cockpit__wide .performance-panel__body { max-height: 46vh; }
.performance-panel__body .data-table-wrap { overflow: visible; }
.performance-panel__body thead th { position: sticky; top: 0; z-index: 1; background: var(--color-paper-white); box-shadow: inset 0 -1px 0 var(--color-border); }
.performance-cockpit .performance-table td { padding-top: 7px; padding-bottom: 7px; }

.performance-drawer { display: grid; grid-template-rows: auto minmax(0, 1fr); flex: 0 0 auto; min-height: 0; max-height: 50vh; margin-top: var(--space-md); border-top: 4px solid var(--color-ink); }
.performance-drawer__body { overflow: auto; min-height: 0; }
.performance-drawer > summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) 0; cursor: pointer; font-size: var(--text-title); font-weight: 600; }
.performance-drawer > summary::-webkit-details-marker { display: none; }
.performance-drawer > summary span { color: var(--color-ink-muted); font-size: var(--text-label); font-weight: 400; }
.performance-drawer[open] > summary { border-bottom: 1px solid var(--color-border); }
.performance-drawer__hint { max-width: 58ch; margin: var(--space-sm) 0 0; color: var(--color-ink-muted); font-size: var(--text-label); }
.performance-drawer .performance-cuts__start, .performance-drawer .performance-cuts__compare, .performance-drawer .performance-cuts__active { display: grid; gap: var(--space-sm); }
@media (max-width: 1180px) {
  .performance-console--cockpit { height: auto; min-height: 0; }
  .performance-cockpit { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .performance-drawer { max-height: none; }
  .performance-panel__body { min-height: 240px; max-height: min(70vh, 620px); }
}
@media (max-width: 760px) {
  /* Empilhada, cada linha custa ~480px: solta, a tela viraria 22 rolagens.
     O painel continua rolando por dentro; o thead já está oculto aqui. */
  .performance-panel__body { max-height: min(72vh, 560px); }
  .performance-panel__body thead th { position: static; }
}
.config-form { display: grid; gap: var(--space-lg); padding-bottom: var(--space-lg); }
.config-field { display: grid; gap: 6px; max-width: 640px; }
.config-field > label { font-size: var(--text-label); font-weight: 600; }
.config-field__help, .config-field__origin { margin: 0; color: var(--color-ink-muted); font-size: var(--text-label); }
.config-field__origin { font-variant-numeric: tabular-nums; }
.config-switch { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--text-label); }
.config-switch input { width: 18px; height: 18px; }
/* A ação fica colada no pé do painel: o formulário rola por dentro e o botão
   não pode sumir abaixo da dobra. */
.config-form__actions { position: sticky; bottom: 0; padding: var(--space-sm) 0; background: var(--color-paper-white); border-top: 1px solid var(--color-border); }
.config-ambiente { display: inline-block; margin-left: var(--space-sm); padding: 2px 10px; border-radius: var(--radius-sm); background: var(--color-ink); color: var(--color-paper-white); font-size: var(--text-label); font-weight: 600; vertical-align: middle; }
.config-ambiente--dev { background: var(--color-status-warning); }
.config-tag { display: inline-block; padding: 1px 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-ink-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.config-tag--edit { border-color: var(--color-tool-indigo); color: var(--color-tool-indigo); }
.query-frequencia { font-variant-numeric: tabular-nums; font-weight: 400; }
.query-frequencia--alta { color: var(--color-status-warning); font-weight: 700; }
.performance-flag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--color-status-danger); color: var(--color-paper-white); font-size: var(--text-label); font-weight: 600; }
.performance-delta { font-variant-numeric: tabular-nums; }
.performance-delta--melhora { color: var(--color-status-success); font-weight: 600; }
.performance-delta--piora { color: var(--color-status-danger); font-weight: 600; }
.performance-cuts__confirm { flex: 1 1 240px; color: var(--color-status-danger); font-size: var(--text-label); font-weight: 600; }
.performance-table thead a { display: inline-flex; gap: 4px; color: var(--color-ink); text-decoration: none; border-bottom: 1px dotted var(--color-border); }
.performance-table thead a:hover { color: var(--color-accent); border-bottom-color: currentColor; }
.performance-table th[aria-sort] a { border-bottom: 2px solid var(--color-ink); font-weight: 700; }
.performance-table th[aria-sort] a::after { content: " ↓"; }
.performance-filters--dois { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
.performance-console--cockpit .filter-chips { margin-bottom: var(--space-md); }
.performance-sql { overflow: auto; margin: 0; padding: var(--space-lg); background: var(--color-ink); color: var(--color-paper-white); border-top: 4px solid var(--color-tool-indigo); font-size: .8rem; line-height: 1.6; white-space: pre-wrap; }
.performance-sql code { font-family: var(--font-mono); }

@media (max-width: 960px) {
  .performance-reading { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .performance-reading > div:nth-child(3) { border-right: 0; }
  .performance-reading > div:nth-child(-n + 3) { border-bottom: 1px solid var(--color-border); }
}
@media (max-width: 640px) {
  .performance-console__header, .performance-section__heading { display: grid; }
  .performance-console__notice { justify-items: start; max-width: none; text-align: left; }
  .performance-console__notice p { text-align: left; }
  .performance-cuts__start, .performance-cuts__compare { align-items: stretch; }
  .performance-cuts__active { align-items: stretch; }
  .performance-reading { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .performance-reading > div { min-height: 104px; border-bottom: 1px solid var(--color-border); }
  .performance-reading > div:nth-child(odd) { border-right: 1px solid var(--color-border); }
  .performance-reading > div:nth-child(even) { border-right: 0; }
  .performance-reading > div:last-child { grid-column: 1 / -1; border-bottom: 0; }
}

/* Filtro em chips (ex.: fila de triagem por estado) --------------------------- */

.filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); }
/* Dentro da barra de ações da campanha os chips dividem a linha com os botões, em vez de
   empurrá-los para uma linha só deles (21/10). */
.filter-chips--inline { flex: 0 1 auto; margin-bottom: 0; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-ink);
  background: var(--color-paper-white);
}
.filter-chip:hover { background: var(--color-surface-subtle); text-decoration: none; }
.filter-chip[aria-current='true'] {
  background: var(--color-void-black);
  border-color: var(--color-void-black);
  color: var(--color-paper-white);
}
.filter-chip .count { opacity: 0.7; font-family: var(--font-mono); font-size: 0.75rem; }

/* Dialog flutuante nativo (<dialog>) — compartilhado entre páginas que usam o
   mesmo modelo de painel flutuante de treinamentos_evento.html. */
.training-dialog {
  width: min(560px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.training-dialog--wide {
  width: min(900px, calc(100vw - 48px));
}
.training-dialog::backdrop {
  background: rgba(0, 0, 0, 0.24);
}
.training-edit-card {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: white;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  max-height: min(78vh, 760px);
  overflow-y: auto;
  margin: 0;
}
.training-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}
.training-dialog__header > :first-child {
  min-width: 0;
}
.training-dialog__header .training-action-btn,
.training-edit-head .training-action-btn {
  flex: 0 0 auto;
  margin: -4px -4px 0 0;
}
/* A barra de ações do formulário do diálogo gruda no rodapé. O sticky precisa
   estar na .cluster: aplicado no .btn ele nunca prendia nada, porque o bloco
   contentor do botão é a propria barra, que rola junto. */
.training-edit-card > form > .cluster {
  position: sticky;
  bottom: calc(var(--space-md) * -1);
  z-index: 1;
  padding-block: var(--space-sm);
  border-top: 1px solid var(--color-border);
  background: var(--color-paper-white);
}
/* Valor e o rotulo que o qualifica ("1.983,00 no orcamento") nao se separam:
   quebrar entre os dois faz o rotulo parecer de outra linha. */
.valor-rotulado { white-space: nowrap; }
/* Rótulo de um valor só-leitura que ocupa o lugar de um campo. */
.field__label-static {
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-ink);
}
/* Kicker e título do diálogo são duas linhas, não uma frase corrida. */
.training-kicker { display: block; }
/* Texto de apoio dentro do diálogo respeita a medida de leitura do DESIGN.md. */
.training-edit-card .visually-quiet { max-width: 58ch; }
/* Barra de ação que acompanha a rolagem de um painel longo. Precisa de fundo
   próprio: sem ele o conteúdo da tabela passa por baixo dos botões. */
.panel-actionbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  background: var(--color-paper-white);
}
.panel-actionbar--end { justify-content: flex-end; }
/* No mobile o modal centralizado de 78vh desperdicava a faixa inferior da tela
   e ainda cortava formularios longos. Vira folha colada no rodape: mais altura
   util, alcance do polegar e a barra de acao ja sticky no lugar certo. */
@media (max-width: 760px) {
  .training-dialog,
  .training-dialog--wide {
    width: 100%;
    max-width: 100%;
    margin: auto auto 0;
  }
  .training-edit-card {
    max-height: 92vh;
    max-height: 92dvh;
    border-width: 1px 0 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.16);
  }
}

.training-edit-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  align-items: flex-start;
}
.training-edit-head strong {
  font-size: 1rem;
  line-height: 1.25;
}
.training-kicker {
  font-size: var(--text-label);
  color: var(--color-ink-muted, #666);
  font-weight: 600;
}
.training-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full, 999px);
  background: transparent;
  color: var(--color-ink-muted, #666);
  cursor: pointer;
}
@media (pointer: coarse) {
  .training-action-btn {
    width: 44px;
    height: 44px;
  }
}
.training-action-btn:hover {
  background: var(--color-surface-subtle);
  color: var(--color-ink);
}
.training-action-btn svg {
  width: 16px;
  height: 16px;
}
.training-action-btn--danger {
  color: var(--color-status-danger);
}
.training-action-btn--danger:hover {
  background: color-mix(in oklch, var(--color-status-danger) 10%, white);
}

.subfilters-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: var(--space-md);
  align-items: end;
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-surface-subtle) 45%, white);
}
.subfilters-bar__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.triagem-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin: calc(var(--space-lg) * -1) 0 var(--space-sm);
}
.triagem-toolbar__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}
.triagem-toolbar__hint {
  font-size: var(--text-label);
}

/* Cartão / painel -------------------------------------------------------------- */

.panel {
  background: var(--color-paper-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.panel + .panel { margin-top: var(--space-md); }
/* O h2 e o subtitulo do painel eram style= inline em ~20 templates (02/10). */
.panel__title {
  font-size: var(--text-title);
  margin-bottom: var(--space-sm);
}
.panel__meta {
  margin-bottom: var(--space-md);
  font-size: var(--text-label);
  color: var(--color-ink-muted);
}
.cluster > .panel + .panel { margin-top: 0; } /* na .cluster o espaço é o gap */

.review-overview {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.review-overview__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
}
.review-overview__step {
  margin: 0 0 4px;
  font-size: var(--text-label);
  color: var(--color-accent);
  font-weight: 600;
}
.review-overview__title,
.review-focus__title {
  margin: 0;
  font-size: var(--text-title);
  font-weight: 600;
}
.review-overview__copy {
  max-width: 60ch;
}
.review-overview__actions {
  display: flex;
  justify-content: flex-end;
}
.review-queue__header,
.review-section__header,
.review-focus__hero-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
}
.review-queue__header {
  margin-bottom: var(--space-md);
}
.review-queue__header h3,
.review-section__header h3,
.review-support-card h4,
.review-decision-card h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.review-queue__pagination {
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-md);
}
.review-row-stack > * + * {
  margin-top: var(--space-xs);
}
.review-queue--flat {
  padding-top: var(--space-md);
}
.review-inline-wrap {
  border-radius: var(--radius-md);
}
.review-inline-table th:first-child,
.review-inline-table td:first-child {
  width: 46%;
}
.review-inline-row td {
  vertical-align: top;
}
.review-inline-row.is-selected td {
  background: color-mix(in oklch, var(--color-tool-indigo) 10%, white);
}
.review-inline-row__primary {
  border-left: 3px solid transparent;
}
.review-inline-row.is-selected .review-inline-row__primary {
  border-left-color: var(--color-tool-indigo);
}
.review-person {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}
.review-person__body {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-xs);
}
.review-person__name {
  font-size: 1.05rem;
  font-weight: 600;
}
.review-person__meta {
  gap: var(--space-xs) var(--space-sm);
}
.review-person__actions {
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}
.review-suggestions {
  min-width: 0;
}
.review-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
}
.review-suggestion + .review-suggestion {
  border-top: 1px solid color-mix(in oklch, var(--color-border) 75%, white);
}
.review-suggestion__identity {
  min-width: 0;
  flex: 1 1 auto;
}
.review-focus__hero {
  background: linear-gradient(180deg, color-mix(in oklch, var(--color-tool-indigo) 6%, white) 0%, white 72%);
}
.review-focus__copy,
.review-focus__next {
  max-width: 68ch;
}
.review-focus__next {
  margin-top: var(--space-sm);
}
.review-focus__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
}
.review-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}
.review-fact__label {
  font-size: var(--text-label);
  color: var(--color-ink-muted);
}
.review-fact__value {
  font-size: 0.95rem;
}
.review-focus__signals {
  margin-top: var(--space-md);
}
.review-summary-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: var(--text-label);
  font-weight: 600;
  border: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
  color: var(--color-ink);
}
.review-summary-badge.is-success {
  background: color-mix(in oklch, var(--color-status-success) 12%, white);
  color: var(--color-status-success);
  border-color: color-mix(in oklch, var(--color-status-success) 25%, white);
}
.review-summary-badge.is-warning {
  background: color-mix(in oklch, var(--color-status-warning) 12%, white);
  color: var(--color-status-warning);
  border-color: color-mix(in oklch, var(--color-status-warning) 25%, white);
}
.review-summary-badge.is-danger {
  background: color-mix(in oklch, var(--color-status-danger) 10%, white);
  color: var(--color-status-danger);
  border-color: color-mix(in oklch, var(--color-status-danger) 22%, white);
}
.review-summary-badge.is-accent {
  background: color-mix(in oklch, var(--color-tool-indigo) 10%, white);
  color: var(--color-tool-indigo);
  border-color: color-mix(in oklch, var(--color-tool-indigo) 22%, white);
}
.review-decision-grid,
.review-support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
.review-decision-card,
.review-support-card,
.review-match-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-surface-subtle) 45%, white);
  padding: var(--space-md);
}
.review-decision-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.review-decision-card--primary {
  background: linear-gradient(180deg, color-mix(in oklch, var(--color-signal-yellow) 18%, white) 0%, color-mix(in oklch, var(--color-signal-yellow) 8%, white) 100%);
}
.review-support-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.review-support-card__copy {
  max-width: 58ch;
}
.review-support-card__form {
  align-items: flex-end;
}
.review-support-card__empty {
  margin-top: var(--space-xs);
}
.review-support-card__empty-state {
  padding: var(--space-md);
  background: transparent;
  border: 1px dashed var(--color-border);
}
.review-match-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
}
.review-manual-search {
  margin-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
}
.review-manual-search summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.review-manual-search summary::-webkit-details-marker {
  display: none;
}
.review-manual-search__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.event-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}
.event-stat {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background: color-mix(in oklch, var(--color-surface-subtle) 55%, white);
}
.event-stat__label {
  display: block;
  font-size: var(--text-label);
  color: var(--color-ink-muted);
}
.event-stat__value {
  display: block;
  margin-top: 2px;
  font-size: var(--text-title);
  font-weight: 600;
  color: var(--color-ink);
}

/* Credenciamento do evento (25/09): barra de envio por cliente. */
.cred-evento__envio { display: flex; align-items: center; gap: var(--space-xs); white-space: nowrap; }
.cred-evento__barra { display: block; width: 90px; height: 8px; border-radius: 999px; background: var(--color-surface-subtle); overflow: hidden; flex: none; }
.cred-evento__barra > span { display: block; height: 100%; background: var(--color-status-success); }
.client-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.client-group__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
}
.client-group__title {
  margin: 0;
  font-size: var(--text-title);
  font-weight: 600;
}
.client-group__meta {
  margin-top: 4px;
  font-size: var(--text-label);
  color: var(--color-ink-muted);
}
.event-record {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-surface-subtle) 35%, white);
  overflow: hidden;
}
.event-record[open] {
  background: var(--color-paper-white);
}
.event-record__summary {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  cursor: pointer;
  padding: var(--space-md);
}
.event-record__summary::-webkit-details-marker {
  display: none;
}
.event-record__headline {
  min-width: 0;
}
.event-record__headline h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.event-record__meta {
  margin-top: 4px;
  font-size: var(--text-label);
  color: var(--color-ink-muted);
}
.event-record__badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
}
.event-record__body {
  padding: 0 var(--space-md) var(--space-md);
 }

.attendance-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-surface-subtle) 45%, white);
}
.attendance-intro__body {
  margin: 0;
  max-width: 72ch;
  color: var(--color-ink-muted);
}
.attendance-board {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-paper-white);
}
.attendance-board__head,
.attendance-row__summary {
  display: grid;
  grid-template-columns:
    minmax(280px, 2.1fr)
    minmax(150px, 1fr)
    minmax(170px, 1fr)
    minmax(220px, 1.2fr)
    24px;
  gap: var(--space-xs) var(--space-md);
  align-items: center;
}
.attendance-board__head {
  padding: var(--space-xs) var(--space-md);
  background: var(--color-paper-white);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-ink-muted);
}
.attendance-row {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-paper-white);
}
.attendance-row:last-child {
  border-bottom: none;
}
.attendance-row:nth-child(even) {
  background: var(--color-surface-subtle);
}
.attendance-row[open] {
  background: var(--color-paper-white);
}
.attendance-row__summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-sm) var(--space-md);
}
.attendance-row__summary::-webkit-details-marker {
  display: none;
}
.attendance-row__person {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}
.attendance-row__person-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.attendance-row__person-copy strong {
  font-size: 0.98rem;
  line-height: 1.25;
}
.attendance-row__person-copy span,
.attendance-row__window span,
.attendance-row__status-note {
  font-size: var(--text-label);
  color: var(--color-ink-muted);
}
.attendance-row__window,
.attendance-row__status,
.attendance-row__coverage {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.attendance-row__chevron {
  display: inline-flex;
  justify-self: end;
  color: var(--color-ink-muted);
  transition: transform var(--duration-base) var(--ease-out-expo);
}
.attendance-row__chevron svg {
  width: 18px;
  height: 18px;
}
.attendance-row[open] .attendance-row__chevron {
  transform: rotate(90deg);
}
.attendance-row__detail {
  padding: 0 var(--space-md) var(--space-md);
}
.attendance-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr);
  gap: var(--space-md);
}
.attendance-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-paper-white);
}
.attendance-panel--secondary {
  background: color-mix(in oklch, var(--color-surface-subtle) 55%, white);
}
.attendance-panel__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.attendance-panel__header h3 {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 600;
}
.attendance-panel__header p {
  margin: 0;
  font-size: var(--text-label);
  color: var(--color-ink-muted);
  max-width: 52ch;
}
.attendance-day-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
/* Motivo da falta já gravada: o campo do formulário nasce vazio todo dia, então sem
   esta lista o motivo some depois de salvar (Raphael, 12/10). */
.attendance-motivos { list-style: none; padding: 0; margin: 0 0 var(--space-sm); font-size: var(--text-label); }
.attendance-motivos li { color: var(--color-ink-muted); }

.attendance-day-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-paper-white);
  color: var(--color-ink);
  overflow: hidden;
}
.attendance-day-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.attendance-day-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  font-size: var(--text-label);
  font-weight: 500;
}
/* O chip so ficava amarelo depois de salvar (a classe vem do servidor): quem
   clicava nao via nada mudar e achava que a tela nao deixava marcar. */
.attendance-day-chip:has(input:checked),
.attendance-day-chip.is-checked {
  border-color: color-mix(in oklch, var(--color-status-warning) 50%, white);
  background: color-mix(in oklch, var(--color-status-warning) 12%, white);
  color: color-mix(in oklch, var(--color-status-warning) 85%, black);
}
.attendance-day-chip.is-readonly span {
  cursor: default;
}
/* O dia do treinamento e um chip de outra natureza: faltar nele tira o valor
   do treinamento, nao a diaria. Borda tracejada + rotulo "treino". */
.attendance-day-chip--treinamento {
  border-style: dashed;
}
.attendance-day-chip--treinamento span {
  gap: 4px;
}
.attendance-day-chip--treinamento small {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-ink-muted);
}
.attendance-day-chip--treinamento:has(input:checked) small,
.attendance-day-chip--treinamento.is-checked small {
  color: inherit;
}
.attendance-inline-note {
  margin: 0;
  font-size: var(--text-label);
  color: var(--color-ink-muted);
  max-width: 52ch;
}

/* Tabela de eventos -------------------------------------------------------- */

.events-table {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-paper-white);
}
.events-table__head,
.events-table__summary {
  display: grid;
  grid-template-columns:
    minmax(180px, 1.8fr)
    minmax(110px, 0.7fr)
    minmax(260px, 1.5fr)
    minmax(220px, 1.2fr)
    24px;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
}
.events-table__head {
  padding: var(--space-xs) var(--space-md);
  background: var(--color-paper-white);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-ink-muted);
}
.events-table__row {
  display: block;
  border-bottom: 1px solid var(--color-border);
}
.events-table__row:last-child { border-bottom: none; }
.events-table__row:nth-child(even) { background: var(--color-surface-subtle); }
.events-table__row:hover { background: var(--color-row-hover); }
.events-table__row[open] { background: var(--color-paper-white); }
.events-table__summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-sm) var(--space-md);
}
.events-table__summary::-webkit-details-marker { display: none; }
.events-table__cell { min-width: 0; }
.events-table__client-cell { align-self: start; }
.events-table__client-name {
  display: block;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.3;
}
.events-table__signals {
  gap: var(--space-2xs);
  align-items: flex-start;
}
.events-table__signals .badge {
  max-width: 100%;
  white-space: nowrap;
}
.events-table__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2xs);
}
.events-table__action-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.events-table__action-btn svg { flex-shrink: 0; }
.events-table__chevron {
  display: inline-flex;
  align-self: start;
  margin-top: 2px;
  color: var(--color-ink-muted);
  transition: transform var(--duration-base) var(--ease-out-expo);
}
.events-table__chevron svg { width: 18px; height: 18px; }
.events-table__row[open] .events-table__chevron { transform: rotate(180deg); }
.events-table__detail {
  padding: 0 var(--space-md) var(--space-md);
}
@media (max-width: 760px) {
  .attendance-intro {
    align-items: flex-start;
  }
  .attendance-board__head {
    display: none;
  }
  .attendance-row__summary {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
  .attendance-row__person {
    grid-column: 1 / 2;
  }
  .attendance-row__window,
  .attendance-row__status,
  .attendance-row__coverage {
    grid-column: 1 / 2;
    padding-left: calc(32px + var(--space-sm));
  }
  .attendance-row__chevron {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-self: start;
  }
  .attendance-detail-grid {
    grid-template-columns: 1fr;
  }
  .events-table__head { display: none; }
  .events-table__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-xs) var(--space-sm);
  }
  .events-table__cell:first-child { flex: 1 1 100%; font-weight: 500; }
  .events-table__cell { flex: 1 1 180px; }
  .events-table__chevron { margin-left: auto; }
}

/* Toast ------------------------------------------------------------------------ */

.toast-region {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.toast {
  background: var(--color-void-black);
  color: var(--color-paper-white);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-toast);
  font-size: var(--text-body);
}
.toast.is-success { background: var(--color-status-success); }
.toast.is-error { background: var(--color-status-danger); }
.toast.is-warning { background: var(--color-status-warning); }

/* Drawer / lightbox ---------------------------------------------------------- */

.drawer-dialog {
  width: min(920px, calc(100vw - 32px));
  max-width: none;
  height: min(100vh - 32px, 960px);
  margin: 16px auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-floating-high);
  overflow: hidden;
}
.drawer-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}
#talento-drawer-content {
  height: 100%;
  min-height: 0;
  position: relative;
}
#compare-dialog-content {
  height: 100%;
  min-height: 0;
  position: relative;
}
.drawer-loading-active [hx-target="#talento-drawer-content"] {
  pointer-events: none;
}
.drawer-loading-active [hx-target="#compare-dialog-content"] {
  pointer-events: none;
}
.drawer-loading-active .results-region,
.drawer-loading-active #eventos-resultados {
  pointer-events: none;
}
.drawer-sheet {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--color-paper-white);
}
.drawer-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}
.drawer-sheet__nome {
  font-size: var(--text-headline);
  font-weight: 600;
  line-height: var(--leading-tight);
}
.drawer-sheet__title {
  max-width: 40ch;
}
.drawer-sheet__body {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding: var(--space-lg);
  padding-right: calc(var(--space-lg) + 8px);
  position: relative;
}
.drawer-sheet__body::after {
  content: '';
  position: sticky;
  display: block;
  left: 0;
  right: 0;
  bottom: calc(var(--space-lg) * -1);
  height: 48px;
  margin-top: calc(var(--space-lg) * -1);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.92) 72%,
    rgba(255, 255, 255, 1)
  );
  pointer-events: none;
}
.drawer-sheet__body::-webkit-scrollbar {
  width: 16px;
}
.drawer-sheet__body::-webkit-scrollbar-track {
  background: color-mix(in oklch, var(--color-surface-subtle) 82%, white);
  border-left: 1px solid var(--color-border);
  box-shadow: inset 1px 0 0 color-mix(in oklch, var(--color-border) 55%, white);
}
.drawer-sheet__body::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--color-tool-indigo) 32%, var(--color-console-gray));
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
  min-height: 56px;
}
.drawer-sheet__body::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklch, var(--color-tool-indigo) 58%, var(--color-console-gray));
  background-clip: padding-box;
}
.drawer-loading {
  height: 100%;
  min-height: 320px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-sm);
  padding: var(--space-xl);
  text-align: center;
  background: linear-gradient(
    180deg,
    color-mix(in oklch, white 90%, var(--color-tool-indigo) 10%),
    white
  );
}
.drawer-loading__spinner {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 3px solid color-mix(in oklch, var(--color-border) 75%, white);
  border-top-color: var(--color-tool-indigo);
  animation: drawer-spin 0.9s linear infinite;
}
.drawer-loading__title {
  margin: 0;
  font-size: var(--text-title);
  font-weight: 600;
}
.drawer-loading__text {
  margin: 0;
  max-width: 32ch;
  color: var(--color-ink-muted);
}
.drawer-loading--error .drawer-loading__spinner {
  display: none;
}
@keyframes drawer-spin {
  to { transform: rotate(360deg); }
}
.drawer-summary {
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
}
.drawer-summary__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
}
.drawer-summary__status {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drawer-summary__eyebrow {
  font-size: var(--text-label);
}
.drawer-summary__contacts {
  margin-top: 0;
  font-size: var(--text-body);
  gap: var(--space-sm);
}
.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-surface-subtle) 65%, white);
  color: var(--color-ink);
  text-decoration: none;
}
.contact-chip:hover {
  text-decoration: none;
  border-color: color-mix(in oklch, var(--color-tool-indigo) 16%, var(--color-border));
  background: color-mix(in oklch, var(--color-tool-indigo) 6%, var(--color-surface-subtle));
}
.contact-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--color-tool-indigo) 8%, white);
  color: var(--color-tool-indigo);
  flex-shrink: 0;
}
.contact-chip__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.contact-chip__label {
  font-size: var(--text-label);
  line-height: 1.2;
  color: var(--color-ink-muted);
}
.contact-chip__value {
  font-size: var(--text-body);
  line-height: 1.3;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
.decision-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  padding: var(--space-md) 0 var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
}
.decision-strip__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.decision-strip__headline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}
.decision-strip__title {
  font-size: var(--text-body);
  font-weight: 600;
}
.decision-strip__meta {
  font-size: var(--text-label);
  max-width: 72ch;
}
.decision-strip__actions {
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.drawer-detail {
  padding-top: var(--space-md);
}
.editable-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.editable-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}
.editable-panel__title {
  font-size: var(--text-title);
  font-weight: 600;
  margin: 0;
}
.editable-panel__hint {
  margin: 4px 0 0;
  font-size: var(--text-label);
  color: var(--color-ink-muted);
  max-width: 60ch;
}
.editable-panel__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Alvo de toque: mesma excecao do .training-action-btn, e precisa vir depois da
   largura de 40px acima, senao a regra base ganha por vir por ultimo. */
@media (pointer: coarse) {
  .btn-icon { width: 44px; height: 44px; }
}
.btn-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.form-grid {
  display: grid;
  gap: var(--space-md);
}
.form-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.form-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Estoque central: uma única operação por vez reduz erros de lançamento. */
.estoque-central__form {
  display: grid;
  grid-template-columns: minmax(190px, 1.15fr) minmax(180px, 1fr) minmax(120px, 0.55fr) minmax(190px, 1fr);
  align-items: end;
  gap: var(--space-md);
}
.estoque-central__tipo,
.estoque-central__campo-transferencia,
.estoque-central__campo-pessoa,
.estoque-central__observacao { min-width: 0; }
.estoque-central__acao { display: flex; align-items: end; min-height: 44px; }
.estoque-central__acao .btn { width: 100%; }
.estoque-central__form [hidden] { display: none; }
.estoque-central__historico-produto { vertical-align: middle; }
.estoque-central__section { margin-bottom: var(--space-xl); }
.estoque-central__section-heading { margin-bottom: var(--space-md); }
.estoque-central__section-heading h2 { margin: 0 0 var(--space-2xs); }
.estoque-central__section-heading p { margin: 0; }
.estoque-central__table-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.estoque-central__data-contagem { max-width: 220px; }
.field--wide {
  grid-column: 1 / -1;
}
.checkbox-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  font-size: var(--text-body);
}
.field--checklist-two-columns > label {
  display: none;
}
.field--checklist-two-columns > div,
.field--checklist-two-columns > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px var(--space-xl);
}
.field--checklist-two-columns > div > div,
.field--checklist-two-columns > ul li {
  min-width: 0;
}
.field--checklist-two-columns > div > div label,
.field--checklist-two-columns > ul label {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-xs);
  min-height: 44px;
  font-weight: 500;
  line-height: 1.2;
}
.field--checklist-two-columns > div > div input,
.field--checklist-two-columns > ul input {
  margin-top: 2px;
  flex-shrink: 0;
}
.form-errors,
.field ul.errorlist {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-status-danger);
  font-size: var(--text-label);
}
.form-errors {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid color-mix(in oklch, var(--color-status-danger) 30%, white);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-status-danger) 8%, white);
}
.field ul.errorlist {
  margin-top: 4px;
}

@media (max-width: 760px) {
  .field--checklist-two-columns > div,
  .field--checklist-two-columns > ul {
    grid-template-columns: minmax(0, 1fr);
  }
}
.contact-panel {
  max-width: 68ch;
}
.contact-panel__intro {
  margin-bottom: var(--space-md);
  font-size: var(--text-label);
}
.perfil-grid {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: var(--space-lg) var(--space-xl);
  align-items: start;
}
.perfil-grid__photo,
.perfil-grid__placeholder {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.perfil-grid__photo {
  object-fit: cover;
}
.perfil-grid__placeholder {
  background: var(--color-surface-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}
.perfil-grid__facts {
  min-width: 240px;
}
.perfil-grid__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}
.perfil-grid__alert {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid color-mix(in oklch, var(--color-status-warning) 35%, white);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-status-warning) 10%, white);
  color: color-mix(in oklch, var(--color-status-warning) 85%, black);
  font-size: var(--text-label);
  max-width: 72ch;
}
.perfil-grid__alert strong {
  color: var(--color-ink);
}
.panel-secondary {
  background: color-mix(in oklch, var(--color-surface-subtle) 55%, white);
}
.cadastro-section {
  padding: var(--space-lg);
}
.cadastro-section__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
}
.cadastro-section__header h2 {
  font-size: var(--text-title);
  line-height: var(--leading-title);
}
.cadastro-inline-action {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}
.cadastro-inline-action__field {
  flex: 0 1 280px;
  max-width: 280px;
}
.cadastro-inline-status {
  margin-top: var(--space-xs);
}
.cadastro-inline-status--warning {
  color: var(--color-status-warning);
  max-width: 72ch;
}
.details-summary {
  cursor: pointer;
  width: fit-content;
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-ink-muted);
}
.floating-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: flex-start;
}
.floating-tool {
  position: relative;
}
.floating-tool--cell {
  display: inline-block;
}
.floating-tool[open] {
  z-index: 4;
}
.floating-tool__trigger {
  cursor: pointer;
  list-style: none;
}
.floating-tool__trigger::-webkit-details-marker {
  display: none;
}
.floating-tool__trigger svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.floating-tool__icon-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-paper-white);
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}
.floating-tool__icon-trigger:hover {
  background: var(--color-surface-subtle);
}
.floating-tool__icon-trigger::-webkit-details-marker {
  display: none;
}
.floating-tool__icon-trigger svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.floating-tool__icon-trigger--success {
  color: var(--color-status-success);
}
.floating-tool__icon-trigger--warning {
  color: var(--color-status-warning);
}
.floating-tool__icon-trigger--danger {
  color: var(--color-status-danger);
}
.floating-tool__panel {
  position: absolute;
  top: calc(100% + var(--space-xs));
  left: 0;
  width: min(680px, calc(100vw - 64px));
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-paper-white);
  box-shadow: var(--shadow-floating-high);
}
.floating-tool__panel--compact {
  width: min(520px, calc(100vw - 64px));
}
.floating-tool__panel--wide {
  width: min(820px, calc(100vw - 64px));
}
.floating-tool__panel--cell {
  left: auto;
  right: 0;
  width: min(360px, calc(100vw - 64px));
}
.floating-tool__panel--anchor-right {
  left: auto;
  right: 0;
}
.floating-tool__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.floating-tool__header > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.floating-tool__header h2 {
  margin: 0;
  font-size: var(--text-title);
}
.floating-tool__header p {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-label);
}
.floating-tool__close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-paper-white);
  color: var(--color-ink-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.floating-tool__close:hover {
  background: var(--color-surface-subtle);
  color: var(--color-ink);
}
.floating-tool__tree {
  margin: 0;
}
.hierarchy-meta {
  margin-bottom: var(--space-sm);
}
.hierarchy-board {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.hierarchy-tree {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.hierarchy-node {
  position: relative;
  padding-left: var(--space-md);
  border-left: 1px solid color-mix(in oklch, var(--color-border) 85%, white);
}
.hierarchy-children {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  margin-left: var(--space-md);
}
.hierarchy-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-surface-subtle) 55%, white);
}
.hierarchy-card__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hierarchy-card__main span {
  color: var(--color-ink-muted);
  font-size: var(--text-label);
}
.hierarchy-dropzone {
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px dashed color-mix(in oklch, var(--color-border) 85%, white);
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--color-surface-subtle) 40%, white);
  color: var(--color-ink-muted);
  font-size: var(--text-label);
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.hierarchy-dropzone.is-drop-target {
  border-color: var(--color-accent);
  background: color-mix(in oklch, var(--color-accent) 10%, white);
  color: var(--color-ink);
}
.hierarchy-dropzone--root {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 0;
  padding: 0;
  vertical-align: middle;
}
.hierarchy-dropzone--root.is-drop-target {
  transform: scale(1.12);
}
.hierarchy-dropzone--handle {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.hierarchy-dropzone--inline {
  margin-top: 0;
  min-width: 180px;
}
.hierarchy-dropzone--inline strong,
.hierarchy-dropzone--inline span {
  display: block;
}
.hierarchy-dropzone__hint {
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--color-ink-muted);
}
.hierarchy-table-row.is-drop-target td {
  background: color-mix(in oklch, var(--color-accent) 9%, white);
}
.hierarchy-table-row.is-dragging td {
  opacity: 0.6;
}
/* Rescisão enviada (12/10): a pessoa fica no estande pelo histórico e pelo pagamento,
   mas nada mais se edita — cinza, sem alça de arraste e sem formulários. */
.hierarchy-table-row.is-rescindido td {
  opacity: 0.5;
  background: var(--color-surface-subtle);
}
.hierarchy-table-row.is-rescindido .hierarchy-drag-handle { display: none; }
.hierarchy-target-cell {
  vertical-align: top;
}
.hierarchy-ladder {
  display: flex;
  align-items: center;
  min-height: 32px;
  position: relative;
}
.hierarchy-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.hierarchy-toolbar__meta {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-label);
}
.cell-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: nowrap;
}
.cell-actions__inline-form {
  display: inline-flex;
  margin: 0;
}
.hierarchy-name-cell {
  position: relative;
  min-width: 260px;
}
/* Linha-guia: subordinado fica visivelmente "dentro" de quem lidera. */
.hierarchy-name-cell::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--space-sm) + (var(--hierarchy-level, 0) - 1) * 24px + 11px);
  border-left: 2px solid color-mix(in oklch, var(--color-accent) 28%, white);
}
.hierarchy-name-cell::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--space-sm) + (var(--hierarchy-level, 0) - 1) * 24px + 11px);
  width: 12px;
  border-top: 2px solid color-mix(in oklch, var(--color-accent) 28%, white);
}
.hierarchy-name-cell[style*="--hierarchy-level: 0"]::before,
.hierarchy-name-cell[style*="--hierarchy-level: 0"]::after {
  display: none;
}
.hierarchy-person {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-left: calc(var(--hierarchy-level, 0) * 24px);
}
.hierarchy-person__content {
  min-width: 0;
}
.hierarchy-person__headline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  flex-wrap: wrap;
}
/* Quebra forçada dentro do headline: o nome ocupa a primeira linha e o que o descreve
   (nota, celular, selos) desce para a segunda (Raphael, 20/10). */
.hierarchy-person__quebra { flex-basis: 100%; height: 0; }
.hierarchy-person__name {
  display: inline-block;
  white-space: nowrap;
}
.hierarchy-table-row[data-has-children="true"] .hierarchy-person__name {
  font-weight: 600;
}
.hierarchy-person__toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 24px;
  padding: 0 7px 0 4px;
  border: 1px solid color-mix(in oklch, var(--color-accent) 28%, var(--color-border));
  border-radius: 999px;
  background: color-mix(in oklch, var(--color-accent) 8%, white);
  color: var(--color-accent-strong);
  font-size: var(--text-label);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.hierarchy-person__toggle:hover {
  border-color: var(--color-accent);
  background: color-mix(in oklch, var(--color-accent) 14%, white);
}
.hierarchy-person__toggle svg {
  transition: transform 160ms ease;
}
.hierarchy-person__toggle[aria-expanded="true"] svg {
  transform: rotate(90deg);
}
.hierarchy-photo-offset {
  display: flex;
  align-items: center;
  min-height: 32px;
  flex-shrink: 0;
}
.hierarchy-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  font-size: 0.75rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-ink-muted);
  background: color-mix(in oklch, var(--color-surface-subtle) 55%, white);
  cursor: grab;
  user-select: none;
  letter-spacing: -1px;
  font-weight: 700;
}
.hierarchy-drag-handle.is-dragging {
  cursor: grabbing;
}
.hierarchy-table-row.is-collapsed td {
  background: color-mix(in oklch, var(--color-surface-subtle) 72%, white);
}
.hierarchy-table-row.is-hidden {
  display: none;
}
.estande-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  align-items: center;
}
.estande-inline-form select {
  min-width: 170px;
  width: 100%;
}

.photo-thumb {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.photo-thumb--compare {
  display: inline-flex;
  align-items: center;
}
.photo-thumb--sm {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full, 999px);
  background: var(--color-surface-subtle);
  vertical-align: middle;
}
.photo-thumb--sm img {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full, 999px);
  object-fit: cover;
  border: 1px solid var(--color-border);
}
.photo-thumb--md,
.photo-thumb--md img {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full, 999px);
  object-fit: cover;
}
.photo-thumb--md img {
  border: 1px solid var(--color-border);
}
.suggested-name {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
.suggested-name__placeholder {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full, 999px);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}
.inline-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  font-size: 0.95em;
}
.inline-indicator__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in oklch, var(--color-line) 80%, white);
  border-top-color: var(--color-accent);
  border-radius: 999px;
  display: inline-block;
  animation: spin 0.8s linear infinite;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
}
/* <dialog> some pelo display:none padrão do navegador enquanto fechado —
   só liga o flex quando [open] (atributo que showModal()/close() alternam
   sozinhos). display:flex incondicional aqui sobrescreveria esse padrão,
   já que regra de autor sempre vence regra de user-agent. */
.lightbox[open] {
  display: flex;
}
.lightbox::backdrop {
  background: transparent;
}
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(2px);
}
.lightbox__frame {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: min(92vw, 1080px);
  max-height: calc(100vh - 96px);
}
.lightbox__frame img {
  max-width: 100%;
  max-height: calc(100vh - 96px);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-floating-high);
}
.lightbox__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--color-paper-white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--color-paper-white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__nav:hover { background: rgba(0, 0, 0, 0.88); }
.lightbox__nav--prev { left: var(--space-sm); }
.lightbox__nav--next { right: var(--space-sm); }
.lightbox__contador {
  position: absolute;
  bottom: var(--space-sm);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--color-paper-white);
  font-size: var(--text-label);
}
.compare-lightbox__frame {
  width: min(1100px, calc(100vw - 48px));
  max-width: none;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
}
.compare-photo-dialog {
  width: min(1120px, calc(100vw - 32px));
  height: auto;
  max-height: calc(100vh - 32px);
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.compare-photo-dialog::backdrop {
  background: rgba(5, 7, 17, 0.72);
  backdrop-filter: blur(4px);
}
.compare-photo-dialog__sheet {
  position: relative;
  width: 100%;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  border-radius: var(--radius-lg);
  background: rgba(10, 12, 18, 0.96);
  box-shadow: var(--shadow-floating-high);
}
.compare-lightbox__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  align-items: start;
}
.compare-lightbox__pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.compare-lightbox__label {
  margin: 0;
  font-size: var(--text-label);
  color: rgba(255, 255, 255, 0.8);
}
.compare-lightbox__media {
  min-height: 360px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.compare-lightbox__media img {
  width: 100%;
  height: min(72vh, 720px);
  object-fit: contain;
  background: #050505;
}
.compare-lightbox__placeholder {
  padding: var(--space-lg);
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  max-width: 24ch;
}

@media (max-width: 767px) {
  .estoque-central__table-actions,
  .estoque-central__table-actions form,
  .estoque-central__table-actions .btn,
  .estoque-central__data-contagem {
    width: 100%;
    max-width: none;
  }
  .estoque-central__form {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  .estoque-central__acao {
    margin-top: var(--space-xs);
  }
  .drawer-dialog {
    width: 100vw;
    height: calc(100vh - 8px);
    margin: 8px auto 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .drawer-sheet__header,
  .drawer-sheet__body {
    padding: var(--space-md);
  }
  .drawer-summary {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
  }
  .editable-panel__header {
    align-items: stretch;
  }
  .decision-strip {
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-md);
  }
  .form-grid--four,
  .form-grid--two {
    grid-template-columns: 1fr;
  }
  .cadastro-inline-action {
    flex-direction: column;
  }
  .cadastro-inline-action__field {
    flex-basis: auto;
    max-width: none;
    width: 100%;
  }
  .perfil-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .perfil-grid__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
  }
  .event-stats {
    grid-template-columns: 1fr;
  }
  .floating-tools {
    flex-direction: column;
  }
  .floating-tool {
    width: 100%;
  }
  .floating-tool__panel,
  .floating-tool__panel--compact,
  .floating-tool__panel--wide {
    position: static;
    width: 100%;
    margin-top: var(--space-xs);
  }
  .floating-tool__header {
    align-items: stretch;
  }
  .hierarchy-node {
    padding-left: var(--space-sm);
  }
  .hierarchy-children {
    margin-left: var(--space-sm);
  }
  .hierarchy-ladder {
    padding-left: 0;
  }
  .hierarchy-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .hierarchy-photo-offset {
    padding-left: calc(var(--hierarchy-level, 0) * 12px);
  }
  .hierarchy-photo-offset::before {
    left: calc(var(--hierarchy-level, 0) * 12px - 8px);
    width: 8px;
  }
  .hierarchy-person {
    gap: var(--space-xs);
  }
  .hierarchy-person__headline {
    align-items: flex-start;
  }
  .estande-inline-form {
    flex-direction: column;
    align-items: stretch;
  }
  .estande-inline-form select,
  .estande-inline-form .btn {
    width: 100%;
  }
  .subfilters-bar {
    grid-template-columns: 1fr;
  }
  .subfilters-bar__actions {
    justify-content: flex-start;
  }
  .lightbox {
    padding: var(--space-md);
  }
  .compare-lightbox__frame {
    width: calc(100vw - 16px);
    padding: 56px var(--space-sm) var(--space-sm);
  }
  .compare-photo-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    margin: 8px auto;
  }
  .compare-photo-dialog__sheet {
    padding: 56px var(--space-sm) var(--space-sm);
  }
  .compare-lightbox__grid {
    grid-template-columns: 1fr;
  }
  .compare-lightbox__media {
    min-height: 240px;
  }
  .compare-lightbox__media img {
    height: min(44vh, 420px);
  }
}

/* Mensagens (Django messages framework) ------------------------------------------- */

.message-list { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.message-banner {
  display: flex;
  /* Quebra: com um form dentro (confirmar, cancelar pedido), a linha única espremia o texto em
     uma palavra por linha num celular de 375px (crítica de 21/10). */
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-size: var(--text-body);
}
.message-banner.tag-success {
  background: color-mix(in oklch, var(--color-status-success) 10%, white);
  border-color: color-mix(in oklch, var(--color-status-success) 35%, white);
  color: color-mix(in oklch, var(--color-status-success) 80%, black);
}
.message-banner.tag-error {
  background: color-mix(in oklch, var(--color-status-danger) 10%, white);
  border-color: color-mix(in oklch, var(--color-status-danger) 35%, white);
  color: color-mix(in oklch, var(--color-status-danger) 80%, black);
}
.message-banner.tag-warning {
  background: color-mix(in oklch, var(--color-status-warning) 10%, white);
  border-color: color-mix(in oklch, var(--color-status-warning) 35%, white);
  color: color-mix(in oklch, var(--color-status-warning) 80%, black);
}

/* Utilitários -------------------------------------------------------------------- */

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--space-md); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.visually-quiet { color: var(--color-ink-muted); }

/* Composição do valor na linha de Contratos (16/10): sinal e quantidade · valor · rótulo,
   como uma conta de papel; o segundo bloco (faltas e ajustes) separa por um filete. */
.composicao-conta { border-collapse: collapse; font-size: var(--text-label); font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table .composicao-conta td { padding: 0 var(--space-2xs); border: 0; line-height: 1.5; }
.composicao-conta td:first-child { text-align: right; color: var(--color-ink-muted); }
.composicao-conta td:nth-child(2) { text-align: right; }
.composicao-conta tbody + tbody tr:first-child td { border-top: 1px dashed var(--color-border); }
.composicao-conta__total td { font-weight: 600; }
.composicao-conta td:last-child { white-space: normal; }
/* A lista de Contratos tem seis colunas com a conta no meio: respiro menor nas células para
   caber sem rolagem horizontal num notebook (16/10, crítica "barra de rolagem"). */
.data-table--contratos th, .data-table--contratos td { padding-left: var(--space-xs); padding-right: var(--space-xs); }

/* Cards do resumo da curva de distribuição: grid de verdade em vez de flex com
   `flex: 1`, que esticava a última linha e deixava as alturas irregulares. */
/* O card inteiro é o botão que abre o painel daquele produto. */
.distribuicao-card {
  display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: var(--color-paper-white); color: inherit;
}
.distribuicao-card:hover { background: var(--color-surface-subtle); }
.distribuicao-card strong { color: var(--color-accent); }
/* Cadeado da linha: discreto solto, sólido quando trava. */
.distribuicao-trava {
  background: none; border: 0; padding: 0 var(--space-2xs); cursor: pointer;
  font-size: 0.9rem; line-height: 1; opacity: 0.35; flex: none;
}
.distribuicao-trava:hover { opacity: 0.7; }
.distribuicao-trava.is-travado { opacity: 1; cursor: default; }
button.distribuicao-trava.is-travado { cursor: pointer; }

/* Painel recolhido não aparece (Raphael, 07/10): o cabeçalho dele repetiria o card
   do resumo, que é quem abre. Na tela ficam os cards e um painel só. */
.distribuicao-painel:not(:has(> details[open])) { display: none; }
/* Painel do produto recolhido: só o primeiro abre, o resto é um clique. */
.distribuicao-produto > summary { cursor: pointer; }
.distribuicao-produto > summary::-webkit-details-marker { display: none; }
.distribuicao-produto > summary::marker { content: ''; }

.distribuicao-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

/* Responsáveis padrão da Door (Acessos › Usuários) — resumo só-leitura por
   frente, editor colapsado em <details>. ------------------------------------ */
.resp-padrao { margin-bottom: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.resp-padrao h2 { font-size: var(--text-title); font-weight: 600; letter-spacing: -0.01em; line-height: var(--leading-title); margin: 0; }
.resp-padrao__hint { margin: 4px 0 0; font-size: var(--text-label); color: var(--color-ink-muted); max-width: 62ch; }
.resp-padrao__hint .mono { font-size: 0.75rem; }
.resp-padrao__resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-sm) var(--space-md); margin: 0; }
.resp-padrao__par { min-width: 0; }
.resp-padrao__par dt { font-size: var(--text-label); color: var(--color-ink-muted); }
.resp-padrao__par dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.resp-padrao__vazio { color: var(--color-status-warning); }
.resp-padrao__editor summary { list-style: none; width: fit-content; }
.resp-padrao__editor summary::-webkit-details-marker { display: none; }
.resp-padrao__editor[open] summary { margin-bottom: var(--space-md); }
.resp-padrao__form { display: flex; flex-direction: column; gap: var(--space-md); padding-top: var(--space-md); border-top: 1px dashed var(--color-border); }
.resp-padrao__form legend { margin-bottom: var(--space-xs); }
.resp-padrao__acoes .resp-padrao__hint { margin: 0; }

.only-print { display: none; }
@media print {
  .app-topbar, .app-sidebar, .no-print { display: none !important; }
  .only-print { display: inline-flex; }
}

/* Matriz de permissões (Grupos/Usuários em Acessos) ------------------------------- */

.perm-matrix-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.perm-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-label);
}

.perm-matrix th,
.perm-matrix td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  text-align: center;
  white-space: nowrap;
}

.perm-matrix thead th {
  position: sticky;
  top: 0;
  background: var(--color-surface-subtle);
  z-index: 1;
}

.perm-matrix td:first-child,
.perm-matrix th:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: white;
  z-index: 1;
}

.perm-matrix thead th:first-child { z-index: 2; background: var(--color-surface-subtle); }

.perm-matrix tr.perm-matrix__modulo td {
  text-align: left;
  font-weight: 600;
  background: var(--color-surface-subtle);
  position: static;
}

.perm-matrix tr.perm-matrix__pagina td:first-child {
  padding-left: var(--space-md);
}

.perm-matrix__grupo-col { border-right: 2px solid var(--color-border); }
.perm-matrix__grupo-col:last-child { border-right: 2px solid var(--color-border); }

.perm-matrix caption {
  caption-side: top;
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-ink-muted);
  font-size: var(--text-label);
}

/* Ícones/botões desabilitados */
.btn-icon-disabled,
button:disabled,
a.btn-icon-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Dashboards: central de controle ------------------------------------------------ */

.dashboard-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-xl);
  margin: -4px 0 var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-ink);
}
.dashboard-hero h1 { font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -0.04em; }
.dashboard-hero p { max-width: 62ch; margin-top: var(--space-xs); color: var(--color-ink-muted); }
.dashboard-horizonte {
  display: grid;
  align-content: end;
  min-width: 156px;
  padding: 0 0 2px var(--space-md);
  border-left: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums;
}
.dashboard-horizonte span,
.dashboard-horizonte small { color: var(--color-ink-muted); font-size: var(--text-label); }
.dashboard-horizonte strong { font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1.1; }
.dashboard-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.dashboard-section-heading h2 { font-size: var(--text-title); }
.dashboard-section-heading p { max-width: 58ch; margin-top: 2px; color: var(--color-ink-muted); font-size: var(--text-label); }
.dashboard-empty-note { color: var(--color-ink-muted); font-size: var(--text-label); }

.dashboard-console-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr);
  gap: var(--space-xl);
  align-items: start;
}
.dashboard-readiness-board { border-top: 4px solid var(--color-ink); }
.dashboard-readiness-board > .dashboard-section-heading { padding: var(--space-md) 0 var(--space-lg); }
.dashboard-inline-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-md); margin: 0; }
.dashboard-inline-stats div { min-width: 78px; }
.dashboard-inline-stats dt { color: var(--color-ink-muted); font-size: 0.7rem; line-height: 1.2; }
.dashboard-inline-stats dd { margin: 2px 0 0; font-size: 1.4rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.dashboard-readiness-list { border-top: 1px solid var(--color-border); }
.dashboard-readiness-event { padding: var(--space-md) 0 var(--space-lg); border-bottom: 1px solid var(--color-border); }
.dashboard-readiness-event__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.dashboard-readiness-event__name { color: var(--color-ink); font-weight: 600; text-decoration: none; }
.dashboard-readiness-event__name:hover { color: var(--color-accent); text-decoration: none; }
.dashboard-readiness-event__header p { margin-top: 2px; color: var(--color-ink-muted); font-size: var(--text-label); }
.dashboard-risk-label { flex: 0 0 auto; padding: 3px 7px; border: 1px solid var(--color-border); color: var(--color-ink-muted); font-size: 0.7rem; font-weight: 600; line-height: 1.2; }
.dashboard-risk-label.is-warning { border-color: var(--color-status-warning); color: var(--color-status-warning); }
.dashboard-risk-label.is-critical { border-color: var(--color-status-danger); color: var(--color-status-danger); }
.dashboard-risk-label.is-ready { border-color: var(--color-status-success); color: var(--color-status-success); }
.dashboard-readiness-lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-md); }
.dashboard-readiness-lane { min-width: 0; color: var(--color-ink); text-decoration: none; }
.dashboard-readiness-lane:hover { color: var(--color-accent); text-decoration: none; }
.dashboard-readiness-lane__meta { display: flex; justify-content: space-between; gap: var(--space-xs); font-size: var(--text-label); }
.dashboard-readiness-lane__meta strong { font-variant-numeric: tabular-nums; }
.dashboard-readiness-lane__track { display: block; height: 8px; margin: 6px 0; background: var(--color-surface-subtle); overflow: hidden; }
.dashboard-readiness-lane__track span { display: block; height: 100%; background: var(--color-tool-indigo); }
.dashboard-readiness-lane.is-pending .dashboard-readiness-lane__track span { background: var(--color-status-warning); }
.dashboard-readiness-lane__action { display: block; color: var(--color-ink-muted); font-size: 0.7rem; font-weight: 600; }
.dashboard-readiness-lane:hover .dashboard-readiness-lane__action { color: var(--color-accent); }

.dashboard-action-queue { padding: var(--space-md); background: var(--color-surface-subtle); border-top: 4px solid var(--color-ink); }
.dashboard-action-queue__items { margin-top: var(--space-md); border-top: 1px solid var(--color-border); }
.dashboard-action-item { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); color: var(--color-ink); text-decoration: none; }
.dashboard-action-item:hover { color: var(--color-accent); text-decoration: none; }
.dashboard-action-item__when { align-self: start; color: var(--color-status-warning); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.35; }
.dashboard-action-item.is-critical .dashboard-action-item__when { color: var(--color-status-danger); }
.dashboard-action-item__body { display: grid; gap: 2px; min-width: 0; font-size: var(--text-label); }
.dashboard-action-item__body span { color: var(--color-ink-muted); }
.dashboard-action-item__verb { grid-column: 2; color: var(--color-accent); font-size: 0.7rem; font-weight: 600; }

.dashboard-funnel-zone { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.dashboard-funnel-list { margin-top: var(--space-lg); }
.dashboard-funnel { display: block; padding: var(--space-lg); background: var(--color-ink); color: var(--color-paper-white); text-decoration: none; }
.dashboard-funnel:hover { color: var(--color-paper-white); text-decoration: none; background: color-mix(in oklch, var(--color-ink) 90%, var(--color-tool-indigo)); }
.dashboard-funnel__header { display: flex; justify-content: space-between; gap: var(--space-md); }
.dashboard-funnel__header strong { font-size: var(--text-title); }
.dashboard-funnel__header span { color: color-mix(in oklch, var(--color-paper-white) 70%, var(--color-ink)); font-size: var(--text-label); }
.dashboard-funnel__shape { display: flex; align-items: stretch; gap: 1px; height: 84px; margin-top: var(--space-lg); }
.dashboard-funnel-band { position: relative; flex: 1 1 0; min-width: 0; background: color-mix(in oklch, var(--color-paper-white) 26%, var(--color-ink)); clip-path: polygon(var(--band-top-l) 0, var(--band-top-r) 0, var(--band-bottom-r) 100%, var(--band-bottom-l) 100%); }
.dashboard-funnel-band.is-final { background: var(--color-tool-indigo); }
.dashboard-funnel__labels { display: grid; grid-template-columns: repeat(var(--funnel-stages, 4), minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-sm); }
.dashboard-funnel-stage { min-width: 0; }
.dashboard-funnel-stage__count { display: block; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.dashboard-funnel-stage__label { color: color-mix(in oklch, var(--color-paper-white) 68%, var(--color-ink)); font-size: var(--text-label); }

.dashboard-management-overview { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.5fr); border-top: 4px solid var(--color-ink); border-bottom: 1px solid var(--color-border); }
.dashboard-management-overview__lead { padding: var(--space-lg); background: var(--color-ink); color: var(--color-paper-white); }
.dashboard-management-overview__lead.is-clear { background: var(--color-status-success); }
.dashboard-management-overview__lead > span,
.dashboard-management-overview__lead p { color: color-mix(in oklch, var(--color-paper-white) 70%, var(--color-ink)); font-size: var(--text-label); }
.dashboard-management-overview__lead.is-clear > span,
.dashboard-management-overview__lead.is-clear p { color: color-mix(in oklch, var(--color-paper-white) 92%, var(--color-status-success)); }
.dashboard-management-overview__lead strong { display: block; margin: var(--space-xs) 0; font-size: clamp(3rem, 7vw, 5.5rem); letter-spacing: -0.05em; line-height: .85; font-variant-numeric: tabular-nums; }
.dashboard-management-overview__context { display: grid; align-content: center; padding: var(--space-lg); }
.dashboard-management-overview__context p { max-width: 48ch; color: var(--color-ink-muted); }
.dashboard-management-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(270px, .75fr); gap: var(--space-xl); margin-top: var(--space-xl); }
.dashboard-risk-map { border-top: 4px solid var(--color-ink); }
.dashboard-risk-map > .dashboard-section-heading { padding: var(--space-md) 0 var(--space-sm); }
.dashboard-quality-console { padding: var(--space-md); background: var(--color-surface-subtle); border-top: 4px solid var(--color-ink); }
.dashboard-quality-console__divider { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.dashboard-quality-readings { margin: var(--space-md) 0 0; border-top: 1px solid var(--color-border); }
.dashboard-quality-readings div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border); }
.dashboard-quality-readings dt { font-size: var(--text-label); }
.dashboard-quality-readings dd { margin: 0; font-size: 1.75rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }

.dashboard-stack-bar { display: flex; height: 28px; margin-top: var(--space-md); background: var(--color-surface-subtle); }
.dashboard-stack-bar__segment { display: block; width: var(--segment-width); height: 100%; }
.dashboard-stack-bar__segment.is-rascunho { background: var(--color-status-warning); }
.dashboard-stack-bar__segment.is-aprovado { background: var(--color-status-success); }
.dashboard-stack-bar__legend { display: grid; gap: var(--space-xs); margin-top: var(--space-md); }
.dashboard-stack-bar__legend div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); font-size: var(--text-label); }
.dashboard-stack-bar__legend dt { display: flex; align-items: center; gap: 6px; }
.dashboard-stack-bar__legend dt i { display: inline-block; width: 9px; height: 9px; }
.dashboard-stack-bar__legend dt i.is-rascunho { background: var(--color-status-warning); }
.dashboard-stack-bar__legend dt i.is-aprovado { background: var(--color-status-success); }
.dashboard-stack-bar__legend dd { margin: 0; color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }

.dashboard-meter + .dashboard-meter { margin-top: var(--space-md); }
.dashboard-meter__meta { display: flex; justify-content: space-between; gap: var(--space-xs); font-size: var(--text-label); }
.dashboard-meter__meta strong { font-variant-numeric: tabular-nums; }
.dashboard-meter__track { display: block; height: 8px; margin: 6px 0; background: var(--color-surface-subtle); overflow: hidden; }
.dashboard-meter__track span { display: block; height: 100%; background: var(--color-status-success); }

.dashboard-lacuna-strip { display: grid; gap: 2px; margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--color-paper-white); border: 1px dashed var(--color-border); }
.dashboard-lacuna-strip__title { color: var(--color-ink-muted); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.dashboard-lacuna-strip div { display: flex; justify-content: space-between; gap: var(--space-md); padding: 3px 0; font-size: var(--text-label); }
.dashboard-lacuna-strip dt { color: var(--color-ink-muted); }
.dashboard-lacuna-strip dd { margin: 0; color: var(--color-ink-muted); font-style: italic; }

.dashboard-finance-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 4px solid var(--color-ink); border-bottom: 1px solid var(--color-border); }
.dashboard-finance-flow__node { position: relative; display: grid; align-content: start; gap: 5px; min-height: 136px; padding: var(--space-md); color: var(--color-ink); text-decoration: none; border-right: 1px solid var(--color-border); }
.dashboard-finance-flow__node:last-child { border-right: 0; }
.dashboard-finance-flow__node:hover { background: var(--color-row-hover); color: var(--color-accent); text-decoration: none; }
.dashboard-finance-flow__node > span { min-height: 34px; color: var(--color-ink-muted); font-size: var(--text-label); }
.dashboard-finance-flow__node strong { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -0.04em; line-height: .9; font-variant-numeric: tabular-nums; }
.dashboard-finance-flow__node small { margin-top: auto; color: inherit; font-size: 0.7rem; font-weight: 600; }
.dashboard-finance-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .65fr); gap: var(--space-xl); margin-top: var(--space-xl); }
.dashboard-deadline-board { border-top: 4px solid var(--color-ink); }
.dashboard-deadline-board > .dashboard-section-heading { padding: var(--space-md) 0 var(--space-lg); }
.dashboard-deadline-list { border-top: 1px solid var(--color-border); }
.dashboard-deadline { display: grid; grid-template-columns: 54px minmax(0, 1fr) 58px auto; gap: var(--space-md); align-items: center; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); color: var(--color-ink); text-decoration: none; }
.dashboard-deadline:hover { color: var(--color-accent); text-decoration: none; }
.dashboard-deadline time { display: grid; justify-items: start; line-height: 1; font-variant-numeric: tabular-nums; }
.dashboard-deadline time strong { font-size: 1.75rem; letter-spacing: -0.04em; }
.dashboard-deadline time span { margin-top: 2px; color: var(--color-ink-muted); font-size: 0.7rem; text-transform: uppercase; }
.dashboard-deadline__body { display: grid; gap: 2px; min-width: 0; }
.dashboard-deadline__type { color: var(--color-status-warning); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; }
.dashboard-deadline__body small { color: var(--color-ink-muted); font-size: var(--text-label); }
.dashboard-deadline__when { font-family: var(--font-mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.dashboard-deadline__action { color: var(--color-accent); font-size: 0.7rem; font-weight: 600; }
.dashboard-finance-note { align-self: start; padding: var(--space-lg); background: var(--color-ink); color: var(--color-paper-white); }
.dashboard-finance-note h2 { font-size: var(--text-title); }
.dashboard-finance-note p { margin-top: var(--space-md); color: color-mix(in oklch, var(--color-paper-white) 72%, var(--color-ink)); font-size: var(--text-label); }

.dashboard-agenda-item {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-sm);
  flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--color-border);
  text-decoration: none; color: inherit; min-width: 0; font-size: var(--text-label); line-height: 1.4;
}
.dashboard-agenda-item > * { min-width: 0; }
.dashboard-agenda-item .badge { padding: 1px 8px; }
.dashboard-agenda-item__data { text-align: right; white-space: nowrap; }
.dashboard-agenda-item__data .page-header__meta { margin-top: 1px; }
@media (max-width: 480px) {
  .dashboard-agenda-item { flex-direction: column; align-items: flex-start; }
  .dashboard-agenda-item__data { text-align: left; }
}
.dashboard-agenda-calendario__cabecalho-mes { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); }
.dashboard-agenda-calendario__titulo-mes { font-size: var(--text-title); font-weight: 600; margin: 0; }
.dashboard-agenda-calendario__nav { display: flex; gap: var(--space-2xs); }
.dashboard-agenda-calendario__nav-btn {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 1px solid var(--color-console-gray); border-radius: 50%; background: var(--color-paper-white);
  color: var(--color-void-black); cursor: pointer; font-size: 1rem; line-height: 1;
}
.dashboard-agenda-calendario__nav-btn:hover { background: var(--color-surface-subtle); }
.dashboard-agenda-calendario__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
/* ink-muted, nao console-gray: #999798 sobre branco da 2.9:1, abaixo do minimo
   de 4.5:1 para texto. Console Gray segue valendo para borda, fundo e ponto. */
.dashboard-agenda-calendario__dia-semana { font-size: var(--text-label); color: var(--color-ink-muted); text-align: center; padding: 2px 0 6px; }
.dashboard-agenda-calendario__dia {
  position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: var(--text-label); cursor: default; background: none; border: none;
  color: inherit; font-family: inherit; margin: 0 auto; width: 100%; max-width: 40px;
}
.dashboard-agenda-calendario__dia-numero { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; }
.dashboard-agenda-calendario__dia--com-prazo { cursor: pointer; }
.dashboard-agenda-calendario__dia--com-prazo .dashboard-agenda-calendario__dia-numero { background: var(--color-tool-indigo); color: var(--color-paper-white); font-weight: 600; }
.dashboard-agenda-calendario__dia--hoje .dashboard-agenda-calendario__dia-numero { outline: 2px solid var(--color-void-black); outline-offset: 1px; }
.dashboard-agenda-calendario__dia--selecionado .dashboard-agenda-calendario__dia-numero { background: var(--color-void-black); color: var(--color-paper-white); }
.dashboard-agenda-calendario__dia--fora-do-mes { color: var(--color-console-gray); opacity: .45; }
.dashboard-agenda-calendario__dia--fora-do-mes .dashboard-agenda-calendario__dia-numero { background: none; color: inherit; }

@media (max-width: 960px) {
  .dashboard-console-grid, .dashboard-management-grid, .dashboard-finance-grid { grid-template-columns: 1fr; }
  .dashboard-action-queue, .dashboard-quality-console, .dashboard-finance-note { max-width: none; }
  .dashboard-readiness-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-finance-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-finance-flow__node:nth-child(3) { border-right: 0; }
  .dashboard-finance-flow__node:nth-child(-n+3) { border-bottom: 1px solid var(--color-border); }
}
@media (max-width: 640px) {
  .dashboard-hero { display: grid; gap: var(--space-lg); }
  .dashboard-horizonte { min-width: 0; padding: var(--space-sm) 0 0; border-top: 1px solid var(--color-border); border-left: 0; }
  .dashboard-inline-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); }
  .dashboard-section-heading { display: grid; }
  .dashboard-readiness-event__header, .dashboard-funnel__header { display: grid; }
  .dashboard-readiness-lanes, .dashboard-funnel__labels { grid-template-columns: 1fr; }
  .dashboard-readiness-lane { display: grid; grid-template-columns: minmax(0, 1fr) 76px; column-gap: var(--space-sm); align-items: center; }
  .dashboard-readiness-lane__track { grid-column: 1 / -1; }
  .dashboard-readiness-lane__action { text-align: right; }
  .dashboard-management-overview { grid-template-columns: 1fr; }
  .dashboard-finance-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-finance-flow__node:nth-child(3) { border-right: 1px solid var(--color-border); }
  .dashboard-finance-flow__node:nth-child(even) { border-right: 0; }
  .dashboard-finance-flow__node:nth-child(-n+3) { border-bottom: 1px solid var(--color-border); }
  .dashboard-deadline { grid-template-columns: 46px minmax(0, 1fr); }
  .dashboard-deadline__when { grid-column: 2; }
  .dashboard-deadline__action { grid-column: 2; }
}

/* Dashboard de Gestão — Central de Comando (20260903): radar de clientes,
   cockpit por instrumento, funil de staff e bloqueios como cards com
   semáforo de cor, não texto corrido. Reutiliza os tokens de status/espaço
   já definidos acima em vez de um sistema de cor paralelo. */
.dg-radar { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: var(--space-sm); }
/* Exceção deliberada ao DESIGN.md (Raphael, 03/09): o card do radar mantém
   borda lateral colorida + sombra leve como semáforo — a versão plana com
   .dg-dot foi testada e rejeitada. Mesmo padrão da Fila do Financeiro. */
.dg-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-sm) var(--space-xs); background: var(--color-paper-white);
  border: 1px solid var(--color-border); border-left: 3px solid var(--color-border);
  text-decoration: none; color: inherit; box-shadow: var(--shadow-floating-low);
}
.dg-card:hover { text-decoration: none; border-color: var(--color-accent); }
.dg-card--ok { border-left-color: var(--color-status-success); }
.dg-card--warn { border-left-color: var(--color-status-warning); }
.dg-card--risk { border-left-color: var(--color-status-danger); }
.dg-card--sel { outline: 2px solid var(--color-accent); outline-offset: -1px; }
.dg-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-xs); }
.dg-card__nome { font-weight: 600; line-height: 1.2; }
.dg-card__ev { color: var(--color-ink-muted); font-size: 0.7rem; margin-top: 1px; }
.dg-card__dx { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; padding: 2px 6px; background: var(--color-surface-subtle); white-space: nowrap; }
.dg-card--risk .dg-card__dx { background: color-mix(in oklch, var(--color-status-danger) 12%, white); color: var(--color-status-danger); }
.dg-card__pct { display: flex; align-items: baseline; gap: 6px; }
.dg-card__pct b { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.dg-card__pct span { color: var(--color-ink-muted); font-size: 0.7rem; }
.dg-card__foot { color: var(--color-ink-muted); font-size: 0.7rem; display: flex; flex-direction: column; gap: 2px; }
.dg-card__foot b { color: var(--color-ink); font-weight: 500; }
.dg-flag { font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-status-danger); }
.dg-flag--w { color: var(--color-status-warning); }

.dg-bar { position: relative; height: 5px; background: var(--color-surface-subtle); border-radius: 2px; overflow: hidden; }
.dg-bar > i { display: block; height: 100%; border-radius: 2px; background: var(--color-accent); }
.dg-bar--ok > i { background: var(--color-status-success); }
.dg-bar--warn > i { background: var(--color-status-warning); }
.dg-bar--risk > i { background: var(--color-status-danger); }
.dg-bar__mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--color-ink); opacity: .55; }

.dg-cockpit { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); }
.dg-inst { background: var(--color-paper-white); padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-2xs); min-height: 132px; text-decoration: none; color: inherit; }
.dg-inst:hover { text-decoration: none; background: var(--color-row-hover); }
@media (max-width: 640px) { .dg-inst { min-height: 0; } }
.dg-inst__h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.dg-inst__t { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-muted); }
.dg-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--color-console-gray); }
.dg-dot--ok { background: var(--color-status-success); }
.dg-dot--warn { background: var(--color-status-warning); }
.dg-dot--risk { background: var(--color-status-danger); }
.dg-dot--wip { background: var(--color-tool-indigo); }
.dg-inst__n { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.dg-inst__rows { display: flex; flex-direction: column; gap: 2px; margin-top: 1px; }
.dg-inst__row { display: flex; justify-content: space-between; gap: var(--space-xs); font-size: 0.75rem; color: var(--color-ink); }
.dg-inst__row--alert span { color: var(--color-status-danger); }
.dg-cockpit__resp { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); padding: 6px var(--space-md); font-size: 0.75rem; color: var(--color-ink-muted); text-decoration: none; border-bottom: 1px solid var(--color-border); }
.dg-cockpit__resp strong { color: var(--color-ink); font-weight: 600; }
.dg-cockpit__resp strong.is-vazio { color: var(--color-status-warning); }
.dg-cockpit__resp:hover strong { text-decoration: underline; }
.dg-inst__f { margin-top: auto; font-size: 0.7rem; color: var(--color-ink-muted); display: flex; justify-content: space-between; gap: var(--space-xs); border-top: 1px dashed var(--color-border); padding-top: 6px; }
.dg-inst__vazio { margin: var(--space-2xs) 0 0; font-size: 0.75rem; color: var(--color-ink-muted); line-height: 1.4; }
.dg-inst--wip { background: repeating-linear-gradient(135deg, var(--color-paper-white), var(--color-paper-white) 9px, var(--color-surface-subtle) 9px, var(--color-surface-subtle) 18px); }
.dg-inst--wip p { margin-top: auto; }
.dg-wiptag { align-self: flex-start; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: .05em; text-transform: uppercase; background: var(--color-tool-indigo); color: var(--color-paper-white); padding: 2px 6px; }

.dg-funil { display: grid; grid-template-columns: 1fr 220px; gap: var(--space-lg); }
@media (max-width: 720px) { .dg-funil { grid-template-columns: 1fr; } }
.dg-fstep { display: grid; grid-template-columns: 130px 1fr 42px; align-items: center; gap: var(--space-xs); padding: 3px 0; }
.dg-fstep__l { font-size: 0.75rem; color: var(--color-ink); }
.dg-fstep__b { height: 14px; background: var(--color-surface-subtle); border-radius: 2px; overflow: hidden; }
.dg-fstep__b i { display: block; height: 100%; background: var(--color-accent); opacity: .82; }
.dg-fstep--gargalo .dg-fstep__b i { background: var(--color-status-danger); }
.dg-fstep--gargalo .dg-fstep__l { color: var(--color-status-danger); font-weight: 600; }
.dg-fstep__v { font-family: var(--font-mono); font-size: 0.75rem; text-align: right; }
.dg-veredito { background: color-mix(in oklch, var(--color-status-danger) 8%, white); border: 1px solid var(--color-status-danger); border-radius: var(--radius-sm); padding: var(--space-sm); align-self: start; }
.dg-veredito b { display: block; color: var(--color-status-danger); font-size: 0.9rem; }
.dg-veredito p { margin: var(--space-2xs) 0 0; font-size: 0.75rem; color: var(--color-ink-muted); }
.dg-veredito__l { display: block; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: .05em; text-transform: uppercase; color: var(--color-status-danger); margin-bottom: 2px; }

.dg-blk { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.dg-blk:last-child { border-bottom: 0; }
.dg-blk:hover { text-decoration: none; background: var(--color-surface-subtle); }
.dg-blk__h { display: flex; align-items: center; gap: var(--space-xs); }
.dg-blk__o { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; }
.dg-blk__o--ext { background: var(--color-status-danger); color: var(--color-paper-white); }
.dg-blk__o--int { background: var(--color-surface-subtle); color: var(--color-ink-muted); border: 1px solid var(--color-border); }
.dg-blk__t { font-size: 0.85rem; font-weight: 600; }
.dg-blk__m { font-size: 0.75rem; color: var(--color-ink-muted); }
.dg-blk__f { display: flex; justify-content: space-between; gap: var(--space-xs); font-size: 0.7rem; color: var(--color-ink-muted); flex-wrap: wrap; }
.dg-blk__fonte { font-family: var(--font-mono); font-size: 0.65rem; color: var(--color-ink-muted); opacity: .8; }

.dg-ag { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border); text-decoration: none; color: inherit; }
.dg-ag:last-child { border-bottom: 0; }
.dg-ag:hover { text-decoration: none; background: var(--color-surface-subtle); }
.dg-ag__body { min-width: 0; }
.dg-ag__type { display: block; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: .05em; text-transform: uppercase; color: var(--color-status-warning); }
.dg-ag__t { font-size: 0.85rem; font-weight: 600; }
.dg-ag__m { font-size: 0.7rem; color: var(--color-ink-muted); }
.dg-ag__when { flex: none; font-size: 0.7rem; font-weight: 600; white-space: nowrap; }

/* Faixa de exceções ------------------------------------------------------------- */
.dg-exc { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; margin: var(--space-md) 0; }
.dg-exc__item { background: var(--color-paper-white); padding: var(--space-sm) var(--space-md); display: flex; flex-direction: column; gap: 3px; }
.dg-exc__n { font-size: 1.55rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.dg-exc__d { font-size: 0.75rem; color: var(--color-ink-muted); line-height: 1.3; }
.dg-exc__n--brl { font-size: 1.2rem; letter-spacing: -.01em; }  /* R$ com centavos não cabe em 1.55rem num tile de 150px */
.dg-exc__item--risk .dg-exc__n { color: var(--color-status-danger); }
.dg-exc__item--warn .dg-exc__n { color: var(--color-status-warning); }
.dg-exc__item--ok .dg-exc__n { color: var(--color-status-success); }

/* Grid principal (cockpit/funil/timeline + bloqueios/agenda/prontidão) --------- */
.dg-main { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: var(--space-md); margin-top: var(--space-lg); align-items: start; }
@media (max-width: 1080px) { .dg-main { grid-template-columns: 1fr; } }
.dg-aside { display: flex; flex-direction: column; gap: var(--space-md); }
.dg-panel { padding: 0; overflow: hidden; }
.dg-panel + .dg-panel { margin-top: var(--space-md); }
.dg-panel__h { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.dg-panel__h h3 { font-size: 0.85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.dg-panel__h .sub { font-size: 0.75rem; color: var(--color-ink-muted); margin-left: auto; }
.dg-panel__more { display: block; padding: var(--space-sm) var(--space-md); text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--color-accent); border-top: 1px solid var(--color-border); text-decoration: none; }
.dg-panel__more:hover { background: var(--color-surface-subtle); }
.dg-panel__empty { padding: var(--space-md); }
.dg-panel .dg-cockpit, .dg-panel .dg-funil, .dg-panel .dg-tl { margin: 0; }
.dg-panel .dg-funil, .dg-panel .dg-tl { padding: var(--space-md); }
.dg-panel > #dashboard-agenda-lista { padding: 0 var(--space-md); }
.dg-panel > h2#agenda-title { padding: var(--space-sm) var(--space-md) 0; font-size: 0.85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.dg-panel > .page-header__meta, .dg-panel > #dashboard-agenda-vazia { padding: 0 var(--space-md); }
.dg-panel > .cluster { padding: 0 var(--space-md) var(--space-sm); }

/* Linha do tempo até o evento ---------------------------------------------------- */
.dg-tl__track { position: relative; height: 52px; margin: var(--space-sm) 6px 0; }
.dg-tl__line { position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: var(--color-border); }
.dg-tl__done { position: absolute; left: 0; top: 22px; height: 2px; background: var(--color-accent); }
.budget-variantes__tabela { margin-top: 4px; border-collapse: collapse; font-size: 0.8rem; width: 100%; max-width: 100%; }
.budget-current-table .budget-variantes__tabela th, .budget-current-table .budget-variantes__tabela td { padding: 2px 6px 2px 0; vertical-align: middle; border: 0; border-bottom: 1px solid var(--color-border); overflow-wrap: break-word; }
.budget-current-table .budget-variantes__tabela th { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-ink-muted); text-align: left; }
.budget-current-table .budget-variantes__tabela th:not(:first-child), .budget-current-table .budget-variantes__tabela td:not(:first-child) { width: 1%; text-align: right; white-space: nowrap; }
.budget-current-table .budget-variantes__tabela .budget-variantes__total td { border-top: 2px solid var(--color-border); border-bottom: 0; }
.budget-current-table .budget-variantes__tabela td[colspan] { width: auto; text-align: left; white-space: normal; border-bottom: 0; }
.dg-ag__act { display: flex; justify-content: flex-end; padding: 0 var(--space-md) var(--space-xs); margin-top: -4px; }
.dg-tl__m { position: absolute; transform: translateX(-50%); text-align: center; top: 0; width: 90px; }
.dg-tl__m--start { left: 0 !important; transform: none; text-align: left; }
.dg-tl__m--start .dg-tl__p { margin-left: 0; }
.dg-tl__m--end { left: auto !important; right: 0; transform: none; text-align: right; }
.dg-tl__m--end .dg-tl__p { margin-right: 0; }
.dg-tl__p { width: 9px; height: 9px; border-radius: 50%; background: var(--color-paper-white); border: 2px solid var(--color-border); margin: 18px auto 0; }
.dg-tl__p--done { background: var(--color-accent); border-color: var(--color-accent); }
.dg-tl__p--now { background: var(--color-ink); border-color: var(--color-ink); width: 11px; height: 11px; margin-top: 17px; }
.dg-tl__lb { font-family: var(--font-mono); font-size: 0.65rem; color: var(--color-ink-muted); margin-top: 5px; line-height: 1.25; }
.dg-tl__lb b { display: block; color: var(--color-ink); font-weight: 600; }
.dg-ritmo { display: flex; gap: var(--space-lg); align-items: center; padding-top: var(--space-md); border-top: 1px dashed var(--color-border); margin-top: var(--space-sm); flex-wrap: wrap; }
.dg-ritmo__b { flex: 1; min-width: 220px; }
.dg-ritmo__r { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--color-ink); margin-bottom: 3px; }
.dg-ritmo__v { font-weight: 600; color: var(--color-status-danger); white-space: nowrap; }
.dg-ritmo__v--ok { color: var(--color-status-success); }

/* Se o evento fosse amanhã ------------------------------------------------------- */
.dg-prontidao { display: flex; flex-direction: column; gap: 0; padding: var(--space-xs) var(--space-md) var(--space-md); }
.dg-prontidao__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); font-size: 0.85rem; padding: 6px 0; border-bottom: 1px dashed var(--color-border); }
.dg-prontidao__row:last-of-type { border-bottom: 0; }
.dg-prontidao__v { font-weight: 600; white-space: nowrap; }
.dg-prontidao__v--ok { color: var(--color-status-success); }
.dg-prontidao__v--warn { color: var(--color-status-warning); }
.dg-prontidao__v--risk { color: var(--color-status-danger); }
.dg-prontidao__v--muted { color: var(--color-ink-muted); font-weight: 400; }
.dg-prontidao__nota { margin: var(--space-sm) 0 0; font-size: 0.7rem; color: var(--color-ink-muted); line-height: 1.45; border-top: 1px dashed var(--color-border); padding-top: var(--space-sm); }

/* Legenda de cores — rodapé discreto, largura total, compartilhado pelos
   dashboards (Gestão e Produtor). As bolinhas reaproveitam `.dg-dot`: mesmo
   token de cor em todo lugar, de propósito — se alguém ajustar um tom, a
   legenda acompanha sozinha, sem cor própria definida aqui. */
.dg-legenda { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-lg); padding: var(--space-xs) var(--space-md); background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-label); color: var(--color-ink-muted); }
.dg-legenda__itens { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
.dg-legenda__item { display: flex; align-items: center; gap: 5px; white-space: nowrap; }

/* ---------- Fila do Financeiro (fz-) — reaproveita tokens dg-/panel ---------- */
.fz-dia { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md) var(--space-2xs); }
.fz-dia .lbl { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: .07em; text-transform: uppercase; color: var(--color-ink-muted); }
.fz-dia--hoje .lbl { color: var(--color-status-danger); }
.fz-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; padding: var(--space-sm) var(--space-md); border-left: 3px solid transparent; border-bottom: 1px solid var(--color-border); text-decoration: none; color: inherit; }
.fz-item:last-child { border-bottom: 0; }
.fz-item:hover { text-decoration: none; background: var(--color-surface-subtle); }
.fz-item--risk { border-left-color: var(--color-status-danger); }
.fz-item--warn { border-left-color: var(--color-status-warning); }
.fz-item--ok { border-left-color: var(--color-status-success); }
.fz-item__d { text-align: center; }
.fz-item__d b { display: block; font-size: 0.9rem; font-weight: 700; line-height: 1.05; }
.fz-item__d span { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--color-ink-muted); }
.fz-item__d--hoje b { color: var(--color-status-danger); }
.fz-item__c { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fz-item__t { font-size: 0.85rem; font-weight: 500; line-height: 1.3; }
.fz-item__m { font-size: 0.72rem; color: var(--color-ink-muted); }
.fz-item__tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 1px; }
.fz-item__v { text-align: right; white-space: nowrap; }
.fz-item__v b { display: block; font-size: 0.9rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.fz-item__v span { font-family: var(--font-mono); font-size: 0.62rem; color: var(--color-ink-muted); }
.fz-item--risk .fz-item__v b { color: var(--color-status-danger); }
.fz-item--warn .fz-item__v b { color: var(--color-status-warning); }
.fz-item__v--none { color: var(--color-ink-muted); font-size: 0.72rem; font-weight: 500; }

.fz-pend { padding: 2px 0 6px; }
.fz-pend__i { display: flex; gap: var(--space-sm); align-items: center; padding: var(--space-xs) var(--space-md); border-bottom: 1px solid var(--color-border); text-decoration: none; color: inherit; }
.fz-pend__i:last-child { border-bottom: 0; }
.fz-pend__i:hover { text-decoration: none; background: var(--color-surface-subtle); }
.fz-pend__n { font-size: 1.25rem; font-weight: 700; min-width: 28px; text-align: right; color: var(--color-status-warning); }
.fz-pend__c { flex: 1; min-width: 0; font-size: 0.8rem; }
.fz-pend__c b { display: block; font-weight: 500; }
.fz-pend__c span { font-size: 0.7rem; color: var(--color-ink-muted); }
.fz-pend__go { font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-accent); white-space: nowrap; }

.fz-rec { display: flex; flex-direction: column; }
.fz-rec__row { display: flex; flex-direction: column; gap: 4px; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border); text-decoration: none; color: inherit; }
.fz-rec__row:last-child { border-bottom: 0; }
.fz-rec__row:hover { text-decoration: none; background: var(--color-surface-subtle); }
.fz-rec__l { display: flex; justify-content: space-between; gap: var(--space-xs); font-size: 0.8rem; }
.fz-rec__l b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.fz-rec__f { font-size: 0.7rem; color: var(--color-ink-muted); }
.fz-rec__sub { font-size: 0.7rem; color: var(--color-ink-muted); }

.tblwrap { overflow-x: auto; }
.dg-panel table { border-collapse: collapse; width: 100%; font-size: 0.8rem; min-width: 560px; }
.dg-panel th { font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-muted); text-align: left; padding: var(--space-xs) var(--space-md); border-bottom: 1px solid var(--color-border); font-weight: 500; white-space: nowrap; }
.dg-panel td { padding: var(--space-xs) var(--space-md); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.dg-panel tr:last-child td { border-bottom: 0; }
.dg-panel td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.est { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 0.62rem; padding: 2px 7px; border-radius: 99px; white-space: nowrap; }
.est--paga { background: color-mix(in oklch, var(--color-status-success) 14%, white); color: var(--color-status-success); }
.est--boleto_emitido, .est--encaminhado_cliente { background: color-mix(in oklch, var(--color-accent) 14%, white); color: var(--color-accent); }
.est--solicitada { background: color-mix(in oklch, var(--color-status-warning) 14%, white); color: var(--color-status-warning); }
.est--pendente { background: color-mix(in oklch, var(--color-status-danger) 14%, white); color: var(--color-status-danger); }

/* ---------------------------------------------------------------------------
   Montar equipe (estande_alocacao) — resumo em uma linha, pool em lote,
   status textual, remoção confirmada. Crítica de 2026-09-04.
   --------------------------------------------------------------------------- */
.stand-overview {
  margin-bottom: var(--space-lg);
}
.stand-signals {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-xl);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.stand-signal {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xs);
  color: var(--color-ink);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.stand-signal strong {
  font-size: var(--text-headline);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stand-signal--alerta strong { color: var(--color-status-warning); }
.stand-signal__de {
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--color-ink-muted);
  letter-spacing: 0;
}
.stand-signal > span {
  font-size: var(--text-label);
  color: var(--color-ink-muted);
}
.stand-signal:hover > span,
.stand-signal:focus-visible > span {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.stand-gaps {
  flex-basis: 100%;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  font-size: var(--text-label);
}
.stand-gaps__label {
  color: var(--color-ink-muted);
}
.stand-gap {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--color-status-warning) 12%, white);
  color: color-mix(in oklch, var(--color-status-warning) 85%, black);
  border: 1px solid color-mix(in oklch, var(--color-status-warning) 35%, white);
  font-weight: 500;
}
.stand-gap--sobra { opacity: 0.6; }

/* Caixa "Camiseta/Cordão Cliente" na coluna Quantidade do orçamento: cabe na coluna. */
.budget-demanda-box { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 6px; padding-bottom: 6px; max-width: 100%; box-sizing: border-box; white-space: normal; text-align: left; overflow-wrap: anywhere; }

.section-block {
  margin-bottom: var(--space-lg);
}
.section-title {
  margin: 0;
  font-size: var(--text-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--leading-title);
  text-wrap: balance;
}
.section-subtitle { margin: 0 0 var(--space-xs); font-size: var(--text-body); font-weight: 600; color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.section-hint {
  margin: var(--space-2xs) 0 var(--space-md);
  max-width: 72ch;
  font-size: var(--text-label);
  color: var(--color-ink-muted);
}
.section-footnote {
  margin: var(--space-sm) 0 0;
  max-width: 72ch;
  font-size: var(--text-label);
  color: var(--color-ink-muted);
}

.pool-bulk-bar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-paper-white);
  box-shadow: 0 -6px 18px -12px rgb(0 0 0 / 0.25);
}
.pool-bulk-bar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
}
.pool-bulk-bar__count {
  flex: 1 1 auto;
  min-width: 12ch;
  font-variant-numeric: tabular-nums;
}
.pool-bulk-bar__field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-ink-muted);
}
.pool-bulk-bar__field select {
  min-width: 200px;
}
.pool-bulk-bar__row .btn {
  min-width: 220px;
  white-space: nowrap;
}
.pool-bulk-bar__hint {
  margin: var(--space-xs) 0 0;
  font-size: var(--text-label);
  color: var(--color-ink-muted);
}
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.data-table td select {
  max-width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-paper-white);
  padding: 6px 10px;
  font: inherit;
  font-size: var(--text-label);
  line-height: 1.3;
  color: var(--color-ink);
}
.data-table td select:hover { border-color: var(--color-ink); }
.data-table td select:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 1px;
  border-color: var(--color-focus-ring);
}
.data-table td select.htmx-request { opacity: 0.55; }
.data-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-tool-indigo);
  cursor: pointer;
}
.cell-num {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pool-linha__pendente {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-sm);
  vertical-align: middle;
}
.pool-bulk-bar__hint {
  max-width: 72ch;
}
.stand-signals--inline {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
  gap: var(--space-xs) var(--space-lg);
}
.stand-signals--inline .stand-signal strong { font-size: var(--text-title); }
/* Tela de um evento: o nome acompanha o scroll — a página tem três blocos
   (estandes, equipe, pool) e "onde estou?" não pode depender de voltar ao topo. */
.page-header--sticky {
  position: sticky;
  top: 48px;
  z-index: var(--z-sticky);
  margin: 0 calc(-1 * var(--space-md)) var(--space-lg);
  padding: var(--space-xs) var(--space-md) var(--space-sm);
  background: var(--color-paper-white);
  border-bottom: 1px solid var(--color-border);
}
.page-header__crumb {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-label);
}
.page-header__crumb a { color: var(--color-ink-muted); }
.page-header__crumb a:hover { color: var(--color-accent); }
.pool-filtro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}
.previa-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 50vh;
  overflow: auto;
  font-size: var(--text-label);
}
.previa-lista li em {
  font-style: normal;
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
}
.previa-total {
  margin: var(--space-sm) 0 0;
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-label);
  font-weight: 500;
}
.events-table__action-btn--danger {
  margin-left: var(--space-sm);
}
.pool-cliente-select {
  min-width: 150px;
}
.pool-cliente-select.is-este-estande {
  border-color: var(--color-status-success);
  color: var(--color-status-success);
  font-weight: 500;
}

.status-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 4px 10px 5px;
  border: 1px solid var(--color-border);
  border-left-width: 1px;
  border-radius: var(--radius-sm);
  background: var(--color-paper-white);
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
  line-height: 1.25;
  transition: background-color var(--duration-fast) var(--ease-out-expo),
              border-color var(--duration-fast) var(--ease-out-expo);
}
.status-chip:hover { background: var(--color-surface-subtle); border-color: var(--color-ink); }
.status-chip strong {
  font-size: var(--text-label);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.status-chip span {
  font-size: 0.75rem;
  color: var(--color-ink-muted);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-chip--verde strong { color: var(--color-status-success); }
.status-chip--amarelo strong { color: var(--color-status-warning); }
.status-chip--vermelho strong { color: var(--color-status-danger); }
.status-chip--vermelho { border-color: color-mix(in oklch, var(--color-status-danger) 40%, white); }

.status-block {
  margin-bottom: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-label);
}
.status-block--warning {
  background: color-mix(in oklch, var(--color-status-warning) 10%, white);
  color: color-mix(in oklch, var(--color-status-warning) 85%, black);
}
.status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--text-label);
}
.status-block .status-list { margin-top: 4px; }
.status-list--matriz li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-ink-muted);
}
.status-list--matriz li.is-done { color: var(--color-ink); }
.status-list__mark {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-paper-white);
}
.status-list--matriz li.is-done .status-list__mark {
  border-color: var(--color-status-success);
  background: var(--color-status-success)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E")
    center / 10px no-repeat;
}

.cell-actions .floating-tool__icon-trigger {
  width: 32px;
  height: 32px;
}
.estande-inline-form select {
  width: 168px;
}
.cell-actions__note {
  font-size: var(--text-label);
  color: var(--color-ink-muted);
  white-space: nowrap;
}
.cell-actions__danger {
  margin-left: var(--space-sm);
}

@media (max-width: 760px), (hover: none) {
  .hierarchy-dropzone--root,
  .hierarchy-toolbar__meta,
  .hierarchy-drag-handle {
    display: none;
  }
}
@media (max-width: 760px) {
  .hierarchy-cell {
    display: none !important;
  }
  .hierarchy-name-cell::before,
  .hierarchy-name-cell::after {
    display: none;
  }
  .hierarchy-name-cell {
    min-width: 0;
  }
  .hierarchy-person {
    padding-left: calc(var(--hierarchy-level, 0) * 16px);
  }
  .hierarchy-person__name {
    white-space: normal;
  }
  .stand-signals {
    gap: var(--space-sm) var(--space-lg);
  }
  .stand-signal strong { font-size: var(--text-title); }
  .pool-bulk-bar__row > * {
    width: 100%;
  }
  .pool-bulk-bar__field select {
    flex: 1;
  }
  .cell-actions {
    flex-wrap: wrap;
  }
  .status-chip span { white-space: normal; }
}

/* Fornecedor (edição): formulário à esquerda, lateral fixa com o que a pessoa
   veio conferir de relance — pendências do cadastro, logins, contagens.
   Salas fica em largura cheia abaixo porque a tabela precisa de espaço. */
.fornecedor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--space-xl);
  align-items: start;
}
.fornecedor-aside {
  position: sticky;
  top: calc(48px + 72px);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.fornecedor-aside__block { padding: var(--space-md); }
.fornecedor-aside__block + .fornecedor-aside__block { margin-top: 0; }
.fornecedor-aside__block .section-title { margin-bottom: var(--space-xs); font-size: 1rem; }
.fornecedor-form-page .panel + .panel { margin-top: 0; }
.fornecedor-form-page .panel .section-title,
.cliente-form-page .panel .section-title { padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-border); }
.fornecedor-aside__hint {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-label);
  color: var(--color-ink-muted);
  line-height: 1.45;
}
.fornecedor-pendencias,
.fornecedor-acessos {
  list-style: none;
  margin: 0 0 var(--space-sm);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--text-label);
}
.fornecedor-pendencias a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-ink);
  text-decoration: none;
}
.fornecedor-pendencias a:hover { color: var(--color-accent); }
.fornecedor-acessos li { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.fornecedor-facts { margin: 0; }
.fornecedor-facts div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border);
}
.fornecedor-facts div:last-child { border-bottom: 0; }
.fornecedor-facts dt { font-size: var(--text-label); color: var(--color-ink-muted); }
.fornecedor-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.fornecedor-identity { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
@media (max-width: 960px) {
  .fornecedor-layout { grid-template-columns: 1fr; }
  .fornecedor-aside { position: static; }
  /* Cabeçalho com 3 botões empilhados comeria meia tela de celular fixo no topo. */
  .cliente-form-page .page-header--sticky,
  .fornecedor-form-page .page-header--sticky { position: static; margin: 0 0 var(--space-lg); padding: 0; border-bottom: 0; }
}

/* Painel do Produtor: fornecedores prontos pra cotar, por tipo. Barra
   segmentada com rótulo (Status-Speaks): verde pronto, âmbar cadastro
   incompleto, cinza sem login. */
.op-forn { padding: var(--space-sm) var(--space-md) var(--space-md); display: grid; gap: var(--space-xs); }
.op-forn__row { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) 72px; align-items: center; gap: var(--space-sm); font-size: 0.8rem; color: var(--color-ink); text-decoration: none; border-radius: var(--radius-sm); }
.op-forn__row:hover { background: var(--color-row-hover); text-decoration: none; }
.op-forn__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-forn__bar { display: flex; gap: 2px; height: 12px; }
.op-forn__seg { display: block; height: 100%; }
.op-forn__seg--pronto { background: var(--color-status-success); }
.op-forn__seg--cadastro { background: var(--color-status-warning); }
.op-forn__seg--login { background: var(--color-console-gray); }
.op-forn__v { text-align: right; color: var(--color-ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.op-forn__v b { color: var(--color-ink); font-weight: 600; }
.op-forn__legend { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); margin-top: var(--space-xs); font-size: 0.75rem; color: var(--color-ink-muted); }
.op-forn__legend i { display: inline-block; width: 9px; height: 9px; margin-right: 4px; vertical-align: -1px; }
.op-forn__faltando { margin: var(--space-xs) 0 0; padding-top: var(--space-sm); border-top: 1px solid var(--color-border); font-size: 0.8rem; color: var(--color-ink-muted); line-height: 1.5; }

/* Contratos do evento: painel de envio em massa — resumo numa linha, quem
   fica de fora como nome + chips (frase inteira no title), sem parede de texto. */
.envio-massa { margin-bottom: var(--space-md); }
.envio-massa__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.envio-massa__aviso { margin: 0; max-width: 34ch; text-align: right; }
.envio-massa__fora { list-style: none; margin: var(--space-sm) 0 0; padding: var(--space-sm) 0 0; border-top: 1px solid var(--color-border); display: grid; gap: var(--space-xs); }
.envio-massa__fora li { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; font-size: var(--text-label); }
.envio-massa__nome { color: var(--color-ink); font-weight: 500; text-decoration: none; min-width: 200px; }
.envio-massa__nome:hover { color: var(--color-accent); }
.envio-massa__chips { display: inline-flex; gap: var(--space-2xs); flex-wrap: wrap; }
.envio-massa__chips .badge { text-decoration: none; }
.envio-massa__chips .badge:hover { filter: brightness(0.9); }

/* Rodapé de admin: templates usados nesta página (TemplatesUsadosMiddleware). */
.templates-usados { position: fixed; right: var(--space-sm); bottom: var(--space-sm); z-index: 40; max-width: min(28rem, calc(100vw - 2 * var(--space-sm))); font-size: 0.75rem; color: var(--color-ink-muted); }
.templates-usados > summary { display: inline-block; cursor: pointer; list-style: none; padding: 0.15rem 0.5rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg); font-family: var(--font-mono); opacity: 0.6; }
.templates-usados > summary::-webkit-details-marker { display: none; }
.templates-usados[open] > summary, .templates-usados > summary:hover { opacity: 1; }
.templates-usados ol, .templates-usados a { display: block; margin: var(--space-xs) 0 0; padding: var(--space-xs) var(--space-sm); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-floating-low); }
.templates-usados ol { list-style: decimal inside; font-family: var(--font-mono); max-height: 40vh; overflow: auto; }
.templates-catalogo__abrir { margin-left: var(--space-xs); font-family: var(--font-sans); font-size: 0.8rem; white-space: nowrap; }
.templates-catalogo__filtro { display: inline-flex; align-items: center; gap: 0.35rem; align-self: flex-end; padding-bottom: 0.45rem; font-size: 0.85rem; white-space: nowrap; }
.templates-usados__n { color: var(--color-status-warning); }
.templates-usados li.is-alterado { font-weight: 600; }
.templates-usados li small { font-weight: 400; color: var(--color-status-warning); }
.templates-usados a { display: inline; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; color: inherit; }
.templates-usados > a { display: block; margin-top: var(--space-xs); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-border); background: var(--color-bg); }

/* Cadeado do líder no estande (grupo travado: ninguém entra nem sai). */
.hierarchy-lock { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: inherit; line-height: 1; cursor: pointer; opacity: 0.45; }
.hierarchy-lock:hover, .hierarchy-lock:focus-visible { opacity: 1; border-color: var(--color-border); }
.hierarchy-lock.is-locked { opacity: 1; }
span.hierarchy-lock { cursor: default; }

/* Desempenho › Monitoramento (modelo: aba Monitoring do RDS) ---------------- */
.performance-monitor { display: grid; gap: var(--space-md); margin-bottom: var(--space-lg); }
.performance-monitor__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.performance-monitor__stamp { margin: 0; color: var(--color-ink-muted); font-size: var(--text-label); font-variant-numeric: tabular-nums; }
.performance-range { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.performance-range__chip { padding: 5px 12px; border-right: 1px solid var(--color-border); color: var(--color-ink); font-family: var(--font-mono); font-size: var(--text-label); text-decoration: none; }
.performance-range__chip:last-child { border-right: 0; }
.performance-range__chip:hover { background: var(--color-row-hover); }
.performance-range__chip.is-active { background: var(--color-ink); color: var(--color-paper-white); }
.performance-range__chip:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; }
.performance-monitor__options { display: flex; flex-wrap: wrap; gap: var(--space-md); margin: 0; font-size: var(--text-label); }
.performance-monitor__options label { display: inline-flex; align-items: center; gap: var(--space-2xs); cursor: pointer; }
.performance-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.performance-console:has(#empilhar:checked) .performance-charts { grid-template-columns: minmax(0, 1fr); }
.chart-card { display: grid; gap: var(--space-xs); padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-paper-white); min-width: 0; }
.chart-card__head { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: var(--space-sm); align-items: baseline; }
.chart-card__head h2, .chart-card__head h3 { grid-column: 1; margin: 0; font-size: var(--text-label); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--color-ink-muted); }
.chart-card__head strong { grid-column: 2; grid-row: 1 / 3; font-size: 1.6rem; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.chart-card__head strong small { font-family: var(--font-mono); font-size: .6em; font-weight: 400; letter-spacing: 0; }
.chart-card__head span { grid-column: 1; color: var(--color-ink-muted); font-size: var(--text-label); }
.chart-card--hero .chart-card__head strong { font-size: 2.4rem; }
.chart { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; margin: 0; }
.chart__svg { grid-column: 2; grid-row: 1; width: 100%; height: 120px; display: block; touch-action: none; }
.chart-card--hero .chart__svg { height: 200px; }
.chart__grid { stroke: var(--color-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart__grid--base { stroke: var(--color-console-gray); }
.chart__area { fill: var(--color-accent); fill-opacity: .1; }
.chart__line { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__dot { fill: none; stroke: var(--color-accent); stroke-width: 8; stroke-linecap: round; }
.chart__cursor { stroke: var(--color-ink); stroke-width: 1; }
/* Cortes de medição: faixa neutra (não é status) atrás da linha; a aberta ganha borda à direita. */
.chart__corte { fill: var(--color-console-gray); fill-opacity: .16; }
.chart__corte--aberto { stroke: var(--color-console-gray); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.chart__marcas { grid-column: 2; grid-row: 1; position: relative; height: 0; z-index: 1; pointer-events: none; }
.chart__marcas span { position: absolute; padding: 0 4px; border-radius: var(--radius-sm); background: color-mix(in oklch, var(--color-console-gray) 22%, var(--color-paper-white)); color: var(--color-ink-muted); font-family: var(--font-mono); font-size: .68rem; white-space: nowrap; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
.chart__axis-y { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 0 var(--space-xs) 18px 0; color: var(--color-ink-muted); font-family: var(--font-mono); font-size: .7rem; text-align: right; font-variant-numeric: tabular-nums; }
.chart__axis-x { grid-column: 2; grid-row: 2; position: relative; height: 14px; color: var(--color-ink-muted); font-family: var(--font-mono); font-size: .7rem; }
.chart__axis-x span { position: absolute; top: 0; white-space: nowrap; }
.chart__axis-x span.is-middle { transform: translateX(-50%); }
.chart__axis-x span.is-end { transform: translateX(-100%); }
.chart__tooltip { position: absolute; top: 0; z-index: 2; display: grid; padding: 6px 8px; margin-left: var(--space-xs); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-paper-white); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); font-size: var(--text-label); white-space: nowrap; pointer-events: none; }
.chart__tooltip.is-flipped { transform: translateX(calc(-100% - var(--space-md))); }
.chart__tooltip strong { font-variant-numeric: tabular-nums; }
.chart__tooltip span { color: var(--color-ink-muted); font-size: .7rem; }
.performance-monitor.htmx-request { opacity: .6; transition: opacity .2s; }
@media (max-width: 1180px) { .performance-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .performance-charts { grid-template-columns: minmax(0, 1fr); } .performance-range__chip { padding: 5px 8px; } }

/* Prévia do modelo de contrato (crítica 23/09) — papel dentro da tela de edição:
   o texto renderizado precisa parecer documento, não mais um bloco do formulário. */
.previa-modelo {
  margin-top: var(--space-sm);
}
.previa-modelo__alertas {
  margin: var(--space-xs) 0 0;
  padding-left: var(--space-md);
  font-size: var(--text-label);
}
.previa-modelo__aviso {
  font-size: var(--text-label);
  margin: var(--space-xs) 0;
}
.previa-modelo__papel {
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.previa-modelo__papel :where(h1, h2, h3) {
  font-size: var(--text-title);
}
.previa-marcador {
  display: inline-block;
  padding: 2px 8px;
  border: 1px dashed var(--color-border-strong, var(--color-border));
  border-radius: var(--radius-sm);
  font-size: var(--text-label);
  color: var(--color-text-muted);
}
.campo-codigo {
  font-family: var(--font-mono);
  font-size: var(--text-mono, 0.875rem);
}
.variavel-chip {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  padding: 2px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
}
.variavel-chip:hover {
  border-color: var(--color-accent, currentColor);
}
.variaveis-grupo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: var(--space-2xs) 0 var(--space-sm);
}

/* Legenda de fieldset com o mesmo peso do label do campo — os 39 checkboxes da tela de
   modelo não tinham agrupamento programático (crítica 23/09). */
fieldset.field {
  border: 0;
  padding: 0;
  margin: var(--space-md) 0 0;
  min-width: 0;
}
.field__legend {
  font-size: var(--text-label);
  font-weight: 500;
  padding: 0;
  margin-bottom: var(--space-2xs);
}

/* Edição inline numa célula de tabela (Financeiro › Valores por estação): a linha
   mostra o valor e um lápis; o campo só aparece quando se decide editar. */
.valor-inline > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  cursor: pointer;
  list-style: none;
  padding: 2px 6px;
  margin-left: -6px;
  border-radius: var(--radius-sm);
}
.valor-inline > summary::-webkit-details-marker { display: none; }
.valor-inline > summary:hover { background: var(--color-surface-subtle); }
.valor-inline > summary svg { color: var(--color-text-muted); flex: none; }
.valor-inline > summary:hover svg { color: var(--color-tool-indigo, currentColor); }
.valor-inline[open] > summary .valor-inline__atual { display: none; }
.valor-inline__form {
  gap: var(--space-2xs);
  align-items: center;
  margin-top: var(--space-2xs);
}

/* Quebra das pendências por etapa na lista de Contratos por evento: o total abre
   uma lista curta com o quanto falta em cada etapa do funil. */
.pendencias-tema > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}
.pendencias-tema > summary::-webkit-details-marker { display: none; }
.pendencias-tema > summary::after {
  content: '';
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  color: var(--color-text-muted);
  transition: transform var(--duration-fast) var(--ease-out-expo);
}
.pendencias-tema[open] > summary::after { transform: rotate(90deg); }
.pendencias-tema__lista {
  list-style: none;
  margin: var(--space-2xs) 0 0;
  padding: 0;
  font-size: var(--text-label);
  min-width: 210px;
}
.pendencias-tema__lista li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 2px 0;
}

/* Credenciamento do estande: como enviar ao site da BGS (24/09) — favorito à
   esquerda, os 3 passos à direita; empilha no estreito. */
.bgs-passos {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); align-items: center;
  margin-bottom: var(--space-sm); padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-subtle); border-radius: var(--radius-md);
}
.bgs-passos__favorito { display: grid; justify-items: start; gap: var(--space-2xs); padding-right: var(--space-md); border-right: 1px solid var(--color-border); }
.bgs-passos__favorito span { font-size: var(--text-label); color: var(--color-ink-muted); }
.bgs-passos__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.bgs-passos__lista li { counter-increment: passo; display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs); align-items: start; font-size: var(--text-label); }
.bgs-passos__lista li::before {
  content: counter(passo); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-ink); color: var(--color-paper-white); font-size: var(--text-label); font-weight: 600;
}
@media (max-width: 900px) {
  .bgs-passos { grid-template-columns: 1fr; }
  .bgs-passos__favorito { padding-right: 0; border-right: 0; }
  .bgs-passos__lista { grid-template-columns: 1fr; gap: var(--space-xs); }
}

/* Relatório de credenciais geradas (Henrique, 24/09): foto grande para bater com o
   rosto no CAEX; na impressão, cada cliente começa em página nova. */
.relatorio-credenciais { margin-bottom: var(--space-lg); }
.relatorio-credenciais h2 { font-size: var(--text-title); margin-bottom: var(--space-sm); }
.relatorio-credenciais__foto { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
@media print {
  .relatorio-credenciais + .relatorio-credenciais { break-before: page; }
  .relatorio-credenciais tr { break-inside: avoid; }
}

/* Tabela das credenciais geradas: linha compacta, também no PDF (24/09). */
.relatorio-credenciais__tabela { width: 100%; border-collapse: collapse; }
.relatorio-credenciais__tabela th {
  text-align: left; font-size: var(--text-label); color: var(--color-ink-muted); font-weight: 500;
  padding: var(--space-2xs) var(--space-xs); border-bottom: 1px solid var(--color-border);
}
.relatorio-credenciais__tabela td { padding: var(--space-xs); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.relatorio-credenciais__tabela td:first-child { width: 72px; }
/* Ata 27/09 §12: protocolo de entrega — a coluna existe para ser assinada à mão. */
.relatorio-credenciais__assinatura { width: 26%; min-width: 180px; border-bottom: 1px solid var(--color-ink); }
/* Foto do estado da unidade na troca de mão (§13.500): miniatura que abre a imagem
   inteira em outra aba — é equipamento, não rosto, então retangular e sem lightbox. */
.foto-custodia { display: block; height: 40px; width: auto; border-radius: var(--radius-sm); }
/* O "Escolher arquivo / Nenhum arquivo escolhido" do navegador é largo e empurra a
   coluna de ações; o título do campo diz o que é. */
input[type="file"].input-foto-inline { max-width: 150px; }

/* Folha de presença impressa (Cati, 06/10): sem foto, corrida (não uma folha por
   cliente) e com um par de campos por dia — chegada e rubrica, escritos à mão. */
.folha-presenca { margin-bottom: var(--space-lg); }
.folha-presenca h2 { font-size: var(--text-title); margin: 0; }
.folha-presenca__cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-sm); }
.folha-presenca__logo { height: 32px; width: auto; flex: none; }
.folha-presenca__tabela { width: 100%; border-collapse: collapse; }
.folha-presenca__tabela th {
  text-align: left; font-size: var(--text-label); color: var(--color-ink-muted); font-weight: 500;
  padding: var(--space-2xs) var(--space-xs); border-bottom: 1px solid var(--color-border);
}
.folha-presenca__tabela td { padding: var(--space-xs); border-bottom: 1px solid var(--color-border); }
/* Sala da folha, quando há filtro: linha própria sob o título, do tamanho do corpo —
   quem recebe o papel precisa saber de qual turma é a lista (Raphael, 09/10). */
.folha-presenca__sala { display: block; font-size: var(--text-body); font-weight: 500; margin-top: var(--space-2xs); }
/* Zebrado (Raphael, 09/10): a folha é longa e a linha de assinatura é larga — a faixa
   é o que mantém o olho na mesma pessoa do nome até a rubrica do último dia. */
.folha-presenca__tabela tbody tr:nth-child(even) { background: var(--color-surface-subtle); }
.folha-presenca__dia { text-align: center; border-left: 1px solid var(--color-border); }
/* Só nome e campos (Cati, 06/10): sem função e estação sobra largura para escrever. */
.folha-presenca__campo { width: 112px; border-bottom: 1px solid var(--color-ink); }
.folha-presenca__campo--inicio { border-left: 1px solid var(--color-border); }
/* Folha de treinamento (Raphael, 07/10): Tam. impresso + Camiseta e Crachá para o X à mão,
   estreitos — só cabe a caneta, e a largura vai para Chegada e Rubrica. */
.folha-presenca__tam { width: 44px; text-align: center; }
.folha-presenca__curto { width: 72px; }
/* Página de totais de camiseta (Raphael, 07/10): lida de longe por quem conta caixa — corpo
   grande, tamanho à esquerda e quantidade à direita. Sem borda de verso: não é folha de frente e verso. */
.folha-presenca__totais { width: 100%; border-collapse: collapse; font-size: 1.25rem; }
.folha-presenca__totais th, .folha-presenca__totais td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border); text-align: left; }
.folha-presenca__totais thead th { font-size: var(--text-label); color: var(--color-ink-muted); font-weight: 500; }
.folha-presenca__totais td, .folha-presenca__totais thead th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.folha-presenca__totais tbody th { font-weight: 700; }
.folha-presenca__totais tfoot th, .folha-presenca__totais tfoot td { border-top: 2px solid var(--color-ink); border-bottom: none; font-weight: 700; }
th.folha-presenca__totais-falta, p.folha-presenca__totais-falta, .folha-presenca__totais-falta th, .folha-presenca__totais-falta td { font-style: italic; }
/* Camiseta Cliente e Camiseta Door: uma tabela por estoque, na mesma folha. */
.folha-presenca__totais-grupo { margin: var(--space-lg) 0 var(--space-sm); font-size: 1.35rem; }
.folha-presenca__totais-grupo:first-of-type { margin-top: 0; }
/* Dia em que a pessoa não está escalada: fechado, sem linha para assinar. Cinza próprio,
   mais escuro que o zebrado (que é --color-surface-subtle): nas linhas pares o dia fechado
   ficava idêntico ao aberto. O traço escurece junto para o contraste não cair com o fundo. */
.folha-presenca__fora {
  background: color-mix(in oklch, var(--color-border) 60%, var(--color-paper-white));
  text-align: center;
  color: color-mix(in oklch, var(--color-void-black) 65%, var(--color-paper-white));
}
@media print {
  /* Medidas em mm para a página ser previsível. São 45 por folha (Raphael, 07/10) —
     antes eram 25 de 9mm, depois 50, que é o modelo que a Cati leva pra feira. 50 não
     coube: medido a 180mm, cabeçalho 9 + thead 13 + 50 linhas de 4,8 = 263mm, e a
     margem padrão do navegador com cabeçalho e rodapé joga a última linha pra página
     seguinte. 45 fecham em 239mm. `height: 4mm` no td é o piso pedido, mas
     a linha fecha em 4,8mm por causa do line-height de 8,5pt — abaixo disso não encolhe,
     e 8,5pt é o menor corpo em que nome nenhum quebra em duas linhas (conferido nos 50).
     É o que garante uma seção por página, e o que faz o verso cair atrás da frente. */
  .folha-presenca h2 { font-size: 12pt; margin: 0; }
  .folha-presenca__sala { font-size: 10pt; margin-top: 1mm; }
  .folha-presenca__cabecalho { margin: 0 0 3mm; gap: 6mm; }
  .folha-presenca__logo { height: 9mm; }
  .folha-presenca__tabela { font-size: 8.5pt; }
  .folha-presenca__tabela th { padding: 1mm 2mm; font-size: 8pt; }
  .folha-presenca__tabela td { padding: 0 2mm; height: 4mm; }
  .folha-presenca__tabela tr { break-inside: avoid; }
  .folha-presenca__totais { font-size: 16pt; }
  .folha-presenca__totais thead th { font-size: 10pt; }
  .folha-presenca__totais th, .folha-presenca__totais td { padding: 3mm 2mm; }
  /* Sem isto o navegador descarta o fundo na impressão, que é justamente onde o zebrado
     serve: quem segue a linha com a caneta está no papel, não na tela. */
  .folha-presenca__tabela tbody tr:nth-child(even) {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .folha-presenca__tam { width: 11mm; }
  .folha-presenca__curto { width: 17mm; }
  .folha-presenca + .folha-presenca { break-before: page; }
}
/* Na tela o verso aparece recuado, para a dupla frente/verso ficar visível. */
.folha-presenca--verso { border-left: 3px solid var(--color-border); padding-left: var(--space-md); }
@media print { .folha-presenca--verso { border-left: none; padding-left: 0; } }

.historico-recusa-foto > summary { font-size: var(--text-label); color: var(--color-ink-muted); }
.historico-recusa-foto__lista { margin: var(--space-2xs) 0 0; padding-left: var(--space-md); font-size: var(--text-label); }
.historico-recusa-foto__lista li + li { margin-top: var(--space-2xs); }
.relatorio-credenciais__sem-foto {
  display: grid; place-items: center; width: 64px; height: 64px; border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm); font-size: var(--text-label); color: var(--color-ink-muted);
}
@media print {
  .relatorio-credenciais__tabela td { padding: 4px 6px; }
  .relatorio-credenciais__foto, .relatorio-credenciais__sem-foto { width: 56px; height: 56px; }
  .relatorio-credenciais__tabela td:first-child { width: 64px; }
  .relatorio-credenciais__tabela thead { display: table-header-group; }
}

/* Registro operacional do estande — tela de campo (celular): alvos ≥44px,
   foto como conteúdo (grade quadrada), estado por texto e não só por cor. */
.registro-op { display: grid; gap: var(--space-lg); }
.registro-dias { position: relative; display: flex; gap: var(--space-xs); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--space-2xs); }
.registro-dia {
  flex: 0 0 auto; scroll-snap-align: center;
  display: flex; flex-direction: column; gap: 1px; min-width: 104px; min-height: 44px;
  padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-paper-white); color: var(--color-ink); text-decoration: none; white-space: nowrap;
}
.registro-dia:hover { background: var(--color-surface-subtle); text-decoration: none; }
.registro-dia__data { font-weight: 600; font-size: var(--text-label); }
.registro-dia__rotulo, .registro-dia__estado { font-size: 0.75rem; color: var(--color-ink-muted); }
.registro-dia.is-completo .registro-dia__estado { color: var(--color-status-success); font-weight: 600; }
.registro-dia.is-pendente .registro-dia__estado { color: var(--color-status-danger); font-weight: 600; }
.registro-dia__ocorrencia { color: var(--color-status-danger); font-weight: 600; }
.registro-dia[aria-current] { background: var(--color-void-black); border-color: var(--color-void-black); color: var(--color-paper-white); }
.registro-dia[aria-current] .registro-dia__rotulo,
.registro-dia[aria-current] .registro-dia__estado,
.registro-dia[aria-current] .registro-dia__ocorrencia { color: var(--color-paper-white); }

.registro-form { display: grid; gap: var(--space-md); }
.registro-form h2 { margin: 0; }
.registro-form__esperado { margin: calc(-1 * var(--space-sm)) 0 0; font-size: var(--text-label); color: var(--color-ink-muted); }
.registro-form__esperado .is-feito { color: var(--color-status-success); font-weight: 600; }
.registro-form__esperado .is-falta { color: var(--color-ink); font-weight: 600; }
.registro-momentos { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.registro-momento {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: var(--text-label); font-weight: 500; color: var(--color-ink); background: var(--color-paper-white); text-decoration: none;
}
.registro-momento:hover { background: var(--color-surface-subtle); text-decoration: none; }
.registro-momento[aria-current] { background: var(--color-void-black); border-color: var(--color-void-black); color: var(--color-paper-white); }
.registro-momentos__outros { display: contents; }
.registro-momentos__outros > summary { min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; font-size: var(--text-label); color: var(--color-ink-muted); cursor: pointer; }
.registro-momentos__outros[open] > summary { color: var(--color-ink); }

.registro-comparar { display: grid; gap: var(--space-xs); padding: var(--space-md); background: var(--color-surface-subtle); border-radius: var(--radius-md); }
.registro-comparar p { margin: 0; }
.registro-fase { border: 1px dashed var(--color-border); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); }
.registro-fase > summary { min-height: 44px; display: flex; align-items: center; font-size: var(--text-label); font-weight: 500; cursor: pointer; }
.registro-fase[open] > summary { margin-bottom: var(--space-sm); }

.registro-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-xs); }
.registro-fieldset legend { font-size: var(--text-label); font-weight: 500; margin-bottom: var(--space-xs); }
.registro-op .attendance-day-chip { min-height: 44px; }
.registro-op .attendance-day-chip:focus-within { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
/* Câmera primeiro, álbum ao lado: a câmera ocupa a linha inteira no celular. */
.registro-foto-acoes { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.registro-foto-botao { flex: 1 1 140px; justify-content: center; min-height: 52px; gap: var(--space-xs); }
/* O amarelo da tela é do Salvar, que é a ação que compromete. A câmera é o caminho
   principal da foto e se distingue por largura, altura e ícone — não por cor (07/10). */
.registro-foto-botao--camera { flex-basis: 100%; min-height: 56px; font-weight: 600; }
.registro-foto-botao--album { flex-basis: 100%; min-height: 44px; }
.registro-foto-acoes input:focus-visible + .registro-foto-botao { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.registro-painel:not([hidden]) { display: grid; gap: var(--space-lg); }
.registro-cabecalho-acoes { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.registro-estandes { position: relative; }
.registro-estandes > summary { list-style: none; }
.registro-estandes > summary::-webkit-details-marker { display: none; }
.registro-estandes__menu {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 5; min-width: 220px; max-width: calc(100vw - 2 * var(--space-md)); display: grid;
  background: var(--color-paper-white); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px color-mix(in oklch, var(--color-void-black) 12%, transparent);
}
.registro-estandes__menu a { min-height: 44px; display: flex; align-items: center; padding: 0 var(--space-md); font-size: var(--text-label); color: var(--color-ink); }
.registro-estandes__menu a:hover { background: var(--color-surface-subtle); text-decoration: none; }
.registro-estandes__menu a[aria-current] { font-weight: 600; }
.registro-previa { display: grid; gap: var(--space-xs); margin-top: var(--space-xs); font-size: var(--text-label); color: var(--color-ink-muted); }
.registro-previa__contador { margin: 0; font-weight: 600; color: var(--color-ink); }
.registro-video > summary { font-size: var(--text-label); color: var(--color-ink-muted); cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.registro-custo__campos { display: grid; gap: var(--space-xs); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.registro-item__custo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: 0; }
.registro-envio-erro { margin: 0; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-status-danger); border-radius: var(--radius-sm); color: var(--color-status-danger); font-size: var(--text-label); font-weight: 500; }
.registro-form__acoes { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.registro-form__acoes .btn-primary { flex: 1 1 220px; justify-content: center; min-height: 52px; font-size: 1rem; }
.registro-form__acoes .btn:disabled { opacity: 0.6; cursor: progress; }

/* Fotos: quadradas, em grade — a foto é a evidência, não um avatar. */
.registro-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-xs); }
.registro-fotos--grande { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.registro-foto { position: relative; display: block; padding: 0; border: 0; background: var(--color-surface-subtle); border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; cursor: zoom-in; }
.registro-fotos--grande .registro-foto { aspect-ratio: 4 / 3; }
.registro-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.registro-foto__tirar {
  position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: color-mix(in oklch, var(--color-void-black) 75%, transparent); color: var(--color-paper-white); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.registro-foto--remover { cursor: pointer; aspect-ratio: auto; display: grid; gap: 4px; background: none; font-size: var(--text-label); }
.registro-foto--remover img { aspect-ratio: 1; border-radius: var(--radius-sm); }
.registro-foto--remover:has(input:checked) img { opacity: 0.3; }

/* Histórico: um <details> por dia, o do dia escolhido aberto. */
.registro-historico { display: grid; gap: var(--space-sm); }
.registro-historico > h2 { margin: 0; }
.registro-historico-dia { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-paper-white); }
.registro-historico-dia > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); min-height: 44px; padding: var(--space-sm) var(--space-md); cursor: pointer; }
.registro-historico-dia__titulo { font-weight: 600; }
.registro-item { display: grid; gap: var(--space-sm); padding: var(--space-md); border-top: 1px solid var(--color-border); }
.registro-item p { margin: 0; }
.registro-item__h { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-sm); }
.registro-item--ocorrencia .registro-item__h strong { color: var(--color-status-danger); }
.registro-item__acoes { display: flex; gap: var(--space-xs); align-items: flex-start; }
.registro-item__acoes .btn { min-height: 44px; }
.registro-mais { position: relative; }
.registro-mais > summary { list-style: none; min-height: 44px; }
.registro-mais > summary::-webkit-details-marker { display: none; }
.registro-mais__menu {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 5; min-width: 240px; display: grid;
  background: var(--color-paper-white); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px color-mix(in oklch, var(--color-void-black) 12%, transparent);
}
.registro-mais__menu button { width: 100%; min-height: 44px; padding: 0 var(--space-md); text-align: left; border: 0; background: none; font: inherit; font-size: var(--text-label); cursor: pointer; }
.registro-mais__menu button:hover { background: var(--color-surface-subtle); }
.registro-mais__menu form + form { border-top: 1px solid var(--color-border); }
.registro-mais__menu .is-perigo { color: var(--color-status-danger); }
.registro-matriz th, .registro-matriz td { text-align: center; white-space: nowrap; }
.registro-matriz th:first-child, .registro-matriz td:first-child { text-align: left; }
.registro-matriz small { font-weight: 400; opacity: 0.7; }
.registro-matriz .is-hoje { background: var(--color-surface-subtle); }
.registro-matriz td.is-completo a { color: var(--color-status-success); font-weight: 600; }
.registro-matriz td.is-pendente a { color: var(--color-status-danger); font-weight: 600; }
.registro-ocorrencias { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-sm); }
.registro-ocorrencias p { margin: 2px 0 0; }
a.dg-exc__item { color: inherit; text-decoration: none; }
a.dg-exc__item:hover { background: var(--color-surface-subtle); }
.registro-matriz-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.registro-matriz { min-width: 0; }
.registro-matriz td:first-child { position: sticky; left: 0; background: inherit; }

/* Planta do pavilhão (_planta_estande.html + planta.js): a imagem em tamanho
   de leitura dentro de uma janela rolável, aberta já centrada no estande.
   Este estande = preto + amarelo da Door (estado ativo, DESIGN.md); os outros
   da Door = índigo. Vermelho fica para risco — e a planta da feira já tem. */
.planta {
  max-height: 70vh;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.planta:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.planta__conteudo { position: relative; width: max(100%, 1600px); margin: 0 auto; }
.planta__img { display: block; width: 100%; height: auto; user-select: none; }
.planta__estande, .planta__rascunho {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid var(--color-accent);
  background: color-mix(in oklch, var(--color-accent) 15%, transparent);
}
.planta__estande--atual {
  border: 3px solid var(--color-void-black);
  background: color-mix(in oklch, var(--color-signal-yellow) 45%, transparent);
  box-shadow: 0 0 0 3px var(--color-signal-yellow);
}
.planta__rotulo {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  padding: 1px 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-paper-white);
  background: var(--color-accent);
  border-radius: 3px;
}
.planta__estande--atual .planta__rotulo { background: var(--color-void-black); color: var(--color-signal-yellow); }
.planta__rascunho { border: 2px dashed var(--color-void-black); background: color-mix(in oklch, var(--color-signal-yellow) 35%, transparent); }
.planta--marcando .planta__conteudo { cursor: crosshair; touch-action: none; }

.planta-controles { display: grid; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.planta-controles__zoom { min-width: 36px; justify-content: center; font-size: 1rem; }
.planta-controles__marcar { margin-left: auto; }
.planta-dica {
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  border-left: 3px solid var(--color-signal-yellow);
  background: var(--color-surface-subtle);
  font-size: var(--text-label);
}
.planta-legenda { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); align-items: center; margin: 0; font-size: var(--text-label); color: var(--color-ink-muted); }
.planta-legenda__item { display: inline-flex; align-items: center; gap: 6px; }
.planta-legenda__cor { width: 14px; height: 10px; border: 2px solid var(--color-accent); background: color-mix(in oklch, var(--color-accent) 15%, transparent); }
.planta-legenda__cor--atual { border-color: var(--color-void-black); background: var(--color-signal-yellow); }
.planta-legenda__local { color: var(--color-ink); font-weight: 500; }

.planta-evento { margin-top: var(--space-md); border-top: 1px solid var(--color-border); padding-top: var(--space-sm); }
.planta-evento > summary { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: var(--text-label); }
.planta-evento > summary .visually-quiet { font-weight: 400; margin-left: 4px; }

@media (max-width: 640px) {
  .planta { max-height: 60vh; }
  .planta__conteudo { width: max(100%, 1200px); }
  .planta-controles__marcar { margin-left: 0; }
}
/* Mini da planta nos cockpits dos dashboards: janela fixa centrada no estande; o clique leva à Ficha. */
.planta--mini { height: 150px; max-height: none; overflow: hidden; }
.planta--mini .planta__conteudo { width: 600px; }
.planta--mini .planta__rotulo { font-size: 0.6875rem; padding: 0 4px; }

/* Cadastro de cliente (críticas 28/09): grade de 4 com spans nomeados, dicas ligadas
   ao campo por aria-describedby, aviso de apagamento em tom de alerta, regras de
   faturamento empilhadas, observação cresce com o texto. */
.cliente-form { gap: var(--space-lg); }
.cliente-form .panel { gap: var(--space-md); }
.cliente-acoes { gap: var(--space-sm); }
.cliente-span-2 { grid-column: span 2; }
.cliente-span-3 { grid-column: span 3; }
.cliente-span-4 { grid-column: 1 / -1; }
.cliente-form-page .hint { margin: 0; max-width: 65ch; font-size: var(--text-label); color: var(--color-ink-muted); }
.cliente-aviso {
  margin: var(--space-2xs) 0 0;
  padding: var(--space-2xs) var(--space-xs);
  border-left: 3px solid var(--color-status-warning);
  background: color-mix(in oklch, var(--color-status-warning) 10%, white);
  color: color-mix(in oklch, var(--color-status-warning) 85%, black);
  font-size: var(--text-label);
}
.cliente-identity { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.cliente-regras { display: grid; gap: var(--space-sm); margin: 0; }
.cliente-regras .hint { padding-left: var(--space-lg); }
.cliente-form-page textarea { field-sizing: content; min-height: 5lh; max-height: 24lh; }
/* Contatos: lista única com rádio "Principal" por linha (§13.399). A grade depende da
   largura da própria lista (container query), não da tela: com a lateral aberta, 1200px
   de tela davam ~800px de lista e o e-mail saía cortado (crítica 28/09). Larga: cabeçalho
   com os rótulos e rótulo por linha só para leitor de tela; estreita: cada contato empilha. */
.cliente-contatos { display: grid; container-type: inline-size; }
.cliente-contatos__outros { display: grid; }
.cliente-contato-linha {
  display: grid;
  grid-template-columns: 3.5rem 8.5rem minmax(8rem, 1fr) minmax(13rem, 1.7fr) minmax(10.5rem, 0.9fr) 10.5rem;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border);
}
.cliente-contato-cabecalho { padding-top: 0; font-size: var(--text-label); font-weight: 500; color: var(--color-ink-muted); }
.cliente-contato-principal-radio { display: flex; align-items: center; justify-content: center; gap: var(--space-2xs); min-height: 42px; cursor: pointer; }
.cliente-contato-principal-radio input { width: 24px; height: 24px; margin: 0; accent-color: var(--color-tool-indigo); }
.cliente-contatos__rodape { gap: var(--space-md); align-items: center; }
.cliente-contato-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@container (max-width: 900px) {
  .cliente-contato-cabecalho { display: none; }
  .cliente-contato-linha { grid-template-columns: 1fr; padding: var(--space-sm) 0; }
  .cliente-contato-rotulo { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-size: var(--text-label); font-weight: 500; }
  .cliente-contato-principal-radio { justify-content: flex-start; }
}
@media (max-width: 960px) {
  .cliente-span-2, .cliente-span-3 { grid-column: 1 / -1; }
}
.cliente-acesso__intro { margin: 0; }
.cliente-acesso__acoes { gap: var(--space-2xs); flex-wrap: nowrap; }
.cliente-acesso__nova { display: grid; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.cliente-acesso-portal__remover { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }
.cliente-contato-linha__acoes { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: nowrap; }
fieldset.cliente-endereco { margin: var(--space-lg) 0 0; padding-top: var(--space-md); border-top: 1px solid var(--color-border); display: grid; gap: var(--space-sm); }
.cliente-senha-provisoria { display: grid; gap: var(--space-xs); justify-items: start; margin-bottom: var(--space-sm); padding: var(--space-sm); border-left: 3px solid var(--color-status-warning); background: color-mix(in oklch, var(--color-status-warning) 10%, white); }
.cliente-senha-provisoria p { margin: 0; }
/* Diálogo de acesso do contato (crítica 29/09): blocos Acesso | Menus e rodapé fixo com uma ação principal. */
.acesso-portal .training-edit-card { gap: var(--space-md); }
.acesso-portal__fechar { min-width: 44px; min-height: 44px; }
.acesso-portal__titulo { margin: 0 0 var(--space-xs); font-size: var(--text-label); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink-muted); }
.acesso-portal__dados { display: grid; margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.acesso-portal__dados > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-sm); align-items: center; padding: var(--space-xs) var(--space-sm); min-height: 44px; }
.acesso-portal__dados > div + div { border-top: 1px solid var(--color-border); }
.acesso-portal__dados dt { font-size: var(--text-label); color: var(--color-ink-muted); }
.acesso-portal__dados dd { margin: 0; overflow-wrap: anywhere; }
.acesso-portal__senha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.acesso-portal__senha > span { margin-right: auto; }
.acesso-portal__senha form { margin: 0; }
.acesso-portal__form { display: grid; gap: var(--space-md); }
.acesso-portal__situacao { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-sm); align-items: center; }
.acesso-portal__situacao > span { font-size: var(--text-label); color: var(--color-ink-muted); }
.acesso-portal__situacao select { min-height: 44px; }
.acesso-menus { border: 0; padding: 0; margin: 0; min-width: 0; }
.acesso-menus legend { padding: 0; font-size: var(--text-label); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink-muted); }
.acesso-menus__regra { margin: var(--space-2xs) 0 var(--space-sm); }
.acesso-menus__grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-sm); }
.acesso-menus__grupo { display: grid; align-content: start; gap: 2px; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.acesso-menus__titulo { font-size: var(--text-label); font-weight: 600; color: var(--color-ink-muted); padding-bottom: 2px; }
.acesso-menus__item { display: flex; align-items: center; gap: var(--space-xs); min-height: 40px; cursor: pointer; }
.acesso-menus__item input { width: 18px; height: 18px; margin: 0; flex: none; }
.acesso-menus__item > span { display: grid; line-height: 1.25; }
.acesso-menus__item small { font-size: var(--text-label); color: var(--color-ink-muted); }
.acesso-menus__item--sub { margin-left: calc(18px + var(--space-xs)); }
.acesso-menus__item:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.acesso-portal__rodape { position: sticky; bottom: calc(var(--space-md) * -1); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm); padding-block: var(--space-sm); border-top: 1px solid var(--color-border); background: var(--color-paper-white); }
.acesso-portal__rodape-acoes { display: flex; gap: var(--space-xs); }
.acesso-portal__rodape .btn { min-height: 44px; }
@media (max-width: 480px) {
  .acesso-portal__dados > div, .acesso-portal__situacao { grid-template-columns: 1fr; gap: 2px; }
  .acesso-menus__item { min-height: 44px; }
}
.cliente-acesso-portal__permissoes { display: grid; gap: var(--space-2xs); border: 0; padding: 0; margin: 0; }
.cliente-acesso-portal__permissoes legend { padding: 0; margin-bottom: var(--space-2xs); font-weight: 600; }
.cliente-acesso-portal__permissoes label { display: flex; align-items: baseline; gap: var(--space-xs); min-height: 32px; }
.cliente-acesso-portal__situacao { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }
.condicoes-cliente { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-2xs); }
.verba-estourada { color: var(--color-status-warning); font-weight: 600; }
.cobranca-po { width: 9rem; padding: 4px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; font-size: var(--text-label); }
/* 3ª crítica (28/09): "Salvar alterações" some nas abas que não usam o form do
   cliente (Eventos é leitura; Acesso externo tem o próprio "+ Adicionar acesso"). */
/* 4ª crítica: visibility (não display) para o cabeçalho não pular ao trocar de aba, e o
   "Ativo" some junto — marcado nessas abas não teria como salvar. */
.cliente-form-page:has(#painel-eventos:not([hidden]), #painel-acesso:not([hidden])) :is(.cliente-salvar, .cliente-ativo) { visibility: hidden; }
.cliente-ativo { margin: 0; }

/* Portal do cliente: quem está no estande, com avaliação por estrelas (§13.404). */
.equipe-portal h3 { font-size: var(--text-body); font-weight: 600; margin-top: var(--space-lg); }
.equipe-portal__lista { list-style: none; padding: 0; margin: var(--space-sm) 0 0; display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
.equipe-pessoa { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); background: var(--color-paper-white); }
.equipe-pessoa__id { display: flex; align-items: center; gap: var(--space-sm); }
.equipe-pessoa__sem-foto { display: block; background: var(--color-surface-subtle); border-radius: var(--radius-full, 999px); flex: none; }
.equipe-pessoa__avaliacao summary { cursor: pointer; margin-top: var(--space-sm); font-size: var(--text-label); font-weight: 500; }
.equipe-pessoa__avaliacao form { margin-top: var(--space-sm); }
.estrelas { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-xs); }
.estrelas legend { float: left; font-size: var(--text-label); }
.estrelas__opcoes { display: inline-flex; flex-direction: row-reverse; }
.estrelas__opcoes input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.estrelas__opcoes label { cursor: pointer; padding: 1px; font-size: 1.25rem; line-height: 1; color: var(--color-border); }
.estrelas__opcoes label::before { content: "★"; }
.estrelas__opcoes input:checked ~ label,
.estrelas__opcoes label:hover,
.estrelas__opcoes label:hover ~ label { color: var(--color-status-warning, #955708); }
.estrelas__opcoes input:focus-visible + label { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Acompanhamento do evento (portal do cliente e link por token), sem estilo inline (§13.405). */
.acompanhamento { max-width: 1100px; margin: 0 auto; }
.acompanhamento--publico { padding: var(--space-xl) var(--space-md); }
.acompanhamento__topo .cluster { margin-top: var(--space-2xs, 4px); }
.badge-neutro { background: var(--color-surface-subtle); color: var(--color-void-black); border: 1px solid var(--color-border); }
.acompanhamento__numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-sm); margin: 0; }
.acompanhamento__numeros .panel { margin: 0; }
.acompanhamento__numeros dt { font-size: var(--text-label); color: var(--color-ink-muted); }
.acompanhamento__numeros dd { margin: 0; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.acompanhamento__grade { overflow-x: auto; }
.acompanhamento__grade .data-table { min-width: 0; }
.acompanhamento__grade th[scope="row"] { text-align: left; }
.acompanhamento__grade td { font-variant-numeric: tabular-nums; }
.acompanhamento__rotulo { font-size: 11px; fill: var(--color-ink-muted); }
.acompanhamento__rotulo--realizado { fill: var(--color-tool-indigo-dim); font-weight: 600; }
.acompanhamento__eixo { font-size: 10px; fill: var(--color-ink-muted); }
.acompanhamento__registros { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-sm); }
.acompanhamento__registros .panel { margin: 0; }
.acompanhamento__registros img { max-width: 120px; border-radius: var(--radius-md); }
.app-sidebar__secao-titulo { display: block; padding: 4px var(--space-xs); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-sidebar__item--secao { padding-left: calc(var(--space-xs) + 8px); }
/* Histórico de eventos do cliente (28/09): lista compacta por ano, uma linha por estande
   em colunas (evento + coordenação · período · equipe · ficha). Abre a equipe só quando há
   equipe; antes eram 11 cards altos com a informação numa frase corrida. */
.cliente-eventos { display: grid; }
.cliente-evento__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9rem 7rem 19rem 2.5rem;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-sm) var(--space-xs) var(--space-sm) var(--space-lg);
  position: relative;
}
.cliente-eventos__cabecalho { padding-top: 0; padding-bottom: var(--space-xs); font-size: var(--text-label); font-weight: 500; color: var(--color-ink-muted); border-bottom: 1px solid var(--color-border); }
.cliente-eventos__ano { margin: var(--space-md) 0 0; padding: var(--space-xs) 0; font-size: var(--text-label); font-weight: 600; color: var(--color-ink-muted); letter-spacing: .04em; }
.cliente-evento-item { border-bottom: 1px solid var(--color-border); }
summary.cliente-evento__linha { cursor: pointer; list-style: none; }
summary.cliente-evento__linha::-webkit-details-marker { display: none; }
summary.cliente-evento__linha::before {
  content: ''; position: absolute; left: var(--space-2xs); top: 50%;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transform: translateY(-50%); transition: transform var(--duration-fast) var(--ease-out-expo);
}
.cliente-evento[open] > summary.cliente-evento__linha::before { transform: translateY(-50%) rotate(90deg); }
summary.cliente-evento__linha:hover { background: var(--color-surface-subtle); }
.cliente-evento__nome { display: grid; gap: 2px; min-width: 0; }
.cliente-evento__nome strong { overflow-wrap: anywhere; }
.cliente-evento__coord { font-size: var(--text-label); color: var(--color-ink-muted); }
.cliente-evento__periodo, .cliente-evento__total { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cliente-evento-item { position: relative; min-width: 0; }
.cliente-evento { min-width: 0; }
/* Link fora do <summary>, sobreposto à 4ª coluna da linha (o summary reserva o lugar). */
.cliente-evento__ficha { position: absolute; top: 6px; right: var(--space-2xs); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-sm); color: var(--color-ink-muted); }
.cliente-evento__ficha:hover { color: var(--color-tool-indigo); background: var(--color-surface-subtle); }
/* Portal do cliente: sobreposto à 4ª coluna (o summary reserva o lugar), à esquerda da ficha (§13.435). */
.cliente-evento__liberar { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 34px; cursor: pointer; font-size: var(--text-label); color: var(--color-ink-muted); white-space: nowrap; }
.cliente-evento__menus { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; min-width: 0; padding: 0 var(--space-xs); border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; font-size: var(--text-label); cursor: pointer; text-align: left; }
.cliente-evento__menus span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cliente-evento__menus:hover { border-color: var(--color-border); background: var(--color-surface-subtle); }
.cliente-evento__liberar input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.cliente-acesso-portal__acao { margin-top: var(--space-2xs); padding-top: var(--space-xs); border-top: 1px solid var(--color-border); }
.cliente-evento__portal { position: absolute; top: 6px; right: calc(2.5rem + var(--space-md) + var(--space-2xs)); width: 19rem; min-height: 34px; display: flex; align-items: center; gap: var(--space-2xs); }
.cliente-evento__resumo { margin: 0 0 var(--space-sm); font-size: var(--text-label); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.cliente-evento__equipe { padding: 0 0 var(--space-md) var(--space-lg); }
.cliente-evento__foto { width: 44px; }
@container (max-width: 700px) {
  /* Estreito: nome em cima, período e equipe numa linha menor embaixo; o padding
     da direita guarda o lugar do "Ficha do estande" (absoluto, fora do summary). */
  .cliente-evento__linha { grid-template-columns: auto auto minmax(0, 1fr); column-gap: var(--space-sm); row-gap: 2px; padding-right: 3rem; }
  .cliente-evento__nome { grid-column: 1 / -1; }
  .cliente-evento__linha > span[aria-hidden="true"] { display: none; }
  .cliente-eventos__cabecalho { display: none; }
  .cliente-evento__periodo, .cliente-evento__total { font-size: var(--text-label); color: var(--color-ink-muted); }
  .cliente-evento__portal { position: static; width: auto; padding: 0 0 var(--space-sm) var(--space-lg); }
}
.cliente-eventos { container-type: inline-size; }
.pessoa-com-foto { display: inline-flex; align-items: center; gap: var(--space-sm); }

/* Equipe por estação no portal do cliente: índice, busca e progresso (§13.408). */
.equipe-portal__topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.equipe-portal__progresso { margin: 0; font-size: var(--text-label); font-weight: 600; font-variant-numeric: tabular-nums; }
.equipe-portal__ferramentas { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); margin-top: var(--space-sm); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); }
.equipe-portal__busca input { width: 16rem; max-width: 100%; }
.equipe-portal__indice { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.equipe-portal__indice button { flex: none; padding: 4px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-full, 999px); background: var(--color-paper-white); font: inherit; font-size: var(--text-label); color: var(--color-void-black); white-space: nowrap; cursor: pointer; }
.equipe-portal__indice button:hover { background: var(--color-surface-subtle); }
.equipe-portal__indice button[aria-pressed='true'] { background: var(--color-void-black); border-color: var(--color-void-black); color: var(--color-paper-white); }
.equipe-portal__indice button[aria-pressed='true'] span { color: inherit; opacity: .75; }
.equipe-portal__indice span { color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
/* Chips de filtro entre as abas e a tabela (prévia do talento, §13.666): sem respiro colavam na tabela. */
.tabpanel > .equipe-portal__indice { margin: var(--space-sm) 0; }
.equipe-estacao__progresso { font-size: var(--text-label); font-weight: 500; color: var(--color-ink-muted); }
.equipe-pessoa--destaque { border-color: color-mix(in oklch, var(--color-tool-indigo) 35%, var(--color-border)); }
.equipe-pessoa__nome { display: flex; flex-direction: column; min-width: 0; }
.equipe-pessoa__nome small { font-size: var(--text-label); color: var(--color-ink-muted); }
.equipe-pessoa .equipe-pessoa__sem-foto { display: grid; place-items: center; width: 48px; height: 48px; font-weight: 600; color: var(--color-ink-muted); }
.equipe-pessoa__avaliada { color: var(--color-status-success); font-weight: 600; }
/* Avaliacao fechada pelo prazo: as notas viram leitura no lugar do formulario. */
.equipe-pessoa__notas { list-style: none; padding: 0; margin: var(--space-2xs) 0 0; font-size: var(--text-label); color: var(--color-ink-muted); }
@media (max-width: 720px) {
  .equipe-portal__busca, .equipe-portal__busca input { width: 100%; }
  .equipe-portal__indice { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; }
}
.equipe-portal__linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); width: 100%; }
.equipe-portal__visoes { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.equipe-portal__visoes button { padding: 6px 14px; border: 0; background: var(--color-paper-white); font: inherit; font-size: var(--text-label); font-weight: 500; cursor: pointer; }
.equipe-portal__visoes button + button { border-left: 1px solid var(--color-border); }
.equipe-portal__visoes button[aria-pressed='true'] { background: var(--color-void-black); color: var(--color-paper-white); }

/* Portal: título = seção, evento como contexto; barra de ferramentas da Equipe (§13.414). */
.acompanhamento__topo--portal h1 { margin-top: var(--space-2xs); }
.acompanhamento__contexto { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-sm); margin: 0; font-size: var(--text-label); color: var(--color-ink-muted); }
.acompanhamento__contexto > span:first-child { font-weight: 600; color: var(--color-void-black); }
.equipe-portal__ferramentas { margin-top: 0; padding: var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle); }
.equipe-portal__busca input { background: var(--color-paper-white); }
.equipe-portal__contagem { margin: 0 0 0 auto; font-size: var(--text-label); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.equipe-portal__nota { margin: var(--space-sm) 0 0; font-size: var(--text-label); color: var(--color-ink-muted); }
.equipe-portal__escala { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-xs) var(--space-md); margin-bottom: var(--space-lg); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle); }
/* Estrelas em cima, rótulo embaixo: em linha a régua ocupava a largura toda (Raphael, 15/10).
   `column-reverse` porque no HTML o rótulo vem antes, e é ele que o leitor de tela lê primeiro.
   O `>` é essencial: sem ele a regra pegava também o span das estrelas, que virava coluna e
   mandava as vazias para a linha de cima. */
.equipe-portal__escala > span { display: inline-flex; flex-direction: column-reverse; align-items: center; gap: 0; line-height: 1.3; }
.equipe-portal__escala > span + span { padding-left: var(--space-md); border-left: 1px solid var(--color-border); }
.equipe-portal__escala .escala-estrelas { white-space: nowrap; }
.escala-estrelas { color: var(--color-status-warning, #955708); font-size: 1rem; line-height: 1; }
.escala-estrelas i { color: var(--color-border); font-style: normal; }
.relatorio-pessoa { margin-top: var(--space-2xs, 4px); border-bottom: 1px solid var(--color-border); }
.relatorio-pessoa > summary { font-size: 1rem; }
/* Mesmas larguras da tabela de dentro, para o fechado e o aberto lerem como a mesma coisa. */
.relatorio-pessoa__nome { width: 14rem; }
.relatorio-pessoa__notas { width: 16rem; }
.relatorio-pessoa__contexto { margin-left: auto; white-space: nowrap; }
.relatorio-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); margin-bottom: var(--space-sm); }
.relatorio-resumo h3 { margin: 0; }
/* Tudo numa linha só, em corpo menor (Raphael, 15/10): empilhado, o resumo do grupo ocupava
   quatro linhas antes da primeira pessoa. */
.relatorio-resumo__notas { width: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs, 4px) var(--space-md); font-size: var(--text-label); }
.relatorio-resumo__notas li { gap: var(--space-2xs, 4px); }
.relatorio-resumo__notas li + li { padding-left: var(--space-md); border-left: 1px solid var(--color-border); }
.relatorio-resumo__notas .escala-estrelas { font-size: 0.9rem; }
.relatorio-avaliador { margin-top: var(--space-md); }
.relatorio-avaliador > summary { cursor: pointer; font-size: var(--text-h3, 1.1rem); padding: var(--space-2xs, 4px) 0; display: flex; align-items: center; gap: var(--space-2xs, 4px); list-style: none; }
.relatorio-avaliador__foto { width: 1.75rem; height: 1.75rem; border-radius: 50%; object-fit: cover; cursor: zoom-in; }
/* `display: flex` no summary apaga o marcador nativo do <details>: a seta volta aqui. */
.relatorio-avaliador > summary::-webkit-details-marker { display: none; }
.relatorio-avaliador > summary::before { content: "▸"; color: var(--color-ink-muted); }
.relatorio-avaliador[open] > summary::before { content: "▾"; }
.relatorio-avaliador__tabela { table-layout: fixed; }
.relatorio-col--foto { width: 3.5rem; }
.relatorio-col--pessoa { width: 14rem; }
.relatorio-col--notas { width: 16rem; }
.relatorio-notas { list-style: none; margin: 0; padding: 0; }
.relatorio-notas li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); white-space: nowrap; }
@media (max-width: 720px) { .equipe-portal__contagem { margin-left: 0; } }

/* Distribuição e estoque do portal: brindes com sobra e ritmo, equipamentos como inventário (§13.416). */
.brindes__manchete { margin: 0 0 var(--space-2xs); font-size: 1.0625rem; }
.brindes__lista { display: grid; gap: var(--space-2xs); margin-top: var(--space-sm); }
.brinde { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-paper-white); }
.brinde__linha { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr) 120px 10.5rem; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); cursor: pointer; list-style: none; }
.brinde__linha::-webkit-details-marker { display: none; }
.brinde__linha:hover { background: var(--color-surface-subtle); }
.brinde__nome { font-weight: 600; }
.brinde__progresso { display: grid; gap: 4px; }
.brinde__barra { display: block; height: 6px; border-radius: 3px; background: var(--color-surface-subtle); overflow: hidden; }
.brinde__barra > span { display: block; height: 100%; background: var(--color-tool-indigo); }
.brinde__numeros, .brinde__sobra { font-size: var(--text-label); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.brinde__numeros strong, .brinde__sobra strong { color: var(--color-void-black); font-weight: 600; }
.brinde__mini { width: 120px; height: 32px; color: var(--color-ink-muted); }
.brinde__linha .badge { justify-self: end; }
.brinde__grafico { margin: 0; padding: 0 var(--space-md) var(--space-md); }
.brinde__grafico svg { display: block; width: 100%; max-width: 480px; background: var(--color-surface-subtle); border-radius: var(--radius-md); }
.brinde__grafico .acompanhamento__rotulo { font-size: 11px; }
.brinde__grafico .acompanhamento__eixo { font-size: 10px; }
.brinde__grafico figcaption { margin-top: var(--space-2xs); font-size: var(--text-label); }
/* Equipamentos em lista: nome à esquerda, quantidade à direita (Raphael, 28/09, captura). */
.equipamentos { list-style: none; padding: 0; margin: var(--space-sm) 0 0; max-width: 40rem; }
.equipamentos li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-border); }
.equipamentos strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Minigráfico só quando sobra largura (menu lateral aberto come ~270px). */
@media (max-width: 1180px) {
  .brinde__mini { display: none; }
  .brinde__linha { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr) 10.5rem; }
}
@media (max-width: 720px) {
  .brinde__linha { grid-template-columns: 1fr auto; gap: var(--space-2xs) var(--space-sm); }
  .brinde__nome { grid-column: 1 / -1; }
  .brinde__progresso { grid-column: 1 / -1; }
  .brinde__mini { display: none; }
  .brinde__grafico .acompanhamento__rotulo { font-size: 15px; }
  .brinde__grafico .acompanhamento__eixo { font-size: 14px; }
}

/* Resumo do portal como painel: um card por seção (§13.419). */
.painel { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--space-sm); }
.painel__card { display: flex; flex-direction: column; gap: 4px; padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-paper-white); }
.painel__card--alerta { border-left: 3px solid var(--color-status-warning); box-shadow: 0 1px 3px rgb(0 0 0 / .06); }
.painel__card header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-2xs); }
.painel__card h2 { margin: 0; font-size: var(--text-label); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink-muted); }
.painel__card header a { font-size: var(--text-label); white-space: nowrap; }
.painel__numero { margin: 0; font-size: 2rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.painel__numero small { font-size: var(--text-body); font-weight: 400; color: var(--color-ink-muted); }
.painel__linha { margin: 0; color: var(--color-ink-muted); }
.painel__linha strong { color: var(--color-void-black); }
.painel__ok { margin: var(--space-2xs) 0 0; color: var(--color-status-success); font-weight: 500; }
.painel__alertas { list-style: none; padding: 0; margin: var(--space-2xs) 0 0; display: grid; gap: 4px; font-size: var(--text-label); }
.painel__alertas li { display: flex; align-items: baseline; gap: var(--space-xs); }
.painel__alertas .badge { flex: none; min-width: 4.5rem; justify-content: center; }

/* Extras e Financeiro do portal (§13.420). */
.extras-lista { list-style: none; padding: 0; margin: var(--space-sm) 0 0; display: grid; gap: var(--space-2xs); }
.extra-card { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-paper-white); }
.extra-card--pendente { border-left: 3px solid var(--color-status-warning); box-shadow: 0 1px 3px rgb(0 0 0 / .06); }
.extra-card__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.extra-card__resposta { font-size: var(--text-label); }
.extra-card__valor { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.extra-pedido { margin-top: var(--space-sm); max-width: 44rem; }
.extra-pedido .cluster { align-items: flex-end; }
.financeiro-atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-sm); }
.financeiro-atalho { display: flex; flex-direction: column; gap: 4px; margin: 0; color: inherit; }
a.financeiro-atalho:hover { text-decoration: none; background: var(--color-surface-subtle); }
.financeiro__valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Lote com as linhas e o de acordo por linha dentro do portal (§13.428). */
.extra-lote { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-paper-white); overflow: hidden; }
.extras-portal p.visually-quiet { max-width: 65ch; }
/* Pedido de extra por tipo (§13.432): botão ao lado das abas e diálogo com cartões de tipo. */
/* O diálogo mora dentro de .extras-portal.stack: o margin-top do .stack tirava ele do lugar.
   Preso pelo topo, não centrado: trocar de tipo muda a altura e os cartões não podem pular (crítica 28/09). */
.extras-portal > dialog.pedido-extra { margin: 8vh auto auto; }
.extras-portal__barra { display: flex; align-items: flex-end; gap: var(--space-sm); border-bottom: 1px solid var(--color-border); }
.extras-portal__barra > .tabs { border-bottom: 0; flex: 1; min-width: 0; }
.extras-portal__barra > .extras-portal__pedir { margin-bottom: 6px; flex: none; }
.pedido-extra .field :is(input, select), .pedido-extra .btn, .pedido-extra__fechar { min-height: 44px; }
.pedido-extra__fechar { min-width: 44px; }
@media (max-width: 760px) {
  /* Folha colada no rodapé, como os outros diálogos (training-dialog). */
  .extras-portal > dialog.pedido-extra { margin: auto auto 0; }
}
.pedido-extra__acoes { position: sticky; bottom: calc(var(--space-md) * -1); padding-block: var(--space-sm); border-top: 1px solid var(--color-border); background: var(--color-paper-white); }
.pedido-extra fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.pedido-extra legend { padding: 0; margin-bottom: var(--space-2xs); font-weight: 600; }
.pedido-extra__tipos > div, .pedido-extra__tipos { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.pedido-extra__tipos legend { width: 100%; }
.pedido-extra__tipo { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; font-weight: 600; }
.pedido-extra__tipo input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pedido-extra__tipo:has(:checked) { border-color: var(--color-void-black); background: var(--color-void-black); color: var(--color-paper-white); }
.pedido-extra__tipo:has(:focus-visible) { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.pedido-extra__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-sm); }
.pedido-extra__campos[hidden] { display: none; }
.pedido-extra__campos > .pedido-extra__dias, .pedido-extra__campos > p { grid-column: 1 / -1; }
.pedido-extra__dias { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.pedido-extra__dias legend { width: 100%; font-weight: 400; font-size: var(--text-label); }
.pedido-extra__dias label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; }
.pedido-extra__dias label:has(:checked) { border-color: var(--color-void-black); background: var(--color-surface-subtle); font-weight: 600; }
.pedido-extra__acoes { justify-content: flex-end; }
.extras-portal__regra { margin: 0 0 var(--space-xs); }
.extra-linha__aviso { margin: 0; font-size: var(--text-label); color: var(--color-status-danger, #b42318); text-align: right; }
.extra-lote .btn:disabled { opacity: .5; cursor: not-allowed; }
.extra-lote.extra-card--pendente { border-left: 3px solid var(--color-status-warning); }
.extra-lote > .extra-card { border: 0; border-radius: 0; background: transparent; }
.extra-linhas { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--color-border); }
.extra-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(13rem, auto); align-items: start; gap: var(--space-md); padding: var(--space-sm) var(--space-md); }
.extra-linha + .extra-linha { border-top: 1px solid var(--color-border); }
.extra-linha > .extra-card__valor { padding-top: 2px; }
.extra-linha__resposta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.extra-linha__form { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2xs); }
.extra-linha__form textarea { width: 100%; min-width: 16rem; }
.extra-lote__todas { display: flex; justify-content: flex-end; padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--color-border); background: var(--color-surface-subtle); }
.financeiro-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-sm); margin: 0; }
.financeiro-resumo > div { padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-paper-white); }
.financeiro-resumo dt { font-size: var(--text-label); color: var(--color-ink-muted); }
.financeiro-resumo dd { margin: 2px 0 0; font-size: var(--text-title); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.financeiro-resumo p { margin: 4px 0 0; font-size: var(--text-label); color: var(--color-ink-muted); }
.financeiro-resumo > .financeiro-resumo__aprovar { border-left: 3px solid var(--color-status-warning); }
.financeiro-atalhos { align-items: stretch; }
.financeiro-atalhos > .panel { margin: 0; }
.financeiro-atalho--indisponivel { background: transparent; border-style: dashed; box-shadow: none; }
.financeiro-atalho--indisponivel strong { color: var(--color-ink-muted); }
.financeiro-resumo > .financeiro-resumo__vencido { border-left: 3px solid var(--color-status-danger, #b42318); }
.financeiro-resumo__vencido dd { color: var(--color-status-danger, #b42318); }
@media (max-width: 720px) {
  .extra-card { grid-template-columns: 1fr auto; }
  .extra-card__texto { grid-column: 1 / -1; }
  .extra-linha { grid-template-columns: 1fr auto; }
  .extra-linha > .extra-card__texto { grid-column: auto; }
  .extra-linha__resposta { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .extra-linha__form { flex: 1 1 100%; align-items: stretch; }
  .financeiro-resumo dd { font-size: var(--text-body); }
  .extra-linha__form .cluster > .btn { flex: 1; min-height: 44px; }
  .extra-linha__form .cluster > .btn-primary { flex: 2; white-space: nowrap; }
  .extra-linha__form textarea { min-width: 0; }
  .extra-lote__todas .btn { flex: 1; min-height: 44px; }
}
.pedidos-extra { border-left: 3px solid var(--color-status-warning); box-shadow: 0 1px 3px rgb(0 0 0 / .06); margin-bottom: var(--space-md); }
.pedidos-extra h2 { margin: 0 0 var(--space-sm); font-size: var(--text-title); }
.pedidos-extra ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-sm); }
.pedidos-extra__item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-sm); }
.pedidos-extra__item > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 20rem; }
.pedidos-extra__recusar[open] { flex-basis: 100%; }
/* 4ª crítica (28/09) */
/* "Salvar" só chama atenção quando há o que salvar (dirty_guard.js marca data-sujo). */
.cliente-salvar:not([data-sujo]) { background: transparent; color: var(--color-ink-muted); border-color: var(--color-border); }
.cliente-faltas { display: inline-block; white-space: normal; max-width: 100%; }
.cliente-faltas a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cliente-acesso__vazio { margin: var(--space-sm) 0; }
.cliente-acesso__nova { margin-top: var(--space-md); }
.cliente-contato-remover { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-ink-muted); cursor: pointer; }
.cliente-contato-remover input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cliente-contato-remover:hover { color: var(--color-status-danger, #b42318); border-color: currentColor; }
.cliente-contato-remover:has(:checked) { color: var(--color-paper-white); background: var(--color-status-danger, #b42318); border-color: transparent; }
.cliente-contato-remover:has(:focus-visible) { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.cliente-contato-linha:has([name$="-DELETE"]:checked) :is(input:not([type="radio"]):not([type="checkbox"]), select) { text-decoration: line-through; opacity: .55; }

/* Seletor PT | EN do portal do cliente (§13.422). */
.portal-idioma { display: inline-flex; border: 1px solid currentColor; border-radius: var(--radius-sm); margin: 0; opacity: .9; }
/* Área de toque de 44 px sem aumentar o desenho: a largura vem do min-width e a altura do ::after (§13.428). */
.portal-idioma button { position: relative; min-width: 44px; padding: 2px 8px; border: 0; background: transparent; color: inherit; font: inherit; font-size: var(--text-label); font-weight: 600; letter-spacing: .04em; cursor: pointer; }
.portal-idioma button::after { content: ""; position: absolute; inset: -10px 0; }
.portal-idioma button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.portal-idioma button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.portal-idioma button[aria-pressed='true'] { background: var(--color-signal-yellow, #ff0); color: var(--color-void-black); }
.panel > .portal-idioma { float: right; color: var(--color-void-black); }

/* Brindes: card abre com seta, alerta com borda lateral, data do esgotamento; fotos dos registros ampliam (§13.424). */
.brinde__linha { position: relative; padding-right: calc(var(--space-md) + 1.5rem); }
.brinde__linha::after { content: ""; position: absolute; right: var(--space-md); top: 50%; width: .5rem; height: .5rem; border-right: 2px solid var(--color-ink-muted); border-bottom: 2px solid var(--color-ink-muted); transform: translateY(-70%) rotate(45deg); transition: transform var(--duration-base, .2s) var(--ease-out-expo, ease); }
.brinde[open] > .brinde__linha::after { transform: translateY(-30%) rotate(-135deg); }
.brinde--alerta { border-left: 3px solid var(--color-status-warning); box-shadow: 0 1px 3px rgb(0 0 0 / .06); }
.brinde__nome small { display: block; font-size: var(--text-label); font-weight: 500; color: var(--color-status-danger); }
@media (prefers-reduced-motion: reduce) { .brinde__linha::after { transition: none; } }

/* Registros do portal em lista; a foto abre sob demanda (§13.426). */
.registros-lista { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--color-border); }
.registro-linha { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; align-items: start; gap: var(--space-md); padding: var(--space-sm) 0 var(--space-sm) var(--space-sm); border-bottom: 1px solid var(--color-border); border-left: 3px solid transparent; }
.registro-linha--ocorrencia { border-left-color: var(--color-status-warning); }
.registro-linha__quando { display: flex; flex-direction: column; gap: 2px; }
.registro-linha__quando span { font-size: var(--text-label); color: var(--color-ink-muted); }
.registro-linha__texto { margin: 0; }
.registro-linha__fotos .btn { white-space: nowrap; }
@media (max-width: 720px) {
  .registro-linha { grid-template-columns: 1fr auto; }
  .registro-linha__texto { grid-column: 1 / -1; grid-row: 2; }
}

/* Currículo no portal do cliente: ícone no card da equipe e a página (§13.427). */
.equipe-pessoa__curriculo { margin-left: auto; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm); color: var(--color-ink-muted); flex: none; }
.equipe-pessoa__curriculo:hover { background: var(--color-surface-subtle); color: var(--color-void-black); }
.curriculo-portal { max-width: 800px; }
.curriculo-portal__acoes { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); margin: 0; }
.curriculo-portal__topo { display: flex; align-items: center; gap: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 3px solid var(--color-void-black); }
.curriculo-portal__topo h1 { margin: 4px 0 0; }
.curriculo-portal__rosto { width: 120px; height: 120px; border-radius: var(--radius-full, 999px); object-fit: cover; border: 1px solid var(--color-border); flex: none; }
.curriculo-portal__rosto--vazio { display: grid; place-items: center; background: var(--color-surface-subtle); font-size: 2.5rem; font-weight: 600; color: var(--color-ink-muted); }
.curriculo-portal__seu { color: var(--color-status-warning); cursor: help; }
.curriculo-portal__galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-sm); }
.curriculo-portal__galeria .photo-thumb img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); }
.curriculo-portal__rodape { margin-top: var(--space-lg); font-size: var(--text-label); color: var(--color-ink-muted); text-align: center; }
@media print {
  .app-topbar, .app-sidebar, .curriculo-portal__acoes, .skip-link { display: none !important; }
  .app-main { padding: 0 !important; }
}


/* Composição de valores por pessoa — a tela de Valores por função e a gaveta
   da pessoa no estande mostram a mesma conta; a regra mora aqui pra não existirem
   duas definições dela (30/09). */
.proposal-comp {
  display: grid;
  /* sinal · quantidade · "R$" · número alinhado à direita · descrição (Raphael, 29/09) */
  grid-template-columns: 1ch auto auto auto minmax(0, 1fr);
  column-gap: 1ch;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: var(--text-label);
  line-height: 1.6;
  white-space: nowrap;
}

.proposal-comp__sinal {
  color: var(--color-ink-muted);
}

.proposal-comp__valor {
  text-align: right;
}

.proposal-linha__fora {
  color: var(--color-ink-muted);
  font-size: var(--text-label);
}

.proposal-amount {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.95rem;
  white-space: nowrap;
}

.proposal-amount--strong {
  font-size: 1.05rem;
  font-weight: 600;
}

/* Gaveta da pessoa no estande: os fatos (treinamento, valores, contrato, presença)
   em linhas de rótulo → fato → ação, em vez de um título de seção por fato. Cinco
   títulos para seis linhas de informação era o que deixava a gaveta confusa
   (Raphael, 30/09). */
.fato-lista {
  display: grid;
  margin-top: var(--space-lg);
}
.fato {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-border);
}
.fato__rotulo {
  color: var(--color-ink-muted);
  font-size: var(--text-label);
}
.fato__valor {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin: 0; /* <dd> nativo vem com margin-inline-start: 40px */
}
.fato__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: var(--text-label);
}
.fato__acoes a {
  display: inline-flex;
  align-items: center;
  min-height: 26px; /* WCAG 2.2 AA 2.5.8 pede 24; o link de 13px dava 19,5 */
}
@media (max-width: 600px) {
  .fato {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* A descrição da composição quebra linha; só os números é que não podem quebrar.
   Em 375px a linha inteira era cortada por `overflow-x: hidden` (crítica 30/09). */
.proposal-comp > span:nth-child(5n) {
  white-space: normal;
}

/* Andar pela equipe de dentro da gaveta (↑/↓ ou os dois botões). A posição fica
   entre eles pra pessoa saber onde está em 140 linhas. */
.drawer-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}
.drawer-nav .btn {
  padding: 6px 10px;
  line-height: 1;
}
.drawer-nav .btn[disabled] {
  opacity: 0.4;
  cursor: default;
}
.drawer-nav__posicao {
  font-size: var(--text-label);
  white-space: nowrap;
}

/* Sangria de brindes (acesso operacional, celular do produtor — Raphael, 10/10):
   uma linha por brinde, saldo à vista, quantidade + Registrar sem trocar de tela. */
.sangria { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2xs); }
.sangria__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-xs) var(--space-md); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-paper-white); }
.sangria__info { display: grid; gap: 2px; min-width: 0; }
.sangria__nome { font-weight: 600; overflow-wrap: anywhere; }
.sangria__numeros { font-size: var(--text-label); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.sangria__numeros strong { color: var(--color-void-black); font-weight: 600; }
.sangria__form { display: flex; gap: var(--space-xs); align-items: center; }
.sangria__form input[type="number"] { width: 5.5rem; }
.sangria__form select { max-width: 12rem; }
.sangria__historico { grid-column: 1 / -1; border-top: 1px solid var(--color-border); padding-top: var(--space-xs); }
.sangria__historico summary { cursor: pointer; font-size: var(--text-label); color: var(--color-ink-muted); }
.sangria__historico ul { list-style: none; padding: 0; margin: var(--space-xs) 0 0; }
.sangria__historico li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-border); font-variant-numeric: tabular-nums; }
.sangria-historico__hora { color: var(--color-ink-muted); }
.sangria__form .btn-icon svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.sangria__defeito-form { display: grid; gap: var(--space-sm); }
.sangria__defeitos-dia { list-style: none; padding: 0; margin: var(--space-md) 0 0; }
.sangria__defeitos-dia li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-sm); padding: var(--space-xs) 0; border-top: 1px solid var(--color-border); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .sangria__item { grid-template-columns: 1fr; }
  .sangria__form input[type="number"] { flex: 1; width: auto; }
}

/* Resumo da curva de distribuição no molde do card do cockpit (Raphael, 10/10). */
.distribuicao-resumo { font: inherit; text-align: left; cursor: pointer; width: 100%; }
/* Barra do resumo na escala do previsto, com o fim de cada dia marcado em azul (Raphael, 10/10). */
.dg-bar--dias { height: 8px; overflow: visible; }
/* Trecho de defeitos (12/10): vermelho listrado logo depois do distribuído; o resto da barra é o saldo. */
.dg-bar__defeito { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, var(--color-status-danger) 0 3px, transparent 3px 6px); }
.dg-card__defeito { color: var(--color-status-danger); }
.dg-bar__mark--dia { top: -4px; bottom: -4px; background: var(--color-accent); opacity: 1; transform: translateX(-1px); }
.sangria-dia { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.sangria-dia label { font-weight: 600; }

/* Painel do "Dar acesso" (13/10): login, senha, telas e botoes, em faixas que quebram. Fica dentro
   de um .disclosure-btn porque a tira inteira repetida em 20 linhas fazia a lista parecer 20
   formularios empilhados, com 20 senhas a mostra. */
.acesso-criar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); min-width: 17rem; }
/* Login numa linha so, acima dos controles: e-mail e o campo mais longo da celula. */
.acesso-criar__login { flex: 1 1 100%; overflow-wrap: anywhere; }
/* Com o painel aberto a linha fica alta e o nome flutuava no meio dela. */
.data-table tr:has(> td > details[open]) td { vertical-align: top; }
/* Icone de ajuda ao lado do criterio de avaliacao: a explicacao inteira fica no tooltip. */
.criterio-ajuda { margin-left: var(--space-2xs); color: var(--color-ink-muted); cursor: help; font-size: 0.9em; }
.criterio-ajuda:focus-visible { outline: 2px solid var(--color-tool-indigo); outline-offset: 2px; border-radius: 50%; }
.acesso-criar__telas { flex: 1 1 100%; }
.acesso-criar__telas > span { display: block; margin-bottom: var(--space-2xs); font-size: var(--text-label); color: var(--color-ink-muted); }
.acesso-criar__telas .checkbox-row { gap: var(--space-2xs); font-size: var(--text-label); white-space: nowrap; }
/* Avaliacoes do mesmo evento na ficha: as linhas seguintes nao repetem evento e cliente, entao
   a borda de cima some para elas lerem como um bloco so. */
.avaliacao-do-grupo > td { border-top: 0; }
/* Prazo de avaliacao no topo da tela de acesso operacional: campo e botao na mesma linha. */
.acesso-prazo { align-items: flex-end; gap: var(--space-sm); margin-bottom: var(--space-sm); }
/* Subnivel: a excecao pendurada na tela de cima (avaliar quem tem a mesma funcao). */
.acesso-criar__telas .checkbox-row--sub { margin-left: var(--space-md); color: var(--color-ink-muted); }
@media (max-width: 760px) {
  .acesso-criar { min-width: 0; }
  /* No celular o painel aberto media 392px numa tela de 375 e punha a pagina em rolagem lateral:
     o `width: max-content` do disclosure somado ao `nowrap` das caixas (14/10). */
  .acesso-criar.disclosure-btn__painel { width: auto; }
  .acesso-criar__telas .checkbox-row { white-space: normal; }
}

/* ---------------------------------------------------------------------------
   Minha área do talento (19/10). Uma pessoa de uniforme, em pé no pavilhão,
   num celular: nada aqui pode depender de rolagem lateral nem de hover.
   --------------------------------------------------------------------------- */
.minha-area__evento + .minha-area__evento { margin-top: var(--space-md); }
/* A página do evento é leitura, não planilha: num monitor largo o card esticava até 1500px e
   cada linha virava um rótulo à esquerda e um valor na outra ponta da tela (21/10). */
.minha-area__evento { max-width: 56rem; }
.minha-area__titulo-evento { display: flex; align-items: flex-start; gap: var(--space-sm); flex-wrap: wrap; }
.minha-area__titulo-texto { min-width: 0; }
.minha-area__titulo-linha { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
/* O próximo dia de trabalho, destacado na lista de horários. Fundo e rótulo textual juntos: cor
   sozinha não diz nada a quem não a vê (19/10). */
.minha-area__jornada--proxima { background: var(--color-bg-secondary); padding-inline: var(--space-xs); }
/* O líder da equipe no estande: foto antes do nome, o padrão da casa para pessoas. */
.minha-area__lider { display: flex; align-items: center; gap: var(--space-sm); margin: var(--space-sm) 0 0; }
.minha-area__lider-foto {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.minha-area__lider-foto--vazia { background: var(--color-bg-secondary); border: 1px solid var(--color-border); }
.minha-area__bloco { margin-top: var(--space-md); }
.minha-area__meta { margin: var(--space-2xs) 0 0; }
/* Os horários eram uma .data-table (min-width 720px): no celular a coluna da
   hora ficava fora da tela, que é justamente o dado que a pessoa abriu para ver. */
.minha-area__jornada { list-style: none; margin: var(--space-xs) 0 0; padding: 0; }
.minha-area__jornada li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border);
}
.minha-area__jornada li:last-child { border-bottom: 0; }
/* "Onde e quando" é texto, não número: rótulo numa coluna fixa e o valor logo ao lado. Jogado
   para a outra ponta do card, o endereço ficava a meia tela do seu rótulo (21/10). */
.minha-area__jornada--dados li { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-sm); }
@media (max-width: 480px) { .minha-area__jornada--dados li { grid-template-columns: 1fr; gap: 0; } }
.minha-area__jornada time { font-family: var(--font-mono); }
.minha-area__dados { max-width: 52ch; }
.minha-area__dados > div + div { margin-top: var(--space-sm); }
.minha-area__dados dt { font-size: var(--text-label); color: var(--color-ink-muted); }
.minha-area__dados dd { margin: 0; }
.minha-area__dados .mono { font-family: var(--font-mono); }
.minha-area__historico > summary {
  cursor: pointer;
  padding: var(--space-sm) 0;
  font-weight: 500;
}
/* Console Gray sobre branco dá 2,9:1 — abaixo do AA de 4,5:1 (medição de 19/10). Estas notas e
   legendas são texto, não divisória, então usam o mesmo cinza do `page-header__meta` (7,5:1). */
.minha-area__nota { color: var(--color-ink-muted); font-size: var(--text-label); }
.aviso-privacidade {
  background: var(--color-bg-secondary);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  max-height: 320px;
  overflow-y: auto;
}
.aviso-privacidade p { margin: 0 0 var(--space-sm); font-size: 0.95em; line-height: 1.5; }
.aviso-privacidade p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  /* Num iPhone, entre o logo e o "Sair" sobravam dois caracteres: o nome virava "Br…".
     Quem está logado já se identifica pelo cabeçalho da página (19/10). */
  .app-topbar__conta-texto { display: none; }
}
/* A âncora do submenu não pode parar embaixo do topbar fixo (19/10). */
.cadastro-section { scroll-margin-top: 64px; }
.minha-area__foto { width: 96px; height: 96px; border-radius: var(--radius-sm); object-fit: cover; }
.minha-area__secao-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
/* Um box sozinho na sua página não precisa repetir o título que está no cabeçalho dela, nem a
   moldura que servia para separá-lo dos outros boxes do formulário inteiro (19/10). */
.secao-sozinha .cadastro-section__header { display: none; }
.secao-sozinha .cadastro-section { border: 0; background: none; padding: 0; }
/* As fotos que já estão no cadastro, na página de Fotos (19/10). */
/* Grade fluida: com largura fixa de 140px faltavam 3px para caber duas no celular e tudo virava
   uma coluna. Aqui a coluna se ajusta ao espaço — duas num iPhone, mais no desktop (19/10). */
.minha-area__galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-sm);
}
.minha-area__galeria figure { margin: 0; min-width: 0; }
/* O cropper de rosto entrega uma imagem quadrada; enquadrá-la em 7:9 com `cover` corta testa e
   queixo logo depois de a pessoa ter centralizado o rosto (19/10). Cada tipo tem a sua proporção. */
.minha-area__galeria img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}
.minha-area__galeria figure[data-tipo="corpo"] img,
.minha-area__galeria figure[data-tipo="trabalho"] img { aspect-ratio: 3 / 4; }
.minha-area__galeria figcaption { font-size: var(--text-label); color: var(--color-ink-muted); margin-top: var(--space-2xs); }
/* O que foi enviado e espera o RH, antes do que está no cadastro (19/10). */
/* Critérios da foto: a régua fica a um toque, não na frente de quem já a conhece (19/10). */
.criterios-foto { margin: var(--space-xs) 0; }
.criterios-foto > summary { cursor: pointer; font-size: var(--text-label); color: var(--color-ink-muted); }
.criterios-foto ul { margin: var(--space-2xs) 0 0; padding-left: 1.2em; font-size: var(--text-label); color: var(--color-ink-muted); }
.minha-area__acoes-foto { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }

/* Alvos de toque de 44px na área do talento (medição de 19/10: menu 34–36px, "Sair" 32px).
   Escopo na casca da operação para não mexer no menu denso da equipe, que é de mouse e teclado. */
@media (pointer: coarse) {
  .app-shell .app-sidebar__item,
  .app-sidebar__group-items-inner .app-sidebar__item { min-height: 44px; }
  .app-topbar__logout,
  .app-topbar__user-role a { min-height: 44px; display: inline-flex; align-items: center; }
}
/* A foto de rosto no alto da seção Cadastro (19/10): ver e ir trocar, sem repetir o upload. */
.cadastro-rosto { display: flex; gap: var(--space-md); align-items: center; margin-bottom: var(--space-md); }
.cadastro-rosto__foto { width: 88px; height: 88px; border-radius: 999px; object-fit: cover; flex-shrink: 0; display: block; }
.cadastro-rosto__foto--vazia { background: var(--color-surface-subtle); border: 1px dashed var(--color-border); }
.cadastro-rosto__titulo { margin: 0; font-weight: 500; }
/* Termo LGPD: caixa rolável onde ele vem ANTES de uma decisão (o checkbox do cadastro); inteiro
   na página que só registra o aceite (19/10). */
.termo-consentimento {
  background-color: var(--color-bg-secondary);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  max-height: 320px;
  overflow-y: auto;
}
.termo-consentimento p,
.termo-consentimento li { font-size: 0.95em; line-height: 1.5; }
.termo-consentimento p { margin: 0 0 var(--space-sm); }
.termo-consentimento ul { margin: 0; padding-left: 1.2em; }
.termo-consentimento--inteiro .termo-consentimento { max-height: none; overflow: visible; }
/* Painel da talento (21/10): faixas e resumos clicáveis, no lugar dos cards empilhados. O
   resumo é um link inteiro — alvo grande, do jeito que o polegar precisa. */
.minha-area__saudacao {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.minha-area__saudacao h1 { margin: 0; }
.minha-area__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
/* Duas colunas a partir do notebook: o que é dela à esquerda, o que a Door oferece à direita.
   Numa coluna só, o monitor ficava 60% vazio e a agenda caía abaixo da dobra. */
.minha-area__painel { display: grid; gap: var(--space-md); align-items: start; }
@media (min-width: 1024px) {
  .minha-area__painel { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
.minha-area__coluna { display: grid; gap: var(--space-md); align-content: start; }
.minha-area__faixa { margin-bottom: 0; }
/* Título de faixa é rótulo, não manchete: o nome do evento é que tem de pesar. */
.minha-area__faixa-titulo {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-sm);
}
/* Lista, não pilha de cards (Raphael, 23/10: "quero uma opção mais minimalista"). Cada linha é
   um link inteiro; a ação vira pista à direita, e a régua separa sem desenhar caixa. */
.minha-area__pendencias { list-style: none; margin: 0; padding: 0; }
.minha-area__pendencias li + li { border-top: 1px solid var(--color-border); }
.minha-area__pendencias a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-sm);
  padding: var(--space-sm) 0;
  color: var(--color-ink);
  text-decoration: none;
}
.minha-area__pendencias a:hover > span:first-child,
.minha-area__pendencias a:focus-visible > span:first-child {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* O texto ocupa o que sobra e a ação fica sempre à direita: sem isto ela pulava para baixo e
   para a esquerda a cada linha que quebrava. */
.minha-area__pendencias a > span:first-child { flex: 1 1 22ch; }
.minha-area__pendencia-motivo { color: var(--color-ink-muted); }
.minha-area__pendencia-seta {
  color: var(--color-ink-muted);
  margin-left: auto;
}
.minha-area__resumo {
  display: grid;
  gap: 2px;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-border);
  color: inherit;
  text-decoration: none;
}
.minha-area__faixa .minha-area__resumo:first-of-type { border-top: 0; }
/* O resumo é um link de bloco: o realce é o fundo, não o sublinhado em tudo (21/10). */
.minha-area__resumo:hover { background: var(--color-surface-subtle); text-decoration: none; }
.minha-area__resumo-titulo { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.minha-area__resumo-linha { color: var(--color-ink-muted); font-size: var(--text-label); }
.minha-area__resumo--proximo .minha-area__resumo-titulo { font-size: var(--text-title); }
.minha-area__resumo--proximo { padding-bottom: var(--space-md); }

/* Barra inferior da Minha área (21/10): três destinos ao alcance do polegar no celular; no
   desktop a lateral já dá conta e ela some. */
.app-bottombar { display: none; }
@media (max-width: 900px) {
  .app-bottombar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    display: flex;
    background: var(--color-paper-white);
    border-top: 1px solid var(--color-border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .app-bottombar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 6px 4px;
    color: var(--color-ink-muted);
    font-size: 0.6875rem;
    text-decoration: none;
  }
  .app-bottombar__item[aria-current='page'] { color: var(--color-tool-indigo); }
  /* O conteúdo não pode terminar embaixo da barra. */
  .app-main { padding-bottom: calc(56px + env(safe-area-inset-bottom) + var(--space-md)); }
}
/* Confirmar e desistir são a mesma decisão: andam lado a lado no banner do chamado e descem
   juntos quando a linha quebra. Aberto, o pedido de saída toma a linha toda (21/10). */
.minha-area__chamado-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.minha-area__desistir[open] { flex: 1 0 100%; }
/* Fechada, a saída encosta no canto direito do título; aberta, toma a linha inteira. */
.minha-area__titulo-evento .minha-area__desistir { margin-left: auto; }
.agenda__recusa-form { margin-top: var(--space-xs); max-width: 44ch; }
.agenda__recusa-form textarea { width: 100%; }
/* A miniatura da galeria é um botão que amplia (19/10) — sem moldura própria: quem desenha é a img. */
/* Link de divulgação do Banco de Talentos (21/10). O h1 solto do navegador (32px/48px) tomava
   três linhas num card de 640px para dizer uma frase; a página é uma mensagem só, e o título de
   página do Portal já é 28px. */
.cadastro-aberto__titulo { font-size: var(--text-headline); line-height: 1.2; }
.cadastro-aberto__recado > * + * { margin-top: var(--space-md); }
/* A nota sobre os dados fecha o card, separada do recado e sem competir com ele. */
.cadastro-aberto__nota { border-top: 1px solid var(--color-border); padding-top: var(--space-md); }
/* Autosserviço de senha (21/10): um convite dentro do card, separado do recado por fundo, não
   por mais uma régua — a nota de dados já usa a régua logo abaixo. */
.cadastro-aberto__senha {
  background: var(--color-surface-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}
.cadastro-aberto__senha > * + * { margin-top: var(--space-sm); }
.cadastro-aberto__subtitulo { font-size: var(--text-title); }
.cadastro-aberto__senha-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-sm); }
.cadastro-aberto__senha-form .field { flex: 1; min-width: 220px; }
.cadastro-aberto__erros { list-style: disc; padding-left: 1.2em; }
/* A mesma caixa no fim da atualização cadastral e do aceite do convite (22/10): o convite para
   criar a senha chega depois do recado, separado por fundo, nunca competindo com ele. */
.oferta-senha {
  background: var(--color-surface-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-top: var(--space-lg);
}
.oferta-senha > * + * { margin-top: var(--space-sm); }
.oferta-senha__titulo { font-size: var(--text-title); }
.minha-area__amplia { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }