/* Milhômetro — papel quente, tinta escura, um acento só.
   Os números mandam: grandes, tabulares, com a origem escrita logo embaixo. */
:root {
  color-scheme: light dark;
  --papel:   light-dark(#FAF7F1, #14110F);
  --cartao:  light-dark(#FFFFFF, #1E1A17);
  --cartao2: light-dark(#F3EEE4, #27221E);
  --tinta:   light-dark(#1C1917, #F1ECE4);
  --tinta2:  light-dark(#57514B, #C2BAAF);
  --tinta3:  light-dark(#736B64, #948B81);
  --linha:   light-dark(#E7E0D4, #36302A);
  --acento:  light-dark(#5C4432, #D9B58C);
  --acento-t:light-dark(#FFFFFF, #1A1410);
  --ok:      light-dark(#3E5A2E, #9DBB86);
  --ok-f:    light-dark(#EAF0E3, #1F2A19);
  --aviso:   light-dark(#8A5A12, #E0B465);
  --aviso-f: light-dark(#F8EEDB, #2E2414);
  --perigo:  light-dark(#8C3A2A, #E09A88);
  --sombra:  light-dark(rgba(28,25,23,.06), rgba(0,0,0,.4));
  --r: 16px;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--papel); color: var(--tinta); }
button, input, select { font: inherit; color: inherit; }
a { color: var(--acento); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }

.topo {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: baseline; gap: 10px;
  padding: calc(14px + env(safe-area-inset-top)) 20px 12px;
  background: color-mix(in srgb, var(--papel) 88%, transparent); backdrop-filter: blur(12px);
}
.marca { font-weight: 700; letter-spacing: -.01em; }
.quem { color: var(--tinta3); font-size: 14px; }

main { max-width: 640px; margin: 0 auto; padding: 4px 16px calc(96px + env(safe-area-inset-bottom)); }
.carregando { color: var(--tinta3); padding: 40px 4px; }

h1 { font-size: 28px; line-height: 1.15; letter-spacing: -.02em; margin: 12px 4px 4px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta3); font-weight: 600; margin: 28px 4px 10px; }
.sub { color: var(--tinta2); margin: 0 4px 16px; font-size: 15px; }

.cartao {
  background: var(--cartao); border-radius: var(--r); padding: 18px;
  box-shadow: 0 0 0 1px var(--linha) inset, 0 6px 18px -12px var(--sombra);
}
.cartao + .cartao { margin-top: 12px; }

/* ── ação de hoje ── */
.acao { display: grid; gap: 6px; }
.acao .cabeca { display: flex; align-items: baseline; gap: 10px; }
.num { font-variant-numeric: tabular-nums; }
.grande { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.prazo {
  margin-left: auto; font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--aviso); background: var(--aviso-f); padding: 3px 10px; border-radius: 99px;
}
.acao h3 { font-size: 16px; margin: 0; line-height: 1.3; }
.acao p { margin: 0; color: var(--tinta2); font-size: 15px; }

/* origem: sempre escrita, nunca escondida (decisão 13) */
.origem { list-style: none; margin: 6px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--linha); display: grid; gap: 2px; }
.origem li { font-size: 12.5px; color: var(--tinta3); line-height: 1.4; }
.origem li::before { content: "↳ "; }
.incerto { font-size: 12.5px; color: var(--aviso); }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
  padding: 10px 18px; border-radius: 12px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--acento); color: var(--acento-t); font-weight: 600;
}
.botao.leve { background: var(--cartao2); color: var(--tinta); }
.botao.fino { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.botao:disabled { opacity: .5; cursor: default; }
.acao .botao { justify-self: start; margin-top: 6px; }

.vazio { text-align: left; color: var(--tinta2); }
.vazio b { display: block; color: var(--tinta); font-size: 17px; margin-bottom: 4px; }

.radar { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--tinta3); margin: 4px 4px 14px; }
.radar .barra { flex: 1; height: 4px; background: var(--linha); border-radius: 2px; overflow: hidden; }
.radar .barra i { display: block; height: 100%; background: var(--acento); width: 0; transition: width .3s; }

/* ── viagem ── */
.viagem .linha1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.viagem h3 { margin: 0; font-size: 18px; }
.selo { font-size: 12px; padding: 2px 9px; border-radius: 99px; background: var(--cartao2); color: var(--tinta2); }
.progresso { height: 8px; background: var(--cartao2); border-radius: 4px; overflow: hidden; margin: 12px 0 6px; }
.progresso i { display: block; height: 100%; background: var(--ok); border-radius: 4px; }
.falta { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--tinta2); }
.opcoes { display: grid; gap: 10px; margin-top: 14px; }
.opcao { padding: 12px 14px; border-radius: 12px; background: var(--cartao2); }
.opcao.melhor { box-shadow: 0 0 0 2px var(--ok) inset; }
.opcao .t { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.opcao .t b { font-size: 15px; }
.opcao .v { font-weight: 700; white-space: nowrap; }
.opcao p { margin: 2px 0 0; font-size: 14px; color: var(--tinta2); }

/* ── carteira ── */
.saldos { display: grid; gap: 0; }
.saldo { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 12px 2px; border-bottom: 1px solid var(--linha); }
.saldo:last-child { border-bottom: 0; }
.saldo .nome { font-weight: 600; }
.saldo .pts { font-weight: 700; font-size: 18px; text-align: right; }
.saldo .de { grid-column: 1 / -1; font-size: 12.5px; color: var(--tinta3); }

.form { display: grid; gap: 12px; }
.campo { display: grid; gap: 4px; }
.campo span { font-size: 13px; color: var(--tinta2); font-weight: 600; }
.campo input, .campo select {
  min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--cartao);
}
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.escolha { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.escolha label { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linha); cursor: pointer; }
.escolha label:has(input:checked) { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset; }
.escolha input { position: absolute; opacity: 0; }
.escolha small { color: var(--tinta3); font-size: 12.5px; }
.erro { color: var(--perigo); font-size: 14px; margin: 0; }

.lidos { display: grid; gap: 8px; }
.lido { display: grid; grid-template-columns: 1fr 120px; gap: 8px; align-items: center; }
.lido small { grid-column: 1 / -1; color: var(--tinta3); font-size: 12.5px; margin-top: -4px; }
.lido input { text-align: right; }

details.secao { margin-top: 24px; }
/* "desde quando" só faz sentido para o clube marcado */
.clube:not(:has(input[type=checkbox]:checked)) .desde { visibility: hidden; }
details.secao > summary { cursor: pointer; font-weight: 600; padding: 10px 4px; list-style: none; }
details.secao > summary::after { content: " ›"; color: var(--tinta3); }
details.secao[open] > summary::after { content: " ⌄"; }

/* ── abas ── */
.abas {
  position: fixed; inset: auto 0 0 0; z-index: 10; display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--papel) 90%, transparent); backdrop-filter: blur(16px);
  border-top: 1px solid var(--linha);
}
.abas button {
  display: grid; justify-items: center; gap: 1px; padding: 6px 0; border: 0; background: none;
  font-size: 12px; color: var(--tinta3); cursor: pointer; min-height: 48px;
}
.abas .ic { font-size: 18px; line-height: 1.2; }
.abas button[aria-current="page"] { color: var(--acento); font-weight: 600; }

@media (min-width: 720px) {
  .abas { inset: 0 auto auto 50%; transform: translateX(-50%); width: 360px; top: 10px; border: 1px solid var(--linha);
          border-radius: 14px; padding: 4px; }
  .topo { padding-right: 400px; }
  main { padding-bottom: 48px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }