/* Folha de estilo do app (paleta e componentes).
 * Antes era gerada pelo design.py do PC; no SmartCards 1.0 ESTE arquivo e a fonte. */
:root{
    --bg:#f6f8fc; --panel:#ffffff; --panel-2:#eef2f8; --panel-3:#e2e8f1;
    --line:#e3e8ef; --line-strong:#c4ccd8;
    --text:#1b1f27; --muted:#566070; --faint:#778293;
    --ok:#188038; --ok-soft:#e3f3e7; --bad:#d93025; --bad-soft:#fce8e6;
    --warn:#a35f00; --warn-soft:#fdf0d9; --lock:#98a2b3;
    --shadow-1:0 1px 2px rgba(31,41,55,.08), 0 1px 3px 1px rgba(31,41,55,.05);
    --shadow-2:0 1px 3px rgba(31,41,55,.10), 0 4px 12px 2px rgba(31,41,55,.07);
    --shadow-3:0 8px 28px rgba(31,41,55,.20), 0 2px 6px rgba(31,41,55,.10);
    --shadow:var(--shadow-2);
    --graf-eixo:#e3e8ef;
    --accent:#1a73e8; --accent-hi:#1557b0; --accent-soft:#e3edfd;
    --accent-line:#a8c7fa; --accent-ink:#ffffff; --mark:rgba(26,115,232,.14);
    --graf-visto:#1a73e8; --graf-novo:#7baaf0;
    --radius-sm:10px; --radius:14px; --radius-lg:20px; --radius-xl:28px;
    --tap:48px;
    color-scheme:light dark;
    --display:"Google Sans","Product Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
    --body:"Google Sans Text","Google Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1218; --panel:#181c24; --panel-2:#1f242e; --panel-3:#282e3a;
    --line:#2a303c; --line-strong:#434b5b;
    --text:#e8eaed; --muted:#a2aab8; --faint:#7f8896;
    --ok:#81c995; --ok-soft:#173222; --bad:#f28b82; --bad-soft:#3a1f1d;
    --warn:#fdd663; --warn-soft:#352c14; --lock:#6a7384;
    --shadow-1:0 1px 2px rgba(0,0,0,.45);
    --shadow-2:0 1px 3px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
    --shadow-3:0 14px 44px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
    --shadow:var(--shadow-2);
    --graf-eixo:#2a303c;
    --accent:#8ab4f8; --accent-hi:#aecbfa; --accent-soft:#1d2f4d;
    --accent-line:#35538a; --accent-ink:#0b1c36; --mark:rgba(138,180,248,.20);
    --graf-visto:#8ab4f8; --graf-novo:#4a7fd1;
  }
}
:root[data-theme="dark"]{
    --bg:#0f1218; --panel:#181c24; --panel-2:#1f242e; --panel-3:#282e3a;
    --line:#2a303c; --line-strong:#434b5b;
    --text:#e8eaed; --muted:#a2aab8; --faint:#7f8896;
    --ok:#81c995; --ok-soft:#173222; --bad:#f28b82; --bad-soft:#3a1f1d;
    --warn:#fdd663; --warn-soft:#352c14; --lock:#6a7384;
    --shadow-1:0 1px 2px rgba(0,0,0,.45);
    --shadow-2:0 1px 3px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
    --shadow-3:0 14px 44px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
    --shadow:var(--shadow-2);
    --graf-eixo:#2a303c;
    --accent:#8ab4f8; --accent-hi:#aecbfa; --accent-soft:#1d2f4d;
    --accent-line:#35538a; --accent-ink:#0b1c36; --mark:rgba(138,180,248,.20);
    --graf-visto:#8ab4f8; --graf-novo:#4a7fd1;
}
:root[data-accent="verde"]{
    --accent:#188038; --accent-hi:#0f6a2b; --accent-soft:#e1f3e6;
    --accent-line:#9fd3ae; --accent-ink:#ffffff; --mark:rgba(24,128,56,.14);
    --graf-visto:#188038; --graf-novo:#6dbb85;
}
@media (prefers-color-scheme: dark){
  :root[data-accent="verde"]:not([data-theme="light"]){
    --accent:#81c995; --accent-hi:#a8dab5; --accent-soft:#173222;
    --accent-line:#2f6a43; --accent-ink:#0a2514; --mark:rgba(129,201,149,.20);
    --graf-visto:#81c995; --graf-novo:#478a5d;
  }
}
:root[data-accent="verde"][data-theme="dark"]{
    --accent:#81c995; --accent-hi:#a8dab5; --accent-soft:#173222;
    --accent-line:#2f6a43; --accent-ink:#0a2514; --mark:rgba(129,201,149,.20);
    --graf-visto:#81c995; --graf-novo:#478a5d;
}
:root[data-accent="roxo"]{
    --accent:#6d4bd8; --accent-hi:#5133b3; --accent-soft:#ece7fc;
    --accent-line:#c3b4f3; --accent-ink:#ffffff; --mark:rgba(109,75,216,.14);
    --graf-visto:#6d4bd8; --graf-novo:#a592ea;
}
@media (prefers-color-scheme: dark){
  :root[data-accent="roxo"]:not([data-theme="light"]){
    --accent:#b9a6f7; --accent-hi:#d0c3fa; --accent-soft:#2a2147;
    --accent-line:#54449a; --accent-ink:#1a1033; --mark:rgba(185,166,247,.20);
    --graf-visto:#b9a6f7; --graf-novo:#7a66c8;
  }
}
:root[data-accent="roxo"][data-theme="dark"]{
    --accent:#b9a6f7; --accent-hi:#d0c3fa; --accent-soft:#2a2147;
    --accent-line:#54449a; --accent-ink:#1a1033; --mark:rgba(185,166,247,.20);
    --graf-visto:#b9a6f7; --graf-novo:#7a66c8;
}
:root[data-accent="laranja"]{
    --accent:#c25e00; --accent-hi:#9a4a00; --accent-soft:#fdebd8;
    --accent-line:#f1c595; --accent-ink:#ffffff; --mark:rgba(194,94,0,.14);
    --graf-visto:#c25e00; --graf-novo:#e49a55;
}
@media (prefers-color-scheme: dark){
  :root[data-accent="laranja"]:not([data-theme="light"]){
    --accent:#ffb867; --accent-hi:#ffd09a; --accent-soft:#40290f;
    --accent-line:#8a5a22; --accent-ink:#2b1700; --mark:rgba(255,184,103,.20);
    --graf-visto:#ffb867; --graf-novo:#c4863d;
  }
}
:root[data-accent="laranja"][data-theme="dark"]{
    --accent:#ffb867; --accent-hi:#ffd09a; --accent-soft:#40290f;
    --accent-line:#8a5a22; --accent-ink:#2b1700; --mark:rgba(255,184,103,.20);
    --graf-visto:#ffb867; --graf-novo:#c4863d;
}

