/* ============================================================================
   tobe — design system Quadra (layout 1B)
   Cobalto como cor de ação, base clara, raios suaves.
   Handoff: design_handoff_layout_1b (turno 2 · 2A + turno 1 · 1B)
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  /* ========================================================================
     Base — fundo da tela e superfície
     ======================================================================== */
  --c-canvas:        #E9E7E2;  /* fundo da área de trabalho / fora do app */
  --c-bg:            #F7F6F3;  /* fundo das telas */
  --c-surface:       #FFFFFF;  /* cartões, campos, barras */
  --c-line:          #E4E2DD;  /* bordas e divisores */
  --c-divider:       #EDEBE6;  /* divisor entre itens de lista, gráfico */
  --c-seg-bg:        #EDEBE6;  /* fundo do segmented control */
  --c-thumb-bg:      #F2F0EB;  /* fundo das setas do calendário, badge zero */

  /* ========================================================================
     Texto
     ======================================================================== */
  --c-ink:           #14171C;  /* títulos */
  --c-ink-2:         #40444A;  /* texto em chip inativo */
  --c-body:          #494C4E;  /* corpo */
  --c-muted:         #6B6E70;  /* apoio */
  --c-faint:         #8A8D8F;  /* micro labels, status bar */
  --c-dot:           #B4B7B9;
  --c-tab-inactive:  #A8ABAD;  /* ícone da tab bar inativa */

  /* ========================================================================
     Ação (cobalto)
     ======================================================================== */
  --c-primary:       #2B4FE0;
  --c-primary-ink:   #FFFFFF;
  --c-primary-bg:    #E7EBFC;  /* fundo de chip selecionado, badge */
  --c-primary-line:  #C9D3F8;  /* borda dashed, chip de interesse selecionado */

  /* ========================================================================
     Pendência (coral) — SOMENTE pendência e erro
     ======================================================================== */
  --c-warn:          #F27049;  /* botão/badge de pendência */
  --c-warn-bg:       #FFF6F2;  /* fundo do bloco de pendência */
  --c-warn-line:     #F8CDBB;
  --c-warn-ink:      #8A3A1A;  /* texto sobre warn-bg */
  --c-warn-chip-bg:  #FFEDE6;
  --c-warn-chip-ink: #B23E17;

  /* ========================================================================
     Verificado (verde)
     ======================================================================== */
  --c-ok-bg:         #EAF3EC;
  --c-ok-ink:        #1F6F4A;

  /* ========================================================================
     Estado desabilitado
     ======================================================================== */
  --c-disabled-bg:    #DEDCD7;
  --c-disabled-line:  #C9C6C0;
  --c-disabled-ink:   #9B9EA0;

  /* ========================================================================
     Botão de alternância — a bolinha
     O knob é branco nos dois estados aqui porque o trilho é claro (desligado)
     ou cobalto (ligado). Na noturna os dois trilhos são escuros ou lima, e a
     bolinha tem de trocar junto — por isso ela é token, não `--c-surface`.
     ======================================================================== */
  --c-knob:     #FFFFFF;  /* bolinha do toggle desligado */
  --c-knob-on:  #FFFFFF;  /* bolinha do toggle ligado */

  /* ========================================================================
     Tipografia
     ======================================================================== */
  --f-display: 'Space Grotesk', system-ui, sans-serif;  /* 500 600 700 */
  --f-text:    'Manrope', system-ui, sans-serif;          /* 400 500 600 700 */

  /* ========================================================================
     Raios (border-radius)
     ======================================================================== */
  --r-device: 38px;
  --r-card:   22px;
  --r-card-lg: 26px;
  --r-block:  18px;
  --r-block-lg: 20px;
  --r-btn:    16px;
  --r-btn-sm: 14px;
  --r-field:  14px;
  --r-mini:   12px;
  --r-chip:   999px;

  /* ========================================================================
     Sombras
     ======================================================================== */
  --shadow-device: 0 30px 60px -20px rgba(20,23,28,0.25);
  --shadow-seg:    0 2px 6px -2px rgba(20,23,28,0.18);

  /* ========================================================================
     Espaçamento — escala do design
     ======================================================================== */
  --s-gap-2:   2px;
  --s-gap-4:   4px;
  --s-gap-6:   6px;
  --s-gap-7:   7px;
  --s-gap-8:   8px;
  --s-gap-10: 10px;
  --s-gap-12: 12px;
  --s-gap-14: 14px;
  --s-gap-16: 16px;
  --s-gap-18: 18px;
  --s-gap-20: 20px;
  --s-gap-22: 22px;
  --s-gap-24: 24px;
  --s-gap-28: 28px;
  --s-gap-32: 32px;
  --s-gap-40: 40px;

  /* ========================================================================
     Tokens legados (alias) — compatibilidade com código existente.
     Remapeados para o novo sistema Quadra.
     ======================================================================== */
  --at-bg:            var(--c-bg);
  --at-surface:       var(--c-surface);
  --at-text:          var(--c-ink);
  --at-text-muted:    var(--c-muted);
  --at-accent:        var(--c-primary);
  --at-on-dark:       var(--c-primary-ink);
  --at-line:          var(--c-line);
  --at-divider:       var(--c-line);
  --at-divider-width: 1px;

  /* A régua dura de 2px — o traço que fecha cartão, calendário, tab bar e
     cabeçalho. Era `var(--at-text)` escrito à mão em ~33 lugares, o que
     amarrava a espessura do traço à cor do TEXTO. Na base clara os dois
     coincidem; na noturna não: 2px de #F2F3F1 atravessando cada bloco vira
     grade luminosa, e a 1A separa superfície por valor, não por traço aceso.
     Token separado deixa cada paleta escolher. */
  --at-rule-strong:   var(--c-ink);

  /* Rampa neutra (reduzida — o novo sistema usa menos degraus) */
  --at-neutral-100: #f5f4f0;
  --at-neutral-200: #EDEBE6;
  --at-neutral-300: #DEDCD7;
  --at-neutral-400: #C9C6C0;
  --at-neutral-500: #B4B7B9;
  --at-neutral-600: #A8ABAD;
  --at-neutral-700: #8A8D8F;
  --at-neutral-800: #6B6E70;
  --at-neutral-900: #494C4E;

  /* Rampa accent → cobalto (antes era vermelho) */
  --at-accent-100: #E7EBFC;
  --at-accent-200: #C9D3F8;
  --at-accent-300: #8AA3F0;
  --at-accent-400: #5B78E8;
  --at-accent-500: #2B4FE0;
  --at-accent-600: #1F3DC0;
  --at-accent-700: #152B9E;
  --at-accent-800: #0F207A;
  --at-accent-900: #0A1555;

  /* Semântico */
  --at-tag-bg:       var(--c-primary-bg);
  --at-tag-text:     var(--c-primary);
  --at-hover:        var(--c-primary-bg);
  --at-pressed:      var(--c-primary-line);
  --at-placeholder-media: var(--c-line);

  /* Mapa */
  --at-map-surface:  #EDEBE6;
  --at-map-road:     #DEDCD7;
  --at-map-grid:     rgba(20,23,28,0.07);

  /* Tipografia legada */
  --at-font: var(--f-text);

  /* Espaçamento legado */
  --at-space-1:  4px;
  --at-space-2:  8px;
  --at-space-3:  12px;
  --at-space-4:  16px;
  --at-space-5:  20px;
  --at-space-6:  24px;
  --at-space-8:  32px;
  --at-space-10: 40px;
  --at-space-14: 56px;
  --at-space-16: 64px;

  /* Forma legada */
  --at-radius:          0px;  /* ÓRFÃO DA MIGRAÇÃO PARA O QUADRA — não é lido em
                                  lugar nenhum. Dizia aqui que "os componentes do
                                  app já definem border-radius inline"; nenhum
                                  define: zero ocorrências de `borderRadius` em
                                  .tsx. Quem manda no raio é a escala --r-* acima,
                                  aplicada pelas classes .at-*. Não trate este
                                  token como a regra do sistema. */
  --at-border:          1px solid var(--c-line);
  --at-border-thin:     1px solid var(--c-line);
  --at-border-primary:  1.5px solid var(--c-primary);
  --at-shadow-modal:    0 12px 32px rgba(20,23,28,0.18);

  /* Movimento */
  --at-dur-fast: 120ms;
  --at-dur-base: 160ms;
  --at-dur-nav:  240ms;
  --at-ease:     ease-out;

  /* Utilitários */
  --at-touch-min: 44px;
  --at-screen-x:  20px;
  --at-pad-x:     22px;  /* margem lateral de `.at-screen-pad` */
}

