@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url('fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }

:root {
  color-scheme: light dark;
  --mar: #0e3b43;
  --tinta: #12303a;
  --suave: #54707a;
  --ceu: #f3f7f8;
  --branco: #ffffff;
  --linha: #d4e0e4;
  --fita: #1657c9;
  --fita-press: #114aa9;
  --areia: #efd9a7;
  --tinta-areia: #2c2510;
  --bola: #e6f04a;
  --ok: #0a6e4c;
  --ok-fundo: #e2f3ec;
  --alerta: #8a4b00;
  --alerta-fundo: #fbf0db;
  --erro: #a3221b;
  --erro-fundo: #fbe7e5;
  --titulo: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --texto: 'Barlow', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --mar: #0b2329;
    --tinta: #e6f1f3;
    --suave: #9db4bb;
    --ceu: #0e2a31;
    --branco: #143640;
    --linha: #2a4f59;
    --fita: #7fb0ff;
    --fita-press: #a5c8ff;
    --areia: #d9c08a;
    --ok: #63d3a8;
    --ok-fundo: #123f33;
    --alerta: #f0c070;
    --alerta-fundo: #40300f;
    --erro: #ff9d95;
    --erro-fundo: #4a1f1c;
  }
}

* { box-sizing: border-box; }

html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  margin: 0;
  background: var(--ceu);
  color: var(--tinta);
  font: 400 1rem/1.45 var(--texto);
  font-variant-numeric: tabular-nums;
}

button, a, select, summary, label.tappable { touch-action: manipulation; }

button, [role='button'], .tab, summary {
  user-select: none;
  -webkit-user-select: none;
}

input, textarea, select {
  font: 400 16px/1.3 var(--texto);
  color: var(--tinta);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
  min-height: 44px;
}

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

.shell { display: flex; flex-direction: column; min-height: 100dvh; max-width: 640px; margin: 0 auto; }

