/* ============================================================================
   Tema "alegre" — a terceira camada, sobre `styles.css` e `tema.css`.
   ============================================================================

   O modelo veio pronto (Varre-Sei Alegre, 22/09/2026): fundo creme com
   pontinhos, tinta roxo-escura em contorno grosso, sombra dura deslocada para
   baixo, cantos bem redondos, Nunito pesada no texto e JetBrains Mono nos
   números. Cartão com faixa de cor no cabeçalho, navegação em pílula, botão
   que afunda quando se aperta.

   A regra das camadas continua: **para voltar atrás, basta remover o <link>**.
   Nenhuma tela foi reescrita; o que muda aqui são os tokens e o desenho dos
   componentes que todas as telas dividem (cartão, botão, campo, tabela,
   diálogo, navegação). Tela nova herda o tema sem ninguém lembrar dele.

   Duas regras da casa que o modelo não podia quebrar, e não quebra:

   - **urgência é palavra antes de ser cor.** As cores vivas reforçam o que a
     etiqueta já diz; o relatório impresso em preto e branco continua legível.
   - **contraste.** Branco sobre o verde e o laranja do modelo não passa na
     conta de legibilidade; nesses botões o texto é a própria tinta, que passa
     com folga. O violeta leva branco, como no modelo.

   As fontes são servidas daqui (`/fontes/`, licença SIL OFL): a política de
   conteúdo do painel só aceita o que vem da própria origem, e o Google Fonts
   seria bloqueado em silêncio — a tela cairia na fonte do sistema sem dizer. */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fontes/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fontes/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fontes/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fontes/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ tokens */

:root {
  --fundo: #fff4e3;
  --pontos: #ffe0b0;
  --papel: #ffffff;
  --elevado: #ffffff;
  --afundado: #fffbf3;
  /* `--borda` é o fio de dentro (entre linhas, entre itens); o contorno grosso
     dos objetos é `--tinta`. Com a tinta em todo fio, a tela vira grade. */
  --borda: #ede6fa;
  --borda-2: #bda9f0;
  --tinta: #2b2140;

  --texto: #2b2140;
  --texto-2: #4b3a69;
  --suave: #6d5e8c;

  --acento: #6b3bf0;
  --acento-forte: #5227d4;
  --acento-suave: #f3eeff;
  --acento-vivo: #8a63ff;
  --barra: #6b3bf0;

  --perigo: #c42d17;
  --perigo-fundo: #ffd9cf;
  --ok: #1b8a4e;
  --ok-fundo: #cff3dc;
  --alerta: #8f5c00;
  --alerta-fundo: #ffe9b0;
  --delegado: #6b3bf0;
  --delegado-fundo: #e6ddff;

  /* As cores de preenchimento do modelo — faixas de cartão, blocos de número,
     botões. São fundo, nunca texto. */
  --lilas: #e6ddff;
  --ambar: #ffe9b0;
  --menta: #d6f5ee;
  --salmao: #ffd9cf;
  --verde-claro: #cff3dc;
  --verde: #2fbf71;
  --laranja: #ffb020;
  --vermelho: #ff5b45;

  --raio: 24px;
  --raio-p: 14px;
  --contorno: 3px;

  --sombra: 0 6px 0 var(--tinta);
  --sombra-alta: 0 9px 0 var(--tinta);
  --sombra-acento: 0 6px 0 var(--tinta);
  --sombra-botao: 0 4px 0 var(--tinta);

  --serif: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* O escuro não veio no modelo; é o mesmo desenho com a luz apagada: fundo
   roxo-noite, papel um tom acima, e a sombra dura continua existindo — mais
   escura que o papel, senão o cartão perde o volume. O contorno clareia para
   o objeto não se dissolver no fundo. */
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #17121f;
    --pontos: #241c33;
    --papel: #221a30;
    --elevado: #271f37;
    --afundado: #1d1629;
    --borda: #342a48;
    --borda-2: #594a7a;
    --tinta: #8c7ab8;

    --texto: #f3eeff;
    --texto-2: #d4c9ef;
    --suave: #ab9fcb;

    --acento: #a98bff;
    --acento-forte: #c2acff;
    --acento-suave: #2d2345;
    --acento-vivo: #b9a0ff;
    --barra: #a98bff;

    --perigo: #ff8b78;
    --perigo-fundo: #3d1f1d;
    --ok: #5fd896;
    --ok-fundo: #173323;
    --alerta: #ffc862;
    --alerta-fundo: #36290f;
    --delegado: #b9a0ff;
    --delegado-fundo: #2d2345;

    --lilas: #33294f;
    --ambar: #3d3016;
    --menta: #173430;
    --salmao: #3d2320;
    --verde-claro: #183323;
    --verde: #2fbf71;
    --laranja: #ffb020;
    --vermelho: #ff5b45;

    --sombra: 0 6px 0 #0b0812;
    --sombra-alta: 0 9px 0 #0b0812;
    --sombra-acento: 0 6px 0 #0b0812;
    --sombra-botao: 0 4px 0 #0b0812;
  }
}

