/* ==========================================================================
   Openfy: base visual. Identidade da Open House (Guia de Identidade Visual v1.0):
   núcleo preto carvão #0B0B0A, champagne #C8C5B5, verde profundo #192622, marfim #F3F1E9;
   apoio cinza oliva #62695F, sálvia cinza #C0C5BB, névoa #EDEFE7, verde mineral #E5E8DE.
   Tipografia: Nimbus Sans (Regular e Bold), com Helvetica Neue / Helvetica / Arial no lugar.
   Direção: área de trabalho clara para leitura, títulos em verde profundo, botão de contraste,
   marca sobre área escura (a barra lateral). Tema escuro: noite e champagne, como as propostas.

   REGRA: nas telas, use só as variáveis abaixo (nunca uma cor solta), para os dois temas funcionarem.
   ========================================================================== */

:root {
  /* marca */
  --carvao: #0b0b0a;
  --champanhe: #c8c5b5;
  --verde-profundo: #192622;
  --marfim: #f3f1e9;
  --oliva: #62695f;
  --salvia: #c0c5bb;
  --nevoa: #edefe7;
  --mineral: #e5e8de;

  /* superfícies (tema claro) */
  --fundo: #f3f1e9;            /* marfim: fundo da área de trabalho */
  --superficie: #fbfaf6;       /* cartões, painéis, modais */
  --superficie-2: #edefe7;     /* névoa: colunas do funil, áreas secundárias */
  --superficie-3: #e5e8de;     /* verde mineral: faixas, hover forte, trilhos */
  --elevado: #ffffff;          /* o que flutua (menus, cartão sendo arrastado) */

  /* texto */
  --texto: #192622;            /* verde profundo: títulos e texto principal */
  --texto-2: #36423d;          /* texto corrido */
  --mudo: #62695f;             /* cinza oliva: todo texto de apoio com informação (passa 4,5:1) */
  --apagado: #949a90;          /* SÓ o que não é texto: ícones decorativos, separadores, desabilitado */
  --dica: #6f756b;             /* texto de exemplo dos campos (placeholder): 4,5:1 na superfície */

  /* linhas */
  --linha: rgba(25, 38, 34, 0.11);        /* divisórias leves */
  --linha-forte: rgba(25, 38, 34, 0.22);  /* cartões, divisórias de cabeçalho */
  --linha-controle: rgba(25, 38, 34, 0.55); /* borda do que se marca ou preenche: caixa, bolinha, interruptor, campos (~3,6:1) */

  /* estado selecionado de segmentos, chips e atalhos: champagne com carvão
     (o preenchimento --primaria fica só para o botão de ação principal) */
  --selecao: #c8c5b5;
  --selecao-texto: #0b0b0a;

  /* ação principal: verde profundo com texto marfim */
  --primaria: #192622;
  --primaria-hover: #24372f;
  --primaria-texto: #f3f1e9;
  --foco: #192622;

  /* destaque da marca (etapa atual, seleção): champagne */
  --destaque: #c8c5b5;
  --destaque-fraco: rgba(200, 197, 181, 0.35);

  /* estados (sempre acompanhados de texto ou ícone, nunca só cor). MAPA, igual em todas as telas:
     --perigo  = precisa de ação agora (atividade atrasada, negócio parado) e ação destrutiva;
     --atencao = falta algo (sem atividade agendada, previsão vencida);
     --sucesso = feito / hoje.
     Etiquetas de temperatura (Quente, Morno, Frio) NÃO usam estas cores: usam a intensidade da marca (.pilula--quente…). */
  --sucesso: #2e6a4c;
  --sucesso-fundo: rgba(46, 106, 76, 0.1);
  --perigo: #b0463a;
  --perigo-fundo: rgba(176, 70, 58, 0.09);
  --atencao: #8a5512;          /* escurecido para passar 4,5:1 em texto pequeno, até dentro da pílula */
  --atencao-fundo: rgba(201, 132, 42, 0.13);
  --info: #3d5a6c;
  --info-fundo: rgba(61, 90, 108, 0.1);
  /* texto e ícone sobre fundo CHEIO de sucesso/perigo (botões Ganho/Perdido, caixa marcada, bolinha atrasada) */
  --sobre-sucesso: #ffffff;
  --sobre-perigo: #ffffff;
  --avatar-texto: #ffffff;     /* iniciais sobre a cor do avatar (a paleta de ui.js é toda escura) */

  /* aviso rápido (toast): sempre o contrário do tema */
  --aviso-fundo: #0b0b0a;
  --aviso-texto: #f3f1e9;
  --aviso-sucesso: #8fbf9f;
  --aviso-erro: #ec8a77;

  /* barra lateral: sempre escura, com a marca em champagne */
  --lateral: #0b0b0a;
  --lateral-texto: #c8c5b5;
  --lateral-mudo: #8e8b7f;
  --lateral-ativo: rgba(200, 197, 181, 0.12);
  --lateral-linha: rgba(200, 197, 181, 0.12);
  /* contador de atividades atrasadas na barra lateral (sempre sobre o fundo escuro dela) */
  --contador-fundo: #b0463a;
  --contador-texto: #ffffff;

  --sombra-1: 0 1px 2px rgba(25, 38, 34, 0.06), 0 1px 1px rgba(25, 38, 34, 0.04);
  --sombra-2: 0 4px 14px rgba(25, 38, 34, 0.1), 0 1px 3px rgba(25, 38, 34, 0.08);
  --sombra-3: 0 18px 50px rgba(11, 11, 10, 0.22), 0 4px 12px rgba(11, 11, 10, 0.1);
  --veu: rgba(11, 11, 10, 0.42);

  --fonte: "Nimbus Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --raio: 6px;
  --raio-p: 4px;
  --raio-g: 10px;

  --t-xs: 0.6875rem;   /* 11px: rótulos em caixa alta */
  --t-sm: 0.8125rem;   /* 13px: apoio, tabelas */
  --t-base: 0.875rem;  /* 14px: texto do painel */
  --t-md: 1rem;        /* 16px */
  --t-lg: 1.125rem;    /* 18px */
  --t-h3: 1.25rem;     /* 20px */
  --t-h2: 1.5rem;      /* 24px */
  --t-h1: 2rem;        /* 32px */
  /* piso de texto: 11px (--t-xs), sem exceção (vale também para as iniciais do avatar pequeno). */

  /* espaçamento (grade de 4px) */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;
  /* página: mesma largura e mesma borda esquerda em todas as telas */
  --pagina-max: 1280px;
  --pagina-vao: 24px;

  /* ícones: três tamanhos; traço 1.7 (2.2 só em ícone de 14px ou menos dentro de pílula ou check) */
  --ic-p: 14px;
  --ic-m: 16px;
  --ic-g: 20px;

  color-scheme: light;
}
@media (max-width: 720px) { :root { --pagina-vao: 16px; } }

/* tema escuro: noite, champagne e marfim (como as propostas da Open House) */
:root[data-tema="escuro"] {
  --fundo: #0b0b0a;
  --superficie: #121110;
  --superficie-2: #171614;
  --superficie-3: #22211d;
  --elevado: #1c1b18;
  --texto: #f3f1e9;
  --texto-2: #d6d3c6;
  --mudo: #9a978a;
  --apagado: #6b695f;
  --dica: #85837a;
  --linha: rgba(200, 197, 181, 0.12);
  --linha-forte: rgba(200, 197, 181, 0.26);
  --linha-controle: rgba(200, 197, 181, 0.5);
  --selecao: rgba(200, 197, 181, 0.2);
  --selecao-texto: #f3f1e9;
  --sobre-sucesso: #0b0b0a;
  --sobre-perigo: #0b0b0a;
  --aviso-fundo: #f3f1e9;
  --aviso-texto: #0b0b0a;
  --aviso-sucesso: #2e6a4c;
  --aviso-erro: #b0463a;
  --primaria: #c8c5b5;
  --primaria-hover: #dcd9cb;
  --primaria-texto: #0b0b0a;
  --foco: #c8c5b5;
  --destaque: #c8c5b5;
  --destaque-fraco: rgba(200, 197, 181, 0.16);
  --sucesso: #8fbf9f;
  --sucesso-fundo: rgba(143, 191, 159, 0.12);
  --perigo: #ec8a77;
  --perigo-fundo: rgba(229, 102, 74, 0.13);
  --atencao: #f0c27f;
  --atencao-fundo: rgba(243, 201, 139, 0.12);
  --info: #9fbccc;
  --info-fundo: rgba(159, 188, 204, 0.12);
  --lateral: #070706;
  --contador-fundo: #ec8a77;
  --contador-texto: #0b0b0a;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-2: 0 6px 18px rgba(0, 0, 0, 0.45);
  --sombra-3: 0 20px 60px rgba(0, 0, 0, 0.6);
  --veu: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
/* o foco por teclado não fica atrás das barras fixas (topo de 60px; no celular, também a barra de baixo) */
html { -webkit-text-size-adjust: 100%; background: var(--fundo); scroll-padding-top: 72px; }
@media (max-width: 720px) {
  html { scroll-padding-top: 68px; scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto-2);
  font-family: var(--fonte);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { color: var(--texto); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg, video { display: block; max-width: 100%; }
svg.ic { flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
::selection { background: var(--destaque); color: var(--carvao); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 3px; }
[hidden] { display: none !important; }
* { scrollbar-width: thin; scrollbar-color: var(--linha-forte) transparent; }

/* ---------- tipografia ---------- */

.t-h1 { font-size: var(--t-h1); font-weight: 700; color: var(--texto); letter-spacing: -0.02em; line-height: 1.1; }
.t-h2 { font-size: var(--t-h2); font-weight: 700; color: var(--texto); letter-spacing: -0.015em; line-height: 1.15; }
.t-h3 { font-size: var(--t-h3); font-weight: 700; color: var(--texto); line-height: 1.25; }
.t-forte { color: var(--texto); font-weight: 700; }
/* rótulo como no guia: caixa alta, espaçado, pequeno. Só duas variantes no app inteiro:
   .rotulo (regular, cinza) para cabeçalhos de cartão, tabela e campos; .rotulo--forte (negrito, cor do texto) para títulos de painel e grupos */
.rotulo { font-size: var(--t-xs); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mudo); line-height: 1.3; }
.rotulo--forte { font-weight: 700; color: var(--texto); }
.mudo { color: var(--mudo); }
/* --apagado não passa 4,5:1: use .apagado só em separadores e ícones decorativos; texto com informação usa .mudo */
.apagado { color: var(--apagado); }

/* caminho do topo das páginas de detalhe: nav.migalha > a, span[aria-hidden]›, span (onde está) */
.migalha {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-1) var(--esp-2); min-width: 0;
  font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mudo); line-height: 1.3;
}
.migalha a { flex: none; color: var(--mudo); text-underline-offset: 3px; }
.migalha a:hover { color: var(--texto); text-decoration: underline; }
.migalha [aria-hidden="true"] { color: var(--apagado); }
.migalha [aria-current="page"], .migalha > :last-child:not(a) { color: var(--texto-2); }
.pequeno { font-size: var(--t-sm); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cortar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sucesso { color: var(--sucesso); }
.perigo { color: var(--perigo); }
.atencao { color: var(--atencao); }

/* ---------- utilitários de layout ---------- */

.linha { display: flex; align-items: center; gap: 8px; min-width: 0; }
.linha--entre { justify-content: space-between; }
.linha--fim { justify-content: flex-end; }
.linha--quebra { flex-wrap: wrap; }
.pilha { display: grid; gap: 12px; align-content: start; min-width: 0; }
.pilha--p { gap: 6px; }
.pilha--g { gap: 20px; }
.cresce { flex: 1; min-width: 0; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* "Pular para o conteúdo": fora da tela até receber o foco pelo teclado */
.pular {
  position: fixed; z-index: 2000; top: var(--esp-2); left: var(--esp-2); transform: translateY(-200%);
  padding: var(--esp-3) var(--esp-4); border-radius: var(--raio);
  /* champagne com carvão: aparece sobre a lateral escura e sobre o marfim, nos dois temas */
  background: var(--champanhe); color: var(--carvao); font-weight: 700; box-shadow: var(--sombra-2);
}
.pular:focus, .pular:focus-visible { transform: none; outline: 2px solid var(--champanhe); outline-offset: 3px; }

/* área de toque de 44x44 sem mudar o desenho: ponha .alvo-toque num controle pequeno (ícone, bolinha, pílula clicável).
   Usa ::before porque o ::after de alguns cartões já cobre o cartão como link. */
@media (pointer: coarse) {
  .alvo-toque { position: relative; }
  .alvo-toque::before {
    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: max(100%, 44px); height: max(100%, 44px);
  }
}

/* ---------- botões ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--linha-forte); border-radius: var(--raio);
  background: var(--superficie); color: var(--texto);
  font-size: var(--t-base); font-weight: 700; line-height: 1;
  white-space: nowrap; user-select: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn:hover { border-color: var(--texto); }
.btn:active { transform: translateY(0.5px); }
.btn .ic { width: var(--ic-m); height: var(--ic-m); }
.btn--primario { background: var(--primaria); border-color: var(--primaria); color: var(--primaria-texto); }
.btn--primario:hover { background: var(--primaria-hover); border-color: var(--primaria-hover); }
.btn--sucesso { background: var(--sucesso); border-color: var(--sucesso); color: var(--sobre-sucesso); }
.btn--sucesso:hover { filter: brightness(1.08); border-color: var(--sucesso); }
.btn--perigo { background: var(--perigo); border-color: var(--perigo); color: var(--sobre-perigo); }
.btn--perigo:hover { filter: brightness(1.08); border-color: var(--perigo); }
.btn--perigo-contorno { color: var(--perigo); border-color: color-mix(in srgb, var(--perigo) 45%, transparent); background: transparent; }
.btn--perigo-contorno:hover { background: var(--perigo-fundo); border-color: var(--perigo); }
.btn--fantasma { background: transparent; border-color: transparent; color: var(--texto-2); font-weight: 400; }
.btn--fantasma:hover { background: var(--superficie-3); border-color: transparent; color: var(--texto); }
.btn--mini { height: 28px; padding: 0 10px; font-size: var(--t-sm); gap: 4px; }
.btn--mini .ic { width: var(--ic-p); height: var(--ic-p); }
.btn--icone { width: 36px; padding: 0; }
.btn--icone.btn--mini { width: 28px; }
/* no toque: botão normal com 44px; mini com 36px e uma área de toque invisível até 44px.
   O só-ícone mini vira 36x36: a área invisível passa só 4px de cada lado e não invade o botão vizinho. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn--icone { width: 44px; }
  .btn--mini { min-height: 36px; }
  .btn--icone.btn--mini { width: 36px; }
  .btn--mini, .btn--icone { position: relative; }
  .btn--mini::before, .btn--icone::before {
    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: max(100%, 44px); height: max(100%, 44px);
  }
}
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; border-color: var(--mudo) var(--mudo) transparent transparent; animation: girar 0.8s linear infinite; }
.btn--primario[aria-busy="true"]::after { border-color: var(--primaria-texto) var(--primaria-texto) transparent transparent; }

/* ---------- campos ---------- */

.campo { display: grid; gap: 5px; min-width: 0; align-content: start; }
.campo > span, .campo > label { font-size: var(--t-sm); font-weight: 700; color: var(--texto); }
.campo > small { font-size: var(--t-sm); color: var(--mudo); }
/* erro de campo (ui.js erroNoCampo): .campo--erro no label.campo ou no próprio input, aria-invalid e a mensagem num <small> */
.campo--erro .entrada, .entrada.campo--erro, .entrada[aria-invalid="true"] { border-color: var(--perigo); }
.campo--erro > small, .campo__erro { font-size: var(--t-sm); color: var(--perigo); }
.campo--erro .entrada:focus, .entrada.campo--erro:focus, .entrada[aria-invalid="true"]:focus { border-color: var(--perigo); box-shadow: 0 0 0 1px var(--perigo), 0 0 0 4px var(--perigo-fundo); }

.entrada {
  width: 100%; min-height: 36px; padding: 7px 10px;
  border: 1px solid var(--linha-controle); border-radius: var(--raio);
  background: var(--superficie); color: var(--texto);
  font-size: var(--t-base); line-height: 1.4;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.entrada::placeholder { color: var(--dica); opacity: 1; }
.entrada:hover { border-color: var(--texto); }
/* foco: borda na cor de foco + anel de 1px na mesma cor (2px efetivos, contraste de verdade) e um halo champagne */
.entrada:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 1px var(--foco), 0 0 0 4px var(--destaque-fraco); }
textarea.entrada { min-height: 84px; resize: vertical; line-height: 1.5; }
select.entrada {
  appearance: none; padding-right: 30px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--mudo) 50%), linear-gradient(135deg, var(--mudo) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.entrada[disabled] { opacity: 0.55; cursor: not-allowed; }
.entrada--mini { min-height: 28px; padding: 3px 8px; font-size: var(--t-sm); }
/* celular e toque: letra de 16px nos campos (abaixo disso o iPhone dá zoom sozinho ao tocar) e altura de toque.
   No computador continua 14px: a densidade do painel não muda. */
@media (max-width: 720px), (pointer: coarse) {
  .entrada, .entrada--mini, textarea.entrada, select.entrada { font-size: 16px; }
}
@media (pointer: coarse) {
  .entrada { min-height: 44px; }
  .entrada--mini { min-height: 40px; }
}
/* campo com ícone à esquerda (busca) */
.entrada-ic { position: relative; display: flex; align-items: center; }
.entrada-ic > .ic { position: absolute; left: 10px; width: var(--ic-m); height: var(--ic-m); color: var(--mudo); pointer-events: none; }
.entrada-ic > .entrada { padding-left: 34px; }

/* caixa de marcar própria (o "marco" dos blocos usa esta) */
.caixa { display: inline-flex; align-items: center; gap: var(--esp-2); cursor: pointer; user-select: none; color: var(--texto); }
.caixa input {
  appearance: none; flex: none; width: 20px; height: 20px; margin: 0; cursor: pointer;
  border: 1.5px solid var(--linha-controle); border-radius: 5px; background: var(--superficie);
  display: grid; place-items: center; transition: background 0.15s, border-color 0.15s;
}
.caixa input::after { content: ""; width: 10px; height: 6px; border: 2px solid var(--sobre-sucesso); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform 0.15s var(--ease); }
.caixa input:hover { border-color: var(--texto); }
.caixa input:checked { background: var(--sucesso); border-color: var(--sucesso); }
.caixa input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.caixa input:disabled { opacity: 0.5; cursor: not-allowed; }

/* interruptor */
.chave { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--t-sm); }
.chave input { appearance: none; flex: none; width: 34px; height: 20px; margin: 0; border-radius: 20px; background: var(--superficie-3); border: 1px solid var(--linha-controle); position: relative; cursor: pointer; transition: background 0.2s; }
.chave input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--mudo); transition: transform 0.2s var(--ease), background 0.2s; }
.chave input:checked { background: var(--primaria); border-color: var(--primaria); }
.chave input:checked::after { transform: translateX(14px); background: var(--primaria-texto); }
/* no toque, caixa e interruptor ganham área de 44px sem mudar o desenho */
@media (pointer: coarse) {
  .caixa input { position: relative; }
  .caixa input::before, .chave input::before {
    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px;
  }
}

/* seletor segmentado (Funil | Lista, filtros rápidos). Selecionado = champagne (--selecao), nunca o verde da ação principal. */
.segmentos { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--linha-forte); border-radius: calc(var(--raio) + 1px); background: var(--superficie); }
.segmentos > button, .segmentos > a {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: var(--raio-p);
  background: none; font-size: var(--t-sm); color: var(--mudo); white-space: nowrap;
}
.segmentos > button:hover, .segmentos > a:hover { color: var(--texto); background: var(--superficie-2); }
.segmentos > [aria-pressed="true"], .segmentos > [aria-current="page"],
.segmentos > [aria-pressed="true"]:hover, .segmentos > [aria-current="page"]:hover { background: var(--selecao); color: var(--selecao-texto); font-weight: 700; }
.segmentos .ic { width: var(--ic-p); height: var(--ic-p); }

/* abas */
.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--linha); overflow-x: auto; }
.abas > button, .abas > a {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px;
  border: 0; background: none; color: var(--mudo); font-size: var(--t-base); white-space: nowrap;
}
.abas > button:hover, .abas > a:hover { color: var(--texto); }
.abas > [aria-selected="true"], .abas > [aria-current="page"] { color: var(--texto); font-weight: 700; }
.abas > [aria-selected="true"]::after, .abas > [aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--texto); border-radius: 2px; }
.abas .contagem { font-size: var(--t-xs); color: var(--mudo); font-weight: 400; }
/* foco das abas por dentro: a barra rola na horizontal e cortaria o contorno de fora */
.abas > :focus-visible { outline-offset: -2px; }

/* toque: segmentos e abas com 44px de altura (o desenho fica igual, só mais alto) */
@media (pointer: coarse) {
  /* min-width: o segmento só com ícone (Funil | Lista no celular) também chega a 44 de largura */
  .segmentos > button, .segmentos > a { position: relative; height: 40px; min-width: 44px; justify-content: center; }
  .segmentos > button::before, .segmentos > a::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
  .abas > button, .abas > a { height: 44px; }
}

/* ---------- pílulas e etiquetas (com texto; a cor só reforça) ---------- */

.pilula {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px;
  border-radius: 20px; font-size: var(--t-xs); font-weight: 700; white-space: nowrap; line-height: 1;
  background: var(--superficie-3); color: var(--texto-2);
}
.pilula .ic { width: var(--ic-p); height: var(--ic-p); stroke-width: 2.2; }
.pilula--sucesso { background: var(--sucesso-fundo); color: var(--sucesso); }
.pilula--perigo { background: var(--perigo-fundo); color: var(--perigo); }
.pilula--atencao { background: var(--atencao-fundo); color: var(--atencao); }
.pilula--info { background: var(--info-fundo); color: var(--info); }
.pilula--contorno { background: transparent; box-shadow: inset 0 0 0 1px var(--linha-forte); color: var(--mudo); }
/* pílula clicável (ex.: o marco no cartão do funil) é controle: borda com 3:1 */
button.pilula--contorno, a.pilula--contorno { box-shadow: inset 0 0 0 1px var(--linha-controle); }
/* etiquetas de temperatura: intensidade da marca, não as cores de estado (que ficam para o que pede ação).
   quente = cheia verde profundo com marfim; morno = champagne com verde profundo; frio = contorno discreto */
.pilula--quente { background: var(--verde-profundo); color: var(--marfim); }
.pilula--morno { background: var(--champanhe); color: var(--verde-profundo); }
.pilula--frio { background: transparent; box-shadow: inset 0 0 0 1px var(--linha-forte); color: var(--mudo); }
:root[data-tema="escuro"] .pilula--quente { background: var(--champanhe); color: var(--carvao); }
:root[data-tema="escuro"] .pilula--morno { background: var(--destaque-fraco); color: var(--champanhe); }

/* ---------- avatar ---------- */

.avatar {
  display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--av, var(--oliva)); color: var(--avatar-texto); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.02em; line-height: 1;
  user-select: none;
}
/* avatar pequeno: as iniciais também respeitam o piso de 11px (o círculo cresce para 22px para elas caberem) */
.avatar--p { width: 22px; height: 22px; font-size: var(--t-xs); letter-spacing: 0; }
.avatar--g { width: 36px; height: 36px; font-size: var(--t-sm); }
/* no escuro, cores de avatar escuras (verde profundo) somem no fundo: um contorno fino separa */
:root[data-tema="escuro"] .avatar { box-shadow: 0 0 0 1px var(--linha-forte); }

/* ---------- cartões, tabelas, vazio, carregando ---------- */

.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-g); box-shadow: var(--sombra-1); }
.cartao__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--linha); }
.cartao__corpo { padding: 16px; }

