/* Krown Series — estilos propios sobre tokens.css (copia de World, mismo
   lenguaje visual). No redefine colores, solo layout/componentes de Series. */

*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body{
  background:var(--bg-dark);
  color:var(--text-1);
  font-family:var(--font-body);
  padding-top:calc(var(--eco-h, 64px) + var(--promo-bar-h, 0px) + var(--match-bar-h, 0px)); /* offset del eco-header fijo + banner promocional y/o de partido pendiente si están activos. var(--eco-h) y NO un 48 literal: el header compartido paso a 64px y este numero se quedo atras, dejando 16px de menos en todas las paginas. */
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Mismo diseño de scrollbar que Krown Netline/ID (y World/Esports) */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-mid);border-radius:999px;border:2px solid var(--bg-base)}
::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}

.container{
  width:100%;
  max-width:calc(1320px + var(--sp-4) * 2);
  margin:0 auto;
  padding:0 var(--sp-4);
}

/* ── Hero (portada) — mismas clases/valores que World ────────────────────── */

.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--sp-12) + 60px) var(--sp-4) var(--sp-12);
  background: #0A0A0A;
  isolation: isolate;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 75%,
    rgba(155, 17, 30, 0.18) 0%,
    transparent 55%);
  transform-origin: 50% 75%;
  opacity: 0;
  transform: scale(0.85);
  animation: hero-glow-in 2.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes hero-glow-in {
  to { opacity: 1; transform: scale(1); }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; opacity: 1; }
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  max-width: 560px;
  margin: 0 auto;
}

.hero__eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-red);
}

.hero__heading {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 11vw, 7.5rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 0.9;
  color: var(--text-1);
  text-transform: uppercase;
  max-width: 6ch;
  text-wrap: balance;
}

.hero__sub {
  font-size: clamp(0.9375rem, 1.8vw, 1.0625rem);
  font-weight: 400;
  color: var(--text-2);
  line-height: 1.7;
  max-width: 440px;
  margin-top: 4px;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: 8px;
}

/* Hero de home: mismo .hero compartido que World, pero altura de contenido
   en vez de 100vh — debajo hay contenido real desde el primer scroll (Juega
   con nosotros, Noticias), igual criterio que esports/rewards. */
.hero { min-height: 0; }

/* El padding-top de World incluye +60px para compensar un site-header propio
   que ya no existe (todas las apps usan el eco-header compartido) - mismo
   criterio que esports/rewards. */
.hero { padding-top: var(--sp-12); }

/* Partners: banda propia al final de la pagina (lib/web-partials/hero-partners.php
   con $_partnersBanda = true, ver portada.php) - mismo criterio que
   World/Esports: dentro del hero, sobre su fondo oscuro, se leia negro sobre
   negro. Mismas clases/valores que World. */
.patrocinadores {
  border-top: 1px solid var(--border);
  background: var(--bg-dark);
  padding: var(--sp-8) var(--sp-4);
}

.patrocinadores__in {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.patrocinadores__l {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}

.patrocinadores .hero__partners-logo { height: 40px; }

.hero__partners-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  max-width: 1320px;
}

.hero__partners-item {
  display: inline-flex;
  align-items: center;
}

.hero__partners-logo {
  width: auto;
  height: 36px;
  opacity: 0.75;
  filter: grayscale(0.2);
  transition: opacity var(--t-base), filter var(--t-base);
  display: block;
}

.hero__partners-logo:hover {
  opacity: 1;
  filter: grayscale(0);
}

@media (max-width: 480px) {
  .hero__partners-list { gap: var(--sp-3); }
  .hero__partners-logo { height: 28px; }
}

/* .section--error (404) centra su contenido con align-items:center: restar
   del padding-top (como en .form-banner) desequilibra el centrado porque
   solo la MITAD de ese padding cuenta para el centrado, no el total — el
   resultado queda mas abajo que en World. Se neutraliza el offset en el
   body directamente en 404.php (body.body--error{padding-top:0}) en vez de
   tocar aqui el padding-top/bottom original de World. */

/* Mismo doble offset en .form-banner (calendario/equipos/reglamento/torneos):
   su padding-top de World (calc(var(--sp-12) + 60px)) ya compensa un header
   fijo; el body{padding-top:var(--eco-h)} de arriba lo compensa otra vez. */
.form-banner{padding-top:calc(var(--sp-12) + 60px - var(--eco-h, 64px))}

/* ── Juega con nosotros (cards) ───────────────────────────────────────── */

.howto-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:var(--sp-3);
}
.howto-card{
  background:var(--bg-card);
  border:1px solid var(--border-mid);
  border-radius:var(--radius-card);
  padding:var(--sp-4);
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  transition:border-color var(--t-base);
}
.howto-card:hover{border-color:var(--border-hover)}
.howto-card__icon{
  width:44px;height:44px;border-radius:10px;
  background:var(--accent-red);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.howto-card__title{font-family:var(--font-display);font-weight:800;font-size:1.05rem}
.howto-card__text{color:var(--text-2);font-size:.875rem;line-height:1.55;flex:1}
.howto-card__link{font-size:.875rem;font-weight:600;color:var(--text-1);margin-top:4px}
.howto-card__link:hover{color:var(--accent-red)}

/* ── Testimonios (portada) ────────────────────────────────────────────── */

.testi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:var(--sp-3);
}
.testi-card{
  background:var(--bg-card);
  border:1px solid var(--border-mid);
  border-radius:var(--radius-card);
  padding:var(--sp-4);
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
.testi-card__quote{color:var(--text-2);font-size:.9375rem;line-height:1.6;flex:1}
.testi-card__author{display:flex;flex-direction:column;gap:2px}
.testi-card__name{font-family:var(--font-display);font-weight:700;font-size:.875rem;color:var(--text-1)}
.testi-card__role{font-size:.8125rem;color:var(--text-3)}
.testi-card__stars{color:#F2B84B;font-size:.8125rem;letter-spacing:2px;margin-top:2px}

.testi-carousel{position:relative}
.testi-carousel.has-nav{padding-right:44px}
.testi-carousel.has-nav .testi-grid{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:4px;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.testi-carousel.has-nav .testi-grid::-webkit-scrollbar{display:none}
.testi-carousel.has-nav .testi-card{flex:0 0 auto;width:min(320px, 78vw);scroll-snap-align:start}
.testi-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;
  background:var(--bg-card);border:1px solid var(--border-mid);color:var(--text-1);
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;
  transition:background .15s,border-color .15s;
}
.testi-arrow:hover{border-color:var(--accent-red);color:var(--accent-red)}
.testi-arrow--next{right:0}
.testi-arrow--next svg{animation:testi-nudge-right 1.6s ease-in-out infinite}
@keyframes testi-nudge-right{0%,100%{transform:translateX(0)}50%{transform:translateX(2.5px)}}
@media (prefers-reduced-motion: reduce){
  .testi-arrow svg{animation:none}
  .testi-carousel.has-nav .testi-grid{scroll-behavior:auto}
}
@media (max-width:640px){
  .testi-carousel.has-nav{padding-right:0}
  .testi-arrow{display:none}
}

/* ── Sección genérica de página ───────────────────────────────────────── */

.series-section{padding:var(--sp-10) 0}
/* Secciones de la home (Juega con nosotros, Noticias): mismo ritmo vertical
   que World/Esports (.section{padding:var(--sp-10) 0}). */
.series-section--home{padding:var(--sp-10) 0}
.series-section__heading{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.5rem,3vw,2.2rem);
  letter-spacing:-0.01em;
  margin-bottom:var(--sp-1);
}
.series-section__sub{color:var(--text-3);font-size:.9375rem;margin-bottom:var(--sp-6)}

/* .section__title/.section__heading: mismas clases y valores que World, para
   secciones compartidas entre webs (ej. Noticias) que deben verse idénticas
   en todo el ecosistema, no solo dentro de esta app. */
.section__title{font-family:var(--font-display);font-size:clamp(.6875rem,1vw,.75rem);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-red);margin-bottom:var(--sp-2)}
.section__heading{font-family:var(--font-display);font-size:clamp(1.75rem,4vw,2.5rem);font-weight:800;letter-spacing:-0.01em;color:var(--text-1);margin-bottom:var(--sp-8);line-height:1.1}

