:root {
  /* ===== PADRAO VISUAL TRUEEARN (15/09/2026) — ver DESIGN.md =====
     Uma so cor de marca: o verde. Vermelho e ambar sao SIGNIFICADO (despesa,
     aviso), nunca enfeite. O lavanda/roxo antigos sairam: vinham do cabecalho
     roxo de agosto e ja nao queriam dizer nada. Os neutros puxam para o verde
     da marca, nao para o roxo. */
  --bg: #F3F5F1;
  --card: #FFFFFF;
  --card-2: #EEF1EC;
  --text: #15201A;
  --muted: #5B665F;
  --border: #DDE3DB;
  --primario: #0C7D3F;
  /* Par botao: fundo + texto. Verde escurecido com texto branco = 5,22:1. */
  --btn-fundo: #0C7D3F;
  --btn-texto: #FFFFFF;
  --ganho: #0C7D3F;
  --despesa: #C2343A;
  --lucro: #8F5B00;          /* ambar para TEXTO (legivel no branco) */
  --aviso-fill: #D98B00;     /* ambar para BARRAS e fundos */
  /* O numero-rei vive na superficie escura da marca, nos dois temas */
  --hero-bg: #0E1416;
  --hero-texto: #EEF3EF;
  --hero-suave: #A9B4AE;
  --hero-acento: #2BE07A;
  --foco: #0C7D3F;
  --shadow: 0 1px 2px rgba(16,24,20,.05), 0 4px 14px rgba(16,24,20,.05);
  /* Escala de letra (16px = 1rem). Nada abaixo de 13px. */
  --t-xs: .8125rem; --t-sm: .875rem; --t-base: 1rem; --t-md: 1.125rem;
  --t-lg: 1.375rem; --t-xl: 1.75rem; --t-2xl: 2.5rem; --t-hero: 3.25rem;
  /* Espacos: multiplos de 4 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
  -webkit-text-size-adjust: 100%;
}

/* ---- Barra de topo (so no celular; no computador vira o menu lateral) ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 56px; padding: var(--s2) var(--s4); background: var(--card);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20;
}
.brand { font-weight: 700; font-size: 1.15rem; color: var(--primario); text-decoration: none; }
.topbar-acoes { display: flex; align-items: center; gap: var(--s1); }
.sair-link { color: var(--muted); text-decoration: none; font-size: var(--t-sm); font-weight: 600;
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s2); border-radius: var(--r-sm); }
.sair-link:hover { color: var(--text); background: var(--card-2); }

main { max-width: 760px; margin: 0 auto; padding: var(--s4); }

/* ---- Navegacao principal ----
   Celular: barra de baixo, icone + nome (o polegar alcanca, e a categoria usa
   isto). Computador (>=1024px): a MESMA <nav> vira menu lateral — um menu so,
   nunca dois a discordar. Ver a camada de layout no fim do ficheiro. */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; background: var(--card);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1; text-align: center; text-decoration: none;
  color: var(--muted); font-size: var(--t-xs); font-weight: 600; min-height: 56px;
  padding: 8px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.tab .ic { width: 24px; height: 24px; }
.tab.active { color: var(--primario); }
.tab.active .ic { stroke-width: 2.4; }
.nav-marca, .nav-rodape { display: none; }

/* ---- Navegacao de periodo (o dia na Inicio, o periodo no Relatorio) ---- */
.daynav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 6px; margin-bottom: var(--s3);
}
.daynav-btn {
  width: 48px; height: 48px; border-radius: var(--r-md); background: var(--card-2);
  border: 1px solid transparent; color: var(--text); text-decoration: none; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.daynav-btn:hover { border-color: var(--border); }
.daynav-btn .ic { width: 22px; height: 22px; }
.daynav-label { font-weight: 600; text-align: center; font-size: var(--t-base); font-family: var(--display); }
.hoje-badge {
  display: inline-block; margin-left: 8px; font-size: var(--t-xs); font-weight: 700; font-family: var(--corpo);
  color: var(--btn-texto); background: var(--btn-fundo); padding: 2px 8px; border-radius: 999px; vertical-align: middle;
}
.big { font-size: 2rem; font-weight: 800; letter-spacing: -0.5px; }
.green { color: var(--ganho); } .red { color: var(--despesa); } .amber { color: var(--lucro); }
.pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pills span {
  flex: 1; min-width: 88px; text-align: center; background: var(--card-2);
  border: 1px solid var(--border); border-radius: 12px; padding: 8px 6px; font-size: 0.88rem; color: var(--muted);
}
.pills b { display: block; color: var(--text); font-size: 1.02rem; margin-top: 2px; }

/* ---- Grelha de métricas ---- */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.metric {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); padding: 12px; display: flex; flex-direction: column; gap: 3px;
}
.metric span { color: var(--muted); font-size: 0.88rem; }
.metric b { font-size: 1.2rem; font-weight: 700; }

