/* ==========================================================================
   ELMHURST ATHLETICS NYC — BRAND DESIGN SYSTEM (60-30-10 Athletic Dark Mode)
   ========================================================================== */

:root {
  /* Brand Color Tokens */
  --km-black: #0B0C0E;
  --km-lime: #32C736;
  --km-lime-glow: rgba(50, 199, 54, 0.35);
  --km-emerald: #1B7A27;
  --km-asphalt: #161B18;
  --km-asphalt-card: #1B221E;
  --km-surface-variant: #222B25;
  --km-stroke: #26332A;
  --km-stroke-hover: #32C736;
  --km-white: #FFFFFF;
  --km-neutral: #D4D9D6;
  --km-muted: #8E9992;
  --km-danger: #EF4444;
  --km-app-background:
    radial-gradient(120% 60% at 80% -10%, rgba(50, 199, 54, 0.22), transparent 60%),
    radial-gradient(90% 50% at -10% 100%, rgba(50, 199, 54, 0.14), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, #0B1511, #05090A);
  /* Dorado de marca (antes solo existía dentro de .world-bracket y los usos externos quedaban sin color) */
  --bracket-gold: #F4C95D;
  --bracket-gold-glow: rgba(244, 201, 93, 0.38);

  /* Typography */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Radii & Shadows */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 9999px;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 20px var(--km-lime-glow);
}

[data-theme="light"] {
  --km-black: #F5F8F6;
  --km-asphalt: #FFFFFF;
  --km-asphalt-card: #FFFFFF;
  --km-surface-variant: #EBF1ED;
  --km-stroke: #D2DCD5;
  --km-white: #0B0C0E;
  --km-neutral: #2A362E;
  --km-muted: #6B7C72;
  --km-app-background:
    radial-gradient(120% 60% at 80% -10%, rgba(34, 169, 53, 0.18), transparent 60%),
    repeating-linear-gradient(115deg, rgba(15, 26, 19, 0.03) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, #FFFFFF, #EEF4F0);
  --bracket-gold: #B7860B;
  --bracket-gold-glow: rgba(183, 134, 11, 0.3);
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.08);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

html {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--km-app-background);
}

body {
  overscroll-behavior: none;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  font-family: var(--font-body);
  background: var(--km-app-background);
  color: var(--km-white);
  min-height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}

/* App Viewport Container */
.viewport-wrapper {
  padding: 0;
  width: 100%;
  min-height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex: 1;
}

/* App Main Container */
.app-frame {
  width: 100%;
  max-width: 520px;
  background: var(--km-app-background);
  border-radius: 0;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.7);
  border-left: 1px solid var(--km-stroke);
  border-right: 1px solid var(--km-stroke);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  position: relative;
}

@media (max-width: 600px) {
  .app-frame {
    max-width: 100%;
    border-left: none;
    border-right: none;
  }
}

/* App Header */
.app-header {
  background: var(--km-asphalt);
  border-bottom: 1px solid var(--km-stroke);
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  z-index: 10;
}

.brand-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.brand-logo {
  width: 72px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 10px;
  object-fit: cover;
  background: #000;
  border: 1.5px solid var(--km-lime);
  box-shadow: 0 0 12px rgba(50, 199, 54, 0.4);
}

/* El logo ya incluye el nombre: en pantallas angostas se oculta el título repetido */
@media (max-width: 460px) {
  .brand-text h1 { font-size: 15px; }
}

.brand-text h1 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--km-white);
  line-height: 1.1;
}

.brand-text span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--km-lime);
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  background: var(--km-surface-variant);
  border: 1px solid var(--km-stroke);
  color: var(--km-white);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}

.icon-btn:hover {
  border-color: var(--km-lime);
  color: var(--km-lime);
}

.lang-toggle-btn {
  background: var(--km-surface-variant);
  border: 1px solid var(--km-stroke);
  color: var(--km-lime);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

/* Avatar del Jugador en Header (A la derecha) */
.header-avatar-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  outline: none;
}

.header-avatar-btn:hover {
  transform: scale(1.08);
}

.header-avatar-ring {
  position: relative;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1B7A27 0%, #0D3A13 100%);
  border: 2px solid var(--km-lime);
  box-shadow: 0 0 10px rgba(50, 199, 54, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.header-avatar-btn.active .header-avatar-ring {
  border-color: #4EE852;
  box-shadow: 0 0 16px rgba(50, 199, 54, 0.8), 0 0 25px rgba(50, 199, 54, 0.5);
  transform: scale(1.06);
}

.header-avatar-ring .avatar-initial {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1;
}

.header-avatar-ring .avatar-status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  background: #22C55E;
  border: 2px solid #0B0C0E;
  border-radius: 50%;
  box-shadow: 0 0 6px #22C55E;
}

@media (max-width: 400px) {
  .header-controls {
    gap: 4px;
  }
  .lang-toggle-btn {
    padding: 3px 6px;
    font-size: 10px;
  }
  .icon-btn {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
  .header-avatar-ring {
    width: 31px;
    height: 31px;
  }
  .header-avatar-ring .avatar-initial {
    font-size: 13px;
  }
}

/* App Main Content Area (Scrollable by default, static/no-scroll in bracket canvas) */
.app-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  scroll-behavior: smooth;
  position: relative;
  background: var(--km-app-background);
}

/* Modo Estático Sin Scroll para Vistas Inmersivas / Árbol de Torneo */
.app-content.no-scroll:has(#screen-tournaments.active),
.app-content:has(#screen-tournaments.active #tournament-detail-view:not([style*="display: none"])) {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Pantallas inactivas nunca deben mostrarse bajo ningún concepto */
.screen-view:not(.active),
#screen-tournaments:not(.active) {
  display: none !important;
}

.app-content #screen-tournaments.active:has(#tournament-detail-view:not([style*="display: none"])) {
  height: 100% !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  gap: 0 !important;
  padding: 0 !important;
  display: flex !important;
}

/* Hide scrollbars across the whole app (scrolling still works) */
html, body, * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
*::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.app-content::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Screens */
.screen-view {
  display: none;
  flex-direction: column;
  gap: 18px;
  animation: none;
}

.screen-view.active {
  display: flex;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero Section */
.hero-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  box-shadow: var(--shadow-card);
}

.hero-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(11, 12, 14, 0.1) 0%, rgba(11, 12, 14, 0.88) 100%);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--km-lime);
  color: #0B0C0E;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 800;
  width: fit-content;
}

.badge-live .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0B0C0E;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.hero-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.15;
  color: #fff;
}

.hero-subtitle {
  font-size: 11px;
  color: var(--km-neutral);
  line-height: 1.3;
}

/* Quick Action Buttons Grid */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.quick-btn {
  background: var(--km-asphalt);
  border: 1px solid var(--km-stroke);
  border-radius: var(--radius-md);
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--km-white);
  text-decoration: none;
}

.quick-btn:hover {
  border-color: var(--km-lime);
  transform: translateY(-2px);
}

.quick-btn .icon {
  font-size: 20px;
  color: var(--km-lime);
}

.quick-btn span {
  font-size: 11px;
  font-weight: 700;
}

/* Cards & Sections */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  color: var(--km-white);
  letter-spacing: 0.5px;
}

.section-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--km-lime);
  cursor: pointer;
}

/* Carousel */
.court-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}

.court-carousel::-webkit-scrollbar {
  height: 4px;
}
.court-carousel::-webkit-scrollbar-thumb {
  background: var(--km-stroke);
  border-radius: 4px;
}

.court-thumb-card {
  flex: 0 0 200px;
  background: var(--km-asphalt);
  border: 1px solid var(--km-stroke);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  scroll-snap-align: start;
}

.court-thumb-card:hover {
  border-color: var(--km-lime);
}

.court-thumb-card img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

.court-thumb-info {
  padding: 10px;
}

.court-thumb-info h4 {
  font-size: 13px;
  font-weight: 800;
  color: var(--km-white);
}

.court-thumb-info .price {
  font-size: 12px;
  font-weight: 800;
  color: var(--km-lime);
  margin-top: 2px;
}

/* Detailed Court Card */
.court-card {
  background: var(--km-asphalt);
  border: 1px solid var(--km-stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

.court-card:hover {
  border-color: var(--km-stroke-hover);
  box-shadow: 0 4px 20px rgba(50, 199, 54, 0.15);
}

.court-card-banner {
  position: relative;
  height: 160px;
}

.court-card-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.court-card-banner .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, rgba(11, 12, 14, 0.9) 100%);
}

.court-badge-pill {
  position: absolute;
  bottom: 10px;
  left: 12px;
  background: var(--km-lime);
  color: #0B0C0E;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
}

.court-price-pill {
  position: absolute;
  bottom: 10px;
  right: 12px;
  background: rgba(16, 21, 18, 0.85);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.court-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.court-card-body h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--km-white);
}

.court-card-body p {
  font-size: 12px;
  color: var(--km-neutral);
  line-height: 1.35;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--km-neutral);
}

.feature-item i {
  color: var(--km-lime);
  font-size: 12px;
}

.btn-reserve {
  background: var(--km-lime);
  color: #0B0C0E;
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
  margin-top: 4px;
}

.btn-reserve:hover {
  background: #4EE852;
  box-shadow: 0 0 15px var(--km-lime-glow);
}

/* Category Filters */
.category-filter-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.cat-chip {
  background: var(--km-asphalt);
  border: 1px solid var(--km-stroke);
  color: var(--km-neutral);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cat-chip.active {
  background: var(--km-lime);
  color: #0B0C0E;
  border-color: var(--km-lime);
}

/* Search input */
.search-box {
  background: var(--km-asphalt);
  border: 1px solid var(--km-stroke);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-box input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 13px;
  width: 100%;
}

.search-box input::placeholder {
  color: var(--km-muted);
}

/* Tournament Flyer & Bracket */
.tournament-card {
  background: var(--km-asphalt);
  border: 1px solid var(--km-stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.flyer-banner {
  position: relative;
  height: 200px;
}

.flyer-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prize-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--km-surface-variant);
  border-radius: var(--radius-md);
  padding: 12px;
  border: 1px solid var(--km-stroke);
}

.prize-box img {
  width: 44px;
  height: 44px;
}

/* World Cup bracket: an explorable tournament canvas at 100% width without card container */
.world-bracket {
  --bracket-gold: #f4c95d;
  --bracket-gold-glow: rgba(244, 201, 93, 0.38);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.world-bracket::before {
  display: none;
}

.world-bracket__header,
.world-bracket__toolbar,
.world-bracket__detail-header,
.world-bracket__team,
.world-bracket__scoreboard,
.world-bracket__detail-foot {
  display: flex;
  align-items: center;
}

.world-bracket__header {
  justify-content: space-between;
  gap: 12px;
}

.world-bracket__eyebrow,
.world-bracket__detail-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--km-lime);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.12em;
}

.world-bracket__live-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--km-lime);
  box-shadow: 0 0 0 0 rgba(50, 199, 54, 0.55);
  animation: bracketLivePulse 1.7s infinite;
}

.world-bracket h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: var(--km-white);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}

.world-bracket h4 i {
  color: var(--bracket-gold);
  filter: drop-shadow(0 0 7px var(--bracket-gold-glow));
}

.world-bracket__sync {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(50, 199, 54, 0.45);
  border-radius: 999px;
  color: var(--km-lime);
  background: rgba(50, 199, 54, 0.1);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.07em;
}

.world-bracket__summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  min-height: 32px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  color: var(--km-muted);
  background: rgba(0, 0, 0, 0.15);
  font-size: 0.72rem;
  font-weight: 600;
}

.world-bracket__summary strong {
  color: var(--km-white);
  font-weight: 900;
}

.world-bracket__summary-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: var(--km-lime);
}

.world-bracket__toolbar {
  justify-content: space-between;
  gap: 8px;
}

.world-bracket__zoom-controls,
.world-bracket__view-controls,
.world-bracket__jumpbar {
  display: flex;
  align-items: center;
}

.world-bracket__zoom-controls {
  overflow: hidden;
  border: 1px solid var(--km-stroke);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}

.world-bracket__control,
.world-bracket__view-button,
.world-bracket__jumpbar button,
.world-bracket__detail-close,
.world-bracket__match-card {
  font: inherit;
  cursor: pointer;
}

.world-bracket__control {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  color: var(--km-white);
  background: transparent;
  transition: color 160ms ease, background 160ms ease;
}

.world-bracket__control:hover,
.world-bracket__control:focus-visible {
  color: var(--km-lime);
  background: rgba(50, 199, 54, 0.11);
}

.world-bracket__zoom-readout {
  display: grid;
  width: 43px;
  height: 32px;
  place-items: center;
  border-inline: 1px solid var(--km-stroke);
  color: var(--km-neutral);
  font-size: 0.68rem;
  font-weight: 800;
}

.world-bracket__view-controls {
  justify-content: flex-end;
  gap: 6px;
}

.world-bracket__view-button,
.world-bracket__jumpbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  border: 1px solid var(--km-stroke);
  border-radius: 9px;
  padding: 0 9px;
  color: var(--km-neutral);
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.68rem;
  font-weight: 800;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
}

.world-bracket__view-button:hover,
.world-bracket__view-button:focus-visible,
.world-bracket__jumpbar button:hover,
.world-bracket__jumpbar button:focus-visible {
  border-color: rgba(50, 199, 54, 0.72);
  color: var(--km-white);
  background: rgba(50, 199, 54, 0.1);
}

.world-bracket__view-button--accent {
  border-color: rgba(244, 201, 93, 0.55);
  color: var(--bracket-gold);
}

.world-bracket__jumpbar {
  justify-content: space-between;
  gap: 6px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.18);
}

.world-bracket__jumpbar button {
  flex: 1;
  min-width: 0;
  border-color: transparent;
  background: transparent;
  font-size: 0.67rem;
}

.world-bracket__jumpbar button:nth-child(2) {
  color: var(--bracket-gold);
  background: rgba(244, 201, 93, 0.08);
}

.world-bracket__stage {
  position: relative;
  width: 100%;
  height: clamp(560px, calc(100vh - 220px), 760px);
  overflow: hidden;
  border: none;
  border-radius: 0;
  background: #041209;
  cursor: grab;
  outline: none;
  touch-action: none;
  user-select: none;
}

.world-bracket__stage::before,
.world-bracket__stage::after {
  display: none !important;
}

.world-bracket__stage.is-dragging {
  cursor: grabbing;
}

.world-bracket__stage:focus-visible {
  box-shadow: 0 0 0 2px var(--km-lime), inset 0 0 0 1px var(--km-lime);
}

.world-bracket__stage-hint {
  position: absolute;
  z-index: 5;
  bottom: 10px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.74);
  background: rgba(4, 11, 6, 0.76);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.38);
  font-size: 0.64rem;
  font-weight: 700;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 240ms ease, transform 240ms ease;
}

.world-bracket__stage-hint.is-dismissed {
  opacity: 0;
  transform: translate(-50%, 8px);
}

.world-bracket__canvas {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 1860px;
  height: 720px;
  transform-origin: 0 0;
  will-change: transform;
}

.world-bracket__canvas.is-animating {
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.world-bracket__round-label {
  position: absolute;
  z-index: 3;
  background: rgba(8, 28, 15, 0.94);
  border: 1.5px solid rgba(50, 199, 54, 0.55);
  border-radius: 9999px;
  padding: 5px 16px;
  color: #32C736;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

.world-bracket__round-label::after,
.world-bracket__round-label::before {
  display: none !important;
}

.world-bracket__round-label--left-r16 { top: 25px; left: 140px; }
.world-bracket__round-label--left-qf { top: 25px; left: 390px; }
.world-bracket__round-label--left-sf { top: 25px; left: 660px; }
.world-bracket__round-label--final { top: 25px; left: 925px; color: var(--bracket-gold); border-color: rgba(244, 201, 93, 0.5); }
.world-bracket__round-label--right-sf { top: 25px; left: 1190px; }
.world-bracket__round-label--right-qf { top: 25px; left: 1460px; }
.world-bracket__round-label--right-r16 { top: 25px; left: 1710px; }

.world-bracket__routes {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 1860px;
  height: 720px;
  overflow: visible;
}

.bracket-route {
  fill: none;
  stroke: rgba(159, 179, 166, 0.3);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.bracket-route--complete {
  stroke: rgba(50, 199, 54, 0.78);
  filter: url(#bracket-route-glow);
  stroke-dasharray: 380;
  stroke-dashoffset: 380;
  animation: bracketRouteReveal 900ms 450ms ease forwards;
}

.bracket-route--champion {
  stroke: var(--bracket-gold);
  filter: url(#bracket-route-glow);
  stroke-width: 3;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: bracketRouteReveal 820ms 860ms ease forwards;
}

.bracket-route--pending {
  stroke-dasharray: 5 6;
  animation: bracketPendingRoute 2.4s linear infinite;
}

.bracket-route.is-muted {
  opacity: 0.12;
  filter: none;
  animation: none;
}

.bracket-route.is-team-focus {
  opacity: 1;
  stroke: var(--bracket-gold);
  stroke-width: 3.5;
  filter: url(#bracket-route-glow);
  animation: none;
  stroke-dashoffset: 0;
}

.world-bracket__match-map {
  position: absolute;
  z-index: 2;
  inset: 0;
}

.world-bracket__match-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 236px;
  overflow: hidden;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  text-align: left;
  background: #07111B;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  transform: translateY(8px) scale(0.97);
  opacity: 0;
  animation: bracketCardEnter 520ms calc(var(--card-delay) * 1ms + 140ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
  cursor: pointer;
}

.world-bracket__match-card:hover,
.world-bracket__match-card:focus-visible,
.world-bracket__match-card.is-selected {
  z-index: 5;
  border-color: var(--km-lime);
  box-shadow: 0 0 0 2px var(--km-lime), 0 10px 28px rgba(0, 0, 0, 0.8);
  outline: none;
}

.world-bracket__match-card.is-muted {
  filter: saturate(0.4) brightness(0.65);
}

.world-bracket__match-card.is-team-focus {
  border-color: var(--bracket-gold);
  box-shadow: 0 0 0 2.5px var(--bracket-gold), 0 0 24px rgba(244, 201, 93, 0.3);
}

.world-bracket__match-card--final {
  width: 252px;
  border-color: rgba(244, 201, 93, 0.78);
}

.world-bracket__match-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: #07111B;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.world-bracket__match-code {
  color: #FFFFFF;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-family: inherit;
}

.world-bracket__match-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 5px;
  background: #1E293B;
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.world-bracket__match-card--live .world-bracket__match-status {
  background: #DC2626;
  color: #FFFFFF;
}

/* Cuerpo Blanco de la Tarjeta (Exacto a la captura) */
.world-bracket__match-body {
  background: #FFFFFF;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.world-bracket__team {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-width: 0;
  padding: 2px 0;
  border-radius: 4px;
}

.world-bracket__team-left {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
}

.world-bracket__crest {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 6px;
  background: var(--team-color, #15803D);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.world-bracket__crest i {
  color: var(--km-lime);
  font-size: 11px;
}

.world-bracket__team-name {
  min-width: 0;
  flex: 1;
  font-size: 0.83rem;
  line-height: 1.18;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  text-overflow: clip;
  overflow: visible;
}

.world-bracket__team.is-winner .world-bracket__team-name {
  color: #000000;
  font-weight: 900;
}

.world-bracket__team.is-loser .world-bracket__team-name,
.world-bracket__team:not(.is-winner) .world-bracket__team-name {
  color: #475569;
  font-weight: 700;
}

.world-bracket__team-score {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 900;
  text-align: center;
  color: #0F172A;
}

.world-bracket__team.is-winner .world-bracket__team-score,
.world-bracket__team-score.is-winner-box {
  background: var(--km-lime) !important;
  color: #FFFFFF !important;
  border-radius: 7px !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 8px rgba(50, 199, 54, 0.45) !important;
}

.world-bracket__champion-prize {
  position: absolute;
  z-index: 5;
  top: 472px;
  left: 928px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  min-height: 104px;
  gap: 14px;
  padding: 12px 18px;
  overflow: hidden;
  border: 2px solid rgba(245, 158, 11, 0.75);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(62, 50, 16, 0.96) 0%, rgba(20, 30, 20, 0.96) 60%, rgba(10, 16, 12, 0.98) 100%);
  box-shadow: 0 0 35px rgba(245, 158, 11, 0.35), 0 14px 34px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 235, 150, 0.35);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.world-bracket__champion-prize:hover {
  transform: translateX(-50%) scale(1.05);
  border-color: #FCD34D;
  box-shadow: 0 0 45px rgba(245, 158, 11, 0.55), 0 18px 40px rgba(0, 0, 0, 0.95);
}

.world-bracket__champion-prize img {
  position: relative;
  z-index: 2;
  width: 68px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(245, 158, 11, 0.65)) drop-shadow(0 0 10px rgba(255, 215, 0, 0.4));
  animation: bracketTrophyFloat 3.2s ease-in-out infinite;
}

.world-bracket__champion-prize div:last-child {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}

.world-bracket__champion-prize span {
  color: #FCD34D;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.world-bracket__champion-prize strong {
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
}

.world-bracket__champion-prize .trophy-tap-cue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--km-lime);
  font-size: 0.62rem;
  font-weight: 800;
  margin-top: 3px;
  letter-spacing: 0.04em;
}

.world-bracket__trophy-orbit {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 175px;
  height: 175px;
  border: 1px solid rgba(244, 201, 93, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.world-bracket__trophy-orbit::before,
.world-bracket__trophy-orbit::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bracket-gold);
  box-shadow: 0 0 10px var(--bracket-gold);
}

.world-bracket__trophy-orbit::before { top: 16px; left: 22px; }
.world-bracket__trophy-orbit::after { right: 15px; bottom: 22px; }

.world-bracket__instruction {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--km-muted);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.45;
}

.world-bracket__instruction i {
  margin-top: 1px;
  color: var(--km-lime);
}

/* ==========================================================================
   MODAL DE DETALLE DEL PARTIDO (CENTRO DE PANTALLA CON TODA LA INFO)
   ========================================================================== */

.bracket-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 16px;
  box-sizing: border-box;
  animation: bracketModalFadeIn 0.22s ease forwards;
}

.bracket-modal-backdrop[hidden] {
  display: none !important;
}

