/* =============================================================================
 * FUNDAÇÃO VISUAL — Painel de Atendimento Castelapi
 * =============================================================================
 *
 * ⛔ POR QUE ESTE ARQUIVO É CSS CRU, SERVIDO DE `public/`, E NÃO TAILWIND.
 *
 * Esta stack NÃO TEM BUILD. `public/build/` não existe, `node_modules/` não
 * existe; Tailwind e Vite estão no `package.json` e nunca rodaram. O navegador
 * recebe só `public/css/filament/` (o CSS pré-compilado do Filament) e o que
 * estiver escrito à mão dentro de cada view.
 *
 * A consequência foi medida: **uma tela nova escrita em classes utilitárias sai
 * sem estilo nenhum no navegador e passa verde nos 574 testes da suíte.** Teste
 * não olha pixel. O defeito atravessa o portão inteiro e só aparece no cliente.
 *
 * Então a fundação é um arquivo estático servido pelo nginx, sem passo nenhum
 * entre editar e publicar. Quem quiser conferir abre a URL.
 *
 * ⚠️ O nginx serve `.css` com `max-age=31536000, immutable` — um ano sem
 * revalidar. A URL SEMPRE leva `?v=` do `filemtime`, por `App\Support\Ativos`.
 * O componente `<x-fundacao.estilo />` já faz isso; link escrito à mão, não.
 *
 * ⛔ TUDO AQUI É ESCOPADO EM `.at`. Nada nesta folha alcança as telas que já
 * estão no ar — elas continuam com o `<style>` próprio delas. Isto é acréscimo,
 * não troca. A única coisa global são os `@font-face`, e eles não pintam nada
 * até alguém pedir a família pelo nome.
 *
 * O tema escuro segue a chave do Filament: a classe `.dark` no `<html>`. Fora
 * da casca do Filament, `[data-at-tema="escuro"]` faz o mesmo.
 * ⚠️ Sem `prefers-color-scheme` de propósito: o Filament já resolve "sistema"
 * em JavaScript e põe `.dark`. Uma segunda regra brigaria com a escolha do
 * atendente, que é dele e não nossa.
 *
 * As medidas e os motivos estão em `docs/fundacao-visual.md`.
 * A conferência de contraste está em
 * `tests/Feature/Fundacao/ContrasteDaFundacaoTest.php` e ela LÊ ESTE ARQUIVO.
 * ========================================================================== */


/* -----------------------------------------------------------------------------
 * 1. As três vozes do manual (§06), servidas daqui — nunca de CDN.
 *
 * O desenho puxava as três de `fonts.googleapis.com`. Este painel tem conversa
 * de cliente dentro: mandar o IP de quem atende para um terceiro a cada tela é
 * coisa que a política de privacidade teria de declarar. Ver
 * `assets/fontes/LEIA-ME.md` para os subconjuntos e as licenças (OFL 1.1).
 *
 * `font-display: swap` — o texto aparece na hora com a fonte do sistema e troca
 * quando a nossa chega. O contrário (`block`) deixaria a tela em branco.
 * -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url('/assets/fontes/sora-600-700-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url('/assets/fontes/sora-600-700-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('/assets/fontes/archivo-400-600-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('/assets/fontes/archivo-400-600-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fontes/ibm-plex-mono-400-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fontes/ibm-plex-mono-400-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fontes/ibm-plex-mono-500-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fontes/ibm-plex-mono-500-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* =============================================================================
 * 2. CAMADA DA MARCA — o manual, copiado, sem opinião
 * =============================================================================
 * Os treze tokens da página 09 do `Manual Castelapi-Rev1.3.1.pdf`, com os nomes
 * oficiais. Idênticos ao `public/css/tokens.css` da stack `castelapi`.
 *
 * ⛔ TELA NENHUMA USA ESTES DIRETAMENTE. Eles são o catálogo; o que a tela usa
 * é a camada de papéis (§3), que sabe qual valor serve para o quê e em qual
 * tema. Foi misturar as duas coisas que produziu os 51,3% de reprovação — o
 * desenho pegou `--castelapi-graphite-muted`, que o manual define como
 * "séries neutras, rótulos", e o usou como corpo de texto.
 * ========================================================================== */

