/* ============================================================
   Ally ADO — a tela de configuração
   ------------------------------------------------------------
   VERSÃO 1 · 2026-09-09

   Arquivo próprio, e não um <style> dentro da página: o navegador guarda
   este e não o rebaixa a cada visita, e mexer na aparência deixa de mexer
   no arquivo que tem a lógica.
   ============================================================ */

:root{
    --bg:#f4f6fa; --card:#fff; --ink:#16203a; --dim:#6b7891;
    --line:#dfe4ee; --campo:#f8fafc; --cyan:#0fb6d1; --bom:#12a150; --ruim:#d9434e;
  }
  @media (prefers-color-scheme: dark){
    :root{ --bg:#0d1220; --card:#141c2e; --ink:#e8edf7; --dim:#8e9bb3;
           --line:#243049; --campo:#0f1626; }
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    background:var(--bg);color:var(--ink);padding:26px 18px;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.5;
  }
  main{max-width:640px;margin:0 auto}
  h1{font-size:22px;font-weight:600;margin-bottom:4px}
  .sub{color:var(--dim);font-size:14px;margin-bottom:22px}
  section{background:var(--card);border:1px solid var(--line);border-radius:16px;
          padding:20px 22px;margin-bottom:16px}
  h2{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
     color:var(--dim);margin-bottom:14px}
  .campo{display:grid;gap:5px;margin-bottom:12px}
  .campo label{font-size:12px;font-weight:600;color:var(--dim)}
  .campo input{width:100%;padding:10px 12px;border-radius:10px;font-size:14.5px;
               background:var(--campo);border:1px solid var(--line);color:var(--ink)}
  .campo input:focus{outline:2px solid var(--cyan);outline-offset:1px}
  .campo small{font-size:12px;color:var(--dim)}
  .dupla{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
  .marca{display:flex;gap:8px;align-items:center;font-size:13.5px;margin:14px 0}
  .bt{padding:11px 18px;border-radius:11px;border:1px solid var(--cyan);
      background:var(--cyan);color:#04212a;font:inherit;font-size:14px;font-weight:600;
      cursor:pointer;text-decoration:none;display:inline-block}
  .bt.fraco{background:transparent;color:var(--ink);border-color:var(--line)}
  .linha{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
  .estado{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin-bottom:10px}
  .estado:last-child{margin-bottom:0}
  .pin{flex:none;width:9px;height:9px;border-radius:50%;margin-top:7px;background:var(--dim)}
  .pin.bom{background:var(--bom)} .pin.ruim{background:var(--ruim)}
  .estado b{font-weight:600} .estado span{color:var(--dim)}
  code{display:block;padding:10px 12px;border-radius:9px;background:var(--campo);
       border:1px solid var(--line);font-family:ui-monospace,"Cascadia Code",monospace;
       font-size:12.5px;word-break:break-all;user-select:all;margin-top:5px}
  .recado{padding:11px 13px;border-radius:11px;background:var(--campo);
          border:1px solid var(--line);font-size:13.5px;margin-bottom:16px}
  .recado.ruim{border-color:var(--ruim)}
  .provas{display:grid;gap:8px}
  .prova{padding:11px 13px;border-radius:11px;background:var(--campo);
         border:1px solid var(--line);font-size:13.5px}
  .prova b{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
           color:var(--dim);margin-bottom:3px}
  .nota{font-size:12.5px;color:var(--dim);margin-top:12px}

  /* ---------- as abas ----------
     Rolam na horizontal no celular em vez de quebrarem em duas linhas: quatro
     abas em duas linhas parecem duas coisas diferentes. */
  .abas{
    display:flex;gap:4px;margin-bottom:16px;padding:4px;
    background:var(--card);border:1px solid var(--line);border-radius:14px;
    overflow-x:auto;scrollbar-width:none;
  }
  .abas::-webkit-scrollbar{display:none}
  .abas button{
    flex:1;white-space:nowrap;padding:9px 14px;border-radius:10px;border:0;
    background:transparent;color:var(--dim);
    font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  }
  .abas button:hover{color:var(--ink)}
  .abas button[aria-selected="true"]{background:var(--campo);color:var(--ink)}
  .abas button .pin{display:inline-block;margin-right:6px}
  @media (max-width:520px){ .dupla{grid-template-columns:1fr} }

/* texto corrido dentro das seções, e código no meio de uma frase */
section p{font-size:14px}
code.inline{display:inline;padding:2px 6px;font-size:12px}

/* ============================================================
   A grade de usuários — três níveis
   ------------------------------------------------------------
   usuário → Financeiro | Propostas
                            proposta → Parcelas | Andamento

   O recuo à esquerda é o que diz de quem é o quê: sem ele, uma parcela e um
   lançamento do financeiro pareceriam estar no mesmo nível.
   ============================================================ */
.grade{display:grid;gap:8px;margin-top:14px}

.linha{border:1px solid var(--line);border-radius:12px;background:var(--campo);overflow:hidden}
.linha.fina{background:transparent;margin-top:7px}
.linha.alvo{border-color:var(--cyan)}

.abre{
  display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;
  border:0;background:transparent;color:var(--ink);
  font:inherit;text-align:left;cursor:pointer;
}
.abre:hover{background:color-mix(in srgb, var(--cyan) 7%, transparent)}
.abre .seta{
  flex:none;color:var(--dim);font-size:17px;line-height:1;
  transition:transform .15s;
}
.abre[aria-expanded="true"] .seta{transform:rotate(90deg)}
.abre .quem{flex:1;min-width:0}
.abre .quem b{display:block;font-size:14px;font-weight:600}
.abre .quem b i{font-style:normal;font-weight:400;font-size:12px;color:var(--cyan)}
.abre .quem small{display:block;font-size:12px;color:var(--dim);margin-top:2px}
.abre .conta{flex:none;font-size:11.5px;color:var(--dim);white-space:nowrap}

/* O que está dentro fica recuado e com um fio à esquerda: é o que liga
   visualmente o conteúdo ao título que o abriu. */
.dentro{padding:4px 13px 13px;border-left:2px solid var(--line);margin-left:19px}

.abas.menores{margin:10px 0 12px;padding:3px}
.abas.menores button{padding:6px 12px;font-size:12.5px}

/* ---------- as tabelas ---------- */
.tab{width:100%;border-collapse:collapse;font-size:13px}
.tab th{
  text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dim);padding:0 8px 6px 0;
}
.tab td{padding:7px 8px 7px 0;border-top:1px solid var(--line);vertical-align:top}
.tab td small{display:block;font-size:11.5px;color:var(--dim)}
.tab .dir{text-align:right}
.tab .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tab .entra{color:var(--bom)}
.tab .sai{color:var(--ruim)}

.tag{
  display:inline-block;padding:2px 7px;border-radius:6px;
  font-size:10.5px;font-weight:600;letter-spacing:.04em;
}
.tag.entra{background:color-mix(in srgb, var(--bom) 15%, transparent);color:var(--bom)}
.tag.sai{background:color-mix(in srgb, var(--ruim) 15%, transparent);color:var(--ruim)}

/* ---------- o andamento ----------
   Uma linha do tempo: o fio corre atrás das marcas, e a marca cheia é o passo
   que já aconteceu. Diz num relance quanto do trabalho andou. */
.passos{list-style:none;margin:0;padding:0;position:relative}
.passos::before{
  content:"";position:absolute;left:5px;top:8px;bottom:8px;
  width:2px;background:var(--line);
}
.passos li{display:flex;gap:14px;align-items:flex-start;padding:6px 0;position:relative}
.passos .marca{
  flex:none;width:12px;height:12px;margin-top:3px;border-radius:50%;
  background:var(--card);border:2px solid var(--line);z-index:1;
}
.passos li.feito .marca{background:var(--bom);border-color:var(--bom)}
.passos b{display:block;font-size:13.5px;font-weight:600}
.passos li.feito b{color:var(--dim);font-weight:500}
.passos small{display:block;font-size:11.5px;color:var(--dim);margin-top:1px}

.vazio{padding:14px 0;font-size:13px;color:var(--dim)}

@media (max-width:520px){
  .abre .conta{display:none}
  .dentro{margin-left:9px;padding-right:0}
}

/* ============================================================
   A tela de autorização do OAuth — página única, centrada
   ============================================================ */
body.meio{min-height:100dvh;display:flex;align-items:center;justify-content:center}
.cartao-so{
  width:100%;max-width:430px;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:26px 24px;
}
.cartao-so h1{font-size:20px;font-weight:600;line-height:1.3;margin-bottom:6px}
.cartao-so .sub{font-size:13.5px;line-height:1.5;color:var(--dim);margin-bottom:18px}
.cartao-so .sub b{color:var(--ink);font-weight:600}

/* O que o aplicativo poderá fazer — e, logo abaixo, o que ele NÃO poderá.
   Dizer o limite junto da permissão é o que faz a pessoa decidir informada. */
.pede{margin:0 0 18px;padding:14px 16px;border-radius:14px;
      background:var(--campo);border:1px solid var(--line)}
.pede h2{margin-bottom:9px}
.pede ul{list-style:none;margin:0;padding:0}
.pede li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;
         line-height:1.45;margin-top:7px}
.pede li:first-child{margin-top:0}
.pede .visto{flex:none;color:var(--cyan);font-weight:700}
.pede li.nao{color:var(--dim)}
.pede li.nao .visto{color:var(--dim)}

.dupla-bt{display:flex;gap:9px}
.dupla-bt .bt{flex:1;text-align:center}
.quem{font-size:12.5px;color:var(--dim);text-align:center;margin-top:16px;line-height:1.5}
.quem b{color:var(--ink)}

.app{padding:16px 0;border-top:1px solid var(--line);margin-top:16px}
.app:first-of-type{border-top:0;margin-top:0}