/* =====================================================================
   TT EVENTOS — sistema visual

   Carácter desportivo: contraste alto, maiúsculas condensadas, números
   em monoespaçado tabular, verde de sinal como única cor de acento e
   vermelho reservado a penalizações e erros.

   Assinatura: a faixa de minutos — marcas verticais que citam as
   colunas ao minuto de uma folha de controlo horário.

   Dois temas, comutados por [data-tema] no <html>.
   ===================================================================== */

/* ---------- Fichas ---------- */

:root {
  --acento:        #00C264;
  --acento-forte:  #00E074;
  --acento-fundo:  rgba(0, 194, 100, 0.12);
  --sinal:         #FF4B2B;
  --sinal-fundo:   rgba(255, 75, 43, 0.12);
  --ambar:         #FFB020;

  --chassis:       #0B0E10;
  --chassis-2:     #141A1D;
  --chassis-linha: #222A2E;
  --chassis-texto: #8A959B;

  --r:  3px;
  --l1: 4px;  --l2: 8px;  --l3: 14px;
  --l4: 22px; --l5: 34px; --l6: 56px;

  --lateral-w: 244px;
}

[data-tema="claro"] {
  --fundo:       #F1F3F1;
  --superficie:  #FFFFFF;
  --superficie-2:#E9ECEA;
  --texto:       #0B0E10;
  --texto-fraco: #59636A;
  --linha:       #DCE0DD;
  --linha-forte: #B7BEB9;
  --sombra:      0 1px 2px rgba(11, 14, 16, .06), 0 6px 18px rgba(11, 14, 16, .05);
}

[data-tema="escuro"] {
  --fundo:       #12181A;
  --superficie:  #1A2124;
  --superficie-2:#222B2F;
  --texto:       #E9EFEC;
  --texto-fraco: #8E999E;
  --linha:       #2A3438;
  --linha-forte: #3C4850;
  --sombra:      0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .3);
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, th, .marca, .botao, label, .etiqueta,
.nav-item, .nav-titulo, .barra-titulo, .rotulo {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  letter-spacing: .025em;
}

h1 { font-size: 32px; font-weight: 700; margin: 0; text-transform: uppercase; }
h2 { font-size: 21px; font-weight: 600; margin: 0 0 var(--l3); text-transform: uppercase; }

a { color: var(--acento); text-underline-offset: 2px; }

.mono, td.mono, .codigo {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Assinatura ---------- */

.faixa-minutos {
  height: 5px;
  flex: none;
  background-image: repeating-linear-gradient(
    to right, var(--acento) 0 1px, transparent 1px 11px);
  opacity: .5;
}

/* ---------- Estrutura ---------- */

.aplicacao { display: flex; min-height: 100vh; }

.principal {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Barra lateral ---------- */

.lateral {
  width: var(--lateral-w);
  flex: none;
  background: var(--chassis);
  border-right: 1px solid var(--chassis-linha);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.lateral-topo { padding: var(--l4) var(--l4) var(--l3); }

.marca {
  text-decoration: none;
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;
  color: #FFF;
  white-space: nowrap;
}
.marca-tt   { color: var(--acento); }
.marca-nome { margin-left: 6px; font-weight: 500; color: #E9EFEC; }

.lateral-nav { padding: var(--l4) var(--l3); flex: 1; overflow-y: auto; }

.nav-titulo {
  margin: 0 0 var(--l2);
  padding: 0 var(--l2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5D686E;
}
.nav-titulo:not(:first-child) { margin-top: var(--l4); }

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--l3);
  padding: 9px var(--l2);
  margin-bottom: 2px;
  border-radius: var(--r);
  color: var(--chassis-texto);
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  border-left: 3px solid transparent;
  transition: background .12s ease, color .12s ease;
}
.nav-item svg { width: 18px; height: 18px; flex: none; }
.nav-item:hover { background: var(--chassis-2); color: #FFF; }
.nav-item.ativo {
  background: var(--chassis-2);
  color: #FFF;
  border-left-color: var(--acento);
}
.nav-item.ativo svg { color: var(--acento); }
.nav-item:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

.lateral-conta {
  display: flex;
  align-items: center;
  gap: var(--l2);
  padding: var(--l3) var(--l4);
  border-top: 1px solid var(--chassis-linha);
}
.avatar {
  width: 34px; height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--acento);
  color: #06231A;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 700;
  border-radius: var(--r);
}
.conta-info { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.conta-nome {
  color: #E9EFEC; font-size: 14px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conta-papel {
  color: #5D686E; font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sair { color: #5D686E; display: grid; place-items: center; padding: 6px; border-radius: var(--r); }
.sair svg { width: 18px; height: 18px; }
.sair:hover { color: var(--sinal); background: var(--chassis-2); }

/* ---------- Barra superior ---------- */

.barra {
  height: 62px;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--l3);
  padding: 0 var(--l5);
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
  position: sticky;
  top: 0;
  z-index: 20;
}
.barra-titulo {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--texto-fraco);
  letter-spacing: .08em;
}

.icone-botao {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: var(--r);
  color: var(--texto-fraco);
  cursor: pointer;
  padding: 0;
}
.icone-botao svg { width: 18px; height: 18px; }
.icone-botao:hover { color: var(--texto); border-color: var(--linha-forte); }
.icone-botao:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

[data-tema="claro"] .ico-lua { display: none; }
[data-tema="escuro"] .ico-sol { display: none; }

.so-movel { display: none; }

.veu { display: none; }

/* ---------- Conteúdo ---------- */

.folha { flex: 1; padding: var(--l5); max-width: 1280px; width: 100%; }

.seccao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--l3);
  padding-bottom: var(--l3);
  margin-bottom: var(--l5);
  border-bottom: 2px solid var(--texto);
  flex-wrap: wrap;
}

/* ---------- Cartões de indicador ---------- */

.cartoes {
  display: grid;
  gap: var(--l3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.cartao {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  padding: var(--l3) var(--l4) var(--l4);
  overflow: hidden;
}
.cartao::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--acento);
}
.cartao .rotulo {
  display: block;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-fraco);
  letter-spacing: .07em;
  margin-bottom: var(--l1);
}
.cartao .valor {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 38px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

/* ---------- Tabelas ---------- */

.tabela {
  width: 100%;
  border-collapse: collapse;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  overflow: hidden;
}
.tabela th {
  text-align: left;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-fraco);
  letter-spacing: .07em;
  padding: var(--l2) var(--l3);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}
.tabela td {
  padding: 11px var(--l3);
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
}
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--superficie-2); }

.vazio {
  background: var(--superficie);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--r);
  padding: var(--l6);
  text-align: center;
  color: var(--texto-fraco);
}

.inativo { color: var(--texto-fraco); opacity: .7; }

/* ---------- Etiquetas ---------- */

.etiqueta {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 2px 8px;
  border-radius: 2px;
  border: 1px solid var(--linha-forte);
  color: var(--texto-fraco);
}
.etiqueta-master {
  color: var(--acento);
  border-color: var(--acento);
  background: var(--acento-fundo);
}
.etiqueta-organizacao { color: var(--texto); border-color: var(--linha-forte); }
.etiqueta-piloto { color: var(--texto-fraco); }

/* ---------- Formulários ---------- */

.painel {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  padding: var(--l5);
  max-width: 680px;
  box-shadow: var(--sombra);
}

.campo { margin-bottom: var(--l4); }
.campo label,
label.rotulo {
  display: block;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-fraco);
  letter-spacing: .07em;
  margin-bottom: 5px;
}
.campo input[type=text],
.campo input[type=email],
.campo input[type=tel],
.campo input[type=password],
.campo input[type=number],
.campo input[type=date],
.campo select,
.campo textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r);
  background: var(--fundo);
  font-family: inherit;
  font-size: 15px;
  color: var(--texto);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-fundo);
}
.campo .ajuda, p.ajuda { font-size: 13px; color: var(--texto-fraco); margin: 5px 0 0; }

.dupla { display: grid; gap: var(--l3); grid-template-columns: 1fr 1fr; }

/* ---------- Botões ---------- */

.botao {
  display: inline-block;
  background: var(--acento);
  color: #06231A;
  border: 1px solid var(--acento);
  border-radius: var(--r);
  padding: 9px 22px;
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s ease, transform .06s ease;
}
.botao:hover { background: var(--acento-forte); border-color: var(--acento-forte); }
.botao:active { transform: translateY(1px); }
.botao:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }

.botao-claro {
  background: transparent;
  color: var(--texto);
  border-color: var(--linha-forte);
}
.botao-claro:hover { background: var(--superficie-2); border-color: var(--texto-fraco); }

.botao-perigo { background: var(--sinal); border-color: var(--sinal); color: #FFF; }

.botao-largo { width: 100%; text-align: center; }

.acoes { display: flex; gap: var(--l2); align-items: center; margin-top: var(--l5); flex-wrap: wrap; }
.ligacao-discreta { color: var(--texto-fraco); font-size: 14px; }

/* ---------- Permissões ---------- */

.grupo-permissoes {
  border: 1px solid var(--linha);
  border-radius: var(--r);
  padding: var(--l3) var(--l4);
  margin-bottom: var(--l3);
  background: var(--fundo);
}
.grupo-permissoes h3 {
  margin: 0 0 var(--l2);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--acento);
}
.permissao {
  display: flex;
  gap: var(--l2);
  align-items: flex-start;
  padding: 5px 0;
  cursor: pointer;
}
.permissao input { margin-top: 4px; accent-color: var(--acento); }
.permissao span { font-size: 14px; }

/* ---------- Avisos ---------- */

.aviso {
  padding: var(--l2) var(--l3);
  margin-bottom: var(--l3);
  border-left: 3px solid var(--acento);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--acento-fundo);
  font-size: 14px;
}
.aviso-erro { border-left-color: var(--sinal); background: var(--sinal-fundo); }

/* ---------- Entrada (login / registo) ---------- */

.v-entrada {
  background: var(--chassis);
  background-image:
    radial-gradient(circle at 20% 0%, rgba(0, 194, 100, .10), transparent 55%),
    radial-gradient(circle at 90% 100%, rgba(0, 194, 100, .06), transparent 45%);
  background-attachment: fixed;
}

.entrada {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--l4);
  gap: var(--l3);
}

