@font-face {
  font-family: 'Archivo';
  src: url('fontes/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('fontes/archivo-italico.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;
  --azul: #0f5ccd;
  --azul-forte: #0b4aa8;
  --azul-profundo: #0a2f6b;
  --azul-claro: #4890f8;
  --azul-fundo: #eaf1fd;
  --lima: #9fe86f;
  --lima-fundo: #eefbe4;
  --lima-texto: #2f6b12;
  --fundo: #f2f5fb;
  --cartao: #ffffff;
  --borda: #d9e1ef;
  --borda-forte: #b3c1da;
  --texto: #0e1b33;
  --texto-suave: #4f5d75;
  --perigo: #c62828;
  --perigo-forte: #a31f1f;
  --perigo-fundo: #fdecec;
  --alerta-texto: #8a4b00;
  --alerta-fundo: #fff2dc;
  --alerta-borda: #f0b45a;
  --raio: 16px;
  --raio-medio: 12px;
  --raio-pequeno: 10px;
  --sombra: 0 1px 2px rgb(10 47 107 / 6%), 0 10px 28px -14px rgb(10 47 107 / 22%);
  --fonte: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-mensagem: system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--texto);
  font: 400 16px/1.45 var(--fonte);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
p {
  margin: 0;
  text-wrap: pretty;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--azul-claro);
  outline-offset: 2px;
}

.icone {
  display: inline-flex;
  font-size: 1.15em;
  line-height: 0;
  flex: none;
}

.fora-da-tela {
  position: fixed;
  left: -9999px;
  top: 0;
  opacity: 0;
}

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

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--raio-pequeno);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.botao:active {
  transform: translateY(1px);
}

.botao:disabled {
  opacity: 0.55;
  cursor: progress;
}

.botao-primario {
  background: var(--azul);
  color: #fff;
}

.botao-primario:hover {
  background: var(--azul-forte);
}

.botao-secundario {
  background: #fff;
  border-color: var(--borda-forte);
  color: var(--texto);
}

.botao-secundario:hover {
  background: var(--azul-fundo);
}

.botao-perigo {
  background: var(--perigo);
  color: #fff;
}

.botao-perigo:hover {
  background: var(--perigo-forte);
}

.botao-largo {
  width: 100%;
}

.botao-texto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--azul);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}

.botao-texto:hover {
  color: var(--azul-forte);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.botao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: #fff;
  color: var(--texto-suave);
  cursor: pointer;
}

.botao-icone:hover {
  color: var(--perigo);
  border-color: var(--perigo);
  background: var(--perigo-fundo);
}

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

.topo {
  background: var(--azul);
  color: #fff;
  border-bottom: 4px solid var(--lima);
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
}

/* Celular: logo, título e sair em cima; status e "Zerar jogos" logo abaixo.
   Do tablet para cima, tudo numa linha só. */
.topo-linha {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    'logo titulo sair'
    'status status zerar';
  align-items: center;
  gap: 10px 14px;
  max-width: 1440px;
  margin: 0 auto;
}

@media (min-width: 720px) {
  .topo-linha {
    grid-template-columns: auto auto 1fr auto auto;
    grid-template-areas: 'logo titulo status zerar sair';
  }

  .topo-status {
    justify-self: end;
  }
}

.topo-zerar {
  grid-area: zerar;
  justify-self: end;
}

.topo-sair {
  grid-area: sair;
  justify-self: end;
}

.topo-logo {
  grid-area: logo;
  display: block;
  height: 34px;
  width: auto;
}

.topo-titulo {
  grid-area: titulo;
  position: relative;
  padding-left: 16px;
  font-size: 22px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* A barra inclinada do logo, repetida como separador. */
.topo-titulo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 30px;
  background: var(--azul-claro);
  transform: translateY(-50%) skewX(-12deg);
}

.topo-status {
  grid-area: status;
  font-size: 13px;
  color: rgb(255 255 255 / 82%);
  min-height: 18px;
}

.topo-status[data-estado='erro'],
.topo-status[data-estado='offline'] {
  color: #ffd9a8;
  font-weight: 700;
}

.botao-topo {
  min-height: 40px;
  padding: 0 12px;
  background: rgb(255 255 255 / 12%);
  border-color: rgb(255 255 255 / 45%);
  color: #fff;
  font-size: 14px;
}

.botao-topo:hover {
  background: rgb(255 255 255 / 22%);
}

.botao-topo-discreto {
  border-color: transparent;
  background: transparent;
}

.atalhos {
  display: flex;
  gap: 8px;
  max-width: 1440px;
  margin: 12px auto 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.atalho {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 14%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.atalho .bandeira {
  width: 20px;
  height: 14px;
  border-radius: 3px;
}

.atalho-contagem {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--lima);
  color: var(--azul-profundo);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 479px) {
  .topo-logo {
    height: 28px;
  }

  .topo-titulo {
    font-size: 19px;
    padding-left: 12px;
  }

  .botao-topo {
    padding: 0 10px;
  }

  /* No celular o "Sair" fica só com o ícone; o aria-label mantém o nome para leitor de tela. */
  .topo-sair {
    width: 40px;
    padding: 0;
  }

  .topo-sair-texto {
    display: none;
  }

  .atalhos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .atalho {
    justify-content: center;
    gap: 6px;
    padding: 0 6px;
    font-size: 13px;
  }

  .atalho .bandeira {
    display: none;
  }

  .quadra,
  .horario {
    padding: 12px;
  }

  .horario-acoes .botao {
    padding: 0 14px;
  }
}

/* Celular estreito: o "Remover" vira só a lixeira para o "Confirmar jogo" caber inteiro. */
@media (max-width: 399px) {
  .botao-remover {
    width: 44px;
    padding: 0;
  }

  .botao-remover-texto {
    display: none;
  }
}

/* ---------- Quadras ---------- */

.quadras {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 16px 120px;
}

@media (min-width: 1100px) {
  .quadras {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    padding-top: 28px;
  }

  .atalhos {
    display: none;
  }
}

.carregando {
  padding: 40px 0;
  text-align: center;
  color: var(--texto-suave);
}

.quadra {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px;
  scroll-margin-top: 12px;
}

.quadra-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--borda);
}

.bandeira {
  width: 30px;
  height: 20px;
  flex: none;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
}

.bandeira-espanha {
  background: linear-gradient(to bottom, #c60b1e 0 25%, #ffc400 25% 75%, #c60b1e 75%);
}

.bandeira-italia {
  background: linear-gradient(to right, #009246 0 33.4%, #fff 33.4% 66.6%, #ce2b37 66.6%);
}

.bandeira-franca {
  background: linear-gradient(to right, #0055a4 0 33.4%, #fff 33.4% 66.6%, #ef4135 66.6%);
}

.quadra-titulo {
  flex: 1;
  font-size: 22px;
  font-style: italic;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--azul-profundo);
}

.quadra-titulo-pre {
  color: var(--azul);
  font-weight: 600;
}

.quadra-contagem {
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-suave);
  white-space: nowrap;
}

.quadra-vazia {
  padding: 18px 0 20px;
  text-align: center;
  color: var(--texto-suave);
  font-size: 15px;
}

.horarios {
  display: grid;
  gap: 14px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.botao-adicionar {
  width: 100%;
  min-height: 52px;
  border: 2px dashed rgb(15 92 205 / 40%);
  background: var(--azul-fundo);
  color: var(--azul);
  font-size: 16px;
}

.botao-adicionar:hover {
  border-color: var(--azul);
  background: #dde9fc;
}

/* ---------- Horário ---------- */

.horario {
  position: relative;
  padding: 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-medio);
  background: #fff;
}

.horario-confirmado {
  border-color: #b7e59a;
  box-shadow: inset 4px 0 0 var(--lima);
  background: linear-gradient(to right, var(--lima-fundo), #fff 60%);
}

.horario-conflito {
  border-color: var(--alerta-borda);
}

.horario-novo {
  animation: destacar 1.2s ease-out;
}

@keyframes destacar {
  from {
    box-shadow: 0 0 0 4px rgb(159 232 111 / 90%);
  }
  to {
    box-shadow: 0 0 0 4px rgb(159 232 111 / 0%);
  }
}

.horario-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 12px;
}

.horario-faixa {
  font-size: 22px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--azul-profundo);
  font-variant-numeric: tabular-nums;
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.selo-confirmado {
  background: var(--lima);
  color: var(--azul-profundo);
}

.selo-conflito {
  background: var(--alerta-fundo);
  color: var(--alerta-texto);
}

.horario-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.campo-grupo {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.campo-duracao {
  grid-column: 1 / -1;
}

.rotulo {
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.campo {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: #fff;
  font-size: 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgb(72 144 248 / 25%);
  outline: none;
}

select.campo {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  cursor: pointer;
}

.campo-prefixo {
  position: relative;
}

.campo-prefixo-texto {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-suave);
  font-weight: 700;
  pointer-events: none;
}

.campo-prefixo .campo {
  padding-left: 40px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.segmentado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--fundo);
}

.segmentado-opcao {
  position: relative;
}

.segmentado-opcao input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.segmentado-opcao span {
  display: grid;
  place-items: center;
  min-height: 38px;
  border-radius: 8px;
  font-weight: 700;
  color: var(--texto-suave);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.segmentado-opcao input:checked + span {
  background: var(--azul);
  color: #fff;
}

.segmentado-opcao input:focus-visible + span {
  outline: 3px solid var(--azul-claro);
  outline-offset: 1px;
}

.jogadores {
  margin-top: 14px;
  display: grid;
  gap: 8px;
  justify-items: start;
}

.jogadores-lista {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: jogador;
}

.jogador {
  display: flex;
  align-items: center;
  gap: 8px;
  counter-increment: jogador;
}

.jogador::before {
  content: counter(jogador);
  width: 22px;
  flex: none;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

.horario-erro {
  margin-top: 10px;
  color: var(--perigo);
  font-size: 14px;
  font-weight: 700;
}

.horario-erro:empty {
  display: none;
}

.horario-acoes {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.botao-confirmar {
  flex: 1;
}

.botao-remover {
  background: #fff;
  border-color: var(--borda);
  color: var(--perigo);
}

.botao-remover:hover {
  background: var(--perigo-fundo);
  border-color: var(--perigo);
}

/* ---------- Diálogos e aviso ---------- */

.dialogo {
  width: min(440px, calc(100% - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--raio);
  box-shadow: 0 24px 60px -20px rgb(10 47 107 / 50%);
  color: var(--texto);
}

.dialogo::backdrop {
  background: rgb(10 47 107 / 50%);
}

.dialogo-corpo {
  display: grid;
  gap: 12px;
  padding: 20px;
}

.dialogo-titulo {
  font-size: 21px;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--azul-profundo);
}

.dialogo-texto {
  color: var(--texto-suave);
}

.mensagem {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-medio);
  background: var(--fundo);
  font: 500 16px/1.65 var(--fonte-mensagem);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
}

.dialogo-retorno {
  color: var(--lima-texto);
  font-weight: 700;
  font-size: 14px;
}

.dialogo-retorno[data-tipo='erro'] {
  color: var(--perigo);
}

.dialogo-retorno:empty {
  display: none;
}

.dialogo-acoes {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.aviso {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 12px 16px;
  border-radius: var(--raio-medio);
  background: var(--azul-profundo);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 14px 34px -12px rgb(10 47 107 / 60%);
  transform: translateX(-50%);
}

.aviso[hidden] {
  display: none;
}

.aviso-acao {
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: var(--lima);
  color: var(--azul-profundo);
  font-weight: 800;
  cursor: pointer;
}

/* ---------- Entrar ---------- */

.pagina-entrar {
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background:
    repeating-linear-gradient(-78deg, rgb(255 255 255 / 0%) 0 46px, rgb(255 255 255 / 5%) 46px 48px),
    var(--azul);
}

.entrar {
  display: grid;
  justify-items: center;
  gap: 24px;
  width: min(400px, 100%);
}

.entrar-logo {
  width: 220px;
  height: auto;
}

.entrar-cartao {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 24px;
  border-radius: var(--raio);
  background: #fff;
  border-bottom: 4px solid var(--lima);
  box-shadow: 0 24px 60px -24px rgb(0 0 0 / 45%);
}

.entrar-titulo {
  font-size: 24px;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--azul-profundo);
  text-wrap: balance;
}

.entrar-texto {
  margin-bottom: 8px;
  color: var(--texto-suave);
}

.campo-senha {
  position: relative;
}

.campo-senha .campo {
  padding-right: 52px;
}

.campo-senha-olho {
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--texto-suave);
  font-size: 20px;
  cursor: pointer;
}

.campo-senha-olho:hover {
  color: var(--azul);
}

.entrar-turnstile {
  min-height: 65px;
  margin-top: 6px;
}

.entrar-erro {
  color: var(--perigo);
  font-weight: 700;
  font-size: 14px;
}

.entrar-erro:empty {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}