:root {
    --castelapi-graphite: #252B33;
    --castelapi-graphite-deep: #20242B;
    --castelapi-graphite-soft: #9AA3B2;
    --castelapi-graphite-muted: #8A8171;
    --castelapi-bone: #F6F3EC;
    --castelapi-bone-dim: #F1ECE0;
    --castelapi-line: #E3DCCB;
    --castelapi-honey: #D9982F;
    --castelapi-honey-text: #7D5A16;
    --castelapi-terracotta: #B65C38;
    --castelapi-terracotta-text: #9E4A28;
    --castelapi-terracotta-light: #C97A54;
    --castelapi-success: #3D6B44;
    --castelapi-font-display: 'Sora';
    --castelapi-font-body: 'Archivo';
    --castelapi-font-mono: 'IBM Plex Mono';
}


/* =============================================================================
 * 3. CAMADA DE PAPÉIS — um token por trabalho, não por cor
 * =============================================================================
 *
 * ⛔ A SEPARAÇÃO QUE ESTA CAMADA EXISTE PARA FAZER.
 *
 * O desenho tinha UM token cinza (`--c-mut`) fazendo três trabalhos ao mesmo
 * tempo: rótulo de seção, corpo de texto secundário e série de gráfico.
 * Consertar o valor sem separar os papéis faz o defeito voltar na próxima tela,
 * porque o próximo desenhista vai pegar o mesmo token para o próximo trabalho.
 * Aqui são três tokens:
 *
 *   --at-texto-2       prosa que se LÊ (prévia, texto de comentário, meta)
 *   --at-rotulo        palavra que se RECONHECE (rótulo, hora, dono, eyebrow)
 *   --at-serie-neutra  série de gráfico — ⛔ NUNCA texto, e é o único que
 *                      guarda o `#8A8171` do manual, no papel que o manual deu
 *
 * Todo par texto/fundo desta seção foi medido pela WCAG 2.1 e passa de 4,5:1
 * com margem. Os números estão em `docs/fundacao-visual.md` e são conferidos a
 * cada rodada da suíte, LENDO ESTE ARQUIVO — não uma cópia dele.
 * ========================================================================== */

.at {
    /* --- superfícies -------------------------------------------------- */
    --at-fundo: #F6F3EC;              /* osso — fundo da janela                */
    --at-superficie: #F6F3EC;         /* osso — painel, cartão, lista          */
    --at-superficie-2: #F1ECE0;       /* osso-suave — superfície rebaixada     */
    --at-selecao: #F1E3C6;            /* linha selecionada, alternador ativo   */

    /* --- traço --------------------------------------------------------- */
    --at-linha: #E3DCCB;              /* filete DECORATIVO entre blocos        */
    --at-contorno-controle: #927E4F;  /* borda de campo e de botão (≥3:1)      */

    /* --- texto --------------------------------------------------------- */
    --at-texto: #252B33;              /* grafite — corpo primário              */
    --at-texto-2: #5D574C;            /* prosa secundária                      */
    --at-rotulo: #6B6458;             /* rótulo, meta, eyebrow, hora           */

    /* --- acentos ------------------------------------------------------- */
    --at-mel: #D9982F;                /* PREENCHIMENTO em mel (botão, balão)   */
    --at-mel-traco: #7D5A16;          /* mel como LINHA de 1–2 px (ver abaixo) */
    --at-mel-texto: #7D5A16;          /* texto e ícone em mel                  */
    --at-sobre-mel: #252B33;          /* texto POR CIMA de superfície mel      */
    --at-terracota-texto: #9E4A28;    /* link, texto de alerta                 */

    /* ⛔ POR QUE O MEL SE PARTE EM TRÊS.
       O manual já diz "mel e terracota puros são gráficos: em texto sobre fundo
       claro, use sempre as versões -texto" — e publica mel sobre osso em 2,2:1.
       O que ele não diz, porque não fala de tela, é que a mesma conta vale para
       LINHA: a barra de 2 px que marca a conversa selecionada dá **1,95:1**
       contra o próprio fundo da seleção, e a WCAG 1.4.11 pede 3:1 de tudo que
       identifica estado. Uma seleção que só se distingue por 1,95:1 é uma
       seleção que parte das pessoas não vê.
       Então: `--at-mel` preenche, `--at-mel-traco` risca, `--at-mel-texto`
       escreve. No tema escuro os três coincidem, porque lá o mel puro já passa. */

    /* --- estados ------------------------------------------------------- */
    --at-urgente: #AA5634;            /* superfície de estado urgente          */
    --at-sobre-urgente: #F6F3EC;
    --at-sucesso: #3D6B44;            /* superfície de estado positivo         */
    --at-sobre-sucesso: #F6F3EC;

    /* --- foco (§5) ----------------------------------------------------- */
    --at-foco: #D9982F;
    --at-foco-contorno: #252B33;

    /* --- gráfico ------------------------------------------------------- */
    --at-serie-neutra: #8A8171;       /* ⛔ série de dado. NUNCA texto.        */
}

