/* ============================================================
   CliniCore — tema Apple (claro + escuro)
   Identidade própria do painel do operador (Lucas), distinta do
   app das clínicas (ABAH). Carregado DEPOIS de styles.css E do
   <style> inline do index (por isso vence os overrides).
   Inspiração Apple: azul do sistema, tipografia SF Pro (via Inter,
   embutida), cantos arredondados. Denso, para caber mais info.
   Alternância claro/escuro pelo botão do cabeçalho.
   ============================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter.woff2") format("woff2");
}

/* ---- Claro (apple.com) — padrão ---- */
:root,
:root[data-theme="light"] {
  --page:            #ffffff;
  --surface-1:       #f5f5f7;
  --surface-2:       #ffffff;
  --text-primary:    #1d1d1f;
  --text-secondary:  #494950;
  --text-muted:      #86868b;
  --border:          rgba(0,0,0,0.07);
  --border-strong:   rgba(0,0,0,0.13);
  --accent:          #0071e3;
  --accent-hover:    #0077ed;
  --accent-soft:     rgba(0,113,227,0.10);
  --accent-contrast: #ffffff;
  --pos:             #1a8f3c;   /* verde (variação boa) */
  --neg:             #d93b30;   /* vermelho (variação ruim) */
  --gate-bg:         #f5f5f7;
  --gate-card:       #ffffff;
}

/* ---- Escuro (dark mode Apple) ---- */
:root[data-theme="dark"] {
  --page:            #000000;
  --surface-1:       #1c1c1e;
  --surface-2:       #2c2c2e;
  --text-primary:    #f5f5f7;
  --text-secondary:  #aeaeb2;
  --text-muted:      #8e8e93;
  --border:          rgba(255,255,255,0.10);
  --border-strong:   rgba(255,255,255,0.20);
  --accent:          #0a84ff;
  --accent-hover:    #409cff;
  --accent-soft:     rgba(10,132,255,0.18);
  --accent-contrast: #ffffff;
  --pos:             #30d158;
  --neg:             #ff453a;
  --gate-bg:         #000000;
  --gate-card:       #1c1c1e;
  --pnl-receita:     #0a84ff;
  --pnl-despesa:     #ff453a;
}

/* tipografia SF Pro / Inter */
body.painel {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  background: var(--page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

/* denso, mas arejado (Apple) */
.pnl-wrap { max-width: 1120px; padding-top: 30px; }
.pnl-top  { margin-bottom: 24px; }
.pnl-grid { gap: 12px; margin-bottom: 18px; }
.pnl-tile { padding: 13px 15px; }
.pnl-card { padding: 16px 18px; margin-bottom: 18px; }

/* ---- Cabeçalho / wordmark ---- */
.pnl-top svg { color: var(--accent); }
.pnl-top h1 { font-weight: 600; letter-spacing: -0.02em; font-size: 18px; }
.pnl-acc { color: var(--accent); }
.pnl-top .sub { color: var(--text-muted); font-size: 12px; }

/* ---- KPIs (mais indicadores, texto menor) ---- */
.pnl-tile { background: var(--surface-1); border: none; border-radius: 14px; }
.pnl-tile .k {
  font-size: 11px; font-weight: 500; letter-spacing: -0.005em;
  text-transform: none; color: var(--text-muted);
}
.pnl-tile .v {
  font-size: 21px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--text-primary); margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.pnl-tile .s { color: var(--text-muted); font-size: 11px; margin-top: 3px; }
.pnl-tile .s .up   { color: var(--pos); font-weight: 600; }
.pnl-tile .s .down { color: var(--neg); font-weight: 600; }

/* ---- Cartões ---- */
.pnl-card { background: var(--surface-1); border: none; border-radius: 16px; }
.pnl-card h2 { font-weight: 600; letter-spacing: -0.015em; font-size: 14.5px; }

/* ---- Tabelas (compactas) ---- */
.pnl-table { font-size: 13px; }
.pnl-table td.num, .pnl-table th.num { font-variant-numeric: tabular-nums; }
.pnl-table th {
  text-transform: none; letter-spacing: -0.005em; font-size: 11.5px;
  color: var(--text-muted); font-weight: 500; padding: 7px 10px;
  border-bottom: 1px solid var(--border);
}
.pnl-table td { color: var(--text-secondary); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.pnl-table td:first-child { color: var(--text-primary); font-weight: 500; }

/* selo azul suave, pílula */
.pnl-pill { background: var(--accent-soft); color: var(--accent); font-weight: 600; border-radius: 980px; }

.pnl-legend, .pnl-note, .pnl-tooltip { color: var(--text-muted); }
.pnl-tooltip { background: var(--surface-1); border-color: var(--border-strong); color: var(--text-primary); }

/* campos e selects Apple */
.pnl-select, .pnl-form-row input, .pnl-form-row select {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
}
.pnl-select:focus, .pnl-form-row input:focus, .pnl-form-row select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* ---- Botões estilo Apple (pílula) ---- */
.btn, .btn-primary, .btn-ghost { border-radius: 980px; font-weight: 500; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ---- Login (gate) ---- */
.cloud-gate { background: var(--gate-bg); }
.cloud-gate-card {
  background: var(--gate-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.14);
}
.cloud-gate-card svg { color: var(--accent); }
.cloud-gate-card h1 { font-weight: 600; letter-spacing: -0.02em; }

/* barra de rolagem discreta (WebKit) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 3px solid var(--page); }