/* ════════════════════════════════════════════════════════════════
   INICIO · DIAGONAL — Hero LA JORNADA + carrusel + 4 cards lit-on-tap
   Bundle Claude Design (Rtie-AbuXHjt-p-jxj6rLw). Sustituye hub-stack.
   ════════════════════════════════════════════════════════════════ */

/* ── Variables (paleta tasca · solo scope sec-inicio) ─────────── */
.pp-diag-home {
  --pp-ink:           #0e0805;
  --pp-wood-deep:     #15090a;
  --pp-cream:         #f6ead0;
  --pp-parchment:     #e8d8b0;
  --pp-brass:         #c4a05c;
  --pp-brass-glow:    #f0c870;
  --pp-brass-deep:    #7a5a20;
  --pp-silver:        #d8d8e0;
  --pp-live:          #d44a2a;
  --pp-live-glow:     #ff7245;
  --pp-display:       'IM Fell DW Pica SC', 'Cinzel', Georgia, serif;
  --pp-body:          'IM Fell English', 'IM Fell DW Pica', Georgia, serif;
  --pp-mono:          'JetBrains Mono', ui-monospace, monospace;
}

/* ── Contenedor sec-inicio en diagonal mode ─────────────────────── */
.pp-diag-home {
  background: transparent;
  color: var(--pp-parchment);
  font-family: var(--pp-body);
  flex-direction: column;
  min-height: 100%;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
/* Solo se muestra (flex) cuando es la sección activa; si no, .sn-section
   (display:none) manda y el resto de apartados pueden mostrarse. En móvil
   el media query de .sn-section fuerza flex igualmente, sin afectar al swipe. */
.pp-diag-home.sn-section--visible { display: flex; }

/* ── En sec-inicio mantenemos el header global v3 (el usuario quiere que
   PUTAS·moneda·PICAS esté presente en todas las secciones, también inicio).
   Sólo ocultamos los spades-cayendo decorativos para no chocar con el hero. */
body.pp-on-inicio #spades-bg { display: none !important; }
@media (max-width: 600px) {
  /* Resta header en flujo (~42px) + nav (~52px) para que la última card
     (Valoraciones) quede ENTERA encima de la barra de navegación. Antes solo
     restaba 44px → el contenido se metía bajo la nav y cortaba Valoraciones. */
  body.pp-on-inicio #main-content { margin-top: 0 !important; height: calc(100dvh - 42px - 52px - env(safe-area-inset-bottom, 0px)) !important; }
  /* El header v3 va en flujo (relative) y ya ocupa sus 42px; el margin-top:42
     de #main-content duplicaba el espacio en estas secciones tavern → fuera. */
  body.pp-on-tier #main-content,
  body.pp-on-fichajes #main-content,
  body.pp-on-jornada #main-content,
  body.pp-on-tasca #main-content { margin-top: 0 !important; }
}
body.pp-on-inicio #main-content { padding-top: 0 !important; }

/* Borde inferior: las cards deben terminar JUSTO en la línea de la nav bar,
   sin franja de madera (bug en Firefox móvil) ni degradado intermedio. En vez
   del antiguo fade fijo, damos al contenedor un fondo oscuro: cualquier hueco
   sub-pixel entre la última card y la nav queda en negro continuo, no madera. */
body.pp-on-inicio #main-content {
  /* El fondo de MADERA fija del body manda (este contenedor, transparente).
     styles.css mete un padding-bottom ~80px que dejaba un hueco enorme sobre
     la nav (peor en Firefox): lo anulamos, la altura ya reserva la barra. */
  background: transparent !important;
  padding-bottom: 0 !important;
}

/* ════ HERO LA JORNADA ════════════════════════════════════════════ */
.pp-hero {
  position: relative;
  width: 100%;
  height: 260px;
  flex: 0 0 260px;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  border: 0;
  text-align: left;
}
.pp-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('../assets/inicio/mud-stadium.webp');
  background-size: cover; background-position: center 35%;
  filter: brightness(.4) saturate(.85);
  transform: scale(1.05);
  animation: pp-bg-pan 22s ease-in-out infinite alternate;
}
.pp-hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.1) 60%, rgba(0,0,0,.7) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.4), transparent 60%);
}
.pp-hero-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.5) 100%);
}
.pp-hero-content {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  padding: 0 16px 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.pp-hero-meta {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 2px;
}
.pp-hero-meta-text {
  font-family: var(--pp-mono);
  font-size: 9px;
  letter-spacing: .18em;
  color: rgba(245,225,180,.6);
  text-transform: uppercase;
}
.pp-hero-titlerow {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
}
.pp-hero-title {
  font-size: 26px !important;
  line-height: 1;
  color: var(--pp-brass-glow);
}
.pp-hero-match {
  display: flex; align-items: center; gap: 10px;
  min-height: 22px;
}
.pp-hero-team {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--pp-display);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--pp-cream);
}
.pp-hero-team img,
.pp-hero-team svg {
  width: 20px; height: 20px; flex: 0 0 20px;
  border-radius: 50%;
  background: #1a0e08;
  box-shadow: 0 0 0 1px rgba(196,160,92,.35), 0 1px 2px rgba(0,0,0,.6);
}
.pp-hero-score {
  font-family: var(--pp-display);
  font-size: 22px; line-height: 1; letter-spacing: .08em;
  color: var(--pp-brass-glow);
  text-shadow: 0 0 10px rgba(240,200,112,.45);
  white-space: nowrap;
}
.pp-hero-score--scheduled {
  font-size: 13px;
  letter-spacing: .12em;
  color: rgba(245,225,180,.85);
  text-shadow: none;
}
.pp-hero-minute {
  margin-left: auto;
  font-family: var(--pp-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--pp-live-glow);
  white-space: nowrap;
}
.pp-hero-empty {
  font-family: var(--pp-body);
  font-style: italic;
  font-size: 12px;
  color: rgba(245,225,180,.6);
}

/* Live chip + dot (scoped al hero) */
.pp-diag-home .pp-live-chip[hidden] { display: none !important; }
.pp-diag-home .pp-live-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 99px;
  background: rgba(212, 74, 42, .25);
  border: 0.5px solid rgba(212, 74, 42, .55);
  font-family: var(--pp-mono);
  font-size: 9px; font-weight: 500;
  color: #ffae90;
  letter-spacing: .15em;
  text-transform: uppercase;
  box-shadow: 0 0 12px rgba(212,74,42,.25);
}
.pp-diag-home .pp-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pp-live);
  box-shadow: 0 0 8px var(--pp-live-glow);
  animation: pp-live-pulse 1.6s ease-in-out infinite;
  display: inline-block;
}
@keyframes pp-live-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(212, 74, 42, .7); }
  60%      { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(212, 74, 42, 0); }
}

/* Hover/focus del hero entero */
.pp-hero:hover .pp-hero-bg,
.pp-hero:focus-visible .pp-hero-bg {
  filter: brightness(.7) saturate(1);
}
.pp-hero:focus-visible { outline: 2px solid var(--pp-brass-glow); outline-offset: -3px; }

