/* ==========================================================================
   GolPredict.com — components.css
   Scope: Componentes reutilizables. Cards de partidos, modales, tabs de auth,
   paywall, items de premios, perfil público, barra de suscripción.
   Depende de: main.css + layout.css
   ========================================================================== */


/* ==========================================================================
   1. CARD DE PARTIDO (Fixture Card)
   Diseño VERTICAL: equipo local arriba, marcador en el medio, visitante abajo.
   Requerimiento del reporte: evitar desbordes con nombres largos.
   Tres estados: pendiente (editable) → cerrado (readonly) → evaluado (con feedback).
   ========================================================================== */

.fixture-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  /* Sin transition para evitar parpadeo */
  animation: card-enter 0.4s ease calc(var(--card-index, 0) * 50ms) both;
}
/* Sin hover effect — cards estáticas */

/* ── Borde superior de color según estado de evaluación ─────────────── */
.fixture-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-border);
  /* Sin transition para evitar parpadeo */
}
.fixture-card--exact::before  { background: var(--accent-green); box-shadow: 0 0 12px var(--accent-green-glow); }
.fixture-card--trend::before  { background: var(--accent-blue);  box-shadow: 0 0 12px var(--accent-blue-glow);  }
.fixture-card--miss::before   { background: var(--accent-red);   box-shadow: 0 0 12px var(--accent-red-glow);   }
.fixture-card--worldcup::before { background: linear-gradient(90deg, var(--accent-blue), var(--color-ticket)); }

/* ── Estado: partido estrella (x2) — borde dorado ───────────────────── */
.fixture-card--star {
  border-color: rgba(249, 168, 37, 0.35);
}
.fixture-card--star::before {
  background: linear-gradient(90deg, var(--accent-gold), var(--color-premium-d));
  box-shadow: 0 0 16px var(--accent-gold-glow);
}

/* ── Header de la card: competición + fecha ──────────────────────────── */
.fixture-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-2);
  min-height: 38px;
}
.fixture-card__competition {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}
.fixture-card__competition-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}
.fixture-card__competition-name {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fixture-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
/* Badge "EN VIVO" pulsante */
.fixture-card__live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-red-glow);
  border: 1px solid rgba(211, 47, 47, 0.30);
  color: #ff6b6b;
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.10em;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  text-transform: uppercase;
}
.fixture-card__live-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  background: #ff6b6b;
  border-radius: var(--radius-full);
  animation: live-pulse 1.5s ease-in-out infinite;
}

/* ── Badge Partido Estrella en la card ───────────────────────────────── */
.fixture-card__star-badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: var(--z-base);
}

/* ── Cuerpo de la card: los dos equipos y los inputs ─────────────────── */
.fixture-card__body {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  gap: var(--space-3);
  flex: 1;
}

/* Fila de un equipo (escudo + nombre) */
.fixture-card__team {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.fixture-card__team-name {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  /* Permite wrapping controlado: max 2 líneas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

/* Separador central con los inputs de marcador */
.fixture-card__score-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.fixture-card__score-separator {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text-muted);
  line-height: 1;
  user-select: none;
}

/* Resultado real (se muestra cuando el partido terminó) */
.fixture-card__result {
  display: none; /* JS lo activa con .fixture-card--evaluated */
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}
.fixture-card--evaluated .fixture-card__result {
  display: flex;
}
.fixture-card--evaluated .fixture-card__score-row {
  display: none;
}
.result-score {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-text-primary);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.result-score__separator {
  font-size: var(--text-xl);
  color: var(--color-text-muted);
}

/* Predicción del usuario (mostrada bajo el resultado real) */
.fixture-card__user-prediction {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-1) 0;
}
.fixture-card__user-prediction span {
  font-family: var(--font-display);
  font-size: var(--text-sm);
}

/* ── Footer de la card: puntos obtenidos + bono de racha ─────────────── */
.fixture-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4) var(--space-3);
  border-top: 1px solid var(--color-border);
  gap: var(--space-2);
  min-height: 40px;
}
.fixture-card__points-earned {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
}
/* Colores del puntaje según resultado */
.fixture-card--exact  .fixture-card__points-earned { color: var(--accent-green); }
.fixture-card--trend  .fixture-card__points-earned { color: var(--accent-blue);  }
.fixture-card--miss   .fixture-card__points-earned { color: var(--accent-red);   }
.fixture-card--pending .fixture-card__points-earned { color: var(--color-text-muted); }

/* Badge de bono de racha (aparece solo cuando streak >= 3) */
.streak-bonus-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 100, 0, 0.12);
  border: 1px solid rgba(255, 100, 0, 0.25);
  color: #ff8c00;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Etiqueta de resultado textual */
.fixture-card__result-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.fixture-card--exact .fixture-card__result-label  { color: var(--accent-green); }
.fixture-card--trend .fixture-card__result-label  { color: var(--accent-blue);  }
.fixture-card--miss  .fixture-card__result-label  { color: var(--accent-red);   }

/* ── Estado FOMO: inputs bloqueados para usuarios Free en el Mundial ─── */
.fixture-card--fomo-locked .fixture-card__body {
  position: relative;
}
.fixture-card--fomo-locked .fixture-card__score-row {
  pointer-events: none;
}
.fomo-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 13, 26, 0.55);
  backdrop-filter: blur(2px);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background var(--transition-fast);
  z-index: var(--z-base);
}
.fomo-lock-overlay:hover {
  background: rgba(13, 13, 26, 0.70);
}
.fomo-lock-overlay__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-premium);
}
.fomo-lock-overlay__icon i {
  font-size: var(--text-2xl);
}
.fomo-lock-overlay__text {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-premium);
  text-align: center;
  letter-spacing: 0.04em;
}

/* ── Animación de entrada de la card ─────────────────────────────────── */
@keyframes card-enter {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}


/* ==========================================================================
   2. MODALES — Sistema base
   Todos los modales comparten esta estructura base.
   El backdrop cierra el modal al hacer click.
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  /* Animación de entrada/salida del modal completo */
  animation: modal-backdrop-enter var(--transition-base) forwards;
}
/* [hidden] con prioridad: el atributo HTML hidden oculta el modal */
.modal[hidden] {
  display: none !important;
}

/* Backdrop oscuro (también actúa como botón de cierre) */
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-bg-overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

/* Panel del modal (el contenido real) */
.modal__panel {
  position: relative;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-height: calc(100dvh - var(--space-8));
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--color-bg-elevated) transparent;
  /* Animación del panel: sube desde abajo */
  animation: modal-panel-enter var(--transition-bounce) forwards;
  z-index: 1; /* Por encima del backdrop */
}

/* Botón X para cerrar (posición absoluta arriba-derecha) */
.modal__close-btn {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  transition: all var(--transition-fast);
  z-index: 2;
}
.modal__close-btn:hover {
  background: var(--color-border-strong);
  color: var(--color-text-primary);
}

/* Header del modal (logo + subtítulo) */
.modal__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6) var(--space-4);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.modal__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Keyframes modales */
@keyframes modal-backdrop-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-panel-enter {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes modal-panel-exit {
  from { opacity: 1; transform: translateY(0)    scale(1);    }
  to   { opacity: 0; transform: translateY(24px) scale(0.97); }
}
.modal--exiting .modal__panel {
  animation: modal-panel-exit var(--transition-base) forwards;
}


/* ==========================================================================
   3. MODAL DE AUTENTICACIÓN
   ========================================================================== */

.modal__panel--auth {
  max-width: 420px;
  padding-bottom: var(--space-6);
}

/* Tabs de Login / Registro */
.auth-tabs {
  display: flex;
  gap: 0;
  padding: var(--space-4) var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
}
.auth-tab {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* Se superpone al borde del contenedor */
  border-radius: 0;
  background: transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  justify-content: center;
}
.auth-tab:hover {
  color: var(--color-text-primary);
}
.auth-tab--active,
.auth-tab[aria-selected="true"] {
  color: var(--color-brand-green);
  border-bottom-color: var(--color-brand-green);
  font-weight: var(--fw-semibold);
}

/* Paneles de formulario */
.auth-panel {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  animation: fade-up var(--transition-base) forwards;
}
.auth-panel[hidden] {
  display: none;
}

/* Formulario dentro del panel */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Link "¿Olvidaste tu contraseña?" */
.auth-forgot {
  align-self: flex-end;
  margin-top: calc(-1 * var(--space-2));
}

/* Términos y condiciones */
.auth-terms {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.5;
  margin: 0;
}


/* ==========================================================================
   4. MODAL PAYWALL — Ticket Mundial 2026
   Diseño de alto impacto: gradiente de fondo, premios prominentes.
   ========================================================================== */

.modal__panel--paywall {
  max-width: 460px;
  /* Fondo con gradiente de profundidad tipo "arena de estadio" */
  background: linear-gradient(
    175deg,
    rgba(124, 77, 255, 0.12) 0%,
    var(--color-bg-surface) 35%,
    var(--color-bg-surface) 100%
  );
  border-color: rgba(124, 77, 255, 0.25);
}

/* Fondo decorativo de la card paywall */
.modal__panel--paywall::before {
  content: '🏆';
  position: absolute;
  top: -20px;
  right: -20px;
  font-size: 120px;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}

/* Contenedor de todo el contenido del paywall (por encima del ::before) */
.modal__panel--paywall > * {
  position: relative;
  z-index: 1;
}

.paywall__badge {
  display: flex;
  justify-content: center;
  padding: var(--space-6) var(--space-6) 0;
}

.paywall__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-text-primary);
  text-align: center;
  padding: var(--space-4) var(--space-6) 0;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.paywall__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  padding: 0 var(--space-6);
  margin: 0;
  line-height: 1.5;
}

