/* SIMVERSO · tablero de partidos (portada y /partidos/). Tarjeta grande estilo marcador de estadio. */
.tb-filtros{margin-top:20px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding:2px var(--gut)}
.tb-filtros::-webkit-scrollbar{display:none}
.tb-filtros .chip,.chip{flex:none;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--linea2);background:transparent;color:var(--hueso);font:500 15px/1 "Schibsted Grotesk",sans-serif;cursor:pointer;
  display:inline-flex;align-items:center;white-space:nowrap;transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease,transform 120ms var(--ease-out)}
.chip:active{transform:scale(.96)}
.chip[aria-pressed="true"]{background:var(--hueso);border-color:var(--hueso);color:var(--azul);font-weight:700}
.chip:focus-visible{outline:2px solid var(--hueso);outline-offset:2px}
@media (hover:hover) and (pointer:fine){ .chip[aria-pressed="false"]:hover{border-color:var(--hueso)} }
.tb-nav{margin-top:16px;display:flex;align-items:center;justify-content:flex-end;gap:6px}
.tb-nav[hidden]{display:none}
.tb-pos{min-width:4.5ch;text-align:center;font-size:13px;color:var(--mut)}
.tb-zona{position:relative;margin-top:20px;isolation:isolate}
.tb-vacio{margin-top:20px;color:var(--mut)}

/* tarjeta */
.tb-t{position:relative;display:flex;flex-direction:column;background:#11114f;border:1px solid var(--linea);border-radius:14px;padding:18px 18px 20px;color:var(--hueso);text-decoration:none;overflow:hidden}
.tb-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-6px -8px 0 0}
.tb-comp{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.tb-guardar{width:44px;height:44px;flex:none;display:grid;place-items:center;border:0;background:none;color:var(--mut);cursor:pointer;border-radius:8px;transition:color 160ms ease,transform 120ms var(--ease-out)}
.tb-guardar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;transition:fill 160ms ease}
.tb-guardar[aria-pressed="true"]{color:var(--naranja)}
.tb-guardar[aria-pressed="true"] svg{fill:currentColor}
.tb-guardar:active{transform:scale(.9)}
.tb-guardar:focus-visible{outline:2px solid var(--hueso);outline-offset:-4px}
@media (hover:hover) and (pointer:fine){ .tb-guardar:hover{color:var(--hueso)} }
.tb-hora{margin-top:2px;font:900 clamp(64px,19vw,84px)/.86 "Big Shoulders Display",sans-serif;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.tb-res{margin-top:6px;font-size:14px;color:#d6d6ee}
.flap span{display:inline-block;text-align:center}
.tb-eqs{margin-top:16px;display:grid;gap:6px}
.tb-eq{display:flex;align-items:center;gap:12px;font:800 clamp(28px,8.4vw,36px)/1 "Big Shoulders Display",sans-serif;text-transform:uppercase;letter-spacing:.01em;min-width:0}
.tb-eq span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-franja{flex:none;width:8px;height:.9em;border-radius:2px;background:linear-gradient(var(--c1) 0 62%,var(--c2) 62% 100%);box-shadow:0 0 0 1px rgba(242,242,247,.18)}
.tb-barra{margin-top:18px;display:flex;gap:2px;height:10px}
.tb-barra i{min-width:3px;border-radius:2px}
.tb-barra i:nth-child(1){background:var(--naranja)} .tb-barra i:nth-child(2){background:var(--lavanda)} .tb-barra i:nth-child(3){background:var(--hueso)}
.tb-pcts{margin-top:10px;display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between}
.tb-pcts div{display:grid;gap:2px}
.tb-pcts .e{text-align:center} .tb-pcts .v{text-align:right}
.tb-pcts dt{font-size:12px;letter-spacing:.05em;color:var(--mut)}
.tb-pcts dt::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:0}
.tb-pcts .l dt::before{background:var(--naranja)} .tb-pcts .e dt::before{background:var(--lavanda)} .tb-pcts .v dt::before{background:var(--hueso)}
.tb-pcts dd{font-size:17px;color:var(--hueso)}
.tb-loco{margin-top:14px;font-size:13.5px;color:var(--mut)}
.tb-loco b{color:var(--hueso);font-weight:500}

/* al jugarlo: la tarjeta se abre y caen los puntos */
.tb-mas{display:grid;grid-template-rows:0fr;transition:grid-template-rows 260ms var(--ease-out)}
.tb-t.abierta .tb-mas{grid-template-rows:1fr}
.tb-mas-in{min-height:0;overflow:hidden}
.tb-esc{position:relative;margin-top:16px;border-bottom:1px solid var(--linea2)}
.tb-esc canvas{display:block;width:100%;height:112px}
.tb-n{position:absolute;left:0;top:0;font-size:12px;color:var(--mut)}
.tb-dos{margin-top:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px;opacity:0;transform:translateY(4px);transition:opacity 220ms ease,transform 260ms var(--ease-out)}
.tb-dos dt{font-size:12px;color:var(--mut);line-height:1.3}
.tb-dos dd{margin-top:3px;font-size:18px}
.tb-ver{margin-top:14px;height:48px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:6px;border:1px solid var(--linea2);color:var(--hueso);font-weight:700;text-decoration:none;
  opacity:0;transition:opacity 220ms ease 120ms,border-color 160ms ease}
.tb-ver svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform 200ms var(--ease-out)}
.tb-t.listo .tb-dos,.tb-t.listo .tb-ver{opacity:1;transform:none}
.tb-sim{margin-top:18px;width:100%}
.tb-t.abierta .tb-sim{display:none}
.tb-ver:focus-visible,.tb-sim:focus-visible,.tb-todos:focus-visible{outline:2px solid var(--hueso);outline-offset:2px}
@media (hover:hover) and (pointer:fine){ .tb-ver:hover{border-color:var(--hueso)} .tb-ver:hover svg{transform:translateX(3px)} }

