/* ============================================================
   Turbina Social — telas do cliente: /transactions e /tickets
   Escopos: .ts-tx (extrato) e .ts-tk (suporte)
   Mesma anatomia de new-order.css e add-funds.css: só aparência
   sobre a marcação, claro e escuro (body.theme-dark), mobile-first.
   ver=1.000
   ============================================================ */

.ts-tx, .ts-tk, .ts-rf, .ts-af, .ts-faq{
  --u-accent:#7c3aed;
  --u-accent-2:#c026d3;
  --u-grad:linear-gradient(120deg,#7c3aed,#c026d3);
  --u-ink:#1a1330;
  --u-body:#5a5270;
  --u-muted:#8b83a1;
  --u-line:#ece7f8;
  --u-soft:#f8f6ff;
  --u-ok:#0e9f6e;
  --u-ok-soft:#e8f8f1;
  --u-warn:#b45309;
  --u-warn-soft:#fef3c7;
  --u-radius:18px;
  --u-radius-sm:12px;
}

/* ---------- Cabeçalho da página ---------- */
.ts-head{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px;margin-bottom:20px;
}
.ts-head h1{
  font-size:1.35rem;font-weight:800;letter-spacing:-.01em;color:var(--u-ink);
  margin:0;display:flex;align-items:center;gap:10px;
}
.ts-head h1 i{color:var(--u-accent);}
.ts-head .ts-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

/* ---------- Abas de saldo (compartilhadas com /add_funds) ---------- */
.ts-tabs{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;
  border-bottom:1px solid #ece7f8;padding-bottom:0;
}
.ts-tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:12px 12px 0 0;
  font-weight:600;font-size:.9rem;color:#5a5270;text-decoration:none;
  border:1px solid transparent;border-bottom:0;
  position:relative;top:1px;
}
.ts-tab:hover{color:#7c3aed;text-decoration:none;}
.ts-tab.is-active{
  background:#fff;border-color:#ece7f8;color:#7c3aed;
}
.ts-tab.is-active::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#fff;
}
body.theme-dark .ts-tabs{border-bottom-color:#243056;}
body.theme-dark .ts-tab{color:#aeb6d0;}
body.theme-dark .ts-tab.is-active{background:#0b1739;border-color:#243056;color:#c084fc;}
body.theme-dark .ts-tab.is-active::after{background:#0b1739;}
@media (max-width:576px){
  .ts-tab{flex:1 1 auto;justify-content:center;padding:11px 10px;font-size:.85rem;}
}

/* ---------- Cartões ---------- */
.ts-tx .card, .ts-tk .card, .ts-rf .card, .ts-af .card, .ts-faq .card{
  border:1px solid var(--u-line);
  border-radius:var(--u-radius);
  box-shadow:0 12px 34px -20px rgba(88,28,135,.28);
}
.ts-tx .card-header, .ts-tk .card-header, .ts-rf .card-header, .ts-af .card-header, .ts-faq .card-header{
  border-bottom:1px solid var(--u-line);padding:15px 20px;
}
.ts-tx .card-title, .ts-tk .card-title, .ts-rf .card-title, .ts-af .card-title, .ts-faq .card-title{
  font-weight:700;font-size:.95rem;color:var(--u-ink);margin:0;
  display:flex;align-items:center;gap:8px;
}
.ts-tx .card-title i, .ts-tk .card-title i, .ts-rf .card-title i, .ts-af .card-title i, .ts-faq .card-title i{color:var(--u-accent);}
.ts-tx .card-body, .ts-tk .card-body, .ts-rf .card-body, .ts-af .card-body, .ts-faq .card-body{padding:20px;}

/* ---------- Resumo em blocos ---------- */
.ts-tiles{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;margin-bottom:20px;
}
.ts-tile{
  border:1px solid var(--u-line);border-radius:var(--u-radius);
  background:#fff;padding:16px 18px;
}
.ts-tile .l{
  font-size:.76rem;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:var(--u-muted);margin-bottom:6px;
}
.ts-tile .n{font-size:1.5rem;font-weight:800;color:var(--u-ink);line-height:1.15;}
.ts-tile .s{font-size:.8rem;color:var(--u-muted);margin-top:4px;}
/* Cor sólida em vez de texto com gradiente recortado: o recorte depende de
   background-clip:text, que em alguns motores simplesmente não pinta e deixa o
   número INVISÍVEL. Num saldo, é o pior defeito possível. */
.ts-tile.is-accent .n{color:var(--u-accent);}
.ts-tile.is-accent{border-color:rgba(124,58,237,.28);background:var(--u-soft);}

/* ---------- Selos de situação ---------- */
.ts-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;
  font-size:.76rem;font-weight:700;line-height:1.2;white-space:nowrap;
}
.ts-pill-ok{background:var(--u-ok-soft);color:var(--u-ok);}
.ts-pill-wait{background:var(--u-warn-soft);color:var(--u-warn);}
.ts-pill-off{background:#eceaf3;color:#6b6480;}
.ts-pill-accent{background:rgba(124,58,237,.12);color:var(--u-accent);}

/* ---------- Tabela do extrato ---------- */
.ts-tx table{margin-bottom:0;}
.ts-tx thead th{
  background:var(--u-soft);border-bottom:1px solid var(--u-line) !important;
  border-top:0 !important;
  font-size:.75rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--u-muted);padding:12px 16px;
}
.ts-tx tbody td{
  border-top:1px solid var(--u-line);padding:14px 16px;
  vertical-align:middle;color:var(--u-body);font-size:.9rem;
}
.ts-tx tbody tr:hover{background:var(--u-soft);}
.ts-tx .ts-tx-id{font-variant-numeric:tabular-nums;color:var(--u-muted);font-size:.85rem;}
.ts-tx .ts-tx-value{font-weight:700;color:var(--u-ink);font-variant-numeric:tabular-nums;}
.ts-tx .ts-tx-value.is-in{color:var(--u-ok);}
.ts-tx .ts-tx-when{color:var(--u-muted);font-size:.85rem;}
.ts-tx .ts-tx-fee{display:block;color:var(--u-muted);font-size:.76rem;margin-top:3px;}

/* Fotografia do saldo: antes -> depois daquela movimentação. */
.ts-tx .ts-tx-balance{
  display:inline-flex;align-items:center;gap:8px;
  font-variant-numeric:tabular-nums;font-size:.86rem;white-space:nowrap;
}
.ts-tx .ts-tx-balance .b{color:var(--u-muted);}
.ts-tx .ts-tx-balance .a{color:var(--u-ink);font-weight:700;}
.ts-tx .ts-tx-balance i{color:var(--u-muted);font-size:.8rem;}

.ts-tx tbody tr.is-refund .ts-tx-value.is-in{color:var(--u-accent);}

/* Nota de rodapé que explica o que o saldo mostrado é — e o que não é. */
.ts-tx-note{
  font-size:.8rem;color:var(--u-muted);line-height:1.5;
  padding:12px 20px;border-top:1px solid var(--u-line);
}
.ts-tx img.payment{max-height:22px;width:auto;}
.ts-tx .ts-tx-method{display:flex;align-items:center;gap:9px;}

/* ---------- Suporte ---------- */
.ts-tk .ts-tk-list{display:flex;flex-direction:column;}
.ts-tk .ts-tk-item{
  display:flex;align-items:flex-start;gap:14px;
  padding:15px 20px;border-bottom:1px solid var(--u-line);
  text-decoration:none;color:inherit;transition:background .14s ease;
}
.ts-tk .ts-tk-item:last-child{border-bottom:0;}
.ts-tk .ts-tk-item:hover{background:var(--u-soft);text-decoration:none;}
.ts-tk .ts-tk-dot{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--u-soft);color:var(--u-accent);font-size:1rem;
}
.ts-tk .ts-tk-dot.is-open{background:var(--u-grad);color:#fff;}
.ts-tk .ts-tk-dot.is-closed{background:#eceaf3;color:#8b83a1;}
.ts-tk .ts-tk-main{flex:1 1 auto;min-width:0;}
.ts-tk .ts-tk-subject{
  font-weight:700;color:var(--u-ink);font-size:.93rem;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px;
}
.ts-tk .ts-tk-item.is-closed .ts-tk-subject{color:var(--u-muted);font-weight:600;}
.ts-tk .ts-tk-preview{
  color:var(--u-body);font-size:.84rem;line-height:1.45;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.ts-tk .ts-tk-when{color:var(--u-muted);font-size:.78rem;margin-top:5px;}
.ts-tk .ts-tk-side{flex:0 0 auto;padding-top:2px;}

/* Conversa */
.ts-tk .ts-tk-thread{display:flex;flex-direction:column;gap:14px;padding:4px 0;}
.ts-tk .ts-msg{
  border:1px solid var(--u-line);border-radius:var(--u-radius-sm);
  padding:14px 16px;background:#fff;max-width:88%;
}
.ts-tk .ts-msg.is-support{background:var(--u-soft);align-self:flex-start;}
.ts-tk .ts-msg.is-mine{align-self:flex-end;border-color:rgba(124,58,237,.3);}
.ts-tk .ts-msg-head{
  display:flex;align-items:center;gap:9px;margin-bottom:7px;
  font-size:.8rem;font-weight:700;color:var(--u-ink);
}
.ts-tk .ts-msg-head .ts-msg-when{font-weight:500;color:var(--u-muted);}
.ts-tk .ts-msg-body{color:var(--u-body);font-size:.9rem;line-height:1.55;white-space:pre-wrap;word-break:break-word;}
.ts-tk .ts-tk-closed-note{
  border:1px dashed var(--u-line);border-radius:var(--u-radius-sm);
  padding:14px 16px;color:var(--u-muted);font-size:.86rem;text-align:center;
}

/* Formulários */
.ts-tx .form-control, .ts-tk .form-control, .ts-rf .form-control, .ts-af .form-control,
.ts-tx .custom-select, .ts-tk .custom-select{
  border:1.5px solid var(--u-line);border-radius:var(--u-radius-sm);
  min-height:46px;color:var(--u-ink);box-shadow:none;
}
.ts-tk textarea.form-control{min-height:120px;}
.ts-tx .form-control:focus, .ts-tk .form-control:focus,
.ts-tk .custom-select:focus{border-color:var(--u-accent);box-shadow:none;}
.ts-tk label, .ts-tx label{
  font-weight:600;font-size:.83rem;color:var(--u-body);margin-bottom:7px;
}
.ts-tk .btn-primary, .ts-tx .btn-primary, .ts-rf .btn-primary, .ts-af .btn-primary{
  background:var(--u-grad);border:0;border-radius:var(--u-radius-sm);
  padding:13px 24px;font-weight:700;
  box-shadow:0 10px 26px -14px rgba(124,58,237,.75);
}
.ts-tk .btn-primary:hover, .ts-tx .btn-primary:hover, .ts-rf .btn-primary:hover, .ts-af .btn-primary:hover{filter:brightness(1.06);}
.ts-tk .ts-search .form-control{border-radius:999px 0 0 999px;}
.ts-tk .ts-search .btn{
  border-radius:0 999px 999px 0;background:var(--u-grad);border:0;color:#fff;padding:0 18px;
}

/* Vazio */
.ts-empty{
  text-align:center;padding:44px 20px;color:var(--u-muted);
}
.ts-empty i{font-size:2.2rem;color:var(--u-line);display:block;margin-bottom:12px;}
.ts-empty .t{font-weight:700;color:var(--u-body);margin-bottom:5px;font-size:.95rem;}
.ts-empty .d{font-size:.86rem;line-height:1.5;}

/* ---------- Tema escuro ---------- */
body.theme-dark .ts-tx, body.theme-dark .ts-tk,
body.theme-dark .ts-rf, body.theme-dark .ts-af, body.theme-dark .ts-faq{
  --u-ink:#eef1f8;--u-body:#aeb6d0;--u-muted:#8592b8;
  --u-line:#243056;--u-soft:#0b1739;
  --u-ok-soft:rgba(14,159,110,.12);
  --u-warn-soft:rgba(180,83,9,.16);--u-warn:#fbbf24;
}
body.theme-dark .ts-tx .card, body.theme-dark .ts-tk .card,
body.theme-dark .ts-rf .card, body.theme-dark .ts-af .card, body.theme-dark .ts-faq .card,
body.theme-dark .ts-tile, body.theme-dark .ts-tk .ts-msg{background:#0b1739;box-shadow:none;}
body.theme-dark .ts-tk .ts-msg.is-support{background:#121c38;}
body.theme-dark .ts-pill-off{background:#1c2540;color:#8592b8;}
body.theme-dark .ts-tk .ts-tk-dot.is-closed{background:#1c2540;color:#8592b8;}
body.theme-dark .ts-tx .form-control, body.theme-dark .ts-tk .form-control,
body.theme-dark .ts-rf .form-control, body.theme-dark .ts-af .form-control,
body.theme-dark .ts-tk .custom-select{background:#0b1739;}

/* ---------- ~400px ---------- */
@media (max-width:767px){
  .ts-tiles{grid-template-columns:1fr;gap:10px;}
  .ts-head h1{font-size:1.15rem;}

  /* A tabela de 5 colunas não cabe: cada linha vira um cartão. */
  .ts-tx .ts-tx-table thead{display:none;}
  .ts-tx .ts-tx-table, .ts-tx .ts-tx-table tbody,
  .ts-tx .ts-tx-table tr, .ts-tx .ts-tx-table td{display:block;width:100%;}
  .ts-tx .ts-tx-table tr{
    border:1px solid var(--u-line);border-radius:var(--u-radius-sm);
    margin-bottom:10px;padding:6px 4px;
  }
  .ts-tx .ts-tx-table td{
    border:0;display:flex;align-items:center;justify-content:space-between;
    gap:14px;padding:8px 14px;text-align:right;
  }
  .ts-tx .ts-tx-table td::before{
    content:attr(data-rotulo);
    font-size:.74rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
    color:var(--u-muted);text-align:left;flex:0 0 auto;
  }
  .ts-tx .ts-tx-method{justify-content:flex-end;}

  .ts-tk .ts-tk-item{padding:14px 15px;gap:11px;}
  .ts-tk .ts-msg{max-width:100%;}
}

@media (prefers-reduced-motion:reduce){
  .ts-tx *, .ts-tk *{transition:none !important;}
}

/* ---------- Chips de filtro (usados em /refill) ----------
   Substituem o `.order_btn_group` que vinha com CSS solto dentro da view. */
.ts-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.ts-chip{
  display:inline-flex;align-items:center;
  padding:8px 16px;border-radius:999px;
  border:1.5px solid var(--u-line);background:#fff;
  font-size:.86rem;font-weight:600;color:var(--u-body);text-decoration:none;
  transition:border-color .16s ease,color .16s ease;
}
.ts-chip:hover{border-color:var(--u-accent);color:var(--u-accent);text-decoration:none;}
.ts-chip.is-active{background:var(--u-grad);border-color:transparent;color:#fff;}
body.theme-dark .ts-chip{background:#0b1739;}

/* ---------- Tabelas das telas novas ---------- */
.ts-rf table, .ts-af table{margin-bottom:0;}
.ts-rf thead th, .ts-af thead th{
  background:var(--u-soft);border-bottom:1px solid var(--u-line) !important;border-top:0 !important;
  font-size:.75rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--u-muted);padding:12px 16px;
}
.ts-rf tbody td, .ts-af tbody td{
  border-top:1px solid var(--u-line);padding:14px 16px;
  vertical-align:middle;color:var(--u-body);font-size:.9rem;
}
.ts-rf tbody tr:hover, .ts-af tbody tr:hover{background:var(--u-soft);}
.ts-rf .ts-rf-id, .ts-rf .ts-rf-when{color:var(--u-muted);font-size:.85rem;}
.ts-rf .ts-rf-details ul{list-style:none;padding:0;margin:0;font-size:.84rem;line-height:1.6;}
.ts-rf .ts-rf-details a{word-break:break-all;}
.ts-af .ts-af-value{font-weight:700;color:var(--u-ink);font-variant-numeric:tabular-nums;}

@media (max-width:767px){
  .ts-chips{gap:7px;}
  .ts-chip{padding:7px 13px;font-size:.82rem;}

  /* Mesma conversão de tabela em cartões usada no extrato. */
  .ts-rf .ts-rf-table thead, .ts-af .ts-af-table thead{display:none;}
  .ts-rf .ts-rf-table, .ts-rf .ts-rf-table tbody, .ts-rf .ts-rf-table tr, .ts-rf .ts-rf-table td,
  .ts-af .ts-af-table, .ts-af .ts-af-table tbody, .ts-af .ts-af-table tr, .ts-af .ts-af-table td{
    display:block;width:100%;
  }
  .ts-rf .ts-rf-table tr, .ts-af .ts-af-table tr{
    border:1px solid var(--u-line);border-radius:var(--u-radius-sm);
    margin-bottom:10px;padding:6px 4px;
  }
  .ts-rf .ts-rf-table td, .ts-af .ts-af-table td{
    border:0;display:flex;align-items:flex-start;justify-content:space-between;
    gap:14px;padding:8px 14px;text-align:right;
  }
  .ts-rf .ts-rf-table td::before, .ts-af .ts-af-table td::before{
    content:attr(data-rotulo);
    font-size:.74rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
    color:var(--u-muted);text-align:left;flex:0 0 auto;
  }
  .ts-rf .ts-rf-details{text-align:right;}
}

/* ---------- Perguntas frequentes ---------- */
.ts-faq .ts-faq-item{
  border:1px solid var(--u-line);border-radius:var(--u-radius-sm);
  margin-bottom:10px;background:#fff;overflow:hidden;
}
.ts-faq .ts-faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;text-align:left;border:0;background:none;
  padding:16px 18px;font-weight:600;font-size:.93rem;color:var(--u-ink);cursor:pointer;
}
.ts-faq .ts-faq-q:hover{color:var(--u-accent);}
.ts-faq .ts-faq-q i{color:var(--u-muted);transition:transform .18s ease;flex:0 0 auto;}
.ts-faq .ts-faq-item.is-open .ts-faq-q i{transform:rotate(180deg);color:var(--u-accent);}
.ts-faq .ts-faq-a{
  padding:0 18px 18px;color:var(--u-body);font-size:.9rem;line-height:1.65;
  border-top:1px solid var(--u-line);padding-top:16px;
}
.ts-faq .ts-faq-a img{max-width:100%;height:auto;}
body.theme-dark .ts-faq .ts-faq-item{background:#0b1739;}

/* ---------- Afiliados ---------- */
.ts-tiles.ts-tiles-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.ts-af-link{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.ts-af-link code{
  flex:1 1 260px;min-width:0;
  background:var(--u-soft);border:1px solid var(--u-line);border-radius:var(--u-radius-sm);
  padding:12px 16px;font-size:.9rem;color:var(--u-accent);
  overflow-x:auto;white-space:nowrap;
}
.ts-af .ts-tx-facts{
  list-style:none;padding:14px 16px;margin:20px 0 0;
  background:var(--u-soft);border:1px solid var(--u-line);border-radius:var(--u-radius-sm);
  display:flex;flex-wrap:wrap;gap:9px 22px;font-size:.86rem;color:var(--u-body);
}
.ts-af .ts-tx-facts li{display:flex;align-items:center;gap:7px;}
.ts-af .ts-tx-facts i{color:var(--u-muted);}
.ts-af .ts-tx-facts strong{color:var(--u-ink);}
@media (max-width:991px){ .ts-tiles.ts-tiles-4{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:767px){ .ts-tiles.ts-tiles-4{grid-template-columns:1fr;} .ts-af .ts-tx-facts{flex-direction:column;} }