.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.tabela th { text-align: left; font-size: var(--t-xs); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mudo); padding: 10px 12px; border-bottom: 1px solid var(--linha-forte); white-space: nowrap; background: var(--superficie); position: sticky; top: 0; z-index: 1; }
.tabela th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.tabela th button:hover { color: var(--texto); }
.tabela td { padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; color: var(--texto-2); }
.tabela .n { text-align: right; white-space: nowrap; }
.tabela tbody tr { transition: background 0.1s; }
.tabela tbody tr[data-link] { cursor: pointer; }
.tabela tbody tr:hover td { background: var(--superficie-2); }
.rolavel { overflow: auto; -webkit-overflow-scrolling: touch; }

.vazio { display: grid; justify-items: center; gap: 8px; padding: 48px 24px; text-align: center; color: var(--mudo); }
.vazio > .ic { width: 32px; height: 32px; color: var(--apagado); stroke-width: 1.4; } /* ícone decorativo */
.vazio strong { color: var(--texto); font-size: var(--t-md); }
.vazio p { max-width: 42ch; }

.carregando { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 0; color: var(--mudo); font-size: var(--t-sm); }
.carregando::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--linha-forte); border-top-color: var(--texto); animation: girar 0.8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.aviso-caixa { padding: 10px 14px; border-left: 3px solid var(--info); background: var(--info-fundo); color: var(--texto); font-size: var(--t-sm); border-radius: 0 var(--raio) var(--raio) 0; }
.aviso-caixa--erro { border-color: var(--perigo); background: var(--perigo-fundo); }
.aviso-caixa--atencao { border-color: var(--atencao); background: var(--atencao-fundo); }