@keyframes bracketModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bracket-modal-card {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 440px;
  max-height: 86vh;
  overflow-y: auto;
  padding: 22px 20px;
  border: 2px solid var(--km-lime);
  border-radius: 20px;
  color: var(--km-white);
  background: linear-gradient(160deg, #101B14 0%, #0A100C 100%);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95), 0 0 35px rgba(50, 199, 54, 0.3);
  animation: bracketCardPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  transform-origin: center center;
}

@keyframes bracketCardPop {
  from {
    transform: scale(0.92);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.world-bracket__detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.world-bracket__detail-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: var(--km-lime);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.world-bracket__detail-header h4 {
  margin: 3px 0 0 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.2;
}

.bracket-modal-close-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.4);
  color: #FFFFFF;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bracket-modal-close-btn:hover {
  border-color: var(--km-lime);
  color: var(--km-lime);
  background: rgba(50, 199, 54, 0.15);
  transform: rotate(90deg);
}

/* Marcador Principal en el Modal (Diseño Deportivo FIFA con Nombres Completos y Autoajuste) */
.world-bracket__scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  border: 1.5px solid rgba(50, 199, 54, 0.35);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.world-bracket__detail-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.world-bracket__detail-team:last-child {
  align-items: center;
  text-align: center;
}

.world-bracket__detail-team .world-bracket__crest {
  order: -1;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.world-bracket__detail-team-name {
  display: block;
  width: 100%;
  font-size: clamp(0.74rem, 2.7vw, 0.94rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  text-overflow: clip;
  overflow: visible;
  text-align: center;
}

.world-bracket__detail-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--km-lime);
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 4px;
  flex-shrink: 0;
}

.world-bracket__detail-score small {
  color: var(--km-muted);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 3px 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

/* Grid de Especificaciones y Metadatos */
.world-bracket__detail-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.world-bracket__detail-meta > div {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.world-bracket__detail-meta > div:last-child {
  grid-column: 1 / -1;
  background: rgba(50, 199, 54, 0.08);
  border-color: rgba(50, 199, 54, 0.25);
}

.world-bracket__detail-meta span {
  display: block;
  margin-bottom: 3px;
  color: var(--km-muted);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.world-bracket__detail-meta strong {
  display: block;
  overflow: hidden;
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
}

/* Pie de Acciones del Modal */
.world-bracket__detail-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

.world-bracket__mvp {
  color: #F59E0B;
  font-size: 0.82rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

.world-bracket__route-button {
  background: var(--km-lime);
  color: #0B0C0E;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 900;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.world-bracket__route-button:hover {
  background: #4EE852;
  transform: translateY(-1px);
}

.world-bracket__route-button:hover,
.world-bracket__route-button:focus-visible {
  color: #0b120c;
  background: var(--km-lime);
  outline: none;
}

.world-bracket__route-button[aria-pressed="true"] {
  color: #0b120c;
  border-color: var(--bracket-gold);
  background: var(--bracket-gold);
}

/* ==========================================================================
   🏆 MODAL MEGA GRANDE DEL TROFEO Y PREMIOS (MEGA TROPHY SHOWCASE MODAL)
   ========================================================================== */

.trophy-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 16px;
  box-sizing: border-box;
  animation: trophyBackdropFade 0.25s ease forwards;
}

.trophy-modal-backdrop[hidden] {
  display: none !important;
}

@keyframes trophyBackdropFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.trophy-modal-card {
  position: relative;
  margin: auto;
  width: 95%;
  max-width: 480px;
  height: 94vh;
  max-height: 94vh;
  overflow-y: auto !important;
  scrollbar-width: thin;
  padding: 16px 16px 14px 16px;
  border: 2px solid #F59E0B;
  border-radius: 24px;
  color: var(--km-white);
  background: linear-gradient(165deg, #18281D 0%, #0A120D 45%, #050806 100%);
  box-shadow: 0 0 60px rgba(245, 158, 11, 0.45), 0 25px 80px rgba(0, 0, 0, 0.95);
  animation: trophyModalPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  text-align: center;
  box-sizing: border-box;
  transform-origin: center center;
}

@keyframes trophyModalPop {
  0% {
    opacity: 0;
    transform: scale(0.85) translateY(24px);
  }
  65% {
    transform: scale(1.02) translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Fondo de Rayos de Luz Dorada en Rotación Continua */
.trophy-light-rays {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 500px;
  background: repeating-conic-gradient(from 0deg, rgba(245, 158, 11, 0.08) 0deg 15deg, transparent 15deg 30deg);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: trophyRaysSpin 24s linear infinite;
}

@keyframes trophyRaysSpin {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}

.trophy-modal-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(245, 158, 11, 0.5);
  background: rgba(0, 0, 0, 0.65);
  color: #F59E0B;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.trophy-modal-close-btn:hover {
  border-color: #F59E0B;
  background: rgba(245, 158, 11, 0.2);
  transform: rotate(90deg) scale(1.1);
}

.trophy-modal-header {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.trophy-kicker-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid #F59E0B;
  color: #F59E0B;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 9999px;
  letter-spacing: 0.5px;
}

.trophy-title-text {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 2px 0 0 0;
  letter-spacing: 0.3px;
  line-height: 1.15;
}

.trophy-sub-text {
  font-size: 10.5px;
  color: var(--km-neutral);
  margin: 0;
  line-height: 1.2;
}

/* Escenario Central del Trofeo MEGA GRANDE (Compacto y Elegante) */
.trophy-stage-wrapper {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: clamp(95px, 14vh, 130px);
  margin: 0;
}

.trophy-spotlight-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 130px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.4) 0%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

.trophy-golden-pedestal {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.8) 0%, rgba(50, 199, 54, 0.35) 50%, transparent 80%);
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.6);
  pointer-events: none;
}

.trophy-mega-img {
  position: relative;
  z-index: 4;
  height: clamp(85px, 13vh, 120px);
  max-width: 100%;
  object-fit: contain;
  animation: megaTrophyFloat 3.2s ease-in-out infinite;
}

@keyframes megaTrophyFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 10px 20px rgba(245, 158, 11, 0.65)) drop-shadow(0 0 12px rgba(255, 215, 0, 0.4));
  }
  50% {
    transform: translateY(-8px) scale(1.04);
    filter: drop-shadow(0 18px 28px rgba(245, 158, 11, 0.85)) drop-shadow(0 0 20px rgba(255, 215, 0, 0.7));
  }
}

/* Partículas Flotantes de Destellos */
.trophy-floating-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.trophy-floating-sparkles .sparkle {
  position: absolute;
  color: #FCD34D;
  text-shadow: 0 0 8px #F59E0B;
  animation: sparkleBlink 2.2s infinite ease-in-out;
}

.sp-1 { top: 10px; left: 60px; font-size: 15px; animation-delay: 0.1s; }
.sp-2 { top: 20px; right: 55px; font-size: 18px; animation-delay: 0.7s; }
.sp-3 { bottom: 20px; left: 45px; font-size: 14px; animation-delay: 1.3s; }
.sp-4 { bottom: 15px; right: 50px; font-size: 16px; animation-delay: 1.9s; }

@keyframes sparkleBlink {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.4);
  }
}

/* Tarjeta de Bolsa en Efectivo */
.trophy-cash-card {
  position: relative;
  z-index: 3;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(50, 199, 54, 0.16) 100%);
  border: 1.5px solid var(--km-lime);
  border-radius: 12px;
  padding: 5px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.cash-kicker {
  font-size: 8.5px;
  font-weight: 900;
  color: var(--km-lime);
  letter-spacing: 0.6px;
}

.cash-amount-text {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 0.4px;
  line-height: 1.1;
  text-shadow: 0 0 12px rgba(50, 199, 54, 0.5);
}

.cash-currency {
  font-size: 14px;
  color: var(--km-lime);
}

.cash-sub-desc {
  font-size: 10px;
  color: #D4D9D6;
  font-weight: 600;
  line-height: 1.2;
}

/* Grid del Podio (1er, 2do, 3er Lugar y MVP en Cuadrícula 2x2 Estática) */
.trophy-podium-grid {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.podium-card {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}

.podium-card.gold {
  border-color: rgba(245, 158, 11, 0.45);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.podium-card.silver {
  border-color: rgba(203, 213, 225, 0.3);
  background: linear-gradient(135deg, rgba(203, 213, 225, 0.08) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.podium-card.bronze {
  border-color: rgba(217, 119, 6, 0.3);
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.08) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.podium-card.mvp {
  border-color: rgba(50, 199, 54, 0.3);
  background: linear-gradient(135deg, rgba(50, 199, 54, 0.08) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.podium-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.podium-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.podium-info strong {
  font-size: 11px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  white-space: normal;
  overflow: visible;
  display: block;
}

.podium-info span {
  font-size: 9.5px;
  color: var(--km-neutral);
  line-height: 1.35;
  display: block;
  overflow: visible;
  white-space: normal;
}

/* Botones de Acción en el Modal */
.trophy-actions-row {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.btn-share-trophy {
  flex: 1;
  background: var(--km-lime);
  color: #0B0C0E;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 12px var(--km-lime-glow);
}

.btn-share-trophy:hover {
  background: #4EE852;
  transform: translateY(-2px);
}

.btn-close-trophy {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  border-radius: 10px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-close-trophy:hover {
  background: rgba(255, 255, 255, 0.2);
}

@media (max-height: 640px) {
  .trophy-modal-card {
    padding: 8px 10px 8px 10px;
    gap: 4px;
  }
  .trophy-stage-wrapper {
    height: 70px;
  }
  .trophy-mega-img {
    height: 62px;
  }
  .cash-amount-text {
    font-size: 20px;
  }
  .podium-card {
    padding: 4px 6px;
  }
  .podium-info span {
    display: block; overflow: visible;
  }
}

@keyframes bracketLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(50, 199, 54, 0.55); }
  60% { box-shadow: 0 0 0 6px rgba(50, 199, 54, 0); }
}

@keyframes bracketCardEnter {
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes bracketRouteReveal {
  to { stroke-dashoffset: 0; }
}

@keyframes bracketPendingRoute {
  to { stroke-dashoffset: -44; }
}

@keyframes bracketScorePop {
  0% { transform: scale(0.74); }
  55% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes bracketTrophyFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-5px) rotate(2deg); }
}

@keyframes bracketDetailIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 410px) {
  .world-bracket { padding: 13px; }
  .world-bracket__toolbar { align-items: flex-start; flex-direction: column; }
  .world-bracket__view-controls { width: 100%; justify-content: stretch; }
  .world-bracket__view-button { flex: 1; }
  .world-bracket__summary-status { width: 100%; margin-left: 0; }
  .world-bracket__jumpbar button { padding-inline: 5px; font-size: 0.61rem; }
}

@media (prefers-reduced-motion: reduce) {
  .world-bracket *,
  .world-bracket *::before,
  .world-bracket *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Party Calculator Card */
.party-calc-card {
  background: var(--km-asphalt);
  border: 1px solid var(--km-lime);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.calc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.calc-total {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--km-lime);
}

.calc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--km-surface-variant);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.step-btn {
  background: var(--km-asphalt);
  border: 1px solid var(--km-stroke);
  color: var(--km-white);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 800;
}

.addon-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--km-neutral);
  cursor: pointer;
}

/* Player Pass & Profile */
.player-pass {
  background: linear-gradient(135deg, #161B18 0%, #1F2E23 100%);
  border: 2px solid var(--km-lime);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 10px 30px rgba(50, 199, 54, 0.2);
}

.pass-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pass-tag {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--km-lime);
}

.pass-tier {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}

.pass-qr-box {
  background: #0B0C0E;
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.qr-code-icon {
  font-size: 54px;
  color: var(--km-lime);
}

.pass-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.pass-stat {
  background: rgba(0, 0, 0, 0.35);
  border-radius: var(--radius-sm);
  padding: 8px 4px;
  text-align: center;
}

.pass-stat .num {
  font-size: 15px;
  font-weight: 900;
  color: var(--km-lime);
}

.pass-stat .lbl {
  font-size: 9px;
  color: var(--km-muted);
}

/* Tactical Pitch */
.pitch-diagram {
  background: #184725;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
  height: 280px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
}

.pitch-diagram .center-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
}

.pitch-diagram .half-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.7);
}

.pitch-dot {
  width: 32px;
  height: 32px;
  background: var(--km-lime);
  color: #0B0C0E;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 11px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

/* Modals */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-backdrop.open {
  display: flex;
}

.modal-window {
  background: var(--km-asphalt);
  border: 1px solid var(--km-stroke);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
  animation: modalPop 0.25s ease forwards;
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  color: var(--km-white);
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--km-muted);
  font-size: 20px;
  cursor: pointer;
}

.modal-close:hover {
  color: #fff;
}

/* Form inputs in modal */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--km-neutral);
}

.form-input {
  background: var(--km-surface-variant);
  border: 1px solid var(--km-stroke);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--km-white);
  font-size: 13px;
  outline: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-input:focus {
  border-color: var(--km-lime);
  box-shadow: 0 0 0 3px rgba(184,255,98,.15), 0 0 12px rgba(184,255,98,.08);
  background: rgba(184,255,98,.03);
}

select.form-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2393a19a'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
  cursor: pointer;
}

select.form-input option {
  background-color: var(--km-surface);
  color: var(--km-white);
  font-weight: 600;
  padding: 12px;
}

/* Time slot pills in booking modal */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.slot-btn {
  background: var(--km-surface-variant);
  border: 1px solid var(--km-stroke);
  color: var(--km-white);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}

.slot-btn.selected {
  background: var(--km-lime);
  color: #0B0C0E;
  border-color: var(--km-lime);
}

/* Bottom Navigation Bar (4 Pestañas Fijas: Inicio, Canchas, Reservas, Torneos) */
.app-nav {
  background: var(--km-black);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 8px 4px calc(4px + env(safe-area-inset-bottom, 0px)) 4px;
  flex-shrink: 0;
  z-index: 100;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  padding: 2px 0;
  border-radius: 0;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.nav-icon-pill {
  width: 58px;
  height: 32px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-icon-pill i {
  font-size: 20px;
  color: #FFFFFF;
  transition: color 0.2s ease;
}

.nav-item span {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1px;
  color: #FFFFFF;
  transition: color 0.2s ease, font-weight 0.2s ease;
}

/* Active State matching exact reference image */
.nav-item.active {
  background: transparent;
}

.nav-item.active .nav-icon-pill {
  background: var(--km-lime); /* #32C736 */
}

.nav-item.active .nav-icon-pill i {
  color: #000000; /* Dark icon inside green pill */
}

.nav-item.active span {
  color: var(--km-lime); /* Bright green text */
  font-weight: 700;
}

.nav-item:hover:not(.active) .nav-icon-pill {
  background: rgba(255, 255, 255, 0.08);
}

/* Barra inferior — modo claro */
[data-theme="light"] .app-nav {
  background: #FFFFFF;
  border-top: 1px solid var(--km-stroke);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .nav-item,
[data-theme="light"] .nav-item span,
[data-theme="light"] .nav-icon-pill i {
  color: #2A362E;
}
[data-theme="light"] .nav-item:hover:not(.active) .nav-icon-pill {
  background: rgba(27, 122, 39, 0.1);
}
[data-theme="light"] .nav-item.active .nav-icon-pill {
  background: var(--km-emerald);
}
[data-theme="light"] .nav-item.active .nav-icon-pill i {
  color: #FFFFFF;
}
[data-theme="light"] .nav-item.active span {
  color: var(--km-emerald);
}

/* Quick arcade navigation: light sweep, directional entry and one icon impulse. */
.screen-view.nav-enter {
  animation: appNavEnter 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes appNavEnter {
  from { opacity: 0.35; transform: translateX(var(--nav-shift, 22px)) scale(0.99); }
  to { opacity: 1; transform: none; }
}
.app-frame .app-nav-fx {
  --nav-accent: var(--km-lime);
  position: absolute !important;
  inset: 0;
  z-index: 110 !important;
  overflow: hidden;
  pointer-events: none;
}
.app-frame .app-nav-fx-party { --nav-accent: var(--bracket-gold); }
.app-nav-fx::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -20%;
  width: 34%;
  height: 140%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--nav-accent) 14%, transparent) 48%, color-mix(in srgb, var(--nav-accent) 55%, transparent) 50%, transparent 53%);
  animation: navLightSweep 0.24s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.app-nav-fx::after {
  content: '';
  position: absolute;
  inset: 12px;
  background:
    linear-gradient(var(--nav-accent), var(--nav-accent)) left top / 32px 2px no-repeat,
    linear-gradient(var(--nav-accent), var(--nav-accent)) left top / 2px 16px no-repeat,
    linear-gradient(var(--nav-accent), var(--nav-accent)) right bottom / 32px 2px no-repeat,
    linear-gradient(var(--nav-accent), var(--nav-accent)) right bottom / 2px 16px no-repeat;
  animation: navFramePing 0.24s ease-out both;
}
@keyframes navLightSweep {
  0% { opacity: 0; transform: translateX(calc(var(--nav-direction, 1) * -280%)) skewX(-18deg); }
  20% { opacity: 0.8; }
  100% { opacity: 0; transform: translateX(calc(var(--nav-direction, 1) * 280%)) skewX(-18deg); }
}
@keyframes navFramePing {
  0%, 100% { opacity: 0; }
  25% { opacity: 0.5; }
}
.nav-icon-pill { position: relative; overflow: visible; }
.nav-icon-pill::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--km-lime);
  opacity: 0;
  pointer-events: none;
}
.nav-item.nav-animating .nav-icon-pill::after { animation: navShockwave 0.28s ease-out both; }
.nav-item.nav-animating .nav-icon-pill { animation: navPillSnap 0.24s ease-out both; }
.nav-item.nav-animating span { animation: navLabelSnap 0.24s ease-out both; }
@keyframes navShockwave {
  from { opacity: 0.65; transform: scale(0.9); }
  to { opacity: 0; transform: scale(1.45); }
}
@keyframes navPillSnap {
  0% { transform: scale(0.92); }
  45% { transform: translateY(-3px) scale(1.08); }
  100% { transform: none; }
}
@keyframes navLabelSnap {
  from { transform: translateY(2px); opacity: 0.7; }
  to { transform: none; opacity: 1; }
}
#nav-home.nav-animating .nav-icon-pill i,
#nav-profile.nav-animating .nav-icon-pill i { animation: navIconJump 0.24s ease-out both; }
#nav-courts.nav-animating .nav-icon-pill i { animation: navBallSpin 0.28s ease-out both; }
#nav-bookings.nav-animating .nav-icon-pill i { animation: navBookmarkFlip 0.28s ease-out both; }
#nav-tournaments.nav-animating .nav-icon-pill i,
#nav-party.nav-animating .nav-icon-pill i { animation: navIconCelebrate 0.28s ease-out both; }
@keyframes navIconJump {
  45% { transform: translateY(-3px) scale(1.1); }
}
@keyframes navBallSpin {
  from { transform: rotate(-180deg) scale(0.9); }
  to { transform: none; }
}
@keyframes navBookmarkFlip {
  from { transform: rotateY(-90deg); }
  to { transform: none; }
}
@keyframes navIconCelebrate {
  25% { transform: rotate(-12deg) scale(1.12); }
  60% { transform: rotate(7deg) scale(1.05); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .screen-view,
  .nav-item .nav-icon-pill,
  .nav-item .nav-icon-pill::after,
  .nav-item .nav-icon-pill i,
  .nav-item span { animation: none !important; transition: none !important; }
  .app-nav-fx { display: none; }
}

/* ⚡ Brutal Splash Screen Overlay */
.splash-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #0B0C0E;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.splash-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-spotlight {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(130vw, 720px);
  height: min(130vw, 720px);
  background: radial-gradient(circle, rgba(50, 199, 54, 0.28) 0%, transparent 68%);
  filter: blur(40px);
}

.pitch-lines-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.12;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pitch-lines-bg .field-circle {
  flex-shrink: 0;
  width: min(120vw, 560px);
  height: min(120vw, 560px);
  border: 2px solid var(--km-lime);
  border-radius: 50%;
}

.pitch-lines-bg .field-line {
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--km-lime);
}

.splash-card {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 560px;
  height: 100%;
  display: grid;
  /* fila 1 vacía + logo + fila 3 con el texto: el logo queda en el centro exacto */
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  text-align: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
}

.splash-card::before { content: ''; }

/* Logo grande en el centro (WebP con fondo transparente: solo se ve el emblema) */
.splash-logo-wrap {
  width: min(92vw, 500px, calc(42vh * 1.29));
  width: min(92vw, 500px, calc(42dvh * 1.29));
  filter: drop-shadow(0 0 26px rgba(50, 199, 54, 0.45));
}

.splash-logo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 920 / 713;
}

.splash-bottom {
  align-self: start;
  width: 100%;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* Entrada animada (se reinicia al volver a mostrar el splash con el botón ⚡) */
.splash-overlay:not(.hidden) .splash-logo-wrap {
  animation: splashLogoIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both, splashGlow 3s 1s infinite ease-in-out;
}
.splash-overlay:not(.hidden) .splash-text { animation: splashRise 0.7s 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
.splash-overlay:not(.hidden) .splash-enter-btn { animation: splashRise 0.7s 0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }

@media (max-height: 520px) {
  .splash-card { grid-template-rows: auto auto; align-content: center; gap: 8px; }
  .splash-card::before { display: none; }
  .splash-logo-wrap { width: min(50vw, 230px); }
  .splash-bottom { margin-top: 4px; gap: 10px; }
}

@keyframes splashLogoIn {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes splashGlow {
  0%, 100% { filter: drop-shadow(0 0 22px rgba(50, 199, 54, 0.38)); }
  50%      { filter: drop-shadow(0 0 38px rgba(50, 199, 54, 0.7)); }
}
@keyframes splashRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .splash-overlay:not(.hidden) .splash-logo-wrap,
  .splash-overlay:not(.hidden) .splash-text,
  .splash-overlay:not(.hidden) .splash-enter-btn { animation: none; }
}

/* El splash es siempre oscuro: fija sus colores aunque la app esté en modo claro */
.splash-overlay {
  --km-lime: #32C736;
  --km-lime-glow: rgba(50, 199, 54, 0.35);
  --km-neutral: #D4D9D6;
}

.splash-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.splash-text h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
}

.splash-sub {
  font-size: 11px;
  font-weight: 800;
  color: var(--km-lime);
  letter-spacing: 1px;
}

.splash-desc {
  font-size: 12px;
  color: var(--km-neutral);
}

.splash-enter-btn {
  background: #45E04A;
  color: #071209;
  border: none;
  border-radius: var(--radius-pill);
  padding: 14px 28px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 0 20px var(--km-lime-glow);
  transition: all 0.2s ease;
}

.splash-enter-btn > span,
.splash-enter-btn > i {
  color: #071209;
}

.splash-enter-btn:hover {
  transform: translateY(-2px);
  background: #4EE852;
}

/* 🌐 Selector de Idioma Post-Splash (USA 🇺🇸 & SPAIN 🇪🇸) */
.language-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #080D0A;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.language-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.language-card {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 24px 20px;
  width: 100%;
  max-width: 420px;
  animation: modalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.language-logo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2px solid var(--km-lime);
  box-shadow: 0 0 24px var(--km-lime-glow);
  object-fit: contain;
  background: #000;
}

.language-text h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  margin: 0;
}

.language-sub {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--km-lime);
  letter-spacing: 1px;
  margin-top: 3px;
}

.language-desc {
  font-size: 12px;
  color: var(--km-neutral);
  margin-top: 3px;
}

.flags-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  margin-top: 10px;
}

.flag-card {
  background: linear-gradient(145deg, #152219 0%, #0E1612 100%);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
}

.flag-card:hover, .flag-card:focus-visible {
  border-color: var(--km-lime);
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8), 0 0 25px rgba(50, 199, 54, 0.4);
  outline: none;
}

.flag-icon-wrapper {
  width: 78px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.flag-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.flag-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.flag-lang-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
  color: #FFFFFF;
}

.flag-country-sub {
  font-size: 11px;
  color: var(--km-neutral);
  font-weight: 600;
}

.flag-badge-pill {
  background: rgba(50, 199, 54, 0.18);
  border: 1px solid var(--km-lime);
  color: var(--km-lime);
  font-size: 10px;
  font-weight: 900;
  padding: 4px 12px;
  border-radius: 9999px;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.flag-card:hover .flag-badge-pill {
  background: var(--km-lime);
  color: #0B0C0E;
  box-shadow: 0 0 10px var(--km-lime-glow);
}

/* ==========================================================================
   🔐 PANTALLA DE AUTENTICACIÓN / LOGIN & REGISTRO DE JUGADOR
   ========================================================================== */
.auth-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: radial-gradient(circle at 50% 10%, #0d2616 0%, #07100a 60%, #030604 100%);
  z-index: 9997;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 12px;
  box-sizing: border-box;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.auth-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.auth-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: auto;
  animation: modalPop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.auth-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.auth-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(50, 199, 54, 0.12);
  border: 1px solid rgba(50, 199, 54, 0.3);
  padding: 5px 12px;
  border-radius: 9999px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--km-lime);
}

.auth-tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--km-lime);
  box-shadow: 0 0 8px var(--km-lime-glow);
  animation: pulse 1.5s infinite;
}