/* ----------------------------------------------------------------- página */

body {
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-feature-settings: normal;
  color: var(--texto);
}
/* Os pontinhos moram no véu (`body::after`, de `tema.css`), que é o que fica
   por cima da imagem de fundo enviada na Administração: sem imagem, o véu é o
   creme opaco e os pontos aparecem; com imagem, eles ficam sobre o véu
   translúcido e não apagam o papel de parede. */
body::after {
  background-image: radial-gradient(var(--pontos) 2px, transparent 2px);
  background-size: 26px 26px;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 900; letter-spacing: -0.02em; }
code, kbd, samp { font-family: var(--mono); }
a { color: var(--acento); }

/* O título de cada tela. O HTML o escreve com tamanho no `style` (20px), por
   isso o `!important`: é a única regra do tema que precisa gritar. */
main > section > .cabecalho-resultado h2,
.turbo-titulo {
  font-size: clamp(28px, 4vw, 40px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
}
main > section > .cabecalho-resultado .ajuda,
.turbo-topo .ajuda {
  font-size: 14px;
  font-weight: 700;
  color: var(--suave);
}

.ajuda { color: var(--suave); font-weight: 600; }
.erro {
  color: var(--perigo);
  font-weight: 800;
}
.vazio { font-style: normal; font-weight: 700; color: var(--suave); }

/* ------------------------------------------------------------- cabeçalho */

.topo {
  background: var(--papel);
  backdrop-filter: none;
  border-bottom: 4px solid var(--tinta);
  padding: 12px 20px;
}
.logo {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 22px;
  border-radius: 14px;
  background: var(--laranja);
  border: var(--contorno) solid var(--tinta);
  box-shadow: var(--sombra-botao);
}
.topo h1 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}
.sub { font-size: 12px; font-weight: 700; color: var(--suave); }

.pilula {
  background: var(--menta);
  color: var(--texto);
  border: var(--contorno) solid var(--tinta);
  box-shadow: var(--sombra-botao);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
}
.pilula-botao:hover { border-color: var(--tinta); color: var(--texto); filter: brightness(0.98); }
.pilula-botao[aria-expanded='true'] { border-color: var(--acento); }
.menu-unidades {
  border: var(--contorno) solid var(--tinta);
  border-radius: 18px;
  box-shadow: var(--sombra);
}

/* As seções: a pílula lilás do modelo, com a aba atual em branco e contorno. */
.secoes {
  gap: 4px;
  padding: 5px;
  background: var(--acento-suave);
  border: var(--contorno) solid var(--tinta);
  border-radius: 999px;
  box-shadow: var(--sombra-botao);
}
.secao {
  padding: 8px 15px;
  border: 2px solid transparent;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--suave);
}
.secao:hover { background: var(--lilas); color: var(--texto); }
.secao[aria-current='page'] {
  background: var(--papel);
  color: var(--texto);
  border-color: var(--tinta);
  box-shadow: 0 3px 0 var(--tinta);
  font-weight: 900;
}
.secao-turbo {
  background: var(--ambar);
  border-color: var(--tinta);
  color: var(--texto);
}
.secao-turbo:hover { background: var(--ambar); color: var(--texto); filter: brightness(0.97); }

/* A fileira de baixo: pílulas soltas; a atual é a violeta. */
#abas .abas { gap: 8px; padding-top: 6px; }
#abas .abas .aba {
  padding: 6px 15px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--texto);
  background: var(--papel);
  border: var(--contorno) solid var(--tinta);
  border-radius: 999px;
}
#abas .abas .aba:hover { background: var(--acento-suave); }
#abas .abas .aba[aria-current='page'] {
  background: var(--acento);
  color: #fff;
  box-shadow: var(--sombra-botao);
  font-weight: 900;
}
/* O sublinhado deslizante de `tema.css` era o marcador da aba atual; aqui
   quem marca é o preenchimento. Os dois juntos desenhariam um risco sob a
   pílula. */
