/* ════════════════════════════════════════════════════════════════════
   TITAN DESIGN OS — COMPONENTES (ds-components.css)
   Receitas destiladas da HomeOS (plataforma.html). Prefixo: t-
   REGRAS DESTE ARQUIVO:
   - Todos os valores via tokens do ds-tokens.css COM FALLBACK.
   - Especificidade máxima = 1 classe. NUNCA !important.
     (overrides locais das páginas sempre podem vencer)
   - Componentização é ADITIVA: adicionar t-* ao class existente,
     nunca renomear classes/IDs (JS e ios.css dependem deles).
   - DONOS QUE ESTE ARQUIVO NÃO DUPLICA:
     skeleton/toast/empty → css/ui-states.css (tfs-*, TitanUI)
     bottom-sheets/switch/topbar iOS → css/ios.css
   ════════════════════════════════════════════════════════════════════ */

/* ── CARD (receita do .bento .card da HomeOS) ── */
.t-card {
  position: relative;
  border-radius: var(--r-lg, 24px);
  border: 1px solid var(--line, rgba(236,230,216,.09));
  background: linear-gradient(165deg, rgba(20,25,38,.72), rgba(10,13,21,.86));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  color: var(--text, #ece6d8);
  box-shadow: 0 18px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .35s var(--ease-os, ease), border-color .35s, box-shadow .35s;
}
a.t-card { text-decoration: none; }

.t-card:hover {
  transform: translateY(-5px);
  border-color: var(--line-h, rgba(236,230,216,.2));
}

:root[data-theme="light"] .t-card {
  background: linear-gradient(165deg, rgba(255,255,255,.74), rgba(244,238,226,.88));
  box-shadow: 0 18px 50px rgba(30,40,70,.12), inset 0 1px 0 rgba(255,255,255,.8);
}
.t-card--quiet, .t-card--quiet:hover { transform: none; }
.t-card--quiet:hover { border-color: var(--line, rgba(236,230,216,.09)); }
.t-card--accent { border-color: var(--accent-line, rgba(193,18,31,.36)); }

.t-card--accent:hover {
  border-color: var(--accent, #e23744);
  box-shadow: 0 18px 50px var(--accent-soft, rgba(193,18,31,.13)), inset 0 1px 0 rgba(255,255,255,.05);
}

.t-card--hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6,9,17,.55));
  pointer-events: none;
}
.t-card__body { position: relative; z-index: 1; padding: 22px; }

/* ── BOTÃO (receita do .cta da HomeOS) ── */
.t-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  font-family: var(--fb, 'Outfit', sans-serif);
  font-weight: 700;
  font-size: .95rem;
  border-radius: var(--r-md, 16px);
  padding: 13px 26px;
  border: 1px solid transparent;
  background: var(--surface, rgba(255,255,255,.05));
  color: var(--text, #ece6d8);
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--t, .25s), box-shadow var(--t, .25s), background var(--t, .25s), border-color var(--t, .25s);
}
.t-btn:hover { transform: translateY(-2px); }
.t-btn:active { transform: scale(.97); }

.t-btn--primary {
  background: linear-gradient(135deg, var(--red-b, #e23744), var(--red, #ba1525));
  color: #fff;
  box-shadow: 0 10px 32px var(--red-glo, rgba(193,18,31,.55)), inset 0 1px 0 rgba(255,255,255,.22);
}

.t-btn--primary::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-140%);
  transition: transform .7s var(--ease-os, ease);
}
.t-btn--primary:hover { box-shadow: 0 16px 44px var(--red-glo, rgba(193,18,31,.55)); }
.t-btn--primary:hover::before { transform: translateX(140%); }

.t-btn--ghost {
  background: transparent;
  border-color: var(--border, rgba(255,255,255,.09));
}
.t-btn--ghost:hover { background: var(--surface, rgba(255,255,255,.05)); border-color: var(--border-h, rgba(255,255,255,.22)); }