.auth-card {
  background: rgba(14, 21, 17, 0.88);
  border: 1px solid rgba(50, 199, 54, 0.25);
  border-radius: 24px;
  padding: 24px 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 40px rgba(50, 199, 54, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.auth-logo-badge {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #000;
  border: 2px solid var(--km-lime);
  box-shadow: 0 0 20px var(--km-lime-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  margin-bottom: 2px;
}

.auth-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.auth-header h2 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 0.6px;
  margin: 0;
  text-transform: uppercase;
}

.auth-header p {
  font-size: 12px;
  color: var(--km-neutral);
  line-height: 1.45;
  margin: 0;
  max-width: 320px;
}

.auth-tabs {
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.auth-tab {
  background: transparent;
  border: none;
  color: var(--km-neutral);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-tab.active {
  background: linear-gradient(135deg, #32C736 0%, #28A52C 100%);
  color: #050E06;
  font-weight: 900;
  box-shadow: 0 4px 14px rgba(50, 199, 54, 0.35);
}

.auth-tab:hover:not(.active) {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.04);
}

.auth-feedback {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #FCA5A5;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

.auth-feedback.success {
  background: rgba(50, 199, 54, 0.15);
  border-color: rgba(50, 199, 54, 0.4);
  color: #86EFAC;
}

.auth-feedback.hidden {
  display: none !important;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.auth-form.hidden {
  display: none !important;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-field label {
  font-size: 11.5px;
  font-weight: 700;
  color: #D1D5DB;
  letter-spacing: 0.3px;
}

.auth-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-forgot-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -10px -8px -10px 0;
  padding: 0 8px;
  background: transparent;
  border: 0;
  font-size: 11px;
  color: var(--km-lime);
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.auth-forgot-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-icon {
  position: absolute;
  left: 14px;
  color: #6B7280;
  font-size: 14px;
  pointer-events: none;
}

.auth-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 40px 12px 38px;
  font-size: 13.5px;
  color: #FFFFFF;
  box-sizing: border-box;
  font-family: inherit;
  transition: all 0.2s ease;
}

.auth-input:focus {
  outline: none;
  border-color: var(--km-lime);
  background: rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 0 3px rgba(50, 199, 54, 0.18);
}

.auth-pwd-toggle {
  position: absolute;
  right: 0;
  background: transparent;
  border: none;
  color: #6B7280;
  cursor: pointer;
  padding: 0;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  font-size: 14px;
  transition: color 0.2s ease;
}

.auth-pwd-toggle:hover {
  color: var(--km-lime);
}

.auth-row-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 0 2px;
}

.auth-remember-lbl {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 8px;
  font-size: 11.5px;
  color: var(--km-neutral);
  cursor: pointer;
}

.auth-remember-lbl input[type="checkbox"] {
  accent-color: var(--km-lime);
  cursor: pointer;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.auth-submit-btn {
  background: linear-gradient(135deg, #32C736 0%, #28A52C 100%);
  border: none;
  border-radius: 12px;
  color: #050E06;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.6px;
  padding: 13px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 18px rgba(50, 199, 54, 0.35);
  transition: all 0.2s ease;
  margin-top: 4px;
}

.auth-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(50, 199, 54, 0.5);
  background: #3ee443;
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 4px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-divider span {
  padding: 0 12px;
  font-size: 10.5px;
  font-weight: 700;
  color: #6B7280;
  letter-spacing: 0.8px;
}

.auth-social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 10px;
}

.auth-social-btn[hidden] {
  display: none;
}

.auth-social-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #FFFFFF;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.auth-social-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}



/* ==========================================================================
   🔔 CAMPANA Y CENTRO DE NOTIFICACIONES DE LA APP
   ========================================================================== */
.notif-bell-btn {
  position: relative;
  transition: transform 0.2s ease;
}

.notif-bell-btn:hover {
  transform: scale(1.08);
}

.header-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #EF4444;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 900;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
  animation: pulse 1.6s infinite;
}

.app-notif-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 6, 4, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.app-notif-drawer {
  width: 100%;
  max-width: 430px;
  background: #09120B;
  border-left: 1px solid rgba(50, 199, 54, 0.25);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.85);
  height: 100%;
  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.app-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(14, 25, 18, 0.8);
}

.app-notif-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-notif-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(50, 199, 54, 0.15);
  border: 1px solid rgba(50, 199, 54, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--km-lime);
  font-size: 16px;
  box-shadow: 0 0 12px var(--km-lime-glow);
}

.app-notif-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 0.4px;
}

.app-notif-subtitle {
  font-size: 11px;
  color: var(--km-neutral);
  font-weight: 600;
}

.app-notif-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-notif-btn-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #D1D5DB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.app-notif-btn-icon:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.app-notif-filter-pills {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.app-notif-filter-pills::-webkit-scrollbar {
  display: none;
}

.notif-filter-pill {
  padding: 6px 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--km-neutral);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.notif-filter-pill.active {
  background: var(--km-lime);
  color: #061108;
  font-weight: 900;
  border-color: var(--km-lime);
  box-shadow: 0 0 10px var(--km-lime-glow);
}

.app-notif-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
  -webkit-overflow-scrolling: touch;
}

.app-notif-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notif-card {
  background: rgba(18, 28, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease;
  position: relative;
  cursor: default;
}

.notif-card:hover {
  border-color: rgba(50, 199, 54, 0.3);
  transform: translateY(-1px);
}

.notif-card.unread {
  background: rgba(22, 38, 27, 0.95);
  border-color: rgba(50, 199, 54, 0.45);
  box-shadow: 0 4px 16px rgba(50, 199, 54, 0.08);
}

.notif-unread-dot {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--km-lime);
  box-shadow: 0 0 8px var(--km-lime-glow);
}

.notif-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notif-cat-badge {
  font-size: 10px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.notif-cat-badge.tournament {
  background: rgba(245, 158, 11, 0.18);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.notif-cat-badge.court {
  background: rgba(50, 199, 54, 0.18);
  color: var(--km-lime);
  border: 1px solid rgba(50, 199, 54, 0.4);
}

.notif-cat-badge.store {
  background: rgba(236, 72, 153, 0.18);
  color: #F472B6;
  border: 1px solid rgba(236, 72, 153, 0.4);
}

.notif-cat-badge.event {
  background: rgba(168, 85, 247, 0.18);
  color: #C084FC;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.notif-cat-badge.urgent {
  background: rgba(239, 68, 68, 0.2);
  color: #F87171;
  border: 1px solid rgba(239, 68, 68, 0.5);
}

.notif-cat-badge.general {
  background: rgba(59, 130, 246, 0.18);
  color: #60A5FA;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.notif-time {
  font-size: 10.5px;
  color: var(--km-neutral);
  margin-left: auto;
  margin-right: 14px;
}

.notif-card-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.35;
}

.notif-card-msg {
  font-size: 12px;
  color: #D1D5DB;
  line-height: 1.45;
  margin: 0;
}

.notif-action-btn {
  align-self: flex-start;
  margin-top: 4px;
  background: rgba(50, 199, 54, 0.12);
  border: 1px solid rgba(50, 199, 54, 0.35);
  color: var(--km-lime);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.notif-action-btn:hover {
  background: var(--km-lime);
  color: #061108;
  transform: translateX(2px);
}

.notif-empty-state {
  text-align: center;
  padding: 48px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.notif-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--km-neutral);
}

.notif-empty-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
}

.notif-empty-desc {
  font-size: 12px;
  color: var(--km-neutral);
  max-width: 260px;
  line-height: 1.4;
  margin: 0;
}

.app-notif-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(14, 25, 18, 0.8);
  font-size: 11px;
  color: var(--km-neutral);
}

.app-notif-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.app-notif-refresh-btn {
  background: transparent;
  border: none;
  color: var(--km-lime);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.app-notif-refresh-btn:hover {
  text-decoration: underline;
}

/* Firestore Sync Card */
.firestore-sync-card {
  background: var(--km-asphalt);
  border: 1px solid var(--km-stroke);
  border-left: 3px solid var(--km-lime);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cloud-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--km-lime);
  animation: pulse 1.5s infinite;
}

/* 2D Court Visual Map (CourtVisualMapView) */
.court-map-wrapper {
  background: var(--km-asphalt);
  border: 1px solid var(--km-stroke);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.map-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--km-white);
  letter-spacing: 0.5px;
}

.complex-2d-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.map-cell {
  background: var(--km-surface-variant);
  border: 1.5px solid var(--km-stroke);
  border-radius: var(--radius-md);
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.map-cell:hover {
  border-color: var(--km-lime);
  box-shadow: 0 0 15px rgba(50, 199, 54, 0.2);
  transform: translateY(-2px);
}

.map-cell.turf {
  background: linear-gradient(135deg, #16261b 0%, #1a3321 100%);
  border-color: var(--km-emerald);
}

.cell-status {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  width: fit-content;
}

.cell-status.avail {
  background: var(--km-lime);
  color: #0B0C0E;
}

.map-cell h4 {
  font-size: 13px;
  font-weight: 800;
  color: var(--km-white);
}

.map-cell p {
  font-size: 10px;
  color: var(--km-neutral);
}

/* La celda de césped lleva un fondo verde oscuro fijo: su texto no debe invertirse en modo claro */
.map-cell.turf h4 { color: #FFFFFF; }
.map-cell.turf p { color: #D4D9D6; }

.cell-price {
  font-size: 12px;
  font-weight: 900;
  color: var(--km-lime);
  margin-top: 4px;
}

/* User QR Pass Mini in Bookings */
.user-qr-pass-mini {
  background: linear-gradient(135deg, rgba(15, 26, 19, 0.9) 0%, rgba(11, 12, 14, 0.98) 100%);
  border: 1px solid rgba(50, 199, 54, 0.35);
  border-radius: var(--radius-md, 12px);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}

.user-qr-pass-mini::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3.5px;
  height: 100%;
  background: var(--km-lime, #32C736);
  box-shadow: 0 0 8px var(--km-lime, #32C736);
}

.user-qr-pass-mini:hover {
  border-color: var(--km-lime, #32C736);
  box-shadow: 0 6px 20px rgba(50, 199, 54, 0.25), 0 0 12px rgba(50, 199, 54, 0.15);
  transform: translateY(-1px);
}

.user-qr-thumb {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 3px;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  border: 1.5px solid rgba(50, 199, 54, 0.5);
  transition: all 0.25s ease;
  overflow: hidden;
}

.user-qr-pass-mini:hover .user-qr-thumb {
  border-color: var(--km-lime, #32C736);
  box-shadow: 0 0 12px rgba(50, 199, 54, 0.55);
  transform: scale(1.05);
}

.user-qr-thumb-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.user-qr-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--km-lime, #32C736);
  box-shadow: 0 0 6px var(--km-lime, #32C736);
  display: inline-block;
  animation: qrDotPulse 2s infinite ease-in-out;
}

@keyframes qrDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}

.user-qr-expand-badge {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 8px;
  background: rgba(50, 199, 54, 0.12);
  border: 1px solid rgba(50, 199, 54, 0.25);
  display: grid;
  place-items: center;
  color: var(--km-lime, #32C736);
  font-size: 12px;
  transition: all 0.2s ease;
}

.user-qr-pass-mini:hover .user-qr-expand-badge {
  background: var(--km-lime, #32C736);
  color: #07110A;
  box-shadow: 0 0 10px rgba(50, 199, 54, 0.6);
  transform: scale(1.08);
}

/* Standings Table */
.standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.standings-table th, .standings-table td {
  padding: 8px 10px;
  text-align: left;
}

.standings-table th {
  color: var(--km-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--km-stroke);
}

.standings-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.standings-table tr.top-club td {
  color: var(--km-lime);
}

/* Team Showcase Card & Jersey Designer */
.team-showcase-card {
  background: linear-gradient(135deg, #161B18 0%, #1d2720 100%);
  border: 1.5px solid var(--km-stroke);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kit-preview-container {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--km-surface-variant);
  border-radius: var(--radius-md);
  padding: 12px;
}

.jersey-graphic {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jersey-body {
  width: 50px;
  height: 60px;
  background: var(--km-lime);
  border-radius: 6px 6px 2px 2px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.jersey-pattern-stripes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(90deg, transparent, transparent 8px, #0B0C0E 8px, #0B0C0E 16px);
  opacity: 0.6;
}

.jersey-number {
  position: relative;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.player-avatar-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--km-emerald);
  border: 2px solid var(--km-lime);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
}

.squad-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--km-surface-variant);
  border-radius: var(--radius-sm);
}

.player-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  color: var(--km-lime);
  min-width: 20px;
}

.spec-row {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--km-neutral);
}

/* Feedback aspects */
.feedback-aspect-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--km-surface-variant);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}

.stars-row {
  display: flex;
  gap: 4px;
  color: #F59E0B;
  cursor: pointer;
}

/* ==========================================================================
   ELMHURST ATHLETICS TOP BAR & TOURNAMENTS SCREEN REFINEMENTS (MATCHING SCREENSHOT)
   ========================================================================== */

/* Top Bar Details */
.header-location {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--km-neutral);
}

.header-hours {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--km-lime);
  margin-top: 1px;
}

.dot-green {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--km-lime);
  display: inline-block;
}

.dot-red {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--km-danger);
  display: inline-block;
  margin-left: 2px;
}

/* Screen Hero Titles */
.screen-heading {
  margin-bottom: 4px;
}

.screen-title-hero {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  color: var(--km-white);
  letter-spacing: 0.2px;
  line-height: 1.15;
}

.screen-sub-hero {
  font-size: 12px;
  color: var(--km-neutral);
  line-height: 1.45;
  margin-top: 6px;
}

/* 3-Pill Filter Bar */
.tournament-filter-bar {
  display: flex;
  gap: 8px;
  margin: 12px 0 16px 0;
}

.tourn-filter-pill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 10px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--km-stroke);
  background: var(--km-asphalt);
  color: #FFFFFF;
  transition: all 0.2s ease;
}

.tourn-filter-pill.active {
  background: var(--km-lime);
  color: #0B0C0E;
  border-color: var(--km-lime);
  box-shadow: 0 4px 14px rgba(50, 199, 54, 0.3);
}

.pill-badge-live {
  background: rgba(11, 12, 14, 0.25);
  color: #0B0C0E;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.tourn-filter-pill:not(.active) .pill-badge-live {
  background: rgba(50, 199, 54, 0.2);
  color: var(--km-lime);
}

.pill-badge-count {
  background: rgba(50, 199, 54, 0.2);
  color: var(--km-lime);
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 9999px;
}

/* Tournament Neon Green Border Card */
.tournament-neon-card {
  background: #0B0C0E;
  border: 2px solid var(--km-lime);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(50, 199, 54, 0.2);
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.tournament-banner-wrapper {
  position: relative;
  height: 180px;
  width: 100%;
}

.tournament-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tournament-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 12, 14, 0.2) 0%, rgba(11, 12, 14, 0.95) 100%);
}

.tournament-floating-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.badge-live-playoffs {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  padding: 5px 12px;
  font-size: 10px;
  font-weight: 800;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.3px;
}

.badge-teams-count {
  background: var(--km-lime);
  color: #0B0C0E;
  border-radius: 9999px;
  padding: 5px 12px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.3px;
}

.tournament-body-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.tournament-fifa-kicker {
  font-size: 11px;
  font-weight: 800;
  color: var(--km-lime);
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.tournament-main-heading {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.2;
  margin-bottom: 12px;
}

.tournament-meta-specs {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--km-neutral);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.tournament-champion-prize-box {
  background: #0E1410;
  border: 1px solid #1E3323;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.prize-trophy-thumb {
  width: 52px;
  height: 52px;
  background: #000000;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--km-stroke);
  flex-shrink: 0;
}

.prize-trophy-thumb img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.prize-kicker-label {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--km-lime);
  letter-spacing: 0.6px;
}

.prize-value-text {
  font-size: 18.5px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 4px 0;
  letter-spacing: 0.2px;
}

.prize-sub-text {
  font-size: 12.5px;
  color: var(--km-neutral);
  font-weight: 600;
}

.btn-world-bracket {
  background: var(--km-lime);
  color: #0B0C0E;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 900;
  border: none;
  border-radius: 12px;
  padding: 16px 18px;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
  box-shadow: 0 0 18px var(--km-lime-glow);
}

.btn-world-bracket:hover {
  background: #4EE852;
  transform: translateY(-1px);
}

.btn-live-final-row {
  background: rgba(0, 0, 0, 0.4);
  border: 1.5px solid var(--km-lime);
  color: var(--km-lime);
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 12px;
  padding: 14px 16px;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn-live-final-row:hover {
  background: rgba(50, 199, 54, 0.12);
}

/* ==========================================================================
   TOURNAMENT DETAIL VIEW (ÁRBOL MUNDIAL ELMHURST ATHLETICS QUEENS)
   ========================================================================== */

#tournament-detail-view {
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  flex: 1 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  display: none;
  flex-direction: column !important;
  background: #041209 !important;
}

#tournament-detail-view:not([style*="display: none"]) {
  display: flex !important;
}

#tournament-detail-view[style*="display: none"] {
  display: none !important;
}

#tournament-detail-view .bracket-custom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px 4px 14px;
  flex-shrink: 0;
  background: #041209;
}

#tournament-detail-view .bracket-mode-row {
  padding: 2px 14px 4px 14px;
  flex-shrink: 0;
  background: #041209;
}

#tournament-detail-view .bracket-jump-row {
  padding: 0 14px 6px 14px;
  flex-shrink: 0;
  background: #041209;
}

#tournament-detail-view .world-bracket {
  flex: 1 !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

#tournament-detail-view .world-bracket__stage {
  position: relative;
  width: 100%;
  flex: 1 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  border: none;
  border-radius: 0;
  background: #041209;
  cursor: grab;
  outline: none;
  touch-action: none;
  user-select: none;
}

.bracket-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.bracket-back-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.bracket-header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bracket-kicker-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fifa-kicker-text {
  font-size: 11px;
  font-weight: 800;
  color: #4ADE80;
  letter-spacing: 0.6px;
}

.km-kicker-pill {
  background: var(--km-lime);
  color: #0B0C0E;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.bracket-screen-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bracket-trophy-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(14, 41, 22, 0.9);
  border: 1.5px solid var(--km-lime);
  color: var(--km-lime);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
  box-shadow: 0 0 10px rgba(50, 199, 54, 0.25);
}

.bracket-trophy-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 16px rgba(50, 199, 54, 0.4);
}

/* Fila 1: Pestañas de Modo (Árbol Completo | Por Rondas | Fase de Grupos) */
.bracket-mode-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.bracket-mode-pill {
  flex: 1;
  padding: 10px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  border: none;
  cursor: pointer;
  background: #0D1612;
  color: #94A3B8;
  transition: all 0.2s;
}

.bracket-mode-pill:hover {
  color: #FFFFFF;
}

.bracket-mode-pill.active {
  background: var(--km-lime);
  color: #0B0C0E;
  font-weight: 900;
  box-shadow: 0 0 14px rgba(50, 199, 54, 0.4);
}

/* Fila 2: Salto Rápido (◀ Llave Izq | 🏆 Gran Final y Trofeo | Llave Der ▶) */
.bracket-jump-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.bracket-jump-pill {
  flex: 1;
  min-width: 0;
  padding: 7px 6px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid #1A2E20;
  background: #09130D;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.bracket-jump-pill:hover {
  border-color: var(--km-lime);
}

.jump-arrow-tag {
  background: #D97706;
  color: #000;
  width: 15px;
  height: 15px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}

.bracket-jump-pill.active {
  background: var(--km-lime);
  color: #0B0C0E;
  font-weight: 900;
  border-color: var(--km-lime);
  box-shadow: 0 0 14px rgba(50, 199, 54, 0.35);
}

.bracket-jump-pill.active i {
  color: #0B0C0E !important;
}

/* Barra Inferior Flotante de Controles Neón (Estática y Siempre Visible) */
.bracket-floating-bar {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(4, 16, 8, 0.96);
  border: 1.5px solid var(--km-lime);
  border-radius: 9999px;
  padding: 4px 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.9), 0 0 16px rgba(50, 199, 54, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  white-space: nowrap;
  max-width: calc(100% - 16px);
  box-sizing: border-box;
  pointer-events: auto;
  user-select: none;
}

@media (max-width: 380px) {
  .bracket-floating-bar {
    bottom: 4px;
    gap: 3px;
    padding: 3px 6px;
    max-width: calc(100% - 10px);
  }
}

.float-btn {
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 13px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s;
}

.float-btn:hover {
  background: rgba(50, 199, 54, 0.2);
  color: var(--km-lime);
}

.float-zoom-val {
  color: var(--km-lime);
  font-size: 12px;
  font-weight: 900;
  min-width: 36px;
  text-align: center;
  font-family: monospace;
}

.float-pill-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(50, 199, 54, 0.35);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.float-pill-btn:hover {
  border-color: var(--km-lime);
  color: var(--km-lime);
}

.float-pill-btn.active {
  background: rgba(50, 199, 54, 0.22);
  color: var(--km-lime);
  font-weight: 800;
  border-color: var(--km-lime);
}


/* Botón de control de sonido en la cabecera */
.mute-btn {
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  color: var(--km-muted);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  overflow: visible;
}

.mute-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--km-white);
}

/* Modo Silenciado: 100% Estático sin animación */
.mute-btn:not(.active) {
  animation: none !important;
  box-shadow: none !important;
  color: var(--km-muted);
}
.mute-btn:not(.active) i {
  animation: none !important;
  transform: none !important;
}
.mute-btn:not(.active)::after {
  display: none !important;
}

/* Modo Activado: Onda de sonido y pulso neón dinámico */
.mute-btn.active {
  background: rgba(50, 199, 54, 0.2);
  border-color: var(--km-lime);
  color: var(--km-lime);
  box-shadow: 0 0 14px var(--km-lime-glow);
}

.mute-btn.active i {
  animation: soundPulse 1.2s ease-in-out infinite alternate;
}

.mute-btn.active::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--km-lime);
  animation: soundWave 1.8s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  pointer-events: none;
}

@keyframes soundPulse {
  0% { transform: scale(0.92); opacity: 0.85; filter: drop-shadow(0 0 2px var(--km-lime)); }
  100% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 8px var(--km-lime)); }
}

@keyframes soundWave {
  0% { transform: scale(0.92); opacity: 0.85; }
  100% { transform: scale(1.45); opacity: 0; }
}

.mute-btn.hidden { display: none; }

/* ==========================================================================
   MODO CLARO — paleta, etiquetas y animación refinadas
   ========================================================================== */

[data-theme="light"] {
  /* Verde más profundo: mejor contraste de texto/etiquetas sobre blanco */
  --km-lime: #1C9A2A;
  --km-lime-glow: rgba(28, 154, 42, 0.28);
  --km-stroke-hover: #1C9A2A;
  --km-muted: #5A6B60;
  --shadow-glow: 0 0 16px var(--km-lime-glow);
}

/* Superficies translúcidas oscuras → tintes claros */
[data-theme="light"] .world-bracket__summary,
[data-theme="light"] .world-bracket__zoom-controls,
[data-theme="light"] .world-bracket__jumpbar,
[data-theme="light"] .world-bracket__detail-meta > div,
[data-theme="light"] .podium-card {
  background: var(--km-surface-variant);
  border-color: var(--km-stroke);
}
[data-theme="light"] .podium-card.gold   { background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), #FFFFFF); }
[data-theme="light"] .podium-card.silver { background: linear-gradient(135deg, rgba(148, 163, 184, 0.2), #FFFFFF); }
[data-theme="light"] .podium-card.bronze { background: linear-gradient(135deg, rgba(217, 119, 6, 0.14), #FFFFFF); }
[data-theme="light"] .podium-card.mvp    { background: linear-gradient(135deg, rgba(28, 154, 42, 0.14), #FFFFFF); }

/* Cabecera: botones y selector de idioma */
[data-theme="light"] .app-header {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .mute-btn,
[data-theme="light"] .icon-btn {
  background: rgba(28, 154, 42, 0.08);
}

/* Barra inferior: etiquetas más legibles */
[data-theme="light"] .nav-item span {
  color: #46564B;
  font-weight: 600;
}
[data-theme="light"] .nav-item.active span {
  color: #14702A;
  font-weight: 800;
}
[data-theme="light"] .nav-item.active .nav-icon-pill {
  background: linear-gradient(135deg, #22A935, #14702A);
  box-shadow: 0 3px 10px rgba(20, 112, 42, 0.35);
}

[data-theme="light"] .nav-icon-pill::after { border-color: var(--km-emerald); }

/* ==========================================================================
   MODO CLARO — Tarjeta de torneo (Copa Mundial)
   ========================================================================== */

[data-theme="light"] .tourn-filter-pill:not(.active) {
  color: #2A362E;
  background: #FFFFFF;
}
[data-theme="light"] .tourn-filter-pill.active {
  background: linear-gradient(135deg, #22A935, #14702A);
  border-color: #14702A;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(20, 112, 42, 0.3);
}
[data-theme="light"] .tourn-filter-pill.active .pill-badge-live {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}
[data-theme="light"] .tourn-filter-pill:not(.active) .pill-badge-live,
[data-theme="light"] .pill-badge-count {
  background: rgba(28, 154, 42, 0.12);
  color: #14702A;
}

[data-theme="light"] .tournament-neon-card {
  background: #FFFFFF;
  border: 1px solid var(--km-stroke);
  box-shadow: 0 10px 30px rgba(20, 60, 30, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05);
}
/* El banner conserva la foto; se funde hacia blanco en la base */
[data-theme="light"] .tournament-banner-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.05) 45%, #FFFFFF 100%);
}
[data-theme="light"] .badge-live-playoffs {
  background: rgba(11, 12, 14, 0.72);
  color: #FFFFFF;
}
[data-theme="light"] .badge-teams-count {
  background: #14702A;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(20, 112, 42, 0.35);
}

[data-theme="light"] .tournament-fifa-kicker { color: #14702A; }
[data-theme="light"] .tournament-main-heading { color: #0F1A13; }
[data-theme="light"] .tournament-meta-specs { color: #46564B; }
[data-theme="light"] .tournament-meta-specs i { color: #14702A !important; }

[data-theme="light"] .tournament-champion-prize-box {
  background: linear-gradient(135deg, #F1F8F3 0%, #E6F2E9 100%);
  border: 1px solid #C6DECB;
}
[data-theme="light"] .prize-trophy-thumb {
  background: #FFFFFF;
  border-color: #C6DECB;
  box-shadow: 0 2px 8px rgba(20, 112, 42, 0.12);
}
[data-theme="light"] .prize-kicker-label { color: #14702A; }
[data-theme="light"] .prize-value-text { color: #0F1A13; }
[data-theme="light"] .prize-sub-text { color: #46564B; }

[data-theme="light"] .btn-world-bracket {
  background: linear-gradient(135deg, #22A935, #14702A);
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(20, 112, 42, 0.3);
}
[data-theme="light"] .btn-world-bracket:hover {
  background: linear-gradient(135deg, #28B83C, #178030);
}
[data-theme="light"] .btn-live-final-row {
  background: #FFFFFF;
  border: 1.5px solid #14702A;
  color: #14702A;
}
[data-theme="light"] .btn-live-final-row:hover {
  background: rgba(28, 154, 42, 0.08);
}

/* ==========================================================================
   Barra de controles del árbol: estática, siempre visible, pegada al menú
   ========================================================================== */
.bracket-floating-bar {
  position: static;
  transform: none;
  flex-shrink: 0;
  width: 100%;
  max-width: none;
  border-radius: 0;
  border: none;
  border-top: 1.5px solid var(--km-lime);
  padding: 6px 10px;
  gap: 6px;
  background: #041008;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.5);
  z-index: 101;
}
.bracket-floating-bar { display: none; }
.app-frame.bracket-open .bracket-floating-bar { display: flex !important; }
.app-frame:not(.bracket-open) .bracket-floating-bar { display: none !important; }

[data-theme="light"] .bracket-floating-bar {
  background: #FFFFFF;
  border-top: 1.5px solid #14702A;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .float-btn { color: #2A362E; }
[data-theme="light"] .float-btn:hover { background: rgba(28, 154, 42, 0.12); color: #14702A; }
[data-theme="light"] .float-zoom-val { color: #14702A; }
[data-theme="light"] .float-pill-btn {
  background: #F1F8F3;
  border-color: #C6DECB;
  color: #2A362E;
}
[data-theme="light"] .float-pill-btn.active {
  background: #14702A;
  border-color: #14702A;
  color: #FFFFFF;
}

/* ==========================================================================
   PERFIL DE EQUIPO (modal sobre el detalle del partido)
   ========================================================================== */
.world-bracket__detail-team.is-clickable { cursor: pointer; transition: transform 0.15s ease; }
.world-bracket__detail-team.is-clickable:hover { transform: translateY(-2px); }
.world-bracket__detail-team.is-clickable:focus-visible { outline: 2px solid var(--km-lime); outline-offset: 4px; border-radius: 10px; }
.world-bracket__detail-team.is-clickable .world-bracket__detail-team-name { text-decoration: underline; text-decoration-color: var(--km-lime); text-underline-offset: 3px; }

.team-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 14px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.team-modal-backdrop[hidden] { display: none !important; }

.team-modal-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  padding: 18px 16px 20px;
  border-radius: 20px;
  background: var(--km-asphalt);
  border: 1.5px solid var(--team-color, var(--km-lime));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  color: var(--km-white);
  animation: fadeIn 0.22s ease forwards;
}
.team-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--km-stroke);
  background: var(--km-surface-variant);
  color: var(--km-white);
  cursor: pointer;
  z-index: 2;
}
.team-hero { display: flex; align-items: center; gap: 14px; padding-right: 36px; margin-bottom: 14px; }
.team-hero .world-bracket__crest { width: 56px; height: 56px; flex-shrink: 0; }
.team-hero-kicker { font-size: 10px; font-weight: 800; letter-spacing: 0.6px; color: var(--km-lime); }
.team-hero h3 { font-family: var(--font-display); font-size: 20px; font-weight: 900; line-height: 1.15; margin: 2px 0; color: var(--km-white); }
.team-hero p { font-size: 12px; color: var(--km-muted); }

.team-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.team-stat {
  background: var(--km-surface-variant);
  border: 1px solid var(--km-stroke);
  border-radius: 12px;
  padding: 10px 6px;
  text-align: center;
}
.team-stat strong { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 900; color: var(--km-white); }
.team-stat span { display: block; margin-top: 2px; font-size: 9px; font-weight: 800; letter-spacing: 0.5px; color: var(--km-muted); }

.team-info-rows { border: 1px solid var(--km-stroke); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.team-info-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; font-size: 12.5px; }
.team-info-row + .team-info-row { border-top: 1px solid var(--km-stroke); }
.team-info-row span { color: var(--km-muted); }
.team-info-row strong { color: var(--km-white); text-align: right; font-weight: 700; }

.team-section-title { font-family: var(--font-display); font-size: 13px; font-weight: 900; letter-spacing: 0.6px; text-transform: uppercase; color: var(--km-lime); margin-bottom: 10px; }
.team-roster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.team-player {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border-radius: 12px;
  background: var(--km-surface-variant);
  border: 1px solid var(--km-stroke);
  min-width: 0;
}
.team-player.is-star { border-color: #F59E0B; box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35); }
.team-player-face { position: relative; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--team-color, var(--km-lime)); }
.team-player-face svg, .team-player-face img { width: 100%; height: 100%; display: block; object-fit: cover; }
.team-player-number {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  font-weight: 900;
  line-height: 14px;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.6);
}
.team-player-text { min-width: 0; }
.team-player-text strong { display: block; font-size: 12px; font-weight: 800; color: var(--km-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-player-text span { display: block; font-size: 10.5px; color: var(--km-muted); }
.team-player-star { position: absolute; top: 6px; right: 7px; font-size: 10px; color: #F59E0B; }

[data-theme="light"] .team-hero-kicker,
[data-theme="light"] .team-section-title { color: #14702A; }
[data-theme="light"] .team-modal-card { box-shadow: 0 20px 50px rgba(20, 60, 30, 0.25); }


/* ==========================================================================
   HOMESCREEN ENHANCED STYLES (ELMHURST ATHLETICS 10 SECTIONS)
   ========================================================================== */

.hero-btn-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.btn-hero-reserve {
  background: var(--km-lime);
  color: #0B0C0E;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 900;
  border: none;
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 0 14px var(--km-lime-glow);
}

.btn-hero-reserve:hover {
  background: #4EE852;
  transform: translateY(-1px);
}

.btn-hero-directions {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 800;
  border-radius: var(--radius-pill);
  padding: 7px 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(6px);
}

.btn-hero-directions:hover {
  border-color: var(--km-lime);
  color: var(--km-lime);
  background: rgba(50, 199, 54, 0.18);
}

/* 2. Quick Action Chips (5 botones circulares) */
.home-quick-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.quick-chip-btn {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  padding: 0;
}

.quick-chip-btn:hover .chip-circle {
  transform: translateY(-2px) scale(1.06);
}

.chip-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  transition: all 0.2s ease;
}

.chip-circle.orange {
  background: rgba(249, 115, 22, 0.18);
  color: #F97316;
  border: 1.5px solid #F97316;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.25);
}

.chip-circle.gold {
  background: rgba(234, 179, 8, 0.18);
  color: #EAB308;
  border: 1.5px solid #EAB308;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.25);
}

.chip-circle.green {
  background: rgba(34, 197, 94, 0.18);
  color: #22C55E;
  border: 1.5px solid #22C55E;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.25);
}

.chip-circle.pink {
  background: rgba(236, 72, 153, 0.18);
  color: #EC4899;
  border: 1.5px solid #EC4899;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.25);
}

.chip-circle.sky {
  background: rgba(14, 165, 233, 0.18);
  color: #0EA5E9;
  border: 1.5px solid #0EA5E9;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.25);
}

.quick-chip-btn span {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--km-white);
  white-space: nowrap;
}

/* 3 & 4. Shortcut Cards (Mis Reservas & Mapa en Vivo) */
.home-shortcut-card {
  background: var(--km-asphalt);
  border: 1px solid var(--km-stroke);
  border-radius: var(--radius-md);
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.home-shortcut-card:hover {
  border-color: var(--km-lime);
  background: var(--km-asphalt-card);
  transform: translateX(2px);
}

.shortcut-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 17px;
}

.shortcut-icon-circle.green {
  background: rgba(50, 199, 54, 0.18);
  color: var(--km-lime);
  border: 1px solid var(--km-lime);
}

.shortcut-icon-circle.orange {
  background: rgba(249, 115, 22, 0.18);
  color: #F97316;
  border: 1px solid #F97316;
}

.shortcut-body {
  flex: 1;
  min-width: 0;
}

.shortcut-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.shortcut-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--km-white);
}

.shortcut-desc {
  font-size: 11px;
  color: var(--km-neutral);
  margin-top: 2px;
  line-height: 1.35;
}

.chip-firestore-sync {
  background: rgba(14, 165, 233, 0.16);
  color: #0EA5E9;
  border: 1px solid #0EA5E9;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chip-live-badge {
  background: rgba(50, 199, 54, 0.16);
  color: var(--km-lime);
  border: 1px solid var(--km-lime);
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 5. Tarjeta de Torneo Destacado en Inicio (Copa Mundial - Comprimida con Video de Fondo) */
.home-tourn-neon-card {
  position: relative;
  border-radius: 20px;
  border: 2px solid var(--km-lime);
  background: #0B0C0E;
  overflow: hidden;
  box-shadow: 0 0 28px rgba(50, 199, 54, 0.32), 0 10px 36px rgba(0, 0, 0, 0.65);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  user-select: none;
  min-height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.home-tourn-neon-card:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: #5CFF61;
  box-shadow: 0 0 40px rgba(50, 199, 54, 0.5), 0 14px 42px rgba(0, 0, 0, 0.8);
}

.home-tourn-neon-card:active {
  transform: translateY(0) scale(0.99);
}

/* Video & imagen de fondo */
.home-tourn-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.home-tourn-poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-tourn-video-elem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gradiente multicapa cinematográfico para resaltar el video y mantener textos nítidos */
.home-tourn-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 12, 14, 0.3) 0%,
    rgba(11, 12, 14, 0.08) 40%,
    rgba(11, 12, 14, 0.75) 75%,
    rgba(11, 12, 14, 0.96) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* Badge flotante EN VIVO sobre el video */
.home-tourn-live-pill {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(220, 38, 38, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.8px;
  box-shadow: 0 0 14px rgba(220, 38, 38, 0.65), 0 2px 6px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.live-dot-pulse {
  width: 6px;
  height: 6px;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 0 6px #FFFFFF;
  animation: liveDotPulse 1.2s infinite ease-in-out;
}

@keyframes liveDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(1.35); }
}

/* Contenido superpuesto */
.home-tourn-content {
  position: relative;
  z-index: 3;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-tourn-titles {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.home-tourn-titles .tournament-fifa-kicker {
  font-size: 11px;
  font-weight: 900;
  color: var(--km-lime);
  letter-spacing: 0.9px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  margin-bottom: 0;
}

.home-tourn-title {
  font-size: 17px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.3px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}

.home-tourn-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

/* Chip de premio compacto */
.home-tourn-prize-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 10px;
  padding: 5px 10px;
  flex: 1;
  min-width: 0;
}

.home-tourn-trophy-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(251, 191, 36, 0.7));
}

.home-tourn-prize-texts {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.home-tourn-prize-kicker {
  font-size: 8.5px;
  font-weight: 800;
  color: #FBBF24;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.home-tourn-prize-val {
  font-size: 11px;
  font-weight: 800;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Botón CTA compacto para ver llaves */
.home-tourn-bracket-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--km-lime);
  color: #0B0C0E;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.4px;
  padding: 7px 12px;
  border-radius: 9999px;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(50, 199, 54, 0.4);
  transition: all 0.2s ease;
}

.home-tourn-neon-card:hover .home-tourn-bracket-btn {
  background: #5CFF61;
  transform: translateX(2px);
  box-shadow: 0 0 18px rgba(50, 199, 54, 0.6);
}

/* 6. Canchas Destacadas - Badges y Botones */
.court-thumb-card .surface-tag {
  font-size: 10px;
  color: var(--km-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.court-thumb-card .price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.court-thumb-card .btn-thumb-reserve {
  background: var(--km-lime);
  color: #0B0C0E;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.court-thumb-card .btn-thumb-reserve:hover {
  background: #4EE852;
  transform: translateY(-1px);
}

/* 7. El Vibe Elmhurst Athletics (Compacto y Expandible) */
.home-vibe-card {
  background: linear-gradient(180deg, rgba(20, 24, 21, 0.96) 0%, rgba(13, 16, 14, 0.98) 100%);
  border: 1px solid rgba(50, 199, 54, 0.25);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-vibe-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #32C736, #4EE852, transparent);
}

.vibe-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.vibe-head-left {
  flex: 1;
  min-width: 0;
}

.vibe-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.vibe-chevron-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--km-lime);
  font-size: 11px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, border-color 0.2s ease;
}

.home-vibe-card.is-expanded .vibe-chevron-circle {
  transform: rotate(180deg);
  background: rgba(50, 199, 54, 0.2);
  border-color: var(--km-lime);
}

/* Barra compacta de vista previa */
.vibe-compact-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  transition: all 0.22s ease;
}

.home-vibe-card:hover .vibe-compact-bar {
  border-color: rgba(50, 199, 54, 0.35);
  background: rgba(0, 0, 0, 0.6);
}

.vibe-mini-thumbs {
  display: flex;
  align-items: center;
}

.vibe-mini-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #0B0E0D;
  margin-left: -7px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease;
}

.vibe-mini-thumb:first-child {
  margin-left: 0;
}

.home-vibe-card:hover .vibe-mini-thumb {
  transform: translateY(-2px);
}

.vibe-tap-hint {
  font-size: 11px;
  font-weight: 700;
  color: var(--km-lime);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.2px;
}

/* Cuerpo expandible */
.vibe-expandable-body {
  display: none;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
  animation: vibeExpandAnim 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-vibe-card.is-expanded .vibe-expandable-body {
  display: flex;
}

.home-vibe-card.is-expanded .vibe-compact-bar {
  display: none;
}

@keyframes vibeExpandAnim {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vibe-kicker {
  font-size: 10.5px;
  font-weight: 900;
  color: var(--km-lime);
  letter-spacing: 1.1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}

.vibe-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
  color: #FFFFFF;
  margin-top: 2px;
}

.vibe-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(50, 199, 54, 0.12);
  border: 1px solid rgba(50, 199, 54, 0.35);
  font-size: 9.5px;
  font-weight: 800;
  color: #4EE852;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.vibe-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4EE852;
  box-shadow: 0 0 8px #4EE852;
  animation: vibeDotPulse 1.8s infinite ease-in-out;
}

@keyframes vibeDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.vibe-desc {
  font-size: 12px;
  color: #A0A5A8;
  line-height: 1.5;
  margin: 0;
}

.vibe-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-top: 2px;
}

.vibe-tile {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  height: 122px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0B0E0D;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.24s ease, box-shadow 0.24s ease;
}

.vibe-tile:hover {
  transform: translateY(-2px) scale(1.015);
  border-color: rgba(50, 199, 54, 0.55);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 16px rgba(50, 199, 54, 0.2);
}

.vibe-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.vibe-tile:hover .vibe-tile-img {
  transform: scale(1.08);
}

.vibe-tile-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 8px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.5px;
}

.vibe-tile-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 22px 9px 7px 9px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 55%, rgba(0, 0, 0, 0.98) 100%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.vibe-tile-meta strong {
  font-size: 11px;
  font-weight: 800;
  color: #FFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vibe-tile-meta span {
  font-size: 9px;
  color: #9AE69D;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vibe-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.btn-vibe-primary {
  flex: 1 1 200px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #32C736 0%, #177C20 100%);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.4px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(50, 199, 54, 0.28);
  transition: all 0.2s ease;
}

.btn-vibe-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(50, 199, 54, 0.42);
  filter: brightness(1.06);
}

.btn-vibe-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFF;
  font-weight: 700;
  font-size: 11.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-vibe-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(50, 199, 54, 0.4);
}

/* ========================================================
   MODAL COMPLETO: EXPERIENCIA VIBE ELMHURST ATHLETICS
   ======================================================== */
.vibe-modal-backdrop {
  z-index: 1050;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
}

.vibe-modal-window {
  max-width: 620px;
  max-height: 92vh;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid rgba(50, 199, 54, 0.32);
  background: #0E1210;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95), 0 0 45px rgba(50, 199, 54, 0.16);
  border-radius: 18px;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: rgba(50, 199, 54, 0.4) transparent;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.vibe-modal-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  height: 52px;
  min-height: 52px;
  box-sizing: border-box;
  flex-shrink: 0 !important;
  background: rgba(14, 18, 16, 0.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vibe-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  color: #4EE852;
  letter-spacing: 0.8px;
}

.vibe-modal-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFF;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vibe-modal-close:hover {
  background: rgba(255, 59, 48, 0.25);
  border-color: rgba(255, 59, 48, 0.5);
  color: #FF453A;
  transform: rotate(90deg);
}

.vibe-nav-tabs {
  position: sticky;
  top: 52px;
  z-index: 28;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  min-height: 54px;
  height: 54px;
  box-sizing: border-box;
  flex-shrink: 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #0B0F0D;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.vibe-nav-tabs::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.vibe-nav-pill {
  flex-shrink: 0 !important;
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #B5BAB8;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1.2;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
}

.vibe-nav-pill.active,
.vibe-nav-pill:hover {
  background: rgba(50, 199, 54, 0.2) !important;
  border-color: #32C736 !important;
  color: #4EE852 !important;
  box-shadow: 0 0 10px rgba(50, 199, 54, 0.25);
}

.vibe-modal-hero {
  position: relative;
  flex-shrink: 0 !important;
  padding: 22px 20px;
  background: radial-gradient(circle at 85% 20%, rgba(50, 199, 54, 0.16) 0%, transparent 60%), linear-gradient(180deg, #151C17 0%, #0E1210 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
}

.vibe-hero-tag {
  font-size: 10px;
  font-weight: 900;
  color: var(--km-lime);
  letter-spacing: 1.1px;
  display: inline-block;
  margin-bottom: 6px;
}

.vibe-hero-title {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 900;
  color: #FFF;
  line-height: 1.2;
  margin: 0 0 8px 0;
  text-transform: uppercase;
}

.vibe-hero-subtitle {
  font-size: 12.5px;
  color: #B5BAB8;
  line-height: 1.5;
  margin: 0 0 14px 0;
}

.vibe-hero-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.vibe-spec-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 10.5px;
  font-weight: 700;
  color: #E0E6E2;
}

.vibe-spec-pill i {
  color: var(--km-lime);
  font-size: 11px;
}

.vibe-soundtrack-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 18px 0 18px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(50, 199, 54, 0.06);
  border: 1px solid rgba(50, 199, 54, 0.2);
}

.vibe-soundtrack-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vibe-soundtrack-info strong {
  display: block;
  color: #FFF;
  font-weight: 800;
  font-size: 12px;
}

.vibe-soundtrack-info span {
  display: block;
  color: #8C9490;
  font-size: 10px;
}

.vibe-soundtrack-btn {
  padding: 7px 12px;
  border-radius: 8px;
  background: #32C736;
  border: none;
  color: #000;
  font-weight: 800;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: transform 0.15s ease, filter 0.15s ease;
  white-space: nowrap;
}

.vibe-soundtrack-btn:hover {
  transform: scale(1.03);
  filter: brightness(1.1);
}

.vibe-chapters-list {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.vibe-chapter-card {
  border-radius: 14px;
  overflow: hidden;
  background: #131715;
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  scroll-margin-top: 120px;
}

.vibe-chapter-card.vibe-chapter-highlight {
  border-color: #32C736 !important;
  box-shadow: 0 0 28px rgba(50, 199, 54, 0.45) !important;
}

.vibe-chapter-media {
  position: relative;
  height: 220px;
  width: 100%;
  overflow: hidden;
  background: #000;
}

.vibe-chapter-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vibe-chapter-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(50, 199, 54, 0.45);
  font-size: 9px;
  font-weight: 900;
  color: #4EE852;
  letter-spacing: 0.6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.vibe-chapter-overlay-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px 14px 10px 14px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 60%, rgba(0,0,0,0.98) 100%);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  color: #FFFFFF;
}

.vibe-chapter-body {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.vibe-chapter-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  color: #FFF;
  line-height: 1.25;
  margin: 0;
}

.vibe-chapter-p {
  font-size: 12px;
  color: #B3B9B6;
  line-height: 1.55;
  margin: 0;
}

.vibe-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-top: 2px;
}

.vibe-feat-item {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.vibe-feat-item i {
  color: var(--km-lime);
  font-size: 13px;
  margin-top: 2px;
}

.vibe-feat-item strong {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #FFF;
}

.vibe-feat-item span {
  display: block;
  font-size: 9.5px;
  color: #8F9693;
  line-height: 1.35;
}

.vibe-quote {
  margin: 2px 0 0 0;
  padding: 11px 13px;
  border-radius: 10px;
  background: rgba(50, 199, 54, 0.05);
  border-left: 3px solid #32C736;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.vibe-quote i {
  color: #32C736;
  font-size: 11px;
  opacity: 0.7;
}

.vibe-quote span {
  font-size: 11.5px;
  color: #E0E5E2;
  font-style: italic;
  line-height: 1.45;
}

.vibe-quote cite {
  font-size: 10px;
  font-weight: 700;
  color: #8ECF92;
  font-style: normal;
  text-align: right;
}

.vibe-modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  padding: 13px 18px;
  background: rgba(14, 18, 16, 0.95);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.btn-vibe-footer-primary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, #32C736 0%, #177C20 100%);
  color: #FFF;
  font-weight: 900;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(50, 199, 54, 0.35);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.btn-vibe-footer-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.btn-vibe-footer-secondary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFF;
  font-weight: 700;
  font-size: 11.5px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-vibe-footer-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}

.btn-vibe-footer-wa {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px;
  border-radius: 10px;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.35);
  color: #25D366;
  font-weight: 800;
  font-size: 10.5px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.btn-vibe-footer-wa:hover {
  background: rgba(37, 211, 102, 0.22);
}

@media (max-width: 480px) {
  .vibe-gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .vibe-tile {
    height: 115px;
  }
  .vibe-features-grid {
    grid-template-columns: 1fr;
  }
  .vibe-chapter-media {
    height: 190px;
  }
}

/* 8. Instalaciones y Comodidades — Ultra-Premium Design System & Unique Animations */
.amenities-live-tag {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--km-lime, #A3E635);
  background: rgba(163, 230, 53, 0.1);
  border: 1px solid rgba(163, 230, 53, 0.25);
  padding: 3px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.amenities-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 640px) {
  .amenities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* Base Card Style */
.amenity-card {
  position: relative;
  background: linear-gradient(145deg, #131224 0%, #0b0a17 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 13px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
  transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.amenity-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

/* Card Glow FX background element */
.amenity-glow-fx {
  position: absolute;
  top: -35px;
  right: -35px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  filter: blur(32px);
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.amenity-card:hover .amenity-glow-fx {
  opacity: 0.65;
  transform: scale(1.15);
}

/* Top Row: Icon + Badge / Price */
.amenity-top-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.amenity-icon-box {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.amenity-card:hover .amenity-icon-box {
  transform: scale(1.08);
}

.amenity-icon {
  position: relative;
  z-index: 2;
  line-height: 1;
}

/* Pill Badges */
.amenity-pill {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 3px 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Card Content */
.amenity-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.amenity-title {
  font-size: 13px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: -0.2px;
  display: block;
  line-height: 1.25;
}

.amenity-desc {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.35;
  margin: 0;
}

/* ===================================================
   CARD 1: 🚿 DUCHAS & VESTIDORES (AQUA / CYAN)
   =================================================== */
.amenity-card--showers {
  border-color: rgba(6, 182, 212, 0.24);
}
.amenity-card--showers .amenity-glow-fx {
  background: #06b6d4;
}
.amenity-card--showers .amenity-icon-box {
  background: rgba(6, 182, 212, 0.16);
  border: 1px solid rgba(6, 182, 212, 0.35);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.25);
}
.amenity-card--showers:hover {
  border-color: rgba(6, 182, 212, 0.65);
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.18);
}
.amenity-pill--cyan {
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.35);
  color: #38bdf8;
}
.amenity-footer-spec {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(56, 189, 248, 0.9);
  padding-top: 5px;
  border-top: 1px dashed rgba(6, 182, 212, 0.2);
}
.amenity-footer-spec span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
@keyframes steamFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.9; }
  50% { transform: translateY(-2.5px) scale(1.05); opacity: 1; }
}
.amenity-card--showers .amenity-icon {
  animation: steamFloat 3.2s ease-in-out infinite;
}

/* ===================================================
   CARD 2: 🅿️ PARKING & VALET (VIP EMERALD / GOLD)
   =================================================== */
.amenity-card--parking {
  border-color: rgba(16, 185, 129, 0.32);
  background: linear-gradient(145deg, #131e1e 0%, #0a1114 100%);
}
.amenity-card--parking .amenity-glow-fx {
  background: #10b981;
}
.amenity-card--parking .amenity-icon-box {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.3);
}
.amenity-card--parking:hover {
  border-color: rgba(16, 185, 129, 0.7);
  box-shadow: 0 8px 26px rgba(16, 185, 129, 0.22);
}
.amenity-price-badge {
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 999px;
  padding: 2.5px 8px;
  font-size: 10.5px;
  font-weight: 900;
  color: #34d399;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.2px;
}
.amenity-price-badge small {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}
.amenity-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.amenity-status-tag {
  font-size: 8.5px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  text-transform: uppercase;
}
.amenity-status-tag.is-booked-tag {
  background: rgba(16, 185, 129, 0.22);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #34d399;
}
.amenity-parking-action-wrap {
  position: relative;
  z-index: 2;
  margin-top: 3px;
}
.btn-amenity-parking {
  width: 100%;
  height: 31px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: 1px solid rgba(52, 211, 153, 0.45);
  border-radius: 9px;
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn-amenity-parking:hover {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.5);
  transform: translateY(-1px);
}
.btn-amenity-parking.is-booked {
  background: linear-gradient(135deg, #047857 0%, #064e3b 100%);
  border-color: #34d399;
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.4);
  color: #ecfdf5;
}
.btn-amenity-parking.is-booked:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}
@keyframes parkingPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  70% { transform: scale(1.04); box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.amenity-card--parking .amenity-icon-box {
  animation: parkingPulse 3s infinite ease-in-out;
}

/* ===================================================
   CARD 3: 🥤 SNACK BAR & CAFETERÍA (AMBER / ORANGE)
   =================================================== */
.amenity-card--snackbar {
  border-color: rgba(249, 115, 22, 0.25);
  cursor: pointer;
}
.amenity-card--snackbar .amenity-glow-fx {
  background: #f97316;
}
.amenity-card--snackbar .amenity-icon-box {
  background: rgba(249, 115, 22, 0.16);
  border: 1px solid rgba(249, 115, 22, 0.38);
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.25);
}
.amenity-card--snackbar:hover {
  border-color: rgba(249, 115, 22, 0.65);
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.2);
}
.amenity-pill--orange {
  background: rgba(249, 115, 22, 0.15);
  border: 1px solid rgba(249, 115, 22, 0.35);
  color: #fb923c;
}
.amenity-more-link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 800;
  color: #fb923c;
  transition: transform 0.2s ease;
  margin-top: 2px;
}
.amenity-card--snackbar:hover .amenity-more-link {
  transform: translateX(4px);
  color: #fdba74;
}

/* ===================================================
   CARD 4: 💡 ILUMINACIÓN LED PRO (NEON LIME / FLOODLIGHT)
   =================================================== */
.amenity-card--lighting {
  border-color: rgba(163, 230, 53, 0.25);
}
.amenity-card--lighting .amenity-glow-fx {
  background: #a3e635;
}
.amenity-card--lighting .amenity-icon-box {
  background: rgba(163, 230, 53, 0.16);
  border: 1px solid rgba(163, 230, 53, 0.38);
  box-shadow: 0 0 14px rgba(163, 230, 53, 0.28);
}
.amenity-card--lighting:hover {
  border-color: rgba(163, 230, 53, 0.65);
  box-shadow: 0 8px 24px rgba(163, 230, 53, 0.2);
}
.amenity-pill--lime {
  background: rgba(163, 230, 53, 0.14);
  border: 1px solid rgba(163, 230, 53, 0.35);
  color: #a3e635;
}
.amenity-light-beam {
  position: absolute;
  top: -60%;
  left: -20%;
  width: 140%;
  height: 200%;
  background: linear-gradient(135deg, transparent 40%, rgba(163, 230, 53, 0.08) 50%, transparent 60%);
  pointer-events: none;
  animation: lightSweep 4.5s ease-in-out infinite;
}
@keyframes lightSweep {
  0% { transform: translateX(-40%) rotate(25deg); opacity: 0; }
  20% { opacity: 0.8; }
  60% { opacity: 0.8; }
  100% { transform: translateX(40%) rotate(25deg); opacity: 0; }
}

/* ===================================================
   CARD 5: 📶 WI-FI 6 DE ALTA VELOCIDAD (CYBER VIOLET)
   =================================================== */
.amenity-card--wifi {
  border-color: rgba(139, 92, 246, 0.25);
}
.amenity-card--wifi .amenity-glow-fx {
  background: #8b5cf6;
}
.amenity-card--wifi .amenity-icon-box {
  background: rgba(139, 92, 246, 0.16);
  border: 1px solid rgba(139, 92, 246, 0.38);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.25);
}
.amenity-card--wifi:hover {
  border-color: rgba(139, 92, 246, 0.65);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.2);
}
.amenity-pill--violet {
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.35);
  color: #c084fc;
}
.amenity-wifi-radar {
  position: absolute;
  bottom: -15px;
  right: -15px;
  width: 70px;
  height: 70px;
  pointer-events: none;
}
.amenity-wifi-radar span {
  position: absolute;
  bottom: 0;
  right: 0;
  border: 1.5px solid rgba(192, 132, 252, 0.5);
  border-radius: 50%;
  animation: wifiPing 3s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.amenity-wifi-radar span:nth-child(1) { width: 30px; height: 30px; animation-delay: 0s; }
.amenity-wifi-radar span:nth-child(2) { width: 50px; height: 50px; animation-delay: 1s; }
.amenity-wifi-radar span:nth-child(3) { width: 70px; height: 70px; animation-delay: 2s; }
@keyframes wifiPing {
  0% { transform: scale(0.2); opacity: 0.9; }
  100% { transform: scale(1.2); opacity: 0; }
}

/* ===================================================
   CARD 6: 🎵 AUDIO DEPORTIVO & SURROUND (NEON MAGENTA)
   =================================================== */
.amenity-card--audio {
  border-color: rgba(236, 72, 153, 0.25);
}
.amenity-card--audio .amenity-glow-fx {
  background: #ec4899;
}
.amenity-card--audio .amenity-icon-box {
  background: rgba(236, 72, 153, 0.16);
  border: 1px solid rgba(236, 72, 153, 0.38);
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.25);
}
.amenity-card--audio:hover {
  border-color: rgba(236, 72, 153, 0.65);
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.2);
}
.amenity-pill--magenta {
  background: rgba(236, 72, 153, 0.15);
  border: 1px solid rgba(236, 72, 153, 0.35);
  color: #f472b6;
}
.amenity-eq-bars {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 3.5px;
  height: 15px;
  padding-top: 3px;
}
.eq-col {
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(to top, #ec4899, #f472b6);
  box-shadow: 0 0 6px rgba(236, 72, 153, 0.6);
}
.eq-col.b1 { height: 6px; animation: eqBounce 1.1s ease-in-out infinite alternate; }
.eq-col.b2 { height: 14px; animation: eqBounce 0.8s ease-in-out 0.2s infinite alternate; }
.eq-col.b3 { height: 10px; animation: eqBounce 1.3s ease-in-out 0.4s infinite alternate; }
.eq-col.b4 { height: 15px; animation: eqBounce 0.9s ease-in-out 0.1s infinite alternate; }
.eq-col.b5 { height: 8px; animation: eqBounce 1.2s ease-in-out 0.3s infinite alternate; }
@keyframes eqBounce {
  0% { height: 4px; opacity: 0.6; }
  100% { height: 15px; opacity: 1; }
}

/* ===================================================
   PARKING RENTAL SHEET MODAL STYLES
   =================================================== */
.pk-rent-modal-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0 8px;
}
.pk-rent-header-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16) 0%, rgba(5, 150, 105, 0.08) 100%);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 14px;
  padding: 12px 14px;
}
.pk-rent-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
  flex-shrink: 0;
}
.pk-rent-header-badge h4 {
  font-size: 14.5px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0 0 3px 0;
}
.pk-rent-price-pill {
  font-size: 11px;
  font-weight: 800;
  color: #34d399;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(52, 211, 153, 0.4);
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-block;
}
.pk-rent-lead {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.45;
  margin: 0;
}
.pk-rent-perks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 540px) {
  .pk-rent-perks-grid {
    grid-template-columns: 1fr;
  }
}
.pk-rent-perk {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.pk-rent-perk i {
  font-size: 15px;
  color: #34d399;
  flex-shrink: 0;
}
.pk-rent-perk strong {
  display: block;
  font-size: 11.5px;
  color: #FFFFFF;
}
.pk-rent-perk small {
  display: block;
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.55);
}
.pk-rent-actions-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 4px;
}
.pk-choice-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  border: 1px solid transparent;
}
.pk-choice-btn.is-primary {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.12) 100%);
  border-color: rgba(16, 185, 129, 0.45);
}
.pk-choice-btn.is-primary:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.3) 0%, rgba(5, 150, 105, 0.2) 100%);
  border-color: #34d399;
  transform: translateY(-1px);
}
.pk-choice-btn.is-secondary {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
.pk-choice-btn.is-secondary:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}
.pk-choice-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #FFFFFF;
  flex-shrink: 0;
}
.pk-choice-btn.is-primary .pk-choice-icon {
  background: #10b981;
  color: #FFFFFF;
}
.pk-choice-info {
  flex: 1;
}
.pk-choice-info strong {
  display: block;
  font-size: 12.5px;
  color: #FFFFFF;
  margin-bottom: 2px;
}
.pk-choice-info small {
  display: block;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
}
.pk-choice-arrow {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.2s ease, color 0.2s ease;
}
.pk-choice-btn:hover .pk-choice-arrow {
  transform: translateX(3px);
  color: #FFFFFF;
}

/* 9. Reglamento y Juego Limpio (Comprimido) */
.rules-card {
  background: var(--km-asphalt);
  border: 1px solid var(--km-stroke);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease;
}

.rules-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rules-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  color: #FFFFFF;
}

.rules-card .rules-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  color: var(--km-lime);
  white-space: nowrap;
  flex-shrink: 0;
}

.rules-card .rules-more i {
  font-size: 9px;
  transition: transform 0.2s ease;
}

.rules-card:hover .rules-more i {
  transform: translateX(3px);
}

.rules-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rules-card .rule-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--km-neutral);
  padding: 5px 8px;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  line-height: 1.3;
}

.rules-card .rule-item-thumb {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.rules-card .rule-item > div {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rules-card .rule-item strong {
  color: #FFFFFF;
  font-weight: 700;
}

.rule-danger {
  color: #EF4444;
  font-weight: 800;
}

/* 10. Espaciador Inferior de Seguridad */
.home-bottom-spacer {
  height: 28px;
}

/* ==========================================================================
   PANTALLA DE REGLAMENTO
   ========================================================================== */
.rules-header { color: var(--km-white); }
.rules-card.is-link { cursor: pointer; transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s; }
.rules-card.is-link:hover { border-color: var(--km-lime); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); }
.rules-card.is-link:focus-visible { outline: 2px solid var(--km-lime); outline-offset: 2px; }
.rules-more {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--km-lime);
}
.rules-more i { font-size: 10px; }

.rules-screen-top { display: flex; align-items: center; gap: 12px; }
.rules-back-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--km-stroke);
  background: var(--km-surface-variant);
  color: var(--km-white);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.rules-back-btn:hover { border-color: var(--km-lime); color: var(--km-lime); }
.rules-screen-kicker { font-size: 10px; font-weight: 800; letter-spacing: 0.7px; color: var(--km-lime); }
.rules-screen-title { font-family: var(--font-display); font-size: 20px; font-weight: 900; line-height: 1.15; color: var(--km-white); }

.rules-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(50, 199, 54, 0.14), rgba(50, 199, 54, 0.03));
  border: 1px solid rgba(50, 199, 54, 0.3);
}
.rules-hero > i { font-size: 26px; color: var(--km-lime); }
.rules-hero p { font-size: 12.5px; line-height: 1.45; color: var(--km-neutral); }

.rules-block {
  background: var(--km-asphalt);
  border: 1px solid var(--km-stroke);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.rules-block:hover {
  border-color: rgba(50, 199, 54, 0.4);
}
.rules-block.is-danger:hover {
  border-color: rgba(239, 68, 68, 0.6);
}
.rules-block-media {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  background: #0B0E14;
}
.rules-block-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.rules-block:hover .rules-block-img {
  transform: scale(1.04);
}
.rules-media-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(11, 14, 20, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(50, 199, 54, 0.4);
  color: var(--km-lime);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.rules-media-badge.is-danger {
  border-color: rgba(239, 68, 68, 0.5);
  color: #EF4444;
}
.rule-item-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.rules-block.is-danger { border-color: rgba(239, 68, 68, 0.45); }
.rules-block-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rules-block-head h3 { font-family: var(--font-display); font-size: 15px; font-weight: 900; color: var(--km-white); }
.rules-block-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(50, 199, 54, 0.14);
  color: var(--km-lime);
  font-size: 15px;
}
.rules-block.is-danger .rules-block-icon { background: rgba(239, 68, 68, 0.14); color: #EF4444; }
.rules-bullets { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rules-bullets li { font-size: 12.5px; line-height: 1.45; color: var(--km-neutral); padding-left: 14px; position: relative; }
.rules-bullets li::before { content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--km-lime); }
.rules-bullets li strong { color: var(--km-white); }
.rules-bullets li.is-danger { color: #EF4444; font-weight: 800; padding-left: 0; }
.rules-bullets li.is-danger::before { display: none; }
.rules-bullets li.is-danger i { margin-right: 6px; }

.rules-cta {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 15px 18px;
  background: var(--km-lime);
  color: #0B0C0E;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 0 18px var(--km-lime-glow);
}

[data-theme="light"] .rules-screen-kicker,
[data-theme="light"] .rules-more { color: #14702A; }
[data-theme="light"] .rules-block:not(.is-danger) .rules-block-icon { color: #14702A; background: rgba(28, 154, 42, 0.12); }
[data-theme="light"] .rules-bullets li::before { background: #14702A; }
[data-theme="light"] .rules-hero { background: linear-gradient(135deg, #E9F5EC, #F6FBF7); border-color: #C6DECB; }
[data-theme="light"] .rules-hero > i { color: #14702A; }
[data-theme="light"] .rules-cta {
  background: linear-gradient(135deg, #22A935, #14702A);
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(20, 112, 42, 0.3);
}

/* Logo de la cabecera: más grande y sin recorte */
.app-header { padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px 14px; }
.brand-logo {
  width: 96px;
  height: 67px;
  object-fit: contain;
  border-radius: 12px;
  background: #000;
  box-shadow: 0 0 14px rgba(50, 199, 54, 0.45);
}
@media (max-width: 460px) {
  .brand-logo { width: 84px; height: 59px; }
}
@media (max-width: 400px) {
  .brand-logo { width: 74px; height: 52px; }
  .brand-text { display: none; }
}
[data-theme="light"] .brand-logo {
  box-shadow: 0 3px 12px rgba(20, 60, 30, 0.25);
  border-color: #14702A;
}

/* ==========================================================================
   PANTALLA SNACK BAR & CAFETERÍA
   ========================================================================== */
.amenity-card.is-link { cursor: pointer; }
.amenity-card.is-link:focus-visible { outline: 2px solid var(--km-lime); outline-offset: 2px; }
.amenity-more {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--km-lime);
}
.amenity-more i { font-size: 9px; }

.snack-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(50, 199, 54, 0.06));
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.snack-hero-emoji { font-size: 38px; line-height: 1; }
.snack-hero strong { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 900; color: var(--km-white); margin-bottom: 3px; }
.snack-hero p { font-size: 12.5px; line-height: 1.45; color: var(--km-neutral); }

.snack-section-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--km-lime);
  margin-bottom: 10px;
}
.snack-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.snack-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 12px;
  border-radius: var(--radius-md);
  background: var(--km-asphalt);
  border: 1px solid var(--km-stroke);
  transition: border-color 0.2s, transform 0.15s;
}
.snack-item:hover { border-color: var(--km-lime); transform: translateY(-1px); }
.snack-emoji { font-size: 26px; margin-bottom: 4px; }
.snack-item strong { font-size: 13.5px; font-weight: 800; color: var(--km-white); }
.snack-item small { font-size: 11px; color: var(--km-muted); }

.snack-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--km-surface-variant);
  border: 1px solid var(--km-stroke);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--km-neutral);
}
.snack-note i { color: var(--km-lime); margin-top: 2px; }

[data-theme="light"] .amenity-more,
[data-theme="light"] .snack-section-title,
[data-theme="light"] .snack-note i { color: #14702A; }
[data-theme="light"] .snack-hero { background: linear-gradient(135deg, #FFF4DC, #EEF8F0); border-color: #F2D9A0; }

/* ==========================================================================
   TOURNAMENT MODES: BY ROUNDS & GROUP STAGE
   ========================================================================== */

#tournament-rounds-view,
#tournament-groups-view {
  background: #041209;
}

.rounds-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 8px 0;
  scrollbar-width: none;
  flex-shrink: 0;
}
.rounds-filter-bar::-webkit-scrollbar { display: none; }

.round-filter-pill {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--km-asphalt);
  border: 1px solid var(--km-stroke);
  color: var(--km-neutral);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.round-filter-pill:hover,
.round-filter-pill.active {
  background: var(--km-lime);
  color: #0B0C0E;
  border-color: var(--km-lime);
  box-shadow: 0 0 12px var(--km-lime-glow);
}

.round-match-card {
  background: var(--km-asphalt);
  border: 1px solid var(--km-stroke);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.round-match-card:hover {
  border-color: var(--km-lime);
  transform: translateY(-2px);
}
.round-match-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}
.round-code-badge {
  background: rgba(50, 199, 54, 0.15);
  color: var(--km-lime);
  border: 1px solid rgba(50, 199, 54, 0.3);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-weight: 800;
  font-size: 10px;
}
.round-match-meta {
  color: var(--km-muted);
  font-size: 11px;
}
.round-teams-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--km-black);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.round-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--km-neutral);
}
.round-team-row.is-winner {
  color: var(--km-white);
  font-weight: 800;
}
.round-team-row.is-winner .round-score {
  color: var(--km-lime);
  font-weight: 900;
}
.round-team-name-box {
  display: flex;
  align-items: center;
  gap: 8px;
}
.round-team-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.round-score {
  font-family: var(--font-display);
  font-size: 16px;
}
.round-match-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--km-muted);
}
.round-mvp-badge {
  color: #F59E0B;
  font-weight: 700;
}

