/* ==========================================================
   TEMA PREMIUM CONTROLE DE APOSTAS - V1 VISUAL ONLY
   Objetivo: modernizar a apresentacao sem alterar funcionalidades.
   Nao altera IDs, eventos, Firebase, calculos, funcoes ou estrutura logica.
   ========================================================== */
:root {
    --ca-navy-950: #07111f;
    --ca-navy-900: #0f1c2e;
    --ca-navy-800: #132845;
    --ca-navy-700: #193b64;
    --ca-graphite: #1f1f1f;
    --ca-surface: rgba(248, 250, 252, .86);
    --ca-surface-strong: rgba(255, 255, 255, .94);
    --ca-surface-dark: rgba(15, 28, 46, .82);
    --ca-border: rgba(148, 163, 184, .28);
    --ca-border-strong: rgba(255, 255, 255, .55);
    --ca-text: #0b1220;
    --ca-muted: #64748b;
    --ca-blue: #2f6df6;
    --ca-cyan: #20d6d3;
    --ca-teal: #3fbf7f;
    --ca-green: #16a34a;
    --ca-rose: #e11d48;
    --ca-amber: #f59e0b;
    --ca-gold: #d4af37;
    --ca-shadow-soft: 0 18px 60px rgba(2, 6, 23, .18);
    --ca-shadow-card: 0 14px 34px rgba(2, 6, 23, .12), inset 0 1px 0 rgba(255,255,255,.60);
    --ca-radius-lg: 22px;
    --ca-radius-md: 16px;
    --ca-radius-sm: 12px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    color: var(--ca-text);
    letter-spacing: -.01em;
}

body.bg-app {
    background:
        radial-gradient(900px 580px at 8% -8%, rgba(63, 191, 127, .28), transparent 58%),
        radial-gradient(760px 520px at 86% 4%, rgba(47, 109, 246, .30), transparent 58%),
        radial-gradient(720px 480px at 110% 72%, rgba(212, 175, 55, .15), transparent 60%),
        linear-gradient(135deg, #07111f 0%, #0f1c2e 42%, #203a5f 72%, #b9c3d4 100%) !important;
    background-attachment: fixed !important;
    overflow-x: hidden;
}

body.bg-app::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .22;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 75%);
}


@media (prefers-reduced-motion: no-preference) {
    body.bg-app {
        animation: caAmbientShift 18s ease-in-out infinite alternate;
    }
    @keyframes caAmbientShift {
        0% { background-position: 0 0, 0 0, 0 0, center; }
        100% { background-position: 32px 22px, -26px 18px, 14px -20px, center; }
    }
}

.glass {
    background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(241,245,249,.72)) !important;
    border: 1px solid var(--ca-border-strong) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    box-shadow: var(--ca-shadow-card) !important;
}

.shadow-kpi {
    border-radius: var(--ca-radius-lg) !important;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease !important;
}

.shadow-kpi::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.42) 42%, transparent 62%);
    transform: translateX(-40%);
    transition: opacity .22s ease, transform .55s ease;
}

.shadow-kpi:hover {
    transform: translateY(-4px) perspective(900px) rotateX(.55deg) rotateY(-.55deg) !important;
    box-shadow: 0 22px 60px rgba(2, 6, 23, .18), inset 0 1px 0 rgba(255,255,255,.72) !important;
    border-color: rgba(63,191,127,.32) !important;
}

.shadow-kpi:hover::after {
    opacity: .55;
    transform: translateX(42%);
}

header.glass {
    background:
        linear-gradient(90deg, rgba(248,250,252,.92), rgba(226,232,240,.78) 44%, rgba(209,250,229,.38)) !important;
    border-bottom: 1px solid rgba(255,255,255,.70) !important;
    box-shadow: 0 16px 50px rgba(2,6,23,.18), inset 0 -1px 0 rgba(15,28,46,.08) !important;
}

header .max-w-7xl {
    min-height: 112px;
}

#appLogo {
    width: clamp(82px, 9vw, 128px) !important;
    height: clamp(82px, 9vw, 128px) !important;
    filter: drop-shadow(0 0 2px rgba(255,255,255,.9)) drop-shadow(0 14px 26px rgba(15,28,46,.24)) !important;
    transition: transform .24s ease, filter .24s ease;
}

#appLogo:hover {
    transform: translateY(-2px) scale(1.03) rotateZ(-1deg);
    filter: drop-shadow(0 0 6px rgba(63,191,127,.32)) drop-shadow(0 18px 30px rgba(15,28,46,.30)) !important;
}

.brand-title {
    font-family: "Montserrat", "Poppins", sans-serif !important;
    color: #0b1b3a !important;
    letter-spacing: -.045em !important;
    line-height: .98 !important;
    text-shadow: 0 10px 26px rgba(15, 28, 46, .20), 0 1px 0 rgba(255,255,255,.70) !important;
}

.icon-btn,
.menu-card {
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}

.icon-btn {
    background: rgba(255,255,255,.78) !important;
    border-color: rgba(15,28,46,.12) !important;
    box-shadow: 0 10px 24px rgba(2,6,23,.10), inset 0 1px 0 rgba(255,255,255,.8) !important;
}

.menu-card {
    background: rgba(248,250,252,.96) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 70px rgba(2,6,23,.22), inset 0 1px 0 rgba(255,255,255,.65) !important;
}

.tabs-scroll {
    display: inline-flex;
    max-width: 100%;
    padding: 7px !important;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(7,17,31,.36);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 45px rgba(2,6,23,.14);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.tab-btn {
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.78) !important;
    box-shadow: none !important;
    padding: .68rem 1.05rem !important;
}

.tab-btn:hover {
    color: #fff !important;
    background: rgba(255,255,255,.20) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 12px 30px rgba(2,6,23,.18) !important;
}

.tab-btn.active {
    color: #07111f !important;
    background: linear-gradient(135deg, #ffffff 0%, #dffdf1 52%, #a7f3d0 100%) !important;
    border-color: rgba(255,255,255,.82) !important;
    box-shadow: 0 16px 36px rgba(2,6,23,.22), inset 0 1px 0 #fff !important;
}

#tabBtnDicas:not(.active) {
    color: #ffe7a3 !important;
    background: rgba(212,175,55,.12) !important;
    border-color: rgba(212,175,55,.34) !important;
}

#loginScreen {
    background:
        radial-gradient(780px 520px at 50% 20%, rgba(63,191,127,.24), transparent 62%),
        radial-gradient(680px 460px at 15% 90%, rgba(47,109,246,.22), transparent 62%),
        linear-gradient(135deg, #07111f 0%, #0f1c2e 58%, #314764 100%) !important;
}

#loginScreen::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(circle at 50% 48%, #000 0%, transparent 76%);
}

#loginScreen .glass {
    border-radius: 30px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.92), rgba(226,232,240,.72)) !important;
    box-shadow: 0 34px 100px rgba(2,6,23,.40), inset 0 1px 0 rgba(255,255,255,.9) !important;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

#loginScreen .glass::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -100px;
    top: -120px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(63,191,127,.26), transparent 64%);
}

#loginScreen .glass::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    left: -120px;
    bottom: -120px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(47,109,246,.24), transparent 66%);
}

#loginScreen .glass > * {
    position: relative;
    z-index: 1;
}

#loginScreen img {
    width: 104px !important;
    height: 104px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 12px 28px rgba(15,28,46,.25)) !important;
}

#loginScreen h2 {
    font-family: "Montserrat", "Poppins", sans-serif !important;
    color: #152238 !important;
    letter-spacing: -.04em;
}

#loginEmail,
#loginSenha {
    min-height: 54px;
    border-radius: 16px !important;
    border: 1px solid rgba(148,163,184,.38) !important;
    background: rgba(255,255,255,.84) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 24px rgba(2,6,23,.06) !important;
}

#btnEntrar {
    min-height: 54px;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #2f6df6 0%, #18b6cf 48%, #3fbf7f 100%) !important;
    box-shadow: 0 18px 38px rgba(47,109,246,.28), inset 0 1px 0 rgba(255,255,255,.28) !important;
    letter-spacing: .02em;
}

#btnEntrar:hover {
    filter: brightness(1.04) saturate(1.08);
}

#btnEsqueciSenha {
    color: #195fbf !important;
}

section[id^="tab-"] > .bg-white\/90,
section[id^="tab-"] > .bg-emerald-50\/90,
section[id^="tab-"] > .bg-emerald-100\/90,
#tab-painel > .grid > div,
#tab-movs > div,
#tab-estat > div:not(#statDetail),
#betDetailsContainer {
    border-radius: var(--ca-radius-lg) !important;
}

#tab-painel > .grid > div:first-child,
#tab-painel > .grid > div:nth-child(2) {
    background: linear-gradient(145deg, rgba(240,253,244,.90), rgba(255,255,255,.78)) !important;
}

#tab-painel h3,
#tab-estat h3,
#tab-movs h2,
#tab-dicas h2,
#betDetailsContainer h3,
.bg-white\/90 h2,
.bg-white\/90 h3 {
    color: #0f1c2e !important;
    letter-spacing: -.025em;
}

#tab-dicas > div h2,
#tab-dicas > div h3 {
    color: inherit !important;
}

#tab-dicas > div:first-child {
    background:
        radial-gradient(520px 260px at 100% 0%, rgba(212,175,55,.22), transparent 62%),
        radial-gradient(520px 260px at 0% 100%, rgba(63,191,127,.16), transparent 60%),
        linear-gradient(135deg, #07111f 0%, #0f1c2e 58%, #172a46 100%) !important;
    border-radius: 26px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
}

#listaDicasPublicadas > div,
#adminTedPanel,
#listaRascunhosTed > div {
    border-radius: 18px !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

input,
select,
textarea {
    border-radius: 12px !important;
    border-color: rgba(148,163,184,.40) !important;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease !important;
}

input:not([type="color"]),
select,
textarea {
    background-color: rgba(255,255,255,.86) !important;
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: rgba(63,191,127,.78) !important;
    box-shadow: 0 0 0 4px rgba(63,191,127,.16), 0 10px 24px rgba(2,6,23,.08) !important;
}

button {
    border-radius: 12px !important;
    font-weight: 700;
}

#newBetBtn,
button[type="submit"],
#btnGenerateSummary,
#fcBtn,
#trBtn,
#btnImportarTodasTips,
#btnPublicarDicas {
    border: 0 !important;
    background: linear-gradient(135deg, #2563eb, #14b8a6) !important;
    color: #fff !important;
    box-shadow: 0 14px 30px rgba(37,99,235,.24), inset 0 1px 0 rgba(255,255,255,.24) !important;
}

#btnPublicarDicas,
#btnImportarTodasTips {
    background: linear-gradient(135deg, #f59e0b, #d4af37) !important;
    color: #07111f !important;
    box-shadow: 0 16px 34px rgba(245,158,11,.22), inset 0 1px 0 rgba(255,255,255,.34) !important;
}

button:hover {
    filter: saturate(1.05);
}

#tab-painel .grid .rounded,
#tab-estat .grid .rounded,
#fcResult .rounded,
#summaryResult .rounded {
    border-radius: var(--ca-radius-md) !important;
}

#kpiSaldoObtido {
    font-family: "Montserrat", "Poppins", sans-serif !important;
    letter-spacing: -.045em;
    text-shadow: 0 10px 28px rgba(37,99,235,.14);
}

#kpiTotalApostado,
#kpiGanhos,
#kpiPerdas,
#kpiROIC,
#kpiROD,
#kpiDisponivel,
#kpiASacar,
#gsAcc,
#gsEntryPct {
    font-family: "Montserrat", "Poppins", sans-serif !important;
    letter-spacing: -.035em;
}

#houseBalances .house-emboss,
.house-pill,
.str-pill {
    border-radius: 14px !important;
    box-shadow: 0 14px 28px rgba(2,6,23,.16), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.14) !important;
}

.house-pill {
    font-weight: 800 !important;
    letter-spacing: -.03em;
}

.str-pill {
    padding: .24rem .56rem !important;
    background: rgba(255,255,255,.82) !important;
}

.overflow-x-auto {
    border-radius: 18px;
}

table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

thead,
.top5-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

thead.bg-gray-100,
.top5-table thead th,
#betsTable + thead,
table thead tr {
    background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(226,232,240,.96)) !important;
}

th {
    color: #0f1c2e !important;
    text-transform: uppercase;
    letter-spacing: .055em;
    font-size: .72rem !important;
    font-weight: 900 !important;
    border-bottom: 1px solid rgba(148,163,184,.26) !important;
}

td {
    border-bottom: 1px solid rgba(148,163,184,.17) !important;
}

#betsTable tr,
#txTable tr,
.top5-table tbody tr {
    transition: background .16s ease, transform .16s ease, box-shadow .16s ease !important;
}

#betsTable tr:hover,
#txTable tr:hover,
.top5-table tbody tr:hover {
    background: rgba(239,246,255,.82) !important;
}

.mkt-pill {
    border-radius: 999px !important;
    border: 1px solid rgba(148,163,184,.34) !important;
    background: rgba(255,255,255,.78) !important;
    box-shadow: 0 8px 18px rgba(2,6,23,.07), inset 0 1px 0 rgba(255,255,255,.78) !important;
    padding: .36rem .64rem !important;
    color: #0f1c2e;
}

.mkt-pill.v {
    background: linear-gradient(135deg, rgba(220,252,231,.96), rgba(187,247,208,.78)) !important;
    border-color: rgba(63,191,127,.48) !important;
    color: #14532d !important;
}

.mkt-pill.x {
    background: linear-gradient(135deg, rgba(255,228,230,.98), rgba(254,205,211,.82)) !important;
    border-color: rgba(225,29,72,.36) !important;
    color: #881337 !important;
}

.chip {
    border-radius: 999px !important;
    padding: .18rem .58rem !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 6px 14px rgba(2,6,23,.08) !important;
}

.chip-open {
    background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
    color: #8a4b05 !important;
}

.chip-win {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important;
    color: #14532d !important;
}

.chip-loss {
    background: linear-gradient(135deg, #ffe4e6, #fecdd3) !important;
    color: #881337 !important;
}

.obs-btn,
[data-edit],
[data-del],
[data-del-tx] {
    font-weight: 800 !important;
}

.obs-btn {
    border-radius: 999px !important;
    background: rgba(255,255,255,.82) !important;
}

.entry {
    border-radius: 20px !important;
    background: linear-gradient(145deg, rgba(248,250,252,.92), rgba(239,246,255,.70)) !important;
    border-color: rgba(148,163,184,.28) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 12px 30px rgba(2,6,23,.08) !important;
}

.entry .border.rounded.p-3,
.freeMarketForm {
    border-radius: 18px !important;
    background: rgba(255,255,255,.74) !important;
    border-color: rgba(148,163,184,.22) !important;
}

.chipgrid button {
    border-radius: 999px !important;
    background: rgba(255,255,255,.86) !important;
    box-shadow: 0 6px 14px rgba(2,6,23,.06), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

.vx-btn {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 6px 14px rgba(2,6,23,.06) !important;
}

.note-popover,
dialog {
    border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,.62) !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 28px 90px rgba(2,6,23,.28), inset 0 1px 0 rgba(255,255,255,.8) !important;
}

dialog::backdrop {
    background: rgba(7,17,31,.56) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#betOverlay {
    background: rgba(7,17,31,.72) !important;
    backdrop-filter: blur(8px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(130%) !important;
}

#betDetailsContainer {
    box-shadow: 0 30px 90px rgba(2,6,23,.26), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

.top5-rank {
    border-radius: 14px !important;
    background: linear-gradient(135deg, #e0f2fe, #dbeafe) !important;
    color: #0f1c2e !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 8px 18px rgba(37,99,235,.10) !important;
}

.top5-badge {
    border-radius: 999px !important;
    background: rgba(255,255,255,.82) !important;
}

.top5-bar {
    height: 10px !important;
    background: rgba(148,163,184,.22) !important;
}

.top5-bar > span {
    background: linear-gradient(90deg, #3fbf7f, #20d6d3) !important;
}

.top5-bar.bad > span {
    background: linear-gradient(90deg, #fb7185, #e11d48) !important;
}

#dailyChart {
    filter: drop-shadow(0 12px 24px rgba(2,6,23,.06));
}

@keyframes popIn {
    from { transform: translateY(10px) scale(.985); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 768px) {
    header .max-w-7xl {
        min-height: auto;
        padding-top: .75rem !important;
        padding-bottom: .75rem !important;
    }
    header .flex.items-center.gap-3 {
        gap: .75rem !important;
    }
    .brand-title {
        font-size: clamp(1.05rem, 5.6vw, 1.55rem) !important;
        line-height: 1.05 !important;
    }
    #appLogo {
        width: 72px !important;
        height: 72px !important;
    }
    .tabs-scroll {
        width: 100%;
        border-radius: 18px;
    }
    .tab-btn {
        padding: .62rem .82rem !important;
    }
    #loginScreen .glass {
        padding: 1.55rem !important;
        border-radius: 24px !important;
    }
    th, td {
        padding: .62rem .52rem !important;
    }
}

/* ==========================================================
   AJUSTE PONTUAL V2 - LISTA DE APOSTAS FIXA
   Mantem o visual premium, mas remove inclinacao/efeito 3D
   da tabela/lista de apostas na aba Painel.
   ========================================================== */

.shadow-static {
  box-shadow:
    0 18px 42px rgba(2, 6, 23, 0.16),
    0 4px 12px rgba(2, 6, 23, 0.08) !important;
  transition: box-shadow 0.18s ease, border-color 0.18s ease !important;
  transform: none !important;
}

.shadow-static:hover {
  transform: none !important;
  box-shadow:
    0 18px 42px rgba(2, 6, 23, 0.16),
    0 4px 12px rgba(2, 6, 23, 0.08) !important;
}

#betsTable,
#betsTable tr,
#betsTable td,
#betsTable th,
#betsTable .mkt-pill,
#betsTable .house-pill,
#betsTable .str-pill,
#betsTable .chip,
#betsTable button {
  transform: none !important;
}

#betsTable tr:hover {
  background: rgba(248, 250, 252, 0.92) !important;
  box-shadow: inset 3px 0 0 rgba(63, 191, 127, 0.45) !important;
}

#betsTable .mkt-pill:hover,
#betsTable .house-pill:hover,
#betsTable .str-pill:hover,
#betsTable button:hover {
  transform: none !important;
}

/* Moldura mais moderna para o bloco do grafico estatistico.
   As cores/gradientes das barras e linhas do Chart.js continuam
   sendo configuradas no index.html, dentro da funcao renderStats(). */
#tab-estat #dailyChart {
  filter: drop-shadow(0 14px 32px rgba(15, 28, 46, 0.10));
}

/* ==========================================================
   AJUSTE PONTUAL V3 - DESKTOP AMPLO + HOVER UNIFICADO
   Objetivo: alargar a area util no desktop e preparar a lista
   de apostas para hover unificado por ticket multiplo.
   Visual only: nao altera calculos, Firebase ou backend.
   ========================================================== */

@media (min-width: 1024px) {
  .max-w-7xl {
    max-width: min(96vw, 112rem) !important;
  }

  #tab-painel,
  #tab-estat,
  #tab-movs,
  #tab-dicas {
    width: min(96vw, 112rem) !important;
  }

  header .max-w-7xl,
  body > .max-w-7xl {
    width: min(96vw, 112rem) !important;
  }

  #tab-painel .overflow-x-auto {
    overflow-x: visible !important;
  }

  #betsTable {
    width: 100% !important;
    table-layout: auto !important;
  }

  #betsTable th,
  #betsTable td {
    padding-left: 0.62rem !important;
    padding-right: 0.62rem !important;
  }

  #betsTable th:nth-child(1),
  #betsTable td:nth-child(1),
  #betsTable th:nth-child(2),
  #betsTable td:nth-child(2),
  #betsTable th:nth-child(3),
  #betsTable td:nth-child(3),
  #betsTable th:nth-child(7),
  #betsTable td:nth-child(7),
  #betsTable th:nth-child(8),
  #betsTable td:nth-child(8),
  #betsTable th:nth-child(9),
  #betsTable td:nth-child(9),
  #betsTable th:nth-child(10),
  #betsTable td:nth-child(10),
  #betsTable th:nth-child(11),
  #betsTable td:nth-child(11) {
    white-space: nowrap !important;
  }

  #betsTable .mkt-col {
    max-width: none !important;
    min-width: 300px !important;
  }

  #betsTable td:last-child {
    min-width: 118px !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 1536px) {
  .max-w-7xl {
    max-width: min(94vw, 124rem) !important;
  }

  #tab-painel,
  #tab-estat,
  #tab-movs,
  #tab-dicas {
    width: min(94vw, 124rem) !important;
  }

  header .max-w-7xl,
  body > .max-w-7xl {
    width: min(94vw, 124rem) !important;
  }
}

@media (max-width: 1023px) {
  #tab-painel .overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Hover unificado por ticket na lista de apostas.
   Para funcionar plenamente, as linhas precisam receber:
   class="ticket-row" e data-ticket-id="..." no index.html. */
#betsTable tr.ticket-row,
#betsTable tr.ticket-row:hover {
  transform: none !important;
}

#betsTable tr.ticket-row.ticket-hover {
  background: rgba(255, 255, 255, 0.96) !important;
  transform: none !important;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  position: relative;
  z-index: 5;
}

#betsTable tr.ticket-row.ticket-hover td {
  background: rgba(255, 255, 255, 0.72) !important;
}

#betsTable tr.ticket-row.ticket-hover td:first-child {
  box-shadow: inset 4px 0 0 rgba(63, 191, 127, 0.75) !important;
}

#betsTable tr.ticket-row.ticket-hover .mkt-pill,
#betsTable tr.ticket-row.ticket-hover .house-pill,
#betsTable tr.ticket-row.ticket-hover .str-pill,
#betsTable tr.ticket-row.ticket-hover button {
  transform: none !important;
}

/* ==========================================================
   AJUSTE PONTUAL V4 - TICKETS MULTIPLOS + MERCADOS EM 2 COLUNAS
   Mantem o desktop amplo, mas otimiza a tabela para reduzir
   largura excessiva e melhorar a leitura dos bilhetes multiplos.
   ========================================================== */

/* Ajuste fino da largura maxima no desktop: ainda amplo, mas menos exagerado. */
@media (min-width: 1024px) {
  .max-w-7xl {
    max-width: min(95vw, 114rem) !important;
  }

  #tab-painel,
  #tab-estat,
  #tab-movs,
  #tab-dicas,
  header .max-w-7xl,
  body > .max-w-7xl {
    width: min(95vw, 114rem) !important;
  }

  #betsTable .mkt-col {
    min-width: 360px !important;
    max-width: 520px !important;
  }

  /* Mercados/entradas do ticket: no maximo 2 colunas no desktop. */
  #betsTable .mkt-col > div,
  #betsTable td.mkt-col > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
    align-items: stretch !important;
  }

  #betsTable .mkt-pill {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.16 !important;
    padding: 0.42rem 0.62rem !important;
  }

  #betsTable .mkt-label {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media (min-width: 1536px) {
  .max-w-7xl {
    max-width: min(94vw, 118rem) !important;
  }

  #tab-painel,
  #tab-estat,
  #tab-movs,
  #tab-dicas,
  header .max-w-7xl,
  body > .max-w-7xl {
    width: min(94vw, 118rem) !important;
  }
}

/* Em telas medias, ainda tenta manter 2 colunas se houver espaco. */
@media (min-width: 768px) and (max-width: 1023px) {
  #betsTable .mkt-col > div,
  #betsTable td.mkt-col > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.38rem !important;
  }

  #betsTable .mkt-pill {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

/* No celular, uma coluna de mercados fica mais legivel. */
@media (max-width: 767px) {
  #betsTable .mkt-col > div,
  #betsTable td.mkt-col > div {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.36rem !important;
  }
}

/* Hover unificado mais limpo: remove a impressao de selecao separada
   quando o JavaScript auxiliar marcar as linhas do mesmo ticket. */
#betsTable tr.ticket-hover {
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: none !important;
}

#betsTable tr.ticket-hover td {
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,252,0.86)) !important;
  border-top-color: rgba(63, 191, 127, 0.22) !important;
  border-bottom-color: rgba(63, 191, 127, 0.22) !important;
}

#betsTable tr.ticket-hover td:first-child {
  box-shadow: none !important;
}

#betsTable tr.ticket-hover.ticket-start td:first-child {
  box-shadow: inset 4px 0 0 rgba(63, 191, 127, 0.72) !important;
}

#betsTable tr.ticket-hover.ticket-middle td,
#betsTable tr.ticket-hover.ticket-end td {
  border-top-color: rgba(63, 191, 127, 0.12) !important;
}

#betsTable tr.ticket-start.ticket-hover td:first-child,
#betsTable tr.ticket-start.ticket-hover td:nth-child(2),
#betsTable tr.ticket-start.ticket-hover td:nth-child(3) {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(240,253,244,0.82)) !important;
}

/* ==========================================================
   AJUSTE PONTUAL V5 - HOVER POR OVERLAY UNICO NO TICKET
   Corrige a sensacao de selecao quebrada em bilhetes com
   2 ou mais jogos. O destaque agora e desenhado por uma
   camada unica sobre todo o grupo, sem alterar dados ou logica.
   ========================================================== */

#tab-painel .overflow-x-auto {
  position: relative !important;
}

#betsTable tr.ticket-row,
#betsTable tr.ticket-row:hover,
#betsTable tr.ticket-hover,
#betsTable tr.ticket-hover:hover {
  transform: none !important;
  box-shadow: none !important;
}

#betsTable tr.ticket-row:hover,
#betsTable tr.ticket-hover,
#betsTable tr.ticket-hover td,
#betsTable tr.ticket-hover:hover td {
  background: inherit !important;
}

#betsTable tr.ticket-hover td:first-child,
#betsTable tr.ticket-start.ticket-hover td:first-child,
#betsTable tr.ticket-start.ticket-hover td:nth-child(2),
#betsTable tr.ticket-start.ticket-hover td:nth-child(3) {
  box-shadow: none !important;
  background: inherit !important;
}

#betsTable tr.ticket-row td,
#betsTable tr.ticket-row .mkt-pill,
#betsTable tr.ticket-row .house-pill,
#betsTable tr.ticket-row .str-pill,
#betsTable tr.ticket-row button {
  position: relative;
  z-index: 2;
}

.ca-ticket-hover-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 12;
  border-radius: 18px;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(63, 191, 127, 0.20), rgba(63, 191, 127, 0.055) 18%, rgba(255, 255, 255, 0.06) 100%);
  border: 1px solid rgba(63, 191, 127, 0.30);
  box-shadow:
    inset 5px 0 0 rgba(63, 191, 127, 0.82),
    0 14px 32px rgba(15, 28, 46, 0.08);
  transition:
    opacity 0.12s ease,
    top 0.10s ease,
    left 0.10s ease,
    width 0.10s ease,
    height 0.10s ease;
}

.ca-ticket-hover-overlay.is-visible {
  opacity: 1;
}

@media (max-width: 767px) {
  .ca-ticket-hover-overlay {
    border-radius: 14px;
    box-shadow:
      inset 4px 0 0 rgba(63, 191, 127, 0.78),
      0 10px 22px rgba(15, 28, 46, 0.08);
  }
}

/* ==========================================================
   AJUSTE PONTUAL V5 - HOVER POR TICKET COM OUTLINE UNICO
   Resolve a aparencia de selecao separada em bilhetes com
   2+ jogos. O destaque passa a ser uma moldura unica calculada
   pelo JS auxiliar, sem alterar dados ou funcionalidades.
   ========================================================== */

/* Remove os destaques antigos por linha para evitar a selecao quebrada. */
#betsTable tr:hover,
#betsTable tr.ticket-hover,
#betsTable tr.ticket-row.ticket-hover,
#betsTable tr.ticket-active {
  background: inherit !important;
  box-shadow: none !important;
  transform: none !important;
}

#betsTable tr.ticket-hover td,
#betsTable tr.ticket-row.ticket-hover td,
#betsTable tr.ticket-active td {
  background: inherit !important;
  box-shadow: none !important;
  transform: none !important;
}

#betsTable tr.ticket-hover td:first-child,
#betsTable tr.ticket-row.ticket-hover td:first-child,
#betsTable tr.ticket-active td:first-child,
#betsTable tr.ticket-start.ticket-hover td:first-child,
#betsTable tr.ticket-start.ticket-hover td:nth-child(2),
#betsTable tr.ticket-start.ticket-hover td:nth-child(3) {
  background: inherit !important;
  box-shadow: none !important;
}

#betsTable tr.ticket-active .mkt-pill,
#betsTable tr.ticket-active .house-pill,
#betsTable tr.ticket-active .str-pill,
#betsTable tr.ticket-active button {
  transform: none !important;
}

/* Moldura unica do ticket ativo. Fica acima da tabela e nao interfere em cliques. */
#caTicketHoverOverlay {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  border-radius: 18px;
  border: 1.5px solid rgba(63, 191, 127, 0.78);
  background: linear-gradient(135deg, rgba(63, 191, 127, 0.075), rgba(47, 109, 246, 0.045));
  box-shadow:
    0 18px 38px rgba(15, 28, 46, 0.16),
    0 0 0 3px rgba(63, 191, 127, 0.10),
    inset 4px 0 0 rgba(63, 191, 127, 0.74),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  transition:
    opacity 0.10s ease,
    top 0.08s ease,
    left 0.08s ease,
    width 0.08s ease,
    height 0.08s ease;
}

#caTicketHoverOverlay.is-visible {
  opacity: 1;
}

@media (max-width: 767px) {
  #caTicketHoverOverlay {
    display: none !important;
  }
}

/* ==========================================================
   AJUSTE V3 - HOVER POR TICKET COM OVERLAY UNICO
   Resolve o efeito de selecao quebrada em bilhetes com 2+ jogos.
   A selecao visual passa a ser uma moldura unica calculada pelo JS.
   ========================================================== */

#betsTable tr.ticket-row,
#betsTable tr.ticket-row:hover,
#betsTable tr.ticket-row.ticket-hover,
#betsTable tr.ticket-row.ticket-hover:hover {
  transform: none !important;
}