/* ============================================================================
   Paleta noturna · 1A "PISTA" — grafite noturno + lima elétrica
   Handoff: design_handoff_paleta_1a (README.md + paleta-1a.css)

   O escopo é COR. A tipografia, os raios e o espaçamento continuam sendo os da
   Quadra (1B): o toggle do perfil troca de paleta, não de direção de desenho —
   e o próprio handoff avisa para não misturar as duas direções.

   Regra da lima, do handoff: é a única cor saturada do app e significa "ação,
   progresso ou seu foco agora". Nunca em área grande de fundo, nunca em texto
   corrido, nunca em botão destrutivo. Texto sobre lima é SEMPRE #121315 — por
   isso `--c-primary-ink` vira grafite aqui, e não branco.

   Valores marcados (*) saíram do mock; os (+) são derivados — o mock 1A não
   define fundo de chip lima, borda de pendência nem estado desabilitado.
   ============================================================================ */
[data-theme='dark'] {
  /* Diz ao navegador que o campo é escuro: barra de rolagem, autofill,
     seletor de data e o teclado do WebView acompanham sem CSS extra. */
  color-scheme: dark;

  /* ---- Base ---- */
  --c-canvas:        #0B0C0D;  /* + fora da moldura, no desktop: abaixo do fundo */
  --c-bg:            #121315;  /* * fundo da tela e da tab bar */
  --c-surface:       #1B1D1F;  /* * cartão, campo, barra */
  --c-line:          #2A2D30;  /* * borda de cartão, chip inativo, barra vazia */
  --c-divider:       #1F2224;  /* * divisor de 1px */
  --c-seg-bg:        #0E0F10;  /* + trilho do segmented: rebaixado, para a
                                     opção escolhida (que é `--c-surface`)
                                     subir. Na clara é o contrário — lá o
                                     trilho é mais escuro que o branco. */
  --c-thumb-bg:      #2A2D30;  /* + setas do calendário, badge zero */

  /* ---- Texto ----
     A escada de contraste sobre #121315, verificada no handoff:
     #F2F3F1 ~15:1 · #C9CCCD ~10:1 · #8C9092 ~5:1 · #6E7275 ~3.2:1.
     O #6E7275 fica reservado ao que o handoff autoriza — ícone e rótulo de aba
     inativa —, e é exatamente onde `--c-faint` é usado no app hoje (rótulo de
     campo, micro label, placeholder) que ele NÃO pode ir sozinho: por isso
     `--c-faint` aqui é o degrau de 5:1, não o de 3.2:1. */
  --c-ink:           #F2F3F1;  /* * títulos e números */
  --c-ink-2:         #C9CCCD;  /* * texto de chip inativo */
  --c-body:          #C9CCCD;  /* + corpo */
  --c-muted:         #A0A4A6;  /* + apoio: um degrau acima do #8C9092 do mock,
                                     porque `.at-meta` corre em 13px */
  --c-faint:         #8C9092;  /* * micro label, rótulo de campo, placeholder */
  --c-dot:           #6E7275;
  --c-tab-inactive:  #6E7275;  /* * aba inativa — o único lugar do 3.2:1 */

  /* ---- Ação (lima) ---- */
  --c-primary:       #C6F24E;  /* * ação, progresso, aba ativa, foco */
  --c-primary-ink:   #121315;  /* * sobre lima, sempre grafite */
  --c-primary-bg:    #262D18;  /* + fundo de tag e hover: lima rebaixada até
                                     virar superfície, para o texto lima ainda
                                     abrir ~9:1 em cima */
  --c-primary-line:  #3D4A22;  /* + borda tracejada, chip selecionado de leve */

  /* ---- Pendência (coral) ---- */
  --c-warn:          #F27049;  /* * botão/badge de pendência */
  --c-warn-bg:       #2A1A14;  /* * fundo do bloco de pendência */
  --c-warn-line:     #4A2A1E;  /* + */
  --c-warn-ink:      #FFC3AC;  /* * texto sobre warn-bg */
  --c-warn-chip-bg:  #3A2119;  /* + */
  --c-warn-chip-ink: #FFC3AC;  /* + */

  /* ---- Verificado (verde) ----
     O handoff proíbe verde e lima no MESMO bloco: a distância de matiz é curta
     e os dois competem. Aqui eles nunca se encontram — o verde só aparece em
     chip de confirmação, onde não há ação em lima. */
  --c-ok-bg:         #16281E;  /* * */
  --c-ok-ink:        #7BE0A0;  /* * */

  /* ---- Desabilitado ---- */
  --c-disabled-bg:    #2A2D30;  /* + */
  --c-disabled-line:  #3A3E42;  /* + */
  --c-disabled-ink:   #6E7275;  /* + */

  /* ---- Toggle ---- */
  --c-knob:     #C9CCCD;  /* + sobre trilho #2A2D30 */
  --c-knob-on:  #121315;  /* + sobre trilho lima: grafite, como todo texto */

  /* ---- Sombras ----
     Sombra preta sobre grafite não separa nada. O segmented troca a sombra por
     um anel de 1px, que é o que de fato desenha a pastilha no escuro. */
  --shadow-device: 0 30px 60px -20px rgba(0,0,0,0.45);  /* * do handoff */
  --shadow-seg:    0 0 0 1px #33373A, 0 2px 8px -4px rgba(0,0,0,0.7);

  /* ---- Régua dura ----
     Ver a nota em `:root`. Na noturna o traço de 2px é grafite claro, não
     branco: a 1A separa superfície por diferença de valor. */
  --at-rule-strong: #33373A;

  /* ========================================================================
     Rampas legadas
     ======================================================================== */

  /* Neutra. Não é a rampa clara invertida degrau a degrau porque os degraus
     usados no app têm PAPEL, não posição: 300 é filete, 400 é texto apagado,
     500 é desabilitado, 700 é aba inativa. Cada um recebeu o valor da 1A que
     corresponde ao seu papel. */
  --at-neutral-100: #1B1D1F;
  --at-neutral-200: #23262A;
  --at-neutral-300: #2A2D30;  /* filete dentro do cartão, barra vazia */
  --at-neutral-400: #6E7275;  /* texto apagado — inclusive sobre o bloco de
                                 saldo, que na noturna vira claro */
  --at-neutral-500: #7A7E81;  /* desabilitado, traço do selo não verificado */
  --at-neutral-600: #8C9092;
  --at-neutral-700: #7C8083;  /* aba inativa, e também status "em análise" e
                                 eyebrow de cartão. O handoff pede #6E7275 na
                                 aba, mas o mesmo degrau carrega texto de
                                 status nos outros quatro usos e lá 3.2:1 é
                                 pouco. Meio degrau acima serve aos dois: a
                                 aba continua recuada contra a lima da ativa. */
  --at-neutral-800: #C9CCCD;
  --at-neutral-900: #E2E4E3;

  /* Accent. Só -200 e -700 são usados, e nos dois casos o papel é ALERTA, não
     ação: sobrou de quando o accent do sistema era vermelho (bloco de CREF
     recusado, envio de mensagem que falhou, código errado, excluir conta).
     Na noturna eles assumem o par coral — a lima é proibida em destrutivo. */
  --at-accent-100: #1E2612;
  --at-accent-200: #2A1A14;  /* fundo de bloco recusado */
  --at-accent-300: #3D4A22;
  --at-accent-400: #8FB63A;
  --at-accent-500: #C6F24E;
  --at-accent-600: #D4F76E;
  --at-accent-700: #F27049;  /* texto e borda de erro / destrutivo */
  --at-accent-800: #E2E4E3;
  --at-accent-900: #F2F3F1;

  /* Mapa — asfalto noturno, sem POI colorido (como na clara) */
  --at-map-surface: #1B1D1F;
  --at-map-road:    #2A2D30;
  --at-map-grid:    rgba(242,243,241,0.06);

  --at-shadow-modal: 0 12px 32px rgba(0,0,0,0.6);
}

