/* ============================================================================
   Identidade do X Intermed Bahia, lida dos cartazes do @intermedbahia.

   O que define o visual deles, e que eu errei na primeira versao: nao e um
   sistema de caixas. E CARTAZ. Fundo de papel creme, tipografia condensada
   enorme em caixa alta pintada de uma cor forte com sombra deslocada da mesma
   cor mais escura, texto miudo correndo na vertical nas bordas, um "X" nos
   cantos, estrelas soltas e uma assinatura em script no pe.

   Nada aqui tem borda preta com sombra dura: aquilo era o visual de janela do
   Windows que veio do outro projeto, e era o que fazia os dois parecerem irmaos.
   ========================================================================== */

:root{
  --papel:#F3F1E4;
  --papel-fundo:#E4E0CE;
  --tinta:#141412;
  --tinta-fraca:#77736A;
  --linha:#D7D2BE;

  --vermelho:#FD0100;  --vermelho-sombra:#9E0100;
  --laranja:#FC7001;   --laranja-sombra:#A84800;
  --amarelo:#EBD005;   --amarelo-sombra:#9A8800;
  --verde:#01C555;     --verde-sombra:#008037;
  --azul:#3150F8;      --azul-sombra:#1B2F9E;
  --azul-claro:#2395EE;--azul-claro-sombra:#13609C;
  --rosa:#FF2E88;      --rosa-sombra:#A5004E;

  --cor:var(--laranja);           /* a cor da secao, trocada por aba */
  --cor-sombra:var(--laranja-sombra);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--papel-fundo);
  color:var(--tinta);
  font-family:"Archivo",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

.app{
  max-width:560px;margin:0 auto;min-height:100vh;
  background:var(--papel);
  padding:16px 34px 30px;          /* folga pros dizeres verticais das bordas */
  display:flex;flex-direction:column;gap:13px;
  position:relative;overflow-x:clip;
}
.app > *{position:relative;z-index:1;flex:0 0 auto;}

/* grao do papel */
.app::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-image:radial-gradient(circle at 20% 30%, rgba(0,0,0,.028) 0 1px, transparent 1px),
                   radial-gradient(circle at 70% 70%, rgba(0,0,0,.022) 0 1px, transparent 1px);
  background-size:7px 7px, 11px 11px;
}

/* ---------------------------------------------------------- bordas do cartaz */
/* dizeres correndo na vertical, como nas artes deles */
.beira{
  position:absolute;top:0;bottom:0;width:26px;z-index:2;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.beira span{
  writing-mode:vertical-rl;
  font-size:.53rem;font-weight:700;letter-spacing:.42em;text-transform:uppercase;
  color:var(--tinta-fraca);white-space:nowrap;
}
.beira.esq{left:0;}
.beira.esq span{transform:rotate(180deg);}
.beira.dir{right:0;}

/* o X da decima edicao, nos cantos */
/* os dois selos que eles poem nos cantos do cartaz */
.selo{position:absolute;z-index:2;pointer-events:none;height:26px;width:auto;opacity:.9;}
.selo.ce{top:13px;left:5px;}
.selo.cd{top:13px;right:5px;}
.selo.be{bottom:15px;left:5px;}
.selo.bd{bottom:15px;right:5px;}

/* estrelas soltas */


/* ---------------------------------------------------------------- cabecalho */
.topo{display:flex;align-items:center;justify-content:center;padding:2px 0;}
.topo img{display:block;}
.topo .intermed{height:58px;width:auto;}

/* "powered by [logo], com voce no Intermed": vem logo abaixo do titulo, menor
   que ele, pra creditar sem competir com o nome do evento. */
/* fica numa linha so, em qualquer largura: o `nowrap` segura, e as medidas
   em `em` encolhem junto no celular em vez de quebrar a frase no meio */
.porconta{display:flex;align-items:center;justify-content:center;
  gap:7px;margin:9px 0 2px;white-space:nowrap;
  font-size:clamp(.5rem, 2.4vw, .72rem);}
.porconta span{font-size:.82em;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-fraca);}
.porconta img{height:2em;width:auto;display:block;}
.porconta em{font-style:normal;font-size:.86em;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-fraca);}

/* o aviso de que a tabela nao e a fonte oficial. Discreto, mas sempre visivel. */
.aviso-oficial{margin:0;padding:0 2px;font-size:.58rem;line-height:1.5;
  text-align:center;color:var(--tinta-fraca);}

/* Duas linhas: "Tabela de" em cima, miuda, e a palavra em duende embaixo,
   grande, subindo um pouco pra encostar na base da linha de cima. Ela e o
   destaque da pagina, nao o complemento. */
h1.titulo{
  margin:4px 0 0;font-family:"Anton",Impact,sans-serif;font-weight:400;
  font-size:clamp(1.85rem, 8.8vw, 2.6rem);line-height:.9;
  text-transform:uppercase;letter-spacing:-.012em;
  display:flex;flex-direction:column;align-items:center;
}
/* O jeito que o Yan pediu: a camada de tras e so o contorno, vazada, e a
   da frente e cheia na cor escura. Fica leve e nao embola como a sombra. */
/* inline-block e essencial: num bloco centralizado o deslocamento sairia da
   caixa inteira, e nao do texto, e o contorno voava pro canto. */
/* A palavra em duende-pro vem cheia, na cor da secao, sem contorno nenhum:
   ela ja tem personalidade de sobra. A margem negativa faz ela subir e
   encostar na base da linha de cima, que e onde o par ganha graca.
   O contorno vazado continua valendo nos titulos de secao, nao aqui. */
h1.titulo .pintado{
  display:inline-block;position:relative;z-index:1;
  color:var(--cor);
  font-family:"duende-pro","Anton",Impact,sans-serif;
  text-transform:none;font-size:2.6em;line-height:.76;letter-spacing:0;
  margin-top:-.38em;      /* sobe e encosta na base da linha de cima */
}
.sub{
  margin:9px 0 0;text-align:center;
  font-size:.6rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--tinta-fraca);
}
.sub::before,.sub::after{content:"———";letter-spacing:0;margin:0 7px;opacity:.45;}

/* ---------------------------------------------------------------- controles */
.chip{
  font:inherit;font-size:.74rem;font-weight:700;cursor:pointer;
  background:transparent;color:var(--tinta);border:1.5px solid var(--tinta);
  padding:9px 10px;min-height:42px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.05em;
  transition:background .12s, color .12s;
}
.chip[aria-pressed="true"]{background:var(--tinta);color:var(--papel);border-color:var(--tinta);}
.chip:active{transform:scale(.97);}
.chip:focus-visible{outline:2px solid var(--cor);outline-offset:2px;}

.abas{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;}
.abas .chip{padding:10px 3px;font-size:.63rem;}
.subabas{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:2px 0 2px;}

.dias{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;}
.dias .chip{padding:6px 1px;font-size:.55rem;min-height:46px;line-height:1.15;border-radius:14px;}
.dias .chip b{display:block;font-family:"Anton",Impact,sans-serif;font-size:1.05rem;font-weight:400;}

.grupo{border:0;margin:0;padding:0;}
.grupo legend{padding:0;font-size:.56rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinta-fraca);margin-bottom:5px;}
.filtros{display:grid;grid-template-columns:1fr 1fr;gap:6px;}

/* ---------------------------------------------------------------- secoes */
/* no lugar das janelas: um titulo pintado e as linhas soltas no papel */
.win{background:transparent;}
.titlebar{
  display:flex;align-items:baseline;gap:8px;padding:6px 0 0;width:100%;overflow:visible;
  background:transparent;border:0;color:var(--tinta);text-align:left;
  font-family:"Anton",Impact,sans-serif;font-weight:400;
  font-size:1.35rem;line-height:1;text-transform:uppercase;letter-spacing:-.005em;
}
button.titlebar{cursor:pointer;font-family:"Anton",Impact,sans-serif;}
.titlebar .t{flex:0 1 auto;color:var(--tinta);}

