/* ════════════════════════════════════════════════════════════════════
   Mundial2026 · fiesta.css — clases utilitarias, FCard, keyframes
   Complementa tokens.css + app.css con el vocabulario Tricolor Fiesta.
════════════════════════════════════════════════════════════════════ */

/* ── Tipografía utilitaria ───────────────────────────────────────── */
.display {
  font-family: 'Bowlby One SC', sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-style: normal;
}
.script { font-family: 'Caveat', cursive; }
.num    { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* Fix global: Bowlby One SC no tiene variant italic — forzar normal
   en todos los elementos que app.css pone en italic heredado           */
.hero-title, .std-name, .atitle, .pp-name, .pick-section-lbl,
.jornada-hdr, .kpi-l, .tr-seg {
  font-style: normal;
}

/* (PapelPicado retirado — papel-picado element ya no se renderiza en M26) */

/* ── FCard — usada en match cards de Fixtures ────────────────────── */
/* Migrada a sombras M26 suaves */
.fcard-f {
  background:    var(--surface);
  border:        1px solid var(--line);
  border-radius: var(--radius);
}
.fcard-f.sh-g, .fcard-f.sh-r, .fcard-f.sh-p,
.fcard-f.sh-y, .fcard-f.sh-ink {
  box-shadow: var(--shadow-card);
}

/* ── Jornada date headers (sigue activo en fixtures) ─────────────── */
.jornada-hdr {
  border-bottom: 1px dashed var(--line);
}

/* ── FBtn — usado en tutorial modal close button ─────────────────── */
.fbtn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              6px;
  font-family:      var(--font-body);
  font-weight:      700;
  font-size:        13.5px;
  padding:          12px 20px;
  background:       var(--ink);
  color:            var(--bg);
  border:           1.5px solid var(--ink);
  border-radius:    999px;
  cursor:           pointer;
  transition:       all var(--fast);
}
.fbtn:hover  { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-1px); }
.fbtn:active { transform: translateY(0); }

.fbtn.fbtn-green {
  background: var(--green);
  color:      #fff;
  border-color: var(--green);
}
.fbtn.fbtn-red {
  background: var(--red);
  color:      #fff;
  border-color: var(--red);
}

/* (Header .hdr.scrolled retirado — M26 usa .nav.scrolled en app.css) */

/* (Podio top-3 .std-row.* retirado — standings ya no se renderiza en M26) */

/* ── Pick card: barra de probabilidad (sigue activa en Picks) ───── */
.pcard {
  animation: fiesta-fadein .35s var(--bb-ease-out) both;
}