/* O avatar de iniciais é `--c-primary-bg` na clara — um azul pálido que some
   discretamente atrás do nome. Na noturna esse mesmo token é lima rebaixada, e
   um círculo verde-oliva atrás de cada nome do feed não some: fica sujo e ainda
   gasta a lima em identidade, que o handoff reserva para ação. Neutro. */
[data-theme='dark'] .at-avatar {
  background: var(--c-line);
  color: var(--c-ink-2);
}

/* O botão "escuro" é o inverso do fundo, então na noturna ele é CLARO e o
   hover precisa escurecer. O `brightness(1.4)` da clara não move um #F2F3F1. */
[data-theme='dark'] .at-btn-dark:hover {
  filter: brightness(0.88);
}

/* Fotografia em preto e branco: no escuro o mesmo contraste extra estoura os
   brancos da imagem. Meio ponto a menos devolve o meio-tom. */
[data-theme='dark'] .at-grayscale,
[data-theme='dark'] .at-grayscale img {
  filter: grayscale(1) contrast(1.02) brightness(0.92);
}

/* ========================================================================
   Paleta B · Campo — verde de gramado (mantida para compatibilidade)
   ======================================================================== */
[data-palette='campo'] {
  --at-accent: #1f6f4a;
  --at-surface: #dfe4e0;
  --at-accent-100: #eef5f1;
  --at-accent-200: #d3e6db;
  --at-accent-600: #1a5c3d;
  --at-accent-700: #145035;
}

