/* ============================================================
   SINGULARI · Sistema de design do ecossistema (ERP Financeiro)
   Tokens + componentes base. Mesma identidade dos outros apps.
   Fonte: Quicksand (carregada pelo app; fallback system rounded).
   Regras fixas: toque mínimo 44px · dinheiro à direita/tabular/
   pt-BR · negativo vermelho com sinal · todo valor tem procedência.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- Cor · marca ---- */
  --sng-ink: #191919;            /* header escuro */
  --sng-cream: #F4F3EF;          /* fundo de página */
  --sng-surface: #FFFFFF;        /* cartões e superfícies */
  --sng-action: #F2971E;         /* laranja de ação */
  --sng-action-press: #D97F0A;   /* ação pressionada */
  --sng-gold-1: #E07E17;         /* gradiente ouro (início) */
  --sng-gold-2: #FBD68A;         /* gradiente ouro (fim) */
  --sng-grad-ouro: linear-gradient(135deg, var(--sng-gold-1), var(--sng-gold-2));

  /* ---- Cor · texto e linhas (neutros com viés quente) ---- */
  --sng-text: #26221B;
  --sng-text-2: #6E675C;
  --sng-text-3: #9B937F;
  --sng-line: #E4E1D8;
  --sng-ink-text: #F4F3EF;       /* texto sobre o header escuro */
  --sng-ink-text-2: #B9B4A9;

  /* ---- Cor · semântica (nunca usar como cor de ação) ---- */
  --sng-pos: #1E7B45;  --sng-pos-bg: #E3F0E6;
  --sng-neg: #C03A2B;  --sng-neg-bg: #F9E7E3;
  --sng-warn: #9C6B12; --sng-warn-bg: #FAF0DA;
  --sng-info: #5C6470; --sng-info-bg: #EBECED;

  /* ---- Tipo ---- */
  --sng-font: 'Quicksand', -apple-system, 'SF Pro Rounded', 'Segoe UI', sans-serif;
  --fs-display: 28px;   /* números-herói, 700 */
  --fs-h1: 22px;        /* título de tela, 700 */
  --fs-h2: 18px;        /* seção, 600 */
  --fs-body: 15px;      /* corpo, 500 */
  --fs-small: 13px;     /* apoio, 500 */
  --fs-micro: 11px;     /* rótulos maiúsculos, 600 + espaçamento */

  /* ---- Forma e espaço ---- */
  --sng-r: 12px;
  --sng-r-sm: 8px;
  --sng-touch: 44px;
  --sng-shadow: 0 1px 3px rgba(25, 25, 25, .08);
  --sng-shadow-2: 0 4px 16px rgba(25, 25, 25, .12);
}

/* ---- Base ---- */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--sng-font);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.5;
  background: var(--sng-cream);
  color: var(--sng-text);
  -webkit-font-smoothing: antialiased;
}
h1 { font-size: var(--fs-h1); font-weight: 700; margin: 0; text-wrap: balance; }
h2 { font-size: var(--fs-h2); font-weight: 600; margin: 0; }
.sng-micro {
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--sng-text-2);
}

/* ---- Header escuro ---- */
.sng-header {
  background: var(--sng-ink); color: var(--sng-ink-text);
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; min-height: 56px;
  position: sticky; top: 0; z-index: 30;
}
.sng-logo {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: var(--sng-grad-ouro);
  display: grid; place-items: center;
  color: var(--sng-ink); font-weight: 700; font-size: 17px;
}
.sng-header small { color: var(--sng-ink-text-2); font-size: var(--fs-small); }
.sng-conta {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  min-height: var(--sng-touch); padding: 4px 6px 4px 12px;
  border: 1px solid #33302B; border-radius: 999px;
  font-size: var(--fs-small); color: var(--sng-ink-text);
}
.sng-conta .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--sng-grad-ouro); color: var(--sng-ink);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}

/* ---- Botões (mínimo 44px de toque) ---- */
.sng-btn {
  font: 600 var(--fs-body)/1 var(--sng-font);
  min-height: var(--sng-touch); padding: 0 20px;
  border-radius: var(--sng-r-sm); border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--sng-action); color: #fff;
  transition: background .15s;
}
.sng-btn:active { background: var(--sng-action-press); }
.sng-btn:focus-visible { outline: 3px solid var(--sng-gold-2); outline-offset: 2px; }
.sng-btn.ghost {
  background: transparent; color: var(--sng-text);
  border: 1.5px solid var(--sng-line);
}
.sng-btn.perigo { background: var(--sng-neg); }
.sng-btn:disabled { opacity: .45; cursor: default; }

/* ---- Cartão ---- */
.sng-card {
  background: var(--sng-surface); border: 1px solid var(--sng-line);
  border-radius: var(--sng-r); box-shadow: var(--sng-shadow);
  padding: 16px;
}
.sng-card.destaque { border-top: 3px solid transparent;
  border-image: var(--sng-grad-ouro) 1; border-image-width: 3px 0 0 0; }