.tbtn{font-family:"Archivo",sans-serif;font-size:.8rem;color:var(--tinta-fraca);}
.win.geral .titlebar{font-size:1.5rem;}
.winbody{padding:4px 0 10px;display:flex;flex-direction:column;gap:9px;
  border-top:2px solid var(--tinta);margin-top:3px;}

.bloco{border-top:1px solid var(--linha);padding-top:9px;margin-top:3px;}
.bloco:first-child{border-top:0;margin-top:0;padding-top:2px;}
.bloco h4{margin:0 0 5px;font-family:"Anton",Impact,sans-serif;font-weight:400;
  font-size:1.25rem;color:var(--cor);}


/* ---------------------------------------------------------------- jogos */
.jogo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:9px 0;border-top:1px solid var(--linha);}
.bloco .jogo:first-of-type{border-top:0;}
.jogo .mod{display:inline-flex;align-items:center;gap:5px;font-size:.55rem;font-weight:700;
  letter-spacing:.14em;color:var(--tinta-fraca);text-transform:uppercase;}
.jogo .mod i{width:8px;height:8px;flex:none;border-radius:50%;}
.jogo .times{margin-top:4px;font-size:.95rem;line-height:1.3;font-weight:600;}
.jogo .times .eu{font-weight:700;box-shadow:inset 0 -.42em 0 0 var(--realce,var(--amarelo));
  padding:0 2px;}
.jogo .times .vs{color:var(--tinta-fraca);font-size:.72rem;padding:0 4px;font-weight:400;}
.jogo .times .chave{font-style:italic;color:var(--tinta-fraca);font-weight:400;}
.jogo .esc{color:var(--tinta-fraca);font-size:.66rem;font-weight:400;}
.jogo .onde{margin-top:4px;font-size:.72rem;font-weight:600;color:var(--tinta-fraca);}
.jogo .onde b{font-weight:700;color:var(--tinta);}
.jogo .nota{margin-top:3px;font-size:.64rem;color:var(--tinta-fraca);}
.jogo.rz{box-shadow:inset 4px 0 0 0 var(--realce,var(--amarelo));margin:0 -10px;
  padding-left:14px;padding-right:10px;}

.placar{display:flex;flex-direction:column;align-items:center;gap:2px;
  align-self:center;white-space:nowrap;}
.placar b{font-family:"Anton",Impact,sans-serif;font-weight:400;font-size:1.35rem;
  color:var(--cor);line-height:1;}
/* volei: os sets sao o numero grande, e cada parcial vem miuda embaixo. O set
   que nao foi disputado fica como um traco. */
.placar .parciais{display:flex;gap:5px;}
.placar .parciais i{font-style:normal;font-size:.56rem;font-weight:700;
  letter-spacing:.02em;color:var(--tinta-fraca);font-variant-numeric:tabular-nums;}
.placar .parciais i.nao-teve{opacity:.45;}
/* tag embaixo do placar: prorrogacao e W.O. mudam a pontuacao da tabela, entao
   precisam estar visiveis no jogo e nao so na conta da classificacao */
.placar .tag-placar{font-size:.46rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-fraca);
  border:1px solid var(--linha);border-radius:999px;padding:2px 6px;
  white-space:nowrap;}


/* Todo escudo e um circulo, sem excecao. Os brasoes tem proporcoes diferentes
   (um tem picareta pra fora, outro veio de cartaz), entao `contain` encaixa a
   arte inteira dentro do circulo em vez de cortar ou deixar sobrar quadrado. */
.escudo{display:inline-block;vertical-align:-5px;margin-right:4px;flex:none;
  border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.22);
  object-fit:contain;padding:1px;}
.jogo .times .vs + .escudo{margin-left:2px;}

.btn-sugerir{border:1.5px solid var(--linha);background:transparent;color:var(--tinta-fraca);
  font:inherit;font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  padding:6px 9px;cursor:pointer;border-radius:999px;white-space:nowrap;}
.btn-sugerir:active{transform:scale(.96);}

/* ---------------------------------------------------------------- tabelas */
table.tab{width:100%;border-collapse:collapse;font-size:.8rem;}
table.tab th{color:var(--tinta-fraca);font-size:.55rem;letter-spacing:.14em;
  text-transform:uppercase;padding:0 3px 6px;text-align:center;font-weight:700;
  border-bottom:2px solid var(--tinta);}
table.tab th:first-child{text-align:left;}
table.tab td{padding:8px 3px;text-align:center;border-top:1px solid var(--linha);}
table.tab td.time{text-align:left;font-weight:600;}
table.tab td.time small{display:inline;color:var(--tinta-fraca);font-size:.66rem;font-weight:400;}
table.tab td.time .escudo{vertical-align:-7px;margin:0 5px 0 1px;}
table.tab td.pts{font-family:"Anton",Impact,sans-serif;font-size:1rem;}

/* ---------------------------------------------------------------- listas */
/* A tarja vertical da esquerda repete o credito. A logo tem que girar junto
   com as letras: em `vertical-rl` o texto ja sai deitado 90 graus, e o giro de
   180 da tarja leva ele a 270. Deixar a imagem em pe no meio disso era o que
   estava feio, entao ela ganha os mesmos 90 graus e acompanha a frase. */
.beira.esq .porconta-beira{display:inline-flex;align-items:center;gap:7px;}
.beira.esq .porconta-beira img{height:1.6em;width:auto;transform:rotate(90deg);}

.marcas{display:flex;flex-wrap:wrap;gap:6px;max-height:50vh;overflow-y:auto;padding:2px;}
.marcas .chip{font-size:.7rem;padding:7px 11px;min-height:36px;}
.chip.com-escudo{display:inline-flex;align-items:center;gap:7px;text-align:left;}
.chip.com-escudo .escudo{margin:0;}
.chip.com-escudo[aria-pressed="true"] .escudo{box-shadow:0 0 0 2px var(--papel);}

.passa{display:grid;gap:5px;margin:2px 0 4px;}
.passa-item{padding:7px 2px 7px 0;display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;column-gap:10px;border-top:1px solid var(--linha);}
.passa-item:first-child{border-top:0;}
.passa-item .escudo{grid-row:1 / span 2;margin:0;}
.passa-item b, .passa-item small{grid-column:2;}
.passa-item b{display:block;font-family:"Anton",Impact,sans-serif;font-size:1.1rem;font-weight:400;}
.passa-item small{display:block;font-size:.64rem;color:var(--tinta-fraca);}
.passa-item.g1{box-shadow:inset 5px 0 0 0 var(--verde);padding-left:12px;}
.passa-item.g2{box-shadow:inset 5px 0 0 0 var(--azul-claro);padding-left:12px;}
.passa-item.parcial{opacity:.72;}
.legenda{margin:7px 0 0;display:flex;flex-wrap:wrap;gap:12px;}
.tarja{font-size:.56rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-fraca);padding-left:9px;}
.tarja.g1{box-shadow:inset 4px 0 0 0 var(--verde);}
.tarja.g2{box-shadow:inset 4px 0 0 0 var(--azul-claro);}

.playinn{margin-top:10px;padding-left:11px;box-shadow:inset 3px 0 0 0 var(--linha);}
.playinn h5{margin:0 0 5px;font-size:.55rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-fraca);}
.pi-linha{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:.84rem;
  padding:4px 0;font-weight:600;}
.pi-linha .escudo{margin:0;}
.pi-linha i{font-style:normal;color:var(--tinta-fraca);font-size:.74rem;padding:0 2px;font-weight:400;}
.pi-linha .venceu{box-shadow:inset 0 -.4em 0 0 var(--amarelo);padding:0 2px;}
.pi-linha small{flex-basis:100%;color:var(--tinta-fraca);font-size:.64rem;font-weight:400;}