.dark .at,
[data-at-tema='escuro'] .at,
.at[data-at-tema='escuro'] {
    --at-fundo: #20242B;
    --at-superficie: #252B33;
    --at-superficie-2: #20242B;
    --at-selecao: #35322C;

    --at-linha: #42474D;
    --at-contorno-controle: #767E87;

    --at-texto: #F6F3EC;
    --at-texto-2: #9AA3B2;
    --at-rotulo: #929CAC;

    --at-mel: #D9982F;
    --at-mel-traco: #D9982F;
    --at-mel-texto: #D9982F;
    --at-sobre-mel: #252B33;
    --at-terracota-texto: #CB805C;

    --at-urgente: #AA5634;
    --at-sobre-urgente: #F6F3EC;
    --at-sucesso: #3D6B44;
    --at-sobre-sucesso: #F6F3EC;

    --at-foco: #D9982F;
    --at-foco-contorno: #20242B;

    --at-serie-neutra: #8A8171;
}


/* =============================================================================
 * 4. TIPOGRAFIA — a escala do manual (§06), convertida para tela
 * =============================================================================
 * O manual dá a escala em PONTOS, para impresso. Na tela, 1 pt = 1,333 px
 * (96 dpi / 72). A conversão, e o que ela reprova do desenho:
 *
 *   Título 1   Sora 600   20–28 pt  →  26,7–37,3 px
 *   Título 2   Sora 600   12–15 pt  →  16,0–20,0 px
 *   Corpo      Archivo    10–11 pt  →  13,3–14,7 px
 *   Legenda    mono 400    8–9  pt  →  10,7–12,0 px
 *
 * ⛔ O desenho escreve mono a 9,5 px e prévia de conversa a 12 px — ABAIXO do
 * piso do manual em ambos os casos, e a prévia é conteúdo real do cliente. O
 * manual ganha: nada abaixo de 11 px nesta fundação, e nada abaixo de 13 px
 * carrega prosa.
 * ========================================================================== */

.at {
    --at-fonte-titulo: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --at-fonte-corpo: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --at-fonte-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;

    --at-numero: 36px;       /* Sora 600 — contador de destaque (topo do T1)   */
    --at-t1: 28px;           /* Sora 600 — título de tela                     */
    --at-t2: 20px;           /* Sora 600 — título de painel                   */
    --at-t3: 16px;           /* Sora 600 — título de bloco (piso do T2)       */
    --at-corpo: 14px;        /* Archivo 400 — corpo padrão                    */
    --at-corpo-denso: 13px;  /* Archivo 400 — piso da prosa (ver §divergências)*/
    --at-dado: 12px;         /* mono — dado técnico, rótulo                    */
    --at-dado-min: 11px;     /* mono — piso absoluto desta fundação            */

    --at-peso-titulo: 600;
    --at-peso-enfase: 600;
    --at-peso-medio: 500;
    --at-peso-corpo: 400;

    --at-entrelinha-titulo: 1.2;
    --at-entrelinha-corpo: 1.5;
    --at-entrelinha-densa: 1.4;

    --at-tracking-titulo: -0.01em;
    --at-tracking-rotulo: 0.1em;    /* rótulo em CAIXA ALTA                    */
    --at-tracking-chip: 0.03em;
}


