/* Tablero split-flap de próximas salidas (js/tablero.js). Clases sf-*.
   Cada celda tiene cuatro capas del alto completo de la letra: arriba fija (.sf-t), abajo fija (.sf-b) y dos
   solapas que giran (.sf-ft cae, .sf-fb sube). Cada capa se recorta a su mitad con clip-path. */
.tablero { --sf-h: clamp(26px, 6.2vw, 34px); --sf-w: clamp(14px, 3.6vw, 21px); margin: 26px 0 0; background: linear-gradient(#2a2a27, #1c1c1a); border-radius: 18px; padding: 14px 14px 12px; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 -1px 0 rgba(0,0,0,.5) inset, 0 18px 40px -16px rgba(20,25,13,.7); color: #efe9dd; max-width: 100%; overflow: hidden; }
.sf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 2px 4px 10px; font-family: var(--sans); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--leaf); }
.sf-hora { color: #9c968b; letter-spacing: .12em; }
.sf-row { display: flex; gap: clamp(6px, 2vw, 14px); width: 100%; margin: 0; padding: 5px 2px; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
.sf-row + .sf-row { border-top: 1px solid rgba(255,255,255,.05); }
.sf-row:hover, .sf-row:focus-visible { background: rgba(255,255,255,.04); outline: none; }
.sf-g { display: flex; gap: 2px; }
.sf-g2 { margin-left: auto; }
.sf-c { position: relative; display: block; width: var(--sf-w); height: var(--sf-h); font: 600 calc(var(--sf-h) * .62)/var(--sf-h) ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-align: center; perspective: 140px; color: #f2ebdc; border-radius: 3px; }
.sf-c > span { position: absolute; inset: 0; line-height: var(--sf-h); background: linear-gradient(#3a3935, #2a2926); border-radius: 3px; backface-visibility: hidden; }
.sf-t, .sf-ft { clip-path: inset(0 0 50% 0); }
.sf-b, .sf-fb { clip-path: inset(50% 0 0 0); background: linear-gradient(#302f2b, #242320); }
.sf-c::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.6); z-index: 5; pointer-events: none; }
.sf-ft, .sf-fb { visibility: hidden; transform-origin: center center; z-index: 3; }
.sf-go .sf-ft { visibility: visible; animation: sf-down .07s ease-in forwards; }
.sf-go .sf-fb { visibility: visible; animation: sf-up .07s ease-out forwards; }
@keyframes sf-down { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes sf-up { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
.sf-few .sf-g2 .sf-c { color: #e9c46a; }
.sf-full .sf-g2 .sf-c { color: #c97a6d; }
.sf-note { font-family: var(--sans); font-size: .74rem; letter-spacing: .04em; color: #9c968b; margin: 10px 4px 0; }
@media (prefers-reduced-motion: reduce) { .sf-go .sf-ft, .sf-go .sf-fb { animation: none; } }