/* =================================================================================================
 * ALLOGIA — editorial hospitality system, portado do site para o PMS
 *
 * ─────────────────────────────────────────────────────────────────────────────────────────────
 * POR QUE ISTO EXISTE, E POR QUE É UM ARQUIVO SÓ
 *
 * As 28 telas do PMS são HTML autocontido: cada uma tem o próprio <style>, servida uma a uma pelo
 * `servirPagina()`. Não há bundler nem template. Repintar 28 arquivos à mão seria o caminho
 * garantido para 28 tons de roxo levemente diferentes daqui a três meses.
 *
 * O que torna o arquivo único possível: as telas JÁ falam por token. São 26 das 28 com `:root` e
 * mais de 170 usos de `var(--…)` só no calendário. Elas não pedem "#433075": pedem `var(--roxo)`.
 * Então re-vestir o sistema inteiro é redefinir o que esses nomes significam — aqui.
 *
 * ⚠ `:root:root` (e não `:root`) É DELIBERADO. Cada tela define os tokens dela no próprio <style>,
 * e a folha que chega depois só venceria por ordem de carregamento — que muda conforme onde o
 * <link> foi colado em cada arquivo. Dobrar o seletor sobe a especificidade (0,2,0 contra 0,1,0) e
 * o resultado deixa de depender de ordem. Vale para os 28 arquivos, inclusive os que ainda não
 * existem.
 * ─────────────────────────────────────────────────────────────────────────────────────────────
 *
 * FONTES HOSPEDADAS AQUI, não no Google. As checagens de tela recusam `fonts.googleapis` de
 * propósito (`catalogo.checagens.mjs`): tela do PMS é autocontida — não depende de CDN de fora,
 * não vaza quem abriu para terceiro, não fica feia quando o Google está fora do ar. Fraunces e
 * Instrument Sans são licença aberta (OFL); os dois arquivos somam 94 KB e são baixados uma vez.
 * ============================================================================================= */

/* Fraunces — o serif variável do site. Os eixos `opsz` (tamanho óptico) e `SOFT` são o que dão
   aquele desenho editorial: quanto maior o texto, mais o desenho abre. */