/* =============================================================================
 * 5. GEOMETRIA — espaço, raio, traço, sombra
 * =============================================================================
 * ⛔ O desenho não tem escala de espaçamento: usa 2, 3, 4, 5, 6, 7, 8, 9, 10,
 * 11, 12, 14 e 16 px sem regra. Aqui vira uma escala de 4 px com um meio-passo
 * de 2 px, e a decisão fica registrada — reproduzir o desenho ao pixel seria
 * herdar a ausência de sistema.
 * ========================================================================== */

.at {
    --at-e-1: 2px;
    --at-e-2: 4px;
    --at-e-3: 8px;
    --at-e-4: 12px;
    --at-e-5: 16px;
    --at-e-6: 24px;
    --at-e-7: 32px;
    --at-e-8: 48px;

    /* Raio 4 px é regra do manual (§09). O desenho usa 3 px em chips e
       pílulas; o manual ganha. O único outro raio é o círculo do ponto de SLA. */
    --at-raio: 4px;
    --at-raio-ponto: 50%;

    --at-borda: 1px;
    --at-marca-selecao: 2px;   /* a barra que marca item selecionado           */
    --at-foco-largura: 2px;

    /* ⛔ ZERO SOMBRA DE ELEVAÇÃO. O manual proíbe ("sem sombras profundas nem
       gradientes — superfícies separadas por cor e borda") e o desenho não usa
       nenhuma: `box-shadow` aparece 0 vezes nos três quadros. Sobreposição se
       separa por superfície + borda de 1 px. O token existe para que ninguém
       precise inventar um valor.
       ⚠️ `box-shadow` aparece duas vezes nesta folha, e nenhuma das duas é
       sombra: no foco ela desenha o anel externo, e em `.at-selecionado` ela
       desenha a barra de 2 px em mel. São traços sólidos, sem desfoque e sem
       deslocamento — a propriedade é a mesma, o efeito não. */
    --at-sombra: none;

    /* Colunas do desenho, para quem montar o esqueleto. Largura de coluna é
       decisão de layout, não de fundação — o que a fundação fixa é o mínimo
       abaixo do qual a coluna deixa de ser legível. */
    --at-col-rail: 56px;
    --at-col-lista: 344px;
    --at-col-lista-min: 280px;
    --at-col-ficha: 312px;
}


/* =============================================================================
 * 6. BASE — só dentro de `.at`
 * ========================================================================== */

.at {
    font-family: var(--at-fonte-corpo);
    font-size: var(--at-corpo);
    font-weight: var(--at-peso-corpo);
    line-height: var(--at-entrelinha-corpo);
    color: var(--at-texto);
    background: var(--at-fundo);
    -webkit-font-smoothing: antialiased;
}

.at *,
.at *::before,
.at *::after { box-sizing: border-box; }

.at button,
.at input,
.at select,
.at textarea { font: inherit; color: inherit; }

.at button { cursor: pointer; }

.at a { color: var(--at-terracota-texto); text-decoration: underline; text-underline-offset: 2px; }

/* -----------------------------------------------------------------------------
 * ⛔ O FOCO, E POR QUE ELE NÃO É SÓ MEL.
 *
 * O manual manda "foco sempre em mel (2 px)". Mel `#D9982F` sobre osso `#F6F3EC`
 * dá **2,23:1** — abaixo dos 3:1 que a WCAG 2.1 (1.4.11) exige de indicador que
 * não é texto. O manual não errou: ele nunca publicou número para o mel como
 * ANEL, e o próprio manual já diz "mel sobre osso — 2,2:1 ✕ nunca em texto".
 *
 * O conserto mantém o mel onde o manual o quer e acrescenta um segundo anel de
 * 1 px em grafite por fora, que é o que dá os 12,87:1 contra o osso. No tema
 * escuro o anel externo é osso. O mel continua sendo a cor do foco; ele só
 * ganhou contorno.
 *
 * ⚠️ E o desenho tinha um problema pior: os cinco campos de texto traziam
 * `outline:none` no atributo `style`, que vence a folha. Conferido no navegador:
 * NENHUM campo do desenho tinha indicação de foco. Aqui `outline:none` não
 * existe em lugar nenhum, e quem escrever um numa tela nova está desfazendo isto.
 * -------------------------------------------------------------------------- */