.dayactions { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.dayactions .btn { flex: 1; text-align: center; }

/* ---- Cartões genéricos (usados noutras páginas) ---- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); padding: 14px; display: flex; flex-direction: column; gap: 4px;
}
.card .rotulo { color: var(--muted); font-size: 0.88rem; }
.card .numero { font-size: 1.3rem; font-weight: 700; }
.card.ganho .numero { color: var(--ganho); }
.card.despesa .numero { color: var(--despesa); }
.card.lucro .numero { color: var(--lucro); }

.destaque {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow); padding: 16px; margin-bottom: 12px;
}
.destaque .rotulo { color: var(--muted); font-size: 0.88rem; }
.destaque-apps { display: flex; gap: 8px; flex-wrap: wrap; }
.destaque-apps span {
  flex: 1; min-width: 90px; text-align: center; background: var(--card-2);
  border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; font-size: 0.88rem; color: var(--muted);
}
.destaque-apps b { color: var(--text); display: block; font-size: 1.05rem; margin-top: 2px; }
/* ---- Botoes: tres pesos e so tres (primario, normal, texto) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s4); border-radius: var(--r-md); text-decoration: none;
  color: var(--text); background: var(--card); border: 1px solid var(--border);
  font: inherit; font-size: var(--t-base); font-weight: 600; line-height: 1.2; cursor: pointer;
  transition: background-color .15s, border-color .15s, filter .15s;
}
.btn:hover { border-color: color-mix(in srgb, var(--text) 28%, var(--border)); }
.btn:active { background: var(--card-2); }
.btn-primario { background: var(--btn-fundo); border-color: var(--btn-fundo); color: var(--btn-texto); }
.btn-primario:hover { filter: brightness(1.08); border-color: var(--btn-fundo); }
.btn-cancelar { background: transparent; }
.btn .ic { width: 20px; height: 20px; }

h1 { font-size: var(--t-xl); line-height: 1.15; margin: var(--s2) 0 var(--s4); }
h2 { font-size: var(--t-lg); line-height: 1.2; margin: var(--s6) 0 var(--s3);
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
h2 .ic { color: var(--primario); }

/* ---- Tabelas: cabecalho discreto, numeros em coluna ---- */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { background: var(--card-2); color: var(--muted); font-weight: 600; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .05em; }
td { font-variant-numeric: tabular-nums; }
tbody tr:hover td { background: color-mix(in srgb, var(--card-2) 55%, transparent); }
tr:last-child td { border-bottom: none; }
.num { text-align: right; }
td a { color: var(--primario); text-decoration: none; font-weight: 600; }
td a .ic { width: 18px; height: 18px; }
/* uma nota comprida nao pode esticar a tabela ate ao infinito */
td.nota { white-space: normal; min-width: 180px; max-width: 360px; }

.vazio { color: var(--muted); background: var(--card); padding: 16px; border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.vazio a { color: var(--primario); }

/* ---- Formulários ---- */
.formulario { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.formulario label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; color: var(--muted); }
.formulario input, .formulario select {
  padding: 12px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 1rem;
}
.formulario input:focus, .formulario select:focus { outline: 2px solid var(--primario); border-color: var(--primario); }
.opcional { color: var(--muted); font-size: 0.88rem; }
.acoes { display: flex; gap: 10px; margin-top: 8px; }

.grupo { border: 1px solid var(--border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; margin: 0; background: var(--card); }
.grupo legend { color: var(--text); font-weight: 700; padding: 0 6px; font-size: 0.95rem; }
.grupo .opcional { margin: 0 0 4px; }
.linha-app { flex-direction: row !important; align-items: center; gap: 12px !important; }
.linha-app span { flex: 0 0 90px; color: var(--text); font-weight: 600; }
.linha-app input { flex: 1; }
.resultado { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border); color: var(--muted); font-size: 0.9rem; }
.resultado b { color: var(--ganho); font-size: 1.1rem; }
.desp-linha { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.desp-linha select { flex: 1 1 130px; }
.desp-linha .v { flex: 1 1 70px; }
.desp-linha .n { flex: 1 1 100%; }
#add-desp { margin-top: 4px; }

/* ---- Autenticação ---- */
.auth { max-width: 420px; margin: 10vh auto 0; }
.auth h2 { font-size: 1.5rem; }
.ajuda { color: var(--muted); font-size: 0.95rem; margin-bottom: 18px; }

/* ---- Flash ---- */
.flash { padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; font-size: 0.92rem; box-shadow: var(--shadow); }
.flash.ok { background: #e7f7ee; border: 1px solid #9ae0b8; color: #10683c; }
.flash.erro { background: #fdeaea; border: 1px solid #f3b4b6; color: #a51f22; }

/* ---- Escolha de periodo: um controle segmentado, nao seis botoes soltos ---- */
.filtro-rapido { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: var(--s3);
  padding: 4px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); }
.btn.quick { min-height: 44px; padding: 0 14px; font-size: var(--t-sm); border-color: transparent;
  background: none; color: var(--muted); border-radius: var(--r-md); }
.btn.quick:hover { color: var(--text); background: var(--card-2); border-color: transparent; }
.btn.ativo, .btn.quick.ativo { background: var(--btn-fundo); border-color: var(--btn-fundo); color: var(--btn-texto); font-weight: 600; }
.filtro {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.filtro label { display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; color: var(--muted); }
.filtro select, .filtro input { padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 1rem; }
.filtro #campo-range { display: flex; gap: 12px; }
.periodo-titulo { font-size: 1.02rem; margin: 4px 0 16px; color: var(--text); }

/* ---- Metas / barras ---- */
.meta-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.meta-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 0.95rem; }
.meta-top b { font-size: 1.1rem; }
.barra { height: 12px; background: var(--card-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.barra-fill { height: 100%; border-radius: 999px; transition: width .3s; }
.barra-fill.ok { background: var(--ganho); }
.barra-fill.aviso { background: var(--aviso-fill); }
.barra-fill.perigo { background: var(--despesa); }
.meta-baixo { margin-top: 8px; font-size: 0.9rem; color: var(--muted); }
.meta-baixo b { color: var(--text); }
.info-linha { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; font-size: 0.92rem; box-shadow: var(--shadow); }
.info-linha b.up { color: var(--ganho); }
.info-linha b.down { color: var(--despesa); }

.acoes-relatorio { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

/* ---- Impressão ---- */
@media print {
  .topbar, .tabbar, .filtro, .filtro-rapido, .acoes-relatorio, .nao-imprimir, .dayactions, .daynav { display: none !important; }
  body { background: #fff; padding: 0; }
  .card, .destaque, .tabela-wrap, .meta-card, .info-linha { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  th { background: #f0f0f0; }
  a { color: #000; text-decoration: none; }
  h2 { page-break-after: avoid; }
}

@media (max-width: 520px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .metrics { grid-template-columns: repeat(3, 1fr); }
}

/* ===== O numero-rei: o que sobra no bolso, por hora =====
   Superficie escura da marca (a do logotipo) nos dois temas: e o unico bloco
   escuro da tela clara, e isso basta para o olho ir la primeiro. A cor do
   veredito vive so na faixa da esquerda e no ponto. O roxo saiu (15/09/2026):
   nao queria dizer nada e brigava com o verde da marca. */
.hero-bolso{position:relative;border-radius:var(--r-lg);padding:var(--s5) var(--s5) var(--s5) calc(var(--s5) + 4px);
  margin-bottom:var(--s3);background:var(--hero-bg);color:var(--hero-texto);overflow:hidden;
  border:1px solid color-mix(in srgb,var(--hero-acento) 20%,transparent)}
.hero-bolso::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--hero-acento)}
.hero-bolso.amber::before{background:#F0B429}
.hero-bolso.red::before{background:#FF6B6B}
.hero-bolso.folga::before{background:#7C8781}
.hero-top{display:flex;align-items:center;gap:8px;font-size:var(--t-xs);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--hero-suave)}
.hero-ponto{width:8px;height:8px;border-radius:50%;background:var(--hero-acento);flex:0 0 auto}
.hero-bolso.amber .hero-ponto{background:#F0B429}
.hero-bolso.red .hero-ponto{background:#FF6B6B}
.hero-bolso.folga .hero-ponto{background:#7C8781}
.hero-big{font-size:var(--t-hero);line-height:1;margin:var(--s3) 0 var(--s1);color:var(--hero-texto);font-variant-numeric:tabular-nums}
.hero-h{font-size:var(--t-lg);color:var(--hero-suave);margin-left:2px;letter-spacing:0}
.hero-sub{font-size:var(--t-sm);color:var(--hero-suave)}
.hero-kept{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid rgba(238,243,239,.14);font-size:var(--t-sm);color:var(--hero-suave)}
.hero-kept b{font-size:1.2rem;color:var(--hero-texto)}
.hero-bolso a{color:var(--hero-acento)}

/* a conta numa linha só */
.conta{background:var(--card);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow);padding:14px 16px;margin-bottom:10px;
  font-size:.95rem;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.conta b{color:var(--text)}
.conta .op{color:var(--muted);opacity:.6;font-weight:700}
.conta .res{color:var(--ganho);font-weight:800}
.conta .res.neg{color:var(--despesa)}

/* aluguer coberto esta semana */
.card-aluguer{background:var(--card);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow);padding:14px 16px;margin-bottom:10px}
.card-aluguer .linha{display:flex;justify-content:space-between;align-items:center;font-size:.9rem}

/* detalhes escondidos por omissão */
.detalhe{background:var(--card);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow);padding:12px 16px;margin:10px 0}
.detalhe summary{cursor:pointer;font-weight:700;font-size:.92rem;color:var(--primario)}

/* ===================== MODO ESCURO (o padrao do produto) =====================
   Segue o sistema por omissao; a escolha do motorista ganha sempre. Aqui so se
   redefinem TOKENS — nenhum componente tem cor propria no escuro. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#080A0B; --card:#121719; --card-2:#1A2022;
    --text:#EAEFEC; --muted:#9BA5A0; --border:#252C2A;
    --primario:#2BE07A; --ganho:#2BE07A; --despesa:#FF6B6B; --lucro:#F0B429; --aviso-fill:#F0B429;
    /* No escuro o verde neon fica, e o texto e que escurece: 12,05:1. */
    --btn-fundo:#2BE07A; --btn-texto:#08120C;
    --hero-bg:#0F1A15; --foco:#2BE07A;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
  }
  :root:not([data-theme="light"]) .flash.ok{background:#123024;border-color:#1f6844;color:#7ee2ab}
  :root:not([data-theme="light"]) .flash.erro{background:#3a1618;border-color:#7d2f33;color:#ff9ea1}
  :root:not([data-theme="light"]) .tag-perigo{background:#3a1618;border-color:#7d2f33;color:#ff9ea1}
  :root:not([data-theme="light"]) th{background:var(--card-2)}
}
:root[data-theme="dark"]{
  --bg:#080A0B; --card:#121719; --card-2:#1A2022;
  --text:#EAEFEC; --muted:#9BA5A0; --border:#252C2A;
  --primario:#2BE07A; --ganho:#2BE07A; --despesa:#FF6B6B; --lucro:#F0B429; --aviso-fill:#F0B429;
  --btn-fundo:#2BE07A; --btn-texto:#08120C;
  --hero-bg:#0F1A15; --foco:#2BE07A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .flash.ok{background:#123024;border-color:#1f6844;color:#7ee2ab}
:root[data-theme="dark"] .flash.erro{background:#3a1618;border-color:#7d2f33;color:#ff9ea1}
:root[data-theme="dark"] th{background:var(--card-2)}

/* botao de tema (topo no celular, menu lateral no computador) */
.tema-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);background:none;border:0;
  cursor:pointer;font:inherit;color:var(--text);min-width:44px;min-height:44px;padding:0 10px;border-radius:var(--r-sm)}
.tema-btn:hover{background:var(--card-2)}
.tema-btn .ic{width:22px;height:22px}
.grafico{position:relative;display:flex;align-items:flex-end;gap:6px;height:120px;
  border-bottom:1px solid var(--border);padding-bottom:2px}
.grafico .col{flex:1;display:flex;align-items:flex-end;height:100%}
.grafico .bar{width:100%;border-radius:6px 6px 0 0;background:var(--muted);opacity:.85;
  min-height:2px;transition:height .3s}
.grafico .bar.green{background:var(--ganho);opacity:1}
.grafico .bar.amber{background:var(--lucro);opacity:1}
.grafico .bar.red{background:var(--despesa);opacity:.9}
.grafico .bar.sem{background:var(--border)}
.green-txt strong{color:var(--ganho)} .amber-txt strong{color:var(--lucro)} .red-txt strong{color:var(--despesa)}

/* ===== Desfazer: apagar deixa de ser definitivo ===== */
.flash-undo{display:flex;align-items:center;justify-content:space-between;gap:12px}
.undo-btn{background:var(--btn-fundo);color:var(--btn-texto);border:0;border-radius:10px;
  padding:7px 14px;font-weight:700;font-size:0.88rem;cursor:pointer;white-space:nowrap}
.undo-btn:hover{filter:brightness(1.08)}

/* o que veio do app (Turno GPS) e nao foi escrito a mao */
.vindo-do-app{background:var(--card-2);border:1px solid var(--border);border-left:3px solid var(--primario);
  border-radius:10px;padding:9px 12px;margin:2px 0 10px;font-size:0.88rem;color:var(--muted);line-height:1.45}
.vindo-do-app b{color:var(--text)}

/* explicacao de que o mes nao e 4 semanas certas */
.nota-conversao{background:var(--card-2);border:1px solid var(--border);border-left:3px solid var(--primario);
  border-radius:12px;padding:11px 14px;margin:0 0 12px;font-size:0.88rem;color:var(--muted);line-height:1.5}
.nota-conversao b{color:var(--text)}
.aviso-vat{color:var(--lucro);font-weight:800;font-size:0.88rem}
.card-dividir .d-txt{font-size:.88rem;color:var(--muted);line-height:1.5;margin:0 0 12px}
.card-dividir .d-conta .verde{color:var(--ganho)} .card-dividir .d-conta .ambar{color:var(--lucro)}
.card-dividir .d-conta .seta{font-size:1.3rem;color:var(--muted);align-self:center}

/* passos para instalar e ligar a app */
.passo{display:flex;gap:14px;align-items:flex-start;margin:0 0 18px}
.passo-txt{flex:1}
.passo-txt>b{color:var(--text);font-size:1rem}
.passo-txt .opcional{margin:4px 0 0;line-height:1.5}
.qr{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:170px;text-align:center}
.qr img{width:150px;height:150px;border:1px solid var(--border);border-radius:12px;background:#fff;padding:6px}
.ou{flex:1;min-width:180px}
@media (max-width: 640px){
  .baixar .ou .btn{width:100%;text-align:center;padding:15px}
}

/* link discreto dentro dos formularios (revelar campos escondidos) */
.link-discreto{background:none;border:0;color:var(--primario);font-weight:700;
  font-size:0.88rem;cursor:pointer;padding:2px 0;text-decoration:underline}
.link-discreto:hover{opacity:.8}

/* marca: logotipo a serio em vez do emoji */
.brand{display:inline-flex;align-items:center;gap:9px}
.brand-mark{width:26px;height:26px;border-radius:8px;display:block}

/* rodape legal + paginas legais */
.rodape{text-align:center;padding:26px 16px 90px;font-size:0.88rem;color:var(--muted)}
.rodape a{color:var(--muted);text-decoration:underline}
.rodape a:hover{color:var(--primario)}
.legal{max-width:640px;margin:0 auto;line-height:1.65}
.legal h3{margin:26px 0 8px;font-size:1.02rem;color:var(--text)}
.legal ul{padding-left:20px;margin:8px 0}
.legal li{margin-bottom:7px}

/* ===== Tipografia da marca — a MESMA da landing, senao a landing
   promete uma qualidade e o produto entrega outra. ===== */
:root{
  --display:'Bricolage Grotesque',Georgia,serif;
  --corpo:'Instrument Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
body{font-family:var(--corpo)}
h1,h2,h3,.brand,.numero,.numero-grande,.big,.hero-big,.hero-kept b,
.metric b,.grafico-tit,.plan .pr,.v-num{font-family:var(--display);letter-spacing:-.02em}
h1,h2{font-weight:500}
.hero-big,.numero-grande{font-weight:500;letter-spacing:-.035em}

/* deducao de milhas HMRC */
.card-deducao{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--ganho);
  border-radius:14px;box-shadow:var(--shadow);padding:16px 18px;margin:16px 0}
.card-deducao .d-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:.92rem;color:var(--muted);margin-bottom:8px}
.card-deducao .d-top b{font-family:var(--display);font-size:1.5rem;color:var(--ganho);letter-spacing:-.02em}
.card-deducao .opcional{margin:0 0 6px;line-height:1.5}

/* ===== O carro: alugado ou proprio, e o que cada um paga ===== */
.card-custos{background:var(--card);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow);padding:16px;margin:10px 0 18px}

/* escolher o segmento */
.segmento{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.seg-opt{display:flex;flex-direction:column;gap:2px;cursor:pointer;padding:13px 14px;
  border:1.5px solid var(--border);border-radius:13px;background:var(--card-2);
  transition:border-color .15s,background .15s}
.seg-opt:hover{border-color:var(--muted)}
.seg-opt input{position:absolute;opacity:0;pointer-events:none}
.seg-opt.ativo{border-color:var(--primario);background:color-mix(in srgb,var(--primario) 9%,var(--card))}
.seg-titulo{font-weight:800;color:var(--text);font-size:.95rem}
.seg-sub{font-size:0.88rem;color:var(--muted);line-height:1.4}
@media (max-width:560px){.segmento{grid-template-columns:1fr}}

/* o custo que nao se ve: quem tem carro proprio acha que nao paga nada */
.aviso-invisivel{background:var(--card-2);border:1px solid var(--border);
  border-left:3px solid var(--lucro);border-radius:12px;padding:11px 14px;
  margin:0 0 14px;font-size:0.88rem;color:var(--muted);line-height:1.5}
.aviso-invisivel b{color:var(--text)}

/* uma linha por custo, cada uma com o seu periodo */
.linhas-custo{display:flex;flex-direction:column}
.linha-custo{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--border)}
.linha-custo[hidden]{display:none}
.linha-custo:last-child{border-bottom:0}
.lc-nome{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;
  font-weight:600;color:var(--text);font-size:.92rem}
.lc-nome .opcional{font-size:0.88rem;line-height:1.4;font-weight:400}
.lc-nome input[type=text]{font-weight:600;font-size:.92rem;padding:7px 10px;width:100%;max-width:260px}
.lc-campos{display:flex;align-items:center;gap:6px;flex:0 0 auto;flex-wrap:wrap}
.lc-moeda{color:var(--muted);font-weight:700}
.lc-campos input{width:86px;text-align:right;padding:8px 10px;
  font-variant-numeric:tabular-nums;font-weight:700}
.lc-campos select{padding:8px 6px;font-size:0.88rem;color:var(--muted);max-width:112px}
/* o ciclo da locadora cortava "Mes do calendario" no celular (15/09/2026) */
.ciclo .lc-campos select{max-width:none}
.linha-custo.nova{border-top:1px dashed var(--border);margin-top:4px;padding-top:14px}
.linha-custo.nova .lc-nome input::placeholder{font-weight:600}
@media (max-width:560px){
  .linha-custo{flex-direction:column;align-items:stretch;gap:8px}
  .lc-campos{justify-content:flex-end}
  .lc-nome input[type=text]{max-width:none}
}

/* o total, e sobretudo o que ele custa POR HORA */
.total-custos{background:var(--card-2);border-radius:13px;padding:13px 15px;margin:14px 0}
.tc-linha{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:5px 0;font-size:.9rem;color:var(--muted)}
.tc-linha b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:700}
.tc-linha i{font-style:normal;font-size:0.88rem;opacity:.8}
.tc-linha.destaque{border-top:1px solid var(--border);margin-top:5px;padding-top:10px}
.tc-linha.destaque b{font-size:1.35rem;color:var(--despesa);font-family:var(--display)}
.total-custos .opcional{margin:9px 0 0;line-height:1.5;font-size:0.88rem}
.total-custos .opcional b{color:var(--text)}

/* setas de periodo no Relatorio: a seta "seguinte" fica apagada quando ja
   estamos no periodo a decorrer — nao ha futuro para ver */
.daynav-btn.vazio{opacity:.25;cursor:default;pointer-events:none}
/* o rotulo do periodo so no papel: no ecra ele ja esta entre as setas */
.so-imprimir{display:none}
@media print{ .so-imprimir{display:block!important} }

/* ===== Energia repartida: o que foi bomba e o que foi tomada ===== */
.reparte-energia{background:var(--card);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow);padding:14px 16px;margin:0 0 14px}
.re-linha{display:grid;grid-template-columns:104px 1fr auto;align-items:center;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--border)}
.re-linha:last-of-type{border-bottom:0}
.re-nome{font-weight:700;color:var(--text);font-size:.92rem;white-space:nowrap}
.re-barra{height:8px;border-radius:99px;background:var(--card-2);overflow:hidden;min-width:40px}
.re-barra span{display:block;height:100%;border-radius:99px;background:var(--despesa);opacity:.75}
.re-linha.carga .re-barra span{background:var(--aviso-fill)}
.re-valor{text-align:right;display:flex;flex-direction:column;gap:1px;white-space:nowrap}
.re-valor b{font-variant-numeric:tabular-nums;color:var(--text);font-size:1.02rem}
.re-valor .opcional{font-size:0.88rem}
.re-nota{margin:10px 0 0;font-size:0.88rem;line-height:1.5}
@media (max-width:560px){
  .re-linha{grid-template-columns:1fr auto;row-gap:6px}
  .re-barra{grid-column:1/-1;order:3}
}

/* ===== Foto do recibo: um botao de camara, nao um "escolher ficheiro" ===== */
.campo-recibo{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.rec-titulo{font-weight:600;color:var(--text)}
.rec-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.rec-botoes{display:flex;gap:10px;flex-wrap:wrap}
.btn-camara{flex:1 1 190px;justify-content:center;font-weight:700;
  background:var(--btn-fundo);color:var(--btn-texto);border-color:transparent;padding:14px 18px;font-size:1rem}
.btn-camara:hover{filter:brightness(1.06)}
.btn-galeria{flex:0 1 auto;padding:14px 16px}
/* no telemovel a camara e o gesto principal: fica sozinha na primeira linha */
@media (max-width:560px){
  .btn-camara{flex:1 1 100%}
  .btn-galeria{flex:1 1 100%;justify-content:center}
}
/* confirmacao de que a foto ficou mesmo guardada */
.rec-escolhido{display:flex;align-items:center;gap:12px;background:var(--card-2);
  border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.rec-escolhido[hidden]{display:none}
.rec-mini{width:52px;height:52px;object-fit:cover;border-radius:9px;
  border:1px solid var(--border);background:var(--card);flex:0 0 auto}
.rec-info{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.rec-nome{color:var(--text);font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-tirar{background:none;border:0;color:var(--muted);font-size:1.1rem;cursor:pointer;
  padding:6px 9px;border-radius:9px;line-height:1;flex:0 0 auto}
.rec-tirar:hover{background:var(--card);color:var(--despesa)}

/* ===== Foto primeiro: o talao e o ponto de partida da despesa ===== */
.campo-recibo.topo{background:var(--card-2);border:1px solid var(--border);
  border-radius:14px;padding:14px 16px;margin:0 0 18px}
.campo-recibo.topo .rec-titulo{font-size:1rem;font-weight:800;display:block}
.campo-recibo.topo .rec-titulo .opcional{display:block;font-weight:400;
  margin-top:3px;line-height:1.45}
/* o que o sistema leu do talao */
.rec-estado{border-radius:11px;padding:10px 13px;font-size:0.88rem;line-height:1.5;
  background:var(--card);border:1px solid var(--border);color:var(--muted)}
.rec-estado[hidden]{display:none}
.rec-estado b{color:var(--text)}
.rec-estado.bom{border-color:var(--ganho);
  background:color-mix(in srgb,var(--ganho) 10%,var(--card))}
.rec-estado.aviso{border-color:var(--lucro);
  background:color-mix(in srgb,var(--lucro) 12%,var(--card))}
/* campos preenchidos pela foto: ele ve logo o que nao escreveu */
.veio-da-foto{border-color:var(--primario)!important;
  background:color-mix(in srgb,var(--primario) 7%,var(--card))!important}
/* lembrete de que nada esta fechado: o que estiver mal, escreve-se por cima */
.rec-corrigir{display:block;margin-top:3px;opacity:.85}
/* campo preenchido pela foto muda de cor quando ele lhe toca */
.veio-da-foto{transition:background-color .2s,border-color .2s}

/* ===== Recibos: ver as fotos e mandar tudo ao contabilista ===== */
.clipe{text-decoration:none;opacity:.75;margin-left:4px}
.clipe:hover{opacity:1}
.grelha-recibos{display:grid;gap:12px;margin:10px 0 18px;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.recibo-cartao{display:flex;flex-direction:column;gap:1px;text-decoration:none;
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:8px;box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.recibo-cartao:hover{border-color:var(--primario);transform:translateY(-2px)}
.recibo-cartao img{width:100%;height:150px;object-fit:cover;border-radius:8px;
  background:var(--card-2);margin-bottom:6px}
.rc-data{font-size:0.88rem;color:var(--muted);font-variant-numeric:tabular-nums}
.rc-cat{font-size:0.88rem;font-weight:700;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-valor{font-size:.9rem;font-weight:800;color:var(--despesa);
  font-variant-numeric:tabular-nums}

/* ===== Ver o talao de perto, sem sair do relatorio ===== */
.lupa{position:fixed;inset:0;z-index:200;background:rgba(6,8,9,.94);
  display:flex;flex-direction:column;align-items:center}
.lupa[hidden]{display:none}
.lupa-topo{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;
  color:#EAEFEC;font-size:0.88rem}
.lupa-etiqueta{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;opacity:.9;font-variant-numeric:tabular-nums}
.lupa-btn{background:#2A2F32;border:0;color:#fff;cursor:pointer;
  border-radius:10px;padding:9px 13px;font-size:1rem;line-height:1;text-decoration:none;
  flex:0 0 auto}
.lupa-btn:hover{background:rgba(255,255,255,.24)}
/* o palco rola quando a foto esta ampliada — e assim que se le a letra pequena */
.lupa-palco{flex:1;width:100%;overflow:auto;display:flex;align-items:center;
  justify-content:center;padding:0 12px 16px;-webkit-overflow-scrolling:touch}
.lupa-palco img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;
  border-radius:8px;background:#fff}
.lupa-palco.ampliado{align-items:flex-start;justify-content:flex-start}
.lupa-palco.ampliado img{max-width:none;max-height:none;width:auto;height:auto;
  min-width:190%;cursor:zoom-out}
.lupa-seta{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  background:rgba(255,255,255,.14);border:0;color:#EAEFEC;cursor:pointer;
  border-radius:50%;width:46px;height:46px;font-size:1.05rem}
.lupa-seta:hover{background:rgba(255,255,255,.28)}
.lupa-seta.ant{left:10px} .lupa-seta.seg{right:10px}
@media (max-width:560px){
  .lupa-seta{width:40px;height:40px;opacity:.8}
  .lupa-palco{padding:0 0 12px}
}

/* ===== As duas perguntas do registo ===== */
.grupo-registo{border:0;padding:0;margin:16px 0 0}
.grupo-registo legend{padding:0;font-weight:700;color:var(--text);font-size:.95rem;
  margin-bottom:8px}
.grupo-registo .opcional{margin:7px 0 0;line-height:1.45}
.grupo-registo .segmento{margin-bottom:0}

/* ===== Registo por convite e travoes contra robos ===== */
/* O isco tem de estar no formulario mas fora do alcance de um humano.
   display:none seria detetado por robos melhores; isto engana mais. */
.isco{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.codigo-convite{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.95rem;font-weight:700;letter-spacing:.06em;background:var(--card-2);
  padding:4px 8px;border-radius:7px;border:1px solid var(--border);color:var(--text)}
/* despesas separadas por natureza, para a tela nao sugerir uma soma que nao existe */
tr.grupo-desp td{font-size:0.88rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);background:var(--card-2);
  padding-top:12px;padding-bottom:6px}
tr.sub-desp td{font-weight:700;color:var(--muted);border-bottom:2px solid var(--border)}

/* copiar o link do convite: ele so tem de colar no WhatsApp */
.btn-copiar{margin-left:6px;padding:4px 9px;border-radius:7px;cursor:pointer;
  border:1px solid var(--border);background:var(--card-2);color:var(--text);
  font-size:0.88rem;font-weight:600;white-space:nowrap}
.btn-copiar:hover{border-color:var(--primario);color:var(--primario)}
tr.gasto{opacity:.55}
tr.gasto .codigo-convite{text-decoration:line-through}
.por-usar{color:var(--ganho);font-weight:700;font-size:0.88rem}
/* cabecalho de cada cartao de progresso na Tendencia */
.meta-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-weight:800;color:var(--text);margin-bottom:10px}
.meta-cab .opcional{font-weight:400}

/* ===== Aviso das milhas da semana (Home) =====
   Aparece so a partir dos 70%. Amarelo = ainda da para corrigir;
   vermelho = ja esta a pagar a mais. */
.aviso-milhas{background:var(--card);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow);padding:13px 15px;margin:0 0 14px}
.aviso-milhas.perto{border-left:3px solid var(--lucro)}
.aviso-milhas.passou{border-left:3px solid var(--despesa)}
.aviso-milhas .linha{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:8px}
.aviso-milhas .linha b{font-variant-numeric:tabular-nums;color:var(--text);font-size:1.05rem}
.am-txt{font-size:0.88rem;color:var(--muted);line-height:1.5;margin-top:8px}
.am-txt b{color:var(--text)}
.aviso-milhas.passou .am-txt b{color:var(--despesa)}

/* ===== Escolher os aeroportos onde se trabalha =====
   Agrupados por regiao: uma lista corrida de 25 nomes nao se le. */
.escolher-aero{margin:0 0 16px}
.escolher-aero summary{font-weight:700;color:var(--text)}
.aero-regiao{margin:0 0 12px}
.ar-titulo{font-size:0.88rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:6px}
.ar-lista{display:flex;flex-wrap:wrap;gap:7px}
.ar-item{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid var(--border);border-radius:999px;padding:7px 13px;
  background:var(--card);font-size:.88rem;color:var(--text);
  transition:border-color .15s,background .15s}
.ar-item:hover{border-color:var(--primario)}
.ar-item input{margin:0;cursor:pointer}
.ar-item:has(input:checked){border-color:var(--primario);
  background:color-mix(in srgb,var(--primario) 10%,var(--card))}
/* os que ele ja tem ficam la, marcados e fechados, para nao os pedir outra vez */
.ar-item.ja{opacity:.5;cursor:default}
.ar-item.ja:hover{border-color:var(--border)}
/* escolher a lingua a mao — a automatica ja vem do telemovel */
.escolhe-idioma b{color:var(--text)}
.escolhe-idioma a{opacity:.75}

/* QR do código de ligação — o caminho principal, sem digitar nada */
.qr-ligacao{display:flex;justify-content:center;margin:16px 0 8px}

/* código de ligação da app — a alternativa, para quem digitar à mão */
.codigo-ligacao{font-size:clamp(18px,4vw,26px);font-weight:800;letter-spacing:3px;
  background:var(--card-2);border:1px solid var(--border);border-radius:16px;
  padding:16px;text-align:center;margin:0 0 16px;color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;line-height:1.4}

/* DIAS SEM RESPOSTA — nem lancados nem marcados como parados.
   O carro desses dias nao esta descontado em lado nenhum, e ate haver este
   aviso o motorista nao tinha como saber: umas ferias de 11 dias custavam
   £0 no sistema e £532 na conta bancaria. Cor de alerta (nao de erro): nao ha
   nada partido, ha uma pergunta por responder. */
.aviso-buraco{background:var(--card-2);border:1px solid var(--border);
  border-left:3px solid var(--lucro);border-radius:12px;padding:14px 16px;
  margin:0 0 14px;font-size:.88rem;line-height:1.55;color:var(--muted)}
.aviso-buraco b{color:var(--text)}
.buraco-form{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.btn-parado{background:var(--aviso-fill);color:#2A1D00;border:0;border-radius:10px;
  padding:11px 16px;font-size:.9rem;font-weight:700;cursor:pointer;
  font-family:inherit;line-height:1.3}
.btn-parado:hover{filter:brightness(1.06)}
.btn-parado:active{transform:translateY(1px)}

/* O dia marcado como parado, na Home. Nao ha ganhos para mostrar — ha um custo
   que correu na mesma, e e isso que tem de se ver. */
.dia-parado{background:var(--card-2);border:1px solid var(--border);
  border-left:3px solid var(--lucro);border-radius:12px;padding:14px 16px;
  margin:0 0 14px;font-size:.9rem;line-height:1.55;color:var(--muted)}
.dia-parado b{color:var(--text)}
.dia-parado form{display:inline}
.link-parado{background:none;border:0;padding:0;font:inherit;cursor:pointer;
  color:var(--primario);text-decoration:underline;
  /* 44px de altura: tinha 24 e e tocado com o polegar, as vezes no carro */
  min-height:44px;display:inline-flex;align-items:center;text-align:left}

/* --------------------------------------------------------------------------
   LEGIBILIDADE (06/09/2026). Medido com a formula de contraste da WCAG nas 5
   telas: 11 pares de cor abaixo do minimo de 4,5:1. O pior era o botao mais
   usado do produto, "+ Lancar ganhos", a 1,74:1 — branco sobre o verde da
   marca. O motorista usa isto de noite, com luz de poste na tela.
   -------------------------------------------------------------------------- */

/* Um <a> sem regra propria herda o azul do navegador (#0000EE): 1,75:1 sobre
   o fundo escuro. Aqui nenhum link fica ao acaso. */
a { color: var(--link, var(--primario)); }
a:visited { color: var(--link, var(--primario)); }
.tabbar a, .btn, .btn-primario, .tab { color: inherit; }
.btn-primario, .btn.ativo { color: var(--btn-texto); }
.tabbar a.tab { color: var(--muted); }
.tabbar a.tab.active { color: var(--primario); }

/* O botao do tema herdava a cor do texto do body; no escuro ficava preto sobre
   preto (1,18:1). */
.tema-btn { color: var(--text); }

/* A CONTA EMPILHADA. Substitui a .conta antiga, que era uma linha com "−", "−"
   e "=". Cada facto na sua linha, valores alinhados a direita com algarismos de
   largura fixa para as libras se lerem em coluna. */
.conta-lista{background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:6px 16px;margin-bottom:12px}
.cl-linha{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--border)}
.cl-linha:last-child{border-bottom:0}
.cl-linha span{color:var(--muted);font-size:1rem}
.cl-linha b{font-variant-numeric:tabular-nums;font-size:1.08rem;white-space:nowrap}
.cl-total{padding-top:13px;padding-bottom:13px}
.cl-total span{color:var(--text);font-weight:700}
.cl-total b{color:var(--ganho);font-size:1.35rem;font-weight:800}
.cl-total.neg b{color:var(--despesa)}

/* "Faltam £162" — o numero que o motorista precisa, em libras e em destaque.
   A barra em cima ja mostra a proporcao; o numero diz quanto e. */
.al-falta{font-size:1.15rem;font-weight:800;color:var(--text);margin-top:4px}

/* --------------------------------------------------------------------------
   ALVOS DE TOQUE E TAMANHO DE LETRA (06/09/2026)

   Medido a 375px nas 5 telas: "Eu trabalhei — desfazer" tinha 22px de altura,
   "Adicionar" 19px, o seletor das faturas 19px. O minimo do GDS e da Apple e
   44px, e isto usa-se com o carro andando. As fontes: 10 elementos a 12px so
   na tela de configuracoes — o guia do governo britanico usa 19px de corpo.

   Nada aqui muda o desenho: so aumenta area de toque e o degrau mais baixo da
   escala de letra.
   -------------------------------------------------------------------------- */

/* Ninguem tem de acertar num alvo de 19px dentro de um carro. */
.undo-btn, .btn-parado, .fs-apagar, .vazio a, .detalhe summary,
.tema-btn, .sair, .clipe, .lupa-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.undo-btn, .btn-parado { padding: 10px 16px; }
/* Links dentro de paragrafo nao podem virar bloco — so ganham area em volta. */
p a, .opcional a, .am-txt a { padding: 6px 0; display: inline-block; }

/* Os selects e inputs de ficheiro sao onde ele toca com o dedo, nao com rato. */
select, input[type="file"], input[type="date"], input[type="number"],
input[type="text"], input[type="email"] { min-height: 44px; font-size: 16px; }
/* 16px tambem impede o iOS de dar zoom sozinho ao focar o campo. */

/* O "mais" da tela de lancar o dia. Fechado por omissao: das 12 caixas que a
   tela tinha, so uma era obrigatoria, e e uma tela usada todos os dias. */
.mais-dia{margin:4px 0 14px}
.mais-dia>summary{cursor:pointer;list-style:none;color:var(--primario);
  font-weight:600;padding:14px 2px;min-height:44px;display:flex;align-items:center}
.mais-dia>summary::-webkit-details-marker{display:none}
.mais-dia>summary::before{content:"▸ ";margin-right:6px}
.mais-dia[open]>summary::before{content:"▾ "}
.mais-dia[open]>summary{margin-bottom:6px}

/* "Ver o resto do dia" — o que saiu da primeira tela da Home. */
.resto-dia{margin:16px 0 8px}
.resto-dia>summary{cursor:pointer;list-style:none;color:var(--primario);
  font-weight:600;padding:14px 2px;min-height:44px;display:flex;align-items:center}
.resto-dia>summary::-webkit-details-marker{display:none}
.resto-dia>summary::before{content:"▸ ";margin-right:6px}
.resto-dia[open]>summary::before{content:"▾ "}
.detalhe-aberto{background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:14px 16px;margin:12px 0}
.detalhe-aberto h3{margin:0 0 8px;font-size:1.02rem}

/* Os dois botoes do dia, lado a lado e do tamanho do dedo. */
.dayactions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.dayactions .btn{min-height:52px;display:flex;align-items:center;
  justify-content:center;font-size:1rem;font-weight:700}
@media (max-width:340px){ .dayactions{grid-template-columns:1fr} }

/* Seccao de configuracao recolhida: o titulo a esquerda, o valor que ja esta
   guardado a direita. Assim ele ve o que esta configurado sem abrir nada. */
.secao-config{background:var(--card);border:1px solid var(--border);
  border-radius:16px;margin:14px 0;overflow:hidden}
.secao-config>summary{cursor:pointer;list-style:none;padding:16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:56px}
.secao-config>summary::-webkit-details-marker{display:none}
.secao-config>summary b{font-size:1.05rem;font-weight:700}
.secao-config .sc-resumo{color:var(--muted);font-size:.95rem;white-space:nowrap}
.secao-config .sc-resumo::after{content:" ›";font-size:1.1rem}
.secao-config[open]>summary{border-bottom:1px solid var(--border)}
.secao-config[open] .sc-resumo::after{content:" ▾"}
.secao-config>*:not(summary){padding:0 16px}
.secao-config .card-custos{padding:0}

/* Intervalo de datas livre: o filtro rapido resolve o dia a dia. */
.datas-livres{margin:10px 0 6px}
.datas-livres>summary{cursor:pointer;list-style:none;color:var(--primario);
  font-weight:600;min-height:44px;display:flex;align-items:center;padding:2px}
.datas-livres>summary::-webkit-details-marker{display:none}
.datas-livres>summary::before{content:"▸ ";margin-right:6px}
.datas-livres[open]>summary::before{content:"▾ "}

/* Ao IMPRIMIR (e no PDF do contabilista) tudo tem de aparecer, aberto ou nao:
   o papel nao tem toque. */
@media print{
  details{display:block !important}
  details>*{display:revert !important}
  details>summary{list-style:none}
  .nao-imprimir{display:none !important}
}

.tab-numeros{margin:6px 0 18px}
.tab-numeros>summary{cursor:pointer;list-style:none;color:var(--primario);
  font-weight:600;min-height:44px;display:flex;align-items:center;padding:2px}
.tab-numeros>summary::-webkit-details-marker{display:none}
.tab-numeros>summary::before{content:"▸ ";margin-right:6px}
.tab-numeros[open]>summary::before{content:"▾ "}

/* O odometro deixou de ser o caminho principal (07/09/2026): quem quer usa,
   quem so tem o total dos aplicativos escreve o total. */
.odometro{margin:8px 0 2px}
.odometro>summary{cursor:pointer;list-style:none;color:var(--primario);
  font-weight:600;min-height:44px;display:flex;align-items:center;font-size:.95rem}
.odometro>summary::-webkit-details-marker{display:none}
.odometro>summary::before{content:"▸ ";margin-right:6px}
.odometro[open]>summary::before{content:"▾ "}

/* A nota que explica o numero, colada a ele. Sem isto, a tela diz uma coisa e o
   relatorio do contabilista diz outra, e ninguem sabe porque. */
.cl-nota{display:inline-block;margin-top:3px;font-style:normal;font-size:.86rem;
  line-height:1.35;color:var(--muted);opacity:.9}

/* O numero que o motorista leva para o copiloto. Os dois produtos nao conversam,
   por isso este e o unico caminho — tem de estar visivel e ser facil de copiar. */
/* As classes do custo por milha (.copiar-custo, .cc-*) sairam com ele
   em 21/09/2026. */

/* A equivalencia semana/mes/ano, ao lado do campo. Aparece so quando ha valor. */
/* white-space:nowrap aqui empurrava a linha para fora do cartao e escondia o £ (15/09/2026) */
.lc-equiv{color:var(--muted);font-size:.9rem;white-space:normal;
  flex-basis:100%;margin-top:4px}

/* A porta para a Tendencia, agora que ela nao e uma aba. */
.ver-evolucao{display:flex;align-items:center;justify-content:center;
  min-height:52px;margin:12px 0 4px;font-weight:600;font-size:1rem}

/* ---- A semana: dias de trabalho e folgas, dentro do cartao do carro (11/09/2026) ---- */
.semana-titulo{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.semana-grade{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:12px}
.semana-grade form{margin:0}
.sg-dia{width:100%;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--text);font:inherit;cursor:pointer;padding:6px 0}
.sg-letra{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.sg-num{font-weight:700;font-variant-numeric:tabular-nums}
.sg-marca{font-size:.85rem;line-height:1;min-height:1em}
.sg-dia.folga{background:var(--card-2);border-style:dashed}
.sg-dia.trabalhou{border-color:var(--btn-fundo)}
.sg-dia.trabalhou .sg-marca{color:var(--btn-fundo);font-weight:800}
.sg-dia.plano .sg-marca{color:var(--muted)}
.sg-dia.antes{opacity:.45}
.sg-dia.sel{box-shadow:inset 0 0 0 2px var(--btn-fundo)}
.sg-dia:disabled{cursor:default}
.sg-dia:not(:disabled):active{background:var(--card-2)}
.sg-dia:focus-visible{outline:3px solid var(--btn-fundo);outline-offset:2px}
.sg-ferias{margin:10px 0 0}


/* ==========================================================================
   PADRAO VISUAL TRUEEARN — componentes e layout (15/09/2026)
   Documentado em DESIGN.md; cada peca aparece viva em static/padrao-visual.html.
   ========================================================================== */

/* Foco de teclado visivel em tudo o que se toca. :focus-visible so pinta o
   anel quando se navega por teclado — o dedo nao ve nada. */
:where(a, button, input, select, textarea, summary):focus-visible{
  outline:3px solid var(--foco); outline-offset:2px}
.sg-dia:focus-visible{outline:3px solid var(--foco)}

/* "Pular para o conteudo": so aparece a quem usa teclado */
.pular{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--btn-fundo);
  color:var(--btn-texto)!important;padding:12px 18px;border-radius:var(--r-md);font-weight:700;text-decoration:none}
.pular:focus{left:12px}

/* Icones SVG — um so desenho em todos os aparelhos (templates/_ui.html) */
.ic{width:1.2em;height:1.2em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
.link-parado .ic,.al-falta .ic{margin-right:6px}
.secao-config>summary b{display:inline-flex;align-items:center;gap:10px}
.secao-config>summary b .ic,.periodo-titulo .ic,.d-top .ic,.vat-regime .ic,tr.grupo-desp .ic,
.meta-top .ic,.opcional .ic{color:var(--primario)}
.am-txt .ic,.aviso-buraco .ic{color:var(--lucro)}

/* Cabecalho de pagina */
.cabeca-pagina{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);
  flex-wrap:wrap;margin:var(--s2) 0 var(--s4)}
.cabeca-pagina h1{margin:0}

/* Cartoes: um raio, uma borda, sem sombra — a mesma pele em todas as telas */
.conta-lista,.card-aluguer,.secao-config,.detalhe-aberto,.card,.metric,.meta-card,.info-linha,
.reparte-energia,.aviso-milhas,.card-deducao,.detalhe,.vazio,.card-custos{
  border-radius:var(--r-lg);box-shadow:none}
.card-aluguer{padding:var(--s4)}
.conta-lista{padding:var(--s1) var(--s4)}
.cl-total b{font-family:var(--display);font-weight:500;font-size:1.5rem}

/* Numeros-resumo (horas, milhas, £/milha) */
.kpis{gap:var(--s3)}
.kpis .card{padding:var(--s4)}
.kpis .rotulo{font-size:var(--t-sm)}
.kpis .numero{font-size:var(--t-xl);font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums}

/* Boas-vindas de conta nova: a mesma superficie do numero-rei */
.boas-vindas{background:var(--hero-bg);color:var(--hero-texto);border-radius:var(--r-lg);
  padding:var(--s5);margin-bottom:var(--s4);border:1px solid color-mix(in srgb,var(--hero-acento) 20%,transparent)}
.boas-vindas h2{margin:0 0 var(--s2);color:var(--hero-texto)}
.boas-vindas p{margin:0 0 var(--s4);color:var(--hero-suave);max-width:60ch}
.boas-vindas .btn{background:var(--hero-acento);border-color:var(--hero-acento);color:#08120C}

/* Semana: icones no lugar dos emojis */
.sg-marca .ic{width:15px;height:15px;vertical-align:0}
.sg-dia.folga .sg-marca{color:var(--muted)}

/* Lupa dos recibos */
.lupa-btn .ic,.lupa-seta .ic{width:20px;height:20px;vertical-align:-.25em}

/* ---------------- Layout do computador (>= 1024px) ---------------- */
@media (min-width:1024px){
  body{padding-bottom:0;padding-left:248px}
  .topbar{display:none}
  .tabbar{top:0;bottom:0;right:auto;width:248px;flex-direction:column;align-items:stretch;gap:2px;
    padding:var(--s5) var(--s3);border-top:0;border-right:1px solid var(--border)}
  .nav-marca{display:flex;align-items:center;gap:10px;padding:4px 12px var(--s5);font-family:var(--display);
    font-size:1.3rem;font-weight:600;letter-spacing:-.02em;color:var(--primario);text-decoration:none}
  .nav-marca .brand-mark{width:30px;height:30px}
  .tabbar .tab{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:12px;min-height:48px;
    padding:0 12px;border-radius:var(--r-md);font-size:var(--t-base);text-align:left}
  .tabbar .tab .ic{width:22px;height:22px}
  .tabbar a.tab:hover{background:var(--card-2);color:var(--text)}
  .tabbar a.tab.active{background:color-mix(in srgb,var(--primario) 13%,transparent);color:var(--primario)}
  .nav-rodape{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:var(--s3);
    border-top:1px solid var(--border)}
  .nav-rodape .tab{width:100%;background:none;border:0;font:inherit;font-size:var(--t-base);cursor:pointer;color:var(--muted)}
  .nav-rodape .tab:hover{background:var(--card-2);color:var(--text)}
  main{max-width:1180px;padding:var(--s6) var(--s6) var(--s5)}
  .rodape{padding-bottom:var(--s6)}

  /* Inicio: o dia a esquerda, a semana a direita. A primeira tela responde
     "como foi hoje" E "o carro ja esta pago?" sem rolar. */
  .painel-dia{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s5);align-items:start}
  .painel-dia .hero-big{font-size:3.75rem}

  /* Relatorio: periodo e setas na mesma linha; o resumo em duas colunas */
  .rel-topo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s3);
    align-items:center;margin-bottom:var(--s3)}
  .rel-topo .filtro-rapido,.rel-topo .daynav{margin:0}
  .rel-topo .datas-livres{grid-column:1/-1;margin:0}
  .rel-resumo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4);
    align-items:stretch;margin-bottom:var(--s3)}
  .rel-resumo .hero-bolso,.rel-resumo .conta-lista{margin:0}
  .rel-resumo .hero-bolso{display:flex;flex-direction:column;justify-content:center}
}

/* ---- Campos nativos e o ciclo da locadora (15/09/2026) ----
   Sem color-scheme o iPhone desenhava a data e a lista com fundo claro no modo
   escuro. E no celular a lista do ciclo ocupa a largura toda: "Mes de
   calendario" aparecia cortado. */
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){color-scheme:dark} }
.ciclo-inicio.sem-ciclo{display:none}
@media (max-width:560px){
  .ciclo .lc-campos{justify-content:stretch}
  .ciclo .lc-campos select, .ciclo .lc-campos input[type=date]{width:100% !important;max-width:none}
}

/* ---- A tela de lancar (16/09/2026) ----
   Tres botoes do mesmo tamanho, lado a lado: ganhos, milhas e horas, despesa.
   Icone em cima e o nome embaixo, para caber no celular sem cortar o texto. */
.lancar-botoes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin:0 0 var(--s4)}
.lancar-botoes .lancar{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;min-height:84px;padding:12px 6px;text-align:center;font-size:var(--t-sm);line-height:1.2}
.lancar-botoes .lancar .ic{width:26px;height:26px;margin:0}
.lancados h2,.semana-card h2{font-size:var(--t-md);margin:0 0 var(--s2)}
.semana-card h2 .opcional{font-weight:400;font-size:var(--t-sm);margin-left:6px}
.semana-rodape{margin:var(--s2) 0 0}
.cl-linha b.saida{color:var(--despesa)}
.cl-linha a{color:inherit}

/* ---- Botao ja visitado (16/09/2026) ----
   `a:visited` pinta links de verde, e ganha de `.btn-primario` na especificidade:
   depois de tocar em "Ganhos" uma vez, o texto ficava verde em cima do botao
   verde e SUMIA no iPhone (o navegador de teste nao tem historico, nao via). */
a.btn:visited { color: var(--text); }
a.btn-primario:visited, a.btn.ativo:visited { color: var(--btn-texto); }

/* ---- O painel do dono (17/09/2026) ----
   Endereco separado: nao tem a barra de abas do motorista. Logo a barra de topo
   tem de ficar visivel TAMBEM no computador (onde ela normalmente da lugar ao
   menu lateral), e o conteudo nao pode guardar os 248px desse menu. */
.corpo-dono .topbar { display: flex; }
@media (min-width: 1024px) {
  body.corpo-dono { padding-left: 0; }
  .corpo-dono main { margin: 0 auto; }
}

/* Recibos em LISTA, sem miniatura (05/10/2026, ele: esconder as fotos e abrir
   so ao tocar). 19 fotos ocupavam 10 telas de rolagem; a linha abre a foto. */
.lista-recibos{display:flex;flex-direction:column;margin:10px 0 18px;
  background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.lista-recibos .recibo-cartao{flex-direction:row;align-items:center;gap:10px;
  min-height:48px;padding:10px 14px;border:0;border-radius:0;box-shadow:none;
  border-bottom:1px solid var(--border);background:none}
.lista-recibos .recibo-cartao:last-child{border-bottom:0}
.lista-recibos .recibo-cartao:hover{transform:none;background:var(--card-2)}
.lista-recibos .rc-cat{flex:1}

/* Linha que se pode editar: o lapis diz que toca (07/10/2026). */
.cl-editar{display:inline-flex;align-items:center;gap:6px;min-height:32px;color:var(--text);text-decoration:none}
.cl-editar .ic{width:15px;height:15px;color:var(--primario);flex:none}

/* O aviso do teste gratis e da licenca (08/10/2026): uma linha, nunca um muro. */
.faixa-licenca{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;
  margin:0 0 14px;padding:12px 14px;border:1px solid var(--border);border-left:3px solid var(--lucro);
  border-radius:12px;background:var(--card);font-size:.95rem;line-height:1.45}
.faixa-licenca.fim{border-left-color:var(--despesa)}
.faixa-licenca span{flex:1 1 240px}


/* ===== REVISAO DE APRESENTACAO DO BOOKS (10/10/2026) =====================
   So estilo. Nada aqui muda um numero. */

/* Colunas de numeros alinhadas: todos os algarismos com a mesma largura. */
.conta-lista b, .numero, .hero-big, td.num, .tc-linha b { font-variant-numeric: tabular-nums; }

/* O que SAI aparece com o sinal de menos e sem cor de alarme: e uma conta,
   nao um aviso. O total continua a ser a unica linha em destaque. */
.conta-lista .cl-linha b.saida { font-weight: 600; }
.nota-conta { margin: 10px 2px 0; font-size: .85rem; }

/* O heroi do relatorio: a linha que diz o que o numero e. */
.hero-nota { margin-top: 6px; font-size: var(--t-xs); color: var(--hero-suave); }

/* O fecho da tabela de despesas: a soma inteira e, por baixo, os dois passos
   ate o numero do resumo. O ultimo passo fecha com um traco por cima. */
tr.fecho-desp td { border-top: 2px solid var(--border); }
tr.fecho-passo td { color: var(--muted); border-bottom: 0; padding-top: 6px; padding-bottom: 6px; }
tr.fecho-passo.fim td { color: var(--text); border-top: 1px solid var(--border); padding-top: 10px; padding-bottom: 12px; }

/* O historico do carro, recolhido dentro da secao do carro. */
.historico-carro { margin: 14px 0; border: 1px dashed var(--border); border-radius: 13px; }
.historico-carro > summary { cursor: pointer; padding: 13px 15px; font-weight: 600; color: var(--muted); }
.historico-carro > *:not(summary) { margin-left: 15px; margin-right: 15px; }
.historico-carro[open] > summary { border-bottom: 1px dashed var(--border); margin-bottom: 12px; }

/* Milhas e horas lado a lado quando ha largura; uma coluna no celular. */
.formulario.largo { max-width: 460px; }
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 1024px) {
  .formulario.largo { max-width: 940px; }
  .formulario.largo > label, .formulario.largo > .acoes, .formulario.largo > p { max-width: 460px; }
  .duas-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* O botao da foto: o texto herdava a cor da pagina por cima do verde (uma
   regra mais abaixo no arquivo ganhava da cor do botao). Claro sobre verde
   claro, no tema escuro, mal se lia. */
.btn.btn-camara { color: var(--btn-texto); }
.btn-camara .ic, .btn-galeria .ic { margin-right: 8px; }
.rec-tirar .ic { width: 18px; height: 18px; }

/* Configuracoes: menos caixa dentro de caixa. A moldura de fora do formulario
   sai; ficam os blocos de dentro, cada um com a sua borda. */
.card-custos { background: none; border: 0; padding: 0; box-shadow: none; }
.card-custos > h2 { margin-top: 26px; }

/* A tabela de categorias cabe no celular: so a coluna dos nomes quebra de
   linha; os valores ficam sempre a vista, sem rolar para o lado. */
.tabela-cat td:first-child { white-space: normal; }
.tabela-cat th, .tabela-cat td { padding-left: 12px; padding-right: 12px; }
@media (max-width: 480px) {
  .tabela-cat th:nth-child(3), .tabela-cat td:nth-child(3) { display: none; }   /* a % sai; o valor fica */
  .secao-config .sc-resumo { white-space: normal; text-align: right; font-size: .85rem; }
}

/* Botoes confortaveis para o dedo. */
.btn, .formulario input, .formulario select { min-height: 44px; }