@font-face {
  font-family: "Fraunces";
  src: url("/fontes/fraunces.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/fontes/instrumentsans.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}

:root:root {
  /* ---- Paleta PAPEL: neutros quentes, de hospitalidade ---------------------------------- */
  --paper:            #F7F2E9;
  --paper-deep:       #EEE7D8;
  --paper-soft:       #FBF8F1;
  --ink:              #1A1613;
  --ink-mute:         #726656;
  --ink-soft:         #9C8F7A;
  --line:             #E4DAC5;
  --line-strong:      #C9BCA0;
  --card:             #FFFFFF;
  --card-line:        #EFE6D2;

  /* ---- Marca (idêntica à do site — o roxo nunca mudou) ---------------------------------- */
  --roxo:             #433075;
  --roxo-deep:        #2D1F54;
  --roxo-hover:       #5A41A0;
  --lavanda:          #A58CF5;
  --lavanda-soft:     #EDE3FF;
  --lavanda-whisper:  #F7F1FF;

  /* ---- Acentos editoriais ---------------------------------------------------------------- */
  --gold:             #B89B5E;
  --gold-soft:        #F0E6CC;
  --sage:             #5A7D57;
  --amber:            #B87333;
  --danger:           #A9332E;

  /* ---- Tipografia ------------------------------------------------------------------------ */
  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Forma ------------------------------------------------------------------------------ */
  --radius:      8px;
  --radius-lg:   14px;
  --radius-full: 999px;

  /* =============================================================================================
   * A PONTE: os nomes que as 28 telas JÁ USAM, apontando para a paleta nova.
   *
   * É esta seção que faz o sistema inteiro mudar de cara sem tocar em tela nenhuma. À esquerda o
   * vocabulário do PMS (nascido antes), à direita o significado novo. Quem escreveu
   * `background: var(--off)` há seis meses continua certo — só que `--off` deixou de ser um
   * branco-lavanda frio e virou papel quente.
   *
   * ⚠ NÃO RENOMEIE os tokens da esquerda para "arrumar". Eles são a interface com 28 arquivos, e
   * renomear quebraria todos de uma vez, em silêncio: uma variável CSS que não existe não dá erro,
   * ela simplesmente não pinta nada.
   * ========================================================================================== */
  --off:   var(--paper);        /* fundo geral — era #f4f2fa (branco-lavanda frio) */
  --txt:   var(--ink);          /* texto principal — era #20242e (cinza-azulado) */
  --mut:   var(--ink-mute);     /* texto secundário — era #6b7280 (cinza neutro) */
  --bd:    var(--line);         /* hairline — era #e4def3 (lilás claro) */
  --lav:   var(--lavanda);      /* idêntico ao de antes: #A58CF5 */
  --lavl:  var(--lavanda-soft); /* lavanda clara — era #ede7fb */
  --roxo2: var(--roxo-hover);   /* roxo secundário — era #5a3f8f */
  --ok:    var(--sage);         /* sucesso — era #2e9e5b (verde saturado) */
  --err:   var(--danger);       /* erro — era #c0392b */
  --warn:  var(--amber);        /* alerta */
}

/* =================================================================================================
 * TIPOGRAFIA — o que mais muda a percepção, e o que menos custa
 * ============================================================================================= */
/* `html body` e não `body`: mesma razão do `:root:root`. As telas definem a fonte no <style>
   delas com a mesma especificidade, e aí só venceria quem carregasse por último — o que muda
   conforme onde o <link> foi colado em cada arquivo. Subir um degrau tira a ordem da equação. */
html body {
  /* O fundo entra aqui porque algumas telas antigas cravaram a cor no próprio <style>
     (`background:#f7f5fb`) em vez de usar `var(--off)`. Sem esta linha, elas ficariam com o
     branco-lavanda frio no meio de um sistema de papel quente — o tipo de divergência que
     ninguém reporta e todo mundo sente. */
  background: var(--off);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  color: var(--txt);
}

html h1, html h2, html h3, html h4, .font-display {
  font-family: var(--font-display);
  font-feature-settings: "ss01", "liga", "dlig";
  letter-spacing: -0.01em;
  font-weight: 600;
}

/* Números grandes com desenho de serif — é o que dá o ar de relatório impresso aos painéis.
   `tnum` alinha os dígitos em coluna; sem isso, uma tabela de valores dança a cada atualização. */
.num-display {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 20;
  font-feature-settings: "tnum", "lnum", "ss01";
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Todo lugar onde dígito se compara em coluna. Aplicado por elemento, não global: em texto
   corrido, largura fixa de dígito atrapalha a leitura. */
td, th, .num, .valor, input[type="number"] { font-variant-numeric: tabular-nums; }

.display-xl {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 500;
}

.display-lg {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 120, "SOFT" 30;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
}

.display-italic { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 80; }

/* O rótulo pequeno em caixa alta que separa as seções do site. */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-mute);
}

.caption-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}

/* =================================================================================================
 * COMPONENTES EDITORIAIS — as mesmas classes do site, para telas novas nascerem iguais
 * ============================================================================================= */
.card-editorial {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 rgba(26, 22, 19, 0.02), 0 1px 2px rgba(26, 22, 19, 0.03);
}

.hairline-top    { border-top: 1px solid var(--line); }
.hairline-bottom { border-bottom: 1px solid var(--line); }

