/* ============================================================
   TINKASO — Design System v2
   Principios: alineación, cards, colores suaves, hover gentil,
   responsive, jerarquía visual clara
   ============================================================ */

/* ── 1. Design Tokens ─────────────────────────────────────── */
:root {
  /* ── BACKGROUNDS (LIGHT) ── */
  --tk-bg:        #f8fafc;   /* fondo general */
  --tk-bg2:       #ffffff;   /* cards */
  --tk-bg3:       #f1f5f9;   /* secciones */

  /* ── SURFACES ── */
  --tk-surface:   rgba(0,0,0,.02);
  --tk-surface2:  rgba(0,0,0,.04);
  --tk-surface3:  rgba(0,0,0,.06);

  /* ── BORDERS ── */
  --tk-border:    rgba(0,0,0,.06);
  --tk-border2:   rgba(0,0,0,.10);
  --tk-border3:   rgba(0,0,0,.16);

  /* ── TEXT ── */
  --tk-text:      #0f172a;
  --tk-text2:     #334155;
  --tk-muted:     #64748b;

  /* ── ACCENT (JUEGO / LOTERÍA) ── */
  --tk-accent:        var(--base-color, #02c062); /* dorado premio */
  --tk-accent-dim:    rgba(16, 219, 101, 0.12);
  --tk-accent-glow:   rgba(31, 245, 11, 0.25);

  /* ── SECONDARY ACCENTS ── */
  --tk-accent-2: #10b981; /* verde ganar */
  --tk-accent-3: #ef4444; /* riesgo/pérdida */
  --tk-accent-4: #3b82f6; /* acción */

  /* ── RADIOS ── */
  --tk-r:    12px;
  --tk-r-lg: 18px;
  --tk-r-sm: 8px;
  --tk-r-xs: 6px;

  /* ── SOMBRAS ── */
  --tk-shadow:    0 4px 24px rgba(0,0,0,.08);
  --tk-shadow-md: 0 8px 36px rgba(0,0,0,.12);
  --tk-shadow-sm: 0 2px 10px rgba(0,0,0,.06);

  /* ── TRANSICIÓN ── */
  --tk-ease: cubic-bezier(.4,0,.2,1);
  --tk-trans: all .25s var(--tk-ease);

  /* ── TIPOGRAFÍA ── */
  --tk-font: 'Exo 2', 'Inter', 'Roboto', sans-serif;

  --tk-gap: 20px;
}

/* ── 2. Global Reset ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--tk-font);
  background: var(--tk-bg);
  color: var(--tk-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}
a { transition: color .2s var(--tk-ease); }
img { display: block; max-width: 100%; }

/* ── 3. Tipografía — jerarquía clara ──────────────────────── */
h1, h2, h3, h4, h5, h6 { color: var(--tk-text); font-weight: 700; line-height: 1.3; margin-bottom: .5rem; }
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -.6px; }
h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); letter-spacing: -.4px; }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.35rem); letter-spacing: -.3px; }
h4 { font-size: 1.05rem; }
h5 { font-size: .95rem; }
h6 { font-size: .85rem; }
p  { color: var(--tk-text2); line-height: 1.7; }

.text--base   { color: var(--tk-accent) !important; }
.text--muted  { color: var(--tk-muted) !important; }
.text--white  { color: var(--tk-text) !important; }
.section-title { font-weight: 700; letter-spacing: -.4px; color: var(--tk-text); }
.section-sub   { font-size: .9rem; color: var(--tk-muted); margin-top: 4px; }

/* ── 4. Espaciado ─────────────────────────────────────────── */
.pt-60  { padding-top:  60px !important; }
.pb-80  { padding-bottom: 80px !important; }
.pb-100 { padding-bottom: 100px !important; }

/* ── 5. Card Base — sistema unificado ─────────────────────── */
.tk-card,
.dash-card,
.account-wrapper,
.lottery-card,
.scratch-card {
  background: var(--tk-bg2);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-r-lg);
  transition: var(--tk-trans);
}
/* Hover universal: elevación sutil */
.tk-card:hover,
.dash-card:hover { border-color: var(--tk-border3); box-shadow: var(--tk-shadow-md); }