.cartao-entrada {
  background: var(--superficie);
  width: 100%;
  max-width: 410px;
  border-radius: var(--r);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.cartao-entrada::before {
  content: '';
  display: block;
  height: 5px;
  background-image: repeating-linear-gradient(
    to right, var(--acento) 0 1px, transparent 1px 11px);
}
.cartao-entrada .interior { padding: var(--l6) var(--l5) var(--l5); }

.entrada-marca {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
}
.entrada-marca .marca-tt { color: var(--acento); }
.entrada-sub {
  color: var(--texto-fraco);
  font-size: 14px;
  margin: var(--l1) 0 var(--l5);
  padding-bottom: var(--l4);
  border-bottom: 1px solid var(--linha);
}

.google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--l2);
  width: 100%;
  padding: 11px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r);
  background: var(--superficie);
  color: var(--texto);
  text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
}
.google:hover { border-color: var(--texto-fraco); background: var(--superficie-2); }
.google svg { width: 18px; height: 18px; }

.separador {
  display: flex;
  align-items: center;
  gap: var(--l2);
  color: var(--texto-fraco);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: var(--l4) 0;
}
.separador::before, .separador::after {
  content: ''; flex: 1; height: 1px; background: var(--linha);
}

.entrada .aviso { max-width: 410px; width: 100%; }

.rodape {
  padding: var(--l4) var(--l5);
  color: var(--texto-fraco);
  font-size: 13px;
}
.v-entrada .rodape { text-align: center; color: #5D686E; }

/* ---------- Móvel ---------- */

@media (max-width: 900px) {
  .so-movel { display: grid; }

  .lateral {
    position: fixed;
    z-index: 40;
    left: 0; top: 0;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  body.menu-aberto .lateral { transform: translateX(0); }

  .veu {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 30;
  }
  .veu[hidden] { display: none; }

  .barra { padding: 0 var(--l3); }
  .folha { padding: var(--l4) var(--l3) var(--l5); }
  .painel { padding: var(--l4); }
  .dupla { grid-template-columns: 1fr; }
  h1 { font-size: 26px; }
  .seccao { margin-bottom: var(--l4); }
  .tabela-envolve { overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Sub-navegação ---------- */

.subnav {
  display: flex;
  gap: var(--l1);
  margin: calc(var(--l5) * -1 + var(--l2)) 0 var(--l4);
  border-bottom: 1px solid var(--linha);
  flex-wrap: wrap;
}
.subnav-item {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-fraco);
  text-decoration: none;
  padding: var(--l2) var(--l3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.subnav-item:hover { color: var(--texto); }
.subnav-item.ativo { color: var(--texto); border-bottom-color: var(--acento); }

.contexto {
  margin: calc(var(--l4) * -1) 0 var(--l4);
  color: var(--texto-fraco);
  font-size: 14px;
}

/* ---------- Logótipos ---------- */

.logo-campo { display: flex; gap: var(--l3); align-items: flex-start; }

.logo-caixa {
  width: 96px;
  height: 72px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--fundo);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--r);
  overflow: hidden;
  padding: 6px;
}
.logo-caixa img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-vazio {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-fraco);
}

.logo-controlos { flex: 1; min-width: 0; }
.logo-controlos input[type=file] {
  width: 100%;
  font-size: 13px;
  color: var(--texto-fraco);
}
.logo-controlos input[type=file]::file-selector-button {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 7px 14px;
  margin-right: 10px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r);
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
}
.logo-controlos input[type=file]::file-selector-button:hover {
  border-color: var(--acento);
  color: var(--acento);
}

.logo-mini {
  width: 34px; height: 26px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: var(--l2);
}

@media (max-width: 900px) {
  .subnav { margin-top: calc(var(--l4) * -1 + var(--l2)); }
  .logo-campo { flex-direction: column; }
}

/* ---------- Painel: blocos e indicadores ---------- */

/*
   Dois pesos de indicador. Os de operação mudam ao minuto e têm cartão
   com acento; os de estrutura mudam uma vez por época e ficam discretos,
   para não competirem pela atenção em dia de prova.
*/

.bloco-titulo {
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--texto-fraco);
  margin: 0 0 var(--l3);
  padding-bottom: var(--l2);
  border-bottom: 1px solid var(--linha);
}

.sub-titulo {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-fraco);
  margin: var(--l5) 0 var(--l3);
}

.cartao .valor-unidade {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-fraco);
  margin-left: 6px;
  vertical-align: 6px;
}

.cartao-nota {
  margin: var(--l1) 0 0;
  font-size: 13px;
  color: var(--texto-fraco);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cartoes-discretos {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  overflow: hidden;
}

.cartao-discreto {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--l2);
  padding: var(--l3) var(--l4);
  border-right: 1px solid var(--linha);
}
.cartao-discreto:last-child { border-right: 0; }

