/*
 * Tema Attio · Módulo Componentes (15)
 *
 * Adapta o visual do aplicativo ao do Attio (styles.refero.design/style/08c8700c-f278-42bc-812e-f60dc6ce996e), por cima do que cada tela já tem.
 * É UM arquivo só: cada tela ganha uma linha de link, DEPOIS do próprio <style> (as regras daqui vencem as de mesma força):
 *
 *     <link rel="stylesheet" href="../../geral/componentes/tema-attio.css">
 *
 * O que o tema faz:
 *   - Traz do Attio: tipografia Inter (peso 500 como padrão, letras apertadas), formas e sombras (raio de 10 px em botões e campos, 7 px nas etiquetas,
 *     12 px nos cartões, sombras azuladas bem suaves) e botões e etiquetas (principal escuro e cheio, secundário só com borda, abas com sublinhado).
 *   - Botão principal ESCURO (a tinta da tela), não azul; o azul fica para links, foco e item ativo.
 *   - Menu lateral CLARO (a cor dos cartões), não azul-marinho.
 *   - As CORES são as da tela (fundo cinza-azulado, tinta azul-marinho, acento #2c5a8c).
 *   - Os modos de visão ficam adaptados: cada modo mantém as próprias cores. O modo Leitura usa a mesma
 *     fonte do claro (Inter, peso 500, letras apertadas).
 *   - As etiquetas de situação (Vetar, Reescrever, Ajustar, Conforme) mantêm as cores, mais suaves.
 * Nada aqui muda cor de verdade nem posição de informação: só fonte, formas, sombras, botões, etiquetas, abas e o menu lateral.
 */

/* ---------- Fonte e formas (a fonte vale nos três modos: o Leitura usa a mesma do claro) ---------- */
html:root {
  --f-ui: "Inter", "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --r: 10px;                      /* botões, campos, abas */
  --r-card: 12px;                  /* cartões (Attio: 11 a 14 px) */
  --r-etq: 7px;                    /* etiquetas e selos */
  --sombra-1: 0 2px 3px -2px rgb(28 40 64 / .10), 0 4px 6px -2px rgb(28 40 64 / .04);                 /* cartão em repouso */
  --sombra-2: 0 2px 6px 0 rgb(28 40 64 / .06), 0 6px 20px -2px rgb(28 40 64 / .08);                   /* janela, balão, barra */
}
html:root[data-theme="dark"], html:root[data-theme="quati"] {
  --sombra-1: 0 2px 3px -2px rgb(0 0 0 / .40), 0 4px 6px -2px rgb(0 0 0 / .20);
  --sombra-2: 0 2px 6px 0 rgb(0 0 0 / .30), 0 6px 20px -2px rgb(0 0 0 / .40);
}
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]):not([data-theme="leitura"]):not([data-theme="quati"]):not([data-theme="game"]) {
    --sombra-1: 0 2px 3px -2px rgb(0 0 0 / .40), 0 4px 6px -2px rgb(0 0 0 / .20);
    --sombra-2: 0 2px 6px 0 rgb(0 0 0 / .30), 0 6px 20px -2px rgb(0 0 0 / .40);
  }
}
html:root body {
  font-weight: 500;                /* o Attio usa 500 como peso padrão da interface */
  letter-spacing: -.01em;
  font-feature-settings: "ss03" 1, "cv11" 1;
}
button, input, select, textarea { letter-spacing: inherit; }
/* o título da seção fica 600; o da tela (.to-titulo) volta a 700, o peso do título da página e do título compacto na régua (ritmo.css) */
html:root .board-head h2 { font-weight: 600; letter-spacing: -.015em; }

/* ---------- Cartões e seções ---------- */
.caixa { border-radius: var(--r-card); box-shadow: var(--sombra-1); }
.rc { border-radius: 10px; }
.f-det, .modo-det, .opcoes { border-radius: 10px; }
.caixa > h3, .rc-head h3 { font-weight: 600; }
.tab-r tbody tr:hover td { background: color-mix(in srgb, var(--sunken) 70%, transparent); }