.at :focus-visible {
    outline: var(--at-foco-largura) solid var(--at-foco);
    outline-offset: 1px;
    box-shadow: 0 0 0 calc(var(--at-foco-largura) + 2px) var(--at-foco-contorno);
}

/* Alvo de toque: 24 px é o mínimo da WCAG 2.2 (2.5.8). O desenho tem alvos de
   17 px (o selo de não lidas) e chips de 24 px. */
.at .at-alvo { min-height: 24px; min-width: 24px; }

/* ⛔ Nada horizontalmente rolando no corpo. Conteúdo largo — tabela, thread,
   linha técnica — rola dentro do próprio quadro. */
.at .at-rola-x { overflow-x: auto; max-width: 100%; }


/* =============================================================================
 * 7. CLASSES TIPOGRÁFICAS
 * ========================================================================== */

.at-numero  { font-family: var(--at-fonte-titulo); font-weight: var(--at-peso-titulo); font-size: var(--at-numero); line-height: var(--at-entrelinha-titulo); letter-spacing: var(--at-tracking-titulo); }
.at-t1      { font-family: var(--at-fonte-titulo); font-weight: var(--at-peso-titulo); font-size: var(--at-t1); line-height: var(--at-entrelinha-titulo); letter-spacing: var(--at-tracking-titulo); }
.at-t2      { font-family: var(--at-fonte-titulo); font-weight: var(--at-peso-titulo); font-size: var(--at-t2); line-height: var(--at-entrelinha-titulo); letter-spacing: var(--at-tracking-titulo); }
.at-t3      { font-family: var(--at-fonte-titulo); font-weight: var(--at-peso-titulo); font-size: var(--at-t3); line-height: var(--at-entrelinha-titulo); }

.at-corpo   { font-size: var(--at-corpo); line-height: var(--at-entrelinha-corpo); color: var(--at-texto); }
.at-denso   { font-size: var(--at-corpo-denso); line-height: var(--at-entrelinha-densa); color: var(--at-texto); }
.at-enfase  { font-weight: var(--at-peso-enfase); }

/* Prosa secundária: prévia de conversa, texto de comentário na lista, meta. */
.at-texto-2 { font-size: var(--at-corpo-denso); line-height: var(--at-entrelinha-densa); color: var(--at-texto-2); }

/* Rótulo de seção, em caixa alta e mono. */
.at-rotulo  { font-family: var(--at-fonte-mono); font-size: var(--at-dado-min); font-weight: var(--at-peso-corpo); letter-spacing: var(--at-tracking-rotulo); text-transform: uppercase; color: var(--at-rotulo); }

/* Dado técnico: telefone, protocolo, id externo, hora, contador. */
.at-dado    { font-family: var(--at-fonte-mono); font-size: var(--at-dado); font-weight: var(--at-peso-corpo); color: var(--at-rotulo); }
.at-dado-forte { font-family: var(--at-fonte-mono); font-size: var(--at-dado); font-weight: var(--at-peso-medio); color: var(--at-texto); }

/* Corta em uma linha, ou em duas, sem quebrar a grade. */
.at-uma-linha  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-duas-linhas { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }


/* =============================================================================
 * 8. SUPERFÍCIES E ESTADOS
 * ========================================================================== */

.at-painel   { background: var(--at-superficie); border: var(--at-borda) solid var(--at-linha); border-radius: var(--at-raio); box-shadow: var(--at-sombra); }
.at-rebaixo  { background: var(--at-superficie-2); }
.at-filete   { border: 0; border-top: var(--at-borda) solid var(--at-linha); margin: var(--at-e-4) 0; }

.at-campo    { background: var(--at-superficie); border: var(--at-borda) solid var(--at-contorno-controle); border-radius: var(--at-raio); padding: var(--at-e-3) var(--at-e-4); color: var(--at-texto); }
.at-campo::placeholder { color: var(--at-rotulo); }

.at-botao    { background: var(--at-superficie); border: var(--at-borda) solid var(--at-contorno-controle); border-radius: var(--at-raio); padding: var(--at-e-3) var(--at-e-4); color: var(--at-texto); font-weight: var(--at-peso-medio); min-height: 32px; }
.at-botao-primario { background: var(--at-mel); border-color: var(--at-mel-traco); color: var(--at-sobre-mel); font-weight: var(--at-peso-enfase); }

