/* ==========================================================================
   SEMEQ Safe Docs: folha de estilo única do portal

   Conceito: Espectro, no padrão SEMEQ (azul e branco, logo oficial).
   A SEMEQ escuta máquinas e lê o espectro de vibração de cada uma. O SEMEQ Safe Docs
   escuta documentos: cada acesso é uma barra no espectro do documento. As três
   barras do logo SEMEQ viram o desenho de tudo o que é sinal (o gráfico, o
   progresso, a espera), e a barra fica mais intensa com a atividade, sempre
   em azul. O resto é claro e quieto.

   Índice
   01 Fontes
   02 Tokens
   03 Base
   04 Casca: faixa de desenvolvimento, cabeçalho, conteúdo, rodapé
   05 Tipografia e texto corrido
   06 Placa, cabeçalho de tela e arranjos
   07 Botões e ícones
   08 Formulários: campo, caixa, visor do código
   09 Lâmpada, classificação e plaqueta
   10 Avisos
   11 Espectro: palco, monitor, sinal de acessos e escala
   12 Tabela, ficha e paginação
   13 Vazio, carregando, detalhes e diálogo
   14 Portaria (telas de entrada) e tela de erro
   15 Fichas de documento (lista do cliente)
   16 Sala de leitura
   17 Guia de estilo (só em desenvolvimento)
   18 Utilitários
   19 Movimento
   20 Movimento reduzido, alto contraste e impressão

   Regras da casa
   - Classes simples, de um nível. Variação de contexto se faz trocando
     tokens (ver "Papéis" na seção 02), não com seletores encadeados.
   - Nenhuma cor fora dos tokens. Nenhum url() além das fontes (a CSP não
     aceita data:).
   - !important só em [hidden] e na seção 20.
   ========================================================================== */


/* 01 Fontes --------------------------------------------------------------- */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* 02 Tokens --------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Cores que acompanham o tema */
  --ink: #0C113D;        /* azul-noite SEMEQ: texto */
  --enamel: #F3F5FA;      /* fundo das telas */
  --sheet: #FFFFFF;        /* placas de conteúdo */
  --sheet-2: #F6F7FB;      /* superfície rebaixada: cabeça de tabela, capa de ficha */
  --sheet-hover: #EEF1F8; /* botão secundário sob o cursor */
  --steel: #566070;          /* texto secundário (5,8:1 sobre Esmalte) */
  --bond: #0B4A9C;          /* azul SEMEQ: links e anel de foco (8,5:1 sobre Folha) */
  --signal: #E7600F;        /* laranja SEMEQ: só a ação principal da tela */
  --signal-light: #F47B2C;  /* a ação principal sob o cursor (Noite por cima: 6,6:1) */
  --green: #1E7A4C;        /* condição: em ordem */
  --amber: #F2A900;        /* condição: atenção */
  --red: #B3261E;     /* condição: alerta */

  /* Tinta com transparência, para contornos e fundos leves */
  --ink-55: rgb(12 17 61 / 0.5);    /* contorno de campo (3,4:1 sobre Folha) */
  --ink-40: rgb(12 17 61 / 0.28);
  --ink-16: rgb(12 17 61 / 0.12);
  --ink-06: rgb(12 17 61 / 0.05);
  --halo: rgb(11 74 156 / 0.2);       /* anel de foco dos campos */
  --green-bg: rgb(30 122 76 / 0.11);
  --amber-bg: rgb(242 169 0 / 0.18);
  --red-bg: rgb(179 38 30 / 0.09);

  /* Profundidade: sombra difusa na cor da tinta. Três degraus, conforme a altura. */
  --shadow-1: 0 1px 2px rgb(12 17 61 / 0.08);
  --shadow: 0 1px 2px rgb(12 17 61 / 0.04), 0 10px 28px -16px rgb(12 17 61 / 0.22);
  --shadow-high: 0 2px 8px rgb(12 17 61 / 0.06), 0 32px 60px -28px rgb(12 17 61 / 0.4);
  --logo-filter: none;     /* o logo SEMEQ é azul-noite; no tema escuro ele vira claro */

  /* Intensidade: a escala do espectro, do sinal fraco ao forte, em azul SEMEQ.
     Só em barras de sinal. Sobre fundo claro, mais forte é mais escuro; no tema
     escuro (e no palco, com --luz), mais forte é mais claro, até o branco. */
  --heat-1: #8FB2E8;
  --heat-2: #6B97DC;
  --heat-3: #4479CB;
  --heat-4: #1B55AE;
  --heat-5: #0C2F7A;

  /* Cores fixas: não mudam com o tema. Valem onde o fundo é sempre o mesmo
     (o palco, a sala de leitura, a página do documento, o texto sobre laranja). */
  --night: #0C113D;        /* o azul-noite do logo SEMEQ */
  --blue: #0B4A9C;         /* o azul SEMEQ das peças de marca */
  --blue-bg: #0A2C6E;   /* o degrau entre o azul e o azul-noite, no palco */
  --light-1: #3B86EE;        /* a escala do espectro sobre o palco: do azul ao branco */
  --light-2: #5FA2F7;
  --light-3: #93C2FF;
  --light-4: #CBE2FF;
  --light-5: #FFFFFF;
  --paper: #FCFDFB;
  --casing: #E3E7E2;
  --steel-light: #B8BFD0;    /* texto secundário sobre Noite (9,6:1) */
  --red-light: #FF8A7A;
  --night-40: rgb(12 17 61 / 0.4);
  --night-16: rgb(12 17 61 / 0.16);
  --night-06: rgb(12 17 61 / 0.06);
  --paper-34: rgb(252 253 251 / 0.34);
  --paper-16: rgb(252 253 251 / 0.16);
  --paper-08: rgb(252 253 251 / 0.07);
  --shadow-signal: 0 10px 22px -10px rgb(231 96 15 / 0.7);
  --heat-glow: rgb(120 180 255 / 0.45);

  /* Tipografia */
  --font-text: "Atkinson Hyperlegible Next", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-small: 0.875rem;                               /* 14px: ajuda, legendas, rodapé */
  --t-base: 1rem;                                      /* 16px: texto e controles */
  --t-lead: 1.125rem;                                  /* 18px: frase de abertura, título de bloco */
  --h-2: 1.5rem;                                       /* 24px: título de seção */
  --h-1: clamp(1.625rem, 1.45rem + 0.8vw, 2rem);       /* 26 a 32px: título de tela */
  --d-2: 1.75rem;                                      /* 28px: nome do portal */
  --d-1: clamp(2.25rem, 1.9rem + 1.6vw, 3rem);         /* 36 a 48px: leituras do monitor */
  --d-0: clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem);       /* 36 a 56px: letreiro do palco */
  --measure: 68ch;                                      /* linha de texto mais longa */

  /* Espaço (base 4px) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --margin: 1rem;          /* calha lateral da tela */
  --padding: 1.125rem;     /* respiro interno das placas */
  --width: 80rem;        /* largura máxima do conteúdo: aproveita o notebook inteiro */
  --touch: 2.75rem;        /* alvo mínimo de toque: 44px */
  --control-height: 2.75rem; /* altura de botão e campo; com mouse, fica mais justa (ver abaixo) */
  --compact-height: 2.75rem; /* altura do botão compacto e dos itens de menu */

  /* Forma: o raio cresce com o tamanho da peça */
  --radius: 12px;            /* botões e campos */
  --radius-plate: 16px;      /* placas */
  --radius-stage: 20px;      /* palco e monitor */
  --stroke: 1px;
  --bar: -15deg;         /* a inclinação das barras SEMEQ (o espectro é desenhado em pé e inclinado aqui) */
  --tilt: 28deg;     /* a marca d'água das páginas */
  --spring: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (min-width: 40em) {
  :root {
    --margin: 1.5rem;
    --padding: 1.5rem;
  }
}

@media (min-width: 64em) {
  :root {
    --margin: 2rem;
  }
}

/* Com mouse ou trackpad, os controles ficam mais justos e cabe mais coisa na tela.
   No toque, continuam com 44px. */
@media (pointer: fine) {
  :root {
    --control-height: 2.5rem;
    --compact-height: 2.125rem;
  }
}

/* Papéis: os componentes leem só estes nomes. Uma superfície troca os papéis e
   tudo o que está dentro dela acompanha. A lista de seletores abaixo são as
   "ilhas claras": valem na raiz e em blocos claros dentro da sala de leitura. */
:root,
.notice,
.dialog,
.page--simulated {
  --bg: var(--enamel);
  --surface: var(--sheet);
  --surface-2: var(--sheet-2);
  --text: var(--ink);
  --text-2: var(--steel);
  --border: var(--ink-40);
  --border-strong: var(--ink-55);
  --divider: var(--ink-16);
  --highlight: var(--ink-06);
  --focus: var(--bond);
  --link: var(--bond);
  --button-bg: var(--sheet);
  --button-bg-hover: var(--sheet-hover);
  --field-bg: var(--sheet);
  --badge-bg: var(--ink);
  --badge-text: var(--sheet);
}

/* Tema escuro. Troca só a paleta: Tinta vira a cor clara do texto, Esmalte e
   Folha viram azul-noite em dois degraus, e as cores de condição clareiam para
   manter o contraste AA. Os componentes não mudam.
   Vale em dois casos, por isso o bloco aparece duas vezes (mantenha os dois iguais):
   1. o sistema da pessoa pede escuro e ela não escolheu "claro" no portal;
   2. ela escolheu "escuro" no portal (html[data-theme="dark"], gravado por js/theme.js).
   Só em tela: a impressão sai sempre no tema claro. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #E9ECF5;
    --enamel: #070A24;
    --sheet: #11163F;
    --sheet-2: #0C1033;
    --sheet-hover: #1B2157;
    --steel: #A6AEC2;          /* 7,6:1 sobre Folha escura */
    --bond: #9CC4FF;
    --heat-1: #2E6FD9;
    --heat-2: #4F93F2;
    --heat-3: #86BBFF;
    --heat-4: #C4DEFF;
    --heat-5: #FFFFFF;
    --green: #4CC38A;
    --red: #FF8A7A;
    --ink-55: rgb(233 236 245 / 0.5);
    --ink-40: rgb(233 236 245 / 0.3);
    --ink-16: rgb(233 236 245 / 0.14);
    --ink-06: rgb(233 236 245 / 0.06);
    --halo: rgb(156 196 255 / 0.3);
    --green-bg: rgb(76 195 138 / 0.16);
    --amber-bg: rgb(242 169 0 / 0.18);
    --red-bg: rgb(255 138 122 / 0.16);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 30px -16px rgb(0 0 0 / 0.8);
    --shadow-high: 0 2px 8px rgb(0 0 0 / 0.4), 0 32px 60px -28px rgb(0 0 0 / 0.9);
    --logo-filter: brightness(0) invert(0.92);
  }
}