.groups-header-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--km-lime);
  letter-spacing: 0.8px;
}
.group-table-card {
  background: var(--km-asphalt);
  border: 1px solid var(--km-stroke);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.group-table-head {
  background: rgba(50, 199, 54, 0.08);
  border-bottom: 1px solid var(--km-stroke);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.group-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  color: var(--km-white);
}
.group-sub {
  font-size: 10px;
  color: var(--km-muted);
}
.group-standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  text-align: center;
}
.group-standings-table th {
  padding: 8px 4px;
  color: var(--km-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--km-stroke);
}
.group-standings-table td {
  padding: 8px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.group-standings-table tr:hover td {
  background: rgba(50, 199, 54, 0.05);
  cursor: pointer;
}
.group-standings-table td.team-cell {
  text-align: left;
  padding-left: 10px;
  font-weight: 700;
  color: var(--km-white);
  display: flex;
  align-items: center;
  gap: 6px;
}
.group-standings-table tr.is-qualified td.team-cell {
  color: var(--km-lime);
}
.group-standings-table td.pts-cell {
  font-weight: 900;
  color: var(--km-lime);
}
.group-pos-badge {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
}
.group-pos-badge.qualified {
  background: rgba(50, 199, 54, 0.2);
  color: var(--km-lime);
  border: 1px solid var(--km-lime);
}

/* Escudo más ancho (detalle del partido y perfil de equipo) */
.world-bracket__detail-team .world-bracket__crest {
  width: 72px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
}
.world-bracket__detail-team .world-bracket__crest i { font-size: 20px; }
.team-hero .world-bracket__crest {
  width: 84px;
  height: 56px;
  flex: 0 0 84px;
  border-radius: 14px;
}
.team-hero .world-bracket__crest i { font-size: 24px; }

/* Escudos del marcador: doble de tamaño y alineados al mismo nivel */
.world-bracket__scoreboard { align-items: start; }
.world-bracket__detail-team .world-bracket__crest {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  border-radius: 18px;
}
.world-bracket__detail-team .world-bracket__crest i { font-size: 34px; }
.world-bracket__scoreboard .world-bracket__detail-score {
  align-self: start;
  height: 76px;
}
@media (max-width: 380px) {
  .world-bracket__detail-team .world-bracket__crest {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }
  .world-bracket__scoreboard .world-bracket__detail-score { height: 64px; }
}

/* ==========================================================================
   ÁRBOL: columnas con más aire y líneas conectoras limpias
   ========================================================================== */
.world-bracket__match-card { width: 212px; }
.world-bracket__match-card--final { width: 224px; }

.world-bracket__round-label--left-r16  { left: 146px; }
.world-bracket__round-label--left-qf   { left: 407px; }
.world-bracket__round-label--left-sf   { left: 668px; }
.world-bracket__round-label--final     { left: 929px; }
.world-bracket__round-label--right-sf  { left: 1190px; }
.world-bracket__round-label--right-qf  { left: 1451px; }
.world-bracket__round-label--right-r16 { left: 1712px; }
.world-bracket__champion-prize { left: 929px; }

.bracket-route {
  stroke-width: 2.5;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}
.bracket-route--complete {
  stroke: #32C736;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
.bracket-route--champion {
  stroke-width: 3;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
.bracket-route--pending {
  stroke: rgba(159, 179, 166, 0.55);
  stroke-dasharray: 5 6;
  stroke-dashoffset: 0;
}
.bracket-route.is-team-focus { stroke-dasharray: none; stroke-dashoffset: 0; }

.bracket-node {
  fill: #32C736;
  stroke: #07111B;
  stroke-width: 1.5;
}
.bracket-node--gold { fill: var(--bracket-gold, #F4C95D); }


/* Strict Exclusivity for Tournament Modes (Full Tree vs By Rounds vs Group Stage) */
#tournament-detail-view .world-bracket[hidden],
#tournament-detail-view .world-bracket[style*="display: none"] {
  display: none !important;
}

#tournament-rounds-view[hidden],
#tournament-rounds-view[style*="display: none"] {
  display: none !important;
}

#tournament-groups-view[hidden],
#tournament-groups-view[style*="display: none"] {
  display: none !important;
}

#tournament-detail-view .bracket-jump-row[hidden],
#tournament-detail-view .bracket-jump-row[style*="display: none"] {
  display: none !important;
}

/* Trofeo 3D (model-viewer): fondo transparente, solo el objeto */
model-viewer.trophy-mega-img {
  --poster-color: transparent;
  --progress-bar-color: transparent;
  background: transparent;
  width: 100%;
  height: 100%;
  max-width: 260px;
  object-fit: unset;
  outline: none;
  animation: none;
  filter: drop-shadow(0 10px 18px rgba(245, 158, 11, 0.55));
}
.trophy-stage-wrapper { height: clamp(150px, 22vh, 210px); }
@media (max-height: 700px) {
  .trophy-stage-wrapper { height: 120px; }
}

/* Pase digital QR — modo claro */
[data-theme="light"] .user-qr-pass-mini {
  background: linear-gradient(135deg, #F1F8F3 0%, #E6F2E9 100%);
  border: 1px solid #C6DECB;
  box-shadow: 0 4px 14px rgba(20, 60, 30, 0.08);
}
[data-theme="light"] .user-qr-pass-mini::before {
  background: #14702A;
  box-shadow: 0 0 6px rgba(20, 112, 42, 0.4);
}
[data-theme="light"] .user-qr-pass-mini:hover {
  border-color: #14702A;
  box-shadow: 0 6px 18px rgba(20, 112, 42, 0.16);
}
[data-theme="light"] .user-qr-thumb {
  background: #FFFFFF;
  border-color: rgba(20, 112, 42, 0.3);
  box-shadow: 0 2px 6px rgba(15, 26, 19, 0.08);
}
[data-theme="light"] .user-qr-live-dot {
  background: #14702A;
  box-shadow: 0 0 6px rgba(20, 112, 42, 0.5);
}
[data-theme="light"] .user-qr-expand-badge {
  background: #E8F5E9;
  border-color: rgba(20, 112, 42, 0.2);
  color: #14702A;
}
[data-theme="light"] .user-qr-pass-mini:hover .user-qr-expand-badge {
  background: #14702A;
  color: #FFFFFF;
  box-shadow: 0 0 10px rgba(20, 112, 42, 0.4);
}
[data-theme="light"] .user-qr-pass-mini > i { color: #14702A !important; }
[data-theme="light"] .user-qr-pass-mini span { color: #0F1A13 !important; }
[data-theme="light"] .user-qr-pass-mini p { color: #46564B !important; }

/* Tarjeta de torneo en inicio (Modo claro) */
[data-theme="light"] .home-tourn-neon-card {
  border-color: #16A34A;
  box-shadow: 0 6px 20px rgba(22, 163, 74, 0.25);
}
[data-theme="light"] .home-tourn-neon-card:hover {
  border-color: #15803D;
  box-shadow: 0 8px 26px rgba(22, 163, 74, 0.35);
}
[data-theme="light"] .home-tourn-bracket-btn {
  background: #16A34A;
  color: #FFFFFF;
}



/* ==========================================================================
   📱 MODAL PASE DIGITAL DE ACCESO QR (DIGITAL ACCESS PASS MODAL)
   ========================================================================== */
.qr-pass-modal-window {
  max-width: 440px !important;
  width: 95% !important;
  background: #08110B !important;
  border: 1.5px solid rgba(50, 199, 54, 0.45) !important;
  border-radius: 22px !important;
  box-shadow: 0 0 45px rgba(50, 199, 54, 0.22), 0 20px 50px rgba(0, 0, 0, 0.95) !important;
  padding: 18px !important;
}

.qr-pass-card {
  background: linear-gradient(165deg, #0E1B13 0%, #060D08 100%);
  border: 1.5px solid rgba(50, 199, 54, 0.35);
  border-radius: 18px;
  padding: 16px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.qr-pass-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 10px;
}

.qr-pass-logo {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
  border: 1.5px solid var(--km-lime);
}

.qr-pass-venue {
  font-size: 14px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: 0.5px;
}

.qr-pass-sub {
  font-size: 9.5px;
  color: var(--km-neutral);
  font-weight: 700;
  display: block;
}

.qr-pass-code-pill {
  font-family: monospace;
  font-size: 13px;
  font-weight: 900;
  color: #0B0C0E;
  background: var(--km-lime);
  padding: 4px 10px;
  border-radius: 8px;
  letter-spacing: 1px;
  box-shadow: 0 0 12px rgba(50, 199, 54, 0.4);
}

.qr-code-display-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.qr-laser-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #32C736, #00FF66, #32C736, transparent);
  box-shadow: 0 0 12px #32C736, 0 0 20px #00FF66;
  z-index: 4;
  animation: qrLaserSweep 2.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes qrLaserSweep {
  0% { top: 5%; opacity: 0.85; }
  50% { top: 92%; opacity: 1; }
  100% { top: 5%; opacity: 0.85; }
}

.qr-hud-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--km-lime);
  border-style: solid;
  pointer-events: none;
  z-index: 3;
}
.qr-hud-corner.tl { top: 6px; left: 6px; border-width: 3px 0 0 3px; }
.qr-hud-corner.tr { top: 6px; right: 6px; border-width: 3px 3px 0 0; }
.qr-hud-corner.bl { bottom: 6px; left: 6px; border-width: 0 0 3px 3px; }
.qr-hud-corner.br { bottom: 6px; right: 6px; border-width: 0 3px 3px 0; }

.qr-code-img-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-pass-img {
  width: 210px;
  height: 210px;
  display: block;
  image-rendering: pixelated;
}

.qr-center-badge {
  position: absolute;
  width: 38px;
  height: 38px;
  background: #0B0C0E;
  border: 2.5px solid var(--km-lime);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--km-lime);
  font-size: 18px;
  box-shadow: 0 0 14px rgba(50, 199, 54, 0.5);
  pointer-events: none;
}

.qr-scan-hint {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  color: #1F2937;
  display: flex;
  align-items: center;
  gap: 6px;
}

.qr-pass-details-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.45);
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.qr-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.qr-detail-label {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--km-neutral);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.qr-detail-value {
  font-size: 12.5px;
  font-weight: 700;
  color: #FFFFFF;
}

.qr-security-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
}

/* ==========================================================================
   MY TEAM — título estilo videojuego en la tarjeta del equipo
   ========================================================================== */
.myteam-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 2px;
}
.mt-bar {
  flex: 1;
  max-width: 96px;
  height: 14px;
  transform: skewX(-24deg);
  background: repeating-linear-gradient(90deg, var(--km-lime) 0 7px, transparent 7px 12px);
}
.mt-bar-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 75%); mask-image: linear-gradient(90deg, transparent, #000 75%); }
.mt-bar-r { -webkit-mask-image: linear-gradient(270deg, transparent, #000 75%); mask-image: linear-gradient(270deg, transparent, #000 75%); }

.mt-title {
  position: relative;
  display: inline-block;
  margin: 0;
  font-family: 'Russo One', var(--font-display), sans-serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: skewX(-10deg);
  filter: drop-shadow(0 0 14px rgba(50, 199, 54, 0.55));
  animation: mtIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Relleno degradado con barrido de brillo que corre solo dentro de las letras */
.mt-title span {
  position: relative;
  z-index: 2;
  background:
    linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.95) 50%, transparent 58%),
    linear-gradient(180deg, #FFFFFF 0%, #E6FFE6 40%, #32C736 54%, #14702A 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 160% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: mtShine 3.8s 0.9s ease-in-out infinite;
}
/* Contorno grueso oscuro con sombra desplazada (look de logo de juego) */
.mt-title::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  color: #04110A;
  -webkit-text-stroke: 8px #04110A;
  transform: translate(2px, 3px);
}
@keyframes mtIn {
  from { opacity: 0; transform: skewX(-10deg) translateY(-10px) scale(0.88); }
  to   { opacity: 1; transform: skewX(-10deg) translateY(0) scale(1); }
}
@keyframes mtShine {
  0%, 35% { background-position: 160% 0, 0 0; }
  70%, 100% { background-position: -60% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mt-title, .mt-title span { animation: none; }
}
@media (max-width: 360px) {
  .mt-title { font-size: 28px; }
  .mt-bar { max-width: 56px; }
}

/* ---- Perfil en modo claro: carnet y tarjeta del equipo ---- */
[data-theme="light"] .player-pass {
  background: linear-gradient(135deg, #FFFFFF 0%, #E9F4EC 100%);
  border-color: #14702A;
  box-shadow: 0 10px 28px rgba(20, 60, 30, 0.14);
}
[data-theme="light"] .pass-tag { color: #14702A; }
[data-theme="light"] .pass-tier { color: #0F1A13; }
[data-theme="light"] .pass-qr-box { background: #F1F8F3; border: 1px solid #C6DECB; }
[data-theme="light"] .pass-qr-box [style*="monospace"] { color: #0F1A13 !important; }
[data-theme="light"] .qr-code-icon { color: #14702A; }
[data-theme="light"] .pass-stat { background: #EEF6F0; border: 1px solid #D5E5D9; }
[data-theme="light"] .pass-stat .num { color: #14702A; }

[data-theme="light"] .team-showcase-card {
  background: linear-gradient(135deg, #FFFFFF 0%, #E9F4EC 100%);
  border-color: #C6DECB;
  box-shadow: 0 10px 26px rgba(20, 60, 30, 0.10);
}
[data-theme="light"] .team-showcase-card .badge-live {
  background: #E3F1E7 !important;
  color: #14702A !important;
  border-color: #BFD9C5 !important;
}
[data-theme="light"] .team-showcase-card .btn-reserve[style*="surface-variant"] {
  background: #FFFFFF !important;
  color: #0F1A13 !important;
  border: 1.5px solid #C6DECB;
}
[data-theme="light"] .jersey-body { background: #32C736; }
[data-theme="light"] .mt-title { filter: drop-shadow(0 4px 8px rgba(20, 112, 42, 0.35)); }


/* ==========================================================================
   💳 MODAL MY WALLET & MI TEAM
   ========================================================================== */
.wallet-modal-window,
.my-team-modal-window {
  max-width: 440px !important;
  width: 95% !important;
  background: #08110B !important;
  border: 1.5px solid rgba(50, 199, 54, 0.45) !important;
  border-radius: 22px !important;
  box-shadow: 0 0 45px rgba(50, 199, 54, 0.22), 0 20px 50px rgba(0, 0, 0, 0.95) !important;
  padding: 18px !important;
}

.wallet-member-card {
  background: linear-gradient(145deg, #1A261E 0%, #08130B 60%, #030805 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.55);
  border-radius: 18px;
  padding: 16px;
  margin-top: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
}

.wallet-member-card::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.wallet-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wallet-card-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--bracket-gold);
}

.wallet-card-kicker {
  font-size: 8.5px;
  font-weight: 800;
  color: var(--bracket-gold);
  letter-spacing: 0.8px;
  display: block;
}

.wallet-card-brand {
  font-size: 12.5px;
  font-weight: 900;
  color: #fff;
  margin: 0;
  letter-spacing: 0.5px;
}

.wallet-card-balance-box {
  margin: 14px 0 10px 0;
}

.wallet-balance-amount {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: #FFFFFF;
  margin-top: 2px;
}

.wallet-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 10px;
}

.wallet-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.wallet-action-btn {
  background: #111D15;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.wallet-action-btn:hover {
  background: #192C20;
  border-color: var(--km-lime);
  transform: translateY(-2px);
}

.wallet-action-btn i {
  font-size: 18px;
}

.wallet-history-section {
  margin-top: 14px;
  background: rgba(0, 0, 0, 0.4);
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.wallet-tx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.wallet-tx-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.wallet-tx-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 12px;
}

.wallet-tx-icon.down { background: rgba(239, 68, 68, 0.18); color: #EF4444; }
.wallet-tx-icon.up { background: rgba(50, 199, 54, 0.18); color: var(--km-lime); }
.wallet-tx-icon.star { background: rgba(245, 158, 11, 0.18); color: #FCD34D; }

/* Modal Mi Team */
.my-team-card {
  background: linear-gradient(155deg, #1C1917 0%, #0C0A09 100%);
  border: 1.5px solid rgba(249, 115, 22, 0.45);
  border-radius: 16px;
  padding: 14px;
  margin-top: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.my-team-btn {
  background: #111D15;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}

.my-team-btn:hover {
  background: #192C20;
  border-color: var(--km-lime);
  transform: translateX(2px);
}


/* ==========================================================================
   🔍 TARJETA MY WALLET EN PERFIL & MODAL FIND TEAM
   ========================================================================== */
.profile-wallet-card {
  /* Superficie oscura fija: en modo claro sus textos conservan los tonos del tema oscuro (y --bracket-gold no estaba definido fuera del bracket) */
  --bracket-gold: #F4C95D;
  --km-neutral: #D4D9D6;
  --km-lime: #32C736;
  --km-white: #FFFFFF;
  color: #FFFFFF;
  background: linear-gradient(145deg, #18241C 0%, #0A140D 60%, #040905 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.45);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: all 0.22s ease;
}

.profile-wallet-card:hover {
  border-color: #FCD34D;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(245, 158, 11, 0.18), 0 8px 24px rgba(0, 0, 0, 0.6);
}

.find-team-modal-window {
  max-width: 440px !important;
  width: 95% !important;
  background: #08110B !important;
  border: 1.5px solid rgba(50, 199, 54, 0.45) !important;
  border-radius: 22px !important;
  box-shadow: 0 0 45px rgba(50, 199, 54, 0.22), 0 20px 50px rgba(0, 0, 0, 0.95) !important;
  padding: 18px !important;
}

.find-team-card {
  background: #0E1A12;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  transition: all 0.2s;
}

.find-team-card:hover {
  border-color: var(--km-lime);
  background: #122218;
}


/* ==========================================================================
   🎮 MÓDULO AVANZADO: FIND TEAM (ESTILO FIFA / PES ULTIMATE TEAM SCOUT)
   ========================================================================== */
.find-team-modal-window {
  max-width: 480px !important;
  width: 95% !important;
  background: #070D08 !important;
  border: 1.5px solid rgba(245, 158, 11, 0.45) !important;
  border-radius: 24px !important;
  box-shadow: 0 0 50px rgba(245, 158, 11, 0.22), 0 25px 60px rgba(0, 0, 0, 0.95) !important;
  padding: 16px !important;
}

.fut-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

/* ========================================================
   FUT LIVE BADGE & CAPITANÍA (Ultra-Premium Redesign)
   ======================================================== */
.fut-live-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.22) 0%, rgba(245, 158, 11, 0.1) 50%, rgba(13, 17, 15, 0.95) 100%);
  border: 1px solid rgba(255, 215, 0, 0.45);
  color: #FFDF00;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 215, 0, 0.22);
  backdrop-filter: blur(8px);
  overflow: hidden;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.fut-live-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-20deg);
  animation: badgeSweep 3.4s infinite ease-in-out;
}

@keyframes badgeSweep {
  0% { left: -100%; }
  35%, 100% { left: 160%; }
}

.fut-live-badge i {
  font-size: 10.5px;
  color: #FFE600;
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
  transition: transform 0.2s ease;
}

.fut-live-badge:hover {
  border-color: rgba(255, 215, 0, 0.8);
  box-shadow: 0 4px 18px rgba(255, 215, 0, 0.38);
  transform: translateY(-1px);
}

.fut-live-badge:hover i {
  transform: scale(1.15);
}

/* Insignia exclusiva de Capitanía (Captain's Armband) */
.fut-live-badge.badge-capitania {
  background: linear-gradient(135deg, rgba(255, 190, 11, 0.26) 0%, rgba(245, 158, 11, 0.12) 50%, rgba(13, 17, 15, 0.96) 100%);
  border: 1px solid rgba(255, 209, 102, 0.6);
  color: #FFD166;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 209, 102, 0.3);
  gap: 6px;
  padding: 4px 10px 4px 6px;
}

.fut-live-badge.badge-capitania .cap-band-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: linear-gradient(135deg, #FFE066 0%, #F59E0B 100%);
  color: #0B0E0C;
  font-weight: 950;
  font-size: 9.5px;
  line-height: 1;
  box-shadow: 0 0 8px rgba(255, 209, 102, 0.6);
  flex-shrink: 0;
}

.fut-live-badge.badge-capitania i {
  color: #FFD166;
  font-size: 10px;
}

.fut-tab-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 14px;
}

.fut-tab-btn {
  background: transparent;
  border: none;
  color: var(--km-neutral);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  transition: all 0.2s ease;
}

.fut-tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.fut-tab-btn.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(50, 199, 54, 0.2) 100%);
  color: #FFFFFF;
  border: 1px solid rgba(245, 158, 11, 0.5);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.15);
}

.fut-tab-badge {
  background: var(--km-lime);
  color: #070D08;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 999px;
}

/* ==========================================================================
   🃏 CARTA FIFA FUT / PES SHIELD CARD (ORO ESPECIAL)
   ========================================================================== */
.fut-card-wrapper {
  display: flex;
  justify-content: center;
  margin: 4px 0 16px 0;
  perspective: 1000px;
}

.fut-card.gold-rare {
  width: 250px;
  background: linear-gradient(145deg, #241A06 0%, #523B0D 25%, #181203 60%, #362708 100%);
  border: 2px solid #FCD34D;
  border-radius: 20px;
  padding: 14px 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 25px rgba(245, 158, 11, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.fut-card.gold-rare:hover {
  transform: translateY(-4px) rotateY(2deg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.9), 0 0 35px rgba(245, 158, 11, 0.45);
}

.fut-card-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(252, 211, 77, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.fut-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.fut-rating-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.fut-ovr {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 900;
  color: #FFF;
  text-shadow: 0 0 12px rgba(252, 211, 77, 0.6);
  letter-spacing: -1px;
}

.fut-pos {
  font-size: 13px;
  font-weight: 900;
  color: #FCD34D;
  margin-top: 2px;
  letter-spacing: 0.5px;
}

.fut-flag {
  font-size: 15px;
  margin-top: 4px;
}

.fut-crest-mini {
  font-size: 13px;
  margin-top: 2px;
}

.fut-player-img-wrap {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #FCD34D;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
  background: #0A0A0A;
}

.fut-player-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fut-player-name-banner {
  text-align: center;
  margin-top: 8px;
  padding: 4px 0;
  border-top: 1px solid rgba(252, 211, 77, 0.35);
  border-bottom: 1px solid rgba(252, 211, 77, 0.35);
  background: rgba(0, 0, 0, 0.35);
}

.fut-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 1px;
  display: block;
}

.fut-playstyle-pill {
  font-size: 9px;
  font-weight: 900;
  color: #FCD34D;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
}

.fut-stats-grid {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10px;
  padding: 6px 4px;
}

.fut-stat-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fut-stats-divider {
  width: 1px;
  height: 48px;
  background: rgba(252, 211, 77, 0.25);
}

.fut-stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.fut-stat-num {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  color: #FFFFFF;
  min-width: 18px;
}

.fut-stat-lbl {
  font-size: 10px;
  font-weight: 800;
  color: #FCD34D;
  letter-spacing: 0.5px;
}

.fut-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 9.5px;
  color: var(--km-neutral);
  font-weight: 700;
}

/* ==========================================================================
   🎛️ PANEL DE CONTROL Y PERSONALIZACIÓN DE ATRIBUTOS
   ========================================================================== */
.fut-customizer-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 48vh;
  overflow-y: auto;
  padding-right: 4px;
}

.fut-control-group {
  background: #0B160E;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 10px 12px;
}

.fut-group-title {
  font-size: 11px;
  font-weight: 800;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fut-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fut-pill {
  background: #08110B;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--km-neutral);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fut-pill:hover {
  background: #112015;
  color: #fff;
  border-color: rgba(50, 199, 54, 0.4);
}

.fut-pill.active {
  background: var(--km-lime);
  color: #070D08;
  border-color: var(--km-lime);
  box-shadow: 0 0 12px rgba(50, 199, 54, 0.35);
}

.fut-sliders-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.fut-slider-item {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 6px 8px;
}

.fut-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--km-neutral);
  margin-bottom: 4px;
}

.fut-slider-head strong {
  color: var(--bracket-gold);
  font-size: 12px;
}

.fut-slider-item input[type="range"] {
  width: 100%;
  accent-color: var(--km-lime);
  cursor: pointer;
  height: 4px;
}

.fut-cta-search-btn {
  background: linear-gradient(135deg, #1B7A27 0%, #32C736 100%);
  color: #070D08;
  border: none;
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 900;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 8px 20px rgba(50, 199, 54, 0.3);
  transition: all 0.2s ease;
  margin-top: 4px;
}

.fut-cta-search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(50, 199, 54, 0.45);
}

/* ==========================================================================
   🏟️ SECCIÓN 2: CLUBES RECLUTADORES Y QUÍMICA FIFA
   ========================================================================== */
.fut-match-summary-banner {
  background: linear-gradient(145deg, #182215 0%, #0A140C 100%);
  border: 1px solid rgba(50, 199, 54, 0.4);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.fut-chem-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #08110B;
  border: 2.5px solid var(--km-lime);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(50, 199, 54, 0.35);
  line-height: 1;
}

.fut-chem-circle .chem-num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  color: var(--km-lime);
}

.fut-chem-circle .chem-lbl {
  font-size: 6.5px;
  font-weight: 800;
  color: var(--km-muted);
}

.fut-clubs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 2px;
}

.fut-club-card {
  background: #0C1710;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 12px 14px;
  transition: all 0.22s ease;
}

.fut-club-card:hover {
  border-color: var(--km-lime);
  background: #112217;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.club-card-header {
  display: flex;
  gap: 10px;
  align-items: center;
}

.club-crest-fut {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 18px;
  border: 1.5px solid;
}

.club-crest-fut.blue {
  background: rgba(37, 99, 235, 0.2);
  border-color: #3B82F6;
  color: #60A5FA;
}

.club-crest-fut.purple {
  background: rgba(147, 51, 234, 0.2);
  border-color: #A855F7;
  color: #C084FC;
}

.club-crest-fut.gold {
  background: rgba(245, 158, 11, 0.2);
  border-color: #F59E0B;
  color: #FCD34D;
}

.club-crest-fut.emerald {
  background: rgba(50, 199, 54, 0.2);
  border-color: var(--km-lime);
  color: var(--km-lime);
}

.club-info-col {
  flex: 1;
}

.club-name {
  font-size: 15px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0;
}

.club-sub {
  font-size: 11px;
  color: var(--km-neutral);
  margin-top: 1px;
}

.chem-badge-pill {
  font-size: 9.5px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.chem-badge-pill.high {
  background: rgba(50, 199, 54, 0.2);
  border: 1px solid var(--km-lime);
  color: var(--km-lime);
  box-shadow: 0 0 10px rgba(50, 199, 54, 0.2);
}

.chem-badge-pill.med {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid #F59E0B;
  color: #FCD34D;
}

.club-needs-box {
  margin: 8px 0;
  background: rgba(0, 0, 0, 0.35);
  border-left: 3px solid var(--bracket-gold);
  border-radius: 6px;
  padding: 6px 10px;
}

.need-tag {
  font-size: 10px;
  font-weight: 900;
  color: #FCD34D;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.need-desc {
  font-size: 11.5px;
  color: #D1D5DB;
  margin-top: 2px;
  line-height: 1.35;
}

.club-perks-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 10.5px;
  color: var(--km-neutral);
  margin-bottom: 10px;
}

.club-perks-row span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.club-actions-row {
  display: flex;
  gap: 8px;
}

.fut-apply-btn {
  flex: 1;
  background: var(--km-lime);
  color: #070D08;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.fut-apply-btn:hover {
  background: #4EE852;
  transform: translateY(-1px);
}

.fut-tryout-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fut-tryout-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #FFFFFF;
}

/* ==========================================================================
   📋 SECCIÓN 3: TABLÓN DE AGENTES LIBRES
   ========================================================================== */
.fut-free-agent-hero {
  background: linear-gradient(145deg, #1C1808 0%, #0F130B 100%);
  border: 1.5px dashed var(--bracket-gold);
  border-radius: 16px;
  padding: 12px 14px;
}

.fut-crest-mini-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 16px;
}

.fut-crest-mini-badge.gold {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid #F59E0B;
  color: #FCD34D;
}

.fut-publish-card-btn {
  width: 100%;
  margin-top: 10px;
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #070D08;
  border: none;
  border-radius: 10px;
  padding: 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
  transition: all 0.2s ease;
}

.fut-publish-card-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45);
}

.fut-agents-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 44vh;
  overflow-y: auto;
}

.fut-agent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 8px 10px;
}

.agent-mini-fut {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 1px solid;
}

.agent-mini-fut.gold {
  background: rgba(245, 158, 11, 0.2);
  border-color: #F59E0B;
}

.agent-mini-fut.silver {
  background: rgba(148, 163, 184, 0.2);
  border-color: #94A3B8;
}

.agent-mini-fut .ovr {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  color: #FFF;
}

.agent-mini-fut .pos {
  font-size: 8px;
  font-weight: 800;
  color: #FCD34D;
}

.agent-info {
  flex: 1;
}

.agent-name {
  font-size: 12.5px;
  font-weight: 800;
  color: #FFFFFF;
}

.agent-meta {
  font-size: 10px;
  color: var(--km-neutral);
  margin-top: 1px;
}


/* ==========================================================================
   🎮 PANTALLA COMPLETA SCREEN-FIND-TEAM (FIFA / PES FUT SCOUTING & TRANSFER)
   ========================================================================== */
#screen-find-team {
  padding: 12px 14px 40px 14px;
}

.screen-header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(180deg, #101F14 0%, #08110B 100%);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 16px;
  margin-bottom: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.screen-back-btn {
  background: #14281B;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  padding: 7px 12px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.screen-back-btn:hover {
  background: #1C3825;
  border-color: var(--km-lime);
  color: var(--km-lime);
}

.screen-header-title-wrap {
  text-align: center;
  flex: 1;
}

.screen-header-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: 0.5px;
}

.screen-header-sub {
  font-size: 10px;
  color: var(--bracket-gold);
  font-weight: 700;
  text-transform: uppercase;
  display: block;
}

#screen-find-team .fut-customizer-panel {
  max-height: none !important;
  overflow-y: visible !important;
}

#screen-find-team .fut-clubs-list {
  max-height: none !important;
  overflow-y: visible !important;
}

