/* Sistema · Inteligência Artificial — a chave, o modelo, o teto e o gasto. 🔴 Sem hexadecimal: tudo por token de `base/tokens.css` (`docs/design/intent.md` §D3). Zona de PRODUTO, não de Operação — escala do Espresso, densidade que serve a decisão. No Espresso desde 02/10/2026 (`base/espresso.css`): cartão por filete, rótulo sans cinza em caixa normal, campo preenchido com foco neutro, aba ativa em cinza. ⚠ Toda classe usada pelo HTML e pelo JS desta tela está DECLARADA aqui, e há teste provando (`test_ia_tela.py`). A regra existe porque em 12/09/2026 a tela de Tabelas de preço subiu com CINCO nomes que folha nenhuma declarava — 95 usos, quatro diálogos em controle cru do navegador, e a suíte verde. */ .ia-wrap { padding: 14px; /* a ação principal fica embaixo; sem isto ela cai sob a barra de gestos */ padding-bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; } /* A faixa de "gravou". Só a COR — a geometria fica com `.sh-faixa`, da casca, para as duas ocuparem o mesmo lugar e a tela não pular quando uma troca pela outra. Esta folha carrega depois de `shell.css`, então a cor vence. */ .ia-faixa-ok { background: var(--ok-bg); color: var(--ok-txt); } .ia-card { padding: 14px 15px; } .ia-card-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .ia-h3 { margin: 0 0 8px; font-size: var(--t-base); font-weight: 600; } /* ------------------------------------------------------------------ abas */ /* Aba e não trilho: esta tela não é de módulo, e o trilho desenha o menu de um módulo a partir de `data-modulo`. Rola na horizontal DENTRO de si em tela estreita — o corpo da página nunca rola na horizontal (§3). */ .ia-abas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; } .ia-aba { appearance: none; cursor: pointer; white-space: nowrap; font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 500; padding: 6px 12px; border-radius: var(--r-xs); border: 1px solid transparent; background: transparent; color: var(--ink-500); } /* aba que é LINK para a outra tela do Sistema (E-mail) */ a.ia-aba { text-decoration: none; } /* aba ativa é CINZA: o vermelho é acento com significado (Espresso, regra 2) */ .ia-aba-on { color: var(--ink-800); background: var(--ink-100); } .ia-pagina { display: flex; flex-direction: column; gap: 14px; } /* ----------------------------------------------------- o estado, no topo */ .ia-frase { margin: 4px 0 0; font-size: var(--t-sm); line-height: var(--lh-p); color: var(--ink-600); } .ia-frase b { color: var(--ink-800); } /* 🔴 ÂMBAR E NÃO VERMELHO (§A1): "sem chave" e "sem preço cadastrado" são pendência de configuração, não estado anormal de processo. Gastar o vermelho aqui roubaria força do teto estourado, que é o que realmente para a IA. */ .ia-frase-aviso { color: var(--warn-txt); } .ia-frase-aviso b { color: var(--warn-txt); } .ia-medida { margin-top: 10px; } .ia-barra { height: 8px; border-radius: var(--r-xs); background: var(--ink-100); overflow: hidden; margin-top: 6px; } .ia-barra-enche { display: block; height: 100%; background: var(--ok-txt); border-radius: var(--r-xs); } .ia-barra-quase { background: var(--warn-txt); } /* No teto a IA PAROU — estado anormal, e aqui o vermelho é legítimo. */ .ia-barra-cheia { background: var(--red-500); } /* ------------------------------------------------------------ as listas */ .ia-lista { display: grid; gap: 10px; margin-top: 10px; } .ia-item { padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--divider); background: var(--surface); display: flex; flex-direction: column; gap: 8px; } .ia-item-linha { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; } .ia-item-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .ia-selo { font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 500; padding: 2px 8px; border-radius: var(--r-xs); background: var(--ink-100); color: var(--ink-500); white-space: nowrap; } .ia-selo-ok { background: var(--ok-bg); color: var(--ok-txt); } .ia-selo-off { background: var(--aviso-bg); color: var(--warn-txt); } /* "o Liga ainda não fala com este provedor" — informação, não erro: o cadastro funciona, o adaptador é que vem depois. */ .ia-selo-espera { background: var(--aviso-bg); color: var(--warn-txt); white-space: normal; } .ia-selo-erro { background: var(--red-wash); color: var(--red-700); white-space: normal; } /* ----------------------------------------------------------- as tabelas */ /* Rola DENTRO do contêiner — o corpo da página nunca rola na horizontal (§3). */ .ia-rolagem { overflow-x: auto; margin-top: 10px; } .ia-tab { width: 100%; border-collapse: collapse; font-size: var(--t-sm); } .ia-tab th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--divider); white-space: nowrap; } .ia-tab td { padding: 9px 10px; border-bottom: 1px solid var(--divider-soft); vertical-align: middle; } .ia-tab th.num, .ia-tab td.num { text-align: right; } .ia-dado { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .ia-sub { display: block; font-size: var(--t-2xs); color: var(--ink-500); font-weight: 400; } .ia-linha-off { opacity: .55; } .ia-linha-erro td { background: var(--red-wash); } .ia-vazio { color: var(--ink-500); text-align: center; padding: 16px 4px; } .ia-linha-acao { appearance: none; background: none; border: 0; cursor: pointer; font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 600; color: var(--ink-800); text-decoration: underline; padding: 6px 4px; } .ia-grade { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .ia-grafico { width: 100%; height: 280px; margin: 8px 0 4px; } /* ------------------------------------------------------------- os campos */ .ia-campos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); } /* Rótulo do Espresso (sans 12/500 cinza, caixa normal) DECLARADO na classe, e não só herdado da camada: alguns rótulos desta tela são `` e não `