@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #E9ECF5;
    --enamel: #070A24;
    --sheet: #11163F;
    --sheet-2: #0C1033;
    --sheet-hover: #1B2157;
    --steel: #A6AEC2;
    --bond: #9CC4FF;
    --heat-1: #2E6FD9;
    --heat-2: #4F93F2;
    --heat-3: #86BBFF;
    --heat-4: #C4DEFF;
    --heat-5: #FFFFFF;
    --green: #4CC38A;
    --red: #FF8A7A;
    --ink-55: rgb(233 236 245 / 0.5);
    --ink-40: rgb(233 236 245 / 0.3);
    --ink-16: rgb(233 236 245 / 0.14);
    --ink-06: rgb(233 236 245 / 0.06);
    --halo: rgb(156 196 255 / 0.3);
    --green-bg: rgb(76 195 138 / 0.16);
    --amber-bg: rgb(242 169 0 / 0.18);
    --red-bg: rgb(255 138 122 / 0.16);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 30px -16px rgb(0 0 0 / 0.8);
    --shadow-high: 0 2px 8px rgb(0 0 0 / 0.4), 0 32px 60px -28px rgb(0 0 0 / 0.9);
    --logo-filter: brightness(0) invert(0.92);
  }
}


/* 03 Base ----------------------------------------------------------------- */

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

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.55;
  font-synthesis: none;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote,
pre {
  margin: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

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

a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.22em;
}

a:hover {
  text-decoration-thickness: 0.14em;
}

strong,
b {
  font-weight: 700;
}

pre {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  background: var(--highlight);
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  font-size: var(--t-small);
  line-height: 1.6;
  white-space: pre-wrap;
}

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

::selection {
  background: var(--blue);
  color: var(--paper);
}

[hidden] {
  display: none !important;
}

/* Gradientes do espectro, definidos uma vez na casca e usados pelos desenhos. */
.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.heat-p1 {
  stop-color: var(--heat-1);
}

.heat-p2 {
  stop-color: var(--heat-2);
}

.heat-p3 {
  stop-color: var(--heat-3);
}

.heat-p4 {
  stop-color: var(--heat-4);
}

.heat-p5 {
  stop-color: var(--heat-5);
}

.light-p1 {
  stop-color: var(--light-1);
}

.light-p2 {
  stop-color: var(--light-2);
}

.light-p3 {
  stop-color: var(--light-3);
}

.light-p4 {
  stop-color: var(--light-4);
}

.light-p5 {
  stop-color: var(--light-5);
}


/* 04 Casca ---------------------------------------------------------------- */

.skip {
  position: absolute;
  top: 0;
  left: var(--margin);
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--text);
  color: var(--surface);
  font-weight: 700;
  transform: translateY(-120%);
}

.skip:focus {
  transform: translateY(0);
}

.dev-band {
  --focus: var(--night);
  --link: var(--night);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--s-4);
  padding: var(--s-1) var(--margin);
  background: var(--amber);
  color: var(--night);
  font-size: var(--t-small);
  font-weight: 600;
}

.header {
  border-bottom: 1px solid var(--divider);
  background: var(--bg);
}

/* Duas linhas (marca e conta em cima, navegação embaixo) ou uma só, quando cabe.
   O arranjo vem de variáveis que o .header troca conforme a largura (mais abaixo). */
.header__inner {
  display: grid;
  grid-template-columns: var(--header-columns, auto minmax(0, 1fr));
  grid-template-areas: var(--header-areas, "brand account" "nav nav");
  align-items: center;
  column-gap: var(--s-3);
  width: 100%;
  max-width: var(--width);
  margin-inline: auto;
  padding-inline: var(--margin);
}

.brand {
  display: inline-flex;
  grid-area: brand;
  align-items: center;
  gap: 0.625rem;
  min-height: 3.5rem;
  color: var(--text);
  text-decoration: none;
}

/* O logo oficial da SEMEQ, sem alteração (no tema escuro, só fica claro). */
.brand__logo {
  flex: none;
  width: auto;
  height: 2.125rem;
  filter: var(--logo-filter);
}

.brand__name {
  padding-left: 0.75rem;
  border-left: 1px solid var(--border);
  color: var(--text-2);
  font-size: var(--t-base);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* No celular o nome do portal não cabe ao lado do logo: fica só para leitores de tela. */
@media (max-width: 35.9375em) {
  .brand__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* As três barras SEMEQ, numa cor só (a do texto): na sala de leitura e no indicador de espera. */
.bars {
  flex: none;
  width: auto;
  max-width: none;
  height: 1.375rem;
  fill: currentColor;
}

/* Navegação: um trilho com o item atual em relevo. */
.nav {
  grid-area: nav;
  margin-inline: var(--nav-bleed, calc(-1 * var(--margin)));
  padding: var(--nav-padding, 0 var(--margin) var(--s-3));
  overflow-x: auto;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav__list {
  display: inline-flex;
  gap: 2px;
  margin: 0;
  padding: 4px;
  border-radius: 999px;
  background: var(--highlight);
  list-style: none;
}

.nav__item {
  display: flex;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--compact-height);
  padding-inline: 0.875rem;
  border-radius: 999px;
  color: var(--text-2);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.nav__link:hover {
  color: var(--text);
}

.nav__link--active,
.nav__link--active:hover {
  background: var(--surface);
  box-shadow: var(--shadow-1);
  color: var(--text);
}

.account {
  display: flex;
  grid-area: account;
  align-items: center;
  justify-self: end;
  gap: var(--s-2);
  min-width: 0;
  max-width: 100%;
}

/* A inicial de quem entrou, numa ficha redonda. */
.account__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--blue);
  color: var(--paper);
  font-weight: 700;
  line-height: 1;
}

.account__who {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  font-size: var(--t-small);
  line-height: 1.25;
  text-align: right;
}

.account__email {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account__role {
  color: var(--text-2);
}

.account__logout {
  display: flex;
  flex: none;
}

/* Botão do tema: só o ícone (o nome fica para leitores de tela). Só aparece com JS. */
.theme {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.theme:hover {
  background: var(--highlight);
  color: var(--text);
}

.theme__sun,
.theme[aria-pressed="true"] .theme__moon {
  display: none;
}

.theme[aria-pressed="true"] .theme__sun {
  display: block;
}

/* No celular o e-mail não cabe ao lado da marca: fica a inicial, e o texto
   continua lá para leitores de tela. */
@media (max-width: 35.9375em) {
  .account__who {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (min-width: 36em) {
  .account__who {
    max-width: 12rem;
    text-align: left;
  }
}

/* Em tela larga, uma linha só, que acompanha a rolagem. */
@media (min-width: 62em) {
  .header {
    --header-columns: auto minmax(0, 1fr) auto;
    --header-areas: "brand nav account";
    --nav-bleed: 0;
    --nav-padding: 0;
    position: sticky;
    top: 0;
    z-index: 30;
  }

  .header__inner {
    column-gap: var(--s-5);
  }
}

/* Menu comprido (mais de dois itens): só cabe na linha do logo em tela larga (notebook em diante).
   Abaixo disso, fica em duas linhas e não prende no topo. */
@media (min-width: 62em) and (max-width: 79.9375em) {
  .header--full {
    --header-columns: auto minmax(0, 1fr);
    --header-areas: "brand account" "nav nav";
    --nav-padding: 0 0 var(--s-3);
    position: static;
  }
}

@media (min-width: 80em) {
  .account__who {
    max-width: 15rem;
  }
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  @media (min-width: 62em) {
    .header {
      background: color-mix(in srgb, var(--bg) 84%, transparent);
      -webkit-backdrop-filter: saturate(1.6) blur(14px);
      backdrop-filter: saturate(1.6) blur(14px);
    }
  }
}

.content {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--content-width, var(--width));
  margin-inline: auto;
  padding: var(--content-padding, var(--s-5) var(--margin) var(--s-7));
}

.content:focus {
  outline: none;
}

.footer {
  --link: var(--text-2);
  border-top: var(--stroke) solid var(--divider);
  color: var(--text-2);
  font-size: var(--t-small);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1) var(--s-5);
  max-width: var(--width);
  margin-inline: auto;
  padding: var(--s-3) var(--margin) var(--s-4);
}

.footer__signature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--touch);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
}


/* 05 Tipografia e texto corrido ------------------------------------------- */

/* Uma família só (Atkinson Hyperlegible Next), em pesos e tamanhos diferentes. */
h1,
.title-1 {
  font-size: var(--h-1);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h2,
.title-2 {
  font-size: var(--h-2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h3,
.title-3 {
  font-size: var(--t-lead);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.lead {
  max-width: var(--measure);
  color: var(--text-2);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.note {
  max-width: var(--measure);
  color: var(--text-2);
  font-size: var(--t-small);
  line-height: 1.5;
}

/* Texto longo (Aviso, Termo, ajuda): HTML simples vindo do Markdown. */
.prose {
  max-width: var(--measure);
  line-height: 1.65;
}

.prose > * + * {
  margin-top: var(--s-3);
}

.prose :where(h2, h3, h4) {
  margin-top: var(--s-6);
  font-size: var(--t-lead);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.prose :where(h3, h4) {
  margin-top: var(--s-5);
  font-size: var(--t-base);
}

.prose :where(ul, ol) {
  padding-left: 1.25rem;
}

.prose :where(li + li) {
  margin-top: var(--s-1);
}

.prose :where(li)::marker {
  color: var(--text-2);
}

.prose :where(table) {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}

.prose :where(th, td) {
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  border-bottom: 1px solid var(--divider);
  text-align: left;
  vertical-align: top;
}


/* 06 Placa, cabeçalho de tela e arranjos ---------------------------------- */

/* Placa: contêiner de conteúdo. Cantos largos, contorno fino e sombra difusa. */
.plate {
  padding: var(--padding);
  border: var(--stroke) solid var(--divider);
  border-radius: var(--radius-plate);
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* Placa que abriga uma tabela. Se a tabela não couber, a rolagem fica dentro da
   placa: a tela nunca rola de lado. */
.plate--flush {
  position: relative;   /* textos só para leitor de tela (posição absoluta) ficam presos aqui e não alargam a página */
  padding: 0;
  overflow: hidden;
  overflow-x: auto;
}

.plate__title {
  margin-bottom: var(--s-3);
}

/* Cabeçalho de tela: título à esquerda, ação principal à direita. */
.screen-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-5);
}

.screen-header__text {
  display: grid;
  flex: 1 1 20rem;
  gap: var(--s-1) var(--s-4);
  min-width: 0;
}

/* Cabeçalho de um documento: o ícone do tipo de arquivo à esquerda do título e do estado. */
.screen-header__text--file {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.screen-header__file {
  --file-width: 2.75rem;
  grid-row: 1 / span 2;
}

.screen-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* Dentro de uma seção, o cabeçalho não empurra o que vem depois. */
.stack > .screen-header {
  margin-bottom: 0;
}

/* Voltar: a seta é desenhada aqui, para o link continuar sendo só texto. */
.back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--touch);
  margin-bottom: var(--s-2);
  color: var(--text-2);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.14s ease;
}

.back::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.2rem;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.14s ease;
}

.back:hover {
  color: var(--text);
}

.back:hover::before {
  transform: translateX(-3px) rotate(45deg);
}

/* Pilha: filhos empilhados com o mesmo vão. */
.stack {
  --stack-gap: var(--s-4);
}

.stack--tight {
  --stack-gap: var(--s-2);
}

.stack--loose {
  --stack-gap: var(--s-6);
}

.stack > * + * {
  margin-top: var(--stack-gap);
}

/* Linha: itens lado a lado, com quebra. */
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}

.row--between {
  justify-content: space-between;
}

.grid-2 {
  display: grid;
  gap: var(--s-5);
}

.column-narrow {
  max-width: 44rem;
}

/* Lista com um painel ao lado: a lista fica com a largura; o painel (ex.: criar usuário), com 22rem.
   No celular, um embaixo do outro. */
.grid-side {
  display: grid;
  gap: var(--s-5);
}

/* Filtros numa linha só, em cima de uma lista: cada campo se ajusta e o botão fica no fim. */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-3);
}

.filters > .field {
  flex: 1 1 8.25rem;
}

.filters > .field:first-of-type {
  flex-grow: 2;
}

/* Num filtro, todo campo é opcional: a marca só faria barulho. */
.filters .field__optional {
  display: none;
}

.filters__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--s-2);
}