/* ---------- modal (dialog) ---------- */

dialog.modal {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0;
  border: 1px solid var(--linha); border-radius: var(--raio-g); background: var(--superficie); color: var(--texto-2);
  box-shadow: var(--sombra-3); overflow: hidden; display: none;
}
dialog.modal[open] { display: flex; flex-direction: column; animation: modal-entra 0.18s var(--ease); }
dialog.modal--p { width: min(420px, calc(100vw - 24px)); }
dialog.modal--g { width: min(820px, calc(100vw - 24px)); }
dialog.modal::backdrop { background: var(--veu); animation: veu-entra 0.18s; }
.modal__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--linha); }
.modal__cab h2 { font-size: var(--t-lg); }
.modal__corpo { padding: 20px; overflow-y: auto; display: grid; gap: 14px; align-content: start; }
.modal__rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--linha); background: var(--superficie-2); }
.modal__rodape .esquerda { margin-right: auto; }
@keyframes modal-entra { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
@keyframes veu-entra { from { opacity: 0; } }

/* grade de campos dentro de modais e formulários */
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .grade-2 { grid-template-columns: 1fr; } }

/* ---------- avisos rápidos (toast) ---------- */

/* index.html tem uma raiz fixa com duas regiões ao vivo fixas desde o carregamento: #avisos-erro (role=alert) e
   #avisos (role=status); cada aviso não leva role. Cada janela (modal, visor) nasce com a sua .avisos-raiz vazia,
   com as mesmas duas regiões (ui.js), para o primeiro aviso dentro dela já ser lido. */
.avisos-raiz, .avisos {
  position: fixed; z-index: 1000; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: grid; gap: var(--esp-2); justify-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px);
}
.avisos-raiz > .avisos { position: static; transform: none; width: auto; max-width: none; }
/* celular: o aviso nasce acima da barra de baixo, sem cobrir os 5 itens dela */
@media (max-width: 720px) {
  .avisos-raiz, .avisos { bottom: calc(60px + env(safe-area-inset-bottom) + var(--esp-3)); }
  /* dentro de uma janela a barra de baixo fica coberta pelo véu: o aviso sobe acima do rodapé dela (Salvar, Cancelar) */
  dialog .avisos-raiz { bottom: calc(100px + env(safe-area-inset-bottom)); }
}
.aviso-rapido {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-1) var(--esp-3); padding: 10px 14px 10px 12px; border-radius: var(--raio);
  background: var(--aviso-fundo); color: var(--aviso-texto); box-shadow: var(--sombra-3); font-size: var(--t-base);
  pointer-events: auto; animation: aviso-entra 0.22s var(--ease);
}
.aviso-rapido > span { flex: 1 1 auto; min-width: 0; }
.aviso-rapido .ic { width: var(--ic-m); height: var(--ic-m); }
.aviso-rapido--sucesso .ic { color: var(--aviso-sucesso); }
.aviso-rapido--erro .ic { color: var(--aviso-erro); }
.aviso-rapido button { border: 0; background: none; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; padding: 0 0 0 6px; }
/* o fundo do aviso é o contrário do tema: o contorno de foco usa a cor do próprio texto */
.aviso-rapido :focus-visible { outline-color: currentColor; }
/* toque: o botão do aviso ganha 44px de altura sem engordar o aviso (margem negativa come o respiro) */
@media (pointer: coarse) {
  .aviso-rapido button { min-height: 44px; margin-block: -10px; padding: 0 var(--esp-2); }
}
.aviso-rapido.sai { opacity: 0; transform: translateY(6px); transition: 0.2s; }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(10px); } }

/* ---------- menu suspenso e autocompletar ---------- */