.pf-bar {
  display:       flex;
  width:         100%;
  height:        34px;
  margin-top:    .55rem;
  border:        1.5px solid var(--bb-ink);
  border-radius: 3px;
  overflow:      hidden;
  background:    var(--bb-paper);
  font-family:   var(--bb-ui);
}
.pf-bar.pf-empty {
  align-items:     center;
  justify-content: center;
  font-size:       0.65rem;
  font-weight:     700;
  letter-spacing:  .5px;
  text-transform:  uppercase;
  color:           rgba(31,19,8,.32);
  background:      repeating-linear-gradient(45deg,
                     var(--bb-paper) 0 6px,
                     rgba(31,19,8,.04) 6px 12px);
}
.pf-seg {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             0;
  min-width:       0;
  padding:         0 2px;
  overflow:        hidden;
  position:        relative;
  transition:      width .8s var(--bb-ease-out), filter var(--bb-fast);
}
.pf-seg + .pf-seg { border-left: 1px solid rgba(31,19,8,.18); }
.pf-seg b {
  font-size:   .82rem;
  font-weight: 800;
  color:       var(--bb-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pf-seg span {
  font-size:      .48rem;
  font-weight:    700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color:          rgba(31,19,8,.55);
  margin-top:     2px;
  white-space:    nowrap;
}
.pf-seg.pf-l { background: rgba(14,107,62,.18); }
.pf-seg.pf-e { background: rgba(244,196,48,.28); }
.pf-seg.pf-v { background: rgba(30,79,184,.16); }
.pf-seg.pf-fav { filter: brightness(1.08); }
.pf-seg.pf-fav::before {
  content: '★';
  position: absolute; top: 2px; right: 4px;
  font-size: .55rem;
  color: var(--bb-ink);
  opacity: .55;
}
/* Segmento muy estrecho — ocultar texto secundario */
.pf-seg[data-narrow="1"] span { display: none; }
.pf-seg[data-narrow="1"] b { font-size: .68rem; }

/* ── Quick-pick chips ────────────────────────────────────────────── */
.pc-quick {
  display:      flex;
  gap:          4px;
  margin-bottom: .45rem;
  flex-wrap:    wrap;
}
.qp-chip {
  font-family:   var(--bb-mono);
  font-size:     .68rem;
  font-weight:   700;
  letter-spacing: .3px;
  padding:       3px 8px;
  background:    var(--bb-cream);
  color:         var(--bb-ink);
  border:        1.5px solid rgba(31,19,8,.18);
  border-radius: 3px;
  cursor:        pointer;
  transition:    all var(--bb-fast);
  font-variant-numeric: tabular-nums;
}
.qp-chip:hover {
  background:   var(--bb-ink);
  color:        var(--bb-cream);
  border-color: var(--bb-ink);
  transform:    translateY(-1px);
}
.qp-chip:active {
  transform: translateY(0);
}
.qp-chip.active {
  background:   var(--ft-green);
  color:        #fff;
  border-color: var(--ft-green);
}

/* (Hero countdown chip .hero-next.* retirado — M26 usa .countdown grid) */
/* (.hdr-help-btn retirado — el botón ? ahora usa .tool-btn de app.css) */

/* ── Tutorial modal ──────────────────────────────────────────────── */
/* NOTA specificity: .bb-modal en game-fx.css tiene `overflow: hidden`
 * y carga DESPUÉS de fiesta.css. Para ganar la cascada usamos selector
 * compuesto (.bb-modal.bb-tutorial-modal = 0,2,0 > 0,1,0). Sin esto el
 * scroll vertical queda muteado y los users con pantallas <800px no
 * pueden llegar al botón "Entendido". */
.bb-modal.bb-tutorial-modal {
  max-width:    520px;
  max-height:   85vh;
  overflow-y:   auto;
  /* Padding extra abajo para que el botón sticky no oculte el último step */
  padding-bottom: 64px;
  /* Scroll suave en iOS */
  -webkit-overflow-scrolling: touch;
}

/* Botón close sticky al fondo del modal → siempre alcanzable sin importar
 * el viewport. Antes quedaba al final del scroll y en pantallas chicas
 * los users no llegaban. */
.bb-modal.bb-tutorial-modal .bb-tut-close {
  position: sticky;
  bottom: 0;
  margin: 0 -1.5rem -1.5rem;   /* sangrar al borde del modal */
  padding: 14px 1.5rem;
  width: calc(100% + 3rem);
  border-radius: 0;
  background: var(--bb-paper, var(--surface));
  box-shadow: 0 -8px 16px -8px rgba(0,0,0,.12);
  z-index: 1;
}

.bb-tut-steps {
  display:       flex;
  flex-direction: column;
  gap:           0;
  margin:        1rem 0 1.25rem;
}

.bb-tut-step {
  display:       flex;
  gap:           12px;
  padding:       12px 0;
  border-bottom: 1px dashed var(--ft-line);
  animation:     fiesta-fadein var(--bb-medium) var(--bb-ease-out) both;
}
.bb-tut-step:last-child { border-bottom: none; }

.bb-tut-icon {
  font-size:    1.4rem;
  line-height:  1;
  flex-shrink:  0;
  width:        30px;
  text-align:   center;
  padding-top:  2px;
}

.bb-tut-step > div:last-child {
  flex: 1;
  min-width: 0;
}

.bb-tut-step strong {
  display:     block;
  font-family: var(--bb-ui);
  font-weight: 700;
  font-size:   0.9rem;
  color:       var(--bb-ink);
  margin-bottom: 3px;
}

.bb-tut-step p {
  font-family: var(--bb-ui);
  font-size:   0.82rem;
  color:       var(--ft-ink2);
  margin:      0;
  line-height: 1.4;
}

.bb-tut-scoring {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  margin-top:     6px;
}

.bb-tut-score-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-family: var(--bb-ui);
  font-size:   0.82rem;
  color:       var(--ft-ink2);
}

.bb-tut-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       26px;
  height:          20px;
  padding:         0 5px;
  border-radius:   3px;
  font-family:     var(--bb-ui);
  font-weight:     800;
  font-size:       0.7rem;
  flex-shrink:     0;
}
.tut-pleno   { background: var(--ft-green);  color: #fff; }
.tut-acierto { background: var(--ft-red);    color: #fff; }
.tut-miss    { background: rgba(31,19,8,.18); color: var(--bb-ink); }
.tut-wo      { background: var(--ft-yellow); color: var(--bb-ink); }

.bb-tut-close {
  width:      100%;
  font-size:  0.9rem;
  padding:    11px 18px;
}

/* ── Sticky picker row en picks (siempre visible al scrollear) ───── */
#s-picks #picker-btns {
  position: sticky;
  top: 58px; /* alto del header desktop */
  z-index: 50;
  background: var(--bb-cream);
  padding: .6rem 0 .55rem;
  margin-top: -.5rem;
  border-bottom: 1px solid var(--ft-line);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.86);
}
.picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--bb-ui);
  font-size: .72rem;
  font-weight: 700;
  padding: 5px 11px;
  background: var(--bb-paper);
  color: rgba(31,19,8,.55);
  border: 1.5px solid rgba(31,19,8,.18);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--bb-fast);
  letter-spacing: .3px;
}
.picker-btn:hover {
  color: var(--bb-ink);
  border-color: var(--bb-ink);
  transform: translateY(-1px);
}
.picker-btn.on {
  /* el inline style del JS le da ink/cream — solo refinamos */
  letter-spacing: .4px;
}