.cartao-discreto .rotulo {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-fraco);
}
.cartao-discreto .valor {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

@media (max-width: 900px) {
  .cartao-discreto { border-right: 0; border-bottom: 1px solid var(--linha); }
  .cartao-discreto:last-child { border-bottom: 0; }
}

/* ---------- Resumo de conteúdo de uma secção ---------- */

.resumo {
  display: flex;
  align-items: center;
  gap: var(--l2);
  flex-wrap: wrap;
  margin: calc(var(--l4) * -1) 0 var(--l4);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-fraco);
}
.resumo-valor {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  letter-spacing: 0;
}
.resumo-sep { color: var(--linha-forte); margin: 0 2px; }

/* ---------- Percurso da inscrição ---------- */

.percurso {
  display: flex;
  gap: var(--l1);
  flex-wrap: wrap;
  margin-top: var(--l3);
  padding-top: var(--l3);
  border-top: 1px solid var(--linha);
}

.percurso-passo {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--linha);
  border-radius: 100px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-fraco);
}
.percurso-passo.feito {
  border-color: var(--acento);
  color: var(--texto);
  background: var(--acento-fundo);
}

.percurso-marca {
  width: 20px; height: 20px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--superficie-2);
  color: var(--texto-fraco);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
}
.percurso-passo.feito .percurso-marca { background: var(--acento); color: #06231A; }


/* =====================================================================
   ZONA PÚBLICA

   A montra. Regras que a governam:

   - o piloto vem inscrever-se, por isso as provas vêm antes dos
     campeonatos e o botão de inscrição é a única coisa em amarelo;
   - maiúsculas só em títulos curtos — em nomes de provas destroem a
     leitura, sobretudo no telemóvel;
   - um cartão por prova, com a data em bloco à esquerda, porque é por
     data que se procura uma prova.

   Escura sempre, com linguagem própria e independente do backoffice.
   ===================================================================== */

.v-publico {
  --p-fundo:   #0F0F10;
  --p-bloco:   #191919;
  --p-bloco-2: #202020;
  --p-linha:   #2C2C2C;
  --p-texto:   #F5F5F3;
  --p-fraco:   #9C9C98;
  --p-sinal:   #E8FF3A;

  background: var(--p-fundo);
  color: var(--p-texto);
  font-size: 16px;
}

.publico-largura,
.publico,
.publico-centro { max-width: 1120px; margin: 0 auto; }

/* ---------- Topo ---------- */

.topo-publico {
  background: var(--p-fundo);
  border-bottom: 1px solid var(--p-linha);
  position: sticky;
  top: 0;
  z-index: 30;
}

.topo-publico-interior {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topo-publico .marca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--p-texto);
  text-decoration: none;
  white-space: nowrap;
}
.topo-publico .marca-tt {
  background: var(--p-sinal);
  color: #111;
  padding: 1px 8px;
  letter-spacing: .04em;
}
.topo-publico .marca-nome { font-weight: 500; letter-spacing: .1em; }

.acoes-publicas { display: flex; align-items: center; gap: 14px; }

.ligacao-topo {
  font-size: 15px;
  color: var(--p-fraco);
  text-decoration: none;
  white-space: nowrap;
}
.ligacao-topo:hover { color: var(--p-texto); }

.v-publico .botao {
  background: var(--p-sinal);
  border: 1px solid var(--p-sinal);
  color: #111;
  border-radius: 2px;
  font-size: 16px;
  padding: 9px 20px;
  white-space: nowrap;
}
.v-publico .botao:hover { background: #F2FF6B; border-color: #F2FF6B; }

.botao-pequeno { font-size: 14px !important; padding: 7px 14px !important; }

.v-publico .botao-claro {
  background: transparent;
  border-color: var(--p-linha);
  color: var(--p-texto);
}

/* ---------- Estrutura ---------- */

.publico, .publico-centro { padding: 28px 20px 64px; }



/* ---------- Capa ---------- */

.capa {
  padding: 10px 0 30px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--p-linha);
}
.capa h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.05;
  margin: 0 0 10px;
  color: var(--p-texto);
}
.capa p { margin: 0; color: var(--p-fraco); font-size: 16px; max-width: 46ch; line-height: 1.6; }

/* ---------- Secções ---------- */

.seccao-publica { margin-bottom: 44px; }

.titulo-seccao {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--p-fraco);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--p-linha);
}
.titulo-seccao .contador {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--p-sinal);
}

/* ---------- Cartão de prova ---------- */

.lista-cartoes { display: flex; flex-direction: column; gap: 8px; }

.cartao-prova {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--p-bloco);
  border: 1px solid transparent;
  border-left: 3px solid var(--p-linha);
  padding: 14px 16px;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.cartao-prova:hover { background: var(--p-bloco-2); border-left-color: var(--p-fraco); }

/* Quando o cartão tem botão próprio, a zona clicável é o resto da linha —
   assim um clique no cartão abre a prova e o botão vai direto à inscrição. */
.cartao-prova-ligacao {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
}
.cartao-prova.destaque { border-left-color: var(--p-sinal); }
.cartao-prova.anulada { opacity: .55; }

.cartao-prova-data {
  flex: none;
  width: 52px;
  text-align: center;
  line-height: 1.1;
}
.cartao-prova-data .dia {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 24px;
  font-weight: 500;
  color: var(--p-texto);
}
.cartao-prova-data .mes {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--p-sinal);
}
.cartao-prova-data .ano {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--p-fraco);
}

.cartao-prova-corpo { flex: 1; min-width: 0; }
.cartao-prova-nome {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: var(--p-texto);
  line-height: 1.3;
  margin-bottom: 2px;
}
.cartao-prova-meta {
  display: block;
  font-size: 14px;
  color: var(--p-fraco);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cartao-prova-acao { flex: none; display: flex; align-items: center; }
.cartao-prova-acao .seta { color: var(--p-fraco); font-size: 18px; }
.cartao-prova:hover .seta { color: var(--p-sinal); }

/* ---------- Campeonatos ---------- */

.grelha-campeonatos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.cartao-campeonato {
  background: var(--p-bloco);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color .12s ease;
}
.cartao-campeonato:hover { border-color: var(--p-sinal); }

/* Fundo branco obrigatório: os logótipos das federações são desenhados
   para papel e desaparecem sobre preto. */
.cartao-campeonato-logo {
  aspect-ratio: 16 / 9;
  padding: 14px;
}
.cartao-campeonato-logo .logo-vazio {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  color: #666;
  text-align: center;
  line-height: 1.2;
}

.cartao-campeonato-corpo { padding: 12px 14px; }
.cartao-campeonato-titulo {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--p-texto);
  line-height: 1.35;
  margin-bottom: 3px;
}
.cartao-campeonato-meta {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--p-fraco);
}

/* ---------- Migalhas ---------- */

.migalhas {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--p-fraco);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.migalhas a { color: var(--p-fraco); text-decoration: none; }
.migalhas a:hover { color: var(--p-sinal); }

/* ---------- Cabeçalho de prova ---------- */

/*
   A informação essencial de uma prova são quatro coisas: o que é, quando
   é, quem organiza, e como me inscrevo. Ficam todas no primeiro ecrã,
   com o botão de inscrição à direita em ecrã largo e por baixo no
   telemóvel.

   O botão vê-se sempre que as inscrições estão abertas, seja quem for
   que esteja a ver — é informação da página. Quem não se pode inscrever
   descobre ao clicar; esconder o botão faz a página parecer partida.
*/

.prova-cabecalho {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-bottom: 26px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--p-linha);
  flex-wrap: wrap;
}

.prova-cabecalho-logo {
  flex: none;
  width: 116px;
  height: 88px;
  padding: 10px;
}

.prova-cabecalho-texto { flex: 1; min-width: 220px; }

.prova-cabecalho h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 38px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 8px;
  color: var(--p-texto);
}
.prova-data {
  margin: 0 0 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  color: var(--p-sinal);
}
.prova-organiza { margin: 0; font-size: 14px; color: var(--p-fraco); }

.prova-cabecalho-acao {
  flex: none;
  text-align: right;
  min-width: 180px;
}
.prova-cabecalho-acao .ajuda { margin-top: 8px; text-align: right; }

.botao-grande {
  font-size: 19px !important;
  padding: 14px 32px !important;
}

/* ---------- Atalhos ---------- */

.prova-atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2px;
  background: var(--p-linha);
  border: 1px solid var(--p-linha);
  margin-bottom: 34px;
}

.prova-atalhos a,
.prova-atalhos .atalho-estatico {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--p-bloco);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--p-texto);
}
.prova-atalhos a:hover { background: var(--p-bloco-2); }

.atalho-numero {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 24px;
  line-height: 1;
  color: var(--p-sinal);
}
.atalho-icone { font-size: 20px; color: var(--p-sinal); line-height: 1; }
.atalho-texto { font-size: 15px; }
.prova-atalhos a:hover .atalho-texto { color: var(--p-sinal); }

/* ---------- Fichas de entidade ---------- */

.fichas-lado-a-lado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.ficha-entidade {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--p-bloco);
  padding: 16px;
  text-decoration: none;
  color: var(--p-texto);
}
a.ficha-entidade:hover { background: var(--p-bloco-2); }

.ficha-entidade-logo {
  flex: none;
  width: 92px;
  height: 66px;
  padding: 9px;
}
.ficha-entidade-texto { min-width: 0; }
.ficha-entidade-nome { margin: 0 0 4px; font-size: 15px; font-weight: 600; }

/* ---------- Cabeçalho de campeonato ---------- */

.capa-campeonato {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--p-linha);
  flex-wrap: wrap;
}
.capa-campeonato-logo {
  flex: none;
  width: 116px;
  height: 88px;
  padding: 10px;
}
.capa-campeonato-logo.pequeno { width: 78px; height: 60px; }
.capa-campeonato-texto { flex: 1; min-width: 220px; }
.capa-campeonato h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 34px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 4px;
  color: var(--p-texto);
}

/* Compatibilidade com a lista de inscritos, que reaproveita estes nomes. */
.capa-prova { display: flex; align-items: center; gap: 20px;
  padding-bottom: 24px; margin-bottom: 24px;
  border-bottom: 1px solid var(--p-linha); flex-wrap: wrap; }
.capa-prova-texto { flex: 1; min-width: 220px; }
.capa-prova h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 32px; font-weight: 700; text-transform: uppercase;
  line-height: 1.1; margin: 0 0 4px; color: var(--p-texto);
}
.capa-prova-data { margin: 0; font-family: 'IBM Plex Mono', monospace;
  font-size: 15px; color: var(--p-sinal); }
