/* GS Fórmula — Portal do Cliente — Estilos Customizados */

/* ── Tipografia da marca (Montserrat + Open Sans, local, sem CDN) ── */
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/montserrat-regular.woff2') format('woff2'),
      url('/assets/fonts/montserrat-regular.woff') format('woff'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/montserrat-700.woff2') format('woff2'),
      url('/assets/fonts/montserrat-700.woff') format('woff'); }
@font-face { font-family:'Open Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/opensans-regular.woff2') format('woff2'),
      url('/assets/fonts/opensans-regular.woff') format('woff'); }
@font-face { font-family:'Open Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/opensans-700.woff2') format('woff2'),
      url('/assets/fonts/opensans-700.woff') format('woff'); }

:root {
  /* Marca (Manual de Identidade GS Fórmula) */
  --gsf-primary:   #1E6B52;   /* Verde GS */
  --gsf-primary-d: #14503D;   /* Verde profundo — hover/gradiente */
  --gsf-accent:    #4BB893;   /* Verde claro — ícones/detalhes */
  --gsf-mint:      #E8F3EE;   /* Tint verde — hover/badges/ativos */
  --gsf-bg:        #F4F4F4;   /* Cinza neutro — fundos */
  --gsf-ink:       #2C3A34;   /* Texto (neutro com viés verde) */
  /* Semânticos de status (separados do verde da marca) */
  --gsf-warn:      #B5730B;  --gsf-warn-bg:   #FBF0D8;
  --gsf-danger:    #B23A2E;  --gsf-danger-bg: #FBE7E4;
  --gsf-info:      #2C5F94;  --gsf-info-bg:   #E6EFF8;
  --gsf-sidebar-w: 240px;
  --gsf-header-h:  52px;
  --gsf-font-display: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --gsf-font-body:    'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Base ─────────────────────────────────────────────── */
body {
  background: var(--gsf-bg);
  font-family: var(--gsf-font-body);
  font-size: 16px;
  color: var(--gsf-ink);
}
h1, h2, h3, h4, h5, h6,
.gsf-header, .customer-name, .btn-gsf,
.gsf-card-stat .stat-value {
  font-family: var(--gsf-font-display);
}
/* Verde da marca sobrepõe o "success" do Bootstrap (coerência de identidade) */
.text-success { color: var(--gsf-primary) !important; }

/* ── Header ───────────────────────────────────────────── */
.gsf-header {
  background: var(--gsf-primary);
  color: #fff;
  padding: .65rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1040;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.gsf-sidebar-open-btn {
  border: 1px solid rgba(255,255,255,.5) !important;
  line-height: 1;
  padding: .35rem .5rem !important;
}
.gsf-sidebar-open-btn:hover {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
}
/* Logo: mantém proporção (1:1), limita caixa no header e no login */
img.gsf-logo {
  object-fit: contain;
  height: auto;
  width: auto;
  vertical-align: middle;
}
.gsf-header .brand .gsf-logo {
  max-height: 2.25rem;
  max-width: 2.25rem;
}
.login-card .card-header .gsf-logo {
  display: block;
  max-height: 3.5rem;
  max-width: 3.5rem;
  margin: 0 auto 0.5rem;
}
.gsf-header .customer-name { font-weight: 600; font-size: .95rem; }
.gsf-header .btn-outline-light { font-size: .8rem; padding: .25rem .6rem; }

/* ── Shell do menu (desktop: coluna; mobile: gatilho off-canvas) ─ */
.gsf-sidebar-shell {
  flex-shrink: 0;
  width: var(--gsf-sidebar-w);
}
.gsf-sidebar-backdrop {
  display: none;
}
.gsf-sidebar-panel {
  height: 100%;
  min-height: calc(100vh - var(--gsf-header-h) - 6px);
}
.gsf-sidebar-mobile-header {
  display: none;
}

/* ── Sidebar / Menu ───────────────────────────────────── */
.gsf-sidebar {
  width: 100%;
  background: #fff;
  border-right: 1px solid #e0e0e0;
  min-height: calc(100vh - var(--gsf-header-h) - 6px);
}
.gsf-sidebar .nav-link {
  color: #424242;
  padding: .65rem 1.25rem;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .93rem;
}
.gsf-sidebar .nav-link:hover,
.gsf-sidebar .nav-link.active {
  background: var(--gsf-mint);
  color: var(--gsf-primary);
  font-weight: 600;
}
.gsf-sidebar .nav-link i { font-size: 1.1rem; }
/* Item de destaque: Enviar receita (ação de maior valor) */
.gsf-sidebar .nav-link.gsf-nav-featured {
  color: var(--gsf-primary);
  font-weight: 700;
}
.gsf-sidebar .nav-link.gsf-nav-featured::before {
  content: "";
  width: 3px;
  align-self: stretch;
  margin: -.15rem .35rem -.15rem -.35rem;
  border-radius: 3px;
  background: var(--gsf-accent);
}

/* ── Conteúdo principal ───────────────────────────────── */
.gsf-main { flex: 1; padding: 1.5rem 1rem; max-width: 100%; }

/* ── Cards de dashboard ───────────────────────────────── */
.gsf-card-stat {
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.gsf-card-stat .card-body { padding: 1.25rem; }
.gsf-card-stat .stat-icon {
  font-size: 2.2rem;
  color: var(--gsf-accent);
}
.gsf-card-stat .stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gsf-primary);
}

/* ── Tabelas ──────────────────────────────────────────── */
.gsf-table { font-size: .88rem; }
.gsf-table th { background: var(--gsf-primary); color: #fff; font-weight: 500; }
.gsf-table tbody tr:hover { background: var(--gsf-mint); cursor: pointer; }

/* ── Badges de status ─────────────────────────────────── */
.badge-status { font-size: .75rem; padding: .3em .65em; border-radius: 20px; }
.badge-aprovado  { background: var(--gsf-mint);      color: var(--gsf-primary); }
.badge-pendente  { background: var(--gsf-warn-bg);   color: var(--gsf-warn); }
.badge-cancelado { background: var(--gsf-danger-bg); color: var(--gsf-danger); }
.badge-convertido{ background: var(--gsf-info-bg);   color: var(--gsf-info); }

/* ── Página de pagamento ──────────────────────────────── */
.gsf-payment-card {
  max-width: 540px;
  margin: 0 auto;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.gsf-payment-card .card-header {
  background: var(--gsf-primary);
  color: #fff;
  border-radius: 12px 12px 0 0 !important;
  padding: 1rem 1.5rem;
}
.pix-qr-wrap {
  background: #fff;
  border: 2px solid var(--gsf-accent);
  border-radius: 10px;
  display: inline-block;
  padding: 10px;
}
.pix-qr-wrap img { max-width: min(280px, 78vw); width: 100%; height: auto; }
#pix-copy-field {
  font-size: .78rem;
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 6px 0 0 6px;
  word-break: break-all;
}
.btn-copy-pix {
  background: var(--gsf-primary);
  color: #fff;
  border-radius: 0 6px 6px 0;
  font-size: .85rem;
  white-space: nowrap;
}
.btn-copy-pix:hover { background: var(--gsf-primary-d); color: #fff; }
.copy-feedback {
  font-size: .8rem;
  color: var(--gsf-primary);
  display: none;
  margin-top: .25rem;
}

/* ── Botão primário GS Fórmula ────────────────────────── */
.btn-gsf {
  background: var(--gsf-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  padding: .55rem 1.2rem;
}
.btn-gsf:hover { background: var(--gsf-primary-d); color: #fff; }

/* ── Mobile: menu lateral vira gaveta (hambúrguer) ─────── */
@media (max-width: 767.98px) {
  .gsf-layout {
    flex-direction: row !important;
  }
  .gsf-sidebar-shell {
    width: 0;
    min-width: 0;
    flex: 0 0 0;
    position: relative;
    overflow: visible;
  }
  .gsf-sidebar-backdrop {
    display: block;
    position: fixed;
    top: var(--gsf-header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1020;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s;
  }
  .gsf-sidebar-shell.is-open .gsf-sidebar-backdrop {
    opacity: 1;
    visibility: visible;
  }
  .gsf-sidebar-panel {
    position: fixed;
    top: var(--gsf-header-h);
    left: 0;
    width: min(288px, 90vw);
    height: calc(100vh - var(--gsf-header-h));
    min-height: unset;
    z-index: 1030;
    background: #fff;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    transform: translateX(-105%);
    transition: transform 0.28s ease;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .gsf-sidebar-shell.is-open .gsf-sidebar-panel {
    transform: translateX(0);
  }
  .gsf-sidebar-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
  }
  .gsf-sidebar {
    min-height: unset;
    border-right: none;
    border-bottom: none;
  }
  .gsf-main {
    flex: 1;
    min-width: 0;
  }
  .gsf-header .brand img {
    height: 30px;
  }
  body.gsf-sidebar-open {
    overflow: hidden;
  }
}

/* ── Loader ───────────────────────────────────────────── */
.gsf-loader {
  display: none;
  text-align: center;
  padding: 2rem;
  color: var(--gsf-primary);
}
.gsf-loader.active { display: block; }

/* ── Home ação-primeiro ───────────────────────────────── */
.gsf-hero {
  background: linear-gradient(135deg, var(--gsf-primary) 0%, var(--gsf-primary-d) 100%);
  color: #fff;
  border-radius: 16px;
  padding: 1.25rem 1.4rem;
  box-shadow: 0 6px 20px rgba(20, 80, 61, .18);
}
.gsf-hero-body {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.gsf-hero-title { font-family: var(--gsf-font-display); font-weight: 800; font-size: 1.35rem; line-height: 1.15; }
.gsf-hero-sub { opacity: .92; font-size: .95rem; margin-top: .2rem; max-width: 44ch; }
.gsf-hero-btn { font-weight: 700; color: var(--gsf-primary); border-radius: 10px; }
.gsf-hero-btn:hover { color: var(--gsf-primary-d); }

.gsf-quick {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; text-align: center; text-decoration: none; color: var(--gsf-ink);
  border: 1px solid #ECECEC; border-radius: 14px; padding: 1rem .5rem; height: 100%;
  background: #fff; box-shadow: 0 1px 3px rgba(20, 80, 61, .05);
  transition: border-color .15s ease, transform .08s ease;
}
.gsf-quick:hover { border-color: var(--gsf-accent); color: var(--gsf-ink); }
.gsf-quick:active { transform: translateY(1px); }
.gsf-quick i { font-size: 1.6rem; color: var(--gsf-primary); }
.gsf-quick span { font-family: var(--gsf-font-display); font-weight: 600; font-size: .9rem; line-height: 1.2; }

.gsf-clube {
  background: linear-gradient(135deg, var(--gsf-primary) 0%, var(--gsf-primary-d) 100%);
  color: #fff; border-radius: 16px; padding: 1.15rem 1.3rem;
  box-shadow: 0 6px 20px rgba(20, 80, 61, .18);
}
.gsf-clube .cl-top { display: flex; justify-content: space-between; align-items: baseline; }
.gsf-clube .cl-lab { font-family: var(--gsf-font-display); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .8rem; opacity: .9; }
.gsf-clube .cl-pts { font-family: var(--gsf-font-display); font-weight: 800; font-size: 1.6rem; }
.gsf-progress { height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .25); overflow: hidden; margin: .6rem 0 .5rem; }
.gsf-progress > i { display: block; height: 100%; background: var(--gsf-accent); border-radius: 999px; }

/* Cartões de estado ("para você agora") */
.gsf-state { display: flex; align-items: center; gap: .85rem; border-radius: 14px; padding: .85rem 1rem; margin-bottom: .6rem; position: relative; overflow: hidden; color: var(--gsf-ink); }
.gsf-state::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.gsf-state.amber { background: var(--gsf-warn-bg); } .gsf-state.amber::before { background: var(--gsf-warn); }
.gsf-state.green { background: var(--gsf-mint); }    .gsf-state.green::before { background: var(--gsf-accent); }
.gsf-state.red   { background: var(--gsf-danger-bg); } .gsf-state.red::before { background: var(--gsf-danger); }
.gsf-state .st-ic { font-size: 1.4rem; color: var(--gsf-primary); flex: none; line-height: 1; }
.gsf-state.amber .st-ic { color: var(--gsf-warn); }
.gsf-state.red .st-ic { color: var(--gsf-danger); }
.gsf-state .st-body { flex: 1; min-width: 0; }
.gsf-state .st-t { font-family: var(--gsf-font-display); font-weight: 700; font-size: .98rem; line-height: 1.2; }
.gsf-state .st-s { font-size: .82rem; color: var(--gsf-ink); opacity: .8; }
.gsf-clube .cl-hint { font-size: .85rem; opacity: .92; }

/* ── Feedback do OCR (estados progressivos) ───────────── */
.gsf-ocr-step { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; color: #8A968F; }
.gsf-ocr-step .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #cfd8d3; flex: none; position: relative; }
.gsf-ocr-step .lbl { font-size: .92rem; }
.gsf-ocr-step.is-active { color: var(--gsf-ink); font-weight: 600; }
.gsf-ocr-step.is-active .dot { border-color: var(--gsf-primary); box-shadow: 0 0 0 4px var(--gsf-mint); }
.gsf-ocr-step.is-done { color: var(--gsf-primary); }
.gsf-ocr-step.is-done .dot { background: var(--gsf-primary); border-color: var(--gsf-primary); }
.gsf-ocr-step.is-done .dot::after { content: ""; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.gsf-ocr-bar { height: 8px; border-radius: 999px; background: var(--gsf-mint); overflow: hidden; }
.gsf-ocr-bar > i { display: block; height: 100%; width: 25%; background: var(--gsf-accent); border-radius: 999px; transition: width .6s ease; }

/* ── Sinais de confiança (reutilizável) ───────────────── */
.gsf-trust { display: flex; flex-direction: column; gap: .55rem; background: var(--gsf-mint); border: 1px solid #D3E7DD; border-radius: 14px; padding: .9rem 1rem; }
.gsf-trust-item { display: flex; align-items: flex-start; gap: .6rem; }
.gsf-trust-item > i { color: var(--gsf-primary); font-size: 1.1rem; line-height: 1.25; flex: none; }
.gsf-trust-item .tt { font-family: var(--gsf-font-display); font-weight: 700; font-size: .85rem; color: var(--gsf-primary-d); line-height: 1.2; }
.gsf-trust-item .ts { font-size: .8rem; color: var(--gsf-ink); opacity: .85; line-height: 1.3; }

/* ── Acessibilidade & refino (Fase 5) ─────────────────── */
/* Foco de teclado visível e na cor da marca */
:focus-visible { outline: 3px solid rgba(30, 107, 82, .45); outline-offset: 2px; border-radius: 4px; }
/* Alvos de toque confortáveis para o público 35–70 (sem inflar os controles densos/pequenos) */
.btn:not(.btn-sm) { min-height: 44px; }
.gsf-sidebar .nav-link { min-height: 44px; }
.form-control:not(.form-control-sm), .form-select:not(.form-select-sm) { min-height: 44px; }
/* Hero da Home ocupa a largura no celular */
@media (max-width: 575.98px) {
  .gsf-hero-body { align-items: stretch; }
  .gsf-hero-btn { width: 100%; }
}
/* Respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   Componentes do prototipo "Meu GS" (paridade visual) - cards, cards de
   estado, chips, acoes rapidas, Clube, listas de item, timeline e trust,
   mapeados aos tokens --gsf-* da marca. Namespace .gsf- (sem colisao com
   Bootstrap). Usados no conteudo das paginas; a casca (header+sidebar)
   permanece. Ref.: prototipo aprovado (Artifact meu-gs-mockup).
   ══════════════════════════════════════════════════════════════════════ */

/* Coluna de leitura confortavel (feed) no desktop; largura total no mobile */
.gsf-feed { max-width: 680px; }

/* Rotulo de secao */
.gsf-sec-label { font-family: var(--gsf-font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .10em; text-transform: uppercase; color: #8A968F;
  margin: 1.15rem .25rem .6rem; display: flex; align-items: center; gap: .5rem; }

/* Card base */
.gsf-card { background: #fff; border: 1px solid #ECECEC; border-radius: 20px; padding: 16px;
  box-shadow: 0 10px 30px rgba(20,80,61,.10), 0 2px 8px rgba(20,80,61,.06); margin-bottom: 12px; }

/* Card de estado (borda colorida a esquerda + tint) */
.gsf-state { position: relative; overflow: hidden; border-radius: 20px; padding: 15px 16px;
  margin-bottom: 12px; display: flex; flex-direction: column; gap: 12px; }
.gsf-state::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.gsf-state-red   { background: var(--gsf-danger-bg); } .gsf-state-red::before   { background: var(--gsf-danger); }
.gsf-state-amber { background: var(--gsf-warn-bg); }   .gsf-state-amber::before { background: var(--gsf-warn); }
.gsf-state-green { background: var(--gsf-mint); }      .gsf-state-green::before { background: var(--gsf-accent); }
.gsf-state-top { display: flex; gap: 12px; align-items: flex-start; }
.gsf-emoji { font-size: 20px; line-height: 1; margin-top: 1px; }
.gsf-state-t { font-family: var(--gsf-font-display); font-weight: 700; font-size: 15px; color: var(--gsf-ink); line-height: 1.3; }
.gsf-state-s { font-size: 13px; color: #5F6E67; margin-top: 3px; line-height: 1.45; }

.gsf-money { font-variant-numeric: tabular-nums; font-family: var(--gsf-font-display); font-weight: 800; color: var(--gsf-primary-d); }
.gsf-row-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* Botoes do prototipo */
.gsf-btn { font-family: var(--gsf-font-display); font-weight: 700; font-size: .86rem; border-radius: 12px;
  padding: 10px 16px; border: none; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: 7px; text-decoration: none; transition: filter .15s; }
.gsf-btn-primary { background: var(--gsf-primary); color: #fff; }
.gsf-btn-primary:hover { filter: brightness(1.06); color: #fff; }
.gsf-btn-ghost { background: rgba(255,255,255,.7); color: var(--gsf-primary-d); border: 1px solid #D3E7DD; }
.gsf-btn-ghost:hover { color: var(--gsf-primary-d); background: #fff; }
.gsf-btn-block { width: 100%; padding: 13px; }

/* Acoes rapidas */
.gsf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gsf-qa { background: #fff; border: 1px solid #ECECEC; border-radius: 18px; padding: 16px 14px;
  display: flex; flex-direction: column; gap: 10px; cursor: pointer; text-decoration: none;
  box-shadow: 0 1px 3px rgba(20,80,61,.05); transition: border-color .15s; }
.gsf-qa:hover { border-color: var(--gsf-accent); }
.gsf-qa-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--gsf-mint);
  color: var(--gsf-primary); display: grid; place-items: center; font-size: 21px; }
.gsf-qa-feat .gsf-qa-ic { background: var(--gsf-primary); color: #fff; }
.gsf-qa-lab { font-family: var(--gsf-font-display); font-weight: 700; font-size: 14px; color: var(--gsf-ink); line-height: 1.25; }
.gsf-qa-sub { font-size: 11.5px; color: #8A968F; }

/* Clube (gradiente) */
.gsf-clube { background: linear-gradient(135deg, var(--gsf-primary) 0%, var(--gsf-primary-d) 100%);
  color: #fff; border-radius: 20px; padding: 18px; box-shadow: 0 10px 30px rgba(20,80,61,.10);
  position: relative; overflow: hidden; }
.gsf-clube::after { content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px;
  border-radius: 50%; background: rgba(75,184,147,.25); }
.gsf-clube-row { display: flex; justify-content: space-between; align-items: baseline; position: relative; z-index: 1; }
.gsf-clube-lab { font-family: var(--gsf-font-display); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.gsf-clube-pts { font-family: var(--gsf-font-display); font-weight: 800; font-size: 26px; font-variant-numeric: tabular-nums; }
.gsf-bar { height: 9px; border-radius: 999px; background: rgba(255,255,255,.25); margin: 12px 0 8px; overflow: hidden; position: relative; z-index: 1; }
.gsf-bar > i { display: block; height: 100%; background: var(--gsf-accent); border-radius: 999px; }
.gsf-clube-hint { font-size: 12.5px; opacity: .92; position: relative; z-index: 1; }

/* Chips */
.gsf-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--gsf-font-display);
  font-weight: 700; font-size: 11.5px; padding: 4px 10px; border-radius: 999px; }
.gsf-chip-green { background: var(--gsf-mint); color: var(--gsf-primary-d); }
.gsf-chip-amber { background: var(--gsf-warn-bg); color: var(--gsf-warn); }
.gsf-chip-blue  { background: var(--gsf-info-bg); color: var(--gsf-info); }
.gsf-chip-grey  { background: #EEF0EF; color: #5F6E67; }

/* Listas de item (orcamento / detalhe) */
.gsf-items { background: #fff; border: 1px solid #ECECEC; border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(20,80,61,.05); margin-bottom: 12px; }
.gsf-it { display: flex; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #F1F1F1; }
.gsf-it:last-child { border-bottom: none; }
.gsf-it-nm { font-family: var(--gsf-font-display); font-weight: 600; font-size: 14px; color: var(--gsf-ink); }
.gsf-it-dt { font-size: 12px; color: #8A968F; }
.gsf-it-pr { font-variant-numeric: tabular-nums; font-family: var(--gsf-font-display); font-weight: 700; color: var(--gsf-primary-d); white-space: nowrap; }
.gsf-totrow { display: flex; justify-content: space-between; padding: 8px 4px; font-size: 13.5px; color: #5F6E67; }
.gsf-totrow-big { font-family: var(--gsf-font-display); font-weight: 800; font-size: 17px; color: var(--gsf-primary-d);
  border-top: 1px dashed #D3E7DD; margin-top: 4px; padding-top: 12px; }

/* Titulo/sub reutilizaveis dentro de cards */
.gsf-li-title { font-family: var(--gsf-font-display); font-weight: 700; font-size: 14.5px; color: var(--gsf-ink); margin: 6px 0 2px; }
.gsf-li-sub { font-size: 12.5px; color: #5F6E67; }
.gsf-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* Timeline (pedidos) */
.gsf-tl { position: relative; padding-left: 26px; margin-top: 6px; }
.gsf-tl::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: #D3E7DD; }
.gsf-tl-item { position: relative; margin-bottom: 14px; }
.gsf-tl-item::before { content: ""; position: absolute; left: -22px; top: 4px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; border: 3px solid var(--gsf-accent); }
.gsf-tl-item.gsf-done::before { background: var(--gsf-accent); }
.gsf-tl-item.gsf-now::before { border-color: var(--gsf-warn); box-shadow: 0 0 0 4px var(--gsf-warn-bg); }

/* Trust */
.gsf-trust { display: flex; gap: 12px; align-items: center; background: var(--gsf-mint);
  border: 1px solid #D3E7DD; border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; }
.gsf-trust-av { width: 46px; height: 46px; border-radius: 50%; background: var(--gsf-primary); color: #fff;
  display: grid; place-items: center; font-family: var(--gsf-font-display); font-weight: 800; font-size: 17px; flex: none; }
.gsf-trust-tt { font-family: var(--gsf-font-display); font-weight: 700; font-size: 14px; color: var(--gsf-primary-d); }
.gsf-trust-ts { font-size: 12px; color: #5F6E67; }

/* Ring de adesao (tratamento) */
.gsf-ring-wrap { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid #ECECEC;
  border-radius: 20px; padding: 16px; box-shadow: 0 10px 30px rgba(20,80,61,.10); }
.gsf-ring { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.gsf-ring > i { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  font-family: var(--gsf-font-display); font-weight: 800; color: var(--gsf-primary-d); font-size: 18px; font-style: normal; }

/* Estado vazio */
.gsf-empty { background: #fff; border: 1px solid #ECECEC; border-radius: 20px; padding: 32px 20px; text-align: center;
  box-shadow: 0 1px 3px rgba(20,80,61,.05); }
.gsf-empty-ic { font-size: 2.2rem; color: var(--gsf-accent); }

/* Hero "Enviar receita" (gradiente) - espelha .send-hero do prototipo */
.gsf-send-hero { background: linear-gradient(135deg, var(--gsf-primary) 0%, var(--gsf-primary-d) 100%);
  color: #fff; border-radius: 20px; padding: 22px 20px; text-align: center;
  box-shadow: 0 10px 30px rgba(20,80,61,.10); position: relative; overflow: hidden; margin-bottom: 14px; }
.gsf-send-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px;
  border-radius: 50%; background: rgba(75,184,147,.25); }
.gsf-send-hero-big { font-size: 40px; line-height: 1; margin-bottom: 8px; position: relative; z-index: 1; }
.gsf-send-hero h3 { font-family: var(--gsf-font-display); font-weight: 800; font-size: 20px; margin: 0 0 6px;
  position: relative; z-index: 1; color: #fff; }
.gsf-send-hero p { font-size: 13.5px; line-height: 1.5; margin: 0; opacity: .95; position: relative; z-index: 1; }

/* Passos "O que acontece depois" - espelha .steps/.step do prototipo */
.gsf-steps { display: flex; flex-direction: column; gap: 10px; }
.gsf-step { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #ECECEC;
  border-radius: 16px; padding: 13px 14px; box-shadow: 0 1px 3px rgba(20,80,61,.05); }
.gsf-step .gsf-step-n { width: 26px; height: 26px; border-radius: 50%; background: #EEF0EF; color: #8A968F;
  display: grid; place-items: center; font-family: var(--gsf-font-display); font-weight: 800; font-size: 13px; flex: none; }
.gsf-step.is-active .gsf-step-n { background: var(--gsf-mint); color: var(--gsf-primary-d); }
.gsf-step.is-done .gsf-step-n { background: var(--gsf-primary); color: #fff; }
.gsf-step-st { font-family: var(--gsf-font-display); font-weight: 700; font-size: 14px; color: var(--gsf-ink); line-height: 1.3; }
.gsf-step-sp { font-size: 12.5px; color: #8A968F; margin-top: 2px; line-height: 1.4; }
.gsf-step-spin { margin-left: auto; color: var(--gsf-accent); font-size: 15px; flex: none; }