/* ============================================================
   Bolão — Tema escuro "verde e ouro" (redesign jul/2026).
   Camada aplicada SOBRE as classes utilitárias do Tailwind (CDN),
   para repaginar o site inteiro sem reescrever cada view.
   Carregada depois do Tailwind; usa !important onde precisa vencer.
   ============================================================ */
:root {
    --bg:        #0a0a0a;
    --bg-2:      #101318;
    --card:      #15181e;
    --card-2:    #191d24;
    --linha:     rgba(255, 255, 255, .07);
    --linha-2:   rgba(255, 255, 255, .12);
    --txt:       #e9edf0;
    --txt-2:     #c3c9d0;
    --txt-3:     #9aa1aa;
    --txt-4:     #6b727b;
    --verde:     #22e07b;
    --verde-esc: #0f9d58;
    --verde-txt: #04240f;
    --ouro:      #f5c518;
    --erro:      #fb7185;
    --grad:      linear-gradient(140deg, #22e07b, #0f9d58);
    --grad-head: linear-gradient(120deg, #0f9d58, #22e07b);
}

/* ---- Base ---- */
body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
    -webkit-font-smoothing: antialiased;
}
body.bg-slate-50,
body.bg-slate-100 { background: var(--bg) !important; color: var(--txt) !important; }
::selection { background: rgba(34, 224, 123, .3); }

/* ---- Superfícies / cards ---- */
.bg-white       { background: var(--card) !important; border: 1px solid var(--linha); }
.bg-slate-50    { background: var(--bg) !important; }
.bg-slate-100   { background: var(--card-2) !important; }
.bg-slate-200   { background: rgba(255, 255, 255, .08) !important; }
.bg-slate-900   { background: #0b0e13 !important; }
.shadow, .shadow-sm { box-shadow: 0 12px 34px rgba(0, 0, 0, .45) !important; }

/* ---- Texto ---- */
.text-slate-900 { color: var(--txt) !important; }
.text-slate-800 { color: var(--txt) !important; }
.text-slate-700 { color: var(--txt-2) !important; }
.text-slate-600 { color: var(--txt-2) !important; }
.text-slate-500 { color: var(--txt-3) !important; }
.text-slate-400 { color: var(--txt-4) !important; }
.text-slate-300 { color: #8b929b !important; }

/* ---- Verde / links ---- */
.text-green-700, .text-green-800, .text-green-600 { color: var(--verde) !important; }

/* ---- Botão primário (gradiente verde, texto escuro) ---- */
.bg-green-700, .bg-green-800 {
    background: var(--grad) !important;
    color: var(--verde-txt) !important;
    border: none !important;
}
.bg-amber-600 { background: var(--ouro) !important; color: #2a2000 !important; border: none !important; }

/* ---- Inputs ---- */
input:not([type=checkbox]):not([type=radio]),
textarea, select {
    background: var(--bg) !important;
    color: var(--txt) !important;
}
.border-slate-300, .border-slate-200 { border-color: var(--linha-2) !important; }
::placeholder { color: var(--txt-4) !important; opacity: 1; }

/* ---- Badges / tints ---- */
.bg-green-100 { background: rgba(34, 224, 123, .15) !important; }
.bg-amber-100 { background: rgba(245, 197, 24, .15) !important; }
.text-amber-700, .text-amber-600 { color: var(--ouro) !important; }
.bg-red-100   { background: rgba(244, 63, 94, .16) !important; }
.text-red-700, .text-red-500 { color: var(--erro) !important; }

/* ---- Caixas de alerta (fundo + borda) ---- */
.bg-green-50  { background: rgba(34, 224, 123, .1) !important; }
.bg-amber-50  { background: rgba(245, 197, 24, .1) !important; }
.bg-red-50    { background: rgba(244, 63, 94, .1) !important; }
.border-green-200, .border-green-300 { border-color: rgba(34, 224, 123, .3) !important; }
.border-amber-200 { border-color: rgba(245, 197, 24, .4) !important; }
.border-red-200   { border-color: rgba(244, 63, 94, .4) !important; }

/* ---- Destaque do líder (gold ring) ---- */
.ring-green-400 { box-shadow: inset 0 0 0 2px rgba(245, 197, 24, .5) !important; }

/* ============================================================
   Componentes próprios
   ============================================================ */

/* Botões grandes de palpite (1 / X / 2) e chips de pagamento. */
.btn-palpite {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: .75rem .5rem;
    border-radius: .75rem;
    border: 1.5px solid var(--linha-2);
    background: var(--bg);
    color: var(--txt-2);
    font-weight: 600;
    transition: all .12s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.btn-palpite:active { transform: scale(.97); }
.btn-palpite.selecionado {
    border-color: var(--verde);
    background: rgba(34, 224, 123, .15);
    color: var(--verde);
}

/* Escudos dos times */
.escudo { width: 28px; height: 28px; object-fit: contain; }