/* Premios dentro del paywall */
.paywall__prizes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
}

.prize-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
}
.prize-item--gold {
  background: rgba(249, 168, 37, 0.08);
  border-color: rgba(249, 168, 37, 0.20);
}
.prize-item--silver {
  background: rgba(144, 164, 174, 0.06);
  border-color: rgba(144, 164, 174, 0.15);
}
.prize-item--bronze {
  background: rgba(161, 101, 90, 0.06);
  border-color: rgba(161, 101, 90, 0.15);
}

.prize-rank {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}
.prize-amount {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
}
.prize-item--gold   .prize-amount { color: var(--accent-gold);   }
.prize-item--silver .prize-amount { color: var(--accent-silver); }
.prize-item--bronze .prize-amount { color: var(--accent-bronze); }

/* Bloque de precio y CTA */
.paywall__cta-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0 var(--space-6) var(--space-5);
}

.paywall__price {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: center;
  padding: var(--space-3) 0;
}
.paywall__price .price-amount {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  color: var(--color-text-primary);
  line-height: 1;
}
.price-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.price-currency {
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
  font-weight: var(--fw-semibold);
}
.price-period {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  max-width: 100px;
  line-height: 1.3;
}

/* Bonus cross-sell 1 mes Premium */
.paywall__bonus {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(249, 168, 37, 0.08);
  border: 1px solid rgba(249, 168, 37, 0.20);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.paywall__bonus i {
  color: var(--accent-gold);
  font-size: var(--text-xl);
  flex-shrink: 0;
}
.paywall__bonus strong {
  color: var(--color-premium);
}

/* Desglose financiero (details/summary) */
.paywall__breakdown {
  margin: 0 var(--space-6) var(--space-6);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}
.paywall__breakdown summary {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  padding: var(--space-2) 0;
  transition: color var(--transition-fast);
}
.paywall__breakdown summary:hover {
  color: var(--color-text-secondary);
}
.breakdown-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0 0;
}
.breakdown-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.breakdown-pct {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  min-width: 36px;
}


/* ==========================================================================
   5. MODAL PREMIUM — Upgrade y Cambio de Club
   ========================================================================== */

.modal__panel--premium {
  max-width: 400px;
  padding: var(--space-8) var(--space-6);
}

.premium-mode {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  text-align: center;
}
.premium-mode[hidden] {
  display: none;
}
.premium-mode--active {
  display: flex;
}

.premium-icon {
  font-size: var(--text-5xl);
  filter: drop-shadow(0 0 16px rgba(249, 168, 37, 0.4));
  line-height: 1;
}

.premium-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-text-primary);
  line-height: 1.1;
}

.premium-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

.premium-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
}
.premium-features li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.premium-features li:last-child {
  border-bottom: none;
}
.premium-features li i {
  color: var(--accent-green);
  font-size: var(--text-lg);
  flex-shrink: 0;
}

/* Bloque de precio en el modal Premium */
.premium-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  justify-content: center;
}
.premium-price .price-amount {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--color-text-primary);
  line-height: 1;
}
.premium-price .price-period {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: none;
}

/* Modo de cambio de club */
.change-club-info {
  width: 100%;
  text-align: left;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.change-club-info p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}
.change-club-info strong {
  color: var(--color-text-primary);
}


/* ==========================================================================
   6. MODAL PERFIL PÚBLICO
   ========================================================================== */

