:root{ /* V1 palette (Copa América inspired) adapted to V2 styles */ --lfa-bg0:#050B1A; --lfa-bg1:#07152E; --lfa-primary:#005CA4; --lfa-primary-2:#0B8BD6; --lfa-accent:#F6C343; --lfa-accent-2:#FBE7A1; /* Map to V2 tokens (keep existing class names working) */ --accent: var(--lfa-accent); --accent2: var(--lfa-accent-2); --deep-blue: var(--lfa-bg0); --mid-blue: var(--lfa-bg1); --card-blue: rgba(255,255,255,.06); --neon-blue: var(--lfa-primary-2); --glow-blue: rgba(11,139,214,0.65); --bg0: var(--lfa-bg0); --bg1: var(--lfa-bg1); --panel: rgba(255,255,255,.055); --panel2: rgba(255,255,255,.075); --border: rgba(255,255,255,.12); --border2: rgba(246,195,67,.35); --text:#ffffff; --muted: rgba(255,255,255,.78); --muted2: rgba(255,255,255,.60); --shadow: 0 24px 80px rgba(0,0,0,.35); } *{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Global page background (fix iOS overscroll showing white beyond footer) Ultra.css is loaded site-wide via partials/header.php, so define html/body here. */ html, body{ height: 100%; min-height: 100%; background-color: var(--bg0); color: var(--text); overscroll-behavior-y: none; } html{ background: radial-gradient(1200px 820px at 15% -10%, rgba(11,139,214,.35), transparent 58%), radial-gradient(980px 720px at 92% 0%, rgba(246,195,67,.16), transparent 55%), radial-gradient(760px 560px at 55% 95%, rgba(0,92,164,.16), transparent 55%), linear-gradient(180deg, var(--bg0), var(--bg1)); background-color: var(--bg0); } body{ margin: 0; background: transparent; /* let html carry the background too (prevents white bounce area) */ } /* Extra safety: fixed backdrop so even elastic scroll never reveals white */ body::before{ content:""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1200px 820px at 15% -10%, rgba(11,139,214,.35), transparent 58%), radial-gradient(980px 720px at 92% 0%, rgba(246,195,67,.16), transparent 55%), radial-gradient(760px 560px at 55% 95%, rgba(0,92,164,.16), transparent 55%), linear-gradient(180deg, var(--bg0), var(--bg1)); } /* iOS/Safari white background + "infinite blank scroll" look: When the document ends, Mobile Safari can reveal the background (default white) during elastic overscroll. We force the same ultra background on html/body to keep it dark and consistent. */ html{ background: linear-gradient(180deg, var(--bg0), var(--bg1)); background-color: var(--bg0); } body{ background-color: var(--bg0); margin: 0; } html, body{ /* reduce "elastic" overscroll artifacts where supported */ overscroll-behavior-y: none; } .bg-ultra{ color: var(--text); background: radial-gradient(1200px 820px at 15% -10%, rgba(11,139,214,.35), transparent 58%), radial-gradient(980px 720px at 92% 0%, rgba(246,195,67,.16), transparent 55%), radial-gradient(760px 560px at 55% 95%, rgba(0,92,164,.16), transparent 55%), linear-gradient(180deg, var(--bg0), var(--bg1)); /* Use dynamic viewport height when available to avoid extra blank space on mobile */ min-height: 100vh; min-height: 100dvh; } .ultra-nav{ background: rgba(0,0,0,.58); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.10); } /* Prevent accidental horizontal scrolling on mobile */ html, body{ overflow-x: hidden; } /* Brand (V1 feel) */ .brand-mark{ width: 246px; height: 50px; /*border-radius: 14px;*/ display:flex; align-items:center; justify-content:center; padding: 8px 10px; /*background: linear-gradient(135deg, var(--lfa-primary), var(--lfa-primary-2)); box-shadow: 0 14px 40px rgba(0,92,164,.35); border: 1px solid rgba(255,255,255,.10);*/ } .brand-mark img{ display:block; height: 60px; width:auto; } /* Responsive brand block (avoid navbar overflow on phones) */ @media (max-width: 991.98px){ .brand-mark{ width: auto; height: 44px; padding: 0; } .brand-mark img{ height: 60px; } } @media (max-width: 360px){ .brand-mark img{ height: 60px; } } /* Mobile top actions (En vivo / Reglamento) visible in header */ @media (max-width: 991.98px){ .mobile-top-actions .btn{ padding: 6px 10px !important; font-size: 12px; border-radius: 999px; white-space: nowrap; line-height: 1.1; } .mobile-top-actions .btn i{ font-size: 13px; } .mobile-top-actions{ flex: 0 0 auto; } } /* Extra-small phones: keep buttons visible without cutting */ @media (max-width: 420px){ .mobile-top-actions .btn{ padding: 6px 9px !important; } .mobile-top-actions .btn .btn-txt{ display:none; } .mobile-top-actions .btn i{ margin-right: 0 !important; } } /* Brand (Desktop like broadcast) */ .navbar-brand{ gap: .65rem; } .brand-emblem{ width: 44px; height: 44px; border-radius: 12px; object-fit: contain; display:block; } .brand-stack{ line-height: 1.05; } .brand-name{ font-weight: 800; letter-spacing: .06em; font-size: 12px; color: rgba(255,255,255,.95); text-transform: uppercase; } .brand-tagline{ font-size: 11px; color: rgba(255,255,255,.70); } @media (max-width: 575.98px){ .brand-emblem{ width: 38px; height: 38px; border-radius: 11px; } } /* Navbar filters (pills) */ .ultra-nav .ultra-select{ border-radius: 999px; background: rgba(5,11,26,.55); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.92); padding: .45rem .85rem; box-shadow: none; } .ultra-nav .ultra-select:focus{ border-color: rgba(246,195,67,.55); box-shadow: 0 0 0 .2rem rgba(246,195,67,.15); } /* Navbar action buttons */ .btn-live{ border: 0; color: #081024; font-weight: 900; background: linear-gradient(135deg, var(--lfa-accent), var(--lfa-accent-2)); box-shadow: 0 18px 60px rgba(246,195,67,.22); } .btn-live:hover{ filter: brightness(1.03); transform: translateY(-1px); } .navbar-brand .brand-dot{ width:10px;height:10px;border-radius:999px; background: var(--accent); box-shadow: 0 0 0 3px rgba(246,195,67,.18), 0 0 28px rgba(246,195,67,.28); } .letterspace{ letter-spacing:.12em; font-size:.86rem; text-transform:uppercase; } .navbar .nav-link{ position:relative; color: rgba(255,255,255,.80); padding:.50rem .85rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); backdrop-filter: blur(10px); display:flex; align-items:center; gap:.45rem; } .navbar .nav-link:hover{ color:#fff; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); } .navbar .nav-link.active{ color:#fff; background: linear-gradient(135deg, rgba(0,92,164,.22), rgba(246,195,67,.10)); border: 1px solid rgba(246,195,67,.30); box-shadow: 0 10px 26px rgba(246,195,67,.10); } .ultra-hero{ border-radius: 22px; border: 1px solid rgba(255,255,255,.10); background: radial-gradient(900px 520px at 10% 0%, rgba(11,139,214,.32), transparent 60%), radial-gradient(800px 520px at 100% 10%, rgba(246,195,67,.14), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); box-shadow: var(--shadow); overflow:hidden; position:relative; } .ultra-hero:after{ content:""; position:absolute; inset:-2px; background: radial-gradient(700px 220px at 20% 0%, rgba(11,139,214,.28), transparent 60%); pointer-events:none; mix-blend-mode: screen; } /* ============================== HOME — ULTRA PRO (Broadcast) ============================== */ /* Home Hero v2 (Header like mock) */ .home-hero-v2{ border-radius: 26px; border: 1px solid rgba(255,255,255,.12); background: radial-gradient(1200px 560px at 10% 8%, rgba(57,198,255,.22), transparent 60%), radial-gradient(900px 520px at 100% 12%, rgba(246,195,67,.14), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: var(--shadow); position: relative; overflow: hidden; } .home-hero-v2::before{ content:""; position:absolute; inset:-2px; background: radial-gradient(900px 260px at 35% 0%, rgba(57,198,255,0.26), transparent 60%); pointer-events:none; mix-blend-mode: screen; } .home-hero-v2::after{ content:""; position:absolute; inset:0; background: radial-gradient(900px 460px at 100% 30%, rgba(246,195,67,0.10), transparent 55%); pointer-events:none; } .home-hero-v2 .inner{ position: relative; z-index: 1; } .hero-badges{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom: 14px; } .hero-badge{ display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .8rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.18); color: rgba(255,255,255,.85); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; } .hero-pill{ display:inline-flex; align-items:center; padding:.35rem .75rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.78); font-weight: 800; font-size: .82rem; } .hero-title-v2{ color:#EAF2FF; font-weight: 950; letter-spacing: 1px; font-size: clamp(1.8rem, 3.8vw, 3.25rem); margin: 0 0 8px; text-shadow: 0 0 16px rgba(57,198,255,0.32); } .hero-title-v2 .accent{ color: var(--gold); } .hero-subtitle-v2{ color: rgba(255,255,255,.76); max-width: 760px; line-height: 1.55; } .hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 18px; } .hero-meta-cards{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 20px; } .hero-mini{ min-width: 150px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.14); padding: 12px 12px; backdrop-filter: blur(10px); } .hero-mini .k{ color: rgba(255,255,255,.62); font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; } .hero-mini .v{ color: #fff; font-weight: 950; font-size: 1.05rem; margin-top: 4px; } .live-dot{ display:inline-block; width:10px; height:10px; border-radius:999px; background:#FF3B3B; box-shadow: 0 0 10px rgba(255,59,59,.55); margin-right: 8px; position:relative; top:1px; } /* Featured match card */ .featured-match{ border-radius: 22px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); backdrop-filter: blur(14px); box-shadow: 0 18px 70px rgba(0,0,0,.38); overflow:hidden; } .featured-match .head{ padding: 14px 16px 10px; border-bottom: 1px solid rgba(255,255,255,.10); } .featured-match .head .label{ color: rgba(255,255,255,.64); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; } .featured-match .head .title{ color:#fff; font-weight: 950; font-size: 1.1rem; margin-top: 4px; } .featured-match .head .meta{ color: rgba(255,255,255,.70); font-size: .88rem; margin-top: 4px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .badge-live{ margin-left:auto; display:inline-flex; align-items:center; gap:.45rem; padding: .32rem .65rem; border-radius: 999px; background: rgba(255,59,59,.18); border: 1px solid rgba(255,59,59,.35); color: #fff; font-weight: 950; font-size: .78rem; } .featured-match .body{ padding: 14px 16px 16px; } .fm-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; } .fm-team{ display:flex; align-items:center; gap:10px; min-width: 0; } .fm-logo{ width: 40px; height: 40px; border-radius: 14px; background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; overflow:hidden; } .fm-logo img{ width:100%; height:100%; object-fit: cover; } .fm-abbr{ font-weight: 950; color:#fff; } .fm-name{ color:#fff; font-weight: 900; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; max-width: 220px; } /* Home featured match: stacked team block (logo big + name below) */ .fm-team--stack{ flex-direction: column; justify-content:center; align-items:center; gap: 8px; min-width: 92px; } .fm-logo--lg{ width: 58px; height: 58px; border-radius: 18px; } .fm-name--stack{ max-width: 120px; text-align:center; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; font-weight: 950; } @media (max-width: 420px){ .fm-logo--lg{ width: 48px; height: 48px; border-radius: 16px; } .fm-name--stack{ max-width: 98px; font-size: .92rem; } .fm-score{ font-size: 1.75rem; min-width: 76px; } } .fm-score{ font-weight: 950; color:#fff; font-size: 2rem; letter-spacing: .06em; min-width: 90px; text-align:center; } .fm-minute{ color: rgba(255,255,255,.70); font-weight: 800; font-size: .86rem; text-align:center; margin-top: 2px; } .featured-match .foot{ padding: 0 16px 16px; } .btn-featured{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color:#fff; font-weight: 900; text-decoration: none; padding: 10px 12px; } .btn-featured:hover{ text-decoration: none; border-color: rgba(57,198,255,.60); box-shadow: 0 0 12px rgba(57,198,255,.18); color:#fff; } /* Home sections */ .home-section{ border-radius: 22px; border: 1px solid rgba(255,255,255,.10); background: var(--card-blue); box-shadow: var(--shadow); overflow:hidden; } .home-section .h{ padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.10); display:flex; justify-content:space-between; align-items:center; gap:10px; } .home-section .h .t{ font-weight: 950; letter-spacing: .04em; } .home-section .h a{ color: rgba(255,255,255,.75); text-decoration:none; font-weight: 800; } .home-section .h a:hover{ color:#fff; } .home-section .b{ padding: 14px 16px; } .table-mini{ width:100%; border-collapse: collapse; } .table-mini th{ color: rgba(255,255,255,.60); font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 900; padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,.10); } .table-mini td{ padding: 10px 6px; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: middle; } .table-mini tr:hover td{ background: rgba(255,255,255,.03); } .next-match-item{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); } .next-match-item:last-child{ border-bottom: 0; } .nm-left{ min-width:0; } .nm-title{ font-weight: 950; color:#fff; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; } .nm-meta{ color: rgba(255,255,255,.70); font-size: .86rem; margin-top: 2px; } .nm-chip{ border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); padding: 6px 10px; font-weight: 900; color:#fff; font-size: .82rem; white-space: nowrap; } .scorer-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); } .scorer-item:last-child{ border-bottom:0; } .scorer-left{ display:flex; align-items:center; gap:10px; min-width:0; } .scorer-rank{ width: 26px; height: 26px; border-radius: 10px; display:flex; align-items:center; justify-content:center; font-weight: 950; background: rgba(246,195,67,.14); border: 1px solid rgba(246,195,67,.26); color:#fff; } .scorer-name{ font-weight: 950; color:#fff; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; } .scorer-team{ color: rgba(255,255,255,.70); font-size: .86rem; } .scorer-goals{ font-weight: 950; font-size: 1.05rem; } .home-hero{ border-radius: 22px; border: 1px solid rgba(255,255,255,.10); background: radial-gradient(circle at center, var(--mid-blue) 0%, #071A4A 45%, #040D26 100%); box-shadow: var(--shadow); position: relative; overflow: hidden; } .home-hero::after{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 30% 20%, rgba(57,198,255,0.22), transparent 45%); pointer-events:none; } .home-hero-inner{ position: relative; z-index: 1; } .hero-kicker{ display:inline-flex; align-items:center; gap:.55rem; padding:.35rem .75rem; border-radius:999px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.20); color: rgba(255,255,255,.78); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800; } .hero-title{ color: #EAF2FF; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; font-size: clamp(1.75rem, 3.6vw, 3rem); margin: 10px 0 6px; text-shadow: 0 0 12px rgba(57,198,255,0.35); } .hero-subtitle{ color: rgba(255,255,255,.78); max-width: 720px; line-height: 1.5; } .hero-ctas{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 16px; } .btn-primary-neon{ background: var(--neon-blue); color: var(--deep-blue); font-weight: 900; border: 0; padding: 10px 14px; border-radius: 14px; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 0 14px rgba(57,198,255,0.35); } .btn-primary-neon:hover{ filter: brightness(1.05); color: var(--deep-blue); } .btn-outline-neon{ background: transparent; color: #fff; font-weight: 900; border: 1px solid rgba(255,255,255,.22); padding: 10px 14px; border-radius: 14px; letter-spacing: .04em; text-transform: uppercase; } .btn-outline-neon:hover{ border-color: rgba(57,198,255,.75); box-shadow: 0 0 10px rgba(57,198,255,0.22); color:#fff; } /* Hero buttons: icons + no underline */ .btn-primary-neon, .btn-outline-neon{ text-decoration: none !important; display: inline-flex; align-items: center; gap: 10px; } .btn-primary-neon:hover, .btn-primary-neon:focus, .btn-outline-neon:hover, .btn-outline-neon:focus{ text-decoration: none !important; } .btn-primary-neon i, .btn-outline-neon i{ font-size: 1.05em; line-height: 1; opacity: .95; } .broadcast-grid{ display:grid; grid-template-columns: 1fr; gap: 12px; margin-top: -18px; position: relative; z-index: 2; } @media (min-width: 992px){ .broadcast-grid{ grid-template-columns: 1.3fr 1fr 1fr; } } .broadcast-card{ background: var(--card-blue); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; padding: 14px; position: relative; overflow: hidden; box-shadow: 0 18px 60px rgba(0,0,0,.25); } .broadcast-card::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 20% 10%, rgba(57,198,255,0.18), transparent 45%); pointer-events:none; } .broadcast-card:hover{ border-color: rgba(57,198,255,.65); box-shadow: 0 0 14px rgba(57,198,255,0.20); transform: translateY(-1px); } .bc-label{ color: rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:1.6px; font-weight:800; font-size:.72rem; } .bc-title{ font-weight: 900; letter-spacing:.06em; text-transform:uppercase; margin: 8px 0 6px; } .bc-meta{ color: rgba(255,255,255,.78); font-size:.86rem; } .hero-stack{ margin-top: 14px; display:flex; gap: 10px; flex-wrap: wrap; } .hero-chip{ display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .75rem; border-radius:999px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.16); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; color: rgba(255,255,255,.82); } .hero-chip--accent{ border-color: rgba(57,198,255,.55); background: rgba(57,198,255,.12); box-shadow: 0 0 14px rgba(57,198,255,0.14); } /* ============================== HOME — Top Stats (PRO+) ============================== */ .stat-grid{ display:grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 768px){ .stat-grid{ grid-template-columns: repeat(3, 1fr); } } .stat-card{ display:block; text-decoration:none; background: var(--card-blue); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 14px; position: relative; overflow:hidden; box-shadow: 0 18px 60px rgba(0,0,0,.25); } .stat-card::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 20% 10%, rgba(57,198,255,0.14), transparent 45%); pointer-events:none; } .stat-card:hover{ border-color: rgba(57,198,255,.55); box-shadow: 0 0 14px rgba(57,198,255,0.18); transform: translateY(-1px); } .stat-k{ color: rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:1.6px; font-weight:900; font-size:.72rem; } .stat-main{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-top: 10px; } .stat-left{ display:flex; align-items:center; gap: 10px; min-width: 0; } .mini-avatar{ width: 36px; height: 36px; border-radius: 999px; object-fit: cover; border: 1px solid rgba(255,255,255,.20); } .mini-avatar.placeholder{ display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,.16); color: rgba(255,255,255,.85); font-weight: 900; } .stat-title{ font-weight: 900; text-transform:uppercase; letter-spacing:.04em; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; max-width: 180px; } .stat-sub{ color: rgba(255,255,255,.75); font-size:.84rem; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; max-width: 180px; } .stat-value{ font-weight: 900; letter-spacing: .04em; padding: 8px 12px; border-radius: 999px; background: rgba(57,198,255,.16); border: 1px solid rgba(57,198,255,.45); color: #EAF2FF; min-width: 52px; text-align:center; } .stat-empty{ margin-top: 10px; color: rgba(255,255,255,.78); font-size:.9rem; } .stat-foot{ margin-top: 8px; color: rgba(255,255,255,.55); font-size:.75rem; } /* ============================== PLAYOFFS — Road to the Final ============================== */ .playoffs-wrapper{ background: radial-gradient(circle at center, var(--mid-blue) 0%, #071A4A 45%, #040D26 100%); border-radius: 22px; border: 1px solid rgba(255,255,255,.10); box-shadow: var(--shadow); padding: 18px 16px; overflow-x: auto; } /* Playoffs: bracket lines (SVG) */ .bracket-pro{ position: relative; } .bracket-lines{ position:absolute; inset:0; width:auto; height:auto; display:block; pointer-events:none; overflow:visible; z-index: 1; } .bracket-line.active{ stroke: var(--neon-blue, #39C6FF); stroke-width: 3px; filter: drop-shadow(0 0 6px rgba(57,198,255,0.6)); } .bracket-line.inactive{ stroke: rgba(255,255,255,0.25); stroke-width: 1.5px; } .playoffs-title{ color: #EAF2FF; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; text-align:center; margin: 0 0 12px; text-shadow: 0 0 12px rgba(57,198,255,0.35); } .trophy-hero{ width: 160px; margin: 6px auto 18px; display:block; filter: drop-shadow(0 0 25px rgba(57,198,255,0.6)); } /* if trophy is emoji/text */ .trophy-hero{ font-size: 86px; line-height: 1; width:auto; } /* Bracket layout (ported + recolored) */ .bracket-pro{ position: relative; display:flex; gap: 18px; overflow-x:auto; padding: 4px 0 10px; } .round-pro, .trophy-core{ position: relative; z-index: 2; } .round-pro{ min-width: 320px; position: relative; } .round-pro .round-title{ display:flex; align-items:center; justify-content:space-between; padding: 10px 10px 8px; border-radius: 16px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); } .round-pro .round-title .name{ font-weight: 900; letter-spacing:.06em; text-transform:uppercase; } .round-pro .round-title .tag{ font-size:.72rem; padding: .25rem .55rem; border-radius:999px; background: rgba(57,198,255,.14); border:1px solid rgba(57,198,255,.28); color: rgba(255,255,255,.92); font-weight:800; } .match-pro{ margin-top: 10px; border-radius: 18px; padding: 12px; background: rgba(6,20,58,.35); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 60px rgba(0,0,0,.25); } .match-pro .teamrow{ display:flex; align-items:center; justify-content:space-between; gap: 10px; padding: 9px 10px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); } .match-pro .teamrow.win{ border-color: rgba(57,198,255,.55); box-shadow: 0 0 0 1px rgba(57,198,255,.18), 0 0 18px rgba(57,198,255,.12); } .match-pro .teamrow.lose{ opacity: .78; border-color: rgba(255,255,255,.08); } .match-pro .teamrow + .teamrow{ margin-top: 8px; } .match-pro .left{ display:flex; align-items:center; gap: 10px; min-width:0; } .match-pro .abbr{ width: 34px; height: 34px; border-radius: 14px; display:grid; place-items:center; font-weight: 900; background: linear-gradient(135deg, rgba(11,44,122,.95), rgba(57,198,255,.65)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 0 14px rgba(57,198,255,.18); } .match-pro .logo{ width: 34px; height: 34px; border-radius: 14px; display:grid; place-items:center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 0 14px rgba(57,198,255,.12); overflow:hidden; } .match-pro .logo img{ width:100%; height:100%; object-fit:cover; display:block; } .match-pro .seed{ width: 26px; height: 26px; border-radius: 10px; display:grid; place-items:center; background: rgba(57,198,255,.14); border:1px solid rgba(57,198,255,.28); font-weight:900; font-size:.78rem; } .match-pro .teamname{ font-weight: 900; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; letter-spacing:.02em; } .match-pro .meta{ display:flex; align-items:center; justify-content:space-between; margin-top: 10px; gap: 10px; } .match-pro .legs{ display:flex; gap: 6px; flex-wrap: wrap; justify-content:flex-end; } .leg-chip{ background: rgba(57,198,255,0.12); border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.85); padding: 2px 8px; border-radius: 999px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; } .badge-soft{ display:inline-flex; align-items:center; gap:.35rem; border-radius:999px; padding:.35rem .6rem; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.16); color: rgba(255,255,255,.9); font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:.72rem; } .ultra-card{ background: var(--panel); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 10px 34px rgba(0,0,0,.28); } .ultra-card.glow{ border-color: rgba(0,163,255,.22); box-shadow: 0 0 0 1px rgba(0,163,255,.14), 0 18px 60px rgba(0,163,255,.10); } .ultra-card .ultra-card-h{ padding: 1rem 1rem .55rem 1rem; } .ultra-card .ultra-card-b{ padding: .85rem 1rem 1rem 1rem; } @media (max-width: 575.98px){ .ultra-card .ultra-card-h{ padding: .85rem .85rem .5rem .85rem; } .ultra-card .ultra-card-b{ padding: .75rem .85rem .85rem .85rem; } } .ultra-pill{ display:inline-flex; gap:.5rem; align-items:center; padding:.28rem .7rem; border-radius:999px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); color: var(--muted); font-size:.8rem; } .team-badge{ display:flex; align-items:center; gap:.6rem; min-width:0; } .team-badge img{ width:30px; height:30px; object-fit:cover; border-radius:10px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); } .team-badge .name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Mobile: allow team names to wrap (prevents overflow in Fixture/Partido cards) */ @media (max-width: 575.98px){ .team-badge{ gap:.5rem; } .team-badge img{ width:28px; height:28px; border-radius:10px; } .team-badge .name{ white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } .score-chip{ min-width:64px; text-align:center; font-weight:900; letter-spacing:.08em; padding:.36rem .75rem; border-radius: 14px; border: 1px solid rgba(0,163,255,.42); background: linear-gradient(135deg, rgba(0,163,255,.26), rgba(0,0,0,.26)); } @media (max-width: 575.98px){ .score-chip{ min-width: 56px; padding: .32rem .6rem; } } .score-chip.win{ border-color: rgba(57,198,255,.85); box-shadow: 0 0 0 1px rgba(57,198,255,.22), 0 0 18px rgba(57,198,255,.18); } /* Fixture tiles (estilo banner) */ .fx-match-tile{ display:grid; grid-template-columns: 1fr auto 1fr; gap: .85rem; align-items:center; padding: .75rem .95rem; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: radial-gradient(900px 280px at 10% 0%, rgba(255,255,255,.06), transparent 60%), radial-gradient(900px 280px at 90% 100%, rgba(0,163,255,.10), transparent 60%), linear-gradient(135deg, rgba(0,0,0,.14), rgba(0,0,0,.26)); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; } .fx-match-tile:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 12px 30px rgba(0,0,0,.32); } .fx-match-tile .fx-side{ display:flex; align-items:center; gap:.6rem; min-width:0; } .fx-match-tile .fx-side.fx-away{ justify-content:flex-end; } .fx-match-tile .fx-logo{ width: 38px; height: 38px; border-radius: 999px; display:inline-flex; align-items:center; justify-content:center; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); overflow:hidden; } .fx-match-tile .fx-logo img{ width:100%; height:100%; object-fit:cover; } .fx-match-tile .fx-logo.fx-logo--ph{ font-size: 18px; opacity: .85; } .fx-match-tile .fx-code{ font-weight: 900; letter-spacing: .14em; font-size: 1.02rem; color: rgba(255,255,255,.92); } .fx-match-tile .fx-center{ text-align:center; min-width: 92px; } .fx-match-tile .fx-main{ font-weight: 950; letter-spacing: .08em; font-size: 1.35rem; line-height: 1.05; } .fx-match-tile .fx-sub{ margin-top: .2rem; font-size: .78rem; color: var(--muted); white-space: nowrap; } .fx-match-tile.fx-compact{ padding: .55rem .7rem; border-radius: 14px; } .fx-match-tile.fx-compact .fx-logo{ width: 32px; height: 32px; } .fx-match-tile.fx-compact .fx-code{ font-size: .92rem; } .fx-match-tile.fx-compact .fx-main{ font-size: 1.15rem; } @media (max-width: 575.98px){ .fx-match-tile{ gap:.65rem; padding: .65rem .75rem; } .fx-match-tile .fx-logo{ width: 34px; height: 34px; } .fx-match-tile .fx-code{ font-size: .95rem; } .fx-match-tile .fx-center{ min-width: 84px; } .fx-match-tile .fx-main{ font-size: 1.18rem; } .fx-match-tile .fx-sub{ font-size: .72rem; } } .score-chip.lose{ border-color: rgba(255,255,255,.18); opacity: .65; } /* TV broadcast: goal flash */ @keyframes lfaGoalFlash { 0%{ transform:scale(1); box-shadow:0 0 0 rgba(0,0,0,0); } 20%{ transform:scale(1.06); box-shadow:0 0 0 3px rgba(0,163,255,.25), 0 0 24px rgba(0,163,255,.22); } 60%{ transform:scale(1.02); box-shadow:0 0 0 2px rgba(255,255,255,.10), 0 0 18px rgba(0,163,255,.14); } 100%{ transform:scale(1); box-shadow:0 0 0 rgba(0,0,0,0); } } .goal-flash{ animation:lfaGoalFlash .9s ease-out; } /* Playoffs: decided match emphasis */ .match-pro.decided{ border-color: rgba(57,198,255,.22); box-shadow: 0 0 0 1px rgba(57,198,255,.14), 0 18px 60px rgba(57,198,255,.08); } .match-pro .teamrow{ transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; } .match-pro.decided .teamrow:hover{ border-color: rgba(57,198,255,.35); transform: translateY(-1px); } .badge-soft.badge-win{ border-color: rgba(57,198,255,.35); box-shadow: 0 0 18px rgba(57,198,255,.10) inset; } /* Trophy core (centered, never blocks mobile) */ .trophy-core{ min-width: 200px; border-radius: 18px; padding: 14px 12px; text-align:center; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.16)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 60px rgba(0,0,0,.25); } .trophy-core .cup{ font-size: 52px; line-height:1; filter: drop-shadow(0 0 18px rgba(57,198,255,.30)); } .trophy-core .txt{ font-weight: 900; letter-spacing:.08em; text-transform: uppercase; margin-top: 6px; } .trophy-core .sub{ color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing:.18em; font-size:.72rem; } @media (min-width: 992px){ /* On desktop, float trophy in the visual center (no overlap with boxes) */ .bracket-pro{ padding-top: 18px; } .trophy-core{ position: sticky; top: 90px; align-self: center; } } @media (max-width: 991px){ /* On mobile, keep horizontal bracket but lift trophy above to avoid overlap */ .bracket-pro{ padding-top: 160px; } .trophy-core{ position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: min(320px, 92%); } } .ultra-table{ --bs-table-bg: transparent; --bs-table-color: #fff; --bs-table-border-color: rgba(255,255,255,.10); } .ultra-table thead th{ position: sticky; top: 64px; background: rgba(0,0,0,.70); backdrop-filter: blur(10px); z-index: 2; } .btn-ultra{ background: var(--accent); border-color: var(--accent); color:#071019; font-weight:800; letter-spacing:.06em; text-transform:uppercase; border-radius: 14px; padding:.55rem 1rem; box-shadow: 0 14px 40px rgba(0,163,255,.18); } .btn-ultra:hover{ filter: brightness(1.06); } .btn-ultra-outline{ border: 1px solid rgba(255,255,255,.20); color:#fff; border-radius: 14px; padding:.55rem 1rem; background: rgba(255,255,255,.03); } .btn-ultra-outline:hover{ background: rgba(255,255,255,.06); } a{ color:#cfefff; } a:hover{ color:#ffffff; } .ultra-footer{ border-top: 1px solid rgba(255,255,255,.10); padding-top: 1.1rem; color: var(--muted2); } /* PHASE4 — ULTRA BROADCAST */ body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } .badge-neutral,.badge-scheduled,.badge-live,.badge-finished,.badge-wo{ display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .6rem; border-radius:999px; border:1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.72rem; } .badge-live{ border-color: rgba(255,0,92,.45); box-shadow:0 0 0 1px rgba(255,0,92,.22), 0 0 28px rgba(255,0,92,.18) inset; } .badge-live::before{ content:"●"; color:#ff005c; font-size:.85rem; line-height:1; } .badge-scheduled{ border-color: rgba(0,163,255,.35); } .badge-finished{ border-color: rgba(53,255,179,.28); } .badge-wo{ border-color: rgba(255,196,0,.32); } .match-hero{ position:relative; overflow:hidden; } .match-hero::before{ content:""; position:absolute; inset:-2px; background: radial-gradient(700px 240px at 18% 18%, rgba(0,163,255,.22), transparent 60%), radial-gradient(700px 260px at 82% 8%, rgba(53,255,179,.14), transparent 62%), radial-gradient(900px 320px at 50% 120%, rgba(255,0,92,.14), transparent 60%); pointer-events:none; } .match-hero > *{ position:relative; } .scoreboard{ display:grid; grid-template-columns: 1fr auto 1fr; gap: .9rem; align-items:center; } /* Partido (match hero) — logos grandes y nombre debajo (estilo broadcast) */ .match-hero .scoreboard .team-badge a.team-stack{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45rem; min-width:0; } .match-hero .scoreboard .team-badge a.team-stack .name{ white-space: normal; text-align:center; line-height:1.05; font-weight:900; } .match-hero .scoreboard .team-badge a.team-stack img.team-logo{ width: 58px; height: 58px; border-radius: 18px; object-fit: cover; } @media (max-width: 575.98px){ .match-hero .scoreboard{ gap:.7rem; } .match-hero .scoreboard .team-badge a.team-stack img.team-logo{ width: 46px; height: 46px; border-radius: 16px; } .match-hero .scoreboard .team-badge a.team-stack .name{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } .score-big{ font-size: clamp(1.2rem, 2.2vw, 2rem); font-weight:800; padding:.65rem 1.05rem; border-radius:16px; border:1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); box-shadow: var(--shadow); } .kicker{ font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; opacity:.8; } /* Match Center — ULTRA */ .match-scorers{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; } .scorers-col{ display:flex; gap:8px; flex-wrap:wrap; } .scorer-pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); max-width: 100%; } .scorer-name{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 220px; } .scorer-min{ opacity:.75; font-size:.85rem; } .match-facts{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } .match-facts .fact{ border:1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border-radius: 14px; padding: 10px 12px; } .match-facts .label{ opacity:.7; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; } .match-facts .value{ font-weight:800; margin-top:2px; } .half-sep{ margin: 10px 0 2px; padding: 8px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(6,20,58,.55); font-weight:900; letter-spacing:.12em; text-transform:uppercase; font-size:.75rem; color:#EAF2FF; text-align:center; } .event-card{ display:grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items:center; padding: 12px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); } .event-left{ display:flex; align-items:center; gap:10px; } .event-ico{ width:28px; height:28px; display:grid; place-items:center; border-radius:12px; background: rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.10); } .event-top{ display:flex; align-items:baseline; justify-content:space-between; gap: 10px; } .event-type{ font-weight:900; letter-spacing:.08em; font-size:.78rem; text-transform:uppercase; } .event-team{ max-width: 210px; } .event-main{ margin-top: 2px; } .event-right{ min-width: 120px; text-align:right; } .event-home{ box-shadow: inset 3px 0 0 rgba(57,198,255,.85); } .event-away{ box-shadow: inset 3px 0 0 rgba(53,255,179,.85); } .sub-row{ display:flex; flex-wrap:wrap; gap:8px; } .sub-pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius: 999px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); } .sub-pill img{ width:20px; height:20px; border-radius:8px; object-fit:cover; border:1px solid rgba(255,255,255,.18); } .sub-pill.out{ box-shadow: inset 0 0 0 1px rgba(255,0,92,.22); } .sub-pill.in{ box-shadow: inset 0 0 0 1px rgba(53,255,179,.22); } .match-stats-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } .stat-box{ border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.16); border-radius: 16px; padding: 12px; } .stat-box .label{ opacity:.7; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; } .stat-box .value{ margin-top:6px; font-weight:900; display:flex; gap:8px; flex-wrap:wrap; } .stat-box .pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); } .stat-box .pill.yellow{ border-color: rgba(255,196,0,.32); } .stat-box .pill.red{ border-color: rgba(255,0,92,.28); } @media (max-width: 576px){ .match-scorers{ grid-template-columns: 1fr; } .match-facts{ grid-template-columns: 1fr; } .event-card{ grid-template-columns: 1fr; } .event-right{ min-width: auto; text-align:left; } } @media (max-width: 576px){ .event-right{ display:none; } .scorer-name{ max-width: 160px; } } .avatar{ width:44px; height:44px; border-radius:16px; object-fit:cover; border:1px solid rgba(255,255,255,.18); box-shadow: 0 10px 25px rgba(0,0,0,.35); } .avatar-sm{ width:30px; height:30px; border-radius:12px; } .stack{ position:relative; display:inline-flex; } .stack img{ margin-left:-10px; } .stack img:first-child{ margin-left:0; } .timeline{ position:relative; padding-left: 18px; } .timeline::before{ content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; border-radius:2px; background: linear-gradient(180deg, rgba(0,163,255,.35), rgba(255,255,255,.08), rgba(53,255,179,.25)); } .t-item{ position:relative; } .t-item::before{ content:""; position:absolute; left:-16px; top:18px; width:10px; height:10px; border-radius:999px; background: rgba(0,163,255,.85); box-shadow: 0 0 0 3px rgba(0,163,255,.14), 0 0 18px rgba(0,163,255,.25); } .t-item.red::before{ background: rgba(255,0,92,.95); box-shadow: 0 0 0 3px rgba(255,0,92,.14), 0 0 18px rgba(255,0,92,.22); } .t-item.yellow::before{ background: rgba(255,196,0,.95); box-shadow: 0 0 0 3px rgba(255,196,0,.14), 0 0 18px rgba(255,196,0,.20); } .t-item.goal::before{ background: rgba(53,255,179,.95); box-shadow: 0 0 0 3px rgba(53,255,179,.14), 0 0 18px rgba(53,255,179,.20); } .lineup{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; } @media (max-width: 991px){ .lineup{ grid-template-columns: 1fr; } } .player-card{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.7rem .75rem; border-radius:16px; border:1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); } .player-card:hover{ border-color: rgba(0,163,255,.35); transform: translateY(-1px); } .dt-card{ border-color: rgba(57,198,255,.55); box-shadow: 0 0 14px rgba(57,198,255,.18); background: radial-gradient(circle at 20% 10%, rgba(57,198,255,.16), rgba(255,255,255,.03)); } .badge-dt{ display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; letter-spacing:.6px; padding: .25rem .45rem; border-radius:10px; color:#06143A; background:#39C6FF; box-shadow: 0 0 12px rgba(57,198,255,.25); } .p-meta{ min-width:0; } .p-name{ font-weight:700; line-height:1.2; } .p-sub{ font-size:.82rem; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .p-num{ font-weight:800; opacity:.85; width:36px; height:36px; display:grid; place-items:center; border-radius:14px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); } .ultra-tabs{ border-bottom:1px solid rgba(255,255,255,.12); } .ultra-tabs .nav-link{ color: rgba(255,255,255,.78); border:none !important; border-bottom:2px solid transparent !important; border-radius:14px 14px 0 0; padding:.55rem .85rem; font-weight:700; } .ultra-tabs .nav-link.active{ color: #fff; border-bottom-color: var(--accent) !important; background: rgba(255,255,255,.04) !important; } /* === ULTRA Filters Bar === */ .ultra-filters{ background: rgba(10,31,77,.55); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 12px 12px; position: sticky; top: 62px; /* under navbar */ z-index: 1030; backdrop-filter: blur(10px); } @media (min-width: 992px){ .ultra-filters{ top: 72px; } } .ultra-select{ background: rgba(6,20,58,.65); color: #fff; border: 1px solid rgba(255,255,255,.22); } .ultra-select:focus{ border-color: var(--neon-blue); box-shadow: 0 0 0 .2rem rgba(57,198,255,.15); } .btn-neon{ background: var(--neon-blue); color: var(--deep-blue); font-weight: 800; border: 0; border-radius: 10px; box-shadow: 0 0 14px rgba(57,198,255,0.25); } .btn-neon:hover{ filter: brightness(1.03); box-shadow: 0 0 16px rgba(57,198,255,0.35); } .filters-hint{ display:flex; align-items:center; gap:10px; height: 32px; padding-left: 8px; } .filters-hint .dot{ width:8px;height:8px;border-radius:50%; background: var(--neon-blue); box-shadow: 0 0 10px rgba(57,198,255,.45); } /* ============================== DISCIPLINA — PRO+ ============================== */ .disc-kpis{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 992px){ .disc-kpis{ grid-template-columns: repeat(4, 1fr); } } .disc-kpi{ background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 12px; position: relative; overflow:hidden; } .disc-kpi:before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 20% 10%, rgba(57,198,255,.14), transparent 45%); pointer-events:none; } .disc-kpi-k{ position:relative; color: rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:1.6px; font-weight:900; font-size:.72rem; } .disc-kpi-v{ position:relative; font-weight: 900; font-size: 1.15rem; letter-spacing:.04em; margin-top:6px; } .disc-tab{ display:inline-flex; align-items:center; gap:8px; padding:.45rem .65rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.12); color: rgba(255,255,255,.82); text-decoration:none; font-weight: 900; text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; } .disc-tab:hover{ border-color: rgba(57,198,255,.55); box-shadow: 0 0 10px rgba(57,198,255,.16); color:#fff; } .disc-tab.active{ border-color: rgba(57,198,255,.75); background: rgba(57,198,255,.12); box-shadow: 0 0 14px rgba(57,198,255,.14); } .disc-tab-n{ padding:.18rem .45rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.18); color:#fff; font-weight: 900; text-decoration: none; min-width: 32px; text-align:center; } .disc-toolbar{ display:flex; flex-direction:column; gap:8px; margin-bottom: 10px; } .disc-help{ color: rgba(255,255,255,.55); font-size:.78rem; } .disc-item, .disc-debt{ background: var(--card-blue); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 12px; display:flex; align-items:center; justify-content:space-between; gap: 10px; position:relative; overflow:hidden; } .disc-item:before, .disc-debt:before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 20% 10%, rgba(57,198,255,.10), transparent 45%); pointer-events:none; } .disc-item:hover, .disc-debt:hover{ border-color: rgba(57,198,255,.55); box-shadow: 0 0 14px rgba(57,198,255,.18); transform: translateY(-1px); } .disc-left{ display:flex; align-items:center; gap:10px; min-width:0; position:relative; } .disc-right{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; position:relative; } .disc-avatar{ width: 38px; height: 38px; border-radius: 999px; object-fit: cover; border: 1px solid rgba(255,255,255,.20); background: rgba(0,0,0,.18); flex: 0 0 auto; } .disc-avatar--ph{ display:flex; align-items:center; justify-content:center; font-weight: 900; color: rgba(255,255,255,.88); text-transform:uppercase; } .disc-teamlogo{ width: 18px; height: 18px; border-radius: 8px; object-fit: cover; border: 1px solid rgba(255,255,255,.16); } .disc-name{ font-weight: 900; text-transform: uppercase; letter-spacing:.04em; } .disc-sub{ color: rgba(255,255,255,.75); font-size:.84rem; } .disc-dot{ opacity:.6; } .disc-reason{ opacity:.9; } .disc-chip{ display:inline-flex; align-items:baseline; gap:6px; padding:.35rem .65rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.16); font-weight: 900; letter-spacing:.06em; text-transform:uppercase; font-size:.72rem; color: rgba(255,255,255,.86); white-space:nowrap; } .disc-chip-s{ opacity:.75; font-size:.68rem; letter-spacing:.04em; } .disc-chip--accent{ border-color: rgba(57,198,255,.75); background: rgba(57,198,255,.12); box-shadow: 0 0 12px rgba(57,198,255,.14); } .disc-chip--danger{ border-color: rgba(255,59,59,.55); background: rgba(255,59,59,.12); } .disc-chip--warning{ border-color: rgba(255,196,0,.55); background: rgba(255,196,0,.12); } .disc-chip--muted{ border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: rgba(255,255,255,.78); } @media (max-width: 576px){ .disc-item, .disc-debt{ align-items:flex-start; } .disc-right{ justify-content:flex-start; } } /* ========================= PROFILES ULTRA (Team/Player) ========================= */ .profile-hero{ background: radial-gradient(circle at center, #0B2C7A 0%, #071A4A 45%, #040D26 100%); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; position: relative; overflow: hidden; } .profile-hero::after{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 30% 20%, rgba(57,198,255,0.22), transparent 45%); pointer-events:none; } .profile-inner{ position:relative; } .profile-name{ letter-spacing: 1.5px; text-transform: uppercase; text-shadow: 0 0 12px rgba(57,198,255,.35); } /* ============================= Player profile (ULTRA PRO) ============================= */ .player-dash{ display: grid; grid-template-columns: 420px 1fr; grid-template-areas: "card perf" "card bottom"; gap: 14px; margin-bottom: 14px; } @media (max-width: 991.98px){ .player-dash{ grid-template-columns: 1fr; grid-template-areas: "card" "perf" "bottom"; } } /* IMPORTANT: .player-card también se usa en listados. Aquí forzamos el estilo del perfil SOLO dentro del dashboard. */ .player-dash .player-card{ grid-area: card; display:block; padding:0; overflow:hidden; } .player-dash .player-panel{ display:block; } .player-dash > .player-panel{ grid-area: perf; } .player-bottom{ grid-area: bottom; display:grid; grid-template-columns: 1fr 340px; gap: 14px; } @media (max-width: 991.98px){ .player-bottom{ grid-template-columns: 1fr; } } .player-card{ overflow: hidden; } .player-card-top{ display: grid; /* Estilo tipo móvil también en PC: foto arriba, info abajo */ grid-template-columns: 1fr; gap: 12px; padding: 14px; background: radial-gradient(520px 320px at 18% 18%, rgba(11,139,214,.38), transparent 60%), radial-gradient(520px 320px at 92% 10%, rgba(246,195,67,.18), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); } .player-photo{ border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); overflow: hidden; min-height: 190px; box-shadow: 0 20px 60px rgba(0,0,0,.35); } .player-photo img{ width: 100%; height: 100%; object-fit: cover; display:block; } .player-photo-ph{ height: 100%; display:grid; place-items:center; font-size: 44px; opacity:.8; } /* Foto PRO (sin deformación, recorte elegante como móvil) */ .player-photo-wrapper{ position: relative; height: 300px; } .player-photo-wrapper .player-photo-img{ width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .4s ease; } .player-photo-wrapper:hover .player-photo-img{ transform: scale(1.05); } @media (max-width: 768px){ .player-photo-wrapper{ height: 340px; } } .player-main{ min-width: 0; } .player-name{ font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; line-height: 1.05; text-shadow: 0 0 14px rgba(11,139,214,.30); } .player-points{ text-align: right; padding-left: 6px; } .player-points-v{ font-weight: 950; font-size: 28px; line-height: 1; } .player-points-k{ font-size: 12px; text-transform: uppercase; letter-spacing: .10em; opacity: .75; } .player-badges{ display:flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .player-mini-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 12px; } @media (max-width: 575.98px){ .player-mini-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } } .mini-item{ padding: 10px 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); } .mini-k{ font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .72; } .mini-v{ font-weight: 900; font-size: 18px; line-height: 1.1; } .player-actions{ display:flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .player-card-bottom{ padding: 0 14px 14px; } .player-panel .ultra-card-b{ padding: 14px; } .player-chart-wrap{ position: relative; height: 220px; } @media (max-width: 991.98px){ .player-chart-wrap{ height: 200px; } } .player-stats{ display:flex; flex-direction: column; gap: 10px; } .ps-row{ display:flex; justify-content: space-between; align-items:center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); } .ps-row span{ opacity: .78; } .ps-row b{ font-weight: 900; } .player-tab.active{ border-color: rgba(11,139,214,.85) !important; background: rgba(11,139,214,.22) !important; } .profile-badges{ display:flex; flex-wrap:wrap; gap:8px; } .stat-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; } @media(min-width: 992px){ .stat-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } } .stat-tile{ background: rgba(10,31,77,.75); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 12px 12px; overflow:hidden; position:relative; } .stat-tile::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 20% 10%, rgba(57,198,255,0.18), transparent 55%); pointer-events:none; } .stat-k{ color: rgba(255,255,255,.65); font-weight:700; font-size:11px; letter-spacing:1.3px; text-transform:uppercase; } .stat-v{ font-weight:900; font-size:22px; letter-spacing:.5px; margin-top:4px; } .match-list{ display:flex; flex-direction:column; gap:10px; } .match-row{ background: rgba(10,31,77,.55); border:1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 12px 12px; display:flex; justify-content:space-between; gap:12px; align-items:center; } .match-row:hover{ border-color: rgba(57,198,255,.55); box-shadow: 0 0 14px rgba(57,198,255,.16); } .match-left{ min-width:0; display:flex; align-items:center; gap:10px; } .match-teams{ min-width:0; } .match-title{ font-weight:800; letter-spacing:.7px; text-transform:uppercase; font-size:13px; } .match-sub{ color: rgba(255,255,255,.65); font-size:12px; margin-top:2px; } .match-right{ display:flex; align-items:center; gap:10px; } .badge-live{ background: rgba(255,59,59,.12); border:1px solid rgba(255,59,59,.55); color:#fff; padding:4px 8px; border-radius:999px; font-weight:800; font-size:11px; letter-spacing:1px; } .badge-finished{ background: rgba(0,255,136,.12); border:1px solid rgba(0,255,136,.45); color:#fff; padding:4px 8px; border-radius:999px; font-weight:800; font-size:11px; letter-spacing:1px; } .badge-scheduled{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.9); padding:4px 8px; border-radius:999px; font-weight:800; font-size:11px; letter-spacing:1px; } .score-chip{ min-width:42px; justify-content:center; } .small-link{ color: var(--accent); text-decoration:none; } .small-link:hover{ text-decoration:underline; } /* ULTRA: Staff blocks */ .ultra-pill.mini{ display:inline-flex; align-items:center; gap:8px; padding:4px 10px; font-size:11px; letter-spacing:1px; text-transform:uppercase; opacity:.9; width:fit-content; border-radius:999px; margin-top:10px; } /* Offcanvas (mobile menu) */ .offcanvas{ position: fixed; bottom: 0; z-index: 1045; display: flex; flex-direction: column; max-width: 100%; visibility: hidden; background-clip: padding-box; outline: 0; transition: transform .28s ease, visibility .28s ease; } .offcanvas.offcanvas-start{ top: 0; left: 0; width: 340px; transform: translateX(-100%); } .offcanvas.offcanvas-end{ top: 0; right: 0; width: 340px; transform: translateX(100%); } .offcanvas.show{ transform: none; visibility: visible; } /* Desktop safety: never show mobile offcanvas on lg+ (prevents "mobile menu visible in PC") */ @media (min-width: 992px){ .offcanvas{ display: none !important; } .offcanvas.show{ display: none !important; transform: translateX(100%) !important; visibility: hidden !important; } .offcanvas-backdrop{ display: none !important; opacity: 0 !important; } } /* Offcanvas end border */ .offcanvas-end.ultra-offcanvas{ border-left: 1px solid rgba(255,255,255,.08); border-right: 0; } .ultra-offcanvas{ background: rgba(10,12,18,.98); backdrop-filter: blur(10px); border-right: 0; } .ultra-offcanvas .list-group-item{ border: 0; border-radius: 12px; margin-bottom: 6px; } .ultra-offcanvas .list-group-item:hover{ background: rgba(0,163,255,.12); } .ultra-offcanvas .list-group-item.active{ background: rgba(0,163,255,.22); } /* === Kings-like Mobile Menu (Offcanvas End) === */ .ultra-offcanvas{ background: rgba(8,10,16,.98); backdrop-filter: blur(14px); } .offcanvas-end.ultra-offcanvas{ border-left: 1px solid rgba(255,255,255,.10); border-right: 0; } @media (max-width: 991.98px){ .offcanvas.offcanvas-end{ width: 100vw; max-width: 100vw; } .offcanvas-end.ultra-offcanvas{ border-radius: 0; } .offcanvas-backdrop.show{ opacity: .86; } .ultra-offcanvas .offcanvas-header{ padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08); } .ultra-offcanvas .offcanvas-title{ font-weight: 800; letter-spacing: .2px; } .ultra-offcanvas .offcanvas-body{ padding: 16px 18px 18px; } /* iOS safe-area */ .ultra-offcanvas .offcanvas-body{ padding-bottom: calc(18px + env(safe-area-inset-bottom)); } .ultra-offcanvas .filters-hint, .ultra-offcanvas .mt-2.small{ opacity:.85; } .ultra-offcanvas .list-group{ margin-top: 10px; } .ultra-offcanvas .list-group-item{ display:flex; align-items:center; gap:12px; padding: 12px 14px; border-radius: 14px; margin-bottom: 8px; font-size: 16px; font-weight: 700; letter-spacing: .1px; background: rgba(255,255,255,.03); } .ultra-offcanvas .list-group-item i{ width: 34px; height: 34px; display:inline-flex; align-items:center; justify-content:center; border-radius: 12px; background: rgba(0,163,255,.14); box-shadow: 0 0 0 1px rgba(0,163,255,.18) inset; } .ultra-offcanvas .list-group-item:hover{ background: rgba(0,163,255,.10); } .ultra-offcanvas .list-group-item.active{ background: rgba(0,163,255,.18); box-shadow: 0 0 0 1px rgba(0,163,255,.22) inset, 0 18px 40px rgba(0,0,0,.35); } .ultra-offcanvas .offcanvas-actions{ display:flex; gap:10px; margin-top: 14px; } .ultra-offcanvas .offcanvas-actions .btn{ flex:1; padding:10px 12px; font-weight:800; border-radius: 12px; } } /* ============================================================ STANDINGS (Champions style) ============================================================ */ .standings-scroll{ max-height: 72vh; overflow: auto; border-radius: 16px; border: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.15); } .standings-table thead th{ position: sticky; top: 0; z-index: 3; background: linear-gradient(90deg, rgba(8,18,34,0.96), rgba(10,24,48,0.96)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.08); } .standings-table tbody td{ border-bottom: 1px solid rgba(255,255,255,0.06); } .standings-table tbody tr:hover{ background: rgba(255,255,255,0.03); } .team-name{ display:flex; align-items:center; gap:10px; } .fav-btn{ width: 34px; height: 34px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.55); display:inline-flex; align-items:center; justify-content:center; transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease; } .fav-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.22); } .fav-btn.is-active{ background: rgba(255,199,0,0.12); border-color: rgba(255,199,0,0.35); color: rgba(255,199,0,0.95); box-shadow: 0 0 0 1px rgba(255,199,0,0.12) inset, 0 12px 36px rgba(255,199,0,0.08); } .team-title{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .min-w-0{ min-width: 0; } .pts-cell{ color: rgba(255,199,0,0.95); text-shadow: 0 0 18px rgba(255,199,0,0.18); } /* ZONE bars */ .standings-table tbody tr.zone-good{ box-shadow: inset 4px 0 0 rgba(0, 163, 255, 0.9); } .standings-table tbody tr.zone-mid{ box-shadow: inset 4px 0 0 rgba(255, 199, 0, 0.9); } .standings-table tbody tr.zone-bad{ box-shadow: inset 4px 0 0 rgba(255, 84, 84, 0.8); } .standings-table tbody tr.tr-leader{ background: linear-gradient(90deg, rgba(0,163,255,0.09), rgba(255,255,255,0)); } .standings-table tbody tr.tr-mine{ background: linear-gradient(90deg, rgba(255,199,0,0.10), rgba(255,255,255,0)); outline: 1px solid rgba(255,199,0,0.20); } /* legend */ .legend{ display:flex; gap:14px; flex-wrap: wrap; align-items:center; } .legend .item{ display:flex; align-items:center; gap:8px; font-size: 12px; opacity:.9; } .legend .sw{ width: 14px; height: 14px; border-radius: 4px; display:inline-block; } .legend .sw-zone-good{ background: rgba(0,163,255,0.9); box-shadow: 0 0 18px rgba(0,163,255,0.18); } .legend .sw-zone-mid{ background: rgba(255,199,0,0.92); box-shadow: 0 0 18px rgba(255,199,0,0.14); } .legend .sw-zone-bad{ background: rgba(255,84,84,0.85); box-shadow: 0 0 18px rgba(255,84,84,0.12); } /* form dots */ .form-dots{ display:flex; gap:6px; align-items:center; } .form-dots .fd{ width: 26px; height: 26px; border-radius: 10px; display:inline-flex; align-items:center; justify-content:center; font-size: 12px; font-weight: 900; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.03); } .form-dots .fd-w{ background: rgba(0, 200, 120, 0.18); border-color: rgba(0, 200, 120, 0.28); } .form-dots .fd-d{ background: rgba(255, 199, 0, 0.14); border-color: rgba(255, 199, 0, 0.22); } .form-dots .fd-l{ background: rgba(255, 84, 84, 0.14); border-color: rgba(255, 84, 84, 0.22); } @media (max-width: 991.98px){ .standings-scroll{ max-height: 66vh; } .fav-btn{ width: 32px; height: 32px; border-radius: 12px; } } /* Backdrop darker for mobile */ .offcanvas-backdrop.show{ opacity:.75; } /* === FIX: Fullscreen offcanvas menu + safe-area + scroll === */ @media (max-width: 991.98px){ .offcanvas.offcanvas-end.ultra-offcanvas{ width: 100vw !important; max-width: 100vw !important; height: 100dvh; /* modern */ height: 100vh; /* fallback */ display: flex; flex-direction: column; } .ultra-offcanvas .offcanvas-header{ flex: 0 0 auto; } .ultra-offcanvas .offcanvas-body{ display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; padding-bottom: calc(18px + env(safe-area-inset-bottom)); } .ultra-offcanvas .list-group{ flex: 1 1 auto; min-height: 0; overflow: auto; padding-bottom: 6px; } .ultra-offcanvas .offcanvas-actions{ margin-top: auto; padding-top: 12px; padding-bottom: env(safe-area-inset-bottom); } } /* Home mini standings (Inicio) - styled like Fixture cards */ .rank-chip{ min-width: 34px; height: 34px; display:flex; align-items:center; justify-content:center; font-weight: 900; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.22)); box-shadow: 0 6px 18px rgba(0,0,0,.28); } .pts-chip{ min-width: 62px; padding: .45rem .6rem; border-radius: 14px; text-align:center; border: 1px solid rgba(255,214,82,.38); background: linear-gradient(135deg, rgba(255,214,82,.22), rgba(0,0,0,.18)); } .standings-mini-row .team-badge img{ width: 26px; height: 26px; } /* Home: mini "Forma" (UEFA style) */ .form-mini{ display:flex; gap:6px; margin-top: 4px; } .form-chip{ width: 18px; height: 18px; border-radius: 6px; display:inline-flex; align-items:center; justify-content:center; font-size: 10px; font-weight: 900; line-height: 1; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 8px 20px rgba(0,0,0,.28); user-select: none; } .form-w{ background: linear-gradient(135deg, rgba(57,255,176,.34), rgba(0,0,0,.18)); } .form-d{ background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(0,0,0,.18)); } .form-l{ background: linear-gradient(135deg, rgba(255,93,93,.30), rgba(0,0,0,.18)); } /* Home: mini barra de racha (PC) */ .streak-bar{ width: 74px; height: 10px; padding: 2px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.22)); box-shadow: 0 10px 26px rgba(0,0,0,.35); gap: 2px; align-items: center; } .streak-seg{ flex: 1; height: 100%; border-radius: 999px; opacity: .95; } .streak-w{ background: linear-gradient(135deg, rgba(57,255,176,.42), rgba(0,0,0,.10)); } .streak-d{ background: linear-gradient(135deg, rgba(255,255,255,.26), rgba(0,0,0,.10)); } .streak-l{ background: linear-gradient(135deg, rgba(255,93,93,.38), rgba(0,0,0,.10)); } /* Home – Disciplina ULTRA PRO (Top Rojas / 2DA Amarilla) */ .ultra-pill--red{ background: rgba(255,55,85,.12); border: 1px solid rgba(255,55,85,.35); color: #ff3755; } .ultra-pill--amber{ background: rgba(246,195,67,.12); border: 1px solid rgba(246,195,67,.35); color: var(--accent); } .disc-home-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 991px){ .disc-home-grid{ grid-template-columns: 1fr; } } .disc-col-title{ margin-bottom: 10px; } .badge-disc{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; font-weight: 700; letter-spacing: .2px; font-size: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(10,20,45,.55); } .badge-disc--red{ border-color: rgba(255,55,85,.35); box-shadow: 0 0 0 1px rgba(255,55,85,.10) inset; } .badge-disc--amber{ border-color: rgba(246,195,67,.35); box-shadow: 0 0 0 1px rgba(246,195,67,.10) inset; } .disc-home-item{ display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 14px; background: rgba(10, 22, 46, .45); border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; margin-bottom: 10px; } .disc-home-item:hover{ transform: translateY(-1px); box-shadow: 0 14px 35px rgba(0,0,0,.25); } .disc-home-item--red{ border-color: rgba(255,55,85,.22); } .disc-home-item--amber{ border-color: rgba(246,195,67,.22); } .disc-home-left{ display: flex; align-items: center; gap: 10px; min-width: 0; } .disc-home-right{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .disc-home-rank{ width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center; font-weight: 900; font-size: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); } .disc-home-avatar{ width: 44px; height: 44px; border-radius: 999px; object-fit: cover; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); } .disc-home-avatar--ph{ display: grid; place-items: center; font-weight: 900; } .disc-home-teamlogo{ width: 18px; height: 18px; border-radius: 6px; object-fit: cover; border: 1px solid rgba(255,255,255,.18); } .disc-home-name{ font-weight: 800; line-height: 1.1; } .disc-home-sub{ font-size: 12px; opacity: .85; margin-top: 2px; } .disc-home-foot{ margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); } /* === Jugador: Botones PRO (Ver equipo / Historial) === */ .pro-action-bar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .pro-btn{ display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 16px; border-radius:14px; font-weight:900; text-decoration:none; letter-spacing:.2px; line-height:1; user-select:none; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, border-color .2s ease; } .pro-btn i{ font-size:1.05rem; opacity:.95; } .pro-btn span{ display:inline-block; transform: translateY(0.5px); } .pro-btn:active{ transform: translateY(1px) scale(.99); } .pro-btn:focus-visible{ outline: none; box-shadow: 0 0 0 .2rem rgba(57,198,255,.18); } .pro-btn-primary{ background: linear-gradient(180deg, rgba(57,198,255,1) 0%, rgba(0,153,235,1) 100%); color: var(--deep-blue); border: 0; box-shadow: 0 14px 26px rgba(0,0,0,.35), 0 0 18px rgba(57,198,255,.18); } .pro-btn-primary:hover{ filter: brightness(1.04); box-shadow: 0 16px 30px rgba(0,0,0,.38), 0 0 22px rgba(57,198,255,.22); } .pro-btn-ghost{ background: rgba(255,255,255,.06); color: rgba(235,248,255,.98); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 14px 26px rgba(0,0,0,.28); } .pro-btn-ghost:hover{ background: rgba(255,255,255,.08); border-color: rgba(57,198,255,.22); box-shadow: 0 16px 30px rgba(0,0,0,.32), 0 0 16px rgba(57,198,255,.10); } .pro-btn-upper span{ letter-spacing:.9px; text-transform:uppercase; } @media (max-width: 576px){ .pro-action-bar{ gap:8px; } .pro-btn{ height:42px; padding:0 14px; border-radius:13px; } } /* Playoffs Group Fixture readability */ .playoffs-wrapper .fx-match, .playoffs-wrapper .fx-match .team-badge .name, .playoffs-wrapper .fx-match .score-chip, .playoffs-wrapper .fx-match [data-role="status"]{ color:#fff; } .playoffs-wrapper .accordion-button{ color:#fff; } .playoffs-wrapper .accordion-button:not(.collapsed){ color:#fff; } /* UEFA clean kickoff pill (Partido) */ .kickoff.kickoff--uefa{ font-weight: 600; letter-spacing: .2px; opacity: .95; display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); backdrop-filter: blur(8px); } /* Libro de pases (transferencias) */ .transfer-card{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px; border-radius:18px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); } .transfer-player{ display:flex; align-items:center; gap:12px; min-width:0; flex: 1 1 auto; } .transfer-player .avatar{ width:46px; height:46px; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); flex: 0 0 auto; } .transfer-player .avatar img{ width:100%; height:100%; object-fit:cover; display:block; } .transfer-player .avatar-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color: rgba(255,255,255,.70); } .transfer-teams{ display:flex; align-items:center; gap:10px; flex: 0 0 auto; } .team-chip{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); min-width: 190px; max-width: 260px; } .team-chip img{ width:26px; height:26px; object-fit:cover; border-radius:8px; } .team-chip .name{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .team-chip--to{ border-color: rgba(57,198,255,.25); box-shadow: 0 0 0 1px rgba(57,198,255,.08) inset; } .transfer-teams .arrow{ opacity:.75; } .ultra-pill-sm{ padding: 4px 10px; border-radius: 999px; font-size: .75rem; } @media (max-width: 992px){ .transfer-card{ flex-direction: column; align-items: stretch; } .transfer-teams{ justify-content: space-between; } .team-chip{ min-width: 0; max-width: none; flex: 1 1 0; } .transfer-teams .arrow{ text-align:center; width: 34px; } } /* Players directory (ULTRA) */ .dir-player-row{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: radial-gradient(900px 280px at 10% 0%, rgba(255,255,255,.05), transparent 60%), radial-gradient(900px 280px at 90% 100%, rgba(0,163,255,.08), transparent 60%), linear-gradient(135deg, rgba(0,0,0,.12), rgba(0,0,0,.22)); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; } .dir-player-row:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.16); box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 12px 30px rgba(0,0,0,.32); } .dir-player-left{ display:flex; align-items:center; gap: 12px; min-width: 0; } .dir-player-photo{ width: 44px; height: 44px; border-radius: 14px; overflow:hidden; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); flex: 0 0 auto; } .dir-player-photo img{ width:100%; height:100%; object-fit:cover; display:block; } .dir-player-photo-fallback{ width:100%; height:100%; display:grid; place-items:center; color: rgba(255,255,255,.85); } .dir-team-logo{ width: 18px; height: 18px; border-radius: 6px; object-fit: cover; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); } .dir-player-stats{ display:flex; justify-content:flex-end; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; } @media (max-width: 575.98px){ .dir-player-row{ padding: 10px 12px; } .dir-player-photo{ width: 40px; height: 40px; border-radius: 14px; } .dir-player-stats{ gap: 6px; } } /* Ultra select (dark dropdown like the site) */ .ultra-select{ background-color: rgba(0,0,0,.18) !important; color: #fff !important; border-color: rgba(255,255,255,.16) !important; box-shadow: none !important; } .ultra-select:focus{ border-color: rgba(255,255,255,.28) !important; box-shadow: 0 0 0 .2rem rgba(0,163,255,.15) !important; } /* Options are rendered by the browser: force dark background to avoid the white dropdown */ .ultra-select option, .ultra-select optgroup{ background-color: #0b1626; color: #ffffff; } /* --- Pagination (Libro de pases) · ULTRA PRO --- */ .lfa-pagination-wrap{ display:flex; justify-content:center; margin-top: 1rem; } .lfa-pagination{ gap: .45rem; padding: .55rem .65rem; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 70px rgba(0,0,0,.35); backdrop-filter: blur(12px); } .lfa-pagination .page-item{ margin: 0; } .lfa-pagination .page-link{ min-width: 38px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .75rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(10,20,40,.35); color: rgba(255,255,255,.86); font-weight: 700; letter-spacing: .2px; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease; } .lfa-pagination .page-link:hover{ transform: translateY(-1px); border-color: rgba(11,77,255,.55); background: rgba(11,77,255,.18); box-shadow: 0 10px 26px rgba(11,77,255,.20), 0 10px 28px rgba(0,0,0,.35); color: #fff; } .lfa-pagination .page-item.active .page-link{ border-color: rgba(255, 199, 62, .75); background: linear-gradient(180deg, rgba(255,199,62,.30), rgba(255,199,62,.12)); color: #fff; box-shadow: 0 12px 32px rgba(255,199,62,.18), 0 16px 45px rgba(0,0,0,.35); } .lfa-pagination .page-item.disabled .page-link, .lfa-pagination .page-link:disabled{ opacity: .45; pointer-events: none; background: rgba(255,255,255,.03); } .lfa-pagination .page-link:focus{ box-shadow: 0 0 0 .25rem rgba(11,77,255,.20); }