/* ---------- Botões ---------- */
.btn, .to-btn { border-radius: var(--r); font-weight: 500; padding: 7px 13px; }
.btn.small { padding: 5px 11px; }
.btn:hover, .to-btn:hover { border-color: var(--muted); background: color-mix(in srgb, var(--sunken) 55%, var(--surface)); }
/* principal: escuro e cheio (a tinta da tela); no modo escuro vira claro, no Leitura fica marrom-escuro */
.btn.primary, .to-btn.to-principal { background: var(--marca, var(--ink)); border-color: var(--marca, var(--ink)); color: var(--marca-ink, var(--surface)); }
.btn.primary:hover, .to-btn.to-principal:hover { background: color-mix(in srgb, var(--ink) 86%, var(--surface)); border-color: color-mix(in srgb, var(--ink) 86%, var(--surface)); filter: none; }
.btn.primary:disabled:hover, .btn.primary[aria-disabled="true"]:hover,
.to-btn.to-principal:disabled:hover, .to-btn.to-principal[aria-disabled="true"]:hover { background: var(--ink); border-color: var(--ink); }
.to-barra { box-shadow: 0 -4px 16px rgb(28 40 64 / .06); }
.to-falta { border-radius: var(--r); font-weight: 500; }

/* ---------- Etiquetas (borda fina, raio de 7 px; as de situação mantêm a cor, mais suaves) ---------- */
.chip, .to-chip { border-radius: var(--r-etq); font-weight: 500; }
.chip.warn, .to-chip.to-warn { background: color-mix(in srgb, var(--warn-bg) 60%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.chip.crit, .to-chip.to-crit { background: color-mix(in srgb, var(--crit-bg) 60%, var(--surface)); border-color: color-mix(in srgb, var(--crit) 22%, transparent); }
.chip.pause, .to-chip.to-pause { background: color-mix(in srgb, var(--pause-bg) 60%, var(--surface)); border-color: color-mix(in srgb, var(--pause) 22%, transparent); }
.chip.ok, .to-chip.to-ok { background: color-mix(in srgb, var(--ok-bg) 60%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
.chip.modo-b[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* ---------- Abas: o seletor de volumes vira uma barra de abas com sublinhado ---------- */
.volumes { gap: 4px 22px; border-bottom: 1px solid var(--line); }
.vol-b { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 8px 0 9px; margin-bottom: -1px; color: var(--muted); font-weight: 500; }
.vol-b:hover { border-color: transparent; border-bottom-color: var(--line); color: var(--ink); }
.vol-b[aria-pressed="true"] { background: none; color: var(--ink); border-bottom-color: var(--ink); }
.vol-b .chip { border-color: var(--line); color: var(--muted); opacity: 1; }

/* ---------- Menu lateral claro (a cor dos cartões; o item ativo usa a cor do fundo) ---------- */
body {
  --mn-bg: var(--surface);
  --mn-fg: var(--ink);
  --mn-muted: var(--muted);
  --mn-ativo: var(--bg);
  --mn-hover: color-mix(in srgb, var(--ink) 6%, transparent);
  --mn-linha: var(--line);
}
.mn { box-shadow: 1px 0 0 color-mix(in srgb, var(--ink) 8%, transparent); }
.mn-item[aria-current="page"] { font-weight: 600; }
/* a Inter é mais larga que a Public Sans: sem isto, "Tratamento de Documentos" é cortado no menu */
/* (os componentes injetam o CSS deles depois deste arquivo: por isso `.mn .mn-item`, mais forte que `.mn-item`) */
.mn .mn-item { font-size: 13px; gap: 9px; padding-left: 11px; padding-right: 11px; }
html:root .mn .mn-item { letter-spacing: -.012em; }
.mn .mn-mod { color: var(--muted); }
.mn .mn-caixa { accent-color: var(--accent); }
.mn .mn-dica { background: var(--sunken); }

/* ---------- Janelas do Visualizador ---------- */
html dialog.vz { border-radius: 14px; box-shadow: var(--sombra-2); }
.vz .vz-caixa { border-radius: 13px; }

/* ---------- Respiro entre o título da tela e o conteúdo (em todas as telas) ---------- */
/* o cabeçalho de cada tela (.pagehead) e o da tela de obra (.to-cab) ganham espaço embaixo; no Login, o cabeçalho de dentro da área principal */
.pagehead { margin-bottom: var(--rt-cab-depois, 10px); }
.to-cab { margin-bottom: 14px; }
/* no Login o cabeçalho fica dentro do conteúdo (gap de 12): 26 + 12 = 38 px do título ao conteúdo, o mesmo do Faro Quati (8 + 22 + 8; ritmo.css) */
main#view > .head, main#view > .head-linha { margin-bottom: 26px; }
/* o título da seção que abre a área principal (.board-head: "Análise ERER", "Obras", "Feedback da obra", "Volumes") também ganha um pouco mais de espaço antes do conteúdo */
.board-head { margin-bottom: 8px; }