/* ===========================================================================
   Design System Guarida — camada de tokens
   Gerado a partir de "Design System Guarida", versão de 24/09/2026.

   Este arquivo é a tradução do documento para CSS. Ele carrega a fonte,
   define os tokens e estabelece a base (corpo, título, link, foco). Nada
   aqui é invenção nossa: cada valor sai do documento, e onde o documento
   explica o porquê a explicação veio junto.

   Carregue-o ANTES de styles.css em toda página. As folhas específicas
   consomem estes tokens; não redefina cor, raio ou tamanho fora daqui.

   Três regras que o documento põe antes de tudo:
     1. Rosa é destaque, não decoração. Título é preto, nunca rosa.
     2. O rosa da logo (#E60060) é só da logo.
     3. Status nunca é rosa.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Fonte

   Open Sans é a única família, servida pelo próprio portal em vez do Google.
   O projeto já versiona o React em js/vendor/ pela mesma razão: o portal vai
   rodar atrás de restrição de rede, e uma fonte que não carrega derruba toda
   a camada tipográfica em silêncio.

   Arquivo variável (300–700): um download cobre os três pesos.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/open-sans-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: "Open Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/open-sans-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;
}

/* Material Symbols Outlined, peso 400 — a única família de ícone permitida.
   Subconjunto apenas com os símbolos que a aplicação usa de fato (4 KB em vez
   dos vários MB do catálogo inteiro). Para usar um símbolo novo é preciso
   regerar o arquivo; a lista está em docs/DESIGN-SYSTEM.md. */
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/material-symbols.woff2") format("woff2");
}

