/* =============================================================================
   Marca v8 · Guilherme Moraes · "Gesso e REC"
   Claro, feito para ler de óculos. Fundo de gesso, tinta quase preta em quatro
   degraus chapados e UM vermelho só: a luz de gravação (REC), que liga a marca à
   música de onde tudo veio. Títulos em Archivo larga e pesada; texto em Atkinson
   Hyperlegible, desenhada para baixa visão.

   Este arquivo é o mesmo nos três lugares. Mudou aqui, copie para o outro:
     D:\guilherme-site\site\assets\marca.css   (site pessoal e Central)
     D:\licita-dompedro\app\static\marca.css   (Licita)
   As regras em prosa estão em DESIGN.md na raiz de cada repositório.
   ============================================================================= */

:root {
  /* superfícies */
  --gesso: #EFECE6;            /* fundo de página */
  --folha: #FAF9F6;            /* cartão, campo, diálogo, botão claro */
  --poco: #E4E0D8;             /* rebaixo: trilho de abas, lista interna, carregando */

  /* tinta: quatro degraus, todos chapados (nunca transparência em texto) */
  --tinta: #161513;            /* 15,5:1 no gesso (medido na tela). Título e o que se lê primeiro */
  --tinta-2: #45413A;          /* 8,6:1. Texto corrido de apoio */
  --tinta-3: #5C574F;          /* 6,1:1. Metadado, rótulo, placeholder */
  --linha: #D3CEC4;            /* só separação, nunca a única pista de controle */
  --contorno: #7D776D;         /* borda de controle: 3,76:1 no gesso (passa os 3:1) */

  /* o acento: um só */
  --rec: #D0240E;              /* botão primário, pico da sigla, sublinhado. Branco em cima: 5,3:1 */
  --rec-forte: #A81D0B;        /* hover e :active do primário (7,4:1 com branco), link em hover */
  --sobre-rec: #FFFFFF;

  /* estados: sempre acompanhados de palavra, nunca só cor */
  --ok: #1A5E34;        --ok-fundo: #E1EFE2;
  --alerta: #7F4E00;    --alerta-fundo: #F8E9C6;    --alerta-cheio: #EBA21A; /* cheio só como fundo, com tinta */
  --perigo: #A10F35;    --perigo-fundo: #F8E1E2;
  --info: #23449A;      --info-fundo: #E3E9F7;
  --selecao: #F4CFC5;

  /* tipo */
  --f-titulo: 'Archivo', 'Arial Black', 'Segoe UI', system-ui, sans-serif;
  --f-corpo: 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'Atkinson Hyperlegible Mono', 'Cascadia Mono', ui-monospace, monospace;

  /* escala: cada papel uma regra; razão máx/mín ≤ 2,5 nos títulos */
  --t-display: clamp(3.6rem, 1.4rem + 9.4vw, 9.5rem);   /* só o nome MORAES */
  --t-1: clamp(2.4rem, 1.5rem + 3.6vw, 4.5rem);
  --t-2: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  --t-3: clamp(1.25rem, 1.15rem + .45vw, 1.5rem);
  --t-corpo: 1.125rem;          /* 18px: site */
  --t-ferramenta: 1.0625rem;    /* 17px: Central e Licita */
  --t-pequeno: .9375rem;        /* 15px */
  --t-rotulo: .8125rem;         /* 13px: etiqueta e rótulo em caixa alta */
  --t-ferramenta-1: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem);    /* h1 das telas da Central e do Licita */
  --t-ferramenta-2: clamp(1.3rem, 1.2rem + .45vw, 1.6rem);    /* h2 de seção nas ferramentas */

  /* forma: controle de uma linha = pílula; onde se escreve = 14px; contêiner = 24px */
  --r-fio: 2px;
  --r-campo: 14px;
  --r-cartao: 24px;
  --r-pilula: 999px;

  /* sombras: marrom quente, longas, spread negativo. Nada de brilho ou vidro */
  --s-1: 0 1px 2px rgba(56, 44, 28, .06), 0 1px 0 rgba(56, 44, 28, .04);
  --s-2: 0 12px 28px -14px rgba(56, 44, 28, .30);
  --s-3: 0 28px 64px -24px rgba(40, 30, 18, .45);
  --s-rec: 0 10px 22px -10px rgba(208, 36, 14, .50);

  /* espaço (base 4px) */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;
  --margem: clamp(1.25rem, .6rem + 3vw, 4rem);
  --largura: 1240px;
  --medida: 58ch;               /* na Atkinson, 58ch dá uns 78 caracteres por linha */
  --alvo: 44px;
  --topo-h: 72px;

  /* movimento: teto de 300ms em interface, nunca ease-in */
  --rapido: 120ms;
  --base: 180ms;
  --medio: 240ms;
  --dialogo: 280ms;
  --saida: cubic-bezier(0.23, 1, 0.32, 1);
  --meio: cubic-bezier(0.77, 0, 0.175, 1);
  --quique: cubic-bezier(0.34, 1.56, 0.64, 1);   /* UMA vez no site inteiro: a sigla assentando */
}

