/* ============================================================================ SOUS — fundações da identidade v1 ---------------------------------------------------------------------------- Fonte única dos tokens. Os nomes seguem o §44 das diretrizes de UX/UI (docs/diretrizes/diretrizes_ux_ui_v1_restaurantes.md), para o Figma e o código falarem a mesma língua. Nada abaixo da seção TOKENS inventa valor novo. Regras que vêm de contraste medido, não de gosto (docs/adr/ADR-003): - #1246D8 dá 7,26:1 com branco nos dois sentidos: serve como superfície com tinta branca e como texto sobre branco. - o azul 70% (#5A7DE4) dá 3,83:1 com branco: só texto grande ou decoração, nunca botão. - amarelo #FBF1B1 leva texto azul (6,33:1) ou grafite (12,9:1); nunca branco (1,15:1). - contorno de campo #8892A0 dá 3,15:1 sobre branco, o mínimo da WCAG 1.4.11. Toda página que emite carrega esta folha ANTES de qualquer outra: var(--x) sem fallback falha em silêncio, e a página só perde a identidade. Guardado por Sous.Tests/IdentidadeVisualTests.cs. ========================================================================== */ /* ── FONTE ─────────────────────────────────────────────────────────────────── */ /* Inter 4.1, variável (pesos 100 a 900 num arquivo), SIL OFL 1.1. Origem e hash em wwwroot/fonts/README.md. O caminho é relativo a este CSS. */ @font-face { font-family: "Inter"; src: url("../fonts/InterVariable.woff2") format("woff2-variations"), url("../fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* Serial Blur Blurest — SÓ o wordmark "sous", em minúsculas (decisão do dono do produto em 04/09/2026). É a versão TRIAL da fonte, sem licença de produção: a licença tem de ser comprada antes de haver usuários reais. Fica isolada atrás deste @font-face e de --font-brand; nenhum outro seletor a referencia. */ @font-face { font-family: "SOUS Marca"; src: url("../fonts/SerialBlur-Blurest.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* ── TOKENS (§44) ──────────────────────────────────────────────────────────── */ :root { /* marca escrita: "sous", em minúsculas, nesta fonte e em mais nada */ --font-brand: "SOUS Marca", var(--font-family); /* cor — azul + branco + amarelo pontual (§6). Valores provisórios até o Figma. */ --color-brand-primary: #1246D8; --color-brand-strong: #0E3AB3; /* hover e ativo da marca */ --color-brand-support: #FBF1B1; /* amarelo: sinal, nunca fundo recorrente */ --color-brand-70: #5A7DE4; /* §7: só texto grande ou decoração */ --color-brand-40: #A0B5EF; --color-brand-15: #DCE3F9; --color-brand-6: #F0F3FD; --color-background-primary: #FFFFFF; --color-background-secondary: #F6F7F9; /* superfície secundária, Quiet Block */ --color-text-primary: #1F2933; /* grafite: 14,8:1 sobre branco */ --color-text-secondary: #5B6470; /* 6,0:1 sobre branco */ --color-text-inverse: #FFFFFF; --color-text-brand: var(--color-brand-primary); --color-border-subtle: #E5E7EB; /* divisória; não serve para campo */ --color-border-field: #8892A0; /* contorno de campo, 3,15:1 */ --color-state-error: #B42318; /* 6,57:1 com branco */ --color-state-error-surface: #FCECEA; --color-focus: var(--color-brand-primary); /* espaço (§16) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* raio (§15): discreto, 6 a 10 px */ --radius-sm: 6px; --radius-md: 10px; /* tipografia (§9, §10): uma família, expressão por escala */ --font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --type-hero: clamp(4.5rem, 9vw, 7.5rem); /* 72–120 px */ --type-kpi: clamp(3rem, 6vw, 4.5rem); /* 48–72 px */ --type-page-title: clamp(2rem, 4vw, 3rem); /* 32–48 px */ --type-block-title: clamp(1.125rem, 2vw, 1.5rem); /* 18–24 px */ --type-body: 1rem; /* 16 px, dentro de 15–17 */ --type-secondary: 0.8125rem; /* 13 px, dentro de 12–14 */ --type-label: 0.6875rem; /* 11 px, dentro de 10–12 */ --weight-regular: 400; --weight-medium: 500; --leading-tight: 1.05; --leading-snug: 1.25; --leading-body: 1.5; --tracking-label: 0.08em; --tracking-hero: -0.02em; /* forma e movimento */ --shadow-sm: 0 1px 2px rgba(31, 41, 51, 0.06); --container-max: 75rem; /* 1200 px */ --grid-columns: 12; /* §17: desktop */ --grid-gap: var(--space-5); --touch-target: 44px; /* §37: área de toque */ --control-height: 2.5rem; /* 40 px em mesa */ --transition: 150ms ease; } @media (max-width: 63.99rem) { /* < 1024: tablet, 8 colunas */ :root { --grid-columns: 8; --grid-gap: var(--space-4); } } @media (max-width: 47.99rem) { /* < 768: mobile, 4 colunas */ :root { --grid-columns: 4; } } /* ── BASE ──────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-family); -webkit-text-size-adjust: 100%; color-scheme: light; /* §37: leitura em ambiente claro */ } body { margin: 0; background: var(--color-background-primary); color: var(--color-text-primary); font-size: var(--type-body); font-weight: var(--weight-regular); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, p, figure, ul, ol { margin: 0; } ul, ol { padding: 0; } img, svg { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--color-text-brand); text-decoration: none; } a:hover { text-decoration: underline; } [hidden] { display: none !important; } :focus-visible { /* §37: foco visível no teclado */ outline: 2px solid var(--color-focus); outline-offset: 2px; } /* §11: algarismo tabular em toda coluna numérica. A Inter tem; é só pedir. */ .num, td.num, th.num { font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ── TIPOGRAFIA (§10, §11, §12) ────────────────────────────────────────────── */ .hero-number { font-size: var(--type-hero); line-height: var(--leading-tight); letter-spacing: var(--tracking-hero); font-weight: var(--weight-regular); font-variant-numeric: tabular-nums; } .kpi { font-size: var(--type-kpi); line-height: var(--leading-tight); letter-spacing: -0.01em; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; } .page-title { font-size: var(--type-page-title); line-height: var(--leading-snug); font-weight: var(--weight-medium); letter-spacing: -0.01em; } .block-title { font-size: var(--type-block-title); line-height: var(--leading-snug); font-weight: var(--weight-medium); } /* Micro-label em caixa alta: só para rótulo curto (§12). */ .label { font-size: var(--type-label); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-secondary); } .text-secondary { font-size: var(--type-secondary); color: var(--color-text-secondary); } .text-brand { color: var(--color-text-brand); } .text-right { text-align: right; } /* Valor e unidade separados (§11): "43,9" grande, "kg" menor. */ .value { font-variant-numeric: tabular-nums; } .value__unit { font-size: 0.5em; font-weight: var(--weight-regular); color: var(--color-text-secondary); margin-left: 0.25em; } /* ── LAYOUT (§16, §17) ─────────────────────────────────────────────────────── */ .page { max-width: var(--container-max); margin-inline: auto; padding: var(--space-6) var(--space-5) var(--space-8); } .stack { display: flex; flex-direction: column; gap: var(--gap, var(--space-5)); } .stack--tight { --gap: var(--space-3); } .stack--loose { --gap: var(--space-7); } .grid { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); gap: var(--grid-gap); } .grid > * { grid-column: span min(var(--span, var(--grid-columns)), var(--grid-columns)); } .span-3 { --span: 3; } .span-4 { --span: 4; } .span-6 { --span: 6; } .span-8 { --span: 8; } .span-12 { --span: 12; } .rule { border: 0; border-top: 1px solid var(--color-border-subtle); margin: 0; } /* A barra quebra linha no celular e a navegação rola dentro de si mesma: a página nunca rola na horizontal (§23 — os componentes só mudam de organização). */ .topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-subtle); } .topbar > * { min-width: 0; } /* A marca escrita: "sous", minúsculas, na fonte da marca. O texto no HTML já vai em minúsculas; o text-transform é rede de segurança. */ .wordmark { font-family: var(--font-brand); font-weight: var(--weight-regular); font-size: 1.5rem; line-height: 1; letter-spacing: 0; text-transform: lowercase; color: var(--color-text-primary); text-decoration: none; } .wordmark:hover { text-decoration: none; } .wordmark--grande { font-size: 2.25rem; } /* Telas de acesso (login, 2FA, recuperar senha, cadastro): uma coluna centrada, 24 rem no máximo, o wordmark em cima e nada mais em volta. */ .acesso { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6) var(--space-5); } .acesso__coluna { width: 100%; max-width: 24rem; display: flex; flex-direction: column; gap: var(--space-6); } .acesso__links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); } /* Em tela estreita a coluna encosta no topo: centrada, o teclado cobre o formulário. */ @media (max-width: 47.99rem) { .acesso { place-items: start center; padding-top: var(--space-8); } } /* Dispositivo de toque: controle e botão sobem para o alvo de 44 px (§37). */ @media (pointer: coarse) { .btn:not(.btn--quiet), .input, .select { min-height: var(--touch-target); } } /* Campo de código (verificação, convite): centrado, espaçado. */ .input--codigo { text-align: center; font-size: var(--type-block-title); letter-spacing: 0.2em; font-variant-numeric: tabular-nums; } .input--maiusculas { text-transform: uppercase; } /* Navegação curta (§18): quatro entradas para o gestor, duas para a praça. */ /* Sem overflow: a barra guarda os menus Cadastros e Administração, e um contêiner com rolagem recorta a lista que abre para baixo — o menu abria invisível (06/09/2026). Em tela estreita a barra quebra em duas linhas. */ .nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); max-width: 100%; } .nav__link { display: inline-flex; align-items: center; flex: none; white-space: nowrap; min-height: var(--control-height); font-size: var(--type-label); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-secondary); border-bottom: 2px solid transparent; text-decoration: none; } .nav__link:hover { color: var(--color-text-primary); text-decoration: none; } .nav__link[aria-current="page"] { color: var(--color-brand-primary); border-bottom-color: var(--color-brand-primary); } /* ── BLOCOS (§13) ──────────────────────────────────────────────────────────── */ .block { padding: var(--space-5); border-radius: var(--radius-md); } .block--bordered { border: 1px solid var(--color-border-subtle); } .block--quiet { background: var(--color-background-secondary); } .block--inverse { background: var(--color-brand-primary); color: var(--color-text-inverse); } .block--inverse .label, .block--inverse .text-secondary, .block--inverse .value__unit { color: var(--color-text-inverse); opacity: 0.8; } .block--inverse a { color: var(--color-text-inverse); } /* 13.1 Hero Block / 19.1 HeroMetric — um por área principal. */ .hero-metric { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-7) var(--space-6); border-radius: var(--radius-md); border: 1px solid var(--color-border-subtle); background: var(--color-background-primary); } .hero-metric--inverse { background: var(--color-brand-primary); color: var(--color-text-inverse); border-color: transparent; } .hero-metric--inverse .label, .hero-metric--inverse .hero-metric__context, .hero-metric--inverse .value__unit { color: var(--color-text-inverse); opacity: 0.8; } .hero-metric--inverse a { color: var(--color-text-inverse); } .hero-metric--inverse .hero-metric__comparison { color: var(--color-text-inverse); } /* Sobre o azul, o primário inverte (branco com tinta azul) e o secundário fica em contorno branco. */ .hero-metric--inverse .btn--primary { background: var(--color-background-primary); color: var(--color-brand-primary); } .hero-metric--inverse .btn--primary:hover { background: var(--color-brand-6); } .hero-metric--inverse .btn--secondary { background: transparent; color: var(--color-text-inverse); border-color: rgba(255, 255, 255, 0.65); } .hero-metric--inverse .btn--secondary:hover { background: var(--color-brand-strong); } .hero-metric--inverse .btn:focus-visible { outline-color: var(--color-text-inverse); } .hero-metric__value { font-size: var(--type-hero); line-height: var(--leading-tight); letter-spacing: var(--tracking-hero); font-weight: var(--weight-regular); font-variant-numeric: tabular-nums; } .hero-metric__context { font-size: var(--type-block-title); color: var(--color-text-secondary); } .hero-metric__comparison { font-size: var(--type-body); display: flex; align-items: baseline; gap: var(--space-2); } .hero-metric__comparison strong { font-size: var(--type-block-title); font-weight: var(--weight-medium); } .hero-metric__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-3); } /* 19.2 MetricBlock — KPI secundário, comparação, resumo. */ .metric-block { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-md); border: 1px solid var(--color-border-subtle); } .metric-block--quiet { border: 0; background: var(--color-background-secondary); } /* O bloco de métrica invertido: azul com tinta branca. Um por tela, como o hero (decisão de 08/09/2026 para a Eficiência). */ .metric-block--inverse { border: 0; background: var(--color-brand-primary); color: var(--color-text-inverse); } .metric-block--inverse .label, .metric-block--inverse .metric-block__context { color: var(--color-text-inverse); opacity: 0.8; } .metric-block__value { font-size: var(--type-kpi); line-height: var(--leading-tight); font-weight: var(--weight-medium); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .metric-block__context { color: var(--color-text-secondary); } /* 13.2 Action Block / 19.3 NavigationBlock — o bloco é a entrada. */ .nav-block { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-md); border: 1px solid var(--color-border-subtle); color: inherit; text-decoration: none; transition: border-color var(--transition); } .nav-block:hover, .nav-block:focus-visible { border-color: var(--color-brand-primary); text-decoration: none; } .nav-block__value { font-size: var(--type-kpi); line-height: var(--leading-tight); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; } .nav-block__context { color: var(--color-text-secondary); } .nav-block__arrow { align-self: flex-end; margin-top: var(--space-2); color: var(--color-brand-primary); font-size: var(--type-block-title); line-height: 1; } /* 19.6 SectionHeader */ .section-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border-subtle); font-size: var(--type-label); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-secondary); } /* A ação do cabeçalho de seção não herda a caixa alta do rótulo. */ .section-header .btn { text-transform: none; letter-spacing: 0; font-size: var(--type-secondary); } /* 19.5 DataRow — rótulo à esquerda, valor à direita. */ .data-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-subtle); } .data-row__label { color: var(--color-text-secondary); } .data-row__value { font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; } .data-row--link { color: inherit; text-decoration: none; } button.data-row--link { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--color-border-subtle); font: inherit; text-align: left; cursor: pointer; } .hero-metric--link { display: flex; flex-direction: column; gap: var(--space-2); color: inherit; text-decoration: none; } .hero-metric--link:hover { text-decoration: none; } .hero-metric--link > .label, .hero-metric--link > .hero-metric__value, .hero-metric--link > .hero-metric__context { display: block; } .data-row--link:hover { text-decoration: none; background: var(--color-background-secondary); } /* 19.4 ProductionItem — lista de execução da praça. Alvo de toque de 44 px. */ .production-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-4); min-height: var(--touch-target); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border-subtle); color: inherit; text-decoration: none; } .production-item:hover { text-decoration: none; } button.production-item { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--color-border-subtle); font: inherit; text-align: left; cursor: pointer; } .production-item__name { font-weight: var(--weight-medium); letter-spacing: 0.02em; text-transform: uppercase; } .production-item__area { display: block; font-size: var(--type-secondary); color: var(--color-text-secondary); text-transform: none; letter-spacing: 0; font-weight: var(--weight-regular); } .production-item__quantity { font-size: var(--type-block-title); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; } .production-item__unit { font-size: var(--type-secondary); font-weight: var(--weight-regular); color: var(--color-text-secondary); margin-left: var(--space-1); } /* O estado leva forma e texto, não só cor (§19.8): círculo vazio = pendente, círculo cheio com ✓ = concluído; o texto fica para leitor de tela. */ .production-item__status { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--color-border-field); display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-inverse); font-size: 1rem; line-height: 1; } .production-item--done .production-item__status { background: var(--color-brand-primary); border-color: var(--color-brand-primary); } .production-item--done .production-item__status::after { content: "✓"; } .production-item--done .production-item__name { color: var(--color-text-secondary); } /* 19.7 Filter — só quando necessário; avançados vão para o drawer. */ .filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); } .filter .field { min-width: 10rem; flex: 1 1 10rem; } /* 19.8 Status — nunca só cor: o texto está sempre no elemento. */ .status { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 1.5rem; padding: 0 var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--color-border-subtle); font-size: var(--type-secondary); font-weight: var(--weight-medium); color: var(--color-text-primary); white-space: nowrap; } .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; } .status--pending { color: var(--color-text-secondary); border-style: dashed; } .status--confirmed { color: var(--color-brand-primary); } .status--done { color: var(--color-brand-primary); background: var(--color-brand-6); border-color: transparent; } .status--attention { color: var(--color-text-primary); background: var(--color-brand-support); border-color: transparent; } .status--error { color: var(--color-state-error); background: var(--color-state-error-surface); border-color: transparent; } /* ── AÇÕES (§19.9, §20) ────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 1px solid transparent; font-size: var(--type-body); font-weight: var(--weight-medium); line-height: 1; text-decoration: none; cursor: pointer; transition: background-color var(--transition), border-color var(--transition), color var(--transition); -webkit-appearance: none; appearance: none; } .btn:hover { text-decoration: none; } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } .btn--primary { background: var(--color-brand-primary); color: var(--color-text-inverse); } .btn--primary:hover { background: var(--color-brand-strong); } .btn--secondary { background: var(--color-background-primary); color: var(--color-brand-primary); border-color: var(--color-brand-primary); } .btn--secondary:hover { background: var(--color-brand-6); } .btn--quiet { background: transparent; color: var(--color-brand-primary); padding-inline: var(--space-1); min-height: auto; } .btn--quiet:hover { text-decoration: underline; } /* Complexidade sob demanda: o resumo de um

lê como o botão silencioso, com a seta nativa. */ .disclosure { cursor: pointer; color: var(--color-brand-primary); font-size: var(--type-secondary); } .disclosure:hover { text-decoration: underline; } .btn--destructive { background: var(--color-background-primary); color: var(--color-state-error); border-color: var(--color-state-error); } .btn--destructive:hover { background: var(--color-state-error-surface); } .btn--block { width: 100%; } .btn--touch { min-height: var(--touch-target); padding-inline: var(--space-5); } /* A ação primária vai por último, à direita: é a que conclui a tarefa. */ .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); } .actions--start { justify-content: flex-start; } /* ── FORMULÁRIOS (§38) ─────────────────────────────────────────────────────── */ .form { display: flex; flex-direction: column; gap: var(--space-5); } .field { display: flex; flex-direction: column; gap: var(--space-2); } .field__label { font-size: var(--type-secondary); font-weight: var(--weight-medium); color: var(--color-text-primary); } .field__help { font-size: var(--type-secondary); color: var(--color-text-secondary); } .field__error { font-size: var(--type-secondary); color: var(--color-state-error); } .field__error:empty { display: none; } .input, .select, .textarea { width: 100%; min-height: var(--control-height); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-field); border-radius: var(--radius-sm); background: var(--color-background-primary); color: var(--color-text-primary); font-size: var(--type-body); line-height: var(--leading-snug); transition: border-color var(--transition); } .input::placeholder, .textarea::placeholder { color: var(--color-text-secondary); opacity: 1; } .input:focus, .select:focus, .textarea:focus { border-color: var(--color-brand-primary); } .textarea { min-height: calc(var(--control-height) * 2.5); resize: vertical; } .select { -webkit-appearance: none; appearance: none; padding-right: var(--space-7); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right var(--space-3) center; } .field--invalid .input, .field--invalid .select, .field--invalid .textarea { border-color: var(--color-state-error); } .input.num { text-align: right; } .input--file { padding: calc(var(--space-2) - 1px) var(--space-3); cursor: pointer; } .input--file::file-selector-button { margin-right: var(--space-3); padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border-field); border-radius: var(--radius-sm); background: var(--color-background-secondary); color: var(--color-text-primary); font: inherit; cursor: pointer; } /* Progresso de tarefa em fundo (§35): uma linha fina, sem spinner. */ .progress { height: 6px; border-radius: var(--radius-sm); background: var(--color-background-secondary); overflow: hidden; } .progress__bar { height: 100%; width: 0; background: var(--color-brand-primary); transition: width var(--transition); } .progress__bar--indeterminada { width: 100%; background: linear-gradient(90deg, var(--color-background-secondary) 0%, var(--color-brand-primary) 50%, var(--color-background-secondary) 100%); background-size: 200% 100%; animation: sous-skeleton 1.6s linear infinite; } .pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .checkbox { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--type-body); } .checkbox input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--color-brand-primary); flex: none; } /* ── TABELAS (§39) ─────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; } .table th { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-subtle); text-align: left; font-size: var(--type-label); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-secondary); white-space: nowrap; } .table td { padding: var(--space-3); border-bottom: 1px solid var(--color-border-subtle); vertical-align: middle; } .table .num { text-align: right; } .table__actions { text-align: right; white-space: nowrap; } /* ── FEEDBACK (§21), VAZIO (§34), CARREGANDO (§35), ERRO (§36) ─────────────── */ .notice { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--color-brand-6); color: var(--color-text-primary); } .notice--attention { background: var(--color-brand-support); } .notice--error { background: var(--color-state-error-surface); box-shadow: inset 3px 0 0 var(--color-state-error); } .notice__body { display: flex; flex-direction: column; gap: var(--space-1); } .notice .btn { flex: none; white-space: nowrap; } .notice__dismiss { background: transparent; border: 0; padding: var(--space-1); font-size: 1.25rem; line-height: 1; color: var(--color-text-secondary); cursor: pointer; } .empty { padding: var(--space-7) 0; display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; } .empty__title { font-size: var(--type-block-title); font-weight: var(--weight-medium); } .empty__text { color: var(--color-text-secondary); } .skeleton { display: block; min-height: 1em; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--color-background-secondary) 25%, var(--color-brand-6) 50%, var(--color-background-secondary) 75%); background-size: 200% 100%; animation: sous-skeleton 1.2s linear infinite; } @keyframes sous-skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ── DRAWER (§19.11) e MODAL (§19.12), sobre