#screen-find-team .fut-agents-feed {
  max-height: none !important;
  overflow-y: visible !important;
}

/* ==========================================================================
   MODAL DE BIOGRAFÍA DE JUGADOR & SQUAD LIST INTERACTIVO
   ========================================================================== */

.squad-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.squad-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--km-lime);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 10px rgba(50, 199, 54, 0.15);
}

.squad-row:active {
  transform: scale(0.98);
}

.squad-bio-badge {
  font-size: 10px;
  font-weight: 800;
  color: var(--bracket-gold);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.player-bio-modal-window {
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 20px;
  background: linear-gradient(180deg, #16181D 0%, #0F1014 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(50, 199, 54, 0.15);
  padding: 16px 18px 20px;
  scrollbar-width: thin;
}

/* En pantallas bajas (móvil) el contenido no debe encogerse: la ventana hace scroll */
.player-bio-modal-window > * {
  flex-shrink: 0;
}

.player-bio-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  margin: 10px 0 12px;
  background: linear-gradient(135deg, rgba(30, 32, 40, 0.8) 0%, rgba(20, 22, 28, 0.95) 100%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.player-bio-hero::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(50, 199, 54, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.bio-avatar-wrap {
  position: relative;
  width: 68px;
  height: 68px;
  flex-shrink: 0;
}

.bio-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid var(--bracket-gold);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);
}

.bio-jersey-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: #0B0C0E;
  color: var(--bracket-gold);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 6px;
  border: 1.5px solid var(--bracket-gold);
}

.bio-hero-info {
  flex: 1;
  min-width: 0;
}

.bio-player-name {
  font-size: 17px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: 0.3px;
}

.bio-flag {
  font-size: 14px;
}

.bio-role-badge {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--km-lime);
  margin-top: 2px;
}

.bio-club-tag {
  font-size: 10.5px;
  color: var(--km-neutral);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.bio-ovr-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 52px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.15) 100%);
  border: 1.5px solid var(--bracket-gold);
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
  flex-shrink: 0;
}

.bio-ovr-num {
  font-size: 20px;
  font-weight: 900;
  font-family: var(--font-display);
  color: #FCD34D;
  line-height: 1;
}

.bio-ovr-lbl {
  font-size: 9px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.6px;
}

/* Quick Grid */
.bio-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.bio-quick-item {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bio-quick-item .lbl {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--km-neutral);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.bio-quick-item .val {
  font-size: 12px;
  font-weight: 800;
  color: #FFFFFF;
}

/* Season Stats Row */
.bio-season-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.season-stat-item {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 8px 4px;
  text-align: center;
}

.season-stat-item .s-num {
  display: block;
  font-size: 17px;
  font-weight: 900;
  font-family: var(--font-display);
  color: var(--km-lime);
}

.season-stat-item .s-lbl {
  font-size: 8.5px;
  font-weight: 800;
  color: var(--km-neutral);
  letter-spacing: 0.5px;
}

/* Bio Text Card */
.bio-text-card {
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--km-lime);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.bio-section-title {
  font-size: 10.5px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bio-description {
  font-size: 12px;
  line-height: 1.5;
  color: var(--km-neutral);
  margin: 0;
}

/* Attributes Bar Grid */
.bio-skills-section {
  margin-bottom: 14px;
}

.bio-bars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
  margin-top: 6px;
}

.bio-bar-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bio-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 800;
}

.bio-bar-lbl {
  color: rgba(255, 255, 255, 0.8);
}

.bio-bar-val {
  color: var(--bracket-gold);
}

.bio-bar-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.bio-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #32C736, #F59E0B);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Actions Footer */
.bio-actions-footer {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.bio-contact-btn {
  flex: 1;
  background: #25D366;
  color: #0B0C0E;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.bio-contact-btn:hover {
  background: #22c05b;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}


/* ==========================================================================
   🎮 PANTALLA COMPLETA SCREEN-FIND-TEAM (REDESIGN & FULL ELEMENT VISIBILITY)
   ========================================================================== */
#screen-find-team {
  padding: 12px 14px 130px 14px !important;
}

.screen-header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #131E16 0%, #0A120D 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 16px;
  margin-bottom: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.screen-back-btn {
  background: #14281B;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  padding: 8px 12px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.screen-back-btn:hover {
  background: #1C3825;
  border-color: var(--km-lime);
  color: var(--km-lime);
}

.screen-header-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  min-width: 0;
}

.header-badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 3px;
  flex-wrap: wrap;
}

.header-market-pill {
  font-size: 8.5px;
  font-weight: 800;
  color: var(--km-lime);
  background: rgba(50, 199, 54, 0.15);
  border: 1px solid rgba(50, 199, 54, 0.3);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.5px;
}

.screen-header-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.screen-header-sub {
  font-size: 10px;
  color: var(--bracket-gold);
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
  letter-spacing: 0.4px;
}

.screen-header-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.12) 100%);
  border: 1.5px solid var(--bracket-gold);
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

.screen-header-stat .h-ovr-val {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
  color: #FCD34D;
  line-height: 1;
}

.screen-header-stat .h-ovr-lbl {
  font-size: 8px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.5px;
}

/* Tab 1 Layout Split */
.fut-profile-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (min-width: 768px) {
  .fut-profile-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    align-items: start;
  }
  .fut-card-wrapper {
    position: sticky;
    top: 10px;
    margin: 0;
  }
}

/* Pills Row & Buttons */
.fut-pills-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.fut-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--km-neutral);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.fut-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.25);
}

.fut-pill.active {
  background: var(--km-lime);
  color: #070D08;
  border-color: var(--km-lime);
  font-weight: 900;
  box-shadow: 0 0 14px rgba(50, 199, 54, 0.35);
}

/* Sliders Grid */
.fut-sliders-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
  margin-top: 4px;
}

.fut-slider-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(0, 0, 0, 0.3);
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.fut-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
}

.fut-slider-head strong {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--bracket-gold);
  font-weight: 900;
}

.fut-slider-item input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  outline: none;
  margin: 6px 0 2px;
  cursor: pointer;
}

.fut-slider-item input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--km-lime);
  border: 2px solid #070D08;
  box-shadow: 0 0 10px rgba(50, 199, 54, 0.7);
  cursor: pointer;
  transition: transform 0.15s;
}

.fut-slider-item input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

/* CTA Search Button */
.fut-cta-search-btn {
  width: 100%;
  background: linear-gradient(135deg, #1B7A27 0%, #32C736 100%);
  color: #070D08;
  border: none;
  border-radius: 14px;
  padding: 12px 16px;
  font-family: var(--font-display);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 8px 24px rgba(50, 199, 54, 0.35);
  margin-top: 14px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.fut-cta-search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(50, 199, 54, 0.5);
}

/* Tab 2: Chemistry & Club Cards */
.fut-match-summary-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(20, 35, 24, 0.9) 0%, rgba(10, 18, 12, 0.95) 100%);
  border: 1px solid rgba(50, 199, 54, 0.35);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.fut-chem-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2.5px solid var(--km-lime);
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(50, 199, 54, 0.35);
}

.fut-chem-circle .chem-num {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  color: var(--km-lime);
  line-height: 1;
}

.fut-chem-circle .chem-lbl {
  font-size: 7.5px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.4px;
}

.fut-clubs-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fut-club-card {
  background: linear-gradient(180deg, #151916 0%, #0E120F 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.fut-club-card:hover {
  border-color: rgba(245, 158, 11, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6);
}

.club-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.club-info-col {
  flex: 1;
  min-width: 0;
}

.club-name {
  font-size: 15px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0;
}

.club-sub {
  font-size: 11px;
  color: var(--km-neutral);
  margin-top: 2px;
}

.chem-badge-pill {
  font-size: 10px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.chem-badge-pill.high {
  background: rgba(50, 199, 54, 0.2);
  color: var(--km-lime);
  border: 1px solid var(--km-lime);
}

.chem-badge-pill.med {
  background: rgba(245, 158, 11, 0.2);
  color: #FCD34D;
  border: 1px solid #FCD34D;
}

.club-needs-box {
  background: rgba(0, 0, 0, 0.35);
  border-left: 3px solid var(--bracket-gold);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
}

.need-tag {
  font-size: 9.5px;
  font-weight: 900;
  color: var(--bracket-gold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.need-desc {
  font-size: 11.5px;
  color: var(--km-neutral);
  line-height: 1.4;
}

.club-perks-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 10.5px;
  color: var(--km-neutral);
  margin-bottom: 12px;
}

.club-perks-row span {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 3px 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.club-actions-row {
  display: flex;
  gap: 8px;
}

.fut-apply-btn {
  flex: 1;
  background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  padding: 9px 12px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.fut-apply-btn:hover {
  background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}

.fut-tryout-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 9px 14px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.fut-tryout-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--bracket-gold);
  color: var(--bracket-gold);
}

/* Tab 3: Free Agent Hero & Feed */
.fut-free-agent-hero {
  background: linear-gradient(135deg, rgba(35, 26, 8, 0.8) 0%, rgba(18, 14, 4, 0.95) 100%);
  border: 1px solid var(--bracket-gold);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.fut-crest-mini-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bracket-gold);
  color: #070D08;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fut-publish-card-btn {
  width: 100%;
  background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
  color: #070D08;
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
  transition: all 0.2s;
}

.fut-publish-card-btn:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}

.fut-agents-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fut-agent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 8px 12px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  user-select: none;
}

.fut-agent-row:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--bracket-gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.fut-agent-row:active {
  transform: scale(0.985);
}

.fut-bio-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--bracket-gold);
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 6px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
  transition: background 0.2s, color 0.2s;
}

.fut-agent-row:hover .fut-bio-tag {
  background: var(--bracket-gold);
  color: #0B0E14;
}

.agent-mini-fut {
  width: 38px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid #FCD34D;
  background: linear-gradient(135deg, #241A06 0%, #523B0D 100%);
}

.agent-mini-fut.silver {
  border-color: #CBD5E1;
  background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
}

.agent-mini-fut .ovr {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1;
}

.agent-mini-fut .pos {
  font-size: 8px;
  font-weight: 900;
  color: #FCD34D;
  letter-spacing: 0.5px;
}

.agent-mini-fut.silver .pos {
  color: #94A3B8;
}

.agent-info {
  flex: 1;
  min-width: 0;
}

.agent-name {
  font-size: 13px;
  font-weight: 800;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 5px;
}

.agent-meta {
  font-size: 10.5px;
  color: var(--km-neutral);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ==========================================================================
   ⚽ CANCHA DE FÚTBOL INTERACTIVA (PITCH SELECTOR EA SPORTS FC / FIFA STYLE)
   ========================================================================== */
.fut-pitch-control-group {
  background: #0B160E;
  border: 1px solid rgba(50, 199, 54, 0.25);
  border-radius: 16px;
  padding: 12px 14px;
  position: relative;
}

.pitch-hint-badge {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--km-lime);
  background: rgba(50, 199, 54, 0.15);
  border: 1px solid rgba(50, 199, 54, 0.3);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.fut-interactive-pitch {
  position: relative;
  width: 100%;
  height: 250px;
  border-radius: 14px;
  background: repeating-linear-gradient(
    180deg,
    #0E381A 0px,
    #0E381A 25px,
    #0A2E15 25px,
    #0A2E15 50px
  );
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  user-select: none;
}

/* Líneas tácticas reglamentarias */
.pitch-half-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-50%);
}

.pitch-center-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.pitch-center-circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
}

.pitch-penalty-box-top {
  position: absolute;
  top: 0;
  left: 50%;
  width: 110px;
  height: 36px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-top: none;
  transform: translateX(-50%);
  pointer-events: none;
}

.pitch-penalty-box-bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 120px;
  height: 38px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-bottom: none;
  transform: translateX(-50%);
  pointer-events: none;
}

.pitch-goal-bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 54px;
  height: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-bottom: none;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Nodos tácticos interactivos */
.pitch-node {
  position: absolute;
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  outline: none;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
}

.pitch-node:hover {
  transform: translate(-50%, -50%) scale(1.12);
}

.pitch-node-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  overflow: hidden;
  background: #0B110D;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  transition: all 0.25s ease;
}

.pitch-node-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  filter: grayscale(40%);
  transition: all 0.25s ease;
}

.pitch-node-badge {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 900;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  transition: all 0.25s ease;
}

.pitch-node-name {
  font-size: 8.5px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}

/* Coordenadas en la cancha */
.pitch-node.pos-del   { top: 16%; left: 50%; }
.pitch-node.pos-ext-l { top: 25%; left: 18%; }
.pitch-node.pos-ext-r { top: 25%; left: 82%; }
.pitch-node.pos-med   { top: 50%; left: 50%; }
.pitch-node.pos-def   { top: 73%; left: 50%; }
.pitch-node.pos-por   { top: 89%; left: 50%; }

/* ESTADO ACTIVO SELECCIONADO: Brillo neón, pulso y avatar enfocado */
.pitch-node.active {
  transform: translate(-50%, -50%) scale(1.18);
  z-index: 10;
}

.pitch-node.active .pitch-node-avatar {
  border-color: var(--km-lime);
  box-shadow: 0 0 16px rgba(50, 199, 54, 0.9), 0 0 30px rgba(50, 199, 54, 0.4);
  animation: pitchNodePulse 2s infinite ease-in-out;
}

.pitch-node.active .pitch-node-avatar img {
  opacity: 1;
  filter: none;
}

.pitch-node.active .pitch-node-badge {
  background: var(--km-lime);
  color: #070D08;
  border-color: var(--km-lime);
  font-weight: 900;
  box-shadow: 0 0 10px rgba(50, 199, 54, 0.7);
}

.pitch-node.active .pitch-node-name {
  color: #FCD34D;
  font-weight: 900;
  text-shadow: 0 0 6px rgba(245, 158, 11, 0.8);
}

@keyframes pitchNodePulse {
  0%, 100% {
    box-shadow: 0 0 12px rgba(50, 199, 54, 0.8), 0 0 24px rgba(50, 199, 54, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(50, 199, 54, 1), 0 0 35px rgba(245, 158, 11, 0.6);
  }
}

/* Player Bio Modal on top of all modals (including team overlay) */
#player-bio-modal {
  z-index: 20000 !important;
}
#player-bio-modal.open {
  display: flex !important;
}
.team-player {
  cursor: pointer;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.team-player:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--bracket-gold) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}
.team-player:active {
  transform: scale(0.98);
}

/* Language Dropdown Menu */
.lang-dropdown-container {
  position: relative;
  display: inline-block;
}

.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: rgba(18, 22, 32, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(50, 199, 54, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 500;
  display: none;
  flex-direction: column;
  gap: 4px;
  transform-origin: top right;
  animation: dropdownPop 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lang-dropdown-menu.show {
  display: flex;
}

@keyframes dropdownPop {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.lang-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  width: 100%;
}

.lang-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

.lang-dropdown-item.active {
  background: rgba(50, 199, 54, 0.14);
  border-color: rgba(50, 199, 54, 0.35);
}

.lang-dropdown-item .lang-flag {
  font-size: 19px;
  line-height: 1;
}

.lang-dropdown-item .lang-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.lang-dropdown-item .lang-info strong {
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
}

.lang-dropdown-item .lang-info small {
  font-size: 9.5px;
  color: var(--km-neutral);
}

.lang-dropdown-item .lang-check {
  font-size: 11px;
  color: var(--km-lime);
  opacity: 0;
  transition: opacity 0.15s;
}

.lang-dropdown-item.active .lang-check {
  opacity: 1;
}

[data-theme="light"] .lang-dropdown-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .lang-dropdown-item {
  color: #111;
}

[data-theme="light"] .lang-dropdown-item .lang-info strong {
  color: #111;
}

[data-theme="light"] .lang-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Styled Select Dropdown (Demo mode View As) */
.th-viewas {
  display: grid;
  gap: 8px;
  margin: 14px 0 10px 0;
}
.th-viewas span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--km-lime, #32C736);
  display: flex;
  align-items: center;
  gap: 6px;
}
.th-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.th-viewas select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 13px 42px 13px 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(50, 199, 54, 0.4);
  background: rgba(18, 24, 34, 0.95);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}
.th-viewas select:hover {
  border-color: var(--km-lime, #32C736);
  background: rgba(24, 32, 46, 0.98);
  box-shadow: 0 0 14px rgba(50, 199, 54, 0.25);
}
.th-viewas select:focus {
  border-color: var(--km-lime, #32C736);
  box-shadow: 0 0 0 3px rgba(50, 199, 54, 0.25), 0 6px 18px rgba(0, 0, 0, 0.5);
}
.th-viewas select option {
  background: #111827;
  color: #FFFFFF;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
}
.th-select-arrow {
  position: absolute;
  right: 14px;
  pointer-events: none;
  font-size: 12px;
  color: var(--km-lime, #32C736);
  transition: transform 0.2s ease;
}
.th-viewas select:focus + .th-select-arrow {
  transform: rotate(180deg);
}
[data-theme="light"] .th-viewas select {
  background: #FFFFFF;
  color: #111827;
  border-color: rgba(20, 112, 42, 0.4);
}
[data-theme="light"] .th-viewas select option {
  background: #FFFFFF;
  color: #111827;
}
.th-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--bk-muted, #94A3B8);
  cursor: pointer;
  transition: all 0.2s;
}
.th-reset:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
  color: #EF4444;
}

/* ==========================================================================
   TEAM INVITATION BANNER & ONBOARDING FLOW
   ========================================================================== */
.team-invite-banner {
  position: relative;
  background: linear-gradient(135deg, rgba(20, 38, 26, 0.96) 0%, rgba(11, 15, 22, 0.98) 100%);
  border: 1.5px solid var(--km-lime);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 10px 30px rgba(50, 199, 54, 0.22), 0 0 0 1px rgba(50, 199, 54, 0.25);
  overflow: hidden;
  animation: fadeInDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.invite-banner-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(50, 199, 54, 0.35) 0%, transparent 70%);
  pointer-events: none;
}

.invite-banner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.invite-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(50, 199, 54, 0.18);
  border: 1px solid var(--km-lime);
  color: var(--km-lime);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 999px;
}

.invite-banner-body {
  display: flex;
  align-items: center;
  gap: 12px;
}

.invite-player-avatar {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--bracket-gold);
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.invite-player-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.invite-jersey-pill {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--km-lime);
  color: #0B0E14;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 4px;
  border-radius: 4px;
}

.invite-banner-info h4 {
  font-size: 15px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0 0 3px 0;
}

.invite-banner-info p {
  font-size: 11.5px;
  color: var(--km-neutral);
  line-height: 1.4;
  margin: 0 0 6px 0;
}

.invite-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.invite-meta-chips span {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2px 7px;
  border-radius: 6px;
  color: #E2E8F0;
  font-weight: 700;
}