.chave-jogo{border-top:1px solid var(--linha);padding:11px 0 10px;}
.chave-jogo:first-of-type{border-top:0;padding-top:2px;}
.chave-jogo h5{margin:0 0 7px;font-size:.55rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-fraca);}
.chave-lado{display:flex;align-items:center;gap:8px;padding:3px 0;}
.chave-lado b{font-family:"Anton",Impact,sans-serif;font-size:1.2rem;font-weight:400;}
.chave-lado small{font-size:.66rem;color:var(--tinta-fraca);}
.chave-lado b + small{font-size:.6rem;}
.chave-x{font-size:.7rem;font-weight:700;color:var(--tinta-fraca);padding-left:2px;}
.chave-quando{margin:6px 0 0;font-size:.66rem;color:var(--tinta-fraca);}

/* ---------------------------------------------------------------- avisos */
.aviso{padding:12px 13px;font-size:.82rem;line-height:1.5;
  background:var(--amarelo);box-shadow:4px 4px 0 var(--amarelo-sombra);}
.aviso.claro{background:transparent;box-shadow:inset 4px 0 0 0 var(--linha);
  padding-left:13px;color:var(--tinta-fraca);}
.vazio{padding:20px 4px;text-align:center;color:var(--tinta-fraca);font-size:.84rem;}

/* ---------------------------------------------------------------- modais */
.modal{position:fixed;inset:0;background:rgba(20,20,18,.78);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:14px;}
.modal .win{width:100%;max-width:470px;max-height:90vh;overflow-y:auto;
  background:var(--papel);padding:16px 18px 18px;}
.modal .titlebar{padding-top:0;}
.modal .winbody{padding-bottom:0;}

.campo{width:100%;font:inherit;font-size:16px;padding:11px;background:#fff;
  border:1.5px solid var(--tinta);color:var(--tinta);}
.campo.gols{font-family:"Anton",Impact,sans-serif;font-size:30px;text-align:center;padding:10px 4px;}
.linha-placar{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.linha-placar label, .rot{display:block;font-size:.56rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-fraca);}
.linha-placar label span{display:block;margin-bottom:5px;min-height:2.2em;color:var(--tinta);
  font-size:.76rem;text-transform:none;letter-spacing:0;font-weight:700;}
.rot .campo{margin-top:5px;}
.erro{margin:0;color:var(--vermelho);font-size:.72rem;font-weight:700;min-height:1em;}

/* ---------------------------------------------------------------- avisos de topo */
.novidade{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:40;
  display:flex;align-items:center;gap:11px;cursor:pointer;
  background:var(--tinta);color:var(--papel);border:0;padding:10px 11px 10px 16px;
  font:inherit;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  max-width:calc(100% - 28px);box-shadow:4px 4px 0 var(--vermelho);
  animation:sobe .22s ease-out;}
.novidade span{white-space:nowrap;}
.novidade b{background:var(--amarelo);color:var(--tinta);padding:5px 12px;white-space:nowrap;}
@keyframes sobe{from{opacity:0;transform:translate(-50%,14px);}to{opacity:1;transform:translate(-50%,0);}}

/* ---------------------------------------------------------------- rodape */
.rodape{text-align:center;font-size:.64rem;color:var(--tinta-fraca);line-height:1.6;margin:0;}

/* ------------------------------------------------------------ escolhas */
.escolha{display:block;}
.escolha span{display:block;font-size:.56rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-fraca);margin-bottom:5px;}
.campo.lista{appearance:none;-webkit-appearance:none;border-radius:999px;
  padding:12px 38px 12px 16px;font-weight:700;background:transparent;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--tinta) 50%),
                   linear-gradient(135deg,var(--tinta) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px;background-repeat:no-repeat;}

/* a lista de atleticas em grade, nao em pilha torta */
.marcas.grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;
  max-height:52vh;overflow-y:auto;padding:2px;}
.marcas.grade .chip{width:100%;justify-content:flex-start;padding:8px 12px;
  font-size:.68rem;min-height:44px;}
.marcas.grade .chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:360px){ .marcas.grade{grid-template-columns:1fr;} }

.abas.duas{grid-template-columns:1fr 1fr;}
h1.titulo .chapeu{display:block;}

/* cada grupo ganha uma moldura fina pra se separar do vizinho */
.win.grupo-box{border:1.5px solid var(--linha);padding:4px 13px 10px;}
.win.grupo-box .titlebar{padding-top:9px;}
.win.grupo-box .winbody{border-top-width:1.5px;}