.capa-prova-local { margin: 2px 0 0; color: var(--p-fraco); font-size: 15px; }

.texto-corrido { color: var(--p-texto); line-height: 1.7; margin: 0; max-width: 68ch; }

.lista-dias { list-style: none; margin: 0; padding: 0; }
.lista-dias li {
  display: flex;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--p-linha);
  font-size: 15px;
}
.lista-dias li:last-child { border-bottom: 0; }
.lista-dias .mono { color: var(--p-sinal); min-width: 56px; }

/* ---------- Anúncios ---------- */

.anuncios { display: flex; flex-direction: column; gap: 10px; }
.anuncios-topo { margin-bottom: 30px; }
.anuncios-meio, .anuncios-rodape { margin: 34px 0; }

.anuncio { background: #FFF; line-height: 0; }
.anuncio img { width: 100%; height: auto; display: block; }

.anuncio-vago {
  border: 1px dashed var(--p-linha);
  padding: 22px 18px;
  text-align: center;
  line-height: 1.6;
}
.anuncio-vago-titulo {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--p-sinal);
  margin-bottom: 4px;
}
.anuncio-vago span:last-child { font-size: 13px; color: var(--p-fraco); }

/* ---------- Rodapé ---------- */

.rodape-publico {
  border-top: 1px solid var(--p-linha);
  color: var(--p-fraco);
  font-size: 14px;
}
.rodape-publico-interior {
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 24px 40px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.rodape-publico strong { color: var(--p-texto); }
.rodape-publico a { color: var(--p-fraco); }
.rodape-publico a:hover { color: var(--p-sinal); }

/* ---------- Telemóvel ---------- */

@media (max-width: 640px) {
  .topo-publico-interior { padding: 12px 16px; }

  .prova-cabecalho { gap: 16px; padding-bottom: 20px; }
  .prova-cabecalho-logo { width: 84px; height: 64px; padding: 8px; }
  .prova-cabecalho h1 { font-size: 26px; }
  .prova-cabecalho-acao {
    width: 100%;
    text-align: left;
    padding-top: 4px;
    border-top: 1px solid var(--p-linha);
  }
  .prova-cabecalho-acao .botao { display: block; text-align: center; }
  .prova-cabecalho-acao .ajuda { text-align: center; }

  .prova-atalhos { grid-template-columns: 1fr; margin-bottom: 26px; }
  .capa-campeonato h1, .capa-prova h1 { font-size: 24px; }
  .capa-campeonato-logo { width: 84px; height: 64px; padding: 8px; }
  .topo-publico .marca { font-size: 17px; }
  .publico, .publico-centro { padding: 22px 16px 48px; }

  .capa { padding: 4px 0 26px; }
  .capa h1 { font-size: 30px; }
  .capa p { font-size: 15px; }

  .cartao-prova { gap: 12px; padding: 12px 14px; }
  .cartao-prova-data { width: 44px; }
  .cartao-prova-data .dia { font-size: 21px; }
  .cartao-prova-nome { font-size: 16px; }
  .cartao-prova-meta { font-size: 13px; }

  .grelha-campeonatos { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cartao-campeonato-logo { padding: 12px; }
  .cartao-campeonato-corpo { padding: 10px; }

  .capa-prova h1, .capa-campeonato h1 { font-size: 24px; }
  .capa-prova-logo { width: 84px; height: 64px; padding: 8px; }


  .rodape-publico-interior { flex-direction: column; gap: 8px; }
}
/* ---------- Texto legal ---------- */

.texto-legal { max-width: 720px; font-size: 15px; line-height: 1.7; }
.texto-legal h2 {
  font-size: 18px;
  margin: var(--l5) 0 var(--l2);
  color: var(--p-sinal, var(--acento));
}
.texto-legal p { margin: 0 0 var(--l3); }
.texto-legal ul { margin: 0 0 var(--l3); padding-left: 20px; }
.texto-legal li { margin-bottom: 6px; }

/* Colunas da página de prova — a lateral só existe em ecrãs largos. */
.prova-principal { min-width: 0; }
.prova-lateral { min-width: 0; }


/* ---------- Página inicial em ecrã largo ---------- */

/*
   No telemóvel tudo empilha. A partir de 900px a página passa a duas
   colunas: o calendário à esquerda, onde está a acção, e os campeonatos
   e a publicidade à direita. Sem isto, num ecrã grande fica uma coluna
   fina no meio do vazio.
*/

.capa {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 34px;
  padding: 18px 0 30px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--p-linha);
  flex-wrap: wrap;
}
.capa h1 { font-size: 46px; }



@media (min-width: 900px) {
    .coluna-lateral .grelha-campeonatos { grid-template-columns: 1fr; }
  .coluna-lateral .cartao-campeonato { flex-direction: row; align-items: center; }
  .coluna-lateral .cartao-campeonato-logo {
    width: 84px;
    height: 62px;
    flex: none;
    padding: 8px;
  }
  .coluna-lateral .cartao-campeonato-corpo { flex: 1; min-width: 0; padding: 10px 12px; }
}

.separador-mes {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 22px 0 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--p-texto);
}
.separador-mes:first-child { margin-top: 0; }
.separador-mes span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--p-fraco);
}

