/* Lo unico que hacklab-base.css no trae: la grilla de casillas. * Todo lo demas (tipografia, card, select, input, boton, badge, tabla, CRT) * sale del tema. Este archivo va DESPUES del tema en el . * * Los colores se derivan de las variables --hl-*: si algun dia cambia el tema, * el grafico lo sigue solo. Las dos excepciones estan comentadas abajo. */ :root { /* El acento del tema pasa al verde del logo. Se usa en el chrome (botones, badges, foco, links); las barras usan los tonos de abajo. */ --hl-accent: #6ED88A; --hl-accent-hover: #8FE5A8; --hl-ring: rgba(110, 216, 138, .45); /* Verde de marca: titulo y halo. Es el tono claro, el mismo del logo. */ --pj-marca: #6ED88A; /* --- los dos colores que codifican datos --- */ /* Puntos ganados por el resto de los equipos. Es el verde del logo pero mas profundo: el claro (#6ED88A, L .80) se sale de banda y las barras de los rivales terminaban gritando mas que las de Hampones. */ --pj-ganado: #2FA35C; /* Hampones. Celeste, mas luminoso que el verde a proposito: el equipo destacado tiene que resaltar sobre el resto. Contra #2FA35C da dE 20.8 en deuteranopia y 13.8 en tritanopia sobre el fondo del tema. (El bordo de la marca no sirve aca: sobre negro da 2.64:1, y contra cualquier verde de barra cae a dE 1.6 -- el clasico rojo/verde.) */ --pj-propio: #38BDF8; /* Derivados del anterior. Se escriben aparte porque rgba() no puede tomar un hex de variable: si cambia --pj-propio, hay que cambiar estos tres. */ --pj-propio-fondo: rgba(56, 189, 248, .08); /* fondo de la fila */ --pj-propio-hover: rgba(56, 189, 248, .14); --pj-propio-borde: rgba(56, 189, 248, .40); /* casillas que aun puede ganar */ --pj-hueco: var(--hl-bg-tertiary); /* todavia se puede ganar */ --pj-quemado: var(--hl-bg-elevated); /* ya no */ /* La casilla perdida no depende del color: lleva trama, asi sobrevive a daltonismo, impresion en blanco y negro y forced-colors. Sobre fondo oscuro la trama va en blanco. */ --pj-rayas: repeating-linear-gradient(45deg, transparent 0 2px, rgba(255, 255, 255, .20) 2px 3px); --pj-casilla-alto: 22px; } /* El tema escribe su azul a mano en tres rgba() que las variables no alcanzan. Se repiten aca en verde para que no queden restos del acento viejo. */ .hl-badge-accent { background: rgba(110, 216, 138, .1); border-color: rgba(110, 216, 138, .22); } .hl-nav-item.active { background: rgba(110, 216, 138, .1); } .hl-glow { text-shadow: 0 0 10px rgba(110, 216, 138, .5), 0 0 40px rgba(110, 216, 138, .15); } /* ---------------------------------------------------------- splash */ /* Debajo del ruido y las scanlines del tema (9998/9999) a proposito: el CRT tiene que caer sobre el video y sobre el login, no quedar tapado. */ .pj-splash { position: fixed; inset: 0; z-index: 9990; background: var(--hl-bg-primary); display: grid; place-items: center; opacity: 1; transition: opacity .4s ease; } .pj-splash.saliendo { opacity: 0; pointer-events: none; } .pj-splash[hidden] { display: none; } /* La pone el script del cuando la intro ya se vio: asi el splash no se dibuja nunca y no hay parpadeo. Gana sobre .pj-splash por especificidad. */ html.sin-intro .pj-splash { display: none; } /* Mientras el splash esta arriba, la pagina de atras no scrollea. */ body.pj-bloqueado { overflow: hidden; } .pj-fase { width: 100%; height: 100%; display: grid; place-items: center; } .pj-fase[hidden] { display: none; } .pj-video { width: 100%; height: 100%; object-fit: cover; } .pj-video-btns { position: absolute; right: 1.25rem; bottom: 1.25rem; display: flex; gap: .5rem; } /* La tarjeta de login del tema centra sola; solo ajustamos la marca. */ .pj-login-logo { border-radius: 50%; margin: 0 auto .75rem; display: block; box-shadow: 0 0 0 1px var(--hl-border), 0 0 32px rgba(110, 216, 138, .22); } .hl-auth-header h1 { font-size: 1.4rem; color: var(--pj-marca); } .hl-auth-header h1 span { color: var(--hl-text-primary); font-weight: 400; } /* Que quede claro que el login es decorativo y no valida nada. */ .pj-aviso { font-family: var(--hl-font-mono); font-size: .68rem; letter-spacing: .04em; color: var(--hl-text-muted); } /* ---------------------------------------------------------- estructura */ .pj-wrap { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem 3rem; } /* ---------------------------------------------------------- cabecera */ .pj-cabecera { display: flex; align-items: center; gap: 1.1rem; } /* El fondo del logo (#0B0D0C) es casi el del tema (#0a0a0a), asi que no hace falta recortarlo: se funde solo. El halo lo despega apenas del negro. */ .pj-logo { flex: none; width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 0 0 1px var(--hl-border), 0 0 28px rgba(110, 216, 138, .18); } .pj-titulo { font-size: 1.75rem; margin: 0; letter-spacing: -.02em; /* El verde claro del logo. En las barras va la version profunda: ver --pj-ganado. */ color: var(--pj-marca); text-shadow: 0 0 12px rgba(110, 216, 138, .45), 0 0 42px rgba(110, 216, 138, .15); } .pj-titulo span { color: var(--hl-text-primary); font-weight: 400; text-shadow: none; } .pj-bajada { font-family: var(--hl-font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; color: var(--hl-text-muted); margin: .15rem 0 0; } .pj-lead { color: var(--hl-text-secondary); font-size: .88rem; margin: .5rem 0 0; } /* El sello de actualizacion, debajo de la bajada. Deliberadamente discreto: tiene que estar cuando lo buscas y no competir con el titulo. */ .pj-actualizado { color: var(--hl-text-muted); font-size: .78rem; margin: .35rem 0 0; font-family: var(--hl-font-mono, monospace); } .pj-actualizado:empty { display: none; } /* Una sola fila de filtros, arriba de todo lo que gobierna. */ .pj-filtros { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 2rem; } /* El select del tema es width:100%, asi que el ancho lo pone el grupo. */ .pj-filtros .hl-form-group { margin-bottom: 0; flex: 0 1 auto; min-width: 16rem; } /* '.hl-form-group label' del tema (0,1,1) le gana a '.hl-label' (0,1,0) y se pierde el look de etiqueta chica en mono. Lo devolvemos con mas peso. */ .pj-filtros .hl-form-group label.hl-label { font-family: var(--hl-font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--hl-text-muted); } .pj-vistas { display: flex; margin-left: auto; gap: .4rem; } .pj-resumen { color: var(--hl-text-secondary); font-size: .9rem; padding-bottom: 1.25rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--hl-border); } .pj-grupo { margin-bottom: 1.5rem; } /* El card del tema se levanta 2px en hover. Acá el mouse recorre las filas todo el tiempo: que la tarjeta salte marea y mueve el tooltip. */ .pj-grupo.hl-card:hover { transform: none; } .pj-grupo.hl-card:hover .hl-card-title { color: inherit; } .pj-sub { color: var(--hl-text-muted); font-size: .8rem; margin-top: .15rem; } /* ---------------------------------------------------------- leyenda */ .pj-leyenda { display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: .78rem; color: var(--hl-text-secondary); margin-bottom: 1.25rem; } .pj-leyenda span { display: flex; align-items: center; gap: .45rem; } .pj-leyenda i { width: 14px; height: 14px; border-radius: 2px; display: block; } .pj-l-ganado { background: var(--pj-ganado); } .pj-l-propio { background: var(--pj-propio); } .pj-l-posible { background: var(--pj-hueco); box-shadow: inset 0 0 0 1px var(--hl-border); } .pj-l-perdido { background: var(--pj-quemado); background-image: var(--pj-rayas); } /* ---------------------------------------------------------- barras */ .pj-barras { display: grid; gap: .4rem; } .pj-fila { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr auto; gap: .85rem; align-items: center; padding: .35rem .5rem; border-radius: var(--hl-radius-sm); transition: background var(--hl-transition); } .pj-fila:hover, .pj-fila:focus-visible { background: var(--hl-bg-tertiary); outline: none; } /* La fila resaltada se marca por si misma, sin depender de que el equipo tenga puntos: al principio del torneo estan todos en cero y no habria una sola casilla celeste que pintar. Va despues del :hover para que no se pierda al pasar el mouse. */ .pj-fila.propio { background: var(--pj-propio-fondo); box-shadow: inset 3px 0 0 var(--pj-propio); /* inset: no corre el layout */ } .pj-fila.propio:hover { background: var(--pj-propio-hover); } .pj-fila:focus-visible { box-shadow: 0 0 0 2px var(--hl-ring); } .pj-fila.propio:focus-visible { box-shadow: inset 3px 0 0 var(--pj-propio), 0 0 0 2px var(--hl-ring); } .pj-nombre { font-size: .85rem; color: var(--hl-text-secondary); display: flex; align-items: center; gap: .45rem; min-width: 0; /* deja que el texto se achique en el grid */ } /* El recorte va en el texto, no en la fila: si estuviera en .pj-nombre, el badge de campeon/afuera seria lo primero en cortarse. */ .pj-nombre .pj-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .pj-nombre .hl-badge { flex: none; } /* Codificacion secundaria del equipo propio: no alcanza con el color, ni siquiera ahora que separa bien. */ .pj-fila.propio .pj-nombre { color: var(--hl-text-primary); font-weight: 700; } .pj-fila.propio .pj-nombre::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pj-propio); flex: none; } .pj-fila.eliminado .pj-nombre { color: var(--hl-text-muted); text-decoration: line-through; } /* Una sola grilla por grupo: todas las filas comparten columnas, asi las casillas se alinean verticalmente y las barras son comparables. */ .pj-barra { display: grid; grid-template-columns: repeat(var(--escala), minmax(0, 1fr)); gap: 2px; /* el separador es superficie, no un borde */ height: var(--pj-casilla-alto); } .pj-casilla { background: var(--pj-hueco); box-shadow: inset 0 0 0 1px var(--hl-border); border-radius: 1px; } .pj-casilla:first-child { border-radius: var(--hl-radius-sm) 1px 1px var(--hl-radius-sm); } .pj-casilla:last-child { border-radius: 1px var(--hl-radius-sm) var(--hl-radius-sm) 1px; } /* Las casillas que el equipo resaltado todavia puede ganar llevan el borde en su color: con 0 puntos la barra sigue leyendose como suya. Solo las disponibles: en una perdida el borde diria que sigue en juego, y en una 'nula' inventaria un partido que ese equipo no juega. */ .pj-fila.propio .pj-casilla:not(.ganada):not(.perdida):not(.nula) { box-shadow: inset 0 0 0 1px var(--pj-propio-borde); } .pj-casilla.ganada { background: var(--pj-ganado); box-shadow: none; } .pj-fila.propio .pj-casilla.ganada { background: var(--pj-propio); box-shadow: none; } .pj-casilla.fin { border-radius: 1px var(--hl-radius-sm) var(--hl-radius-sm) 1px; } .pj-casilla.perdida { background-color: var(--pj-quemado); background-image: var(--pj-rayas); box-shadow: none; } /* Partidos que este equipo no juega (le tocan menos fechas que al resto del grupo): no es un hueco disponible, directamente no existe. */ .pj-casilla.nula { background: transparent; box-shadow: none; } .pj-cifras { font-family: var(--hl-font-mono); font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--hl-text-muted); white-space: nowrap; text-align: right; } .pj-cifras b { color: var(--hl-text-primary); font-weight: 600; } /* ---------------------------------------------------------- tooltip */ /* Por encima del ruido y las scanlines del tema (9998 / 9999), si no el texto se lee con la trama encima. */ .pj-tooltip { position: fixed; z-index: 10000; pointer-events: none; background: var(--hl-bg-elevated); color: var(--hl-text-primary); border: 1px solid var(--hl-border-hover); padding: .55rem .7rem; border-radius: var(--hl-radius); font-size: .8rem; line-height: 1.5; max-width: 18rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .6); } .pj-tooltip b { color: var(--hl-text-primary); } .pj-tooltip .destacado { color: var(--hl-accent); font-weight: 600; } /* ------------------------------------------------- proxima fecha */ .pj-proxima-lista { display: grid; gap: .25rem; } .pj-proxima-fila { display: grid; grid-template-columns: 4.5rem 1fr auto; align-items: center; gap: .75rem; padding: .5rem .65rem; border-radius: var(--hl-radius-sm); font-size: .88rem; } .pj-proxima-fila:nth-child(odd) { background: var(--hl-bg-tertiary); } /* Mismo codigo de color que el grafico: celeste es Hampones. */ .pj-proxima-fila.propio { background: var(--pj-propio-fondo); box-shadow: inset 0 0 0 1px var(--pj-propio-borde); } /* La hora en verde, los equipos en blanco y el 'vs' en celeste. Cada campo tiene su color asi la fila se lee de un saque sin leerla entera. */ .pj-proxima-hora { color: var(--hl-accent); font-weight: 600; font-family: var(--hl-font-mono, monospace); } .pj-proxima-cruce { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; min-width: 0; } .pj-proxima-eq { color: var(--hl-text-primary); } /* El celeste ya significa 'Hampones' en el grafico, asi que el 'vs' se lo pide prestado en chico y en minuscula: a ese tamaño lee como conector y no como equipo. Al equipo propio lo marcan la negrita y el fondo de la fila, que es la misma señal que usa .pj-fila.propio en las barras. */ .pj-proxima-vs { color: var(--pj-propio); font-size: .72rem; font-weight: 500; } .pj-proxima-eq.propio { color: var(--pj-propio); font-weight: 700; } .pj-proxima-cancha { color: var(--hl-text-muted); font-size: .78rem; } .pj-proxima-cancha:empty { display: none; } .pj-proxima-vacio { color: var(--hl-text-muted); font-size: .88rem; margin: 0; } /* ---------------------------------------------------------- pie */ .pj-pie { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--hl-border); color: var(--hl-text-muted); font-size: .78rem; } .pj-pie p { margin: .25rem 0; } @media (max-width: 640px) { .pj-fila { grid-template-columns: 1fr; gap: .3rem; } .pj-cifras { text-align: left; } .pj-vistas { margin-left: 0; } .pj-filtros .hl-select, .pj-filtros .hl-input { min-width: 100%; } .pj-proxima-fila { grid-template-columns: 1fr; gap: .2rem; } } /* ------------------------------------------------------- destinos */ /* La foto del momento: a donde va cada equipo si el torneo terminara hoy. Solo aparece en los torneos con reglamento cargado (hoy CPXC y VCCM). */ .pj-destinos { display: flex; flex-direction: column; gap: .1rem; } .pj-dfila { display: grid; grid-template-columns: 2.1rem 1fr auto; align-items: baseline; gap: .6rem; padding: .38rem .5rem; border-radius: var(--hl-radius-sm); border: 1px solid transparent; } .pj-dfila:hover { background: var(--hl-bg-tertiary); } /* Mismo tratamiento que en el grafico: el equipo buscado se marca, no se reordena. La tabla tiene que seguir leyendose como la del club. */ .pj-dfila.propio { background: rgba(110, 216, 138, .1); border-color: rgba(110, 216, 138, .22); } .pj-dpuesto { font-family: var(--hl-font-mono); font-size: .82rem; color: var(--hl-text-muted); text-align: right; } .pj-dnombre { font-size: .9rem; } .pj-dpuntos { font-family: var(--hl-font-mono); font-size: .82rem; color: var(--hl-text-secondary); } /* La segunda linea: a cuanto esta de cambiar de destino. Ocupa las columnas del nombre en adelante para que quede colgando debajo de el. */ .pj-dcorte { grid-column: 2 / -1; font-size: .74rem; color: var(--hl-text-muted); font-family: var(--hl-font-mono); } /* La linea del corte. Es lo unico que hay que ver de lejos: arriba seguis en una categoria y abajo pasas a la otra. */ .pj-corte { display: flex; align-items: center; gap: .6rem; margin: .45rem .2rem; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; font-family: var(--hl-font-mono); color: var(--hl-text-muted); } .pj-corte::before, .pj-corte::after { content: ""; flex: 1; height: 1px; background: var(--hl-border); } /* Cuando la tabla del club no cierra con sus propios marcadores. No es un detalle: la pagina ordena por puntos, y el orden decide el destino. */ .pj-aviso-puntos { border: 1px solid var(--hl-warning); background: color-mix(in srgb, var(--hl-warning) 8%, transparent); border-radius: var(--hl-radius-sm); padding: .55rem .7rem; margin-bottom: .9rem; font-size: .78rem; color: var(--hl-text-secondary); } .pj-aviso-puntos b { color: var(--hl-warning); } /* ----------------------------------------------------- el relator */ /* Un comentario escrito a mano y publicado aparte con comentar.py. No lo genera el robot: puede pasar cualquier cantidad de dias sin cambiar. */ .pj-comentario { margin-top: 1.75rem; } .pj-comentario .hl-card-title { color: var(--pj-marca); } .pj-comentario-firma { font-family: var(--hl-font-mono); font-size: .72rem; color: var(--hl-text-muted); margin-top: .15rem; } .pj-comentario-texto p { margin: 0 0 .7rem; font-size: .92rem; line-height: 1.6; color: var(--hl-text-secondary); } .pj-comentario-texto p:last-child { margin-bottom: 0; } .pj-comentario-texto p:first-child::first-letter { font-size: 1.7em; font-weight: 700; line-height: 1; color: var(--pj-marca); float: left; margin: .05em .12em 0 0; }