/* Item selecionado: superfície + a barra de 2 px em mel, como o desenho. */
.at-selecionado { background: var(--at-selecao); box-shadow: inset var(--at-marca-selecao) 0 0 0 var(--at-mel-traco); }

.at-selo-urgente { background: var(--at-urgente); color: var(--at-sobre-urgente); border-radius: var(--at-raio); padding: var(--at-e-1) var(--at-e-3); font-family: var(--at-fonte-mono); font-size: var(--at-dado-min); }
.at-selo-ok      { background: var(--at-sucesso); color: var(--at-sobre-sucesso); border-radius: var(--at-raio); padding: var(--at-e-1) var(--at-e-3); font-family: var(--at-fonte-mono); font-size: var(--at-dado-min); }
.at-selo-atencao { background: var(--at-superficie); color: var(--at-mel-texto); border: var(--at-borda) solid var(--at-mel-traco); border-radius: var(--at-raio); padding: var(--at-e-1) var(--at-e-3); font-family: var(--at-fonte-mono); font-size: var(--at-dado-min); }
.at-selo-neutro  { background: var(--at-superficie-2); color: var(--at-rotulo); border: var(--at-borda) solid var(--at-linha); border-radius: var(--at-raio); padding: var(--at-e-1) var(--at-e-3); font-family: var(--at-fonte-mono); font-size: var(--at-dado-min); }

.at-ponto { width: 6px; height: 6px; border-radius: var(--at-raio-ponto); display: inline-block; }


/* =============================================================================
 * 9. A MARCA
 * =============================================================================
 * ⛔ O arquivo é o `-outlined`. `castelapi-horizontal.svg` traz o nome da
 * empresa como `<text font-family="Sora">` VIVO — e dentro de `<img>` o SVG é
 * um documento isolado, que não busca webfont nenhuma: o wordmark cairia na
 * sans-serif do sistema, com outro desenho e outra largura. A variante correta
 * tem tudo em `<path>`.
 *
 * ⛔ Altura mínima: o manual (§02) exige **120 px de largura** para a assinatura
 * horizontal. O viewBox é 430×120, então 120 px de largura são 33,5 px de
 * altura. O desenho usava 19 px de altura (≈68 px de largura), abaixo do mínimo
 * do manual. O manual ganha.
 * ========================================================================== */

.at-marca-caixa { display: inline-flex; align-items: center; }
.at-marca { height: 34px; width: auto; display: block; }
.at-marca-escura { display: none; }
.dark .at-marca-clara,
[data-at-tema='escuro'] .at-marca-clara { display: none; }
.dark .at-marca-escura,
[data-at-tema='escuro'] .at-marca-escura { display: block; }


/* =============================================================================
 * 10. VAZIO, CARREGANDO E ERRO
 * =============================================================================
 * ⛔ ISTO É ENTREGA, NÃO ENFEITE. O desenho não especifica estado vazio em
 * nenhuma das onze superfícies, e o banco de produção tem zero conversas, zero
 * mensagens, zero contatos e zero comentários. O vazio é literalmente a
 * primeira tela que o cliente vai ver.
 *
 * ⚠️ SEM ANIMAÇÃO CONTÍNUA — nem esqueleto pulsando, nem roda girando. Não é
 * gosto: o manual (§10) diz "animação só na transição de estado, nunca
 * contínua — nada pisca". O estado de carregando é um bloco parado que DIZ o
 * que está buscando.
 * ========================================================================== */

.at-estado {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--at-e-3);
    padding: var(--at-e-7) var(--at-e-5);
    text-align: center;
    min-height: 160px;
}
.at-estado-titulo { font-family: var(--at-fonte-titulo); font-weight: var(--at-peso-titulo); font-size: var(--at-t3); color: var(--at-texto); line-height: var(--at-entrelinha-titulo); }
.at-estado-corpo  { font-size: var(--at-corpo-denso); line-height: var(--at-entrelinha-corpo); color: var(--at-texto-2); max-width: 42ch; }
.at-estado-acao   { margin-top: var(--at-e-2); }

