/* ════════════════════════════════════════════════════════════════════
   core.css · LifeOS — sistema de design partilhado
   João Sousa · uma única fonte de verdade para todas as páginas.

   Como usar numa página:
     <link rel="stylesheet" href="core.css">
   Depois apaga o CSS duplicado dessa página e mantém só o que for
   mesmo específico dela (gráficos, layouts próprios) num <style> curto.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────────── */
:root{
  /* paleta — um accent de marca, único */
  --accent:#4f8ef7;
  --accent-2:#7eb3ff;
  --accent-soft:rgba(79,142,247,.16);

  /* semânticas — significado fixo em todo o sistema */
  --good:#34d399;  --good-soft:rgba(52,211,153,.14);
  --bad:#f87171;   --bad-soft:rgba(248,113,113,.14);
  --warn:#fbbf24;  --warn-soft:rgba(251,191,36,.14);

  /* cores de marca de bancos / fornecedores (uso pontual) */
  --santander:#EC0000; --cgd:#005A9E; --degiro:#00A651;

  /* texto — contraste mínimo respeitado */
  --t1:rgba(255,255,255,.92);   /* primário      */
  --t2:rgba(255,255,255,.68);   /* secundário    */
  --t3:rgba(255,255,255,.5);    /* terciário/meta — nunca abaixo disto */

  /* escala tipográfica — 6 degraus, não inventar mais */
  --fs-xs:11px; --fs-sm:13px; --fs-md:15px;
  --fs-lg:20px; --fs-xl:28px; --fs-2xl:42px;

  /* pesos */
  --fw-r:400; --fw-m:500; --fw-s:600; --fw-b:700;

  /* raios */
  --r-panel:26px; --r-card:18px; --r-chip:11px; --r-pill:99px;

  /* espaço */
  --gap:14px; --pad-card:18px; --pad-panel:22px;

  /* vidro — o ingrediente que faltava */
  --glass-bg:rgba(255,255,255,.07);
  --glass-bd:1px solid rgba(255,255,255,.12);
  --glass-blur:saturate(150%) blur(26px);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.22);
  --shadow:0 24px 60px rgba(0,0,0,.45);

  /* superfícies sólidas internas (cards dentro de cards) */
  --fill-1:rgba(255,255,255,.05);
  --fill-2:rgba(255,255,255,.08);
  --hair:rgba(255,255,255,.1);     /* separadores */
  --hair-soft:rgba(255,255,255,.07);

  --tr:.18s;   /* transição padrão */
}

/* ── 2. RESET + BASE ───────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  color:var(--t1);background:#070c16;min-height:100vh;
  font-size:var(--fs-md);line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit}
::selection{background:var(--accent-soft)}

/* fundo partilhado (foto + fallback) */
.bg{position:fixed;inset:0;z-index:0;
  background:url('bg.jpg') center/cover no-repeat,
             radial-gradient(120% 120% at 80% 0%,#13243f 0%,#070c16 60%);}
.bgo{position:fixed;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(7,12,22,.30) 0%,rgba(7,12,22,.50) 45%,rgba(7,12,22,.74) 100%);}

/* ── 3. SUPERFÍCIE DE VIDRO ────────────────────────────────────────── */
.glass{
  background:var(--glass-bg);border:var(--glass-bd);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-hi),var(--shadow);
}

/* ── 4. LAYOUT ─────────────────────────────────────────────────────── */
.shell{position:relative;z-index:2;width:100%;display:flex;gap:12px;justify-content:center;align-items:flex-start}
.stage{flex:0 1 1120px;max-width:1120px;min-width:0}
.page{position:relative;z-index:2;display:flex;justify-content:center;padding:28px}

/* ── 5. TOP BAR ────────────────────────────────────────────────────── */
.top{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px;padding:0 4px}
.greet{font-size:var(--fs-2xl);font-weight:var(--fw-b);letter-spacing:-.03em;line-height:1}
.subtitle{font-size:var(--fs-sm);color:var(--t3);margin-top:8px}
.top-r{display:flex;align-items:center;gap:10px}
.chip{display:flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:var(--r-chip);
  font-size:var(--fs-sm);color:var(--t2);background:var(--fill-2);border:1px solid var(--hair)}
