/* Tema «broadcast»: pantalla de tiempos de televisión (gráficos de F1, teletexto). Condensada en mayúsculas,
   bordes duros, barras de color, números tabulares grandes, cinta de noticias. Nada redondeado. */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Barlow:wght@400;500;600&display=swap");
:root { --fondo: #000; --panel: #0f0f0f; --borde: #2a2a2a; --oro: #ffd400; --claro: #fff; --gris: #b8b8b8; --apagado: #7a7a7a; --cielo: #19d2ff; --rojo: #e10600; --verde: #2ad15b; }
html, body { background: var(--fondo); color: var(--claro); font-family: "Barlow", system-ui, sans-serif; }
header { padding: 0; margin: 0 20px; border-bottom: 4px solid var(--oro); align-items: stretch; gap: 0; }
header h1 { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 44px; letter-spacing: 1px; background: var(--oro); color: #000; padding: 6px 16px 2px; line-height: 1; }
header .lema { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: 1px; font-size: 16px; color: var(--gris); align-self: center; padding: 0 16px; }
header .totales { align-self: center; padding: 4px 0; }
header .totales b { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 36px; line-height: 1; letter-spacing: 0.5px; }
header .totales span { text-transform: uppercase; letter-spacing: 1px; font-size: 12px; color: var(--gris); }
#hechos { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: 0.5px; font-size: 16px; padding: 6px 20px; min-height: 30px; }
#hechos span { padding-left: 10px; border-left: 4px solid var(--claro); } #hechos .numeroUno, #hechos .viral, #hechos .crowd { border-color: var(--oro); color: var(--oro); } #hechos .salto, #hechos .cambio { border-color: var(--cielo); color: var(--cielo); }
#busca { align-self: center; margin-left: 24px; } #buscar { border-radius: 0; border: 2px solid var(--gris); background: #000; text-transform: uppercase; font-family: "Barlow Condensed", sans-serif; font-size: 15px; letter-spacing: 0.5px; padding: 4px 10px; } #buscar:focus { border-color: var(--oro); }
#pista { color: var(--gris); }
#cinta { border: 0; background: #1a3fd1; color: #fff; padding: 6px 0; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; font-size: 16px; letter-spacing: 0.5px; }
#cinta .tira b { color: #fff; } #cinta .tira i { color: var(--oro); }
.caja { background: var(--panel); border: 0; border-left: 6px solid var(--oro); border-radius: 0; padding: 6px 14px; margin: 0; }
.caja h2 { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: 1px; font-size: 18px; font-weight: 700; color: #fff; }
.caja h2 small { color: var(--gris); text-transform: none; letter-spacing: 0; }
.fila { border-radius: 0; gap: 10px; } .fila:nth-child(even) { background: #161616; } .fila:hover { background: #262626; }
.fila img, .fila .inicial { border-radius: 0; }
.fila .n { font-family: "Barlow Condensed", sans-serif; font-size: 16px; font-weight: 800; color: #000; background: var(--gris); width: 24px; height: 24px; display: grid; place-items: center; text-align: center; }
.fila.primera .n { background: var(--oro); } .fila.primera .nombre { color: var(--oro); }
.fila .nombre { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; font-size: 18px; font-weight: 600; letter-spacing: 0.3px; }
.fila .nombre i { height: 2px; border-radius: 0; background: var(--cielo); } .fila.primera .nombre i { background: var(--oro); }
.fila .v { font-family: "Barlow Condensed", sans-serif; font-size: 18px; font-weight: 700; }
#prediccion { border-left-color: var(--cielo); } #prediccion .cands { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; font-size: 15px; } #prediccion .cands b { color: var(--oro); }
#hot { border-left-color: var(--rojo); } #hot .uno { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; font-size: 20px; } #hot .uno small { color: var(--oro); }
#premios { border-left-color: var(--verde); } #premio-podio .pn { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; font-size: 17px; font-weight: 600; } #premio-podio .pf:first-child .pn { color: var(--oro); }
#premio-podio .pt, #premio-podio .pm { font-family: "Barlow Condensed", sans-serif; } #premio-podio .pt { font-size: 14px; text-transform: uppercase; }
#premio-pestanas button { border-radius: 0; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: 0.5px; font-size: 13px; font-weight: 600; }
#chat { border-left-color: #fff; } #chat code { color: var(--oro); font-family: "Barlow Condensed", sans-serif; font-size: 18px; }
#twitch { display: flex; align-items: center; gap: 10px; background: #9146ff; color: #fff; padding: 5px 14px; margin: 0; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; font-size: 18px; font-weight: 700; letter-spacing: 0.5px; white-space: nowrap; flex-wrap: nowrap; }
#twitch b { background: var(--rojo); color: #fff; padding: 2px 8px; } #twitch small { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 0.9; margin-left: auto; font-size: 13px; white-space: nowrap; text-align: right; }
@media (max-width: 980px) { header h1 { font-size: 34px; } header .totales b { font-size: 28px; } #twitch small { max-width: 100%; margin-left: 0; text-align: left; } }
footer { text-transform: uppercase; letter-spacing: 1px; font-size: 11px; }
.rotulo.r-caja { background: #000; border-left-width: 4px; border-radius: 0; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: 0.3px; }
.rotulo.r-barrio, .rotulo.r-leyenda, .rotulo.r-marca { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: 0.5px; font-size: 12px; }
.fl b { font-family: "Barlow Condensed", sans-serif; font-size: 16px; } .fl .nuevo { font-size: 13px; font-weight: 800; } #cinta .tira em.fl b { font-size: 16px; }
#pestanas button { border-radius: 0; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: 0.5px; font-size: 14px; font-weight: 600; }
#sugerencias { border-radius: 0; border: 2px solid var(--gris); } #sugerencias .sug b { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; font-size: 17px; letter-spacing: 0.3px; }
#sugerencias .sug .v { font-family: "Barlow Condensed", sans-serif; font-size: 16px; font-weight: 700; color: #fff; }
body.con-reproductor #twitch { padding: 3px 12px; font-size: 15px; } body.con-reproductor #twitch small { display: none; }
#sonido { border-radius: 0; border: 2px solid var(--gris); font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: 0.5px; font-size: 15px; padding: 3px 10px; }
#sonido[data-estado="on"] { color: #000; background: var(--oro); border-color: var(--oro); }
#hechos .dato { border-color: var(--gris); color: var(--gris); }
#reclamar, #ficha { font-family: "Barlow", sans-serif; } #reclamar h2, #ficha .tit { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: 0.5px; }
#reclamar button { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; font-size: 16px; letter-spacing: 0.5px; }