/* ========================================================================
   Reset e base
   ======================================================================== */

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

html {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  min-height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* No desktop, a área fora do .at-app usa o tom canvas */
@media (min-width: 520px) {
  body:has(.at-app) {
    background: var(--c-canvas);
  }
}

h1, h2, h3, h4, p, figure {
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: left;
}

a {
  color: inherit;
  text-decoration: none;
}

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

::selection {
  background: var(--c-primary-bg);
  color: var(--c-primary);
}

/* ========================================================================
   Tipografia — escala do app (nomes .at-* mantidos para compatibilidade)
   ======================================================================== */

.at-display {
  font-family: var(--f-display);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.at-screen-title {
  font-family: var(--f-display);
  /* 33px é o tamanho do handoff, e ele vale na moldura de 430px para a qual foi
     desenhado. A 320px o mesmo 33px custa uma TERCEIRA linha de título — e o
     título mora no cabeçalho fixo, então essa linha é cobrada em toda rolagem.
     O clamp mantém os 33px de 412px para cima e desce até 26px no aparelho
     estreito, onde a linha a menos vale mais do que o tamanho da letra. */
  font-size: clamp(26px, 8vw, 33px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.at-section-title {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.at-item {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}
.at-body {
  font-family: var(--f-text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
}
.at-body-sm {
  font-family: var(--f-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}
.at-meta {
  font-family: var(--f-text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--c-muted);
}
.at-eyebrow {
  font-family: var(--f-text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
  line-height: 1.3;
}
.at-micro {
  font-family: var(--f-text);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--c-faint);
}
.at-muted {
  color: var(--c-muted);
}
.at-accent {
  color: var(--c-primary);
}
.at-accent-text {
  color: var(--c-warn-ink);
}

/* ========================================================================
   Reguas e blocos
   ======================================================================== */

.at-rule {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: 0;
}
.at-rule-soft {
  border: 0;
  border-top: 1px solid var(--c-divider);
  margin: 0;
}

/* Pilha de cards */
.at-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.at-stack > * {
  background: var(--c-surface);
  border-radius: var(--r-card);
  border: 1px solid var(--c-line);
}
.at-stack-soft {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.at-surface {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-block);
  padding: 16px;
}

.at-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 16px;
  transition: background var(--at-dur-fast) var(--at-ease);
}
a.at-card:hover,
button.at-card:hover {
  background: var(--c-primary-bg);
}

/* ========================================================================
   Cartão que desliza — gaveta da agenda (mantido do sistema anterior)
   ======================================================================== */

.at-swipe-window {
  position: relative;
  overflow: hidden;
}

.at-swipe-face {
  touch-action: pan-y;
  background: var(--c-bg);
}

.at-swipe-face :focus-visible {
  outline-offset: -2px;
}

@keyframes at-swipe-hint {
  0%   { transform: translate3d(0, 0, 0); }
  18%  { transform: translate3d(-14px, 0, 0); }
  38%  { transform: translate3d(0, 0, 0); }
  54%  { transform: translate3d(-8px, 0, 0); }
  72%, 100% { transform: translate3d(0, 0, 0); }
}

.at-swipe-hint {
  animation: at-swipe-hint 1000ms var(--at-ease) 500ms 1 both;
}

/* ========================================================================
   Botões
   ======================================================================== */

.at-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: var(--at-touch-min);
  padding: 13px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-btn);
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background var(--at-dur-fast) var(--at-ease),
              border-color var(--at-dur-fast) var(--at-ease);
}
.at-btn:hover {
  background: var(--c-primary-bg);
  border-color: var(--c-primary-line);
}
.at-btn:active {
  filter: brightness(0.94);
}
.at-btn[disabled],
.at-btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}

.at-btn-primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-primary-ink);
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
}
.at-btn-primary:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  filter: brightness(0.94);
}
.at-btn-primary:active {
  filter: brightness(0.88);
}