.chip b{color:var(--t1);font-weight:var(--fw-s)}
.icon-btn{width:40px;height:40px;border-radius:var(--r-chip);display:flex;align-items:center;justify-content:center;
  color:var(--t3);background:var(--fill-2);border:1px solid var(--hair);cursor:pointer;transition:var(--tr)}
.icon-btn:hover{color:var(--t1)}
.icon-btn.on{color:var(--warn);background:var(--warn-soft);border-color:rgba(251,191,36,.3)}
.avatar{width:40px;height:40px;border-radius:var(--r-chip);overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,#3b82f6,#8b5cf6)}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:center top}

/* ── 6. OMNIBOX / SEARCH ───────────────────────────────────────────── */
.omni{display:flex;align-items:center;gap:12px;height:48px;padding:0 18px;border-radius:14px;margin-bottom:var(--gap);transition:border-color var(--tr)}
.omni:focus-within{border-color:rgba(79,142,247,.5)}
.omni input{flex:1;background:none;border:none;outline:none;color:var(--t1);font-size:var(--fs-md);font-family:inherit}
.omni input::placeholder{color:var(--t3)}
.omni .kbd{font-size:var(--fs-xs);color:var(--t3);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:2px 7px}

/* ── 7. NAV ────────────────────────────────────────────────────────── */
.nav{position:fixed;left:calc(50% - 624px);top:50%;transform:translateY(-50%);z-index:100;width:52px;border-radius:20px;
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0}
.ni{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:var(--t3);transition:var(--tr)}
.ni svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ni:hover{background:var(--fill-2);color:var(--t1)}
.ni.active{background:var(--accent-soft);color:#fff}

/* ── 7b. COMPAT: chrome legado (.pnl / .nav-pill) ─────────────────────
   Para migrar páginas antigas: linka este core.css e apaga as regras
   .pnl/.nav-pill/.ni/.bg/.bgo da página. Estas herdam glass real daqui. */
.pnl{border-radius:var(--r-panel);padding:var(--pad-panel);
  background:var(--glass-bg);border:var(--glass-bd);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-hi),var(--shadow)}
.nav-pill{position:fixed;left:calc(50% - 624px);top:50%;transform:translateY(-50%);z-index:100;width:52px;border-radius:20px;
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0;
  background:var(--glass-bg);border:var(--glass-bd);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-hi),var(--shadow)}

/* ── 8. CARD + CABEÇALHO COM FRESCURA ──────────────────────────────── */
.card{border-radius:var(--r-card);padding:var(--pad-card);position:relative;overflow:hidden}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.ch h3,.card-title{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--t3);font-weight:var(--fw-s)}
/* indicador de frescura honesto */
.fresh{font-size:var(--fs-xs);color:var(--t3);display:flex;align-items:center;gap:5px}
.fresh i{width:6px;height:6px;border-radius:50%;background:var(--good);display:inline-block}
.fresh.snap i{background:var(--warn)}     /* snapshot estático, não live */
.fresh.stale i{background:var(--bad)}      /* dados velhos / falhou */

/* ── 9. BENTO GRID ─────────────────────────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);grid-auto-rows:minmax(0,auto)}
.span2{grid-column:span 2}
.span3{grid-column:span 3}
.span4{grid-column:span 4}
.tall{grid-row:span 2}
/* grelhas utilitárias simples */
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* ── 10. KPI / MÉTRICA ─────────────────────────────────────────────── */
.kpi{background:var(--fill-1);border-radius:12px;padding:14px}
.kpi .l,.metric .l{font-size:var(--fs-xs);color:var(--t3);text-transform:uppercase;letter-spacing:.06em}
.kpi .v{font-size:var(--fs-lg);font-weight:var(--fw-b);margin-top:5px;display:flex;align-items:baseline;gap:8px}
.metric{background:var(--fill-1);border-radius:12px;padding:11px 13px}
.metric .v{font-size:var(--fs-md);font-weight:var(--fw-s);margin-top:4px}

/* badges de variação — semântica por significado, não por direção */
.delta{font-size:var(--fs-xs);font-weight:var(--fw-s);padding:1px 7px;border-radius:7px}
.delta.good{color:var(--good);background:var(--good-soft)}
.delta.bad{color:var(--bad);background:var(--bad-soft)}
.delta.warn{color:var(--warn);background:var(--warn-soft)}