:root {
  /* =========================================================================
     PRIMITIVAS — os valores da paleta.
     Não use estas diretamente em componente; use as semânticas abaixo.
     ========================================================================= */

  /* Marca */
  --brand-pink-500: #bd1952; /* rosa de ação */
  --brand-pink-600: #e60060; /* rosa da logo — exclusivo da logo */
  --brand-pink-700: #941340; /* rosa escuro — hover de toda ação rosa */
  --brand-black: #010101;
  --brand-paper: #faf9f6;

  /* Escala de cinza */
  --gray-black: #010101;
  --gray-10: #212529;
  --gray-9: #343a40;
  --gray-8: #495057;
  --gray-7: #868e96;
  --gray-6: #adb5bd;
  --gray-5: #ced4da;
  --gray-4: #dee2e6;
  --gray-3: #e9ecef;
  --gray-2: #f2f4f7;
  --gray-1: #f9fafb;
  --gray-white: #fefefe;

  /* Apoio */
  --support-green-600: #187031;
  --support-amber-600: #cda30e;
  --support-orange-600: #c16800;
  --support-red-600: #c0362e;
  --support-blue-600: #0b5a8f;
  --support-olive-600: #737500;
  --support-coral-600: #fc5130;
  --support-ink-900: #0b0c0e;
  --support-neutral-800: #181b1f;
  --support-neutral-700: #272727;
  --support-neutral-600: #3b3b48;

  /* Opacas (fundos pastéis) */
  --opaque-mint: #e1f6eb;
  --opaque-straw: #fdf6de;
  --opaque-salmon: #fbf2e7;
  --opaque-rose: #fdf0ef;
  --opaque-blue-baby: #e2eef6;
  --opaque-blue-sky: #bddbf2;
  --opaque-lavender: #fdedf5;
  --opaque-lime: #f5f8dc;
  --opaque-coral: #ffe9e3;

  /* Produto (planos de condomínio) — só identificam o plano ao lado da logo
     dele. Nunca em ação, link, foco ou status. */
  --product-smart-600: #025c8d;
  --product-essencial-600: #881750;
  --product-exclusive-600: #565656;

  /* =========================================================================
     SEMÂNTICAS — dizem para que cada cor serve. São as que se usam em tela.
     ========================================================================= */

  /* Ação */
  --color-action-primary: var(--brand-pink-500);
  --color-action-primary-hover: var(--brand-pink-700);
  --color-action-primary-disabled: var(--gray-5);
  --color-action-secondary: var(--gray-white);
  --color-action-secondary-hover: var(--gray-1);

  /* Marca */
  --color-brand-logo: var(--brand-pink-600);

  /* Texto */
  --color-text-heading: var(--brand-black);
  --color-text-body: var(--gray-10);
  --color-text-muted: var(--gray-7);
  --color-text-inverse: var(--gray-white);
  --color-text-link: var(--color-action-primary);
  --color-text-link-hover: var(--color-action-primary-hover);
  --color-text-disabled: var(--gray-5);

  /* Fundo */
  --color-bg-page: var(--gray-white);
  --color-bg-surface: var(--gray-1);
  --color-bg-navigation: var(--brand-paper);
  --color-bg-sunken: var(--gray-2);
  --color-bg-inverse: var(--support-ink-900);
  --color-bg-disabled: var(--gray-3);

  /* Borda */
  --color-border-subtle: var(--gray-3);
  --color-border-default: var(--gray-4);
  --color-border-strong: var(--gray-6);
  --color-border-focus: var(--color-action-primary);

  /* Feedback e status — sempre o par texto + fundo */
  --color-feedback-success: var(--support-green-600);
  --color-feedback-success-bg: var(--opaque-mint);
  --color-feedback-warning: var(--support-amber-600);
  --color-feedback-warning-bg: var(--opaque-straw);
  --color-feedback-attention: var(--support-orange-600);
  --color-feedback-attention-bg: var(--opaque-salmon);
  --color-feedback-error: var(--support-red-600);
  --color-feedback-error-bg: var(--opaque-rose);
  --color-feedback-info: var(--support-blue-600);
  --color-feedback-info-bg: var(--opaque-blue-baby);

  /* Apoio para dashboards */
  --color-support-neutral: var(--support-neutral-700);
  --color-support-neutral-strong: var(--support-neutral-800);
  --color-support-neutral-soft: var(--support-neutral-600);
  --color-support-accent-lavender: var(--opaque-lavender);
  --color-support-accent-lime: var(--opaque-lime);
  --color-support-olive: var(--support-olive-600);
  --color-support-olive-bg: var(--opaque-lime);
  --color-support-coral: var(--support-coral-600);
  --color-support-coral-bg: var(--opaque-coral);

  /* Seleção de texto e foco */
  --color-selection-bg: var(--opaque-blue-baby);
  --focus-ring-color: var(--color-action-primary);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* =========================================================================
     TIPOGRAFIA
     Open Sans nos pesos 300, 400 e 700. Nunca 500 nem 600: se precisar de
     mais ênfase, suba para o bold.
     ========================================================================= */

  --font-family-base: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Display (bold) — abertura de página, no máximo um por tela */
  --type-display-1: 60px;
  --type-display-2: 48px;
  --type-display-3: 36px;
  --type-display-4: 28px;

  /* Herói (light) — degrau exclusivo do título de herói */
  --type-heading-hero: 40px;

  /* Títulos light — página e seção */
  --type-heading-1: 38px;
  --type-heading-2: 32px;
  --type-heading-3: 28px;
  --type-heading-4: 24px;
  --type-heading-5: 20px;
  --type-heading-6: 18px;

  /* Títulos bold — card e destaque dentro de seção */
  --type-heading-bold-4: 24px;
  --type-heading-bold-5: 20px;
  --type-heading-bold-6: 18px;
  --type-heading-bold-7: 16px;
  --type-heading-bold-8: 14px;

  /* Corpo — NÃO encolhe no celular; 16px é o piso do texto de campo */
  --type-lead: 18px;
  --type-body: 16px;
  --type-body-small: 14px;
  --type-caption: 12px;
  --type-tag: 10px;

  --line-height-display: 1.1;
  --line-height-heading: 1.2;
  --line-height-body: 1.25;

  /* =========================================================================
     ESPAÇAMENTO — base de 4px
     ========================================================================= */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-15: 60px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Dentro de um bloco */
  --spacing-stack-xs: 4px;  /* título e subtítulo de card */
  --spacing-stack-sm: 8px;  /* rótulo, campo e texto de ajuda */
  --spacing-stack-md: 16px; /* blocos dentro do corpo do card */
  --spacing-stack-lg: 24px; /* vão da grade de cards */
  --spacing-stack-xl: 32px; /* padding de card grande */
  --spacing-inline-xs: 4px;
  --spacing-inline-sm: 8px;
  --spacing-inline-md: 16px;
  --spacing-inline-lg: 24px;
  --spacing-inline-xl: 32px;

  /* Entre seções de página. Mede-se entre as bordas visíveis: a borda do card
     onde há card, o texto onde não há. O padding interno do card é a moldura
     dele e não entra na conta. */
  --spacing-section: 48px;       /* dos dois lados: 96px entre seções */
  --spacing-section-break: 80px; /* virada de assunto, num lado só */
  --spacing-section-title: 32px; /* do título da seção ao conteúdo */
  --spacing-section-hero: 48px;

  /* Layout */
  --layout-header-height: 72px;
  --layout-content-padding: 40px;
  --tap-target-min: 48px;

  /* =========================================================================
     FORMA
     Botão de ação é pílula; atalho e card 12px; campo e tag 4px; modal 16px.
     ========================================================================= */

  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  --radius-button: var(--radius-full);
  --radius-card: var(--radius-lg);
  --radius-input: var(--radius-sm);
  --radius-dialog: var(--radius-xl);
  --radius-tag: var(--radius-sm);
  --radius-pill: var(--radius-full);

  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;

  /* Sombras */
  --elevation-dropdown: 0 1px 2px rgba(1, 1, 1, 0.08);
  --elevation-card: 0 1px 3px rgba(1, 1, 1, 0.06), 0 1px 2px rgba(1, 1, 1, 0.04);
  --elevation-container: 0 4px 16px rgba(1, 1, 1, 0.08);
  --elevation-hover-strong: 0 4px 12px rgba(1, 1, 1, 0.1);
  --elevation-overlay: 0 12px 32px rgba(1, 1, 1, 0.18);
  --elevation-toast: 0 6px 20px rgba(1, 1, 1, 0.14);
  --elevation-icon-button: 0 1px 3px rgba(1, 1, 1, 0.12);

  /* Ícones */
  --icon-xs: 12px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  --icon-2xl: 40px;
}