/* ----------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;                                   /* clip, nunca hidden: não mata o sticky */
  scroll-padding-top: calc(var(--topo-h) + 16px);     /* âncora e foco não somem atrás do topo fixo */
}
body {
  margin: 0;
  background: var(--gesso);
  color: var(--tinta);
  font-family: var(--f-corpo);
  font-size: var(--t-corpo);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-titulo); color: var(--tinta); text-wrap: balance; }
h1 { font-size: var(--t-1); font-weight: 800; font-stretch: 112%; line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-size: var(--t-2); font-weight: 800; font-stretch: 112%; line-height: 1.08; letter-spacing: -0.015em; }
h3 { font-size: var(--t-3); font-weight: 700; line-height: 1.25; letter-spacing: -0.005em; }
a { color: inherit; }
strong, b { font-weight: 700; }
::selection { background: var(--selecao); color: var(--tinta); }

:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.sobre-escuro :focus-visible { outline-color: var(--gesso); }

[hidden] { display: none !important; }

/* mono só onde se pede: <time> inteiro em mono estraga "12/09 às 06:30" (use .num nos números) */
.mono, .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
/* linha de metadados: espaço no lugar do "·" que ficava pendurado no fim da linha no celular */
.meta-linha { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--e-4); row-gap: 2px; }
.conteudo { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--margem); }
.leitura { max-width: var(--medida); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: var(--e-4); top: -80px; z-index: 100;
  padding: 12px 20px; border-radius: var(--r-pilula); background: var(--tinta); color: var(--gesso);
  font-weight: 700; text-decoration: none;
}
.pular:focus { top: var(--e-4); outline-color: var(--rec); }

.ic { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }

/* link dentro de texto: tinta com sublinhado vermelho */
.link {
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--rec);
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
  transition: color var(--base) ease, text-decoration-thickness var(--base) ease;
}
@media (hover: hover) { .link:hover { color: var(--rec-forte); text-decoration-thickness: 3px; } }

/* ------------------------------------------------------------- a sigla */
/* Quatro barras de som. A mais alta é o pico e é a única vermelha. */

.sigla { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; flex: none; }
.sigla i { display: block; width: 4px; border-radius: var(--r-fio); background: var(--tinta); }
.sigla i:nth-child(1) { height: 36%; }
.sigla i:nth-child(2) { height: 74%; }
.sigla i:nth-child(3) { height: 100%; background: var(--rec); }
.sigla i:nth-child(4) { height: 52%; }
.sigla.grande { height: 44px; gap: 6px; }
.sigla.grande i { width: 8px; border-radius: 3px; }
.sobre-escuro .sigla i:not(:nth-child(3)) { background: var(--gesso); }

/* O sinal: as barras viram medidor (validade, prazo). Cheia = tinta; vazia = contorno.
   data-nivel de 0 a 4. Sempre com texto ao lado: a forma ajuda, a palavra decide. */
.sinal { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; flex: none; }
.sinal i { display: block; width: 5px; border-radius: var(--r-fio); box-shadow: inset 0 0 0 1.5px var(--contorno); }
.sinal i:nth-child(1) { height: 40%; }
.sinal i:nth-child(2) { height: 60%; }
.sinal i:nth-child(3) { height: 80%; }
.sinal i:nth-child(4) { height: 100%; }
.sinal[data-nivel="1"] i:nth-child(-n+1),
.sinal[data-nivel="2"] i:nth-child(-n+2),
.sinal[data-nivel="3"] i:nth-child(-n+3),
.sinal[data-nivel="4"] i { background: currentColor; box-shadow: none; }
.sinal { color: var(--tinta); }
.sinal.alerta { color: var(--alerta); }
.sinal.perigo { color: var(--perigo); }