/* A faixa de erro fica NO CORPO da página, não numa torradinha que some em
   cinco segundos — a tela de conversas desta stack já aprendeu isso: recusa que
   some vira "sumiu sem explicação". */
.at-faixa-erro {
    display: flex; align-items: flex-start; gap: var(--at-e-3);
    padding: var(--at-e-4);
    border: var(--at-borda) solid var(--at-urgente);
    border-left-width: var(--at-marca-selecao);
    border-radius: var(--at-raio);
    background: var(--at-superficie);
    color: var(--at-texto);
    font-size: var(--at-corpo-denso);
}
.at-faixa-erro .at-estado-titulo { font-size: var(--at-corpo); }

/* ⛔ A LINHA SEM NOME. Sem isto, `Sem nome (17841449383557850)` é o que oito de
   oito linhas da lista vão dizer. O nome vira uma frase de gente, e o id vai
   para uma segunda linha em mono — cortado pelo FIM, porque todo IGSID começa
   igual e cortar pela frente deixaria todas as linhas idênticas. */
.at-nome { display: flex; flex-direction: column; gap: var(--at-e-1); min-width: 0; }
.at-sem-nome { color: var(--at-texto-2); font-style: normal; }
.at-identificador { font-family: var(--at-fonte-mono); font-size: var(--at-dado-min); color: var(--at-rotulo); }


/* =============================================================================
 * 11. RESPONSIVO — as regras que o desenho não tem
 * =============================================================================
 * O desenho é de quadros FIXOS de 1440 × 900. Em 390 px o documento tem
 * `scrollWidth` de 1496 px e sai cortado pela direita (medido). Não há um único
 * ponto de quebra para herdar.
 *
 * Estes são os pontos de quebra e o comportamento de COLUNA. ⛔ Eles não
 * decidem o layout das telas — isso depende de qual esqueleto o Robson escolher
 * — mas valem sob qualquer escolha, porque tratam de quantas colunas cabem, e
 * não de o que vai dentro delas.
 *
 *   ≥ 1280   três colunas: lista + centro + ficha. O centro absorve a sobra.
 *   1024–1279 a FICHA sai do fluxo e passa a abrir por botão. Duas colunas.
 *   768–1023  a lista encolhe até `--at-col-lista-min` (280 px). Duas colunas.
 *   < 768     UMA coluna por vez; o rail vira barra inferior.
 *
 * A ordem de sacrifício é essa de propósito: a ficha é o painel que o produto
 * menos consegue preencher hoje (contrato, telemetria e chamado não existem
 * para a maioria das empresas), e a lista é a que o atendente menos pode perder.
 * ========================================================================== */

.at-colunas {
    display: grid;
    grid-template-columns: var(--at-col-rail) var(--at-col-lista) minmax(0, 1fr) var(--at-col-ficha);
    min-height: 100%;
}
.at-coluna { min-width: 0; overflow-y: auto; }

@media (max-width: 1279px) {
    .at-colunas { grid-template-columns: var(--at-col-rail) var(--at-col-lista) minmax(0, 1fr); }
    .at-coluna-ficha { display: none; }
    .at-coluna-ficha[data-at-aberta='sim'] { display: block; }
}

@media (max-width: 1023px) {
    .at-colunas { grid-template-columns: var(--at-col-rail) minmax(var(--at-col-lista-min), 320px) minmax(0, 1fr); }
}

@media (max-width: 767px) {
    .at-colunas { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) var(--at-col-rail); }
    .at-coluna-rail { grid-row: 2; display: flex; flex-direction: row; justify-content: space-around; overflow-x: auto; }
    .at-coluna-lista,
    .at-coluna-centro { grid-row: 1; }
    .at-coluna[data-at-visivel='nao'] { display: none; }
    .at-estado { padding: var(--at-e-6) var(--at-e-4); }
}

/* Quem pediu menos movimento recebe menos movimento. Aqui há pouquíssimo a
   desligar justamente porque o manual já proíbe animação contínua — a regra
   fica para a tela que vier a acrescentar transição de estado. */
@media (prefers-reduced-motion: reduce) {
    .at *,
    .at *::before,
    .at *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