/* Remove os realces de linha/celula que davam a impressao de selecao separada. */
#betsTable tr.ticket-row:hover,
#betsTable tr.ticket-row.ticket-hover,
#betsTable tr.ticket-row.ticket-overlay-active,
#betsTable tr.ticket-row.ticket-overlay-active:hover {
  box-shadow: none !important;
}

#betsTable tr.ticket-row.ticket-hover td,
#betsTable tr.ticket-row.ticket-overlay-active td,
#betsTable tr.ticket-row:hover td {
  box-shadow: none !important;
}

/* Em linhas de continuacao, nao deixar a primeira celula virar um novo card destacado. */
#betsTable tr.ticket-continuation td:first-child,
#betsTable tr.ticket-middle td:first-child,
#betsTable tr.ticket-end td:first-child {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
}

#betsTable tr.ticket-continuation td:last-child,
#betsTable tr.ticket-middle td:last-child,
#betsTable tr.ticket-end td:last-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right-color: transparent !important;
}

/* Neutraliza regras antigas de green bar por linha. A barra agora fica no overlay unico. */
#betsTable tr.ticket-hover td:first-child,
#betsTable tr.ticket-hover.ticket-start td:first-child,
#betsTable tr.ticket-start.ticket-hover td:first-child,
#betsTable tr.ticket-start.ticket-hover td:nth-child(2),
#betsTable tr.ticket-start.ticket-hover td:nth-child(3) {
  box-shadow: none !important;
}

/* Moldura unica do ticket ao passar o mouse. */
.ca-ticket-hover-overlay {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  border-radius: 18px;
  border: 1px solid rgba(63, 191, 127, 0.62);
  background:
    linear-gradient(90deg, rgba(63, 191, 127, 0.105), rgba(255,255,255,0.025) 24%, rgba(255,255,255,0.015));
  box-shadow:
    inset 4px 0 0 rgba(63, 191, 127, 0.78),
    0 12px 28px rgba(15, 28, 46, 0.10),
    0 0 0 1px rgba(255,255,255,0.55);
  transition:
    opacity 0.10s ease,
    left 0.08s ease,
    top 0.08s ease,
    width 0.08s ease,
    height 0.08s ease;
}

.ca-ticket-hover-overlay.is-visible {
  opacity: 1;
}

@media (max-width: 1023px) {
  .ca-ticket-hover-overlay {
    display: none !important;
  }
}

/* ==========================================================
   AJUSTE MOBILE V6 - TABELA DE APOSTAS COM ROLAGEM HORIZONTAL
   No desktop a tabela segue otimizada. No celular/tablet, a tabela
   volta a ter largura minima para preservar a leitura dos mercados
   e permitir rolagem lateral com o dedo.
   ========================================================== */

@media (max-width: 1023px) {
  #tab-painel .overflow-x-auto {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior-x: contain;
    padding-bottom: 0.75rem;
    border-radius: 18px;
  }

  #tab-painel .overflow-x-auto::-webkit-scrollbar {
    height: 8px;
  }

  #tab-painel .overflow-x-auto::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, 0.18);
    border-radius: 999px;
  }

  #tab-painel .overflow-x-auto::-webkit-scrollbar-thumb {
    background: rgba(15, 28, 46, 0.34);
    border-radius: 999px;
  }

  #betsTable {
    width: max-content !important;
    min-width: 1180px !important;
    table-layout: auto !important;
  }

  #betsTable th,
  #betsTable td {
    white-space: nowrap !important;
  }

  #betsTable .mkt-col {
    width: 390px !important;
    min-width: 390px !important;
    max-width: 390px !important;
    white-space: normal !important;
  }

  #betsTable .mkt-col > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  #betsTable .mkt-pill {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.18 !important;
    min-height: 2.35rem !important;
    padding: 0.42rem 0.52rem !important;
    text-align: center !important;
  }

  #betsTable .mkt-label {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.18 !important;
  }

  #betsTable td:last-child {
    min-width: 118px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 520px) {
  #betsTable {
    min-width: 1220px !important;
  }

  #betsTable .mkt-col {
    width: 430px !important;
    min-width: 430px !important;
    max-width: 430px !important;
  }

  #betsTable .mkt-pill {
    font-size: 0.78rem !important;
  }
}

/* ==========================================================
   AJUSTE FINAL - BANDEIRAS DAS LIGAS + MOBILE PRINT LEGIVEL
   Desktop preservado. Regras abaixo atuam principalmente no mobile.
   ========================================================== */

/* Bandeiras / trofeu para ligas */
.league-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  font-weight: 800;
  color: #0f1c2e;
  line-height: 1.15;
}

.league-flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(15, 28, 46, 0.10),
    0 3px 8px rgba(15, 28, 46, 0.12);
  flex: 0 0 auto;
}

.league-trophy {
  width: 20px;
  display: inline-flex;
  justify-content: center;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 4px rgba(15, 28, 46, 0.16));
}