/* ── 11. PILLS ─────────────────────────────────────────────────────── */
.pill{font-size:var(--fs-sm);font-weight:var(--fw-s);padding:4px 12px;border-radius:var(--r-pill);
  background:var(--fill-2);color:var(--t2)}
.pill.positive{background:var(--good-soft);color:var(--good)}
.pill.negative{background:var(--bad-soft);color:var(--bad)}

/* ── 12. FINANÇAS / LISTA DE CONTAS ────────────────────────────────── */
.acc{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--hair-soft)}
.acc:last-of-type{border-bottom:none}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.acc .nm{flex:1;font-size:var(--fs-sm);color:var(--t2)}
.acc .sub{font-size:var(--fs-xs);color:var(--t3)}
.acc .bal{font-size:var(--fs-sm);font-weight:var(--fw-s);margin-left:auto}
.acc .bal.negative{color:var(--bad)}
.fin-total{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid var(--hair)}
.fin-total .l{font-size:var(--fs-sm);color:var(--t2)}
.fin-total .v{font-size:var(--fs-lg);font-weight:var(--fw-b);color:var(--good)}

/* privacidade — nota: blur é só cosmético, não esconde os dados no ficheiro */
.blurable{transition:filter .2s}
.privacy .blurable{filter:blur(7px);user-select:none;pointer-events:none}