.topo {
  background: var(--mar);
  color: #fff;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.topo h1 { font: 700 1.5rem/1.1 var(--titulo); margin: 0; letter-spacing: 0.005em; }
.topo .voltar { background: none; border: 0; color: #fff; font: 500 1rem var(--texto); padding: 8px 10px 8px 0; min-height: 44px; }

main { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 20px; }

h2 { font: 700 1.5rem/1.15 var(--titulo); margin: 0; }
h3 { font: 600 1.25rem/1.2 var(--titulo); margin: 0 0 6px; }
p { margin: 0; }
.apoio { color: var(--suave); font-size: 0.9375rem; }
.bloco { display: flex; flex-direction: column; gap: 8px; }

/* A quadra: entradas de um lado da rede, saídas do outro. A bola fica no lado que levou o mês. */
.quadra {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 2 / 1;
  min-height: 150px;
  width: 100%;
  background: var(--areia);
  color: var(--tinta-areia);
  border: 4px solid var(--fita);
  border-radius: 2px;
}
@media (prefers-color-scheme: dark) { .quadra { border-color: #1657c9; } }
.quadra-lado { display: flex; flex-direction: column; justify-content: center; padding: 8px 12px; gap: 1px; min-width: 0; }
.quadra-lado + .quadra-lado { padding-left: 18px; }
.quadra-rotulo { font: 600 1.0625rem/1.1 var(--titulo); }
.quadra-valor { font: 700 clamp(1.5rem, 8vw, 2.25rem)/1.05 var(--titulo); white-space: nowrap; }
.quadra-conta { font-size: 0.8125rem; }
.quadra-rede {
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: calc(50% - 3px);
  width: 6px;
  background: repeating-linear-gradient(0deg, var(--mar) 0 2px, transparent 2px 5px), var(--areia);
  border-inline: 1px solid var(--mar);
}
.quadra-bola {
  position: absolute;
  bottom: 10px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bola);
  border: 1.5px solid #2c2510;
}
.quadra-bola.esquerda { left: calc(50% - 26px); }
.quadra-bola.direita { left: calc(50% + 12px); }

.saldos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.saldo-rotulo { display: block; font-size: 0.875rem; color: var(--suave); }
.saldo-valor { font: 600 1.375rem/1.15 var(--titulo); }
.saldo-final { text-align: right; }

.aviso { padding: 10px 12px; border-radius: 8px; font-size: 0.9375rem; display: flex; flex-direction: column; gap: 8px; }
.aviso strong { font-weight: 600; }
.aviso.ok { background: var(--ok-fundo); color: var(--ok); }
.aviso.alerta { background: var(--alerta-fundo); color: var(--alerta); }
.aviso.erro { background: var(--erro-fundo); color: var(--erro); }
.aviso.neutro { background: var(--branco); border: 1px solid var(--linha); }
.aviso label { display: flex; gap: 10px; align-items: flex-start; }
.aviso input[type='checkbox'] { width: 22px; height: 22px; min-height: 0; flex: none; margin: 0; }

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font: 600 1rem/1.2 var(--texto);
  background: var(--fita);
  color: #fff;
  text-align: center;
  transition: transform 100ms ease-out, background 100ms ease-out;
}
@media (prefers-color-scheme: dark) { .botao { color: #06223f; } }
.botao:active { transform: scale(0.98); background: var(--fita-press); }
.botao[disabled] { background: var(--linha); color: var(--suave); }
.botao.secundario { background: transparent; color: var(--fita); border-color: var(--fita); }
.botao.secundario:active { background: var(--linha); }
.botao.perigo { background: transparent; color: var(--erro); border-color: var(--erro); }
.botao.perigo:active { background: var(--erro-fundo); }
.botao.bloco-largo { width: 100%; }
.acoes { display: flex; flex-direction: column; gap: 8px; }

.barra-acao {
  position: sticky;
  bottom: 0;
  background: var(--ceu);
  border-top: 1px solid var(--linha);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Com abas embaixo, a barra para acima delas; senão o botão fica escondido quando a página é longa. */
.barra-acao:has(+ .abas) { bottom: calc(55px + env(safe-area-inset-bottom, 0px)); }

.abas {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--branco);
  border-top: 1px solid var(--linha);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tab {
  background: none;
  border: 0;
  border-top: 3px solid transparent;
  min-height: 54px;
  font: 500 0.9375rem var(--texto);
  color: var(--suave);
}
.tab[aria-current='page'] { color: var(--tinta); border-top-color: var(--fita); font-weight: 600; }
.tab:active { background: var(--linha); }

.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linha);
  min-height: 48px;
  width: 100%;
  background: none;
  border-inline: 0;
  border-top: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}
button.linha:active { background: var(--linha); }
.linha-principal { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.linha-nome { font-weight: 500; }
.linha-valor { font-weight: 600; white-space: nowrap; }
.linha-total { font-weight: 600; border-bottom: 0; }
.entrada { color: var(--ok); }

.etiqueta { display: inline-block; font-size: 0.8125rem; font-weight: 500; padding: 1px 8px; border-radius: 999px; background: var(--linha); color: var(--tinta); white-space: nowrap; }
.etiqueta.pago { background: var(--ok-fundo); color: var(--ok); }
.etiqueta.coberto { background: var(--ok-fundo); color: var(--ok); }
.etiqueta.parcial { background: var(--alerta-fundo); color: var(--alerta); }
.etiqueta.sem-pagamento { background: var(--erro-fundo); color: var(--erro); }

.campo { display: flex; flex-direction: column; gap: 4px; font-size: 0.9375rem; font-weight: 500; }
.campos-duplos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.contagem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.contagem div { display: flex; flex-direction: column; }
.contagem strong { font: 700 1.625rem/1.1 var(--titulo); }
.contagem span { font-size: 0.8125rem; color: var(--suave); line-height: 1.2; }

.rolagem { overflow-x: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin-inline: -16px; padding-inline: 16px; }
table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
th { font-weight: 600; text-align: right; white-space: nowrap; padding: 6px 8px; border-bottom: 2px solid var(--fita); }
td { text-align: right; padding: 8px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; position: sticky; left: -16px; background: var(--ceu); padding-left: 0; min-width: 130px; max-width: 170px; white-space: normal; overflow-wrap: anywhere; }

details > summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--fita); }

dialog {
  border: 0;
  border-radius: 12px;
  padding: 18px;
  width: min(92vw, 480px);
  max-height: 86dvh;
  background: var(--branco);
  color: var(--tinta);
}
dialog::backdrop { background: rgb(5 25 30 / 55%); }
.dialogo { display: flex; flex-direction: column; gap: 14px; }
.dialogo-acoes { display: flex; flex-direction: column; gap: 8px; }

#toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(136px + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}
#toast span { background: var(--mar); color: #fff; padding: 10px 14px; border-radius: 8px; font-size: 0.9375rem; max-width: 480px; box-shadow: 0 2px 10px rgb(0 0 0 / 30%); }

.carregando { display: flex; align-items: center; justify-content: center; min-height: 40dvh; font: 600 1.25rem var(--titulo); }

.instalar { gap: 10px; }
.instalar > strong { font: 700 1.25rem/1.15 var(--titulo); }
.instalar-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.instalar-acoes .botao { flex: 1 1 140px; }
.passos { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.passos strong { font-weight: 600; }
/* O ícone que o iOS mostra na barra: a pessoa procura o desenho, não a palavra. */
.icone-compartilhar {
  display: inline-block;
  width: 16px;
  height: 20px;
  vertical-align: -4px;
  background: var(--fita);
  --desenho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12.5V1.5M4.5 4.8 8 1.3l3.5 3.5M4.8 8H2.2a.9.9 0 0 0-.9.9v9a.9.9 0 0 0 .9.9h11.6a.9.9 0 0 0 .9-.9v-9a.9.9 0 0 0-.9-.9h-2.6'/%3E%3C/svg%3E");
  -webkit-mask: var(--desenho) center / contain no-repeat;
  mask: var(--desenho) center / contain no-repeat;
}

.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (hover: hover) and (pointer: fine) {
  .botao:hover { background: var(--fita-press); }
  .botao.secundario:hover { background: var(--linha); }
  .botao.perigo:hover { background: var(--erro-fundo); }
  button.linha:hover { background: var(--linha); }
  .tab:hover { background: var(--linha); }
}

/* Computador: a quadra divide a largura com o conteúdo, e as abas sobem para perto do título. */
@media (min-width: 900px) {
  .shell { --margem: max(24px, calc((100% - 1040px) / 2)); max-width: none; }
  .topo { order: 0; padding-inline: var(--margem); }
  .abas {
    order: 1;
    top: 0;
    bottom: auto;
    z-index: 5;
    grid-template-columns: repeat(3, max-content);
    padding-inline: var(--margem);
    border-top: 0;
    border-bottom: 1px solid var(--linha);
  }
  .tab { border-top: 0; border-bottom: 3px solid transparent; min-height: 48px; padding-inline: 20px; }
  .tab[aria-current='page'] { border-bottom-color: var(--fita); }
  main {
    order: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
    align-content: start;
    align-items: start;
    gap: 28px 40px;
    padding: 28px var(--margem);
  }
  main > * { min-width: 0; }
  main > .inteiro { grid-column: 1 / -1; }
  main > .botao { justify-self: start; }
  .quadra { min-height: 0; }
  .duas-colunas { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .acoes { flex-direction: row; flex-wrap: wrap; }
  .instalar-acoes .botao { flex: 0 0 auto; min-width: 160px; }
  .barra-acao, .barra-acao:has(+ .abas) { order: 3; bottom: 0; flex-direction: row; justify-content: flex-end; padding-inline: var(--margem); }
  .barra-acao .bloco-largo { width: auto; min-width: 280px; }
  #toast { bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .botao { transition: none; }
  .botao:active { transform: none; }
}