/* Desktop mantido: no computador, nao forca compactacao mobile. */
@media (min-width: 768px) {
  #betsTable .mkt-col > div,
  #betsTable td.mkt-col > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile: objetivo = Data ate Status visiveis, acoes a direita por rolagem. */
@media (max-width: 767px) {
  :root {
    --ca-mobile-visible-table: calc(100vw - 0.65rem);
    --ca-mobile-actions-width: 78px;
    --ca-w-date: 30px;
    --ca-w-house: 31px;
    --ca-w-strategy: 20px;
    --ca-w-league: 42px;
    --ca-w-game: 58px;
    --ca-w-market: 76px;
    --ca-w-odds: 26px;
    --ca-w-stake: 33px;
    --ca-w-net: 36px;
    --ca-w-status: 32px;
  }

  #tab-painel {
    padding-left: 0.18rem !important;
    padding-right: 0.18rem !important;
  }

  #tab-painel .shadow-static {
    padding-left: 0.18rem !important;
    padding-right: 0.18rem !important;
    overflow: visible !important;
  }

  #tab-painel .shadow-static > .flex:first-child {
    padding-left: 0.18rem !important;
    padding-right: 0.18rem !important;
  }

  #tab-painel .overflow-x-auto {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px !important;
    padding-bottom: 0.25rem !important;
  }

  #betsTable {
    table-layout: fixed !important;
    width: calc(var(--ca-mobile-visible-table) + var(--ca-mobile-actions-width)) !important;
    min-width: calc(var(--ca-mobile-visible-table) + var(--ca-mobile-actions-width)) !important;
    max-width: none !important;
    border-spacing: 0 0.32rem !important;
  }

  #betsTable th,
  #betsTable td {
    padding: 0.30rem 0.08rem !important;
    font-size: 0.54rem !important;
    line-height: 1.08 !important;
    letter-spacing: -0.018em !important;
    vertical-align: middle !important;
    overflow-wrap: anywhere !important;
  }

  #betsTable th {
    font-size: 0.43rem !important;
    letter-spacing: 0.018em !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
    text-align: center !important;
  }

  /* Larguras compactas das colunas principais. */
  #betsTable th:nth-child(1), #betsTable td:nth-child(1) { width: var(--ca-w-date) !important; min-width: var(--ca-w-date) !important; max-width: var(--ca-w-date) !important; }
  #betsTable th:nth-child(2), #betsTable td:nth-child(2) { width: var(--ca-w-house) !important; min-width: var(--ca-w-house) !important; max-width: var(--ca-w-house) !important; }
  #betsTable th:nth-child(3), #betsTable td:nth-child(3) { width: var(--ca-w-strategy) !important; min-width: var(--ca-w-strategy) !important; max-width: var(--ca-w-strategy) !important; }
  #betsTable th:nth-child(4), #betsTable td:nth-child(4) { width: var(--ca-w-league) !important; min-width: var(--ca-w-league) !important; max-width: var(--ca-w-league) !important; }
  #betsTable th:nth-child(5), #betsTable td:nth-child(5) { width: var(--ca-w-game) !important; min-width: var(--ca-w-game) !important; max-width: var(--ca-w-game) !important; }
  #betsTable th:nth-child(6), #betsTable td:nth-child(6) { width: var(--ca-w-market) !important; min-width: var(--ca-w-market) !important; max-width: var(--ca-w-market) !important; }
  #betsTable th:nth-child(7), #betsTable td:nth-child(7) { width: var(--ca-w-odds) !important; min-width: var(--ca-w-odds) !important; max-width: var(--ca-w-odds) !important; }
  #betsTable th:nth-child(8), #betsTable td:nth-child(8) { width: var(--ca-w-stake) !important; min-width: var(--ca-w-stake) !important; max-width: var(--ca-w-stake) !important; }
  #betsTable th:nth-child(9), #betsTable td:nth-child(9) { width: var(--ca-w-net) !important; min-width: var(--ca-w-net) !important; max-width: var(--ca-w-net) !important; }
  #betsTable th:nth-child(10), #betsTable td:nth-child(10) { width: var(--ca-w-status) !important; min-width: var(--ca-w-status) !important; max-width: var(--ca-w-status) !important; }

  /* Coluna de Obs/editar/excluir fica fora da primeira tela. */
  #betsTable th:nth-child(11),
  #betsTable td.text-right,
  #betsTable td:last-child:has([data-edit]) {
    width: var(--ca-mobile-actions-width) !important;
    min-width: var(--ca-mobile-actions-width) !important;
    max-width: var(--ca-mobile-actions-width) !important;
    white-space: normal !important;
  }

  /* Times empilhados no celular: mandante em cima, x pequeno, visitante embaixo. */
  #betsTable td .font-medium {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.02rem !important;
    text-align: center !important;
    line-height: 1.03 !important;
    font-size: 0.54rem !important;
    font-weight: 850 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #betsTable td .font-medium > span {
    margin: 0 !important;
    font-size: 0.40rem !important;
    line-height: 0.85 !important;
    color: #94a3b8 !important;
  }

  /* Mercados em 2 colunas no celular para manter legibilidade. */
  #betsTable .mkt-col > div,
  #betsTable td.mkt-col > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.12rem !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  #betsTable .mkt-pill {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 1.02rem !important;
    padding: 0.15rem 0.10rem !important;
    border-radius: 0.34rem !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 0.98 !important;
    box-shadow: 0 3px 7px rgba(2,6,23,.055), inset 0 1px 0 rgba(255,255,255,.68) !important;
  }

  #betsTable .mkt-label {
    font-size: 0.44rem !important;
    line-height: 0.98 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    letter-spacing: -0.02em !important;
  }

  #betsTable .house-pill,
  #betsTable .str-pill,
  #betsTable .chip {
    padding: 0.10rem 0.12rem !important;
    border-radius: 0.32rem !important;
    font-size: 0.46rem !important;
    line-height: 0.96 !important;
    letter-spacing: -0.018em !important;
    white-space: normal !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  #betsTable .str-pill {
    gap: 0.08rem !important;
    justify-content: center !important;
  }

  #betsTable .str-dot {
    width: 5px !important;
    height: 5px !important;
  }

  .league-label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.04rem !important;
    text-align: center !important;
    font-size: 0.43rem !important;
    line-height: 0.98 !important;
    font-weight: 850 !important;
    overflow-wrap: anywhere !important;
  }

  .league-flag {
    width: 15px !important;
    height: 10px !important;
    border-radius: 2px !important;
  }

  .league-trophy {
    width: 15px !important;
    font-size: 0.72rem !important;
  }

  /* Remove elementos secundarios que quebram o print mobile. */
  #betsTable td:nth-child(10) .leading-tight > div,
  #betsTable td .chip-open + div {
    display: none !important;
  }

  #betsTable .obs-btn,
  #betsTable [data-edit],
  #betsTable [data-del] {
    font-size: 0.58rem !important;
    line-height: 1.05 !important;
  }

  #betsTable [data-edit],
  #betsTable [data-del] {
    display: inline-block !important;
    padding: 0.08rem 0.04rem !important;
  }
}

@media (max-width: 390px) {
  :root {
    --ca-w-date: 28px;
    --ca-w-house: 29px;
    --ca-w-strategy: 18px;
    --ca-w-league: 39px;
    --ca-w-game: 54px;
    --ca-w-market: 70px;
    --ca-w-odds: 24px;
    --ca-w-stake: 31px;
    --ca-w-net: 34px;
    --ca-w-status: 30px;
    --ca-mobile-actions-width: 74px;
  }

  #betsTable th,
  #betsTable td {
    font-size: 0.50rem !important;
  }

  #betsTable td .font-medium {
    font-size: 0.50rem !important;
  }

  #betsTable .mkt-label {
    font-size: 0.405rem !important;
  }

  #betsTable .house-pill,
  #betsTable .str-pill,
  #betsTable .chip {
    font-size: 0.42rem !important;
  }
}

/* ==========================================================
   AJUSTE MOBILE V11 - LISTA DE APOSTAS: DATA A STATUS VISIVEL
   Escopo: somente smartphone/web mobile. Desktop preservado.
   Requisitos:
   - Rotulos do cabecalho menores.
   - DATA e CASA preservadas em tamanho proximo ao atual.
   - ESTR. no menor tamanho legivel.
   - CAMPEONATO compacto com bandeira/trofeu em cima e liga embaixo.
   - JOGO e MERCADOS mantidos em tamanho funcional.
   - ODD, VALOR, LIQUIDO e STATUS no minimo legivel.
   - OBS/editar/excluir ficam a direita via rolagem lateral.
   ========================================================== */