/* Em ecrã largo o cartão tem espaço para respirar. */
@media (min-width: 900px) {
  .cartao-prova { padding: 16px 20px; gap: 20px; }
  .cartao-prova-data { width: 58px; }
  .cartao-prova-data .dia { font-size: 27px; }
  .cartao-prova-nome { font-size: 18px; }
  .seccao-publica { margin-bottom: 40px; }
}

@media (max-width: 640px) {
  .capa { display: block; padding: 4px 0 20px; margin-bottom: 20px; }
  .capa h1 { font-size: 30px; }
        }

/* ---------- Caixas de logótipo ----------

   Todas seguem a mesma regra: fundo branco (os logótipos das federações
   são desenhados para papel), a imagem esticada aos 100% da caixa e
   `object-fit: contain` a tratar do enquadramento. Assim nenhum logótipo
   é cortado, seja qual for a proporção do original.
*/

.organizador-logo,
.capa-prova-logo,
.capa-campeonato-logo,
.cartao-campeonato-logo,
.ficha-entidade-logo,
.prova-cabecalho-logo {
  background: #FFFFFF;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.organizador-logo img,
.capa-prova-logo img,
.capa-campeonato-logo img,
.cartao-campeonato-logo img,
.ficha-entidade-logo img,
.prova-cabecalho-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.coluna-principal { min-width: 0; }
.coluna-lateral { min-width: 0; }

.etiqueta-anulada {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #FF6B4B;
  border: 1px solid #FF6B4B;
  padding: 3px 12px;
}

/* No telemóvel o botão do cartão passa para baixo, à largura toda. */
@media (max-width: 560px) {
  .cartao-prova { flex-wrap: wrap; }
  .cartao-prova-ligacao { width: 100%; }
  .cartao-prova .botao {
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }
}

/* =====================================================================
   BACKOFFICE — blocos repostos
   ===================================================================== */

/* ---------- Sub-itens contextuais da barra lateral ---------- */

.nav-titulo-contexto {
  margin-top: var(--l4);
  padding-top: var(--l3);
  border-top: 1px solid var(--chassis-linha);
  color: var(--acento);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-subitem {
  display: block;
  padding: 6px var(--l2) 6px 34px;
  margin-bottom: 1px;
  border-radius: var(--r);
  color: var(--chassis-texto);
  text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-left: 3px solid transparent;
  position: relative;
}
.nav-subitem::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 50%;
  width: 6px;
  height: 1px;
  background: #3B454A;
}
.nav-subitem:hover { background: var(--chassis-2); color: #FFF; }
.nav-subitem.ativo { color: #FFF; border-left-color: var(--acento); background: var(--chassis-2); }
.nav-subitem.ativo::before { background: var(--acento); }

/* ---------- Fichas em consulta ---------- */

.so-consulta { border: 0; margin: 0; padding: 0; min-width: 0; }
.so-consulta input,
.so-consulta select,
.so-consulta textarea {
  background: transparent !important;
  border-color: transparent !important;
  border-bottom: 1px solid var(--linha) !important;
  border-radius: 0 !important;
  color: var(--texto) !important;
  padding-left: 0 !important;
  opacity: 1;
  -webkit-text-fill-color: var(--texto);
}
.so-consulta input[type=checkbox] { opacity: .6; }
.so-consulta input[type=file] { display: none; }
.so-consulta .logo-controlos .ajuda { display: none; }

.obrigatorio { color: var(--sinal); font-weight: 600; margin-left: 2px; }

/* ---------- Três números: inscritos / validados / verificados ---------- */

.inscricoes-mini a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  text-decoration: none;
  white-space: nowrap;
}
.inscricoes-mini a:hover { color: var(--acento); }
.inscricoes-mini .sep { color: var(--linha-forte); margin: 0 3px; }

/* =====================================================================
   VERIFICAÇÃO AO BALCÃO

   Usada de pé, com pressa, muitas vezes num tablet e com fila à espera.
   Uma linha por piloto, tudo à vista, e o botão sempre no mesmo sítio à
   direita — a mão vai lá sem olhar.
   ===================================================================== */

/* ---------- Barra de comando ---------- */

.verif-comando {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  margin-bottom: var(--l4);
  overflow: hidden;
}

.verif-linha-1 {
  display: flex;
  align-items: center;
  gap: var(--l3);
  padding: var(--l3) var(--l4);
  border-bottom: 1px solid var(--linha);
  flex-wrap: wrap;
}

.verif-tipos { display: flex; gap: 0; }
.verif-tipos a {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-fraco);
  text-decoration: none;
  padding: 8px 20px;
  border: 1px solid var(--linha-forte);
  background: transparent;
}
.verif-tipos a + a { border-left: 0; }
.verif-tipos a:first-child { border-radius: var(--r) 0 0 var(--r); }
.verif-tipos a:last-child { border-radius: 0 var(--r) var(--r) 0; }
.verif-tipos a:hover { color: var(--texto); }
.verif-tipos a.ativo {
  background: var(--acento);
  border-color: var(--acento);
  color: #06231A;
}

.verif-procura { display: flex; gap: var(--l2); flex: 1; min-width: 260px; }
.verif-procura input[type=text] {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  font-size: 16px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r);
  background: var(--fundo);
  color: var(--texto);
  font-family: inherit;
}
.verif-procura input[type=text]:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-fundo);
}