@media (max-width: 700px) {
  #s-picks #picker-btns {
    top: 52px; /* alto del header mobile */
    padding: .5rem 0 .45rem;
  }
}

/* ── Save button states (dinámico con count) ─────────────────────── */
.save-btn-float.is-empty {
  cursor: not-allowed;
  filter: saturate(.35);
  opacity: .55;
  transform: translateY(2px);
}
.save-btn-float.is-many {
  animation: save-pulse 1.8s ease-in-out infinite;
}
@keyframes save-pulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* ── Reduced motion global (respeta preferencia OS) ──────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto !important;
  }
}

/* ── Splash inicial ──────────────────────────────────────────────── */
#bb-splash {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bb-cream);
  z-index: 9999;
  transition: opacity .35s var(--bb-ease-out);
}
#bb-splash.out { opacity: 0; pointer-events: none; }
.bb-splash-inner {
  text-align: center;
  animation: fiesta-fadein .4s var(--bb-ease-out) both;
}
.bb-splash-ball {
  display: inline-flex;
  animation: bb-splash-spin 1.4s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes bb-splash-spin {
  0%   { transform: rotate(0deg)   translateY(0)    scale(1); }
  50%  { transform: rotate(180deg) translateY(-12px) scale(1.05); }
  100% { transform: rotate(360deg) translateY(0)    scale(1); }
}
.bb-splash-lbl {
  font-family: var(--bb-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: -.5px;
  color: var(--bb-ink);
  margin-top: 1.1rem;
  font-style: normal;
}
.bb-splash-sub {
  font-family: var(--bb-mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(31,19,8,.42);
  margin-top: .35rem;
}

/* ── View transitions (fade-in entre vistas) ─────────────────────── */
#s-home:not(.hidden),
#s-fixtures:not(.hidden),
#s-picks:not(.hidden),
#s-stats:not(.hidden),
#s-admin:not(.hidden) {
  animation: fiesta-fadein .25s var(--bb-ease-out) both;
}

/* ── Pick saved badge ────────────────────────────────────────────── */
.pcard.is-saved::after {
  content: '✓ Guardado';
  position: absolute;
  top: 8px; right: 10px;
  font-family: var(--bb-mono);
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ft-green);
  background: rgba(14,107,62,.12);
  border: 1px solid rgba(14,107,62,.32);
  padding: 2px 7px;
  border-radius: 99px;
  pointer-events: none;
  animation: fiesta-fadein .3s var(--bb-ease-out) both;
}

/* ── Focus rings accesibles (sin romper estilos visuales) ────────── */
:focus-visible {
  outline: 2px solid var(--ft-yellow);
  outline-offset: 2px;
  border-radius: 3px;
}
.bb-modal-player:focus-visible,
.qp-chip:focus-visible,
.nb:focus-visible {
  outline-offset: 3px;
}
input.sc-in:focus-visible {
  outline: none; /* el inset box-shadow ya marca focus */
}

/* ── Modal animation upgrade (slide-up + pop) ────────────────────── */
.bb-modal {
  animation: bb-modal-pop .35s var(--bb-ease-pop) both;
}
@keyframes bb-modal-pop {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ── Toast con íconos ────────────────────────────────────────────── */
.toast {
  display: inline-flex; align-items: center; gap: 10px;
}
.toast-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-family: var(--bb-ui);
  font-weight: 800;
  font-size: .82rem;
  flex-shrink: 0;
  background: var(--ft-green); color: #fff;
}
.toast.toast-err  .toast-ico { background: var(--ft-red);    color: #fff; }
.toast.toast-info .toast-ico { background: var(--ft-yellow); color: var(--bb-ink); }

/* ── Empty states con personalidad ───────────────────────────────── */
.bb-empty {
  background: var(--bb-paper);
  border: 2px dashed rgba(31,19,8,.18);
  border-radius: 8px;
  padding: 2.2rem 1.5rem;
  text-align: center;
  animation: fiesta-fadein .4s var(--bb-ease-out) both;
}
.bb-empty-ico {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: .75rem;
  display: inline-block;
  animation: bb-empty-bounce 2.4s ease-in-out infinite;
}
@keyframes bb-empty-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.bb-empty-title {
  font-family: var(--bb-display);
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: -.3px;
  color: var(--bb-ink);
  font-style: normal;
}
.bb-empty-sub {
  font-family: var(--bb-ui);
  font-size: .8rem;
  color: rgba(31,19,8,.5);
  margin-top: .35rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.45;
}

/* ── Nav icons (default: text-only en desktop) ───────────────────── */
.nb-ico { display: none; }
.nb-lbl { display: inline; }

/* ── Bottom nav en mobile ────────────────────────────────────────── */
/* Mobile bottom-nav del Tricolor Fiesta retirado.
   M26 mantiene el nav sticky-top en mobile (handoff dice "mobile out of scope").
   Si se necesita bottom-nav en mobile en una iteración futura,
   añadir como .m26-bottom-nav y wirearlo en index.html aparte. */

/* ── Keyframes Fiesta ────────────────────────────────────────────── */
@keyframes fiesta-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fiesta-pop {
  0%   { transform: scale(0.6);  opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

@keyframes fiesta-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(210,35,42,0.5); }
  50%      { box-shadow: 0 0 0 10px rgba(210,35,42,0);   }
}

@keyframes fiesta-slide-left {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: none;             opacity: 1; }
}