.at-btn-dark {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-surface);
}
.at-btn-dark:hover {
  background: var(--c-ink);
  filter: brightness(1.4);
}

.at-btn-sm {
  min-height: 38px;
  padding: 9px 12px;
  font-size: 12px;
}

/* No site os botões são inline; no app ocupam a largura toda. */
.at-btn-auto {
  width: auto;
  display: inline-flex;
}

/* ========================================================================
   Barra de ação fixa no rodapé
   ======================================================================== */
.at-actionbar {
  display: flex;
  gap: 10px;
  /* Embaixo eram 22px, e eles não eram respiro: eram a reserva do indicador de
     home, de quando esta barra SUBSTITUÍA a tab bar e portanto era o último
     bloco da tela. Desde que as duas passaram a ser empilhadas, quem encosta no
     rodapé é a tab bar, e é ela quem paga a reserva do aparelho — ver o
     `max(13px, env(safe-area-inset-bottom))` em TabBar.tsx. Aqui a conta ficou
     como 22px de nada no MEIO da pilha. */
  padding: 14px 22px;
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
}
.at-actionbar > .at-btn {
  border: 0;
  flex: 1;
}

/* ========================================================================
   Chat — compositor e balões
   ======================================================================== */

.at-composer {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 10px 16px;
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
}