/* Quando o campo tem ajuda embaixo, o botão alinha com a caixa do campo, não com a ajuda:
   desce o tanto do rótulo (uma linha de texto mais o vão). */
.filters--top {
  align-items: flex-start;
}

.filters--top > .filters__actions {
  margin-top: calc(1.55em + var(--s-2));
}

@media (max-width: 39.9375em) {
  .screen-header__actions {
    width: 100%;
  }

  .screen-header__actions > * {
    flex: 1 1 auto;
  }
}

@media (min-width: 56em) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

@media (min-width: 64em) {
  .grid-side {
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: start;
  }

  /* O painel vem antes da lista no HTML (no celular, aparece primeiro): em tela larga, fica à esquerda. */
  .grid-side--panel-first {
    grid-template-columns: 22rem minmax(0, 1fr);
  }
}


/* 07 Botões e ícones ------------------------------------------------------ */

/* Ícone de traço: herda a cor do texto e o tamanho da letra.
   max-width: none desfaz o "max-width: 100%" geral dos SVG: com ele, o navegador conta o ícone
   como largura zero ao medir uma etiqueta apertada, e o texto estoura a borda. */
.icon {
  flex: none;
  width: 1.25em;
  max-width: none;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Ícone do tipo de arquivo: uma folha branca com o desenho e a sigla na cor do formato.
   As cores são as que as pessoas já associam a cada tipo; só aparecem aqui. */
:root {
  --fmt-pdf: #C5281C;
  --fmt-doc: #1B55AE;
  --fmt-xls: #1E7A4C;
  --fmt-ppt: #C2410C;
  --fmt-img: #0F766E;
  --fmt-other: #566070;
}

.file {
  --fmt: var(--fmt-other);
  flex: none;
  width: var(--file-width, 1.75rem);
  max-width: none;
  height: auto;
}

.file--pdf {
  --fmt: var(--fmt-pdf);
}

.file--doc {
  --fmt: var(--fmt-doc);
}

.file--xls {
  --fmt: var(--fmt-xls);
}

.file--ppt {
  --fmt: var(--fmt-ppt);
}

.file--img {
  --fmt: var(--fmt-img);
}

.file__sheet {
  fill: var(--paper);
  stroke: var(--night-40);
  stroke-width: 1.5;
}

.file__fold {
  fill: var(--casing);
  stroke: var(--night-40);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.file__drawing {
  fill: none;
  stroke: var(--fmt);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.file__band {
  fill: var(--fmt);
}

.file__abbr {
  fill: var(--paper);
  font-family: var(--font-text);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Botão. Sem variante, é o secundário. Só um .button--primary por tela. */
.button {
  --b-bg: var(--button-bg);
  --b-bg-hover: var(--button-bg-hover);
  --b-text: var(--text);
  --b-border: var(--border);
  --b-border-hover: var(--text);
  --b-shadow: var(--shadow-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--control-height);
  padding: var(--s-1) 1.125rem;
  border: var(--stroke) solid var(--b-border);
  border-radius: var(--radius);
  background: var(--b-bg);
  box-shadow: var(--b-shadow);
  color: var(--b-text);
  font-family: var(--font-text);
  font-size: var(--t-base);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, color 0.14s ease, transform 0.1s ease;
}

.button:hover {
  --b-border: var(--b-border-hover);
  background: var(--b-bg-hover);
}

.button:active {
  box-shadow: none;
  transform: translateY(1px) scale(0.99);
}

.button--primary {
  --b-bg: var(--signal);
  --b-bg-hover: var(--signal-light);
  --b-text: var(--night);   /* sobre laranja, sempre azul-noite (5,6:1), nos dois temas */
  --b-border: transparent;
  --b-border-hover: transparent;
  --b-shadow: var(--shadow-signal);
  --focus: var(--text);
}

.button--primary:hover {
  transform: translateY(-1px);
}

.button--primary:active {
  transform: translateY(1px) scale(0.99);
}

.button--danger {
  --b-bg-hover: var(--red);
  --b-text: var(--red);
  --b-border: var(--red);
  --b-border-hover: var(--red);
}

.button--danger:hover {
  --b-text: var(--surface);
}

.button--subtle {
  --b-bg: transparent;
  --b-bg-hover: var(--highlight);
  --b-border: transparent;
  --b-border-hover: transparent;
  --b-shadow: none;
  padding-inline: var(--s-3);
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.22em;
}

.button--compact {
  min-height: var(--compact-height);
  padding-inline: var(--s-3);
  font-size: var(--t-small);
}

.button--wide {
  width: 100%;
}

/* Desativado: sem cor e tracejado. Vem depois das variantes de propósito. */
.button:disabled,
.button[aria-disabled="true"] {
  --b-bg: transparent;
  --b-bg-hover: transparent;
  --b-text: var(--text-2);
  --b-border: var(--border);
  --b-border-hover: var(--border);
  --b-shadow: none;
  border-style: dashed;
  cursor: not-allowed;
  transform: none;
}


/* 08 Formulários ---------------------------------------------------------- */

.form {
  display: grid;
  gap: 1.125rem;
}

/* Formulário que também é pilha: vale o vão da pilha, sem somar os dois. */
.form.stack {
  gap: 0;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
}

.group {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.group__legend {
  padding: 0;
  font-size: var(--t-lead);
  font-weight: 700;
  line-height: 1.3;
}

.field {
  display: grid;
  gap: var(--s-2);
  min-width: 0;
}

.field__label {
  font-weight: 600;
}

.field__optional {
  color: var(--text-2);
  font-weight: 400;
}

.field__input {
  width: 100%;
  min-height: var(--control-height);
  padding: 0.4375rem 0.75rem;
  border: var(--stroke) solid var(--border-strong);
  border-radius: var(--radius);
  background-color: var(--field-bg);
  color: var(--text);
  font-size: var(--t-base);
  line-height: 1.4;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.field__input::placeholder {
  color: var(--text-2);
  opacity: 1;
}

.field__input:hover {
  border-color: var(--text);
}

/* Foco de campo: contorno na cor do foco e um halo em volta. */
.field__input:focus-visible {
  border-color: var(--focus);
  outline: none;
  box-shadow: 0 0 0 1px var(--focus), 0 0 0 5px var(--halo);
}

.field__input:disabled {
  border-style: dashed;
  background-color: transparent;
  color: var(--text-2);
  cursor: not-allowed;
}

.field__input--area {
  min-height: 6.5rem;
  resize: vertical;
}

/* A ponta do seletor é desenhada com dois gradientes: a CSP não aceita data:. */
.field__input--select {
  padding-right: 2.75rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text) 50%),
    linear-gradient(135deg, var(--text) 50%, transparent 50%);
  background-position: right 1.25rem center, right 0.875rem center;
  background-repeat: no-repeat;
  background-size: 0.375rem 0.375rem;
  -webkit-appearance: none;
  appearance: none;
}

/* Arquivo: uma área tracejada, com o botão de escolher dentro. */
.field__input--file {
  padding: var(--s-3);
  border-style: dashed;
  background-color: var(--surface-2);
  cursor: pointer;
}

.field__input--file::file-selector-button {
  margin-right: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border: var(--stroke) solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.field__input--error,
.field__input--error:hover {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red);
}

.field__help {
  color: var(--text-2);
  font-size: var(--t-small);
  line-height: 1.5;
}

.field__error {
  color: var(--red);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.5;
}

.field__error::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--red);
}

/* Caixa de marcar: a linha inteira (caixa + rótulo) tem 44px de altura. */
.box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--s-3);
}