/* .btn-primary/.btn-secondary: mismas clases y valores que World (no
   definidas antes aquí - páginas que usan estas clases dependían de cargar
   también main.css de World para no salir sin estilo). */
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:var(--accent-red);color:#fff;font-family:var(--font-body);font-size:.875rem;font-weight:700;border:1px solid var(--accent-red);border-radius:var(--radius-btn);transition:background var(--t-base),border-color var(--t-base)}
.btn-primary:hover{background:var(--accent-red-hover);border-color:var(--accent-red-hover)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.btn-primary:disabled:hover{background:var(--accent-red);border-color:var(--accent-red)}
.btn-primary:focus-visible,.btn-secondary:focus-visible{outline:2px solid var(--text-1);outline-offset:3px;border-radius:var(--radius-btn)}
.btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:transparent;color:var(--text-1);font-family:var(--font-body);font-size:.875rem;font-weight:600;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-btn);backdrop-filter:blur(4px);transition:background var(--t-base),border-color var(--t-base)}
.btn-secondary:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28)}

/* ── Formularios ───────────────────────────────────────────────────────── */

.series-form{
  background:var(--bg-card);
  border:1px solid var(--border-mid);
  border-radius:var(--radius-card);
  padding:var(--sp-4);
  max-width:420px;
}
.series-form__title{font-family:var(--font-display);font-weight:700;font-size:1.05rem;margin-bottom:var(--sp-3)}
.series-field{margin-bottom:var(--sp-3)}
.series-field label{
  display:block;font-size:.8125rem;font-weight:600;color:var(--text-2);margin-bottom:6px;
}
.series-field input,.series-field select,.series-field textarea{
  width:100%;
  background:var(--bg-dark);
  border:1px solid var(--border-mid);
  border-radius:var(--radius-btn);
  padding:10px 12px;
  color:var(--text-1);
  font-family:var(--font-body);
  font-size:.9375rem;
  resize:vertical;
}
.series-field input:focus,.series-field select:focus,.series-field textarea:focus{
  outline:none;border-color:var(--border-hover);
}
.series-field__hint{font-size:.75rem;color:var(--text-3);margin-top:4px}
.series-field__count{font-size:.75rem;color:var(--text-3);text-align:right;margin-top:4px}
.series-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;
  padding:12px 20px;
  background:var(--accent-red);color:#fff;
  border:none;border-radius:var(--radius-btn);
  font-family:var(--font-display);font-weight:700;font-size:.9375rem;
  cursor:pointer;transition:background var(--t-base);
}
.series-btn:hover{background:var(--accent-red-hover)}
.series-btn:disabled{opacity:.45;cursor:not-allowed}
.series-btn:disabled:hover{background:var(--accent-red)}
.series-req{color:var(--accent-red);margin-left:2px}

/* ── Crear equipo: logo circular + ajustar (mismo mecanismo de crop del
   formulario de torneo en Netline, adaptado a un solo circulo sin banner) ── */
.team-logo-field{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:var(--sp-3)}
/* Wrap sin overflow:hidden -- los botones de accion (ajustar/quitar) van aqui
   como hermanos del circulo recortado, no dentro de el, si no la mascara
   circular + overflow:hidden del picker los corta a la mitad en las esquinas. */
.team-logo-wrap{position:relative;width:84px;height:84px;flex-shrink:0}
.team-logo-picker{
  position:absolute;inset:0;border-radius:50%;
  background:var(--bg-dark);border:1px solid var(--border-mid);overflow:hidden;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.team-logo-picker img{width:100%;height:100%;object-fit:cover;display:block}
.team-logo-picker__placeholder{color:var(--text-3);display:flex}
.team-logo-picker__hint{
  position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);color:#fff;font-size:.65rem;font-weight:600;text-align:center;
  opacity:0;transition:opacity var(--t-fast);
}
.team-logo-picker:hover .team-logo-picker__hint{opacity:1}
.team-logo-picker__reposition,.team-logo-picker__remove{
  position:absolute;width:24px;height:24px;border-radius:50%;padding:0;
  border:2px solid var(--bg-card);cursor:pointer;transition:background var(--t-base);
  display:flex;align-items:center;justify-content:center;
}
.team-logo-picker__reposition{bottom:0;right:0;background:var(--accent-red);color:#fff}
.team-logo-picker__reposition:hover{background:var(--accent-red-hover)}
.team-logo-picker__remove{top:0;right:0;background:var(--bg-card-alt);color:var(--text-2)}
.team-logo-picker__remove:hover{background:oklch(0.42 0.18 23 / .3);color:oklch(0.7 0.12 23)}
.torneo-nav{display:flex;gap:var(--sp-4);margin-top:var(--sp-6);border-bottom:1px solid var(--border-mid);position:relative}
.torneo-nav__link{
  font-family:var(--font-display);font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--text-3);padding:0 0 12px;border-bottom:2px solid transparent;transition:color var(--t-base);
}
.torneo-nav__link:hover{color:var(--text-1)}
.torneo-nav__link--active{color:var(--text-1);border-bottom-color:var(--accent-red)}
/* Linea deslizante que sustituye el border-bottom estatico en cuanto el JS
   arranca (mismo patron que .proj-tab-slider en netline): sin JS, el borde
   de arriba ya marca la pestaña activa - con JS, esta barra se anima entre
   posiciones y el borde se apaga para no duplicar la linea. */
.torneo-nav__slider{position:absolute;bottom:-1px;left:0;width:0;height:2px;background:var(--accent-red);border-radius:1px;pointer-events:none;opacity:0;transition:left 280ms ease-out,width 280ms ease-out,opacity 180ms ease}
.torneo-nav.slider-ready .torneo-nav__link--active{border-bottom-color:transparent}
/* ── Bracket ──────────────────────────────────────────────────────────────
   Una columna por ronda. Las celdas usan flex:1 sobre la MISMA altura de
   columna, asi que un partido de la ronda N+1 cae solo en el punto medio
   exacto de sus dos alimentadores (sin JS ni alturas calculadas a mano).
   Conectores como pseudo-elementos: stub saliente (::after de la celda),
   union vertical de la pareja (::before de la celda, media altura arriba o
   abajo segun par/impar) y stub entrante (::before de la tarjeta).
   Mismo componente que el bracket de gestion en Krown Netline. */
.bkt{--bkt-gap:36px;--bkt-line:var(--border-mid);display:flex;overflow-x:auto;padding-bottom:10px}
.bkt.is-scrollable{cursor:grab}
.bkt.is-scrollable.is-dragging{cursor:grabbing;user-select:none}
.bkt-col{display:flex;flex-direction:column;flex:0 0 264px;min-width:264px}
.bkt-col__head{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);padding:0 calc(var(--bkt-gap) / 2) 6px;white-space:nowrap}
/* Cabecera de ronda: texto plano con borde inferior (no una "card" como los partidos
   de verdad, para no confundirla con un partido). */
.bkt-col__head--card{white-space:normal}
.bkt-round-card{display:flex;flex-direction:column;gap:2px;padding:6px 0 10px;border-bottom:1px solid var(--border-mid)}
.bkt-round-card--ghost{border-bottom-color:transparent}
.bkt-round-card__title{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-1);text-align:center}
.bkt-round-card__meta{font-size:.6rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;text-align:center}
.bkt-round-card__date{font-size:.65rem;color:var(--text-2);font-weight:600;text-transform:none;letter-spacing:normal;text-align:center}
.bkt-col__body{flex:1;display:flex;flex-direction:column}
.bkt-cell{flex:1 1 0;display:flex;align-items:center;position:relative;padding:10px calc(var(--bkt-gap) / 2)}
.bkt-col:first-child .bkt-cell,.bkt-col:first-child .bkt-col__head{padding-left:0}
.bkt-col:last-child .bkt-cell,.bkt-col:last-child .bkt-col__head{padding-right:0}

/* El punto "medio" de un partido no es el 50% de la tarjeta: la cabecera
   (.bkt-match__meta, 28px MINIMO — el boton de chat de 20px + su padding de
   4px arriba/abajo necesita esa altura, si no el icono la fuerza a crecer
   solo en los partidos que muestran boton y la tarjeta mide distinto segun
   el estado del partido) empuja el autentico borde entre equipo A/B mas
   abajo (28+36=64px de 101px de alto total, no 50.5px). Todos los conectores
   usan por tanto 50% + 13.5px como referencia, no el centro geometrico de la
   tarjeta (si no la linea siempre entra a la altura del equipo de arriba). */
.bkt-col--has-next .bkt-cell::after{content:"";position:absolute;right:0;top:calc(50% + 13.5px);width:calc(var(--bkt-gap) / 2);height:1px;background:var(--bkt-line)}
.bkt-col--pairs .bkt-cell::before{content:"";position:absolute;right:0;width:1px;background:var(--bkt-line)}
.bkt-col--pairs .bkt-cell:nth-child(odd)::before{top:calc(50% + 13.5px);bottom:0}
.bkt-col--pairs .bkt-cell:nth-child(even)::before{top:0;bottom:calc(50% - 13.5px)}
.bkt-col--has-prev .bkt-match::before{content:"";position:absolute;left:calc(var(--bkt-gap) / -2);top:calc(50% + 13.5px);width:calc(var(--bkt-gap) / 2);height:1px;background:var(--bkt-line)}
/* Aunque el champ no tenga division A/B, el trazo que entra tiene que seguir
   la MISMA altura que el que sale del ultimo partido (50% + 13.5px), si no
   la linea da un salto justo antes de la tarjeta y se ve descuadrada. */
.bkt-col--has-prev .bkt-champ::before{content:"";position:absolute;left:calc(var(--bkt-gap) / -2);top:calc(50% + 13.5px);width:calc(var(--bkt-gap) / 2);height:1px;background:var(--bkt-line)}

.bkt-match{position:relative;width:100%;background:var(--bg-card);border:1px solid var(--border-mid);border-top:none;border-radius:var(--radius-btn);transition:border-color var(--t-base)}
.bkt-match:hover{border-color:var(--border-hover)}
.bkt-match__meta{display:flex;align-items:center;min-height:28px;padding:4px 10px;margin:0 -1px;background:var(--bg-base);border-bottom:1px solid var(--border-mid);border-radius:var(--radius-btn) var(--radius-btn) 0 0;font-size:.65rem;letter-spacing:.05em;color:var(--text-3)}

.bkt-team{display:flex;align-items:center;gap:8px;min-height:36px;padding:5px 10px;border-left:2px solid transparent;transition:background var(--t-fast)}
.bkt-team + .bkt-team{border-top:1px solid var(--border-mid)}
.bkt-team__av{width:20px;height:20px;border-radius:50%;flex-shrink:0;background:var(--bg-card-alt);display:flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:700;color:var(--text-3);overflow:hidden}
.bkt-team__av img{width:100%;height:100%;object-fit:cover;display:block}
.bkt-team__name{flex:1;min-width:0;font-size:.8125rem;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bkt-team__tag{color:var(--text-3);font-weight:400}
/* Mismo flex:1 que el resto de nombres (para que el marcador siga pegado al
   borde derecho de la fila): solo se quita el overflow:hidden, que si no
   recorta el icono de interrogacion. */
.bkt-team__name--bye{overflow:visible}
.bkt-help{position:relative;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:5px;border-radius:50%;background:var(--bg-card-alt);color:var(--text-3);font-size:.62rem;font-weight:700;line-height:1;flex-shrink:0;cursor:help}
/* Anclado por la izquierda al icono (no centrado): si se centrara, en la
   primera columna del bracket se saldria por la izquierda del contenedor
   con scroll horizontal (.bkt) y ese lado quedaria cortado sin poder
   hacer scroll para verlo (scrollLeft no puede ser negativo). */
.bkt-help__tip{position:absolute;left:0;bottom:calc(100% + 6px);width:200px;max-width:60vw;padding:8px 10px;border-radius:var(--radius-btn);background:var(--bg-card);border:1px solid var(--border-mid);color:var(--text-2);font-size:.7rem;font-weight:400;line-height:1.4;text-align:left;white-space:normal;opacity:0;visibility:hidden;transition:opacity var(--t-fast);pointer-events:none;z-index:30;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.bkt-help:hover .bkt-help__tip,.bkt-help:focus-visible .bkt-help__tip{opacity:1;visibility:visible}
.bkt-champ__tag{color:var(--text-3);font-weight:400;font-size:.85em}
.bkt-team__score{font-size:.8125rem;color:var(--text-3);font-variant-numeric:tabular-nums;min-width:16px;text-align:right}
.bkt-team--win{border-left-color:var(--accent-red)}
.bkt-team--win .bkt-team__name{color:var(--text-1);font-weight:700}
.bkt-team--win .bkt-team__score{color:var(--text-1);font-weight:700}
.bkt-team--lose .bkt-team__name,.bkt-team--lose .bkt-team__score{color:var(--text-3)}
.bkt-team--tbd .bkt-team__name{color:var(--text-3);font-style:italic}
.bkt-team.is-trace{background:var(--bg-card-alt)}
.bkt-team.is-trace .bkt-team__name{color:var(--text-1)}
.bkt-team__link{color:inherit;text-decoration:none}
.bkt-team__link:hover{text-decoration:underline}

/* min-height = altura de .bkt-match SIN su cabecera interna (.bkt-match__meta,
   28px): el champ no tiene esa barra "PARTIDO N", asi que solo necesita igualar
   las filas de equipo (101 - 28 = 73px) para no quedar mas corta ni sobrarle hueco. */
.bkt-champ{position:relative;width:100%;min-height:73px;display:flex;flex-direction:column;justify-content:center;background:var(--bg-card);border:1px solid var(--border-mid);border-radius:var(--radius-btn);padding:14px 12px;text-align:center}
.bkt-champ--won{border-color:rgba(230,194,96,.35)}
.bkt-champ__label{display:flex;align-items:center;justify-content:center;gap:5px;font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#e6c260;margin-bottom:10px}
.bkt-champ__av{width:40px;height:40px;border-radius:50%;margin:0 auto 8px;background:var(--bg-card-alt);display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:700;color:var(--text-3);overflow:hidden}
.bkt-champ__av img{width:100%;height:100%;object-fit:cover;display:block}
.bkt-champ__name{font-family:var(--font-display);font-size:.875rem;font-weight:800;color:var(--text-1)}
.bkt-champ__sub{font-size:.7rem;color:var(--text-3);margin-top:6px;line-height:1.45}
.bkt-champ__prize{display:flex;align-items:center;justify-content:center;gap:5px;font-size:.7rem;color:#e6c260;margin-top:8px;padding-top:8px;border-top:1px solid var(--border-mid)}
.series-alert{
  padding:10px 14px;border-radius:var(--radius-btn);
  font-size:.875rem;margin-bottom:var(--sp-3);
}
.series-alert--error{background:rgba(155,17,30,.14);color:#ff8a93;border:1px solid rgba(155,17,30,.35)}
.series-alert--ok{background:rgba(61,220,132,.12);color:#86f0b6;border:1px solid rgba(61,220,132,.3)}

/* ── Banner oscuro de página (equipos, etc.) ──────────────────────────── */

.page-hero{
  position:relative;
  background:var(--bg-dark);
  padding:var(--sp-10) 0 calc(var(--sp-10) + 28px);
  text-align:center;
  clip-path:polygon(0 0, 100% 0, 100% 88%, 45% 100%, 0 92%);
}
.page-hero__title{
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:.02em;
  font-size:clamp(2rem,5vw,3rem);
  color:var(--accent-red);
}
.page-hero__sub{
  max-width:56ch;margin:var(--sp-2) auto 0;
  color:var(--text-2);font-size:.9375rem;line-height:1.6;
}

/* ── Toolbar (buscar + filtro + accion) ───────────────────────────────── */

.team-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--sp-3);margin-bottom:var(--sp-4);
}
.team-toolbar__filters{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.search-input,.filter-select{
  background:var(--bg-card);
  border:1px solid var(--border-mid);
  border-radius:var(--radius-btn);
  padding:9px 12px;
  color:var(--text-1);
  font-family:var(--font-body);
  font-size:.875rem;
}
.search-input{min-width:200px}
.search-input:focus,.filter-select:focus{outline:none;border-color:var(--border-hover)}

/* ── Lista de equipos (filas pill) ─────────────────────────────────────── */

.team-list{display:flex;flex-direction:column;gap:8px}
.team-row{
  display:flex;align-items:center;gap:14px;
  background:var(--bg-card);
  border:1px solid var(--border-mid);
  border-radius:999px;
  padding:8px 16px 8px 8px;
  text-decoration:none;
  color:inherit;
  transition:border-color var(--t-base), background var(--t-base);
}
.team-row:hover{border-color:var(--border-hover);background:var(--bg-card-alt)}
.team-row__logo{
  width:40px;height:40px;border-radius:50%;
  background:var(--bg-card-alt);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:.8rem;
  color:var(--text-2);object-fit:cover;flex-shrink:0;
}
.team-row__name{font-family:var(--font-display);font-weight:700;font-size:.9375rem}
.team-row__tag{color:var(--text-3);font-size:.8125rem}
.team-row__meta{
  display:flex;align-items:center;gap:5px;
  color:var(--text-3);font-size:.8125rem;
  margin-left:auto;
}
.team-row__chevron{color:var(--text-3);flex-shrink:0}

/* ── Aviso / dropzone del formulario de creación ──────────────────────── */

.form-warning{
  display:flex;gap:10px;align-items:flex-start;
  background:rgba(245,166,35,.12);
  border:1px solid rgba(245,166,35,.35);
  color:#ffce7a;
  border-radius:var(--radius-btn);
  padding:12px 14px;
  font-size:.8125rem;line-height:1.5;
  margin-bottom:var(--sp-3);
}
.upload-dropzone{
  border:1px dashed var(--border-hover);
  border-radius:var(--radius-btn);
  padding:16px;text-align:center;
  color:var(--text-3);font-size:.8125rem;
  cursor:pointer;transition:border-color var(--t-base), color var(--t-base);
  position:relative;
}
.upload-dropzone:hover{border-color:var(--accent-red);color:var(--text-2)}
.upload-dropzone input[type=file]{
  position:absolute;inset:0;opacity:0;cursor:pointer;
}
.upload-dropzone__name{color:var(--text-1);font-weight:600;margin-top:4px}

/* ── Cabecera de detalle de equipo (mismo patron de card que .tourn-head
   en torneo.php: bg-card + border + radius-card, dentro del container,
   en vez del bloque a sangre "team-banner" heredado del template original) ── */

.team-head{display:flex;align-items:center;gap:14px;background:var(--bg-card);border:1px solid var(--border-mid);border-radius:var(--radius-card);padding:18px 20px;flex-wrap:wrap}
.team-head__logo{
  width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0;
  background:var(--bg-card-alt);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:1.2rem;color:var(--text-2);
}
.team-head__id{flex:1;min-width:0}
.team-head__name{font-family:var(--font-display);font-weight:800;font-size:1.4rem;letter-spacing:-.01em;color:var(--text-1)}
.team-head__meta{color:var(--text-3);font-size:.875rem;margin-top:2px}
.team-banner__actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.team-banner__btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:var(--radius-btn);
  border:1px solid var(--border-mid);color:var(--text-1);
  font-size:.8125rem;font-weight:600;background:transparent;cursor:pointer;
  transition:border-color var(--t-base), background var(--t-base);
  font-family:var(--font-body);
}
.team-banner__btn:hover{border-color:var(--border-hover);background:rgba(255,255,255,.04)}
.team-banner__btn:disabled{opacity:.4;cursor:not-allowed}
.team-banner__btn:disabled:hover{background:transparent;border-color:var(--border-mid)}
/* ── Miembros (pills) ──────────────────────────────────────────────────── */

.member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-bottom:var(--sp-6)}
.member-list{display:flex;flex-direction:column;gap:6px}
.member-pill{
  background:var(--bg-card);border:1px solid var(--border-mid);
  border-radius:var(--radius-btn);padding:10px 14px;
  display:flex;align-items:center;gap:10px;
}
a.member-pill{color:inherit;text-decoration:none;transition:border-color var(--t-base), background var(--t-base)}
a.member-pill:hover{border-color:var(--border-hover);background:var(--bg-card-alt)}
.member-pill__avatar{
  width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--bg-card-alt);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:.7rem;color:var(--text-2);
}
.member-pill__name{font-size:.875rem;font-weight:600;color:var(--text-1)}
.member-pill__role{font-size:.75rem;color:var(--text-3);margin-top:1px}
.member-pill__menu-btn{
  margin-left:auto;flex-shrink:0;width:26px;height:26px;border-radius:50%;
  border:0;background:transparent;color:var(--text-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:.6;transition:opacity .12s,background .1s;
}
.member-pill:hover .member-pill__menu-btn,.member-pill__menu-btn:focus{opacity:1}
.member-pill__menu-btn:hover{background:var(--bg-card-alt);opacity:1}
.member-dd{
  position:fixed;background:var(--bg-card);border:1px solid var(--border-mid);
  border-radius:var(--radius-btn);box-shadow:0 8px 30px rgba(0,0,0,.5);
  z-index:1100;min-width:170px;padding:4px;display:none;
}
.member-dd.is-open{display:block}
.member-dd-item{
  display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;
  font-size:.8125rem;color:var(--text-2);background:none;border:none;cursor:pointer;
  border-radius:calc(var(--radius-btn) - 4px);text-align:left;white-space:nowrap;
}
.member-dd-item:hover{background:var(--bg-card-alt);color:var(--text-1)}
.member-dd-item--danger:hover{background:oklch(0.42 0.18 23 / .15);color:oklch(0.7 0.12 23)}

/* ── Historial de partidos (equipo.php / perfil.php): tarjeta equipo vs
   equipo, misma pinta en las dos páginas. Sin link — solo lectura. ─────── */

.match-list{display:flex;flex-direction:column;gap:6px}
.match-card{
  background:var(--bg-card);
  border:1px solid var(--border-mid);
  border-radius:var(--radius-btn);
  padding:8px 12px;
}
.match-card__teams{display:flex;align-items:center;gap:8px}
.match-card__team{
  flex:1;min-width:0;display:flex;align-items:center;gap:7px;
  opacity:.55;transition:opacity var(--t-base);
}
.match-card__team--rival{flex-direction:row-reverse;text-align:right}
a.match-card__team{color:inherit;text-decoration:none;cursor:pointer}
a.match-card__team:hover .match-card__name{text-decoration:underline}
.match-card--win .match-card__team--own,
.match-card--loss .match-card__team--rival{opacity:1}
.match-card__logo{
  width:24px;height:24px;border-radius:50%;object-fit:cover;background:var(--bg-card-alt);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:.6rem;color:var(--text-2);
}
.match-card__name{font-family:var(--font-display);font-weight:700;font-size:.75rem;color:var(--text-1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.match-card__tag{color:var(--text-3);font-size:.65rem;flex-shrink:0}
.match-card__score{
  display:flex;align-items:center;gap:5px;flex-shrink:0;
  font-family:var(--font-display);font-weight:800;font-size:1rem;color:var(--text-3);
}
.match-card__score-num.is-winner{color:var(--text-1)}
.match-card__score-sep{color:var(--text-3);font-weight:600;font-size:.85rem}
.match-card__meta{
  margin-top:6px;padding-top:6px;border-top:1px solid var(--border-mid);
  text-align:center;color:var(--text-3);font-size:.68rem;
}
.member-dd-sep{height:1px;background:var(--border-mid);margin:3px 0}

/* ── Footer (compartido world+series) ─────────────────────────────────── */

.footer{
  position:relative;z-index:1;
  background:var(--bg-dark);
  border-top:1px solid var(--border-mid);
  padding:var(--sp-10) 0;
}
.footer__grid{display:grid;grid-template-columns:1fr repeat(7, auto);gap:var(--sp-8);align-items:start}
.footer__brand{display:flex;flex-direction:column;gap:var(--sp-2)}
.footer__brand-link{display:inline-flex;align-items:center;gap:10px;transition:opacity var(--t-base)}
.footer__brand-link:hover{opacity:.8}
.footer__brand-logo{width:32px;height:32px;object-fit:contain}
.footer__brand-name{font-family:var(--font-display);font-size:.875rem;font-weight:800;letter-spacing:.18em;color:var(--text-1)}
.footer__brand-sub{font-size:.6875rem;color:var(--text-3);letter-spacing:.02em;line-height:1.6;margin-top:var(--sp-1)}
.footer__socials{display:flex;gap:4px;margin-top:var(--sp-1)}
.footer__social-link{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;color:var(--text-3);transition:color var(--t-base), background var(--t-base)}
.footer__social-link:hover{color:var(--text-1);background:rgba(255,255,255,.04)}
.footer__nav-heading{font-family:var(--font-display);font-size:.5625rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--sp-2);padding-bottom:var(--sp-1);border-bottom:1px solid var(--border-mid);white-space:nowrap}
.footer__nav-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.footer__nav-link{display:inline-flex;align-items:center;font-size:.875rem;color:var(--text-2);transition:color var(--t-base)}
.footer__nav-link:hover{color:var(--text-1)}
.footer__bottom{margin-top:var(--sp-8);padding-top:var(--sp-4);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.footer__email{font-size:.6875rem;color:var(--text-3);letter-spacing:.04em;text-decoration:none;transition:color var(--t-base)}
.footer__email:hover{color:var(--text-1)}
.footer__copy{font-size:.6875rem;color:var(--text-3);letter-spacing:.04em;white-space:nowrap}
.footer__legal{display:flex;gap:var(--sp-3)}
.footer__legal-link{color:var(--text-3);font-size:.8125rem;transition:color var(--t-base)}
.footer__legal-link:hover{color:var(--text-1)}

/* Aviso de no afiliacion (marcas de terceros) en el footer compartido */
.footer__disclaimer{max-width:1200px;margin:16px auto 0;padding:0 24px;font-size:.72rem;line-height:1.6;color:var(--text-3);text-align:center}

@media (max-width:720px){
  .footer__grid{grid-template-columns:1fr}
}

/* ── Mobile nav drawer (compartido world+series) ─────────────────────── */

.mobile-nav{
  position:fixed;top:0;right:0;bottom:0;
  width:min(320px,85vw);
  background:var(--bg-base);
  border-left:1px solid var(--border-mid);
  z-index:100;
  padding:72px var(--sp-4) var(--sp-4);
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;
  pointer-events:none;
}
.mobile-nav.is-open{transform:translateX(0);pointer-events:auto}
.mobile-nav__backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.65);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  z-index:90;opacity:0;visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.mobile-nav__backdrop.is-open{opacity:1;visibility:visible}
.mobile-nav__close{
  position:absolute;top:var(--sp-2);right:var(--sp-2);
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:none;color:rgba(255,255,255,.55);cursor:pointer;
  transition:color var(--t-base);
}
.mobile-nav__close:hover{color:#fff}
.mobile-nav__inner{display:flex;flex-direction:column;gap:0}
.mobile-nav__eyebrow{
  display:block;font-family:var(--font-body);font-size:.6875rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--sp-3);
}
.mobile-nav__link{
  font-family:var(--font-display);font-size:1.5rem;font-weight:800;letter-spacing:.02em;
  color:var(--text-1);padding:16px 0;border-bottom:1px solid var(--border);
  transition:color var(--t-base);
}
.mobile-nav__link:hover{color:var(--accent-red)}
.mobile-nav__link--active{color:var(--accent-red)}
.mobile-nav__copy{margin-top:auto;padding-top:var(--sp-4);font-size:.75rem;color:var(--text-3)}
.mobile-nav__cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 20px;margin-top:var(--sp-4);
  background:var(--accent-red);color:#fff;
  font-family:var(--font-display);font-size:.8125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  border-radius:999px;transition:background var(--t-base);
}
.mobile-nav__cta:hover{background:var(--accent-red-hover)}

@media (min-width:721px){
  .mobile-nav,.mobile-nav__backdrop{display:none}
}

/* ── Doc pages (Reglamento) — layout clásico de documentación: sidebar fija a la
   izquierda con la lista de páginas, contenido a la derecha. El contenido en sí
   (.wiki-content) lo estiliza integramente main.css de World, igual que Help. ── */
.doc-shell{display:flex;align-items:flex-start;gap:var(--sp-6);max-width:1120px;margin:0 auto;padding:var(--sp-5) var(--sp-3) var(--sp-8)}
.doc-nav{position:sticky;top:calc(48px + var(--sp-4));flex:0 0 220px;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 48px - var(--sp-6));overflow-y:auto}
.doc-nav__game{font-family:var(--font-display);font-weight:800;font-size:.8125rem;text-transform:uppercase;letter-spacing:.03em;color:var(--text-1);margin-bottom:8px}
.doc-nav__cat{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);margin:14px 0 4px}
.doc-nav__link{display:block;padding:6px 10px;border-radius:6px;font-size:.85rem;color:var(--text-2);transition:background var(--t-fast),color var(--t-fast)}
.doc-nav__link:hover{background:var(--bg-card);color:var(--text-1)}
.doc-nav__link.is-active{background:var(--bg-card-alt);color:var(--text-1);font-weight:600}
.doc-nav__back{display:block;margin-top:16px;padding-top:12px;border-top:1px solid var(--border-mid);font-size:.8125rem;color:var(--text-3)}
.doc-nav__back:hover{color:var(--text-1)}
.doc-content{flex:1;min-width:0;max-width:760px}
.doc-content__eyebrow{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-red);margin-bottom:6px}
.doc-content__title{font-family:var(--font-display);font-weight:900;font-size:clamp(1.4rem,3.5vw,2rem);margin-bottom:var(--sp-4);color:var(--text-1)}
.doc-empty-wrap{flex:1;max-width:760px;margin:0 auto}
.hp-empty{color:var(--text-3);padding:var(--sp-4);text-align:center;background:var(--bg-card);border:1px dashed var(--border-mid);border-radius:12px}

