/* ===================================================== PORRA BRUTALS 2026 - Design System ===================================================== */ /* --- Variables --- */ :root { --bg-primary: #0a0e1a; --bg-secondary: #111827; --bg-card: #161d2e; --bg-card-hover: #1c2540; --bg-glass: rgba(22, 29, 46, 0.85); --accent: #6c63ff; --accent-2: #f59e0b; --accent-3: #10b981; --accent-red: #ef4444; --accent-blue: #3b82f6; --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #475569; --border: rgba(255, 255, 255, 0.07); --border-accent: rgba(108, 99, 255, 0.4); --gold: #fbbf24; --silver: #94a3b8; --bronze: #cd7f32; --radius: 12px; --radius-sm: 8px; --radius-lg: 20px; --shadow: 0 4px 24px rgba(0,0,0,0.4); --shadow-accent: 0 0 30px rgba(108,99,255,0.2); --font-main: 'Inter', sans-serif; --font-display: 'Space Grotesk', sans-serif; --header-bg: rgba(10, 14, 26, 0.9); --overlay-soft: rgba(255, 255, 255, 0.03); --overlay-soft-hover: rgba(255, 255, 255, 0.06); --overlay-dim: rgba(0, 0, 0, 0.2); --row-border: rgba(255, 255, 255, 0.04); } /* --- Tema claro: mismas variables, valores invertidos. Se activa con data-theme="light" en (botón ☀️/🌙 del header, persistido). --- */ :root[data-theme="light"] { --bg-primary: #eef1f6; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-card-hover: #e9ecf4; --bg-glass: rgba(255, 255, 255, 0.85); --text-primary: #111827; --text-secondary: #4b5563; --text-muted: #8a94a6; --border: rgba(15, 23, 42, 0.1); --border-accent: rgba(108, 99, 255, 0.45); --shadow: 0 4px 24px rgba(15, 23, 42, 0.08); --shadow-accent: 0 0 30px rgba(108, 99, 255, 0.12); --header-bg: rgba(255, 255, 255, 0.9); --overlay-soft: rgba(15, 23, 42, 0.04); --overlay-soft-hover: rgba(15, 23, 42, 0.08); --overlay-dim: rgba(15, 23, 42, 0.05); --row-border: rgba(15, 23, 42, 0.06); } /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-main); background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; } /* --- Background gradient --- */ body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse 80% 40% at 20% 10%, rgba(108,99,255,0.08) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 80%, rgba(16,185,129,0.05) 0%, transparent 60%); pointer-events: none; z-index: 0; } /* ===== HEADER ===== */ .header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 0 24px; } .header-inner { max-width: 1400px; margin: 0 auto; height: 64px; display: flex; align-items: center; gap: 20px; } .header-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .header-emoji { height: 30px; width: auto; display: block; /* La copa no gira (quedaría raro): flota suavemente, como presentada. */ animation: trophyFloat 2.8s ease-in-out infinite alternate; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18)); } @keyframes trophyFloat { from { transform: translateY(0); } to { transform: translateY(-3px); } } .header-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; background: linear-gradient(135deg, #6c63ff, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .header-subtitle { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; } .header-meta { flex: 1; font-size: 13px; color: var(--text-secondary); text-align: center; } .btn-refresh { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--accent); color: white; border: none; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .btn-refresh:hover { background: #7c75ff; transform: translateY(-1px); } .btn-refresh.spinning span { display: inline-block; animation: rotate 0.8s linear infinite; } @keyframes rotate { to { transform: rotate(360deg); } } .header-actions { display: flex; align-items: center; gap: 10px; } .btn-logout { padding: 8px 16px; background: transparent; color: var(--text-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .btn-logout:hover { border-color: var(--accent-red); color: var(--accent-red); } /* ===== NAV TABS ===== */ .nav-tabs-bar { background: var(--bg-secondary); border-bottom: 1px solid var(--border); position: sticky; top: var(--header-h, 64px); z-index: 90; } .nav-tabs-inner { max-width: 1400px; margin: 0 auto; display: flex; padding: 0 24px; gap: 4px; overflow-x: auto; scrollbar-width: none; } .nav-tabs-inner::-webkit-scrollbar { display: none; } .nav-tab { background: none; border: none; padding: 14px 20px; color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; white-space: nowrap; font-family: var(--font-main); text-decoration: none; display: inline-flex; align-items: center; } .nav-tab:hover { color: var(--text-primary); } .nav-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } /* ===== MAIN CONTENT ===== */ .main-content { max-width: 1400px; margin: 0 auto; padding: 24px; position: relative; z-index: 1; } .tab-content { display: none; } .tab-content.active { display: block; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ===== SECTION HEADER ===== */ .section-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .section-header h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; } .section-desc { color: var(--text-secondary); font-size: 14px; margin-top: 4px; } .search-bar { margin-left: auto; } .search-bar input { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 14px; color: var(--text-primary); font-size: 13px; width: 240px; outline: none; transition: border-color 0.2s; } .search-bar input:focus { border-color: var(--accent); } /* ===== ORACLE TAB ===== */ .oracle-header { text-align: center; margin-bottom: 40px; padding: 40px 20px 20px; } .oracle-header h1 { font-family: var(--font-display); font-size: 36px; font-weight: 800; background: linear-gradient(135deg, #6c63ff, #f59e0b, #10b981); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 10px; } .oracle-header p { color: var(--text-secondary); font-size: 16px; } .questions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 20px; } .oracle-methodology { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-muted); background: rgba(108,99,255,0.08); border: 1px solid rgba(108,99,255,0.2); border-radius: var(--radius); padding: 10px 16px; line-height: 1.5; } .question-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; position: relative; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; } .question-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-accent); border-color: var(--border-accent); } .question-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .question-card.q1::before { background: linear-gradient(90deg, #fbbf24, #f59e0b); } .question-card.q2::before { background: linear-gradient(90deg, #94a3b8, #64748b); } .question-card.q3::before { background: linear-gradient(90deg, #cd7f32, #a0522d); } .question-card.q4::before { background: linear-gradient(90deg, #ef4444, #b91c1c); } .question-card.q5::before { background: linear-gradient(90deg, #10b981, #059669); } .question-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } .question-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 20px; line-height: 1.4; } .question-points { display: inline-block; background: rgba(108, 99, 255, 0.15); color: var(--accent); border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 700; margin-bottom: 20px; } .oracle-candidates { display: flex; flex-direction: column; gap: 10px; } .oracle-candidate { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--overlay-soft); border-radius: var(--radius-sm); border: 1px solid var(--border); transition: background 0.2s; } .oracle-candidate:hover { background: var(--overlay-soft-hover); } .oracle-rank { font-size: 18px; width: 28px; text-align: center; flex-shrink: 0; } .oracle-name { flex: 1; font-weight: 600; font-size: 14px; } .oracle-detail { font-size: 12px; color: var(--text-secondary); } .oracle-bar-wrap { width: 80px; flex-shrink: 0; } .oracle-bar { height: 6px; background: var(--bg-primary); border-radius: 3px; overflow: hidden; } .oracle-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), #a78bfa); transition: width 0.6s ease; } .oracle-pct { font-size: 11px; color: var(--text-muted); text-align: right; margin-top: 3px; } /* ===== CLASSIFICATION TABLE ===== */ .table-wrapper { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); } .data-table { width: 100%; border-collapse: collapse; font-size: 13px; } .data-table thead th { background: var(--bg-card); padding: 12px 10px; text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; } .data-table thead th.sortable { cursor: pointer; user-select: none; } .th-label { display: inline-block; line-height: 1.3; vertical-align: middle; } /* Columna de acción (añadir al Comparador): un borde y más padding la separan visualmente de las columnas de datos, y el contenido centrado le da al icono redondo el mismo "aire" que tiene en Participantes/modal en vez de quedar apretado contra el borde de la tabla. */ .data-table th.col-comparador, .data-table td.col-comparador { text-align: center; padding-left: 20px; padding-right: 20px; border-left: 1px solid var(--border); } .data-table th.col-comparador { font-size: 15px; } .data-table thead th.sortable:hover { color: var(--text-primary); } .sort-arrow { display: inline-block; width: 10px; color: var(--accent); font-size: 9px; } .cruces-chip { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; background: rgba(148,163,184,0.1); color: var(--text-muted); } .cruces-chip.has-hits { background: rgba(16,185,129,0.12); color: var(--accent-3); } .data-table tbody tr { border-bottom: 1px solid var(--row-border); transition: background 0.15s; cursor: pointer; } .data-table tbody tr:hover { background: var(--bg-card-hover); } .data-table tbody td { padding: 11px 10px; vertical-align: middle; } .clasif-row.expanded { background: var(--bg-card-hover); } /* Triángulo dibujado con CSS en vez de los caracteres ▶/▼: en iOS Safari esos glifos se renderizan con presentación emoji (un icono de color grande) en vez de como texto, así que el caret no se veía igual entre plataformas. */ .accordion-caret { display: inline-block; width: 0; height: 0; margin-right: 5px; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent var(--accent); vertical-align: middle; transition: transform 0.15s; } .clasif-row.expanded .accordion-caret { transform: rotate(90deg); } .clasif-detail-row { cursor: default; } .clasif-detail-row:hover { background: transparent; } .clasif-detail-row td { padding: 20px 24px 24px; background: var(--overlay-dim); border-bottom: 1px solid var(--row-border); } .pos-badge { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; } .pos-badge.gold { background: rgba(251,191,36,0.2); color: var(--gold); } .pos-badge.silver { background: rgba(148,163,184,0.2); color: var(--silver); } .pos-badge.bronze { background: rgba(205,127,50,0.2); color: var(--bronze); } .pos-badge.normal { background: var(--overlay-soft-hover); color: var(--text-secondary); } .points-chip { display: inline-block; background: rgba(16,185,129,0.15); color: var(--accent-3); border-radius: 20px; padding: 3px 10px; font-weight: 700; font-size: 13px; } .points-diff { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--accent-red); white-space: nowrap; } .points-diff-leader { color: var(--accent-3); } .points-diff-positive { color: var(--accent-3); } .points-chip.projected { background: rgba(108,99,255,0.15); color: var(--accent); } .team-pill { display: inline-block; background: rgba(16,185,129,0.12); color: var(--accent-3); border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 500; white-space: nowrap; } .team-pill.winner { background: rgba(251,191,36,0.15); color: var(--gold); } .group-badge { font-size: 11px; color: var(--text-muted); } /* ===== PARTICIPANTS TAB ===== */ .user-selector { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; max-height: 200px; overflow-y: auto; padding: 8px; background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); } .user-pill { padding: 6px 14px; background: var(--overlay-soft-hover); border: 1px solid var(--border); border-radius: 20px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s; white-space: nowrap; color: var(--text-secondary); } .user-pill:hover { background: rgba(108,99,255,0.15); border-color: var(--accent); color: var(--accent); } .user-pill.active { background: var(--accent); border-color: var(--accent); color: white; } .user-detail-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; } .empty-state { text-align: center; color: var(--text-muted); padding: 60px 20px; font-size: 15px; } .user-profile { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } .user-avatar { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; flex-shrink: 0; } .user-info h3 { font-family: var(--font-display); font-size: 22px; font-weight: 700; } .user-stats-row { display: flex; gap: 24px; margin-top: 8px; } .user-stat { font-size: 13px; color: var(--text-secondary); } .user-stat strong { color: var(--text-primary); } .user-profile-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; } .btn-add-comparador { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; background: transparent; border: 1px solid var(--border-accent); color: var(--accent); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .btn-add-comparador:hover:not(:disabled) { background: rgba(108,99,255,0.1); } .btn-add-comparador.added { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-add-comparador.added:hover { background: #7c75ff; } .btn-add-comparador:disabled { opacity: 0.45; cursor: not-allowed; } .btn-goto-comparador { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; background: transparent; border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .btn-goto-comparador:hover { border-color: var(--accent); color: var(--accent); } .btn-comparador-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 1px solid var(--border-accent); color: var(--accent); border-radius: 50%; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; transition: all 0.2s; } .btn-comparador-icon:hover:not(:disabled) { background: rgba(108,99,255,0.15); } .btn-comparador-icon.added { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-comparador-icon.added:hover { background: #7c75ff; } .btn-comparador-icon:disabled { opacity: 0.35; cursor: not-allowed; } /* Icono de añadir a la Evolución: mismo formato que el de Comparador, con el color de la propia pestaña Evolución para distinguirlo de un vistazo. */ .btn-evo-icon { border-color: var(--evo-c2); color: var(--evo-c2); } .btn-evo-icon:hover:not(:disabled) { background: rgba(13,148,136,0.15); } .btn-evo-icon.added { background: var(--evo-c2); color: #fff; border-color: var(--evo-c2); } .btn-evo-icon.added:hover { background: #0f766e; } .detail-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; /* En la Clasificación este bloque vive dentro de un de una tabla más ancha que la pantalla en mobile (scroll horizontal propio); sin este tope, el contenido se estira para ocupar ese ancho de tabla en vez del ancho real visible, obligando a un segundo scroll interno. */ max-width: calc(100vw - 64px); } .detail-section { background: var(--overlay-soft); border-radius: var(--radius); padding: 16px; border: 1px solid var(--border); /* Los items de grid heredan min-width:auto por defecto: sin esto, un hijo ancho (p.ej. la rejilla de Quiz Brutal) fuerza esta tarjeta -y con ella toda la página- a desbordarse en vez de encogerse a la columna que le corresponde. */ min-width: 0; } .detail-section h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 12px; font-weight: 600; } .teams-list { display: flex; flex-wrap: wrap; gap: 6px; } .team-tag { padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; background: rgba(108,99,255,0.1); color: #a78bfa; border: 1px solid rgba(108,99,255,0.2); } .team-tag.winner { background: rgba(251,191,36,0.15); color: var(--gold); border-color: rgba(251,191,36,0.3); } .team-tag.finalist { background: rgba(148,163,184,0.15); color: var(--silver); border-color: rgba(148,163,184,0.3); } .team-tag.semi { background: rgba(205,127,50,0.15); color: #e07b39; border-color: rgba(205,127,50,0.3); } .pichichi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .pichichi-entry { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--overlay-soft); border-radius: var(--radius-sm); font-size: 12px; } .pichichi-pos { font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 3px; background: rgba(108,99,255,0.2); color: var(--accent); flex-shrink: 0; } .pichichi-name { font-weight: 500; flex: 1; line-height: 1.2; } .pichichi-coef { font-size: 11px; color: var(--accent-2); font-weight: 600; flex-shrink: 0; } .pichichi-pts { font-size: 11px; color: var(--accent-3); font-weight: 600; flex-shrink: 0; } /* ===== EQUIPOS ELIMINADOS ===== */ .team-tag.eliminated, .team-pill.eliminated { background: rgba(239,68,68,0.1); color: var(--accent-red); border-color: rgba(239,68,68,0.25); text-decoration: line-through; text-decoration-color: rgba(239,68,68,0.5); } .pichichi-entry.eliminated { opacity: 0.55; } .pichichi-entry.eliminated .pichichi-name { text-decoration: line-through; text-decoration-color: rgba(239,68,68,0.5); } /* ===== CRUCES DE FASE FINAL (octavos+) ===== */ /* flex-wrap en la lista (en vez de una columna fija) deja que varios cruces se coloquen lado a lado cuando hay ancho de sobra; cada cruce tiene un ancho "preferido" (330px) para que equipo+% quepan siempre en una sola línea, y solo se encoge por debajo de eso si el contenedor es más estrecho (mobile), donde ya toca apilarlos en una columna. */ .matchup-list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; } .matchup-pair { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 0 1 330px; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--overlay-soft); } .matchup-pair.cross-correct { border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.06); } .matchup-pair.cross-wrong { border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.05); } .matchup-pair.cross-pending { border-color: rgba(148,163,184,0.25); } .matchup-icon { font-size: 12px; flex-shrink: 0; } .matchup-vs { font-size: 10px; color: var(--text-muted); flex-shrink: 0; } .matchup-score { flex-basis: 100%; font-size: 11px; color: var(--accent-3); font-weight: 600; padding-left: 22px; } /* ===== EXTRA BALL / FINAL FANTASY ===== */ .bonus-list { display: flex; flex-direction: column; gap: 4px; } .bonus-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--overlay-soft); font-size: 12px; } .bonus-row.bonus-correct { border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.06); } .bonus-row.bonus-wrong { border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.05); } .bonus-row.bonus-summary { background: rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.3); font-weight: 700; margin-bottom: 4px; } .bonus-row.bonus-summary .bonus-q { color: var(--text-primary); } .bonus-row.bonus-summary .bonus-pts { color: var(--gold); font-size: 13px; } /* En desktop bonus-row-top/bottom no existen como layout propio: sus hijos (icono+pregunta, respuesta+puntos) participan directamente en el flex de .bonus-row, todo en una sola línea. En mobile (ver media query) pasan a ser dos filas propias — evita que la pregunta larga y la respuesta compitan por espacio en la misma línea flex y acaben colapsando de forma ilegible. */ .bonus-row-top, .bonus-row-bottom { display: contents; } .bonus-icon { flex-shrink: 0; } .bonus-q { flex: 1; min-width: 0; overflow-wrap: break-word; color: var(--text-secondary); } .bonus-qnum { color: var(--text-muted); font-weight: 600; } .bonus-a { font-weight: 600; color: var(--text-primary); overflow-wrap: break-word; } .bonus-pts { font-size: 11px; color: var(--accent-2); font-weight: 600; flex-shrink: 0; min-width: 42px; text-align: right; } /* ===== ROUNDS TAB ===== */ .rounds-tabs { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; } .round-tab { padding: 8px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; font-family: var(--font-main); } .round-tab:hover { border-color: var(--accent); color: var(--accent); } .round-tab.active { background: var(--accent); border-color: var(--accent); color: white; } .round-chart { display: grid; gap: 10px; } .round-bar-item { background: var(--bg-card); border-radius: var(--radius-sm); border: 1px solid var(--border); overflow: hidden; transition: border-color 0.2s; } .round-bar-item:has(.round-bar-row.expanded) { border-color: var(--border-accent); } .round-bar-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; } .round-bar-row:hover { background: var(--overlay-soft); } .round-bar-arrow { width: 14px; text-align: center; font-size: 11px; color: var(--text-muted); flex-shrink: 0; transition: transform 0.2s; } .round-bar-row.expanded .round-bar-arrow { transform: rotate(-180deg); } .round-bar-participants { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .round-bar-participants.open { max-height: 600px; overflow-y: auto; } .round-bar-participants-inner { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 14px 54px; border-top: 1px solid var(--border); margin-top: -1px; } .round-participant-pill { display: inline-block; padding: 3px 10px; background: var(--overlay-soft-hover); border: 1px solid var(--border); border-radius: 20px; font-size: 11px; color: var(--text-secondary); cursor: pointer; transition: border-color 0.15s, color 0.15s; } .round-participant-pill:hover { border-color: var(--border-accent); color: var(--text-primary); } .round-bar-rank { width: 24px; font-size: 12px; font-weight: 700; color: var(--text-muted); text-align: center; flex-shrink: 0; } .round-bar-team { width: 180px; font-size: 14px; font-weight: 600; flex-shrink: 0; } .round-bar-track { flex: 1; height: 8px; background: var(--overlay-soft-hover); border-radius: 4px; overflow: hidden; } .round-bar-fill { height: 100%; border-radius: 4px; transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .round-bar-count { width: 60px; text-align: right; font-size: 13px; font-weight: 600; flex-shrink: 0; } .round-bar-pct { width: 40px; text-align: right; font-size: 11px; color: var(--text-muted); flex-shrink: 0; } /* Color scale for bars */ .bar-top1 { background: linear-gradient(90deg, #fbbf24, #f59e0b); } .bar-top2 { background: linear-gradient(90deg, #94a3b8, #64748b); } .bar-top3 { background: linear-gradient(90deg, #cd7f32, #b45309); } .bar-rest { background: linear-gradient(90deg, var(--accent), #a78bfa); } /* ===== PICHICHI TAB ===== */ .pichichi-layout { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; } .pichichi-col { display: flex; flex-direction: column; min-width: 0; } .pichichi-search { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 14px; color: var(--text-primary); font-size: 13px; width: 100%; outline: none; margin-bottom: 14px; transition: border-color 0.2s; } .pichichi-search:focus { border-color: var(--accent); } .pichichi-section-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .pichichi-scroll { max-height: 640px; overflow-y: auto; padding-right: 4px; } .pichichi-header-row { background: transparent; border: none; padding: 0 14px 8px; margin-bottom: 6px; cursor: default; } .pichichi-header-row:hover { transform: none; } .pichichi-header-row .pp-info, .pichichi-header-row .pp-coef { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); background: none; padding: 0; } .pichichi-header-row .pp-count, .pichichi-header-row .pp-pts, .pichichi-header-row .pp-extra { color: var(--text-muted); font-size: 10px; } .pp-sort { cursor: pointer; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); user-select: none; } .pp-sort:hover { color: var(--text-primary); } .pp-extra-sort { display: flex; flex-direction: column; align-items: center; gap: 2px; } .pichichi-player-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; cursor: pointer; transition: border-color 0.2s, transform 0.2s; } .pichichi-player-row:hover { border-color: var(--border-accent); transform: translateX(3px); } .pichichi-player-row.eliminated { background: rgba(239,68,68,0.07); border-color: rgba(239,68,68,0.3); } .pichichi-player-row.eliminated .pp-team { color: var(--accent-red); text-decoration: line-through; text-decoration-color: rgba(239,68,68,0.5); } .pp-rank { width: 24px; font-size: 12px; font-weight: 700; color: var(--text-muted); text-align: center; } .pp-info { flex: 1; } .pp-name { font-weight: 600; font-size: 13px; } .pp-team { font-size: 11px; color: var(--text-muted); } .pp-coef { padding: 2px 8px; background: rgba(245,158,11,0.15); color: var(--accent-2); border-radius: 4px; font-size: 11px; font-weight: 700; } .pp-count { text-align: right; } .pp-count-num { font-weight: 700; font-size: 16px; color: var(--text-primary); } .pp-count-label { font-size: 10px; color: var(--text-muted); } .pp-pts { min-width: 55px; text-align: right; font-weight: 700; font-size: 14px; color: var(--accent-3); } .pp-pts-col { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .pp-pts-col .points-diff { margin-left: 0; } .pp-extra { min-width: 46px; text-align: center; font-size: 11px; line-height: 1.6; color: var(--text-muted); white-space: nowrap; } /* ===== MODAL: DESGLOSE DE JUGADOR ===== */ .player-events-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; } .player-selectors-list { display: flex; flex-wrap: wrap; gap: 8px; max-height: 160px; overflow-y: auto; } .player-event-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--overlay-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; } .pe-match { flex: 1; color: var(--text-primary); } .pe-detail { color: var(--text-muted); white-space: nowrap; } .pe-pts { font-weight: 700; color: var(--accent-3); white-space: nowrap; } /* ===== LOADING ===== */ .loading-overlay { position: fixed; inset: 0; background: var(--header-bg); display: flex; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(10px); } .loading-overlay.hidden { display: none; } .loading-box { text-align: center; } .loading-ball { font-size: 56px; display: inline-block; animation: bounce 0.8s ease-in-out infinite alternate; } .loading-trophy { height: 62px; width: auto; display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.22)); } @keyframes bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-18px); } } .loading-text { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin-top: 20px; margin-bottom: 8px; } .loading-sub { color: var(--text-muted); font-size: 14px; } /* ===== MODAL ===== */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); z-index: 1000; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.open { display: flex; } .modal-box { background: var(--bg-card); border: 1px solid var(--border-accent); border-radius: var(--radius-lg); padding: 32px; max-width: 700px; width: 100%; max-height: 85vh; overflow-y: auto; position: relative; box-shadow: var(--shadow-accent); } .modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; transition: color 0.2s; } .modal-close:hover { color: var(--text-primary); } /* ===== UTILS ===== */ .text-gold { color: var(--gold); } .text-silver { color: var(--silver); } .text-bronze { color: var(--bronze); } .text-green { color: var(--accent-3); } .text-red { color: var(--accent-red); } .text-muted { color: var(--text-muted); } .no-data { text-align: center; color: var(--text-muted); padding: 40px; font-size: 14px; } /* ===== CHAT WIDGET (flotante) ===== */ .chat-fab { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--accent), #a78bfa); color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.35); z-index: 999; transition: transform 0.2s; } .chat-fab:hover { transform: scale(1.08); } .chat-widget { position: fixed; bottom: 92px; right: 24px; width: 380px; max-width: calc(100vw - 32px); height: 520px; max-height: calc(100vh - 140px); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,0.45); display: flex; flex-direction: column; overflow: hidden; z-index: 998; opacity: 0; transform: translateY(16px) scale(0.96); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .chat-widget.open { opacity: 1; transform: none; pointer-events: auto; } .chat-widget-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); font-weight: 700; font-size: 14px; } .chat-widget-close { background: none; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 2px 6px; } .chat-widget-close:hover { color: var(--text-primary); } .chat-box { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--bg-card); overflow: hidden; } .chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; } .chat-msg { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; } .chat-msg em { color: var(--text-secondary); } .chat-msg-bot { align-self: flex-start; background: var(--overlay-soft-hover); border: 1px solid var(--border); color: var(--text-primary); } .chat-msg-user { align-self: flex-end; background: rgba(108,99,255,0.18); border: 1px solid var(--border-accent); color: var(--text-primary); } .chat-msg-pending { opacity: 0.6; font-style: italic; } .chat-msg-error { border-color: rgba(239,68,68,0.4); color: var(--accent-red); } .chat-input-row { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--border); background: var(--bg-secondary); } .chat-input-row input { flex: 1; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; color: var(--text-primary); font-size: 14px; } .chat-input-row input:focus { outline: none; border-color: var(--border-accent); } .chat-input-row button { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 10px 20px; font-weight: 600; cursor: pointer; font-size: 14px; } .chat-input-row button:hover { opacity: 0.9; } .chat-input-row button:disabled { opacity: 0.5; cursor: not-allowed; } /* ===== SCROLLBAR ===== */ /* La barra por defecto era casi invisible (blanco al 10% de opacidad, que en tema claro se funde con el fondo) — sin ella, en una tabla larga como Clasificación no había ninguna pista de que se podía seguir bajando. Ahora usa var(--text-muted), que ya está calibrado para tener contraste sobre el fondo en ambos temas. */ html { scrollbar-width: thin; scrollbar-color: var(--text-muted) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--text-muted); border-radius: 6px; border: 2px solid var(--bg-primary); background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--accent); } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .main-content { padding: 16px; } .detail-sections { grid-template-columns: 1fr; } .pichichi-layout { grid-template-columns: 1fr; } .oracle-header h1 { font-size: 26px; } .questions-grid { grid-template-columns: 1fr; } .round-bar-team { width: 120px; } .user-stats-row { flex-wrap: wrap; gap: 12px; } .user-profile { flex-wrap: wrap; } .user-profile-actions { flex-direction: column; align-items: stretch; margin-left: 0; width: 100%; } .btn-add-comparador, .btn-goto-comparador { width: 100%; justify-content: center; } .chat-widget { right: 12px; left: 12px; bottom: 84px; width: auto; max-width: none; height: calc(100vh - 160px); } .chat-fab { right: 16px; bottom: 16px; } /* Header: en desktop es una sola fila (marca, contador, acciones); en mobile no caben las tres cosas en una fila, así que el contador de participantes pasa a su propia línea debajo. La altura ya no es fija (era el origen del recorte) — la sincroniza JS en --header-h para que la barra de pestañas seguidamente pegada sepa dónde empezar. */ .header { padding: 0 10px; } .header-inner { height: auto; flex-wrap: wrap; row-gap: 6px; padding: 10px 0; gap: 8px; } /* El boton hamburguesa, el logo y las acciones (actualizar/tema/salir) tienen que caber los tres en una sola fila -- si el conjunto no cabe, flex-wrap empuja las acciones a su propia linea y el header pasa a 3 lineas en vez de 2. El logo es el unico con texto de longitud variable, asi que es el que cede (min-width:0 + elipsis) en vez de forzar el wrap de todo lo demas. */ .btn-hamburger { order: 0; flex-shrink: 0; padding: 6px 10px; font-size: 15px; } .header-brand { order: 1; min-width: 0; flex-shrink: 1; gap: 8px; } .header-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; } .header-emoji { height: 24px; } .header-subtitle { display: none; } .header-actions { order: 2; flex-shrink: 0; margin-left: auto; gap: 4px; } .header-meta { order: 3; flex: 1 1 100%; text-align: center; font-size: 11.5px; } .btn-refresh .btn-label { display: none; } .btn-refresh, .btn-logout, .btn-theme { padding: 6px 8px; font-size: 12px; } .nav-tabs-inner { padding: 0 12px; } .nav-tab { padding: 12px 14px; font-size: 12.5px; } /* Comparador: en desktop es una tabla ancha con scroll horizontal (una columna por participante); en mobile eso obligaba a hacer scroll en dos direcciones para leer el valor de uno solo. Aquí cada fila-métrica pasa a ser una tarjeta con los valores de cada participante apilados verticalmente, etiquetados con su nombre vía data-label (mismo dato generado en JS, solo cambia cómo se distribuye). */ .comparador-table, .comparador-table tbody, .comparador-table tr, .comparador-table td { display: block; width: auto; } .comparador-table thead { display: none; } .comparador-table tbody tr { background: var(--overlay-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 8px; } .comparador-table td { border-bottom: none; padding: 0; } .comparador-section-row td { position: static; margin-bottom: 8px; border-radius: var(--radius-sm); } .comparador-metric-col { position: static; background: none; white-space: normal; font-size: 13px; color: var(--text-primary); padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--border); } .comparador-table td[data-label] { padding: 6px 0; } .comparador-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; color: var(--accent); margin-bottom: 3px; } /* Extra Ball / Final Fantasy: la pregunta (ancha) y la respuesta+puntos (flex-shrink:0) competían por la misma línea; con poco ancho, la pregunta colapsaba a 0 y su texto se partía letra a letra. En mobile separamos icono+pregunta y respuesta+puntos en dos filas propias. */ .bonus-row { flex-direction: column; align-items: stretch; } .bonus-row-top, .bonus-row-bottom { display: flex; align-items: center; gap: 8px; } .bonus-row-bottom { justify-content: space-between; padding-left: 22px; } } /* ===== LOGIN ===== */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(circle at 50% 0%, rgba(108,99,255,0.12), transparent 60%), var(--bg-primary); } .login-box { width: 100%; max-width: 360px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; box-shadow: 0 20px 50px rgba(0,0,0,0.4); } .login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; } #login-form { display: flex; flex-direction: column; gap: 12px; } #login-form input { background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; color: var(--text-primary); font-size: 14px; outline: none; transition: border-color 0.2s; } #login-form input:focus { border-color: var(--accent); } #login-form button { background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); padding: 12px; font-weight: 700; font-size: 14px; cursor: pointer; margin-top: 4px; transition: opacity 0.2s; } #login-form button:hover { opacity: 0.9; } #login-form button:disabled { opacity: 0.5; cursor: not-allowed; } .login-error { color: var(--accent-red); font-size: 13px; min-height: 16px; } /* ===== COMPARADOR TAB ===== */ .comparador-controls { position: relative; max-width: 420px; margin-bottom: 14px; } .comparador-controls input { width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; color: var(--text-primary); font-size: 14px; } .comparador-controls input:focus { outline: none; border-color: var(--border-accent); } .comparador-search-results { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg-card-hover); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); z-index: 20; max-height: 260px; overflow-y: auto; } .comparador-search-results.open { display: block; } .comparador-search-item { padding: 9px 14px; font-size: 13.5px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; } .comparador-search-item:hover { background: var(--bg-card); } .comparador-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; min-height: 20px; } .comparador-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(108,99,255,0.15); color: var(--text-primary); border: 1px solid var(--border-accent); border-radius: 20px; padding: 5px 8px 5px 14px; font-size: 13px; font-weight: 600; } .comparador-chip button { background: rgba(255,255,255,0.1); border: none; color: var(--text-secondary); border-radius: 50%; width: 18px; height: 18px; font-size: 11px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .comparador-chip button:hover { background: var(--accent-red); color: #fff; } /* El scroll horizontal ya existía (overflow-x:auto) pero con la scrollbar fina por defecto del sistema pasaba desapercibido — con 4+ participantes la tabla se veía "cortada" sin que se notara que se podía deslizar. Ahora la scrollbar es gruesa y de color, y un degradado a la derecha avisa de que hay más contenido mientras no se haya llegado al final del scroll. */ .comparador-scroll-shell { position: relative; } .comparador-scroll-fade { position: absolute; top: 1px; right: 1px; bottom: 12px; width: 40px; display: flex; align-items: center; justify-content: flex-end; padding-right: 4px; background: linear-gradient(to right, transparent, var(--bg-card) 65%); pointer-events: none; border-radius: 0 var(--radius) 0 0; transition: opacity 0.2s; } .comparador-scroll-fade.hidden { opacity: 0; } .comparador-scroll-fade-arrow { font-size: 20px; font-weight: 700; color: var(--accent); animation: comparador-fade-nudge 1.4s ease-in-out infinite; } @keyframes comparador-fade-nudge { 0%, 100% { transform: translateX(0); opacity: 0.6; } 50% { transform: translateX(-4px); opacity: 1; } } .comparador-table-wrapper { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); scrollbar-width: auto; scrollbar-color: var(--accent) var(--bg-secondary); } .comparador-table-wrapper::-webkit-scrollbar { height: 12px; } .comparador-table-wrapper::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: 0 0 var(--radius) var(--radius); } .comparador-table-wrapper::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 6px; border: 2px solid var(--bg-secondary); } .comparador-table-wrapper::-webkit-scrollbar-thumb:hover { background: #7c75ff; } .comparador-table { width: 100%; border-collapse: collapse; font-size: 13px; } .comparador-table th, .comparador-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--row-border); } .comparador-table thead th { background: var(--bg-card); font-size: 12px; font-weight: 700; color: var(--text-primary); white-space: nowrap; border-bottom: 1px solid var(--border); } .comparador-table tbody tr:hover { background: var(--bg-card-hover); } .comparador-metric-col { position: sticky; left: 0; background: var(--bg-secondary); font-weight: 600; color: var(--text-secondary); font-size: 12.5px; white-space: nowrap; z-index: 1; } .comparador-section-row td { background: rgba(108,99,255,0.08); color: var(--accent); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; padding: 8px 16px; position: sticky; left: 0; } .comparador-pill-scroll { max-width: 480px; display: flex; flex-wrap: wrap; gap: 4px; } /* Badges dentro de las píldoras del comparador: el color de la píldora solo indica estado (verde vivo / rojo eliminado); estos añaden info sin pisarlo. */ .shared-count { display: inline-block; /* evita heredar el tachado de las píldoras eliminadas */ color: var(--gold); font-weight: 700; opacity: 0.95; } .pill-meta { display: inline-block; opacity: 0.65; } .legend-alive { color: var(--accent-3); font-weight: 700; } .legend-dead { color: var(--accent-red); font-weight: 700; } /* ===== DESGLOSE DE PUNTOS ===== */ .breakdown-list { display: flex; flex-direction: column; gap: 4px; } .breakdown-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px; border-radius: var(--radius-sm); background: var(--overlay-soft); font-size: 12.5px; } .breakdown-label { color: var(--text-secondary); } .breakdown-value { font-weight: 700; color: var(--accent-3); } .breakdown-row.zero .breakdown-value, .breakdown-value.zero { color: var(--text-muted); font-weight: 500; } .breakdown-row.breakdown-total { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border); background: none; font-weight: 700; } .breakdown-row.breakdown-total .breakdown-label { color: var(--text-primary); } .breakdown-row.breakdown-total .breakdown-value { font-size: 15px; color: var(--gold); } /* ===== QUIZ BRUTAL TAB ===== */ /* El texto debe ir en el mismo tono que el fondo (como .team-pill, .points-chip, etc. en el resto de la app) — antes usaba el color de texto por defecto sobre un fondo lila apenas visible, así que no se leía como una "chip" sino como texto suelto con un resaltado tenue. */ .quiz-pick { display: inline-block; background: rgba(108,99,255,0.12); color: var(--accent); border: 1px solid rgba(108,99,255,0.3); border-radius: 4px; padding: 2px 8px; font-size: 12px; font-weight: 600; white-space: nowrap; } .quiz-pick.self { background: rgba(251,191,36,0.15); color: var(--gold); border: 1px solid rgba(251,191,36,0.35); } .quiz-sim-footer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); line-height: 1.5; } .quiz-caret { font-size: 9px; color: var(--accent); opacity: 0.7; } .quiz-candidates-scroll { max-height: 430px; overflow-y: auto; padding-right: 6px; } .oracle-candidate.open { background: var(--bg-card-hover); flex-wrap: wrap; } .quiz-voters { flex-basis: 100%; margin-top: 10px; padding: 10px 12px; background: var(--overlay-dim); border-radius: var(--radius-sm); display: flex; flex-wrap: wrap; gap: 5px; cursor: default; } .quiz-voters-title { flex-basis: 100%; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; } .quiz-voter-pill { display: inline-block; background: rgba(108,99,255,0.12); border: 1px solid rgba(108,99,255,0.25); color: var(--text-primary); border-radius: 20px; padding: 3px 10px; font-size: 11.5px; cursor: pointer; transition: background 0.15s; } .quiz-voter-pill:hover { background: rgba(108,99,255,0.3); } /* Grid en vez de flex: con flexbox + justify-content:space-between cada fila calculaba su propio reparto de espacio de forma independiente, así que la píldora del pronóstico quedaba en una posición horizontal distinta en cada pregunta (desalineado). Con .quiz-answer-row como display:contents, sus hijos pasan a ser celdas directas de esta rejilla y SÍ comparten columnas (mismo ancho de columna en todas las filas). */ .quiz-answers-list { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 14px; padding: 0 6px; font-size: 12.5px; } .quiz-answer-row { display: contents; } .quiz-answer-row > * { padding: 8px 0; border-bottom: 1px solid var(--border); } .quiz-answer-row:last-child > * { border-bottom: none; } .quiz-answer-q { color: var(--text-secondary); overflow-wrap: break-word; } /* La regla de arriba (padding:8px 0, para el alto de la fila) pisaba el padding propio de la píldora .quiz-pick, dejándola sin margen horizontal interior — de ahí el texto pegado al borde. Esta es más específica y gana, restaurando el padding de la píldora sin tocar el de la fila. */ .quiz-answer-row > .quiz-pick { padding: 3px 10px; } /* Los items de grid se estiran para llenar su columna por defecto (justify- self:stretch), así que la píldora del pronóstico ocupaba todo el ancho de la columna en vez de ajustarse a su texto — de ahí el bloque de color de punta a punta en lugar de una chip compacta. */ .quiz-answer-row > *:nth-child(2) { justify-self: start; } .quiz-answer-row > small { justify-self: end; color: var(--text-muted); } /* ===== PLANTILLA PICHICHI POR DEMARCACIÓN (vista compartida) ===== */ /* auto-fit hace que las 4 demarcaciones (portero/defensas/centrocampistas/ delanteros) se coloquen en 2-4 columnas cuando hay ancho de sobra, en vez de apilarse siempre en una sola columna que deja huecos vacíos enormes en pantallas anchas. */ .squad-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 20px; } .squad-group { display: flex; flex-direction: column; gap: 4px; } .squad-group-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 2px; } .squad-player { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--overlay-soft); border: 1px solid var(--border); font-size: 12.5px; } .squad-player-name { font-weight: 600; flex: 1; min-width: 0; } .squad-player-team { color: var(--text-secondary); font-size: 11px; background: rgba(148,163,184,0.1); border-radius: 4px; padding: 1px 7px; white-space: nowrap; } .squad-player.eliminated { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.25); } .squad-player.eliminated .squad-player-name { color: var(--accent-red); text-decoration: line-through; text-decoration-color: rgba(239,68,68,0.5); } .squad-player.eliminated .squad-player-team { color: var(--accent-red); background: rgba(239,68,68,0.1); } /* ===== BOTÓN DE TEMA ===== */ .btn-theme { padding: 8px 12px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 15px; cursor: pointer; transition: all 0.2s; line-height: 1; } .btn-theme:hover { border-color: var(--accent); transform: translateY(-1px); } /* ===== MENÚ MÓVIL (hamburguesa + panel lateral) ===== */ /* Botón oculto en desktop (la barra de pestañas horizontal ya está siempre visible ahí); solo se muestra en la media query de mobile de más abajo. */ .btn-hamburger { display: none; padding: 8px 12px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 16px; cursor: pointer; transition: all 0.2s; line-height: 1; color: var(--text-primary); } .btn-hamburger:hover { border-color: var(--accent); } /* Overlay y panel viven siempre en el DOM (para poder animar su entrada/ salida) pero solo se activan de verdad en mobile — en desktop se anulan con !important para que un resize tras abrirlos en mobile no los deje colgando visibles. */ .mobile-nav-overlay { display: none !important; } .mobile-nav-drawer { display: none !important; } @media (max-width: 768px) { .btn-hamburger { display: inline-flex; align-items: center; } .nav-tabs-bar { display: none; } .mobile-nav-overlay { display: block !important; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .mobile-nav-overlay.open { opacity: 1; pointer-events: auto; } .mobile-nav-drawer { display: flex !important; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 80vw; background: var(--bg-card); border-right: 1px solid var(--border); box-shadow: var(--shadow); z-index: 201; padding: 4px 0 16px; transform: translateX(-100%); transition: transform 0.25s ease; overflow-y: auto; } .mobile-nav-drawer.open { transform: translateX(0); } .mobile-nav-drawer-header { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .mobile-nav-drawer-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; flex: 1; } .mobile-nav-close { background: none; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 4px; line-height: 1; } .mobile-nav-link { display: flex; align-items: center; width: 100%; text-align: left; background: none; border: none; border-left: 3px solid transparent; padding: 14px 18px; font-size: 15px; font-weight: 500; color: var(--text-secondary); cursor: pointer; font-family: var(--font-main); transition: all 0.15s; text-decoration: none; box-sizing: border-box; } .mobile-nav-link:hover { background: var(--overlay-soft); color: var(--text-primary); } .mobile-nav-link.active { color: var(--accent); font-weight: 700; background: rgba(108,99,255,0.08); border-left-color: var(--accent); } } /* ===== SCROLL TO TOP ===== */ .scroll-top { position: fixed; bottom: 92px; /* justo encima del botón del chat */ right: 24px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); font-size: 20px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s, border-color 0.2s; z-index: 500; } .scroll-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .scroll-top:hover { border-color: var(--accent); color: var(--accent); } /* ===== CONCLUSIONES TAB ===== */ /* Specs de visualización: marcas finas (barras 12px), extremo de dato redondeado 4px y arranque cuadrado en la línea base, valores siempre en texto (tokens de texto, nunca el color de la serie), leyenda cuando hay dos series. Serie de datos = var(--accent) (validado contraste/CVD en ambos temas); serie de contexto = gris de de-énfasis por tema. */ .ccl-provisional { font-size: 13px; line-height: 1.55; color: var(--text-secondary); background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.3); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 20px; } .ccl-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; } .ccl-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; min-width: 0; } .ccl-tile-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } .ccl-tile-value { font-size: 22px; font-weight: 700; color: var(--text-primary); line-height: 1.25; } .ccl-tile-sub { font-size: 12px; color: var(--text-secondary); margin-top: 6px; line-height: 1.4; } .ccl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .ccl-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; min-width: 0; } .ccl-section-lessons { grid-column: 1 / -1; } .ccl-section h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin-bottom: 6px; } .ccl-section-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 14px; } /* Fila de barra simple: etiqueta | pista | valor */ .ccl-bar-row { display: grid; grid-template-columns: minmax(120px, 40%) 1fr minmax(70px, auto); align-items: center; gap: 10px; padding: 5px 0; min-width: 0; } .ccl-bar-label { font-size: 12.5px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ccl-bar-label small { font-size: 11px; } .ccl-track { height: 12px; background: var(--bg-primary); border-radius: 4px; overflow: hidden; min-width: 0; } .ccl-fill { height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; transition: width 0.5s ease; } .ccl-fill.ctx { background: #94a3b8; } :root[data-theme="light"] .ccl-fill.ctx { background: #64748b; } .ccl-bar-value { font-size: 12.5px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .ccl-bar-value small { font-weight: 400; color: var(--text-muted); } /* Fila doble (top 10 vs resto) */ .ccl-legend { display: flex; gap: 16px; margin-bottom: 10px; font-size: 12px; color: var(--text-secondary); } .ccl-legend-item { display: inline-flex; align-items: center; gap: 6px; } .ccl-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--accent); display: inline-block; } .ccl-swatch.ctx { background: #94a3b8; } :root[data-theme="light"] .ccl-swatch.ctx { background: #64748b; } .ccl-duo-row { display: grid; grid-template-columns: minmax(120px, 38%) 1fr minmax(48px, auto); align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--row-border); min-width: 0; } .ccl-duo-row:last-of-type { border-bottom: none; } .ccl-duo-bars { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ccl-duo-line { display: grid; grid-template-columns: 1fr 52px; align-items: center; gap: 8px; } .ccl-duo-line .ccl-track { height: 9px; } .ccl-duo-line .ccl-bar-value { font-size: 11.5px; } .ccl-duo-gap { font-size: 12.5px; font-weight: 700; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .ccl-duo-gap.pos { color: var(--accent-3); } .ccl-callout { margin-top: 14px; font-size: 13px; line-height: 1.55; color: var(--text-primary); background: rgba(108,99,255,0.08); border: 1px solid rgba(108,99,255,0.25); border-radius: var(--radius); padding: 12px 14px; } .ccl-dead { text-decoration: line-through; color: var(--accent-red); } .ccl-posn { color: var(--text-muted); font-size: 11px; } /* Datos sueltos del test de riesgo */ .ccl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; } .ccl-fact { background: var(--overlay-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ccl-fact-val { font-size: 18px; font-weight: 700; color: var(--text-primary); } .ccl-fact-label { font-size: 11px; color: var(--text-secondary); line-height: 1.35; } /* Tabla de escalada de valores por fase */ .ccl-table-wrap { overflow-x: auto; } .ccl-phase-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; } .ccl-phase-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; } .ccl-phase-table td { padding: 5px 8px; border-bottom: 1px solid var(--row-border); color: var(--text-secondary); white-space: nowrap; } .ccl-phase-table td:first-child { color: var(--text-primary); } .ccl-phase-table tr:last-child td { border-bottom: none; color: var(--text-primary); } .ccl-climbers { display: flex; flex-direction: column; gap: 6px; } .ccl-climber { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; background: var(--overlay-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12.5px; } .ccl-climber-name { font-weight: 600; color: var(--text-primary); } .ccl-climber-move { color: var(--text-secondary); font-variant-numeric: tabular-nums; } .ccl-climber-pts { color: var(--accent-3); font-weight: 600; margin-left: auto; font-variant-numeric: tabular-nums; } /* Lecciones */ .ccl-lessons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ccl-lesson { display: flex; gap: 14px; background: var(--overlay-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; min-width: 0; } .ccl-lesson-num { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: rgba(108,99,255,0.15); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; } .ccl-lesson-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 5px; } .ccl-lesson-text { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; } .ccl-lesson-text strong { color: var(--text-primary); } @media (max-width: 900px) { .ccl-grid { grid-template-columns: 1fr; } .ccl-lessons { grid-template-columns: 1fr; } } @media (max-width: 768px) { .ccl-section { padding: 16px; } .ccl-bar-row { grid-template-columns: minmax(100px, 38%) 1fr minmax(58px, auto); } .ccl-duo-row { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; } .ccl-duo-gap { text-align: left; } } /* "Lo que queda en juego" ocupa el ancho completo (evita el hueco vacío que dejaba en la rejilla de 2 columnas al ser mucho más alta que su pareja) y reparte su contenido en 2 columnas internas. */ .ccl-section-wide { grid-column: 1 / -1; } .ccl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .ccl-cols > div { min-width: 0; } @media (max-width: 900px) { .ccl-cols { grid-template-columns: 1fr; } } /* ===== ESCENARIOS TAB ===== */ .esc-matches-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .esc-match-card { background: var(--overlay-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; min-width: 0; } .esc-match-phase { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 7px; } .esc-match-teams { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .esc-vs { font-size: 10px; color: var(--text-muted); flex-shrink: 0; } .esc-team-btn { flex: 1; min-width: 0; padding: 7px 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all 0.15s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .esc-team-btn:hover { border-color: var(--accent); } .esc-team-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; } .esc-team-unknown { flex: 1; text-align: center; font-size: 12px; color: var(--text-muted); padding: 7px 8px; border: 1px dashed var(--border); border-radius: var(--radius-sm); } .esc-toolbar { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .esc-count { font-size: 12px; color: var(--text-secondary); } .esc-clear-btn { padding: 6px 12px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; } .esc-clear-btn:hover { border-color: var(--accent-red); color: var(--accent-red); } .esc-delta { font-size: 11px; color: var(--text-muted); margin-left: 4px; } .esc-delta.up { color: var(--accent-3); } .esc-delta.down { color: var(--accent-red); } .esc-impact-row { padding: 10px 0; border-bottom: 1px solid var(--row-border); } .esc-impact-row:last-child { border-bottom: none; } .esc-impact-row.top { background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.25); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 6px; } .esc-impact-match { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-primary); margin-bottom: 4px; } .esc-impact-badge { font-size: 11px; font-weight: 700; color: var(--accent-2); } .esc-impact-detail { font-size: 12px; color: var(--text-secondary); line-height: 1.5; } .esc-impact-detail strong { color: var(--text-primary); } .esc-path-row { padding: 10px 0; border-bottom: 1px solid var(--row-border); } .esc-path-row:last-child { border-bottom: none; } .esc-path-name { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 5px; } .esc-path-chips { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .esc-path-chip { background: rgba(108,99,255,0.12); color: var(--accent); border: 1px solid rgba(108,99,255,0.3); border-radius: 4px; padding: 2px 8px; font-size: 12px; font-weight: 600; white-space: nowrap; } .esc-path-chip small { color: var(--text-muted); font-weight: 400; } /* ===== LABORATORIO DEL MARCADOR (Conclusiones) ===== */ .ccl-subhead { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: 8px; } .ccl-freq-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .ccl-freq-label { font-size: 12px; color: var(--text-secondary); } .ccl-freq-chip { background: var(--overlay-soft); border: 1px solid var(--border); border-radius: 4px; padding: 3px 9px; font-size: 12px; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; } .ccl-freq-chip small { color: var(--text-muted); } .ccl-freq-chip.alt { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.3); } /* ===== EVOLUCIÓN TAB ===== */ /* Paleta categórica de 5 series validada con el validador del skill de dataviz (all-pairs CVD, banda de luminosidad, croma y contraste) POR TEMA: claro: #6c63ff #b45309 #0d9488 #be185d #0369a1 oscuro: #6c63ff #d97706 #0d9488 #db2777 #0284c7 El color sigue a la entidad (slot fijo por participante), nunca se recicla. */ :root { --evo-c0: #6c63ff; --evo-c1: #d97706; --evo-c2: #0d9488; --evo-c3: #db2777; --evo-c4: #0284c7; } :root[data-theme="light"] { --evo-c0: #6c63ff; --evo-c1: #b45309; --evo-c2: #0d9488; --evo-c3: #be185d; --evo-c4: #0369a1; } .evo-controls { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } /* Misma caja que search-bar (Clasificación Final/liguilla): ancho fijo de 240px, mismo padding/tamaño de letra, aunque aquí además despliega un desplegable de sugerencias (mismo comportamiento que el buscador del Comparador) en vez de filtrar filas. */ .evo-search-wrap { flex: 0 0 auto; width: 240px; position: relative; margin-bottom: 0; } .evo-search-wrap input { width: 240px; padding: 8px 14px; font-size: 13px; } .evo-mode { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .evo-mode-btn { padding: 9px 16px; background: var(--bg-card); border: none; color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; } .evo-mode-btn.active { background: var(--accent); color: #fff; } .evo-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .evo-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 5px 8px 5px 10px; font-size: 12.5px; font-weight: 600; color: var(--text-primary); } .evo-chip button { background: var(--overlay-soft-hover); border: none; color: var(--text-secondary); width: 18px; height: 18px; border-radius: 50%; font-size: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .evo-chip button:hover { background: var(--accent-red); color: #fff; } .evo-chip-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .slot-0-bg { background: var(--evo-c0); } .slot-1-bg { background: var(--evo-c1); } .slot-2-bg { background: var(--evo-c2); } .slot-3-bg { background: var(--evo-c3); } .slot-4-bg { background: var(--evo-c4); } .evo-chart-card { padding: 20px; } .evo-svg { width: 100%; height: auto; display: block; } .evo-grid { stroke: var(--border); stroke-width: 1; } .evo-tick { fill: var(--text-muted); font-size: 11px; font-family: var(--font-main); } .evo-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .evo-dot { stroke: var(--bg-card); stroke-width: 2; } .evo-endlabel { font-size: 11.5px; font-weight: 600; font-family: var(--font-main); } .evo-line.slot-0 { stroke: var(--evo-c0); } .evo-dot.slot-0 { fill: var(--evo-c0); } .evo-line.slot-1 { stroke: var(--evo-c1); } .evo-dot.slot-1 { fill: var(--evo-c1); } .evo-line.slot-2 { stroke: var(--evo-c2); } .evo-dot.slot-2 { fill: var(--evo-c2); } .evo-line.slot-3 { stroke: var(--evo-c3); } .evo-dot.slot-3 { fill: var(--evo-c3); } .evo-line.slot-4 { stroke: var(--evo-c4); } .evo-dot.slot-4 { fill: var(--evo-c4); } /* Las etiquetas de fin de línea llevan el color de serie por necesidad de identidad (texto corto junto a la marca); en ambos temas los 5 colores pasan el check de contraste ≥3:1 sobre la superficie de la tarjeta. */ .slot-0-text { fill: var(--evo-c0); } .slot-1-text { fill: var(--evo-c1); } .slot-2-text { fill: var(--evo-c2); } .slot-3-text { fill: var(--evo-c3); } .slot-4-text { fill: var(--evo-c4); } @media (max-width: 768px) { .evo-controls { flex-direction: column; } .evo-mode { align-self: stretch; } .evo-mode-btn { flex: 1; } } /* ===== ESCENARIOS: modo Quiz + bloques de 5 preguntas ===== */ .esc-head-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; } .esc-head-row h3 { margin-bottom: 0; } .esc-phase-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 14px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); } .esc-phase-head:first-child { margin-top: 0; } .esc-clear-btn.alt:hover { border-color: var(--accent); color: var(--accent); } .esc-q-block { margin-bottom: 6px; } .esc-q-block.big { margin-bottom: 14px; } .esc-q-title { font-size: 12.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; } .esc-q-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 22px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); } .esc-mini-row { display: flex; align-items: baseline; gap: 7px; padding: 3px 0; font-size: 12.5px; } .esc-mini-rank { color: var(--text-muted); font-size: 11px; width: 14px; } .esc-mini-name { flex: 1; min-width: 0; color: var(--text-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .esc-mini-pct { color: var(--text-secondary); font-variant-numeric: tabular-nums; } .esc-path-sub { font-size: 11.5px; color: var(--text-muted); margin: 1px 0 6px; } .esc-path-lead { color: var(--text-secondary); } .esc-path-chip.muted { background: var(--overlay-soft); color: var(--text-secondary); border-color: var(--border); } /* En mobile los sufijos largos de valor ("pts/hueco · N huecos · %...") no caben en una línea sin desbordar la página: el detalle pasa a bloque y puede envolver, el número principal se queda arriba. */ @media (max-width: 768px) { .ccl-bar-value { white-space: normal; } .ccl-bar-value small { display: block; white-space: normal; line-height: 1.3; } } /* ===== DATACENTER (Quiz Brutal + Extra Ball + Final Fantasy) ===== */ .dc-subtabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; } .dc-subtab { padding: 9px 22px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; color: var(--text-secondary); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: var(--font-main); } .dc-subtab:hover { border-color: var(--accent); color: var(--accent); } .dc-subtab.active { background: var(--accent); border-color: var(--accent); color: white; } .dc-panel { display: none; } .dc-panel.active { display: block; } /* Tarjetas de pregunta: borde superior morado si está pendiente, verde si ya está resuelta, dorado para la tarjeta del "bote personal". */ .question-card.dc::before { background: linear-gradient(90deg, var(--accent), #a78bfa); } .question-card.dc.resolved::before { background: linear-gradient(90deg, #10b981, #059669); } .question-card.dc-pot::before { background: linear-gradient(90deg, #fbbf24, #f59e0b); } .dc-status-ok { color: var(--accent-3); } .dc-status-pending { color: var(--text-muted); } .dc-card-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: -6px 0 14px; } .oracle-bar-fill.hit { background: linear-gradient(90deg, #10b981, #059669); } .oracle-candidate.dc-opt-hit { border-color: rgba(16,185,129,0.45); } .oracle-candidate.dc-opt-miss { opacity: 0.75; } /* Tabla "respuesta a respuesta": la columna del participante queda fija al hacer scroll horizontal (Final Fantasy tiene 24 columnas de preguntas) y las respuestas largas se recortan con elipsis (título completo en tooltip). */ .dc-table th, .dc-table td { white-space: nowrap; } .dc-table th.dc-sticky-col, .dc-table td.dc-sticky-col { position: sticky; left: 0; z-index: 1; background: var(--bg-primary); } .dc-table thead th.dc-sticky-col { background: var(--bg-card); z-index: 2; } .dc-ans { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .dc-ans-hit { color: var(--accent-3); font-weight: 600; } .dc-ans-miss { color: var(--accent-red); opacity: 0.8; } /* Comparador: las preguntas de Extra Ball / Final Fantasy son largas — en la columna de métricas (nowrap por defecto) se les permite envolver para no ensanchar la tabla una barbaridad. En mobile ya envuelve de serie. */ @media (min-width: 769px) { .comparador-metric-col.metric-wrap { white-space: normal; min-width: 220px; max-width: 260px; line-height: 1.4; } } /* ===== CLASIFICACIÓN FINAL (tabla oficial) ===== */ .cf-wrapper { overflow-x: auto; } .cf-table { white-space: nowrap; font-size: 12.5px; } .cf-table th, .cf-table td { text-align: center; padding: 8px 10px; } .cf-table .cf-name { text-align: left; font-weight: 600; } .cf-table tbody tr { cursor: pointer; } .cf-table tbody tr:hover { background: var(--bg-card-hover); } .cf-total { font-weight: 700; color: var(--accent); font-size: 13.5px; } .cf-count { color: var(--text-secondary); } /* Dos bloques de columnas coloreados para orientarse de un vistazo: de PTO.1X2 a GOL (puntos base del partido) en tono morado, de KAISER a APADRINADOS (bonus) en tono dorado. */ .cf-table th.cf-col-totales, .cf-table td.cf-col-totales { background: rgba(108,99,255,0.07); } .cf-table th.cf-col-bonus, .cf-table td.cf-col-bonus { background: rgba(251,191,36,0.09); } .cf-table thead th.cf-col-totales { color: var(--accent); } .cf-table thead th.cf-col-bonus { color: var(--gold); } /* La tabla tiene 18 columnas y necesita scroll horizontal — sin esto, los dos iconos de acción (Comparador/Evolución) quedan fuera de la vista inicial y pasan desapercibidos. Se fijan al borde derecho, igual que la columna de participante fija por la izquierda en la tabla "respuesta a respuesta" de DataCenter (mismo patrón, lado opuesto). */ .cf-table th.col-comparador, .cf-table td.col-comparador { position: sticky; z-index: 1; background: var(--bg-primary); } .cf-table thead th.col-comparador { background: var(--bg-card); z-index: 2; } .cf-table th.col-comparador:last-child, .cf-table td.col-comparador:last-child { right: 0; } .cf-table th.col-comparador:nth-last-child(2), .cf-table td.col-comparador:nth-last-child(2) { right: 69px; } /* ===== RESULTADOS (partidos reales por fase) ===== */ .res-section-title { font-size: 18px; margin: 0 0 12px; } .res-phase-summary { font-size: 12.5px; color: var(--text-muted); margin-bottom: 12px; } .res-matches-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 8px; } .res-match { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; } .res-match-teams { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .res-match-empty { background: var(--overlay-soft); border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; justify-content: center; } .res-team { flex: 1; font-size: 13px; font-weight: 500; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .res-team.res-winner { color: var(--text-primary); font-weight: 700; } .res-team.res-loser { opacity: 0.55; text-decoration: line-through; } .res-score-wrap { flex-shrink: 0; text-align: center; padding: 0 6px; } .res-score { display: block; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--accent); } .res-score-pending { color: var(--text-muted); font-weight: 500; font-size: 13px; } .res-sub { display: block; font-size: 10px; color: var(--text-muted); white-space: nowrap; } .res-points { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); text-align: center; } .res-points strong { color: var(--text-secondary); } .res-points-grandtotal { color: var(--accent) !important; font-size: 13px; } /* Partidos que fueron a prórroga/penaltis: cada tramo puntúa aparte, así que se desglosa entero en vez de resumirlo en un tooltip. */ .res-points-multi { text-align: left; } .res-points-tramo { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; } .res-points-tramo-label { font-weight: 600; color: var(--text-secondary); flex-shrink: 0; } .res-points-total { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); text-align: right; color: var(--text-secondary); } .res-points-total strong { color: var(--accent); font-size: 13px; } /* Resumen de puntos repartidos en Extra Ball / Final Fantasy */ .res-questions-summary { font-size: 12.5px; color: var(--text-secondary); background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.25); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 16px; } .res-questions-summary strong { color: var(--gold); font-size: 14px; } /* Liguilla agrupada por grupo real del Mundial (A-L) */ .res-group { margin-bottom: 28px; } .res-group-heading { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--accent); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 2px solid var(--border-accent); } /* Tarjetas de preguntas (Quiz Brutal / Extra Ball / Final Fantasy) */ .res-questions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .res-question-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .res-question-title { font-size: 13.5px; font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .res-options-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .res-option { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); font-size: 12.5px; color: var(--text-secondary); } .res-option-mark { width: 16px; flex-shrink: 0; text-align: center; } .res-option-text { flex: 1; } .res-option-pts { color: var(--text-muted); font-size: 11px; flex-shrink: 0; } .res-option-correct { background: rgba(16,185,129,0.12); color: var(--text-primary); font-weight: 600; } .res-option-correct .res-option-pts { color: var(--accent-3); } .res-question-footer { padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); } .res-question-footer.res-question-resolved { color: var(--accent-3); } .res-question-footer.res-pending { color: var(--text-muted); } .res-question-footer strong { color: var(--text-primary); } @media (max-width: 768px) { .cf-table { font-size: 11.5px; } .cf-table th, .cf-table td { padding: 6px 7px; } .res-matches-grid { grid-template-columns: 1fr; } .res-questions-grid { grid-template-columns: 1fr; } }