.box__check {
  display: grid;
  place-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.625rem 0 0;
  border: var(--stroke) solid var(--border-strong);
  border-radius: 7px;
  background: var(--field-bg);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}

.box__check::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  background: var(--surface);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  transform: scale(0);
  transition: transform 0.18s var(--spring);
}

.box__check:hover {
  border-color: var(--text);
}

.box__check:checked {
  border-color: var(--text);
  background: var(--text);
}

.box__check:checked::before {
  transform: scale(1);
}

/* Botão de rádio: a mesma caixa, redonda, com um ponto no lugar do visto. */
.box__check--round {
  border-radius: 50%;
}

.box__check--round::before {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  clip-path: none;
}

/* Grupo de escolha: as opções ficam juntas, sem o vão dos campos. */
.group--choice {
  gap: 0;
}

.box__text {
  min-height: var(--touch);
  padding-block: 0.625rem;
  font-weight: 600;
  cursor: pointer;
}

.box__help {
  grid-column: 2;
  margin-top: calc(-1 * var(--s-1));
  color: var(--text-2);
  font-size: var(--t-small);
  line-height: 1.5;
}

/* Visor do código. Sem JS é um campo só, com os dígitos espaçados. Com JS, o
   campo fica transparente por cima de seis células que mostram cada dígito. */
.display {
  --display-border: var(--border-strong);
  position: relative;
  max-width: 23rem;
}

.display--error {
  --display-border: var(--red);
}

.display__input {
  width: 100%;
  height: 4.25rem;
  padding: 0 var(--s-2);
  border: var(--stroke) solid var(--display-border);
  border-radius: var(--radius);
  background: var(--field-bg);
  color: var(--text);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.32em;
  text-align: center;
  text-indent: 0.32em;
}

.display__input:focus-visible {
  border-color: var(--focus);
  outline: none;
  box-shadow: 0 0 0 1px var(--focus), 0 0 0 5px var(--halo);
}

.display__input--overlaid,
.display__input--overlaid:focus-visible {
  position: absolute;
  inset: 0;
  z-index: 1;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: transparent;
  caret-color: transparent;
  letter-spacing: 0;
  text-indent: 0;
}

.display__input--overlaid::selection {
  background: transparent;
  color: transparent;
}

/* Sete colunas: três células, um vão, três células (o código se lê em dois grupos). */
.display__cells {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) var(--s-2) repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  height: 4.25rem;
}

.display__cell {
  display: grid;
  place-items: center;
  border: var(--stroke) solid var(--display-border);
  border-radius: 14px;
  background: var(--field-bg);
  color: var(--text);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.display__cell--fourth {
  grid-column: 5;
}

/* A célula que acabou de receber um dígito dá um pequeno salto. */
.display__cell--filled {
  border-color: var(--text);
  animation: display-enter 0.24s var(--spring);
}

.display__cell--active {
  border-color: var(--focus);
  box-shadow: 0 0 0 1px var(--focus), 0 0 0 5px var(--halo);
}

@keyframes display-enter {
  from {
    transform: scale(0.84);
  }
}


/* 09 Lâmpada, classificação e plaqueta ------------------------------------ */

/* Lâmpada: uma etiqueta em pílula com um ponto de cor e o estado escrito. */
.lamp {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0.7rem 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--lamp-bg, var(--highlight));
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.lamp__light {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--lamp-color, var(--text-2));
  box-shadow: inset 0 0 0 1.5px var(--lamp-ring, transparent);
  animation: var(--lamp-pulse, none) 1.4s ease-in-out infinite;
}

.lamp--ok {
  --lamp-color: var(--green);
  --lamp-bg: var(--green-bg);
}

.lamp--attention {
  --lamp-color: var(--amber);
  --lamp-bg: var(--amber-bg);
}

.lamp--alert {
  --lamp-color: var(--red);
  --lamp-bg: var(--red-bg);
}

.lamp--inactive {
  --lamp-color: transparent;
  --lamp-ring: var(--text-2);
  color: var(--text-2);
}

.lamp--progress {
  --lamp-color: var(--bond);
  --lamp-pulse: lamp-blink;
}

@keyframes lamp-blink {
  50% {
    opacity: 0.25;
  }
}

/* Classificação: etiqueta com cadeado. O peso cresce com a restrição; cor não entra. */
.classification {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.625rem;
  padding: 0 0.55rem 0 0.45rem;
  border: var(--stroke) solid var(--border);
  border-radius: 8px;
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.classification__icon {
  width: 0.9375rem;
  height: 0.9375rem;
  stroke-width: 2;
}

.classification--restricted {
  border-color: var(--text);
  background: var(--text);
  color: var(--surface);
}

/* Plaqueta da cópia: o código SMQ-XXXX-XXXX, com as três barras em miniatura.
   Tamanho: --badge-size. */
.badge {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "bars code"
    "legend legend";
  align-items: center;
  justify-content: center;
  column-gap: 0.5em;
  max-width: 100%;
  padding: 0.3em 0.8em 0.3em 0.7em;
  border-radius: 0.55em;
  background: var(--badge-bg);
  box-shadow: inset 0 0 0 1px var(--badge-trim, transparent);
  color: var(--badge-text);
  font-size: var(--badge-size, 1.125rem);
  text-align: center;
  vertical-align: middle;
}

.badge::before {
  content: "";
  grid-area: bars;
  width: 0.82em;
  height: 0.62em;
  background: linear-gradient(90deg,
    currentColor 0 26%, transparent 26% 37%,
    currentColor 37% 63%, transparent 63% 74%,
    currentColor 74%);
  transform: skewX(var(--bar));
}

.badge__code {
  display: block;
  grid-area: code;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.12em;
  white-space: nowrap;
  user-select: all;
}

.badge__legend {
  display: block;
  grid-area: legend;
  padding-bottom: 0.125rem;
  font-family: var(--font-text);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  opacity: 0.86;
}

/* Envolva a plaqueta nesta classe quando ela for o assunto da tela (rastreio). */
.badge-large {
  --badge-size: clamp(1.75rem, 1.25rem + 2.6vw, 2.75rem);
}


/* 10 Avisos --------------------------------------------------------------- */

/* Aviso: o ponto e o fundo dizem o tipo; o texto diz o que houve. */
.notices {
  display: grid;
  gap: var(--s-2);
  margin: var(--notices-margin, 0 0 var(--s-5));
}

.notice {
  --notice-tint: var(--highlight);
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: 0.875rem var(--s-4);
  border: var(--stroke) solid var(--divider);
  border-radius: var(--radius);
  background: linear-gradient(var(--notice-tint), var(--notice-tint)), var(--surface);
  box-shadow: inset 3px 0 0 var(--lamp-color, var(--text-2));
  color: var(--text);
}

.notice--ok {
  --lamp-color: var(--green);
  --notice-tint: var(--green-bg);
}

.notice--warning {
  --lamp-color: var(--amber);
  --notice-tint: var(--amber-bg);
}

.notice--error {
  --lamp-color: var(--red);
  --notice-tint: var(--red-bg);
}

.notice__light {
  width: 0.625rem;
  height: 0.625rem;
  margin: 0.45rem 0 0 0.25rem;
}

.notice__text {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
}

.notice__close {
  flex: none;
  align-self: center;
  min-height: var(--touch);
  margin-block: calc(-1 * var(--s-2));
  padding: 0 var(--s-2);
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration-line: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}


/* 11 Espectro ------------------------------------------------------------- */

/* A peça de personalidade do portal. As barras são desenhadas em pé (retângulos
   num SVG que estica) e inclinadas aqui, no ângulo das barras SEMEQ. A cor vem
   de um gradiente vertical em azul: quanto mais alta a barra, mais intensa a ponta. */

/* Palco: a superfície azul-noite onde o espectro acende. Igual nos dois temas.
   Vale para o letreiro das telas de entrada e para o monitor do painel. */
:root {
  --mist-1: rgb(61 139 255 / 0.4);
  --mist-2: rgb(61 139 255 / 0.22);
}

.lobby__marquee,
.monitor {
  --text: var(--paper);
  --text-2: var(--steel-light);
  --divider: var(--paper-16);
  --border: var(--paper-34);
  --highlight: var(--paper-08);
  --focus: var(--paper);
  --link: var(--paper);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--paper-16);
  border-radius: var(--radius-stage);
  background:
    radial-gradient(90% 70% at 86% 118%, var(--mist-1), transparent 62%),
    radial-gradient(70% 60% at 8% -12%, var(--mist-2), transparent 60%),
    linear-gradient(160deg, var(--blue), var(--blue-bg) 52%, var(--night));
  box-shadow: var(--shadow-high);
  color: var(--paper);
}

/* O atraso de cada barra, em passos: a animação corre da esquerda para a direita. */
.step-1 { --n: 1; }
.step-2 { --n: 2; }
.step-3 { --n: 3; }
.step-4 { --n: 4; }
.step-5 { --n: 5; }
.step-6 { --n: 6; }
.step-7 { --n: 7; }
.step-8 { --n: 8; }
.step-9 { --n: 9; }
.step-10 { --n: 10; }