/* Indice de contenido (TOC) dentro de una pagina de reglamento: World (main.css, que
   estiliza .wiki-content) lo pinta como caja con fondo. La wiki de Krown Netline lo
   pinta sin caja, minimalista - un titulo pequeno en mayusculas y la lista debajo.
   Mismas clases, override cargado despues de main.css para que gane por orden. */
.wiki-content .wiki-toc{background:none;border:none;border-radius:0;padding:2px 0;margin:0 0 24px}
.wiki-content .wiki-toc__title{font-size:.656rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:8px}
.wiki-content .wiki-toc__list li{margin-bottom:2px}
.wiki-content .wiki-toc__list a{font-size:.8125rem;line-height:1.65}

/* Enlaces del cuerpo: World los subraya en rojo (color de marca de esa web, no de
   esta) - aqui neutros, como el resto de links de texto de la app (doc-nav__link,
   doc-page__back...). */
.wiki-content a{color:var(--text-1);border-bottom:1px solid var(--border-mid)}
.wiki-content a:hover{color:var(--text-1);border-bottom-color:var(--text-3)}

@media (max-width:820px){
  .doc-shell{flex-direction:column}
  .doc-nav{position:static;flex:none;width:100%;max-height:none;flex-direction:row;flex-wrap:wrap;gap:6px}
  .doc-nav__game,.doc-nav__cat{width:100%}
  .doc-nav__back{width:100%}
}

/* ── Modal flotante (crear equipo, etc.) ───────────────────────────────── */
/* z-index por encima del eco-header (300, su dropdown 400) - si no, el header
   fijo tapa la parte de arriba del modal (ver ecosystem-header.php). */
.team-modal{position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;padding:var(--sp-4)}
.team-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75)}
.team-modal__panel{position:relative;max-width:480px;width:100%;max-height:calc(100vh - var(--sp-6));overflow-y:auto;background:var(--bg-card);border:1px solid var(--border-mid);border-radius:var(--radius-card);padding:var(--sp-5)}
.team-modal__panel--wide{max-width:640px}
.team-modal__close{position:absolute;top:8px;right:8px;width:32px;height:32px;background:transparent;border:0;color:var(--text-2);font-size:1.4rem;line-height:1;cursor:pointer;transition:color var(--t-base)}
.team-modal__close:hover{color:var(--text-1)}

/* ── News teaser (Noticias, gestionadas desde Netline) ───────────────────── */
.news-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-2)}
@media (min-width:640px){.news-grid{grid-template-columns:repeat(3,1fr)}}
.news-card{display:block;background:var(--bg-card-alt);border:1px solid var(--border-mid);border-radius:var(--radius-card);overflow:hidden;text-decoration:none}
.news-card__thumb{aspect-ratio:16/9;background:#161616;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.news-card__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.news-card__info{padding:14px var(--sp-3);display:flex;flex-direction:column;gap:4px}
.news-card__title{font-size:.875rem;font-weight:500;color:var(--text-2);line-height:1.4}
.news-card__excerpt{font-size:.75rem;color:var(--text-3);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-card__date{font-size:.75rem;color:var(--text-3)}
.news-card--placeholder .news-card__thumb{background:#131313}

/* ── Píldora de estado de torneo/fase (compartida entre /torneos y /torneo) ── */
.status-pill{flex-shrink:0;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:4px 10px;border-radius:99px;white-space:nowrap;display:inline-block}
.status-pill--abiertas{background:rgba(46,204,113,.15);color:#2ecc71}
.status-pill--cerradas{background:rgba(230,160,0,.15);color:#e6a000}
.status-pill--curso{background:rgba(91,123,255,.15);color:#5b7bff}
.status-pill--completado{background:rgba(255,255,255,.08);color:var(--text-3)}

/* ── PORTADA: TORNEO DESTACADO ───────────────────────────────────────────
   Una plataforma de torneos que por fin ensena un torneo en la portada. */

/* La portada apila hero + fases, asi que aqui .hero deja de ser el flex
   centrador que usan las demas paginas. El padding-top de .hero (var(--sp-12),
   linea 137) ya deja el hueco de arriba correcto: .s-hero (debajo) no debe
   sumar el suyo propio encima, o el titulo queda con casi el doble de aire
   que en el resto de heros del ecosistema. */
.hero--portada {
  display: block;
  min-height: 0;
  padding-bottom: calc(var(--sp-6) + 56px);
}

.s-hero {
  position: relative;
  max-width: calc(1320px + var(--sp-4) * 2);
  margin: 0 auto;
  padding: 0 var(--sp-4) var(--sp-8);
  overflow: clip;
}

/* Cuadro de torneo: decoracion que dice algo. Confinado a la mitad derecha
   para no pasar por debajo del texto. */
.s-cuadro {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  left: 44%;
  height: 92%;
  opacity: 0.9;
  pointer-events: none;
}

.s-cuadro__base path,
.s-cuadro__camino path {
  stroke-dasharray: 90;
  stroke-dashoffset: 0;   /* estado final: trazado. La animacion solo lo repite */
}

@media (prefers-reduced-motion: no-preference) {
  .s-cuadro__camino path {
    animation: s-trazo 1.1s cubic-bezier(0.4, 0, 0.2, 1) backwards;
  }
  .s-cuadro__camino path:nth-child(1) { animation-delay: 0.10s }
  .s-cuadro__camino path:nth-child(2) { animation-delay: 0.22s }
  .s-cuadro__camino path:nth-child(3) { animation-delay: 0.34s }
  .s-cuadro__camino path:nth-child(4) { animation-delay: 0.46s }
  .s-cuadro__camino path:nth-child(5) { animation-delay: 0.58s }
  .s-cuadro__camino path:nth-child(6) { animation-delay: 0.70s }
  .s-cuadro__camino path:nth-child(7) { animation-delay: 0.82s }
}

@keyframes s-trazo {
  from { stroke-dashoffset: 90; }
  to   { stroke-dashoffset: 0;  }
}

.s-hero__in {
  position: relative;
  z-index: 1;
  max-width: min(52%, 42ch);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}

.s-hero__t {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.025em;
  max-width: 14ch;
  color: var(--text-1);
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}

.s-hero__d {
  color: var(--text-2);
  line-height: 1.65;
  max-width: 40ch;
  margin: 0;
}

/* ── Estados ─────────────────────────────────────────────────────────────
   El sello del hero es el mismo chip de estado que usan las tiles de
   /torneos y las fases de /torneo (tourn-tile__status): circulo de color +
   texto, en vez del pill de borde rojo que tenia antes (no distinguia
   abierto/cerrado/en curso). Los de la lista de abajo siguen con su propio
   codigo de semaforo (s-badge) porque es una lista plana, no una tile. */
.tourn-tile__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(10, 10, 10, .6);
  backdrop-filter: blur(3px);
  color: #fff;
}
.tourn-tile__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tourn-tile__status--abiertas .tourn-tile__dot   { background: #2ecc71; box-shadow: 0 0 6px #2ecc71; }
.tourn-tile__status--cerradas .tourn-tile__dot   { background: #e6a000; box-shadow: 0 0 6px #e6a000; }
.tourn-tile__status--curso .tourn-tile__dot      { background: #5b7bff; box-shadow: 0 0 6px #5b7bff; }
.tourn-tile__status--completado .tourn-tile__dot { background: #bbb; }
.tourn-tile__status--invitacion .tourn-tile__dot { background: #bbb; }

.s-badge {
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--radius-btn);
  border: 1px solid;
  white-space: nowrap;
}

.s-badge--on   { color: #5FCB84; border-color: #1D4029; background: #12281A; }
.s-badge--soon { color: #E0BC4B; border-color: #443616; background: #251E0C; }
.s-badge--now  { color: var(--text-1); border-color: var(--border-mid); background: #1A1A1A; }
.s-badge--off  { color: var(--text-3); border-color: var(--border-mid); }

/* ── Plazas ──────────────────────────────────────────────────────────── */
.s-plazas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 320px;
  width: 100%;
}

.s-plazas__pista {
  height: 5px;
  border-radius: 3px;
  background: #1E1E1E;
  overflow: hidden;
}

.s-plazas__relleno {
  height: 100%;
  border-radius: 3px;
  background: var(--accent-red);
}

.s-plazas__nums {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.s-plazas__nums b {
  color: var(--text-1);
  font-family: var(--font-display);
  font-weight: 800;
}

/* ── Linea de fases ──────────────────────────────────────────────────────
   Una tira continua con separadores, no cuatro tarjetas sueltas: es un
   recorrido, y asi se lee como tal. */
.s-fases {
  display: flex;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.s-fase {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  border-right: 1px solid var(--border);
}

.s-fase:last-child { border-right: 0; }

.s-fase--ahora { background: #17090B; }

.s-fase__n {
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
}

.s-fase--ahora .s-fase__n { color: #E8566A; }

.s-fase__t {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-2);
}

.s-fase--ahora .s-fase__t { color: var(--text-1); }

/* ── LISTA DE TORNEOS ────────────────────────────────────────────────── */

/* Cabecera de seccion: titulo y, cuando lo hay, un enlace a la derecha. */
.sec-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.sec-h .section__heading { margin: 0; }

.sec-h__more {
  font-size: 0.875rem;
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--t-base);
}

.sec-h__more:hover { color: var(--text-1); }

.s-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.s-fila {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background var(--t-base);
}

.s-fila:hover { background: rgba(255, 255, 255, 0.03); }

.s-fila__nm {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-1);
  min-width: 0;
  overflow-wrap: anywhere;
}

.s-fila__juego {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  padding: 2px 6px;
  margin-left: 8px;
  vertical-align: 2px;
}

.s-fila__eq {
  font-size: 0.8125rem;
  color: var(--text-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.s-fila__dt {
  font-size: 0.8125rem;
  color: var(--text-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .s-cuadro { display: none; }   /* sin sitio, el cuadro estorba mas que aporta */
  .s-hero__in { max-width: none; }
  .s-fila {
    grid-template-columns: auto 1fr;
    grid-template-areas: "badge nombre" "eq dt";
  }
  .s-fila .s-badge   { grid-area: badge; }
  .s-fila__nm { grid-area: nombre; }
  .s-fila__eq { grid-area: eq; }
  .s-fila__dt { grid-area: dt; text-align: right; }
}

/* ── Panel "completa los datos de tu cuenta" (Discord + tracker.gg), reusado
   en equipos.php (crear), unirse.php (unirse) y torneo.php (inscripcion solo)
   via partials/account-requirements.php ─────────────────────────────────── */
.acct-req__lead{margin:2px 0 14px;color:var(--text-2);font-size:.875rem}
.acct-req__row{display:flex;align-items:center;gap:12px;padding:10px 0}
.acct-req__row + .acct-req__row{border-top:1px solid var(--border-mid)}
.acct-req__row--start{align-items:flex-start}
.acct-req__icon{width:34px;height:34px;border-radius:var(--radius-btn);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.acct-req__info{flex:1;min-width:0}
.acct-req__label{font-weight:700;color:var(--text-1);font-size:.875rem}
.acct-req__status{font-size:.8125rem;color:var(--text-3);margin-top:1px}
.acct-req__status--ok{color:#86f0b6}
.acct-req__steps{font-size:.75rem;color:var(--text-3);line-height:1.6;margin:6px 0 10px;padding-left:18px}
.acct-req__steps a{color:var(--text-2)}
.acct-req__tracker-form{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.acct-req__tracker-form .series-field{margin-bottom:0;flex:1;min-width:220px}

/* ── kToast: notificaciones puntuales (flash ok/error), abajo-derecha,
   entran y se van solas — mismo patron que kAlert() en Krown Netline
   (apps/netline/assets/js/premium.js + main-4-extras.css), colores propios
   de Series (los mismos que .series-alert--ok/--error). Ver assets/js/toast.js. */
#k-toast-stack{position:fixed;bottom:20px;right:20px;z-index:1200;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.k-toast{
  background:var(--bg-card);border:1px solid var(--border-mid);border-radius:var(--radius-card);
  padding:10px 14px;font-size:.82rem;color:var(--text-1);max-width:300px;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
  transform:translateX(20px);opacity:0;
  transition:transform .25s cubic-bezier(.34,1.15,.64,1), opacity .2s ease;
  pointer-events:auto;line-height:1.45;
}
.k-toast.is-visible{transform:translateX(0);opacity:1}
.k-toast--error{border-color:rgba(155,17,30,.45);color:#ff8a93}
.k-toast--success{border-color:rgba(61,220,132,.4);color:#86f0b6}