/* css/style.css - VERSIÓN APUESTAS DEPORTIVAS - DISEÑO MODERNO PREMIUM 2025 */

/* 1. IMPORTACIÓN DE FUENTES MODERNAS */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap');

:root {
    /* === PALETA PRINCIPAL MODERNIZADA === */
    --color-fondo-principal: #f2f5fa;
    --color-fondo-secundario: #ffffff;
    --color-fondo-card: #ffffff;

    /* Navbar */
    --color-navbar-fondo: #0d1627;

    /* Acentos vibrantes - más saturados y modernos */
    --color-acento-primario: #1a7fe8;       /* Azul eléctrico */
    --color-acento-secundario: #f5a623;     /* Dorado cálido */
    --color-acento-azul: #1a7fe8;
    --color-acento-rojo: #ef3b3b;
    --color-acento-verde: #0acf83;

    /* Texto - mayor contraste */
    --color-texto-principal: #0e1420;
    --color-texto-secundario: #4a5568;
    --color-texto-apagado: #94a3b8;

    /* Bordes - más sutiles */
    --color-bordes: #e2e8f2;
    --color-bordes-brillo: #c8d4e6;

    /* Estado */
    --color-exito: #0acf83;
    --color-peligro: #ef3b3b;

    /* Superficies */
    --color-fondo-oscuro: #0d1627;
    --color-superficie-oscura: #0d1627;

    /* Gradientes modernizados */
    --grad-acento: linear-gradient(135deg, #1a7fe8 0%, #0f5cc0 100%);
    --grad-dorado: linear-gradient(135deg, #f5a623 0%, #e08010 100%);
    --grad-navbar: linear-gradient(90deg, #08101e 0%, #0d1627 50%, #08101e 100%);
    --grad-hero: linear-gradient(135deg, #0d1627 0%, #1a7fe8 100%);
    --grad-card-hover: linear-gradient(135deg, rgba(26,127,232,0.04) 0%, rgba(26,127,232,0.01) 100%);

    /* Sombras refinadas */
    --shadow-azul: 0 4px 20px rgba(26, 127, 232, 0.28);
    --shadow-dorado: 0 4px 18px rgba(245, 166, 35, 0.30);
    --shadow-card: 0 1px 4px rgba(14, 20, 32, 0.06), 0 4px 16px rgba(14, 20, 32, 0.04);
    --shadow-card-hover: 0 4px 12px rgba(14, 20, 32, 0.08), 0 12px 32px rgba(14, 20, 32, 0.06);
    --shadow-elevated: 0 8px 32px rgba(14, 20, 32, 0.12), 0 2px 8px rgba(14, 20, 32, 0.06);

    /* Radios consistentes */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-pill: 100px;

    /* Transiciones */
    --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-mid: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. ESTILOS GENERALES DEL BODY Y STICKY FOOTER */
html {
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--color-fondo-principal);
    background-image: 
        radial-gradient(ellipse at 20% 0%, rgba(26,127,232,0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(26,127,232,0.03) 0%, transparent 50%);
    color: var(--color-texto-principal);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    padding-top: 3.8rem;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 3.8rem);
}

main {
    flex: 1;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    color: var(--color-texto-principal);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; }

a {
    text-decoration: none;
    color: var(--color-acento-primario);
    transition: color var(--transition-fast);
}

a:hover {
    color: #3d94f0;
}

hr {
    color: var(--color-bordes);
    border-color: var(--color-bordes);
    opacity: 1;
}


/* ===============================================================
   SECCIÓN 3: ESTILOS DEL HEADER — MODERNIZADO
   =============================================================== */

.navbar {
    background: var(--grad-navbar);
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(26, 127, 232, 0.12);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(26, 127, 232, 0.06);
    backdrop-filter: blur(12px);
}

.navbar-brand img {
    height: 40px;
    filter: drop-shadow(0 0 10px rgba(26, 127, 232, 0.35));
}

/* ---- BOTONES DE INGRESO / REGISTRO ---- */
.btn-header-login,
.btn-header-register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 18px;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    transition: all var(--transition-fast);
    border: 1px solid transparent;
    text-decoration: none !important;
    letter-spacing: 0.2px;
}

.btn-header-login {
    color: #fff;
    border-color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.12);
}
.btn-header-login:hover {
    background-color: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.6);
    color: #fff;
    box-shadow: 0 0 14px rgba(255,255,255,0.15);
}
.btn-header-login:active, .btn-header-login:focus {
    color: var(--color-acento-primario) !important;
    background-color: rgba(26, 127, 232, 0.14) !important;
    box-shadow: none !important;
}

.btn-header-register {
    background: var(--grad-acento);
    color: #ffffff;
    font-weight: 800;
    box-shadow: var(--shadow-azul);
}
.btn-header-register:hover {
    background: linear-gradient(135deg, #3d94f0 0%, #1a7fe8 100%);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 28px rgba(26, 127, 232, 0.42);
}

/* ---- VISTA PARA USUARIOS CON SESIÓN ---- */
.header-saldo-display {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 700;
    background: rgba(26, 127, 232, 0.1);
    color: #5aabff;
    border: 1px solid rgba(26, 127, 232, 0.22);
}
.header-saldo-display i {
    font-size: 1rem;
    margin-right: 6px;
    color: var(--color-acento-secundario);
    filter: drop-shadow(0 0 4px rgba(245, 166, 35, 0.55));
}

.btn-header-user-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    transition: all var(--transition-fast);
    text-decoration: none !important;
    color: #aab8d0 !important;
    background-color: transparent;
    border: 1px solid rgba(26, 127, 232, 0.18);
}
.btn-header-user-menu:hover {
    background-color: rgba(26, 127, 232, 0.1);
    border-color: rgba(26, 127, 232, 0.4);
    color: #5aabff !important;
    box-shadow: 0 0 12px rgba(26, 127, 232, 0.15);
}

.user-dropdown-menu {
    padding: 0.4rem !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elevated), 0 0 0 1px rgba(14, 20, 32, 0.06);
    border: 1px solid var(--color-bordes);
    background-color: #ffffff;
    margin-top: 0.5rem !important;
}
.user-dropdown-menu .dropdown-item {
    color: var(--color-texto-principal);
    font-weight: 500;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 0.84rem;
    transition: all var(--transition-fast);
}
.user-dropdown-menu .dropdown-item i {
    color: var(--color-acento-primario);
    font-size: 0.88rem;
}
.user-dropdown-menu .dropdown-item:hover {
    background-color: #eef5ff;
    color: var(--color-acento-primario);
}
.user-dropdown-menu .dropdown-divider {
    border-top-color: var(--color-bordes);
}


/* ===============================================================
   4. ESTILOS DE COMPONENTES GENERALES
   =============================================================== */

/* --- SIDEBAR --- */
.sidebar-container {
    background-color: #ffffff;
    border-radius: var(--radius-lg);
    padding: 10px;
    border: 1px solid var(--color-bordes);
    box-shadow: var(--shadow-card);
}
.sidebar-search-bar { position: relative; margin-bottom: 1rem; }
.sidebar-search-bar .form-control {
    padding-right: 70px;
    font-size: 0.84rem;
    height: 36px;
    background-color: #f6f8fb;
    border: 1px solid var(--color-bordes);
    color: var(--color-texto-principal);
    border-radius: var(--radius-md);
    font-family: inherit;
}
.sidebar-search-bar .form-control::placeholder { color: var(--color-texto-apagado); }
.sidebar-search-bar .form-control:focus {
    background-color: #ffffff;
    border-color: var(--color-acento-primario);
    box-shadow: 0 0 0 3px rgba(26, 127, 232, 0.12);
    color: var(--color-texto-principal);
}
.sidebar-search-bar .btn {
    position: absolute; top: 0; bottom: 0; height: 100%; width: 38px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent;
}
.sidebar-search-bar .btn-search { right: 38px; color: var(--color-acento-secundario); }
.sidebar-search-bar .btn-clear { right: 0; color: var(--color-texto-secundario); }

.sidebar-section .section-title {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--color-acento-primario);
    margin-bottom: 0.5rem;
    padding-left: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.popular-list { list-style: none; padding-left: 0; margin-bottom: 0; }
.popular-list li a {
    display: flex;
    align-items: center;
    padding: 8px 8px;
    color: var(--color-texto-secundario);
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    font-size: 0.84rem;
}
.popular-list li a:hover {
    background-color: #eef5ff;
    color: var(--color-texto-principal);
    transform: translateX(2px);
}
.popular-list li a i {
    margin-right: 10px; font-size: 1.05rem;
    color: var(--color-acento-primario); width: 20px; opacity: 0.75;
}
.sidebar-league-group { margin-bottom: 0.75rem; }
.sidebar-league-group .group-header {
    display: flex; align-items: center;
    font-weight: 700; padding: 6px 8px; font-size: 0.84rem;
    color: var(--color-texto-principal);
    border-bottom: 1px solid var(--color-bordes); margin-bottom: 4px;
}
.sidebar-league-group .group-header i { margin-right: 8px; color: var(--color-acento-secundario); }
.league-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 8px; font-size: 0.84rem;
    color: var(--color-texto-secundario); font-weight: 500;
    border-radius: var(--radius-md); transition: all var(--transition-fast);
}
.league-item:hover { background-color: #eef5ff; color: var(--color-texto-principal); }
.league-item .match-count {
    font-size: 0.7rem; color: var(--color-acento-primario);
    background-color: rgba(26, 127, 232, 0.1);
    padding: 1px 7px; border-radius: 10px; font-weight: 700;
}
.result-item { flex-direction: column; align-items: flex-start !important; line-height: 1.2; }
.result-item .match-info .teams { font-weight: 600; color: var(--color-texto-principal); font-size: 0.84rem; }
.result-item .match-info .league-and-time { font-size: 0.75rem; color: var(--color-texto-secundario); }

/* --- LISTA DE PARTIDOS --- */
.match-list-header {
    color: var(--color-texto-apagado);
    font-size: 0.68rem;
    text-transform: uppercase;
    font-weight: 700;
    padding-bottom: 0.5rem;
    letter-spacing: 0.6px;
}
.match-list-header > *:first-child { min-width: 0; overflow: hidden; }
.match-list-header, .match-row { display: grid; gap: 0.5rem; align-items: center; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--color-bordes); min-width: 0; }
.match-row {
    background-color: #ffffff;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}
.match-row:hover {
    background-color: #f5f9ff;
    box-shadow: inset 3px 0 0 var(--color-acento-primario);
}
.match-row-info { display: flex; align-items: center; gap: 0.75rem; min-width: 0; overflow: hidden; }
.match-row-time {
    text-align: center; color: var(--color-texto-secundario);
    font-size: 0.73rem; line-height: 1.2;
}
.match-row-time strong { color: var(--color-acento-primario); font-size: 0.78rem; display: block; font-weight: 800; }
.odd-button, .secondary-odds-group, .btn-more-markets { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; align-self: center; }
.match-row { align-items: stretch; }
.match-row .odd-button { align-self: stretch; }
.secondary-odds-group { gap: 0.25rem; }

.odd-button {
    background: #f4f7fc;
    border: 1px solid #dde5f0;
    color: #2c3e6b;
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.88rem;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.odd-button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26,127,232,0.06) 0%, transparent 100%);
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.odd-button:hover:not(:disabled) {
    background: #e8f2ff;
    border-color: #1a7fe8;
    color: #1a7fe8;
    box-shadow: 0 3px 14px rgba(26, 127, 232, 0.22);
    transform: translateY(-1px);
}
.odd-button:hover:not(:disabled)::after { opacity: 1; }
.odd-button.selected {
    background: linear-gradient(135deg, #ffcc00 0%, #f5a800 55%, #e89000 100%);
    border-color: #f5a800;
    color: #1a1200;
    box-shadow: 0 4px 20px rgba(245, 168, 0, 0.50), 0 0 0 2px rgba(255, 204, 0, 0.28);
    transform: translateY(-1px);
    font-weight: 900;
}
.odd-button.slim {
    flex-direction: column; font-size: 0.73rem; line-height: 1.1;
    min-height: 44px; padding: 0.2rem 0.4rem; flex-grow: 1;
}
.odd-button.slim .odd-market { font-weight: 500; font-size: 0.62rem; color: var(--color-texto-secundario); }
.odd-button.slim .odd-value { font-weight: 800; font-size: 0.83rem; }

.btn-more-markets {
    background-color: transparent;
    border: 1px solid var(--color-bordes);
    color: var(--color-texto-secundario);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}
.btn-more-markets:hover {
    background-color: #eef5ff;
    border-color: var(--color-acento-primario);
    color: var(--color-acento-primario);
    transform: translateY(-1px);
}

.past-match { display: none !important; }
a.teams-link.disabled, a.btn-more-markets.disabled { pointer-events: none; cursor: default; }
.match-list-header, .match-row:not(.basketball-layout):not(.tennis-layout) { grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr 0.5fr; }
.match-list-header.basketball-header, .match-row.basketball-layout { grid-template-columns: 1fr 110px 140px 140px 70px; }
.match-list-header.tennis-header, .match-row.tennis-layout { grid-template-columns: 2fr 1.5fr 0.5fr; }
.match-list-header.tennis-header > span:not(:first-child) { text-align: center; }
.odds-group-vertical { display: flex; flex-direction: column; gap: 0.25rem; justify-content: center; align-items: center; height: 100%; }
.no-odds-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 60px; font-size: 1.25rem; color: #495057; }
.odd-button.wide { display: flex; justify-content: space-between; align-items: center; padding: 0.3rem 0.6rem; width: 100%; }
.odd-button.wide .market-line { font-weight: 500; color: var(--color-texto-secundario); opacity: 0.85; font-size: 0.78rem; }
.odd-button.wide .odds-value { font-weight: 700; font-size: 0.88rem; }
.btn-more-markets.centered { display: flex; align-items: center; justify-content: center; height: 100%; }
.match-row.basketball-layout .ganador-group { justify-self: center; }
.match-list-header > span:not(:first-child) { text-align: center; }

.teams-link {
    font-weight: 500;
    line-height: 1.3;
    color: inherit;
    text-decoration: none;
    font-size: 0.84rem;
}
.teams-link:hover .teams { color: var(--color-acento-primario); }
.teams { display: flex; flex-direction: column; }
.teams .team-name-line {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15;
}
.match-group-header > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.odd-button.basketball-style {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.3rem;
    line-height: 1.1;
    height: 100%;
    min-height: 44px;
    text-align: center;
}
.odd-button.basketball-style .odd-label {
    font-size: 0.68rem; font-weight: 500; opacity: 0.9;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
}
.odd-button.basketball-style .odd-value { font-size: 0.88rem; font-weight: 700; }

/* --- FILTROS --- */
/* (Heredados del original) */

/* ===============================================================
   APUESTAS: MIS APUESTAS (BET CARDS) — MODERNIZADO
   =============================================================== */

.bet-card-item {
    background-color: #ffffff;
    border-radius: var(--radius-xl);
    margin-bottom: 0.75rem;
    position: relative;
    border: 1px solid var(--color-bordes);
    border-left: 4px solid var(--color-bordes);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
/* El collapse de Bootstrap no tiene altura definida, lo hacemos transparente
   para el layout con display:grid en el card cuando está expandido */
.bet-card-item.is-expanded > .collapse,
.bet-card-item.is-expanded > .collapse.show {
    display: block !important;
}
.bet-card-item:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}
/* Borde izquierdo de color según estado — solo border-left, sin ::before */
.bet-card-item.status-ganada   { border-left-color: #0acf83; }
.bet-card-item.status-perdida  { border-left-color: #ef3b3b; }
.bet-card-item.status-pendiente { border-left-color: #f5a623; }
.bet-card-item.status-anulada  { border-left-color: #94a3b8; }
.bet-card-item.status-cobrada  { border-left-color: #0acf83; }
.bet-card-item.status-live     { border-left-color: #ef3b3b; }

.bet-card-summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 0.65rem 0.65rem 0.75rem;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}
.bet-card-summary:hover { background-color: rgba(26, 127, 232, 0.02); }

.summary-main-content { flex-grow: 1; }
.summary-line-1 { font-size: 0.73rem; font-weight: 500; margin-bottom: 0.3rem; color: var(--color-texto-principal); }
.summary-line-1 .bet-type { font-weight: 700; }
.summary-line-1 .bet-odds { color: var(--color-acento-secundario); font-weight: 800; }
.summary-line-2 .compact-selection-item:not(:last-child) { margin-bottom: 0.3rem; }
.summary-line-2 .compact-selection-market { font-weight: 700; font-size: 0.88rem; color: var(--color-texto-principal); }
.summary-line-2 .compact-selection-teams { font-size: 0.73rem; color: var(--color-texto-secundario); }

.summary-meta-content { text-align: right; font-size: 0.68rem; color: var(--color-texto-secundario); flex-shrink: 0; }
.bet-meta { margin-bottom: 0.4rem; }
.bet-financials { font-size: 0.73rem; }
.bet-financials span { display: block; }
.bet-financials strong { font-weight: 700; color: var(--color-texto-principal); }

.bet-status-text.status-ganada { color: #0acf83; font-weight: 800; }
.bet-status-text.status-perdida { color: #ef3b3b; font-weight: 800; }
.bet-status-text.status-pendiente { color: #e08010; font-weight: 800; }
.bet-status-text.status-anulada { color: #7a8fa8; font-weight: 700; }
.bet-status-text.status-cobrada { color: #0acf83; font-weight: 800; }

.bet-card-details {
    display: flex;
    padding: 0;
    background-color: #f8fafd;
    border-top: 1px solid var(--color-bordes);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    align-items: stretch;
}
.segmented-status-bar {
    display: flex;
    flex-direction: column;
    width: 4px;
    flex-shrink: 0;
    background-color: var(--color-bordes);
    border-radius: 0 0 0 var(--radius-md);
    overflow: hidden;
    align-self: stretch;
}
.status-segment { flex: 1 1 0; min-height: 4px; }
.segment-ganada { background-color: #0acf83; }
.segment-perdida { background-color: #ef3b3b; }
.segment-pendiente { background-color: #f5a623; }

.details-list-container { flex-grow: 1; padding: 0.5rem 0.65rem 0.65rem 0.65rem; }
.bet-detail-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-bordes);
}
.bet-detail-item:last-child { border-bottom: none; padding-bottom: 0; }
.detail-number { font-size: 1.1rem; font-weight: 700; color: var(--color-bordes-brillo); margin-right: 0.6rem; }
.detail-content { flex-grow: 1; }
.detail-market { font-size: 0.84rem; font-weight: 700; color: var(--color-texto-principal); }
.detail-teams { font-size: 0.73rem; color: var(--color-texto-secundario); }
.detail-meta { font-size: 0.68rem; color: var(--color-texto-apagado); margin-top: 0.1rem; }
.detail-score {
    font-size: 0.7rem; color: var(--color-texto-principal);
    background-color: rgba(26, 127, 232, 0.07);
    border: 1px solid rgba(26, 127, 232, 0.16);
    padding: 0.2rem 0.5rem; border-radius: 5px;
    display: inline-block; margin-top: 0.2rem; margin-bottom: 0.2rem; font-weight: 600;
    font-family: 'DM Mono', monospace;
    letter-spacing: 0.5px;
}
.detail-status { font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.detail-status-ganada { color: #0acf83; }
.detail-status-perdida { color: #ef3b3b; }
.detail-status-pendiente { color: #e08010; }

/* --- MIS APUESTAS: NUEVO DISEÑO (overrides finales) --- */
.bet-date { font-weight: 500; }
.bet-id {
    font-size: 0.63rem;
    color: #94a3b8;
    font-family: 'DM Mono', monospace;
    letter-spacing: 0.3px;
}
.bet-financials span strong { font-weight: 700; color: var(--color-texto-principal); }
.bet-card-details {
    background-color: #f8fafd;
    border-top: 1px solid #ecf0f8;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    align-items: stretch;
}
.segmented-status-bar {
    display: flex;
    flex-direction: column;
    width: 5px;
    flex-shrink: 0;
    background-color: #e6eaf0;
    border-radius: 0 0 0 10px;
    overflow: hidden;
    align-self: stretch;
}
.status-segment { flex: 1 1 0; transition: all 0.3s ease; min-height: 4px; }
.detail-number {
    font-size: 0.88rem; font-weight: 800; color: #b8c4d4;
    min-width: 22px; text-align: center;
    background: #ffffff; border-radius: 50%;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #e6eaf0; flex-shrink: 0;
}
.detail-market { font-size: 0.8rem; font-weight: 700; color: var(--color-texto-principal); margin-bottom: 1px; }
.detail-teams { font-size: 0.68rem; color: #6b7d95; }
.detail-meta { font-size: 0.65rem; color: #94a3b8; margin-top: 2px; }
.detail-score {
    font-size: 0.68rem; font-weight: 700; color: var(--color-texto-principal);
    background: #ffffff; border: 1px solid #dce3ef;
    padding: 2px 10px; border-radius: 6px; display: inline-block;
    margin-top: 3px; letter-spacing: 0.4px;
}
.detail-status {
    font-size: 0.7rem; font-weight: 700; white-space: nowrap;
    padding: 3px 10px; border-radius: var(--radius-pill);
}
.detail-status-ganada { background: #e8fdf3; color: #00a046; }
.detail-status-perdida { background: #fff0f0; color: #d63031; }
.detail-status-pendiente { background: #fff5e6; color: #c2700a; }

.bet-card-item.status-live { border-left-color: #ef3b3b; }
.bet-status-text.status-live {
    background: #fff0f0;
    color: #ef3b3b;
    font-weight: 800;
    animation: live-text-pulse 1.8s ease-in-out infinite;
}
@keyframes live-text-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ── FIX barra lateral: sin duplicado y altura completa ── */

/* Cerrado: solo border-left del card, sin barra segmentada */
.bet-card-item:not(.is-expanded) .segmented-status-bar {
    display: none;
}

/* Abierto: quitar border-left del card, mostrar barra segmentada */
.bet-card-item.is-expanded {
    border-left-color: transparent !important;
}

.cashout-btn {
    font-size: 0.67rem; font-weight: 700;
    padding: 4px 10px; border-radius: 8px;
    background: #e8f9ef; border: 1px solid #b4dfc4; color: #1a7a3c;
    transition: all var(--transition-fast); white-space: nowrap; cursor: pointer;
}
.cashout-btn:hover {
    background: #cef0db; border-color: #6ecf95; transform: translateY(-1px);
}
.cashout-btn.btn-confirm {
    background: #fff4e0; border-color: #ffb74d; color: #e65100;
    animation: confirm-shake 0.6s ease-in-out;
}
@keyframes confirm-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

.bet-meta-mobile { display: none; }
.bet-meta-desktop { display: block; }

/* VERSIÓN MOBILE - MIS APUESTAS */
@media (max-width: 767.98px) {
    .bet-card-summary {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.9rem 1rem 0.9rem 1.2rem;
    }
    .summary-meta-content { width: 100%; text-align: left; }
    .bet-financials {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        padding-top: 0.5rem;
        margin-top: 0.5rem;
        border-top: 1px solid #ecf0f8;
    }
    .bet-financials span { display: inline; }
    .bet-meta-mobile { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.68rem; color: #8a94a6; margin: 0.2rem 0 0.4rem; }
    .bet-meta-desktop { display: none; }
    .summary-line-1 { flex-wrap: wrap; gap: 0.4rem; }
    .bet-status-text { margin-left: 0; }
    .compact-selection-market { font-size: 0.76rem; }
    .compact-selection-teams { font-size: 0.66rem; }
    .detail-number { width: 20px; height: 20px; font-size: 0.73rem; }
}

.bets-sub-tabs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.bets-sub-tabs-row .bets-sub-tabs { flex: 1 1 auto; }
.bets-sub-tabs-row .date-filter-bar {
    flex: 0 0 auto; display: flex; align-items: center;
    gap: 0.25rem; margin: 0; padding: 0; border: none; background: none;
}


/* ===============================================================
   4. ESTILOS DE COMPONENTES GENERALES (cont.)
   =============================================================== */

/* --- PÁGINA REGISTRO Y LOGIN --- */
#page-registro-moderno { background-color: #f2f5fa; }
.info-panel {
    background-image: linear-gradient(to top, rgba(240, 244, 248, 0.92), rgba(26, 127, 232, 0.08)),
    url('/img/registro.avif');
    background-size: cover; background-position: center; padding: 1.5rem;
}
.info-panel .lead { color: rgba(255, 255, 255, 0.8); font-size: 0.9rem; }
.form-panel { background-color: #f8fafc; padding: 1.5rem; }
.form-container { width: 100%; max-width: 650px; border: none; border-radius: var(--radius-xl); }
.step-name { font-weight: 600; font-size: 0.8rem; color: var(--color-texto-secundario); }
.form-step { display: none; animation: fadeIn 0.5s ease; }
.form-step.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

#loginModal .modal-content {
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-bordes);
    box-shadow: 0 20px 60px rgba(0,0,0,0.85);
    background-color: #ffffff;
}
#loginModal .modal-header { border-bottom: 1px solid var(--color-bordes); font-weight: 700; font-size: 1rem; color: var(--color-texto-principal); }
#loginModal .modal-footer { background-color: #f8fafc; border-top: 1px solid var(--color-bordes); }
#loginModal .form-control:focus { border-color: var(--color-acento-primario); box-shadow: 0 0 0 0.25rem rgba(26, 127, 232, 0.18); }

/* --- PRELOADER --- */
#preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999; display: flex; flex-direction: column; justify-content: center;
    align-items: center;
    background: radial-gradient(ellipse at center, #0d2847 0%, #08101e 70%);
    opacity: 1; visibility: visible;
}
.preloader-logo { width: 120px; margin-bottom: 1.2rem; animation: preloader-pulse 2s infinite ease-in-out; filter: drop-shadow(0 0 22px rgba(26, 127, 232, 0.5)); }
#preloader.preloader-hidden { opacity: 0; visibility: hidden; transition: all 0.5s ease; }
@keyframes preloader-pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.06); opacity: 1; }
}

/* --- FOOTER --- */
.site-footer { padding: 1.5rem 0; text-align: center; margin-top: auto; font-size: 0.85rem; background-color: #0e1d38; }
.footer-main { padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-logo { max-height: 35px; filter: drop-shadow(0 0 8px rgba(255,255,255,0.2)); }
.footer-description { line-height: 1.5; font-size: 0.8rem; color: rgba(255,255,255,0.6); }
.footer-heading { color: #f5a623; font-weight: 800; font-size: 0.82rem; margin-bottom: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }
.footer-links li { margin-bottom: 0.4rem; }
.footer-links a { color: rgba(255,255,255,0.65); text-decoration: none; transition: color var(--transition-fast), padding-left var(--transition-fast); font-size: 0.8rem; }
.footer-links a:hover { color: #f5a623; padding-left: 5px; }
.footer-links li span, .footer-links li i { color: rgba(255,255,255,0.5) !important; font-size: 0.8rem; }
.social-icons a { color: rgba(255,255,255,0.6); font-size: 1.22rem; margin-right: 0.8rem; transition: color var(--transition-fast), transform var(--transition-fast); }
.social-icons a:hover { color: #f5a623; transform: scale(1.18); filter: drop-shadow(0 0 6px rgba(245, 166, 35, 0.55)); }
.partner-group { text-align: center; }
.partner-title { color: rgba(255,255,255,0.45); font-size: 0.73rem; text-transform: uppercase; margin-bottom: 0.6rem; letter-spacing: 0.5px; }
.partner-logos { display: flex; align-items: center; gap: 1.2rem; }
.partner-logos img { max-height: 30px; transition: filter var(--transition-fast), transform var(--transition-fast); filter: brightness(1.1); }
.partner-logos img:hover { filter: brightness(1.35); transform: translateY(-2px); }
.footer-bottom { text-align: center; padding: 1rem 0; font-size: 0.73rem; color: rgba(255,255,255,0.45); background-color: #08101e; margin: 0 -20px; padding: 1rem 20px; }
.site-footer .partner-logos { display: flex; justify-content: center; align-items: center; gap: 0.8rem; }
.site-footer .partner-logos img {
    background-color: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 6px; padding: 0.25rem 0.5rem; height: 28px;
    transition: all var(--transition-fast);
}
.site-footer .partner-logos img:hover {
    transform: translateY(-2px);
    background-color: rgba(255,255,255,0.14);
    border-color: rgba(245, 163, 35, 0.42);
}

/* --- PÁGINA DEPORTES --- */
.page-header-deportes {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-bordes);
    box-shadow: var(--shadow-card);
}
.accordion-sports-custom .accordion-item {
    background-color: #ffffff;
    border: 1px solid var(--color-bordes);
    border-radius: var(--radius-lg) !important;
    margin-bottom: 0.6rem;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.accordion-sports-custom .accordion-item:hover { border-color: #c5d4ea; box-shadow: var(--shadow-card-hover); }
.accordion-sports-custom .accordion-header { border-radius: var(--radius-lg); }
.accordion-sports-custom .accordion-button {
    font-size: 0.95rem; font-weight: 700; color: var(--color-texto-principal);
    background-color: transparent; border-radius: var(--radius-lg); padding: 0.8rem 1rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.accordion-sports-custom .accordion-button:not(.collapsed) {
    color: var(--color-acento-primario);
    background-color: rgba(26, 127, 232, 0.04);
    box-shadow: none;
}
.accordion-sports-custom .accordion-button:focus { box-shadow: 0 0 0 0.2rem rgba(26, 127, 232, 0.18); }
.accordion-sports-custom .accordion-button::after {
    font-family: "bootstrap-icons"; content: "\F4FE";
    transform: scale(1); font-weight: bold;
    background-image: none; color: var(--color-texto-secundario);
}
.accordion-sports-custom .accordion-button:not(.collapsed)::after {
    content: "\F463"; transform: scale(1) rotate(0deg);
    color: var(--color-acento-primario);
}
.accordion-sports-custom .accordion-body { padding: 0 0.8rem 0.8rem 0.8rem; }
.accordion-sports-custom .list-group-item {
    border: none; padding: 0.6rem 0.8rem; border-radius: 8px;
    font-weight: 500; font-size: 0.84rem;
    background-color: transparent; color: var(--color-texto-secundario);
    transition: all var(--transition-fast);
}
.accordion-sports-custom .list-group-item:hover { background-color: #eef5ff; color: var(--color-acento-primario); }
.sport-icon { width: 20px; height: 20px; vertical-align: middle; }


/* ===============================================================
   PARTIDO DETALLE
   =============================================================== */

body#page-partido-detalle { background-color: var(--color-fondo-principal); }

#match-header.match-info-card {
    background: linear-gradient(135deg, #f8fafd 0%, #eef5ff 100%);
    border: 1px solid var(--color-bordes);
    border-radius: var(--radius-xl);
    padding: 1.2rem;
    box-shadow: var(--shadow-card);
}
.matchup-container { display: flex; justify-content: space-around; align-items: center; text-align: center; }
.team-info { display: flex; flex-direction: column; align-items: center; width: 40%; }
.team-logo-placeholder {
    width: 50px; height: 50px;
    background-color: rgba(26, 127, 232, 0.04);
    border: 2px dashed var(--color-bordes-brillo);
    border-radius: 50%; margin-bottom: 0.4rem;
}
.match-info-card img { width: 50px; height: 50px; object-fit: contain; margin-bottom: 0.4rem; }
.team-name { font-size: 0.88rem; font-weight: 700; color: var(--color-texto-principal); }
.matchup-separator {
    font-size: 1rem; font-weight: 800; color: var(--color-acento-primario);
    text-shadow: 0 0 10px rgba(26, 127, 232, 0.28);
}
.match-details-list { margin-top: 0.4rem; }
.detail-item { display: flex; justify-content: space-between; padding: 0.4rem 0.2rem; font-size: 0.78rem; border-bottom: 1px solid var(--color-bordes); }
.detail-item:last-child { border-bottom: none; }
.detail-label { color: var(--color-texto-secundario); }
.detail-value { font-weight: 600; color: var(--color-texto-principal); }

#markets-container .card.market-card {
    background-color: #ffffff;
    border: 1px solid var(--color-bordes);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    margin-bottom: 0.6rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
#markets-container .card.market-card:hover { border-color: #c5d4ea; box-shadow: var(--shadow-card-hover); }
.market-card .card-header {
    background: linear-gradient(90deg, rgba(26, 127, 232, 0.05) 0%, transparent 100%);
    font-weight: 700; color: var(--color-texto-principal);
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--color-bordes);
    font-size: 0.88rem;
    border-left: 3px solid var(--color-acento-primario);
}
.market-card .card-body { padding: 0.8rem; }

.odd-button-detail {
    display: flex; justify-content: space-between; align-items: center;
    background: #f4f7fc;
    border: 1px solid #dde5f0;
    color: #2c3e6b;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    font-weight: 600;
    padding: 0.4rem 0.65rem;
    font-size: 0.84rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.odd-button-detail:hover:not(:disabled) {
    background: #e5efff;
    border-color: var(--color-acento-primario);
    color: var(--color-acento-primario);
    box-shadow: 0 0 14px rgba(26, 127, 232, 0.2);
    transform: translateY(-2px);
}
.odd-button-detail.selected {
    background: linear-gradient(135deg, #ffcc00 0%, #f5a800 55%, #e89000 100%);
    border-color: #f5a800;
    color: #1a1200;
    box-shadow: 0 4px 20px rgba(245, 168, 0, 0.50), 0 0 0 2px rgba(255, 204, 0, 0.28);
    font-weight: 900;
}
.odd-button-detail strong { font-size: 1rem; font-weight: 800; }

#match-header {
    background: linear-gradient(135deg, #f8fafd 0%, #eef5ff 100%);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: 1.2rem;
    text-align: center;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-bordes);
    position: sticky;
    top: 1.5rem;
}
#match-header .match-meta-info {
    display: flex; justify-content: center; gap: 1.2rem;
    font-size: 0.78rem; color: var(--color-texto-secundario);
    margin-bottom: 0.8rem; padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--color-bordes);
}
#match-header .match-meta-info span { display: flex; align-items: center; }
#match-header .match-meta-info i { margin-right: 0.5rem; color: var(--color-acento-primario); }
#match-header .match-info { margin-bottom: 0.8rem; }
#match-header .team-names { font-size: 1.2rem; font-weight: 800; line-height: 1.3; }
#match-header .match-datetime { font-size: 0.84rem; color: var(--color-texto-secundario); margin-top: 0.4rem; }
#match-header .countdown-container {
    background: linear-gradient(135deg, rgba(26, 127, 232, 0.07), rgba(74, 144, 226, 0.04));
    border: 1px solid rgba(26, 127, 232, 0.18);
    background-size: cover; background-position: center;
    padding: 1.2rem; border-radius: var(--radius-lg); margin-top: 0.8rem;
}
#match-header .countdown-title {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--color-acento-primario); margin-bottom: 0.8rem; font-weight: 700;
}
#match-header .countdown-timer { display: flex; justify-content: center; gap: 0.4rem; flex-wrap: wrap; }
#match-header .time-block {
    background-color: rgba(26, 127, 232, 0.05);
    border: 1px solid var(--color-bordes);
    padding: 0.5rem; border-radius: 8px; min-width: 55px;
}
#match-header .time-value { font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--color-acento-primario); font-variant-numeric: tabular-nums; }
#match-header .time-label { font-size: 0.62rem; text-transform: uppercase; color: var(--color-texto-secundario); letter-spacing: 0.5px; }
#match-header #external-links-container { margin-top: 1.2rem; }


/* ===============================================================
   7. RECIBO PDF POS
   =============================================================== */
.receipt-container { width: 300px; padding: 12px; font-family: 'DM Mono', 'Courier New', monospace; font-size: 11px; color: #000; background-color: #fff; border: 1px solid #ccc; }
.receipt-header { text-align: center; }
.receipt-logo { max-width: 120px; margin-bottom: 8px; }
.receipt-header p { margin: 0; line-height: 1.3; }
.receipt-divider { border-top: 1px dashed #000; margin: 8px 0; }
.receipt-info { display: flex; justify-content: space-between; }
.receipt-items-header { display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 4px; }
.receipt-item { margin-bottom: 6px; }
.receipt-item-line { display: flex; justify-content: space-between; }
.receipt-item-teams { font-size: 10px; color: #555; padding-left: 5px; }
.receipt-summary-line { display: flex; justify-content: space-between; margin-bottom: 4px; }
.receipt-summary-line.total { font-weight: bold; font-size: 12px; margin-top: 8px; }
.receipt-footer { margin-top: 12px; text-align: center; font-size: 9px; }

/* --- SIDEBAR ICONS --- */
.sidebar-league-group .group-header .sport-icon { width: 18px; height: 18px; margin-right: 6px; vertical-align: middle; }
.detail-score {
    font-size: 0.68rem; color: var(--color-texto-principal);
    background-color: rgba(26, 127, 232, 0.07);
    padding: 0.2rem 0.5rem; border-radius: 5px;
    display: inline-block; margin-top: 0.2rem; margin-bottom: 0.2rem;
}

/* --- ENCABEZADO DE GRUPO DE LIGA --- */
.match-group-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(90deg, rgba(26, 127, 232, 0.06) 0%, transparent 100%);
    padding: 0.55rem 0.6rem;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--color-acento-primario);
    border-bottom: 1px solid var(--color-bordes);
    border-left: 3px solid var(--color-acento-primario);
    margin-top: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.match-group-header:first-of-type { margin-top: 0; }
.match-group-header .country-flag { height: 16px; width: auto; border: 1px solid rgba(255,255,255,0.1); border-radius: 2px; }

.bet-meta-mobile { display: none; }

/* ===============================================================
   8. RESPONSIVE MÓVIL — VERSIÓN DEFINITIVA
   =============================================================== */
@media (max-width: 767.98px) {

    .match-list-header > span:nth-child(5),
    .match-list-header > span:nth-child(6),
    .match-row .secondary-odds-group,
    .match-row .btn-more-markets { display: none; }

    .match-list-header, .match-row:not(.basketball-layout):not(.tennis-layout) {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 0.25rem;
    }

    .match-row-info { gap: 6px; flex-wrap: nowrap; overflow: hidden; align-items: center; }
    .teams-link { font-size: 0.73rem; min-width: 0; overflow: hidden; }
    .teams .team-name-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }

    .odd-button { padding: .15rem .3rem; font-size: 0.73rem; min-width: 35px; }
    .odd-button.slim { font-size: 0.68rem; padding: .1rem .2rem; }
    .btn-more-markets { font-size: 0.73rem; padding: .15rem .3rem; }

    .match-row.basketball-layout .btn-more-markets,
    .match-row.tennis-layout .btn-more-markets { display: none; }

    .match-list-header.basketball-header,
    .match-row.basketball-layout {
        display: grid;
        grid-template-columns: minmax(90px, 1.5fr) repeat(3, 1fr);
        gap: 0.2rem;
        align-items: stretch;
    }

    .match-list-header.tennis-header,
    .match-row.tennis-layout {
        display: grid;
        grid-template-columns: 2fr 1.5fr;
        gap: 0.2rem;
    }

    .match-list-header.basketball-header { font-size: 0.53rem; font-weight: 600; text-transform: uppercase; }
    .match-list-header.basketball-header > span { text-align: center; white-space: normal; line-height: 1.1; }

    .odd-button.basketball-style {
        display: flex; flex-direction: column; justify-content: center;
        align-items: center; height: 100%;
        padding: 0.15rem 0.1rem; line-height: 1; min-height: 40px;
    }
    .odd-button.basketball-style .odd-label { font-size: 0.63rem; font-weight: 500; }
    .odd-button.basketball-style .odd-value { font-size: 0.78rem; font-weight: 700; }

    .match-row-info { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex-grow: 1; padding-right: 6px; }
    .match-datetime-header { font-size: 0.68rem; color: #6c757d; margin-bottom: 2px; text-transform: capitalize; white-space: nowrap; }
    .bet-meta-desktop { display: none; }
    .bet-meta-mobile { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.68rem; color: var(--color-texto-secundario); margin: 0.2rem 0 0.4rem 0; }
    .bet-card-summary { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
    .summary-meta-content { width: 100%; text-align: left; }
    .bet-financials { font-size: 0.73rem; color: var(--color-texto-secundario); display: flex; justify-content: space-between; width: 100%; padding-top: 0.5rem; margin-top: 0.5rem; border-top: 1px solid var(--color-bordes); }
    .bet-financials span { display: inline-block; }
    .compact-selection-market { font-size: 0.78rem; font-weight: 600; color: var(--color-texto-principal); }
    .compact-selection-teams { font-size: 0.68rem; color: var(--color-texto-secundario); }
}

@media (max-width: 991.98px) {
    .navbar .container { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 100%; }
}

.bg-custom-nav { background-color: #0d1627 !important; }
#sidebar-placeholder.sticky-top { top: 5rem; }


/* ===============================================================
   PESTAÑAS DE MERCADOS — MODERNIZADAS
   =============================================================== */

:root {
    --tab-active-bg: var(--color-acento-primario);
    --tab-active-text: #ffffff;
    --tab-inactive-bg: #eef2f8;
    --tab-inactive-text: var(--color-texto-secundario);
    --tab-hover-bg: #dde8f6;
}

#markets-container .nav-tabs { border-bottom: 1px solid var(--color-bordes); gap: 6px; padding: 0 6px; }
#markets-container .nav-tabs .nav-link {
    border: none !important;
    border-radius: var(--radius-pill);
    margin-bottom: -1px;
    background-color: var(--tab-inactive-bg);
    color: var(--tab-inactive-text);
    font-weight: 600;
    transition: all var(--transition-fast);
    font-family: 'Plus Jakarta Sans', sans-serif;
}
#markets-container .nav-tabs .nav-link:hover:not(.active) { background-color: var(--tab-hover-bg); border-color: transparent; color: var(--color-texto-principal); }
#markets-container .nav-tabs .nav-link.active {
    background-color: var(--tab-active-bg);
    color: var(--tab-active-text);
    box-shadow: var(--shadow-azul);
    transform: translateY(-2px);
    font-weight: 800;
}
#markets-container .nav-tabs .nav-link:focus { box-shadow: none; outline: none; }

@media (max-width: 768px) {
    #markets-container .nav-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    #markets-container .nav-tabs::-webkit-scrollbar { display: none; }
}

.pestabas-wrapper {
    background-color: #ffffff;
    border-radius: var(--radius-lg);
    padding: 6px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-bordes);
}
.pestabas-wrapper .nav-tabs { border-bottom: none; gap: 5px; }
.pestabas-wrapper .nav-tabs .nav-link {
    border: none !important;
    border-radius: 8px;
    background-color: transparent;
    color: var(--color-texto-secundario);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 12px;
    transition: all var(--transition-fast);
    white-space: nowrap;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.pestabas-wrapper .nav-tabs .nav-link:hover:not(.active) { background-color: #eef5ff; color: var(--color-texto-principal); transform: translateY(-1px); }
.pestabas-wrapper .nav-tabs .nav-link.active {
    background: var(--grad-acento);
    color: #ffffff;
    box-shadow: var(--shadow-azul);
    transform: translateY(-1px);
    font-weight: 800;
}

@media (max-width: 768px) {
    .pestabas-wrapper .nav-tabs { flex-wrap: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
    .pestabas-wrapper .nav-tabs::-webkit-scrollbar { display: none; }
    .btn-flotante-soporte { bottom: 70px !important; right: 15px !important; }
    .pestabas-wrapper .nav-tabs .nav-link { font-size: 0.73rem; padding: 5px 10px; }
    .navbar .container, .navbar .container-fluid { display: flex; justify-content: space-between; align-items: center; width: 100%; }
    .navbar-brand { flex-grow: 0; margin-right: auto; }
    #nav-user-buttons { display: flex; align-items: center; gap: 0.4rem; }
    .header-saldo-display, .btn-header-user-menu { padding: 0.25rem 0.5rem; font-size: 0.73rem; line-height: 1.4; height: 32px; display: flex; align-items: center; margin-right: 0 !important; }
    .btn-header-user-menu { max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}


/* ===============================================================
   BOTÓN FLOTANTE DE SOPORTE
   =============================================================== */

.btn-flotante-soporte {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1050;
    background-color: #25D366;
    color: #ffffff;
    border-radius: var(--radius-pill);
    padding: 8px 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(37,211,102,0.3);
    transition: all var(--transition-mid);
    font-size: 0.88rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.btn-flotante-soporte:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22), 0 0 20px rgba(37,211,102,0.3);
    color: #ffffff;
}

.odd-placeholder { height: 36px; border-radius: var(--radius-sm); background-color: #f4f7fc; }


/* ===============================================================
   EN DIRECTO — INDICADORES
   =============================================================== */

.bet-card-item.status-live { border-left-color: var(--color-acento-rojo); }
.bet-status-text.status-live { color: var(--color-acento-rojo); font-weight: bold; }

.live-indicator, .live-indicator-summary { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--color-acento-rojo); }
.live-indicator { font-size: 0.73rem; margin-left: 6px; }
.live-indicator-summary { font-size: 0.68rem; margin-left: 4px; }

.live-dot {
    width: 7px !important; height: 7px !important;
    background-color: var(--color-acento-rojo) !important;
    border-radius: 50% !important; display: inline-block !important;
    opacity: 1 !important; animation: pulse 1.5s infinite ease-in-out !important;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}


/* ===============================================================
   BOLETO DE APUESTAS (BET SLIP) — MODERNIZADO
   =============================================================== */

.bet-slip-modern {
    position: fixed;
    bottom: 0;
    right: 20px;
    width: 335px;
    max-width: 92vw;
    background-color: #f4f7fb;
    color: #0e1420;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.16), 0 -1px 0 rgba(26, 127, 232, 0.08);
    transform: translateY(100%);
    transition: transform var(--transition-slow);
    z-index: 1050;
    overflow: hidden;
}
.bet-slip-modern.visible { transform: translateY(0); }

.slip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: linear-gradient(135deg, #f5a623 0%, #e08010 100%);
    color: white;
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.slip-header h5 { margin: 0; font-size: 0.92rem; font-weight: 700; font-family: 'Plus Jakarta Sans', sans-serif; }
.slip-header-info { display: flex; align-items: center; gap: 8px; }
.slip-badge {
    background-color: rgba(0,0,0,0.18);
    color: white;
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-weight: 800; font-size: 0.73rem;
}
.slip-total-odds-collapsed { display: none; }

.slip-body { padding: 12px 8px; max-height: 400px; overflow-y: auto; transition: max-height 0.4s ease-out, padding 0.4s ease-out; }

.slip-selection-item {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 8px;
    background-color: #ffffff;
    color: var(--color-texto-principal);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-bordes);
    transition: box-shadow var(--transition-fast);
}
.slip-selection-item:hover { box-shadow: var(--shadow-card-hover); }
.slip-selection-info .market { font-weight: 700; font-size: 0.84rem; margin-bottom: 2px; }
.slip-selection-info .teams { font-size: 0.68rem; color: var(--color-texto-secundario); }
.slip-selection-details { display: flex; align-items: center; margin-left: auto; gap: 12px; }
.slip-selection-details .odds { font-weight: 800; font-size: 1rem; color: var(--color-acento-primario); }
.slip-remove-btn {
    background: #eef2f8; color: var(--color-texto-secundario);
    border: none; width: 22px; height: 22px; border-radius: 50%;
    cursor: pointer; font-weight: bold; line-height: 20px;
    transition: all var(--transition-fast); font-size: 0.78rem;
    display: flex; align-items: center; justify-content: center;
}
.slip-remove-btn:hover { background-color: #ef3b3b; color: white; transform: scale(1.1); }

.slip-footer {
    padding: 12px;
    background: #ffffff;
    border-top: 1px solid var(--color-bordes);
    transition: max-height 0.4s ease-out, padding 0.4s ease-out, opacity 0.4s ease-out;
}
.slip-summary-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px; font-size: 0.84rem;
}
.slip-summary-row .label { color: var(--color-texto-secundario); }
.slip-summary-row .value { font-weight: 700; font-size: 0.92rem; }
.slip-summary-row .value.winnings { color: #0acf83; font-size: 1.02rem; font-weight: 800; }

/* Chips de montos rápidos en el boleto */
.slip-quick-amounts {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.slip-amount-chip {
    flex: 1;
    min-width: 0;
    padding: 5px 4px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--color-bordes);
    background: #f4f7fb;
    color: var(--color-texto-secundario);
    font-size: 0.72rem;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    text-align: center;
}
.slip-amount-chip:hover {
    border-color: var(--color-acento-primario);
    color: var(--color-acento-primario);
    background: rgba(26, 127, 232, 0.07);
}
.slip-amount-chip.active {
    border-color: var(--color-acento-primario);
    background: var(--color-acento-primario);
    color: #fff;
}

#stakeAmountModern {
    width: 100%; padding: 8px 10px;
    background-color: #f4f7fb;
    border: 1px solid var(--color-bordes);
    border-radius: var(--radius-md);
    color: var(--color-texto-principal);
    font-size: 0.92rem; font-weight: 600;
    margin-bottom: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
#stakeAmountModern:focus { border-color: var(--color-acento-primario); box-shadow: 0 0 0 3px rgba(26, 127, 232, 0.12); outline: none; }

#placeBetBtnModern {
    width: 100%; padding: 11px;
    background: var(--grad-acento);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.92rem; font-weight: 800;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: 0.2px;
}
#placeBetBtnModern:hover { transform: translateY(-1px); box-shadow: var(--shadow-azul); }
#placeBetBtnModern:disabled { background: #d0d8e8; cursor: not-allowed; transform: none; box-shadow: none; }

/* Boleto colapsado */
.bet-slip-modern.is-collapsed {
    width: 180px !important; max-width: 180px !important;
    border-radius: 50px !important; bottom: 15px !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.22) !important;
}
.bet-slip-modern.is-collapsed .slip-header { border-bottom: none !important; border-radius: 50px !important; padding: 6px 14px !important; justify-content: center !important; }
.bet-slip-modern.is-collapsed h5 { display: none !important; }
.bet-slip-modern.is-collapsed .slip-total-odds-collapsed { display: block !important; font-weight: 800 !important; color: white !important; font-size: 0.84rem !important; margin-right: 5px !important; }
.bet-slip-modern.is-collapsed .slip-body,
.bet-slip-modern.is-collapsed .slip-footer,
.bet-slip-modern.is-collapsed #betSuccessContentModern { max-height: 0 !important; padding: 0 !important; opacity: 0 !important; overflow: hidden !important; }

/* Pantalla de éxito */
.slip-success-body { padding: 25px 15px; text-align: center; background: #ffffff; }
.success-icon {
    font-size: 35px; width: 60px; height: 60px; margin: 0 auto 15px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: white; background: linear-gradient(135deg, #0acf83, #00a866);
    box-shadow: 0 4px 20px rgba(10, 207, 131, 0.4);
}
.slip-success-body h3 { margin-bottom: 8px; font-size: 1.05rem; font-weight: 700; color: var(--color-texto-principal); }
.bet-id-success { font-size: 0.73rem; color: var(--color-texto-secundario); margin-bottom: 20px; font-family: 'DM Mono', monospace; }
.success-actions { display: flex; justify-content: center; gap: 12px; margin-top: 15px; }
.btn-success-action {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: var(--radius-md);
    border: 1px solid var(--color-bordes);
    background-color: transparent; color: var(--color-texto-principal);
    text-decoration: none; cursor: pointer;
    transition: all var(--transition-fast); font-size: 0.73rem;
}
.btn-success-action:hover { background-color: #f4f8ff; border-color: var(--color-acento-primario); color: var(--color-acento-primario); }
.btn-success-action .icon { font-size: 1.28rem; }
.slip-success-footer { padding: 12px; background: #ffffff; border-top: 1px solid var(--color-bordes); }
.btn-new-bet {
    width: 100%; padding: 10px; border: none;
    border-radius: var(--radius-md); font-size: 0.92rem; font-weight: 800; cursor: pointer;
    background: linear-gradient(135deg, #f5a623 0%, #e08010 100%);
    color: white; transition: all var(--transition-fast);
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.btn-new-bet:hover { transform: translateY(-1px); box-shadow: var(--shadow-dorado); }

/* Límite de ganancia */
.slip-warning-message {
    display: none; background-color: #fff3f3; color: #ef3b3b;
    padding: 6px; border-radius: 6px; font-size: 0.73rem; font-weight: 700;
    text-align: center; margin-bottom: 10px; border: 1px solid #ef3b3b;
}
.limit-exceeded { color: #ef3b3b !important; font-weight: bold; }

/* Resumen de apuesta exitosa */
.summary-selections-container { max-height: 180px; overflow-y: auto; margin-bottom: 0.8rem; }
.summary-selection-item { padding: 8px 0; border-bottom: 1px solid #eee; font-size: 0.84rem; }
.summary-selection-item:last-child { border-bottom: none; }
.summary-line-1 { display: flex; align-items: center; justify-content: flex-start; gap: 0.6rem; font-size: 0.73rem; font-weight: 500; margin-bottom: 0.3rem; color: var(--color-texto-principal); }
.summary-line-2, .summary-line-3 { font-size: 0.73rem; color: var(--color-texto-secundario); margin-top: 3px; }
.summary-financials { font-size: 1rem; }
.summary-financials > div { display: flex; justify-content: space-between; margin-bottom: 6px; }


/* ===============================================================
   RECARGAR — MÉTODOS DE PAGO
   =============================================================== */

.payment-method-selector { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; margin-bottom: 2rem; }
.payment-method-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 1.2rem;
    background-color: #ffffff;
    border-radius: var(--radius-xl);
    border: 2px solid var(--color-bordes);
    cursor: pointer;
    transition: all var(--transition-mid);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}
.payment-method-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); border-color: #c5d4ea; }
.payment-method-card.active { border-color: var(--color-acento-primario); background-color: #f5faff; box-shadow: 0 8px 28px rgba(26, 127, 232, 0.18); }
.payment-method-card .check-icon { position: absolute; top: 10px; right: 10px; color: var(--color-acento-primario); font-size: 1.1rem; opacity: 0; transform: scale(0.5); transition: all var(--transition-fast); }
.payment-method-card.active .check-icon { opacity: 1; transform: scale(1); }
.payment-method-card .card-icon-bg { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background-color: #fff; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.06); margin-bottom: 0.8rem; border: 1px solid var(--color-bordes); }
.payment-method-card img { height: 30px; width: auto; object-fit: contain; }
.payment-method-card .card-text { text-align: center; }
.payment-method-card .method-name { display: block; font-weight: 700; font-size: 0.96rem; color: var(--color-texto-principal); margin-bottom: 0.2rem; }
.payment-method-card .method-desc { display: block; font-size: 0.78rem; color: var(--color-texto-secundario); font-weight: 500; }
.payment-method-card.active .method-name { color: var(--color-acento-primario); }

@media (max-width: 576px) {
    .payment-method-selector { grid-template-columns: 1fr; gap: 0.8rem; }
    .payment-method-card { flex-direction: row; justify-content: flex-start; padding: 0.8rem; text-align: left; }
    .payment-method-card .card-icon-bg { margin-bottom: 0; margin-right: 0.8rem; width: 40px; height: 40px; }
    .payment-method-card .card-text { text-align: left; }
}


/* ===============================================================
   HERO SECTION — MODERNIZADO
   =============================================================== */

.modern-hero-section {
    background-color: #ffffff;
    padding: 2.5rem 1.2rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(14, 20, 32, 0.05);
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.modern-hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: var(--grad-acento);
}
.hero-badge {
    background-color: #eef5ff;
    color: var(--color-acento-primario);
    font-weight: 800;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0.45em 1.2em;
    border-radius: var(--radius-pill);
    display: inline-block;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(26, 127, 232, 0.12);
}
.hero-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    color: var(--color-texto-principal);
    font-size: 1.8rem;
    letter-spacing: -0.03em;
    margin-bottom: 0.6rem;
}
.hero-subtitle {
    color: var(--color-texto-secundario);
    font-size: 0.92rem;
    line-height: 1.55;
    max-width: 600px;
    margin: 0 auto;
    font-weight: 500;
}


/* ===============================================================
   REGISTRO — STEPPER
   =============================================================== */

#page-registro-moderno { background: radial-gradient(circle at center, #1a2545 0%, #0a0e1e 100%); min-height: 100vh; }

.stepper-wrapper {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    padding: 0 12px;
    z-index: 1;
}
.stepper-wrapper::before {
    content: "";
    position: absolute;
    top: 20px; left: 0; width: 100%;
    height: 2px;
    background-color: var(--color-bordes);
    z-index: 0; border-radius: 10px;
}
.stepper-item { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; z-index: 1; }
.stepper-item::before, .stepper-item::after { content: none !important; display: none !important; }
.stepper-item .step-counter {
    width: 40px; height: 40px;
    background-color: #ffffff;
    color: #94a3b8;
    border: 2px solid var(--color-bordes);
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-weight: 700; font-size: 1rem; z-index: 2;
    transition: all var(--transition-mid); margin-bottom: 8px;
}
.step-name { font-size: 0.73rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; transition: color var(--transition-mid); background-color: transparent; }
.stepper-item.active .step-counter { border-color: var(--color-acento-primario); color: var(--color-acento-primario); background-color: #ffffff; box-shadow: 0 0 0 4px rgba(26, 127, 232, 0.15); transform: scale(1.1); }
.stepper-item.active .step-name { color: var(--color-acento-primario); font-weight: 700; }
.stepper-item.completed .step-counter { background-color: var(--color-acento-primario); border-color: var(--color-acento-primario); color: #ffffff; }
.stepper-item.completed .step-name { color: var(--color-acento-primario); }
.stepper-item.completed .step-counter::after { font-family: "bootstrap-icons"; content: "\F26A"; font-size: 1.1rem; }
.stepper-item.completed .step-counter { font-size: 0; }

/* Inputs de registro */
.form-select.form-control-clean { background-color: #fff; border: 1px solid var(--color-bordes); border-radius: var(--radius-md); padding: 0.4rem 2rem 0.4rem 0.6rem; }
.form-select.form-control-clean:focus { box-shadow: 0 0 0 0.2rem rgba(26, 127, 232, 0.22); border-color: var(--color-acento-primario); }
.date-select-group .form-select { flex: 1; }
.form-control.form-control-clean, .form-select.form-control-clean { background-color: #fff; border: 1px solid var(--color-bordes); border-radius: var(--radius-md); font-size: 0.8rem; padding-top: 0.5rem; padding-bottom: 0.5rem; font-family: 'Plus Jakarta Sans', sans-serif; }
.form-select.form-control-clean { padding-right: 1.8rem; background-position: right 0.4rem center; background-size: 8px 6px; }
.form-control.form-control-clean:focus, .form-select.form-control-clean:focus { box-shadow: 0 0 0 0.2rem rgba(26, 127, 232, 0.16); border-color: var(--color-acento-primario); }
.date-select-group .form-select { flex: 1; min-width: 0; padding-left: 0.4rem; padding-right: 1rem; text-overflow: ellipsis; }
.form-floating > label { font-size: 0.8rem; padding-top: 0.5rem; }
.form-floating > .form-control-clean { padding-top: 1.4rem; padding-bottom: 0.5rem; }


/* ===============================================================
   MODAL DE CUENTA BLOQUEADA
   =============================================================== */

.blocked-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(8px);
    display: flex; justify-content: center; align-items: center;
    z-index: 9999; opacity: 0; visibility: hidden;
    transition: all var(--transition-mid);
}
.blocked-modal-overlay.active { opacity: 1; visibility: visible; }
.blocked-modal-card {
    background: linear-gradient(135deg, #f8fafd 0%, #eef5ff 100%);
    border: 1px solid rgba(239, 59, 59, 0.22);
    width: 90%; max-width: 380px;
    padding: 28px; border-radius: 20px; text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.75), 0 0 0 1px var(--color-bordes);
    transform: translateY(24px);
    transition: transform var(--transition-slow) cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-top: 4px solid var(--color-acento-rojo);
}
.blocked-modal-overlay.active .blocked-modal-card { transform: translateY(0); }
.blocked-modal-icon { font-size: 40px; color: var(--color-acento-rojo); margin-bottom: 12px; filter: drop-shadow(0 0 12px rgba(239, 59, 59, 0.42)); }
.blocked-modal-title { font-size: 1.2rem; font-weight: 800; }


/* ===============================================================
   CUENTA BLOQUEADA — BOTONES Y TEXTOS
   =============================================================== */

.blocked-modal-text { font-size: 0.84rem; color: var(--color-texto-secundario); margin-bottom: 20px; line-height: 1.5; }
.btn-blocked-action {
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #25D366, #1ebc57);
    color: white; padding: 10px 20px; border-radius: var(--radius-pill);
    text-decoration: none; font-weight: 800; width: 100%;
    transition: all var(--transition-fast); border: none; cursor: pointer;
    font-size: 0.92rem; box-shadow: 0 4px 16px rgba(37, 211, 102, 0.32);
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.btn-blocked-action:hover { background: linear-gradient(135deg, #2edb74, #25D366); color: white; transform: translateY(-2px); box-shadow: 0 6px 22px rgba(37, 211, 102, 0.45); }
.btn-blocked-close { margin-top: 12px; background: transparent; border: none; color: var(--color-texto-apagado); font-size: 0.78rem; cursor: pointer; text-decoration: underline; transition: color var(--transition-fast); }
.btn-blocked-close:hover { color: var(--color-texto-secundario); }


/* ===============================================================
   TOASTS
   =============================================================== */

#toast-container {
    position: fixed; top: 70px; right: 16px; z-index: 10000;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}
.toast-notification {
    background: #0d1627;
    color: #e8eef8;
    min-width: 280px; max-width: 360px;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    border-left: 3px solid #334;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);
    display: flex; align-items: center; gap: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px; font-weight: 500; line-height: 1.4;
    opacity: 0; transform: translateX(calc(100% + 20px));
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
    pointer-events: all;
}
.toast-notification.show { opacity: 1; transform: translateX(0); }
.toast-icon { font-size: 1rem; flex-shrink: 0; }
.toast-msg { flex: 1; }
.toast-close {
    background: none; border: none; color: rgba(255,255,255,0.35);
    cursor: pointer; padding: 2px 4px; border-radius: 4px;
    font-size: 0.9rem; line-height: 1; flex-shrink: 0;
    transition: color 0.15s;
}
.toast-close:hover { color: rgba(255,255,255,0.8); }
.toast-notification.success { border-left-color: var(--color-acento-verde); }
.toast-notification.success .toast-icon { color: var(--color-acento-verde); }
.toast-notification.error { border-left-color: var(--color-acento-rojo); }
.toast-notification.error .toast-icon { color: var(--color-acento-rojo); }
.toast-notification.warning { border-left-color: var(--color-acento-secundario); }
.toast-notification.warning .toast-icon { color: var(--color-acento-secundario); }
.toast-notification.info { border-left-color: var(--color-acento-primario); }
.toast-notification.info .toast-icon { color: var(--color-acento-primario); }
@media (max-width: 576px) {
    #toast-container { left: 12px; right: 12px; top: auto; bottom: 72px; }
    .toast-notification { min-width: unset; max-width: 100%; }
}


/* ===============================================================
   ANIMACIONES DE CUOTAS EN VIVO
   =============================================================== */

@keyframes flashGreen {
    0% { background: var(--grad-acento); color: #ffffff; border-color: var(--color-acento-primario); box-shadow: 0 0 18px rgba(26, 127, 232, 0.5); }
    50% { background: var(--grad-acento); color: #ffffff; border-color: var(--color-acento-primario); }
    100% { background: #f4f7fc; color: #2c3e6b; border-color: #dde5f0; box-shadow: none; }
}
@keyframes flashRed {
    0% { background: linear-gradient(135deg, #ef3b3b, #cc1a1a); color: white; border-color: #ef3b3b; box-shadow: 0 0 18px rgba(239, 59, 59, 0.55); }
    50% { background: linear-gradient(135deg, #ef3b3b, #cc1a1a); color: white; border-color: #ef3b3b; }
    100% { background: #f4f7fc; color: #2c3e6b; border-color: #dde5f0; box-shadow: none; }
}
.odd-button.odds-up { animation: flashGreen 1.2s ease-out; }
.odd-button.odds-down { animation: flashRed 1.2s ease-out; }

.odd-button.locked {
    background: linear-gradient(135deg, #eaecf0, #dde3ec) !important;
    color: var(--color-texto-apagado) !important;
    border-color: var(--color-bordes) !important;
    pointer-events: none; cursor: not-allowed; opacity: 0.55;
    position: relative;
}
.odd-button.locked::after { content: "🔒"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 13px; opacity: 0.5; }
.odd-button.locked span { opacity: 0; }


/* ===============================================================
   OVERRIDES GLOBALES — FORMULARIOS Y COMPONENTES BOOTSTRAP
   =============================================================== */

.form-control, .form-select {
    background-color: #f6f8fb;
    border-color: var(--color-bordes);
    color: var(--color-texto-principal);
    border-radius: var(--radius-md);
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.form-control::placeholder { color: var(--color-texto-apagado); }
.form-control:focus, .form-select:focus {
    background-color: #ffffff;
    border-color: var(--color-acento-primario);
    color: var(--color-texto-principal);
    box-shadow: 0 0 0 3px rgba(26, 127, 232, 0.14);
}
.form-select option { background-color: #ffffff; color: var(--color-texto-principal); }
.form-label { color: var(--color-texto-secundario); font-weight: 600; font-size: 0.8rem; }
.form-text { color: var(--color-texto-apagado); }

.card { background-color: #ffffff; border: 1px solid var(--color-bordes); border-radius: var(--radius-lg); color: var(--color-texto-principal); }
.card-header { background-color: #f8fafc; border-bottom: 1px solid var(--color-bordes); color: var(--color-texto-principal); font-weight: 700; }
.card-footer { background-color: #f4f7fb; border-top: 1px solid var(--color-bordes); }

.table { color: var(--color-texto-principal); }
.table-striped > tbody > tr:nth-of-type(odd) > td { background-color: rgba(26, 127, 232, 0.025); color: var(--color-texto-principal); }
.table > :not(caption) > * > * { border-bottom-color: var(--color-bordes); }
.table thead th { color: var(--color-acento-primario); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.7px; font-weight: 800; border-bottom-color: var(--color-bordes-brillo); }

.badge.bg-success { background-color: var(--color-exito) !important; color: #ffffff !important; }
.badge.bg-warning { background: var(--grad-dorado) !important; color: #ffffff !important; }
.badge.bg-danger { background-color: var(--color-acento-rojo) !important; }
.badge.bg-secondary { background-color: var(--color-texto-apagado) !important; }
.badge.bg-primary { background-color: var(--color-acento-azul) !important; }

.alert-success { background-color: rgba(10, 207, 131, 0.08); border-color: rgba(10, 207, 131, 0.22); color: var(--color-exito); }
.alert-warning { background-color: rgba(245, 166, 35, 0.1); border-color: rgba(245, 166, 35, 0.3); color: #c2700a; }
.alert-danger { background-color: rgba(239, 59, 59, 0.08); border-color: rgba(239, 59, 59, 0.25); color: var(--color-acento-rojo); }
.alert-info { background-color: rgba(26, 127, 232, 0.08); border-color: rgba(26, 127, 232, 0.22); color: var(--color-acento-azul); }

.btn-primary { background: var(--grad-acento); border-color: transparent; font-weight: 700; color: #ffffff; border-radius: var(--radius-md); }
.btn-primary:hover { background: linear-gradient(135deg, #3d94f0, #1a7fe8); border-color: transparent; color: #ffffff; transform: translateY(-1px); box-shadow: var(--shadow-azul); }
.btn-success { background: var(--grad-acento); border-color: transparent; color: #ffffff; font-weight: 800; border-radius: var(--radius-md); }
.btn-success:hover { background: linear-gradient(135deg, #3d94f0, #1a7fe8); border-color: transparent; color: #ffffff; transform: translateY(-1px); box-shadow: var(--shadow-azul); }
.btn-outline-secondary { border-color: var(--color-bordes); color: var(--color-texto-secundario); border-radius: var(--radius-md); }
.btn-outline-secondary:hover { background-color: #f4f7fb; border-color: var(--color-bordes-brillo); color: var(--color-texto-principal); }
.btn-outline-primary { border-color: var(--color-acento-azul); color: var(--color-acento-azul); border-radius: var(--radius-md); }
.btn-outline-primary:hover { background-color: rgba(26, 127, 232, 0.08); border-color: var(--color-acento-azul); color: var(--color-acento-azul); }

.page-link { background-color: #ffffff; border-color: var(--color-bordes); color: var(--color-texto-secundario); }
.page-link:hover { background-color: #eef5ff; border-color: var(--color-acento-primario); color: var(--color-acento-primario); }
.page-item.active .page-link { background: var(--grad-acento); border-color: transparent; color: #ffffff; font-weight: 800; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f2f5fa; }
::-webkit-scrollbar-thumb { background: #c8d4e6; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

::selection { background: rgba(26, 127, 232, 0.18); color: var(--color-texto-principal); }


/* ===============================================================
   SECCIÓN "CÓMO EMPEZAR"
   =============================================================== */

#como-empezar {
    background: linear-gradient(135deg, #eef5ff 0%, #f5f9ff 60%, #eaf2ff 100%);
    width: 100%; overflow: hidden; position: relative;
    border-top: 1.5px solid #c2d9ff;
    border-bottom: 1.5px solid #c2d9ff;
}
#como-empezar::before {
    content: ''; position: absolute; top: -60px; left: 50%;
    transform: translateX(-50%); width: 600px; height: 200px;
    background: radial-gradient(ellipse, rgba(26, 127, 232, 0.06) 0%, transparent 70%);
    pointer-events: none;
}
.como-empezar-wrapper { display: flex; align-items: stretch; justify-content: stretch; width: 100%; min-height: 90px; }
.como-empezar-step { flex: 1; display: flex; align-items: center; padding: 1.4rem 1.8rem; position: relative; transition: background var(--transition-fast); cursor: default; }
.como-empezar-step:hover { background: rgba(26, 127, 232, 0.04); }
.step-content { display: flex; align-items: center; gap: 1rem; }
.step-number { font-size: 2.2rem; font-weight: 900; color: #1a4fbf; line-height: 1; letter-spacing: -1px; flex-shrink: 0; }
.step-text { display: flex; flex-direction: column; gap: 0.15rem; }
.step-title { font-size: 0.96rem; font-weight: 700; color: #0d2a6e; margin: 0; line-height: 1.2; letter-spacing: 0.01em; }
.step-desc { font-size: 0.8rem; color: #2563bd; margin: 0; line-height: 1.4; font-weight: 400; }
.step-desc strong { color: #1a4fbf; font-weight: 700; }
.como-empezar-arrow { display: flex; align-items: center; justify-content: center; padding: 0 0.4rem; color: #93b8f5; font-size: 1.3rem; flex-shrink: 0; border-left: 1px solid #cddeff; }
.como-empezar-cta { display: flex; align-items: center; justify-content: center; padding: 0 1.5rem; border-left: 1px solid #cddeff; flex-shrink: 0; }
.btn-cta-apuesta {
    display: inline-flex; align-items: center;
    padding: 0.6rem 1.4rem;
    background: var(--grad-acento);
    color: #fff; font-size: 0.88rem; font-weight: 700;
    border-radius: var(--radius-pill); text-decoration: none;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 18px rgba(26, 127, 232, 0.32);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap; font-family: 'Plus Jakarta Sans', sans-serif;
}
.btn-cta-apuesta:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(26, 127, 232, 0.48); color: #fff; }
.btn-cta-apuesta:active { transform: translateY(0); }

@media (max-width: 768px) {
    .como-empezar-wrapper { flex-direction: column; }
    .como-empezar-step { padding: 1.1rem 1.5rem; border-bottom: 1px solid #d0e3ff; }
    .como-empezar-arrow { display: none; }
    .como-empezar-cta { border-left: none; border-top: 2px solid #c2d9ff; padding: 1.2rem 1.5rem; width: 100%; }
    .btn-cta-apuesta { width: 100%; justify-content: center; font-size: 0.96rem; padding: 0.8rem 1.5rem; }
    .step-number { font-size: 1.8rem; }
}


/* ===============================================================
   CAROUSEL PLACEHOLDER / PÁGINA APUESTAS HEADER
   =============================================================== */

.carousel-placeholder { height: 514px; background-color: #08101e; }
@media (max-width: 992px) { .carousel-placeholder { height: 320px; } }
@media (max-width: 576px) { .carousel-placeholder { height: 180px; } }
@media (max-width: 991px) { body { padding-top: 3.2rem; } }

.apuestas-page-header {
    background: linear-gradient(135deg, #eef5ff 0%, #f5f9ff 100%);
    border: 1px solid #c2d9ff;
    border-radius: var(--radius-lg);
    padding: 1.2rem 1.5rem;
}
.apuestas-sport-icon { width: 48px; height: 48px; }
.apuestas-page-title { font-size: 1.38rem; font-weight: 800; color: #0d2a6e; letter-spacing: -0.02em; }
.apuestas-page-subtitle { font-size: 0.84rem; color: #2563bd; }


/* ===============================================================
   MIS APUESTAS — FILTROS Y TABS
   =============================================================== */

.bets-title-bar {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg, #0d1627 0%, #1a7fe8 100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 12px 20px;
}
.bets-title-bar-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--color-acento-secundario); flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.28);
    animation: soon-pulse 1.8s ease-in-out infinite;
}
.bets-title-bar-text { font-size: 0.96rem; font-weight: 700; color: #fff; letter-spacing: 0.02em; }

.bets-filter-card {
    background: #fff; border: 1px solid var(--color-bordes);
    border-top: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-card); margin-bottom: 20px; overflow: hidden;
}
.bets-main-tabs { display: flex; border-bottom: 1px solid var(--color-bordes); margin-bottom: 0; padding: 0 16px; background: #f8fafc; }
.bets-main-tabs .main-tab-btn {
    background: none; border: none;
    border-bottom: 3px solid transparent; margin-bottom: -2px;
    padding: 11px 22px; font-size: 0.92rem; font-weight: 500;
    color: var(--color-texto-secundario); cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap; font-family: 'Plus Jakarta Sans', sans-serif;
}
.bets-main-tabs .main-tab-btn.active { color: #b8720a; border-bottom-color: var(--color-acento-secundario); font-weight: 700; }
.bets-main-tabs .main-tab-btn:hover:not(.active) { color: #b8720a; }

.bets-sub-tabs { display: flex; gap: 7px; padding: 12px 16px 10px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--color-bordes); background: #fff; }
.bets-sub-tabs .sub-tab-btn {
    background: #fff8ec !important; border: 1.5px solid #f5a623 !important;
    border-radius: var(--radius-pill); padding: 5px 18px; font-size: 0.82rem;
    color: #b8720a !important; cursor: pointer;
    transition: all var(--transition-fast); font-weight: 500; white-space: nowrap;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.bets-sub-tabs .sub-tab-btn.active { background: linear-gradient(135deg, #f5a623 0%, #e8951f 100%) !important; color: #1a2744 !important; border-color: transparent !important; font-weight: 700; box-shadow: 0 2px 10px rgba(245, 166, 35, 0.42); }
.bets-sub-tabs .sub-tab-btn:hover:not(.active) { background: #fdefd3 !important; border-color: #e8951f !important; color: #a0640a !important; }

.date-filter-bar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 10px 16px; font-size: 0.82rem; background: #fff; }
.date-filter-label { color: var(--color-texto-secundario); }
.date-filter-icon-label {
    display: flex; align-items: center; gap: 5px;
    color: #b8720a !important; cursor: pointer; font-weight: 500;
    border: 1.5px solid #f5a623 !important; border-radius: 8px;
    padding: 4px 10px; background: #fff8ec !important;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.date-filter-icon-label:hover { background: #fdefd3 !important; border-color: #e8951f !important; box-shadow: 0 2px 8px rgba(245, 166, 35, 0.22); }
.date-filter-icon-label i { font-size: 0.92rem; color: #b8720a; }
.date-filter-icon-label input[type="date"] { border: none; background: transparent; font-size: 0.82rem; color: var(--color-texto-principal); cursor: pointer; outline: none; font-family: inherit; font-weight: 500; min-width: 110px; }
.clear-date-btn { background: none !important; border: none !important; padding: 2px 4px; color: #b8720a; cursor: pointer; font-size: 1rem; line-height: 1; opacity: 0.6; transition: opacity var(--transition-fast); }
.clear-date-btn:hover { opacity: 1; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }
.bet-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 60px 20px; color: var(--color-texto-apagado); text-align: center; }
.bet-empty-state i { font-size: 2.4rem; }
.bet-empty-state p { margin: 0; font-size: 0.88rem; }


/* ===============================================================
   EN VIVO — HEADER
   =============================================================== */

.live-section-header {
    background: linear-gradient(135deg, #08101e 0%, #0d1a30 60%, #0a2a50 100%);
    border-radius: var(--radius-xl);
    padding: 18px 22px;
    margin-bottom: 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    box-shadow: 0 4px 28px rgba(8,20,50,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
    position: relative; overflow: hidden;
    border: 1px solid rgba(26, 127, 232, 0.1);
}
.live-header-deco-gold { position: absolute; right: -30px; top: -30px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(245,166,35,0.1) 0%, transparent 70%); pointer-events: none; }
.live-header-deco-blue { position: absolute; left: 40%; bottom: -40px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(26,127,232,0.1) 0%, transparent 70%); pointer-events: none; }
.live-header-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.live-badge { display: flex; align-items: center; gap: 7px; background: rgba(239,59,59,0.14); border: 1.5px solid rgba(239,59,59,0.48); border-radius: 8px; padding: 6px 12px; flex-shrink: 0; }
.live-badge-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-acento-rojo); display: inline-block; animation: live-pulse 1.6s ease-in-out infinite; }
.live-badge-text { font-size: 0.76rem; font-weight: 800; color: #ff4d5e; letter-spacing: 0.08em; text-transform: uppercase; }
.live-title-block { min-width: 0; }
.live-title { font-size: 1.12rem; font-weight: 800; color: #ffffff; line-height: 1.2; letter-spacing: -0.01em; }
.live-subtitle { font-size: 0.7rem; color: rgba(255,255,255,0.45); font-weight: 500; margin-top: 1px; }
.live-transmission-badge { display: flex; align-items: center; gap: 8px; background: rgba(245,166,35,0.1); border: 1px solid rgba(245,166,35,0.22); border-radius: 8px; padding: 6px 12px; flex-shrink: 0; }
.live-transmission-icon { flex-shrink: 0; }
.live-transmission-text { font-size: 0.7rem; font-weight: 700; color: var(--color-acento-secundario); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.live-loading-state { text-align: center; padding: 3rem; border: 1px solid var(--color-bordes); border-radius: var(--radius-lg); background: #f8fafc; box-shadow: var(--shadow-card); margin-top: 50px; min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }

@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(239,59,59,0.6); } 70% { box-shadow: 0 0 0 7px rgba(239,59,59,0); } 100% { box-shadow: 0 0 0 0 rgba(239,59,59,0); } }

@media (max-width: 576px) {
    .live-section-header { padding: 14px 16px; flex-wrap: wrap; gap: 10px; }
    .live-title { font-size: 0.96rem; }
    .live-transmission-badge { width: 100%; justify-content: center; }
}


/* ===============================================================
   LOGIN MODAL — MODERNIZADO
   =============================================================== */

#loginModal .modal-dialog { max-height: calc(100vh - 60px); }
#loginModal .modal-content { max-height: calc(100vh - 60px); overflow: hidden; display: flex; flex-direction: column; }
.login-modal-content { border-radius: 20px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(26, 127, 232, 0.08); }
.login-modal-header {
    background: linear-gradient(135deg, #08101e 0%, #0d1a30 100%);
    padding: 18px 28px 16px; text-align: center; position: relative; overflow: hidden; flex-shrink: 0;
}
.login-modal-header::before { content: ''; position: absolute; top: -50px; right: -50px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(245, 166, 35, 0.14) 0%, transparent 68%); pointer-events: none; }
.login-modal-header::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #1a7fe8 0%, #f5a623 50%, #1a7fe8 100%); border-radius: 20px 20px 0 0; }
.login-modal-close { position: absolute; top: 12px; right: 14px; opacity: 0.6; transition: opacity var(--transition-fast); }
.login-modal-close:hover { opacity: 1; }
.login-modal-logo { height: 44px; width: auto; display: block; margin: 0 auto 8px; filter: drop-shadow(0 3px 12px rgba(26, 127, 232, 0.35)); }
.login-modal-subtitle { font-size: 12px; color: rgba(255, 255, 255, 0.45); font-weight: 400; margin: 0; line-height: 1.3; }
.login-modal-body { padding: 18px 28px 16px; background: #ffffff; flex: 1; overflow-y: auto; }
.login-field-label { display: block; font-size: 10.5px; font-weight: 700; color: var(--color-texto-principal); letter-spacing: 0.7px; text-transform: uppercase; margin-bottom: 5px; }
.login-field-wrap { margin-bottom: 12px; }
.login-input-group { position: relative; display: flex; align-items: center; }
.login-input-icon { position: absolute; left: 13px; color: #94a3b8; font-size: 14px; pointer-events: none; display: flex; align-items: center; z-index: 2; }
.login-input {
    width: 100%; height: 44px; padding: 0 42px 0 40px;
    border-radius: var(--radius-lg); border: 1.5px solid var(--color-bordes);
    background: #f6f8fb; font-size: 13.5px; font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--color-texto-principal);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    outline: none; box-sizing: border-box;
}
.login-input:focus { border-color: var(--color-acento-primario); background: #ffffff; box-shadow: 0 0 0 3px rgba(26, 127, 232, 0.14); }
.login-input::placeholder { color: #94a3b8; }
.login-eye-btn { position: absolute; right: 10px; background: none; border: none; cursor: pointer; color: #94a3b8; font-size: 15px; padding: 6px; line-height: 1; transition: color var(--transition-fast); display: flex; align-items: center; z-index: 2; -webkit-appearance: none; appearance: none; }
.login-eye-btn:hover { color: var(--color-acento-primario); }
.login-eye-btn:focus { outline: none; }
.login-row-options { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.login-check-wrap { display: flex; align-items: center; gap: 7px; cursor: pointer; margin: 0; user-select: none; }
.login-check { width: 15px; height: 15px; accent-color: var(--color-acento-primario); cursor: pointer; flex-shrink: 0; position: relative; z-index: 1; opacity: 1 !important; pointer-events: auto !important; }
.login-check-label { font-size: 12.5px; color: var(--color-texto-secundario); font-weight: 500; cursor: pointer; margin: 0; }
.login-forgot-link { font-size: 12.5px; font-weight: 600; color: var(--color-acento-primario); text-decoration: none; transition: color var(--transition-fast); }
.login-forgot-link:hover { color: #3d94f0; }
.login-captcha-wrap { margin-bottom: 14px; }
.login-btn-submit {
    width: 100%; height: 48px;
    background: var(--grad-acento);
    color: #ffffff; border: none; border-radius: var(--radius-lg);
    font-size: 14px; font-weight: 800;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: 1.2px; cursor: pointer;
    position: relative; overflow: hidden;
    box-shadow: var(--shadow-azul);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-bottom: 14px;
}
.login-btn-submit::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent); transition: left 0.4s ease; }
.login-btn-submit:hover::before { left: 150%; }
.login-btn-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(26, 127, 232, 0.48); }
.login-btn-submit:active { transform: translateY(0); }
.login-register-row { text-align: center; padding-top: 12px; border-top: 1px solid var(--color-bordes); font-size: 12.5px; color: var(--color-texto-secundario); }
.login-register-link { display: block; margin-top: 3px; color: var(--color-acento-primario); font-weight: 700; text-decoration: none; transition: color var(--transition-fast); }
.login-register-link:hover { color: #3d94f0; }
.login-modal-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--color-bordes); background: #f8fafc; flex-shrink: 0; }
.login-stat { padding: 10px 8px; text-align: center; border-right: 1px solid var(--color-bordes); }
.login-stat:last-child { border-right: none; }
.login-stat-num { display: block; font-size: 13px; font-weight: 800; color: var(--color-texto-principal); }
.login-stat-gold { color: var(--color-acento-secundario); }
.login-stat-label { display: block; font-size: 10px; color: var(--color-texto-apagado); font-weight: 500; }

@media (max-width: 480px) {
    .login-modal-header, .login-modal-body { padding-left: 18px; padding-right: 18px; }
    .login-modal-logo { height: 38px; }
}


/* ===============================================================
   PANEL DE BLOQUEO (USUARIO NO LOGUEADO)
   =============================================================== */

.unauth-locked-panel {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--color-bordes);
    border-top: none;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    box-shadow: var(--shadow-elevated);
    padding: 4.5rem 2rem;
    display: flex; flex-direction: column; align-items: center;
    text-align: center; margin-bottom: 25px;
    position: relative; overflow: hidden;
    backdrop-filter: blur(6px);
}
.unauth-locked-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-acento); }
.locked-icon-wrapper {
    width: 90px; height: 90px; background: #fff; color: var(--color-acento-primario);
    border-radius: 50%; display: flex; justify-content: center; align-items: center;
    font-size: 2.8rem; margin-bottom: 1.5rem; position: relative;
    box-shadow: 0 4px 18px rgba(26, 127, 232, 0.16);
    border: 2px solid var(--color-bordes);
}
.locked-icon-wrapper::after { content: ''; position: absolute; top: -6px; left: -6px; right: -6px; bottom: -6px; border-radius: 50%; border: 1px solid rgba(26, 127, 232, 0.1); }
.locked-title { font-size: 1.5rem; font-weight: 800; color: var(--color-texto-principal); margin-bottom: 0.6rem; letter-spacing: -0.03em; }
.locked-text { font-size: 0.92rem; color: var(--color-texto-secundario); max-width: 480px; margin-bottom: 2rem; line-height: 1.6; font-weight: 400; }
.locked-actions { display: flex; flex-direction: column; gap: 15px; width: 100%; max-width: 300px; }
.btn-locked-login {
    background: var(--grad-acento);
    border: none; padding: 0.8rem 1.5rem; font-size: 0.92rem; font-weight: 700;
    border-radius: var(--radius-md); color: #fff;
    box-shadow: 0 4px 14px rgba(26, 127, 232, 0.28);
    transition: all var(--transition-fast); text-transform: uppercase; letter-spacing: 0.5px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.btn-locked-login:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(26, 127, 232, 0.42); color: #fff; }
.btn-locked-register { background: #f0f4f8; border: 1px solid var(--color-bordes); color: var(--color-texto-secundario); padding: 0.8rem 1.5rem; font-size: 0.92rem; font-weight: 600; border-radius: var(--radius-md); text-decoration: none; transition: all var(--transition-fast); }
.btn-locked-register:hover { background: #e2eaf4; color: var(--color-texto-principal); }


/* ===============================================================
   FAQ — ESTILOS
   =============================================================== */

.main-content-wrapper { padding-left: 0; padding-right: 15px; }
.sidebar-sticky { padding-top: 1rem; }
.faq-title-bar-premium {
    background-color: #0d1627;
    color: #ffffff; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 1rem 1.5rem; display: flex; align-items: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.05); margin-bottom: 0;
}
.faq-title-dot { height: 10px; width: 10px; background-color: var(--color-exito); border-radius: 50%; display: inline-block; margin-right: 12px; box-shadow: 0 0 6px rgba(10, 207, 131, 0.55); }
.faq-title-text { font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.faq-content-card-premium {
    background-color: #ffffff;
    border: 1px solid var(--color-bordes);
    border-top: none;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-card);
    margin-bottom: 30px;
}
.faq-header-info { display: flex; align-items: flex-start; background-color: #f6f9fc; border: 1px solid var(--color-bordes); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 2.5rem; }
.faq-info-icon { font-size: 1.8rem; color: var(--color-acento-primario); margin-right: 1.2rem; }


/* ===============================================================
   ANIMACIÓN SOON-PULSE (usada en dots)
   =============================================================== */
@keyframes soon-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}


/* ===============================================================
   FILTROS "COMENZANDO PRONTO" — 1h, 2h, 3h, Todos
   =============================================================== */

.filters-container {
    background-color: #ffffff;
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-bordes);
    box-shadow: var(--shadow-card);
}

/* Barra título "Próximos Eventos" */
.soon-header-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #0d1627 0%, #1a7fe8 100%);
    border-radius: var(--radius-md);
    padding: 12px 20px;
    margin-bottom: 12px;
}

.soon-header-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-acento-secundario);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.30);
    animation: soon-pulse 1.8s ease-in-out infinite;
}

@keyframes soon-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.30); }
    50%       { box-shadow: 0 0 0 7px rgba(245, 166, 35, 0.06); }
}

.soon-header-title {
    font-size: 0.96rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Botones de filtro: Todos / 1h / 2h / 3h */
.filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-group .btn-filter {
    border-radius: var(--radius-pill) !important;
    font-weight: 700;
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--color-bordes);
    background-color: transparent;
    color: var(--color-texto-secundario);
    transition: all var(--transition-fast);
    font-size: 0.78rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
}

.filter-group .btn-filter:hover:not(.active) {
    background-color: #eef5ff;
    border-color: var(--color-acento-primario);
    color: var(--color-acento-primario);
    transform: translateY(-1px);
}

.filter-group .btn-filter.active {
    background: var(--grad-dorado);
    border-color: transparent;
    color: #1a1200;
    box-shadow: var(--shadow-dorado);
    font-weight: 800;
}


/* ===============================================================
   BET SLIP LEGACY (contenedor antiguo, por si se usa)
   =============================================================== */

.bet-slip-container {
    position: fixed; bottom: 1rem; right: 1rem;
    width: 340px; max-width: 90vw; z-index: 1050;
    background-color: #ffffff;
    color: var(--color-texto-principal);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-elevated), 0 0 0 1px rgba(26, 127, 232, 0.12);
    border: 1px solid var(--color-bordes);
    opacity: 0; transform: translateY(100%); transition: all var(--transition-slow);
}
.bet-slip-container.visible { opacity: 1; transform: translateY(0); }
.bet-slip-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.7rem 1rem; cursor: pointer;
    border-bottom: 1px solid var(--color-bordes);
    background: linear-gradient(135deg, #0d1627 0%, #1a7fe8 100%);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    font-weight: 700; font-size: 0.88rem; color: #ffffff;
}
.bet-slip-header::before { content: '🎯'; margin-right: 0.5rem; }
.bet-slip-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out; }
.bet-slip-container.is-expanded .bet-slip-content { max-height: 70vh; overflow-y: auto; }
.bet-slip-summary { padding: 1rem; background-color: #f6f9fc; border-top: 1px solid var(--color-bordes); }
.selection-item { background-color: transparent; border-color: var(--color-bordes); padding: 0.75rem 1rem; }
.selection-teams { font-weight: 600; margin-bottom: 0.2rem; font-size: 0.84rem; color: var(--color-texto-principal); }
.selection-market { font-size: 0.78rem; color: var(--color-texto-secundario); }
.selection-odds { color: var(--color-acento-secundario); font-size: 0.88rem; font-weight: 800; }
.remove-selection-btn { opacity: 0.5; transition: opacity var(--transition-fast); }
.remove-selection-btn:hover { opacity: 1; }
.btn-danger-soft { color: var(--color-texto-secundario); background-color: transparent; border: none; border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: all var(--transition-fast); }
.btn-danger-soft:hover { background-color: rgba(239, 59, 59, 0.12); color: var(--color-acento-rojo); }
.btn-danger-soft .bi-trash-fill { font-size: 0.88rem; }


/* ===============================================================
   PÁGINA RECARGAR Y RETIRAR
   =============================================================== */

.payment-content-panel {
    background-color: #ffffff; padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card); border: 1px solid var(--color-bordes);
}
.amount-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.8rem; margin-top: 1.2rem; margin-bottom: 1.2rem; }
.btn-amount {
    background-color: #f2f5fa; border: 2px solid var(--color-bordes);
    font-weight: 700; color: var(--color-texto-principal);
    padding: 0.6rem; border-radius: var(--radius-md);
    transition: all var(--transition-fast); font-size: 0.88rem;
    font-family: 'Plus Jakarta Sans', sans-serif; cursor: pointer;
}
.btn-amount:hover { background-color: #eef5ff; border-color: var(--color-acento-primario); color: var(--color-acento-primario); transform: translateY(-1px); }
.btn-amount.active { background: rgba(26, 127, 232, 0.08); border-color: var(--color-acento-primario); color: var(--color-acento-primario); box-shadow: var(--shadow-azul); }
body#page-retirar .payment-content-panel { border: none; padding: 2rem; border-top: 4px solid var(--color-acento-primario); }
body#page-retirar .form-label { color: var(--color-texto-secundario); font-size: 0.84rem; }
body#page-retirar .form-control-lg, body#page-retirar .form-select-lg { font-size: 0.96rem; padding: 0.6rem 1rem; background-color: #f6f8fb; border: 2px solid var(--color-bordes); color: var(--color-texto-principal); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
body#page-retirar .form-control-lg:focus, body#page-retirar .form-select-lg:focus { background-color: #ffffff; border-color: var(--color-acento-primario); box-shadow: 0 0 0 3px rgba(26, 127, 232, 0.14); color: var(--color-texto-principal); }
.btn-success-gradient {
    background: var(--grad-acento); border: none; color: #ffffff;
    transition: all var(--transition-fast); box-shadow: var(--shadow-azul);
    font-size: 0.96rem; font-weight: 800; border-radius: var(--radius-md);
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.btn-success-gradient:hover { color: #ffffff; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(26, 127, 232, 0.44); }
.conditions-panel { background-color: #ffffff; padding: 1.5rem; border-radius: var(--radius-lg); height: 100%; border: 1px solid var(--color-bordes); }
.condition-item { display: flex; align-items: flex-start; margin-bottom: 1rem; color: var(--color-texto-secundario); line-height: 1.5; font-size: 0.84rem; }
.condition-item i { font-size: 1.2rem; color: var(--color-acento-primario); margin-right: 0.8rem; margin-top: 0.1rem; }
.condition-item strong { color: var(--color-texto-principal); font-weight: 600; }


/* ===============================================================
   PÁGINA CASINO — MIDNIGHT BLUE + GOLD (MODERNIZADO)
   Aplica SOLO en body#page-casino
   =============================================================== */

#page-casino {
    /* Las variables CSS sí necesitan estar en el body para que estén disponibles globalmente */
    --cas-gold:          #c47f00;
    --cas-gold-light:    #e09800;
    --cas-gold-pale:     #fde68a;
    --cas-gold-dim:      #a06500;
    --cas-accent:        #c0185e;
    --cas-bg-deep:       #e8ecf5;
    --cas-bg-mid:        #f0f3fa;
    --cas-bg-card:       #ffffff;
    --cas-bg-card2:      #f5f7fc;
    --cas-bg-hover:      #fdf8ec;
    --cas-border:        rgba(60,90,160,.12);
    --cas-border-gold:   rgba(196,127,0,.26);
    --cas-border-hover:  rgba(196,127,0,.58);
    --cas-text-main:     #1a2035;
    --cas-text-soft:     #4a5572;
    --cas-text-muted:    #8090b0;
    --cas-radius:        16px;
    --cas-glow-gold:     0 0 24px rgba(196,127,0,.20);
    --cas-shadow:        0 2px 14px rgba(60,90,160,.09);
    --cas-shadow-hover:  0 10px 32px rgba(60,90,160,.16);
}

/* Color y fondo SOLO al main — el footer queda intacto */
#page-casino main {
    background-color: #f2f4fa;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.018'/%3E%3C/svg%3E");
    color: #1a2035;
    font-family: 'Exo 2', 'Plus Jakarta Sans', sans-serif;
}

/* Headings dentro del main */
#page-casino main h1,
#page-casino main h2,
#page-casino main h3,
#page-casino main h4,
#page-casino main h5,
#page-casino main h6 { color: var(--cas-text-main); }

#page-casino main a { color: var(--cas-gold-light); }

/* ── HERO ─────────────────────────────────────────────────── */
#page-casino .casino-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--cas-radius);
    margin-bottom: 2rem;
    min-height: 220px;
    display: flex;
    align-items: center;
    padding: 2.6rem 2.5rem;
    background: linear-gradient(125deg, #0e1828 0%, #172040 40%, #0e1828 100%) !important;
    border: 1px solid var(--cas-border-gold);
    box-shadow: var(--cas-shadow), inset 0 1px 0 rgba(255,255,255,.06);
}

#page-casino .casino-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 55% 90% at 92% 50%, rgba(232,168,32,.14) 0%, transparent 65%),
        radial-gradient(ellipse 45% 60% at 8%  20%, rgba(50,90,200,.12) 0%, transparent 60%),
        radial-gradient(ellipse 35% 40% at 60% 85%, rgba(214,58,133,.08) 0%, transparent 55%);
    pointer-events: none;
}

#page-casino .casino-hero::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(100,150,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100,150,255,.035) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

#page-casino .casino-hero-content { position: relative; z-index: 2; }

#page-casino .casino-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(232,168,32,.1);
    border: 1px solid rgba(232,168,32,.32);
    border-radius: 50px;
    padding: .26rem .9rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cas-gold-light);
    margin-bottom: .9rem;
}
#page-casino .casino-hero-badge i { animation: cas-pdot 2s infinite; }

#page-casino .casino-hero h1 {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1;
    color: #e8eef8;
    margin-bottom: .5rem;
    letter-spacing: -.01em;
}

#page-casino .casino-hero h1 .gradient-text {
    background: linear-gradient(90deg, var(--cas-gold-pale), var(--cas-gold-light), var(--cas-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#page-casino .casino-hero p {
    color: #8fa3cc;
    font-size: .9rem;
    max-width: 400px;
    margin: 0;
    line-height: 1.6;
}

#page-casino .hero-suits {
    position: absolute;
    right: 2.5rem; top: 50%;
    transform: translateY(-50%);
    display: flex; gap: 1.6rem;
    opacity: .055;
    font-size: 5.8rem;
    z-index: 1; user-select: none;
    color: var(--cas-gold-light);
}
#page-casino .hero-suits span { animation: cas-fsuit 4s ease-in-out infinite; }
#page-casino .hero-suits span:nth-child(2) { animation-delay: .8s; }
#page-casino .hero-suits span:nth-child(3) { animation-delay: 1.6s; }
#page-casino .hero-suits span:nth-child(4) { animation-delay: 2.4s; }

@keyframes cas-fsuit { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes cas-pdot  { 0%,100%{opacity:1} 50%{opacity:.2} }

/* ── PROMO CHIP ───────────────────────────────────────────── */
#page-casino .promo-chip {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    background: var(--cas-bg-card) !important;
    border: 1px solid var(--cas-border-gold) !important;
    border-radius: var(--cas-radius);
    padding: .9rem 1.3rem;
    box-shadow: var(--cas-shadow);
    transition: border-color .22s, box-shadow .22s;
    cursor: pointer;
    margin-bottom: 1.85rem;
}
#page-casino .promo-chip:hover {
    border-color: var(--cas-border-hover) !important;
    box-shadow: var(--cas-glow-gold), var(--cas-shadow-hover);
}
#page-casino .promo-chip-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; flex-shrink: 0;
    background: rgba(232,168,32,.12);
    color: var(--cas-gold-light);
}
#page-casino .promo-chip-label {
    font-size: .66rem; color: var(--cas-text-muted);
    text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
}
#page-casino .promo-chip-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.14rem; font-weight: 700;
    color: var(--cas-text-main); line-height: 1.1;
}

/* ── SECTION HEADER ──────────────────────────────────────── */
#page-casino .section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.1rem; flex-wrap: wrap; gap: .75rem;
}
#page-casino .section-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.22rem; font-weight: 700; letter-spacing: .05em;
    color: var(--cas-text-main) !important;
    display: flex; align-items: center; gap: .55rem;
}
#page-casino .section-title::before {
    content: ''; display: block; width: 4px; height: 1.1em; border-radius: 4px;
    background: linear-gradient(180deg, var(--cas-gold-light), var(--cas-accent));
}
#page-casino .see-all-link {
    color: var(--cas-gold); font-size: .78rem; font-weight: 600;
    text-decoration: none; letter-spacing: .06em; text-transform: uppercase;
    transition: color .2s;
}
#page-casino .see-all-link:hover { color: var(--cas-gold-light); }

/* ── FILTROS ──────────────────────────────────────────────── */
#page-casino .casino-filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }

#page-casino .casino-filter-btn {
    background: var(--cas-bg-card) !important;
    border: 1px solid var(--cas-border) !important;
    color: var(--cas-text-muted) !important;
    border-radius: 50px;
    padding: .34rem 1rem;
    font-size: .73rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    cursor: pointer; transition: all .2s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--cas-shadow);
    font-family: 'Exo 2', 'Plus Jakarta Sans', sans-serif;
}
#page-casino .casino-filter-btn:hover {
    background: rgba(232,168,32,.08) !important;
    border-color: var(--cas-gold) !important;
    color: var(--cas-gold-light) !important;
    transform: translateY(-1px);
    box-shadow: var(--cas-glow-gold);
}
#page-casino .casino-filter-btn.active {
    background: linear-gradient(135deg, rgba(232,168,32,.18), rgba(196,127,0,.12)) !important;
    border-color: var(--cas-gold) !important;
    color: var(--cas-gold-light) !important;
    box-shadow: var(--cas-glow-gold), 0 2px 8px rgba(196,127,0,.18);
    font-weight: 700;
}

/* ── GRID DE JUEGOS ───────────────────────────────────────── */
#page-casino .games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.1rem;
}

/* ── GAME CARD ────────────────────────────────────────────── */
#page-casino .game-card {
    position: relative;
    border-radius: var(--cas-radius);
    overflow: hidden;
    background: var(--cas-bg-card) !important;
    border: 1px solid var(--cas-border) !important;
    cursor: pointer;
    box-shadow: var(--cas-shadow);
    transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s, border-color .28s, background .28s;
    text-decoration: none;
    display: block;
    color: var(--cas-text-main);
}
#page-casino .game-card:hover {
    transform: translateY(-7px) scale(1.02);
    border-color: var(--cas-border-hover) !important;
    background: var(--cas-bg-hover) !important;
    box-shadow: var(--cas-glow-gold), var(--cas-shadow-hover);
    color: var(--cas-text-main);
}

#page-casino .game-card-img-wrap {
    position: relative; aspect-ratio: 3/2; overflow: hidden;
    background: var(--cas-bg-card2) !important;
    display: flex; align-items: center; justify-content: center;
}
#page-casino .game-card-img-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s cubic-bezier(.22,1,.36,1);
}
#page-casino .game-card:hover .game-card-img-wrap img { transform: scale(1.08); }

#page-casino .game-img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 3.6rem;
    background: linear-gradient(135deg, var(--cas-bg-card2) 0%, #d8dff0 100%) !important;
}

#page-casino .game-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(10,18,45,.94) 0%, rgba(10,18,45,.52) 45%, transparent 75%);
    display: flex; align-items: flex-end; justify-content: center;
    padding: 1rem; opacity: 0; transition: opacity .25s;
}
#page-casino .game-card:hover .game-card-overlay { opacity: 1; }

#page-casino .play-btn {
    background: linear-gradient(135deg, var(--cas-gold-light), var(--cas-gold)) !important;
    border: none; border-radius: 50px;
    color: #fff !important; font-weight: 800; font-size: .76rem;
    letter-spacing: .09em; text-transform: uppercase;
    padding: .54rem 1.5rem; cursor: pointer; width: 100%;
    transition: transform .15s, box-shadow .15s;
    box-shadow: 0 4px 18px rgba(196,127,0,.38);
    font-family: 'Exo 2', 'Plus Jakarta Sans', sans-serif;
}
#page-casino .play-btn:hover { transform: scale(1.04); box-shadow: 0 6px 26px rgba(196,127,0,.58); }

#page-casino .game-badge {
    position: absolute; top: .6rem; left: .6rem;
    font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    padding: .2rem .65rem; border-radius: 50px; z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,.22);
}
#page-casino .badge-new {
    background: linear-gradient(135deg, #d81b60, #c0185e);
    color: #fff;
}

#page-casino .game-card-body { padding: .76rem .9rem .86rem; background: transparent !important; }
#page-casino .game-name {
    font-family: 'Rajdhani', sans-serif; font-size: .98rem; font-weight: 700;
    letter-spacing: .04em; color: var(--cas-text-main) !important;
    margin-bottom: .12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#page-casino .game-provider { font-size: .67rem; color: var(--cas-text-muted); font-weight: 500; }

/* ── FEATURED CARD ────────────────────────────────────────── */
#page-casino .featured-card { grid-column: span 2; }
#page-casino .featured-card .game-card-img-wrap { aspect-ratio: 16/7; }

#page-casino .featured-card .game-card-overlay {
    opacity: 1;
    background: linear-gradient(to right, rgba(10,18,45,.97) 0%, rgba(10,18,45,.72) 50%, transparent 84%);
    flex-direction: column; align-items: flex-start; justify-content: center;
    padding: 1.8rem;
}
#page-casino .featured-card:hover .game-card-overlay {
    background: linear-gradient(to right, rgba(10,18,45,.99) 0%, rgba(10,18,45,.82) 55%, transparent 84%);
}

#page-casino .featured-label {
    font-size: .65rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--cas-gold-light); margin-bottom: .35rem;
    display: flex; align-items: center; gap: .32rem;
}
#page-casino .featured-title {
    font-family: 'Rajdhani', sans-serif; font-size: 1.85rem; font-weight: 700;
    color: #e8eef8; margin-bottom: .22rem; line-height: 1.08;
}
#page-casino .featured-desc {
    font-size: .76rem; color: #b8c8e8; margin-bottom: 1rem;
    max-width: 240px; line-height: 1.5;
}
#page-casino .featured-play-btn {
    background: linear-gradient(135deg, var(--cas-gold-light), var(--cas-gold)) !important;
    border: none; border-radius: 50px;
    color: #fff !important; font-weight: 800; font-size: .78rem;
    letter-spacing: .1em; text-transform: uppercase;
    padding: .58rem 1.7rem; cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    box-shadow: 0 4px 22px rgba(196,127,0,.38);
    text-decoration: none; display: inline-flex; align-items: center; gap: .4rem;
    font-family: 'Exo 2', 'Plus Jakarta Sans', sans-serif;
}
#page-casino .featured-play-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 32px rgba(196,127,0,.58);
    color: #fff !important;
}

/* ── MINESWEEPER DECO ─────────────────────────────────────── */
#page-casino .minesweeper-deco {
    position: absolute; right: 1.8rem; top: 50%; transform: translateY(-50%);
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 5px; opacity: .35; z-index: 1;
}
#page-casino .mine-cell {
    width: 28px; height: 28px; border-radius: 5px;
    background: rgba(100,140,220,.07); border: 1px solid rgba(100,140,220,.16);
    display: flex; align-items: center; justify-content: center;
    font-size: .63rem; font-weight: 700; color: transparent;
    animation: cas-creveal 6s ease-in-out infinite;
}
#page-casino .mine-cell.revealed {
    background: rgba(232,168,32,.14);
    border-color: rgba(232,168,32,.42);
    color: var(--cas-gold-light);
}
#page-casino .mine-cell.mine {
    background: rgba(214,58,133,.13);
    border-color: rgba(214,58,133,.40);
    color: var(--cas-accent); font-size: .9rem;
}
@keyframes cas-creveal { 0%,45%,100%{opacity:.35} 50%,95%{opacity:1} }

/* ── COMING SOON ──────────────────────────────────────────── */
#page-casino .game-card.coming-soon { opacity: .42; pointer-events: none; }
#page-casino .game-card.coming-soon .game-card-img-wrap::after {
    content: 'Próximamente';
    position: absolute; inset: 0;
    background: rgba(215,222,238,.78);
    display: flex; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--cas-text-muted); backdrop-filter: blur(4px);
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 580px) {
    #page-casino .featured-card { grid-column: span 1; }
    #page-casino .featured-card .game-card-img-wrap { aspect-ratio: 16/9; }
}
@media (max-width: 768px) {
    #page-casino .hero-suits { display: none; }
    #page-casino .games-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: .75rem; }
    #page-casino .casino-hero { padding: 1.8rem 1.4rem; min-height: 180px; }
    #page-casino .casino-hero h1 { font-size: clamp(1.8rem, 7vw, 2.8rem); }
}

        .retiro-wrap { max-width: 960px; margin: 0 auto; }

        /* SALDO BANNER */
        .saldo-banner {
            background: linear-gradient(135deg, #0d1627 0%, #1a3a6e 100%);
            border: 1px solid rgba(26,127,232,0.2);
            border-radius: var(--radius-xl);
            padding: 1.4rem 1.8rem;
            margin-bottom: 1.5rem;
            display: flex; align-items: center; justify-content: space-between; gap: 1rem;
        }
        .saldo-banner-left { display: flex; align-items: center; gap: 1rem; }
        .saldo-icon-wrap {
            width: 48px; height: 48px; border-radius: var(--radius-md);
            background: rgba(26,127,232,0.15); border: 1px solid rgba(26,127,232,0.25);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.4rem; color: var(--color-acento-secundario); flex-shrink: 0;
        }
        .saldo-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); margin-bottom: 2px; }
        .saldo-valor { font-size: 1.6rem; font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1; }
        .saldo-badge { font-size: 0.7rem; font-weight: 700; padding: 4px 12px; border-radius: var(--radius-pill); background: rgba(10,207,131,0.15); color: var(--color-acento-verde); border: 1px solid rgba(10,207,131,0.25); }

        /* CARDS */
        .retiro-card { background: #fff; border: 1px solid var(--color-bordes); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); overflow: hidden; }
        .retiro-card-header { background: linear-gradient(135deg, #0d1627 0%, #1a7fe8 100%); padding: 1rem 1.5rem; display: flex; align-items: center; gap: 10px; }
        .retiro-card-header-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-acento-secundario); flex-shrink: 0; box-shadow: 0 0 0 3px rgba(245,166,35,0.30); animation: soon-pulse 1.8s ease-in-out infinite; }
        .retiro-card-header-title { font-size: 0.96rem; font-weight: 700; color: #fff; letter-spacing: 0.02em; }
        .retiro-card-body { padding: 1.8rem; }

        /* LABELS / INPUTS */
        .retiro-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-texto-secundario); margin-bottom: 6px; display: block; }
        .monto-input-wrap { position: relative; margin-bottom: 1rem; }
        .monto-prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; font-weight: 800; color: var(--color-acento-primario); pointer-events: none; z-index: 2; }
        .monto-input { width: 100%; padding: 14px 14px 14px 32px; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; border: 2px solid var(--color-bordes); border-radius: var(--radius-md); background: #f6f9fc; color: var(--color-texto-principal); transition: border-color 0.18s, box-shadow 0.18s; outline: none; }
        .monto-input:focus { border-color: var(--color-acento-primario); background: #fff; box-shadow: 0 0 0 3px rgba(26,127,232,0.12); }
        .monto-input::placeholder { color: #c0cce0; font-weight: 500; font-size: 1rem; }

        /* CHIPS */
        .montos-rapidos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1.5rem; }
        .monto-chip { padding: 5px 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--color-bordes); background: #f6f9fc; color: var(--color-texto-secundario); font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: all 0.15s; user-select: none; }
        .monto-chip:hover { border-color: var(--color-acento-primario); color: var(--color-acento-primario); background: rgba(26,127,232,0.07); }
        .monto-chip.active { border-color: var(--color-acento-primario); background: var(--color-acento-primario); color: #fff; }

        /* BANCO GRID */

        /* INPUTS */
        .retiro-input { width: 100%; padding: 11px 14px; border: 2px solid var(--color-bordes); border-radius: var(--radius-md); background: #f6f9fc; color: var(--color-texto-principal); font-size: 0.9rem; font-weight: 600; transition: border-color 0.18s, box-shadow 0.18s; outline: none; }
        .retiro-input:focus { border-color: var(--color-acento-primario); background: #fff; box-shadow: 0 0 0 3px rgba(26,127,232,0.12); }

        .retiro-divider { height: 1px; background: var(--color-bordes); margin: 1.5rem 0; }

        /* SUBMIT */
        .btn-retiro-submit { width: 100%; padding: 14px; background: linear-gradient(135deg, #1a7fe8, #0f5cc0); color: #fff; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all 0.18s; box-shadow: var(--shadow-azul); display: flex; align-items: center; justify-content: center; gap: 8px; }
        .btn-retiro-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(26,127,232,0.42); }
        .btn-retiro-submit:disabled { opacity: 0.5; cursor: not-allowed; }

        /* CONDICIONES */
        .condiciones-card { background: #fff; border: 1px solid var(--color-bordes); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); overflow: hidden; position: sticky; top: 80px; }
        .condiciones-header { background: #0d1627; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 8px; }
        .condiciones-header i { color: var(--color-acento-secundario); font-size: 1rem; }
        .condiciones-header span { font-size: 0.88rem; font-weight: 700; color: #fff; }
        .condiciones-body { padding: 1.2rem 1.4rem; }
        .condicion-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-bordes); font-size: 0.82rem; color: var(--color-texto-secundario); line-height: 1.5; }
        .condicion-item:last-child { border-bottom: none; }
        .condicion-item i { font-size: 0.9rem; margin-top: 1px; flex-shrink: 0; }
        .condicion-item strong { color: var(--color-texto-principal); }

        .tiempos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-bordes); }
        .tiempo-item { background: #f6f9fc; border: 1px solid var(--color-bordes); border-radius: var(--radius-md); padding: 10px; text-align: center; }
        .tiempo-banco { font-size: 0.7rem; font-weight: 700; color: var(--color-texto-secundario); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
        .tiempo-valor { font-size: 0.82rem; font-weight: 800; color: var(--color-acento-verde); }

        /* ALERT */
        #retiro-alert { border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 600; padding: 10px 14px; margin-bottom: 1rem; display: none; }
        #retiro-alert.show { display: block; }

        .recarga-wrap { max-width: 820px; margin: 0 auto; }

        /* MÉTODO TABS */
        .metodos-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 1.5rem;
        }
        .metodo-tab {
            display: flex; flex-direction: column; align-items: center; gap: 8px;
            padding: 14px 10px;
            border: 2px solid var(--color-bordes);
            border-radius: var(--radius-lg);
            background: #fff;
            cursor: pointer;
            transition: all 0.18s;
            position: relative;
            user-select: none;
        }
        .metodo-tab:hover { border-color: var(--color-acento-primario); background: rgba(26,127,232,0.04); }
        .metodo-tab.active {
            border-color: var(--color-acento-primario);
            background: rgba(26,127,232,0.06);
            box-shadow: 0 0 0 3px rgba(26,127,232,0.1);
        }
        .metodo-tab .check-dot {
            position: absolute; top: 8px; right: 8px;
            width: 18px; height: 18px; border-radius: 50%;
            background: var(--color-acento-primario);
            display: none; align-items: center; justify-content: center;
            font-size: 10px; color: #fff;
        }
        .metodo-tab.active .check-dot { display: flex; }
        .metodo-tab img { height: 32px; object-fit: contain; }
        .metodo-tab .metodo-nombre { font-size: 0.75rem; font-weight: 700; color: var(--color-texto-principal); text-align: center; }

        /* PANEL CONTENIDO */
        .recarga-panel {
            background: #fff;
            border: 1px solid var(--color-bordes);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-card);
            overflow: hidden;
        }
        .recarga-panel-header {
            background: linear-gradient(135deg, #0d1627 0%, #1a7fe8 100%);
            padding: 1rem 1.5rem;
            display: flex; align-items: center; gap: 10px;
        }
        .recarga-panel-dot {
            width: 9px; height: 9px; border-radius: 50%;
            background: var(--color-acento-secundario); flex-shrink: 0;
            box-shadow: 0 0 0 3px rgba(245,166,35,0.30);
            animation: soon-pulse 1.8s ease-in-out infinite;
        }
        .recarga-panel-title { font-size: 0.96rem; font-weight: 700; color: #fff; }
        .recarga-panel-body { padding: 1.8rem; }
        .content-panel { display: none; }
        .content-panel.active { display: block; }

        /* MONTO */
        .recarga-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-texto-secundario); margin-bottom: 8px; display: block; }
        .montos-rapidos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1rem; }
        .monto-chip {
            padding: 7px 16px; border-radius: var(--radius-pill);
            border: 1.5px solid var(--color-bordes); background: #f6f9fc;
            color: var(--color-texto-secundario); font-size: 0.82rem; font-weight: 700;
            cursor: pointer; transition: all 0.15s; user-select: none;
        }
        .monto-chip:hover { border-color: var(--color-acento-primario); color: var(--color-acento-primario); background: rgba(26,127,232,0.07); }
        .monto-chip.active { border-color: var(--color-acento-primario); background: var(--color-acento-primario); color: #fff; }

        .monto-custom-wrap { position: relative; margin-bottom: 1.5rem; }
        .monto-custom-prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 1rem; font-weight: 800; color: var(--color-acento-primario); pointer-events: none; }
        .monto-custom-input {
            width: 100%; padding: 12px 12px 12px 28px;
            font-size: 1.1rem; font-weight: 700;
            border: 2px solid var(--color-bordes); border-radius: var(--radius-md);
            background: #f6f9fc; color: var(--color-texto-principal);
            transition: border-color 0.18s, box-shadow 0.18s; outline: none;
        }
        .monto-custom-input:focus { border-color: var(--color-acento-primario); background: #fff; box-shadow: 0 0 0 3px rgba(26,127,232,0.12); }
        .monto-custom-input::placeholder { color: #c0cce0; font-weight: 500; font-size: 0.9rem; }

        /* BTN SUBMIT */
        .btn-recarga-submit {
            width: 100%; padding: 13px;
            background: linear-gradient(135deg, #1a7fe8, #0f5cc0);
            color: #fff; font-size: 0.92rem; font-weight: 800;
            letter-spacing: 0.04em; text-transform: uppercase;
            border: none; border-radius: var(--radius-md);
            cursor: pointer; transition: all 0.18s;
            box-shadow: var(--shadow-azul);
            display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .btn-recarga-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(26,127,232,0.42); }

        /* DIVIDER */
        .recarga-divider { height: 1px; background: var(--color-bordes); margin: 1.4rem 0; }

        /* PASO A PASO */
        .paso-header {
            display: flex; align-items: center; gap: 10px;
            margin-bottom: 1.2rem;
        }
        .paso-numero {
            width: 28px; height: 28px; border-radius: 50%;
            background: var(--color-acento-primario); color: #fff;
            font-size: 0.8rem; font-weight: 800;
            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        }
        .paso-titulo { font-size: 0.9rem; font-weight: 700; color: var(--color-texto-principal); }

        /* QR BOX */
        .qr-box {
            background: #f6f9fc; border: 1px solid var(--color-bordes);
            border-radius: var(--radius-lg); padding: 1.5rem;
            text-align: center; margin-bottom: 1rem;
        }
        .qr-box img { max-width: 260px; width: 100%; border-radius: var(--radius-md); border: 1px solid var(--color-bordes); }

        /* COPIA NÚMERO */
        .copy-number-wrap {
            display: flex; align-items: center; gap: 8px;
            background: #fff; border: 2px solid var(--color-bordes);
            border-radius: var(--radius-md); padding: 10px 14px;
            margin-bottom: 1rem;
        }
        .copy-number-wrap i { color: var(--color-acento-primario); font-size: 1rem; flex-shrink: 0; }
        .copy-number-val { font-size: 1.1rem; font-weight: 800; color: var(--color-texto-principal); flex: 1; letter-spacing: 0.05em; }
        .copy-number-sub { font-size: 0.7rem; color: var(--color-texto-apagado); }
        .btn-copy {
            padding: 6px 14px; border-radius: var(--radius-pill);
            border: 1.5px solid var(--color-acento-primario);
            background: transparent; color: var(--color-acento-primario);
            font-size: 0.75rem; font-weight: 700; cursor: pointer;
            transition: all 0.15s; white-space: nowrap; flex-shrink: 0;
        }
        .btn-copy:hover { background: var(--color-acento-primario); color: #fff; }
        .btn-copy.copied { background: var(--color-acento-verde); border-color: var(--color-acento-verde); color: #fff; }

        /* INFO MÍNIMO */
        .info-minimo {
            display: flex; align-items: center; gap: 8px;
            font-size: 0.8rem; font-weight: 600;
            color: var(--color-acento-primario);
            background: rgba(26,127,232,0.07);
            border: 1px solid rgba(26,127,232,0.15);
            border-radius: var(--radius-md); padding: 8px 12px;
            margin-bottom: 1rem;
        }

        /* BTN PASO */
        .btn-paso {
            width: 100%; padding: 12px;
            border: none; border-radius: var(--radius-md);
            font-size: 0.88rem; font-weight: 800; letter-spacing: 0.03em;
            cursor: pointer; transition: all 0.18s;
            display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .btn-paso-nequi { background: #6e11f5; color: #fff; box-shadow: 0 4px 16px rgba(110,17,245,0.3); }
        .btn-paso-nequi:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(110,17,245,0.4); }
        .btn-paso-davi { background: #e00b1c; color: #fff; box-shadow: 0 4px 16px rgba(224,11,28,0.3); }
        .btn-paso-davi:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(224,11,28,0.4); }
        .btn-volver { background: #f6f9fc; color: var(--color-texto-secundario); border: 1.5px solid var(--color-bordes); width: auto; padding: 6px 14px; font-size: 0.8rem; }
        .btn-volver:hover { background: var(--color-bordes); }

        /* INPUT REFERENCIA */
        .ref-input {
            width: 100%; padding: 11px 14px;
            border: 2px solid var(--color-bordes); border-radius: var(--radius-md);
            background: #f6f9fc; font-size: 0.9rem; font-weight: 600;
            transition: border-color 0.18s, box-shadow 0.18s; outline: none;
        }
        .ref-input:focus { border-color: var(--color-acento-primario); background: #fff; box-shadow: 0 0 0 3px rgba(26,127,232,0.12); }

        /* ALERT */
        .recarga-alert { border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 600; padding: 10px 14px; margin-top: 1rem; display: none; }
        .recarga-alert.show { display: block; }

        /* BTN CONFIRMAR */
        .btn-confirmar {
            width: 100%; padding: 13px;
            background: linear-gradient(135deg, #0acf83, #07a067);
            color: #fff; font-size: 0.92rem; font-weight: 800;
            letter-spacing: 0.04em; text-transform: uppercase;
            border: none; border-radius: var(--radius-md);
            cursor: pointer; transition: all 0.18s;
            box-shadow: 0 4px 16px rgba(10,207,131,0.35);
            display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .btn-confirmar:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(10,207,131,0.45); }
        .btn-confirmar:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

        @media (max-width: 576px) {
            .metodos-grid { grid-template-columns: repeat(3,1fr); gap: 8px; }
            .metodo-tab { padding: 10px 6px; }
            .metodo-tab img { height: 24px; }
        }
        .recuperar-wrap {
            min-height: calc(100vh - 120px);
            display: flex; align-items: center; justify-content: center;
            padding: 2rem 1rem;
        }
        .recuperar-card {
            width: 100%; max-width: 440px;
            background: #fff;
            border: 1px solid var(--color-bordes);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-elevated);
            overflow: hidden;
        }

        /* HEADER */
        .recuperar-header {
            background: linear-gradient(135deg, #0d1627 0%, #1a7fe8 100%);
            padding: 2rem 1.8rem 1.6rem;
            text-align: center;
        }
        .recuperar-icon-wrap {
            width: 56px; height: 56px; border-radius: 50%;
            background: rgba(255,255,255,0.12);
            border: 2px solid rgba(255,255,255,0.2);
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 1rem;
            font-size: 1.5rem; color: var(--color-acento-secundario);
        }
        .recuperar-title { font-size: 1.15rem; font-weight: 800; color: #fff; margin-bottom: 4px; }
        .recuperar-sub { font-size: 0.8rem; color: rgba(255,255,255,0.6); }

        /* BODY */
        .recuperar-body { padding: 1.8rem; }

        .recuperar-label {
            font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.06em; color: var(--color-texto-secundario);
            margin-bottom: 6px; display: block;
        }

        .recuperar-input-wrap { position: relative; margin-bottom: 1.4rem; }
        .recuperar-input-icon {
            position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
            color: var(--color-texto-apagado); font-size: 1rem; pointer-events: none;
        }
        .recuperar-input {
            width: 100%; padding: 12px 14px 12px 40px;
            border: 2px solid var(--color-bordes); border-radius: var(--radius-md);
            background: #f6f9fc; font-size: 0.92rem; font-weight: 600;
            color: var(--color-texto-principal);
            transition: border-color 0.18s, box-shadow 0.18s; outline: none;
        }
        .recuperar-input:focus {
            border-color: var(--color-acento-primario); background: #fff;
            box-shadow: 0 0 0 3px rgba(26,127,232,0.12);
        }
        .recuperar-input::placeholder { color: #c0cce0; font-weight: 500; }

        /* ALERT */
        #recuperar-alert {
            border-radius: var(--radius-md); font-size: 0.83rem;
            font-weight: 600; padding: 10px 14px; margin-bottom: 1.2rem; display: none;
        }
        #recuperar-alert.show { display: block; }

        /* BTN */
        .btn-recuperar {
            width: 100%; padding: 13px;
            background: linear-gradient(135deg, #1a7fe8, #0f5cc0);
            color: #fff; font-size: 0.92rem; font-weight: 800;
            letter-spacing: 0.04em; text-transform: uppercase;
            border: none; border-radius: var(--radius-md);
            cursor: pointer; transition: all 0.18s;
            box-shadow: var(--shadow-azul);
            display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .btn-recuperar:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(26,127,232,0.42); }
        .btn-recuperar:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

        /* FOOTER LINK */
        .recuperar-footer {
            text-align: center; margin-top: 1.2rem;
            font-size: 0.82rem; color: var(--color-texto-apagado);
        }
        .recuperar-footer a {
            color: var(--color-acento-primario); font-weight: 700;
            text-decoration: none;
        }
        .recuperar-footer a:hover { text-decoration: underline; }

        /* ESTADO ÉXITO */
        .success-state { text-align: center; padding: 1rem 0; display: none; }
        .success-icon-wrap {
            width: 64px; height: 64px; border-radius: 50%;
            background: rgba(10,207,131,0.12); border: 2px solid rgba(10,207,131,0.3);
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 1rem; font-size: 1.8rem; color: var(--color-acento-verde);
            animation: success-pop 0.4s cubic-bezier(0.34,1.56,0.64,1);
        }
        @keyframes success-pop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        .success-title { font-size: 1rem; font-weight: 800; color: var(--color-texto-principal); margin-bottom: 6px; }
        .success-desc { font-size: 0.82rem; color: var(--color-texto-secundario); line-height: 1.6; }
               @keyframes success-pop {
            from { transform: scale(0.5); opacity: 0; }
            to   { transform: scale(1);   opacity: 1; }
        }
        .retiro-alert-msg {
            border-radius: var(--radius-md); font-size: 0.85rem;
            font-weight: 600; padding: 10px 14px; margin-bottom: 1rem; display: none;
        }
        .retiro-alert-msg.show { display: block; }
               .reset-wrap {
            min-height: calc(100vh - 120px);
            display: flex; align-items: center; justify-content: center;
            padding: 2rem 1rem;
        }
        .reset-card {
            width: 100%; max-width: 460px;
            background: #fff;
            border: 1px solid var(--color-bordes);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-elevated);
            overflow: hidden;
        }
        .reset-card-header {
            background: linear-gradient(135deg, #0d1627 0%, #1a7fe8 100%);
            padding: 2rem 1.8rem 1.6rem;
            text-align: center;
        }
        .reset-icon-wrap {
            width: 56px; height: 56px; border-radius: 50%;
            background: rgba(255,255,255,0.12);
            border: 2px solid rgba(255,255,255,0.2);
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 1rem;
            font-size: 1.5rem; color: var(--color-acento-secundario);
        }
        .reset-card-title { font-size: 1.15rem; font-weight: 800; color: #fff; margin-bottom: 4px; }
        .reset-card-sub { font-size: 0.8rem; color: rgba(255,255,255,0.6); }

        .reset-card-body { padding: 1.8rem; }

        /* LABEL */
        .reset-label {
            font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.06em; color: var(--color-texto-secundario);
            margin-bottom: 6px; display: block;
        }

        /* INPUT WRAP */
        .pass-input-wrap { position: relative; margin-bottom: 1.1rem; }
        .pass-input {
            width: 100%; padding: 12px 44px 12px 14px;
            border: 2px solid var(--color-bordes); border-radius: var(--radius-md);
            background: #f6f9fc; font-size: 0.92rem; font-weight: 600;
            color: var(--color-texto-principal);
            transition: border-color 0.18s, box-shadow 0.18s; outline: none;
        }
        .pass-input:focus {
            border-color: var(--color-acento-primario); background: #fff;
            box-shadow: 0 0 0 3px rgba(26,127,232,0.12);
        }
        .pass-input.is-valid { border-color: var(--color-acento-verde); }
        .pass-input.is-invalid { border-color: var(--color-peligro); }
        .eye-btn {
            position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
            background: none; border: none; color: var(--color-texto-apagado);
            cursor: pointer; font-size: 1rem; padding: 0;
            transition: color 0.15s;
        }
        .eye-btn:hover { color: var(--color-acento-primario); }

        /* STRENGTH BAR */
        .strength-wrap { margin-bottom: 1.2rem; }
        .strength-bar {
            height: 4px; border-radius: 4px; background: var(--color-bordes);
            margin-bottom: 4px; overflow: hidden;
        }
        .strength-fill {
            height: 100%; border-radius: 4px; width: 0%;
            transition: width 0.3s, background 0.3s;
        }
        .strength-text { font-size: 0.7rem; font-weight: 600; color: var(--color-texto-apagado); }

        /* ALERT */
        #reset-alert {
            border-radius: var(--radius-md); font-size: 0.83rem;
            font-weight: 600; padding: 10px 14px; margin-bottom: 1.2rem; display: none;
        }
        #reset-alert.show { display: block; }

        /* BTN */
        .btn-reset {
            width: 100%; padding: 13px;
            background: linear-gradient(135deg, #1a7fe8, #0f5cc0);
            color: #fff; font-size: 0.92rem; font-weight: 800;
            letter-spacing: 0.04em; text-transform: uppercase;
            border: none; border-radius: var(--radius-md);
            cursor: pointer; transition: all 0.18s;
            box-shadow: var(--shadow-azul);
            display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .btn-reset:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(26,127,232,0.42); }
        .btn-reset:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

        /* REQUISITOS */
        .req-list { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; gap: 6px; }
        .req-item {
            display: flex; align-items: center; gap: 5px;
            font-size: 0.72rem; font-weight: 600;
            padding: 3px 10px; border-radius: var(--radius-pill);
            background: #f6f9fc; border: 1px solid var(--color-bordes);
            color: var(--color-texto-apagado); transition: all 0.2s;
        }
        .req-item.ok { background: rgba(10,207,131,0.1); border-color: rgba(10,207,131,0.3); color: var(--color-acento-verde); }
        .req-item i { font-size: 0.7rem; }

/* ===============================================================
   FAQ & COMO APOSTAR — ESTILOS FALTANTES
   =============================================================== */

/* --- Textos del encabezado informativo --- */
.faq-preamble-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-texto-principal);
    margin-bottom: 0.35rem;
}

.faq-support-text {
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
    margin-bottom: 0;
}

.faq-support-link {
    color: var(--color-acento-primario);
    font-weight: 700;
    text-decoration: underline;
}
.faq-support-link:hover {
    color: #3d94f0;
}

/* --- Contenedor de items FAQ --- */
.faq-items-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* --- Encabezado de categoría --- */
.faq-category-header {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-texto-principal);
    background-color: #f6f9fc;
    border: 1px solid var(--color-bordes);
    border-radius: var(--radius-md);
    padding: 0.65rem 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Item FAQ individual --- */
.faq-item-premium {
    border: 1px solid var(--color-bordes);
    border-radius: var(--radius-md);
    margin-bottom: 0.6rem;
    background-color: #ffffff;
    overflow: hidden;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.faq-item-premium:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-bordes-brillo);
}

/* --- Pregunta --- */
.faq-question {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1rem 1.2rem;
    cursor: pointer;
}
.faq-question h3 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-texto-principal);
    margin-bottom: 0;
    letter-spacing: -0.01em;
}

.q-icon {
    color: var(--color-acento-primario);
    font-size: 1rem;
    flex-shrink: 0;
    opacity: 0.8;
}

/* --- Respuesta --- */
.faq-answer {
    padding: 0 1.2rem 1.1rem 2.6rem;
    font-size: 0.875rem;
    color: var(--color-texto-secundario);
    line-height: 1.7;
}
.faq-answer p { margin-bottom: 0.5rem; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul,
.faq-answer ol {
    margin-bottom: 0.5rem;
    padding-left: 1.4rem;
}
.faq-answer li { margin-bottom: 0.3rem; }
.faq-answer strong { color: var(--color-texto-principal); font-weight: 700; }

/* ---------------------------------------------------------------
   GUÍA "CÓMO APOSTAR" — PASOS Y TIPOS
   --------------------------------------------------------------- */

/* --- Tarjeta de paso numerado --- */
.guide-step-card {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    background-color: #ffffff;
    border: 1px solid var(--color-bordes);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.6rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.guide-step-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.guide-step-number {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--grad-acento);
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-azul);
}

.guide-step-content h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-texto-principal);
    margin-bottom: 0.4rem;
}
.guide-step-content p {
    font-size: 0.875rem;
    color: var(--color-texto-secundario);
    margin-bottom: 0;
    line-height: 1.65;
}
.guide-step-content strong {
    color: var(--color-texto-principal);
    font-weight: 700;
}

/* --- Grid de tipos de apuesta --- */
.bet-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.bet-type-card {
    background-color: #ffffff;
    border: 1px solid var(--color-bordes);
    border-radius: var(--radius-lg);
    padding: 1.3rem 1.4rem;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}
.bet-type-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
    border-color: rgba(26, 127, 232, 0.25);
}
.bet-type-card h5 {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--color-texto-principal);
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bet-type-card h5 i {
    color: var(--color-acento-primario);
    font-size: 1.05rem;
}
.bet-type-card p {
    font-size: 0.84rem;
    color: var(--color-texto-secundario);
    margin-bottom: 0;
    line-height: 1.6;
}
.bet-type-card strong {
    color: var(--color-texto-principal);
    font-weight: 700;
}

/* --- Sección CTA final de la guía --- */
.guide-cta-section {
    text-align: center;
    background: linear-gradient(135deg, #0d1627 0%, #1a7fe8 100%);
    border-radius: var(--radius-xl);
    padding: 2.5rem 2rem;
    margin-top: 2rem;
    color: #ffffff;
}
.guide-cta-section h4 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.6rem;
}
.guide-cta-section p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.4rem;
}

/* --- Responsive FAQ & Guía --- */
@media (max-width: 768px) {
    .faq-content-card-premium { padding: 1.2rem; }
    .faq-header-info { flex-direction: column; }
    .faq-info-icon { margin-right: 0; margin-bottom: 0.75rem; }
    .guide-step-card { flex-direction: column; gap: 0.8rem; padding: 1.1rem; }
    .bet-type-grid { grid-template-columns: 1fr; }
    .guide-cta-section { padding: 1.8rem 1.2rem; }
}


/* ===============================================================
   SECCIÓN: APUESTA CON ZAFRA 🐾
   =============================================================== */

/* ── Hero ───────────────────────────────────────────────────────── */
.zafra-hero {
    position: relative;
    background: linear-gradient(135deg, #0d1627 0%, #1a1040 50%, #0d1627 100%);
    border-radius: var(--radius-xl);
    padding: 2rem 2rem 1.8rem;
    margin-bottom: 1.2rem;
    overflow: hidden;
    border: 1px solid rgba(138, 43, 226, 0.2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(138,43,226,0.08);
}

.zafra-hero-bg-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 10% 50%, rgba(138,43,226,0.15) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 20%, rgba(26,127,232,0.12) 0%, transparent 50%);
    pointer-events: none;
}

.zafra-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.8rem;
    flex-wrap: wrap;
}

.zafra-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.zafra-avatar-img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(138, 43, 226, 0.55);
    box-shadow: 0 0 0 6px rgba(138,43,226,0.12), 0 8px 28px rgba(0,0,0,0.4);
    background: #1a1040;
}

.zafra-live-dot {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 14px;
    height: 14px;
    background: #0acf83;
    border-radius: 50%;
    border: 2px solid #0d1627;
    box-shadow: 0 0 8px rgba(10, 207, 131, 0.6);
    animation: zafra-pulse 1.8s ease-in-out infinite;
}

@keyframes zafra-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(10,207,131,0.6); }
    50%       { box-shadow: 0 0 18px rgba(10,207,131,0.9); }
}

.zafra-hero-text { flex: 1; min-width: 220px; }

.zafra-hero-title {
    font-size: 1.7rem;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 0.4rem;
    letter-spacing: -0.03em;
}

.zafra-name-accent {
    background: linear-gradient(90deg, #b36aff, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.zafra-hero-subtitle {
    color: rgba(255,255,255,0.65);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.2rem;
    max-width: 520px;
}

.zafra-stats-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.zafra-stat { display: flex; flex-direction: column; }

.zafra-stat-num {
    font-size: 1.4rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    font-family: 'DM Mono', monospace;
}

.zafra-stat-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

/* ── Barra de filtros ───────────────────────────────────────────── */
.zafra-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #ffffff;
    border: 1px solid var(--color-bordes);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1rem;
    margin-bottom: 1.2rem;
    box-shadow: var(--shadow-card);
    flex-wrap: wrap;
}

.zafra-filter-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-texto-secundario);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.zafra-filter-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.zafra-filter-btn {
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-bordes);
    background: transparent;
    color: var(--color-texto-secundario);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.zafra-filter-btn:hover:not(.active) {
    background: #eef5ff;
    border-color: var(--color-acento-primario);
    color: var(--color-acento-primario);
}
.zafra-filter-btn.active {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

/* ── Estado carga / vacío ───────────────────────────────────────── */
.zafra-loading, .zafra-empty {
    text-align: center;
    padding: 3rem 1rem;
}
.zafra-loading-img {
    width: 90px;
    border-radius: 50%;
    margin-bottom: 1rem;
    border: 3px solid rgba(124, 58, 237, 0.3);
}
.zafra-loading-text {
    color: var(--color-texto-secundario);
    font-size: 0.95rem;
    font-weight: 600;
}

/* ── Grid de combos ─────────────────────────────────────────────── */
.zafra-combos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.2rem;
    margin-bottom: 1.5rem;
}

/* ── Combo card ─────────────────────────────────────────────────── */
.zafra-combo-card {
    background: #ffffff;
    border: 1px solid var(--color-bordes);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
    display: flex;
    flex-direction: column;
}
.zafra-combo-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
}

/* Header del combo */
.zafra-combo-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 1.2rem 0.75rem;
    gap: 0.5rem;
    border-bottom: 1px solid var(--color-bordes);
}

.zafra-combo-header-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Badges de nivel */
.zafra-nivel-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.badge-seguro      { background: rgba(10,207,131,0.12); color: #0a7a50; border: 1px solid rgba(10,207,131,0.3); }
.badge-equilibrado { background: rgba(26,127,232,0.1);  color: #1056a8; border: 1px solid rgba(26,127,232,0.25); }
.badge-atrevido    { background: rgba(245,166,35,0.12); color: #a06000; border: 1px solid rgba(245,166,35,0.3); }
.badge-loco        { background: rgba(239,59,59,0.1);   color: #b91c1c; border: 1px solid rgba(239,59,59,0.25); }

.zafra-special-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #7c3aed;
    background: rgba(124,58,237,0.08);
    border: 1px solid rgba(124,58,237,0.2);
    padding: 2px 10px;
    border-radius: var(--radius-pill);
}

.zafra-combo-odds-total {
    text-align: right;
    flex-shrink: 0;
}
.zafra-odds-label {
    display: block;
    font-size: 0.65rem;
    color: var(--color-texto-apagado);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.zafra-odds-big {
    font-size: 1.55rem;
    font-weight: 900;
    color: var(--color-acento-secundario);
    line-height: 1.1;
    font-family: 'DM Mono', monospace;
    text-shadow: 0 1px 6px rgba(245,166,35,0.25);
}

/* Frase de Zafra */
.zafra-frase {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(124,58,237,0.06) 0%, rgba(26,127,232,0.04) 100%);
    border-bottom: 1px dashed var(--color-bordes);
    padding: 0.8rem 1.2rem;
    font-size: 0.82rem;
    font-style: italic;
    color: var(--color-texto-secundario);
    font-weight: 600;
}
.zafra-frase-img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(124,58,237,0.3);
}

/* Lista de selecciones */
.zafra-sel-list {
    flex: 1;
    padding: 0.5rem 0;
}

.zafra-sel-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 1.2rem;
    border-bottom: 1px solid #f4f7fc;
    gap: 0.5rem;
    transition: background var(--transition-fast);
}
.zafra-sel-item:last-child { border-bottom: none; }
.zafra-sel-item:hover { background: #f8fbff; }

.zafra-sel-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.zafra-sel-sport {
    font-size: 1.15rem;
    flex-shrink: 0;
}
.zafra-sel-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.zafra-sel-teams {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-texto-principal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zafra-sel-market {
    font-size: 0.72rem;
    color: var(--color-texto-apagado);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zafra-sel-odds {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--color-acento-primario);
    flex-shrink: 0;
    font-family: 'DM Mono', monospace;
    background: rgba(26,127,232,0.07);
    border: 1px solid rgba(26,127,232,0.15);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

/* Footer del combo */
.zafra-combo-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1.2rem;
    background: #f8fbff;
    border-top: 1px solid var(--color-bordes);
    gap: 0.75rem;
    flex-wrap: wrap;
}

.zafra-ganancia-preview { font-size: 0.78rem; color: var(--color-texto-secundario); }
.zafra-gan-label { display: block; margin-bottom: 1px; }
.zafra-gan-value {
    font-size: 1rem;
    font-weight: 900;
    color: #0a7a50;
    font-family: 'DM Mono', monospace;
}

.btn-zafra-add {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
    font-family: 'Plus Jakarta Sans', sans-serif;
    white-space: nowrap;
}
.btn-zafra-add:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(124, 58, 237, 0.5);
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}
.btn-zafra-add:disabled {
    opacity: 0.85;
    cursor: default;
    transform: none;
}

/* ── Sin resultados de nivel ─────────────────────────────────────── */
.zafra-no-level {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--color-texto-secundario);
    font-weight: 600;
    font-size: 0.95rem;
}
.zafra-no-level img { display: block; margin: 0 auto 1rem; }

/* ── Disclaimer ─────────────────────────────────────────────────── */
.zafra-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius-md);
    padding: 0.8rem 1rem;
    font-size: 0.8rem;
    color: #92400e;
    font-weight: 600;
    margin-bottom: 2rem;
}
.zafra-disclaimer i { color: #d97706; font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .zafra-hero { padding: 1.4rem 1.2rem; }
    .zafra-hero-content { gap: 1rem; }
    .zafra-avatar-img { width: 80px; height: 80px; }
    .zafra-hero-title { font-size: 1.3rem; }
    .zafra-combos-grid { grid-template-columns: 1fr; }
    .zafra-combo-footer { flex-direction: column; align-items: stretch; }
    .btn-zafra-add { justify-content: center; width: 100%; }
    .zafra-stats-row { gap: 1rem; }
}

/* ── Tag de goles dentro de selección Zafra ── */
.zafra-goles-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #166534;
    background: rgba(22, 101, 52, 0.10);
    border: 1px solid rgba(22, 101, 52, 0.22);
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    vertical-align: middle;
    margin-left: 4px;
}

/* ================================================================
   DARK MODE — DresBet 2025
   Se activa añadiendo la clase .dark-mode al elemento <html>
   El toggle se inyecta automáticamente desde app.js
   ================================================================ */

/* ── TRANSICIÓN GLOBAL SUAVE ──────────────────────────────────── */
*, *::before, *::after {
    transition:
        background-color 0.22s ease,
        border-color     0.22s ease,
        color            0.18s ease,
        box-shadow       0.22s ease,
        fill             0.22s ease;
}
/* Excluir elementos con animaciones propias */
.odd-button,
.preloader,
.live-badge,
.slip-remove-btn,
.success-pop,
[class*="animation"] {
    transition: none !important;
}

/* ── VARIABLES DARK MODE ──────────────────────────────────────── */
html.dark-mode {
    --color-fondo-principal:    #0b0e15;
    --color-fondo-secundario:   #111520;
    --color-fondo-card:         #161b27;
    --color-fondo-elevado:      #1c2233;
    --color-fondo-hover:        #222840;

    --color-navbar-fondo:       #080b12;

    --color-acento-primario:    #3b9eff;
    --color-acento-secundario:  #f5a623;
    --color-acento-azul:        #3b9eff;
    --color-acento-rojo:        #ef3b3b;
    --color-acento-verde:       #0acf83;

    --color-texto-principal:    #e4e8f2;
    --color-texto-secundario:   #7e8fa8;
    --color-texto-apagado:      #4a5568;

    --color-bordes:             #232a3d;
    --color-bordes-brillo:      #2d3650;

    --color-exito:              #0acf83;
    --color-peligro:            #ef3b3b;

    --color-fondo-oscuro:       #080b12;
    --color-superficie-oscura:  #080b12;

    --grad-navbar:              linear-gradient(90deg, #050810 0%, #080c18 50%, #050810 100%);
    --grad-acento:              linear-gradient(135deg, #3b9eff 0%, #1a7fe8 100%);
    --grad-hero:                linear-gradient(135deg, #080c18 0%, #1a4070 100%);
    --grad-card-hover:          linear-gradient(135deg, rgba(59,158,255,0.05) 0%, rgba(59,158,255,0.01) 100%);

    --shadow-card:              0 1px 4px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.2);
    --shadow-card-hover:        0 4px 12px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.3);
    --shadow-elevated:          0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
    --shadow-azul:              0 4px 20px rgba(59,158,255,0.25);
}

/* ── BASE ─────────────────────────────────────────────────────── */
html.dark-mode body {
    background-color: var(--color-fondo-principal);
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(59,158,255,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(10,207,131,0.02) 0%, transparent 50%);
    color: var(--color-texto-principal);
}

/* ── NAVBAR ───────────────────────────────────────────────────── */
html.dark-mode .navbar {
    background: var(--grad-navbar) !important;
    border-bottom: 1px solid rgba(59,158,255,0.08);
    box-shadow: 0 4px 24px rgba(0,0,0,0.6), 0 1px 0 rgba(59,158,255,0.04);
}

/* ── BOTÓN TOGGLE DARK MODE ───────────────────────────────────── */
.dark-toggle-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
    font-size: 0.88rem;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    margin-right: 8px;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.2s, border-color 0.2s, color 0.2s !important;
}
.dark-toggle-btn:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.28);
    color: #fff;
    transform: rotate(20deg) scale(1.1);
}
html.dark-mode .dark-toggle-btn {
    border-color: rgba(10,207,131,0.3);
    background: rgba(10,207,131,0.08);
    color: #0acf83;
}
html.dark-mode .dark-toggle-btn:hover {
    background: rgba(10,207,131,0.18);
    border-color: rgba(10,207,131,0.5);
    transform: rotate(-20deg) scale(1.1);
}

/* ── DROPDOWN USUARIO ─────────────────────────────────────────── */
html.dark-mode .user-dropdown-menu,
html.dark-mode .dropdown-menu {
    background-color: var(--color-fondo-elevado);
    border-color: var(--color-bordes);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
}
html.dark-mode .user-dropdown-menu .dropdown-item,
html.dark-mode .dropdown-item {
    color: var(--color-texto-principal);
}
html.dark-mode .user-dropdown-menu .dropdown-item:hover,
html.dark-mode .dropdown-item:hover {
    background-color: var(--color-fondo-hover);
    color: var(--color-acento-primario);
}
html.dark-mode .user-dropdown-menu .dropdown-divider,
html.dark-mode .dropdown-divider {
    border-top-color: var(--color-bordes);
}
html.dark-mode .user-dropdown-menu .dropdown-item i {
    color: var(--color-acento-primario);
}

/* ── SIDEBAR ──────────────────────────────────────────────────── */
html.dark-mode .sidebar-container {
    background-color: var(--color-fondo-card);
    border-color: var(--color-bordes);
}
html.dark-mode .sidebar-search-bar .form-control {
    background-color: var(--color-fondo-principal);
    border-color: var(--color-bordes);
    color: var(--color-texto-principal);
}
html.dark-mode .sidebar-search-bar .form-control::placeholder {
    color: var(--color-texto-apagado);
}
html.dark-mode .sidebar-search-bar .form-control:focus {
    background-color: var(--color-fondo-elevado);
    border-color: var(--color-acento-primario);
    box-shadow: 0 0 0 3px rgba(59,158,255,0.12);
}
html.dark-mode .sidebar-league-group .group-header {
    color: var(--color-texto-principal);
    border-bottom-color: var(--color-bordes);
}
html.dark-mode .popular-list li a {
    color: var(--color-texto-secundario);
}
html.dark-mode .popular-list li a:hover {
    background-color: var(--color-fondo-hover);
    color: var(--color-texto-principal);
}
html.dark-mode .league-item {
    color: var(--color-texto-secundario);
}
html.dark-mode .league-item:hover {
    background-color: var(--color-fondo-hover);
    color: var(--color-texto-principal);
}
html.dark-mode .league-item .match-count {
    background-color: rgba(59,158,255,0.1);
    color: var(--color-acento-primario);
}
html.dark-mode .result-item .match-info .teams {
    color: var(--color-texto-principal);
}

/* ── LISTA DE PARTIDOS ────────────────────────────────────────── */
html.dark-mode .match-list-header {
    color: var(--color-texto-apagado);
    border-bottom-color: var(--color-bordes);
}
html.dark-mode .match-row {
    background-color: var(--color-fondo-card);
    border-bottom-color: var(--color-bordes);
}
html.dark-mode .match-row:hover {
    background-color: var(--color-fondo-hover);
    box-shadow: inset 3px 0 0 var(--color-acento-primario);
}
html.dark-mode .match-row-time {
    color: var(--color-texto-secundario);
}
html.dark-mode .match-row-time strong {
    color: var(--color-acento-primario);
}

/* ── ODD BUTTONS ──────────────────────────────────────────────── */
html.dark-mode .odd-button {
    background: var(--color-fondo-elevado);
    border-color: var(--color-bordes);
    color: var(--color-texto-principal);
    transition: all var(--transition-fast) !important;
}
html.dark-mode .odd-button:hover:not(:disabled) {
    background: rgba(59,158,255,0.1);
    border-color: var(--color-acento-primario);
    color: var(--color-acento-primario);
    box-shadow: 0 3px 14px rgba(59,158,255,0.18);
    transform: translateY(-1px);
}
html.dark-mode .odd-button.selected {
    background: linear-gradient(135deg, #ffcc00 0%, #f5a800 55%, #e89000 100%);
    border-color: #f5a800;
    color: #1a1200;
    box-shadow: 0 4px 20px rgba(245,168,0,0.45), 0 0 0 2px rgba(255,204,0,0.2);
}
html.dark-mode .odd-button.slim .odd-market {
    color: var(--color-texto-apagado);
}
html.dark-mode .odd-button.locked,
html.dark-mode .odd-button:disabled {
    background: var(--color-fondo-principal) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-apagado) !important;
    opacity: 0.45;
}
html.dark-mode .btn-more-markets {
    border-color: var(--color-bordes);
    color: var(--color-texto-secundario);
}
html.dark-mode .btn-more-markets:hover {
    background-color: var(--color-fondo-hover);
    border-color: var(--color-acento-primario);
    color: var(--color-acento-primario);
}
html.dark-mode .odd-button.wide .market-line {
    color: var(--color-texto-secundario);
}

/* ── MIS APUESTAS ─────────────────────────────────────────────── */
html.dark-mode .bet-card-item {
    background-color: var(--color-fondo-card);
    border-color: var(--color-bordes);
}
html.dark-mode .bet-card-summary:hover {
    background-color: rgba(59,158,255,0.03);
}
html.dark-mode .bet-card-details {
    background-color: var(--color-fondo-principal);
    border-top-color: var(--color-bordes);
}
html.dark-mode .segmented-status-bar {
    background-color: var(--color-bordes);
}
html.dark-mode .bet-detail-item {
    border-bottom-color: var(--color-bordes);
}
html.dark-mode .detail-number {
    background: var(--color-fondo-elevado);
    border-color: var(--color-bordes);
    color: var(--color-texto-apagado);
}
html.dark-mode .detail-market { color: var(--color-texto-principal); }
html.dark-mode .detail-teams { color: var(--color-texto-secundario); }
html.dark-mode .detail-meta { color: var(--color-texto-apagado); }
html.dark-mode .detail-score {
    background: var(--color-fondo-elevado);
    border-color: var(--color-bordes);
    color: var(--color-texto-principal);
}
html.dark-mode .bet-financials strong { color: var(--color-texto-principal); }
html.dark-mode .summary-line-2 .compact-selection-market { color: var(--color-texto-principal); }
html.dark-mode .summary-line-2 .compact-selection-teams { color: var(--color-texto-secundario); }
html.dark-mode .bet-meta-mobile { color: var(--color-texto-apagado); }
html.dark-mode .bet-financials { border-top-color: var(--color-bordes); }

html.dark-mode .detail-status-ganada { background: rgba(10,207,131,0.12); color: #0acf83; }
html.dark-mode .detail-status-perdida { background: rgba(239,59,59,0.12); color: #ef3b3b; }
html.dark-mode .detail-status-pendiente { background: rgba(245,166,35,0.12); color: #f5a623; }
html.dark-mode .bet-status-text.status-live {
    background: rgba(239,59,59,0.12);
    color: #ef3b3b;
}

html.dark-mode .cashout-btn {
    background: rgba(10,207,131,0.1);
    border-color: rgba(10,207,131,0.25);
    color: #0acf83;
}
html.dark-mode .cashout-btn:hover {
    background: rgba(10,207,131,0.18);
    border-color: rgba(10,207,131,0.4);
}
html.dark-mode .cashout-btn.btn-confirm {
    background: rgba(245,166,35,0.12);
    border-color: rgba(245,166,35,0.3);
    color: #f5a623;
}

/* ── BET SLIP ─────────────────────────────────────────────────── */
html.dark-mode #betSlipContainerModern {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
    box-shadow: -4px 0 40px rgba(0,0,0,0.6) !important;
}
html.dark-mode .slip-header {
    background: var(--color-fondo-elevado) !important;
    border-bottom-color: var(--color-bordes) !important;
    color: var(--color-texto-principal) !important;
}
html.dark-mode .slip-item,
html.dark-mode .bet-slip-item {
    background: var(--color-fondo-principal) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode .slip-footer,
html.dark-mode .bet-slip-footer {
    background: var(--color-fondo-elevado) !important;
    border-top-color: var(--color-bordes) !important;
}
html.dark-mode .slip-team-names,
html.dark-mode .slip-selection { color: var(--color-texto-principal) !important; }
html.dark-mode .slip-market,
html.dark-mode .slip-league { color: var(--color-texto-secundario) !important; }
html.dark-mode input.slip-input-stake,
html.dark-mode .slip-stake-input {
    background: var(--color-fondo-principal) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-principal) !important;
}
html.dark-mode .mobile-slip-bar {
    background: var(--color-fondo-card) !important;
    border-top-color: var(--color-bordes) !important;
}

/* ── FORMULARIOS GENERALES ────────────────────────────────────── */
html.dark-mode input[type="text"],
html.dark-mode input[type="number"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode input[type="search"],
html.dark-mode select,
html.dark-mode textarea {
    background-color: var(--color-fondo-principal) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-principal) !important;
}
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: var(--color-texto-apagado) !important;
}
html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus {
    border-color: var(--color-acento-primario) !important;
    box-shadow: 0 0 0 3px rgba(59,158,255,0.14) !important;
    background-color: var(--color-fondo-elevado) !important;
}
html.dark-mode select option {
    background-color: var(--color-fondo-elevado);
    color: var(--color-texto-principal);
}
html.dark-mode .form-check-input {
    background-color: var(--color-fondo-elevado);
    border-color: var(--color-bordes);
}
html.dark-mode .form-check-input:checked {
    background-color: var(--color-acento-primario);
    border-color: var(--color-acento-primario);
}

/* ── RETIRO / RECARGA CARDS ───────────────────────────────────── */
html.dark-mode .retiro-wrap,
html.dark-mode .recarga-wrap { color: var(--color-texto-principal); }

html.dark-mode .retiro-card,
html.dark-mode .recarga-panel {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode .retiro-card-header,
html.dark-mode .recarga-panel-header {
    background: var(--color-fondo-elevado) !important;
    border-bottom-color: var(--color-bordes) !important;
    color: var(--color-texto-principal) !important;
}
html.dark-mode .retiro-card-header-title,
html.dark-mode .recarga-panel-title { color: var(--color-texto-principal) !important; }

html.dark-mode .retiro-label,
html.dark-mode .recarga-label { color: var(--color-texto-secundario); }

html.dark-mode .retiro-input,
html.dark-mode .monto-input,
html.dark-mode .ref-input {
    background: var(--color-fondo-principal) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-principal) !important;
}
html.dark-mode .monto-input-wrap {
    background: var(--color-fondo-principal);
    border-color: var(--color-bordes);
}
html.dark-mode .monto-prefix { color: var(--color-texto-apagado); }
html.dark-mode .retiro-divider { border-color: var(--color-bordes); }

html.dark-mode .monto-chip {
    background: var(--color-fondo-elevado);
    border-color: var(--color-bordes);
    color: var(--color-texto-secundario);
}
html.dark-mode .monto-chip:hover {
    border-color: var(--color-acento-verde);
    color: var(--color-acento-verde);
    background: rgba(10,207,131,0.08);
}
html.dark-mode .monto-chip.active {
    background: rgba(10,207,131,0.1);
    border-color: var(--color-acento-verde);
    color: var(--color-acento-verde);
}

/* ── SALDO BANNER ─────────────────────────────────────────────── */
html.dark-mode .saldo-banner {
    background: linear-gradient(135deg, #0b1a10 0%, #0d1525 100%);
    border-color: rgba(10,207,131,0.12);
}
html.dark-mode .saldo-label { color: var(--color-texto-secundario); }
html.dark-mode .saldo-valor { color: #0acf83; }
html.dark-mode .saldo-badge {
    background: rgba(10,207,131,0.08);
    color: #0acf83;
    border-color: rgba(10,207,131,0.18);
}
html.dark-mode .saldo-icon-wrap { color: #0acf83; }

/* ── CONDICIONES CARD ─────────────────────────────────────────── */
html.dark-mode .condiciones-card {
    background: var(--color-fondo-card);
    border-color: var(--color-bordes);
}
html.dark-mode .condiciones-header {
    background: var(--color-fondo-elevado);
    border-bottom-color: var(--color-bordes);
    color: var(--color-texto-principal);
}
html.dark-mode .condicion-item {
    color: var(--color-texto-principal);
    border-bottom-color: var(--color-bordes);
}
html.dark-mode .tiempo-item {
    background: var(--color-fondo-principal);
    border-color: var(--color-bordes);
}
html.dark-mode .tiempo-banco { color: var(--color-texto-secundario); }
html.dark-mode .tiempo-valor { color: #0acf83; }

/* ── SOON HEADER BAR ──────────────────────────────────────────── */
html.dark-mode .soon-header-bar {
    background: var(--color-fondo-card);
    border-color: var(--color-bordes);
}
html.dark-mode .soon-header-title { color: var(--color-texto-principal); }
html.dark-mode .soon-header-dot { background: var(--color-acento-verde); }

/* ── MÉTODOS DE RECARGA (TABS) ────────────────────────────────── */
html.dark-mode .metodo-tab {
    background: var(--color-fondo-card);
    border-color: var(--color-bordes);
    color: var(--color-texto-secundario);
}
html.dark-mode .metodo-tab:hover {
    border-color: var(--color-acento-primario);
    background: var(--color-fondo-hover);
}
html.dark-mode .metodo-tab.active {
    border-color: var(--color-acento-verde);
    background: rgba(10,207,131,0.06);
}
html.dark-mode .metodo-nombre { color: var(--color-texto-principal); }

/* ── QR / COPIA NÚMERO ────────────────────────────────────────── */
html.dark-mode .qr-box {
    background: var(--color-fondo-elevado);
    border-color: var(--color-bordes);
}
html.dark-mode .copy-number-wrap {
    background: var(--color-fondo-elevado);
    border-color: var(--color-bordes);
    color: var(--color-texto-principal);
}
html.dark-mode .copy-number-sub { color: var(--color-texto-secundario); }
html.dark-mode .btn-copy {
    background: var(--color-fondo-hover);
    border-color: var(--color-bordes);
    color: var(--color-texto-secundario);
}
html.dark-mode .btn-copy.copied {
    background: rgba(10,207,131,0.1);
    color: #0acf83;
    border-color: rgba(10,207,131,0.3);
}
html.dark-mode .info-minimo {
    background: var(--color-fondo-elevado);
    border-color: var(--color-bordes);
    color: var(--color-texto-secundario);
}
html.dark-mode .paso-titulo { color: var(--color-texto-principal); }

/* ── ALERTAS ──────────────────────────────────────────────────── */
html.dark-mode .alert-danger {
    background: rgba(239,59,59,0.1);
    border-color: rgba(239,59,59,0.22);
    color: #fca5a5;
}
html.dark-mode .alert-success {
    background: rgba(10,207,131,0.1);
    border-color: rgba(10,207,131,0.22);
    color: #6ee7b7;
}
html.dark-mode .alert-warning {
    background: rgba(245,166,35,0.1);
    border-color: rgba(245,166,35,0.22);
    color: #fcd34d;
}
html.dark-mode .alert-info {
    background: rgba(59,158,255,0.1);
    border-color: rgba(59,158,255,0.22);
    color: #93c5fd;
}
html.dark-mode .retiro-alert-msg.alert-danger {
    background: rgba(239,59,59,0.1);
    border-color: rgba(239,59,59,0.25);
    color: #fca5a5;
}

/* ── ACCORDION ────────────────────────────────────────────────── */
html.dark-mode .accordion-item {
    background: var(--color-fondo-card);
    border-color: var(--color-bordes);
}
html.dark-mode .accordion-button {
    background: var(--color-fondo-elevado) !important;
    color: var(--color-texto-principal) !important;
    box-shadow: none !important;
}
html.dark-mode .accordion-button:not(.collapsed) {
    background: var(--color-fondo-hover) !important;
    color: var(--color-acento-primario) !important;
}
html.dark-mode .accordion-button::after {
    filter: invert(1) brightness(0.6);
}
html.dark-mode .accordion-body {
    background: var(--color-fondo-card);
    color: var(--color-texto-principal);
    border-top-color: var(--color-bordes);
}
html.dark-mode .collapsible-header {
    background: var(--color-fondo-elevado) !important;
    color: var(--color-texto-principal) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode .collapsible-header:hover {
    background: var(--color-fondo-hover) !important;
}

/* ── MODAL ────────────────────────────────────────────────────── */
html.dark-mode .modal-content {
    background: var(--color-fondo-card);
    border-color: var(--color-bordes);
    color: var(--color-texto-principal);
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}
html.dark-mode .modal-header {
    background: var(--color-fondo-elevado);
    border-bottom-color: var(--color-bordes);
    color: var(--color-texto-principal);
}
html.dark-mode .modal-footer {
    background: var(--color-fondo-elevado);
    border-top-color: var(--color-bordes);
}
html.dark-mode .btn-close { filter: invert(1) brightness(0.6); }

/* ── FOOTER ───────────────────────────────────────────────────── */
html.dark-mode .site-footer {
    background: var(--color-fondo-principal) !important;
    border-top: 1px solid var(--color-bordes);
}

/* ── BOTTOM NAV (MOBILE) ──────────────────────────────────────── */
html.dark-mode .bottom-nav,
html.dark-mode #bottom-nav-placeholder > nav {
    background: rgba(11,14,21,0.97) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--color-bordes) !important;
}
html.dark-mode .bottom-nav-item { color: var(--color-texto-apagado); }
html.dark-mode .bottom-nav-item.active,
html.dark-mode .bottom-nav-item:hover { color: var(--color-acento-verde); }

/* ── OFFCANVAS ────────────────────────────────────────────────── */
html.dark-mode .offcanvas {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode .offcanvas-header {
    background: var(--color-fondo-elevado);
    border-bottom: 1px solid var(--color-bordes);
    color: var(--color-texto-principal);
}
html.dark-mode .offcanvas-title { color: var(--color-texto-principal); }
html.dark-mode .offcanvas-body { background: var(--color-fondo-card); }

/* ── CARDS GENERALES ──────────────────────────────────────────── */
html.dark-mode .card {
    background: var(--color-fondo-card);
    border-color: var(--color-bordes);
}
html.dark-mode .card-header {
    background: var(--color-fondo-elevado);
    border-bottom-color: var(--color-bordes);
    color: var(--color-texto-principal);
}
html.dark-mode .card-body { color: var(--color-texto-principal); }
html.dark-mode .card-footer {
    background: var(--color-fondo-elevado);
    border-top-color: var(--color-bordes);
}

/* ── BADGES / PILLS ───────────────────────────────────────────── */
html.dark-mode .badge.bg-secondary,
html.dark-mode .badge.bg-light {
    background: var(--color-fondo-hover) !important;
    color: var(--color-texto-secundario) !important;
}
html.dark-mode .text-muted { color: var(--color-texto-secundario) !important; }
html.dark-mode .text-dark { color: var(--color-texto-principal) !important; }

/* ── TABLAS ───────────────────────────────────────────────────── */
html.dark-mode .table {
    color: var(--color-texto-principal);
    border-color: var(--color-bordes);
}
html.dark-mode .table > :not(caption) > * > * {
    border-color: var(--color-bordes);
    background-color: transparent;
    color: var(--color-texto-principal);
}
html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255,255,255,0.02);
}
html.dark-mode .table-hover > tbody > tr:hover > * {
    background-color: var(--color-fondo-hover);
}

/* ── SCROLLBAR ────────────────────────────────────────────────── */
html.dark-mode ::-webkit-scrollbar { width: 5px; height: 5px; }
html.dark-mode ::-webkit-scrollbar-track { background: var(--color-fondo-principal); }
html.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--color-bordes-brillo);
    border-radius: 3px;
}
html.dark-mode ::-webkit-scrollbar-thumb:hover { background: var(--color-texto-apagado); }

/* ── TOASTS ───────────────────────────────────────────────────── */
html.dark-mode .toast,
html.dark-mode [class*="my-toast"],
html.dark-mode [id*="toast"] {
    background: var(--color-fondo-elevado) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-principal) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

/* ── PRELOADER ────────────────────────────────────────────────── */
html.dark-mode #preloader { background: var(--color-fondo-principal); }

/* ── TABS DE FILTROS / BETS ───────────────────────────────────── */
html.dark-mode .bets-sub-tabs-row,
html.dark-mode .time-filter-group,
html.dark-mode #time-filter-group,
html.dark-mode #sport-filter-group {
    border-bottom-color: var(--color-bordes);
}
html.dark-mode .btn-filter {
    color: var(--color-texto-secundario);
    border-color: transparent;
}
html.dark-mode .btn-filter:hover { color: var(--color-texto-principal); }
html.dark-mode .btn-filter.active {
    color: var(--color-acento-primario);
    border-bottom-color: var(--color-acento-primario);
}

/* ── INPUT GROUP ──────────────────────────────────────────────── */
html.dark-mode .input-group-text {
    background: var(--color-fondo-elevado);
    border-color: var(--color-bordes);
    color: var(--color-texto-secundario);
}

/* ── HR / SEPARADORES ─────────────────────────────────────────── */
html.dark-mode hr {
    border-color: var(--color-bordes);
    opacity: 1;
}

/* ── ZAFRA (si aplica) ────────────────────────────────────────── */
html.dark-mode .zafra-hero {
    background: linear-gradient(135deg, #0d1627 0%, #1a2840 100%);
    border-color: var(--color-bordes);
}
html.dark-mode .zafra-stat-item {
    background: var(--color-fondo-elevado);
    border-color: var(--color-bordes);
}
html.dark-mode .zafra-combo-card {
    background: var(--color-fondo-card);
    border-color: var(--color-bordes);
}
html.dark-mode .zafra-combo-header { border-bottom-color: var(--color-bordes); }
html.dark-mode .zafra-combo-footer { border-top-color: var(--color-bordes); }
html.dark-mode .zafra-disclaimer {
    background: rgba(245,166,35,0.08);
    border-color: rgba(245,166,35,0.2);
    color: #fcd34d;
}
html.dark-mode .zafra-goles-tag {
    background: rgba(10,207,131,0.1);
    border-color: rgba(10,207,131,0.2);
    color: #0acf83;
}

/* ── PARTIDO DETALLE / HEADER MATCH ──────────────────────────── */
html.dark-mode #match-header {
    background: var(--color-fondo-card);
    border-color: var(--color-bordes);
}
html.dark-mode .market-card {
    background: var(--color-fondo-card);
    border-color: var(--color-bordes);
}

/* ── DETALLE GRID (respuesta_mp) ──────────────────────────────── */
html.dark-mode .detalle-grid {
    background: var(--color-fondo-principal) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode .detalle-row { border-color: var(--color-bordes) !important; }
html.dark-mode .detalle-label { color: var(--color-texto-secundario) !important; }
html.dark-mode .detalle-valor { color: var(--color-texto-principal) !important; }
html.dark-mode .rechazo-info {
    background: rgba(239,59,59,0.08) !important;
    border-color: rgba(239,59,59,0.2) !important;
    color: #fca5a5 !important;
}
html.dark-mode .estado-card {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode .estado-left { border-right-color: var(--color-bordes) !important; }
html.dark-mode .estado-right { color: var(--color-texto-principal); }



/* ================================================================
   DARK MODE — CORRECCIONES MIS APUESTAS (tabs, filtros, estados)
   ================================================================ */

/* ── HEADER TÍTULO (barra azul "Mis Apuestas") ────────────────── */
html.dark-mode .bets-title-bar {
    background: linear-gradient(135deg, #080c18 0%, #0f2a50 100%);
}

/* ── FILTRO CARD (contenedor de tabs y filtros) ───────────────── */
html.dark-mode .bets-filter-card {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}

/* ── TABS PRINCIPALES (Mis apuestas / Recompensas) ────────────── */
html.dark-mode .bets-main-tabs {
    background: var(--color-fondo-elevado) !important;
    border-bottom-color: var(--color-bordes) !important;
}
html.dark-mode .bets-main-tabs .main-tab-btn {
    color: var(--color-texto-secundario) !important;
    background: none !important;
    border-bottom-color: transparent !important;
}
html.dark-mode .bets-main-tabs .main-tab-btn.active {
    color: var(--color-acento-secundario) !important;
    border-bottom-color: var(--color-acento-secundario) !important;
}
html.dark-mode .bets-main-tabs .main-tab-btn:hover:not(.active) {
    color: var(--color-acento-secundario) !important;
}

/* ── SUB TABS (Todas / Abiertas / Cobro Anticipado / Cerradas) ── */
html.dark-mode .bets-sub-tabs {
    background: var(--color-fondo-card) !important;
    border-bottom-color: var(--color-bordes) !important;
}
html.dark-mode .bets-sub-tabs .sub-tab-btn {
    background: var(--color-fondo-elevado) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-secundario) !important;
}
html.dark-mode .bets-sub-tabs .sub-tab-btn.active {
    background: linear-gradient(135deg, #f5a623 0%, #e8951f 100%) !important;
    border-color: transparent !important;
    color: #1a1200 !important;
    box-shadow: 0 2px 10px rgba(245,166,35,0.35) !important;
}
html.dark-mode .bets-sub-tabs .sub-tab-btn:hover:not(.active) {
    background: rgba(245,166,35,0.1) !important;
    border-color: rgba(245,166,35,0.4) !important;
    color: var(--color-acento-secundario) !important;
}

/* ── FILTRO DE FECHA ──────────────────────────────────────────── */
html.dark-mode .date-filter-bar {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode .date-filter-icon-label {
    background: var(--color-fondo-elevado) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-secundario) !important;
}
html.dark-mode .date-filter-icon-label i { color: var(--color-acento-secundario) !important; }
html.dark-mode .date-filter-icon-label:hover {
    background: rgba(245,166,35,0.1) !important;
    border-color: rgba(245,166,35,0.4) !important;
}
html.dark-mode .date-filter-icon-label input[type="date"] {
    background: transparent !important;
    border: none !important;
    color: var(--color-texto-principal) !important;
    box-shadow: none !important;
}
html.dark-mode .clear-date-btn { color: var(--color-acento-secundario) !important; }

/* ── CARD DE APUESTA — FONDO Y ESTADOS DE COLOR ───────────────── */
html.dark-mode .bet-card-item {
    background-color: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}
/* Colores de borde izquierdo según estado — mantener vibrantes */
html.dark-mode .bet-card-item.status-ganada   { border-left-color: #0acf83 !important; }
html.dark-mode .bet-card-item.status-perdida  { border-left-color: #ef3b3b !important; }
html.dark-mode .bet-card-item.status-pendiente{ border-left-color: #f5a623 !important; }
html.dark-mode .bet-card-item.status-anulada  { border-left-color: #7a8fa8 !important; }
html.dark-mode .bet-card-item.status-cobrada  { border-left-color: #0acf83 !important; }
html.dark-mode .bet-card-item.status-live     { border-left-color: #ef3b3b !important; }

/* Textos de estado */
html.dark-mode .bet-status-text.status-ganada   { color: #0acf83 !important; background: rgba(10,207,131,0.1) !important; }
html.dark-mode .bet-status-text.status-perdida  { color: #ef3b3b !important; background: rgba(239,59,59,0.1) !important; }
html.dark-mode .bet-status-text.status-pendiente{ color: #f5a623 !important; background: rgba(245,166,35,0.1) !important; }
html.dark-mode .bet-status-text.status-anulada  { color: #94a3b8 !important; background: rgba(148,163,184,0.1) !important; }
html.dark-mode .bet-status-text.status-cobrada  { color: #0acf83 !important; background: rgba(10,207,131,0.1) !important; }

/* Barra segmentada de estado */
html.dark-mode .segmented-status-bar { background-color: var(--color-bordes) !important; }
html.dark-mode .segment-ganada  { background-color: #0acf83 !important; }
html.dark-mode .segment-perdida { background-color: #ef3b3b !important; }
html.dark-mode .segment-pendiente { background-color: #f5a623 !important; }

/* Detalle de la apuesta expandida */
html.dark-mode .bet-card-details {
    background-color: var(--color-fondo-principal) !important;
    border-top-color: var(--color-bordes) !important;
}
html.dark-mode .bet-detail-item { border-bottom-color: var(--color-bordes) !important; }
html.dark-mode .detail-number {
    background: var(--color-fondo-elevado) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-apagado) !important;
}
html.dark-mode .detail-status-ganada   { background: rgba(10,207,131,0.12) !important; color: #0acf83 !important; }
html.dark-mode .detail-status-perdida  { background: rgba(239,59,59,0.12) !important;  color: #ef3b3b !important; }
html.dark-mode .detail-status-pendiente{ background: rgba(245,166,35,0.12) !important; color: #f5a623 !important; }

/* ── HEADER PÁGINA APUESTAS ───────────────────────────────────── */
html.dark-mode .apuestas-page-header {
    background: linear-gradient(135deg, rgba(26,127,232,0.08) 0%, rgba(26,127,232,0.04) 100%);
    border-color: rgba(26,127,232,0.15);
}
html.dark-mode .apuestas-page-title { color: var(--color-texto-principal) !important; }
html.dark-mode .apuestas-page-subtitle { color: var(--color-acento-primario) !important; }



/* ================================================================
   DARK MODE — CORRECCIONES PRÓXIMOS EVENTOS + BOLETO VERDE NEÓN
   ================================================================ */

/* ── FILTROS TIEMPO Y DEPORTE (Todo / 1h / 4h ... / Fútbol) ──── */
html.dark-mode .filter-group .btn-filter {
    background: var(--color-fondo-elevado) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-secundario) !important;
}
html.dark-mode .filter-group .btn-filter:hover:not(.active) {
    background: var(--color-fondo-hover) !important;
    border-color: rgba(245,166,35,0.4) !important;
    color: var(--color-acento-secundario) !important;
    transform: translateY(-1px);
}
html.dark-mode .filter-group .btn-filter.active {
    background: linear-gradient(135deg, #f5a623 0%, #e8951f 100%) !important;
    border-color: transparent !important;
    color: #1a1200 !important;
    box-shadow: 0 2px 14px rgba(245,166,35,0.45) !important;
}

/* Contenedor de los filtros — quitar fondo blanco */
html.dark-mode #time-filter-group,
html.dark-mode #sport-filter-group,
html.dark-mode .time-filter-group,
html.dark-mode .sport-filter-group,
html.dark-mode .filter-group,
html.dark-mode [id*="filter-group"],
html.dark-mode [class*="filter-group"] {
    background: transparent !important;
    border-color: var(--color-bordes) !important;
}

/* Card contenedora de próximos eventos (si tiene fondo blanco) */
html.dark-mode .soon-card,
html.dark-mode .starting-soon-card,
html.dark-mode .proximos-card,
html.dark-mode .index-card,
html.dark-mode [id*="starting-soon"],
html.dark-mode [id*="proximos"] {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}

/* ── BOLETO — VERDE NEÓN ──────────────────────────────────────── */

/* Contenedor principal */
html.dark-mode .bet-slip-modern,
html.dark-mode #betSlipContainerModern {
    background: #0d1117 !important;
    border: 1px solid rgba(10,207,131,0.2) !important;
    box-shadow:
        0 -6px 40px rgba(0,0,0,0.6),
        0 0 30px rgba(10,207,131,0.06) !important;
}

/* Header del boleto — neón verde */
html.dark-mode .slip-header {
    background: linear-gradient(135deg, #062e1c 0%, #0a3d22 100%) !important;
    border-bottom: 1px solid rgba(10,207,131,0.25) !important;
    color: #fff !important;
}
html.dark-mode .slip-header h5 { color: #fff !important; }
html.dark-mode .slip-badge {
    background: rgba(10,207,131,0.2) !important;
    color: #0acf83 !important;
    border: 1px solid rgba(10,207,131,0.35) !important;
}

/* Items de selección */
html.dark-mode .slip-selection-item {
    background: #111722 !important;
    border-color: rgba(10,207,131,0.15) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
html.dark-mode .slip-selection-item:hover {
    border-color: rgba(10,207,131,0.3) !important;
    box-shadow: 0 2px 12px rgba(10,207,131,0.1) !important;
}
html.dark-mode .slip-selection-info .market { color: var(--color-texto-principal) !important; }
html.dark-mode .slip-selection-info .teams  { color: var(--color-texto-secundario) !important; }
html.dark-mode .slip-selection-details .odds {
    color: #0acf83 !important;
    text-shadow: 0 0 10px rgba(10,207,131,0.6) !important;
    font-weight: 900 !important;
}

/* Botón quitar selección */
html.dark-mode .slip-remove-btn {
    background: rgba(239,59,59,0.1) !important;
    color: #ef3b3b !important;
    border: 1px solid rgba(239,59,59,0.2) !important;
}
html.dark-mode .slip-remove-btn:hover {
    background: #ef3b3b !important;
    color: #fff !important;
}

/* Footer del boleto */
html.dark-mode .slip-footer {
    background: #111722 !important;
    border-top: 1px solid rgba(10,207,131,0.15) !important;
}
html.dark-mode .slip-summary-row .label { color: var(--color-texto-secundario) !important; }
html.dark-mode .slip-summary-row .value { color: var(--color-texto-principal) !important; }
html.dark-mode .slip-summary-row .value.winnings {
    color: #0acf83 !important;
    text-shadow: 0 0 12px rgba(10,207,131,0.5) !important;
    font-weight: 900 !important;
}

/* Chips de montos rápidos */
html.dark-mode .slip-amount-chip {
    background: #161d2a !important;
    border-color: rgba(10,207,131,0.2) !important;
    color: var(--color-texto-secundario) !important;
}
html.dark-mode .slip-amount-chip:hover {
    border-color: rgba(10,207,131,0.5) !important;
    color: #0acf83 !important;
    background: rgba(10,207,131,0.08) !important;
}
html.dark-mode .slip-amount-chip.active {
    background: rgba(10,207,131,0.15) !important;
    border-color: #0acf83 !important;
    color: #0acf83 !important;
    box-shadow: 0 0 8px rgba(10,207,131,0.3) !important;
}

/* Input de monto */
html.dark-mode #stakeAmountModern {
    background: #161d2a !important;
    border-color: rgba(10,207,131,0.2) !important;
    color: var(--color-texto-principal) !important;
}
html.dark-mode #stakeAmountModern:focus {
    border-color: #0acf83 !important;
    box-shadow: 0 0 0 3px rgba(10,207,131,0.15) !important;
}
html.dark-mode #stakeAmountModern::placeholder { color: var(--color-texto-apagado) !important; }

/* Botón Apostar — verde neón */
html.dark-mode #placeBetBtnModern {
    background: linear-gradient(135deg, #0acf83 0%, #07a567 100%) !important;
    color: #021a0e !important;
    font-weight: 900 !important;
    box-shadow: 0 4px 20px rgba(10,207,131,0.35) !important;
    border: none !important;
}
html.dark-mode #placeBetBtnModern:hover {
    background: linear-gradient(135deg, #0de891 0%, #09b872 100%) !important;
    box-shadow: 0 6px 28px rgba(10,207,131,0.5) !important;
    transform: translateY(-1px);
}
html.dark-mode #placeBetBtnModern:disabled {
    background: #1a2235 !important;
    color: var(--color-texto-apagado) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Boleto colapsado */
html.dark-mode .bet-slip-modern.is-collapsed .slip-header {
    box-shadow: 0 0 20px rgba(10,207,131,0.3) !important;
}

/* Barra mobile de selecciones */
html.dark-mode .mobile-slip-bar {
    background: #0d1117 !important;
    border-top: 1px solid rgba(10,207,131,0.2) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5) !important;
}
html.dark-mode .mobile-slip-bar .slip-badge {
    background: rgba(10,207,131,0.15) !important;
    color: #0acf83 !important;
}

/* Boleto vacío */
html.dark-mode .slip-empty-state,
html.dark-mode .bet-empty-state {
    color: var(--color-texto-apagado) !important;
}

/* Scroll del body del boleto */
html.dark-mode .slip-body::-webkit-scrollbar { width: 4px; }
html.dark-mode .slip-body::-webkit-scrollbar-track { background: #0d1117; }
html.dark-mode .slip-body::-webkit-scrollbar-thumb {
    background: rgba(10,207,131,0.2);
    border-radius: 2px;
}
html.dark-mode .slip-body::-webkit-scrollbar-thumb:hover {
    background: rgba(10,207,131,0.4);
}



/* ================================================================
   DARK MODE — FIX FONDO FILTROS + HEADER BOLETO = BOTÓN APOSTAR
   ================================================================ */

/* ── FIX: .card base tiene background #fff hardcodeado ────────── */
html.dark-mode .card {
    background-color: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-principal) !important;
}
html.dark-mode .card-header {
    background-color: var(--color-fondo-elevado) !important;
    border-bottom-color: var(--color-bordes) !important;
    color: var(--color-texto-principal) !important;
}
html.dark-mode .card-footer {
    background-color: var(--color-fondo-elevado) !important;
    border-top-color: var(--color-bordes) !important;
}

/* ── HEADER BOLETO = mismo verde que botón Apostar ────────────── */
html.dark-mode .slip-header {
    background: linear-gradient(135deg, #0acf83 0%, #07a567 100%) !important;
    border-bottom: 1px solid rgba(10,207,131,0.3) !important;
    box-shadow: 0 4px 20px rgba(10,207,131,0.3) !important;
}
html.dark-mode .slip-header h5 {
    color: #021a0e !important;
    font-weight: 900 !important;
}
html.dark-mode .slip-badge {
    background: rgba(2,26,14,0.25) !important;
    color: #021a0e !important;
    border: 1px solid rgba(2,26,14,0.2) !important;
    font-weight: 900 !important;
}



/* ================================================================
   DARK MODE — FIX CONTENEDOR BLANCO FILTROS + VERDE EN FILTROS/BOLETO
   ================================================================ */

/* ── FIX FONDO BLANCO: apuntar al padre directo de los filtros ── */
html.dark-mode #time-filter-group,
html.dark-mode #sport-filter-group {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}

/* Cualquier ancestro directo que use bg-white de Bootstrap */
html.dark-mode .bg-white {
    background-color: var(--color-fondo-card) !important;
}

/* Contenedor padre del grupo de filtros (card o div sin clase) */
html.dark-mode #time-filter-group,
html.dark-mode #sport-filter-group,
html.dark-mode #time-filter-group *,
html.dark-mode #sport-filter-group * {
    --bs-body-bg: var(--color-fondo-card);
}

/* Padre inmediato: si el wrapper tiene padding + fondo blanco */
html.dark-mode #time-filter-group:parent,
html.dark-mode div:has(> #time-filter-group),
html.dark-mode div:has(> #sport-filter-group) {
    background: var(--color-fondo-card) !important;
}

/* ── FILTROS: de naranja a VERDE ──────────────────────────────── */
html.dark-mode .filter-group .btn-filter.active {
    background: linear-gradient(135deg, #0acf83 0%, #07a567 100%) !important;
    border-color: transparent !important;
    color: #021a0e !important;
    box-shadow: 0 2px 16px rgba(10,207,131,0.4) !important;
    font-weight: 800 !important;
}
html.dark-mode .filter-group .btn-filter:hover:not(.active) {
    background: rgba(10,207,131,0.08) !important;
    border-color: rgba(10,207,131,0.4) !important;
    color: #0acf83 !important;
}

/* ── BETS-SUB-TABS: de naranja a VERDE ────────────────────────── */
html.dark-mode .bets-sub-tabs .sub-tab-btn.active {
    background: linear-gradient(135deg, #0acf83 0%, #07a567 100%) !important;
    border-color: transparent !important;
    color: #021a0e !important;
    box-shadow: 0 2px 14px rgba(10,207,131,0.4) !important;
    font-weight: 800 !important;
}
html.dark-mode .bets-sub-tabs .sub-tab-btn:hover:not(.active) {
    background: rgba(10,207,131,0.08) !important;
    border-color: rgba(10,207,131,0.35) !important;
    color: #0acf83 !important;
}

/* ── MIS APUESTAS MAIN TABS: activo en verde ──────────────────── */
html.dark-mode .bets-main-tabs .main-tab-btn.active {
    color: #0acf83 !important;
    border-bottom-color: #0acf83 !important;
}
html.dark-mode .bets-main-tabs .main-tab-btn:hover:not(.active) {
    color: #0acf83 !important;
}

/* ── CHIPS MONTO RÁPIDO BOLETO: borde verde en inactivo ───────── */
html.dark-mode .slip-amount-chip {
    background: #161d2a !important;
    border-color: rgba(10,207,131,0.2) !important;
    color: var(--color-texto-secundario) !important;
}



/* ── FIX bg-white de Bootstrap reemplazado por JS ─────────────── */
html.dark-mode .bg-dark-mode,
html.dark-mode .bg-white,
html.dark-mode [style*="background-color: white"],
html.dark-mode [style*="background-color:#fff"],
html.dark-mode [style*="background: white"],
html.dark-mode [style*="background:#fff"] {
    background-color: var(--color-fondo-card) !important;
    background: var(--color-fondo-card) !important;
}

/* Padre directo del grupo de filtros */
html.dark-mode #time-filter-group,
html.dark-mode #sport-filter-group {
    background: transparent !important;
}
html.dark-mode #time-filter-group:not(:first-child),
html.dark-mode #time-filter-group ~ * {
    border-top: 1px solid var(--color-bordes) !important;
}


/* ── BOTÓN DARK MODE MÓVIL (debajo del hamburger sidebar) ────── */
.dark-toggle-btn-mobile {
    display: none;
}
@media (max-width: 991px) {
    .dark-toggle-btn-mobile {
        display: inline-flex;
        position: absolute;
        top: 52px;        /* justo debajo del navbar (altura ~52px) */
        left: 12px;       /* alineado con el hamburger */
        z-index: 1040;
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.35);
    }
    /* Ocultar el toggle del header en móvil para no duplicar */
    #nav-user-buttons .dark-toggle-btn:not(.dark-toggle-btn-mobile) {
        display: none !important;
    }
}


/* ================================================================
   DARK MODE — FIX FINAL: filtros, login buttons, casino, bottom nav
   ================================================================ */

/* ── FIX DEFINITIVO: .filters-container fondo blanco ─────────── */
html.dark-mode .filters-container {
    background: transparent !important;
}
html.dark-mode .filters-container .filter-group,
html.dark-mode .filters-container .btn-group {
    background: transparent !important;
    border: none !important;
}

/* ── BOTONES INGRESO / REGISTRARSE en dark mode ───────────────── */
html.dark-mode .btn-header-login {
    color: var(--color-texto-secundario) !important;
    border-color: var(--color-bordes) !important;
    background: var(--color-fondo-elevado) !important;
}
html.dark-mode .btn-header-login:hover {
    background: var(--color-fondo-hover) !important;
    border-color: rgba(10,207,131,0.4) !important;
    color: #0acf83 !important;
    box-shadow: 0 0 14px rgba(10,207,131,0.15) !important;
}

/* Registrarse: azul → verde */
html.dark-mode .btn-header-register {
    background: linear-gradient(135deg, #0acf83 0%, #07a567 100%) !important;
    color: #021a0e !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 18px rgba(10,207,131,0.35) !important;
    border-color: transparent !important;
}
html.dark-mode .btn-header-register:hover {
    background: linear-gradient(135deg, #0de891 0%, #09b872 100%) !important;
    color: #021a0e !important;
    box-shadow: 0 6px 24px rgba(10,207,131,0.5) !important;
    transform: translateY(-1px);
}

/* ── BARRA NARANJA MÓVIL DEL BET SLIP → VERDE BRILLANTE ──────── */
html.dark-mode .mobile-bet-slip-bar,
html.dark-mode .mobile-slip-bar,
html.dark-mode [class*="mobile"][class*="slip"],
html.dark-mode [class*="mobile"][class*="bar"],
html.dark-mode [id*="mobile-slip"],
html.dark-mode [id*="mobileSlip"] {
    background: linear-gradient(135deg, #0acf83 0%, #07a567 100%) !important;
    border-top: 1px solid rgba(10,207,131,0.4) !important;
    box-shadow: 0 -4px 20px rgba(10,207,131,0.35) !important;
}
/* Texto y iconos dentro de la barra móvil — oscuro sobre verde */
html.dark-mode .mobile-bet-slip-bar *,
html.dark-mode .mobile-slip-bar * {
    color: #021a0e !important;
}
html.dark-mode .mobile-bet-slip-bar .slip-count,
html.dark-mode .mobile-slip-bar .slip-count {
    background: rgba(2,26,14,0.25) !important;
    color: #021a0e !important;
    font-weight: 900 !important;
}

/* ── NAVBAR TOGGLER (hamburger) en dark mode ──────────────────── */
html.dark-mode .navbar-toggler {
    border-color: rgba(10,207,131,0.3) !important;
    color: #0acf83 !important;
}
html.dark-mode .navbar-toggler-icon {
    filter: invert(1) brightness(0.8);
}

/* ── BOTÓN DARK MODE MÓVIL — inline junto al hamburger ────────── */
.dark-toggle-btn-mobile {
    display: none !important;
}
@media (max-width: 991px) {
    .dark-toggle-btn-mobile {
        display: inline-flex !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 0.8rem !important;
        margin-left: 6px !important;
        vertical-align: middle !important;
        position: static !important;
        flex-shrink: 0;
    }
    /* Ocultar el toggle del nav-user-buttons en móvil */
    #nav-user-buttons .dark-toggle-btn:not(.dark-toggle-btn-mobile) {
        display: none !important;
    }
}

/* ── CASINO — dark mode ───────────────────────────────────────── */
html.dark-mode#page-casino,
html.dark-mode #page-casino,
html.dark-mode body#page-casino {
    background-color: #08080e !important;
}
html.dark-mode .casino-hero {
    background: linear-gradient(135deg, #08080e 0%, #1a0a30 50%, #0d1a30 100%) !important;
}
html.dark-mode .casino-card,
html.dark-mode .casino-game-card,
html.dark-mode [class*="casino-card"],
html.dark-mode [class*="game-card"] {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode .casino-card:hover,
html.dark-mode .casino-game-card:hover {
    border-color: rgba(10,207,131,0.3) !important;
    box-shadow: 0 4px 20px rgba(10,207,131,0.1) !important;
}
html.dark-mode .casino-section-header,
html.dark-mode .casino-category-header {
    color: var(--color-texto-principal) !important;
    border-bottom-color: var(--color-bordes) !important;
}
html.dark-mode .casino-badge,
html.dark-mode .casino-live-badge {
    background: rgba(10,207,131,0.15) !important;
    color: #0acf83 !important;
    border-color: rgba(10,207,131,0.3) !important;
}
html.dark-mode .promo-chip {
    background: var(--color-fondo-elevado) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode .promo-chip:hover {
    border-color: rgba(10,207,131,0.4) !important;
    background: rgba(10,207,131,0.08) !important;
}
html.dark-mode .promo-chip-value { color: #0acf83 !important; }
html.dark-mode .cas-filter-btn,
html.dark-mode [class*="casino-filter"],
html.dark-mode [class*="cas-filter"] {
    background: var(--color-fondo-elevado) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-secundario) !important;
}
html.dark-mode .cas-filter-btn.active,
html.dark-mode [class*="casino-filter"].active {
    background: linear-gradient(135deg, #0acf83 0%, #07a567 100%) !important;
    color: #021a0e !important;
    border-color: transparent !important;
}
html.dark-mode #page-casino .section-header h2 { color: var(--color-texto-principal) !important; }
html.dark-mode #page-casino .section-header p  { color: var(--color-texto-secundario) !important; }



/* ── MIS APUESTAS — pantalla no autenticado (candado) ─────────── */
html.dark-mode #unauth-message {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode #unauth-message .unauth-icon,
html.dark-mode #unauth-message .lock-icon-wrap {
    background: rgba(10,207,131,0.1) !important;
    border-color: rgba(10,207,131,0.25) !important;
    color: #0acf83 !important;
}
html.dark-mode #unauth-message h2,
html.dark-mode #unauth-message h3,
html.dark-mode #unauth-message p {
    color: var(--color-texto-principal) !important;
}
html.dark-mode #unauth-message p {
    color: var(--color-texto-secundario) !important;
}
/* Botón INICIAR SESIÓN → verde */
html.dark-mode #unauth-message .btn-primary,
html.dark-mode #unauth-message [class*="btn-login"],
html.dark-mode #unauth-message button[data-bs-target="#loginModal"] {
    background: linear-gradient(135deg, #0acf83 0%, #07a567 100%) !important;
    border-color: transparent !important;
    color: #021a0e !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 18px rgba(10,207,131,0.35) !important;
}
html.dark-mode #unauth-message .btn-primary:hover {
    background: linear-gradient(135deg, #0de891 0%, #09b872 100%) !important;
    box-shadow: 0 6px 24px rgba(10,207,131,0.5) !important;
}
/* Botón Registrarse aquí → outline verde */
html.dark-mode #unauth-message .btn-outline-secondary,
html.dark-mode #unauth-message a[href*="registro"] {
    background: transparent !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-secundario) !important;
}
html.dark-mode #unauth-message .btn-outline-secondary:hover,
html.dark-mode #unauth-message a[href*="registro"]:hover {
    border-color: rgba(10,207,131,0.4) !important;
    color: #0acf83 !important;
    background: rgba(10,207,131,0.06) !important;
}

/* ── BOTONES BOOTSTRAP GENERALES que no usan clases propias ────── */
html.dark-mode .btn-primary {
    background: linear-gradient(135deg, #0acf83 0%, #07a567 100%) !important;
    border-color: transparent !important;
    color: #021a0e !important;
    box-shadow: 0 3px 14px rgba(10,207,131,0.3) !important;
}
html.dark-mode .btn-primary:hover {
    background: linear-gradient(135deg, #0de891 0%, #09b872 100%) !important;
    box-shadow: 0 5px 20px rgba(10,207,131,0.45) !important;
}
html.dark-mode .btn-outline-light {
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-secundario) !important;
    background: var(--color-fondo-elevado) !important;
}
html.dark-mode .btn-outline-light:hover {
    background: var(--color-fondo-hover) !important;
    border-color: rgba(10,207,131,0.4) !important;
    color: #0acf83 !important;
}


/* ================================================================
   DARK MODE — LOGIN MODAL + NAVBAR TOGGLER VISIBLE
   ================================================================ */

/* ── NAVBAR TOGGLER — visible en dark mode ────────────────────── */
html.dark-mode .navbar-toggler {
    border-color: rgba(10,207,131,0.4) !important;
    background: rgba(10,207,131,0.08) !important;
}
/* Reemplazar el SVG oscuro de Bootstrap por uno claro */
html.dark-mode .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2810%2C207%2C131%2C0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
html.dark-mode .navbar-toggler:hover {
    background: rgba(10,207,131,0.16) !important;
    border-color: rgba(10,207,131,0.7) !important;
}

/* ── LOGIN MODAL — dark mode completo ────────────────────────── */
html.dark-mode #loginModal .modal-content,
html.dark-mode #loginModal.modal .modal-content {
    background: var(--color-fondo-card) !important;
    border: 1px solid var(--color-bordes) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(10,207,131,0.06) !important;
    color: var(--color-texto-principal) !important;
}
html.dark-mode #loginModal .modal-header {
    background: var(--color-fondo-elevado) !important;
    border-bottom: 1px solid var(--color-bordes) !important;
}
html.dark-mode #loginModal .modal-title {
    color: var(--color-texto-principal) !important;
}
html.dark-mode #loginModal .modal-body {
    background: var(--color-fondo-card) !important;
}
html.dark-mode #loginModal .modal-footer {
    background: var(--color-fondo-elevado) !important;
    border-top: 1px solid var(--color-bordes) !important;
}
html.dark-mode #loginModal .btn-close {
    filter: invert(1) brightness(0.7) !important;
}
/* Inputs del formulario */
html.dark-mode #loginModal input[type="text"],
html.dark-mode #loginModal input[type="email"],
html.dark-mode #loginModal input[type="password"],
html.dark-mode #loginModal .form-control {
    background: var(--color-fondo-principal) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-principal) !important;
}
html.dark-mode #loginModal .form-control:focus {
    border-color: #0acf83 !important;
    box-shadow: 0 0 0 3px rgba(10,207,131,0.15) !important;
    background: var(--color-fondo-elevado) !important;
}
html.dark-mode #loginModal .form-control::placeholder {
    color: var(--color-texto-apagado) !important;
}
html.dark-mode #loginModal .form-label,
html.dark-mode #loginModal label {
    color: var(--color-texto-secundario) !important;
}
/* Botón submit del modal */
html.dark-mode #loginModal .btn-primary,
html.dark-mode #loginModal button[type="submit"] {
    background: linear-gradient(135deg, #0acf83 0%, #07a567 100%) !important;
    border-color: transparent !important;
    color: #021a0e !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 18px rgba(10,207,131,0.35) !important;
}
html.dark-mode #loginModal .btn-primary:hover {
    background: linear-gradient(135deg, #0de891 0%, #09b872 100%) !important;
    box-shadow: 0 6px 24px rgba(10,207,131,0.5) !important;
}
/* Links dentro del modal */
html.dark-mode #loginModal a:not(.btn) {
    color: #0acf83 !important;
}
html.dark-mode #loginModal a:not(.btn):hover {
    color: #0de891 !important;
}
/* Separador / texto secundario */
html.dark-mode #loginModal .text-muted,
html.dark-mode #loginModal small {
    color: var(--color-texto-secundario) !important;
}
html.dark-mode #loginModal hr {
    border-color: var(--color-bordes) !important;
}
/* Alerta de error dentro del modal */
html.dark-mode #loginModal .alert-danger {
    background: rgba(239,59,59,0.1) !important;
    border-color: rgba(239,59,59,0.25) !important;
    color: #fca5a5 !important;
}
/* Input group password toggle */
html.dark-mode #loginModal .input-group-text {
    background: var(--color-fondo-elevado) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-secundario) !important;
}
/* Logo o imagen del modal */
html.dark-mode #loginModal .modal-logo img {
    filter: brightness(1.1) !important;
}


/* ================================================================
   DARK MODE — CASINO + SECCIÓN PASOS + ZAFRA
   ================================================================ */

/* ── CASINO — fondo y secciones ──────────────────────────────── */
html.dark-mode #page-casino {
    background: #08080e !important;
}
html.dark-mode #page-casino main,
html.dark-mode #page-casino .main-content-wrapper {
    background: #08080e !important;
}
/* Cards de juegos */
html.dark-mode #page-casino .game-card,
html.dark-mode #page-casino .casino-game-card,
html.dark-mode #page-casino [class*="game-card"],
html.dark-mode #page-casino [class*="casino-card"] {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode #page-casino .game-card:hover,
html.dark-mode #page-casino .casino-game-card:hover {
    border-color: rgba(10,207,131,0.35) !important;
    box-shadow: 0 4px 24px rgba(10,207,131,0.12) !important;
}
/* Secciones con fondo blanco dentro del casino */
html.dark-mode #page-casino .section-card,
html.dark-mode #page-casino .provider-section,
html.dark-mode #page-casino .games-section,
html.dark-mode #page-casino [class*="section"] {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode #page-casino .section-title,
html.dark-mode #page-casino h2,
html.dark-mode #page-casino h3 {
    color: var(--color-texto-principal) !important;
}
/* Botones de categoría/filtro del casino */
html.dark-mode #page-casino .category-btn,
html.dark-mode #page-casino .provider-btn,
html.dark-mode #page-casino [class*="cat-btn"],
html.dark-mode #page-casino [class*="filter-btn"] {
    background: var(--color-fondo-elevado) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-secundario) !important;
}
html.dark-mode #page-casino .category-btn.active,
html.dark-mode #page-casino [class*="filter-btn"].active {
    background: linear-gradient(135deg, #0acf83 0%, #07a567 100%) !important;
    color: #021a0e !important;
    border-color: transparent !important;
    box-shadow: 0 2px 14px rgba(10,207,131,0.35) !important;
}
/* Search bar casino */
html.dark-mode #page-casino input[type="search"],
html.dark-mode #page-casino .casino-search {
    background: var(--color-fondo-principal) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-principal) !important;
}

/* ── SECCIÓN "CÓMO EMPEZAR" (pasos + botón ¡Apuesta Ahora!) ──── */
html.dark-mode #como-empezar {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode .como-empezar-step {
    background: transparent !important;
}
html.dark-mode .como-empezar-step:hover {
    background: rgba(10,207,131,0.04) !important;
}
html.dark-mode .step-number {
    color: #0acf83 !important;
}
html.dark-mode .step-title {
    color: var(--color-texto-principal) !important;
}
html.dark-mode .step-desc {
    color: var(--color-texto-secundario) !important;
}
html.dark-mode .step-desc strong {
    color: #0acf83 !important;
}
html.dark-mode .como-empezar-arrow {
    color: var(--color-texto-apagado) !important;
    border-left-color: var(--color-bordes) !important;
}
html.dark-mode .como-empezar-cta {
    border-left-color: var(--color-bordes) !important;
}
/* Botón ¡Apuesta Ahora! → verde */
html.dark-mode .btn-cta-apuesta {
    background: linear-gradient(135deg, #0acf83 0%, #07a567 100%) !important;
    color: #021a0e !important;
    box-shadow: 0 4px 18px rgba(10,207,131,0.35) !important;
}
html.dark-mode .btn-cta-apuesta:hover {
    background: linear-gradient(135deg, #0de891 0%, #09b872 100%) !important;
    box-shadow: 0 8px 28px rgba(10,207,131,0.5) !important;
    color: #021a0e !important;
}

/* ── ZAFRA — dark mode completo ──────────────────────────────── */
html.dark-mode #page-zafra {
    background: var(--color-fondo-principal) !important;
}
/* Hero */
html.dark-mode .zafra-hero {
    background: linear-gradient(135deg, #080c18 0%, #0d1f10 50%, #0d1526 100%) !important;
    border-color: rgba(10,207,131,0.15) !important;
}
html.dark-mode .zafra-hero-bg-glow {
    background: radial-gradient(ellipse at 50% 0%, rgba(10,207,131,0.1) 0%, transparent 65%) !important;
}
html.dark-mode .zafra-hero-title {
    color: var(--color-texto-principal) !important;
}
html.dark-mode .zafra-name-accent {
    color: #0acf83 !important;
    text-shadow: 0 0 20px rgba(10,207,131,0.4) !important;
}
html.dark-mode .zafra-hero-subtitle {
    color: var(--color-texto-secundario) !important;
}
/* Stats del hero */
html.dark-mode .zafra-stat-num {
    color: #0acf83 !important;
}
html.dark-mode .zafra-stat-label {
    color: var(--color-texto-secundario) !important;
}
/* Filtros */
html.dark-mode .zafra-filter-bar {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode .zafra-filter-label {
    color: var(--color-texto-secundario) !important;
}
html.dark-mode .zafra-filter-btn {
    background: var(--color-fondo-elevado) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-secundario) !important;
}
html.dark-mode .zafra-filter-btn:hover {
    border-color: rgba(10,207,131,0.4) !important;
    color: #0acf83 !important;
    background: rgba(10,207,131,0.08) !important;
}
html.dark-mode .zafra-filter-btn.active {
    background: linear-gradient(135deg, #0acf83 0%, #07a567 100%) !important;
    border-color: transparent !important;
    color: #021a0e !important;
    box-shadow: 0 2px 14px rgba(10,207,131,0.35) !important;
    font-weight: 800 !important;
}
/* Cards de combos */
html.dark-mode .zafra-combo-card {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode .zafra-combo-card:hover {
    border-color: rgba(10,207,131,0.3) !important;
    box-shadow: 0 4px 20px rgba(10,207,131,0.1) !important;
}
html.dark-mode .zafra-combo-header {
    border-bottom-color: var(--color-bordes) !important;
    background: var(--color-fondo-elevado) !important;
}
html.dark-mode .zafra-combo-footer {
    border-top-color: var(--color-bordes) !important;
    background: var(--color-fondo-elevado) !important;
}
html.dark-mode .zafra-combo-title {
    color: var(--color-texto-principal) !important;
}
html.dark-mode .zafra-goles-tag {
    background: rgba(10,207,131,0.1) !important;
    border-color: rgba(10,207,131,0.25) !important;
    color: #0acf83 !important;
}
html.dark-mode .zafra-cuota-total {
    color: #0acf83 !important;
    text-shadow: 0 0 10px rgba(10,207,131,0.4) !important;
}
html.dark-mode .zafra-sel-item {
    border-bottom-color: var(--color-bordes) !important;
    color: var(--color-texto-principal) !important;
}
html.dark-mode .zafra-sel-odds {
    color: #0acf83 !important;
    font-weight: 800 !important;
}
html.dark-mode .zafra-sel-teams,
html.dark-mode .zafra-sel-market {
    color: var(--color-texto-secundario) !important;
}
/* Botón añadir al boleto */
html.dark-mode .btn-zafra-add,
html.dark-mode .zafra-add-btn,
html.dark-mode [class*="zafra"][class*="btn"] {
    background: linear-gradient(135deg, #0acf83 0%, #07a567 100%) !important;
    color: #021a0e !important;
    border-color: transparent !important;
    box-shadow: 0 3px 14px rgba(10,207,131,0.3) !important;
    font-weight: 800 !important;
}
html.dark-mode .btn-zafra-add:hover,
html.dark-mode .zafra-add-btn:hover {
    background: linear-gradient(135deg, #0de891 0%, #09b872 100%) !important;
    box-shadow: 0 5px 20px rgba(10,207,131,0.5) !important;
}
/* Disclaimer */
html.dark-mode .zafra-disclaimer {
    background: rgba(10,207,131,0.06) !important;
    border-color: rgba(10,207,131,0.15) !important;
    color: var(--color-texto-secundario) !important;
}
/* Estado de carga / vacío */
html.dark-mode .zafra-loading-text {
    color: var(--color-texto-secundario) !important;
}
/* Badge de nivel */
html.dark-mode .zafra-level-badge {
    background: var(--color-fondo-elevado) !important;
    color: var(--color-texto-secundario) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode .zafra-level-badge.seguro   { background: rgba(10,207,131,0.1) !important; color: #0acf83 !important; border-color: rgba(10,207,131,0.25) !important; }
html.dark-mode .zafra-level-badge.atrevido { background: rgba(245,166,35,0.1) !important; color: #f5a623 !important; border-color: rgba(245,166,35,0.25) !important; }
html.dark-mode .zafra-level-badge.loco     { background: rgba(239,59,59,0.1) !important;  color: #ef3b3b !important; border-color: rgba(239,59,59,0.25) !important; }


/* ================================================================
   DARK MODE — LOGIN MODAL (clases reales) + PARTIDO DETALLE
   ================================================================ */

/* ── LOGIN MODAL — body blanco y stats ───────────────────────── */
html.dark-mode .login-modal-content {
    background: var(--color-fondo-card) !important;
    border: 1px solid var(--color-bordes) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 0 0 1px rgba(10,207,131,0.08) !important;
}
html.dark-mode .login-modal-header {
    background: linear-gradient(135deg, #062e1c 0%, #0a3d22 60%, #080c18 100%) !important;
}
html.dark-mode .login-modal-header::after {
    background: linear-gradient(90deg, #0acf83 0%, #07a567 50%, #0acf83 100%) !important;
}
html.dark-mode .login-modal-subtitle {
    color: rgba(255,255,255,0.5) !important;
}
html.dark-mode .login-modal-body {
    background: var(--color-fondo-card) !important;
}
/* Labels */
html.dark-mode .login-field-label {
    color: var(--color-texto-secundario) !important;
}
/* Inputs */
html.dark-mode .login-input {
    background: var(--color-fondo-principal) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-principal) !important;
}
html.dark-mode .login-input:focus {
    border-color: #0acf83 !important;
    background: var(--color-fondo-elevado) !important;
    box-shadow: 0 0 0 3px rgba(10,207,131,0.15) !important;
}
html.dark-mode .login-input::placeholder {
    color: var(--color-texto-apagado) !important;
}
html.dark-mode .login-input-icon {
    color: var(--color-texto-apagado) !important;
}
/* Ojito */
html.dark-mode .login-eye-btn {
    color: var(--color-texto-apagado) !important;
}
html.dark-mode .login-eye-btn:hover {
    color: #0acf83 !important;
}
/* Checkbox y label */
html.dark-mode .login-check-label {
    color: var(--color-texto-secundario) !important;
}
html.dark-mode .login-check {
    accent-color: #0acf83 !important;
}
/* Link olvidé contraseña */
html.dark-mode .login-forgot-link {
    color: #0acf83 !important;
}
html.dark-mode .login-forgot-link:hover {
    color: #0de891 !important;
}
/* Alerta error */
html.dark-mode #login-modal-alert {
    background: rgba(239,59,59,0.1) !important;
    border-color: rgba(239,59,59,0.2) !important;
    color: #fca5a5 !important;
}
/* Botón INGRESAR → verde */
html.dark-mode .login-btn-submit {
    background: linear-gradient(135deg, #0acf83 0%, #07a567 100%) !important;
    box-shadow: 0 6px 24px rgba(10,207,131,0.35) !important;
    color: #021a0e !important;
}
html.dark-mode .login-btn-submit:hover {
    background: linear-gradient(135deg, #0de891 0%, #09b872 100%) !important;
    box-shadow: 0 10px 32px rgba(10,207,131,0.5) !important;
    color: #021a0e !important;
}
/* Link registro */
html.dark-mode .login-register-link {
    color: #0acf83 !important;
}
html.dark-mode .login-register-link:hover {
    color: #0de891 !important;
}
html.dark-mode .login-register-row span {
    color: var(--color-texto-secundario) !important;
}
/* Stats footer del modal */
html.dark-mode .login-modal-stats {
    background: var(--color-fondo-elevado) !important;
    border-top-color: var(--color-bordes) !important;
}
html.dark-mode .login-stat {
    border-right-color: var(--color-bordes) !important;
}
html.dark-mode .login-stat-num {
    color: var(--color-texto-principal) !important;
}
html.dark-mode .login-stat-gold {
    color: #0acf83 !important;
}
html.dark-mode .login-stat-label {
    color: var(--color-texto-apagado) !important;
}
/* reCAPTCHA wrapper */
html.dark-mode .login-captcha-wrap iframe {
    filter: invert(0.9) hue-rotate(180deg) !important;
}

/* ── PARTIDO DETALLE — market cards y odd buttons ─────────────── */
html.dark-mode #markets-container .card.market-card {
    background-color: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
    box-shadow: var(--shadow-card) !important;
}
html.dark-mode #markets-container .card.market-card:hover {
    border-color: rgba(10,207,131,0.25) !important;
    box-shadow: var(--shadow-card-hover) !important;
}
html.dark-mode .market-card .card-header {
    background: linear-gradient(90deg, rgba(10,207,131,0.06) 0%, transparent 100%) !important;
    border-bottom-color: var(--color-bordes) !important;
    border-left-color: #0acf83 !important;
    color: var(--color-texto-principal) !important;
}
html.dark-mode .market-card .card-body {
    background: var(--color-fondo-card) !important;
}
/* Odd buttons del detalle */
html.dark-mode .odd-button-detail {
    background: var(--color-fondo-elevado) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-principal) !important;
}
html.dark-mode .odd-button-detail:hover:not(:disabled) {
    background: rgba(10,207,131,0.08) !important;
    border-color: rgba(10,207,131,0.4) !important;
    color: #0acf83 !important;
    box-shadow: 0 0 14px rgba(10,207,131,0.18) !important;
}
html.dark-mode .odd-button-detail.selected {
    background: linear-gradient(135deg, #ffcc00 0%, #f5a800 55%, #e89000 100%) !important;
    border-color: #f5a800 !important;
    color: #1a1200 !important;
    box-shadow: 0 4px 20px rgba(245,168,0,0.5) !important;
}
html.dark-mode .odd-button-detail:disabled {
    background: var(--color-fondo-principal) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-apagado) !important;
    opacity: 0.45 !important;
}
/* Match header (panel derecho) */
html.dark-mode #match-header {
    background: linear-gradient(135deg, var(--color-fondo-card) 0%, var(--color-fondo-elevado) 100%) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-principal) !important;
}
html.dark-mode #match-header .team-names {
    color: var(--color-texto-principal) !important;
}
html.dark-mode #match-header .match-datetime {
    color: var(--color-texto-secundario) !important;
}
html.dark-mode #match-header .time-block {
    background: var(--color-fondo-principal) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode #match-header .time-value {
    color: #0acf83 !important;
}
html.dark-mode #match-header .match-meta-info {
    color: var(--color-texto-secundario) !important;
    border-color: var(--color-bordes) !important;
}
/* Tabs de mercados (Tiempo Regl., Primer tiempo, etc.) */
html.dark-mode #markets-container .nav-tabs {
    border-bottom-color: var(--color-bordes) !important;
    background: var(--color-fondo-card) !important;
}
html.dark-mode #markets-container .nav-tabs .nav-link {
    color: var(--color-texto-secundario) !important;
    background: transparent !important;
    border-color: transparent !important;
}
html.dark-mode #markets-container .nav-tabs .nav-link.active {
    background: linear-gradient(135deg, #0acf83 0%, #07a567 100%) !important;
    color: #021a0e !important;
    border-color: transparent !important;
    font-weight: 800 !important;
    border-radius: var(--radius-pill) !important;
}
html.dark-mode #markets-container .nav-tabs .nav-link:hover:not(.active) {
    background: rgba(10,207,131,0.08) !important;
    color: #0acf83 !important;
}


/* ── PARTIDO DETALLE — fix borde blanco nav-tabs ──────────────── */
html.dark-mode #markets-container .nav-tabs {
    border-bottom: 1px solid var(--color-bordes) !important;
    background: transparent !important;
}
html.dark-mode #markets-container .tab-content,
html.dark-mode #markets-container .tab-pane {
    background: transparent !important;
}
/* Bootstrap .nav overrides */
html.dark-mode .nav-tabs {
    --bs-nav-tabs-border-color: var(--color-bordes) !important;
    border-bottom-color: var(--color-bordes) !important;
}
html.dark-mode .nav-tabs .nav-item {
    background: transparent !important;
}


/* ── BOTÓN BORRAR TODAS LAS SELECCIONES DEL BOLETO ────────────── */
#clearAllSelectionsBtn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1.5px solid rgba(239,59,59,0.35);
    background: rgba(239,59,59,0.1);
    color: #ef3b3b;
    font-size: 0.75rem;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
    transition: background 0.18s, border-color 0.18s, transform 0.15s !important;
    /* Evitar que el click en el botón propague al header (colapsar) */
    position: relative; z-index: 10;
}
#clearAllSelectionsBtn:hover {
    background: rgba(239,59,59,0.22);
    border-color: rgba(239,59,59,0.7);
    transform: scale(1.12);
}
#clearAllSelectionsBtn:active {
    transform: scale(0.95);
}
/* Dark mode */
html.dark-mode #clearAllSelectionsBtn {
    border-color: rgba(239,59,59,0.3) !important;
    background: rgba(239,59,59,0.08) !important;
    color: #ef3b3b !important;
}
html.dark-mode #clearAllSelectionsBtn:hover {
    background: rgba(239,59,59,0.2) !important;
    border-color: rgba(239,59,59,0.6) !important;
}


/* ── BOTÓN BORRAR TODO — estado confirming (segundo click) ─────── */
#clearAllSelectionsBtn.confirming {
    background: rgba(239,59,59,0.25) !important;
    border-color: rgba(239,59,59,0.8) !important;
    color: #fff !important;
    animation: pulse-red 0.6s ease-in-out infinite alternate;
}
@keyframes pulse-red {
    from { box-shadow: 0 0 0 0 rgba(239,59,59,0.4); }
    to   { box-shadow: 0 0 0 6px rgba(239,59,59,0); }
}
html.dark-mode #clearAllSelectionsBtn.confirming {
    background: rgba(239,59,59,0.3) !important;
    border-color: #ef3b3b !important;
    color: #fff !important;
}


/* ================================================================
   DARK MODE — FAQ / CÓMO APOSTAR / POLÍTICAS / RECUPERAR / PROMO
   ================================================================ */

/* ── BARRA TÍTULO (faq-title-bar-premium) ─────────────────────── */
html.dark-mode .faq-title-bar-premium {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-principal) !important;
}
html.dark-mode .faq-title-text {
    color: var(--color-texto-principal) !important;
}

/* ── CARD CONTENIDO PRINCIPAL ─────────────────────────────────── */
html.dark-mode .faq-content-card-premium {
    background-color: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}

/* ── HEADER INFO (banner azul/gris arriba) ────────────────────── */
html.dark-mode .faq-header-info {
    background-color: var(--color-fondo-elevado) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode .faq-preamble-text {
    color: var(--color-texto-principal) !important;
}
html.dark-mode .faq-support-text {
    color: var(--color-texto-secundario) !important;
}
html.dark-mode .faq-support-link {
    color: #0acf83 !important;
}
html.dark-mode .faq-support-link:hover {
    color: #0de891 !important;
}

/* ── CATEGORÍAS ───────────────────────────────────────────────── */
html.dark-mode .faq-category-header {
    color: var(--color-texto-secundario) !important;
    border-bottom-color: var(--color-bordes) !important;
}
html.dark-mode .faq-category-header .text-primary {
    color: #0acf83 !important;
}
html.dark-mode .faq-items-container {
    color: var(--color-texto-principal) !important;
}

/* ── ITEMS FAQ ────────────────────────────────────────────────── */
html.dark-mode .faq-item-premium {
    background-color: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode .faq-item-premium:hover {
    border-color: rgba(10,207,131,0.3) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}
html.dark-mode .faq-question h3 {
    color: var(--color-texto-principal) !important;
}
html.dark-mode .faq-answer {
    color: var(--color-texto-secundario) !important;
}
html.dark-mode .faq-answer strong {
    color: var(--color-texto-principal) !important;
}
html.dark-mode .faq-answer a {
    color: #0acf83 !important;
}
html.dark-mode .q-icon {
    color: #0acf83 !important;
}

/* ── GUÍA PASOS (cómo apostar) ────────────────────────────────── */
html.dark-mode .guide-step-card {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode .guide-step-card:hover {
    border-color: rgba(10,207,131,0.3) !important;
    box-shadow: 0 4px 20px rgba(10,207,131,0.08) !important;
}
html.dark-mode .guide-step-number {
    background: linear-gradient(135deg, #0acf83 0%, #07a567 100%) !important;
    color: #021a0e !important;
    box-shadow: 0 4px 14px rgba(10,207,131,0.35) !important;
}
html.dark-mode .guide-step-content h3 {
    color: var(--color-texto-principal) !important;
}
html.dark-mode .guide-step-content p {
    color: var(--color-texto-secundario) !important;
}
html.dark-mode .guide-step-content strong {
    color: #0acf83 !important;
}

/* ── TIPOS DE APUESTA (grid) ──────────────────────────────────── */
html.dark-mode .bet-type-card {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode .bet-type-card:hover {
    border-color: rgba(10,207,131,0.3) !important;
    box-shadow: 0 4px 20px rgba(10,207,131,0.08) !important;
}
html.dark-mode .bet-type-card h5 {
    color: var(--color-texto-principal) !important;
}
html.dark-mode .bet-type-card h5 i {
    color: #0acf83 !important;
}
html.dark-mode .bet-type-card p {
    color: var(--color-texto-secundario) !important;
}
html.dark-mode .bet-type-card strong {
    color: #0acf83 !important;
}

/* ── CTA VER PARTIDOS ─────────────────────────────────────────── */
html.dark-mode .guide-cta-section {
    background: linear-gradient(135deg, #062e1c 0%, #0a3d22 100%) !important;
    border-color: rgba(10,207,131,0.2) !important;
}
html.dark-mode .guide-cta-section h4 {
    color: var(--color-texto-principal) !important;
}
html.dark-mode .guide-cta-section p {
    color: var(--color-texto-secundario) !important;
}
html.dark-mode .guide-cta-section .btn-warning {
    background: linear-gradient(135deg, #0acf83 0%, #07a567 100%) !important;
    color: #021a0e !important;
    border-color: transparent !important;
    box-shadow: 0 4px 18px rgba(10,207,131,0.35) !important;
}
html.dark-mode .guide-cta-section .btn-warning:hover {
    background: linear-gradient(135deg, #0de891 0%, #09b872 100%) !important;
    box-shadow: 0 6px 24px rgba(10,207,131,0.5) !important;
}

/* ── RECUPERAR CONTRASEÑA ─────────────────────────────────────── */
html.dark-mode .recuperar-card {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
html.dark-mode .recuperar-body {
    background: var(--color-fondo-card) !important;
}
html.dark-mode .recuperar-label {
    color: var(--color-texto-secundario) !important;
}
html.dark-mode .recuperar-input {
    background: var(--color-fondo-principal) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-principal) !important;
}
html.dark-mode .recuperar-input:focus {
    border-color: #0acf83 !important;
    box-shadow: 0 0 0 3px rgba(10,207,131,0.15) !important;
    background: var(--color-fondo-elevado) !important;
}
html.dark-mode .recuperar-input::placeholder {
    color: var(--color-texto-apagado) !important;
}
html.dark-mode .recuperar-input-icon {
    color: var(--color-texto-apagado) !important;
}
html.dark-mode .btn-recuperar {
    background: linear-gradient(135deg, #0acf83 0%, #07a567 100%) !important;
    color: #021a0e !important;
    box-shadow: 0 4px 18px rgba(10,207,131,0.35) !important;
}
html.dark-mode .btn-recuperar:hover {
    background: linear-gradient(135deg, #0de891 0%, #09b872 100%) !important;
    box-shadow: 0 6px 24px rgba(10,207,131,0.5) !important;
}
html.dark-mode .recuperar-footer a {
    color: #0acf83 !important;
}
html.dark-mode .success-icon-wrap {
    background: rgba(10,207,131,0.1) !important;
    border-color: rgba(10,207,131,0.3) !important;
    color: #0acf83 !important;
}
html.dark-mode .success-title {
    color: var(--color-texto-principal) !important;
}
html.dark-mode .success-desc {
    color: var(--color-texto-secundario) !important;
}

/* ── PÁGINAS LEGALES (condiciones, privacidad, términos) ──────── */
html.dark-mode .legal-wrap,
html.dark-mode .terms-wrap,
html.dark-mode .privacy-wrap,
html.dark-mode .condiciones-wrap,
html.dark-mode [class*="legal-"],
html.dark-mode [class*="terms-"],
html.dark-mode [class*="privacy-"] {
    color: var(--color-texto-principal) !important;
}
html.dark-mode .legal-card,
html.dark-mode .terms-card,
html.dark-mode .privacy-card,
html.dark-mode [class*="legal-card"],
html.dark-mode [class*="terms-card"],
html.dark-mode [class*="privacy-card"] {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode .legal-section h2,
html.dark-mode .legal-section h3,
html.dark-mode .terms-section h2,
html.dark-mode .terms-section h3 {
    color: var(--color-texto-principal) !important;
}
html.dark-mode .legal-section p,
html.dark-mode .terms-section p,
html.dark-mode .legal-section li {
    color: var(--color-texto-secundario) !important;
}
/* Selectors genéricos para contenido de texto en páginas informativas */
html.dark-mode #page-condiciones main,
html.dark-mode #page-privacidad main,
html.dark-mode #page-terminos main,
html.dark-mode #page-recuperar main {
    color: var(--color-texto-principal) !important;
}
html.dark-mode #page-condiciones h1,
html.dark-mode #page-condiciones h2,
html.dark-mode #page-condiciones h3,
html.dark-mode #page-privacidad h1,
html.dark-mode #page-privacidad h2,
html.dark-mode #page-privacidad h3,
html.dark-mode #page-terminos h1,
html.dark-mode #page-terminos h2,
html.dark-mode #page-terminos h3 {
    color: var(--color-texto-principal) !important;
}
html.dark-mode #page-condiciones p,
html.dark-mode #page-condiciones li,
html.dark-mode #page-privacidad p,
html.dark-mode #page-privacidad li,
html.dark-mode #page-terminos p,
html.dark-mode #page-terminos li {
    color: var(--color-texto-secundario) !important;
}
/* Cards/secciones de páginas legales con fondo blanco */
html.dark-mode #page-condiciones .card,
html.dark-mode #page-privacidad .card,
html.dark-mode #page-terminos .card,
html.dark-mode #page-condiciones section,
html.dark-mode #page-privacidad section,
html.dark-mode #page-terminos section {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}

/* ── PROMOCIONES ──────────────────────────────────────────────── */
html.dark-mode #page-promociones main {
    color: var(--color-texto-principal) !important;
}
html.dark-mode .promo-card,
html.dark-mode .promotion-card,
html.dark-mode [class*="promo-card"],
html.dark-mode #page-promociones .card {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode .promo-card:hover,
html.dark-mode .promotion-card:hover {
    border-color: rgba(10,207,131,0.3) !important;
    box-shadow: 0 4px 20px rgba(10,207,131,0.1) !important;
}
html.dark-mode .promo-badge,
html.dark-mode .promo-tag {
    background: rgba(10,207,131,0.1) !important;
    color: #0acf83 !important;
    border-color: rgba(10,207,131,0.25) !important;
}
html.dark-mode .promo-title,
html.dark-mode [class*="promo-title"] {
    color: var(--color-texto-principal) !important;
}
html.dark-mode .promo-desc,
html.dark-mode [class*="promo-desc"] {
    color: var(--color-texto-secundario) !important;
}
html.dark-mode .promo-value,
html.dark-mode [class*="promo-value"] {
    color: #0acf83 !important;
}


/* ── TARJETAS CONTACTO CONDICIONES (Bootstrap bg-light/text-dark) */
html.dark-mode .faq-item-premium .bg-light,
html.dark-mode .faq-content-card-premium .bg-light,
html.dark-mode .faq-answer .bg-light {
    background-color: var(--color-fondo-elevado) !important;
    border-color: var(--color-bordes) !important;
}
html.dark-mode .faq-item-premium .text-dark,
html.dark-mode .faq-content-card-premium .text-dark,
html.dark-mode .faq-answer .text-dark {
    color: var(--color-texto-principal) !important;
}
html.dark-mode .faq-item-premium .text-primary,
html.dark-mode .faq-content-card-premium .text-primary {
    color: #0acf83 !important;
}
html.dark-mode .faq-item-premium .border,
html.dark-mode .faq-answer .border {
    border-color: var(--color-bordes) !important;
}
/* alert-info dentro de faq */
html.dark-mode .faq-item-premium .alert-info {
    background: rgba(10,207,131,0.08) !important;
    border-color: rgba(10,207,131,0.2) !important;
    color: #6ee7b7 !important;
}


/* ── FIX: faq-category-header fondo gris hardcodeado ──────────── */
html.dark-mode .faq-category-header {
    background-color: var(--color-fondo-elevado) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-secundario) !important;
}
html.dark-mode .faq-category-header i.text-primary {
    color: #0acf83 !important;
}


/* ── FIX: zafra filtros con border-radius pill en dark mode ────── */
html.dark-mode .zafra-filter-btn {
    border-radius: var(--radius-pill) !important;
    border: 1px solid var(--color-bordes) !important;
    background: var(--color-fondo-elevado) !important;
    color: var(--color-texto-secundario) !important;
}
html.dark-mode .zafra-filter-btn:hover:not(.active) {
    border-radius: var(--radius-pill) !important;
    border-color: rgba(10,207,131,0.4) !important;
    color: #0acf83 !important;
    background: rgba(10,207,131,0.08) !important;
}
html.dark-mode .zafra-filter-btn.active {
    border-radius: var(--radius-pill) !important;
    background: linear-gradient(135deg, #0acf83 0%, #07a567 100%) !important;
    border-color: transparent !important;
    color: #021a0e !important;
    box-shadow: 0 3px 14px rgba(10,207,131,0.4) !important;
    font-weight: 800 !important;
}
html.dark-mode .zafra-filter-bar {
    border-radius: var(--radius-lg) !important;
}


/* ── FIX ZAFRA: hover blanco en sel-item + filtros pill ───────── */
html.dark-mode .zafra-sel-item:hover {
    background: rgba(10,207,131,0.06) !important;
}
/* Forzar pill en filtros — Bootstrap btn-group aplana border-radius */
html.dark-mode .zafra-filter-btns,
.zafra-filter-btns {
    display: flex !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}
html.dark-mode .zafra-filter-btns .zafra-filter-btn,
.zafra-filter-btns .zafra-filter-btn {
    border-radius: 999px !important;
}
html.dark-mode .zafra-filter-btns .zafra-filter-btn:first-child,
html.dark-mode .zafra-filter-btns .zafra-filter-btn:last-child,
.zafra-filter-btns .zafra-filter-btn:first-child,
.zafra-filter-btns .zafra-filter-btn:last-child {
    border-radius: 999px !important;
}


/* ================================================================
   DARK MODE — FIX LIVE: match-row y odd-button con !important
   ================================================================ */
html.dark-mode .match-row {
    background-color: var(--color-fondo-card) !important;
    border-bottom-color: var(--color-bordes) !important;
}
html.dark-mode .match-row:hover {
    background-color: var(--color-fondo-hover) !important;
    box-shadow: inset 3px 0 0 #0acf83 !important;
}
html.dark-mode .live-match-row {
    background-color: var(--color-fondo-card) !important;
    border-bottom-color: var(--color-bordes) !important;
}
html.dark-mode .live-match-row:hover {
    background-color: rgba(239,59,59,0.05) !important;
}
html.dark-mode .odd-button {
    background: var(--color-fondo-elevado) !important;
    border-color: var(--color-bordes) !important;
    color: var(--color-texto-principal) !important;
}
html.dark-mode .odd-button:hover:not(:disabled) {
    background: rgba(10,207,131,0.08) !important;
    border-color: rgba(10,207,131,0.4) !important;
    color: #0acf83 !important;
    box-shadow: 0 3px 14px rgba(10,207,131,0.18) !important;
}
/* Match list header (1 X 2 TOTAL GOLES) */
html.dark-mode .match-list-header {
    background-color: var(--color-fondo-pagina) !important;
    color: var(--color-texto-apagado) !important;
    border-bottom-color: var(--color-bordes) !important;
}
/* Estado cargando de live */
html.dark-mode .live-loading-state {
    background: var(--color-fondo-card) !important;
    border-color: var(--color-bordes) !important;
}
/* Header de la sección live ya es oscuro por defecto, solo asegurar en dark */
html.dark-mode .live-section-header {
    border-color: rgba(10,207,131,0.1) !important;
}
/* Grupo de liga (FÚTBOL / AUSTRALIA...) */
html.dark-mode .match-group-header,
html.dark-mode [class*="match-group"],
html.dark-mode .league-group-header {
    background: var(--color-fondo-pagina) !important;
    color: var(--color-texto-secundario) !important;
    border-color: var(--color-bordes) !important;
}
/* Score de partidos live */
html.dark-mode .match-row-time,
html.dark-mode .live-score,
html.dark-mode .score-block {
    color: var(--color-texto-secundario) !important;
}
html.dark-mode .match-row-time strong {
    color: #ef3b3b !important;
}
/* Equipos */
html.dark-mode .team-name,
html.dark-mode .teams {
    color: var(--color-texto-principal) !important;
}


/* ── FIX LIVE: nombres de equipos (clase en vez de inline color) ─ */
.live-team-name {
    color: #1a2744;
}
html.dark-mode .live-team-name {
    color: var(--color-texto-principal) !important;
}

/* ── FIX LIVE: score y minuto (En vivo 63') ──────────────────── */
html.dark-mode .live-match-row .match-row-time,
html.dark-mode .live-match-row [class*="live-time"],
html.dark-mode .live-match-row [class*="score"],
html.dark-mode .live-match-row [class*="minuto"] {
    color: #ff4d5e !important;
}

/* ── PANEL ÉXITO APUESTA — dark mode ─────────────────────────── */
html.dark-mode #betSuccessContentModern [style*="background:#eef4fd"],
html.dark-mode #betSuccessContentModern [style*="background: #eef4fd"] {
    background: var(--color-fondo-elevado) !important;
    border-left-color: #0acf83 !important;
}
html.dark-mode #betSuccessContentModern [style*="background:#f0f2f5"],
html.dark-mode #betSuccessContentModern [style*="background: #f0f2f5"] {
    background: var(--color-fondo-pagina) !important;
}
html.dark-mode #betSuccessContentModern [style*="color:#1a2744"],
html.dark-mode #betSuccessContentModern [style*="color: #1a2744"] {
    color: var(--color-texto-principal) !important;
}
html.dark-mode #betSuccessContentModern [style*="color:#5a6478"],
html.dark-mode #betSuccessContentModern [style*="color: #5a6478"] {
    color: var(--color-texto-secundario) !important;
}


/* ── HEADER MÓVIL — ajuste para pantallas pequeñas ───────────── */
@media (max-width: 480px) {
    #nav-user-buttons {
        gap: 0.25rem !important;
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
    }
    .header-saldo-display {
        font-size: 0.7rem !important;
        padding: 3px 7px !important;
        max-width: 110px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Ocultar el ícono del wallet en pantallas muy pequeñas para ganar espacio */
    .header-saldo-display i {
        display: none !important;
    }
    .btn-header-user-menu {
        font-size: 0.7rem !important;
        padding: 3px 7px !important;
        max-width: 90px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Ocultar la flecha del dropdown para ganar espacio */
    .btn-header-user-menu::after {
        display: none !important;
    }
    /* Ocultar el ícono de persona también si sigue muy apretado */
    .btn-header-user-menu .bi-person-circle {
        display: none !important;
    }
}

/* Pantallas entre 480 y 576px — versión intermedia */
@media (min-width: 481px) and (max-width: 576px) {
    .header-saldo-display {
        font-size: 0.72rem !important;
        padding: 4px 8px !important;
    }
    .btn-header-user-menu {
        max-width: 100px !important;
        font-size: 0.72rem !important;
    }
}


/* ── HEADER MÓVIL — botón dark mode debajo del hamburger ──────── */
@media (max-width: 991px) {
    /* El navbar container es flex row — izquierda/centro/derecha */
    .navbar > .container,
    .navbar > .container-fluid {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }
    /* Logo centrado via mx-auto */
    .navbar-brand.mx-auto {
        position: static !important;
        transform: none !important;
        flex-grow: 1;
        text-align: center;
    }
    /* nav-user-buttons no crece */
    #nav-user-buttons {
        flex-shrink: 0;
    }
    /* Ocultar toggle inyectado por JS — el del HTML lo reemplaza */
    #nav-user-buttons .dark-toggle-btn {
        display: none !important;
    }
}
@media (min-width: 992px) {
    #darkToggleMobile { display: none !important; }
}


/* ── BOTONES INGRESO/REGISTRO en columna en móvil ─────────────── */
@media (max-width: 991px) {
    #nav-user-buttons {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
    }
    #nav-user-buttons .btn-header-login,
    #nav-user-buttons .btn-header-register {
        font-size: 0.82rem !important;
        padding: 6px 14px !important;
        text-align: center !important;
        white-space: nowrap !important;
        height: auto !important;
    }
}


/* ── FIX LÍNEAS BLANCAS EN DARK MODE ─────────────────────────── */
html.dark-mode #como-empezar {
    border-top-color: rgba(10,207,131,0.15) !important;
    border-bottom-color: rgba(10,207,131,0.15) !important;
    background: linear-gradient(135deg, rgba(10,207,131,0.04) 0%, transparent 100%) !important;
}
html.dark-mode #como-empezar::before {
    background: none !important;
}
html.dark-mode .como-empezar-cta {
    border-left-color: var(--color-bordes) !important;
}
html.dark-mode .como-empezar-step {
    border-bottom-color: var(--color-bordes) !important;
}
/* Bordes hardcodeados en #ecf0f8 */
html.dark-mode [style*="border-top: 1px solid #ecf0f8"],
html.dark-mode [style*="border-bottom: 1px solid #ecf0f8"] {
    border-color: var(--color-bordes) !important;
}
/* summary-selection-item */
html.dark-mode .summary-selection-item {
    border-bottom-color: var(--color-bordes) !important;
}
/* zafra-sel-item */
html.dark-mode .zafra-sel-item {
    border-bottom-color: var(--color-bordes) !important;
}


/* ── FIX LÍNEA BLANCA móvil como-empezar-cta ──────────────────── */
@media (max-width: 768px) {
    html.dark-mode .como-empezar-cta {
        border-top-color: var(--color-bordes) !important;
    }
}

/* ── BTN-CTA-APUESTA: azul en claro, verde en oscuro ──────────── */
.btn-cta-apuesta {
    background: var(--grad-acento) !important;
    box-shadow: 0 4px 18px rgba(26,127,232,0.32) !important;
    color: #fff !important;
}
.btn-cta-apuesta:hover {
    box-shadow: 0 8px 26px rgba(26,127,232,0.48) !important;
    color: #fff !important;
}
html.dark-mode .btn-cta-apuesta {
    background: linear-gradient(135deg, #0acf83 0%, #07a567 100%) !important;
    box-shadow: 0 4px 18px rgba(10,207,131,0.35) !important;
    color: #021a0e !important;
}
html.dark-mode .btn-cta-apuesta:hover {
    background: linear-gradient(135deg, #0de891 0%, #09b872 100%) !important;
    box-shadow: 0 8px 26px rgba(10,207,131,0.5) !important;
    color: #021a0e !important;
}


/* ── BARRA MÓVIL SLIP: naranja en claro, verde en oscuro ──────── */
#mobileSlipBar {
    background: linear-gradient(135deg, #f5a623 0%, #e8951f 100%) !important;
    color: #1a1200 !important;
    box-shadow: 0 -3px 16px rgba(245,166,35,0.4) !important;
}
#mobileSlipBar * { color: #1a1200 !important; }

html.dark-mode #mobileSlipBar {
    background: linear-gradient(135deg, #0acf83 0%, #07a567 100%) !important;
    color: #021a0e !important;
    box-shadow: 0 -3px 16px rgba(10,207,131,0.4) !important;
}
html.dark-mode #mobileSlipBar * { color: #021a0e !important; }
/* ================================================================
   MIS APUESTAS — Estilos de filtros y fecha
   Agregar en css/style.css (o en la sección correspondiente)
   ================================================================ */

/* Renglón único de filtros */
#bets-sub-tabs-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Tabs: área deslizable que ocupa el espacio disponible */
#bets-sub-tabs-btns {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}
#bets-sub-tabs-btns::-webkit-scrollbar { display: none !important; }

/* Botones: no se encogen nunca */
#bets-sub-tabs-btns .sub-tab-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* Botón de fecha: siempre visible como pastilla */
#bet-date-label {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    position: relative !important;
    white-space: nowrap !important;
    user-select: none !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 0.85rem !important;
    border: 1px solid currentColor !important;
    transition: background 0.15s !important;
}
#bet-date-label:hover {
    opacity: 0.8 !important;
}
#bet-date-label.has-date {
    background: var(--bs-warning, #f0a500) !important;
    color: #000 !important;
    border-color: var(--bs-warning, #f0a500) !important;
}

/* Botón limpiar fecha */
#clear-date-btn {
    flex-shrink: 0 !important;
    background: none !important;
    border: none !important;
    padding: 0 2px !important;
    cursor: pointer !important;
    line-height: 1 !important;
}
/* ================================================================
   AGREGAR AL FINAL DE css/style.css
   Dark mode para info.html — variables sobrescriben las de :root
================================================================ */

.dark-mode #page-info,
.dark-mode body#page-info {
    background: #0f1523;
}

.dark-mode .info-avatar-banner {
    background: #1a2235;
    border-color: #253050;
    box-shadow: 0 2px 14px rgba(0,0,0,0.3);
}
.dark-mode .info-card {
    background: #1a2235;
    border-color: #253050;
    box-shadow: 0 2px 14px rgba(0,0,0,0.3);
}
.dark-mode .info-card-header {
    background: #1e2a45;
    border-bottom-color: #253050;
}
.dark-mode .info-card-header-title,
.dark-mode .info-avatar-name,
.dark-mode .info-row-value,
.dark-mode .info-header-title {
    color: #e8edf8;
}
.dark-mode .info-row-label,
.dark-mode .info-blur-hint,
.dark-mode .info-avatar-user,
.dark-mode .info-note,
.dark-mode .info-txt-sub {
    color: #6b7a99;
}
.dark-mode .info-row {
    border-bottom-color: #1e2a42;
}
.dark-mode .info-row:hover {
    background: #1e2a42;
}
.dark-mode .info-saldo-banner {
    background: linear-gradient(135deg, #1447b8, #0d3590);
}
.dark-mode .info-note {
    background: rgba(77,142,255,0.07);
    border-color: rgba(77,142,255,0.2);
}
.dark-mode .info-note a {
    color: #4d8eff;
}
.dark-mode .info-card-header-icon,
.dark-mode .info-header-dot {
    background: #4d8eff;
}
.dark-mode .ii-blue   { background: #162040; color: #4d8eff; }
.dark-mode .ii-green  { background: rgba(10,207,131,0.12); }
.dark-mode .ii-orange { background: rgba(245,166,35,0.1); }
.dark-mode .ii-purple { background: rgba(156,39,176,0.1); }
.dark-mode .ii-gray   { background: rgba(107,122,153,0.1); }
.dark-mode .info-skeleton {
    background: linear-gradient(90deg, #1e2a45 25%, #253050 50%, #1e2a45 75%);
    background-size: 200% 100%;
    animation: info-shimmer 1.3s infinite;
}