/* ═══ CAMPO-UI — estilo do widget de montar aplicações ═══
   Mobile primeiro: o teste diário é usado no celular, e alvo de toque menor
   que 44px faz a pessoa errar o botão e achar que o site travou. */
.cu-aviso { background:#FFF3DC; border:1px solid #F0DFA8; color:#7A5B10;
  border-radius:10px; padding:9px 12px; font-size:12.5px; font-weight:800;
  letter-spacing:.04em; margin-bottom:10px; text-align:center; }
.cu-campo { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#F4F8F5; }
.cu-campo svg { display:block; width:100%; height:auto; cursor:crosshair; user-select:none; }
/* ── No celular o campo ROLA em vez de encolher ──
   Espremido em 390px, cada jarda ficava com 3,4px: acertar a jarda certa
   virava sorte. Com largura mínima de 900px a jarda passa de 7px e o campo
   rola de lado. O arraste horizontal rola (ver `touch-action` em
   `campo-ui.js`); o toque continua marcando. */
@media (max-width:760px){
  .cu-campo { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
  .cu-campo svg { min-width:900px; }
  /* A dica de que dá para arrastar: uma sombra na borda enquanto há mais
     campo fora da tela. */
  .cu-campo { background-image:linear-gradient(to left, rgba(0,0,0,.10), rgba(0,0,0,0) 22px); background-repeat:no-repeat;
    background-position:right; background-size:22px 100%; }
}
.cu-campo.rascunhando svg { cursor:cell; }
.cu-barra { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0 2px; }
.cu-dica { font-size:11.5px; color:var(--t3); }
.cu-l { display:block; font-size:11px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--t3); margin:14px 0 6px; }
.cu-chips { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.cu-chip, .cu-b, .cu-ok {
  min-height:44px; padding:10px 14px; border-radius:10px; border:1.5px solid var(--border);
  background:#fff; font:700 13.5px/1.2 var(--font); color:var(--t1); cursor:pointer; }
.cu-chip.sm { min-height:34px; padding:6px 11px; font-size:12px; }
.cu-chip.on { background:#16301C; border-color:#16301C; color:#fff; }
.cu-b { font-size:12.5px; font-weight:600; color:var(--t2); }
.cu-b.on { background:#16301C; border-color:#16301C; color:#fff; }
.cu-num { min-height:44px; width:92px; padding:8px 10px; border:1.5px solid var(--border);
  border-radius:10px; font:600 14px/1 var(--font); }
.cu-num:focus, .cu-chip:focus-visible, .cu-b:focus-visible { outline:none; border-color:#009C3B; }
.cu-ponto { font:800 15px/1 var(--font); color:#007A2E; min-width:64px; }
.cu-mont { border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-top:10px; background:#fff; }
.cu-add { margin-top:16px; }
.cu-ok { width:100%; background:#009C3B; border-color:#009C3B; color:#fff; font-size:15px; }
.cu-ok:disabled { background:#EDEFEC; border-color:var(--border); color:#A8B2AC; cursor:not-allowed; }
.cu-falta { margin-top:7px; font-size:12px; color:#7A5B10; }
.cu-lista { display:flex; flex-direction:column; gap:7px; }
.cu-item { position:relative; border:1.5px solid #009C3B; border-radius:11px; padding:10px 40px 10px 12px; background:#F2FAF5; }
.cu-item.opc { border-color:#BFD2C6; background:#FAFBFA; }
.cu-item-t { font-size:13.5px; font-weight:700; color:#16301C; line-height:1.45; }
.cu-x { position:absolute; top:8px; right:8px; width:30px; height:30px; border:0; background:none;
  color:var(--t3); font-size:15px; cursor:pointer; border-radius:8px; }
.cu-x:hover { background:#fff; color:#B3261E; }
@media (max-width:420px){
  .cu-chip, .cu-b, .cu-ok { padding:10px 12px; font-size:13px; }
  .cu-num { width:80px; }
}

/* ── Ferramentas do rascunho ── */
.cu-fer, .cu-cores { display:inline-flex; gap:3px; }
.cu-ferb { min-width:40px; min-height:40px; border:1.5px solid var(--border); background:#fff;
  border-radius:9px; font:600 15px/1 var(--font); color:var(--t2); cursor:pointer; }
.cu-ferb.on { background:#16301C; border-color:#16301C; color:#fff; }
.cu-corb { width:28px; height:28px; border:2px solid #fff; border-radius:50%; cursor:pointer;
  box-shadow:0 0 0 1.5px var(--border); padding:0; }
.cu-corb.on { box-shadow:0 0 0 2.5px #16301C; }
/* ── Fim de período: recolhido, no fim ── */
.cu-per { margin-top:16px; border-top:1px dashed var(--border); padding-top:12px; }
.cu-perb { display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:10px 13px;
  border:1.5px dashed var(--border); background:#fff; border-radius:10px;
  font:600 13.5px/1.3 var(--font); color:var(--t2); cursor:pointer; text-align:left; }
.cu-perb.on { border-style:solid; border-color:#16301C; color:#16301C; font-weight:800; }
.cu-perseta { margin-left:auto; opacity:.6; }
/* ── Campo da jarda em notação A/B ── */
.cu-jarda { width:88px; text-align:center; text-transform:uppercase; letter-spacing:.03em; font-weight:700; }
/* ── Inverter o campo (editor) ── */
.cu-inv { margin-left:auto; }

/* Try e free kick: mesma família da descida, com um tom próprio para não
   se confundirem com "1ª" e "2ª". */
.cu-chip.esp { border-style:dashed; }
.cu-chip.esp.on { border-style:solid; background:#1A53C9; border-color:#1A53C9; }

/* ── Aplicação após a próxima jogada: duas colunas ── */
.cu-mont.duplo { display:grid; grid-template-columns:1fr 1fr; gap:0; padding:0; }
.cu-col { padding:14px 16px; min-width:0; }
.cu-col.dir { border-left:2px solid var(--border); background:#FAFBF9; }
.cu-coltit { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#16301C; padding-bottom:9px; border-bottom:1px solid var(--border); margin-bottom:4px; }
.cu-col.dir .cu-coltit { color:#1A53C9; }
.cu-esp { margin-top:12px; }
.cu-espb { width:100%; min-height:44px; padding:11px 13px; border:1.5px solid #1A53C9;
  background:#fff; color:#1A53C9; border-radius:10px; font:700 13px/1.3 var(--font); cursor:pointer; }
.cu-espb.on { background:#1A53C9; color:#fff; }
.cu-espnota { font-size:12.5px; color:var(--t2); line-height:1.55; margin:10px 0 0; }
@media (max-width:820px){
  /* Lado a lado em tela estreita as duas colunas ficariam com 40px cada;
     empilhadas, o título de cada uma continua dizendo qual é qual. */
  .cu-mont.duplo { grid-template-columns:1fr; }
  .cu-col.dir { border-left:0; border-top:2px solid var(--border); }
}

/* ── Veredito da questão de aplicação no /testes ── */
.td-ap-lista { display:flex; flex-direction:column; gap:7px; margin-top:12px; }
.td-ap { border-radius:10px; padding:10px 13px; font-size:13.5px; font-weight:700;
  line-height:1.45; border:1.5px solid; }
.td-ap.ok { background:#EAF6EE; border-color:#009C3B; color:#0D5B2C; }
.td-ap.opc { background:#F6FAF7; border-color:#BFD2C6; color:#3D5A48; }
.td-ap.erro { background:#FDECEA; border-color:#E7A9A3; color:#7A1D16; }
.td-ap small { display:block; font-weight:600; opacity:.8; margin-top:3px; }

/* Seletor de cor livre: quatro fixas cobrem o comum, o resto se escolhe. */
.cu-corlivre { width:30px; height:30px; padding:0; border:0; background:none; cursor:pointer; border-radius:50%; }
.cu-corlivre::-webkit-color-swatch-wrapper { padding:0; }
.cu-corlivre::-webkit-color-swatch { border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1.5px var(--border); }
.cu-corlivre::-moz-color-swatch { border:2px solid #fff; border-radius:50%; }

/* ── Situações especiais: o caso raro, recolhido ── */
.cu-perlig { font-size:11.5px; font-weight:700; color:#1A53C9; margin-left:8px; }
.cu-espbox { margin-top:10px; padding:12px 14px; border:1px dashed var(--border); border-radius:11px; background:#FAFBF9; }
/* O campo que o próximo clique no campo vai preencher. Sem isto, com duas
   colunas na tela, o clique parecia aleatório. */
.cu-num.alvo, .cu-jarda.alvo { border-color:#009C3B; box-shadow:0 0 0 3px rgba(0,156,59,.16); }

/* ── Situações especiais: o caso raro, recolhido ── */
.cu-perlig { font-size:11.5px; font-weight:700; color:#1A53C9; margin-left:8px; }
.cu-espbox { margin-top:10px; padding:12px 14px; border:1px dashed var(--border); border-radius:11px; background:#FAFBF9; }
/* O campo que o próximo clique vai preencher. Com duas colunas na tela, o
   clique parecia aleatório sem esta marca. */
.cu-num.alvo, .cu-jarda.alvo { border-color:#009C3B; box-shadow:0 0 0 3px rgba(0,156,59,.16); }

/* Ícones: acompanham a linha do texto e a cor do botão. */
.rf-ic { vertical-align:-3px; margin-right:5px; flex:none; }
.cu-ferb .rf-ic, .cu-x .rf-ic, .cu-perseta .rf-ic { margin-right:0; vertical-align:-4px; }

/* ── Desclassificação: um campo por jogador ── */
.cu-desc { display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.cu-descitem { position:relative; display:inline-flex; align-items:center; }
.cu-descin { width:92px; text-align:center; text-transform:uppercase; font-weight:800;
  letter-spacing:.06em; padding-right:26px; }
.cu-descitem .cu-x { position:static; width:24px; height:24px; margin-left:-26px; z-index:1; }

/* ── Veredito: o resultado geral e o estado de cada aplicação ── */
.td-ver { display:flex; flex-direction:column; gap:4px; border-radius:12px; padding:14px 16px;
  margin-top:12px; border:1.5px solid; }
.td-ver b { display:flex; align-items:center; gap:7px; font-size:17px; font-weight:800; }
.td-ver b .rf-ic { margin:0; }
.td-ver span { font-size:13.5px; line-height:1.5; }
.td-ver-ok   { background:#E8F6EC; border-color:#009C3B; color:#0B5A2A; }
.td-ver-erro { background:#FDECEA; border-color:#D9534F; color:#7A1D16; }
.td-ver-livre { background:#F4F6FA; border-color:#C9D3E3; color:#34425A; }
/* Obrigatória esquecida: é o que faz a questão errar, e precisa saltar. */
.td-ap.falta { background:#FDECEA; border-color:#D9534F; color:#7A1D16; border-style:dashed; }
.td-ap.opc-ok { background:#F0F8F2; border-color:#8FCBA3; color:#1F5E36; }

/* Campo no histórico: só para rever a situação. */
.td-hist-campo { border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:12px; }
.td-hist-campo svg { display:block; width:100%; height:auto; }

/* ── Deslizante do campo (celular) ──
   Escondido no desktop, onde o campo cabe inteiro. No celular é o jeito
   principal de mover o campo: um polegar grande, fácil de pegar. */
.cu-rolo { display:none; }
@media (max-width:760px){
  .cu-rolo { display:block; padding:10px 4px 4px; }
  .cu-rolo input[type=range] { width:100%; height:34px; margin:0; background:transparent;
    -webkit-appearance:none; appearance:none; }
  .cu-rolo input[type=range]::-webkit-slider-runnable-track { height:10px; border-radius:6px; background:#D9E4DC; }
  .cu-rolo input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:64px; height:30px;
    border-radius:15px; background:#16301C; margin-top:-10px; box-shadow:0 2px 6px rgba(0,0,0,.25); }
  .cu-rolo input[type=range]::-moz-range-track { height:10px; border-radius:6px; background:#D9E4DC; }
  .cu-rolo input[type=range]::-moz-range-thumb { width:64px; height:30px; border-radius:15px; background:#16301C; border:0; }
}

/* Texto do ponto recusado: o campo fica vermelho e o motivo aparece ao lado. */
.cu-jarda.invalido { border-color:#D9534F !important; background:#FDF1EF; }
.cu-jerro { flex-basis:100%; font-size:11.5px; color:#9A2A22; font-weight:700; margin-top:2px; }