@media (max-width: 767px) {
  :root {
    /* Larguras finais da primeira tela mobile: DATA ate STATUS. */
    --ca-w-date: 30px;
    --ca-w-house: 31px;
    --ca-w-strategy: 12px;
    --ca-w-league: 36px;
    --ca-w-game: 58px;
    --ca-w-market: 74px;
    --ca-w-odds: 22px;
    --ca-w-stake: 28px;
    --ca-w-net: 29px;
    --ca-w-status: 32px;
    --ca-mobile-actions-width: 84px;
    --ca-mobile-visible-cols: calc(
      var(--ca-w-date) +
      var(--ca-w-house) +
      var(--ca-w-strategy) +
      var(--ca-w-league) +
      var(--ca-w-game) +
      var(--ca-w-market) +
      var(--ca-w-odds) +
      var(--ca-w-stake) +
      var(--ca-w-net) +
      var(--ca-w-status)
    );
  }

  #tab-painel {
    padding-left: 0.10rem !important;
    padding-right: 0.10rem !important;
  }

  #tab-painel .shadow-static {
    padding-left: 0.12rem !important;
    padding-right: 0.12rem !important;
    overflow: visible !important;
  }

  #tab-painel .overflow-x-auto {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior-x: contain !important;
    border-radius: 12px !important;
    padding-bottom: 0.28rem !important;
  }

  #betsTable {
    table-layout: fixed !important;
    width: calc(var(--ca-mobile-visible-cols) + var(--ca-mobile-actions-width)) !important;
    min-width: calc(var(--ca-mobile-visible-cols) + var(--ca-mobile-actions-width)) !important;
    max-width: none !important;
    border-spacing: 0 0.30rem !important;
  }

  /* Cabecalho: menor e mais compacto no mobile. */
  #betsTable thead th,
  #betsTable th {
    font-size: 0.39rem !important;
    line-height: 0.92 !important;
    letter-spacing: 0.012em !important;
    padding: 0.14rem 0.025rem !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #betsTable td {
    padding: 0.27rem 0.045rem !important;
    font-size: 0.50rem !important;
    line-height: 1.04 !important;
    letter-spacing: -0.02em !important;
    vertical-align: middle !important;
    overflow-wrap: anywhere !important;
  }

  /* Tamanhos por coluna na primeira linha do ticket. */
  #betsTable th:nth-child(1), #betsTable td:nth-child(1) { width: var(--ca-w-date) !important; min-width: var(--ca-w-date) !important; max-width: var(--ca-w-date) !important; }
  #betsTable th:nth-child(2), #betsTable td:nth-child(2) { width: var(--ca-w-house) !important; min-width: var(--ca-w-house) !important; max-width: var(--ca-w-house) !important; }
  #betsTable th:nth-child(3), #betsTable td:nth-child(3) { width: var(--ca-w-strategy) !important; min-width: var(--ca-w-strategy) !important; max-width: var(--ca-w-strategy) !important; }
  #betsTable th:nth-child(4), #betsTable td:nth-child(4) { width: var(--ca-w-league) !important; min-width: var(--ca-w-league) !important; max-width: var(--ca-w-league) !important; }
  #betsTable th:nth-child(5), #betsTable td:nth-child(5) { width: var(--ca-w-game) !important; min-width: var(--ca-w-game) !important; max-width: var(--ca-w-game) !important; }
  #betsTable th:nth-child(6), #betsTable td:nth-child(6) { width: var(--ca-w-market) !important; min-width: var(--ca-w-market) !important; max-width: var(--ca-w-market) !important; }
  #betsTable th:nth-child(7), #betsTable td:nth-child(7) { width: var(--ca-w-odds) !important; min-width: var(--ca-w-odds) !important; max-width: var(--ca-w-odds) !important; }
  #betsTable th:nth-child(8), #betsTable td:nth-child(8) { width: var(--ca-w-stake) !important; min-width: var(--ca-w-stake) !important; max-width: var(--ca-w-stake) !important; }
  #betsTable th:nth-child(9), #betsTable td:nth-child(9) { width: var(--ca-w-net) !important; min-width: var(--ca-w-net) !important; max-width: var(--ca-w-net) !important; }
  #betsTable th:nth-child(10), #betsTable td:nth-child(10) { width: var(--ca-w-status) !important; min-width: var(--ca-w-status) !important; max-width: var(--ca-w-status) !important; }

  /* Coluna de acoes fica fora da primeira tela e entra por rolagem lateral. */
  #betsTable th:nth-child(11),
  #betsTable td:nth-child(11),
  #betsTable td:last-child,
  #betsTable td.text-right {
    width: var(--ca-mobile-actions-width) !important;
    min-width: var(--ca-mobile-actions-width) !important;
    max-width: var(--ca-mobile-actions-width) !important;
    white-space: normal !important;
  }

  /* DATA e CASA: tamanhos mantidos, apenas texto mais encaixado. */
  #betsTable td:nth-child(1),
  #betsTable td:nth-child(2) {
    text-align: center !important;
    font-size: 0.47rem !important;
    font-weight: 800 !important;
  }

  /* ESTR.: menor possivel sem sumir. */
  #betsTable td:nth-child(3) {
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #betsTable .str-pill {
    padding: 0.05rem 0.04rem !important;
    gap: 0 !important;
    min-width: 10px !important;
    justify-content: center !important;
    font-size: 0.38rem !important;
    line-height: 0.90 !important;
    border-radius: 0.24rem !important;
  }

  #betsTable .str-dot {
    display: none !important;
  }

  /* CAMPEONATO: compacto, com bandeira/trofeu em cima e nome embaixo. */
  #betsTable td:nth-child(4) {
    text-align: center !important;
    overflow: hidden !important;
  }

  #betsTable .league-label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.035rem !important;
    text-align: center !important;
    font-size: 0.39rem !important;
    line-height: 0.90 !important;
    font-weight: 850 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #betsTable .league-label span:last-child {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }

  #betsTable .league-flag {
    width: 15px !important;
    height: 10px !important;
    border-radius: 2px !important;
    flex: 0 0 auto !important;
  }

  #betsTable .league-trophy {
    width: 15px !important;
    font-size: 0.66rem !important;
    line-height: 0.78 !important;
  }

  /* JOGO: tamanho atual, times empilhados para legibilidade. */
  #betsTable td:nth-child(5) .font-medium {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.015rem !important;
    text-align: center !important;
    font-size: 0.50rem !important;
    line-height: 1.02 !important;
    font-weight: 850 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #betsTable td:nth-child(5) .font-medium > span {
    margin: 0 !important;
    font-size: 0.36rem !important;
    line-height: 0.78 !important;
    color: #94a3b8 !important;
  }

  /* MERCADOS: tamanho atual, 2 colunas e chips legiveis. */
  #betsTable .mkt-col > div,
  #betsTable td.mkt-col > div,
  #betsTable td:nth-child(6) > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.10rem !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  #betsTable .mkt-pill {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 1.05rem !important;
    padding: 0.13rem 0.075rem !important;
    border-radius: 0.30rem !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 0.98 !important;
    box-shadow: 0 3px 7px rgba(2,6,23,.055), inset 0 1px 0 rgba(255,255,255,.68) !important;
  }

  #betsTable .mkt-label {
    font-size: 0.405rem !important;
    line-height: 0.98 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    letter-spacing: -0.02em !important;
  }

  /* ODD, VALOR, LIQUIDO, STATUS: minimo legivel. */
  #betsTable td:nth-child(7),
  #betsTable td:nth-child(8),
  #betsTable td:nth-child(9),
  #betsTable td:nth-child(10) {
    text-align: center !important;
    font-size: 0.46rem !important;
    font-weight: 850 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    padding-left: 0.025rem !important;
    padding-right: 0.025rem !important;
  }

  #betsTable .chip {
    padding: 0.09rem 0.10rem !important;
    border-radius: 0.26rem !important;
    font-size: 0.39rem !important;
    line-height: 0.90 !important;
    letter-spacing: -0.018em !important;
    white-space: normal !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  /* Oculta lucro potencial no print/lista mobile para preservar STATUS. */
  #betsTable td:nth-child(10) .leading-tight > div,
  #betsTable td .chip-open + div {
    display: none !important;
  }

  /* Acoes ficam rolaveis a direita, legiveis quando acessadas. */
  #betsTable .obs-btn,
  #betsTable [data-edit],
  #betsTable [data-del] {
    font-size: 0.58rem !important;
    line-height: 1.05 !important;
  }

  #betsTable [data-edit],
  #betsTable [data-del] {
    display: inline-block !important;
    padding: 0.08rem 0.04rem !important;
  }
}

@media (max-width: 390px) {
  :root {
    --ca-w-date: 28px;
    --ca-w-house: 29px;
    --ca-w-strategy: 11px;
    --ca-w-league: 34px;
    --ca-w-game: 54px;
    --ca-w-market: 70px;
    --ca-w-odds: 21px;
    --ca-w-stake: 27px;
    --ca-w-net: 28px;
    --ca-w-status: 31px;
    --ca-mobile-actions-width: 80px;
  }

  #betsTable th {
    font-size: 0.36rem !important;
  }

  #betsTable td {
    font-size: 0.47rem !important;
  }

  #betsTable td:nth-child(5) .font-medium {
    font-size: 0.47rem !important;
  }

  #betsTable .mkt-label {
    font-size: 0.385rem !important;
  }

  #betsTable .chip {
    font-size: 0.37rem !important;
  }
}

/* ==========================================================
   AJUSTE MOBILE V12 - APOSTAS IGUAL AO DESKTOP, EM ESCALA
   Objetivo: no celular, a tabela de Apostas deve manter o
   mesmo padrao visual do computador. A navegacao acontece por
   rolagem lateral, sem compactar/empilhar Jogo, Estrategia,
   Mercados, chips ou colunas.
   ========================================================== */

@media (max-width: 767px) {
  /* Container: apenas libera rolagem lateral normal. */
  #tab-painel .overflow-x-auto {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior-x: contain !important;
    padding-bottom: 0.85rem !important;
    border-radius: 18px !important;
  }

  /* A tabela volta a se comportar como desktop: largura propria e colunas reais. */
  #betsTable {
    width: max-content !important;
    min-width: 1320px !important;
    max-width: none !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 0.6rem !important;
  }

  /* Remove TODAS as larguras artificiais do mobile antigo. */
  #betsTable th,
  #betsTable td,
  #betsTable th:nth-child(1), #betsTable td:nth-child(1),
  #betsTable th:nth-child(2), #betsTable td:nth-child(2),
  #betsTable th:nth-child(3), #betsTable td:nth-child(3),
  #betsTable th:nth-child(4), #betsTable td:nth-child(4),
  #betsTable th:nth-child(5), #betsTable td:nth-child(5),
  #betsTable th:nth-child(6), #betsTable td:nth-child(6),
  #betsTable th:nth-child(7), #betsTable td:nth-child(7),
  #betsTable th:nth-child(8), #betsTable td:nth-child(8),
  #betsTable th:nth-child(9), #betsTable td:nth-child(9),
  #betsTable th:nth-child(10), #betsTable td:nth-child(10),
  #betsTable th:nth-child(11), #betsTable td:nth-child(11) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Escala unica, menor que o desktop, mas com o mesmo padrao de exibicao. */
  #betsTable th {
    padding: 0.46rem 0.72rem !important;
    font-size: 0.66rem !important;
    line-height: 1.18 !important;
    letter-spacing: 0.05em !important;
    text-align: left !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
  }

  #betsTable td {
    padding: 0.78rem 0.72rem !important;
    font-size: 0.78rem !important;
    line-height: 1.26 !important;
    letter-spacing: -0.01em !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* Colunas com minimos proporcionais ao desktop. */
  #betsTable th:nth-child(1), #betsTable td:nth-child(1) { min-width: 86px !important; }
  #betsTable th:nth-child(2), #betsTable td:nth-child(2) { min-width: 120px !important; }
  #betsTable th:nth-child(3), #betsTable td:nth-child(3) { min-width: 72px !important; }
  #betsTable th:nth-child(4), #betsTable td:nth-child(4) { min-width: 172px !important; }
  #betsTable th:nth-child(5), #betsTable td:nth-child(5) { min-width: 190px !important; }
  #betsTable th:nth-child(6), #betsTable td:nth-child(6) { min-width: 430px !important; }
  #betsTable th:nth-child(7), #betsTable td:nth-child(7) { min-width: 72px !important; }
  #betsTable th:nth-child(8), #betsTable td:nth-child(8) { min-width: 94px !important; }
  #betsTable th:nth-child(9), #betsTable td:nth-child(9) { min-width: 104px !important; }
  #betsTable th:nth-child(10), #betsTable td:nth-child(10) { min-width: 116px !important; }
  #betsTable th:nth-child(11), #betsTable td:nth-child(11) { min-width: 126px !important; }

  /* Mantem o card de linha igual ao desktop. */
  #betsTable tr {
    background: rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02), inset 0 1px 0 rgba(255,255,255,0.8) !important;
    border-radius: 1rem !important;
    transition: all 0.3s ease !important;
  }

  #betsTable td:first-child {
    border-top-left-radius: 1rem !important;
    border-bottom-left-radius: 1rem !important;
    border-left: 1px solid rgba(255,255,255,0.5) !important;
  }

  #betsTable td:last-child {
    border-top-right-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
    border-right: 1px solid rgba(255,255,255,0.5) !important;
  }

  /* Campeonato: bandeira + texto na mesma linha, como no desktop. */
  #betsTable .league-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.38rem !important;
    font-size: 0.78rem !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    max-width: none !important;
  }

  #betsTable .league-flag {
    width: 20px !important;
    height: 14px !important;
    border-radius: 3px !important;
    flex: 0 0 auto !important;
  }

  #betsTable .league-trophy {
    width: 20px !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }

  /* Jogo: remove o empilhamento mobile; volta a ser linha unica. */
  #betsTable td .font-medium,
  #betsTable td:nth-child(5) .font-medium {
    display: inline !important;
    flex-direction: initial !important;
    align-items: initial !important;
    justify-content: initial !important;
    gap: initial !important;
    text-align: left !important;
    line-height: 1.26 !important;
    font-size: 0.78rem !important;
    font-weight: 650 !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #betsTable td .font-medium > span,
  #betsTable td:nth-child(5) .font-medium > span {
    display: inline !important;
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
    font-size: 0.68rem !important;
    line-height: inherit !important;
    color: #94a3b8 !important;
  }

  /* Estrategia: volta ao pill desktop, com bolinha e numero legiveis. */
  #betsTable .str-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.44rem !important;
    padding: 0.28rem 0.72rem !important;
    border-radius: 9999px !important;
    font-size: 0.68rem !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    max-width: none !important;
    background: rgba(255,255,255,.8) !important;
  }

  #betsTable .str-dot {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    border-radius: 9999px !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
  }

  /* Casa e status: mantem chips desktop, so levemente menores. */
  #betsTable .house-pill,
  #betsTable .chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.32rem 0.76rem !important;
    border-radius: 9999px !important;
    font-size: 0.66rem !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    max-width: none !important;
  }

  /* Mantem o lucro potencial visivel no status, como no desktop. */
  #betsTable td:nth-child(10) .leading-tight > div,
  #betsTable td .chip-open + div {
    display: block !important;
    font-size: 0.64rem !important;
    line-height: 1.15 !important;
    margin-top: 0.12rem !important;
  }

  /* Mercados: mesmo padrao desktop atual, em 2 colunas quando houver varios. */
  #betsTable .mkt-col {
    width: 430px !important;
    min-width: 430px !important;
    max-width: 520px !important;
    white-space: normal !important;
  }

  #betsTable .mkt-col > div,
  #betsTable td.mkt-col > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.38rem !important;
    align-items: stretch !important;
    width: 100% !important;
    flex-wrap: initial !important;
  }

  #betsTable .mkt-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 2.15rem !important;
    padding: 0.36rem 0.54rem !important;
    border-radius: 0.75rem !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.14 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
  }

  #betsTable .mkt-label {
    font-size: 0.68rem !important;
    line-height: 1.14 !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  /* Acoes: mesma exibicao textual do desktop, sem virar microtexto. */
  #betsTable .obs-btn,
  #betsTable [data-edit],
  #betsTable [data-del] {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  #betsTable [data-edit],
  #betsTable [data-del] {
    display: inline !important;
    padding: 0 !important;
  }
}

@media (max-width: 390px) {
  /* Cancela a microcompactacao antiga em telas muito pequenas. */
  #betsTable th {
    font-size: 0.66rem !important;
  }

  #betsTable td,
  #betsTable td:nth-child(5) .font-medium {
    font-size: 0.78rem !important;
  }

  #betsTable .mkt-label {
    font-size: 0.68rem !important;
  }

  #betsTable .chip,
  #betsTable .house-pill,
  #betsTable .str-pill {
    font-size: 0.66rem !important;
  }
}