.t-btn--soft {
  background: var(--accent-soft, rgba(193,18,31,.13));
  border-color: var(--accent-line, rgba(193,18,31,.36));
  color: var(--accent, #e23744);
}

.t-btn--gold {
  background: linear-gradient(135deg, var(--gold-2, #e6c878), var(--gold, #caa64e));
  color: #131b2e;
  box-shadow: 0 10px 30px var(--gold-soft, rgba(202,166,78,.3)), inset 0 1px 0 rgba(255,255,255,.4);
}
.t-btn--sm { padding: 8px 16px; font-size: .8rem; border-radius: var(--r-sm, 12px); }
.t-btn--lg { padding: 18px 36px; font-size: 1.08rem; gap: 13px; }
.t-btn--block { width: 100%; }
.t-btn--icon { padding: 11px; aspect-ratio: 1; border-radius: var(--r-sm, 12px); }
.t-btn:disabled { opacity: .5; pointer-events: none; }

/* ── SECTION HEADER (receita .sec-hdr/.greet-date da HomeOS) ── */
.t-sec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 40px 0 14px;
}

.t-sec__kicker {
  display: block;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-2, #e6c878);
  margin-bottom: 6px;
}

.t-sec__title {
  font-family: var(--display, 'Roca One', sans-serif);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--text, #ece6d8);
}

.t-sec__action {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--gold, #caa64e);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--t-fast, .15s);
}
.t-sec__action:hover { opacity: .75; }

/* ── PILL / BADGE (receita .pill da HomeOS) ── */
.t-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 700;
  border-radius: 99px;
  padding: 6px 13px;
  border: 1px solid var(--line, rgba(236,230,216,.09));
  background: var(--surface, rgba(236,230,216,.04));
  color: var(--text2, #a9a394);
}

.t-pill--fire {
  color: var(--red-b, #e23744);
  border-color: var(--red-line, rgba(193,18,31,.36));
  background: var(--red-soft, rgba(193,18,31,.13));
}

.t-pill--coin {
  color: var(--gold-2, #e6c878);
  border-color: var(--gold-line, rgba(202,166,78,.34));
  background: var(--gold-soft, rgba(202,166,78,.1));
}

.t-pill--accent {
  color: var(--accent, #e23744);
  border-color: var(--accent-line, rgba(193,18,31,.36));
  background: var(--accent-soft, rgba(193,18,31,.13));
}

/* live: receita do .live da HomeOS (eyebrow com dot pulsante) */
.t-pill--live {
  border: none;
  background: none;
  padding: 0;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-2, #e6c878);
  gap: 9px;
}

.t-pill--live i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red-b, #e23744);
  animation: t-ping 2s cubic-bezier(0,0,.2,1) infinite;
}

/* ── PROGRESS BAR ── */
.t-progress {
  position: relative;
  height: 8px;
  border-radius: 99px;
  background: var(--surface, rgba(255,255,255,.05));
  border: 1px solid var(--line, rgba(236,230,216,.09));
  overflow: hidden;
}

.t-progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 99px;
  background: var(--accent, #e23744);
  transition: width .8s var(--ease-os, ease);
}

/* assinatura Titan: gradiente vermelho + glow */
.t-progress--titan .t-progress__fill {
  background: linear-gradient(90deg, var(--red, #ba1525), var(--red-b, #e23744));
  box-shadow: 0 0 12px var(--red-glo, rgba(193,18,31,.55));
}

.t-progress--gold .t-progress__fill {
  background: linear-gradient(90deg, var(--gold, #caa64e), var(--gold-2, #e6c878));
  box-shadow: 0 0 12px var(--gold-line, rgba(202,166,78,.34));
}

/* Anel de progresso (.t-ring): usar a receita SVG da HomeOS —
   <svg viewBox="0 0 64 64"><circle class="tr"/><circle class="fg"
   stroke-dasharray="C" stroke-dashoffset="C*(1-p)"/></svg>
   com transition: stroke-dashoffset .8s var(--ease-os). */

/* ── TABS SEGMENTADAS ── */
.t-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-md, 16px);
  background: var(--surface, rgba(255,255,255,.04));
  border: 1px solid var(--line, rgba(236,230,216,.09));
}

.t-tab {
  appearance: none;
  border: none;
  background: none;
  font-family: var(--fb, 'Outfit', sans-serif);
  font-size: .82rem;
  font-weight: 700;
  color: var(--text3, #6c6759);
  padding: 9px 18px;
  border-radius: var(--r-sm, 12px);
  cursor: pointer;
  transition: color var(--t-fast, .15s), background var(--t-fast, .15s), transform var(--t-fast, .15s);
}
.t-tab:active { transform: scale(.96); }

.t-tab.is-active {
  color: var(--text, #ece6d8);
  background: var(--bg3, #131a2c);
  box-shadow: var(--sh-xs, 0 1px 2px rgba(0,0,0,.55));
}
:root[data-theme="light"] .t-tab.is-active { background: #fff; }

/* ── FORM (inputs ≥16px: anti-zoom iOS — NÃO reduzir) ── */
.t-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }

.t-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text3, #6c6759);
}

.t-input {
  font-family: var(--fb, 'Outfit', sans-serif);
  font-size: 16px; /* mínimo hard-coded: evita zoom automático no iOS */
  color: var(--text, #ece6d8);
  background: var(--surface, rgba(255,255,255,.04));
  border: 1px solid var(--border, rgba(255,255,255,.09));
  border-radius: var(--r-sm, 12px);
  padding: 13px 14px;
  width: 100%;
  outline: none;
  transition: border-color var(--t-fast, .15s), background var(--t-fast, .15s);
}

.t-input:focus {
  border-color: var(--accent-line, rgba(193,18,31,.36));
  background: var(--surface-h, rgba(255,255,255,.08));
}
.t-input::placeholder { color: var(--text3, #6c6759); }

/* ── ASSINATURAS VISUAIS TITAN ── */

/* glow ambiente (atrás de heros/seções) — só opacity anima */
.t-glow {
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow, rgba(193,18,31,.45)), transparent 70%);
  filter: blur(60px);
  opacity: .5;
  pointer-events: none;
}

/* texto com gradiente proprietário */
.t-grad {
  background: linear-gradient(90deg, var(--gold-2, #e6c878), var(--gold, #caa64e));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.t-grad--red {
  background: linear-gradient(90deg, var(--red-b, #e23744), var(--red, #ba1525));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.t-divider {
  height: 1px;
  border: none;
  margin: 26px 0;
  background: linear-gradient(90deg, transparent, var(--line-h, rgba(236,230,216,.2)), transparent);
}

/* MODO LEVE: sem backdrop-filter em dispositivos Android mid-range */
.os-lite .t-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(165deg, rgba(20,25,38,.95), rgba(10,13,21,.97));
}