/* ============================================================
   glb_cmp001.css — Componentes reutilizáveis.
   ------------------------------------------------------------
   Cabeçalho, cartões, botões, badges, tabbar, recibos, toast.
   ============================================================ */

/* ---------- Cabeçalho ---------- */
.app-header {
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(135deg, var(--rose-500), var(--rose-400));
  color: var(--on-rose);
  padding: 16px 18px 18px;
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.app-header .brand { font-family: var(--font-brand); font-weight: 700; letter-spacing: .3px; }
.app-header .btn-ghost {
  color: var(--on-rose);
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.12);
  border-radius: var(--radius-pill);
}
.app-header .btn-ghost:hover { background: rgba(255,255,255,.22); color:#fff; }

/* ---------- Cartões ---------- */
.card-soft {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-soft.alt { background: var(--surface-2); }

.tile {
  border: none;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease;
  cursor: pointer;
  color: var(--ink);
}
.tile:active { transform: scale(.97); }
.tile .tile-ico {
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center;
  font-size: 1.5rem; margin: 0 auto 8px;
  background: var(--rose-100); color: var(--rose-600);
}
.tile.primary {
  background: linear-gradient(135deg, var(--rose-500), var(--rose-400));
  color: #fff; box-shadow: var(--shadow);
}
.tile.primary .tile-ico { background: rgba(255,255,255,.2); color:#fff; }

/* ---------- Botões ---------- */
.btn-rose {
  --bs-btn-bg: var(--rose-500);
  --bs-btn-border-color: var(--rose-500);
  --bs-btn-hover-bg: var(--rose-600);
  --bs-btn-hover-border-color: var(--rose-600);
  --bs-btn-active-bg: var(--rose-700);
  --bs-btn-color: #fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff;
  border-radius: var(--radius-pill);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.btn-rose-soft {
  --bs-btn-bg: var(--rose-100);
  --bs-btn-border-color: var(--rose-150);
  --bs-btn-hover-bg: var(--rose-200);
  --bs-btn-hover-border-color: var(--rose-200);
  --bs-btn-color: var(--rose-700);
  --bs-btn-hover-color: var(--rose-700);
  border-radius: var(--radius-pill);
  font-weight: 600;
}
.btn-pill { border-radius: var(--radius-pill); font-weight: 600; }
.btn-lg-soft { padding: .85rem 1rem; font-size: 1.05rem; }

/* ---------- Campos ---------- */
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border-color: var(--border);
  background: var(--surface);
  color: var(--ink);
  padding: .7rem .9rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--rose-300);
  box-shadow: 0 0 0 .25rem rgba(236,93,138,.15);
}
.form-label { color: var(--ink-soft); font-weight: 600; font-size: .9rem; }
.input-money {
  font-family: var(--font-num); font-weight: 700;
  font-size: 2.1rem; text-align: center;
  border: none; background: transparent; color: var(--rose-600);
  width: 100%;
}
.input-money:focus { outline: none; box-shadow: none; }

/* ---------- Badges / status ---------- */
.badge-status { border-radius: var(--radius-pill); font-weight: 600; padding: .35em .7em; }
.st-ok     { background: var(--ok-bg);     color: var(--ok); }
.st-warn   { background: var(--warn-bg);   color: var(--warn); }
.st-danger { background: var(--danger-bg); color: var(--danger); }
.st-info   { background: var(--info-bg);   color: var(--info); }

.alert-pill {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
}
.alert-pill .n { font-family: var(--font-num); font-weight: 700; font-size: 1.3rem; }
.alert-pill.warn   { background: var(--warn-bg);   border-color: #f6e2bf; }
.alert-pill.danger { background: var(--danger-bg); border-color: #f7cdd2; }
.alert-pill.ok     { background: var(--ok-bg);     border-color: #c9ecdb; }

/* ---------- Listas ---------- */
.list-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .1s ease;
}
.list-row:active { transform: scale(.99); }

.avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--rose-300), var(--rose-500));
  color: #fff; font-weight: 700; font-family: var(--font-brand);
}

.money { font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; }
.money.aberto { color: var(--rose-600); }
.money.ok     { color: var(--ok); }

/* ---------- Tabbar inferior ---------- */
.tabbar {
  position: sticky; bottom: 0; z-index: 30;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-around;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 20px rgba(214,67,122,.06);
}
.tabbar .tab {
  border: none; background: transparent; color: var(--ink-faint);
  font-size: .72rem; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 10px; border-radius: 12px;
}
.tabbar .tab i { font-size: 1.25rem; }
.tabbar .tab.active { color: var(--rose-600); }

/* ---------- Recibo (compartilhar) ---------- */
.recibo {
  background:
    radial-gradient(900px 300px at 50% -40%, var(--rose-100), transparent 70%),
    var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  box-shadow: var(--shadow);
  position: relative;
}
.recibo .selo {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 6px;
  display: grid; place-items: center; font-size: 1.6rem;
  background: var(--rose-100); color: var(--rose-600);
}
.recibo h5 { font-family: var(--font-brand); color: var(--rose-700); }
.recibo .linha { display: flex; justify-content: space-between; padding: 4px 0; }
.recibo .total { font-family: var(--font-num); font-weight: 700; font-size: 1.6rem; color: var(--rose-600); }

/* ---------- Toast ---------- */
.toast-wrap {
  position: fixed; left:0; right:0; bottom: 92px;
  display:flex; justify-content:center; z-index: 60; pointer-events:none;
}
.toast-msg {
  background: var(--ink); color:#fff;
  padding:.6rem 1rem; border-radius: var(--radius-pill);
  box-shadow: var(--shadow); font-weight:600; font-size:.9rem;
  opacity:0; transform: translateY(10px); transition: all .2s ease;
}
.toast-msg.show { opacity:1; transform: translateY(0); }