/* -------------------------------------------------------------- botões */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  border-radius: var(--r-pilula); border: 2px solid transparent;
  font-family: var(--f-corpo); font-size: 1.0625rem; font-weight: 700; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--rapido) ease, border-color var(--rapido) ease, color var(--rapido) ease,
              box-shadow var(--base) var(--saida), transform var(--rapido) var(--saida);
}
.botao .ic { width: 20px; height: 20px; }
.botao:active { transform: scale(.97); }
.botao.compacto { min-height: var(--alvo); padding: 0 20px; font-size: 1.0625rem; }
.botao.largo { width: 100%; }
/* desabilitado sem transparência (regra da casa: texto nunca com alfa) */
.botao:disabled, .botao[aria-disabled="true"] {
  background: var(--poco); color: var(--tinta-3); border-color: var(--linha); box-shadow: none;
  cursor: not-allowed; transform: none;
}

.botao-rec { background: var(--rec); color: var(--sobre-rec); }
.botao-claro { background: var(--folha); color: var(--tinta); border-color: var(--contorno); }
.botao-escuro { background: var(--tinta); color: var(--gesso); }
.botao-perigo { background: var(--folha); color: var(--perigo); border-color: var(--perigo); }
.botao-perigo-cheio { background: var(--perigo); color: #FFFFFF; }
.botao-texto { background: transparent; color: var(--tinta); padding: 0 14px; }
@media (hover: hover) {
  .botao-rec:hover:not(:disabled) { background: var(--rec-forte); }
  .botao-claro:hover:not(:disabled) { border-color: var(--tinta); background: #FFFFFF; }
  .botao-escuro:hover:not(:disabled) { background: #2E2B27; }
  .botao-perigo:hover:not(:disabled) { background: var(--perigo-fundo); }
  .botao-perigo-cheio:hover:not(:disabled) { background: #7E0B29; }
  .botao-texto:hover:not(:disabled) { background: var(--poco); }
}

.botao-icone {
  display: inline-grid; place-items: center; flex: none;
  width: 48px; height: 48px; padding: 0;
  border-radius: 50%; border: 2px solid var(--contorno);
  background: var(--folha); color: var(--tinta); cursor: pointer;
  transition: background-color var(--rapido) ease, border-color var(--rapido) ease, color var(--rapido) ease;
}
.botao-icone .ic { width: 22px; height: 22px; }
.botao-icone.compacto { width: var(--alvo); height: var(--alvo); }
.botao-icone.compacto .ic { width: 20px; height: 20px; }
@media (hover: hover) { .botao-icone:hover { border-color: var(--tinta); background: #FFFFFF; } }

/* ------------------------------------------------------- chips e abas */

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--alvo); padding: 0 18px;
  border-radius: var(--r-pilula); border: 2px solid var(--contorno);
  background: var(--folha); color: var(--tinta);
  font-family: var(--f-corpo); font-size: var(--t-pequeno); font-weight: 700; line-height: 1;
  cursor: pointer; user-select: none; white-space: nowrap; text-decoration: none;
  transition: background-color var(--rapido) ease, color var(--rapido) ease, border-color var(--rapido) ease;
}
.chip .ic { width: 18px; height: 18px; }
.chip[aria-pressed="true"], .chip.on { background: var(--tinta); color: var(--gesso); border-color: var(--tinta); }
/* chip ligado é escuro: o anel em tinta com folga de 3px continua visível no gesso (nada de segundo vermelho) */
@media (hover: hover) { .chip:hover:not([aria-pressed="true"]):not(.on) { border-color: var(--tinta); background: #FFFFFF; } }
.chip .conta { font-family: var(--f-mono); font-weight: 500; font-variant-numeric: tabular-nums; }

.abas {
  display: inline-flex; flex-wrap: nowrap; gap: 4px; padding: 4px; max-width: 100%;
  border-radius: var(--r-pilula); background: var(--poco);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.abas::-webkit-scrollbar { display: none; }
.abas > a, .abas > button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--alvo); padding: 0 20px;
  border-radius: var(--r-pilula); border: 2px solid transparent; background: transparent;
  color: var(--tinta-2); font-family: var(--f-corpo); font-size: var(--t-pequeno); font-weight: 700;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--rapido) ease, color var(--rapido) ease, border-color var(--rapido) ease;
}
.abas > [aria-current="page"], .abas > [aria-selected="true"], .abas > [aria-pressed="true"] {
  background: var(--folha); color: var(--tinta); border-color: var(--tinta);
}
.abas > :focus-visible { outline-offset: -5px; }   /* o trilho rola: anel por dentro não é cortado */
@media (hover: hover) { .abas > a:hover, .abas > button:hover { color: var(--tinta); } }
.abas .conta { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- etiquetas */

.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 26px; padding: 2px 10px;
  border-radius: var(--r-pilula); border: 1.5px solid currentColor;
  background: var(--folha); color: var(--tinta-2);
  font-family: var(--f-corpo); font-size: var(--t-rotulo); font-weight: 800; line-height: 1.2;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.etiqueta .ic { width: 14px; height: 14px; }
.etiqueta.nova { background: var(--tinta); color: var(--gesso); border-color: var(--tinta); }
.etiqueta.ok { background: var(--ok-fundo); color: var(--ok); }
.etiqueta.alerta { background: var(--alerta-fundo); color: var(--alerta); }
.etiqueta.hoje { background: var(--alerta-cheio); color: var(--tinta); border-color: var(--alerta-cheio); }
.etiqueta.perigo { background: var(--perigo-fundo); color: var(--perigo); }
.etiqueta.info { background: var(--info-fundo); color: var(--info); }
.etiqueta.rec { background: var(--rec); color: #FFFFFF; border-color: var(--rec); }

/* ---------------------------------------------------- cartão e faixa */

.cartao {
  background: var(--folha);
  border: 1px solid var(--linha);
  border-radius: var(--r-cartao);
  box-shadow: var(--s-1);
  padding: var(--e-5);
}
.faixa-aviso {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-4) var(--e-5); border-radius: var(--r-campo);
  border: 1.5px solid currentColor; font-size: var(--t-pequeno);
}
.faixa-aviso > * { color: var(--tinta); }
.faixa-aviso > .ic { color: inherit; margin-top: 2px; }
.faixa-aviso.alerta { color: var(--alerta); background: var(--alerta-fundo); }
.faixa-aviso.perigo { color: var(--perigo); background: var(--perigo-fundo); }
.faixa-aviso.info { color: var(--info); background: var(--info-fundo); }
.faixa-aviso.ok { color: var(--ok); background: var(--ok-fundo); }

.carregando { border-radius: var(--r-cartao); background: var(--poco); min-height: 120px; }

/* ------------------------------------------------------------- campos */

.campo { display: grid; gap: var(--e-2); min-width: 0; }
.campo > label, .campo > .rotulo-campo {
  font-family: var(--f-corpo); font-size: var(--t-pequeno); font-weight: 700; line-height: 1.3; color: var(--tinta);
}
.campo .ajuda { font-size: var(--t-pequeno); color: var(--tinta-3); }
.campo .erro-campo { font-size: var(--t-pequeno); font-weight: 700; color: var(--perigo); }

.entrada {
  width: 100%; min-height: 52px; padding: 12px 16px;
  border-radius: var(--r-campo); border: 2px solid var(--contorno);
  background: var(--folha); color: var(--tinta);
  font-family: var(--f-corpo); font-size: var(--t-ferramenta); line-height: 1.4;
  transition: border-color var(--rapido) ease;
}
.entrada::placeholder { color: var(--tinta-3); opacity: 1; }
@media (hover: hover) { .entrada:hover { border-color: var(--tinta-2); } }
/* :focus e não :focus-visible: em data e hora o foco vai para o botão interno do calendário e o anel sumia */
.entrada:focus, .entrada:focus-within { outline: 3px solid var(--tinta); outline-offset: 2px; border-color: var(--tinta); }
input[type="search"].entrada::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.entrada::-webkit-datetime-edit-day-field:focus,
.entrada::-webkit-datetime-edit-month-field:focus,
.entrada::-webkit-datetime-edit-year-field:focus,
.entrada::-webkit-datetime-edit-hour-field:focus,
.entrada::-webkit-datetime-edit-minute-field:focus { background: var(--selecao); color: var(--tinta); }
progress, .andamento { accent-color: var(--tinta); }
.trilho { height: 8px; border-radius: var(--r-pilula); background: var(--folha); box-shadow: inset 0 0 0 1px var(--linha); overflow: hidden; }
.trilho > i { display: block; height: 100%; border-radius: inherit; background: var(--tinta); }
.entrada[aria-invalid="true"] { border-color: var(--perigo); }
textarea.entrada { min-height: 104px; resize: vertical; }
select.entrada {
  appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23161513' d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
}
input[type="date"].entrada, input[type="time"].entrada, input[type="number"].entrada { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--tinta); width: 22px; height: 22px; margin: 0; flex: none; }
.marcar { display: inline-flex; align-items: center; gap: 10px; min-height: var(--alvo); cursor: pointer; font-weight: 600; }

/* --------------------------------------------------- aviso flutuante */

.aviso-flutuante {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 90;
  display: flex; align-items: center; gap: var(--e-4);
  /* width: max-content é o que impede a caixa de encolher para 50% da tela e quebrar letra por letra */
  width: max-content; max-width: calc(100vw - 32px); min-height: 56px; padding: 8px 8px 8px 24px;
  overflow-wrap: break-word;
  border-radius: var(--r-pilula); background: var(--tinta); color: var(--gesso);
  box-shadow: var(--s-2); font-weight: 600;
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity var(--medio) var(--saida), transform var(--medio) var(--saida);
}
.aviso-flutuante.visivel { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.aviso-flutuante button {
  min-height: var(--alvo); padding: 0 18px; border-radius: var(--r-pilula);
  border: 2px solid rgba(239, 236, 230, .6); background: transparent; color: var(--gesso);
  font-weight: 700; cursor: pointer; white-space: nowrap;
}
.aviso-flutuante button:focus-visible { outline-color: var(--gesso); }
@media (hover: hover) { .aviso-flutuante button:hover { background: rgba(239, 236, 230, .14); } }

/* ------------------------------------------------------------- diálogo */

dialog.dialogo {
  width: min(38rem, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0;
  border: 1px solid var(--linha); border-radius: var(--r-cartao);
  background: var(--folha); color: var(--tinta); box-shadow: var(--s-3);
}
dialog.dialogo::backdrop { background: rgba(22, 21, 19, .48); }
@media (prefers-reduced-motion: no-preference) {
  dialog.dialogo {
    opacity: 0; transform: scale(.96);
    transition: opacity var(--dialogo) var(--saida), transform var(--dialogo) var(--saida),
                overlay var(--dialogo) allow-discrete, display var(--dialogo) allow-discrete;
  }
  dialog.dialogo[open] { opacity: 1; transform: none; }
  @starting-style { dialog.dialogo[open] { opacity: 0; transform: scale(.96); } }
}

/* ---------------------------------------------------------- topo padrão */

.topo {
  position: sticky; top: 0; z-index: 50;
  background: var(--gesso);            /* chapado: com transparência o texto rolando aparecia por trás */
  border-bottom: 1px solid transparent;
  transition: border-color var(--base) ease;
}
.topo.rolou { border-bottom-color: var(--linha); }
.topo-dentro {
  display: flex; align-items: center; gap: var(--e-4);
  max-width: var(--largura); height: var(--topo-h); margin-inline: auto; padding-inline: var(--margem);
}
.marca-nome {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--alvo);
  font-family: var(--f-titulo); font-size: 1.25rem; font-weight: 800; font-stretch: 112%; letter-spacing: -0.01em;
  color: var(--tinta); text-decoration: none; white-space: nowrap;
}
.menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.menu > a:not(.botao) {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--alvo); padding: 0 16px;
  border-radius: var(--r-pilula); color: var(--tinta-2); font-weight: 700; font-size: 1.0625rem; text-decoration: none; white-space: nowrap;
  transition: background-color var(--rapido) ease, color var(--rapido) ease;
}
@media (hover: hover) { .menu > a:not(.botao):hover { background: var(--poco); color: var(--tinta); } }
.menu > a:not(.botao)[aria-current="page"],
.menu > a:not(.botao)[aria-current="true"] { background: var(--folha); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }
.menu > .botao { margin-left: var(--e-2); }

/* ------------------------------------------------ acessibilidade extra */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
@media (prefers-contrast: more) {
  :root { --tinta-2: #2E2B27; --tinta-3: #3A3631; --contorno: #45413A; --linha: #7D776D; }
}
@media (forced-colors: active) {
  .botao, .chip, .etiqueta, .botao-icone, .entrada, .abas > * { border: 2px solid ButtonText; }
  .sigla i { background: CanvasText; forced-color-adjust: none; }
  /* barra vazia com borda, cheia pintada: o medidor continua dizendo o nível */
  .sinal i { forced-color-adjust: none; background: Canvas; box-shadow: inset 0 0 0 1.5px CanvasText; }
  .sinal[data-nivel="1"] i:nth-child(-n+1), .sinal[data-nivel="2"] i:nth-child(-n+2),
  .sinal[data-nivel="3"] i:nth-child(-n+3), .sinal[data-nivel="4"] i { background: CanvasText; }
  .menu > a[aria-current], .abas > [aria-current], .abas > [aria-selected="true"], .chip[aria-pressed="true"] { outline: 3px solid Highlight; }
}