/* «ver todos» */
.tb-todos{background:var(--naranja);border-color:var(--naranja);color:var(--azul);justify-content:space-between;gap:10px;min-height:280px}
.tb-todos .tb-comp{color:var(--azul)}
.tb-todos .tb-hora{text-transform:uppercase;font-size:64px}
.tb-todos-t{font-size:16px;font-weight:600}
.tb-flechota{width:60px;height:60px;border-radius:50%;background:var(--azul);color:var(--hueso);display:grid;place-items:center;transition:transform 200ms var(--ease-out)}
.tb-flechota svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){ .tb-todos:hover .tb-flechota{transform:translateX(4px)} }

/* móvil en la portada: mazo */
.tb-zona.mazo{display:flex;justify-content:center}
.mazo .tb-pista{position:relative;width:min(100%,380px);touch-action:pan-y}
.mazo .tb-t{position:absolute;inset:0 0 auto 0;will-change:transform;transform-origin:50% 90%;transition:transform 360ms cubic-bezier(.2,.7,.3,1),opacity 300ms ease;cursor:grab}
.mazo .tb-t.arrastra{transition:none;cursor:grabbing}
/* lista y cuadrícula */
.tb-zona.rejilla .tb-pista{display:grid;gap:12px;align-items:start}
@media (min-width:900px){
  .tb-filtros{margin-left:0;margin-right:0;padding:2px 0;flex-wrap:wrap}
  .tb-zona.rejilla .tb-pista{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .tb-t{padding:22px 22px 24px}
  .tb-hora{font-size:88px} .tb-eq{font-size:38px}
}
@media (min-width:1200px){ .tb-zona.rejilla .tb-pista{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (prefers-reduced-motion:reduce){ .tb-mas,.tb-dos,.tb-ver,.mazo .tb-t{transition:none} }
.pista-en-tablero{left:50%;top:-6px;transform:translate(-50%,-100%)}

/* ---------- mazo «de verdad» (portada, móvil y escritorio) ---------- */
.tb-zona.mazo{flex-direction:column;align-items:center}
.mazo .tb-pista{width:min(100%,400px)}
.mazo .tb-t{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.tb-nav{justify-content:center}
.tb-pos{font-size:13px;letter-spacing:.06em;color:var(--mut)}
.tb-sello{position:absolute;top:22px;z-index:6;padding:6px 12px 4px;border:3px solid currentColor;border-radius:6px;font:900 26px/1 "Big Shoulders Display",sans-serif;
  text-transform:uppercase;letter-spacing:.04em;opacity:0;pointer-events:none;background:rgba(16,16,74,.55)}
.tb-sello.si{left:18px;color:var(--naranja);transform:rotate(-12deg)}
.tb-sello.no{right:18px;color:var(--hueso);transform:rotate(12deg)}
.tb-ctrl{margin-top:18px;display:flex;justify-content:center;align-items:center;gap:18px}
.tb-ctrl[hidden]{display:none}
.tb-b{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(242,242,247,.22);background:var(--p1,#14145c);color:var(--hueso);cursor:pointer;
  transition:transform 120ms var(--ease-out),background-color 160ms ease,border-color 160ms ease}
.tb-b svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tb-b.atras{width:48px;height:48px}.tb-b.atras svg{width:20px;height:20px}
.tb-b.si{color:var(--naranja);border-color:rgba(251,91,7,.55)}
.tb-b.si svg{fill:currentColor;stroke-width:1.4}
.tb-b:active{transform:scale(.92)}
.tb-b:disabled{opacity:.35;cursor:default}
.tb-b:focus-visible{outline:2px solid var(--hueso);outline-offset:3px}
@media (hover:hover) and (pointer:fine){ .tb-b:not(:disabled):hover{background:#1c1c70;border-color:rgba(242,242,247,.45)} }
.tb-fin{width:min(100%,400px);min-height:300px;display:grid;align-content:center;gap:10px;padding:28px 24px;border-radius:14px;background:var(--tablero,#10104a);text-align:left}
.tb-fin[hidden]{display:none}
.tb-fin-t{font:900 clamp(34px,9vw,44px)/.95 "Big Shoulders Display",sans-serif;text-transform:uppercase}
.tb-fin-s{font-size:15px;color:var(--mut)}
.tb-fin-acc{margin-top:12px;display:grid;gap:10px}
.tb-fin-acc .boton{width:100%}
.tb-fin-acc [hidden]{display:none}
.tb-aviso{position:fixed;left:50%;bottom:calc(var(--abajo,0px) + 16px);z-index:200;transform:translate(-50%,16px);opacity:0;width:min(calc(100% - 32px),440px);
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:12px 8px 12px 16px;border-radius:12px;background:var(--hueso);color:var(--azul);
  box-shadow:0 14px 34px -12px rgba(4,4,58,.7);transition:transform 240ms var(--ease-out),opacity 200ms ease}
.tb-aviso.ve{transform:translate(-50%,0);opacity:1}
.tb-aviso p{font-size:14.5px;line-height:1.35;font-weight:600}
.tb-aviso a{font-weight:800;color:var(--azul);min-height:44px;display:inline-flex;align-items:center;padding:0 6px}
.tb-aviso button{width:44px;height:44px;border:0;background:none;font-size:22px;color:var(--azul);cursor:pointer}
@media (prefers-reduced-motion:reduce){ .tb-aviso{transition:opacity 150ms ease} .tb-b{transition:none} }
/* la carta que sale volando no ensancha la página (en móvil haría zoom): se recorta en el borde */
.tb-zona.mazo{overflow-x:clip;overflow-y:visible;padding-bottom:4px}
