/* ============================================================ TORNEO MAXI BALONCESTO — Sección web dinámica Hoja de estilos para integración Django. Sin dependencias. Todo está namespaced bajo .torneo para no chocar con el resto del sitio. Fuentes: Archivo Black / Inter / JetBrains Mono (cargarlas en el del sitio o en el bloque del template). ============================================================ */ :root { --t-ink: oklch(0.20 0.015 60); --t-ink-soft: oklch(0.42 0.012 60); --t-ink-faint: oklch(0.62 0.008 60); --t-paper: oklch(0.985 0.006 80); --t-paper-2: oklch(0.95 0.010 75); --t-rule: oklch(0.85 0.012 70); --t-accent: oklch(0.66 0.18 45); --t-accent-deep: oklch(0.48 0.15 40); --t-accent-soft: oklch(0.965 0.035 70); --t-win: oklch(0.55 0.13 150); --t-font-display: "Archivo Black", system-ui, sans-serif; --t-font-body: "Inter", system-ui, sans-serif; --t-font-mono: "JetBrains Mono", ui-monospace, monospace; --t-maxw: 1120px; } /* ---------- Reset acotado ---------- */ .torneo, .torneo * { box-sizing: border-box; } .torneo { font-family: var(--t-font-body); color: var(--t-ink); background: var(--t-paper-2); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } .torneo img { max-width: 100%; display: block; } .torneo__wrap { max-width: var(--t-maxw); margin: 0 auto; padding: 0 20px; } /* Progressive enhancement: sin JS se muestra todo apilado. */ .torneo-js .torneo-panel.is-hidden { display: none; } .torneo-js .vuelta-group.is-hidden { display: none; } /* ============================================================ HERO ============================================================ */ .torneo-hero { background: var(--t-ink); color: var(--t-paper); } .torneo-hero__wrap { max-width: var(--t-maxw); margin: 0 auto; padding: 44px 20px 36px; position: relative; } .torneo-hero__logo { position: absolute; top: 60px; right: 20px; width: 104px; height: 104px; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0,0,0,0.45)); } .torneo-hero__tag { display: flex; justify-content: space-between; gap: 16px; font-family: var(--t-font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: oklch(0.78 0.01 70); border-bottom: 1px solid oklch(0.35 0.01 60); padding-bottom: 12px; } .torneo-hero__tag .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--t-accent); margin-right: 8px; vertical-align: middle; } .torneo-hero h1 { font-family: var(--t-font-display); font-size: clamp(46px, 8.5vw, 100px); line-height: 0.86; letter-spacing: -0.02em; text-transform: uppercase; margin: 26px 0 0; max-width: 14ch; } .torneo-hero h1 span { color: var(--t-accent); } .torneo-hero__sub { max-width: 56ch; color: oklch(0.85 0.01 70); font-size: 16px; margin: 18px 0 0; text-wrap: pretty; } .torneo-hero__meta { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid oklch(0.35 0.01 60); margin-top: 30px; padding-top: 16px; } .torneo-hero__meta .cell { border-right: 1px solid oklch(0.30 0.01 60); padding-right: 12px; } .torneo-hero__meta .cell:last-child { border-right: none; } .torneo-hero__meta .label { font-family: var(--t-font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: oklch(0.70 0.01 70); margin-bottom: 4px; } .torneo-hero__meta .value { font-family: var(--t-font-display); font-size: 26px; line-height: 1; color: var(--t-paper); } .torneo-hero__meta .value small { font-family: var(--t-font-body); font-weight: 500; font-size: 11px; color: oklch(0.78 0.01 70); display: block; margin-top: 4px; letter-spacing: 0; } /* ============================================================ TABS (sticky) ============================================================ */ .torneo-tabs { position: sticky; top: 0; z-index: 30; background: var(--t-paper); border-bottom: 1px solid var(--t-rule); } .torneo-tabs__wrap { max-width: var(--t-maxw); margin: 0 auto; padding: 0 12px; display: flex; gap: 2px; overflow-x: auto; } .torneo-tabs a { font-family: var(--t-font-display); text-transform: uppercase; font-size: 13px; letter-spacing: 0.02em; color: var(--t-ink-faint); text-decoration: none; white-space: nowrap; padding: 16px 16px; border-bottom: 3px solid transparent; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .torneo-tabs a:hover { color: var(--t-ink-soft); } .torneo-tabs a.is-active { color: var(--t-ink); border-bottom-color: var(--t-accent); } /* ============================================================ TOOLBAR — filtro de equipos + selector de vuelta ============================================================ */ .torneo-toolbar { max-width: var(--t-maxw); margin: 0 auto; padding: 24px 20px 6px; display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center; justify-content: space-between; } .torneo-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .torneo-group__lbl { font-family: var(--t-font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--t-ink-faint); margin-right: 6px; } .chip { font-family: var(--t-font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--t-rule); background: var(--t-paper); padding: 7px 12px; cursor: pointer; color: var(--t-ink-soft); transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .chip:hover { border-color: var(--t-ink-faint); } .chip.is-active { background: var(--t-ink); color: var(--t-paper); border-color: var(--t-ink); } .chip--accent.is-active { background: var(--t-accent-deep); border-color: var(--t-accent-deep); color: #fff; } .chip--ghost { background: transparent; } .torneo-goto { font-family: var(--t-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-accent-deep); background: var(--t-accent-soft); border: 1px solid oklch(0.85 0.05 60); padding: 7px 12px; cursor: pointer; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; } .torneo-goto::before { content: "›"; font-weight: 700; } /* ============================================================ PANELES ============================================================ */ .torneo-panel { max-width: var(--t-maxw); margin: 0 auto; padding: 14px 20px 56px; } .section-title { font-family: var(--t-font-display); font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; margin: 26px 0 10px; display: flex; align-items: center; gap: 10px; } .section-title::before { content: ""; width: 14px; height: 14px; background: var(--t-accent); display: inline-block; } .section-title.muted::before { background: var(--t-ink); } /* ---------- Banner de vuelta ---------- */ .vuelta-banner { background: var(--t-ink); color: var(--t-paper); padding: 12px 16px; margin: 18px 0 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .vuelta-banner.alt { background: var(--t-accent-deep); } .vuelta-banner .label { font-family: var(--t-font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: oklch(0.80 0.01 70); } .vuelta-banner .title { font-family: var(--t-font-display); font-size: 17px; text-transform: uppercase; } /* ============================================================ CALENDARIO — filas tipo timeline ============================================================ */ .calendar-stack { display: flex; flex-direction: column; gap: 6px; } .jr-row { display: grid; grid-template-columns: 100px 1fr; border: 1px solid var(--t-rule); background: var(--t-paper); overflow: hidden; transition: opacity 0.2s ease, box-shadow 0.2s ease; } .jr-row.is-dim { opacity: 0.28; } .jr-row.is-next { box-shadow: inset 4px 0 0 0 var(--t-accent); border-color: oklch(0.80 0.06 60); } .jr-row.flash { animation: jr-flash 1.1s ease; } @keyframes jr-flash { 0%, 100% { background: var(--t-paper); } 30% { background: var(--t-accent-soft); } } .jr-date { background: var(--t-ink); color: var(--t-paper); padding: 12px 8px; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 3px; position: relative; } .jr-date .dow { font-family: var(--t-font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: oklch(0.72 0.01 70); } .jr-date .day { font-family: var(--t-font-display); font-size: 26px; line-height: 1; color: var(--t-paper); } .jr-date .mon { font-family: var(--t-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-accent); } .jr-row.is-next .jr-date::after { content: "Próxima"; position: absolute; top: 6px; left: 0; right: 0; font-family: var(--t-font-mono); font-size: 7.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-ink); background: var(--t-accent); padding: 1px 0; } .jr-body { display: grid; grid-template-columns: 150px 1fr 132px; align-items: center; gap: 14px; padding: 8px 16px; } .jr-meta { border-right: 1px solid var(--t-rule); padding-right: 12px; height: 100%; display: flex; flex-direction: column; justify-content: center; } .jr-num { font-family: var(--t-font-display); font-size: 22px; line-height: 1; } .jr-num small { font-family: var(--t-font-mono); font-size: 9px; color: var(--t-ink-faint); letter-spacing: 0.12em; display: block; margin-bottom: 2px; font-weight: 400; } .jr-sede { margin-top: 5px; font-family: var(--t-font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--t-ink-faint); } .jr-sede strong { display: block; font-family: var(--t-font-display); font-size: 12px; letter-spacing: 0; color: var(--t-accent-deep); margin-top: 2px; } .jr-matches { display: flex; flex-direction: column; gap: 5px; } .jr-match { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 2px 0; border-radius: 2px; } .jr-match .time { font-family: var(--t-font-mono); font-size: 9.5px; color: var(--t-ink-soft); letter-spacing: 0.04em; background: oklch(0.93 0.006 75); border: 1px solid var(--t-rule); padding: 2px 6px; font-weight: 700; white-space: nowrap; text-align: center; } .jr-match .home { text-align: right; } .jr-match .away { text-align: left; } .jr-match .vs { font-family: var(--t-font-mono); font-size: 9px; color: var(--t-ink-faint); letter-spacing: 0.1em; border: 1px solid var(--t-rule); padding: 1px 6px; white-space: nowrap; } /* Marcador final (cuando el partido ya se jugó) */ .jr-match .vs.score { color: var(--t-ink); border-color: var(--t-ink); font-weight: 700; letter-spacing: 0; } /* El equipo SEDE (anfitrión) se marca con punto naranja y juega 2º (7:30). */ .jr-match.host-h .home, .jr-match.host-a .away { color: var(--t-accent-deep); font-weight: 700; } .jr-match.host-h .home::before, .jr-match.host-a .away::before { content: "●"; color: var(--t-accent); margin-right: 6px; font-size: 9px; vertical-align: 1px; } .jr-match.host-h .time, .jr-match.host-a .time { background: var(--t-accent-soft); border-color: oklch(0.85 0.05 60); color: var(--t-accent-deep); } /* Resultado de filtro por equipo */ .jr-match.is-pick { background: var(--t-accent-soft); outline: 1px solid oklch(0.85 0.06 60); } .jr-rest { border-left: 1px solid var(--t-rule); padding-left: 12px; height: 100%; display: flex; flex-direction: column; justify-content: center; } .jr-rest .lbl { font-family: var(--t-font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--t-ink-faint); } .jr-rest .team { font-family: var(--t-font-display); font-size: 13px; text-transform: uppercase; margin-top: 2px; } .jr-rest .team::before { content: "Z"; display: inline-block; background: oklch(0.92 0.01 70); color: var(--t-ink-faint); font-family: var(--t-font-mono); font-size: 9px; width: 14px; height: 14px; text-align: center; line-height: 14px; margin-right: 6px; vertical-align: 2px; } .legend-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 14px; font-size: 11px; color: var(--t-ink-soft); font-family: var(--t-font-mono); letter-spacing: 0.04em; } .legend-row .swatch { display: inline-block; width: 10px; height: 10px; background: var(--t-accent); border-radius: 50%; margin-right: 6px; vertical-align: middle; } .note-card { border-left: 3px solid var(--t-accent); background: var(--t-accent-soft); padding: 14px 18px; margin-top: 18px; font-size: 13px; color: var(--t-ink-soft); } .note-card strong { color: var(--t-ink); font-family: var(--t-font-display); text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; display: block; margin-bottom: 3px; } /* ============================================================ REGLAMENTO — tabla de puntos, callout, criterios ============================================================ */ .points-table { width: 100%; border-collapse: collapse; margin-top: 8px; } .points-table th, .points-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--t-rule); } .points-table thead th { background: var(--t-ink); color: var(--t-paper); font-family: var(--t-font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500; border-bottom: none; } .points-table .pts { font-family: var(--t-font-display); font-size: 22px; width: 110px; text-align: right; } .points-table .pts.win { color: var(--t-accent-deep); } .points-table tr.row-win td { background: var(--t-accent-soft); } .points-table .idx { font-family: var(--t-font-mono); color: var(--t-ink-faint); } .points-table .label { font-family: var(--t-font-display); font-size: 16px; text-transform: uppercase; } .points-table .desc { font-size: 12.5px; color: var(--t-ink-soft); margin-top: 2px; } .callout { background: var(--t-ink); color: var(--t-paper); padding: 14px 18px; margin: 16px 0; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; } .callout .badge { font-family: var(--t-font-display); font-size: 14px; background: var(--t-accent); color: var(--t-ink); padding: 6px 10px; text-transform: uppercase; letter-spacing: 0.04em; } .callout .body { font-size: 13px; line-height: 1.5; } .callout .body strong { display: block; font-family: var(--t-font-display); font-size: 14px; text-transform: uppercase; margin-bottom: 2px; } .callout .score { font-family: var(--t-font-display); font-size: 28px; color: var(--t-accent); letter-spacing: 0.02em; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .info-card { border: 1px solid var(--t-rule); padding: 16px 18px; background: var(--t-paper); } .info-card h4 { font-family: var(--t-font-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--t-rule); } .info-card ol, .info-card ul { margin: 0; padding: 0; list-style: none; } .info-card ol { counter-reset: rule; } .info-card ol li { counter-increment: rule; padding: 8px 0 8px 36px; position: relative; border-bottom: 1px dashed oklch(0.90 0.01 70); color: var(--t-ink-soft); } .info-card ol li::before { content: counter(rule, decimal-leading-zero); position: absolute; left: 0; top: 8px; font-family: var(--t-font-mono); font-size: 11px; color: var(--t-accent-deep); font-weight: 700; } .info-card ul li { padding: 8px 0 8px 22px; position: relative; border-bottom: 1px dashed oklch(0.90 0.01 70); color: var(--t-ink-soft); } .info-card ul li::before { content: "→"; position: absolute; left: 0; top: 8px; color: var(--t-accent); font-weight: 700; } .info-card li:last-child { border-bottom: none; } .info-card li strong { color: var(--t-ink); display: block; margin-bottom: 2px; } /* ============================================================ TABLA DE POSICIONES ============================================================ */ .standings-wrap { overflow-x: auto; } .standings { width: 100%; border-collapse: collapse; margin-top: 8px; min-width: 560px; } .standings thead th { background: var(--t-ink); color: var(--t-paper); font-family: var(--t-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; text-align: center; padding: 11px 8px; white-space: nowrap; } .standings thead th.c-team { text-align: left; } .standings tbody td { text-align: center; padding: 12px 8px; border-bottom: 1px solid var(--t-rule); font-family: var(--t-font-mono); font-size: 14px; color: var(--t-ink-soft); } .standings tbody tr:hover { background: oklch(0.97 0.006 75); } .standings .c-pos { width: 64px; position: relative; } .standings .c-pos .rank { font-family: var(--t-font-display); font-size: 16px; color: var(--t-ink); } .standings .c-pos .qmark { display: inline-block; font-family: var(--t-font-mono); font-size: 8px; letter-spacing: 0.12em; background: var(--t-accent); color: var(--t-ink); padding: 1px 4px; margin-left: 5px; vertical-align: 2px; } .standings .c-team { text-align: left; } .standings .c-team .tname { font-family: var(--t-font-display); font-size: 15px; text-transform: uppercase; color: var(--t-ink); letter-spacing: 0.01em; } .standings .c-team .tie { font-family: var(--t-font-mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-accent-deep); border: 1px solid oklch(0.85 0.05 60); background: var(--t-accent-soft); padding: 1px 5px; margin-left: 8px; vertical-align: 2px; } .standings .c-pts { font-family: var(--t-font-display); font-size: 18px; color: var(--t-ink); width: 70px; } .standings .c-dif.pos { color: var(--t-win); } .standings .c-dif.neg { color: var(--t-accent-deep); } /* Zona de clasificación a play-offs (top 4) */ .standings tbody tr.is-clasif td { background: var(--t-accent-soft); } .standings tbody tr.is-clasif:hover td { background: oklch(0.95 0.045 70); } .standings tbody tr.is-clasif .c-pos { box-shadow: inset 4px 0 0 0 var(--t-accent); } .empty-state { border: 1px dashed var(--t-rule); background: var(--t-paper); padding: 48px 28px; text-align: center; margin-top: 14px; } .empty-state__mark { font-family: var(--t-font-display); font-size: 44px; color: var(--t-rule); letter-spacing: 0.04em; margin-bottom: 10px; } .empty-state p { max-width: 46ch; margin: 0 auto; color: var(--t-ink-soft); font-size: 14px; } /* ============================================================ PLAY-OFFS — sedes + bracket ============================================================ */ .sede-banner { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; } .sede-banner .item { border: 1px solid var(--t-rule); padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; background: var(--t-paper); } .sede-banner .item .lbl { font-family: var(--t-font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--t-ink-faint); margin-bottom: 5px; } .sede-banner .item .val { font-family: var(--t-font-display); font-size: 16px; text-transform: uppercase; color: var(--t-accent-deep); } .sede-banner .item .mark { font-family: var(--t-font-display); font-size: 28px; color: var(--t-ink); } .sede-banner .item .mark.accent { color: var(--t-accent-deep); } .bracket { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1fr; margin-top: 18px; align-items: stretch; } .bracket-col { display: flex; flex-direction: column; gap: 18px; justify-content: center; } .bracket-col h5 { font-family: var(--t-font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t-ink-faint); margin: 0 0 4px; text-align: center; } .bracket-game { border: 1.5px solid var(--t-ink); background: var(--t-paper); padding: 10px 12px; } .bracket-game .gtag { font-family: var(--t-font-mono); font-size: 9px; letter-spacing: 0.15em; color: var(--t-ink-faint); margin-bottom: 6px; } .bracket-game .slot { display: flex; justify-content: space-between; padding: 6px 0; font-family: var(--t-font-display); font-size: 13px; text-transform: uppercase; border-bottom: 1px solid var(--t-rule); } .bracket-game .slot:last-child { border-bottom: none; } .bracket-game .slot .seed { font-family: var(--t-font-mono); font-size: 10px; color: var(--t-ink-faint); letter-spacing: 0.1em; } .bracket-game.final { background: var(--t-ink); color: var(--t-paper); border-color: var(--t-ink); } .bracket-game.final .gtag { color: var(--t-accent); } .bracket-game.final .slot { border-bottom-color: oklch(0.35 0.01 60); } .bracket-game.final .slot .seed { color: oklch(0.70 0.01 70); } .connector { border-right: 1.5px solid var(--t-rule); margin: 12px 0; } .trophy { border: 1.5px solid var(--t-accent); padding: 18px 14px; text-align: center; background: var(--t-accent-soft); } .trophy .k { font-family: var(--t-font-mono); font-size: 9px; letter-spacing: 0.18em; color: var(--t-ink-faint); } .trophy .yr { font-family: var(--t-font-display); font-size: 26px; line-height: 1; text-transform: uppercase; color: var(--t-accent-deep); margin-top: 8px; } .trophy .nm { font-family: var(--t-font-display); font-size: 14px; text-transform: uppercase; margin-top: 4px; } .trophy .star { margin: 16px auto 0; width: 60px; height: 60px; border-radius: 50%; background: var(--t-accent); display: flex; align-items: center; justify-content: center; font-family: var(--t-font-display); font-size: 28px; color: var(--t-ink); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 860px) { .jr-body { grid-template-columns: 1fr; gap: 10px; padding: 12px 14px; } .jr-meta { border-right: none; border-bottom: 1px solid var(--t-rule); padding: 0 0 10px; flex-direction: row; align-items: baseline; gap: 14px; } .jr-rest { border-left: none; border-top: 1px solid var(--t-rule); padding: 10px 0 0; flex-direction: row; align-items: baseline; gap: 10px; } .two-col { grid-template-columns: 1fr; } .torneo-hero__logo { width: 72px; height: 72px; top: 48px; } } @media (max-width: 620px) { .torneo-hero__meta { grid-template-columns: repeat(2, 1fr); gap: 14px 0; } .torneo-hero__meta .cell:nth-child(2) { border-right: none; } .sede-banner { grid-template-columns: 1fr; } .bracket { grid-template-columns: 1fr; gap: 14px; } .connector { display: none; } .callout { grid-template-columns: 1fr; gap: 10px; text-align: left; } .jr-row { grid-template-columns: 76px 1fr; } } /* ============================================================ IMPRESIÓN (opcional, por si se imprime la sección) ============================================================ */ @media print { .torneo-tabs, .torneo-toolbar, .torneo-goto { display: none !important; } .torneo-js .torneo-panel.is-hidden, .torneo-js .vuelta-group.is-hidden { display: block !important; } .torneo { background: #fff; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }