/* ========================================================= TEMAS — Bandera oficial (claro) / Camiseta suplente (oscuro) Cómo se resuelve el modo: 1. Sin preferencia guardada → manda el sistema operativo 2. Con preferencia guardada → manda el atributo data-tema en Los temas SOLO aportan color. Ninguna regla de estructura depende del tema activo: tipografía, tamaños, espaciados, medallas y franjas son idénticos en ambos modos. Paletas de respaldo al final del archivo. ========================================================= */ /* ---------- Tema claro: Bandera oficial (base) ---------- */ :root, :root[data-tema="claro"] { --bg: #DFEDF8; --bg-2: #FFFFFF; --hdr: #75AADB; --hdr-line: #5A93C7; --hdr-txt-2: #EAF4FC; --hdr-acc: #FFFFFF; --line: #BCD7EC; --txt: #0E3055; --titulo: #FFFFFF; --txt-2: #1A3D5C; --txt-3: #245273; --acc: #1E6FB0; --oro: #9C6C0B; --oro-b: #D9BE7E; --plata: #6B7A88; --bronce: #8E5F31; --cinta: #5A9AD1; --ok: #2E7D4F; --warn: #A8730D; --err: #B23A2B; } /* ---------- Tema oscuro: Camiseta suplente ---------- */ /* a) cuando lo pide el sistema y no hay preferencia manual en claro */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --bg: #131C3D; --bg-2: #1A2450; --hdr: #1A2450; --hdr-line: #2B3568; --hdr-txt-2: #A5B0D8; --hdr-acc: #7FC4F0; --line: #26305C; --txt: #F0F3FB; --titulo: #FFFFFF; --txt-2: #C2CAE8; --txt-3: #B4BEE0; --acc: #7FC4F0; --oro: #E8B54A; --oro-b: #7A6330; --plata: #C0C7E0; --bronce: #B87A48; --cinta: #4F73B8; --ok: #4FA96B; --warn: #E8B54A; --err: #D2695A; } } /* b) cuando la persona lo fija a mano */ :root[data-tema="oscuro"] { --bg: #131C3D; --bg-2: #1A2450; --hdr: #1A2450; --hdr-line: #2B3568; --hdr-txt-2: #A5B0D8; --hdr-acc: #7FC4F0; --line: #26305C; --txt: #F0F3FB; --titulo: #FFFFFF; --txt-2: #C2CAE8; --txt-3: #B4BEE0; --acc: #7FC4F0; --oro: #E8B54A; --oro-b: #7A6330; --plata: #C0C7E0; --bronce: #B87A48; --cinta: #4F73B8; --ok: #4FA96B; --warn: #E8B54A; --err: #D2695A; } /* ---------- Estructura (idéntica en ambos modos) ---------- */ :root { --display: "Barlow Condensed", system-ui, sans-serif; --body: "Barlow", system-ui, sans-serif; --r: 10px; --ancho: 860px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--txt); font-family: var(--body); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; } .contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 16px; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 16px; top: 16px; z-index: 10; background: var(--acc); color: var(--bg-2); padding: 8px 14px; border-radius: var(--r); } :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } /* ---------- Cabecera ---------- */ .cabecera { background: var(--hdr); border-bottom: 1px solid var(--hdr-line); padding-top: 16px; } .cabecera__top { display: flex; align-items: flex-start; gap: 12px; } .cabecera__marca { flex: 1 1 auto; min-width: 0; } .cabecera__titulo { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; color: var(--titulo); } .cabecera__subtitulo { margin: 2px 0 0; font-size: 13px; color: var(--hdr-txt-2); } /* Botón de modo: cicla automático → claro → oscuro */ .modo { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; margin-top: 4px; background: transparent; border: 1px solid var(--hdr-line); border-radius: 20px; padding: 5px 11px 5px 9px; color: var(--hdr-txt-2); font-family: var(--body); font-size: 13px; line-height: 1; cursor: pointer; } .modo:hover { color: var(--hdr-acc); border-color: var(--hdr-acc); } .modo svg { width: 15px; height: 15px; flex: 0 0 auto; } /* ---------- Navegación ---------- */ .nav { display: flex; gap: 4px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } .nav[data-items="1"], .nav:empty { display: none; } .nav__link { flex: 0 0 auto; padding: 9px 14px; font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hdr-txt-2); text-decoration: none; border-bottom: 2px solid transparent; } .nav__link:hover { color: var(--hdr-acc); } .nav__link[aria-current="page"] { color: var(--hdr-acc); border-bottom-color: var(--hdr-acc); } /* ---------- Buscador ---------- */ .buscador { margin: 18px 0 4px; } .buscador input { width: 100%; padding: 11px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); color: var(--txt); font-family: var(--body); font-size: 15px; } .buscador input::placeholder { color: var(--txt-3); } /* ---------- Podio: medalla, nombre y rating ---------- */ .podio { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 9px; margin: 20px 0 8px; } .podio__puesto { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 7px 15px; text-align: center; min-width: 0; } .podio__puesto--1 { order: 2; padding-top: 20px; border-color: var(--oro-b); } .podio__puesto--2 { order: 1; } .podio__puesto--3 { order: 3; } .podio__medalla { display: block; margin: 0 auto 7px; } .podio__nombre { font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.15; margin: 0 0 3px; overflow-wrap: anywhere; } .podio__puesto--1 .podio__nombre { font-size: 21px; } .podio__rating { font-family: var(--display); font-weight: 700; font-size: 27px; line-height: 1; font-variant-numeric: tabular-nums; } /* Cada número toma el metal de su puesto. Sobre --bg-2 (la tarjeta), no sobre --bg: por eso se miden contra ese fondo, no contra la página. */ .podio__puesto--1 .podio__rating { font-size: 35px; color: var(--oro); } .podio__puesto--2 .podio__rating { color: var(--plata); } .podio__puesto--3 .podio__rating { color: var(--bronce); } /* ---------- Tabla ---------- */ /* Encabezado de columnas. El padding izquierdo de 43 px alinea "Jugador" con la columna de nombres: 4 px de borde + 9 px + 32 px de posición + 11 px de gap = 56 px desde el borde de la fila. */ .encabezado { display: flex; align-items: center; gap: 11px; padding: 16px 12px 7px 9px; border-left: 4px solid transparent; border-bottom: 1px solid var(--line); } .encabezado span { font-family: var(--body); font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1; color: var(--txt); } .encabezado__jugador { flex: 1 1 auto; padding-left: 43px; } .encabezado__rating { flex: 0 0 auto; } .tabla { margin-top: 0; } .fila { display: flex; align-items: center; gap: 11px; padding: 11px 12px 11px 9px; border-bottom: 1px solid var(--line); border-left: 4px solid transparent; border-radius: 0; } .fila:last-child { border-bottom: 0; } .fila--1 { border-left-color: var(--oro); } .fila--2 { border-left-color: var(--plata); } .fila--3 { border-left-color: var(--bronce); } .fila__pos { flex: 0 0 32px; font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--txt-3); text-align: right; font-variant-numeric: tabular-nums; } .fila--1 .fila__pos { color: var(--oro); } .fila--2 .fila__pos { color: var(--plata); } .fila--3 .fila__pos { color: var(--bronce); } .fila__datos { flex: 1 1 auto; min-width: 0; } .fila__nombre { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; } .fila__meta { font-size: 12px; color: var(--txt-3); margin-top: 1px; } .fila__rating { flex: 0 0 auto; font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; } /* ---------- Corte del listado ---------- */ .conteo { font-size: 12px; color: var(--txt-3); margin: 8px 0 0; } .mas { display: block; width: 100%; margin-top: 12px; background: transparent; border: 1px solid var(--line); border-radius: var(--r); color: var(--txt-2); font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 12px; cursor: pointer; } .mas:hover { color: var(--txt); border-color: var(--txt-3); } /* Insinúa que la lista sigue, difuminando la última fila. */ .degrade { height: 46px; margin-top: -46px; position: relative; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--bg)); } /* ---------- Sección Jugadores ---------- */ .atajos { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; } .atajo { background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; padding: 6px 13px; color: var(--txt-2); font-family: var(--body); font-size: 13px; cursor: pointer; } .atajo:hover { color: var(--txt); border-color: var(--txt-3); } .atajo--on { background: var(--acc); border-color: var(--acc); color: var(--bg-2); font-weight: 600; } .ficha { display: flex; align-items: center; gap: 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-top: 16px; } .ficha__pos { flex: 0 0 auto; font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 1; color: var(--oro); font-variant-numeric: tabular-nums; } .ficha__datos { flex: 1 1 auto; min-width: 0; } .ficha__nombre { font-family: var(--display); font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.05; margin: 0; overflow-wrap: anywhere; } .ficha__meta { font-size: 12.5px; color: var(--txt-3); margin: 2px 0 0; } .ficha__rating { flex: 0 0 auto; text-align: right; } .ficha__rating b { display: block; font-family: var(--display); font-size: 36px; font-weight: 700; line-height: 1; color: var(--oro); font-variant-numeric: tabular-nums; } .ficha__rating span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--txt-3); } .bloque { margin-top: 26px; } .bloque__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 12px; } .bloque__cab h3 { font-family: var(--display); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; } .bloque__cab span { font-size: 11.5px; color: var(--txt-3); text-align: right; } .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .grid--seguida { margin-top: 8px; } .kpi { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: 11px 12px; min-width: 0; } .kpi--acc { border-color: var(--acc); } .kpi--oro { border-color: var(--oro-b); } .kpi__rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--txt-3); overflow-wrap: anywhere; } .kpi__valor { font-family: var(--display); font-size: 27px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .kpi--acc .kpi__valor { color: var(--acc); } .kpi--oro .kpi__valor { color: var(--oro); } .kpi__detalle { font-size: 11px; color: var(--txt-3); margin-top: 1px; } .h2h span { color: var(--txt-3); margin: 0 2px; font-weight: 500; } .h2h--favor { color: var(--ok); } .h2h--contra { color: var(--err); } .tarjeta { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin-top: 8px; } .tarjeta__titulo { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--txt-3); margin: 0 0 12px; } .curva { width: 100%; height: auto; display: block; } .barra { position: relative; height: 6px; background: var(--line); border-radius: 3px; margin-bottom: 10px; } .barra__relleno { position: absolute; left: 0; height: 6px; background: var(--acc); border-radius: 3px; } .barra__punto { position: absolute; top: -3px; width: 12px; height: 12px; border-radius: 50%; margin-left: -6px; border: 2px solid var(--bg-2); } .barra__rotulos { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--txt-3); } .barra__rotulos b { display: block; font-family: var(--display); font-size: 16px; color: var(--txt); } .barra__rotulos .centro { text-align: center; } .barra__rotulos .derecha { text-align: right; } .racha { display: flex; gap: 3px; flex-wrap: wrap; } .racha__r { width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 12px; font-weight: 700; } .racha__r--v { background: color-mix(in srgb, var(--ok) 24%, transparent); color: var(--ok); } .racha__r--d { background: color-mix(in srgb, var(--err) 24%, transparent); color: var(--err); } .nota { font-size: 11.5px; color: var(--txt-3); margin: 8px 0 0; line-height: 1.5; max-width: 70ch; } /* ---------- Avisos y esqueleto ---------- */ .aviso { border: 1px solid var(--line); border-left: 3px solid var(--acc); border-radius: 0; background: var(--bg-2); padding: 14px 16px; margin: 20px 0; } .aviso--error { border-left-color: var(--err); } .aviso h2 { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 17px; margin: 0 0 6px; } .aviso p { margin: 0 0 6px; font-size: 14px; color: var(--txt-2); } .aviso p:last-child { margin-bottom: 0; } .aviso code { font-size: 13px; background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; overflow-wrap: anywhere; } .esqueleto { height: 54px; border-radius: var(--r); background: var(--bg-2); margin-bottom: 8px; animation: latir 1.4s ease-in-out infinite; } @keyframes latir { 0%,100% { opacity: 0.55 } 50% { opacity: 0.9 } } /* ---------- Pie ---------- */ .pie { border-top: 1px solid var(--line); margin-top: 30px; padding-block: 16px 28px; } .pie__estado { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; color: var(--txt-2); } .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--txt-3); } .dot[data-estado="ok"] { background: var(--ok); } .dot[data-estado="viejo"] { background: var(--warn); } .dot[data-estado="error"] { background: var(--err); } .btn-refrescar { margin-left: auto; background: transparent; border: 1px solid var(--line); border-radius: var(--r); color: var(--txt-2); font-family: var(--body); font-size: 13px; padding: 5px 12px; cursor: pointer; } .btn-refrescar:hover { color: var(--txt); border-color: var(--txt-3); } .btn-refrescar[disabled] { opacity: 0.5; cursor: default; } .pie__nota { margin: 0; font-size: 12px; color: var(--txt-3); max-width: 46ch; } /* ---------- Celular ---------- */ @media (max-width: 619px) { .grid { grid-template-columns: repeat(2, 1fr); } .ficha__nombre { font-size: 22px; } .ficha__pos { font-size: 30px; } .ficha__rating b { font-size: 30px; } .modo span { display: none; } .modo { padding: 6px 8px; } .podio { gap: 6px; } .podio__nombre { font-size: 15px; } .podio__puesto--1 .podio__nombre { font-size: 17px; } .podio__rating { font-size: 23px; } .podio__puesto--1 .podio__rating { font-size: 29px; } .cabecera__titulo { font-size: 26px; } .nav__link { padding: 8px 10px; font-size: 15px; } } @media (min-width: 620px) { .cabecera__titulo { font-size: 38px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ========================================================= PALETAS DE RESPALDO Para cambiar de tema, reemplazar el bloque de color correspondiente arriba por uno de estos. Albiceleste sobrio (claro): --bg:#E4EEF6 --bg-2:#FFFFFF --hdr:#CFE2F1 --hdr-line:#AFCBE2 --hdr-txt-2:#3D5F78 --hdr-acc:#14608F --line:#C0D7E7 --txt:#0F2233 --titulo:#0F2233 --txt-2:#1B3E52 --txt-3:#22506A --acc:#14608F --oro:#8E6710 --oro-b:#D5BC80 --plata:#67737F --bronce:#8A5D31 --cinta:#4E8FC0 --ok:#2E7D4F --warn:#A8730D --err:#B23A2B Estadio nocturno (oscuro): --bg:#0A1628 --bg-2:#101F35 --hdr:#101F35 --hdr-line:#1B2E47 --hdr-txt-2:#93AEC9 --hdr-acc:#6FB6E8 --line:#1B2E47 --txt:#EAF2FA --titulo:#FFFFFF --txt-2:#BECEDF --txt-3:#A9BCD0 --acc:#6FB6E8 --oro:#E8B54A --oro-b:#7C6329 --plata:#BCC7D2 --bronce:#B87A48 --cinta:#4E8FC0 --ok:#4FA96B --warn:#E8B54A --err:#D2695A ========================================================= */