.verif-progresso {
  margin-left: auto;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-fraco);
  white-space: nowrap;
}
.verif-progresso strong {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 20px;
  color: var(--texto);
  font-weight: 500;
}

.verif-linha-2 {
  display: flex;
  align-items: center;
  gap: var(--l4);
  padding: var(--l2) var(--l4);
  background: var(--fundo);
  flex-wrap: wrap;
}

.verif-opcoes { display: flex; align-items: center; gap: var(--l3); flex-wrap: wrap; }
.verif-opcoes .rotulo {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-fraco);
}
.verif-opcoes label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.verif-opcoes input { accent-color: var(--acento); }

.verif-lote { display: flex; align-items: center; gap: var(--l2); margin-left: auto; flex-wrap: wrap; }
.verif-lote .botao { padding: 7px 16px; font-size: 15px; }

/* ---------- Tabela de pilotos ---------- */

.verif-tabela {
  width: 100%;
  border-collapse: collapse;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  overflow: hidden;
}

.verif-tabela th {
  text-align: left;
  text-transform: uppercase;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--texto-fraco);
  padding: var(--l2) var(--l3);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}

.verif-tabela td {
  padding: 10px var(--l3);
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
}
.verif-tabela tr:last-child td { border-bottom: 0; }
.verif-tabela tbody tr:hover { background: var(--superficie-2); }
.verif-tabela tr.encontrado { background: var(--acento-fundo); }
.verif-tabela tr.encontrado:hover { background: var(--acento-fundo); }

.verif-escolha { width: 42px; }
.verif-escolha input { width: 18px; height: 18px; accent-color: var(--acento); cursor: pointer; }

.verif-numero {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  width: 70px;
}

.verif-nome { font-weight: 600; font-size: 15px; }
.verif-classe { color: var(--texto-fraco); font-size: 14px; white-space: nowrap; }
.verif-maquina { color: var(--texto-fraco); font-size: 14px; }

.verif-alertas { width: 1%; white-space: nowrap; }
.marca-alerta {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 2px;
  margin-right: 4px;
  border: 1px solid var(--ambar);
  color: var(--ambar);
}
.marca-alerta.grave { border-color: var(--sinal); color: var(--sinal); }

.verif-acao { width: 1%; white-space: nowrap; text-align: right; }
.verif-acao .botao { padding: 8px 20px; font-size: 16px; }
.verif-acao a { font-size: 13px; margin-left: var(--l2); }

/* ---------- Telemóvel e tablet ---------- */

@media (max-width: 900px) {
  .verif-linha-1 { padding: var(--l3); }
  .verif-linha-2 { padding: var(--l2) var(--l3); }
  .verif-progresso { margin-left: 0; width: 100%; }
  .verif-lote { margin-left: 0; width: 100%; }

  /* A tabela vira cartões: cada linha passa a bloco, com os rótulos
     das colunas antes de cada valor. */
  .verif-tabela thead { display: none; }
  .verif-tabela, .verif-tabela tbody, .verif-tabela tr, .verif-tabela td { display: block; width: auto; }
  .verif-tabela { border: 0; background: transparent; }
  .verif-tabela tr {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--r);
    margin-bottom: var(--l2);
    padding: var(--l3);
    position: relative;
  }
  .verif-tabela td { border: 0; padding: 2px 0; }
  .verif-escolha { position: absolute; top: var(--l3); right: var(--l3); width: auto; }
  .verif-numero { font-size: 26px; }
  .verif-acao { text-align: left; padding-top: var(--l2) !important; }
  .verif-acao .botao { width: 100%; text-align: center; }
  .verif-acao a { display: inline-block; margin: var(--l2) var(--l3) 0 0; }
}

/* ---------- Versão e histórico ---------- */

.rodape-versao {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--texto-fraco);
  text-decoration: none;
}
a.rodape-versao:hover { color: var(--acento); }

.historico { border-left: 2px solid var(--linha); margin-left: 8px; }

.historico-versao {
  display: flex;
  gap: var(--l4);
  padding: var(--l3) 0 var(--l3) var(--l4);
  position: relative;
  flex-wrap: wrap;
}
.historico-versao::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 24px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--linha-forte);
  border: 2px solid var(--fundo);
}
.historico-versao.atual::before { background: var(--acento); }

.historico-marca { flex: none; width: 150px; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.historico-numero {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 17px;
  color: var(--texto);
}
.historico-data { font-size: 13px; color: var(--texto-fraco); }

.historico-corpo { flex: 1; min-width: 240px; }
.historico-titulo {
  margin: 0 0 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 19px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.historico-corpo ul { margin: 0; padding-left: 18px; }
.historico-corpo li { font-size: 14px; color: var(--texto-fraco); margin-bottom: 3px; }

@media (max-width: 720px) {
  .historico-versao { gap: var(--l2); padding-left: var(--l3); }
  .historico-marca { width: 100%; flex-direction: row; align-items: baseline; gap: var(--l2); }
}