/* Espectro do palco: o desenho de abertura das telas de entrada. Sobe uma vez
   quando a tela abre e pulsa quando a pessoa digita (js/app.js troca a classe). */
.spectrum {
  --spectrum-anim: spectrum-rise;
  --spectrum-time: 0.9s;
  --spectrum-step: 0.05s;
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: var(--spectrum-height, 6.5rem);
  pointer-events: none;
}

.spectrum--pulse-a {
  --spectrum-anim: spectrum-pulse-a;
  --spectrum-time: 0.5s;
  --spectrum-step: 0.022s;
}

.spectrum--pulse-b {
  --spectrum-anim: spectrum-pulse-b;
  --spectrum-time: 0.5s;
  --spectrum-step: 0.022s;
}

.spectrum__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 16px var(--heat-glow));
  transform: skewX(var(--bar));
  transform-origin: 0 100%;
}

.spectrum__bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: var(--spectrum-anim) var(--spectrum-time) var(--spring) backwards;
  animation-delay: calc(var(--spectrum-step) * var(--n, 0));
}

@keyframes spectrum-rise {
  from {
    transform: scaleY(0);
  }
}

@keyframes spectrum-pulse-a {
  40% {
    transform: scaleY(1.24);
  }
}

@keyframes spectrum-pulse-b {
  40% {
    transform: scaleY(1.24);
  }
}

/* Monitor do painel: as leituras do momento e o espectro dos últimos 30 dias.
   Compacto de propósito: a lista de documentos, logo abaixo, é o que a pessoa veio ver.
   No celular, um embaixo do outro; em tela larga, leituras à esquerda e espectro à direita. */
.monitor {
  --monitor-border: var(--s-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3) var(--s-5);
  margin: 0 0 var(--s-4);
  padding: var(--s-4) var(--monitor-border);
}

.monitor__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--s-4);
}

.monitor__title {
  font-size: var(--t-base);
  font-weight: 700;
  line-height: 1.3;
}

.monitor__note {
  color: var(--steel-light);
  font-size: var(--t-small);
}

.monitor__screen {
  display: grid;
  align-content: end;
  gap: var(--s-2);
  min-width: 0;
  margin: 0;
}

/* Gráfico do monitor: uma coluna por dia. Barras em pé (aqui a leitura vale mais que o desenho),
   com a escala à esquerda, o total em cima de cada barra e as datas embaixo. */
.chart {
  --chart-height: 6.5rem;      /* a área das barras */
  --chart-band: 0.375rem;  /* a linha das tentativas negadas */
  --chart-dates: 1.125rem;  /* a linha das datas */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-2);
  padding-top: 1rem;          /* espaço para o número da barra mais alta */
}

.chart__scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: var(--chart-height);
  min-width: 1.5ch;
  color: var(--steel-light);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Altura zero: o número fica centrado na linha que ele nomeia. */
.chart__scale :where(span) {
  height: 0;
  line-height: 0;
}

.chart__days {
  position: relative;
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  column-gap: clamp(1px, 0.35vw, 5px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* As linhas da escala: teto, meio e base. */
.chart__days::before {
  position: absolute;
  inset: 0 0 auto;
  height: var(--chart-height);
  background:
    linear-gradient(var(--paper-16), var(--paper-16)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--paper-16), var(--paper-16)) 0 50% / 100% 1px no-repeat,
    linear-gradient(var(--paper-34), var(--paper-34)) 0 100% / 100% 1px no-repeat;
  content: "";
  pointer-events: none;
}

.chart__day {
  display: grid;
  grid-template-rows: var(--chart-height) var(--chart-band) var(--chart-dates);
  row-gap: 3px;
  min-width: 0;
}

.chart__column {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-width: 0;
}

.chart__bar {
  flex: 1 1 auto;
  height: var(--height, 0%);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(to top, var(--light-1), var(--light-3));
  transform-origin: 50% 100%;
  animation: spectrum-rise 0.7s var(--spring) backwards;
  animation-delay: calc(0.03s * var(--n, 0));
}

.chart__day:hover .chart__bar {
  background: linear-gradient(to top, var(--light-2), var(--light-5));
}

.chart__value {
  position: absolute;
  bottom: calc(var(--height, 0%) + 3px);
  left: 50%;
  display: none;
  color: var(--paper);
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
}

.chart__band {
  display: flex;
}

.chart__denied {
  flex: 1 1 auto;
  border-radius: 2px;
  background: var(--red-light);
}

.chart__date {
  color: var(--steel-light);
  font-size: 0.75rem;
  line-height: var(--chart-dates);
  white-space: nowrap;
}

.chart__day:last-child .chart__date {
  justify-self: end;
}

.chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  color: var(--steel-light);
  font-size: var(--t-small);
  line-height: 1.3;
}

.chart__key {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.chart__key::before {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 2px;
  background: var(--light-2);
  content: "";
}

.chart__key--denied::before {
  height: 0.25rem;
  background: var(--red-light);
}

/* A altura de cada barra, em passos de 5% do teto da escala (grafico.NIVEIS). */
.height-1 { --height: 5%; }
.height-2 { --height: 10%; }
.height-3 { --height: 15%; }
.height-4 { --height: 20%; }
.height-5 { --height: 25%; }
.height-6 { --height: 30%; }
.height-7 { --height: 35%; }
.height-8 { --height: 40%; }
.height-9 { --height: 45%; }
.height-10 { --height: 50%; }
.height-11 { --height: 55%; }
.height-12 { --height: 60%; }
.height-13 { --height: 65%; }
.height-14 { --height: 70%; }
.height-15 { --height: 75%; }
.height-16 { --height: 80%; }
.height-17 { --height: 85%; }
.height-18 { --height: 90%; }
.height-19 { --height: 95%; }
.height-20 { --height: 100%; }

/* O total em cima da barra só aparece quando a coluna tem largura para o número. */
@media (min-width: 40em) {
  .chart__value {
    display: block;
  }

}

/* Leituras: o número e, ao lado, o que ele conta. */
.monitor__readings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin: 0;
}

.reading {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--paper-16);
  border-radius: var(--radius);
  background: var(--paper-08);
}

.reading :where(dt) {
  order: 2;
  color: var(--steel-light);
  font-size: var(--t-small);
  line-height: 1.25;
}

.reading :where(dd) {
  flex: none;
  min-width: 1.5ch;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.reading--attention :where(dd) {
  color: var(--amber);
}

.reading--alert :where(dd) {
  color: var(--red-light);
}

@media (min-width: 56em) {
  .monitor {
    --monitor-border: var(--s-5);
    grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
    grid-template-areas:
      "top top"
      "readings screen";
    align-items: stretch;
  }

  .monitor__top {
    grid-area: top;
  }

  .monitor__screen {
    grid-area: screen;
  }

  .monitor__readings {
    grid-area: readings;
    align-content: start;
  }

  .chart {
    --chart-height: 7.5rem;
  }
}

/* Fila do painel: os documentos que esperam uma ação de quem está olhando, com o botão de cada um. */
.queue {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.queue__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-4);
}

.queue__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.queue__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--amber), var(--shadow-1);
}

.queue__text {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.queue__name {
  display: -webkit-box;
  overflow: hidden;
  font-weight: 700;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Sinal de acessos: o mesmo espectro, em miniatura, para um documento só.
   Barra para cima é acesso; com um traço solto em cima é download; para baixo
   e em vermelho é tentativa negada. Trinta barras: uma por dia. */
.signal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1);
  min-width: 0;
  container-type: inline-size;
}

/* A inclinação empurra a ponta das barras para a direita: o desenho fica um pouco mais
   estreito que a caixa, para a última barra não invadir a coluna vizinha. */
.signal__svg {
  width: calc(100% - 0.75rem);
  height: 2.75rem;
  overflow: visible;
  transform: skewX(var(--bar));
  transform-origin: 0 100%;
}

/* Num espaço largo (a página do documento), o sinal cresce para as barras não ficarem achatadas. */
@container (min-width: 34rem) {
  .signal__svg {
    width: calc(100% - 1.25rem);
    height: 4.5rem;
  }
}

.signal__floor {
  fill: var(--border);
}

.signal__denied {
  fill: var(--red);
}

.signal__top {
  fill: var(--text);
}

.signal__label {
  color: var(--text-2);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

/* Legenda do sinal: três amostras pequenas com o nome de cada barra. */
.signal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-5);
  margin: 0;
  padding: 0;
  color: var(--text-2);
  font-size: var(--t-small);
  list-style: none;
}

.signal-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.signal-legend__sample {
  flex: none;
  width: 1.125rem;
  height: 1.5rem;
  overflow: visible;
  transform: skewX(var(--bar));
}

/* Escala: uma régua de vinte gomos inclinados para uma medida real (ex.: páginas conferidas). */
.scale {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
  width: var(--scale-width, 14rem);
  max-width: 100%;
  vertical-align: middle;
}

.scale__svg {
  width: calc(100% - 0.25rem);
  height: 0.75rem;
  overflow: visible;
  transform: skewX(var(--bar));
}

.scale__track {
  fill: var(--divider);
}

.scale__level {
  fill: var(--text);
}

.scale__label {
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}


/* 12 Tabela, ficha e paginação -------------------------------------------- */

/* Tabela: em telas estreitas cada linha vira um bloco e cada célula mostra o
   nome da coluna, lido de data-label. Os :where() mantêm a especificidade em
   uma classe, para que .table__num e companhia sempre vençam. */
.table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.table :where(th, td) {
  padding: 0.625rem var(--s-3);
  text-align: left;
  vertical-align: middle;
}

.table :where(th:first-child, td:first-child) {
  padding-left: var(--padding);
}

.table :where(th:last-child, td:last-child) {
  padding-right: var(--padding);
}

.table :where(thead th) {
  padding-block: var(--s-3);
  border-bottom: var(--stroke) solid var(--divider);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--t-small);
  font-weight: 600;
  vertical-align: bottom;
}

.table :where(tbody tr + tr) > :where(th, td) {
  border-top: 1px solid var(--divider);
}

/* Linha que abre um grupo da tabela (o dia, o tipo, o estado): faixa discreta com o nome e a contagem. */
.table__group,
.table__group:hover {
  background: var(--surface-2);
}

.table__group > th {
  padding-block: var(--s-2);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  font-size: var(--t-small);
  font-weight: 700;
}

.table__count {
  margin-left: var(--s-2);
  color: var(--text-2);
  font-weight: 400;
}

/* Título da linha com o ícone do tipo de arquivo ao lado. */
.table__file {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

/* O título da linha: o link fica na cor do texto, não na cor de link. */
.table__main {
  --link: var(--text);
  min-width: 15rem;   /* título ou e-mail nunca é espremido a ponto de quebrar letra por letra */
  font-weight: 600;
}

.table__num {
  text-align: right;
  white-space: nowrap;
}

/* Coluna com e-mail ou data e hora: largura mínima para o texto não quebrar em pedaços. */
.table__medium {
  min-width: 11rem;
}

.table__actions {
  padding-block: var(--s-1);
  text-align: right;
  white-space: nowrap;
}

/* Mais de uma ação na mesma linha (alterar expiração, reenviar convite, revogar). */
.table__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-2);
}

/* Conferência da liberação: uma caixa de confirmar por pessoa. Com várias, cada uma na sua moldura. */
.people {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.person {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}

.people--several .person {
  padding: var(--s-3) var(--s-4) var(--s-1);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
}

.person__email {
  font-weight: 700;
}

.person__domain :where(strong) {
  font-size: var(--t-lead);
}

.table__signal {
  width: 15.5rem;     /* cabe "Sem acessos nos últimos 30 dias" numa linha; o resto fica para o título */
  min-width: 15.5rem;
}

/* Em tela larga, a linha sob o cursor acende. */
@media (min-width: 64em) {
  .table :where(tbody tr) {
    transition: background-color 0.12s ease;
  }

  .table :where(tbody tr:hover) {
    background: var(--highlight);
  }
}

/* Até 1023px (celular e tablet) a tabela vira lista de blocos: com sete ou oito
   colunas, é mais fácil de ler do que rolar de lado. */
@media (max-width: 63.9375em) {
  .table :where(thead) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .table,
  .table :where(tbody, tr, th, td) {
    display: block;
  }

  /* Na lista de blocos, a plaqueta divide a linha com o nome da coluna: fica um pouco menor para caber. */
  .table {
    --badge-size: 0.9375rem;
  }

  .table :where(tbody tr) {
    padding: var(--s-4) var(--padding);
  }

  .table :where(tbody tr + tr) {
    border-top: var(--stroke) solid var(--divider);
  }

  .table :where(tbody tr + tr) > :where(th, td) {
    border-top: 0;
  }

  .table :where(tbody th, tbody td) {
    padding: var(--s-1) 0;
  }

  .table :where(td[data-label]) {
    display: grid;
    grid-template-columns: minmax(6.5rem, 34%) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--s-3);
  }

  .table :where(td[data-label])::before {
    content: attr(data-label);
    padding-top: 0.125rem;
    color: var(--text-2);
    font-size: var(--t-small);
  }

  .table :where(td[data-label]) > * {
    grid-column: 2;
    justify-self: start;   /* etiqueta e lâmpada ficam do tamanho do texto, sem esticar como um campo */
  }

  .table :where(td:empty) {
    display: none;        /* coluna sem valor nesta linha não deixa um vão */
  }

  .table__num,
  .table__actions {
    text-align: left;
    white-space: normal;
  }

  .table__signal {
    width: auto;
    min-width: 0;
  }

  .table__signal > .signal {
    justify-self: stretch;
  }

  .table__medium {
    min-width: 0;
  }

  .table__main {
    min-width: 0;
    font-size: var(--t-lead);
  }
}

/* Atalhos: filtros de um clique acima de uma lista (assuntos da auditoria). */
.shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.shortcuts__item {
  display: inline-flex;
  align-items: center;
  min-height: var(--compact-height);
  padding: var(--s-1) 0.875rem;
  border: var(--stroke) solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.shortcuts__item:hover {
  border-color: var(--text);
}

.shortcuts__item--active {
  border-color: var(--text);
  background: var(--text);
  color: var(--surface);
}

/* Registro da trilha: a lâmpada diz o tipo, a frase diz o que houve, os dados técnicos ficam recolhidos. */
.table--records :where(th, td) {
  vertical-align: top;
}

.record {
  min-width: 18rem;
  font-weight: 400;
}

/* Em tela larga, as colunas da auditoria têm largura estável e a frase fica com o espaço que sobra. */
@media (min-width: 64em) {
  .table--records {
    table-layout: fixed;
  }

  .table--records :where(thead th:nth-child(1)) {
    width: 13rem;
  }

  .table--records :where(thead th:nth-child(3)) {
    width: 17rem;
  }

  .table--records :where(thead th:nth-child(4)) {
    width: 12rem;
  }
}

/* Tudo numa linha (a etiqueta, a frase e o atalho dos dados técnicos): cabem mais registros na tela.
   Ao abrir os dados técnicos, eles descem para uma linha própria. */
.record__sentence {
  display: inline;
  margin-left: var(--s-2);
}

.record__technical {
  display: inline-block;
  margin-left: var(--s-2);
  color: var(--text-2);
  font-size: var(--t-small);
  vertical-align: baseline;
}

.record__technical > summary {
  display: inline-block;
  padding-block: 0.125rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.record__technical[open] {
  display: block;
  margin: var(--s-1) 0 0;
  color: var(--text);
}

/* Ficha: pares de nome e valor. */
.card {
  margin: 0;
}

.card__row {
  display: grid;
  grid-template-columns: minmax(7rem, 34%) minmax(0, 1fr);
  column-gap: var(--s-4);
  padding-block: 0.625rem;
}

.card__row + .card__row {
  border-top: 1px solid var(--divider);
}

/* Ficha comprida numa placa larga: em duas colunas, ocupa metade da altura. */
@media (min-width: 56em) {
  .card--columns {
    column-count: 2;
    column-gap: var(--s-7);
  }

  .card--columns > .card__row {
    break-inside: avoid;
  }
}

.card :where(dt) {
  padding-top: 0.125rem;
  color: var(--text-2);
  font-size: var(--t-small);
}

.card :where(dd) {
  min-width: 0;
  font-weight: 600;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.pagination__position {
  color: var(--text-2);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
}


/* 13 Vazio, carregando, detalhes e diálogo -------------------------------- */

/* Vazio: nada por aqui ainda. O espectro em repouso (só o chão de ruído) é o desenho. */
.empty {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-7) var(--padding);
  border: var(--stroke) dashed var(--border);
  border-radius: var(--radius-plate);
  text-align: center;
}

.empty__signal {
  width: 9rem;
  height: 2.25rem;
  margin-bottom: var(--s-2);
  overflow: visible;
  transform: skewX(var(--bar));
}

.empty__bar {
  fill: var(--border);
}

.empty__text {
  max-width: 46ch;
  color: var(--text-2);
}

/* Carregando: as três barras da marca piscam em sequência. */
.loading {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: 600;
}

.bars--loading {
  --bars-pulse: bars-pulse;
  color: var(--bond);
}

.bars__bar {
  animation: var(--bars-pulse, none) 1.2s ease-in-out infinite;
}

.bars__bar--2 {
  animation-delay: 0.15s;
}

.bars__bar--3 {
  animation-delay: 0.3s;
}

@keyframes bars-pulse {
  0%,
  60%,
  100% {
    opacity: 0.25;
  }

  30% {
    opacity: 1;
  }
}

/* Detalhes: texto completo que abre no lugar, sem sair da tela. */
.details {
  border-top: 1px solid var(--divider);
}

/* Bloco recolhível que também é placa (a busca da auditoria): respiro justo, do tamanho de uma barra. */
.details.plate {
  padding-block: var(--s-1);
}

.details__summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--touch);
  padding-block: var(--s-2);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.details__summary::-webkit-details-marker {
  display: none;
}

.details__summary::before {
  content: "";
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform 0.2s var(--spring);
}

.details[open] > .details__summary::before {
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
  transform: rotate(180deg);
}

.details__body {
  padding-block: var(--s-3) var(--s-2);
}

/* Diálogo de confirmação (criado por app.js a partir de data-confirm). */
.dialog {
  width: min(28rem, calc(100vw - 2rem));
  padding: var(--s-5);
  border: 1px solid var(--divider);
  border-radius: var(--radius-plate);
  background: var(--surface);
  box-shadow: var(--shadow-high);
  color: var(--text);
}

/* O véu: a cor vai por extenso (a única fora dos tokens) porque nem todo navegador
   entrega as variáveis da página ao ::backdrop. */
.dialog::backdrop {
  background: rgb(6 9 32 / 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.dialog__text {
  font-size: var(--t-lead);
  font-weight: 600;
  line-height: 1.45;
}

.dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

/* Texto longo numa janela (Termo e Aviso na tela de aceite): cabeça e botão fixos, corpo rola. */
.dialog--text {
  width: min(48rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
}

.dialog--text[open] {
  display: flex;
  flex-direction: column;
}

.dialog__head {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-5) var(--s-5) var(--s-3);
  border-bottom: 1px solid var(--divider);
}

.dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  overflow-y: auto;
  padding: var(--s-4) var(--s-5);
  overscroll-behavior: contain;
}

.dialog--text .dialog__actions {
  margin-top: 0;
  padding: var(--s-3) var(--s-5) var(--s-4);
  border-top: 1px solid var(--divider);
}


/* 14 Portaria e tela de erro ---------------------------------------------- */

/* Portaria: as telas de entrada. O palco (letreiro com a foto de fábrica, a marca SEMEQ,
   o título da tela e o que o portal garante) e uma placa com o formulário.
   No celular, um embaixo do outro. */
.lobby {
  display: grid;
  gap: var(--s-5);
  padding-bottom: var(--s-5);
}

.lobby__marquee {
  --measure: 30rem;
  display: grid;
  grid-template-rows: auto 1fr auto auto;   /* marca, título (encostado embaixo), lide, garantias */
  gap: var(--s-3);
  min-height: 15rem;
  padding: var(--s-5);
  /* A foto, com dois véus azuis por cima: o texto branco lê bem em qualquer ponto dela. */
  background:
    linear-gradient(180deg, rgb(12 17 61 / 0.05), rgb(12 17 61 / 0.38) 45%, rgb(12 17 61 / 0.86)),
    linear-gradient(115deg, rgb(11 74 156 / 0.4), rgb(11 74 156 / 0)),
    url("../img/entrance.webp") 62% center / cover no-repeat,
    var(--blue-bg);
}

/* A marca do palco: o logo oficial, em branco, e o nome do portal. */
.stage-brand {
  display: grid;
  justify-items: start;
  gap: var(--s-2);
  max-width: none;
}

.stage-brand__logo {
  width: auto;
  height: clamp(2.5rem, 1.6rem + 3vw, 3.75rem);
  filter: brightness(0) invert(1);
}

.stage-brand__name {
  color: var(--paper);
  font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* Nas telas de entrada a marca já está no palco: a do cabeçalho sai, para não aparecer duas vezes. */
body:has(.stage-brand) .header .brand {
  visibility: hidden;
}

/* No celular o formulário precisa aparecer logo: as garantias só entram quando há largura. */
.stage-guarantees {
  display: none;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
}

.stage-guarantees :where(li) {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--paper-16);
  border-radius: 999px;
  background: rgb(12 17 61 / 0.5);
  color: var(--paper);
  font-size: var(--t-small);
  line-height: 1.3;
}

.stage-guarantees .icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--light-3);
}