/* ---------------------------------------------------------------------------
   Celular: abaixo de 640px só os TÍTULOS encolhem. Corpo, campo, legenda e
   tag ficam iguais — 16px é o piso do texto de campo, abaixo disso o
   navegador dá zoom ao focar.
   --------------------------------------------------------------------------- */

@media (max-width: 639px) {
  :root {
    --type-display-1: 38px;
    --type-display-2: 32px;
    --type-display-3: 28px;
    --type-display-4: 24px;

    --type-heading-hero: 32px;

    --type-heading-1: 28px;
    --type-heading-2: 24px;
    --type-heading-3: 24px;
    --type-heading-4: 20px;
    --type-heading-5: 18px;
    --type-heading-6: 16px;

    --type-heading-bold-4: 20px;
    --type-heading-bold-5: 18px;
    --type-heading-bold-6: 16px;

    /* Ritmo vertical no celular: com 64px entre seções a tela estreita
       mostrava só vazio. Mantém a razão 2:1 entre seção e título. */
    --spacing-section: 16px;
    --spacing-section-break: 32px;
    --spacing-section-title: 16px;
    --spacing-section-hero: 60px;

    --layout-header-height: 56px;
    --layout-content-padding: 16px;
  }
}

/* ===========================================================================
   BASE
   =========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--type-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
}

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

/* Todo título é preto e light; título de card é bold. Nunca rosa. */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--color-text-heading);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-heading);
}

h1 { font-size: var(--type-heading-1); }
h2 { font-size: var(--type-heading-2); }
h3 { font-size: var(--type-heading-3); }
h4 { font-size: var(--type-heading-4); }
h5 { font-size: var(--type-heading-5); }
h6 { font-size: var(--type-heading-6); }

a {
  color: var(--color-text-link);
}

a:hover {
  color: var(--color-text-link-hover);
}

/* ---------------------------------------------------------------------------
   Foco

   Todo elemento clicável mostra o anel: 3px rosa a 2px de distância.

   A exceção é o campo de formulário, logo abaixo: o anel desenharia um
   retângulo sobre o campo e competiria com o vermelho de erro — um campo em
   foco pareceria um campo com problema. Lá o indicador é a própria linha
   inferior, que fica preta.
   --------------------------------------------------------------------------- */

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--color-text-heading);
  border-bottom-width: var(--border-width-2);
}

/* ---------------------------------------------------------------------------
   Ícone
   --------------------------------------------------------------------------- */

.ds-icone {
  font-family: "Material Symbols Outlined";
  font-weight: 400;
  font-style: normal;
  font-size: var(--icon-md);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  /* A cor segue o texto em volta. */
  color: inherit;
  vertical-align: middle;
  user-select: none;
}

.ds-icone.xs { font-size: var(--icon-xs); }
.ds-icone.sm { font-size: var(--icon-sm); }
.ds-icone.lg { font-size: var(--icon-lg); }
.ds-icone.xl { font-size: var(--icon-xl); }

/* ===========================================================================
   TAG DE STATUS

   "Estado é informação, não identidade": o rosa da marca nunca entra na
   sinaleira. Caixa alta, bold 10px, raio 4px (quadrada, não pílula).

   A tag neutra leva borda porque é cinza sobre superfícies que também
   costumam ser cinza: sem ela, some na linha alternada da tabela.

   O laranja de "Em andamento" mede 3,61:1 sobre o salmão, abaixo dos 4,5:1
   pedidos para texto pequeno. É o valor da marca: a tag vale pela palavra,
   nunca só pela cor — por isso o rótulo nunca é abreviado.
   =========================================================================== */

.ds-tag {
  display: inline-block;
  font-size: var(--type-tag);
  font-weight: var(--font-weight-bold);
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px var(--space-2);
  border-radius: var(--radius-tag);
  border: var(--border-width-1) solid transparent;
  white-space: nowrap;
}

.ds-tag.novo {
  color: var(--color-text-body);
  background: var(--color-bg-sunken);
  border-color: var(--color-support-neutral-strong);
}

.ds-tag.agendado {
  color: var(--color-feedback-info);
  background: var(--color-feedback-info-bg);
}

.ds-tag.andamento {
  color: var(--color-feedback-attention);
  background: var(--color-feedback-attention-bg);
}

.ds-tag.concluido {
  color: var(--color-feedback-success);
  background: var(--color-feedback-success-bg);
}

.ds-tag.cancelado {
  color: var(--color-feedback-error);
  background: var(--color-feedback-error-bg);
}

.ds-tag.aviso {
  color: var(--color-feedback-warning);
  background: var(--color-feedback-warning-bg);
}

/* Categoria — nunca status. */
.ds-tag.lavanda {
  color: var(--color-support-neutral-strong);
  background: var(--color-support-accent-lavender);
}

.ds-tag.lima {
  color: var(--color-support-neutral-strong);
  background: var(--color-support-accent-lime);
}

/* ===========================================================================
   BOTÃO

   Dois eixos independentes: a variante define a forma, o tom define a cor.
   Tom neutro (preto) é o padrão; tom marca (rosa) é para destaque.

   "Se uma tela tem cinco botões rosa, nenhum se destaca."

   No hover, TODO botão vira rosa escuro #941340 com rótulo branco —
   o preenchido rosa, o preenchido preto e os dois outlines. Assim todo
   botão dá o mesmo retorno ao ponteiro, na mesma cor.
   =========================================================================== */

.ds-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-inline-sm);
  height: 40px;
  padding: 0 var(--space-5);
  border: var(--border-width-1) solid transparent;
  border-radius: var(--radius-button);
  font-family: inherit;
  font-size: var(--type-body);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.ds-botao.sm { height: 32px; padding: 0 var(--space-4); font-size: var(--type-body-small); }
.ds-botao.lg { height: 48px; padding: 0 var(--space-6); }

/* Preenchido, tom neutro — a ação padrão */
.ds-botao.preenchido {
  background: var(--color-text-heading);
  color: var(--color-text-inverse);
}

/* Preenchido, tom marca — herói, rodapé, atalho, CTA */
.ds-botao.preenchido.marca {
  background: var(--color-action-primary);
}

.ds-botao.preenchido:hover:not(:disabled) {
  background: var(--color-action-primary-hover);
  color: var(--color-text-inverse);
}

/* Outline — no hover vira preenchido de rosa escuro, inclusive o preto */
.ds-botao.outline {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-heading);
}

.ds-botao.outline.marca {
  border-color: var(--color-action-primary);
  color: var(--color-action-primary);
}

.ds-botao.outline:hover:not(:disabled) {
  background: var(--color-action-primary-hover);
  border-color: var(--color-action-primary-hover);
  color: var(--color-text-inverse);
}

/* Link — sem fundo e sem borda */
.ds-botao.link {
  height: auto;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-text-link);
  font-weight: var(--font-weight-regular);
}

.ds-botao.link:hover:not(:disabled) {
  color: var(--color-text-link-hover);
}

.ds-botao:disabled {
  background: var(--color-action-primary-disabled);
  border-color: transparent;
  color: var(--color-text-inverse);
  cursor: not-allowed;
}

.ds-botao.outline:disabled,
.ds-botao.link:disabled {
  background: transparent;
  border-color: var(--color-border-default);
  color: var(--color-text-disabled);
}

/* Atalho: leva a outro lugar e não executa nada. Raio de 12px, sempre
   contorno — a forma retangular o separa do CTA ao lado. */
.ds-atalho {
  border-radius: var(--radius-card);
}

/* ===========================================================================
   CARD
   Raio 12px, borda de 1px, fundo de página. Não aninhe cards.
   =========================================================================== */

.ds-card {
  background: var(--color-bg-page);
  border: var(--border-width-1) solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--elevation-card);
}

.ds-card.secundario {
  border-color: var(--color-bg-sunken);
  box-shadow: none;
}

.ds-card.rebaixado {
  background: var(--color-bg-sunken);
  border-color: var(--color-border-subtle);
  box-shadow: none;
}

.ds-card.contorno {
  border-color: var(--color-border-default);
  box-shadow: none;
}

.ds-card.container {
  box-shadow: var(--elevation-container);
}

/* Título de card é bold e preto, nunca rosa. */
.ds-card-titulo {
  font-size: var(--type-heading-bold-4);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  line-height: var(--line-height-heading);
}

.ds-card-descricao {
  margin-top: var(--spacing-stack-xs);
  font-size: var(--type-body);
  color: var(--color-text-muted);
}

/* ===========================================================================
   ALERTA
   Cada tom pinta borda, fundo, ícone e texto, e tem ícone próprio.
   O tom nunca se comunica só pela cor: o título carrega a mensagem.
   =========================================================================== */

.ds-alerta {
  display: flex;
  gap: var(--spacing-inline-sm);
  padding: var(--space-4);
  border: var(--border-width-1) solid;
  border-radius: var(--radius-input);
  font-size: var(--type-body-small);
}

.ds-alerta-titulo {
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-stack-xs);
}

.ds-alerta.info {
  color: var(--color-feedback-info);
  background: var(--color-feedback-info-bg);
  border-color: var(--color-feedback-info);
}

.ds-alerta.sucesso {
  color: var(--color-feedback-success);
  background: var(--color-feedback-success-bg);
  border-color: var(--color-feedback-success);
}

.ds-alerta.aviso {
  color: var(--color-feedback-warning);
  background: var(--color-feedback-warning-bg);
  border-color: var(--color-feedback-warning);
}

.ds-alerta.atencao {
  color: var(--color-feedback-attention);
  background: var(--color-feedback-attention-bg);
  border-color: var(--color-feedback-attention);
}

.ds-alerta.erro {
  color: var(--color-feedback-error);
  background: var(--color-feedback-error-bg);
  border-color: var(--color-feedback-error);
}

/* ---------------------------------------------------------------------------
   SVG

   Texto dentro de SVG não herda a fonte da página: o padrão do formato é a
   fonte serifada do navegador (Times New Roman no Chrome). Os gráficos do
   portal são todos SVG, então sem esta regra metade do texto da tela ficava
   fora do Design System sem que nada no CSS dissesse isso.
   --------------------------------------------------------------------------- */

svg text,
svg tspan {
  font-family: var(--font-family-base);
}

/* ---------------------------------------------------------------------------
   Controles de formulário

   button, input, select, textarea e option não herdam a fonte do documento:
   o navegador aplica a fonte do sistema. Sem esta regra, cada botão da
   aplicação precisaria repetir `font-family: inherit` — e vários esqueciam.
   --------------------------------------------------------------------------- */

button,
input,
select,
textarea,
optgroup,
option {
  font-family: var(--font-family-base);
  font-size: inherit;
}

/* O select já define o tamanho pelo seu próprio seletor; aqui só garantimos
   que a lista aberta não volte para a fonte do sistema. */
option {
  font-size: var(--type-body);
}

/* <small> sem regra própria cai no 0,83em do navegador — 11,67px, que não é
   degrau da escala. A legenda é o degrau que o DS prevê para isto. */
small {
  font-size: var(--type-caption);
}

/* ===========================================================================
   TABELA

   O DS especifica: cabeçalho em type-body-small-bold PRETO (não cinza) com
   borda inferior color-border-subtle; linhas pares em color-bg-surface
   (zebra); números à direita com numeral tabular.

   A zebra não é enfeite: é o que permite seguir uma linha larga até o fim
   sem trocar de registro no meio do caminho. Por isso vale em toda tabela
   da aplicação, e não só nas que alguém lembrou de estilizar.
   =========================================================================== */