.modal__panel--profile-view {
  max-width: 420px;
  padding: var(--space-6);
}


/* ==========================================================================
   7. SELECTOR DE EQUIPO FAVORITO
   Aparece al hacer click en "Cambiar Club" en el perfil.
   JS inyecta la lista de equipos desde la API dentro de este contenedor.
   ========================================================================== */

.club-selector {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.club-selector__search {
  position: relative;
}

.club-selector__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-bg-elevated) transparent;
  /* Sombra interna para indicar scroll */
  mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}

.club-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.club-option:hover {
  border-color: var(--color-brand-green);
  background: rgba(39, 174, 96, 0.06);
}
.club-option--selected {
  border-color: var(--color-brand-green);
  background: rgba(39, 174, 96, 0.10);
}
.club-option__name {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
}
.club-option__league {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}


/* ==========================================================================
   8. AUTH TABS — Animación de panel activo
   ========================================================================== */

.auth-panel--active {
  display: flex;
}


/* ==========================================================================
   9. COMPONENTE: BONO RACHA (inline en la card evaluada)
   Aparece en el footer de una fixture-card cuando streak >= 3.
   El JS calcula Math.pow(2, streak - 3) y lo muestra aquí.
   ========================================================================== */

.streak-info-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: rgba(255, 100, 0, 0.04);
}
.streak-info-row i {
  font-size: var(--text-base);
}


/* ==========================================================================
   10. COMPONENTE: BÚSQUEDA DE JUGADORES (Social)
   ========================================================================== */

/* Resultado vacío de la búsqueda social */
.social-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}
.social-search-empty i {
  font-size: 3rem;
  opacity: 0.3;
}
.social-search-empty p {
  font-size: var(--text-sm);
  margin: 0;
}


/* ==========================================================================
   11. COMPONENTE: TARJETA DE LIGA PRIVADA (detalle)
   ========================================================================== */

.league-member-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.league-member-row__rank {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  min-width: 28px;
  text-align: center;
}
.league-member-row__alias {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.league-member-row__points {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text-primary);
}
.league-member-row--me {
  background: rgba(39, 174, 96, 0.06);
  border-color: rgba(39, 174, 96, 0.25);
}


/* ==========================================================================
   12. KEYFRAMES FINALES (propios de components)
   ========================================================================== */

@keyframes live-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.4; transform: scale(0.85); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ==========================================================================
   FIXTURE CARD — Layout HORIZONTAL (home izq | score centro | away der)
   ========================================================================== */

.fixture-card__body--h {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
}

.fixture-card__team--left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.fixture-card__team--right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.fixture-card__team--left .fixture-card__team-name,
.fixture-card__team--right .fixture-card__team-name {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  max-width: 80px;
}

.fixture-card__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.fixture-card__center .fixture-card__score-row {
  padding: 0;
}

/* En el layout horizontal los escudos son más grandes */
.fixture-card__body--h .team-crest--sm {
  width: 40px;
  height: 40px;
}

/* ==========================================================================
   FIXTURE CARD — Layout horizontal definitivo (fc-h-*)
   Reemplaza el sistema anterior de fixture-card__body--h.
   Estructura: [escudo+nombre LOCAL] [inputs] [nombre+escudo VISITANTE]
   ========================================================================== */

/* Fila horizontal — 3 columnas: equipo local | centro | equipo visitante */
.fc-h-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3) var(--space-3);
}

/* Columna de equipo — flex col, centrada */
.fc-h-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;       /* CRÍTICO: permite que el texto haga ellipsis */
  max-width: 100%;
}

.fc-h-team--left  { align-items: flex-start;  text-align: left;  }
.fc-h-team--right { align-items: flex-end;    text-align: right; }

/* Nombre del equipo — truncado estrictamente, una sola línea */
.fc-h-name {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  /* ANTI-DESBORDE: las 4 propiedades son obligatorias juntas */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  line-height: 1.3;
}

/* Escudo con fondo circular blanco (requerimiento del reporte) */
.fc-crest {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;       /* Fondo blanco siempre, independiente del tema */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  border: 1.5px solid rgba(255,255,255,0.8);
}
.fc-crest img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  display: block;
}

/* Centro: inputs o resultado */
.fc-h-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

/* Fila de inputs (score) */
.fc-h-inputs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Separador : */
.fc-h-sep {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text-muted);
  line-height: 1;
  user-select: none;
  padding: 0 2px;
}

/* Resultado final */
.fc-result {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-text-primary);
  line-height: 1;
}
.fc-result__sep {
  font-size: var(--text-xl);
  color: var(--color-text-muted);
}

/* Predicción del usuario (pequeña, bajo el resultado) */
.fc-pred-label {
  font-size: 10px;
  color: var(--color-text-muted);
  text-align: center;
}

/* Sobreescribir score-input para que sea más compacto en el layout horizontal */
.fc-h-inputs .score-input {
  width: 48px;
  height: 48px;
  font-size: var(--text-2xl);
}

/* Responsive: en mobile reducir un poco */
@media (max-width: 360px) {
  .fc-h-row          { gap: var(--space-1); padding: var(--space-3) var(--space-2); }
  .fc-crest          { width: 32px; height: 32px; }
  .fc-h-inputs .score-input { width: 40px; height: 40px; font-size: var(--text-xl); }
}


/* ==========================================================================
   FIXTURE CARD — Estados de resultado (colores definitivos, sin parpadeo)
   ========================================================================== */

/* Card con acierto EXACTO: borde verde sólido + fondo verde sutil */
.fixture-card.fixture-card--exact {
  border-color: rgba(0, 214, 143, 0.35);
  background: linear-gradient(180deg,
    rgba(0, 214, 143, 0.06) 0%,
    var(--color-bg-surface) 60%);
}
.fixture-card.fixture-card--exact::before {
  background: var(--accent-green);
  box-shadow: 0 0 12px var(--accent-green-glow);
}

/* Card con TENDENCIA: borde azul sólido + fondo azul sutil */
.fixture-card.fixture-card--trend {
  border-color: rgba(41, 121, 255, 0.35);
  background: linear-gradient(180deg,
    rgba(41, 121, 255, 0.06) 0%,
    var(--color-bg-surface) 60%);
}
.fixture-card.fixture-card--trend::before {
  background: var(--accent-blue);
  box-shadow: 0 0 12px var(--accent-blue-glow);
}

/* Card con FALLO: borde rojo sólido + fondo rojo sutil */
.fixture-card.fixture-card--miss {
  border-color: rgba(211, 47, 47, 0.35);
  background: linear-gradient(180deg,
    rgba(211, 47, 47, 0.06) 0%,
    var(--color-bg-surface) 60%);
}
.fixture-card.fixture-card--miss::before {
  background: var(--accent-red);
  box-shadow: 0 0 12px var(--accent-red-glow);
}

/* Anular cualquier animación de glow heredada */
.fixture-card,
.fixture-card--pending,
.fixture-card--exact,
.fixture-card--trend,
.fixture-card--miss,
.fixture-card--star {
  animation: card-enter 0.4s ease calc(var(--card-index, 0) * 50ms) both !important;
}
.fixture-card--star {
  border-color: rgba(249, 168, 37, 0.40) !important;
}
.fixture-card--star::before {
  background: linear-gradient(90deg, var(--accent-gold), var(--color-premium-d)) !important;
}

/* Footer de puntos con color según resultado */
.fixture-card--exact .fixture-card__points-earned { color: var(--accent-green) !important; font-weight: 700; }
.fixture-card--trend .fixture-card__points-earned { color: var(--accent-blue)  !important; font-weight: 700; }
.fixture-card--miss  .fixture-card__points-earned { color: var(--accent-red)   !important; font-weight: 700; }


/* Override final del badge estrella — esquina inferior derecha */
.fixture-card__star-badge {
  position: absolute !important;
  top: auto !important;
  bottom: 10px !important;
  right: 10px !important;
  z-index: 2;
  pointer-events: none;
}
.fixture-card__star-badge .star-match-badge {
  font-size: 11px;
  padding: 3px 8px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent-gold), var(--color-premium-d));
  color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(249, 168, 37, 0.4);
}


/* Footer con espacio a la derecha para el badge estrella en esquina inferior */
.fixture-card--star .fixture-card__footer { padding-right: 70px; }


/* ==========================================================================
   LEYENDA DE COLORES — al pie de la cartelera semanal
   ========================================================================== */
.legend-colors {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.legend-colors__title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 600;
}
.legend-colors__items {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.legend-colors__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}
.legend-dot--green { background: var(--accent-green); color: var(--accent-green); }
.legend-dot--blue  { background: var(--accent-blue);  color: var(--accent-blue);  }
.legend-dot--red   { background: var(--accent-red);   color: var(--accent-red);   }