#abas .aba::after { display: none; }

.aba-bolinha {
  background: var(--vermelho);
  color: #fff;
  border: 2px solid var(--tinta);
  font-weight: 900;
}

/* --------------------------------------------------------------- cartões */

main { max-width: 1420px; }

.cartao {
  background: var(--elevado);
  border: var(--contorno) solid var(--tinta);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 22px 24px;
  margin-bottom: 24px;
}
.cartao h2 { font-size: 22px; font-weight: 900; letter-spacing: -0.03em; }
.cartao h3 { font-weight: 900; }

/* A faixa colorida do cabeçalho do cartão. Só onde o cartão ABRE com o bloco
   de cabeçalho — as margens negativas levam a faixa até o contorno, e o raio
   de cima é o do cartão menos a espessura dele. Sem `overflow: hidden` no
   cartão: a janelinha das marcas de estado e os menus precisam sair dele. */
.cartao > .cabecalho-bloco:first-child {
  margin: -22px -24px 18px;
  padding: 16px 24px;
  background: var(--ambar);
  border-bottom: var(--contorno) solid var(--tinta);
  border-radius: calc(var(--raio) - var(--contorno)) calc(var(--raio) - var(--contorno)) 0 0;
  align-items: center;
}
.cartao:nth-of-type(4n + 2) > .cabecalho-bloco:first-child { background: var(--menta); }
.cartao:nth-of-type(4n + 3) > .cabecalho-bloco:first-child { background: var(--salmao); }
.cartao:nth-of-type(4n + 4) > .cabecalho-bloco:first-child { background: var(--lilas); }
.cabecalho-bloco .fonte {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11.5px;
  padding: 4px 11px;
  background: var(--papel);
  color: var(--texto);
  border: 2px solid var(--tinta);
  border-radius: 999px;
}

/* ---------------------------------------------------------- formulários */

label {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--suave);
}
/* Caixa de seleção, rádio e interruptor: a frase ao lado é texto, não rótulo
   de campo — em letra de máquina e maiúscula ela parecia um aviso técnico. */
.check-inline,
.lista-escopos label,
label.check-inline,
label.interruptor,
label:has(> input[type='checkbox']),
label:has(> input[type='radio']) {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto);
}

input[type='text'], input[type='password'], input[type='search'], input[type='number'],
input[type='date'], input[type='email'], input[type='url'], input:not([type]),
select, textarea {
  background: var(--papel);
  color: var(--texto);
  border: var(--contorno) solid var(--tinta);
  border-radius: var(--raio-p);
  padding: 10px 14px;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
}
input:hover, select:hover, textarea:hover { border-color: var(--tinta); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 22%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--suave); font-weight: 600; opacity: 0.8; }
input[type='checkbox'], input[type='radio'] {
  accent-color: var(--acento);
  width: 18px;
  height: 18px;
}
input:disabled, select:disabled, textarea:disabled { opacity: 0.6; }
/* O botão nativo do campo de arquivo ("Escolher arquivos") — o único botão da
   tela que o navegador desenha; sem isto ele destoava de todos os outros. */
input[type='file'] { font-family: 'Nunito', system-ui, sans-serif; font-weight: 700; color: var(--suave); }
input[type='file']::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  border: var(--contorno) solid var(--tinta);
  border-radius: var(--raio-p);
  background: var(--acento-suave);
  color: var(--texto);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--tinta);
}

/* ---------------------------------------------------------------- botões
   O botão do modelo: contorno grosso, sombra dura, e afunda os quatro pixels
   da sombra quando se aperta — o retorno tátil que a tela pode dar. */
.botao {
  border: var(--contorno) solid var(--tinta);
  border-radius: var(--raio-p);
  padding: 10px 18px;
  background: var(--papel);
  color: var(--texto);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  box-shadow: var(--sombra-botao);
}
.botao:hover:not(:disabled) { transform: translateY(-1px); background-color: var(--acento-suave); }
.botao:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--tinta); }
.botao:disabled, .botao[disabled] { opacity: 0.5; box-shadow: none; }
.botao.pequeno { padding: 7px 14px; font-size: 13px; font-weight: 900; }
.botao.primario { background: var(--acento); color: #fff; box-shadow: var(--sombra-botao); }
.botao.primario:hover:not(:disabled) { background: var(--acento-forte); }
.botao.fantasma { background: var(--papel); color: var(--texto); border-color: var(--tinta); }
.botao.fantasma:hover:not(:disabled) { background: var(--acento-suave); color: var(--texto); }
.botao.perigo { background: var(--perigo-fundo); color: var(--perigo); border-color: var(--tinta); }
.botao.perigo:hover:not(:disabled) { background: var(--perigo-fundo); filter: brightness(0.97); }

/* As cores do modelo, pelo que o botão faz: atualizar é verde, pedir à IA é
   âmbar, sair é vermelho. Texto em tinta (contraste), fora o violeta. */
.botao[id$='-atualizar'], .botao[id$='-carregar'], .botao[id^='btn-atualizar'] {
  background: var(--verde);
  color: #2b2140;
}
.botao[id$='-sugerir'], .botao[id*='-propor'], .botao[id*='-redigir'], .botao[id*='-analisar'] {
  background: var(--laranja);
  color: #2b2140;
}
.botao[id$='-atualizar']:hover:not(:disabled), .botao[id$='-carregar']:hover:not(:disabled),
.botao[id^='btn-atualizar']:hover:not(:disabled), .botao[id$='-sugerir']:hover:not(:disabled),
.botao[id*='-propor']:hover:not(:disabled), .botao[id*='-redigir']:hover:not(:disabled),
.botao[id*='-analisar']:hover:not(:disabled) {
  filter: brightness(1.05);
}
#btn-sair { background: var(--vermelho); color: #2b2140; }
#btn-sair:hover:not(:disabled) { background: var(--vermelho); filter: brightness(1.05); }

.botao-icone {
  border: 2px solid var(--tinta);
  border-radius: 12px;
  background: var(--acento-suave);
}

/* O primário de `styles.css` nasce com `margin-top: 18px` (era o botão de
   fim de formulário). Numa fileira de ações ele descia sozinho, meio botão
   abaixo dos vizinhos. */
.linha-acoes .botao,
.cabecalho-resultado .botao,
.turbo-topo .botao,
.periodo .botao,
.filtros .botao { margin-top: 0; }

/* ------------------------------------------- os outros objetos que flutuam
   Tudo o que `tema.css` desenhava como superfície elevada (fio fino e sombra
   difusa) ganha o contorno do modelo. Com a sombra dura e o fio lilás, o
   objeto parecia descolado da própria sombra. */
.adm-indice,
.adm-cabeca,
.turbo-ficha,
.turbo-expresso-linha,
.marca-estado .popup,
.exp-autos,
.exp-mesa,
.dsp-desfecho {
  border: var(--contorno) solid var(--tinta);
  border-radius: var(--raio);
}
.adm-indice, .adm-cabeca, .turbo-ficha, .marca-estado .popup { box-shadow: var(--sombra); }
.turbo-expresso-linha { background: var(--acento-suave); border-radius: 18px; }
.turbo-ficha.atual, .turbo-ficha.marcada { box-shadow: var(--sombra-alta); }
.adm-titulo { font-weight: 900; font-size: 22px; }
.adm-nome { font-weight: 900; }
.adm-desc { font-weight: 700; }
.adm-item[aria-current='page'] {
  background: var(--acento);
  color: #fff;
  box-shadow: 0 3px 0 var(--tinta);
  border: 2px solid var(--tinta);
}
.adm-item[aria-current='page'] .adm-nome,
.adm-item[aria-current='page'] .adm-desc { color: #fff; }
.adm-item:hover:not([aria-current='page']) { background: var(--acento-suave); }

/* Os campos de data ficaram de fora da folha de base (eram filtros lado a
   lado); onde uma tela os estiliza, eles seguem o campo do tema. */
input[type='date'],
#tela-fisicos input[type='date'] {
  border: var(--contorno) solid var(--tinta);
  border-radius: var(--raio-p);
  background: var(--papel);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 700;
}
.turbo-sugestao {
  border: 2px solid var(--tinta);
  border-radius: 16px;
}

/* ---------------------------------------------------------------- tabelas */

.tabela-rolagem {
  border: var(--contorno) solid var(--tinta);
  border-radius: 20px;
  background: var(--papel);
}
.tabela thead th {
  background: var(--menta);
  color: var(--texto);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-bottom: var(--contorno) solid var(--tinta);
}
.tabela tbody td { border-bottom: var(--contorno) solid var(--borda); }
.tabela tbody tr:hover td { background: var(--afundado); }
.tabela a { font-family: var(--mono); font-weight: 700; color: var(--acento); }
.tabela .desc { font-weight: 700; }
.contador { font-family: var(--mono); font-weight: 700; color: var(--suave); }
.filtros {
  padding: 14px;
  margin: 0 0 14px;
  background: var(--menta);
  border: var(--contorno) solid var(--tinta);
  border-radius: 18px;
}

/* ---------------------------------------------------------------- diálogos */

dialog {
  border: var(--contorno) solid var(--tinta);
  border-radius: 26px;
  box-shadow: var(--sombra-alta);
  background: var(--elevado);
  color: var(--texto);
}
dialog::backdrop { background: rgba(43, 33, 64, 0.45); backdrop-filter: blur(2px); }

/* -------------------------------------------------------------- progresso */

.barra {
  height: 14px;
  background: var(--borda);
  border: 2px solid var(--tinta);
  border-radius: 999px;
  box-shadow: none;
}
.barra-fill { background: var(--acento); border-radius: 999px; }

/* ------------------------------------------------ o Início: números e listas */

.tile {
  border: var(--contorno) solid var(--tinta);
  border-radius: 22px;
  box-shadow: var(--sombra);
  background: var(--lilas);
  padding: 18px 20px;
}
.tiles > .tile:nth-child(5n + 2) { background: var(--ambar); }
.tiles > .tile:nth-child(5n + 3) { background: var(--menta); }
.tiles > .tile:nth-child(5n + 4) { background: var(--salmao); }
.tiles > .tile:nth-child(5n + 5) { background: var(--verde-claro); }
.tile .v { font-family: var(--serif); font-size: 42px; font-weight: 900; letter-spacing: -0.05em; line-height: 1; color: var(--texto); }
.tile .k { font-size: 13.5px; font-weight: 800; color: var(--texto-2); }
/* Crítico e atenção continuam ditos pela palavra do bloco; a cor só reforça. */
.tiles > .tile.critico { background: var(--salmao); border-color: var(--tinta); }
.tiles > .tile.atencao { background: var(--ambar); border-color: var(--tinta); }
.tile.critico .v { color: var(--perigo); }
.tile.atencao .v { color: var(--alerta); }
button.tile:hover { border-color: var(--tinta); transform: translateY(-2px); }

.exige {
  background: var(--afundado);
  border: var(--contorno) solid var(--tinta);
  border-radius: 18px;
  margin-bottom: 10px;
}
.exige:hover { background: var(--acento-suave); }

.barra-dado .trilho {
  height: 18px;
  background: var(--borda);
  border: 2px solid var(--tinta);
  border-radius: 999px;
  overflow: hidden;
}
.barra-dado .trilho i { border-right: 2px solid var(--tinta); }
.barra-dado .nome { font-weight: 800; }
.barra-dado .val { font-weight: 900; }

/* ------------------------------------------------------------ miudezas */

.avisos li { font-weight: 700; border-top-color: var(--borda); }
.etiqueta-judicial {
  border: 2px solid var(--tinta);
  border-radius: 999px;
  font-weight: 900;
}
details > summary { font-weight: 800; }

@media (max-width: 760px) {
  .secoes { border-radius: 18px; }
  .cartao { padding: 18px; border-radius: 20px; }
  .cartao > .cabecalho-bloco:first-child {
    margin: -18px -18px 16px;
    padding: 14px 18px;
    border-radius: 17px 17px 0 0;
  }
  .tile .v { font-size: 34px; }
  .logo { width: 40px; height: 40px; font-size: 19px; }
}

/* O afundar do botão e o "pular" do bloco são movimento; quem pediu menos
   movimento recebe só a mudança de cor. */
@media (prefers-reduced-motion: reduce) {
  .botao:hover:not(:disabled), .botao:active:not(:disabled), button.tile:hover { transform: none; }
}

/* O selo da faixa ("painel de controle") às vezes é preenchido depois, pela
   tela. Vazio, ele desenhava uma pílula oca no canto do cartão. */
.cabecalho-bloco .fonte:empty { display: none; }

/* As trilhas da aba Iniciar, no desenho do tema: contorno e sombra dura. */
.ini-trilha { border: var(--contorno) solid var(--tinta); box-shadow: var(--sombra); }
.ini-trilha strong { font-weight: 900; }