.invite-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.btn-invite-accept {
  flex: 1 1 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: linear-gradient(135deg, #32C736 0%, #1B7A27 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(50, 199, 54, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn-invite-accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(50, 199, 54, 0.5);
}

.btn-invite-register {
  flex: 1 1 160px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: rgba(245, 158, 11, 0.14);
  border: 1.5px solid var(--bracket-gold);
  color: var(--bracket-gold);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-invite-register:hover {
  background: var(--bracket-gold);
  color: #0B0E14;
}

.btn-invite-reject {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--km-muted);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.btn-invite-reject:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #EF4444;
  border-color: rgba(239, 68, 68, 0.3);
}

.invite-faces-picker {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px;
}

.face-pick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 5px;
  border-radius: 12px;
  border: 2px solid transparent;
  transition: all 0.2s;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04);
}

.face-pick-item img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.face-pick-item span {
  font-size: 10px;
  font-weight: 700;
  color: var(--km-neutral);
}

.face-pick-item.selected {
  border-color: var(--km-lime);
  background: rgba(50, 199, 54, 0.14);
}

.face-pick-item.selected span {
  color: var(--km-lime);
}

#player-invite-send-modal,
#player-invite-profile-modal,
#add-player-choice-modal {
  z-index: 20000 !important;
}

/* ========================================================
   MODAL DE ELECCIÓN: AGREGAR JUGADOR (Add Player Choice)
   ======================================================== */
.add-player-choice-window {
  max-width: 480px;
  width: 100%;
  border: 1px solid rgba(50, 199, 54, 0.35);
  background: #0E1310;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95), 0 0 35px rgba(50, 199, 54, 0.15);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.add-player-options-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.add-player-option-card {
  background: linear-gradient(180deg, rgba(24, 30, 26, 0.95) 0%, rgba(14, 18, 16, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.add-player-option-card:hover {
  transform: translateY(-2px);
  border-color: rgba(50, 199, 54, 0.55);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65), 0 0 18px rgba(50, 199, 54, 0.2);
}

.add-player-option-card:focus-visible {
  outline: 2px solid var(--km-lime);
  outline-offset: 2px;
}

.opt-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.opt-icon-bubble {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.opt-icon-bubble.opt-green {
  background: rgba(16, 185, 129, 0.16);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.opt-icon-bubble.opt-lime {
  background: rgba(50, 199, 54, 0.16);
  color: #4EE852;
  border: 1px solid rgba(50, 199, 54, 0.35);
}

.opt-badge-pill {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 3px 9px;
  border-radius: 999px;
}

.opt-badge-pill.green {
  background: rgba(16, 185, 129, 0.14);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.opt-badge-pill.lime {
  background: rgba(50, 199, 54, 0.14);
  color: #4EE852;
  border: 1px solid rgba(50, 199, 54, 0.3);
}

.opt-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.opt-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.25;
}

.opt-desc {
  font-size: 11.5px;
  color: #A0ABA4;
  line-height: 1.45;
  margin: 0;
}

.opt-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  font-weight: 800;
  color: #4EE852;
  transition: padding-right 0.2s ease;
}

.add-player-option-card:hover .opt-card-footer {
  color: #6CF870;
}

.add-player-option-card:hover .opt-card-footer i {
  transform: translateX(4px);
  transition: transform 0.2s ease;
}

/* ===================================================================
   ⚽ PANTALLA COMPLETA DE ACADEMIA INFANTIL (#screen-kids-academy)
   =================================================================== */
#screen-kids-academy {
  padding-bottom: 90px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* 1. Header con botón Atrás */
.academy-screen-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 2px 2px 2px;
}

.academy-back-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--km-surface-variant, #13171F);
  color: var(--km-white, #FFFFFF);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.academy-back-btn:hover {
  border-color: var(--km-lime, #32C736);
  color: var(--km-lime, #32C736);
  transform: translateX(-2px);
}

.academy-header-info {
  flex: 1;
}

.academy-screen-kicker {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--km-lime, #32C736);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.academy-screen-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
  color: var(--km-white);
  margin: 0;
  letter-spacing: -0.3px;
}

.academy-top-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(50, 199, 54, 0.12);
  border: 1px solid rgba(50, 199, 54, 0.35);
  color: var(--km-lime, #32C736);
  font-size: 10.5px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

/* 2. Hero Card Principal */
.academy-hero-card {
  position: relative;
  background: linear-gradient(180deg, #13171F 0%, #0D1016 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.academy-hero-media {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.academy-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.academy-hero-card:hover .academy-hero-img {
  transform: scale(1.03);
}

.academy-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 16, 22, 0.1) 0%, rgba(13, 16, 22, 0.85) 75%, #0D1016 100%);
}

.academy-badge-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(11, 14, 20, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(50, 199, 54, 0.45);
  color: var(--km-lime, #32C736);
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.academy-hero-body {
  padding: 16px 18px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.academy-hero-heading {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.25;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.2px;
}

.academy-hero-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: #A0ABA4;
  margin: 0;
}

.academy-hero-ctas {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.btn-academy-primary {
  flex: 1;
  min-width: 200px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #32C736 0%, #20A024 100%);
  color: #071708;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.2px;
  padding: 13px 18px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(50, 199, 54, 0.35);
  transition: all 0.2s ease;
}

.btn-academy-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(50, 199, 54, 0.5);
}

.btn-academy-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
  padding: 13px 18px;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-academy-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

/* 3. Métricas Destacadas */
.academy-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.academy-stat-pill {
  background: #11151D;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 10px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.academy-stat-pill.highlight {
  background: linear-gradient(135deg, rgba(50, 199, 54, 0.15) 0%, rgba(50, 199, 54, 0.04) 100%);
  border-color: rgba(50, 199, 54, 0.4);
}

.academy-stat-pill .stat-num {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  color: #FFFFFF;
}

.academy-stat-pill.highlight .stat-num {
  color: var(--km-lime, #32C736);
}

.academy-stat-pill .stat-lbl {
  font-size: 9.5px;
  font-weight: 700;
  color: #8E9892;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* 4. Filtros de Categoría */
.academy-filter-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.academy-section-label {
  font-size: 10px;
  font-weight: 800;
  color: #6C7872;
  letter-spacing: 0.9px;
}

.academy-filter-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.academy-filter-pills::-webkit-scrollbar {
  display: none;
}

.academy-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #12161E;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  color: #A0ABA4;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.academy-pill:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}

.academy-pill.active {
  background: var(--km-lime, #32C736);
  border-color: var(--km-lime, #32C736);
  color: #071708;
  box-shadow: 0 4px 14px rgba(50, 199, 54, 0.3);
}

/* 5. Tarjetas de Programas */
.academy-programs-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.academy-card {
  background: #11151E;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}

.academy-card:hover {
  border-color: rgba(50, 199, 54, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.academy-card-media {
  position: relative;
  width: 100%;
  height: 170px;
  background: #0B0E14;
  overflow: hidden;
}

.academy-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.academy-card:hover .academy-card-img {
  transform: scale(1.04);
}

.academy-card-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(11, 14, 20, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 10.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #FFFFFF;
}

.academy-card-tag.baby {
  border-color: rgba(56, 189, 248, 0.5);
  color: #38BDF8;
}

.academy-card-tag.junior {
  border-color: rgba(250, 204, 21, 0.5);
  color: #FACC15;
}

.academy-card-tag.youth {
  border-color: rgba(249, 115, 22, 0.5);
  color: #F97316;
}

.academy-card-tag.keeper {
  border-color: rgba(168, 85, 247, 0.5);
  color: #C084FC;
}

.academy-card-price {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(11, 14, 20, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(50, 199, 54, 0.4);
  color: var(--km-lime, #32C736);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.academy-card-price sub {
  font-size: 10.5px;
  color: #8E9892;
  font-weight: 600;
}

.academy-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.academy-card-header {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.academy-card-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.25;
}

.academy-card-subtitle {
  font-size: 11.5px;
  color: var(--km-lime, #32C736);
  font-weight: 700;
  margin: 0;
}

.academy-card-text {
  font-size: 12px;
  line-height: 1.5;
  color: #A0ABA4;
  margin: 0;
}

.academy-highlights {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #CBD5E1;
}

.highlight-item i {
  color: var(--km-lime, #32C736);
  font-size: 11px;
}

.academy-schedule-mini {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: #8E9892;
  line-height: 1.4;
  padding-top: 4px;
}

.academy-schedule-mini i {
  color: var(--km-lime, #32C736);
  margin-top: 2px;
}

.academy-card-actions {
  margin-top: 4px;
}

.btn-card-enroll {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(50, 199, 54, 0.12);
  border: 1px solid rgba(50, 199, 54, 0.4);
  color: var(--km-lime, #32C736);
  font-size: 12.5px;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-card-enroll:hover {
  background: var(--km-lime, #32C736);
  color: #071708;
  box-shadow: 0 4px 14px rgba(50, 199, 54, 0.35);
}

/* 6. Matriz de Horarios */
.academy-schedule-matrix-card {
  background: #11151E;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.matrix-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.matrix-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  color: var(--km-lime, #32C736);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.matrix-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0;
}

.matrix-subtitle {
  font-size: 11.5px;
  color: #8E9892;
  margin: 0;
  line-height: 1.4;
}

.matrix-table-wrapper {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.academy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  text-align: left;
}

.academy-table th {
  background: #181E29;
  color: #8E9892;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.academy-table td {
  padding: 10px 12px;
  color: #CBD5E1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}

.tag-cat {
  display: inline-block;
  font-weight: 800;
}

.tag-cat.baby { color: #38BDF8; }
.tag-cat.junior { color: #FACC15; }
.tag-cat.youth { color: #F97316; }
.tag-cat.keeper { color: #C084FC; }
.tag-cat.match { color: var(--km-lime, #32C736); }

.table-highlight-row {
  background: rgba(50, 199, 54, 0.05);
}

/* 7. Staff de Entrenadores */
.academy-staff-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.staff-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.staff-kicker {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--km-lime, #32C736);
  text-transform: uppercase;
}

.staff-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
  color: var(--km-white);
  margin: 0;
}

.staff-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.staff-card {
  background: #11151E;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.staff-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(50, 199, 54, 0.25) 0%, rgba(50, 199, 54, 0.05) 100%);
  border: 1px solid rgba(50, 199, 54, 0.4);
  color: var(--km-lime, #32C736);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.staff-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.staff-info h4 {
  font-size: 13.5px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0;
}

.staff-role {
  font-size: 10.5px;
  color: var(--km-lime, #32C736);
  font-weight: 700;
}

.staff-info p {
  font-size: 11px;
  line-height: 1.4;
  color: #8E9892;
  margin: 2px 0 0 0;
}

/* 8. Beneficios & Instalación */
.academy-parent-perks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.perks-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
  color: var(--km-white);
  margin: 0;
}

.perks-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.perk-box {
  background: #11151E;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.perk-box i {
  font-size: 20px;
  color: var(--km-lime, #32C736);
  margin-bottom: 2px;
}

.perk-box h4 {
  font-size: 12.5px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0;
}

.perk-box p {
  font-size: 11px;
  line-height: 1.4;
  color: #8E9892;
  margin: 0;
}

/* 9. Preguntas Frecuentes */
.academy-faq-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
  color: var(--km-white);
  margin: 0;
}

.academy-faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.academy-faq-item {
  background: #11151E;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
}

.academy-faq-item summary {
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 800;
  color: #FFFFFF;
  list-style: none;
  user-select: none;
}

.academy-faq-item summary::-webkit-details-marker {
  display: none;
}

.academy-faq-item summary i {
  font-size: 12px;
  color: var(--km-lime, #32C736);
  transition: transform 0.2s ease;
}

.academy-faq-item[open] summary i {
  transform: rotate(180deg);
}

.academy-faq-item .faq-content {
  padding: 0 14px 14px 14px;
}

.academy-faq-item .faq-content p {
  font-size: 11.5px;
  line-height: 1.5;
  color: #A0ABA4;
  margin: 0;
}

/* 10. Sticky Bottom CTA Bar */
.academy-bottom-cta-bar {
  position: sticky;
  bottom: 12px;
  background: rgba(13, 17, 24, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(50, 199, 54, 0.45);
  border-radius: 16px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  z-index: 20;
}

.bottom-cta-text {
  display: flex;
  flex-direction: column;
}

.bottom-cta-text strong {
  font-size: 12.5px;
  color: #FFFFFF;
  font-weight: 900;
}

.bottom-cta-text small {
  font-size: 10px;
  color: var(--km-lime, #32C736);
  font-weight: 700;
}

.btn-bottom-trial {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--km-lime, #32C736);
  color: #071708;
  font-size: 12px;
  font-weight: 900;
  padding: 9px 14px;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.btn-bottom-trial:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(50, 199, 54, 0.4);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   MODO CLARO — correcciones de contraste (Athletics)
   ========================================================================== */
[data-theme="light"] .academy-top-badge { color: #14702A; }
[data-theme="light"] .cat-chip[onclick^="cancelBooking"] { color: #B91C1C !important; border-color: #B91C1C !important; }

/* Ventanas con fondo oscuro fijo: conservan los tonos del tema oscuro también en modo claro */
[data-theme="light"] .qr-pass-modal-window,
[data-theme="light"] .my-team-modal-window,
[data-theme="light"] .wallet-modal-window,
[data-theme="light"] .add-player-choice-window,
[data-theme="light"] .player-bio-modal-window,
[data-theme="light"] .find-team-modal-window,
[data-theme="light"] .pwa-modal-window {
  --km-white: #FFFFFF;
  --km-neutral: #D4D9D6;
  --km-muted: #8E9992;
  --km-lime: #32C736;
  --km-stroke: #26332A;
  --km-surface-variant: #222B25;
  --bracket-gold: #F4C95D;
}

/* ==========================================================================
   PWA & MOBILE READY STYLES (iOS & Android Installation)
   ========================================================================== */

/* Banner flotante de instalación en móvil */
.pwa-floating-banner {
  position: fixed;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 480px;
  background: rgba(16, 22, 18, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--km-lime);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75), 0 0 15px rgba(50, 199, 54, 0.25);
  border-radius: 16px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 990;
  animation: pwaBannerSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pwaBannerSlideUp {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.pwa-banner-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.pwa-banner-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  border: 1.5px solid var(--km-lime);
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(50, 199, 54, 0.3);
}

.pwa-banner-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pwa-banner-title {
  font-size: 13px;
  font-weight: 800;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-banner-sub {
  font-size: 10.5px;
  color: var(--km-neutral);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pwa-banner-install-btn {
  background: var(--km-lime);
  color: #0B0C0E;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  padding: 7px 14px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  letter-spacing: 0.3px;
}

.pwa-banner-install-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(50, 199, 54, 0.5);
}

.pwa-banner-close-btn {
  background: transparent;
  border: none;
  color: var(--km-muted);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.pwa-banner-close-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
}

/* Modal de Instalación */
.pwa-modal-window {
  max-width: 440px;
  background: linear-gradient(175deg, #161D18 0%, #0D120F 100%) !important;
  border: 1.5px solid var(--km-lime) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(50, 199, 54, 0.2) !important;
  color: #FFFFFF;
}

.pwa-hero-box {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--km-stroke);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pwa-hero-icon {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  object-fit: cover;
  border: 2px solid var(--km-lime);
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(50, 199, 54, 0.35);
}

.pwa-hero-details h4 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  color: #FFFFFF;
  margin-bottom: 2px;
}

.pwa-hero-details p {
  font-size: 11px;
  color: var(--km-neutral);
  line-height: 1.3;
}

.pwa-perks-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.pwa-perk-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--km-lime);
  background: rgba(50, 199, 54, 0.12);
  border: 1px solid rgba(50, 199, 54, 0.3);
  padding: 2px 7px;
  border-radius: 9999px;
}

/* Tabs de selección de plataforma */
.pwa-tab-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--km-stroke);
}

.pwa-tab-btn {
  background: transparent;
  border: none;
  color: var(--km-muted);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pwa-tab-btn.active {
  background: var(--km-surface-variant);
  color: #FFFFFF;
  border: 1px solid var(--km-stroke);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.pwa-tab-btn i {
  font-size: 14px;
}

.pwa-tab-btn#pwa-tab-ios.active i {
  color: #FFFFFF;
}

.pwa-tab-btn#pwa-tab-android.active i {
  color: var(--km-lime);
}

/* Paso a paso iOS */
.pwa-instructions-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--km-stroke);
  border-radius: 14px;
  padding: 12px;
}

.pwa-step-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pwa-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--km-lime);
  color: #0B0C0E;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.pwa-step-text strong {
  font-size: 12.5px;
  color: #FFFFFF;
  display: block;
}

.pwa-step-text p {
  font-size: 11px;
  color: var(--km-neutral);
  line-height: 1.35;
  margin-top: 2px;
}

.pwa-safari-icon {
  color: #0A84FF;
  font-size: 13px;
  margin-left: 2px;
}

.pwa-inline-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 700;
  color: #FFFFFF;
  font-size: 10.5px;
}

.pwa-safari-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(50, 199, 54, 0.08);
  border: 1px solid rgba(50, 199, 54, 0.25);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 10.5px;
  color: var(--km-neutral);
  line-height: 1.35;
}

.pwa-safari-tip i {
  font-size: 13px;
  margin-top: 1px;
  flex-shrink: 0;
}

/* Vista Android */
.pwa-android-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--km-stroke);
  border-radius: 14px;
  padding: 18px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pwa-action-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.pwa-modal-footer {
  margin-top: 4px;
}

/* ==========================================================================
   EVENT GUEST INVITATION & VALET PASS STYLES
   ========================================================================== */

.event-invite-banner {
  position: relative;
  background: linear-gradient(135deg, rgba(30, 24, 12, 0.96) 0%, rgba(14, 11, 26, 0.98) 100%);
  border: 1.5px solid var(--bracket-gold, #F4C95D);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 10px 32px rgba(244, 201, 93, 0.22), 0 0 0 1px rgba(244, 201, 93, 0.2);
  overflow: hidden;
  animation: fadeInDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.event-invite-glow {
  position: absolute;
  top: -45px;
  right: -45px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(244, 201, 93, 0.3) 0%, transparent 70%);
  pointer-events: none;
}

.event-invite-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.event-invite-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(244, 201, 93, 0.18);
  border: 1px solid var(--bracket-gold, #F4C95D);
  color: var(--bracket-gold, #F4C95D);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: 999px;
}

.event-invite-status {
  font-size: 10px;
  color: var(--bracket-gold, #F4C95D);
  font-weight: 800;
  letter-spacing: 0.4px;
}

.event-invite-hero {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.event-invite-ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #F4C95D 0%, #D97706 100%);
  color: #0F0B1E;
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(244, 201, 93, 0.35);
}

.event-invite-intro h4 {
  font-size: 16px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0 0 4px 0;
  line-height: 1.25;
}

.event-invite-intro p {
  font-size: 11.5px;
  color: var(--km-neutral, #9DB0A4);
  line-height: 1.4;
  margin: 0 0 8px 0;
}

.event-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.event-meta-chips span {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 3px 8px;
  border-radius: 6px;
  color: #E2E8F0;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.event-pass-pwa-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 12px 0;
}

.pwa-banner-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(50, 199, 54, 0.16);
  color: var(--km-lime, #32C736);
  display: grid;
  place-items: center;
  font-size: 17px;
  flex-shrink: 0;
}

.pwa-banner-txt {
  flex: 1;
  min-width: 0;
}

.pwa-banner-txt b {
  display: block;
  font-size: 12px;
  color: #FFFFFF;
  line-height: 1.2;
}

.pwa-banner-txt small {
  display: block;
  font-size: 10px;
  color: var(--km-neutral, #9DB0A4);
  line-height: 1.3;
  margin-top: 2px;
}

.btn-pwa-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--km-lime, #32C736);
  color: #07110A;
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(50, 199, 54, 0.35);
  transition: transform 0.15s;
}

.btn-pwa-pill:hover {
  transform: scale(1.04);
}

.event-guest-form {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.ev-inv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 480px) {
  .ev-inv-grid {
    grid-template-columns: 1fr;
  }
}

.ev-inv-field {
  display: grid;
  gap: 5px;
}

.ev-inv-field label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--km-neutral, #9DB0A4);
  display: flex;
  align-items: center;
  gap: 5px;
}

.ev-inv-field input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  background: rgba(14, 18, 24, 0.85);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ev-inv-field input:focus {
  border-color: var(--bracket-gold, #F4C95D);
  box-shadow: 0 0 0 3px rgba(244, 201, 93, 0.2);
}

.ev-inv-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.ev-inv-summary-row b {
  font-size: 16px;
  color: var(--bracket-gold, #F4C95D);
  font-weight: 900;
}

/* Confirmed Guest Pass Card */
.event-guest-pass-card {
  position: relative;
  background: linear-gradient(145deg, rgba(20, 16, 36, 0.96) 0%, rgba(11, 14, 20, 0.98) 100%);
  border: 1.5px solid rgba(244, 201, 93, 0.4);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  animation: fadeInDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.event-guest-pass-card.is-valet {
  border-color: #38BDF8;
  box-shadow: 0 12px 36px rgba(56, 189, 248, 0.2);
}

.guest-pass-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.guest-pass-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.guest-pass-badge.is-active {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid #38BDF8;
  color: #38BDF8;
}

.guest-pass-badge.is-guest {
  background: rgba(244, 201, 93, 0.15);
  border: 1px solid #F4C95D;
  color: #F4C95D;
}

.guest-pass-meta-txt {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.7);
}

.guest-pass-intro h4 {
  font-size: 16px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0 0 4px 0;
}

.guest-pass-intro p {
  font-size: 11.5px;
  color: var(--km-neutral, #9DB0A4);
  line-height: 1.4;
  margin: 0;
}

/* Guest QR Entry Box */
.guest-entry-qr-box {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 12px;
  margin: 14px 0;
}

.guest-qr-frame {
  position: relative;
  width: 120px;
  height: 120px;
  background: #FFFFFF;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.guest-qr-frame svg {
  width: 100%;
  height: 100%;
  display: block;
}

.guest-qr-details {
  display: grid;
  gap: 4px;
}

.guest-qr-code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 14px;
  font-weight: 900;
  color: var(--bracket-gold, #F4C95D);
  letter-spacing: 0.08em;
}

.guest-qr-details b {
  font-size: 15px;
  color: #FFFFFF;
}

.guest-qr-details small {
  font-size: 11px;
  color: var(--km-neutral, #9DB0A4);
}

.guest-chip-ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(50, 199, 54, 0.15);
  color: var(--km-lime, #32C736);
  border: 1px solid rgba(50, 199, 54, 0.3);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  margin-top: 4px;
  width: fit-content;
}

/* Valet Parking Upsell Banner */
.pk-upsell-banner {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(15, 23, 42, 0.8) 100%);
  border: 1.5px dashed rgba(56, 189, 248, 0.45);
  border-radius: 16px;
  padding: 14px;
  margin: 12px 0;
  display: grid;
  gap: 10px;
}

.pk-upsell-hd {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}

.pk-upsell-ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.2);
  color: #38BDF8;
  display: grid;
  place-items: center;
  font-size: 18px;
}

.pk-upsell-txt b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
}

.pk-upsell-txt small {
  display: block;
  font-size: 11px;
  color: var(--km-neutral, #9DB0A4);
  line-height: 1.35;
  margin-top: 2px;
}

.pk-upsell-fee {
  font-size: 18px;
  font-weight: 900;
  color: #38BDF8;
  font-family: var(--font-display, inherit);
}

.btn-buy-valet-cta {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #38BDF8 0%, #0284C7 100%);
  color: #03141F;
  border: none;
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn-buy-valet-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.5);
}

.guest-pass-footer {
  text-align: right;
  margin-top: 6px;
}

.btn-pass-reset {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  transition: color 0.15s;
}

.btn-pass-reset:hover {
  color: #EF4444;
}