:root {
  --verde: #1e9e5a; --amarelo: #e0a800; --vermelho: #d64545;
  --fundo: #f4f5f7; --cartao: #fff; --texto: #1c2733; --sutil: #6b7683;
  --marca: #14213d; /* navy */
}
* { box-sizing: border-box; margin: 0; }
body { font-family: -apple-system, system-ui, sans-serif; background: var(--fundo);
       color: var(--texto); padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.oculto { display: none !important; }
#tela-login { position: fixed; inset: 0; background: var(--marca); display: flex;
              align-items: center; justify-content: center; z-index: 10; }
#form-login { width: min(320px, 85vw); display: flex; flex-direction: column; gap: 12px; }
#form-login h1 { color: #fff; font-size: 22px; text-align: center; margin-bottom: 8px; }
#form-login input { padding: 14px; border-radius: 10px; border: none; font-size: 16px; }
#form-login button { padding: 14px; border-radius: 10px; border: none; font-size: 17px;
                     font-weight: 600; background: #fca311; color: var(--marca); }
.erro { color: #ffb3b3; text-align: center; font-size: 14px; min-height: 1.2em; }
#topo { position: sticky; top: 0; z-index: 5; background: var(--marca); color: #fff; padding: 14px 16px;
        padding-top: calc(14px + env(safe-area-inset-top)); display: flex;
        justify-content: space-between; align-items: baseline; }
#topo-mes { font-size: 13px; opacity: .85; }
#app { padding: 14px; max-width: 640px; margin: 0 auto; }
.cartao { background: var(--cartao); border-radius: 14px; padding: 16px; margin-bottom: 12px;
          box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; text-align: center; }
.kpi small { display: block; color: var(--sutil); font-size: 11px; text-transform: uppercase; }
.kpi strong { font-size: 17px; }
.delta { font-size: 12px; font-weight: 600; }
.delta.pos { color: var(--verde); } .delta.neg { color: var(--vermelho); }
.linha-loja { display: flex; align-items: center; gap: 10px; padding: 12px 4px;
              border-bottom: 1px solid #eceef1; color: inherit; text-decoration: none; }
.linha-loja:last-child { border-bottom: none; }
.bolinha { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.linha-loja .nome { flex: 1; font-weight: 600; }
.linha-loja .valores { text-align: right; font-size: 13px; color: var(--sutil); }
.abas { display: flex; gap: 6px; margin-bottom: 12px; }
.abas button { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid #d8dde3;
               background: #fff; font-size: 14px; font-weight: 600; color: var(--sutil); }
.abas button.ativa { background: var(--marca); color: #fff; border-color: var(--marca); }
#cx-abas { overflow-x: auto; }
#cx-abas button { flex: 1 0 auto; padding: 10px 8px; font-size: 13px; }
#menu { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; display: flex;
        border-top: 1px solid #e2e5e9; padding-bottom: env(safe-area-inset-bottom); }
#menu a { flex: 1; text-align: center; padding: 8px 0 6px; font-size: 20px;
          text-decoration: none; color: var(--sutil); position: relative; }
#menu a small { display: block; font-size: 10px; }
#menu a.ativa { color: var(--marca); font-weight: 700; }
.bolinha-aba { position: absolute; top: 6px; left: 50%; margin-left: 10px;
               width: 8px; height: 8px; border-radius: 50%; background: var(--vermelho); }
table.dre { width: 100%; border-collapse: collapse; font-size: 14px; }
table.dre td { padding: 7px 2px; border-bottom: 1px solid #f0f2f4; }
table.dre td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.selo { font-size: 11px; padding: 2px 8px; border-radius: 999px; color: #fff; }
.aviso-offline { background: #fff4d6; color: #7a5b00; font-size: 13px; padding: 8px 12px;
                 border-radius: 10px; margin-bottom: 12px; }
h2.secao { font-size: 15px; color: var(--sutil); margin: 18px 0 8px; }
.nota { font-size: 14px; background: #f0f4ff; border-radius: 10px; padding: 10px 12px;
        margin-top: 10px; white-space: pre-wrap; }
button.acao { padding: 10px 14px; border-radius: 10px; border: none; background: var(--marca);
              color: #fff; font-weight: 600; }
input.campo, select.campo, textarea.campo { width: 100%; padding: 10px; border-radius: 8px;
              border: 1px solid #d8dde3; font-size: 15px; margin: 4px 0; }
.selo-loja {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  font-size: 11px; border-radius: 10px;
  background: var(--fundo, #f0f0f3); color: var(--sutil); vertical-align: 2px;
}

/* ── aba Caixa ───────────────────────────────────────────── */
 /* os KPIs da aba Caixa são valores longos (R$ 32.107.488): fonte menor
    para caberem nas 3 colunas no iPhone */
#cx-corpo .kpi strong { font-size: 15px; }
.cx-sub { display: block; font-size: 11px; color: var(--sutil); line-height: 1.35; margin-top: 2px; }
.cx-fonte { font-size: 11px; color: var(--sutil); line-height: 1.45; margin: 14px 2px 4px; }
.cx-svg { width: 100%; height: auto; display: block; }
.cx-svg .cx-ax { font-size: 10px; fill: var(--sutil); }
.cx-svg .cx-rot { font-size: 10px; font-weight: 700; }
.cx-leg { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
          font-size: 11px; color: var(--sutil); margin-top: 8px; }
.cx-leg span { display: inline-flex; align-items: center; gap: 5px; }
.cx-leg i { width: 12px; height: 10px; border-radius: 2px; display: inline-block; }
.cx-tip { position: fixed; z-index: 30; background: var(--marca); color: #fff; font-size: 12px;
          padding: 4px 8px; border-radius: 6px; pointer-events: none; white-space: nowrap; }
.cx-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.cx-tab { border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums;
               min-width: 100%; }
table.cx-tab th, table.cx-tab td { padding: 5px 7px; border-bottom: 1px solid #f0f2f4;
               text-align: right; white-space: nowrap; }
table.cx-tab th:first-child, table.cx-tab td:first-child { text-align: left; position: sticky;
               left: 0; z-index: 1; background: var(--cartao); min-width: 170px; }
table.cx-tab thead th { color: var(--sutil); font-weight: 600; font-size: 11px; }
table.cx-tab tr.cx-sec td { font-weight: 700; color: var(--marca); padding-top: 10px; }
table.cx-tab tr.cx-tot td, table.dre tr.cx-tot td { font-weight: 700; border-top: 1px solid #dfe3e8; }
table.cx-tab td.neg, table.dre td.neg { color: var(--vermelho); }
table.cx-tab td.ok, table.dre td.ok { color: var(--verde); }
.cx-h3 { font-size: 13px; color: var(--sutil); margin: 14px 0 4px; text-transform: uppercase; }
.cx-contas { font-size: 10px; color: var(--sutil); }
.cx-controles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.cx-controles label { font-size: 11px; color: var(--sutil); }
.cx-controles input.campo { font-size: 14px; padding: 7px; }
.cx-restaurar { font-size: 12px; padding: 5px 10px; border-radius: 8px; border: 1px solid #d8dde3;
                background: #fff; color: var(--sutil); }
.cx-alerta { background: #fdeaea; color: #8a2b2b; font-size: 13px; padding: 10px 12px;
             border-radius: 10px; margin-bottom: 12px; line-height: 1.45; }
.cx-ok { background: #e8f6ee; color: #14663c; font-size: 13px; padding: 10px 12px;
         border-radius: 10px; margin-bottom: 12px; }
@media (max-width: 420px) { .cx-controles { grid-template-columns: 1fr; } }