table th {
  font-size: var(--type-body-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  border-bottom: var(--border-width-1) solid var(--color-border-subtle);
  text-align: left;
}

table tbody tr:nth-child(even) {
  background: var(--color-bg-surface);
}

/* Número à direita, com numeral tabular: sem isso os dígitos têm larguras
   diferentes e a coluna de valores fica serrilhada. */
table td.num,
table th.num,
table [align="end"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   MOVIMENTO

   Duas camadas, ambas discretas: a entrada da página e a revelação dos blocos
   conforme a pessoa rola. O gesto é o mesmo da página MAG — subir 14px e
   aparecer —, agora disponível para o portal inteiro.

   Houve uma terceira tentativa, com a View Transitions API
   (`@view-transition { navigation: auto }`), e ela não serve aqui: as telas
   pintam vazias e só buscam os dados depois, então o navegador atingia o
   tempo limite e descartava a transição — 21 `AbortError` no console por
   navegação, e nenhum efeito na tela. Se um dia o portal servir a primeira
   pintura já com dado, vale reconsiderar.

   O portal é um painel de leitura, não uma peça de marketing: as durações são
   curtas de propósito. Animação longa num dado que se consulta dez vezes por
   dia vira atraso, não encanto.

   TUDO aqui é desligado por `prefers-reduced-motion`, no fim do arquivo.
   =========================================================================== */

:root {
  --duracao-rapida: 0.18s;
  --duracao-media: 0.34s;
  --duracao-lenta: 0.5s;
  /* Sai rápido, chega devagar: dá sensação de peso sem parecer lento. */
  --aceleracao: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------------------------
   Entrada da página

   Cada link é uma navegação completa, então o que marca a troca é a chegada:
   o conteúdo sobe um pouco e aparece. O topo fica de fora — ele é idêntico em
   todas as telas, e vê-lo piscar a cada clique denuncia a recarga.
   --------------------------------------------------------------------------- */

html.ds-com-movimento .app-shell > *:not(.app-topo) {
  animation: ds-entrar var(--duracao-media) var(--aceleracao) both;
}

@keyframes ds-entrar {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Revelação por rolagem

   O estado inicial só existe quando `js/animacao.js` marca o documento. Se o
   script não rodar — erro, bloqueio, navegador antigo —, nada fica escondido:
   o conteúdo aparece normalmente, sem animação.
   --------------------------------------------------------------------------- */

html.ds-com-movimento .ds-revelar {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--duracao-lenta) var(--aceleracao),
    transform var(--duracao-lenta) var(--aceleracao);
}

html.ds-com-movimento .ds-revelar.ds-visivel {
  opacity: 1;
  transform: none;
}

/* Numa grade, os itens entram em cascata curta. O atraso para no sexto: além
   disso a espera é percebida como travamento, não como ritmo. */
html.ds-com-movimento .ds-revelar:nth-child(2) { transition-delay: 0.04s; }
html.ds-com-movimento .ds-revelar:nth-child(3) { transition-delay: 0.08s; }
html.ds-com-movimento .ds-revelar:nth-child(4) { transition-delay: 0.12s; }
html.ds-com-movimento .ds-revelar:nth-child(5) { transition-delay: 0.16s; }
html.ds-com-movimento .ds-revelar:nth-child(n + 6) { transition-delay: 0.2s; }

/* ---------------------------------------------------------------------------
   Realces de interação
   --------------------------------------------------------------------------- */

.kpi-card,
.ds-card,
.programa-cartao,
.risco-cartao,
.kanban-card {
  transition: transform var(--duracao-rapida) var(--aceleracao),
    box-shadow var(--duracao-rapida) var(--aceleracao),
    border-color var(--duracao-rapida) var(--aceleracao);
}

.kpi-card:hover,
.programa-cartao:hover,
.risco-cartao:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-hover-strong);
}

/* Barras de progresso crescem a partir da esquerda quando o painel aparece. */
.progress-fill,
.semaforo-fatia,
.distribuicao-barra,
.chart-fill {
  transition: width var(--duracao-lenta) var(--aceleracao),
    height var(--duracao-lenta) var(--aceleracao);
}

/* ---------------------------------------------------------------------------
   Quem pediu menos movimento recebe menos movimento.

   Não é só diminuir: é desligar. Vestibular sensível não negocia duração.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html.ds-com-movimento .ds-revelar,
  html.ds-com-movimento .ds-revelar.ds-visivel {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.ds-com-movimento .app-shell > *:not(.app-topo) {
    animation: none;
  }

  .kpi-card,
  .ds-card,
  .programa-cartao,
  .risco-cartao,
  .kanban-card,
  .progress-fill,
  .semaforo-fatia,
  .distribuicao-barra,
  .chart-fill {
    transition: none;
  }

  .kpi-card:hover,
  .programa-cartao:hover,
  .risco-cartao:hover {
    transform: none;
  }
}