/* ---- Badges de estado ---- */
.sng-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-small); font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
}
.sng-badge.ok    { background: var(--sng-pos-bg);  color: var(--sng-pos); }
.sng-badge.alerta{ background: var(--sng-warn-bg); color: var(--sng-warn); }
.sng-badge.erro  { background: var(--sng-neg-bg);  color: var(--sng-neg); }
.sng-badge.neutro{ background: var(--sng-info-bg); color: var(--sng-info); }

/* Carimbo de sincronização: dado desatualizado se anuncia */
.sng-sync {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-small); color: var(--sng-text-2);
}
.sng-sync::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sng-pos);
}
.sng-sync.velho::before { background: var(--sng-warn); }

/* ---- Campo ---- */
.sng-campo { display: flex; flex-direction: column; gap: 6px; }
.sng-campo label { font-size: var(--fs-small); font-weight: 600; color: var(--sng-text-2); }
.sng-campo input, .sng-campo select {
  font: 500 var(--fs-body) var(--sng-font); color: var(--sng-text);
  min-height: var(--sng-touch); padding: 0 14px;
  border: 1.5px solid var(--sng-line); border-radius: var(--sng-r-sm);
  background: var(--sng-surface);
}
.sng-campo input:focus, .sng-campo select:focus {
  outline: none; border-color: var(--sng-action);
  box-shadow: 0 0 0 3px rgba(242, 151, 30, .18);
}
.sng-campo .ajuda { font-size: var(--fs-small); color: var(--sng-text-3); }
.sng-campo.invalido input { border-color: var(--sng-neg); }
.sng-campo.invalido .ajuda { color: var(--sng-neg); }

/* ---- Dinheiro: direita, tabular, pt-BR; negativo vermelho com sinal ---- */
.sng-money {
  font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap; font-weight: 600;
}
.sng-money.neg { color: var(--sng-neg); }
.sng-money.pos { color: var(--sng-pos); }

/* ---- Tabela ---- */
.sng-tabela-wrap { overflow-x: auto; border-radius: var(--sng-r); }
.sng-tabela {
  width: 100%; border-collapse: collapse;
  background: var(--sng-surface); font-size: var(--fs-body);
}
.sng-tabela th {
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--sng-text-2); text-align: left;
  padding: 10px 14px; border-bottom: 1.5px solid var(--sng-line);
}
.sng-tabela td { padding: 12px 14px; border-bottom: 1px solid var(--sng-line); }
.sng-tabela tr:last-child td { border-bottom: 0; }
.sng-tabela th.num, .sng-tabela td.num { text-align: right; }
.sng-tabela .total td {
  font-weight: 700; border-top: 2px solid var(--sng-ink); border-bottom: 0;
}

/* ---- Procedência: nenhum número sem origem ---- */
.sng-prov {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
  border-bottom: 1.5px dashed var(--sng-gold-1);
  min-height: 28px;
}
.sng-prov:focus-visible { outline: 3px solid var(--sng-gold-2); outline-offset: 2px; }
.sng-prov-painel {
  background: var(--sng-cream); border: 1px solid var(--sng-line);
  border-left: 3px solid var(--sng-gold-1);
  border-radius: var(--sng-r-sm); padding: 12px 14px;
  font-size: var(--fs-small); color: var(--sng-text-2);
  display: grid; gap: 4px;
}
.sng-prov-painel b { color: var(--sng-text); }

/* ---- Carregando: esqueleto ---- */
.sng-skel {
  border-radius: 6px; min-height: 14px;
  background: linear-gradient(90deg, #EAE8E1 25%, #F4F3EF 45%, #EAE8E1 65%);
  background-size: 200% 100%;
  animation: sng-shimmer 1.3s infinite linear;
}
@keyframes sng-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .sng-skel { animation: none; }
}

/* ---- Estado vazio ---- */
.sng-vazio {
  text-align: center; padding: 40px 20px; color: var(--sng-text-2);
  display: grid; gap: 8px; justify-items: center;
}
.sng-vazio .icone {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--sng-grad-ouro); opacity: .25;
}

/* ---- Abas ---- */
.sng-abas {
  display: flex; gap: 4px; border-bottom: 1.5px solid var(--sng-line);
  overflow-x: auto;
}
.sng-abas button {
  font: 600 var(--fs-body)/1 var(--sng-font); color: var(--sng-text-2);
  background: none; border: 0; border-bottom: 3px solid transparent;
  min-height: var(--sng-touch); padding: 0 16px; cursor: pointer; white-space: nowrap;
  margin-bottom: -1.5px;
}
.sng-abas button[aria-selected="true"] {
  color: var(--sng-text); border-bottom-color: var(--sng-action);
}
.sng-abas button:focus-visible { outline: 3px solid var(--sng-gold-2); outline-offset: -3px; }

/* ---- Erro em português de gente ---- */
.sng-alerta {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--sng-neg-bg); border: 1px solid #EACCC5;
  border-radius: var(--sng-r); padding: 14px 16px;
}
.sng-alerta .titulo { font-weight: 700; color: var(--sng-neg); }
.sng-alerta p { margin: 2px 0 10px; color: var(--sng-text); font-size: var(--fs-small); }