.lobby__title {
  align-self: end;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--paper-34);
  font-size: var(--d-0);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.lobby__marquee :where(strong, b, a) {
  color: var(--paper);
}

.lobby__plate {
  display: grid;
  align-content: start;
  gap: var(--s-4);
  width: 100%;
  box-shadow: var(--shadow-high);
}

.lobby__others {
  display: grid;
  justify-items: start;
  gap: var(--s-1);
  padding-top: var(--s-3);
  border-top: 1px solid var(--divider);
}

@media (min-width: 56em) {
  .lobby {
    grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 27rem);
    column-gap: var(--s-6);
    padding-block: 0 var(--s-4);
  }

  .lobby__marquee {
    min-height: clamp(26rem, calc(100dvh - 13rem), 38rem);
    padding: var(--s-6) var(--s-7);
  }

  .lobby__plate {
    align-self: center;
  }
}

@media (min-width: 40em) {
  .stage-guarantees {
    display: flex;
  }
}

@media (min-width: 40em) and (max-width: 55.99em) {
  .lobby__marquee {
    min-height: 22rem;
  }
}

/* Aceite: os textos são o centro da tela. Em cima, uma faixa curta do palco diz onde a pessoa está;
   embaixo, cada texto inteiro numa caixa com rolagem, com a marcação logo abaixo dele. */
.acceptance {
  display: grid;
  gap: var(--s-4);
  max-width: 76rem;
  margin-inline: auto;
  padding-bottom: var(--s-5);
}

.lobby__marquee.lobby__marquee--band {
  grid-template-rows: none;
  gap: var(--s-2);
  min-height: 0;
  padding: var(--s-5);
}

.lobby__marquee--band .lobby__title {
  align-self: auto;
  padding-bottom: var(--s-3);
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
}

.acceptance__account {
  color: var(--steel-light);
}

.acceptance__summary {
  max-width: none;
}

.acceptance__texts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.terms {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--divider);
  border-radius: var(--radius-plate);
  background: var(--surface);
}

.terms__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--divider);
}

.terms__head > .icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--link);
}

.terms__title {
  font-size: var(--t-lead);
  line-height: 1.25;
}

/* O texto: a maior peça da tela. Rola sozinho, sem levar a página junto. */
.terms__body {
  max-width: none;
  height: clamp(18rem, 52dvh, 34rem);
  overflow-y: auto;
  padding: var(--s-4) var(--s-5);
  overscroll-behavior: contain;
}

.terms__body:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.terms__acceptance {
  padding: var(--s-1) var(--s-4);
  border-top: 1px solid var(--divider);
  background: var(--highlight);
}

@media (min-width: 56em) {
  .lobby__marquee.lobby__marquee--band {
    padding: var(--s-5) var(--s-6);
  }
}

/* Erro: o número grande, no azul SEMEQ. */
.error {
  display: grid;
  justify-items: start;
  gap: var(--s-3);
  max-width: 40rem;
  padding-block: var(--s-5) var(--s-7);
}

.error__code {
  color: var(--link);
  font-size: clamp(5rem, 3rem + 11vw, 9rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
}


/* 15 Fichas de documento (lista do cliente) -------------------------------- */

/* Cada documento liberado é uma ficha com a folha em miniatura na capa: o canto
   dobrado e as linhas a 28 graus lembram a marca d'água que a pessoa vai ver.
   A ficha inteira abre o documento. */
.sheets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr));
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sheet {
  --sheet-rotation: -5deg;
  --sheet-lift: 0px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border: 1px solid var(--divider);
  border-radius: var(--radius-plate);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s ease, transform 0.2s var(--spring), border-color 0.2s ease;
}

.sheet:hover,
.sheet:focus-within {
  --sheet-rotation: 0deg;
  --sheet-lift: -4px;
  border-color: var(--border);
  box-shadow: var(--shadow-high);
  transform: translateY(-3px);
}

.sheet__cover {
  display: grid;
  grid-row: var(--cover-rows, auto);
  place-items: center;
  min-height: var(--cover-height, 7.5rem);
  border: 0 solid var(--divider);
  border-right-width: var(--cover-divider-side, 0);
  border-bottom-width: var(--cover-divider-base, 1px);
  background:
    repeating-linear-gradient(118deg, transparent 0 14px, var(--highlight) 14px 28px),
    var(--surface-2);
}

/* O ícone do tipo de arquivo, com sombra; endireita quando a ficha recebe o cursor. */
.sheet__shadow {
  display: grid;
  filter: drop-shadow(0 8px 8px var(--night-16));
  transform: translateY(var(--sheet-lift)) rotate(var(--sheet-rotation)) scale(var(--sheet-scale, 1));
  transition: transform 0.28s var(--spring);
}

.sheet__file {
  --file-width: 3.75rem;
}

.sheet__body {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-3) var(--s-4) 0;
}

.sheet__type {
  color: var(--text-2);
  font-size: var(--t-small);
  font-weight: 600;
}

.sheet__title {
  font-size: var(--sheet-title, 1.1875rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.sheet__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.sheet__expiry {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-2);
  font-size: var(--t-small);
}

.sheet__action {
  padding: var(--s-3) var(--s-4) var(--s-4);
}

/* O botão cobre a ficha inteira (por isso não se move sob o cursor: o movimento é da ficha). */
.sheet__button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-plate);
}

.sheet__button:hover,
.sheet__button:active {
  transform: none;
}

/* Um documento só: a ficha deita e ganha destaque. */
@media (min-width: 40em) {
  .sheet--single {
    --cover-rows: 1 / span 2;
    --cover-height: 11rem;
    --cover-divider-side: 1px;
    --cover-divider-base: 0;
    --sheet-scale: 1.25;
    --sheet-title: var(--h-2);
    grid-column: 1 / -1;
    grid-template-columns: 12rem minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    max-width: 48rem;
  }
}


/* 16 Sala de leitura ------------------------------------------------------ */

/* A sala é escura de ponta a ponta; só a página do documento é clara.
   Aqui os papéis se invertem e os componentes acompanham. */
:root {
  --pitch: #060920;
  --shadow-page: 0 0 0 1px var(--paper-16), 0 28px 60px -28px rgb(0 0 0 / 0.9);
}

.room {
  /* Cores fixas: a sala é igual nos temas claro e escuro. */
  --bg: var(--pitch);
  --surface: var(--night);
  --surface-2: var(--night);
  --text: var(--paper);
  --text-2: var(--steel-light);
  --border: var(--paper-34);
  --border-strong: var(--paper-34);
  --divider: var(--paper-16);
  --highlight: var(--paper-08);
  --focus: var(--paper);
  --link: var(--paper);
  --button-bg: transparent;
  --button-bg-hover: var(--paper-16);
  --badge-bg: var(--paper-08);
  --badge-text: var(--paper);
  --badge-trim: var(--paper-34);
  --badge-size: clamp(1rem, 4.6vw, 1.25rem);
  --content-width: none;
  --content-padding: 0;
  --notices-margin: var(--s-4) var(--margin) 0;
  background: var(--bg);
  color: var(--text);
}

.room__bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "brand copy close"
    "granted granted granted";
  align-items: center;
  column-gap: var(--s-3);
  padding: var(--s-2) var(--margin) var(--s-1);
  border-bottom: 1px solid var(--divider);
  background: var(--night);
}

.room__brand {
  display: flex;
  grid-area: brand;
  color: var(--paper);
}

.room__copy {
  display: flex;
  grid-area: copy;
  min-width: 0;
}