@keyframes pp-bg-pan {
  0%   { background-position: 30% center; }
  100% { background-position: 70% center; }
}

/* ════ TEAM STRIP (carrusel compacto) ════════════════════════════ */
.pp-team-strip {
  flex: 0 0 auto;
  padding: 2px 0 2px;
  background-image:
    linear-gradient(180deg, rgba(255,225,170,.06) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.24) 100%),
    url('../assets/inicio/wood-pub-table.webp');
  background-size: 100% 100%, 320px auto;
  background-position: center top, center top;
  background-repeat: no-repeat, repeat;
  background-color: #1a0e08;
  border: 0;
}
.pp-team-strip .lineups-strip {
  display: flex !important;
  gap: 6px;
  overflow-x: auto;
  padding: 0 14px;
  scroll-snap-type: x mandatory;
}
/* Escudos más pequeños en el carrusel del hub (no afecta a Alineaciones) */
.pp-team-strip .lineup-club-wrap { width: 48px; gap: 2px; }
.pp-team-strip .lineup-club-crest,
.pp-team-strip .lineup-club-crest > img { width: 28px; height: 28px; }
.pp-team-strip .lineup-club-name { font-size: 8px; }
.pp-team-strip .lineups-strip::-webkit-scrollbar { display: none; }
.pp-team-strip .lineups-strip { scrollbar-width: none; }

/* Ajustes mínimos del wrap dentro del strip: scroll snap por escudo.
   El resto del estilo (escudo XL + chip dorado + nombre completo) vive en
   styles.css → .lineup-club-wrap. */
.pp-team-strip .lineup-club-wrap {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.pp-team-strip .lineup-club-name {
  /* Misma tipografía del tema tasca pero respetando el line-clamp:2 que
     evita que se corten "Atlético Madrid" / "Rayo Vallecano" / etc. */
  font-family: var(--pp-display);
  letter-spacing: .03em;
  text-transform: none;
}

/* ════ 4 CARDS DIAGONALES ═════════════════════════════════════════ */
.pp-diag-stack {
  flex: 1 1 auto;
  /* El alto de #main-content ya resta la nav (44px) + safe-area, así que el
     padding-bottom solo necesita un pequeño respiro; antes (46px) dejaba las
     cards cortadas muy por encima de la barra. */
  padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 8px);
  display: flex; flex-direction: column;
  gap: 6px;
  min-height: 0;
}

.pp-diag-card {
  position: relative;
  width: 100%;
  flex: 1 1 0;
  min-height: 86px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  font-family: inherit;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
  box-shadow:
    inset 0 0 0 0.5px rgba(196,160,92,.18),
    inset 0 0 0 1px rgba(0,0,0,.4),
    0 4px 12px rgba(0,0,0,.55);
}
.pp-diag-card:active { transform: scale(.985); }
.pp-diag-card:focus-visible { outline: 2px solid var(--pp-brass-glow); outline-offset: -3px; }

/* Fondo (placeholder hasta vídeo) */
.pp-diag-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  /* Antes brightness .45 → cards casi negras en móvil sin hover.
     Subimos para que las fotos se intuyan siempre; .lit las despierta a brillo pleno. */
  filter: blur(1.5px) brightness(.70) saturate(.85);
  transform: scale(1.06);
  transition: filter .65s cubic-bezier(.4,.6,.2,1), transform 12s ease-in-out;
  animation: pp-bg-pan 18s ease-in-out infinite alternate;
  will-change: filter, transform;
}
.pp-diag-card.lit > .pp-diag-bg {
  filter: blur(0px) brightness(1) saturate(1);
  transform: scale(1.12);
}
@media (hover: hover) {
  .pp-diag-card:hover > .pp-diag-bg {
    filter: blur(0px) brightness(.95) saturate(1);
  }
}

/* Fondos por card */
.pp-diag-card--fichajes     .pp-diag-bg { background-image: url('../assets/inicio/loop-fichajes.webp'); }
.pp-diag-card--topstars     .pp-diag-bg { background-image: url('../assets/inicio/loop-topstars.webp'); }
.pp-diag-card--tasca      .pp-diag-bg { background-image: url('../assets/inicio/tasca.webp'); }
.pp-diag-card--valoraciones .pp-diag-bg { background-image: url('../assets/inicio/loop-valoraciones.webp'); }
.pp-diag-card--jornada      .pp-diag-bg { background-image: url('../assets/inicio/mud-stadium.webp'); }

/* Hero dinámico: fondo según la sección que ocupe la plaza de arriba */
.pp-hero--fichajes .pp-hero-bg { background-image: url('../assets/inicio/loop-fichajes.webp'); }
.pp-hero--topstars .pp-hero-bg { background-image: url('../assets/inicio/loop-topstars.webp'); }
.pp-hero-preview {
  font-family: var(--pp-display, 'IM Fell DW Pica SC', Georgia, serif);
  font-size: 16px;
  color: rgba(245,225,180,.9);
  letter-spacing: .02em;
}

/* Tint overlay */
.pp-diag-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(115deg,
      rgba(0,0,0,.50) 0%,
      rgba(0,0,0,.20) 45%,
      rgba(0,0,0,.50) 100%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35));
  transition: opacity .55s;
}
.pp-diag-card.lit > .pp-diag-overlay { opacity: .55; }
@media (hover: hover) {
  .pp-diag-card:hover > .pp-diag-overlay { opacity: .75; }
}

/* Borde latón que enciende */
.pp-diag-edge {
  position: absolute; inset: 0;
  border-radius: 6px;
  box-shadow: inset 0 0 0 0.5px rgba(196,160,92,.25);
  pointer-events: none;
  transition: box-shadow .35s, opacity .35s;
}
.pp-diag-card.lit > .pp-diag-edge,
.pp-diag-card:hover > .pp-diag-edge {
  box-shadow:
    inset 0 0 0 1px var(--pp-brass-glow),
    inset 0 0 0 0.5px rgba(255,225,170,.5),
    0 0 22px rgba(240,200,112,.25);
}

/* Sweep de luz al pulsar */
.pp-diag-flare {
  position: absolute; top: 0; left: 0; bottom: 0; width: 35%;
  background: linear-gradient(115deg,
    transparent 30%, rgba(255,230,170,.18) 50%, transparent 70%);
  pointer-events: none;
  transform: translateX(-110%);
}
@keyframes pp-diag-flare {
  0%   { transform: translateX(-110%); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateX(110%); opacity: 0; }
}
.pp-diag-card.lit > .pp-diag-flare {
  animation: pp-diag-flare 1.1s cubic-bezier(.3,.1,.7,1) both;
}

/* Contenido: título zig-zag, subtítulo, preview */
.pp-diag-content {
  position: relative; z-index: 2;
  height: 100%;
  padding: 10px 12px 11px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.pp-diag-card--right .pp-diag-content { text-align: right; }
.pp-diag-titlerow {
  display: flex; align-items: center; gap: 10px;
}
.pp-diag-card--right .pp-diag-titlerow { flex-direction: row-reverse; }
.pp-diag-title {
  font-family: var(--pp-display);
  font-size: 18px;
  line-height: 1;
  letter-spacing: .14em;
  color: rgba(245,225,180,.92);
  white-space: nowrap;
  text-shadow:
    0 1px 0 rgba(0,0,0,.55),
    0 0 8px rgba(0,0,0,.7),
    0 0 16px rgba(240,200,112,.25);
  transition: color .35s, text-shadow .35s;
}
.pp-diag-card.lit .pp-diag-title,
.pp-diag-card:hover .pp-diag-title {
  color: var(--pp-brass-glow);
  text-shadow:
    0 1px 0 rgba(0,0,0,.55),
    0 0 10px rgba(0,0,0,.6),
    0 0 22px rgba(240,200,112,.55);
}

.pp-diag-rule {
  height: 1px; flex: 1; min-width: 24px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--pp-brass-deep) 18%,
    var(--pp-brass) 50%,
    var(--pp-brass-deep) 82%,
    transparent 100%);
  align-self: center;
  position: relative;
  transition: filter .35s;
}
.pp-diag-rule::before,
.pp-diag-rule::after {
  content: ''; position: absolute; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--pp-brass);
  box-shadow: 0 0 6px rgba(240,200,112,.35);
}
.pp-diag-rule::before { left: 15%; }
.pp-diag-rule::after  { right: 15%; }
.pp-diag-card.lit .pp-diag-rule,
.pp-diag-card:hover .pp-diag-rule {
  filter: drop-shadow(0 0 6px rgba(240,200,112,.5));
}

.pp-diag-subtitle {
  font-family: var(--pp-body);
  font-style: italic;
  font-size: 10px;
  color: rgba(245,225,180,.6);
  letter-spacing: .02em;
  margin-top: 1px;
}
.pp-diag-card--left  .pp-diag-subtitle { text-align: right; }
.pp-diag-card--right .pp-diag-subtitle { text-align: left; }

.pp-diag-preview {
  display: flex; align-items: center; gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.pp-diag-card--right .pp-diag-preview { flex-direction: row-reverse; }
.pp-diag-preview-text {
  font-family: var(--pp-body);
  font-style: italic;
  font-size: 12px;
  color: var(--pp-cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
/* Top Stars: su teaser es más largo → permitir 2 líneas (sin tocar el resto,
   que siguen en una línea con elipsis). */
.pp-diag-card--topstars .pp-diag-preview-text {
  white-space: normal;
  text-overflow: clip;
  font-size: 11px;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Minislideshow de últimos fichajes ──────────────────────────── */
.pp-diag-preview--rotator {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding-top: 4px;
}
.pp-fich-track {
  position: relative;
  min-height: 22px;
  width: 100%;
}
.pp-fich-slide {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity .45s ease-in-out;
  pointer-events: none;
}
.pp-fich-slide.is-active { opacity: 1; }
.pp-fich-team-img {
  width: 14px; height: 14px;
  border-radius: 50%;
  object-fit: contain;
  flex: 0 0 14px;
  background: #1a0e08;
  box-shadow: 0 0 0 0.5px rgba(196,160,92,.45);
}
.pp-fich-arrow {
  font-size: 9px;
  opacity: .6;
  color: var(--pp-brass);
}
.pp-fich-name {
  font-family: var(--pp-body);
  font-style: italic;
  font-size: 12px;
  color: var(--pp-cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.pp-fich-tag {
  display: inline-flex; align-items: center;
  font-family: var(--pp-mono);
  font-size: 7.5px;
  letter-spacing: .12em;
  padding: 2px 5px;
  border-radius: 2px;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.pp-fich-tag--aceptada {
  background: linear-gradient(180deg, #e8c47a 0%, #b89244 40%, #8a6824 75%, #c4a05c 100%);
  color: #1a0e05;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 1px 2px rgba(0,0,0,.6);
}
.pp-fich-tag--rumor {
  background: rgba(212, 74, 42, .25);
  border: 0.5px solid rgba(212, 74, 42, .55);
  color: #ffae90;
  box-shadow: 0 0 8px rgba(212,74,42,.2);
}
.pp-fich-dots {
  display: flex; align-items: center; justify-content: center;
  gap: 3px;
  height: 5px;
  margin-top: 1px;
}
.pp-fich-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(196,160,92,.25);
  transition: background .3s, transform .3s;
}
.pp-fich-dot.is-active {
  background: var(--pp-brass-glow);
  box-shadow: 0 0 6px rgba(240,200,112,.6);
  transform: scale(1.2);
}

.pp-brass-plaque {
  display: inline-flex; align-items: center;
  font-family: var(--pp-mono);
  font-size: 8px;
  letter-spacing: .12em;
  padding: 2px 6px;
  border-radius: 2px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #e8c47a 0%, #b89244 40%, #8a6824 75%, #c4a05c 100%);
  color: #1a0e05;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 1px 2px rgba(0,0,0,.6);
  text-shadow: 0 0.5px 0 rgba(255,255,255,.3);
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .pp-hero { height: 220px; flex: 0 0 220px; }
  .pp-hero-title { font-size: 22px !important; }
  .pp-diag-title { font-size: 16px; letter-spacing: .12em; }
  .pp-diag-preview-text { font-size: 11px; }
}
@media (min-width: 720px) {
  .pp-diag-home { max-width: 460px; margin: 0 auto; }
}

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pp-hero-bg,
  .pp-diag-bg,
  .pp-diag-flare,
  .pp-live-dot { animation: none !important; }
  .pp-diag-card { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   FASE 4 · REBRAND COMPLETO sec-tier (Top Stars) + sec-jornada (La Liga)
   Heavy CSS-only restyle (HTML/JS intacto). Latón + parchment + IM Fell.
   ════════════════════════════════════════════════════════════════ */

/* ── Subnavs (.ts-subnav-btn) v6: 3D layered buttons (Voxybuns adapt)
   El botón tiene una sombra negra base + un span "top" desplazado hacia
   arriba que se hunde al pulsar. Adaptado a la paleta latón/madera. */
.ts-subnav {
  padding: 10px 14px 8px !important;
  gap: 8px !important;
  border-bottom: 0 !important;
  background: transparent !important;
  position: relative;
  justify-content: flex-start !important;   /* botones a la izquierda */
}
/* Contenedor de los tabs por posición (subcategoría) — también a la izquierda */
#sec-tier .tabs,
.tabs[role="tablist"] {
  justify-content: flex-start !important;
}
.ts-subnav-btn {
  /* Botón limpio: el padre es solo un wrapper invisible (sin la caja-sombra
     de latón). Todo el aspecto vive en el span .tsk-btn-top. */
  position: relative !important;
  display: inline-block !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  font: inherit;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  background-image: none !important;
  color: transparent !important;       /* el color real va en el span top */
  transition: none !important;
}
.ts-subnav-btn::before { display: none !important; }
/* "Top face": span inyectado por JS — botón limpio integrado con la madera */
.ts-subnav-btn > .tsk-btn-top,
.ts-subnav-btn-top {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  border: 1px solid rgba(196,160,92,.20);
  border-radius: 10px;
  background: rgba(28,18,9,.30);
  color: rgba(232,216,176,.58);
  font-family: 'Cinzel', 'IM Fell DW Pica SC', Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 7px 15px 8px;
  text-shadow: none;
  white-space: nowrap;
  transform: translateY(0);
  transition: transform .18s ease, background .22s ease,
              border-color .22s ease, color .22s ease, box-shadow .22s ease;
  box-shadow: none;
}
/* Hover: el botón cobra profundidad (se eleva + sombra proyectada) */
@media (hover: hover) {
  .ts-subnav-btn:hover > .tsk-btn-top {
    transform: translateY(-3px);
    background: rgba(245,200,112,.10);
    border-color: rgba(245,200,112,.45);
    color: rgba(245,225,180,.92);
    box-shadow: 0 6px 14px rgba(0,0,0,.40);
  }
}
.ts-subnav-btn:active > .tsk-btn-top {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
/* Estado ACTIVO: acento dorado limpio, sin caja pesada */
.ts-subnav-btn--active > .tsk-btn-top {
  background: linear-gradient(180deg, rgba(245,200,112,.18), rgba(200,156,58,.12));
  border-color: rgba(245,200,112,.65);
  color: #f5e1b4;
  box-shadow:
    inset 0 0 0 1px rgba(245,200,112,.15),
    0 0 16px rgba(245,200,112,.18);
}
/* Caret del selector */
.ts-subnav-btn--selector .ts-subnav-caret {
  color: inherit;
  font-size: 9px;
  margin-left: 2px;
  -webkit-text-fill-color: currentColor;
}
@media (prefers-reduced-motion: reduce) {
  .ts-subnav-btn > .tsk-btn-top { transition: none; }
}

/* ── Subnav categorías (.tabs > .tab) v4: misma estética pero más
   pequeña, marca claramente la sub-subcategoría dentro de Por Posición */
#sec-tier .tabs,
.category-panel + .tabs,
.tabs[role="tablist"] {
  padding: 6px 10px 4px !important;
  gap: 6px !important;
  background: transparent !important;
  border: 0 !important;
}
.tab[role="tab"] {
  position: relative !important;
  display: inline-block !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  background-image: none !important;
  color: transparent !important;
}
.tab[role="tab"]::before { display: none !important; }
.tab[role="tab"] > .tsk-btn-top,
.tab-top {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid rgba(196,160,92,.20);
  border-radius: 8px;
  background: rgba(28,18,9,.30);
  color: rgba(232,216,176,.55);
  font-family: 'Cinzel', 'IM Fell DW Pica SC', Georgia, serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 11px 6px;
  text-shadow: none;
  white-space: nowrap;
  transform: translateY(0);
  transition: transform .18s ease, background .22s ease,
              border-color .22s ease, color .22s ease, box-shadow .22s ease;
  box-shadow: none;
}
@media (hover: hover) {
  .tab[role="tab"]:hover > .tsk-btn-top {
    transform: translateY(-3px);
    background: rgba(245,200,112,.10);
    border-color: rgba(245,200,112,.45);
    color: rgba(245,225,180,.92);
    box-shadow: 0 6px 14px rgba(0,0,0,.40);
  }
}
.tab[role="tab"]:active > .tsk-btn-top {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.tab[role="tab"].active > .tsk-btn-top,
.tab[role="tab"].tab--active > .tsk-btn-top {
  background: linear-gradient(180deg, rgba(245,200,112,.18), rgba(200,156,58,.12));
  border-color: rgba(245,200,112,.65);
  color: #f5e1b4;
  box-shadow:
    inset 0 0 0 1px rgba(245,200,112,.15),
    0 0 14px rgba(245,200,112,.18);
}
@media (prefers-reduced-motion: reduce) {
  .tab[role="tab"] > .tsk-btn-top { transition: none; }
}

/* ── sec-tier · subtabs 11 Top (Ideal/Realista/Chollos) v6 Voxybuns ── */
#sec-tier .top11-tabs {
  padding: 10px 12px 6px !important;
  gap: 6px !important;
  justify-content: flex-start !important;
  background: transparent !important;
}
.top11-tab {
  position: relative !important;
  display: inline-block !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 9px !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  cursor: pointer;
}
.top11-tab > .tsk-btn-top {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid rgba(196,160,92,.20);
  border-radius: 9px;
  background: rgba(28,18,9,.30);
  color: rgba(232,216,176,.55);
  font-family: 'Cinzel', 'IM Fell DW Pica SC', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 6px 13px 7px;
  text-shadow: none;
  white-space: nowrap;
  transform: translateY(0);
  transition: transform .18s ease, background .22s ease,
              border-color .22s ease, color .22s ease, box-shadow .22s ease;
  box-shadow: none;
}
/* Hover: profundidad (eleva + sombra) */
@media (hover: hover) {
  .top11-tab:hover > .tsk-btn-top {
    transform: translateY(-3px);
    color: rgba(245,225,180,.9);
    border-color: rgba(245,200,112,.40);
    box-shadow: 0 6px 14px rgba(0,0,0,.38);
  }
}
.top11-tab:active > .tsk-btn-top {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,.30);
}
/* Estado ACTIVO — acento limpio por tipo (oro / plata / esmeralda) */
.top11-tab[data-tab="once_ideal"].top11-tab--active > .tsk-btn-top {
  color: #f5c842;
  border-color: rgba(245,200,66,.60);
  background: rgba(245,200,66,.12);
  box-shadow: 0 0 14px rgba(245,200,66,.16);
}
.top11-tab[data-tab="once_realista"].top11-tab--active > .tsk-btn-top {
  color: #cbd5e1;
  border-color: rgba(203,213,225,.55);
  background: rgba(203,213,225,.10);
  box-shadow: 0 0 14px rgba(203,213,225,.14);
}
.top11-tab[data-tab="once_chollos"].top11-tab--active > .tsk-btn-top {
  color: #10b981;
  border-color: rgba(16,185,129,.60);
  background: rgba(16,185,129,.12);
  box-shadow: 0 0 14px rgba(16,185,129,.16);
}

/* ── ESCRITORIO · 3 onces verticales en el lateral del campo ──────────
   Mismo patrón que móvil: barra vertical pegada a la izquierda del campo,
   texto rotado leyendo de abajo-arriba (base hacia el campo). En escritorio
   los botones NO se envuelven en .tsk-btn-top (ver app.js), así que el texto
   va directo + ::before con data-short. */
@media (min-width: 601px) {
  #ts-panel-11top .top11-wrap {
    position: relative;
    padding-left: 46px;            /* hueco para la barra lateral */
    max-width: 540px;              /* centrado para que la barra quede pegada al campo */
    margin-left: auto;
    margin-right: auto;
  }
  #sec-tier #ts-panel-11top .top11-tabs {
    position: absolute !important;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40px !important;
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
    z-index: 6;
    justify-content: center !important;
    background: none !important;
    border-right: 1px solid var(--border, rgba(196,160,92,.28));
  }
  /* Doble id para vencer a `.top11-tab` (inicio-diagonal) */
  #sec-tier #ts-panel-11top .top11-tab {
    flex: 0 0 auto !important;
    width: 40px !important;
    min-height: 104px;
    padding: 16px 0 !important;
    background: none !important;
    border: 0 !important;
    border-right: 2px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
    line-height: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: rgba(232,216,176,.55) !important;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease;
  }
  @media (hover: hover) {
    #sec-tier #ts-panel-11top .top11-tab:hover {
      color: rgba(245,225,180,.9) !important;
    }
  }
  #sec-tier #ts-panel-11top .top11-tab[data-tab="once_ideal"].top11-tab--active    { color: #f5c842 !important; border-right-color: #f5c842 !important; }
  #sec-tier #ts-panel-11top .top11-tab[data-tab="once_realista"].top11-tab--active { color: #cbd5e1 !important; border-right-color: #cbd5e1 !important; }
  #sec-tier #ts-panel-11top .top11-tab[data-tab="once_chollos"].top11-tab--active  { color: #10b981 !important; border-right-color: #10b981 !important; }
  /* Texto vertical: vertical-rl + rotate(180deg) → base hacia el campo,
     leyendo de abajo-arriba (igual que en móvil). */
  #ts-panel-11top .top11-tab::before {
    content: attr(data-short);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-family: 'Cinzel', 'IM Fell DW Pica SC', serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1;
    color: inherit;
  }
}

#sec-tier .top11-jornada {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
  color: rgba(245,225,180,.5) !important;
  text-transform: uppercase !important;
  text-align: center;
  padding: 4px 0 6px;
}

/* ── sec-tier · tabs categorías (Porteros/Defensas/Medios/Delanteros) ─ */
#sec-tier .tabs {
  padding: 10px 14px 12px !important;
  gap: 6px !important;
}
/* El padre #sec-tier .tab es solo wrapper: el look limpio vive en
   .tsk-btn-top (definido arriba en .tab[role="tab"]). Anulamos cualquier
   degradado/borde heredado para que no quede "caja" por detrás. */
#sec-tier .tab {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  color: transparent !important;
}
#sec-tier .tab.active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ── sec-tier · tier-header + tier-badge ─────────────────────────── */
#sec-tier .tier {
  margin: 10px 12px !important;
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255,225,170,.04), transparent 30%, rgba(0,0,0,.2)),
    linear-gradient(165deg, #221408 0%, #140a04 100%);
  box-shadow:
    inset 0 0 0 0.5px rgba(196,160,92,.22),
    inset 0 1px 0 rgba(255,225,170,.06),
    0 2px 8px rgba(0,0,0,.4);
  overflow: hidden;
}
#sec-tier .tier-header {
  padding: 10px 14px !important;
  background:
    linear-gradient(180deg, rgba(40,24,12,.5) 0%, rgba(15,8,5,.7) 100%);
  border-bottom: 1px solid rgba(196,160,92,.18);
}
#sec-tier .tier-toggle-arrow {
  color: var(--pp-brass-glow);
}
#sec-tier .tier-badge {
  font-family: 'IM Fell DW Pica SC', 'Cinzel', serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: .18em !important;
  padding: 6px 14px !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, #e8c47a 0%, #b89244 40%, #8a6824 75%, #c4a05c 100%) !important;
  color: #1a0e05 !important;
  border: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 1px 3px rgba(0,0,0,.5) !important;
  text-shadow: 0 0.5px 0 rgba(255,255,255,.3);
}
/* Variantes de tier — colores específicos */
#sec-tier .tier-badge.top-star {
  background: linear-gradient(180deg, #ffe87a 0%, #c8920a 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 0 16px rgba(255,232,122,.4) !important;
}
#sec-tier .tier-badge.top-role {
  background: linear-gradient(180deg, #e8e0f0 0%, #888896 100%) !important;
  color: #1a0e2a !important;
}
#sec-tier .tier-badge.bufones {
  background: linear-gradient(180deg, #c8a06c 0%, #6e4824 100%) !important;
  color: #1a0e05 !important;
}
#sec-tier .tier-badge.cazon {
  background: linear-gradient(180deg, #d44a2a 0%, #6a1810 100%) !important;
  color: #ffe5d8 !important;
  text-shadow: 0 -0.5px 0 rgba(0,0,0,.5) !important;
}
#sec-tier .tier-body {
  padding: 10px 8px;
}

/* ── sec-tier · player cards (re-estilo sobre el render existente) ── */
#sec-tier .player-card {
  background:
    linear-gradient(180deg, rgba(255,225,170,.05) 0%, transparent 25%, rgba(0,0,0,.3) 100%),
    linear-gradient(165deg, #1a0c06 0%, #0a0604 100%) !important;
  border: 0.5px solid rgba(196,160,92,.22) !important;
  border-radius: 4px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,225,170,.06),
    0 2px 4px rgba(0,0,0,.4) !important;
}
#sec-tier .top-star .player-card {
  border-color: rgba(240,200,112,.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,225,170,.1),
    0 0 10px rgba(240,200,112,.18),
    0 2px 4px rgba(0,0,0,.5) !important;
}
#sec-tier .player-name {
  font-family: 'IM Fell DW Pica SC', 'Cinzel', serif !important;
  font-size: 9px !important;
  letter-spacing: .03em !important;
  color: var(--pp-parchment, #e8d8b0) !important;
}
#sec-tier .player-exp-badge {
  background: linear-gradient(180deg, #e8c47a 0%, #a07a2a 100%) !important;
  color: #1a0e05 !important;
  border: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 600 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.6) !important;
}

/* ── sec-tier · Once IDEAL/REALISTA/CHOLLOS pitch (badges + scores) ── */
#sec-tier .top11-formacion-badge {
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: .14em !important;
  color: var(--pp-brass-glow, #f0c870) !important;
}

/* ════════════════════════════════════════════════════════════════
   SEC-JORNADA · La Liga (Resultados + Clasificación)
   ════════════════════════════════════════════════════════════════ */

/* Header de jornada con flechas */
#sec-jornada .resultados-header {
  background:
    linear-gradient(180deg, rgba(40,24,12,.55), rgba(15,8,5,.85));
  border-radius: 4px;
  margin: 12px 14px 8px;
  padding: 8px 12px;
  border: 0.5px solid rgba(196,160,92,.28);
  box-shadow: inset 0 1px 0 rgba(255,225,170,.07), 0 1px 3px rgba(0,0,0,.4);
}
#sec-jornada .resultados-jornada {
  font-family: 'IM Fell DW Pica SC', 'Cinzel', serif !important;
  font-size: 14px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--pp-brass-glow, #f0c870) !important;
  text-shadow: 0 0 10px rgba(240,200,112,.4) !important;
}
#sec-jornada .res-nav-btn {
  background: transparent !important;
  border: 0.5px solid rgba(196,160,92,.35) !important;
  color: var(--pp-brass, #c4a05c) !important;
  border-radius: 50% !important;
  width: 28px !important; height: 28px !important;
  transition: color .25s, border-color .25s, box-shadow .25s !important;
}
#sec-jornada .res-nav-btn:not(:disabled):hover {
  color: var(--pp-brass-glow, #f0c870) !important;
  border-color: var(--pp-brass-glow, #f0c870) !important;
  box-shadow: 0 0 10px rgba(240,200,112,.35) !important;
}
#sec-jornada .resultados-refresh {
  color: var(--pp-brass, #c4a05c) !important;
}
#sec-jornada .resultados-refresh:hover {
  color: var(--pp-brass-glow, #f0c870) !important;
}
#sec-jornada .res-live-indicator {
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--pp-live-glow, #ff7245) !important;
  font-size: 9px !important;
}

/* Cards de partido — placa de madera con borde latón */
#sec-jornada .res-card {
  background:
    linear-gradient(180deg, rgba(255,225,170,.05) 0%, transparent 25%, rgba(0,0,0,.25) 100%),
    linear-gradient(165deg, #221408 0%, #140a04 100%) !important;
  border: 0.5px solid rgba(196,160,92,.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,225,170,.07),
    0 3px 8px rgba(0,0,0,.5) !important;
  border-radius: 5px !important;
}
#sec-jornada .res-card::before {
  background: linear-gradient(135deg, rgba(240,200,112,.08) 0%, transparent 55%) !important;
}
#sec-jornada .res-card:hover {
  border-color: var(--pp-brass-glow, #f0c870) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,225,170,.12),
    0 0 16px rgba(240,200,112,.25),
    0 4px 10px rgba(0,0,0,.55) !important;
}
#sec-jornada .res-card--live {
  border-color: rgba(212, 74, 42, .55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,225,170,.1),
    0 0 14px rgba(212,74,42,.25),
    0 3px 8px rgba(0,0,0,.5) !important;
}
#sec-jornada .res-name {
  font-family: 'IM Fell DW Pica SC', 'Cinzel', serif !important;
  letter-spacing: .04em !important;
  color: var(--pp-cream, #f6ead0) !important;
}
#sec-jornada .res-score {
  font-family: 'IM Fell DW Pica SC', 'Cinzel', serif !important;
  color: var(--pp-brass-glow, #f0c870) !important;
  text-shadow: 0 0 8px rgba(240,200,112,.35) !important;
}
#sec-jornada .res-score--pending {
  color: rgba(245,225,180,.7) !important;
  text-shadow: none !important;
}
#sec-jornada .res-time {
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-size: 9px !important;
}
#sec-jornada .res-time--done {
  color: rgba(245,225,180,.55) !important;
}
#sec-jornada .res-time--live {
  color: var(--pp-live-glow, #ff7245) !important;
}
#sec-jornada .res-time--ali {
  color: var(--pp-brass-glow, #f0c870) !important;
}
#sec-jornada .res-time--locked {
  color: rgba(196,160,92,.5) !important;
}
#sec-jornada .res-card--locked {
  opacity: .55 !important;
}

/* ── sec-jornada · Clasificación · tabla parchment ─────────────── */
#sec-jornada .clasificacion-section {
  padding: 8px 12px 18px !important;
}
#sec-jornada .clasificacion-label {
  font-family: 'IM Fell DW Pica SC', 'Cinzel', serif !important;
  letter-spacing: .14em !important;
  color: var(--pp-brass-glow, #f0c870) !important;
  text-transform: uppercase !important;
}
#sec-jornada .clasificacion-wrap {
  background:
    linear-gradient(180deg, rgba(255,225,170,.04), transparent 30%, rgba(0,0,0,.2)),
    linear-gradient(165deg, #221408 0%, #140a04 100%);
  border: 0.5px solid rgba(196,160,92,.25);
  box-shadow:
    inset 0 1px 0 rgba(255,225,170,.07),
    0 3px 10px rgba(0,0,0,.45);
  border-radius: 6px;
  overflow: hidden;
}
#sec-jornada .clasificacion-table thead th {
  background: linear-gradient(180deg, rgba(40,24,12,.7), rgba(15,8,5,.95)) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  color: var(--pp-brass-glow, #f0c870) !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(196,160,92,.35) !important;
  padding: 8px 6px !important;
}
#sec-jornada .clasificacion-table tbody td {
  font-family: 'IM Fell DW Pica SC', 'Cinzel', serif !important;
  color: var(--pp-parchment, #e8d8b0) !important;
  letter-spacing: .02em !important;
  padding: 7px 6px !important;
  border-color: rgba(196,160,92,.12) !important;
}
#sec-jornada .clasificacion-table tbody tr:hover {
  background: rgba(196,160,92,.08) !important;
}
#sec-jornada .clasificacion-table .clas-pos {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 600 !important;
  color: var(--pp-brass-glow, #f0c870) !important;
}

/* ════════════════════════════════════════════════════════════════
   SEC-FICHAJES · rebrand tavern (título, search, chips, cards)
   ════════════════════════════════════════════════════════════════ */
#sec-fichajes .fichajes-title,
#sec-fichajes .fichajes-header h2,
#sec-fichajes .fichajes-header h1 {
  font-family: 'IM Fell DW Pica SC', 'Cinzel', Georgia, serif !important;
  letter-spacing: .14em !important;
  color: #f0c870 !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.55),
    0 0 10px rgba(240,200,112,.45) !important;
}
#sec-fichajes .fichajes-filter-input,
#sec-fichajes #fichajes-filter-input {
  background: linear-gradient(180deg, rgba(40,24,12,.55), rgba(15,8,5,.7)) !important;
  border: 1px solid rgba(196,160,92,.35) !important;
  font-family: 'IM Fell English', Georgia, serif !important;
  color: #f6ead0 !important;
}
#sec-fichajes .fichajes-filter-input:focus,
#sec-fichajes #fichajes-filter-input:focus {
  border-color: #f0c870 !important;
  box-shadow: 0 0 12px rgba(240,200,112,.3) !important;
}
#sec-fichajes .fichajes-filter-chip {
  background: linear-gradient(180deg, rgba(40,24,12,.55), rgba(15,8,5,.85)) !important;
  border: 0.5px solid rgba(196,160,92,.35) !important;
  font-family: 'IM Fell DW Pica SC', 'Cinzel', serif !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  color: rgba(232,216,176,.7) !important;
}
#sec-fichajes .fichajes-filter-chip.is-active,
#sec-fichajes .fichajes-filter-chip--active {
  background: linear-gradient(180deg, #e8c47a 0%, #b89244 40%, #8a6824 75%, #c4a05c 100%) !important;
  color: #1a0e05 !important;
  border-color: #f0c870 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 0 12px rgba(240,200,112,.35) !important;
  text-shadow: 0 0.5px 0 rgba(255,255,255,.3) !important;
}
#sec-fichajes .fichaje-card {
  background:
    linear-gradient(180deg, rgba(255,225,170,.04) 0%, transparent 22%, rgba(0,0,0,.18) 100%),
    linear-gradient(165deg, #221408 0%, #140a04 100%) !important;
  box-shadow:
    inset 0 0 0 0.5px rgba(196,160,92,.25),
    inset 0 1px 0 rgba(255,225,170,.08),
    0 4px 12px rgba(0,0,0,.5) !important;
}
#sec-fichajes .fichaje-card-name {
  font-family: 'IM Fell DW Pica SC', 'Cinzel', serif !important;
  color: #f6ead0 !important;
  letter-spacing: .04em !important;
}
#sec-fichajes .fichaje-card-tag--rumor {
  background: rgba(212, 74, 42, .25) !important;
  border: 0.5px solid rgba(212, 74, 42, .55) !important;
  color: #ffae90 !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
#sec-fichajes .fichaje-card-tag--fichaje {
  background: linear-gradient(180deg, #e8c47a 0%, #b89244 40%, #8a6824 75%, #c4a05c 100%) !important;
  color: #1a0e05 !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(0,0,0,.4) !important;
}

/* ════════════════════════════════════════════════════════════════
   FICHAJE MODAL · cada párrafo de la noticia en una card-papel
   ════════════════════════════════════════════════════════════════ */
.fichaje-card-body-text--cards {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
}
.fichaje-news-card {
  position: relative;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,235,180,.35), transparent 60%),
    linear-gradient(165deg, #f8f1e0 0%, #ede0bc 100%);
  color: #2c1d10;
  font-family: 'IM Fell English', 'IM Fell DW Pica', Georgia, serif;
  font-size: 14px;
  line-height: 1.55;
  padding: 14px 16px 16px;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 0.5px rgba(0,0,0,.12),
    inset 0 -4px 10px rgba(0,0,0,.06),
    0 2px 6px rgba(0,0,0,.45),
    0 8px 16px rgba(0,0,0,.25);
  /* Sutil rotación alternada */
  transform: rotate(calc(var(--i, 0) * 0.18deg - 0.2deg));
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.fichaje-news-card:nth-child(even) {
  background:
    radial-gradient(circle at 20% 10%, rgba(255,225,200,.35), transparent 60%),
    linear-gradient(165deg, #f5e9c6 0%, #e6d09a 100%);
  transform: rotate(calc(var(--i, 0) * -0.15deg + 0.3deg));
}
.fichaje-news-card:nth-child(3n) {
  background:
    radial-gradient(circle at 20% 10%, rgba(255,235,180,.30), transparent 60%),
    linear-gradient(165deg, #faf3df 0%, #ead9a4 100%);
}
.fichaje-news-card:hover {
  transform: rotate(0deg) translateY(-1px);
  box-shadow:
    inset 0 0 0 0.5px rgba(0,0,0,.15),
    inset 0 -4px 10px rgba(0,0,0,.06),
    0 4px 10px rgba(0,0,0,.55),
    0 10px 22px rgba(0,0,0,.3);
}
/* Esquina doblada */
.fichaje-news-card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 14px; height: 14px;
  background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,.16) 50%);
  border-bottom-right-radius: 3px;
  pointer-events: none;
}
.fichaje-news-card p,
.fichaje-news-card div { margin: 0 0 8px 0; }
.fichaje-news-card p:last-child,
.fichaje-news-card div:last-child { margin-bottom: 0; }
.fichaje-news-card a {
  color: #7a2a1f;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(122,42,31,.5);
  text-underline-offset: 2px;
}
.fichaje-news-card a:hover { color: #b03525; }
.fichaje-news-card strong, .fichaje-news-card b {
  color: #5e2418;
  font-weight: 600;
}
.fichaje-news-card em, .fichaje-news-card i { font-style: italic; }

/* ════════════════════════════════════════════════════════════════
   GLOBAL · REBRAND TAVERNA (header + sidebar-bookmark + nav)
   Aplicado globalmente fuera de sec-inicio. En sec-inicio el header
   se oculta y la nav inferior usa la misma estética.
   ════════════════════════════════════════════════════════════════ */

/* ── Header global: PUTAS PICAS con IM Fell + latón ─────────────── */
#fantasia-logo .fantas-l {
  font-family: 'IM Fell DW Pica SC', 'Cinzel', Georgia, serif !important;
  letter-spacing: .08em !important;
  color: #f0c870 !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.6),
    0 0 10px rgba(240,200,112,.55),
    0 0 22px rgba(240,200,112,.25) !important;
}
.header-sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
  color: rgba(245,225,180,.65) !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
}

/* ── Sidebar-bookmark: pestañita latón ──────────────────────────── */
.sidebar-bookmark {
  background: linear-gradient(180deg, #e8c47a 0%, #b89244 40%, #8a6824 75%, #c4a05c 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 2px 6px rgba(0,0,0,.6),
    0 0 12px rgba(240,200,112,.25) !important;
  border-radius: 0 6px 6px 0 !important;
}
.sidebar-bookmark-logo {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)) brightness(.15) !important;
}

/* ── Nav inferior · reestilizada con latón + spades ───────────────── */
@media (max-width: 600px) {
  .section-nav {
    background: linear-gradient(180deg, rgba(40,24,12,.85), rgba(15,8,5,.96)) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    box-shadow:
      inset 0 0 0 0.5px rgba(196,160,92,.35),
      inset 0 1px 0 rgba(255,225,170,.10),
      0 -2px 12px rgba(0,0,0,.6) !important;
    border-top: 1px solid rgba(196,160,92,.4) !important;
    padding: 6px 8px env(safe-area-inset-bottom, 0px) !important;
  }
  .section-nav-btn {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: rgba(232,216,176,.55) !important;
    font-family: 'IM Fell DW Pica SC', 'Cinzel', Georgia, serif !important;
    min-height: 38px !important;
  }
  .section-nav-btn .sn-label {
    font-family: 'IM Fell DW Pica SC', 'Cinzel', Georgia, serif !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
  }
  .section-nav-btn.sn-active {
    color: #f0c870 !important;
  }
  .section-nav-btn.sn-active .sn-label {
    color: #f0c870 !important;
    text-shadow: 0 0 8px rgba(240,200,112,.55) !important;
  }
  /* Underline latón con glow */
  .section-nav-btn::after {
    bottom: 2px !important;
    left: 25% !important; right: 25% !important;
    height: 2px !important;
    background: linear-gradient(90deg,
      rgba(240,200,112,0) 0%,
      rgba(240,200,112,.85) 18%,
      #f0c870 50%,
      rgba(240,200,112,.85) 82%,
      rgba(240,200,112,0) 100%) !important;
    box-shadow: 0 0 6px rgba(240,200,112,.55), 0 0 12px rgba(240,200,112,.3) !important;
    transition: opacity .35s cubic-bezier(.4,1.5,.5,1) !important;
  }
  /* Spade pequeño encima del texto en activos */
  .section-nav-btn::before {
    content: '\2660' !important;
    background: none !important;
    position: absolute !important;
    top: 4px !important; left: 50% !important; right: auto !important;
    transform: translateX(-50%) !important;
    font-size: 9px !important;
    height: auto !important;
    color: rgba(232,216,176,.35) !important;
    opacity: 1 !important;
    transition: color .25s, text-shadow .25s, transform .25s !important;
  }
  .section-nav-btn.sn-active::before {
    color: #f0c870 !important;
    text-shadow: 0 0 8px rgba(240,200,112,.7) !important;
    animation: pp-nav-bob 2.4s ease-in-out infinite !important;
  }
  @keyframes pp-nav-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-1.5px); }
  }
  /* Hacer hueco para el spade + label sin solapar */
  .section-nav-btn { padding-top: 13px !important; }
}

/* Carrusel v3: ver `.lineup-club-wrap` en styles.css (escudo XL + chip glass) */

/* ═══════════════════════════════════════════════════════════════
   AJUSTES UI INICIO — madera uniforme, hero modo card, pos-chip mini
   ═══════════════════════════════════════════════════════════════ */

/* Strip TRANSPARENTE: deja ver la madera del body (fixed, 360px) tal cual, así
   el área del slideshow es indistinguible del fondo alrededor (sin costuras).
   min-height: evita que el strip colapse a 0 mientras los escudos cargan
   por JS (los chips son dinámicos: salen de alineaciones). */
body.pp-on-inicio .pp-team-strip {
  /* Opaco: antes era transparent y, al estar el strip anclado (sticky) arriba,
     las cards se veían A TRAVÉS de él al hacer scroll (parecía que se metían
     debajo del slideshow). Con fondo de madera opaco las cards se cortan
     limpias justo debajo del carrusel de escudos. */
  /* MISMA madera que el body/header, FIJADA al viewport (igual que la regla
     body.pp-on-inicio en styles.css). Así el slideshow es opaco —tapa las
     cards al scrollear— pero sin costura de color con el header, que es
     transparente sobre esa misma madera. */
  background-image:
    linear-gradient(180deg, rgba(255,230,180,.05) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,.28) 100%),
    url('../assets/inicio/wood-pub-table.webp') !important;
  background-size: 100% 100%, 360px auto !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, repeat !important;
  background-color: #1a0e08 !important;
  background-attachment: fixed, fixed !important;
  min-height: 62px;
}

/* Slideshow ANCLADO arriba en móvil al hacer scroll vertical. Sigue siendo
   transparente — la madera del body queda continua, sin costura visible. */
@media (max-width: 600px) {
  body.pp-on-inicio .pp-team-strip {
    position: sticky;
    top: 0;
    z-index: 6;
  }
  /* Hero y cards explícitamente DEBAJO del strip anclado (sin esto, en algunos
     navegadores móviles —notablemente Firefox— el hero puede aparecer por
     encima del strip al hacer scroll y "tapar el slideshow"). */
  body.pp-on-inicio #sec-inicio .pp-hero,
  body.pp-on-inicio .pp-diag-stack { z-index: 1; position: relative; }
  /* Sin sombra bajo el slideshow: la madera (fija) del strip y la del body son
     la misma textura continua, así no se ve ningún corte header→slideshow→cards. */
  body.pp-on-inicio .pp-team-strip::after { display: none; }
  /* Fix Firefox móvil: la última card no llega hasta el borde de la nav,
     dejando una franja de madera visible. Fuerzo el stack a ocupar todo el
     alto disponible y normalizo el padding-bottom. */
  body.pp-on-inicio .pp-diag-home { height: 100%; }
  body.pp-on-inicio .pp-diag-stack {
    flex: 1 1 0%;
    min-height: 0;
    /* Sin respiro inferior: la última card llega justo a la línea de la nav
       bar (el alto de #main-content ya descuenta nav 44px + safe-area). */
    padding-bottom: 0;
  }
}

/* 2) Indicador de posición en la clasificación: mucho más pequeño en el
      carrusel del hub (no afecta a Alineaciones). */
.pp-team-strip .lineup-club-pos-chip {
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  font-size: 7px;
  top: -3px;
  right: -3px;
}

/* 3) Hero en "modo card": mismos márgenes laterales que las cards de abajo
      (12px, vía .pp-diag-stack) + mismo radio y sombra. Solo en los laterales,
      por eso al insetarlo desaparece el corte a pantalla completa que había
      justo encima de las cards (4). */
body.pp-on-inicio .pp-hero {
  width: calc(100% - 24px);   /* mismo ancho que las cards (.pp-diag-stack: padding 12px) */
  margin-left: auto;
  margin-right: auto;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 0.5px rgba(196,160,92,.18),
    inset 0 0 0 1px rgba(0,0,0,.4),
    0 4px 12px rgba(0,0,0,.55);
}

/* ── Entrada suave del inicio ─────────────────────────────────────────
   Aparición escalonada de strip → hero → cards. Suaviza el primer pintado
   y enmascara el cambio de modo del hero (jornada/fichajes/topstars) que
   ocurre al cargar los datos (lo que se veía "raro" al abrir).
   Las CARDS animan solo opacidad (no transform) para no pisar el scale del
   :active. Hero y strip sí hacen fade + slide. */
@media (prefers-reduced-motion: no-preference) {
  body.pp-on-inicio #sec-inicio .pp-hero {
    animation: pp-inicio-rise .55s cubic-bezier(.2,.7,.3,1) both;
  }
  /* Strip solo fade: lleva position:sticky y un transform rompería el anclado. */
  body.pp-on-inicio .pp-team-strip,
  body.pp-on-inicio .pp-diag-card {
    animation: pp-inicio-fade .55s ease both;
  }
  body.pp-on-inicio .pp-team-strip       { animation-delay: .04s; }
  body.pp-on-inicio #sec-inicio .pp-hero { animation-delay: .12s; }
  body.pp-on-inicio .pp-diag-card:nth-child(1) { animation-delay: .20s; }
  body.pp-on-inicio .pp-diag-card:nth-child(2) { animation-delay: .27s; }
  body.pp-on-inicio .pp-diag-card:nth-child(3) { animation-delay: .34s; }
  body.pp-on-inicio .pp-diag-card:nth-child(4) { animation-delay: .41s; }
}
@keyframes pp-inicio-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pp-inicio-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Hero "pendiente": oculta TODOS los hijos del hero (bg + overlay + vignette +
   content) hasta que _applyHubMode decide el modo. Sin el modificador, el bg
   muestra mud-stadium (la imagen de jornada) → si solo ocultáramos el texto, la
   IMAGEN de jornada se vería al cargar. opacity (no display) → sin reflow. */
.pp-hero--pending > * { opacity: 0; }

/* Reveal suave del hero al fijar el modo (_applyHubMode añade .pp-hero--swap
   una sola vez, gracias al guard _firstReveal). Anima todos los hijos: el bg
   con la nueva imagen ya cargada (loop-fichajes/topstars) y el contenido. */
@media (prefers-reduced-motion: no-preference) {
  .pp-hero.pp-hero--swap > * {
    animation: pp-hero-swap .4s ease both;
  }
}
@keyframes pp-hero-swap {
  from { opacity: 0; }
  to   { opacity: 1; }
}