/* Tema "metal" (ficha: marca.tema = "metal"; primeiro cliente, Fast Car, prévia aprovada em marcas/fastcar/painel-fastcar.html):
   fundo preto com reflexo metálico, painéis preto metálico, títulos em caixa alta (Archivo), dourado só em blocos sólidos
   (a cor de destaque vem da ficha por /marca/cor.css). Contraste WCAG AA conferido em painel-app/test/unidade.test.js. */
@font-face { font-family: 'Archivo'; src: url('/estatico/Archivo-Variable.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
body.tema-metal {
  --fundo: #000; --painel-a: #1b1b1b; --painel-b: #0b0b0b; --painel-c: #070707;
  --cartao: linear-gradient(155deg, var(--painel-a) 0%, var(--painel-b) 42%, var(--painel-c) 100%);
  --cartao-borda: rgba(255,255,255,.07); --linha: rgba(255,255,255,.07);
  --texto: #f1f1ef; --texto-2: #a6a6a2; --texto-3: #8f8f8a; --texto-4: #6e6e6a;
  --verde: #6ee7a0; --verde-claro: #6ee7a0; --amarelo: #f7b955; --vermelho: #f59393; --azul: #9dbef5; --lilas: #c9c9c4;
  --raio: 14px; --sombra: inset 0 1px 0 rgba(255,255,255,.07), 0 30px 60px -40px rgba(0,0,0,.9);
  color: var(--texto); font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  background:
    radial-gradient(1100px 620px at 12% -12%, rgba(255,255,255,.11), transparent 62%),
    radial-gradient(800px 600px at 105% 105%, color-mix(in srgb, var(--destaque) 7%, transparent), transparent 60%),
    linear-gradient(128deg, #161616 0%, #050505 38%, #000 70%, #0a0a0a 100%);
  background-attachment: fixed;
}
/* Painéis preto metálico com o reflexo de cima. */
.tema-metal .cartao, .tema-metal aside.agora, .tema-metal .entrar .cartao { position: relative; }
.tema-metal .cartao, .tema-metal .lado, .tema-metal aside.agora, .tema-metal .entrar .cartao {
  background: var(--cartao); border: 1px solid var(--cartao-borda); border-radius: var(--raio);
  box-shadow: var(--sombra); backdrop-filter: none; -webkit-backdrop-filter: none; }
.tema-metal .cartao::before, .tema-metal aside.agora::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.05) 0%, transparent 30%); }
.tema-metal .cartao > *, .tema-metal aside.agora > * { position: relative; }
.tema-metal .raiz { gap: 14px; padding: 16px; }
.tema-metal .lado { height: calc(100vh - 32px); top: 16px; padding: 26px 16px; border-right: 1px solid var(--cartao-borda); }
.tema-metal .corpo.com-lateral { gap: 14px; }
.tema-metal main { padding: 4px 2px 32px; }
.tema-metal aside.agora { align-self: flex-start; padding: 24px; }

/* Títulos em caixa alta (Archivo), prata metálica. */
.tema-metal h1 { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 46px; line-height: .98; letter-spacing: -.025em; text-transform: uppercase; font-stretch: 92%; }
.tema-metal h1 .metal, .tema-metal h1 .ouro {
  background: linear-gradient(180deg, #fff 10%, #b4b4af 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tema-metal h1 .ouro { display: block; }
.tema-metal h2 { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: #e9e9e6; }
.tema-metal .trilha, .tema-metal th, .tema-metal .menu a, .tema-metal .kpi-topo > span:first-child, .tema-metal .etapa-texto > span:first-child,
.tema-metal .numeros span, .tema-metal .marca span {
  text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 600; }
.tema-metal .trilha span:last-child { color: var(--texto); }
.tema-metal .sub, .tema-metal .fraco { color: var(--texto-2); }

/* Marca: logo grande no menu. */
.tema-metal .marca { flex-direction: column; align-items: flex-start; gap: 12px; }
.tema-metal .marca img { height: auto; width: 100%; max-width: 196px; }
.tema-metal .marca span { color: var(--texto-3); font-size: 11px; letter-spacing: .16em; }
.tema-metal .menu a { min-height: 46px; border-radius: 10px; color: var(--texto-2); }
.tema-metal .menu a:hover { background: rgba(255,255,255,.035); color: var(--texto); }
.tema-metal .menu a[aria-current="page"] { color: #fff; background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow: inset 3px 0 0 var(--destaque); }
.tema-metal .menu a[aria-current="page"] .icone { stroke: #fff; }
.tema-metal .quem { border-top: 1px solid var(--linha); }

/* Dourado só em blocos sólidos: contadores, etiquetas, avatar do primeiro, números do funil, selo de destaque. */
.tema-metal .contador, .tema-metal .selo, .tema-metal .avatar.c0, .tema-metal .fila .etiqueta {
  background: var(--destaque); color: var(--sobre-destaque); border-radius: 5px; font-weight: 700; }
.tema-metal .avatar { background: linear-gradient(150deg, #3a3a3a, #141414); color: var(--texto); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.tema-metal .avatar.c0 { box-shadow: none; }
.tema-metal .kpi.realce { background: linear-gradient(155deg, #2a2412 0%, #120f08 45%, #080706 100%); border-color: color-mix(in srgb, var(--destaque) 25%, transparent); }
.tema-metal .kpi strong { font-family: 'Archivo', sans-serif; font-size: 34px; letter-spacing: -.03em; color: #fff; }
.tema-metal .ponto-ativ.destaque, .tema-metal .marca .ponto { background: var(--destaque); box-shadow: none; }
.tema-metal .fila li.proximo { background: linear-gradient(90deg, color-mix(in srgb, var(--destaque) 16%, transparent), color-mix(in srgb, var(--destaque) 3%, transparent)); }
.tema-metal .barra .trilho { fill: rgba(255,255,255,.07); }
.tema-metal .busca input, .tema-metal .periodo summary, .tema-metal button, .tema-metal .botao {
  border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--cartao-borda); color: var(--texto); }
.tema-metal button[type="submit"] { background: var(--destaque); color: var(--sobre-destaque); border: 0; font-weight: 700; }
.tema-metal :focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.tema-metal td { border-top: 1px solid rgba(255,255,255,.06); }
.tema-metal .numeros b { font-family: 'Archivo', sans-serif; }
.tema-metal .nota-como b { color: var(--texto); }
@media (max-width: 760px) {
  .tema-metal .raiz { padding: 0; gap: 0; }
  .tema-metal .lado { height: auto; top: 0; border-radius: 0; padding: 12px 16px; }
  .tema-metal .marca img { max-width: 140px; }
  .tema-metal .menu { background: rgba(0,0,0,.96); }
  .tema-metal main { padding: 16px 16px 24px; }
  .tema-metal h1 { font-size: 34px; }
}

/* Celular (até 600 px), só neste tema; o computador não muda. Saudação numa linha (~24 px), cabeçalho baixo só com a logo,
   barra de baixo com 4 itens de largura igual (admin Sev7n: 6) (ícone + rótulo curto em 11 px, sem caixa alta, sem quebra) e o conteúdo com
   espaço para ela (altura da barra + área segura). */
@media (max-width: 600px) {
  body.tema-metal { --altura-barra: 60px; }
  .tema-metal h1 { font-size: 24px; line-height: 1.15; letter-spacing: -.01em; }
  .tema-metal h1 .ouro { display: inline; }
  .tema-metal .saudacao .sub, .tema-metal main > .sub { font-size: 13px; }
  .tema-metal .lado { padding: 8px 16px; gap: 12px; }
  .tema-metal .marca { gap: 0; }
  .tema-metal .marca img { max-width: 120px; max-height: 28px; width: auto; }
  .tema-metal .marca img + span { display: none; }
  .tema-metal .menu { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0;
    height: calc(var(--altura-barra) + env(safe-area-inset-bottom, 0px)); padding: 4px 2px env(safe-area-inset-bottom, 0px); }
  .tema-metal .menu a { min-height: 0; min-width: 0; padding: 4px 0; flex-direction: column; justify-content: center; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap; border-radius: 0; background: none; box-shadow: none; }
  .tema-metal .menu a .rotulo { display: none; }
  .tema-metal .menu a .rotulo-curto { display: inline; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tema-metal .menu a[aria-current="page"] { color: var(--destaque); background: none; box-shadow: none; }
  .tema-metal .menu a[aria-current="page"] .icone { stroke: var(--destaque); }
  .tema-metal .corpo { padding-bottom: calc(var(--altura-barra) + env(safe-area-inset-bottom, 0px)); }
  .tema-metal aside.agora { padding-bottom: 24px; }
}