.room__granted {
  grid-area: granted;
  padding-block: var(--s-1);
  overflow: hidden;
  color: var(--text-2);
  font-size: var(--t-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room__email {
  color: var(--text);
  font-weight: 600;
}

.room__close {
  grid-area: close;
}

/* O fio de leitura: enche conforme a pessoa rola as páginas. Só onde o navegador
   liga animação à rolagem; nos outros, não aparece. */
.room__thread {
  display: none;
}

@supports (animation-timeline: scroll()) {
  .room__thread {
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--light-1), var(--light-3) 60%, var(--light-5));
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: room-thread 1ms linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes room-thread {
  to {
    transform: scaleX(1);
  }
}

.room__body {
  display: grid;
  justify-items: center;
  gap: var(--s-5);
  padding-block: var(--s-6) var(--s-7);
}

.room__head {
  display: grid;
  gap: var(--s-2);
  width: 100%;
  max-width: 56rem;
  padding-inline: var(--margin);
}

.room__title {
  font-size: var(--h-2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.room__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}

.room__total {
  color: var(--text-2);
  font-size: var(--t-small);
}

.room__pages {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  width: 100%;
}

/* Página do documento: a imagem que o servidor entrega, já com a marca d'água. */
.page {
  display: block;
  width: 100%;
  max-width: 56rem;
  height: auto;
  /* Enquanto a imagem não chega, a folha mostra um hachurado no ângulo da marca d'água:
     quem lê percebe que a página está carregando, e não em branco. */
  background:
    repeating-linear-gradient(118deg, transparent 0 1.5rem, var(--night-06) 1.5rem 3rem),
    var(--paper);
  box-shadow: var(--shadow-page);
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* Página deitada (planilha, slide): pode ocupar mais largura, para a letra da tabela não encolher. */
.page--landscape {
  max-width: 82rem;
}

.room__footer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-2) var(--margin);
  padding-bottom: max(var(--s-2), env(safe-area-inset-bottom));
  border-top: 1px solid var(--divider);
  background: var(--night);
}

.room__notice {
  display: flex;
  flex: 1 1 14rem;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-2);
  font-size: var(--t-small);
  line-height: 1.35;
}

.room__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.room__actions:empty {
  display: none;
}

.room__print {
  display: none;
}

@media (min-width: 48em) {
  .room__bar {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "brand copy granted close";
    column-gap: var(--s-4);
    padding-block: var(--s-2);
  }

  .room__granted {
    text-align: right;
  }

  .room__pages {
    gap: var(--s-5);
    padding-inline: var(--margin);
  }

  .page {
    border-radius: 6px;
  }
}

/* Tela baixa (celular deitado): as barras deixam de ficar presas (e o fio de leitura some com elas). */
@media (max-height: 30em) {
  .room__bar,
  .room__footer {
    position: static;
  }

  .room__thread {
    display: none;
  }
}


/* 17 Guia de estilo (só em desenvolvimento) ------------------------------- */

.guide-section {
  display: grid;
  gap: var(--s-4);
  padding-block: var(--s-6);
  border-top: 1px solid var(--divider);
}

.guide-samples {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  align-items: start;
  gap: var(--s-5) var(--s-4);
}

.guide-sample {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--s-2);
  min-width: 0;
}

.guide-sample--file {
  --file-width: 3.75rem;
}

.guide-sample--wide {
  grid-column: 1 / -1;
  justify-items: stretch;
}

.guide-sample__name {
  color: var(--text-2);
  font-size: var(--t-small);
}

.guide-colors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-color {
  display: grid;
  gap: var(--s-1);
  font-size: var(--t-small);
}

.guide-color__chip {
  height: 4.5rem;
  border: var(--stroke) solid var(--divider);
  border-radius: var(--radius);
}

.guide-color__chip--ink {
  background: var(--ink);
}

.guide-color__chip--enamel {
  background: var(--enamel);
}

.guide-color__chip--sheet {
  background: var(--sheet);
}

.guide-color__chip--signal {
  background: var(--signal);
}

.guide-color__chip--bond {
  background: var(--bond);
}

.guide-color__chip--green {
  background: var(--green);
}

.guide-color__chip--amber {
  background: var(--amber);
}

.guide-color__chip--red {
  background: var(--red);
}

.guide-color__chip--steel {
  background: var(--steel);
}

.guide-color__chip--night {
  background: var(--night);
}

.guide-color__chip--blue {
  background: var(--blue);
}

.guide-color__chip--light-1 {
  background: var(--light-1);
}

.guide-color__chip--light-3 {
  background: var(--light-3);
}

.guide-color__chip--light-5 {
  background: var(--light-5);
}

.guide-color__chip--heat-1 {
  background: var(--heat-1);
}

.guide-color__chip--heat-2 {
  background: var(--heat-2);
}

.guide-color__chip--heat-3 {
  background: var(--heat-3);
}

.guide-color__chip--heat-4 {
  background: var(--heat-4);
}

.guide-color__chip--heat-5 {
  background: var(--heat-5);
}

.guide-letter-0 {
  font-size: var(--d-0);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.028em;
}

.guide-letter-1 {
  font-size: var(--d-1);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.guide-dark {
  padding: var(--padding);
  border-radius: var(--radius);
}

/* O palco fora da portaria: só para mostrar o espectro no guia. */
.guide-stage {
  min-height: 13rem;
}

/* Página simulada: fica no lugar da imagem do documento nas maquetes. */
.page--simulated {
  --text: var(--night);
  --text-2: var(--steel);
  position: relative;
  aspect-ratio: 210 / 297;
  overflow: hidden;
  color: var(--night);
  container-type: inline-size;
}

.page-sim__content {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  gap: 0.6rem;
  gap: 2.4cqw;
  padding: 9% 10%;
  font-size: 0.6rem;
  font-size: 1.9cqw;
  line-height: 1.5;
}

.page-sim__logo {
  width: 26%;
  height: auto;
  margin-bottom: 18%;
}

.page-sim__title {
  font-size: 1.5rem;
  font-size: 5.6cqw;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.page-sim__sub {
  font-size: 0.9rem;
  font-size: 3cqw;
  font-weight: 600;
  line-height: 1.2;
}

.page-sim__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.page-sim__table :where(th, td) {
  padding: 0.35em 0.6em 0.35em 0;
  border-bottom: 1px solid var(--night-16);
  text-align: left;
}

.page-sim__foot {
  position: absolute;
  right: 10%;
  bottom: 5%;
  left: 10%;
  display: flex;
  justify-content: space-between;
  color: var(--steel);
  font-size: 0.5rem;
  font-size: 1.5cqw;
}

.page-sim__watermark {
  position: absolute;
  inset: -22%;
  display: grid;
  align-content: space-around;
  justify-items: center;
  color: var(--night);
  font-size: 0.7rem;
  font-size: 2.2cqw;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0.13;
  pointer-events: none;
  transform: rotate(calc(-1 * var(--tilt)));
}


/* 18 Utilitários ---------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.measure {
  max-width: var(--measure);
}

.num {
  font-variant-numeric: tabular-nums;
}

.no-break {
  white-space: nowrap;
}

.break {
  overflow-wrap: anywhere;
}


/* 19 Movimento ------------------------------------------------------------ */

/* Regra: movimento só quando a tela abre (uma vez) ou em resposta a uma ação.
   Nada fica se mexendo sozinho, fora o que indica espera. */

/* Troca de tela: o cabeçalho fica parado, o item atual do menu desliza até o
   novo e o conteúdo entra subindo. Onde o navegador não tem transição entre
   páginas, a troca é a de sempre. */
@view-transition {
  navigation: auto;
}

.header {
  view-transition-name: header;
}

.nav__link--active {
  view-transition-name: nav-active;
}

.content {
  view-transition-name: content;
}

::view-transition-group(nav-active) {
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.3, 0.8, 0.3, 1);
}

::view-transition-old(content) {
  animation: 0.12s ease-in both screen-exit;
}

::view-transition-new(content) {
  animation: 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) 0.06s both screen-enter;
}

@keyframes screen-exit {
  to {
    opacity: 0;
  }
}

@keyframes screen-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* Recados chegam descendo; a janela abre crescendo. */
.notice[data-notice] {
  animation: message-arrive 0.32s var(--spring) both;
}

@keyframes message-arrive {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.dialog[open] {
  animation: window-open 0.22s var(--spring) both;
}

.dialog[open]::backdrop {
  animation: veil-arrive 0.2s ease both;
}

@keyframes window-open {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
}

@keyframes veil-arrive {
  from {
    opacity: 0;
  }
}

/* Blocos recolhidos (detalhes, dados técnicos) abrem deslizando. */
:root {
  interpolate-size: allow-keywords;
}

details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.24s ease, content-visibility 0.24s allow-discrete;
}

details[open]::details-content {
  block-size: auto;
}


/* 20 Movimento reduzido, alto contraste e impressão ----------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  @view-transition {
    navigation: none;
  }

  .sheet:hover,
  .sheet:focus-within,
  .button--primary:hover {
    transform: none;
  }

  .room__thread {
    display: none !important;
  }
}

@media (forced-colors: active) {
  .box__check {
    -webkit-appearance: auto;
    appearance: auto;
  }

  .box__check::before {
    display: none;
  }

  .lamp__light {
    forced-color-adjust: none;
  }

  .nav__link--active {
    outline: 2px solid CanvasText;
    outline-offset: -2px;
  }
}

@media print {
  body {
    background: none;
  }

  .skip,
  .dev-band,
  .nav,
  .account,
  .theme,
  .notices,
  .footer,
  .pagination,
  .button,
  .monitor,
  .spectrum,
  .stage-brand,
  .stage-guarantees {
    display: none;
  }

  .header {
    position: static;
  }

  .plate,
  .notice,
  .sheet {
    box-shadow: none;
  }

  /* O palco imprime como texto escuro em fundo branco. */
  .lobby__marquee {
    --text-2: var(--steel);
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--night);
  }

  .lobby__marquee :where(strong, b, a) {
    color: var(--night);
  }

  /* A sala não imprime as páginas: a cópia sai pelo download, quando liberado. */
  .room {
    --text: var(--night);
    --text-2: var(--steel);
    --divider: var(--night-16);
    background: none;
    color: var(--night);
  }

  .room__bar,
  .room__footer {
    position: static;
    background: none;
  }

  .room__brand {
    color: var(--night);
  }

  .room__pages,
  .room__actions {
    display: none;
  }

  .room__print {
    display: block;
    padding-inline: var(--margin);
  }
}