/* Desafios Comerciais — aparência do cbnethub/DESIGN.md (tokens §3/§4 copiados
   na íntegra, nos dois temas). O que é próprio deste módulo está marcado. */

@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url('vendor/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('vendor/poppins-600.woff2') format('woff2'); }

:root, [data-theme="dark"] {
  --bg:            #061423;
  --surface:       rgba(255,255,255,.045);
  --surface-2:     rgba(255,255,255,.03);
  --border:        rgba(255,255,255,.10);
  --text:          #eaf2f8;
  --text-muted:    #93a7ba;
  --accent:        #2fd15a;
  --accent-text:   #2fd15a;
  --on-accent:     #061423;
  --danger:        #ff6b7a;
  --warning:       #ffb020;
  --on-danger:     #061423;
  --on-warning:    #061423;
  --warning-text:  #ffb020;
  --focus-ring:    color-mix(in srgb, var(--accent) 55%, transparent);
  --elev-1: 0 1px 2px rgba(0,0,0,.30);
  --elev-2: 0 20px 46px rgba(0,0,0,.50);
  /* Próprios: as três medalhas do pódio. Ouro é o --warning da casa. */
  --prata:         #c3d0dc;
  --bronze:        #e0a070;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg:            #eaeff6;
  --surface:       #ffffff;
  --surface-2:     #dde5ef;
  --border:        #ccd7e4;
  --text:          #0f1c2b;
  --text-muted:    #54637a;
  --accent:        #22a847;
  --accent-text:   #147233;
  --on-accent:     #061423;
  --danger:        #b3352f;
  --warning:       #b7791f;
  --on-danger:     #ffffff;
  --on-warning:    #061423;
  --warning-text:  #8a5a12;
  --focus-ring:    color-mix(in srgb, var(--accent) 55%, transparent);
  --elev-1: 0 1px 2px rgba(15,28,43,.05), 0 1px 1px rgba(15,28,43,.04);
  --elev-2: 0 18px 42px rgba(15,28,43,.16);
  --prata:         #56677a;
  --bronze:        #9a5a25;
  color-scheme: light;
}

:root {
  --s-1: .25rem;  --s-2: .5rem;  --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;    --s-8: 4rem;
  --r-campo: 10px;
  --r-card:  14px;
  --r-pill:  999px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --t-press: 120ms;
  --t-hover: 160ms;
  --t-enter: 240ms;
  /* Módulo de tabela (ranking): uma largura só, a de tabela densa. */
  --medida: 64rem;
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-muted) 45%, transparent) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-muted) 45%, transparent); border-radius: var(--r-pill); }

html, body { margin: 0; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
strong, b { font-weight: 600; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.oculto { display: none !important; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Widgets nativos (DESIGN §3.2) ───────────────────────────────────────── */
select, select option, select optgroup { background-color: var(--bg); color: var(--text); }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--accent); }

/* ── Layout (DESIGN §7) ──────────────────────────────────────────────────── */
.app { width: 100%; max-width: var(--medida); margin-inline: auto; padding: var(--s-5) var(--s-5) var(--s-8); flex: 1; }
.view { display: flex; flex-direction: column; gap: var(--s-4); }

/* ── Tipografia (DESIGN §5) ──────────────────────────────────────────────── */
.titulo-tela { font-size: 1.6rem; font-weight: 600; line-height: 1.12; letter-spacing: -.021em; }
.titulo-cartao { font-size: 1rem; font-weight: 600; line-height: 1.32; letter-spacing: -.006em; }
.texto-auxiliar { font-size: .8125rem; line-height: 1.48; letter-spacing: .005em; color: var(--text-muted); }
.rotulo-miudo { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; }

/* ── Abas do módulo (sem topbar própria — MODULE_CONTRACT §5) ────────────── */
.abas { border-bottom: 1px solid var(--border); }
.abas-trilho { max-width: var(--medida); margin-inline: auto; display: flex; gap: var(--s-1); padding: var(--s-2) var(--s-5) 0; overflow-x: auto; }
.aba {
  appearance: none; border: 0; background: none; cursor: pointer; white-space: nowrap;
  padding: var(--s-2) var(--s-3); min-height: 44px;
  color: var(--text-muted); font-size: .9375rem;
  border-bottom: 2px solid transparent;
}
.aba[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent-text); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .aba:hover { color: var(--text); } }

