/* =========================================================
   Identidade da Tatos sobre o Tabler.

   O Tabler expõe custom properties (`--tblr-*`), então a marca entra por cima
   SEM fork e SEM recompilar Sass. Se um dia trocarmos de kit, o que se perde é
   este arquivo — não o produto.

   As cores vêm dos dois projetos que já estão no ar: o azul e o verde da marca
   do painel de marketing, e a rampa do funil do tatos-dash — que foi validada
   com o validador de paletas contra a superfície clara (monotonicidade em L,
   contraste e separação sob daltonismo). Trocar um hex da rampa exige rodar o
   validador de novo.
   ========================================================= */

:root {
  --tblr-primary: #12629F;
  --tblr-primary-rgb: 18, 98, 159;
  --tblr-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tblr-border-radius: 10px;
  --tblr-body-bg: #F4F7F9;

  /* Marca — use estes, nunca hex solto no meio da tela. */
  --tatos-navy:       #0A3A5E;
  --tatos-azul:       #12629F;
  --tatos-azul-suave: #EAF2F8;
  --tatos-verde:      #A6D16C;
  --tatos-verde-ink:  #4A7A16;

  /* Tinta e superfície — mesmos valores do tatos-dash. */
  --ink:       #10181F;
  --ink-2:     #52606B;
  --ink-muted: #8994A0;
  --page:      #F4F7F9;
  --surface:   #FBFCFD;
  --borda:     rgba(16, 24, 31, .10);
  --sombra:    0 1px 2px rgba(16, 24, 31, .04), 0 8px 24px rgba(16, 24, 31, .06);

  /* Rampa ordinal do funil — 6 passos, validada. Não reordene. */
  --f1: #7FB4D9; --f2: #5BA0CC; --f3: #3789BE;
  --f4: #12629F; --f5: #0E4E7E; --f6: #0A3A5E;

  /* Categóricos: identidade de produto/série. */
  --s1: #12629F; --s2: #EB6834; --s3: #1BAF7A;

  /* Status — reservados, nunca usados como série. */
  --bom: #0CA30C; --atencao: #FAB219; --serio: #EC835A; --critico: #D03B3B;
}

body { background: var(--page); color: var(--ink); }

.card { border-color: var(--borda); box-shadow: var(--sombra); }
.btn-primary { --tblr-btn-bg: var(--tatos-azul); --tblr-btn-border-color: var(--tatos-azul);
               --tblr-btn-hover-bg: var(--tatos-navy); --tblr-btn-hover-border-color: var(--tatos-navy); }

/* Barra do topo — faixa da marca, igual à do painel de marketing. */
.topo { background: var(--surface); border-bottom: 1px solid var(--borda); }
.topo .logo { height: 30px; width: auto; display: block; }

/* Cabeçalho de página — anatomia fixa: título, descrição e ações à direita.
   Toda tela nova começa por aqui; é o que impede cada uma nascer diferente. */
.pagina-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.pagina-cab h1 { font-size: 1.35rem; font-weight: 700; margin: 0 0 2px; color: var(--tatos-navy); letter-spacing: -.01em; }
.pagina-cab .desc { color: var(--ink-2); font-size: .875rem; margin: 0; }

/* Cartão de módulo do hub */
.mod-card { display: flex; gap: 14px; align-items: flex-start; height: 100%; text-decoration: none; color: inherit;
            border: 1px solid var(--borda); transition: border-color .15s, box-shadow .15s, transform .15s; }
.mod-card:hover { border-color: var(--tatos-azul); box-shadow: 0 6px 20px rgba(10, 58, 94, .12); transform: translateY(-1px); }
.mod-card .ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
                background: var(--tatos-azul-suave); color: var(--tatos-azul); }
.mod-card .ic svg { width: 22px; height: 22px; }
.mod-card h3 { font-size: .95rem; font-weight: 600; margin: 0 0 3px; color: var(--tatos-navy); }
.mod-card p { font-size: .8rem; color: var(--ink-2); margin: 0; line-height: 1.45; }

/* Título de área — barrinha verde da marca à esquerda. */
.area-titulo { display: flex; align-items: center; gap: 9px; font-size: .7rem; font-weight: 700;
               letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted); margin: 30px 0 13px; }
.area-titulo::before { content: ""; width: 3px; height: 15px; border-radius: 2px; background: var(--tatos-verde); }
.area-titulo:first-of-type { margin-top: 0; }

/* Estado vazio — um só padrão no ecossistema inteiro. */
.vazio { text-align: center; padding: 44px 20px; color: var(--ink-2); }
.vazio .t { font-weight: 600; color: var(--tatos-navy); margin-bottom: 4px; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }