/* ============================================================
   STAKEFY — TEMA v3 (camada visual)
   Carregado POR ÚLTIMO em todas as páginas. Só muda aparência:
   cores, sombras, cantos, espaçamentos e tipografia.
   Para voltar ao visual antigo, basta remover a linha
   <link ... tema-v3.css> da página.
============================================================ */

/* ---------- 1. Paleta e tokens ---------- */
:root {
    --raio: 16px;
    --raio-sm: 11px;
    --grad-ouro: linear-gradient(135deg, #ffc93c 0%, #f6ae10 55%, #e69500 100%);
}

/* escuro (padrão). O :not() impede que estas cores vençam as do tema claro */
:root:not([data-theme="light"]) {
    --bg: #05080f;
    --sidebar: #090e1a;
    --card: #0d1423;
    --card2: #131c30;
    --border: #1b2740;
    --input-bg: #09101d;
    --text: #f4f6fb;
    --secondary: #a3afc4;
    --muted: #8391aa;

    --accent: #f6ae10;
    --accent-hover: #ffc233;
    --accent-fg: #f6b21a;
    --green: #2ddba0;
    --green-fg: #34e0a8;
    --red: #ff6379;
    --red-fg: #ff7487;

    --glass-a: rgba(255, 255, 255, .045);
    --glass-b: rgba(255, 255, 255, .012);
    --linha-clara: rgba(255, 255, 255, .06);
    --sombra-card: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 18px 40px -26px rgba(0, 0, 0, .85);
    --sombra-hover: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 22px 46px -24px rgba(0, 0, 0, .95);
    --brilho-ouro: rgba(246, 174, 16, .16);
    --brilho-verde: rgba(45, 219, 160, .10);
    --foco: 0 0 0 3px rgba(246, 174, 16, .22);
}

[data-theme="light"] {
    --bg: #f1f3f9;
    --sidebar: #ffffff;
    --card: #ffffff;
    --card2: #eff2f8;
    --border: #dfe4ee;
    --input-bg: #f5f7fc;
    --accent: #f0a500;
    --accent-hover: #f7b520;
    --glass-a: rgba(255, 255, 255, .9);
    --glass-b: rgba(255, 255, 255, .6);
    --linha-clara: rgba(15, 23, 42, .06);
    --sombra-card: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 34px -22px rgba(30, 41, 80, .28);
    --sombra-hover: 0 2px 4px rgba(15, 23, 42, .05), 0 20px 40px -22px rgba(30, 41, 80, .38);
    --brilho-ouro: rgba(240, 165, 0, .14);
    --brilho-verde: rgba(10, 115, 80, .07);
    --foco: 0 0 0 3px rgba(240, 165, 0, .28);
}

/* ---------- 2. Base ---------- */
body {
    background:
        radial-gradient(900px 520px at 8% -8%, var(--brilho-ouro), transparent 62%),
        radial-gradient(800px 480px at 100% 4%, var(--brilho-verde), transparent 60%),
        var(--bg);
    background-attachment: fixed;
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { letter-spacing: -.015em; }

.kpi h2, .kpi2 h2, .tipo-operacao-item strong, .lista-resumo strong,
td, .rel-folha td {
    font-variant-numeric: tabular-nums;
}

::selection { background: rgba(246, 174, 16, .35); }

* { scrollbar-width: thin; scrollbar-color: rgba(131, 145, 170, .35) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(131, 145, 170, .3); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(131, 145, 170, .5); background-clip: content-box; border: 2px solid transparent; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- 3. Menu lateral ---------- */
.sidebar {
    background:
        radial-gradient(260px 220px at 0% 0%, var(--brilho-ouro), transparent 70%),
        var(--sidebar);
    border-right: 1px solid var(--linha-clara);
    padding: 22px 14px;
}

.brand { padding: 0 6px 20px; border-bottom: 1px solid var(--linha-clara); }
.brand h2 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.brand small { font-size: 11.5px; }

.logo {
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(246, 174, 16, .2), rgba(246, 174, 16, .06));
    border-color: rgba(246, 174, 16, .3);
    box-shadow: 0 8px 22px -10px rgba(246, 174, 16, .55);
}

.profile {
    margin-top: 18px;
    padding: 12px;
    border-radius: var(--raio-sm);
    border: 1px solid var(--linha-clara);
    background: linear-gradient(180deg, var(--glass-a), var(--glass-b));
}

.avatar { border-radius: 10px; box-shadow: 0 6px 16px -8px rgba(246, 174, 16, .6); }
.profile-text strong { font-size: 12.5px; }

.menu-title {
    margin: 22px 10px 8px;
    font-size: 10px;
    letter-spacing: 1.6px;
    color: var(--muted);
    opacity: .9;
}

.menu-item {
    position: relative;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 2px;
    font-size: 12.5px;
    font-weight: 500;
    transition: background .18s, color .18s, transform .18s;
}

.menu-item i { width: 18px; font-size: 13px; opacity: .85; }

.menu-item:hover {
    background: var(--glass-a);
    color: var(--text);
}

.menu-item.active {
    background: linear-gradient(90deg, rgba(246, 174, 16, .17), rgba(246, 174, 16, .03));
    color: var(--accent-fg);
    font-weight: 700;
}
.menu-item.active i { opacity: 1; }
.menu-item.active::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 9px;
    bottom: 9px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--grad-ouro);
    box-shadow: 0 0 14px rgba(246, 174, 16, .6);
}

.sidebar-footer { border-top: 1px solid var(--linha-clara); }

/* ---------- 4. Cabeçalho da página ---------- */
.main { padding: 32px 34px; }

.page-type {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(246, 174, 16, .12);
    border: 1px solid rgba(246, 174, 16, .22);
    font-size: 10px;
    letter-spacing: 1.5px;
}

.header h1 { font-size: 30px; font-weight: 800; margin-top: 10px; letter-spacing: -.025em; }
.header p { font-size: 13px; margin-top: 6px; }

/* ---------- 5. Cartões ---------- */
.card, .kpi, .kpi2, .filter-box, .calendar-card, .alertas-painel,
.lista-resumo > div, .resultado-card, .casa-card, .resumo-geral, .tipo-operacao-item {
    border: 1px solid var(--linha-clara);
    background: linear-gradient(180deg, var(--glass-a), var(--glass-b)), var(--card);
    box-shadow: var(--sombra-card);
}

.card, .kpi, .kpi2, .filter-box, .calendar-card { border-radius: var(--raio); }

.card-header h3 { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.card-header p { font-size: 11.5px; }

.kpi, .kpi2 { transition: transform .2s, box-shadow .2s, border-color .2s; }
.kpi:hover, .kpi2:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-hover);
    border-color: rgba(246, 174, 16, .28);
}

.kpi2::after {
    content: "";
    position: absolute;
    right: -50px;
    top: -50px;
    width: 130px;
    height: 130px;
    opacity: .55;
    background: radial-gradient(circle, var(--brilho-ouro), transparent 68%);
    pointer-events: none;
}

.kpi h2, .kpi2 h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.kpi-label, .kpi2-label { font-size: 10.5px; letter-spacing: .9px; }
.kpi-icon { border-radius: 12px; width: 46px; height: 46px; }

.green-bg  { background: linear-gradient(145deg, rgba(45, 219, 160, .22), rgba(45, 219, 160, .06)); }
.blue-bg   { background: linear-gradient(145deg, rgba(80, 140, 255, .22), rgba(80, 140, 255, .06)); }
.purple-bg { background: linear-gradient(145deg, rgba(147, 108, 255, .22), rgba(147, 108, 255, .06)); }
.yellow-bg { background: linear-gradient(145deg, rgba(255, 185, 49, .24), rgba(255, 185, 49, .07)); }

.tipo-operacao-item { border-radius: 14px; }

.kpi2-progress { height: 6px; background: var(--linha-clara); }
.kpi2-progress-fill { background: linear-gradient(90deg, #1fbf87, var(--green)); }

/* ---------- 6. Botões e campos ---------- */
.btn-primary {
    height: 44px;
    padding: 0 20px;
    border-radius: 11px;
    background: var(--grad-ouro);
    color: #1b1300;
    font-weight: 800;
    letter-spacing: .1px;
    box-shadow: 0 10px 24px -12px rgba(246, 174, 16, .75), 0 1px 0 rgba(255, 255, 255, .35) inset;
}
.btn-primary:hover {
    background: var(--grad-ouro);
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px -12px rgba(246, 174, 16, .85), 0 1px 0 rgba(255, 255, 255, .4) inset;
}
.btn-primary:active { transform: translateY(0); filter: brightness(.97); }

.notification {
    border-radius: 11px;
    border-color: var(--linha-clara);
    background: linear-gradient(180deg, var(--glass-a), var(--glass-b)), var(--card);
}

.field input, .field select,
.auth-card .field input {
    height: 44px;
    border-radius: 11px;
    border: 1px solid var(--linha-clara);
    background: var(--input-bg);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input:hover, .field select:hover { border-color: rgba(246, 174, 16, .3); }
.field input:focus, .field select:focus,
.auth-card .field input:focus {
    border-color: var(--accent);
    box-shadow: var(--foco);
}

.field label { font-size: 10.5px; letter-spacing: .8px; }


/* campos com ícone/caixa própria: a borda fica na caixa, não no input */
.control {
    height: 44px;
    border-radius: 11px;
    border-color: var(--linha-clara);
    transition: border-color .15s, box-shadow .15s;
}
.control:hover { border-color: rgba(246, 174, 16, .3); }
.control:focus-within { border-color: var(--accent); box-shadow: var(--foco); }
.field .control input, .field .control input:hover, .field .control input:focus {
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* ---------- 7. Tabelas ---------- */
th {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
    padding: 11px 10px;
    border-bottom: 1px solid var(--linha-clara);
}
td { border-bottom: 1px solid var(--linha-clara); padding: 14px 10px; font-size: 12px; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: var(--glass-a); }

/* ---------- 8. Calendário ---------- */
.calendar-day { border-radius: 9px; }
.calendar-day.today { box-shadow: 0 0 0 1px rgba(246, 174, 16, .5), 0 0 16px -4px rgba(246, 174, 16, .45); }

/* ---------- 9. Janelas, aviso e topo no celular ---------- */
.gfb-dialogo, .gf-modal .gfb-dialogo {
    border-radius: 18px;
    border-color: var(--linha-clara);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
}

.toast { border-radius: 12px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7); }

@media (max-width: 900px) {
    .mobile-topbar {
        background: color-mix(in srgb, var(--sidebar) 82%, transparent);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--linha-clara);
    }
    .mobile-menu-btn { border-radius: 11px; border-color: var(--linha-clara); }
    .main { padding: 74px 16px 28px; }
    .header h1 { font-size: 25px; }
    .menu-item.active::before { left: -14px; }
}

@media (max-width: 540px) {
    .main { padding: 70px 12px 22px; }
    .card { padding: 18px; }
}

/* ---------- 10. Relatório impresso: não herda o tema ---------- */
@media print {
    body { background: #fff !important; }
    .rel-folha, .rel-folha * { box-shadow: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .kpi, .kpi2, .menu-item, .btn-primary { transition: none; }
    .kpi:hover, .kpi2:hover { transform: none; }
}

/* ---------- Pacote 56: botão "Nova aposta" do topo das páginas ---------- */
.btn-primary.btn-nova-aposta {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 46px; padding: 0 22px 0 14px; border-radius: 999px; border: 0; cursor: pointer; white-space: nowrap;
    font: inherit; font-size: 14.5px; font-weight: 800; letter-spacing: .15px; line-height: 1; text-decoration: none !important;
    color: #1b1300; background: var(--grad-ouro);
    box-shadow: 0 12px 26px -12px rgba(246, 174, 16, .85), 0 1px 0 rgba(255, 255, 255, .45) inset, 0 -2px 0 rgba(150, 90, 0, .25) inset;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary.btn-nova-aposta i { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(27, 19, 0, .88); color: #ffc93c; font-size: 12px; transition: transform .25s ease; }
.btn-primary.btn-nova-aposta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .6s ease; pointer-events: none; }
.btn-primary.btn-nova-aposta:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 16px 30px -12px rgba(246, 174, 16, .95), 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -2px 0 rgba(150, 90, 0, .25) inset; }
.btn-primary.btn-nova-aposta:hover i { transform: rotate(90deg) scale(1.05); }
.btn-primary.btn-nova-aposta:hover::after { transform: translateX(120%); }
.btn-primary.btn-nova-aposta:active { transform: translateY(0); filter: brightness(.97); }
.btn-primary.btn-nova-aposta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 540px) {
  .btn-primary.btn-nova-aposta { height: 46px; padding: 0 16px 0 10px; font-size: 14.5px; }
  .header-actions { flex-wrap: wrap; }
  .header-actions .btn-primary.btn-nova-aposta { flex: 1 1 100%; order: -1; }
}
@media (prefers-reduced-motion: reduce) { .btn-primary.btn-nova-aposta, .btn-primary.btn-nova-aposta i, .btn-primary.btn-nova-aposta::after { transition: none; } }