/* ── 13. TIMELINE (semana) ─────────────────────────────────────────── */
.tl{display:flex;flex-direction:column}
.tl-day{display:flex;gap:12px;padding:7px 0}
.tl-spine{display:flex;flex-direction:column;align-items:center;width:8px;flex-shrink:0;padding-top:4px}
.tl-spine .d{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2)}
.tl-day.today .tl-spine .d{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tl-spine .ln{flex:1;width:1px;background:var(--hair);margin-top:4px}
.tl-c{flex:1;min-width:0}
.tl-h{font-size:var(--fs-xs);font-weight:var(--fw-s);color:var(--t3);margin-bottom:5px;display:flex;align-items:center;gap:6px}
.tl-day.today .tl-h{color:var(--accent)}
.tl-tag{font-size:9px;font-weight:var(--fw-b);text-transform:uppercase;background:var(--accent);color:#fff;padding:1px 6px;border-radius:5px}
.evt{display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--t2);background:var(--fill-1);
  border-radius:7px;padding:5px 9px;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evt b{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.evt .tm{color:var(--t3);font-size:var(--fs-xs)}

/* ── 14. TABELAS (pipedrive, etc.) ─────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
th{text-align:left;padding:6px 8px;font-size:var(--fs-xs);color:var(--t3);font-weight:var(--fw-s);
  border-bottom:1px solid var(--hair);text-transform:uppercase;letter-spacing:.05em}
td{padding:6px 8px;border-bottom:1px solid var(--hair-soft)}
tr:last-child td{border-bottom:none}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rank{color:var(--t3);width:18px;font-weight:var(--fw-b)}
tr.won td{color:var(--good)} tr.lost td{color:var(--bad)}

/* ── 15. SKELETON / LOADING ────────────────────────────────────────── */
.skeleton{background:var(--fill-2);color:transparent!important;border-radius:6px;
  animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.spin{display:inline-block}
.refreshing .spin{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── 16. ESTADOS ───────────────────────────────────────────────────── */
.empty{font-size:var(--fs-sm);color:rgba(255,255,255,.2);font-style:italic}
.error-msg{background:var(--bad-soft);color:var(--bad);border-radius:12px;padding:16px;font-size:var(--fs-sm);text-align:center}

/* ── 17. UTILITÁRIOS ───────────────────────────────────────────────── */
.muted{color:var(--t3)} .muted-2{color:var(--t2)}
.good{color:var(--good)} .bad{color:var(--bad)} .warn{color:var(--warn)}
.mb{margin-bottom:var(--gap)} .mt{margin-top:var(--gap)}
.row{display:flex;align-items:center;gap:8px}
.tabular{font-variant-numeric:tabular-nums}

/* ── 18. NAV MOBILE — barra inferior + painel "Mais" ────────────────────
   Injetados por nav.js. Escondidos por omissão; só aparecem ≤880px.       */
.mnav{display:none}
.msheet{display:none}

/* ── 19. RESPONSIVO ────────────────────────────────────────────────── */
@media(max-width:880px){
  /* tokens — chão de legibilidade mais alto e títulos menos gigantes */
  :root{
    --fs-xs:12px; --fs-sm:14px; --fs-md:16px;
    --fs-lg:20px; --fs-xl:24px; --fs-2xl:30px;
  }

  /* grelhas */
  .bento{grid-template-columns:1fr 1fr}
  .span3,.span4{grid-column:span 2}
  .tall{grid-row:auto}
  .g3,.g4{grid-template-columns:1fr 1fr}
  /* posições de grelha fixadas inline (ex.: style="grid-column:4") expandiam
     a grelha e furavam a coluna única — repõem-se em mobile */
  .bento>[style*="grid-column"]{grid-column:auto!important}
  .bento>[style*="grid-row"]{grid-row:auto!important}

  /* navegação: esconde a lateral (nova e legada), liga a barra inferior */
  .nav,.nav-pill{display:none}
  .shell{gap:0}

  /* respiro + espaço p/ a barra inferior — cobre TODOS os wrappers usados
     pelas páginas (umas usam .page/.stage do core, outras .page-wrap/.main). */
  .page,.page-wrap{padding:8px 0!important}
  body{padding-left:0!important;padding-right:0!important}
  .stage,.main-content,.main{
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
    padding-bottom:calc(80px + env(safe-area-inset-bottom));
  }

  /* topo empilha na vertical */
  .top{flex-direction:column;align-items:flex-start;gap:12px}
  .top-r{width:100%;flex-wrap:wrap}
  .greet{font-size:var(--fs-2xl);line-height:1.05}

  /* alvos de toque ≥44px */
  .chip,.icon-btn{height:44px}
  .icon-btn{width:44px}

  /* ── barra inferior ── */
  .mnav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:200;
    justify-content:space-around;align-items:stretch;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    border:none;border-top:var(--glass-bd);border-radius:0;
  }
  .mni{
    flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:3px;min-height:48px;padding:4px 2px;
    background:none;border:none;cursor:pointer;color:var(--t3);
    font-family:inherit;transition:color var(--tr);text-decoration:none;
  }
  .mni svg{width:23px;height:23px;stroke:currentColor;fill:none;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mni span{font-size:10px;font-weight:var(--fw-s);letter-spacing:.01em}
  .mni.active{color:var(--accent-2)}
  .mni:active{opacity:.6}

  /* ── painel "Mais" (bottom sheet) ── */
  .msheet{position:fixed;inset:0;z-index:300}
  .msheet.open{display:block}
  .msheet-scrim{position:absolute;inset:0;background:rgba(7,12,22,.55);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:msheet-fade .2s ease}
  .msheet-panel{position:absolute;left:0;right:0;bottom:0;
    border:none;border-radius:24px 24px 0 0;
    padding:10px 16px calc(20px + env(safe-area-inset-bottom));
    animation:msheet-up .26s cubic-bezier(.2,.8,.2,1)}
  .msheet-grip{width:38px;height:4px;border-radius:99px;background:var(--hair);margin:4px auto 16px}
  .msheet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .mtile{display:flex;flex-direction:column;align-items:center;gap:8px;
    padding:14px 4px;border-radius:14px;background:var(--fill-1);
    color:var(--t2);font-size:11px;font-weight:var(--fw-m);text-align:center;
    text-decoration:none;transition:var(--tr)}
  .mtile svg{width:22px;height:22px;stroke:currentColor;fill:none;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mtile:active{transform:scale(.96)}
  .mtile.active{background:var(--accent-soft);color:#fff}
}
@keyframes msheet-fade{from{opacity:0}to{opacity:1}}
@keyframes msheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}

@media(max-width:560px){
  .bento,.g2,.g3,.g4{grid-template-columns:1fr}
  .span2,.span3,.span4{grid-column:span 1}
  /* tabelas largas passam a deslizar na horizontal em vez de transbordar */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
}