/* ---------- Tablero de Dirección: "Nación Azul en vivo" (spec 34) ---------- */
/* Claro, títulos en Saira Condensed y cifras grandes. Una serie por gráfica: barras en un solo color, ordenadas y con el valor al final */
/* #app.tablero-wide va en la ruta a cualquier ancho. Dentro de un lugar (estadio, casa u hotel) el tablero sigue en claro: es de Dirección, no del aficionado */
#app.tablero-wide[data-tema]{--bg:color-mix(in srgb,var(--bg-card) 45%,var(--white));background:var(--bg);background-image:none}
.tb{display:flex;flex-direction:column;gap:12px;min-width:0}
.tb-card{min-width:0;background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow-soft);padding:16px}
.tb-h{font-family:var(--tech);font-size:1.2rem;font-weight:700;line-height:1.1;letter-spacing:.04em;text-transform:uppercase;color:var(--navy);margin-bottom:12px}
.tb-cap{font-size:.78rem;color:var(--muted);margin:0 0 8px}
.tb-cap b{color:var(--navy);font-variant-numeric:tabular-nums}
.tb-n{font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums;color:var(--navy);line-height:1}

/* En vivo: punto rojo que late, la hora y el partido */
.tb-live{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:40px;padding:0 4px;color:var(--muted);font-size:.84rem}
.tb-live b{font-family:var(--tech);font-size:1rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.tb-dot{width:10px;height:10px;border-radius:50%;background:var(--red);flex:none;animation:tb-pulse 1.6s ease-out infinite}
@keyframes tb-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 55%,transparent)}70%,100%{box-shadow:0 0 0 9px color-mix(in srgb,var(--red) 0%,transparent)}}
.tb-hora{font-family:var(--num);font-weight:700;font-size:1rem;color:var(--navy);font-variant-numeric:tabular-nums}
.tb-ctx{flex-basis:100%;font-size:.78rem}