/* os rabiscos de giz: poucos e pequenos, so textura */
.doodle{position:absolute;z-index:0;pointer-events:none;height:auto;
  filter:blur(2.6px);user-select:none;}
.linha-placar label span.lado{display:flex;align-items:center;gap:7px;min-height:30px;
  margin-bottom:6px;}
.linha-placar label span.lado b{font-size:.84rem;font-weight:700;line-height:1.15;
  text-transform:none;letter-spacing:0;color:var(--tinta);}
.linha-placar label span.lado .escudo{margin:0;flex:none;}
/* ------------------------------------------------------------ convite */
.passo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start;
  padding:10px 0;border-top:1px solid var(--linha);}
.passo .n{font-family:"Anton",Impact,sans-serif;font-size:1.3rem;line-height:1;
  color:var(--cor);width:26px;text-align:center;}
.passo b{display:block;font-size:.84rem;}
.passo .exemplo{display:flex;align-items:center;gap:7px;margin-top:7px;}
.passo .dica{display:block;margin-top:5px;font-size:.72rem;color:var(--tinta-fraca);
  line-height:1.45;}
.btn-sugerir.falso{font-style:normal;display:inline-block;opacity:.85;}
/* no exemplo nao entra escudo de atletica nenhuma: so A e B, pra ninguem
   achar que aquele jogo ja tem resultado */
.placar-ex .bolinha{width:26px;height:26px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--tinta);color:var(--papel);font-style:normal;
  font-size:.74rem;font-weight:700;}
.placar-ex em{font-family:"Anton",Impact,sans-serif;font-style:normal;font-size:1.5rem;
  color:var(--cor);}
.placar-ex small{color:var(--tinta-fraca);font-size:.74rem;}
.hide{display:none!important;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}
@media (max-width:380px){
  .app{padding-left:28px;padding-right:28px;}
  .beira{width:20px;}
}

/* ------------------------------------------------- volei: placar por set
   Uma linha por set, com o alvo de pontos escrito pequeno do lado do numero
   do set, porque o 3o vai a 15 e nao a 25 e quase ninguem lembra disso. */
.sets{display:grid;gap:6px;}
.set-cab, .set-linha{display:grid;grid-template-columns:4.6em 1fr 1fr;
  align-items:center;gap:8px;}
.set-cab span{font-size:0;}
.set-cab b{font-size:.6rem;font-weight:700;letter-spacing:.06em;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.set-linha > span{font-size:.62rem;font-weight:700;color:var(--tinta);line-height:1.1;}
.set-linha > span small{display:block;font-size:.5rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-fraca);}
.sets .campo.gols{text-align:center;}

/* a caixinha de prorrogacao (so no basquete) */
.caixa{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;
  border:1.5px solid var(--linha);border-radius:3px;cursor:pointer;}
.caixa input{width:19px;height:19px;flex:none;margin:0;accent-color:var(--tinta);}
.caixa span{font-size:.72rem;line-height:1.35;}

/* ------------------------------------------- selecao de atletica: visto e limpar */
/* o texto e o botao dividem a linha, mas o botao desce sozinho quando a tela
   e estreita: deixar ele sem encolher estourava a largura do modal no celular */
.cabeca-sel{display:flex;align-items:flex-start;justify-content:space-between;
  gap:8px;flex-wrap:wrap;}
.cabeca-sel p{margin:0;font-size:.8rem;line-height:1.45;flex:1 1 170px;min-width:0;}
.limpa{flex:0 0 auto;align-self:flex-start;border:1px solid var(--linha);background:transparent;
  color:var(--tinta-fraca);font:inherit;font-size:.54rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:999px;
  cursor:pointer;white-space:nowrap;}
.limpa:active{transform:scale(.96);}

/* o visto so aparece na atletica marcada; na desmarcada nao fica nada no lugar */
.chip.com-escudo .visto{margin-left:auto;flex:none;font-style:normal;font-size:.68rem;
  font-weight:700;line-height:1;}
.marcas.grade .chip{position:relative;}