/* ── 6. Buttons ───────────────────────────────────────────── */
.btn {
  font-weight: 600;
  letter-spacing: .2px;
  border-radius: var(--tk-r-sm);
  transition: var(--tk-trans);
  font-size: .875rem;
}
.btn--base {
  background: var(--tk-accent) !important;
  border-color: var(--tk-accent) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 2px 12px var(--tk-accent-glow);
}
.btn--base:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 20px var(--tk-accent-glow);
  transform: translateY(-1px);
  color: #0f1117 !important;
}
.btn-outline--base {
  border-color: var(--tk-accent) !important;
  color: var(--tk-accent) !important;
  background: transparent;
}
.btn-outline--base:hover {
  background: var(--tk-accent) !important;
  color: #0f1117 !important;
  box-shadow: 0 2px 14px var(--tk-accent-glow);
  transform: translateY(-1px);
}
.btn--capsule { border-radius: 50px !important; }
.btn--danger  { background: #e53e3e !important; border-color: #e53e3e !important; color: #fff !important; }
.btn--danger:hover { background: #c53030 !important; transform: translateY(-1px); }
.btn--sm { padding: 6px 14px; font-size: .8rem; }

/* ── 7. Forms ─────────────────────────────────────────────── */
.form--control,
.form-control,
select.form--control,
textarea.form--control {
  background: var(--tk-surface) !important;
  border: 1px solid var(--tk-border2) !important;
  border-radius: var(--tk-r-sm) !important;
  color: var(--tk-text) !important;
  padding: 10px 14px;
  font-size: .875rem;
  transition: border-color .2s var(--tk-ease), box-shadow .2s var(--tk-ease);
}
.form--control:focus,
.form-control:focus {
  background: var(--tk-surface2) !important;
  border-color: var(--tk-accent) !important;
  box-shadow: 0 0 0 3px var(--tk-accent-dim) !important;
  color: var(--tk-text) !important;
  outline: none;
}
.form--control::placeholder,
.form-control::placeholder { color: var(--tk-muted); }

.custom--field {
  position: relative;
}
.custom--field i {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tk-muted);
  font-size: 16px;
  pointer-events: none;
}
.custom--field .form--control { padding-right: 40px; }

.input-group-text {
  background: var(--tk-surface2) !important;
  border-color: var(--tk-border2) !important;
  color: var(--tk-muted) !important;
  font-size: .875rem;
}
label {
  color: var(--tk-text2);
  font-size: .8125rem;
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
}
label.required::after { content: ' *'; color: #f87171; }
.form-check-input {
  background-color: var(--tk-surface2) !important;
  border-color: var(--tk-border3) !important;
}
.form-check-input:checked {
  background-color: var(--tk-accent) !important;
  border-color: var(--tk-accent) !important;
}
.form-check-label { color: var(--tk-text2); font-size: .875rem; }

/* ── 8. Auth Forms (Login / Register) ─────────────────────── */
.account-wrapper {
  padding: 36px 40px;
  max-width: 520px;
  margin: 0 auto;
  background: var(--tk-bg2);
  border: 1px solid var(--tk-border2);
  border-radius: var(--tk-r-lg);
  box-shadow: var(--tk-shadow-md);
}
@media (max-width: 575px) {
  .account-wrapper { padding: 28px 20px; }
}

.account-thumb-area { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--tk-border); }
.account-thumb-area .title { font-size: 1.3rem; font-weight: 700; color: var(--tk-text); margin: 0; }
.account-thumb-area .title small { font-size: .8rem; color: var(--tk-muted); font-weight: 400; display: block; margin-top: 4px; }

.account-form .form-group { margin-bottom: 18px; }

.account-form .btn--base { padding: 12px; font-size: .9rem; }

/* Decorative balls on auth pages — suavizados */
.ball-1, .ball-2, .ball-3 {
  position: absolute; pointer-events: none; opacity: .12;
  filter: blur(2px);
}
.ball-1 { top: 5%; left: 2%; }
.ball-2 { top: 40%; right: 2%; }
.ball-3 { bottom: 5%; left: 30%; }

/* ── 9. Tables ────────────────────────────────────────────── */
.custom--table {
  color: var(--tk-text);
  border-radius: var(--tk-r);
  overflow: hidden;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.custom--table thead th {
  background: var(--tk-surface2);
  border-bottom: 1px solid var(--tk-border2);
  color: var(--tk-muted);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  padding: 12px 18px;
  white-space: nowrap;
}
.custom--table tbody td {
  border-bottom: 1px solid var(--tk-border);
  padding: 14px 18px;
  vertical-align: middle;
  font-size: .875rem;
  color: var(--tk-text);
}
.custom--table tbody tr:last-child td { border-bottom: none; }
.custom--table tbody tr:hover { background: var(--tk-surface); }

/* ── 10. Badges ───────────────────────────────────────────── */
.badge { font-weight: 600; letter-spacing: .2px; border-radius: var(--tk-r-xs); padding: 4px 10px; font-size: .7rem; }
.bg--success { background: rgba(16,185,129,.12) !important; color: #6ee7b7 !important; border: 1px solid rgba(16,185,129,.22); }
.bg--danger  { background: rgba(239,68,68,.12)  !important; color: #fca5a5 !important; border: 1px solid rgba(239,68,68,.22); }
.bg--warning { background: rgba(245,158,11,.12) !important; color: #fde68a !important; border: 1px solid rgba(245,158,11,.22); }
.bg--primary { background: rgba(99,102,241,.12) !important; color: #a5b4fc !important; border: 1px solid rgba(99,102,241,.22); }
.bg--base    { background: var(--tk-accent-dim) !important; color: var(--tk-accent) !important; border: 1px solid var(--tk-accent-glow); }

/* ── 11. Alerts ───────────────────────────────────────────── */
.alert { border-radius: var(--tk-r) !important; font-size: .875rem; }
.alert-danger  { background: rgba(239,68,68,.08)  !important; border-color: rgba(239,68,68,.22) !important;  color: #fca5a5 !important; }
.alert-warning { background: rgba(245,158,11,.08) !important; border-color: rgba(245,158,11,.22) !important; color: #fde68a !important; }
.alert-success { background: rgba(16,185,129,.08) !important; border-color: rgba(16,185,129,.22) !important; color: #6ee7b7 !important; }
.alert-link { color: inherit !important; text-decoration: underline !important; }

/* ── 12. Progress ─────────────────────────────────────────── */
.progress { background: var(--tk-surface2); border-radius: 50px; overflow: hidden; height: 6px; }
.progress-bar { border-radius: 50px; transition: width .6s var(--tk-ease); }
.lottery--progress { height: 5px; }

/* ── 13. Pagination ───────────────────────────────────────── */
.pagination { gap: 4px; }
.pagination .page-item .page-link {
  background: var(--tk-surface2);
  border-color: var(--tk-border2);
  color: var(--tk-text2);
  border-radius: var(--tk-r-sm) !important;
  padding: 7px 12px;
  font-size: .8125rem;
  transition: var(--tk-trans);
}
.pagination .page-item.active .page-link,
.pagination .page-item .page-link:hover {
  background: var(--tk-accent);
  border-color: var(--tk-accent);
  color: #0f1117;
  box-shadow: 0 2px 10px var(--tk-accent-glow);
}

/* ── 14. Header / Nav ─────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 999;
  background: rgba(15,17,23,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--tk-border);
}
.nav-item a,
.navbar-nav .nav-link {
  color: var(--tk-text2) !important;
  font-size: .875rem;
  transition: color .2s var(--tk-ease);
}
.nav-item a:hover,
.navbar-nav .nav-link:hover { color: var(--tk-text) !important; }

.nav-icon-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--tk-surface2);
  border: 1px solid var(--tk-border2);
  color: var(--tk-text2) !important;
  border-radius: 50px;
  padding: 7px 16px;
  font-size: .8125rem;
  cursor: pointer;
  transition: var(--tk-trans);
  text-decoration: none !important;
  white-space: nowrap;
  line-height: 1;
}
.nav-icon-btn:hover {
  background: var(--tk-accent-dim);
  border-color: rgba(94,234,212,.3);
  color: var(--tk-accent) !important;
}
.nav-icon-btn::after { display: none; }
.lang-code-label { font-size: .6875rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }

.lang-dropdown {
  min-width: 150px;
  border-radius: var(--tk-r);
  z-index: 9999;
  border: 1px solid var(--tk-border2) !important;
  background: var(--tk-bg2) !important;
  overflow: hidden;
  box-shadow: var(--tk-shadow-md);
}
.lang-dropdown .dropdown-item {
  font-size: .8125rem; padding: 10px 16px;
  display: flex; align-items: center; gap: 8px;
  color: var(--tk-text2);
  transition: background .15s;
}
.lang-dropdown .dropdown-item:hover { background: var(--tk-surface2); color: var(--tk-text); }
.lang-dropdown .dropdown-item.active { background: var(--tk-accent-dim); color: var(--tk-accent); }

.nav-badge {
  position: absolute; top: 0; right: 0;
  background: #e53e3e; color: #fff;
  font-size: .5625rem; font-weight: 700;
  border-radius: 50px; padding: 2px 5px; line-height: 1.3;
  transform: translate(35%,-35%); pointer-events: none;
}
.nav-balance-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--tk-accent-dim);
  border: 1px solid rgba(94,234,212,.25);
  color: var(--tk-accent) !important;
  border-radius: 50px; padding: 7px 16px;
  font-size: .8125rem; font-weight: 700; line-height: 1;
}

/* ── 15. Winners Ticker ───────────────────────────────────── */
.winners-ticker-wrap {
  display: flex; align-items: center;
  background: rgba(15,17,23,.97);
  border-bottom: 1px solid var(--tk-border);
  overflow: hidden; height: 34px;
  position: sticky; top: 60px; z-index: 89;
}
.winners-ticker-label {
  display: flex; align-items: center; gap: 6px;
  background: var(--tk-accent); color: #0f1117;
  padding: 0 18px; height: 100%;
  font-weight: 700; font-size: .6875rem;
  white-space: nowrap; flex-shrink: 0;
  letter-spacing: .6px; text-transform: uppercase;
}
.winners-ticker-track { flex: 1; overflow: hidden; height: 100%; display: flex; align-items: center; }
.winners-ticker-inner {
  display: flex; align-items: center; white-space: nowrap;
  animation: tickerScroll 45s linear infinite;
}
.winners-ticker-inner:hover { animation-play-state: paused; }
.winners-ticker-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 24px; font-size: .75rem; color: var(--tk-text2);
  border-right: 1px solid var(--tk-border);
  cursor: default; transition: background .2s;
}
.winners-ticker-item:hover { background: var(--tk-surface); }
.winners-ticker-item .ticker-icon { font-size: .8125rem; }
.winners-ticker-item .ticker-time { font-size: .6875rem; opacity: .45; margin-left: 2px; }
.winners-ticker-loading { padding: 0 20px; color: var(--tk-muted); font-size: .75rem; }
@keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── 16. Breadcrumb ───────────────────────────────────────── */
.inner-hero {
  position: relative; padding: 48px 0;
  background-size: cover; background-position: center; overflow: hidden;
}
.inner-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(15,17,23,.85) 0%, rgba(94,234,212,.04) 100%);
}
.inner-hero .container { position: relative; z-index: 1; }
.page-title {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 800; letter-spacing: -.5px;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
.page-title::after {
  content: '';
  display: block; width: 36px; height: 3px;
  background: var(--tk-accent);
  border-radius: 2px; margin: 10px auto 0;
}

/* ── 17. Lottery Cards ────────────────────────────────────── */
.lottery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--tk-gap);
}
.lottery-card {
  background: var(--tk-bg2);
  border: 1px solid var(--tk-border2);
  border-radius: var(--tk-r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: var(--tk-trans);
}
.lottery-card:hover {
  border-color: rgba(94,234,212,.25);
  box-shadow: var(--tk-shadow), 0 0 24px rgba(94,234,212,.08);
  transform: translateY(-2px);
}
.lottery-card__thumb {
  position: relative; aspect-ratio: 16/7; overflow: hidden;
  background: var(--tk-bg3);
}
.lottery-card__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--tk-ease);
}
.lottery-card:hover .lottery-card__thumb img { transform: scale(1.04); }
.lottery-card__badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--tk-accent); color: #0f1117;
  font-size: .625rem; font-weight: 700;
  padding: 4px 10px; border-radius: 50px;
  letter-spacing: .5px; text-transform: uppercase;
}
.lottery-card__body {
  padding: 18px 20px; flex: 1;
  display: flex; flex-direction: column; gap: 12px;
}
.lottery-card__name {
  font-size: .9375rem; font-weight: 700;
  color: var(--tk-text); margin: 0; line-height: 1.35;
}
.lottery-card__meta { display: flex; gap: 20px; flex-wrap: wrap; }
.lottery-card__meta-item { display: flex; flex-direction: column; gap: 2px; }
.lottery-card__meta-label {
  font-size: .625rem; color: var(--tk-muted);
  text-transform: uppercase; letter-spacing: .6px;
}
.lottery-card__meta-value { font-size: .8125rem; font-weight: 600; color: var(--tk-text); }
.lottery-card__meta-value.hl { color: var(--tk-accent); }
.lottery-card__progress-wrap { display: flex; flex-direction: column; gap: 6px; }
.lottery-card__progress-top {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .6875rem; color: var(--tk-muted);
}
.lottery-card__progress-pct { font-weight: 700; color: var(--tk-text2); }
.lottery-card__footer {
  padding: 14px 20px;
  border-top: 1px solid var(--tk-border);
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
}

/* ── 18. Scratch Cards ────────────────────────────────────── */
.scratch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--tk-gap);
}
.scratch-card {
  position: relative; border-radius: var(--tk-r-lg); overflow: hidden;
  background: linear-gradient(145deg, #1a1730 0%, #221540 50%, #1a1730 100%);
  border: 1px solid rgba(139,92,246,.22);
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: var(--tk-trans);
}
.scratch-card:hover {
  border-color: rgba(167,139,250,.4);
  box-shadow: var(--tk-shadow), 0 0 32px rgba(139,92,246,.16);
  transform: translateY(-3px);
}
.scratch-card__shine {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 50%, rgba(255,255,255,.02) 100%);
}
/* Image banner at top */
.scratch-card__img {
  position: relative; width: 100%; aspect-ratio: 16/7; overflow: hidden;
  background: linear-gradient(135deg, #1e1040 0%, #2d1b69 100%);
  flex-shrink: 0;
}
.scratch-card__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
  display: block;
}
.scratch-card:hover .scratch-card__img img { transform: scale(1.04); }
.scratch-card__img-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
}
.scratch-card__img-placeholder .sc-emoji-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; opacity: .55;
}
.scratch-card__img-placeholder .sc-emoji-grid span {
  font-size: .9rem; text-align: center; padding: 3px;
}
/* Price badge overlaid on image */
.scratch-card__price-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: rgba(124,58,237,.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(167,139,250,.4);
  border-radius: 50px; padding: 4px 12px;
  font-size: .75rem; font-weight: 800; color: #fff; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
/* Won overlay on image */
.scratch-card__won-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
}
.scratch-card__won-badge {
  background: linear-gradient(90deg,#7b1d1d,#c0392b);
  color:#fff; font-size:.8rem; font-weight:700;
  padding: 8px 20px; border-radius: 50px; letter-spacing:.05em;
  animation: won-pulse 2s infinite;
}
@keyframes won-pulse { 0%,100%{opacity:1} 50%{opacity:.75} }
/* Body */
.scratch-card__body {
  padding: 14px 18px 10px; flex: 1; display: flex; flex-direction: column; gap: 6px;
}
.scratch-card__title {
  font-size: .9375rem; font-weight: 800; color: #e0d9ff;
  line-height: 1.3; margin: 0;
}
.scratch-card__desc {
  font-size: .75rem; color: rgba(224,217,255,.5);
  line-height: 1.5; margin: 0;
}
.scratch-card__footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 18px 16px; gap: 8px;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: auto;
}
.scratch-card__free { font-size: .6875rem; color: rgba(224,217,255,.6); display: flex; align-items: center; gap: 4px; }
.scratch-card__free strong { color: #a78bfa; }
.scratch-card__play-btn {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff !important; border: none; border-radius: 50px;
  padding: 8px 20px; font-size: .8125rem; font-weight: 700;
  text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
  transition: var(--tk-trans);
  box-shadow: 0 2px 12px rgba(124,58,237,.3);
}
.scratch-card__play-btn:hover {
  box-shadow: 0 4px 20px rgba(124,58,237,.45);
  transform: translateY(-1px);
  color: #fff !important;
}

/* ── 19. Dashboard Stat Cards ─────────────────────────────── */
.dash-stat-card {
  border-radius: var(--tk-r-lg); padding: 22px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative; overflow: hidden;
  transition: var(--tk-trans); color: #fff;
}
.dash-stat-card::after {
  content: ''; position: absolute; top: -24px; right: -24px;
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,.06); pointer-events: none;
}
.dash-stat-card:hover { transform: translateY(-2px); box-shadow: var(--tk-shadow-md); }
.dash-stat-card--balance { background: linear-gradient(135deg, #0e7490, #0891b2); }
.dash-stat-card--wins    { background: linear-gradient(135deg, #92400e, #b45309); }
.dash-stat-card--scratch { background: linear-gradient(135deg, #065f46, #047857); }
.dash-stat-card--deposit { background: linear-gradient(135deg, #1e3a8a, #1d4ed8); }
.dash-stat-card__icon { font-size: 26px; opacity: .22; position: absolute; top: 18px; right: 18px; }
.dash-stat-card__body span { font-size: .6875rem; opacity: .75; text-transform: uppercase; letter-spacing: .6px; }
.dash-stat-card__body h3 { font-size: 1.5rem; font-weight: 800; margin: 6px 0 2px; letter-spacing: -.4px; color: #fff; }
.dash-stat-sub { font-size: .6875rem; opacity: .6; }
.dash-stat-card__link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .75rem; color: rgba(255,255,255,.65) !important;
  text-decoration: none; margin-top: 8px; transition: color .15s;
}
.dash-stat-card__link:hover { color: #fff !important; }

/* ── 20. Dash Cards ───────────────────────────────────────── */
.dash-card {
  background: var(--tk-bg2);
  border: 1px solid var(--tk-border2);
  border-radius: var(--tk-r-lg);
  overflow: hidden;
  transition: var(--tk-trans);
}
.dash-card:hover { border-color: var(--tk-border3); }
.dash-card__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--tk-border);
}
.dash-card__head h5 {
  font-size: .875rem; font-weight: 700; margin: 0;
  color: var(--tk-text); letter-spacing: .1px;
}
.dash-card__refresh {
  cursor: pointer; color: var(--tk-muted);
  font-size: 1rem; transition: transform .35s var(--tk-ease), color .2s;
  border: none; background: none; padding: 4px;
  border-radius: 50%;
}
.dash-card__refresh:hover { color: var(--tk-accent); transform: rotate(180deg); }
.dash-card__body { padding: 18px 20px; }

/* ── 21. Winner Rows ──────────────────────────────────────── */
.winner-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--tk-border);
  animation: fadeUp .3s var(--tk-ease) both;
}
.winner-row:last-child { border-bottom: none; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.winner-row__icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.winner-row__info { flex: 1; font-size: .8125rem; line-height: 1.4; color: var(--tk-text2); }
.winner-row__info strong { color: var(--tk-text); font-weight: 600; }
.winner-row__time { font-size: .6875rem; color: var(--tk-muted); white-space: nowrap; }

/* ── 22. Quick Actions ────────────────────────────────────── */
.quick-action-btn {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; padding: 18px 8px;
  border-radius: var(--tk-r); text-decoration: none;
  font-size: .75rem; font-weight: 600;
  transition: var(--tk-trans);
  border: 1px solid var(--tk-border2);
  background: var(--tk-surface2);
  color: var(--tk-text2) !important;
}
.quick-action-btn:hover {
  transform: translateY(-2px);
  border-color: var(--tk-border3);
  background: var(--tk-surface3);
  color: var(--tk-text) !important;
  box-shadow: var(--tk-shadow-sm);
}
.quick-action-btn i { font-size: 1.375rem; }
.quick-action-btn--lotto   i { color: #a78bfa; }
.quick-action-btn--scratch i { color: #6ee7b7; }
.quick-action-btn--deposit i { color: #93c5fd; }
.quick-action-btn--withdraw i { color: #fdba74; }

/* ── 23. Scratch Stats ────────────────────────────────────── */
.scratch-stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--tk-border);
  font-size: .875rem; color: var(--tk-text2);
}
.scratch-stat-row:last-of-type { border-bottom: none; }
.scratch-stat-row > span:first-child { color: var(--tk-muted); }
.scratch-stat-row > span:last-child { font-weight: 600; color: var(--tk-text); }

/* ── 24. Footer ───────────────────────────────────────────── */
.footer {
  background: var(--tk-bg2);
  border-top: 1px solid var(--tk-border);
  padding: 28px 0;
}
.footer-logo img { max-height: 36px; filter: brightness(0) invert(1); opacity: .6; }
.inline-menu { list-style: none; padding: 0; margin: 0; gap: 2px; }
.inline-menu li a {
  display: inline-block; padding: 6px 12px; border-radius: 50px;
  font-size: .8125rem; color: var(--tk-muted);
  text-decoration: none; transition: var(--tk-trans);
}
.inline-menu li a:hover { background: var(--tk-surface2); color: var(--tk-text); }
.footer-content__left-text { font-size: .8125rem; color: var(--tk-muted); }
.footer-content__left-text a { color: var(--tk-accent) !important; text-decoration: none; }
.inline-social-links { list-style: none; padding: 0; margin: 0; gap: 8px; }
.inline-social-links li a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--tk-r-sm);
  background: var(--tk-surface2); border: 1px solid var(--tk-border2);
  color: var(--tk-muted); font-size: 1rem;
  text-decoration: none; transition: var(--tk-trans);
}
.inline-social-links li a:hover {
  background: var(--tk-accent-dim);
  border-color: rgba(94,234,212,.3);
  color: var(--tk-accent);
}

/* ── 25. Preloader ────────────────────────────────────────── */
.preloader {
  position: fixed; inset: 0; background: var(--tk-bg);
  z-index: 99999; display: flex; align-items: center; justify-content: center;
}
.preloader-container { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.animated-preloader {
  display: block; width: 44px; height: 44px;
  border: 3px solid var(--tk-surface3);
  border-top-color: var(--tk-accent);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 26. Scroll-to-top ────────────────────────────────────── */
.scroll-to-top {
  position: fixed; bottom: 24px; right: 24px;
  width: 40px; height: 40px;
  background: var(--tk-accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 9999;
  box-shadow: 0 2px 16px var(--tk-accent-glow);
  transition: var(--tk-trans);
}
.scroll-to-top:hover { transform: translateY(-2px); box-shadow: 0 6px 24px var(--tk-accent-glow); }
.scroll-to-top .scroll-icon { color: #0f1117; font-size: 1rem; display: flex; }

/* ── 27. Modal ────────────────────────────────────────────── */
.modal-content {
  background: var(--tk-bg2) !important;
  border: 1px solid var(--tk-border2) !important;
  border-radius: var(--tk-r-lg) !important;
  color: var(--tk-text) !important;
  box-shadow: var(--tk-shadow-md);
}
.modal-header { border-bottom: 1px solid var(--tk-border) !important; padding: 18px 22px; }
.modal-footer { border-top:   1px solid var(--tk-border) !important; padding: 14px 22px; }
.modal-body { padding: 20px 22px; }
.modal-title { font-size: .9375rem; font-weight: 700; }
.modal .btn-close { filter: invert(1); opacity: .5; }
.modal .btn-close:hover { opacity: .85; }

/* ── 28. Input popup (password strength) ─────────────────── */
.input-popup {
  position: absolute; z-index: 10; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--tk-bg2); border: 1px solid var(--tk-border2);
  border-radius: var(--tk-r-sm); padding: 12px 14px;
  box-shadow: var(--tk-shadow-md);
}
.input-popup p { font-size: .75rem; margin: 3px 0; color: var(--tk-muted); }
.input-popup p.error { color: #f87171; }
.input-popup p.error.valid { color: #6ee7b7; }

/* ── 29. Copy Toast ───────────────────────────────────────── */
.copytext { cursor: pointer; transition: opacity .15s; }
.copytext:hover { opacity: .75; }
.copytext.copied { position: relative; }
.copytext.copied::after {
  content: "✓ Copiado"; position: absolute; white-space: nowrap;
  top: -28px; right: 0; font-size: .6875rem; font-weight: 700;
  background: var(--tk-accent); color: #0f1117;
  padding: 3px 8px; border-radius: var(--tk-r-xs); pointer-events: none;
}

/* ── 30. Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--tk-bg2); }
::-webkit-scrollbar-thumb { background: var(--tk-border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--tk-accent); }

/* ── 31. Balance Card ─────────────────────────────────────── */
.balance-card {
  border-radius: var(--tk-r-lg); padding: 20px;
  background: linear-gradient(135deg, var(--tk-accent-dim), rgba(94,234,212,.02));
  border: 1px solid rgba(94,234,212,.2);
}
.balance-card .text--dark { color: var(--tk-text) !important; }
.base-color { color: var(--tk-accent) !important; }

/* ── 32. Table utilities ──────────────────────────────────── */
.table-game { display: flex; align-items: center; gap: 10px; }
.table-game img { width: 42px; height: 42px; object-fit: cover; border-radius: var(--tk-r-sm); }
.table-game .name { margin: 0; font-size: .875rem; font-weight: 600; color: var(--tk-text); }

/* ── 33. Error states ─────────────────────────────────────── */
.error { color: #fca5a5; font-size: .75rem; margin-top: 4px; }
.input-group label.error { top: 100%; position: absolute; }

/* ── 34. Responsive ───────────────────────────────────────── */
@media (max-width: 991px) {
  .lottery-grid { grid-template-columns: repeat(2, 1fr); }
  .scratch-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .nav-balance-chip { display: none !important; }
  .lottery-grid { grid-template-columns: 1fr; }
  .scratch-grid  { grid-template-columns: 1fr; }
  .scratch-card__img { aspect-ratio: 16/8; }
  .dash-card__body { padding: 14px 16px; }
  .dash-card__head { padding: 14px 16px; }
}
@media (max-width: 575px) {
  .winners-ticker-label span { display: none; }
  .account-wrapper { padding: 24px 18px; border-radius: var(--tk-r); }
  .lottery-card__meta { gap: 12px; }
}
@media (min-width: 992px) {
  .lottery-grid { grid-template-columns: repeat(3, 1fr); }
  .scratch-grid  { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1400px) {
  .scratch-grid  { grid-template-columns: repeat(4, 1fr); }
}

/* ── 35. Misc ─────────────────────────────────────────────── */
.show-filter { display: none; }
@media (max-width: 767px) {
  .responsive-filter-card { display: none; }
  .show-filter { display: block; }
}


/* AUTH MODERN */
.auth-modern {
  background: var(--tk-bg);
}

/* LEFT */
.auth-left {
    position: relative;
    /* Asegura que la imagen cubra todo el espacio sin deformarse */
    background-size: cover;
    /* Centra la imagen para que el recorte sea estético */
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

/* Opcional: Un overlay oscuro para que el texto resalte sobre la imagen */
.auth-left::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0); /* Ajusta la opacidad según necesites */
    z-index: 1;
}

.auth-left-content {
    position: relative;
    z-index: 2; /* Para que el texto quede encima del overlay */
    color: #ffffff;
    text-align: center;
}

.auth-left-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.auth-left-content p {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* RIGHT CARD */
.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 40px;
  background: var(--tk-bg2);
  border-radius: var(--tk-r-lg);
  border: 1px solid var(--tk-border2);
  box-shadow: var(--tk-shadow-md);
}

/* INPUT ICON */
.input-icon {
  position: relative;
}

.input-icon i {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--tk-muted);
}

/* Hover UX */
.auth-card:hover {
  border-color: var(--tk-accent);
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .auth-left {
    display: none !important;
  }
}


.tk-app { display:flex; min-height:100vh; background:#f5f7fb; }

/* SIDEBAR */
.main-wrapper{
    margin-left:260px;
    padding:20px;
}
/* SIDEBAR */
.tk-sidebar{
    background-color: #EADB00;
    width: 265px;
    -webkit-transition: left 0.3s ease;
    transition: left 0.3s ease;
    border-right: 1px solid #CBBF06;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    color:#252E4D;
    padding:20px 15px;
    overflow-y:auto;
    z-index: 99;
}

/* LOGO */
.tk-sidebar__logo{
    text-align:center;
    margin-bottom:20px;
}
.tk-sidebar__logo img{
    max-width:140px;
}

/* MENU */
.tk-menu{
    list-style:none;
    padding:0;
}

.tk-menu li{
    margin-bottom:5px;
}

.tk-menu a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    font-size: 0.875rem;
    font-weight: 500;
    color:#07663a;
    border-radius:8px;
    text-decoration:none;
    transition:.2s;
}

.tk-menu a:hover{
    background:#07663a;
    color:#EADB00;
}

/* ACTIVE */
.tk-menu a.active{
    background:#07663a;
    color:#EADB00;
}

/* SUBMENU */
.tk-menu .has-sub ul{
    display:none;
    padding-left:15px;
}

.tk-menu .has-sub.open ul{
    display:block;
}

/* ARROW */
.tk-menu .arrow{
    margin-left:auto;
    transition:.2s;
}

.tk-menu .has-sub.open .arrow{
    transform:rotate(180deg);
}

.tk-menu a span{
    flex:1;
}
/************************************/
/* MAIN */
.tk-main { flex:1; }

/* HEADER */
.tk-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 25px;
    position: fixed;
  
    top: 0;
    width: 100%;
    height: 55px;
    left: 0;
    z-index: 97;
    background-color: #07663a;
    -webkit-box-shadow: 0 10px 30px 0 rgba(121, 121, 162, 0.1);
    box-shadow: 0 10px 30px 0 rgba(7, 102, 58, 0.29);
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    border-bottom: 1px solid #EADB00C4;
}

/* RIGHT SIDE */
.tk-header__right{
    display:flex;
    align-items:center;
    gap:12px;
}

/* ICON BUTTON */
.tk-icon-btn{
    display:flex;
    align-items:center;
    gap:6px;
    background:#f5f7fb;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:6px 12px;
    cursor:pointer;
    font-size:14px;
    transition:.2s;
}

.tk-icon-btn:hover{
    background:#eef2ff;
    transform:translateY(-1px);
}

/* BADGE */
.tk-badge{
    position:absolute;
    top:-4px;
    right:-4px;
    background:#ef4444;
    color:#fff;
    font-size:10px;
    padding:2px 6px;
    border-radius:20px;
}

/* BALANCE */
.tk-balance{
    display:flex;
    align-items:center;
    gap:6px;
    background:#ecfdf5;
    color:#059669;
    padding:6px 12px;
    border-radius:10px;
    font-weight:600;
}

/* USER */
.tk-user-btn{
    background:none;
    border:none;
}

.tk-avatar{
    width:36px;
    height:36px;
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-weight:bold;
}

/* DROPDOWN */
.tk-dropdown-menu{
    border-radius:10px;
    border:1px solid #eee;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.tk-dropdown-menu .dropdown-item{
    padding:10px 15px;
    font-size:14px;
}

.tk-dropdown-menu .dropdown-item:hover{
    background:#f3f4f6;
}

.tk-dropdown-menu .dropdown-item.active{
    background:#6366f1;
    color:#fff;
}

/* CONTENT */
.tk-content { padding:25px; }

/* STATS */
.tk-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}
.tk-stat {
    background:#fff;
    padding:20px;
    border-radius:12px;
}

/* CARD */
.tk-card {
    background:#fff;
    padding:20px;
    border-radius:12px;
}
/* ═══════════════════════════════════════════════════════
   TINKASO BRAND REFRESH — palette #EADB00 / #07663a
   ═══════════════════════════════════════════════════════ */

/* ── Brand tokens ──────────────────────────────────── */
:root {
    --tk-brand-y:     #EADB00;
    --tk-brand-y2:    #fff9a0;
    --tk-brand-g:     #07663a;
    --tk-brand-g2:    #059c4e;
    --tk-brand-dark:  #0d1a0f;
}

/* ── Sidebar: make it pop ───────────────────────────── */
.tk-sidebar {
    background: linear-gradient(175deg, #EADB00 0%, #d4c700 100%);
    border-right: 2px solid #c9bc00;
    box-shadow: 4px 0 24px rgba(7,102,58,.15);
}

.tk-sidebar__logo { padding-bottom: 12px; border-bottom: 1px solid rgba(7,102,58,.15); margin-bottom: 22px; }

.tk-menu a {
    color: #07663a;
    font-weight: 500;
    border-radius: 10px;
    padding: 11px 14px;
}
.tk-menu a i { font-size: 1.1rem; }
.tk-menu a:hover, .tk-menu a.active {
    background: #07663a;
    color: #EADB00;
    box-shadow: 0 4px 14px rgba(7,102,58,.25);
}
.tk-menu .has-sub ul { padding-left: 18px; }
.tk-menu .has-sub ul a {
    padding: 9px 12px;
    font-size: .82rem;
    color: #1a4a28;
    background: rgba(7,102,58,.06);
    margin-bottom: 3px;
}
.tk-menu .has-sub ul a:hover, .tk-menu .has-sub ul a.active {
    background: #07663a;
    color: #EADB00;
}

/* ── Header ─────────────────────────────────────────── */
.tk-header {
    background: linear-gradient(90deg, #07663a 0%, #0a8040 100%);
    color-mix(in srgb, var(--tk-user-panel-4), transparent 88%);
    box-shadow: 0 4px 24px rgba(7,102,58,.3);
}
.tk-header__left h5 { color: #EADB00; font-weight: 700; font-size: 1rem; }

.tk-icon-btn { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; }
.tk-icon-btn:hover { background: rgba(234,219,0,.2); border-color: var(--tk-brand-y); color: var(--tk-brand-y); }

.tk-balance { background: var(--tk-user-panel-2); color: var(--tk-user-panel-4); border: 1px solid rgba(234,219,0,.3); font-weight: 700; }

.tk-avatar { background: linear-gradient(135deg, #EADB00, #c9bc00); color: #07663a; font-weight: 800; }

.tk-dropdown-menu { border: 1px solid rgba(7,102,58,.15); box-shadow: 0 12px 40px rgba(7,102,58,.15); }
.tk-dropdown-menu .dropdown-item.active { background: #07663a; }
.tk-dropdown-menu .dropdown-item:hover { background: rgba(7,102,58,.07); color: #07663a; }

/* ── Main content area ───────────────────────────────── */
.tk-main { background: #f5faf7; }
.tk-content { padding: 30px; padding-top: 80px; }

/* ── Dashboard stat cards (updated palette) ──────────── */
.dash-stat-card--balance  { background: linear-gradient(135deg, #07663a, #0a8040); }
.dash-stat-card--wins     { background: linear-gradient(135deg, #EADB00, #c9bc00); color: #07663a !important; }
.dash-stat-card--wins .dash-stat-card__body span,
.dash-stat-card--wins .dash-stat-card__link { color: rgba(7,102,58,.75) !important; }
.dash-stat-card--wins .dash-stat-card__body h3 { color: #07663a !important; }
.dash-stat-card--scratch  { background: linear-gradient(135deg, #059c4e, #07663a); }
.dash-stat-card--deposit  { background: linear-gradient(135deg, #0a5c96, #063c66); }
.dash-stat-card--tokens   { background: linear-gradient(135deg, #d4c700, #EADB00); color: #07663a !important; }
.dash-stat-card--tokens .dash-stat-card__body span,
.dash-stat-card--tokens .dash-stat-card__link,
.dash-stat-card--tokens .dash-stat-sub { color: rgba(7,102,58,.8) !important; }
.dash-stat-card--tokens .dash-stat-card__body h3 { color: #07663a !important; }

/* ── Quick action buttons ───────────────────────────── */
.quick-action-btn--lotto   { background: rgba(7,102,58,.08); color: #07663a; border-color: rgba(7,102,58,.2); }
.quick-action-btn--scratch { background: rgba(234,219,0,.15); color: #856b00; border-color: rgba(234,219,0,.4); }
.quick-action-btn--deposit { background: rgba(10,92,150,.08); color: #0a5c96; border-color: rgba(10,92,150,.2); }
.quick-action-btn--withdraw{ background: rgba(239,68,68,.07); color: #dc2626; border-color: rgba(239,68,68,.2); }

/* ── Cards ──────────────────────────────────────────── */
.dash-card { border: 1px solid rgba(7,102,58,.1); }
.dash-card__head { border-bottom: 1px solid rgba(7,102,58,.08); }
.dash-card__refresh:hover { color: #07663a; }
.dash-card__refresh.spinning i { animation: spin .6s linear; color: #07663a; }

.text--base { color: #07663a !important; }
.bg--base   { background-color: #07663a !important; }
.btn--base  { background: linear-gradient(135deg, #07663a, #0a8040) !important; border-color: #07663a !important; }
.btn--base:hover { background: linear-gradient(135deg, #0a8040, #07663a) !important; }
.progress-bar.bg--base { background: #07663a !important; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
    .tk-sidebar { transform: translateX(-100%); transition: transform .3s ease; z-index: 200; }
    .tk-sidebar.open { transform: translateX(0); }
    .tk-main { margin-left: 0 !important; }
    .tk-content { padding: 70px 16px 24px; }
}