.menu {
  position: fixed; z-index: 900; min-width: 180px; max-width: 320px; max-height: 60vh; overflow-y: auto; padding: 4px;
  background: var(--elevado); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-2);
  animation: modal-entra 0.12s var(--ease);
}
.menu > button, .menu > a {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--raio-p);
  background: none; text-align: left; font-size: var(--t-base); color: var(--texto); white-space: nowrap;
}
.menu > button:hover, .menu > a:hover, .menu > [aria-selected="true"], .menu > :focus-visible { background: var(--superficie-2); }
/* foco por dentro: o menu rola e cortaria o contorno de fora */
.menu > :focus-visible { outline-offset: -2px; }
.menu > .perigo { color: var(--perigo); }
.menu > hr { border: 0; border-top: 1px solid var(--linha); margin: 4px 0; }
.menu .ic { width: var(--ic-m); height: var(--ic-m); color: var(--mudo); }
.menu .menu__titulo { padding: 6px 10px 4px; font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mudo); }
.menu small { margin-left: auto; color: var(--mudo); font-size: var(--t-sm); }
/* opção marcada (menuitemradio com aria-checked): negrito e o check na ponta direita */
.menu > [aria-checked="true"] { font-weight: 700; }
.menu > [aria-checked="true"] > .ic:last-child { margin-left: auto; color: var(--texto); }
@media (pointer: coarse) {
  .menu > button, .menu > a { min-height: 44px; }
}
/* no celular o menu abre como folha presa embaixo, ao alcance do polegar (ui.js põe .menu--folha).
   O !important vence a posição que posicionar() escreve no style. Fica acima dos avisos (z-index 1000), que nascem
   no mesmo ponto: um "Movido · Desfazer" na tela não cobre o fim da folha (Apagar, Sair); o aviso volta quando ela fecha. */
.menu.menu--folha {
  z-index: 1001;
  left: max(var(--esp-2), env(safe-area-inset-left)) !important; right: max(var(--esp-2), env(safe-area-inset-right)) !important;
  top: auto !important; bottom: calc(var(--esp-2) + env(safe-area-inset-bottom)) !important;
  width: auto !important; min-width: 0 !important; max-width: none; max-height: 70dvh;
  padding: var(--esp-2); border-radius: var(--raio-g); box-shadow: var(--sombra-3);
  overscroll-behavior: contain; animation: folha-entra 0.18s var(--ease);
}
.menu--folha > button, .menu--folha > a { min-height: 44px; }
@media (max-width: 720px) {
  /* acima da barra de baixo (60px + área segura) */
  .menu.menu--folha { bottom: calc(60px + env(safe-area-inset-bottom) + var(--esp-2)) !important; }
}
/* dentro de uma janela a barra de baixo fica coberta pelo véu: a folha desce até a borda */
dialog .menu.menu--folha { bottom: calc(var(--esp-2) + env(safe-area-inset-bottom)) !important; }
@keyframes folha-entra { from { opacity: 0; transform: translateY(16px); } }

/* ---------- visualizador de fotos ----------
   Sempre escuro, nos dois temas. Pode ser um <dialog> aberto com showModal (foco preso, Esc): tira o estilo padrão dele. */

.visor {
  position: fixed; inset: 0; z-index: 1100; display: grid; grid-template-rows: auto 1fr auto;
  background: color-mix(in srgb, var(--carvao) 94%, transparent); color: var(--marfim); animation: veu-entra 0.15s;
}
dialog.visor { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; }
dialog.visor:not([open]) { display: none; }
dialog.visor::backdrop { background: transparent; }
.visor :focus-visible { outline-color: var(--champanhe); }
.visor__cab {
  display: flex; align-items: center; gap: var(--esp-3);
  padding: max(var(--esp-3), env(safe-area-inset-top)) max(var(--esp-4), env(safe-area-inset-right)) var(--esp-3) max(var(--esp-4), env(safe-area-inset-left));
}
.visor__cab .btn { background: transparent; color: var(--marfim); border-color: color-mix(in srgb, var(--marfim) 25%, transparent); }
.visor__cab .btn:hover { border-color: var(--marfim); }
.visor__palco { display: grid; place-items: center; min-height: 0; padding: 0 56px; position: relative; }
.visor__palco img, .visor__palco video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px; }
.visor__seta { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--marfim) 10%, transparent); color: var(--marfim); display: grid; place-items: center; }
.visor__seta:hover { background: color-mix(in srgb, var(--marfim) 20%, transparent); }
.visor__seta--esq { left: max(var(--esp-2), env(safe-area-inset-left)); }
.visor__seta--dir { right: max(var(--esp-2), env(safe-area-inset-right)); }
.visor__legenda { padding: var(--esp-3) var(--esp-4) calc(18px + env(safe-area-inset-bottom)); text-align: center; font-size: var(--t-sm); color: var(--champanhe); }
/* celular: a foto usa a largura toda; as setas ficam por cima dela */
@media (max-width: 720px) { .visor__palco { padding: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}