/* NBA IA — hoja de estilos unica. Dos temas muy marcados, controlados por [data-tema] en : dark = negros y grises muy oscuros + acento verde neon light = blancos y grises muy claros + acento cian Mobile-first: los @media suben desde 640px. */ /* ------------------------------------------------------------------ tokens */ :root[data-tema="dark"] { --fondo: #08090b; --fondo-2: #0d0f13; --superficie: rgba(20, 23, 28, .72); --superficie-2: rgba(30, 34, 41, .9); --borde: rgba(255, 255, 255, .09); --texto: #e9edf3; --texto-tenue: #99a3b1; --acento: #00ff9d; --acento-2: #12d67f; --acento-tenue: rgba(0, 255, 157, .13); --sombra: 0 18px 50px rgba(0, 0, 0, .55); --glow: 0 0 24px rgba(0, 255, 157, .3); --trama: rgba(0, 255, 157, .5); } :root[data-tema="light"] { --fondo: #f6f8fb; --fondo-2: #ffffff; --superficie: rgba(255, 255, 255, .82); --superficie-2: rgba(255, 255, 255, .96); --borde: rgba(10, 25, 45, .1); --texto: #0c1c2c; --texto-tenue: #5b6b7d; --acento: #00b4d8; --acento-2: #0086a8; --acento-tenue: rgba(0, 180, 216, .12); --sombra: 0 16px 40px rgba(20, 50, 80, .13); --glow: 0 0 22px rgba(0, 180, 216, .28); --trama: rgba(0, 140, 180, .55); } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fondo); color: var(--texto); line-height: 1.55; overflow-x: hidden; transition: background .45s ease, color .45s ease; display: flex; flex-direction: column; } a { color: var(--acento-2); text-decoration: none; } a:hover { text-decoration: underline; } /* ------------------------------------------------------------- fondo vivo */ #fondo { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; opacity: .55; } /* Manchas de color que se desplazan muy despacio: dan profundidad sin distraer de las tablas, que es lo que se viene a leer. */ .aurora { position: fixed; inset: -30%; z-index: -3; background: radial-gradient(38% 45% at 18% 22%, var(--acento-tenue), transparent 65%), radial-gradient(32% 40% at 82% 18%, var(--acento-tenue), transparent 62%), radial-gradient(45% 50% at 50% 92%, var(--acento-tenue), transparent 70%); filter: blur(28px); animation: flotar 26s ease-in-out infinite alternate; } @keyframes flotar { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.14); } } @media (prefers-reduced-motion: reduce) { .aurora { animation: none; } #fondo { display: none; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* --------------------------------------------------------------- cabecera */ .cabecera { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; background: var(--superficie); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--borde); } .marca { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; color: var(--texto); text-decoration: none; flex: 1; } .marca:hover { text-decoration: none; } .marca strong { color: var(--acento); text-shadow: var(--glow); } .pelota { font-size: 1.3rem; animation: botar 2.6s cubic-bezier(.5, .05, .5, .95) infinite; display: inline-block; } @keyframes botar { 0%, 100% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-7px) rotate(180deg); } } .nav { position: fixed; inset: 3.4rem 0 auto 0; flex-direction: column; gap: .2rem; padding: .6rem 1rem 1rem; background: var(--superficie-2); backdrop-filter: blur(16px); border-bottom: 1px solid var(--borde); display: none; } .nav.abierto { display: flex; } .nav a { padding: .65rem .8rem; border-radius: .6rem; color: var(--texto-tenue); font-weight: 600; font-size: .95rem; text-decoration: none; transition: color .2s, background .2s; } .nav a:hover { color: var(--texto); background: var(--acento-tenue); text-decoration: none; } .nav a.activo { color: var(--acento); background: var(--acento-tenue); } .nav-chat { border: 1px solid var(--acento); color: var(--acento) !important; } .acciones { display: flex; gap: .4rem; } .icono { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--borde); border-radius: .6rem; background: var(--superficie-2); color: var(--texto); cursor: pointer; font-size: 1rem; transition: border-color .2s, box-shadow .2s, transform .15s; } .icono:hover { border-color: var(--acento); box-shadow: var(--glow); transform: translateY(-1px); } :root[data-tema="dark"] .ico-sol { display: none; } :root[data-tema="light"] .ico-luna { display: none; } #btn-menu span { display: block; width: 17px; height: 2px; margin: 2px 0; background: var(--texto); border-radius: 2px; transition: transform .25s, opacity .25s; } #btn-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } #btn-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; } #btn-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (min-width: 860px) { .cabecera { padding: .8rem 2rem; gap: 1.5rem; } .marca { flex: 0 0 auto; } .nav { position: static; display: flex; flex-direction: row; align-items: center; gap: .3rem; padding: 0; background: none; border: 0; backdrop-filter: none; flex: 1; } .solo-movil { display: none; } } /* ------------------------------------------------------------------ layout */ main { flex: 1; width: min(1200px, 100%); margin: 0 auto; padding: 1.2rem 1rem 3rem; } @media (min-width: 860px) { main { padding: 2rem 2rem 4rem; } } .pie { padding: 1.5rem 1rem 2rem; border-top: 1px solid var(--borde); text-align: center; font-size: .8rem; color: var(--texto-tenue); } .pie p { margin: .2rem 0; } .pie-nota { opacity: .7; } h1 { font-size: clamp(1.6rem, 5vw, 2.6rem); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 .4rem; } h2 { font-size: clamp(1.15rem, 3vw, 1.5rem); letter-spacing: -.02em; margin: 2rem 0 .8rem; } .sub { color: var(--texto-tenue); margin: 0 0 1.4rem; } .degradado { background: linear-gradient(100deg, var(--acento), var(--texto) 75%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ------------------------------------------------------------------ tarjetas */ .tarjeta { background: var(--superficie); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--borde); border-radius: 1rem; padding: 1.1rem; box-shadow: var(--sombra); } .rejilla { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); } /* Accesos de la portada */ .acceso { display: block; padding: 1.2rem; border-radius: 1rem; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); text-decoration: none; transition: transform .2s, border-color .2s, box-shadow .2s; } .acceso:hover { transform: translateY(-4px); border-color: var(--acento); box-shadow: var(--glow); text-decoration: none; } .acceso .emoji { font-size: 1.7rem; display: block; margin-bottom: .4rem; } .acceso h3 { margin: 0 0 .2rem; font-size: 1.05rem; } .acceso p { margin: 0; color: var(--texto-tenue); font-size: .87rem; } /* Cifras destacadas */ .cifras { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 1rem 0; } .cifra { padding: .8rem; border-radius: .8rem; border: 1px solid var(--borde); background: var(--superficie); text-align: center; } .cifra b { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--acento); letter-spacing: -.02em; } .cifra span { font-size: .74rem; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .06em; } /* ------------------------------------------------------------------ controles */ .controles { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; } select, input[type="search"], input[type="text"] { padding: .6rem .8rem; border-radius: .6rem; border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto); font: inherit; font-size: .92rem; min-width: 0; } select:focus, input:focus { outline: 2px solid var(--acento); outline-offset: 1px; } input[type="search"] { flex: 1; min-width: 180px; } .pestanas { display: inline-flex; padding: .25rem; gap: .2rem; border: 1px solid var(--borde); border-radius: .7rem; background: var(--superficie-2); } .pestanas button { padding: .45rem .95rem; border: 0; border-radius: .5rem; background: none; color: var(--texto-tenue); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; transition: background .2s, color .2s; } .pestanas button.activo { background: var(--acento); color: var(--fondo); } .etiqueta { display: inline-block; padding: .13rem .5rem; border-radius: 1rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border: 1px solid var(--borde); color: var(--texto-tenue); white-space: nowrap; } .etiqueta.playoffs { border-color: var(--acento); color: var(--acento); } .etiqueta.en_curso { border-color: #f5a524; color: #f5a524; } /* ------------------------------------------------------------------ tablas */ .tabla-caja { overflow-x: auto; border: 1px solid var(--borde); border-radius: 1rem; background: var(--superficie); -webkit-overflow-scrolling: touch; } table { border-collapse: collapse; width: 100%; font-size: .87rem; } th, td { padding: .6rem .7rem; text-align: right; white-space: nowrap; } th:first-child, td:first-child { text-align: left; position: sticky; left: 0; background: var(--superficie-2); } thead th { position: sticky; top: 0; background: var(--superficie-2); backdrop-filter: blur(8px); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-tenue); cursor: pointer; user-select: none; z-index: 2; } thead th:first-child { z-index: 3; } thead th:hover { color: var(--acento); } tbody tr { border-top: 1px solid var(--borde); transition: background .15s; } tbody tr:hover { background: var(--acento-tenue); } td { font-variant-numeric: tabular-nums; } .enlace-fila { color: var(--texto); font-weight: 600; } .puesto { color: var(--texto-tenue); font-variant-numeric: tabular-nums; width: 2rem; } .escudo { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; margin-right: .45rem; } /* ------------------------------------------------------------------ chat */ .chat { display: flex; flex-direction: column; gap: .8rem; height: min(72vh, 640px); } .chat-hilo { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .8rem; padding: .4rem; } .burbuja { max-width: 88%; padding: .75rem .95rem; border-radius: 1rem; border: 1px solid var(--borde); background: var(--superficie); animation: entrar .3s ease; } @keyframes entrar { from { opacity: 0; transform: translateY(8px); } } .burbuja.yo { align-self: flex-end; background: var(--acento); color: var(--fondo); border-color: transparent; font-weight: 500; } .burbuja.ia { align-self: flex-start; } .burbuja p { margin: 0; white-space: pre-wrap; } .enlaces-ia { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--borde); } .enlaces-ia a { padding: .35rem .7rem; border-radius: 1rem; border: 1px solid var(--acento); color: var(--acento); font-size: .8rem; font-weight: 600; text-decoration: none; transition: background .2s, color .2s; } .enlaces-ia a:hover { background: var(--acento); color: var(--fondo); text-decoration: none; } .chat-barra { display: flex; gap: .5rem; } .chat-barra input { flex: 1; } .btn { padding: .6rem 1.1rem; border: 0; border-radius: .6rem; background: var(--acento); color: var(--fondo); font: inherit; font-weight: 700; cursor: pointer; transition: filter .2s, transform .15s; } .btn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); } .btn:disabled { opacity: .5; cursor: not-allowed; } .sugerencias { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .3rem; } .sugerencias button { padding: .35rem .7rem; border-radius: 1rem; border: 1px dashed var(--borde); background: none; color: var(--texto-tenue); font: inherit; font-size: .8rem; cursor: pointer; } .sugerencias button:hover { border-color: var(--acento); color: var(--acento); } .escribiendo { display: inline-flex; gap: 3px; } .escribiendo i { width: 6px; height: 6px; border-radius: 50%; background: var(--acento); animation: latir 1.2s infinite; } .escribiendo i:nth-child(2) { animation-delay: .2s; } .escribiendo i:nth-child(3) { animation-delay: .4s; } @keyframes latir { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } } .aviso-lento { font-size: .78rem; color: var(--texto-tenue); margin: .3rem 0 0; } /* ------------------------------------------------------------------ varios */ .cargando { display: grid; place-items: center; padding: 4rem 0; } .spinner { width: 34px; height: 34px; border: 3px solid var(--borde); border-top-color: var(--acento); border-radius: 50%; animation: girar .8s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } .vacio, .error { padding: 2rem 1rem; text-align: center; color: var(--texto-tenue); border: 1px dashed var(--borde); border-radius: 1rem; } .error { border-color: #ff5c5c; color: #ff8686; } .resultados-busqueda { display: grid; gap: .4rem; margin-top: .6rem; } .resultado { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .6rem .8rem; border: 1px solid var(--borde); border-radius: .7rem; background: var(--superficie); color: var(--texto); text-decoration: none; } .resultado:hover { border-color: var(--acento); text-decoration: none; } .resultado small { color: var(--texto-tenue); } .migas { font-size: .85rem; color: var(--texto-tenue); margin-bottom: .5rem; } .cabecera-ficha { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .cabecera-ficha img { width: 62px; height: 62px; object-fit: contain; }