/* Escolha explicita do usuario tambem vale para os controles nativos (campo de
   texto, barra de rolagem, seletor). Sem isto, forcar o claro num aparelho em
   modo escuro deixava os campos escuros no meio de uma tela clara. */
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:15.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.01em;
  line-height:1.2;margin:0;text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--accent);text-underline-offset:2px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
/* Anel de foco visível e igual em tudo. Sem isto cada tela inventava o seu, e
   em duas delas o foco do teclado simplesmente não aparecia. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent-soft);color:var(--text)}
.muted{color:var(--muted)}
.tiny{font-size:12.5px;line-height:1.55}
.hidden{display:none!important}
.num{font-variant-numeric:tabular-nums}
/* A barra de rolagem padrão do Windows é um bloco cinza claro que briga com
   tudo; no escuro fica branca e corta a tela em dois. */
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:content-box}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

.card{background:var(--panel);border:0;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-1)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-weight:500;font-size:14px;line-height:1;
  padding:11px 20px;border-radius:999px;
  border:1px solid transparent;background:var(--panel-2);color:var(--text);
  text-decoration:none;white-space:nowrap;
  transition:background .14s,border-color .14s,color .14s,transform .08s}
.btn:hover:not(:disabled){background:var(--panel-3)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover:not(:disabled){background:var(--accent-hi);border-color:var(--accent-hi)}
.btn.ghost{background:transparent}
.btn.ghost:hover:not(:disabled){background:var(--panel-2)}
.btn.danger{border-color:var(--bad);color:var(--bad);background:transparent}
.btn.danger:hover:not(:disabled){background:var(--bad-soft);border-color:var(--bad)}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;
  background:var(--panel-2);border:1px solid transparent;
  font-size:11.5px;font-weight:500;color:var(--muted);white-space:nowrap}
.chip.on,.chip.accent{background:var(--accent-soft);border-color:transparent;
  color:var(--accent);font-weight:600}
.filters{display:flex;gap:5px;flex-wrap:wrap}
.filter{font-size:13px;font-weight:500;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line-strong);background:transparent;color:var(--muted);
  transition:background .14s,border-color .14s,color .14s}
.filter:hover{color:var(--text);border-color:var(--line-strong)}
.filter.on{background:var(--accent-soft);border-color:transparent;color:var(--accent-hi)}
/* 16px é o piso dos campos: abaixo disso o Safari do iPhone dá zoom sozinho ao
   focar e a tela sai do lugar (Armadilha #11). */
input,select,textarea{font-size:16px;background:var(--panel-2);color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius);padding:10px 13px;
  transition:border-color .14s,background .14s}
input:hover,select:hover,textarea:hover{border-color:var(--line-strong)}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);
  width:auto;padding:0;border:0}
label.field{display:block;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px;font-weight:600}
/* Rótulo de seção: a linha pequena e espaçada que abre um bloco. */
.eyebrow{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);font-weight:600;font-family:var(--body)}

.grafTopo{display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; margin-bottom:10px}
.grafTitulo{font-family:var(--display); font-weight:600; font-size:15px}
.grafSeq{text-align:right; line-height:1.15}
.grafSeq b{font-family:var(--display); font-size:22px; color:var(--accent)}
.grafSeq span{display:block; font-size:11px; color:var(--muted)}
.grafFiltros{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.grafSegmento{display:inline-flex; border:1px solid var(--line); border-radius:999px;
  overflow:hidden; background:var(--panel)}
.grafBtn{font:inherit; font-size:12px; padding:5px 12px; border:0; background:transparent;
  color:var(--muted); cursor:pointer; min-height:30px}
.grafBtn.on{background:var(--accent); color:var(--accent-ink)}
.grafBtn:disabled{opacity:.35; cursor:default}
.grafNav{display:flex; align-items:center; gap:8px; margin:2px 0 8px; min-height:30px}
.grafNav .grafBtn{border:1px solid var(--line); border-radius:8px; padding:2px 10px;
  font-size:16px; line-height:1}
.grafPeriodo{font-size:13px; color:var(--text)}
.grafRolagem{overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px}
.grafGrade{display:block; height:auto}
.grafAno{width:100%; min-width:620px}
.grafMesBox{max-width:340px}
.grafMes{width:100%}
.grafAlvo{cursor:default}
.grafAlvo:hover{stroke:var(--text); stroke-width:1}
.grafRotulo{font-size:9px; fill:var(--faint)}
.grafDiaNum{font-size:9px; fill:var(--muted); pointer-events:none}
.grafDiaAlto{fill:var(--panel)}
.grafFuturo{fill:var(--faint); opacity:.6}
.grafLegenda{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:8px; font-size:12px; color:var(--muted)}
.grafEscala i{display:inline-block; width:11px; height:11px; border-radius:3px;
  margin:0 2px; vertical-align:-1px}
.grafDica{margin-left:auto; color:var(--text); font-variant-numeric:tabular-nums}
.grafResumo{margin-top:8px; line-height:1.5}
/* O historico de um card, na lista e na tela de revisao. */
.histCard{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.histCard b{color:var(--text); font-weight:600}
.histTeimosa{color:var(--warn)}