.ink-link {
  color: var(--roxo);
  text-decoration: underline;
  text-decoration-color: var(--lavanda-soft);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 180ms ease;
}
.ink-link:hover { text-decoration-color: var(--lavanda); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  background: var(--paper-deep);
  color: var(--ink-mute);
  border: 1px solid var(--line);
}
.chip-success { background: rgba(90, 125, 87, 0.10);  color: var(--sage);  border-color: rgba(90, 125, 87, 0.25); }
.chip-brand   { background: var(--lavanda-soft);      color: var(--roxo-deep); border-color: rgba(67, 48, 117, 0.15); }
.chip-warn    { background: rgba(184, 115, 51, 0.10); color: var(--amber); border-color: rgba(184, 115, 51, 0.25); }

/* Numeração editorial 01 / 02 / 03 — a marca do painel do site. Só numere o que é sequência de
   verdade; numerar cartão solto é enfeite que finge informação. */
.serie::before {
  content: attr(data-serie);
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}

/* =================================================================================================
 * MOVIMENTO — contido, uma vez só ao abrir. E respeitando quem pediu para não ter.
 * ============================================================================================= */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }

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

/* =================================================================================================
 * A CASCA (barra lateral + barra do topo) — repintada AQUI, e não nas 27 telas
 *
 * ─────────────────────────────────────────────────────────────────────────────────────────────
 * O bloco de navegação é COPIADO em cada tela a partir de `_shell.html`, com as cores cravadas
 * (`background:#262b36`) em vez de tokens. Foi por isso que a barra lateral continuou azul-escura
 * depois de o resto do sistema virar papel: não havia variável para redefinir.
 *
 * A saída poderia ser editar as 27 cópias. Não é: o `_shell.html` existe justamente porque a
 * duplicação já mordeu antes, e 27 edições à mão é como um sistema acaba com 27 tons de cinza.
 * Aqui a especificidade resolve — `html .sidenav` (0,1,1) vence o `.sidenav` (0,1,0) de cada tela,
 * independente de ordem de carregamento.
 *
 * ⚠ QUEM MEXER NO `_shell.html` PRECISA SABER QUE ESTE BLOCO EXISTE. Mudança de cor lá não vai
 * aparecer, porque isto aqui vence. Estrutura e comportamento continuam sendo do `_shell.html`;
 * só a pintura mora aqui.
 * ─────────────────────────────────────────────────────────────────────────────────────────────
 */
html .sidenav {
  background: var(--paper-soft);
  color: var(--ink-mute);
  border-right: 1px solid var(--line);
}

/* A marca em serif, minúscula, como no site. */
html .sn-marca {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 18px 18px 15px;
}
html .sn-marca span { color: var(--roxo); font-weight: 500; }

html .sn-item { color: var(--ink-mute); font-weight: 500; }
html .sn-item:hover { background: var(--paper-deep); color: var(--ink); }
html .sn-item.ativo { background: var(--lavanda-whisper); border-left-color: var(--roxo); color: var(--roxo-deep); font-weight: 600; }
html .sn-item .seta { color: var(--ink-soft); }

html .sn-sub { background: var(--paper-deep); }
html .sn-sub a { color: var(--ink-mute); }
html .sn-sub a:hover { color: var(--ink); background: var(--paper); }
html .sn-sub a.ativo { color: var(--roxo-deep); background: var(--lavanda-whisper); border-left-color: var(--roxo); }
html .sn-sub .desab { color: var(--ink-soft); }

html .sn-extranet { color: var(--ink-soft); border-top: 1px solid var(--line); }
html .sn-extranet:hover { color: var(--roxo); }

/* Contraste conferido: #12331b sobre #7bc96f já passava; a versão de papel mantém o verde-sálvia
   com texto claro, que é o par usado no site. */
html .sn-badge { background: var(--sage); color: var(--paper-soft); font-weight: 600; }

html .barra-topo {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
html .bt-titulo {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft);
}
html .bt-chip { color: var(--ink-mute); }
html .bt-chip a { color: var(--roxo); }
html .bt-menu { color: var(--roxo); }
html .bt-menu:hover { background: var(--lavanda-soft); }
html .sn-veu { background: rgba(26, 22, 19, 0.45); }