.at-composer > textarea {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 1px solid var(--c-line);
  border-radius: var(--r-field);
  padding: 12px 14px;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.4;
  resize: none;
  max-height: 112px;
  overflow-y: auto;
}
.at-composer > textarea:focus {
  border: 1.5px solid var(--c-primary);
  outline: none;
}

.at-composer > .at-btn {
  border: 0;
  flex: 0 0 auto;
  width: auto;
}

/* Balões de chat */
.at-bubble {
  max-width: 78%;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  border-radius: var(--r-block);
}

.at-bubble-mine {
  margin-left: auto;
  background: var(--c-primary);
  color: var(--c-primary-ink);
  border-bottom-right-radius: var(--r-mini);
}

.at-bubble-theirs {
  margin-right: auto;
  background: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  border-bottom-left-radius: var(--r-mini);
}

/* ========================================================================
   Tags, chips, badges
   ======================================================================== */

.at-tag {
  display: inline-block;
  padding: 4px 8px;
  background: var(--c-primary-bg);
  color: var(--c-primary);
  font-family: var(--f-text);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  border-radius: var(--r-chip);
}
.at-tag-outline {
  background: transparent;
  color: var(--c-ink-2);
  border: 1px solid var(--c-line);
}
.at-tag-dark {
  background: var(--c-ink);
  color: var(--c-surface);
}
.at-tag-accent {
  background: var(--c-primary);
  color: var(--c-primary-ink);
}

.at-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-chip);
  background: transparent;
  color: var(--c-ink-2);
  font-family: var(--f-text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--at-dur-fast) var(--at-ease);
}
.at-chip:hover {
  background: var(--c-primary-bg);
}
.at-chip[aria-pressed='true'],
.at-chip.is-on {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-primary-ink);
}

.at-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/*
  O mesmo punhado de chips, mas em UMA linha que rola de lado.

  Quebrar é o certo no corpo rolável, onde a altura extra empurra o resto para
  baixo e pronto. No cabeçalho fixo não: lá a altura é cobrada em toda rolagem,
  e é cobrada exatamente do conteúdo que os chips filtram. Nove modalidades a
  320px viravam quatro linhas — 104px de filtro sobre 26px de resultado.

  O `flex: 0 0 auto` nos filhos é o que faz a fila transbordar em vez de
  espremer os chips. A margem negativa cancela o `--at-pad-x` do `.at-screen-pad`
  e o padding o devolve por dentro: assim o primeiro chip nasce alinhado com o
  título, e o último morre na borda da tela em vez de sumir no meio do padding —
  que é o que faz a fila LER como rolável.
*/
.at-chip-rail {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin-left: calc(-1 * var(--at-pad-x));
  margin-right: calc(-1 * var(--at-pad-x));
  padding-left: var(--at-pad-x);
  padding-right: var(--at-pad-x);
}
.at-chip-rail::-webkit-scrollbar {
  display: none;
}
.at-chip-rail > * {
  flex: 0 0 auto;
}

/* ========================================================================
   Badge de notificação / contagem
   ======================================================================== */
.at-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: var(--r-chip);
  background: var(--c-warn);
  color: var(--c-primary-ink);
  font-family: var(--f-text);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.at-badge-ghost {
  background: var(--c-primary-bg);
  color: var(--c-primary);
}

/* ========================================================================
   Campos de formulário
   ======================================================================== */

.at-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.at-field > .at-label {
  display: block;
  font-family: var(--f-text);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-faint);
}

.at-input,
.at-textarea,
.at-select {
  display: block;
  width: 100%;
  min-height: var(--at-touch-min);
  padding: 13px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-field);
  background: var(--c-surface);
  font-family: var(--f-text);
  font-size: 16px;
  font-weight: 600;
  color: var(--c-ink);
  transition: border-color var(--at-dur-fast) var(--at-ease);
}
.at-input:focus,
.at-textarea:focus,
.at-select:focus {
  border: 1.5px solid var(--c-primary);
  outline: none;
}
.at-input::placeholder,
.at-textarea::placeholder {
  color: var(--c-faint);
  font-weight: 400;
}

.at-textarea {
  min-height: 96px;
  resize: vertical;
}

/* Campo em estado de erro */
.at-input[aria-invalid='true'],
.at-textarea[aria-invalid='true'] {
  border-color: var(--c-warn);
}
.at-field-error {
  font-family: var(--f-text);
  font-size: 12px;
  color: var(--c-warn-chip-ink);
}

/* SegmentedControl */
.at-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  background: var(--c-seg-bg);
  border-radius: var(--r-chip);
  padding: 4px;
}
.at-seg-opt {
  min-height: 40px;
  padding: 12px 0;
  border: 0;
  border-radius: var(--r-chip);
  background: transparent;
  color: var(--c-faint);
  font-family: var(--f-text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: background var(--at-dur-fast) var(--at-ease),
              box-shadow var(--at-dur-fast) var(--at-ease);
}
.at-seg-opt:hover {
  color: var(--c-ink);
}
.at-seg-opt[aria-pressed='true'] {
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: var(--shadow-seg);
}

/* Toggle */
.at-toggle {
  position: relative;
  width: 46px;
  height: 28px;
  flex: 0 0 46px;
  border: 0;
  border-radius: var(--r-chip);
  padding: 3px;
  background: var(--c-disabled-bg);
  cursor: pointer;
  transition: background var(--at-dur-fast) var(--at-ease);
}
.at-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-knob);
  transition: transform var(--at-dur-fast) var(--at-ease),
              background var(--at-dur-fast) var(--at-ease);
}
.at-toggle[aria-checked='true'] {
  background: var(--c-primary);
}
.at-toggle[aria-checked='true']::after {
  transform: translateX(18px);
  background: var(--c-knob-on);
}
.at-toggle.on-dark[aria-checked='false'] {
  background: var(--c-line);
}
/* Toggle desabilitado */
.at-toggle[aria-disabled='true'] {
  background: var(--c-disabled-bg);
  border: 1px dashed var(--c-disabled-line);
  cursor: not-allowed;
}
.at-toggle[aria-disabled='true']::after {
  background: var(--c-bg);
}

/* ========================================================================
   StatRow — grid de 3 colunas
   ======================================================================== */

.at-statrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.at-statrow > div {
  background: transparent;
  padding: 0;
}
.at-stat-value {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.at-stat-label {
  font-family: var(--f-text);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-faint);
  margin-top: 5px;
}

/* ========================================================================
   Media — fotografia em preto e branco (mantido do sistema anterior)
   ======================================================================== */

.at-grayscale,
.at-grayscale img {
  filter: grayscale(1) contrast(1.08);
}
.at-photo-placeholder {
  background: var(--c-line);
}
.at-avatar {
  flex: 0 0 auto;
  background: var(--c-primary-bg);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-muted);
  overflow: hidden;
  border-radius: 50%;
}
.at-avatar-dark {
  background: var(--c-ink);
  color: var(--c-surface);
}

/* ========================================================================
   Estados
   ======================================================================== */

.at-error {
  background: var(--c-warn-bg);
  color: var(--c-warn-ink);
  border: 1px solid var(--c-warn-line);
  border-radius: var(--r-block);
  padding: 12px 14px;
  font-size: 13px;
}
.at-empty {
  padding: 32px 0;
  text-align: center;
}
.at-empty h3 {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 700;
}
.at-empty p {
  font-size: 14px;
  color: var(--c-muted);
  margin: 8px 0 16px;
}
.at-skeleton {
  background: var(--c-line);
  border-radius: var(--r-block);
}

/* ========================================================================
   Utilitários de layout
   ======================================================================== */

.at-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.at-row-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.at-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.at-grow {
  flex: 1;
  min-width: 0;
}
.at-col {
  display: grid;
}
/* A margem lateral de toda tela. É variável porque `.at-chip-rail` precisa
   cancelá-la exatamente para sangrar até a borda — os dois valores têm de
   andar juntos, e um número repetido nos dois lugares não anda. */
.at-screen-pad {
  padding-left: var(--at-pad-x);
  padding-right: var(--at-pad-x);
}
.at-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================================================
   Moldura do app — mobile-first
   ======================================================================== */

.at-app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  background: var(--c-bg);
}

@media (min-width: 520px) {
  body:has(.at-app) {
    background: var(--c-canvas);
  }
  .at-app {
    border-left: 1px solid var(--c-line);
    border-right: 1px solid var(--c-line);
  }
}

/* Fora da tela, presente para o leitor de tela */
.at-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Telas com tab bar ou barra de ação: altura travada na viewport */
.at-screen-shell {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
}

.at-screen-body {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/*
  O cabeçalho de toda tela — o `<header>` do Screen.tsx.

  A reserva do topo é do APARELHO, e por isso ela é `env()`, não um número. O
  76px que estava aqui era a soma "entalhe do iPhone + respiro" congelada: certa
  no aparelho para o qual foi medida, e 76px de NADA em toda tela sem entalhe —
  o navegador, o Android comum, o iPhone SE. Numa tela de 568px de altura isso é
  13% do aparelho gasto antes da primeira palavra, e como o cabeçalho é fixo, é
  gasto para sempre. A conta abaixo devolve o desenho onde ele fazia sentido
  (iPhone 14: 59 + 14 = 73px) e o dispensa onde ele era só perda (navegador: 16px).

  O padding mora AQUI e não em `style` inline porque inline nenhuma media query
  alcança — e é media query que dá o alívio de tela baixa, no fim deste arquivo.
*/
.at-screen-header {
  padding-top: max(16px, calc(env(safe-area-inset-top, 0px) + 14px));
  padding-bottom: 16px;
  background: var(--at-bg);
  border-bottom: 2px solid var(--at-rule-strong);
}

/* Sem título e sem eyebrow o cabeçalho é só a faixa do voltar, e aperta. */
.at-screen-header[data-bare='true'] {
  padding-bottom: 10px;
}

/*
  Aparelho baixo — iPhone SE de pé, qualquer tela em paisagem.

  Aqui não sobra margem para elegância: com header, barra de ação e tab bar
  cobrando altura fixa, cada folga do desenho sai direto do corpo rolável. O
  respiro acima do entalhe é o primeiro a ir, porque ele é o único que não
  carrega informação nenhuma.
*/
@media (max-height: 600px) {
  .at-screen-header {
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    padding-bottom: 10px;
  }
  .at-actionbar {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/*
  Aparelho estreito — a barra de ação com dois botões.

  A 320px, os 22px de cada lado mais os 16px de padding dentro de cada botão
  deixam 79px de texto para o botão secundário, e "Ver no mapa" pede 85. O
  rótulo quebra em duas linhas, e as duas linhas custam 25px de altura na barra
  INTEIRA — os dois botões crescem juntos, mesmo o que não quebrou. Apertar o
  padding horizontal devolve os 12px que faltavam sem tocar no alvo de toque,
  que é vertical e continua vindo do `min-height`.
*/
@media (max-width: 360px) {
  .at-actionbar > .at-btn {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ========================================================================
   Site institucional — container 1200px, 12 colunas
   ======================================================================== */

.at-site {
  --at-site-margin: 64px;
  font-family: var(--f-text);
}
.at-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--at-site-margin);
  padding-right: var(--at-site-margin);
}
.at-site h1 {
  font-family: var(--f-display);
  font-size: 64px;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.at-site h2 {
  font-family: var(--f-display);
  font-size: 32px;
}
.at-site h3 {
  font-family: var(--f-display);
  font-size: 25px;
}
.at-site h4 {
  font-family: var(--f-display);
  font-size: 20px;
}
.at-site p {
  font-size: 17px;
  line-height: 1.6;
}
.at-site section + section {
  border-top: 1px solid var(--c-line);
}
.at-site-block {
  padding: 64px 0;
}

/* Grid de células */
.at-cells {
  display: grid;
  gap: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.at-cells > * {
  background: var(--c-surface);
  padding: 24px;
}
.at-cells-4 {
  grid-template-columns: repeat(4, 1fr);
}
.at-cells-3 {
  grid-template-columns: repeat(3, 1fr);
}
.at-cells-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Linhas de conteúdo do site: 7/5 e 5/7 */
.at-split-7-5,
.at-split-5-7 {
  display: grid;
  gap: 40px;
  align-items: center;
}
.at-split-7-5 {
  grid-template-columns: 7fr 5fr;
}
.at-split-5-7 {
  grid-template-columns: 5fr 7fr;
}
.at-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

@media (max-width: 1200px) {
  .at-site { --at-site-margin: 40px; }
  .at-site h1 { font-size: 52px; }
}
@media (max-width: 900px) {
  .at-site h1 { font-size: 44px; }
  .at-cells-4,
  .at-cells-3 { grid-template-columns: repeat(2, 1fr); }
  .at-split-7-5,
  .at-split-5-7 { grid-template-columns: 1fr; }
  .at-footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .at-site { --at-site-margin: 20px; }
  .at-site h1 { font-size: 34px; }
  .at-site h2 { font-size: 26px; }
  .at-site p { font-size: 15px; }
  .at-cells-4,
  .at-cells-3,
  .at-cells-2 { grid-template-columns: 1fr; }
  .at-footer-cols { grid-template-columns: 1fr; }
  .at-site-block { padding: 40px 0; }
}

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