/* Nekon HUB · Experience System v25 */
:root {
--brand-primary-config: #59e0bf;
--brand-accent-config: #8d7dff;
--brand-primary: #59e0bf;
--brand-accent: #8d7dff;
--nekon-coral: #ff7c63;
--nekon-blue: #68b9ff;
--page-bg: #080b16;
--surface: #101426;
--panel: #151a30;
--page-border: rgba(178, 190, 226, .14);
--text: #f6f7ff;
--muted: #99a3c0;
--nekon-shadow: 0 22px 70px rgba(1, 3, 12, .30);
--nekon-soft-shadow: 0 12px 34px rgba(1, 3, 12, .18);
}
html[data-theme="light"] {
--brand-primary: #098c73;
--brand-accent: #6757d6;
--nekon-coral: #d94e3b;
--nekon-blue: #226fa8;
--page-bg: #f3f5fa;
--surface: #ffffff;
--panel: #f8f9fd;
--page-border: rgba(41, 48, 80, .13);
--text: #171b2e;
--muted: #606a83;
--nekon-shadow: 0 22px 54px rgba(36, 43, 73, .11);
--nekon-soft-shadow: 0 10px 28px rgba(36, 43, 73, .08);
color-scheme: light;
}
html[data-theme="dark"] { color-scheme: dark; }
body {
background:
radial-gradient(circle at 8% -7%, color-mix(in srgb, var(--brand-accent) 14%, transparent), transparent 32rem),
radial-gradient(circle at 92% 5%, color-mix(in srgb, var(--brand-primary) 9%, transparent), transparent 34rem),
var(--page-bg) !important;
}
body::before {
content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none;
background-image: linear-gradient(color-mix(in srgb, var(--text) 2.1%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 2.1%, transparent) 1px, transparent 1px);
background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 72%);
}
/* Marca y navegación */
body > header { border-bottom-color: var(--page-border) !important; background: color-mix(in srgb, var(--page-bg) 82%, transparent) !important; }
body > header .brand img, .menu-head .brand img, footer .brand img { border-radius: 13px; box-shadow: 0 8px 20px rgba(1,3,12,.22); }
body > header .brand b, .menu-head .brand b, footer .brand b { color: var(--brand-primary) !important; }
.notification-bell, .theme-toggle, .menu-toggle, .member-account-button { border-color: var(--page-border) !important; background: color-mix(in srgb, var(--surface) 84%, transparent) !important; color: var(--text) !important; }
.theme-toggle { color: var(--brand-accent) !important; }
#menu {
background: radial-gradient(circle at 15% 0, rgba(89,224,191,.08), transparent 18rem), color-mix(in srgb, var(--page-bg) 97%, #070a14) !important;
border-right-color: var(--page-border) !important;
}
#menu nav > .menu-link, #menu .menu-group-toggle { color: color-mix(in srgb, var(--text) 82%, var(--muted)) !important; }
#menu .menu-icon { background: color-mix(in srgb, var(--brand-accent) 7%, transparent) !important; color: var(--muted) !important; }
#menu .menu-link.is-active, #menu .menu-group-toggle.is-active, #menu nav button:hover, #menu nav button[aria-expanded="true"] {
border-color: color-mix(in srgb, var(--brand-primary) 24%, transparent) !important;
background: linear-gradient(90deg, color-mix(in srgb, var(--brand-primary) 12%, transparent), color-mix(in srgb, var(--brand-accent) 6%, transparent)) !important;
}
#menu .menu-link.is-active .menu-icon, #menu .menu-group-toggle.is-active .menu-icon { color: var(--brand-primary) !important; }
.arena-bottom-nav { border-color: var(--page-border) !important; background: color-mix(in srgb, var(--surface) 91%, transparent) !important; }
.arena-bottom-nav button.is-active { color: var(--brand-primary) !important; background: color-mix(in srgb, var(--brand-primary) 11%, transparent) !important; }
/* Splash */
.site-splash {
background: radial-gradient(circle at 50% 40%, rgba(141,125,255,.20), transparent 18rem), radial-gradient(circle at 50% 54%, rgba(89,224,191,.11), transparent 26rem), #080b16 !important;
}
.site-splash::after { background: linear-gradient(90deg, transparent, var(--brand-primary), var(--brand-accent), transparent) !important; }
/* Inicio */
.home .hero {
min-height: min(690px, calc(100dvh - 102px)) !important;
background:
linear-gradient(90deg, rgba(5,7,17,.98) 0%, rgba(6,9,21,.91) 43%, rgba(6,8,18,.25) 72%, rgba(5,7,16,.34) 100%),
url("assets/hero/nekon-hub-arena-v25.webp") 58% center/cover no-repeat !important;
border-color: rgba(167,180,226,.18) !important;
box-shadow: 0 32px 100px rgba(1,3,12,.42) !important;
}
.home .hero::before {
background: linear-gradient(115deg, transparent 58%, rgba(89,224,191,.06)), linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) !important;
background-size: auto, 66px 66px, 66px 66px !important;
}
.hero-copy .eyebrow { border-color: rgba(89,224,191,.24) !important; color: #b9f5e6 !important; background: rgba(89,224,191,.08) !important; }
.hero-copy h1 { max-width: 790px; font-size: clamp(54px, 6.3vw, 96px) !important; }
.hero-title-outline { background: linear-gradient(95deg, #62e5c5, #9d8fff 63%, #ff8870) !important; background-clip: text !important; -webkit-background-clip: text !important; }
.hero .actions button { background: linear-gradient(135deg, #9af1dc, #59e0bf) !important; box-shadow: 0 15px 36px rgba(89,224,191,.20) !important; }
.hero .actions button.secondary { border-color: rgba(141,125,255,.34) !important; color: #c8c0ff !important; background: rgba(141,125,255,.12) !important; }
.arena-hero-panel { border-color: rgba(178,190,226,.18) !important; background: rgba(12,16,35,.76) !important; }
.arena-live-pill { color: #a9efdc !important; background: rgba(89,224,191,.10) !important; }
.arena-hero-actions button { border-color: rgba(178,190,226,.13) !important; background: rgba(255,255,255,.035) !important; }
.arena-hero-actions button:hover { border-color: rgba(89,224,191,.36) !important; background: linear-gradient(90deg, rgba(89,224,191,.10), rgba(141,125,255,.06)) !important; }
.arena-hero-actions button:nth-child(2) i { background: rgba(141,125,255,.13) !important; color: #b9afff !important; }
.arena-hero-actions button:nth-child(3) i { background: rgba(255,124,99,.11) !important; color: #ff9a86 !important; }
.home .quick-grid article {
border-color: var(--page-border) !important; border-radius: 24px !important;
background: linear-gradient(150deg, color-mix(in srgb, var(--nekon-blue) 8%, var(--surface)), var(--surface) 62%) !important;
box-shadow: var(--nekon-soft-shadow) !important;
}
.home .quick-grid article:nth-child(2) { background: linear-gradient(150deg, color-mix(in srgb, var(--brand-accent) 10%, var(--surface)), var(--surface) 62%) !important; }
.home .quick-grid article:nth-child(3) { background: linear-gradient(150deg, color-mix(in srgb, var(--brand-primary) 9%, var(--surface)), var(--surface) 62%) !important; }
.home .quick-grid article:nth-child(4) { background: linear-gradient(150deg, color-mix(in srgb, var(--nekon-coral) 8%, var(--surface)), var(--surface) 62%) !important; }
.home .quick-grid article:hover { border-color: color-mix(in srgb, var(--brand-primary) 38%, var(--page-border)) !important; }
.home .quick-grid h2, .home .quick-grid p { color: var(--text) !important; }
.home .quick-grid p { color: var(--muted) !important; }
/* Encabezado único de cada sección */
.page-title, .member-page-title {
position: relative; grid-template-columns: 58px minmax(0,1fr) !important; column-gap: 17px !important;
min-height: 126px !important; padding: 22px 25px !important;
border-color: var(--page-border) !important;
background: radial-gradient(circle at 96% 0, color-mix(in srgb, var(--brand-accent) 9%, transparent), transparent 19rem), linear-gradient(145deg, color-mix(in srgb, var(--surface) 98%, var(--brand-primary) 2%), var(--surface)) !important;
box-shadow: var(--nekon-soft-shadow) !important;
}
.page-title::before {
content: attr(data-nekon-icon); grid-row: 1 / span 3; align-self: center;
display: grid; place-items: center; width: 56px; height: 56px;
border: 1px solid color-mix(in srgb, var(--brand-primary) 25%, var(--page-border)); border-radius: 18px;
background: linear-gradient(145deg, color-mix(in srgb, var(--brand-primary) 13%, transparent), color-mix(in srgb, var(--brand-accent) 8%, transparent));
color: var(--brand-primary); font-size: 20px; font-weight: 850;
}
.page-title::after { display: none !important; }
.page-title > small, .page-title > h1, .page-title > p { grid-column: 2; }
.page-title h1, main .view.inner .page-title h1 { color: var(--text) !important; }
.page-title p { color: var(--muted) !important; }
.page-title small { color: var(--brand-primary) !important; }
/* Pronósticos */
.prediction-grid { gap: 16px !important; }
.prediction-card {
border: 1px solid var(--page-border) !important; border-radius: 24px !important;
background: linear-gradient(155deg, color-mix(in srgb, var(--brand-primary) 7%, var(--surface)), var(--surface) 38%, color-mix(in srgb, var(--brand-accent) 4%, var(--surface))) !important;
box-shadow: var(--nekon-soft-shadow) !important;
}
.prediction-card::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 3px; border-radius: 0 0 10px 10px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)); }
.pick-number { color: var(--brand-primary) !important; }
.pick-rank { border-color: color-mix(in srgb, var(--brand-accent) 25%, transparent) !important; background: color-mix(in srgb, var(--brand-accent) 10%, transparent) !important; color: color-mix(in srgb, var(--brand-accent) 70%, var(--text)) !important; }
.prediction-card h2, .prediction-card h3, .pick-analysis { color: var(--text) !important; }
.pick-analysis { color: var(--muted) !important; }
.selected-matches-box, .pick-value-box, .copy-pick, .countdown-block {
border-color: var(--page-border) !important; background: color-mix(in srgb, var(--page-bg) 38%, var(--surface)) !important;
}
.copy-pick { border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--page-border)) !important; }
.copy-pick b, .pick-value-box strong { color: var(--brand-primary) !important; }
.countdown strong { color: var(--text) !important; }
.prediction-note { border-color: var(--page-border) !important; border-radius: 18px !important; background: color-mix(in srgb, var(--brand-accent) 6%, var(--surface)) !important; }
.prediction-history-card { border-color: var(--page-border) !important; border-radius: 18px !important; background: var(--surface) !important; box-shadow: var(--nekon-soft-shadow) !important; }
.prediction-history-card__details { border-top-color: var(--page-border) !important; }
.prediction-history-card--won { border-left: 4px solid #19ad7e !important; }
.prediction-history-card--lost { border-left: 4px solid #e45d68 !important; }
.history-result-badge { border-radius: 999px !important; }
/* Premios, ganadores, cuentas y agencias */
.sync-card-grid, .winner-grid, .representative-grid { gap: 16px !important; }
.sync-card, .winner-card, .winner-public-card, .representative-card, .benefit-card, .premium-card, .premium-product-card, .premium-shop-card {
overflow: hidden; border: 1px solid var(--page-border) !important; border-radius: 22px !important;
background: var(--surface) !important; box-shadow: var(--nekon-soft-shadow) !important;
}
.sync-card img, .winner-card img, .winner-public-card img, .representative-card img { background: color-mix(in srgb, var(--brand-accent) 5%, var(--surface)); }
.sync-card__body h2, .sync-card__body p, .winner-card h2, .winner-public-card h2, .representative-card h2 { color: var(--text) !important; }
.sync-card__body p, .winner-card p, .winner-public-card p, .representative-card p { color: var(--muted) !important; }
.sync-card__body button { border-radius: 13px !important; background: linear-gradient(135deg, #91ead5, var(--brand-primary)) !important; color: #071711 !important; }
.streaming-platform-tabs {
padding: 8px !important; border: 1px solid var(--page-border) !important; border-radius: 18px !important; background: color-mix(in srgb, var(--surface) 94%, var(--page-bg)) !important;
}
.streaming-platform-tabs button { border-color: transparent !important; border-radius: 13px !important; color: var(--muted) !important; background: transparent !important; }
.streaming-platform-tabs button.is-active { border-color: color-mix(in srgb, var(--brand-primary) 24%, var(--page-border)) !important; background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface)) !important; color: var(--text) !important; }
.selected-platform-heading { border-color: var(--page-border) !important; border-radius: 20px !important; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-accent) 8%, var(--surface)), var(--surface)) !important; }
.benefit-card__visual { background: linear-gradient(145deg, color-mix(in srgb, var(--brand-accent) 15%, #0c1020), #090c17) !important; }
.benefit-card__body { background: var(--surface) !important; }
.benefit-card__body h2, .benefit-card__body p, .credential-copy strong { color: var(--text) !important; }
.benefit-card__body p, .benefit-card__note { color: var(--muted) !important; }
.credential-copy { border-color: var(--page-border) !important; border-radius: 13px !important; background: color-mix(in srgb, var(--page-bg) 44%, var(--surface)) !important; }
.premium-store-inner { width: min(1320px, 100%) !important; }
.premium-sale-banner { border-color: color-mix(in srgb, var(--nekon-coral) 25%, var(--page-border)) !important; border-radius: 20px !important; background: linear-gradient(120deg, color-mix(in srgb, var(--nekon-coral) 11%, var(--surface)), color-mix(in srgb, var(--brand-accent) 7%, var(--surface))) !important; }
.premium-catalog__head h2, .premium-card h3, .premium-card p, .premium-product-card h2, .premium-product-card h3 { color: var(--text) !important; }
.premium-card p, .premium-product-card p, .premium-card-meta span { color: var(--muted) !important; }
.premium-card, .premium-product-card { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.premium-card:hover, .premium-product-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--brand-accent) 34%, var(--page-border)) !important; box-shadow: var(--nekon-shadow) !important; }
.premium-card__body, .premium-product-body, .premium-shop-card__body { background: var(--surface) !important; }
.premium-card button, .premium-product-card button { border-radius: 12px !important; }
.premium-card button[data-premium-buy], .premium-buy-button, .premium-detail-buy, .premium-finalize-button { background: linear-gradient(135deg, var(--brand-accent), color-mix(in srgb, var(--brand-accent) 76%, var(--brand-primary))) !important; color: #fff !important; }
/* Mi Club */
.member-panel, .ranking-panel, .ticket-summary-grid article, .profile-static-field, .member-ticket, .member-status-item {
border-color: var(--page-border) !important; background: var(--surface) !important; color: var(--text) !important; box-shadow: var(--nekon-soft-shadow) !important;
}
.member-panel { border-radius: 22px !important; }
.member-panel__head > span { border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--page-border)) !important; background: color-mix(in srgb, var(--brand-primary) 10%, transparent) !important; color: var(--brand-primary) !important; }
.member-panel h2, .member-panel strong, .ranking-panel h2 { color: var(--text) !important; }
.member-panel p, .member-panel small, .ranking-panel small { color: var(--muted) !important; }
.ticket-summary-grid article { position: relative; overflow: hidden; border-radius: 18px !important; }
.ticket-summary-grid article::after { content: ""; position: absolute; inset: auto -18px -36px auto; width: 88px; height: 88px; border-radius: 50%; background: color-mix(in srgb, var(--brand-accent) 8%, transparent); }
.ticket-summary-grid strong, .referral-stat strong, .ranking-row__tickets strong { color: var(--brand-primary) !important; }
.member-ticket__number, .member-ticket__type { background: color-mix(in srgb, var(--brand-primary) 10%, transparent) !important; color: var(--brand-primary) !important; }
.member-ticket.is-referral .member-ticket__number, .member-ticket.is-referral .member-ticket__type { background: color-mix(in srgb, var(--brand-accent) 10%, transparent) !important; color: var(--brand-accent) !important; }
.ranking-row { border-color: var(--page-border) !important; background: color-mix(in srgb, var(--surface) 97%, var(--brand-primary) 3%) !important; }
.ranking-row.is-top-1 { border-color: rgba(255,174,65,.30) !important; background: linear-gradient(90deg, rgba(255,174,65,.08), var(--surface)) !important; }
.profile-card { background: linear-gradient(155deg, color-mix(in srgb, var(--brand-accent) 10%, var(--surface)), var(--surface)) !important; }
.profile-id { border-color: var(--page-border) !important; background: color-mix(in srgb, var(--page-bg) 38%, var(--surface)) !important; }
.security-note { border-color: color-mix(in srgb, var(--brand-accent) 22%, var(--page-border)) !important; background: color-mix(in srgb, var(--brand-accent) 7%, var(--surface)) !important; color: var(--muted) !important; }
.member-gate-card, .referral-share-card, .referral-stats-card { border-color: var(--page-border) !important; border-radius: 22px !important; background: var(--surface) !important; color: var(--text) !important; box-shadow: var(--nekon-soft-shadow) !important; }
.member-gate-card p, .referral-stat span { color: var(--muted) !important; }
/* Formularios y sugerencias */
.suggestions-shell { border-color: var(--page-border) !important; background: var(--surface) !important; box-shadow: var(--nekon-shadow) !important; }
.suggestions-intro { background: linear-gradient(145deg, color-mix(in srgb, var(--brand-accent) 13%, #0c1020), #0a0d19) !important; }
.suggestion-form { background: var(--surface) !important; }
.suggestion-form label > span, .member-form label > span, .member-auth-form label > span { color: var(--text) !important; }
.member-form input, .member-form select, .member-auth-form input, .member-copy-row input, .suggestion-form input, .suggestion-form select, .suggestion-form textarea {
border-color: color-mix(in srgb, var(--brand-accent) 18%, var(--page-border)) !important; background: color-mix(in srgb, var(--page-bg) 44%, var(--surface)) !important; color: var(--text) !important;
}
.member-form input::placeholder, .member-auth-form input::placeholder, .suggestion-form input::placeholder, .suggestion-form textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent) !important; }
.member-form input:focus, .member-form select:focus, .member-auth-form input:focus, .suggestion-form input:focus, .suggestion-form select:focus, .suggestion-form textarea:focus { border-color: var(--brand-primary) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 12%, transparent) !important; }
.member-primary-button, .suggestion-submit { background: linear-gradient(135deg, #91ead5, var(--brand-primary)) !important; color: #071711 !important; }
.member-secondary-button, .member-copy-row button { border-color: var(--page-border) !important; background: color-mix(in srgb, var(--surface) 92%, var(--page-bg)) !important; color: var(--text) !important; }
/* Metodología */
.methodology-shell { position: relative; display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 14px !important; }
.methodology-card { position: relative; min-height: 210px; padding: 25px 25px 25px 82px !important; border: 1px solid var(--page-border) !important; border-radius: 22px !important; background: var(--surface) !important; box-shadow: var(--nekon-soft-shadow) !important; }
.methodology-card__index { position: absolute; left: 23px; top: 24px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, var(--page-border)); border-radius: 14px; background: color-mix(in srgb, var(--brand-primary) 10%, transparent); color: var(--brand-primary) !important; }
.methodology-card h2 { color: var(--text) !important; }
.methodology-card p { color: var(--muted) !important; }
.responsible-note { border-color: var(--page-border) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--brand-primary) 7%, var(--surface)), var(--surface)) !important; }
/* Diálogos, notificaciones y soporte */
.member-auth-shell, .member-auth-content, .premium-product-detail-shell, .premium-purchase-shell, .notification-center-shell, .member-success-shell {
border-color: var(--page-border) !important; background: var(--surface) !important; color: var(--text) !important;
}
.member-auth-brand { background: radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--brand-accent) 15%, transparent), transparent 21rem), color-mix(in srgb, var(--page-bg) 68%, var(--surface)) !important; }
.member-auth-tabs { border-color: var(--page-border) !important; background: color-mix(in srgb, var(--page-bg) 54%, var(--surface)) !important; }
.member-auth-tabs button { color: var(--muted) !important; }
.member-auth-tabs button.is-active { border-color: var(--page-border) !important; background: var(--surface) !important; color: var(--text) !important; }
.premium-product-detail-content, .premium-purchase-body, .notification-center-content { background: var(--surface) !important; color: var(--text) !important; }
.premium-purchase-summary, .premium-payment-details, .premium-price-breakdown, .premium-delivery-box, .premium-customer-order {
border-color: var(--page-border) !important; background: color-mix(in srgb, var(--page-bg) 40%, var(--surface)) !important; color: var(--text) !important;
}
.premium-purchase-summary p, .premium-delivery-box p, .premium-payment-details dt, .premium-customer-order p { color: var(--muted) !important; }
.premium-checkout-grid input, .premium-checkout-grid select, .premium-receipt-field input, .premium-support-composer {
border-color: var(--page-border) !important; background: color-mix(in srgb, var(--page-bg) 44%, var(--surface)) !important; color: var(--text) !important;
}
.premium-support-shell { border-color: rgba(176,189,225,.20) !important; background: #0d1224 !important; }
.premium-support-header { background: #12182c !important; }
.premium-support-messages { background: radial-gradient(circle at 90% 0, rgba(141,125,255,.08), transparent 18rem), #0a0e1c !important; }
.premium-support-message.is-member p { background: linear-gradient(135deg, var(--brand-accent), #6757d6) !important; color: #fff !important; }
.premium-support-message.is-admin p { border-color: rgba(178,190,226,.15) !important; background: #171d32 !important; color: #f6f7ff !important; }
.premium-support-form { background: #101629 !important; }
.premium-support-composer { background: #0a0f1e !important; }
.notification-item { border-color: var(--page-border) !important; background: var(--surface) !important; }
.notification-item h3, .notification-item p { color: var(--text) !important; }
.notification-item p { color: var(--muted) !important; }
.install-help-dialog > .install-guide { border: 1px solid var(--page-border) !important; box-shadow: var(--nekon-shadow) !important; }
.install-guide__identity { background: radial-gradient(circle at 20% 10%, rgba(89,224,191,.12), transparent 16rem), #0d1224 !important; }
.install-guide__content { background: radial-gradient(circle at 100% 0, rgba(141,125,255,.09), transparent 20rem), #101426 !important; color: #f6f7ff !important; }
.install-guide__action { background: linear-gradient(135deg, #91ead5, #59e0bf) !important; color: #071711 !important; }
.app-promo { border-color: var(--page-border) !important; background: radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--brand-accent) 12%, transparent), transparent 25rem), radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--brand-primary) 10%, transparent), transparent 26rem), var(--surface) !important; }
footer { border-top-color: var(--page-border) !important; background: color-mix(in srgb, var(--surface) 74%, var(--page-bg)) !important; color: var(--text) !important; }
/* Modo claro completo */
html[data-theme="light"] body { background: #f3f5fa !important; color: #171b2e !important; }
html[data-theme="light"] body::before { opacity: .55; }
html[data-theme="light"] body > header { background: rgba(255,255,255,.88) !important; border-bottom-color: rgba(41,48,80,.12) !important; }
html[data-theme="light"] #menu { background: radial-gradient(circle at 15% 0, rgba(9,140,115,.08), transparent 18rem), rgba(250,251,254,.99) !important; }
html[data-theme="light"] #menu nav > .menu-link, html[data-theme="light"] #menu .menu-group-toggle { color: #424b65 !important; }
html[data-theme="light"] #menu .menu-icon { color: #65708a !important; background: #f0f2f8 !important; }
html[data-theme="light"] .arena-bottom-nav { background: rgba(255,255,255,.94) !important; box-shadow: 0 18px 48px rgba(38,45,73,.18) !important; }
html[data-theme="light"] .page-title, html[data-theme="light"] .member-page-title,
html[data-theme="light"] .prediction-card, html[data-theme="light"] .prediction-history-card,
html[data-theme="light"] .member-panel, html[data-theme="light"] .ranking-panel,
html[data-theme="light"] .sync-card, html[data-theme="light"] .winner-public-card, html[data-theme="light"] .benefit-card,
html[data-theme="light"] .premium-card, html[data-theme="light"] .premium-product-card, html[data-theme="light"] .suggestions-shell,
html[data-theme="light"] .methodology-card, html[data-theme="light"] .notification-item {
border-color: rgba(41,48,80,.13) !important; background: #fff !important; color: #171b2e !important; box-shadow: 0 10px 28px rgba(36,43,73,.08) !important;
}
html[data-theme="light"] .page-title { background: radial-gradient(circle at 96% 0, rgba(103,87,214,.07), transparent 18rem), #fff !important; }
html[data-theme="light"] .page-title h1, html[data-theme="light"] .page-title p,
html[data-theme="light"] .prediction-card h2, html[data-theme="light"] .prediction-card h3,
html[data-theme="light"] .prediction-history-card strong, html[data-theme="light"] .prediction-history-card b,
html[data-theme="light"] .member-panel h2, html[data-theme="light"] .member-panel strong,
html[data-theme="light"] .sync-card h2, html[data-theme="light"] .winner-public-card h2, html[data-theme="light"] .benefit-card h2,
html[data-theme="light"] .premium-card h3, html[data-theme="light"] .premium-product-card h3, html[data-theme="light"] .methodology-card h2,
html[data-theme="light"] .notification-item h3 { color: #171b2e !important; text-shadow: none !important; }
html[data-theme="light"] .page-title p, html[data-theme="light"] .pick-analysis,
html[data-theme="light"] .prediction-history-card small, html[data-theme="light"] .member-panel p,
html[data-theme="light"] .member-panel small, html[data-theme="light"] .sync-card p,
html[data-theme="light"] .benefit-card p, html[data-theme="light"] .winner-public-card p, html[data-theme="light"] .premium-card p, html[data-theme="light"] .premium-product-card p,
html[data-theme="light"] .methodology-card p, html[data-theme="light"] .notification-item p { color: #606a83 !important; }
html[data-theme="light"] .selected-matches-box, html[data-theme="light"] .pick-value-box,
html[data-theme="light"] .copy-pick, html[data-theme="light"] .countdown-block,
html[data-theme="light"] .credential-copy, html[data-theme="light"] .profile-id,
html[data-theme="light"] .profile-static-field, html[data-theme="light"] .member-ticket,
html[data-theme="light"] .member-status-item, html[data-theme="light"] .ranking-row,
html[data-theme="light"] .ticket-summary-grid article { border-color: rgba(41,48,80,.12) !important; background: #f7f8fc !important; color: #171b2e !important; }
html[data-theme="light"] .countdown strong, html[data-theme="light"] .credential-copy strong,
html[data-theme="light"] .profile-static-field strong, html[data-theme="light"] .member-ticket strong,
html[data-theme="light"] .ranking-row strong { color: #171b2e !important; }
html[data-theme="light"] .streaming-platform-tabs, html[data-theme="light"] .selected-platform-heading,
html[data-theme="light"] .premium-sale-banner, html[data-theme="light"] .responsible-note,
html[data-theme="light"] .prediction-note, html[data-theme="light"] .security-note { border-color: rgba(41,48,80,.12) !important; background: #fff !important; color: #171b2e !important; }
html[data-theme="light"] .benefit-card__body, html[data-theme="light"] .premium-card__body, html[data-theme="light"] .premium-product-body, html[data-theme="light"] .premium-shop-card__body,
html[data-theme="light"] .suggestion-form { background: #fff !important; color: #171b2e !important; }
html[data-theme="light"] .suggestions-intro { background: linear-gradient(145deg, #27294a, #171a32) !important; color: #fff !important; }
html[data-theme="light"] .member-form input, html[data-theme="light"] .member-form select,
html[data-theme="light"] .member-auth-form input, html[data-theme="light"] .member-copy-row input,
html[data-theme="light"] .suggestion-form input, html[data-theme="light"] .suggestion-form select,
html[data-theme="light"] .suggestion-form textarea { border-color: rgba(41,48,80,.18) !important; background: #f8f9fc !important; color: #171b2e !important; }
html[data-theme="light"] .member-form label > span, html[data-theme="light"] .member-auth-form label > span,
html[data-theme="light"] .suggestion-form label > span { color: #242a42 !important; }
html[data-theme="light"] .member-auth-shell, html[data-theme="light"] .member-auth-content,
html[data-theme="light"] .premium-product-detail-shell, html[data-theme="light"] .premium-purchase-shell,
html[data-theme="light"] .notification-center-shell, html[data-theme="light"] .member-success-shell { border-color: rgba(41,48,80,.14) !important; background: #fff !important; color: #171b2e !important; }
html[data-theme="light"] .member-auth-brand { background: radial-gradient(circle at 10% 10%, rgba(103,87,214,.10), transparent 18rem), #f5f6fb !important; color: #171b2e !important; }
html[data-theme="light"] .member-auth-tabs { background: #f1f3f8 !important; }
html[data-theme="light"] .member-auth-tabs button.is-active { background: #fff !important; color: #171b2e !important; }
html[data-theme="light"] .member-gate-card, html[data-theme="light"] .referral-share-card,
html[data-theme="light"] .referral-stats-card, html[data-theme="light"] .premium-purchase-summary,
html[data-theme="light"] .premium-payment-details, html[data-theme="light"] .premium-price-breakdown,
html[data-theme="light"] .premium-delivery-box, html[data-theme="light"] .premium-customer-order {
border-color: rgba(41,48,80,.13) !important; background: #f8f9fc !important; color: #171b2e !important;
}
html[data-theme="light"] .premium-purchase-summary p, html[data-theme="light"] .premium-delivery-box p,
html[data-theme="light"] .premium-payment-details dt, html[data-theme="light"] .premium-customer-order p { color: #606a83 !important; }
html[data-theme="light"] .premium-checkout-grid input, html[data-theme="light"] .premium-checkout-grid select,
html[data-theme="light"] .premium-receipt-field input { border-color: rgba(41,48,80,.18) !important; background: #f8f9fc !important; color: #171b2e !important; }
html[data-theme="light"] .install-guide__identity { background: radial-gradient(circle at 20% 10%, rgba(89,224,191,.11), transparent 16rem), #202446 !important; }
html[data-theme="light"] .install-guide__content { background: #fff !important; color: #171b2e !important; }
html[data-theme="light"] .install-guide__content h2 { color: #171b2e !important; }
html[data-theme="light"] .install-guide__content header > p, html[data-theme="light"] .install-guide__footer > p { color: #606a83 !important; }
html[data-theme="light"] .empty, html[data-theme="light"] .sync-empty, html[data-theme="light"] .modern-empty,
html[data-theme="light"] .member-empty { border-color: rgba(41,48,80,.13) !important; background: #fff !important; color: #606a83 !important; }
html[data-theme="light"] .empty h2, html[data-theme="light"] .sync-empty strong,
html[data-theme="light"] .modern-empty h2, html[data-theme="light"] .member-empty strong { color: #171b2e !important; }
html[data-theme="light"] footer { background: #fff !important; color: #171b2e !important; }
@media (max-width: 820px) {
.home .hero { min-height: auto !important; background: linear-gradient(180deg, rgba(6,8,18,.34), rgba(6,8,18,.92) 48%, #080b16 100%), url("assets/hero/nekon-hub-arena-v25.webp") 69% center/cover no-repeat !important; }
.page-title, .member-page-title { grid-template-columns: 46px minmax(0,1fr) !important; column-gap: 12px !important; padding: 17px !important; }
.page-title::before { width: 44px; height: 44px; border-radius: 14px; font-size: 16px; }
.methodology-shell { grid-template-columns: 1fr !important; }
.methodology-card { min-height: auto; padding: 21px 18px 21px 70px !important; }
.methodology-card__index { left: 17px; top: 20px; }
}
@media (max-width: 470px) {
.hero-copy h1 { font-size: clamp(44px, 13.5vw, 64px) !important; }
.page-title, .member-page-title { grid-template-columns: 1fr !important; }
.page-title::before { grid-row: auto; grid-column: 1; margin-bottom: 4px; }
.page-title > small, .page-title > h1, .page-title > p { grid-column: 1; }
}
/* Nekon HUB · Refinamiento visual v25.1 */
.updated { display: none !important; }
body > header .theme-toggle {
width: 108px !important;
min-width: 108px !important;
height: 42px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 9px !important;
padding: 4px 13px 4px 5px !important;
border: 1px solid var(--page-border) !important;
border-radius: 999px !important;
background: color-mix(in srgb, var(--surface) 90%, transparent) !important;
color: var(--text) !important;
box-shadow: 0 8px 24px rgba(1,3,12,.13) !important;
}
body > header .theme-toggle::before { display: none !important; content: none !important; }
body > header .theme-toggle span { position: static !important; z-index: auto !important; }
.theme-toggle__sun, .theme-toggle__moon {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
display: none !important;
place-items: center !important;
border-radius: 50% !important;
font-size: 15px !important;
line-height: 1 !important;
}
html[data-theme="dark"] .theme-toggle__moon {
display: grid !important;
color: #d9d3ff !important;
background: linear-gradient(145deg, rgba(141,125,255,.26), rgba(104,185,255,.13)) !important;
}
html[data-theme="light"] .theme-toggle__sun {
display: grid !important;
color: #8a5b00 !important;
background: linear-gradient(145deg, #fff0b4, #ffe083) !important;
}
.theme-toggle__label {
display: block !important;
color: var(--text) !important;
font-size: .65rem !important;
font-weight: 900 !important;
letter-spacing: .1em !important;
}
/* Combinadas */
.prediction-grid {
width: min(1160px, 100%) !important;
margin-inline: auto !important;
grid-template-columns: 1fr !important;
gap: 22px !important;
}
.prediction-card.prediction-card--v17 {
min-height: 0 !important;
display: block !important;
padding: clamp(22px, 3vw, 34px) !important;
text-align: left !important;
}
.prediction-card .pick-card-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
margin: 0 0 18px !important;
}
.prediction-card .pick-number {
padding: 7px 11px !important;
border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, var(--page-border)) !important;
border-radius: 999px !important;
background: color-mix(in srgb, var(--brand-primary) 10%, transparent) !important;
font-size: .68rem !important;
font-weight: 950 !important;
letter-spacing: .14em !important;
}
.pick-context {
display: grid !important;
grid-template-columns: minmax(170px, auto) minmax(0, 1fr) !important;
align-items: center !important;
gap: 16px 24px !important;
margin-bottom: 20px !important;
padding-bottom: 20px !important;
border-bottom: 1px solid var(--page-border) !important;
}
.pick-context > span {
color: var(--brand-primary) !important;
font-size: .7rem !important;
font-weight: 900 !important;
letter-spacing: .09em !important;
}
.pick-context > p {
margin: 0 !important;
color: var(--muted) !important;
font-size: .86rem !important;
line-height: 1.65 !important;
}
.combined-selection {
overflow: hidden !important;
border: 1px solid var(--page-border) !important;
border-radius: 19px !important;
background: color-mix(in srgb, var(--page-bg) 33%, var(--surface)) !important;
}
.combined-selection__head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
padding: 17px 20px !important;
border-bottom: 1px solid var(--page-border) !important;
background: linear-gradient(90deg, color-mix(in srgb, var(--brand-primary) 8%, transparent), color-mix(in srgb, var(--brand-accent) 6%, transparent)) !important;
}
.combined-selection__head small {
display: block !important;
margin-bottom: 4px !important;
color: var(--brand-primary) !important;
font-size: .59rem !important;
font-weight: 900 !important;
letter-spacing: .14em !important;
}
.combined-selection__head h2 {
display: block !important;
width: auto !important;
margin: 0 !important;
color: var(--text) !important;
font-size: clamp(1rem, 2vw, 1.25rem) !important;
font-weight: 850 !important;
line-height: 1.2 !important;
text-align: left !important;
text-transform: none !important;
}
.combined-selection__head > span {
flex: none !important;
padding: 7px 10px !important;
border: 1px solid var(--page-border) !important;
border-radius: 999px !important;
color: var(--muted) !important;
background: color-mix(in srgb, var(--surface) 78%, transparent) !important;
font-size: .61rem !important;
font-weight: 850 !important;
letter-spacing: .08em !important;
}
.combined-selection__grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
padding: 8px 0 !important;
}
.combined-leg {
min-width: 0 !important;
padding: 21px 24px !important;
text-align: left !important;
}
.combined-leg + .combined-leg { border-left: 1px solid var(--page-border) !important; }
.combined-leg:nth-child(odd) { border-left: 0 !important; }
.combined-leg:nth-child(n+3) { border-top: 1px solid var(--page-border) !important; }
.combined-leg > small {
display: block !important;
margin-bottom: 8px !important;
color: var(--muted) !important;
font-size: .59rem !important;
font-weight: 850 !important;
letter-spacing: .14em !important;
}
.combined-leg > strong {
display: block !important;
width: auto !important;
color: var(--text) !important;
font-size: clamp(.95rem, 1.8vw, 1.12rem) !important;
font-weight: 850 !important;
line-height: 1.42 !important;
overflow-wrap: anywhere !important;
}
.combined-leg > span {
display: inline-flex !important;
margin-top: 14px !important;
padding: 4px 7px !important;
border-radius: 6px !important;
color: var(--brand-accent) !important;
background: color-mix(in srgb, var(--brand-accent) 10%, transparent) !important;
font-size: .56rem !important;
font-weight: 900 !important;
letter-spacing: .12em !important;
}
.combined-leg > p {
display: block !important;
width: auto !important;
margin: 7px 0 0 !important;
color: var(--muted) !important;
font-size: .84rem !important;
font-weight: 450 !important;
line-height: 1.5 !important;
overflow-wrap: anywhere !important;
}
.combined-selection__empty {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
min-height: 98px !important;
padding: 20px !important;
color: var(--muted) !important;
text-align: center !important;
}
.combined-selection__empty > span { color: var(--brand-primary) !important; font-size: 1.25rem !important; }
.combined-selection__empty > p { margin: 0 !important; color: inherit !important; font-size: .82rem !important; }
.pick-summary {
display: grid !important;
grid-template-columns: minmax(125px, .65fr) minmax(240px, 1.35fr) minmax(240px, 1fr) !important;
gap: 12px !important;
margin-top: 14px !important;
}
.pick-summary__odds, .prediction-card .copy-pick--v25, .prediction-card .countdown-block {
min-height: 78px !important;
margin: 0 !important;
border: 1px solid var(--page-border) !important;
border-radius: 15px !important;
background: color-mix(in srgb, var(--page-bg) 34%, var(--surface)) !important;
box-shadow: none !important;
}
.pick-summary__odds {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding: 13px 16px !important;
}
.pick-summary__odds small, .prediction-card .copy-pick__label, .prediction-card .countdown-label {
color: var(--muted) !important;
font-size: .57rem !important;
font-weight: 900 !important;
letter-spacing: .12em !important;
}
.pick-summary__odds strong {
margin-top: 5px !important;
color: var(--brand-primary) !important;
font-size: 1.34rem !important;
font-weight: 900 !important;
}
.prediction-card .copy-pick--v25 {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-rows: auto auto !important;
place-items: initial !important;
align-content: center !important;
gap: 4px 12px !important;
padding: 12px 16px !important;
color: var(--text) !important;
text-align: left !important;
}
.prediction-card .copy-pick--v25:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--brand-primary) 44%, var(--page-border)) !important;
transform: translateY(-1px) !important;
}
.prediction-card .copy-pick--v25 b {
min-width: 0 !important;
overflow: hidden !important;
color: var(--text) !important;
font-size: .9rem !important;
font-weight: 800 !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.prediction-card .copy-pick--v25 .copy-pick__action {
grid-column: 2 !important;
grid-row: 1 / span 2 !important;
align-self: center !important;
padding: 7px 9px !important;
border-radius: 8px !important;
background: color-mix(in srgb, var(--brand-primary) 13%, transparent) !important;
color: var(--brand-primary) !important;
font-size: .58rem !important;
font-weight: 900 !important;
letter-spacing: .08em !important;
}
.prediction-card .countdown-block {
display: grid !important;
grid-template-columns: auto 1fr !important;
align-items: center !important;
gap: 13px !important;
padding: 12px 15px !important;
}
.prediction-card .countdown {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 7px !important;
}
.prediction-card .countdown > div { display: grid !important; justify-items: center !important; }
.prediction-card .countdown strong { font-size: 1.04rem !important; line-height: 1 !important; }
.prediction-card .countdown small { margin-top: 4px !important; color: var(--muted) !important; font-size: .49rem !important; letter-spacing: .06em !important; }
.prediction-card .countdown i { color: var(--page-border) !important; font-style: normal !important; }
/* Formularios, credenciales, metodología y ganadores */
.suggestions-shell { align-items: stretch !important; }
.suggestion-form {
display: grid !important;
min-height: 100% !important;
align-content: center !important;
padding: clamp(34px, 4.5vw, 62px) !important;
}
.credential-copy {
border-color: rgba(178,190,226,.16) !important;
background: #0b1020 !important;
color: #f6f7ff !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.credential-copy__label { color: #9da8c4 !important; }
.credential-copy strong { color: #f6f7ff !important; text-shadow: none !important; }
.credential-copy__icon { color: #59e0bf !important; }
.methodology-shell { gap: 18px !important; }
.methodology-card {
position: relative !important;
display: block !important;
min-width: 0 !important;
min-height: 242px !important;
padding: 30px 30px 30px 96px !important;
overflow: hidden !important;
border-radius: 24px !important;
background: linear-gradient(145deg, color-mix(in srgb, var(--brand-accent) 6%, var(--surface)), var(--surface) 60%) !important;
}
.methodology-card::after {
content: "" !important;
position: absolute !important;
inset: 0 auto 0 0 !important;
width: 4px !important;
background: linear-gradient(var(--brand-primary), var(--brand-accent)) !important;
}
.methodology-card__index {
left: 28px !important;
top: 31px !important;
width: 48px !important;
height: 48px !important;
border-radius: 16px !important;
font-weight: 900 !important;
}
.methodology-card > small, .methodology-card > h2, .methodology-card > p {
display: block !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
.methodology-card > small {
color: var(--brand-primary) !important;
font-size: .62rem !important;
font-weight: 900 !important;
letter-spacing: .14em !important;
}
.methodology-card > h2 {
margin: 11px 0 12px !important;
font-size: clamp(1.08rem, 2vw, 1.34rem) !important;
line-height: 1.26 !important;
text-transform: none !important;
}
.methodology-card > p {
margin: 0 !important;
font-size: .9rem !important;
line-height: 1.72 !important;
}
.winner-public-grid {
width: min(1180px, 100%) !important;
margin-inline: auto !important;
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
gap: 20px !important;
}
.winner-public-grid.is-single { grid-template-columns: minmax(0, 1fr) !important; }
.winner-public-card {
display: grid !important;
grid-template-columns: minmax(250px, .92fr) minmax(0, 1.08fr) !important;
min-height: 350px !important;
padding: 16px !important;
border-radius: 26px !important;
}
.winner-public-card__image {
min-height: 318px !important;
display: grid !important;
place-items: center !important;
overflow: hidden !important;
border: 1px solid var(--page-border) !important;
border-radius: 19px !important;
background: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--brand-accent) 15%, transparent), transparent 19rem), color-mix(in srgb, var(--page-bg) 46%, var(--surface)) !important;
}
.winner-public-card__image img {
width: 100% !important;
height: 100% !important;
max-height: 410px !important;
object-fit: contain !important;
border: 0 !important;
border-radius: 14px !important;
background: transparent !important;
}
.winner-public-card__body {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
padding: clamp(26px, 4vw, 54px) !important;
border: 0 !important;
background: transparent !important;
}
.winner-public-card__badge { display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.winner-public-card__badge > span { display: grid !important; place-items: center !important; width: 28px !important; height: 28px !important; border-radius: 9px !important; background: color-mix(in srgb, var(--brand-primary) 12%, transparent) !important; color: var(--brand-primary) !important; }
.winner-public-card__badge small { color: var(--brand-primary) !important; font-size: .63rem !important; font-weight: 900 !important; letter-spacing: .13em !important; }
.winner-public-card__body h2 { margin: 17px 0 9px !important; font-size: clamp(1.55rem, 4vw, 2.5rem) !important; line-height: 1.1 !important; }
.winner-public-card__id { padding: 7px 10px !important; border: 1px solid var(--page-border) !important; border-radius: 999px !important; color: var(--muted) !important; background: color-mix(in srgb, var(--page-bg) 35%, var(--surface)) !important; font-size: .67rem !important; letter-spacing: .07em !important; }
.winner-public-card__prize { width: 100% !important; margin-top: 22px !important; padding: 16px 18px !important; border: 1px solid color-mix(in srgb, var(--brand-accent) 22%, var(--page-border)) !important; border-radius: 15px !important; background: linear-gradient(110deg, color-mix(in srgb, var(--brand-accent) 9%, transparent), transparent) !important; }
.winner-public-card__prize small { display: block !important; color: var(--muted) !important; font-size: .58rem !important; font-weight: 850 !important; letter-spacing: .12em !important; }
.winner-public-card__prize strong { display: block !important; margin-top: 5px !important; color: var(--text) !important; font-size: 1rem !important; }
.winner-public-card__body > p { margin: 17px 0 0 !important; line-height: 1.65 !important; }
html[data-theme="light"] body > header .theme-toggle { background: #fff !important; border-color: rgba(41,48,80,.14) !important; box-shadow: 0 8px 22px rgba(36,43,73,.09) !important; }
html[data-theme="light"] .combined-selection,
html[data-theme="light"] .pick-summary__odds,
html[data-theme="light"] .prediction-card .copy-pick--v25,
html[data-theme="light"] .prediction-card .countdown-block { border-color: rgba(41,48,80,.13) !important; background: #f6f8fb !important; color: #171b2e !important; }
html[data-theme="light"] .combined-selection__head { border-color: rgba(41,48,80,.13) !important; background: linear-gradient(90deg, rgba(9,140,115,.07), rgba(103,87,214,.05)) !important; }
html[data-theme="light"] .combined-selection__head h2,
html[data-theme="light"] .combined-leg > strong,
html[data-theme="light"] .prediction-card .copy-pick--v25 b,
html[data-theme="light"] .winner-public-card__prize strong { color: #171b2e !important; }
html[data-theme="light"] .combined-leg + .combined-leg { border-color: rgba(41,48,80,.13) !important; }
html[data-theme="light"] .credential-copy { border-color: rgba(41,48,80,.14) !important; background: #eef2f7 !important; color: #171b2e !important; }
html[data-theme="light"] .credential-copy__label { color: #65708a !important; }
html[data-theme="light"] .credential-copy strong { color: #171b2e !important; }
html[data-theme="light"] .credential-copy__icon { color: #087a65 !important; }
html[data-theme="light"] .methodology-card { background: linear-gradient(145deg, rgba(103,87,214,.045), #fff 62%) !important; }
html[data-theme="light"] .winner-public-card__image { border-color: rgba(41,48,80,.12) !important; background: radial-gradient(circle at 50% 20%, rgba(103,87,214,.08), transparent 19rem), #f3f5fa !important; }
html[data-theme="light"] .winner-public-card__id { border-color: rgba(41,48,80,.12) !important; background: #f3f5fa !important; color: #606a83 !important; }
@media (max-width: 820px) {
body > header .theme-toggle { width: 42px !important; min-width: 42px !important; padding: 4px !important; justify-content: center !important; }
.theme-toggle__label { display: none !important; }
.pick-context { grid-template-columns: 1fr !important; gap: 8px !important; }
.pick-summary { grid-template-columns: 1fr 1fr !important; }
.pick-summary__odds { grid-column: 1 !important; }
.prediction-card .copy-pick--v25 { grid-column: 2 !important; }
.prediction-card .countdown-block { grid-column: 1 / -1 !important; }
.suggestion-form { padding: 28px 22px !important; }
.winner-public-card { grid-template-columns: 1fr !important; }
.winner-public-card__image { min-height: 250px !important; }
.winner-public-card__body { padding: 26px 18px 20px !important; }
}
@media (max-width: 560px) {
.prediction-card.prediction-card--v17 { padding: 19px 15px !important; border-radius: 20px !important; }
.combined-selection__head { align-items: flex-start !important; padding: 15px !important; }
.combined-selection__head > span { font-size: .54rem !important; }
.combined-selection__grid { grid-template-columns: 1fr !important; padding: 0 !important; }
.combined-leg { padding: 18px 16px !important; }
.combined-leg + .combined-leg { border-left: 0 !important; border-top: 1px solid var(--page-border) !important; }
.pick-summary { grid-template-columns: 1fr !important; }
.pick-summary__odds, .prediction-card .copy-pick--v25, .prediction-card .countdown-block { grid-column: 1 !important; }
.methodology-card { min-height: 0 !important; padding: 80px 20px 24px !important; }
.methodology-card__index { left: 20px !important; top: 20px !important; }
.winner-public-card { padding: 10px !important; }
.winner-public-card__image { min-height: 220px !important; }
}
/* Nekon HUB · Corrección compacta y contraste integral v25.2 */
.prediction-card--v17::after,
.prediction-card .corner { display: none !important; content: none !important; }
.prediction-card.prediction-card--v17 {
width: 100% !important;
min-height: 0 !important;
padding: 20px !important;
overflow: hidden !important;
border-radius: 20px !important;
}
.prediction-card.prediction-card--v17::before {
left: 16px !important;
right: 16px !important;
top: 0 !important;
height: 2px !important;
padding: 0 !important;
border-radius: 0 0 8px 8px !important;
-webkit-mask: none !important;
mask: none !important;
background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)) !important;
}
.prediction-grid { width: min(1080px, 100%) !important; }
.prediction-card .pick-card-head { margin-bottom: 12px !important; }
.prediction-card .pick-number, .prediction-card .pick-rank { padding: 6px 10px !important; }
.pick-context {
grid-template-columns: minmax(170px, auto) minmax(0, 1fr) !important;
gap: 12px 20px !important;
margin-bottom: 14px !important;
padding-bottom: 14px !important;
}
.combined-selection { border-radius: 15px !important; }
.combined-selection__head { padding: 12px 15px !important; }
.combined-selection__head small { margin-bottom: 2px !important; }
.combined-selection__head h2 { font-size: 1.02rem !important; }
.combined-selection__grid { padding: 0 !important; }
.combined-leg { padding: 15px 18px !important; }
.combined-leg > small { margin-bottom: 6px !important; }
.combined-leg > strong { font-size: .96rem !important; }
.combined-leg > span { margin-top: 9px !important; }
.combined-leg > p { margin-top: 7px !important; font-size: .79rem !important; }
.combined-leg > strong + p { margin-top: 8px !important; }
.combined-selection__empty { min-height: 70px !important; padding: 14px !important; }
.pick-summary {
display: grid !important;
grid-template-columns: 125px minmax(200px, 1fr) 255px !important;
gap: 0 !important;
margin-top: 10px !important;
overflow: hidden !important;
border: 1px solid var(--page-border) !important;
border-radius: 14px !important;
background: color-mix(in srgb, var(--page-bg) 30%, var(--surface)) !important;
}
.pick-summary__odds,
.prediction-card .copy-pick--v25,
.prediction-card .countdown-block {
min-height: 62px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
.prediction-card .copy-pick--v25,
.prediction-card .countdown-block { border-left: 1px solid var(--page-border) !important; }
.pick-summary__odds { padding: 9px 14px !important; }
.pick-summary__odds strong { margin-top: 3px !important; font-size: 1.18rem !important; }
.prediction-card .copy-pick--v25 { padding: 9px 14px !important; }
.prediction-card .copy-pick--v25 b { font-size: .82rem !important; }
.prediction-card .copy-pick--v25 .copy-pick__action { padding: 6px 8px !important; }
.prediction-card .countdown-block { gap: 10px !important; padding: 9px 14px !important; }
.prediction-card .countdown { gap: 5px !important; }
.prediction-card .countdown strong { font-size: .94rem !important; }
/* Ganadores listos para crecer sin tarjetas gigantes. */
.winner-public-grid,
.winner-public-grid.is-single {
width: min(1120px, 100%) !important;
grid-template-columns: repeat(auto-fit, minmax(260px, 340px)) !important;
justify-content: center !important;
gap: 16px !important;
}
.winner-public-card {
width: 100% !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
padding: 10px !important;
border-radius: 20px !important;
}
.winner-public-card__image {
width: 100% !important;
min-height: 0 !important;
height: 185px !important;
border-radius: 14px !important;
}
.winner-public-card__image img {
width: 100% !important;
height: 100% !important;
max-height: none !important;
padding: 8px !important;
object-fit: contain !important;
}
.winner-public-card__body {
min-height: 0 !important;
display: block !important;
padding: 18px 14px 15px !important;
}
.winner-public-card__badge > span { width: 25px !important; height: 25px !important; }
.winner-public-card__body h2 { margin: 12px 0 7px !important; font-size: 1.35rem !important; }
.winner-public-card__id { display: inline-flex !important; padding: 5px 8px !important; }
.winner-public-card__prize { margin-top: 14px !important; padding: 11px 12px !important; border-radius: 12px !important; }
.winner-public-card__prize strong { font-size: .9rem !important; }
.winner-public-card__body > p { margin-top: 12px !important; font-size: .78rem !important; line-height: 1.55 !important; }
/* Cuentas gratis: se conserva la tarjeta y se sustituyen solo las credenciales. */
html[data-theme="dark"] #cuentas-gratis .benefit-account-card .credential-copy {
min-height: 58px !important;
border: 1px solid rgba(178,190,226,.16) !important;
background: #090e1c !important;
color: #f6f7ff !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
html[data-theme="dark"] #cuentas-gratis .benefit-account-card .credential-copy__label { color: #9da8c4 !important; }
html[data-theme="dark"] #cuentas-gratis .benefit-account-card .credential-copy strong { color: #ffffff !important; text-shadow: none !important; }
html[data-theme="dark"] #cuentas-gratis .benefit-account-card .credential-copy__icon { color: #59e0bf !important; opacity: 1 !important; }
html[data-theme="light"] #cuentas-gratis .benefit-account-card .credential-copy {
min-height: 58px !important;
border: 1px solid rgba(41,48,80,.16) !important;
background: #edf2f7 !important;
color: #171b2e !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}
html[data-theme="light"] #cuentas-gratis .benefit-account-card .credential-copy__label { color: #52617a !important; }
html[data-theme="light"] #cuentas-gratis .benefit-account-card .credential-copy strong { color: #11182b !important; text-shadow: none !important; }
html[data-theme="light"] #cuentas-gratis .benefit-account-card .credential-copy__icon { color: #087a65 !important; opacity: 1 !important; }
/* Sugerencias sin contenedor exterior vacío. */
.suggestions-shell {
width: min(1180px, calc(100% - 32px)) !important;
margin-top: 26px !important;
padding: 0 !important;
align-items: stretch !important;
gap: 18px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.suggestions-intro, .suggestion-form { min-height: 500px !important; }
.suggestions-intro {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding: clamp(30px, 4vw, 48px) !important;
}
.suggestions-intro h2 { margin: 38px 0 17px !important; font-size: clamp(2.35rem, 4vw, 3.6rem) !important; }
.suggestion-form {
align-content: center !important;
align-self: stretch !important;
padding: clamp(30px, 4vw, 48px) !important;
}
/* Tema claro: cada familia de superficie declara su propio contraste. */
html[data-theme="light"] main,
html[data-theme="light"] main > .view { color: #171b2e !important; }
html[data-theme="light"] .app-promo {
border-color: rgba(41,48,80,.13) !important;
background: radial-gradient(circle at 12% 18%, rgba(103,87,214,.08), transparent 24rem), radial-gradient(circle at 88% 82%, rgba(9,140,115,.07), transparent 24rem), #ffffff !important;
color: #171b2e !important;
box-shadow: 0 16px 42px rgba(36,43,73,.10) !important;
}
html[data-theme="light"] .app-promo__copy h2 { color: #171b2e !important; text-shadow: none !important; }
html[data-theme="light"] .app-promo__copy > small { color: #087a65 !important; }
html[data-theme="light"] .app-promo__copy > p,
html[data-theme="light"] .app-promo__status { color: #606a83 !important; }
html[data-theme="light"] .app-promo__platforms button {
border-color: rgba(41,48,80,.14) !important;
background: #f5f7fb !important;
color: #171b2e !important;
}
html[data-theme="light"] .app-promo__platforms button small { color: #65708a !important; }
html[data-theme="light"] .app-promo__platforms button strong { color: #171b2e !important; }
html[data-theme="light"] .app-promo__platforms button > span { color: #087a65 !important; }
html[data-theme="light"] .suggestions-intro {
border-color: #262d50 !important;
background: radial-gradient(circle at 0 0, rgba(89,224,191,.12), transparent 22rem), linear-gradient(145deg, #272d50, #171c36) !important;
color: #ffffff !important;
}
html[data-theme="light"] .suggestions-intro h2 { color: #ffffff !important; text-shadow: none !important; }
html[data-theme="light"] .suggestions-intro p { color: #c3cbe0 !important; }
html[data-theme="light"] .suggestions-intro small { color: #7de7cd !important; }
html[data-theme="light"] .suggestions-intro__number { color: rgba(255,255,255,.055) !important; }
html[data-theme="light"] .suggestion-form { border-color: rgba(41,48,80,.13) !important; background: #ffffff !important; }
html[data-theme="light"] .pick-summary { border-color: rgba(41,48,80,.13) !important; background: #f6f8fb !important; }
html[data-theme="light"] .prediction-card .copy-pick--v25,
html[data-theme="light"] .prediction-card .countdown-block { border-left-color: rgba(41,48,80,.13) !important; }
html[data-theme="light"] .prediction-card .copy-pick--v25 { color: #171b2e !important; background: transparent !important; }
html[data-theme="light"] .prediction-card .copy-pick--v25 b { color: #171b2e !important; }
html[data-theme="light"] .prediction-card .copy-pick--v25 .copy-pick__label { color: #65708a !important; }
html[data-theme="light"] .member-panel,
html[data-theme="light"] .ranking-panel,
html[data-theme="light"] .ticket-summary-grid article,
html[data-theme="light"] .profile-static-field,
html[data-theme="light"] .member-ticket,
html[data-theme="light"] .member-status-item,
html[data-theme="light"] .ranking-row,
html[data-theme="light"] .member-gate-card,
html[data-theme="light"] .referral-share-card,
html[data-theme="light"] .referral-stats-card,
html[data-theme="light"] .bank-account-card,
html[data-theme="light"] .selected-platform-heading,
html[data-theme="light"] .streaming-platform-tabs,
html[data-theme="light"] .premium-card,
html[data-theme="light"] .premium-product-card,
html[data-theme="light"] .premium-shop-card,
html[data-theme="light"] .premium-sale-banner {
border-color: rgba(41,48,80,.13) !important;
background-color: #ffffff !important;
color: #171b2e !important;
box-shadow: 0 10px 28px rgba(36,43,73,.08) !important;
}
html[data-theme="light"] .member-panel h2,
html[data-theme="light"] .member-panel h3,
html[data-theme="light"] .member-panel strong,
html[data-theme="light"] .ranking-panel h2,
html[data-theme="light"] .ranking-row strong,
html[data-theme="light"] .selected-platform-heading h2,
html[data-theme="light"] .premium-card h2,
html[data-theme="light"] .premium-card h3,
html[data-theme="light"] .premium-product-card h2,
html[data-theme="light"] .premium-product-card h3 { color: #171b2e !important; text-shadow: none !important; }
html[data-theme="light"] .member-panel p,
html[data-theme="light"] .member-panel small,
html[data-theme="light"] .ranking-panel p,
html[data-theme="light"] .ranking-panel small,
html[data-theme="light"] .selected-platform-heading p,
html[data-theme="light"] .premium-card p,
html[data-theme="light"] .premium-product-card p { color: #606a83 !important; }
html[data-theme="light"] .premium-card__body,
html[data-theme="light"] .premium-product-body,
html[data-theme="light"] .premium-shop-card__body { background: #ffffff !important; color: #171b2e !important; }
html[data-theme="light"] .member-form input,
html[data-theme="light"] .member-form select,
html[data-theme="light"] .member-form textarea,
html[data-theme="light"] .member-copy-row input,
html[data-theme="light"] .premium-checkout-grid input,
html[data-theme="light"] .premium-checkout-grid select,
html[data-theme="light"] .premium-receipt-field input {
border-color: rgba(41,48,80,.18) !important;
background: #f6f8fb !important;
color: #171b2e !important;
}
html[data-theme="light"] .member-form label > span,
html[data-theme="light"] .premium-checkout-grid label > span,
html[data-theme="light"] .premium-receipt-field > span { color: #242a42 !important; }
@media (max-width: 820px) {
.prediction-grid { width: min(100% - 20px, 680px) !important; }
.prediction-card.prediction-card--v17 { padding: 16px !important; }
.pick-context { grid-template-columns: 1fr !important; gap: 5px !important; margin-bottom: 11px !important; padding-bottom: 11px !important; }
.combined-selection__head { padding: 11px 12px !important; }
.combined-leg { padding: 13px 14px !important; }
.pick-summary { grid-template-columns: 105px minmax(0,1fr) !important; }
.pick-summary__odds, .prediction-card .copy-pick--v25 { grid-column: auto !important; }
.prediction-card .countdown-block { grid-column: 1 / -1 !important; border-left: 0 !important; border-top: 1px solid var(--page-border) !important; }
.winner-public-grid, .winner-public-grid.is-single { grid-template-columns: repeat(auto-fit, minmax(245px, 320px)) !important; }
.suggestions-shell { grid-template-columns: 1fr !important; width: min(100% - 20px, 680px) !important; }
.suggestions-intro, .suggestion-form { min-height: 0 !important; }
.suggestions-intro { padding: 28px 24px !important; }
.suggestions-intro h2 { margin: 26px 0 14px !important; font-size: clamp(2rem, 10vw, 3rem) !important; }
.suggestion-form { padding: 25px 22px !important; }
}
@media (max-width: 520px) {
.prediction-card.prediction-card--v17 { padding: 14px 12px !important; border-radius: 17px !important; }
.combined-selection__head > span { display: none !important; }
.combined-leg + .combined-leg { border-top-color: var(--page-border) !important; }
.pick-summary { grid-template-columns: 92px minmax(0,1fr) !important; }
.pick-summary__odds, .prediction-card .copy-pick--v25, .prediction-card .countdown-block { min-height: 58px !important; }
.prediction-card .copy-pick--v25 { padding-inline: 10px !important; }
.prediction-card .copy-pick--v25 .copy-pick__action { padding: 5px 6px !important; font-size: .52rem !important; }
.prediction-card .countdown-block { padding: 8px 10px !important; }
.winner-public-grid, .winner-public-grid.is-single { grid-template-columns: 1fr !important; width: min(100% - 20px, 360px) !important; }
.winner-public-card__image { height: 170px !important; }
.suggestion-form { grid-template-columns: 1fr !important; }
.suggestion-form label, .suggestion-form__wide, .suggestion-feedback, .suggestion-submit { grid-column: 1 !important; }
}
/* Nekon HUB · Picks realmente compactos y ganadores alineados v25.3 */
.prediction-grid {
width: min(820px, 100%) !important;
gap: 12px !important;
}
.prediction-card.prediction-card--v17 {
padding: 14px 16px !important;
border-radius: 16px !important;
}
.prediction-card.prediction-card--v17::before {
left: 14px !important;
right: 14px !important;
}
.prediction-card .pick-card-head {
margin-bottom: 8px !important;
}
.prediction-card .pick-number,
.prediction-card .pick-rank {
padding: 4px 8px !important;
font-size: .58rem !important;
}
.pick-context {
grid-template-columns: minmax(142px, auto) minmax(0, 1fr) !important;
gap: 8px 12px !important;
margin-bottom: 9px !important;
padding-bottom: 9px !important;
}
.pick-context > span {
font-size: .58rem !important;
}
.pick-context > p {
display: -webkit-box !important;
overflow: hidden !important;
font-size: .72rem !important;
line-height: 1.4 !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
}
.combined-selection {
border-radius: 11px !important;
}
.combined-selection__head {
gap: 10px !important;
padding: 8px 11px !important;
}
.combined-selection__head small {
margin-bottom: 1px !important;
font-size: .48rem !important;
}
.combined-selection__head h2 {
font-size: .82rem !important;
}
.combined-selection__head > span {
padding: 4px 7px !important;
font-size: .48rem !important;
}
.combined-leg {
min-height: 58px !important;
padding: 10px 12px !important;
}
.combined-leg > small {
margin-bottom: 4px !important;
font-size: .48rem !important;
}
.combined-leg > strong {
font-size: .79rem !important;
line-height: 1.3 !important;
}
.combined-leg > span {
margin-top: 6px !important;
padding: 3px 5px !important;
font-size: .46rem !important;
}
.combined-leg > p,
.combined-leg > strong + p {
margin-top: 4px !important;
font-size: .67rem !important;
line-height: 1.35 !important;
}
.combined-selection__empty {
min-height: 52px !important;
padding: 10px !important;
}
.pick-summary {
width: fit-content !important;
max-width: 100% !important;
display: flex !important;
align-items: stretch !important;
gap: 7px !important;
margin-top: 8px !important;
overflow: visible !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
.pick-summary__odds,
.prediction-card .copy-pick--v25,
.prediction-card .countdown-block {
min-height: 46px !important;
border: 1px solid var(--page-border) !important;
border-radius: 9px !important;
background: color-mix(in srgb, var(--page-bg) 30%, var(--surface)) !important;
}
.pick-summary__odds {
flex: 0 0 82px !important;
width: 82px !important;
padding: 6px 10px !important;
}
.pick-summary__odds small,
.prediction-card .copy-pick__label,
.prediction-card .countdown-label {
font-size: .47rem !important;
}
.pick-summary__odds strong {
margin-top: 2px !important;
font-size: 1rem !important;
}
.prediction-card .copy-pick--v25 {
flex: 0 1 160px !important;
width: 160px !important;
padding: 6px 8px 6px 10px !important;
border-left: 1px solid var(--page-border) !important;
gap: 2px 7px !important;
}
.prediction-card .copy-pick--v25 b {
font-size: .7rem !important;
}
.prediction-card .copy-pick--v25 .copy-pick__action {
padding: 4px 6px !important;
font-size: .45rem !important;
}
.prediction-card .countdown-block {
flex: 0 0 210px !important;
width: 210px !important;
gap: 8px !important;
padding: 6px 10px !important;
border-left: 1px solid var(--page-border) !important;
}
.prediction-card .countdown {
gap: 4px !important;
}
.prediction-card .countdown div {
min-width: 31px !important;
}
.prediction-card .countdown strong {
font-size: .76rem !important;
}
.prediction-card .countdown small {
margin-top: 1px !important;
font-size: .34rem !important;
}
.prediction-card .countdown i {
font-size: .65rem !important;
}
@media (min-width: 1050px) {
.prediction-grid {
width: min(1080px, 100%) !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (min-width: 821px) {
.winner-public-grid,
.winner-public-grid.is-single {
width: min(1320px, 100%) !important;
grid-template-columns: repeat(auto-fill, minmax(260px, 340px)) !important;
justify-content: start !important;
}
}
@media (max-width: 820px) {
.prediction-grid {
width: min(100% - 16px, 680px) !important;
}
.prediction-card.prediction-card--v17 {
padding: 13px !important;
}
.pick-summary {
width: 100% !important;
display: grid !important;
grid-template-columns: 82px minmax(0, 1fr) !important;
gap: 6px !important;
}
.pick-summary__odds,
.prediction-card .copy-pick--v25,
.prediction-card .countdown-block {
width: auto !important;
min-height: 45px !important;
}
.pick-summary__odds {
grid-column: 1 !important;
}
.prediction-card .copy-pick--v25 {
grid-column: 2 !important;
}
.prediction-card .countdown-block {
grid-column: 1 / -1 !important;
justify-content: start !important;
}
.winner-public-grid,
.winner-public-grid.is-single {
justify-content: center !important;
}
}
@media (max-width: 520px) {
.prediction-grid {
width: calc(100% - 12px) !important;
}
.prediction-card.prediction-card--v17 {
padding: 12px 10px !important;
}
.pick-context {
grid-template-columns: 1fr !important;
}
.combined-selection__head {
padding: 8px 10px !important;
}
.combined-leg {
min-height: 0 !important;
padding: 9px 10px !important;
}
}
html[data-theme="light"] .pick-summary__odds,
html[data-theme="light"] .prediction-card .copy-pick--v25,
html[data-theme="light"] .prediction-card .countdown-block {
border-color: rgba(41,48,80,.13) !important;
background: #f6f8fb !important;
}
/* Nekon HUB · Navegación y portada móvil v25.4 */
.mobile-header-whatsapp {
display: none;
}
@media (min-width: 821px) {
.premium-support-float:not([hidden]) {
bottom: 92px !important;
}
}
@media (max-width: 820px) {
html {
scroll-padding-bottom: calc(102px + env(safe-area-inset-bottom));
}
body {
overflow-x: hidden;
padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
body > header {
position: sticky !important;
top: 0 !important;
z-index: 1200 !important;
width: 100% !important;
height: 66px !important;
min-height: 66px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 0 11px !important;
box-sizing: border-box !important;
}
body > header #open-menu,
body > header .member-account-wrap {
display: none !important;
}
body > header .brand {
min-width: 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}
body > header .brand img {
flex: 0 0 40px !important;
width: 40px !important;
height: 40px !important;
}
body > header .brand > span {
display: block !important;
color: var(--text) !important;
font-size: .56rem !important;
font-weight: 800 !important;
line-height: 1.12 !important;
letter-spacing: .13em !important;
text-align: left !important;
white-space: nowrap !important;
}
body > header .brand > span b {
color: var(--brand-primary) !important;
font-size: 1.18em !important;
}
body > header .header-actions {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
margin-left: auto !important;
}
.mobile-header-whatsapp {
width: 40px;
height: 40px;
flex: 0 0 40px;
display: grid;
place-items: center;
box-sizing: border-box;
border: 1px solid color-mix(in srgb, #22d36d 42%, var(--page-border));
border-radius: 13px;
background: color-mix(in srgb, #22d36d 12%, var(--surface));
color: #31dd7a;
text-decoration: none;
box-shadow: 0 8px 20px rgba(2, 16, 10, .16);
}
.mobile-header-whatsapp[hidden] {
display: none !important;
}
.mobile-header-whatsapp svg {
width: 22px;
height: 22px;
fill: currentColor;
}
body > header .notification-bell,
body > header .theme-toggle {
flex: 0 0 40px !important;
width: 40px !important;
min-width: 40px !important;
height: 40px !important;
margin: 0 !important;
padding: 4px !important;
transform: none !important;
}
body > header .notification-bell__glyph,
body > header .theme-toggle__sun,
body > header .theme-toggle__moon {
width: 30px !important;
height: 30px !important;
}
main {
padding-top: 0 !important;
}
main > .view {
min-height: calc(100svh - 66px) !important;
}
.home {
padding: 10px 10px calc(104px + env(safe-area-inset-bottom)) !important;
}
.home .hero,
.home .hero.hero--dynamic,
#inicio .hero,
#inicio .hero.hero--dynamic {
width: 100% !important;
min-height: 0 !important;
display: block !important;
padding: 36px 22px 38px !important;
box-sizing: border-box !important;
border-radius: 23px !important;
background:
linear-gradient(180deg, rgba(5,8,19,.30) 0%, rgba(5,8,19,.76) 37%, rgba(5,8,19,.98) 82%),
url("assets/hero/nekon-hub-arena-v25.webp") 68% center/cover no-repeat !important;
}
.home .hero-copy {
width: 100% !important;
max-width: 560px !important;
}
.home .hero-copy .eyebrow {
min-height: 30px !important;
padding-inline: 11px !important;
font-size: .53rem !important;
letter-spacing: .13em !important;
}
.home .hero-copy h1,
#inicio .hero h1 {
margin: 22px 0 17px !important;
font-size: clamp(42px, 12.2vw, 57px) !important;
line-height: .91 !important;
letter-spacing: -.06em !important;
}
.home .hero p,
#inicio .hero p {
max-width: 34rem !important;
font-size: .82rem !important;
line-height: 1.55 !important;
}
.home .hero .actions {
width: 100% !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 9px !important;
margin-top: 22px !important;
}
.home .hero .actions button {
width: 100% !important;
min-width: 0 !important;
min-height: 50px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 17px !important;
box-sizing: border-box !important;
text-align: left !important;
}
.home .arena-hero-panel {
display: none !important;
}
.arena-bottom-nav,
.arena-bottom-nav.is-guest {
position: fixed !important;
z-index: 1190 !important;
left: 8px !important;
right: 8px !important;
bottom: calc(8px + env(safe-area-inset-bottom)) !important;
width: auto !important;
height: 76px !important;
min-height: 76px !important;
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
align-items: stretch !important;
gap: 2px !important;
margin: 0 !important;
padding: 6px !important;
box-sizing: border-box !important;
border-radius: 22px !important;
overflow: hidden !important;
transform: translate3d(0, 0, 0) !important;
-webkit-transform: translate3d(0, 0, 0) !important;
will-change: transform;
contain: layout paint style;
}
.arena-bottom-nav button,
.arena-bottom-nav.is-guest button {
min-width: 0 !important;
min-height: 62px !important;
height: 62px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
padding: 4px 2px !important;
box-sizing: border-box !important;
border-radius: 16px !important;
touch-action: manipulation;
}
.arena-bottom-nav button svg {
flex: 0 0 21px !important;
width: 21px !important;
height: 21px !important;
}
.arena-bottom-nav button > span {
width: 100% !important;
max-width: none !important;
min-height: 20px !important;
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
overflow: visible !important;
color: inherit !important;
font-size: clamp(.48rem, 2.2vw, .58rem) !important;
font-weight: 820 !important;
line-height: 1.05 !important;
letter-spacing: 0 !important;
text-align: center !important;
text-overflow: clip !important;
white-space: normal !important;
overflow-wrap: normal !important;
}
.whatsapp-float {
display: none !important;
}
.premium-support-float:not([hidden]) {
z-index: 1185 !important;
right: 11px !important;
bottom: calc(94px + env(safe-area-inset-bottom)) !important;
display: flex !important;
padding: 5px 5px 5px 11px !important;
gap: 7px !important;
border-radius: 15px !important;
}
.premium-support-float__label {
font-size: .62rem !important;
}
.premium-support-float__icon {
width: 38px !important;
height: 38px !important;
}
#rechargeBank,
#premiumPaymentMethod,
#rechargeBank option,
#premiumPaymentMethod option {
font-size: 16px !important;
white-space: nowrap !important;
}
footer {
padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
}
}
@media (max-width: 390px) {
body > header {
padding-inline: 9px !important;
}
body > header .brand img {
flex-basis: 37px !important;
width: 37px !important;
height: 37px !important;
}
body > header .brand > span {
font-size: .51rem !important;
}
.mobile-header-whatsapp,
body > header .notification-bell,
body > header .theme-toggle {
flex-basis: 38px !important;
width: 38px !important;
min-width: 38px !important;
height: 38px !important;
}
.home .hero,
#inicio .hero {
padding-inline: 19px !important;
}
.home .hero-copy h1,
#inicio .hero h1 {
font-size: clamp(40px, 11.8vw, 50px) !important;
}
.arena-bottom-nav,
.arena-bottom-nav.is-guest {
left: 6px !important;
right: 6px !important;
}
.arena-bottom-nav button > span {
font-size: .47rem !important;
}
}
/* Nekon HUB · Refinamiento integral v25.6 */
.nekon-native-select {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
overflow: hidden !important;
white-space: nowrap !important;
opacity: 0 !important;
}
.nekon-select-control {
width: 100%;
min-width: 0;
}
.nekon-select-trigger {
width: 100%;
min-width: 0;
min-height: 48px;
display: grid;
grid-template-columns: minmax(0, 1fr) 22px;
align-items: center;
gap: 10px;
padding: 0 14px;
border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, var(--page-border));
border-radius: 13px;
background: color-mix(in srgb, var(--surface) 91%, var(--brand-primary));
color: var(--page-muted);
font: inherit;
font-weight: 760;
text-align: left;
cursor: pointer;
box-sizing: border-box;
box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.nekon-select-trigger.has-value { color: var(--page-text); }
.nekon-select-trigger:is(:hover, :focus-visible),
.nekon-select-trigger[aria-expanded="true"] {
border-color: var(--brand-primary);
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 15%, transparent);
}
.nekon-select-trigger.is-invalid { border-color: #ff737d; }
.nekon-select-trigger span {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nekon-select-trigger svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.nekon-select-dialog {
width: min(520px, calc(100vw - 28px));
max-height: min(660px, calc(100dvh - 36px));
padding: 0;
border: 1px solid color-mix(in srgb, var(--brand-primary) 35%, var(--page-border));
border-radius: 22px;
background: var(--surface);
color: var(--page-text);
box-shadow: 0 32px 90px rgba(0,0,0,.55);
overflow: hidden;
}
.nekon-select-dialog::backdrop {
background: rgba(3,5,15,.78);
backdrop-filter: blur(8px);
}
.nekon-select-sheet { display: grid; max-height: inherit; }
.nekon-select-sheet > header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 18px 14px;
border-bottom: 1px solid var(--page-border);
background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 9%, var(--surface)), var(--surface));
}
.nekon-select-sheet > header small {
display: block;
margin-bottom: 3px;
color: var(--brand-primary);
font-size: .62rem;
font-weight: 950;
letter-spacing: .15em;
}
.nekon-select-sheet > header h2 { margin: 0; font-size: 1.15rem; }
.nekon-select-sheet > header button {
width: 40px;
height: 40px;
flex: 0 0 40px;
border: 1px solid var(--page-border);
border-radius: 13px;
background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
color: var(--page-text);
font-size: 1.7rem;
line-height: 1;
cursor: pointer;
}
.nekon-select-options {
display: grid;
gap: 8px;
padding: 12px;
overflow: auto;
overscroll-behavior: contain;
}
.nekon-select-options button {
width: 100%;
min-width: 0;
min-height: 52px;
display: grid;
grid-template-columns: minmax(0, 1fr) 24px;
align-items: center;
gap: 12px;
padding: 0 15px;
border: 1px solid var(--page-border);
border-radius: 14px;
background: var(--surface-soft);
color: var(--page-text);
text-align: left;
font: inherit;
font-weight: 800;
cursor: pointer;
}
.nekon-select-options button:hover,
.nekon-select-options button[aria-selected="true"] {
border-color: color-mix(in srgb, var(--brand-primary) 55%, var(--page-border));
background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface-soft));
}
.nekon-select-options button span {
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
white-space: nowrap;
}
.nekon-select-options button span::-webkit-scrollbar { display: none; }
.nekon-select-options button i { color: var(--brand-primary); font-style: normal; text-align: center; }
.nekon-select-empty { margin: 10px; color: var(--page-muted); text-align: center; }
/* Encabezados de los dos campos de compra en la misma línea visual. */
.premium-checkout-grid { align-items: start !important; }
.premium-checkout-grid > label:first-child,
.premium-coupon-field {
align-content: start !important;
grid-template-rows: minmax(18px, auto) auto minmax(16px, auto) !important;
}
.premium-checkout-grid > label:first-child::after {
content: "";
display: block;
min-height: 16px;
}
.premium-checkout-grid > label > span {
min-height: 18px !important;
display: flex !important;
align-items: flex-end !important;
line-height: 1.15 !important;
}
/* Identidad del soporte: el icono conserva sus esquinas originales, sin halo amarillo. */
.premium-support-avatar {
border-radius: 15px !important;
border: 1px solid color-mix(in srgb, var(--brand-primary) 42%, transparent) !important;
background: #0d1425 !important;
overflow: visible !important;
box-shadow: 0 8px 22px rgba(0,0,0,.28) !important;
}
.premium-support-avatar img {
width: 100% !important;
height: 100% !important;
padding: 0 !important;
border-radius: 14px !important;
object-fit: cover !important;
background: transparent !important;
}
html[data-theme="light"] .premium-support-avatar {
background: #fff !important;
border-color: rgba(24,142,158,.26) !important;
}
html[data-theme="light"] .premium-support-avatar img { background: transparent !important; }
/* Tarjeta de pronóstico v26: compacta, jerárquica y sin huecos decorativos. */
.prediction-card--v26 {
width: 100% !important;
min-height: 0 !important;
display: grid !important;
gap: 10px !important;
padding: 16px !important;
border-radius: 22px !important;
background:
radial-gradient(circle at 94% 0, color-mix(in srgb, #8d78ff 14%, transparent), transparent 30%),
linear-gradient(145deg, color-mix(in srgb, var(--brand-primary) 5%, var(--surface)), var(--surface)) !important;
border: 1px solid color-mix(in srgb, #8d78ff 24%, var(--page-border)) !important;
box-shadow: 0 18px 45px rgba(1,4,17,.2) !important;
overflow: hidden !important;
}
.prediction-card--v26::before { border-radius: 22px 22px 0 0 !important; }
.prediction-card--v26 .pick-card-head {
min-height: 30px !important;
margin: 0 !important;
align-items: center !important;
}
.prediction-card--v26 .pick-number,
.prediction-card--v26 .pick-rank {
min-height: 28px !important;
padding: 0 12px !important;
display: inline-flex !important;
align-items: center !important;
border-radius: 999px !important;
font-size: .67rem !important;
}
.prediction-card--v26 .pick-context {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) !important;
align-items: center !important;
gap: 8px 14px !important;
margin: 0 !important;
padding: 0 0 10px !important;
border-bottom: 1px solid var(--page-border) !important;
}
.prediction-card--v26 .pick-context > span {
margin: 0 !important;
font-size: .62rem !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
.prediction-card--v26 .pick-context > p {
margin: 0 !important;
font-size: .78rem !important;
line-height: 1.35 !important;
}
.prediction-card--v26 .combined-selection {
margin: 0 !important;
border: 1px solid var(--page-border) !important;
border-radius: 16px !important;
overflow: hidden !important;
background: color-mix(in srgb, var(--surface-soft) 78%, transparent) !important;
}
.prediction-card--v26 .combined-selection__head {
min-height: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
padding: 10px 12px !important;
background: linear-gradient(90deg, color-mix(in srgb, var(--brand-primary) 9%, var(--surface-soft)), color-mix(in srgb, #8d78ff 7%, var(--surface-soft))) !important;
}
.prediction-card--v26 .combined-selection__head small { display: none !important; }
.prediction-card--v26 .combined-selection__head h2 {
margin: 0 !important;
font-size: .85rem !important;
line-height: 1.1 !important;
}
.prediction-card--v26 .combined-selection__head > span {
min-height: 24px !important;
padding: 0 9px !important;
display: inline-flex !important;
align-items: center !important;
border: 1px solid var(--page-border) !important;
border-radius: 999px !important;
font-size: .54rem !important;
white-space: nowrap !important;
}
.prediction-card--v26 .combined-selection__grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 !important;
}
.prediction-card--v26 .combined-leg {
min-width: 0 !important;
min-height: 0 !important;
display: grid !important;
grid-template-columns: 42px minmax(0, 1fr) auto !important;
grid-template-rows: auto auto !important;
align-items: center !important;
gap: 3px 10px !important;
padding: 11px 12px !important;
border: 0 !important;
border-right: 1px solid var(--page-border) !important;
border-top: 1px solid var(--page-border) !important;
border-radius: 0 !important;
background: transparent !important;
}
.prediction-card--v26 .combined-leg:nth-child(even) { border-right: 0 !important; }
.prediction-card--v26 .combined-leg > small {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
width: 40px !important;
height: 32px !important;
margin: 0 !important;
display: grid !important;
place-items: center !important;
border-radius: 10px !important;
background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface)) !important;
color: var(--brand-primary) !important;
font-size: .46rem !important;
line-height: 1.1 !important;
text-align: center !important;
}
.prediction-card--v26 .combined-leg > strong {
grid-column: 2 / -1 !important;
margin: 0 !important;
font-size: .8rem !important;
line-height: 1.25 !important;
}
.prediction-card--v26 .combined-leg > p {
grid-column: 2 !important;
margin: 0 !important;
color: var(--page-muted) !important;
font-size: .66rem !important;
line-height: 1.25 !important;
}
.prediction-card--v26 .combined-leg > span {
grid-column: 3 !important;
grid-row: 2 !important;
margin: 0 !important;
padding: 3px 6px !important;
border-radius: 6px !important;
background: color-mix(in srgb, #8d78ff 14%, transparent) !important;
color: #b9abff !important;
font-size: .45rem !important;
white-space: nowrap !important;
}
.prediction-card--v26 .pick-summary {
width: 100% !important;
min-width: 0 !important;
display: grid !important;
grid-template-columns: 108px minmax(150px, 1fr) minmax(190px, 1.1fr) !important;
gap: 8px !important;
margin: 0 !important;
}
.prediction-card--v26 .pick-summary__odds,
.prediction-card--v26 .copy-pick,
.prediction-card--v26 .countdown-block {
min-width: 0 !important;
min-height: 58px !important;
height: auto !important;
margin: 0 !important;
padding: 8px 11px !important;
border: 1px solid var(--page-border) !important;
border-radius: 13px !important;
background: color-mix(in srgb, var(--surface-soft) 82%, transparent) !important;
box-sizing: border-box !important;
}
.prediction-card--v26 .pick-summary__odds small,
.prediction-card--v26 .copy-pick__label,
.prediction-card--v26 .countdown-label {
font-size: .48rem !important;
line-height: 1.1 !important;
letter-spacing: .12em !important;
}
.prediction-card--v26 .pick-summary__odds strong { font-size: 1.28rem !important; line-height: 1 !important; }
.prediction-card--v26 .copy-pick {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-rows: auto auto !important;
align-items: center !important;
gap: 2px 8px !important;
text-align: left !important;
}
.prediction-card--v26 .copy-pick__label { grid-column: 1 !important; }
.prediction-card--v26 .copy-pick b { grid-column: 1 !important; font-size: .86rem !important; }
.prediction-card--v26 .copy-pick__action {
grid-column: 2 !important;
grid-row: 1 / span 2 !important;
padding: 6px 8px !important;
border-radius: 8px !important;
font-size: .5rem !important;
}
.prediction-card--v26 .countdown-block {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) !important;
align-items: center !important;
gap: 10px !important;
}
.prediction-card--v26 .countdown {
width: 100% !important;
min-width: 0 !important;
display: grid !important;
grid-template-columns: 1fr auto 1fr auto 1fr !important;
align-items: center !important;
gap: 5px !important;
}
.prediction-card--v26 .countdown > div { display: grid !important; justify-items: center !important; }
.prediction-card--v26 .countdown strong {
font-size: 1.08rem !important;
line-height: 1 !important;
}
.prediction-card--v26 .countdown small { font-size: .42rem !important; margin-top: 3px !important; }
.prediction-card--v26 .countdown i { font-size: .8rem !important; opacity: .35 !important; }
html[data-theme="light"] .prediction-card--v26 {
background: radial-gradient(circle at 94% 0, rgba(115,92,255,.1), transparent 30%), linear-gradient(145deg, #fff, #f8fbff) !important;
border-color: #dce2f1 !important;
box-shadow: 0 16px 36px rgba(43,55,95,.1) !important;
}
html[data-theme="light"] .prediction-card--v26 .combined-selection,
html[data-theme="light"] .prediction-card--v26 .pick-summary__odds,
html[data-theme="light"] .prediction-card--v26 .copy-pick,
html[data-theme="light"] .prediction-card--v26 .countdown-block { background: #f8faff !important; }
.mobile-menu-profile { display: none; }
@media (max-width: 820px) {
#mobileMenuProfile[hidden] { display: none !important; }
.mobile-menu-profile:not([hidden]) {
display: block !important;
padding: 15px 6px 17px;
border-bottom: 1px solid var(--page-border);
}
.mobile-menu-profile__button {
width: 100%;
display: grid;
justify-items: center;
gap: 5px;
padding: 0;
border: 0;
background: transparent;
color: var(--page-text);
cursor: pointer;
}
.mobile-menu-profile__avatar {
width: 64px;
height: 64px;
display: grid;
place-items: center;
border: 2px solid color-mix(in srgb, var(--brand-primary) 55%, transparent);
border-radius: 50%;
background-color: color-mix(in srgb, var(--brand-primary) 12%, var(--surface-soft));
background-position: center;
background-size: cover;
box-shadow: 0 8px 24px rgba(0,0,0,.22);
color: var(--brand-primary);
font-size: 1.2rem;
font-weight: 950;
}
.mobile-menu-profile__button strong { margin-top: 3px; font-size: .97rem; }
.mobile-menu-profile__button small {
color: var(--page-muted);
font-size: .64rem;
font-weight: 760;
letter-spacing: .04em;
}
#menu .menu-head { border-bottom: 0 !important; }
#menu > small { margin-top: 17px !important; }
.premium-checkout-grid > label:first-child,
.premium-coupon-field { grid-template-rows: 19px auto 16px !important; }
.nekon-select-dialog {
width: 100%;
max-width: none;
max-height: min(72dvh, 650px);
margin: auto 0 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: 24px 24px 0 0;
}
.nekon-select-sheet > header { padding-top: 16px; }
.nekon-select-options { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.prediction-card--v26 {
gap: 8px !important;
padding: 12px !important;
border-radius: 18px !important;
}
.prediction-card--v26::before { border-radius: 18px 18px 0 0 !important; }
.prediction-card--v26 .pick-context {
grid-template-columns: 1fr !important;
gap: 5px !important;
padding-bottom: 9px !important;
}
.prediction-card--v26 .pick-context > span { white-space: normal !important; }
.prediction-card--v26 .pick-context > p { font-size: .71rem !important; }
.prediction-card--v26 .combined-selection__grid { grid-template-columns: 1fr !important; }
.prediction-card--v26 .combined-leg { border-right: 0 !important; }
.prediction-card--v26 .combined-leg > strong { font-size: .76rem !important; }
.prediction-card--v26 .pick-summary {
grid-template-columns: 72px minmax(92px, 1fr) minmax(128px, 1.12fr) !important;
gap: 6px !important;
}
.prediction-card--v26 .pick-summary__odds,
.prediction-card--v26 .copy-pick,
.prediction-card--v26 .countdown-block {
min-height: 54px !important;
padding: 7px 8px !important;
border-radius: 11px !important;
}
.prediction-card--v26 .pick-summary__odds strong { font-size: 1.16rem !important; }
.prediction-card--v26 .copy-pick b { font-size: .72rem !important; }
.prediction-card--v26 .copy-pick__action { display: none !important; }
.prediction-card--v26 .copy-pick { grid-template-columns: minmax(0, 1fr) 18px !important; }
.prediction-card--v26 .copy-pick::after {
content: "⧉";
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
color: var(--brand-primary);
font-size: .85rem;
}
.prediction-card--v26 .copy-pick.is-copy-confirmed::after { content: "✓"; }
.prediction-card--v26 .countdown-block {
grid-template-columns: 1fr !important;
gap: 3px !important;
}
.prediction-card--v26 .countdown-label { text-align: center !important; }
.prediction-card--v26 .countdown { gap: 3px !important; }
.prediction-card--v26 .countdown strong { font-size: 1rem !important; }
}
@media (max-width: 370px) {
.prediction-card--v26 .pick-summary { grid-template-columns: 66px 86px minmax(116px, 1fr) !important; }
.prediction-card--v26 .pick-summary__odds,
.prediction-card--v26 .copy-pick,
.prediction-card--v26 .countdown-block { padding-inline: 6px !important; }
.prediction-card--v26 .countdown strong { font-size: .92rem !important; }
}
/* Nekon HUB · Reconstrucción de experiencia v25.7 */
/* Selector bancario agrupado y con desplazamiento interno real. */
.nekon-bank-picker {
inset: 0;
width: min(620px, calc(100vw - 32px)) !important;
height: min(720px, calc(100vh - 36px)) !important;
height: min(720px, calc(100dvh - 36px)) !important;
max-height: none !important;
margin: auto;
border-radius: 26px !important;
overflow: hidden !important;
}
.nekon-bank-picker .nekon-select-sheet {
display: grid !important;
grid-template-rows: auto auto auto minmax(0, 1fr) !important;
width: 100%;
height: 100%;
min-height: 0;
overflow: hidden;
}
.nekon-bank-picker .nekon-select-header {
padding: 20px 22px 16px !important;
background:
radial-gradient(circle at 82% 0, color-mix(in srgb, #8073ff 18%, transparent), transparent 42%),
linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 11%, var(--surface)), var(--surface)) !important;
}
.nekon-bank-picker .nekon-select-header h2 { font-size: clamp(1.2rem, 3vw, 1.55rem) !important; }
.nekon-select-search {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
align-items: center;
gap: 10px;
margin: 14px 16px 8px;
padding: 0 14px;
min-height: 48px;
border: 1px solid var(--page-border);
border-radius: 14px;
background: color-mix(in srgb, var(--surface-soft) 90%, transparent);
}
.nekon-select-search:focus-within {
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}
.nekon-select-search svg {
width: 21px;
height: 21px;
fill: none;
stroke: var(--brand-primary);
stroke-width: 2;
stroke-linecap: round;
}
.nekon-select-search input {
width: 100%;
min-width: 0;
border: 0 !important;
outline: 0 !important;
background: transparent !important;
color: var(--page-text) !important;
font: inherit;
font-size: .88rem !important;
}
.nekon-select-search input::placeholder { color: var(--page-muted); }
.nekon-select-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 4px 18px 10px;
color: var(--page-muted);
font-size: .68rem;
}
.nekon-select-meta strong { color: var(--brand-primary); letter-spacing: .04em; }
.nekon-bank-picker .nekon-select-options {
min-height: 0 !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-content: start;
gap: 10px !important;
padding: 10px 16px 18px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--brand-primary) 46%, transparent) transparent;
}
.nekon-bank-group {
min-width: 0;
padding: 12px;
border: 1px solid var(--page-border);
border-radius: 17px;
background: linear-gradient(145deg, color-mix(in srgb, var(--brand-primary) 4%, var(--surface-soft)), var(--surface-soft));
}
.nekon-bank-group > header {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.nekon-bank-group > header > span {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border: 1px solid color-mix(in srgb, var(--brand-primary) 38%, transparent);
border-radius: 12px;
background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
color: var(--brand-primary);
font-weight: 950;
}
.nekon-bank-group > header div { min-width: 0; }
.nekon-bank-group > header small,
.nekon-bank-accounts button small {
display: block;
margin-bottom: 2px;
color: var(--page-muted);
font-size: .48rem;
font-weight: 900;
letter-spacing: .12em;
}
.nekon-bank-group > header strong {
display: block;
overflow: hidden;
color: var(--page-text);
font-size: .83rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.nekon-bank-accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.nekon-bank-accounts button {
min-width: 0;
min-height: 48px !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 18px !important;
align-items: center !important;
gap: 7px !important;
padding: 8px 9px !important;
border: 1px solid var(--page-border) !important;
border-radius: 11px !important;
background: color-mix(in srgb, var(--surface) 80%, transparent) !important;
}
.nekon-bank-accounts button:only-child { grid-column: 1 / -1; }
.nekon-bank-accounts button strong {
display: block;
overflow: hidden;
color: var(--page-text);
font-size: .72rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.nekon-bank-accounts button i { color: var(--brand-primary) !important; }
.nekon-bank-accounts button[aria-selected="true"] {
border-color: color-mix(in srgb, var(--brand-primary) 58%, transparent) !important;
background: color-mix(in srgb, var(--brand-primary) 11%, var(--surface)) !important;
}
.nekon-bank-picker .nekon-select-empty {
grid-column: 1 / -1;
min-height: 220px;
display: grid;
place-content: center;
justify-items: center;
gap: 6px;
color: var(--page-muted);
}
.nekon-bank-picker .nekon-select-empty > span { color: var(--brand-primary); font-size: 2rem; }
.nekon-bank-picker .nekon-select-empty strong { color: var(--page-text); }
.nekon-bank-picker .nekon-select-empty p { margin: 0; font-size: .76rem; }
/* Nuevo ticket deportivo para pronósticos. */
.prediction-card--v27 {
position: relative !important;
width: 100% !important;
min-height: 0 !important;
display: grid !important;
gap: 0 !important;
padding: 0 !important;
border: 1px solid color-mix(in srgb, #776dff 34%, var(--page-border)) !important;
border-radius: 23px !important;
background:
radial-gradient(circle at 100% 0, rgba(119,109,255,.13), transparent 34%),
linear-gradient(145deg, color-mix(in srgb, var(--brand-primary) 5%, var(--surface)), var(--surface)) !important;
box-shadow: 0 22px 54px rgba(1,5,22,.25) !important;
overflow: hidden !important;
}
.prediction-card--v27::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 3px;
background: linear-gradient(90deg, var(--brand-primary), #6bb9ff 48%, #8672ff);
}
.pick-v27-header {
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px 18px 13px;
}
.pick-v27-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pick-v27-identity > span {
min-height: 30px;
display: inline-flex;
align-items: center;
padding: 0 12px;
border: 1px solid color-mix(in srgb, var(--brand-primary) 45%, transparent);
border-radius: 999px;
color: var(--brand-primary);
background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
font-size: .68rem;
font-weight: 950;
letter-spacing: .1em;
}
.pick-v27-identity small { color: var(--page-muted); font-size: .55rem; font-weight: 850; letter-spacing: .1em; }
.pick-v27-rank {
min-height: 29px;
display: inline-flex;
align-items: center;
padding: 0 11px;
border: 1px solid rgba(134,114,255,.38);
border-radius: 999px;
color: #b9adff;
background: rgba(134,114,255,.1);
font-size: .62rem;
letter-spacing: .12em;
}
.pick-v27-live {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 10px 18px;
border-top: 1px solid var(--page-border);
border-bottom: 1px solid var(--page-border);
background: color-mix(in srgb, var(--surface-soft) 77%, transparent);
}
.pick-v27-validity {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
color: var(--brand-primary);
font-size: .61rem;
font-weight: 950;
letter-spacing: .09em;
}
.pick-v27-validity i {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: var(--brand-primary);
box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-primary) 10%, transparent);
}
.pick-v27-live .countdown-block {
display: flex !important;
flex: none !important;
align-items: center !important;
gap: 10px !important;
width: auto !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
.pick-v27-live .countdown-label { color: var(--page-muted) !important; font-size: .49rem !important; letter-spacing: .11em !important; }
.pick-v27-live .countdown { display: grid !important; grid-template-columns: 1fr auto 1fr auto 1fr !important; gap: 6px !important; align-items: center !important; }
.pick-v27-live .countdown > div { display: grid; justify-items: center; }
.pick-v27-live .countdown strong { color: var(--page-text) !important; font-size: 1.05rem !important; line-height: 1 !important; }
.pick-v27-live .countdown small { margin-top: 2px !important; color: var(--page-muted) !important; font-size: .38rem !important; }
.pick-v27-live .countdown i { color: var(--page-muted); font-style: normal; opacity: .35; }
.pick-v27-overview {
display: grid;
grid-template-columns: minmax(180px, .72fr) minmax(0, 1.28fr);
align-items: center;
gap: 22px;
padding: 17px 18px 14px;
}
.pick-v27-overview small { color: var(--brand-primary); font-size: .53rem; font-weight: 950; letter-spacing: .12em; }
.pick-v27-overview h2 { margin: 4px 0 0; color: var(--page-text); font-size: 1.1rem; line-height: 1.1; }
.pick-v27-overview p { margin: 0; color: var(--page-muted); font-size: .76rem; line-height: 1.48; }
.pick-v27-events {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 0 18px;
border: 1px solid var(--page-border);
border-radius: 16px;
background: color-mix(in srgb, var(--surface-soft) 74%, transparent);
overflow: hidden;
}
.pick-v27-event {
position: relative;
min-width: 0;
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 13px;
border-right: 1px solid var(--page-border);
}
.pick-v27-event:nth-child(even) { border-right: 0; }
.pick-v27-event__number {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 11px;
color: var(--brand-primary);
background: color-mix(in srgb, var(--brand-primary) 11%, var(--surface));
font-size: .67rem;
font-weight: 950;
}
.pick-v27-event__copy { min-width: 0; }
.pick-v27-event__copy small { display: block; color: var(--page-muted); font-size: .45rem; font-weight: 900; letter-spacing: .12em; }
.pick-v27-event__copy strong { display: block; margin: 2px 0; color: var(--page-text); font-size: .78rem; line-height: 1.25; }
.pick-v27-event__copy p { margin: 0; color: var(--page-muted); font-size: .64rem; line-height: 1.3; }
.pick-v27-event__type {
padding: 4px 7px;
border-radius: 7px;
color: #b9adff;
background: rgba(134,114,255,.12);
font-size: .44rem;
font-weight: 900;
white-space: nowrap;
}
.pick-v27-event__type.is-direct { color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 9%, transparent); }
.pick-v27-empty { grid-column: 1 / -1; padding: 24px; color: var(--page-muted); text-align: center; }
.pick-v27-empty p { margin: 6px 0 0; }
.pick-v27-footer {
display: grid;
grid-template-columns: 135px minmax(0, 1fr);
gap: 9px;
padding: 13px 18px 17px;
}
.pick-v27-odds,
.pick-v27-code {
min-width: 0;
min-height: 60px;
border: 1px solid var(--page-border) !important;
border-radius: 14px !important;
background: color-mix(in srgb, var(--surface-soft) 77%, transparent) !important;
box-sizing: border-box;
}
.pick-v27-odds { display: grid; align-content: center; padding: 9px 13px; }
.pick-v27-odds small,
.pick-v27-code .copy-pick__label { color: var(--page-muted) !important; font-size: .49rem !important; font-weight: 900; letter-spacing: .12em; }
.pick-v27-odds strong { color: var(--brand-primary); font-size: 1.42rem; line-height: 1; }
.pick-v27-code {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-rows: auto auto !important;
align-content: center !important;
align-items: center !important;
gap: 2px 10px !important;
padding: 9px 13px !important;
color: var(--page-text) !important;
text-align: left !important;
}
.pick-v27-code b { grid-column: 1; color: var(--page-text) !important; font-size: .96rem !important; }
.pick-v27-code .copy-pick__action {
grid-column: 2;
grid-row: 1 / span 2;
padding: 7px 10px;
border-radius: 9px;
color: var(--brand-primary);
background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
font-size: .5rem;
}
/* Historial agrupado por jornada, siempre con dos picks por fila. */
.prediction-history--v27 { width: 100% !important; max-width: none !important; padding: 0 !important; }
.history-v27-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
padding: 13px 15px;
border: 1px solid var(--page-border);
border-radius: 15px;
background: color-mix(in srgb, var(--surface-soft) 74%, transparent);
}
.history-v27-toolbar div { display: grid; gap: 2px; }
.history-v27-toolbar small { color: var(--brand-primary); font-size: .5rem; font-weight: 950; letter-spacing: .13em; }
.history-v27-toolbar strong { color: var(--page-text); font-size: .92rem; }
.history-v27-toolbar > span {
padding: 6px 9px;
border-radius: 999px;
color: #b9adff;
background: rgba(134,114,255,.1);
font-size: .55rem;
font-weight: 900;
}
.history-v27-days { display: grid; gap: 16px; }
.history-day {
padding: 13px;
border: 1px solid var(--page-border);
border-radius: 18px;
background: linear-gradient(145deg, color-mix(in srgb, var(--brand-primary) 3%, var(--surface)), var(--surface));
}
.history-day__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
padding: 0 2px;
}
.history-day__header span { color: var(--brand-primary); font-size: .52rem; font-weight: 950; letter-spacing: .13em; }
.history-day__header time { color: var(--page-muted); font-size: .61rem; font-weight: 800; }
.history-day__picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.history-ticket {
min-width: 0;
display: grid;
gap: 10px;
padding: 14px;
border: 1px solid var(--page-border);
border-radius: 15px;
background: color-mix(in srgb, var(--surface-soft) 77%, transparent);
overflow: hidden;
}
.history-ticket--won { box-shadow: inset 3px 0 #28d093; }
.history-ticket--lost { box-shadow: inset 3px 0 #ff6777; }
.history-ticket > header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.history-ticket__pick {
min-width: 0;
overflow: hidden;
color: var(--page-text);
font-size: .9rem;
font-weight: 950;
text-overflow: ellipsis;
white-space: nowrap;
}
.history-ticket__result {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 7px;
border-radius: 999px;
font-size: .5rem;
letter-spacing: .07em;
white-space: nowrap;
}
.history-ticket__result i { font-style: normal; font-size: .72rem; }
.history-ticket--won .history-ticket__result { color: #58e8b1; background: rgba(40,208,147,.11); }
.history-ticket--lost .history-ticket__result { color: #ff8793; background: rgba(255,103,119,.1); }
.history-ticket__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.history-ticket__stats > span,
.history-ticket__stats > button {
min-width: 0;
min-height: 52px;
display: grid;
align-content: center;
gap: 2px;
padding: 8px 9px;
border: 1px solid var(--page-border);
border-radius: 11px;
background: color-mix(in srgb, var(--surface) 76%, transparent);
color: var(--page-text);
text-align: left;
font: inherit;
}
.history-ticket__stats > button { position: relative; cursor: pointer; }
.history-ticket__stats small { color: var(--page-muted); font-size: .46rem; font-weight: 900; letter-spacing: .1em; }
.history-ticket__stats b { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.history-ticket__stats button i { position: absolute; right: 7px; bottom: 7px; color: var(--brand-primary); font-size: .66rem; font-style: normal; }
.history-ticket > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--page-muted); font-size: .53rem; }
.history-ticket > footer span { color: #b9adff; font-weight: 900; }
/* Menú móvil sin bloque independiente detrás de la marca. */
@media (max-width: 820px) {
#menu .menu-head {
position: relative !important;
top: auto !important;
padding: 4px 4px 12px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
#menu .menu-head .brand { background: transparent !important; box-shadow: none !important; }
.mobile-menu-profile:not([hidden]) { padding-top: 10px !important; }
.mobile-menu-profile__button small {
color: var(--page-muted) !important;
font-size: .59rem !important;
font-weight: 900 !important;
letter-spacing: .09em !important;
text-transform: uppercase;
}
}
/* Centro de notificaciones en formato acordeón. */
.notification-center-body { display: block !important; min-height: 0 !important; overflow: hidden !important; }
.notification-center-sidebar {
width: 100% !important;
height: 100% !important;
border-right: 0 !important;
background: transparent !important;
}
.notification-center-detail { display: none !important; }
.notification-center-sidebar .notifications-list {
width: min(100%, 940px);
margin: 0 auto;
padding: 14px 18px 24px !important;
gap: 9px !important;
}
.notification-accordion-item {
position: relative;
border: 1px solid var(--page-border);
border-radius: 16px;
background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
overflow: hidden;
transition: border-color .18s ease, background .18s ease;
}
.notification-accordion-item.is-open {
border-color: color-mix(in srgb, var(--brand-primary) 48%, transparent);
background: color-mix(in srgb, var(--brand-primary) 6%, var(--surface-soft));
}
.notification-accordion-item .notification-list-item {
position: relative;
grid-template-columns: 44px minmax(0, 1fr) 18px !important;
gap: 11px;
padding: 13px 15px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
.notification-list-item__chevron {
align-self: center;
color: var(--page-muted);
font-size: 1rem;
transition: transform .18s ease, color .18s ease;
}
.notification-accordion-item.is-open .notification-list-item__chevron { color: var(--brand-primary); transform: rotate(180deg); }
.notification-unread-dot {
position: absolute;
top: 9px;
right: 9px;
width: 8px;
height: 8px;
border: 2px solid var(--surface-soft);
border-radius: 50%;
background: #3fe5a4;
box-shadow: 0 0 0 4px rgba(63,229,164,.09), 0 0 12px rgba(63,229,164,.45);
}
.notification-inline-detail {
display: grid;
gap: 12px;
padding: 2px 15px 16px 70px;
border-top: 1px solid var(--page-border);
animation: notification-expand .2s ease;
}
.notification-inline-detail .notification-detail-card__message {
max-width: none;
margin: 13px 0 0;
color: var(--page-text);
font-size: .82rem;
line-height: 1.58;
}
.notification-inline-detail__date { color: var(--page-muted); font-size: .65rem; text-transform: capitalize; }
.notification-inline-detail .notification-detail-card__action {
width: max-content;
min-height: 38px;
margin: 0;
padding: 0 13px;
}
.notification-inline-detail .notification-detail-card__image-button { width: min(100%, 520px); margin: 13px 0 0; }
.notification-list-heading button { white-space: nowrap; }
@keyframes notification-expand { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
html[data-theme="light"] .nekon-bank-group,
html[data-theme="light"] .prediction-card--v27,
html[data-theme="light"] .history-day,
html[data-theme="light"] .history-ticket,
html[data-theme="light"] .notification-accordion-item {
background: #fff !important;
border-color: #dce3ef !important;
box-shadow: 0 12px 30px rgba(48,62,97,.07);
}
html[data-theme="light"] .nekon-bank-accounts button,
html[data-theme="light"] .pick-v27-events,
html[data-theme="light"] .pick-v27-odds,
html[data-theme="light"] .pick-v27-code,
html[data-theme="light"] .history-ticket__stats > span,
html[data-theme="light"] .history-ticket__stats > button { background: #f7f9fd !important; }
html[data-theme="light"] .notification-accordion-item.is-open { background: #f4fbfa !important; border-color: rgba(24,164,139,.35) !important; }
@media (max-width: 820px) {
.nekon-bank-picker {
inset: auto 0 0 !important;
width: 100% !important;
height: min(82vh, 730px) !important;
height: min(82dvh, 730px) !important;
max-height: calc(100vh - 8px) !important;
max-height: calc(100dvh - 8px) !important;
margin: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-radius: 24px 24px 0 0 !important;
}
.nekon-bank-picker .nekon-select-header { padding: 16px 17px 13px !important; }
.nekon-select-search { margin: 11px 13px 6px; }
.nekon-select-meta { padding: 3px 15px 8px; }
.nekon-select-meta span { display: none; }
.nekon-bank-picker .nekon-select-options {
grid-template-columns: 1fr;
gap: 8px !important;
padding: 8px 12px max(18px, env(safe-area-inset-bottom)) !important;
}
.nekon-bank-group { padding: 10px; }
.nekon-bank-group > header { margin-bottom: 8px; }
.prediction-card--v27 { border-radius: 19px !important; }
.pick-v27-header { padding: 14px 14px 11px; }
.pick-v27-identity small { display: none; }
.pick-v27-live {
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
padding: 9px 14px;
}
.pick-v27-validity { font-size: .52rem; line-height: 1.25; }
.pick-v27-live .countdown-block { display: grid !important; grid-template-columns: 1fr !important; gap: 2px !important; }
.pick-v27-live .countdown-label { text-align: center; }
.pick-v27-live .countdown strong { font-size: .96rem !important; }
.pick-v27-overview { grid-template-columns: 1fr; gap: 7px; padding: 13px 14px 11px; }
.pick-v27-overview h2 { font-size: 1rem; }
.pick-v27-overview p { font-size: .7rem; }
.pick-v27-events { grid-template-columns: 1fr; margin: 0 14px; }
.pick-v27-event { grid-template-columns: 34px minmax(0, 1fr) auto; padding: 11px; border-right: 0; border-bottom: 1px solid var(--page-border); }
.pick-v27-event:last-child { border-bottom: 0; }
.pick-v27-event__number { width: 32px; height: 32px; }
.pick-v27-event__copy strong { font-size: .73rem; }
.pick-v27-event__copy p { font-size: .61rem; }
.pick-v27-event__type { font-size: .4rem; padding: 4px 5px; }
.pick-v27-footer { grid-template-columns: 92px minmax(0, 1fr); padding: 10px 14px 14px; }
.pick-v27-odds,
.pick-v27-code { min-height: 56px; }
.pick-v27-code .copy-pick__action { padding: 6px 7px; }
.prediction-history-host { margin-top: 22px !important; }
.history-v27-toolbar { margin-bottom: 10px; }
.history-day { padding: 10px; }
.history-day__picks { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
.history-ticket { gap: 8px; padding: 11px 10px; border-radius: 13px; }
.history-ticket > header { align-items: flex-start; gap: 5px; }
.history-ticket__pick { font-size: .76rem; }
.history-ticket__result { padding: 4px 5px; font-size: .39rem; letter-spacing: .03em; }
.history-ticket__result i { display: none; }
.history-ticket__stats { gap: 5px; }
.history-ticket__stats > span,
.history-ticket__stats > button { min-height: 47px; padding: 7px 6px; }
.history-ticket__stats small { font-size: .39rem; }
.history-ticket__stats b { font-size: .66rem; }
.history-ticket__stats button i { right: 5px; bottom: 5px; font-size: .55rem; }
.history-ticket > footer { font-size: .47rem; }
.history-ticket > footer time { display: none; }
.notification-center-sidebar .notifications-list { width: 100%; padding: 10px 11px calc(18px + env(safe-area-inset-bottom)) !important; }
.notification-list-heading { padding-inline: 13px !important; }
.notification-list-heading button { max-width: 150px; font-size: .58rem; line-height: 1.12; white-space: normal; }
.notification-accordion-item .notification-list-item { grid-template-columns: 42px minmax(0, 1fr) 16px !important; padding: 12px !important; }
.notification-inline-detail { padding: 2px 12px 14px 65px; }
.notification-inline-detail .notification-detail-card__message { font-size: .76rem; }
}
@media (max-width: 370px) {
.pick-v27-validity { max-width: 134px; }
.pick-v27-live .countdown { gap: 3px !important; }
.pick-v27-live .countdown strong { font-size: .87rem !important; }
.history-ticket__result { font-size: .35rem; }
.history-ticket { padding-inline: 8px; }
.notification-inline-detail { padding-left: 12px; }
}
html[data-theme="light"] .mobile-header-whatsapp {
border-color: rgba(17, 157, 83, .26) !important;
background: #effcf5 !important;
color: #119d53 !important;
}
html[data-theme="light"] .premium-support-float {
border-color: rgba(50, 143, 191, .25) !important;
background: rgba(255,255,255,.96) !important;
color: #171b2e !important;
}
/* Nekon HUB · Ajustes de interfaz v25.5 */
.page-title,
.member-page-title {
grid-template-columns: minmax(0, 1fr) !important;
column-gap: 0 !important;
}
.page-title::before,
.member-page-title::before {
content: none !important;
display: none !important;
}
.page-title > small,
.page-title > h1,
.page-title > p,
.member-page-title > small,
.member-page-title > h1,
.member-page-title > p {
grid-column: 1 !important;
}
@media (min-width: 821px) {
.whatsapp-float,
.premium-support-float {
width: 54px !important;
min-width: 54px !important;
height: 54px !important;
box-sizing: border-box !important;
justify-content: flex-end !important;
gap: 0 !important;
padding: 5px !important;
overflow: hidden !important;
border-radius: 16px !important;
transition: width .22s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
.whatsapp-float__icon,
.premium-support-float__icon {
flex: 0 0 42px !important;
}
.whatsapp-float__label,
.premium-support-float__label {
max-width: 0 !important;
margin: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
transform: translateX(8px) !important;
white-space: nowrap !important;
transition: max-width .22s ease, margin .22s ease, opacity .16s ease, transform .22s ease !important;
}
.premium-support-float:hover,
.premium-support-float:focus-visible {
width: 126px !important;
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible {
width: 190px !important;
}
.premium-support-float:hover .premium-support-float__label,
.premium-support-float:focus-visible .premium-support-float__label,
.whatsapp-float:hover .whatsapp-float__label,
.whatsapp-float:focus-visible .whatsapp-float__label {
max-width: 145px !important;
margin-right: 8px !important;
opacity: 1 !important;
transform: none !important;
}
}
@media (max-width: 820px) {
body {
padding-bottom: 0 !important;
}
.home {
padding-bottom: 18px !important;
}
.home .quick-grid {
margin-bottom: 8px !important;
}
.view.inner {
padding-bottom: 24px !important;
}
.page-title,
.member-page-title {
min-height: 0 !important;
display: grid !important;
align-content: start !important;
gap: 0 !important;
padding: 18px !important;
}
.page-title h1,
main .view.inner .page-title h1,
.member-page-title h1 {
font-size: clamp(27px, 8vw, 36px) !important;
}
.arena-bottom-nav,
.arena-bottom-nav.is-guest {
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: calc(76px + env(safe-area-inset-bottom)) !important;
min-height: calc(76px + env(safe-area-inset-bottom)) !important;
padding: 6px 8px max(6px, env(safe-area-inset-bottom)) !important;
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-radius: 22px 22px 0 0 !important;
}
.premium-support-float:not([hidden]) {
bottom: calc(88px + env(safe-area-inset-bottom)) !important;
}
footer {
min-height: 0 !important;
gap: 12px !important;
padding: 24px 18px calc(88px + env(safe-area-inset-bottom)) !important;
}
footer .brand img {
width: 40px !important;
height: 40px !important;
}
footer .footer-copy {
display: grid !important;
gap: 4px !important;
}
footer .footer-copy small {
margin-top: 0 !important;
}
body.menu-open {
overflow: hidden !important;
overscroll-behavior: none !important;
}
body.menu-open > header {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
transform: translateY(-100%) !important;
}
body.menu-open .premium-support-float {
display: none !important;
}
body.menu-open .overlay {
z-index: 1290 !important;
}
body.menu-open #menu {
z-index: 1300 !important;
overscroll-behavior: contain !important;
touch-action: pan-y !important;
}
#menu .menu-head {
position: sticky !important;
top: 0 !important;
z-index: 3 !important;
background: color-mix(in srgb, var(--page-bg) 96%, transparent) !important;
backdrop-filter: blur(18px) !important;
}
}
@media (max-width: 390px) {
.arena-bottom-nav,
.arena-bottom-nav.is-guest {
left: 0 !important;
right: 0 !important;
}
}
/* v25.7 · Correcciones finales de prioridad para la app móvil. */
.nekon-bank-accounts button > span {
min-width: 0 !important;
overflow: hidden !important;
white-space: normal !important;
}
@media (max-width: 820px) {
body.menu-open #menu .menu-head,
#menu .menu-head {
position: relative !important;
top: auto !important;
padding: 4px 4px 12px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
#menu .menu-head .brand {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
}
/* ========================================================================== */
/* Nekon HUB v25.8 · ajustes finales solicitados (móvil + escritorio) */
/* ========================================================================== */
/* Menú móvil: usar la foto real como ![]()
evita el reescalado borroso de
background-image que Safari/iOS puede producir dentro del panel compuesto. */
@media (max-width: 820px) {
.mobile-menu-profile__avatar {
overflow: hidden !important;
background-image: none !important;
-webkit-font-smoothing: antialiased;
transform: translateZ(0);
}
.mobile-menu-profile__avatar > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: inherit;
image-rendering: auto;
-webkit-user-drag: none;
backface-visibility: hidden;
}
}
/* Pronósticos: los /