/* ── Botões ──────────────────────────────────────────────────────────────── */
.btn {
  appearance: none; cursor: pointer; border: 1px solid transparent; border-radius: var(--r-campo);
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: .9375rem;
  min-height: 40px; padding: var(--s-2) var(--s-4);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  transition: transform var(--t-press) var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn-secundario { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-perigo { background: var(--danger); color: var(--on-danger); }
.btn-pequeno { min-height: 32px; padding: var(--s-1) var(--s-3); font-size: .8125rem; }
.btn-texto { background: none; border: 0; color: var(--accent-text); padding-inline: var(--s-2); }
/* Ação destrutiva em botão de texto: vermelho, não o verde de "seguir". */
.btn-texto.texto-perigo { color: var(--danger); }
.rodape-sinc .btn-texto { margin-inline-end: calc(-1 * var(--s-2)); }

/* ── Campos ──────────────────────────────────────────────────────────────── */
.campo { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.campo > label, .campo > .rotulo { font-size: .8125rem; color: var(--text-muted); letter-spacing: .005em; }
.entrada {
  width: 100%; min-height: 40px; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border); border-radius: var(--r-campo);
  background-color: var(--bg);
  background-image: linear-gradient(var(--surface-2), var(--surface-2));
}
textarea.entrada { min-height: 5rem; resize: vertical; }
.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s-3); }

/* Controle segmentado (DESIGN §7: pode ter largura automática). */
.segmentado { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); padding: var(--s-1); border-radius: var(--r-campo); background: var(--surface-2); border: 1px solid var(--border); }
.segmentado label { position: relative; }
.segmentado input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmentado > label > span { display: block; padding: var(--s-1) var(--s-3); border-radius: calc(var(--r-campo) - var(--s-1)); font-size: .875rem; color: var(--text-muted); min-height: 32px; line-height: 24px; }
.segmentado input:checked + span { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.segmentado input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Chips de escolha (categorias). */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip-escolha { position: relative; }
.chip-escolha input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip-escolha span { display: inline-flex; align-items: center; min-height: 36px; padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); border: 1px solid var(--border); font-size: .875rem; color: var(--text-muted); }
.chip-escolha input:checked + span { border-color: var(--accent-text); color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; }
.chip-escolha input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ── Cartões ─────────────────────────────────────────────────────────────── */
.cartao { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--elev-1); padding: var(--s-4); min-width: 0; }
.cartao-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.etiqueta { display: inline-flex; align-items: center; gap: var(--s-1); padding: 2px var(--s-2); border-radius: var(--r-pill); font-size: .75rem; font-weight: 600; letter-spacing: .005em; border: 1px solid var(--border); color: var(--text-muted); max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.etiqueta[data-tom="ok"] { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.etiqueta[data-tom="alerta"] { color: var(--warning-text); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.etiqueta[data-tom="perigo"] { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

/* ── Barra superior do ranking ───────────────────────────────────────────── */
.barra { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; }
.barra .campo { flex: 1 1 14rem; }

/* ── Cabeçalho do desafio ────────────────────────────────────────────────── */
.desafio-cabeca { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: center; }
.arte-miniatura { width: 5.5rem; height: 7rem; border-radius: var(--r-campo); object-fit: cover; border: 1px solid var(--border); cursor: zoom-in; background: var(--surface-2); padding: 0; transition: transform var(--t-press) var(--ease-out); }
.arte-miniatura:active { transform: scale(.97); }
.arte-miniatura img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.desafio-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }

/* ── Placar da empresa (as faixas) ───────────────────────────────────────── */
.placar { display: flex; flex-direction: column; gap: var(--s-3); }
.placar-numeros { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.placar-total { font-size: 2.25rem; font-weight: 600; line-height: 1.05; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.placar-total small { font-size: .9375rem; font-weight: 500; letter-spacing: 0; color: var(--text-muted); margin-left: var(--s-1); }
.trilha { position: relative; height: 12px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); margin-block: var(--s-2) var(--s-6); }
/* A largura vem de el.style (CSSOM) — a CSP barra atributo style=. */
.trilha-cheia { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent); transform-origin: left center; }
/* Halo de --bg: sobre a barra cheia o traço precisa de contraste próprio. */
.trilha-ritmo { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); box-shadow: 0 0 0 2px var(--bg); border-radius: var(--r-pill); }
.marco { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.marco-ponto { width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 2px solid var(--text-muted); display: block; }
.marco[data-atingido="true"] .marco-ponto { border-color: var(--accent-text); background: var(--accent); }
.marco-rotulo { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .75rem; letter-spacing: .01em; color: var(--text-muted); text-align: center; line-height: 1.3; }
.marco[data-atingido="true"] .marco-rotulo { color: var(--accent-text); font-weight: 600; }
/* Marco na ponta direita: rótulo ancorado à direita para não sair da trilha. */
.marco[data-ponta="fim"] .marco-rotulo { left: auto; right: -9px; transform: none; text-align: right; }
.marco[data-ponta="inicio"] .marco-rotulo { left: -9px; transform: none; text-align: left; }

.aviso-faixa { display: flex; gap: var(--s-2); align-items: center; padding: var(--s-3); border-radius: var(--r-campo); background: var(--surface-2); font-size: .875rem; }
.aviso-faixa[data-tom="ok"] { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); }

/* ── Pódio ───────────────────────────────────────────────────────────────── */
.podio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); align-items: end; }
.degrau { text-align: center; padding: var(--s-4) var(--s-3); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--elev-1); display: flex; flex-direction: column; align-items: center; gap: var(--s-1); min-width: 0; }
.degrau[data-pos="1"] { order: 2; padding-block: var(--s-5); border-color: color-mix(in srgb, var(--warning) 55%, transparent); }
.degrau[data-pos="2"] { order: 1; }
.degrau[data-pos="3"] { order: 3; }
.medalha { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 1rem; border: 2px solid currentColor; }
.degrau[data-pos="1"] .medalha { color: var(--warning-text); }
.degrau[data-pos="2"] .medalha { color: var(--prata); }
.degrau[data-pos="3"] .medalha { color: var(--bronze); }
.degrau-nome { font-weight: 600; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.degrau-total { font-size: 1.375rem; font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.degrau-premio { font-size: .8125rem; color: var(--accent-text); font-weight: 600; }
.degrau-premio[data-vazio="true"] { color: var(--text-muted); font-weight: 500; }
.degrau-vago { opacity: .55; }

/* ── Tabela do ranking ───────────────────────────────────────────────────── */
.tabela-rolagem { position: relative; overflow-x: auto; }
table.ranking { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ranking th { text-align: left; font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); white-space: nowrap; }
.ranking td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); vertical-align: middle; }
.ranking tr:last-child td { border-bottom: 0; }
.ranking .num { text-align: right; white-space: nowrap; }
.ranking .pos { width: 3rem; font-weight: 600; color: var(--text-muted); }
.ranking tr[data-premiado="true"] .pos { color: var(--accent-text); }
.ranking tr[data-eu="true"] td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ranking tr[data-eu="true"] td:first-child { box-shadow: inset 3px 0 0 var(--accent-text); }
.ranking .nome { font-weight: 600; }
.ranking .sub { display: block; font-size: .75rem; font-weight: 500; letter-spacing: .01em; color: var(--text-muted); }
.ponto-equipe { display: inline-block; width: .625rem; height: .625rem; border-radius: 50%; margin-right: var(--s-2); vertical-align: baseline; }

/* Cores fechadas das equipes (nome, nunca hex livre). */
[data-cor="verde"] { --cor-equipe: #2fd15a; }
[data-cor="azul"]  { --cor-equipe: #4ea1ff; }
[data-cor="ambar"] { --cor-equipe: #ffb020; }
[data-cor="roxo"]  { --cor-equipe: #a78bfa; }
[data-cor="rosa"]  { --cor-equipe: #f472b6; }
[data-cor="ciano"] { --cor-equipe: #22d3ee; }
.ponto-equipe, .amostra-cor { background: var(--cor-equipe, var(--text-muted)); }

/* ── Meus desafios ───────────────────────────────────────────────────────── */
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--s-3); }
.meu-numero { display: flex; align-items: baseline; gap: var(--s-2); margin-block: var(--s-3) var(--s-2); }
.meu-numero strong { font-size: 2rem; line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.lista-simples { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); font-size: .875rem; }
.lista-simples li { display: flex; justify-content: space-between; gap: var(--s-3); }
.lista-simples li span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Listas da gestão ────────────────────────────────────────────────────── */
.cabeca-secao { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.item-lista { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.item-acoes { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.amostra-cor { display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; vertical-align: -.125em; }

/* ── Diálogos ────────────────────────────────────────────────────────────── */
.dialogo {
  border: 1px solid var(--border); border-radius: var(--r-card); padding: 0;
  color: var(--text);
  /* Superfície que flutua: opaca (DESIGN §3, caso 1). */
  background-color: var(--bg);
  background-image: linear-gradient(var(--surface), var(--surface));
  box-shadow: var(--elev-2);
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
}
.dialogo-largo { width: min(52rem, calc(100vw - 2rem)); }
.dialogo[open] { animation: entrar var(--t-enter) var(--ease-out); }
@keyframes entrar { from { opacity: 0; transform: scale(.97); } }
.dialogo::backdrop { background: rgba(3, 10, 18, .55); }
.dialogo-corpo { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); }
.dialogo-acoes { display: flex; justify-content: flex-end; gap: var(--s-2); flex-wrap: wrap; }
.dialogo-rodape { position: sticky; bottom: 0; padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border); background-color: var(--bg); background-image: linear-gradient(var(--surface), var(--surface)); }
.dialogo-arte { width: auto; max-width: calc(100vw - 2rem); padding: var(--s-2); }
.dialogo-arte img { display: block; max-width: 100%; max-height: calc(100dvh - 5rem); border-radius: var(--r-campo); }
.fechar-arte { position: absolute; top: var(--s-3); right: var(--s-3); }

/* Seções do editor de desafio. */
.secao { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--border); }
div.secao:first-child { border-top: 0; padding-top: 0; }
.faixa { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-campo); background: var(--surface-2); border: 1px solid var(--border); }
.premio-linha { display: grid; grid-template-columns: 3rem minmax(6rem, 9rem) minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; }
.premio-linha .pos { font-weight: 600; color: var(--text-muted); }
.colunas-premios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--s-3); }
.lista-escolha { max-height: 15rem; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-campo); padding: var(--s-2); display: flex; flex-direction: column; gap: var(--s-1); }
.lista-escolha label { display: flex; gap: var(--s-2); align-items: center; min-height: 36px; padding-inline: var(--s-2); border-radius: calc(var(--r-campo) - var(--s-1)); }
.lista-escolha label > span:first-of-type { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-escolha label > .texto-auxiliar { flex: none; }
.lista-escolha input[type="checkbox"] { width: 18px; height: 18px; flex: none; }
.erros { margin: 0; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-6); border-radius: var(--r-campo); background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--text); font-size: .875rem; }

/* ── Estados (vazio, erro, carregando) ───────────────────────────────────── */
.estado { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; padding: var(--s-7) var(--s-4); color: var(--text-muted); }
.estado-icone { font-size: 2rem; }
.estado-titulo { color: var(--text); font-weight: 600; }
.estado-erro .estado-titulo { color: var(--danger); }

/* ── Faixas de aviso e recado ────────────────────────────────────────────── */
.faixa-atualizar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); background: color-mix(in srgb, var(--accent) 14%, var(--bg)); font-size: .875rem; }
.recado {
  position: fixed; left: 50%; bottom: var(--s-5); max-width: min(26rem, calc(100vw - 2rem)); overflow-wrap: break-word; margin: 0; inset: auto auto var(--s-5) 50%;
  transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); font-size: .875rem; font-weight: 600;
  background-color: var(--bg); background-image: linear-gradient(var(--surface), var(--surface));
  border: 1px solid var(--border); box-shadow: var(--elev-2);
  transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out);
}
.recado[data-visivel="true"] { opacity: 1; transform: translate(-50%, 0); }
.recado[data-tom="erro"] { border-color: var(--danger); }
.rodape-sinc { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

/* ── Celular (P-031/P-032) ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .app { padding: var(--s-4) var(--s-3) var(--s-7); }
  .abas-trilho { padding-inline: var(--s-3); }
  .aba { padding-inline: var(--s-2); font-size: .875rem; }
  .titulo-tela { font-size: 1.375rem; }
  .placar-total { font-size: 1.875rem; }
  .podio { gap: var(--s-2); }
  .degrau { padding: var(--s-3) var(--s-2); }
  .degrau[data-pos="1"] { padding-block: var(--s-4); }
  .degrau-total { font-size: 1.125rem; }
  .desafio-cabeca { grid-template-columns: 1fr; }
  .premio-linha { grid-template-columns: 2.25rem minmax(5rem, 1fr) minmax(0, 1.4fr) auto; }
  .dialogo-corpo { padding: var(--s-4); }
  .esconde-estreito { display: none; }
}
@media (pointer: coarse) {
  .btn, .entrada, select.entrada { min-height: 44px; }
  .btn-pequeno { min-height: 40px; }
  .segmentado span { min-height: 40px; line-height: 32px; }
  .chip-escolha span, .lista-escolha label, .linha-marcar { min-height: 44px; }
  .premio-linha [data-tirar-premio] { min-width: 40px; }
  /* 16px impede o auto-zoom do iOS no foco (P-031). */
  .entrada, select.entrada, textarea.entrada { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Próprios do ranking: no estreito o prêmio desce para baixo do nome (a coluna
   cortava) e a miniatura nunca deixa vazar o texto de uma arte que não carregou. */
.ranking .so-estreito { display: none; }
.ranking .premio-sub { color: var(--accent-text); font-weight: 600; }
.arte-miniatura { overflow: hidden; font-size: .75rem; }
.grade-cartoes > .cartao { display: flex; flex-direction: column; gap: var(--s-2); }
.grade-cartoes > .cartao .dialogo-acoes { margin-top: auto; }
@media (max-width: 640px) {
  .ranking .so-estreito { display: block; }
  .degrau-total { font-size: 1rem; overflow-wrap: anywhere; }
  .marco-rotulo { display: none; }
  .lista-escolha label { flex-wrap: wrap; }
  .lista-escolha label > .texto-auxiliar { flex-basis: 100%; padding-left: 26px; }
}

/* <fieldset> do editor: sem a moldura do navegador. A legenda flutua para
   entrar no fluxo flex como um rótulo comum. */
fieldset.secao { border: 0; border-top: 1px solid var(--border); margin: 0; padding: var(--s-4) 0 0; min-width: 0; }
fieldset.secao > legend { float: left; width: 100%; padding: 0; margin-bottom: var(--s-1); }
fieldset.secao:disabled { opacity: .6; }
input[type="file"].entrada { padding: var(--s-1); min-height: 0; flex: 1 1 14rem; min-width: 0; }
input[type="file"].entrada::file-selector-button {
  font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; margin-right: var(--s-3);
  min-height: 32px; padding: var(--s-1) var(--s-3); border-radius: calc(var(--r-campo) - var(--s-1));
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}

/* Legenda das faixas: no estreito os rótulos da trilha somem (sobrepunham e
   vazavam) e as metas aparecem aqui, em fluxo normal. */
.legenda-faixas { display: none; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: calc(var(--s-4) * -1); font-size: .8125rem; color: var(--text-muted); }
.legenda-faixas [data-atingido="true"] { color: var(--accent-text); font-weight: 600; }
.linha-marcar { display: flex; align-items: center; gap: var(--s-2); }
.linha-marcar input[type="checkbox"] { width: 18px; height: 18px; flex: none; }
/* O recado é popover (camada de cima): sem isso ele fica atrás do editor aberto. */
.recado[popover] { border: 1px solid var(--border); }
@media (max-width: 640px) {
  .legenda-faixas { display: flex; }
  .trilha { margin-bottom: var(--s-5); }
}