/* Cifra principal de la tarjeta */
.tb-hero{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.tb-big{font-size:3.2rem;letter-spacing:.01em}
.tb-hero span{font-size:.84rem;color:var(--muted)}

/* Barras horizontales: etiqueta, barra y valor */
.tb-bars{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0;padding:0}
.tb-bar{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr) 4.2em;align-items:center;gap:10px;font-size:.82rem}
.tb-bl{color:var(--text);line-height:1.2;overflow-wrap:anywhere}
.tb-bl small{display:block;margin-top:2px;font-size:.72rem;color:var(--muted)}
.tb-secc .tb-bar{grid-template-columns:minmax(0,9.5em) minmax(0,1fr) 3.4em}
.tb-bt{display:block;height:12px;border-radius:4px;background:var(--gray-lightest);overflow:hidden}
/* La barra se escala con --v (0 a 1) en lugar de cambiar su ancho: sin recalcular el layout en cada cuadro. El redondeo va en el contenedor */
.tb-bt i,.tb-meter i{display:block;width:100%;height:100%;background:var(--p2143);transform:scaleX(var(--v,0));transform-origin:left;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.tb-bv{font-family:var(--num);font-weight:700;font-size:1rem;color:var(--navy);text-align:right;font-variant-numeric:tabular-nums}
.tb-pct .tb-bar{grid-template-columns:minmax(0,9.5em) minmax(0,1fr) 3em}

/* Rejilla de cifras 2 × 2 */
.tb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.tb-stat{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px;border-radius:var(--r-tile);background:var(--bg)}
.tb-stat .tb-n{font-size:1.9rem}
.tb-sl{font-size:.8rem;font-weight:700;color:var(--navy);line-height:1.2}
.tb-stat small{font-size:.74rem;color:var(--muted);line-height:1.3}
.tb-pos{color:var(--electric-ink)}
.tb-meter{display:block;height:8px;margin-top:4px;border-radius:4px;background:var(--gray-light);overflow:hidden}

/* Ecosistema: el cruce estadio-hotel */
.tb-cruce{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 16px;padding:12px 14px;border-radius:var(--r-tile);background:var(--bg-card);color:var(--navy);font-size:.88rem}
.tb-cruce b{font-family:var(--num);font-size:1.6rem;font-weight:700;line-height:1;white-space:nowrap}

/* Actividad reciente: lo de la app del aficionado arriba, resaltado */
.tb-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tb-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;padding:6px 8px;border-bottom:1px solid var(--gray-lightest);font-size:.84rem;border-radius:10px}
.tb-row:last-child{border-bottom:0}
.tb-ri{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--bg);color:var(--p2143)}
.tb-ri svg{width:17px;height:17px}
.tb-rt{color:var(--text);line-height:1.3;overflow-wrap:anywhere}
.tb-row time{font-size:.74rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.tb-row.me{background:var(--bg-card);border-bottom-color:transparent;margin-bottom:2px;box-shadow:inset 3px 0 0 var(--p2143)}
.tb-row.me .tb-rt{color:var(--navy);font-weight:700}
.tb-row.me .tb-ri{background:var(--p2143);color:var(--white)}
.tb-row.fresh{animation:tb-fresh 2.4s ease-out both}
.tb-row.tb-in{animation:tb-in .5s cubic-bezier(.22,1,.36,1) both}
@keyframes tb-fresh{0%,30%{background:var(--celeste);transform:scale(1.02)}100%{background:var(--bg-card);transform:none}}
@keyframes tb-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* Rumbo al nuevo estadio */
.tb-rhead p{font-size:.84rem;color:var(--muted);line-height:1.4;margin:-4px 0 16px}
.tb-rgrid{display:grid;gap:20px}
.tb-blk h3{font-family:var(--tech);font-size:1rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--navy);margin-bottom:2px}
.tb-prem{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px}
.tb-prem .tb-stat{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px}
.tb-prem .tb-n{font-size:1.9rem}
.tb-prem .tb-sl{flex-basis:100%}
.tb-chip{width:18px;height:18px;border-radius:50%;flex:none}
.tb-chip.oro{background:linear-gradient(135deg,var(--oro-1),var(--oro-2) 55%,var(--oro-3))}
.tb-chip.leyenda{background:linear-gradient(135deg,var(--leyenda-2),var(--leyenda-1));box-shadow:inset 0 0 0 2px var(--leyenda-oro)}
.tb-fach{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tb-fach li{display:grid;grid-template-columns:56px minmax(0,1fr) 3em;align-items:center;gap:12px}
.tb-fach img{width:56px;height:56px;border-radius:12px;object-fit:cover;background:var(--gray-lightest)}
.tb-ft{display:flex;flex-direction:column;gap:6px;min-width:0}
.tb-ft b{font-size:.84rem;color:var(--navy);line-height:1.2}

@media (max-width:360px){
  .tb-big{font-size:2.7rem}
  .tb-bar,.tb-pct .tb-bar{grid-template-columns:minmax(0,7.5em) minmax(0,1fr) 3.8em;gap:8px}
  .tb-stat{padding:10px}
  .tb-stat .tb-n,.tb-prem .tb-n{font-size:1.6rem}
}
@media (prefers-reduced-motion:reduce){ .tb-dot{animation:none} .tb-bt i,.tb-meter i{transition:none} }

/* Desde 1024 px: el tablero ocupa toda la ventana para proyectarlo, en una rejilla de 3 columnas */
@media (min-width:1024px){
  body #app.tablero-wide{width:100%;height:100%;border-radius:0;border:0;box-shadow:none}
  #app.tablero-wide .tabbar{display:none}
  #app.tablero-wide main{padding:calc(var(--header-h) + 16px) 24px 24px}
  #app.tablero-wide .tb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1680px;margin:0 auto;
    grid-template-areas:"live live live" "lug est act" "eco hot act" "rumbo rumbo rumbo"}
  .tb-live{grid-area:live}
  .tb-lug{grid-area:lug} .tb-est{grid-area:est} .tb-hot{grid-area:hot} .tb-eco{grid-area:eco} .tb-act{grid-area:act} .tb-rumbo{grid-area:rumbo}
  .tb-ctx{flex-basis:auto;margin-left:auto;font-size:.9rem}
  .tb-card{padding:20px}
  .tb-rgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 36px}
  .tb-fblk{grid-column:span 2}
  .tb-fach{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .tb-rhead{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 20px}
  .tb-rhead p{margin:0 0 16px}
}