@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --bg-dark: #0f172a;
  --bg-panel: rgba(30, 41, 59, 0.92);
  --bg-card: rgba(51, 65, 85, 0.75);
  --bg-secondary: rgba(30, 41, 59, 0.95);
  --pitch-green: #10b981;
  --pitch-green-hover: #059669;
  --neon-accent: #34d399;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --border-light: rgba(255, 255, 255, 0.1);
  --glass-blur: blur(12px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.05);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { overflow-x: hidden; }

@media (min-width: 2560px) {
  html { zoom: 1.25; }
}

@media (min-width: 3840px) {
  html { zoom: 1.6; }
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-dark);
  background-image:
    radial-gradient(circle at 15% 50%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 85% 30%, rgba(52, 211, 153, 0.05) 0%, transparent 50%);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

h1 { font-size: 2.5rem; letter-spacing: -0.02em; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; }

p {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── Glass components ──────────────────────────────────────────────────── */
.glass-panel {
  background: var(--bg-panel);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.glass-card {
  background: var(--bg-card);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}

.glass-card:hover {
  border-color: rgba(16, 185, 129, 0.2);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--pitch-green);
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}

.btn-primary:hover {
  background-color: var(--pitch-green-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ── Layout classes ────────────────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 2rem; }
.flex-row { display: flex; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }

.grid-cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

/* ── Mobile-toggle classes (desktop defaults) ──────────────────────────── */
.transfers-card-view { display: none; }
.transfers-table-view { display: block; }

/* ── Ficha detallada de jugador (modal de mercado) ─────────────────────── */
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.details-close-mobile { display: none; }   /* sólo móvil: el de arriba queda lejos */

/* ── Badges ────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(16, 185, 129, 0.15);
  color: var(--neon-accent);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.wage-table-desktop { display: block; }
.wage-table-mobile { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE (max-width: 768px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 768px) {
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.05rem; }

  .glass-card { padding: 1rem; }

  /* Grids → single column */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }

  /* Flex rows wrap */
  .flex-between { flex-wrap: wrap; gap: 0.5rem; }

  /* Buttons full-width on mobile */
  .btn-primary, .btn-secondary { font-size: 0.85rem; padding: 0.6rem 1rem; }

  /* Tables smaller font */
  table { font-size: 0.78rem; }

  /* ── CRITICAL: Hide scrollbar AND fix layout ── */
  /* The scrollbar eats ~15px on Android Chrome, pushing content left */
  .app-main-content::-webkit-scrollbar { display: none; }
  .app-main-content {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
    padding: 0 0.75rem !important;
    overflow-x: hidden !important;
  }

  /* Table responsive wrapper */
  .table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    scrollbar-width: none;
  }
  .table-responsive-wrapper::-webkit-scrollbar {
    display: none;
  }
  .table-responsive-wrapper > table {
    width: 100%;
    min-width: 600px; /* Force minimum width to prevent squishing columns */
  }

  /* Make all inputs full-width */
  input[type="number"], input[type=text], input[type=email], input[type=password], select, textarea {
    font-size: 16px !important;
  }

  /* ── Economy mobile fixes ── */
  .economy-mobile-pads { padding: 0 !important; overflow-x: hidden !important; }
  .economy-mobile-pads h1 { font-size: 1.4rem !important; }
  .economy-mobile-pads .glass-card {
    padding: 0.85rem !important;
    overflow: visible !important;
    margin-bottom: 0.35rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .economy-mobile-pads h2 { font-size: 1rem !important; }
  .economy-mobile-pads h3 { font-size: 0.92rem !important; }
  .economy-mobile-pads .wage-header-anual { min-width: 70px !important; }
  .wage-table-desktop { display: none !important; }
  .wage-table-mobile { display: block !important; }

  /* Force ALL grids to 1 column on mobile */
  .economy-mobile-pads .glass-card [style*=grid-template-columns] {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }

  /* Force ALL tables to fit on mobile */
  .economy-mobile-pads table {
    width: 100% !important;
    min-width: 0 !important;
  }


  /* Fix any remaining overflow from flex containers */
  .economy-mobile-pads [style*=display: flex] {
    flex-wrap: wrap !important;
  }

  /* Override grid-cols-3 margin */
  .economy-mobile-pads .grid-cols-3 {
    margin-bottom: 0.35rem !important;
  }

  /* Tab bar scrollable on mobile */
  .economy-tab-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .economy-tab-bar::-webkit-scrollbar {
    display: none;
  }
  .economy-tab-bar button {
    flex-shrink: 0 !important;
  }

  /* Informacion mobile */
  .info-mobile h1 { font-size: 1.4rem !important; }
  .info-mobile .glass-card { padding: 0.85rem !important; }
  .info-mobile table { font-size: 0.72rem !important; }
  .info-mobile table th, .info-mobile table td { padding: 0.3rem 0.25rem !important; }

  /* Banca mobile */
  .banca-mobile h1 { font-size: 1.4rem !important; }
  .banca-mobile h2 { font-size: 1rem !important; }
  .banca-mobile .glass-card { padding: 0.85rem !important; }

  /* UCL mobile */
  .ucl-mobile h1 { font-size: 1.4rem !important; }
  .ucl-mobile .glass-card { padding: 0.85rem !important; }
  .ucl-mobile table { font-size: 0.72rem !important; }

  /* Mensajes mobile */
  .mensajes-mobile h1 { font-size: 1.4rem !important; }
  .mensajes-mobile .glass-card { padding: 0.85rem !important; }

  /* Settings mobile */
  .settings-mobile .glass-panel { padding: 1rem !important; margin: 0.5rem auto !important; }
  .settings-mobile h1 { font-size: 1.4rem !important; }

  /* AdminPanel mobile */
  .admin-mobile { padding: 0.5rem !important; }
  .admin-mobile .glass-card { padding: 1rem !important; }
  .admin-mobile .player-row { grid-template-columns: 1fr auto !important; }
  .admin-mobile .player-row .player-name-cell { grid-column: 1 / -1; }
  .admin-mobile .player-row .player-inputs { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr) !important; }

  /* OptionFileManager mobile */
  .ofm-mobile { flex-direction: column !important; }
  .ofm-mobile .ofm-sidebar { width: 100% !important; max-height: none !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; }
  .ofm-mobile .ofm-main { flex: 1; }
  .ofm-mobile .ofm-team-col { width: 100% !important; max-height: none !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; }
  .ofm-mobile .ofm-inner { flex-direction: column !important; }

  /* NewCareer mobile */
  .nc-mobile { flex-direction: column !important; }
  .nc-mobile .nc-sidebar { width: 100% !important; max-height: 120px; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; padding: 1rem !important; }
  .nc-mobile .nc-content { padding: 1.5rem !important; }
}

/* ── NewCareer a pantalla completa (v2.19.2c) ──
   En iOS Safari `100vh` mide la ventana GRANDE (con la barra de herramientas plegada):
   con la barra visible, el fondo del layout (la barra de botones «Siguiente/Anterior»)
   queda recortado detrás de la barra de Safari y sin scroll para alcanzarla.
   - `-webkit-touch-callout` sólo existe en iOS → ahí usamos `-webkit-fill-available`
     (altura visible real en Safari 15.0–15.3).
   - `100dvh` (iOS 15.4+, y Chrome/Edge/Firefox modernos) es la altura dinámica real y manda al final. */
.nc-root { height: 100vh; }
.nc-dvh-min { min-height: 100vh; }
@supports (-webkit-touch-callout: none) {
  .nc-root { height: -webkit-fill-available; }
  .nc-dvh-min { min-height: -webkit-fill-available; }
}
@supports (height: 100dvh) {
  .nc-root { height: 100dvh; }
  .nc-dvh-min { min-height: 100dvh; }
}

/* ── Transfers.jsx mobile styles ── */
@media (max-width: 768px) {
  .transfers-tabs-desktop { display: none !important; }
  .transfers-tabs-mobile  { display: block !important; }
  .transfers-table-view   { display: none !important; }
  .transfers-card-view    { display: block !important; }
  .details-grid           { grid-template-columns: 1fr !important; }
  .details-close-mobile   { display: block !important; }
  .details-close-top      { padding: 0.3rem 0.5rem !important; font-size: 0.72rem !important; top: 0.5rem !important; right: 0.5rem !important; }
  .details-header         { padding-right: 3.2rem !important; }
  .details-estimate-tile  { flex: 1 1 calc(50% - 0.3rem) !important; }
  .transfers-fichar-grid  { grid-template-columns: 1fr !important; }
  .transfers-search-wrap  { overflow: visible !important; }
  .transfers-root-panel   { padding: 1rem !important; margin-top: 0 !important; }
  .transfers-search-wrap select { flex: 1 1 100% !important; min-width: 0 !important; }
  .transfers-search-wrap input[type= text] { flex: 1 1 100% !important; }
  .transfers-search-wrap > div { min-width: 0 !important; }
  .transfers-modal { max-width: 100% !important; width: 100% !important; padding: 0.75rem !important; }
  .transfers-modal .flex-between { flex-wrap: wrap !important; gap: 0.5rem !important; }
  .transfers-negotiation-modal { padding: 0.5rem !important; }
  .transfers-negotiation-modal .flex-between { flex-wrap: wrap !important; gap: 0.5rem !important; }
  .transfers-negotiation-modal h2 { font-size: 1rem !important; }
  .transfers-negotiation-modal p { font-size: 0.75rem !important; }
  .transfers-negotiation-modal .btn-secondary { padding: 0.4rem 0.8rem !important; font-size: 0.8rem !important; }
  .transfers-negotiation-modal .player-avatar { width: 36px !important; height: 36px !important; font-size: 0.9rem !important; }
  .transfers-chat-bubble { max-width: 85% !important; font-size: 0.85rem !important; padding: 0.5rem 0.75rem !important; }
  .transfers-chat-bubble.system { font-size: 0.7rem !important; }
  .transfers-negotiation-area { padding: 0.75rem !important; }
  .transfers-negotiation-area label { font-size: 0.7rem !important; }
  .transfers-negotiation-area input[type=text],
  .transfers-negotiation-area input[type=number] { font-size: 0.85rem !important; padding: 0.4rem !important; }
  .transfers-negotiation-area .btn-secondary { padding: 0.3rem 0.5rem !important; font-size: 0.7rem !important; }
  .transfers-negotiation-area .btn-primary { padding: 0.5rem 0.8rem !important; font-size: 0.8rem !important; }
  .transfers-negotiation-area .info-text { font-size: 0.72rem !important; }
  .transfers-negotiation-inline { min-height: auto !important; padding: 0.75rem !important; }
  .transfers-negotiation-inline > div:first-child { flex-wrap: wrap !important; gap: 0.5rem !important; }
  .transfers-chat-container { min-height: 200px !important; max-height: 50vh !important; }
  .transfers-negotiation-row { flex-direction: column !important; gap: 0.75rem !important; }
  .transfers-negotiation-row > * { width: 100% !important; min-width: 0 !important; }
  .transfers-clauses-row { flex-direction: column !important; gap: 0.5rem !important; }
  .transfers-schedule-row { flex-direction: column !important; align-items: flex-start !important; gap: 0.5rem !important; }
  .topbar-root { padding: 0.5rem 0.75rem !important; flex-wrap: wrap !important; gap: 0.4rem !important; }
  .topbar-info { flex: 1 1 100% !important; }
  .topbar-info h3 { font-size: 0.85rem !important; }
  .topbar-info p { font-size: 0.7rem !important; }
  .topbar-right { flex: 1 1 100% !important; justify-content: space-between !important; }
  .topbar-budget, .topbar-confidence { display: none !important; }
  .topbar-btn { padding: 0.45rem 0.7rem !important; font-size: 0.75rem !important; }
  /* v2.04: los iconos del topbar VUELVEN a verse en móvil — antes se ocultaban
     aquí Y las etiquetas en TopBar.jsx, dejando Admin y "Simular hasta" vacíos */
  .kofi-btn { display: none !important; }
}
@media (max-width: 900px) {
  .topbar-root { flex-wrap: wrap !important; gap: 0.3rem !important; padding: 0.5rem 0.75rem !important; }
  .topbar-info { flex: 1 1 auto !important; }
  .topbar-right { flex: 1 1 auto !important; justify-content: flex-start !important; flex-wrap: wrap !important; }
  .topbar-budget, .topbar-confidence { display: none !important; }
  .topbar-btn { padding: 0.5rem 0.75rem !important; font-size: 0.8rem !important; }
  /* v2.04: ídem — sin esto, los botones solo-icono quedaban vacíos */
  .kofi-btn svg { display: inline !important; }
  .kofi-btn span { display: none !important; }
  .topbar-btn.kofi-btn { padding: 0.45rem 0.6rem !important; }
}
/* Botón premium: CTA destacado (píldora rellena) */
.topbar-premium {
  background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
  color: #fff !important;
  border-color: transparent !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 1px rgba(124,58,237,0.4), 0 4px 14px rgba(79,70,229,0.35) !important;
}
.topbar-premium:hover {
  filter: brightness(1.1);
}
@media (min-width: 769px) {
  .transfers-tabs-mobile  { display: none !important; }
  .transfers-table-view   { display: block !important; }
  .transfers-card-view    { display: none !important; }
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (max-width: 768px) { .squad-nat-text { display: none !important; } }

/* ── OVERRIDE sidebar overflow:visible con doble clase (mayor especificidad) ── */
@media screen and (max-width: 768px) {
  .app-content-area.app-content-area {
    overflow-x: hidden !important;
  }
}

/* ── Tactics Toast Notification ────────────────────────────────────────── */
@keyframes toastFadeInScale {
  from {
    opacity: 0;
    transform: translate(-50%, -20px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.tactics-toast {
  position: fixed;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  z-index: 9999;
  animation: toastFadeInScale 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
  max-width: 90vw;
  width: max-content;
}

.tactics-toast-success {
  border: 1px solid var(--neon-accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(52, 211, 153, 0.25);
}

.tactics-toast-warning {
  border: 1px solid #f59e0b;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.25);
}

.tactics-toast-text {
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ── Transfers Premium UI ──────────────────────────────────────────────── */
.transfer-card {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  transition: border-color 0.2s ease;
}

.transfer-card:hover {
  border-color: rgba(16, 185, 129, 0.3);
}

.stat-bar-container {
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}

.stat-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* ── Chat & Negotiation UI ───────────────────────────────────────────── */
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: slideUpFade 0.3s ease forwards;
}

.chat-modal-container {
  width: 95vw;
  max-width: 600px;
  background: var(--bg-dark);
  border-radius: var(--radius-lg);
  border: 1px solid var(--neon-accent);
  box-shadow: 0 25px 80px rgba(0,0,0,0.7), 0 0 40px rgba(16, 185, 129, 0.1);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}

.chat-bubble {
  padding: 0.8rem 1.1rem;
  border-radius: 18px;
  max-width: 85%;
  font-size: 0.9rem;
  line-height: 1.4;
  animation: slideUpFade 0.3s ease forwards;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.chat-bubble.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--pitch-green), #059669);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-bubble.agent {
  align-self: flex-start;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  color: #fff;
  border-bottom-left-radius: 4px;
}

.chat-bubble.system {
  align-self: center;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-style: italic;
  box-shadow: none;
  padding: 0.4rem 1rem;
}

.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,0.05);
  border-radius: 20px;
  width: fit-content;
  align-self: flex-start;
}

.typing-dot {
  width: 6px;
  height: 6px;
  background: var(--text-secondary);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

.btn-negotiate {
  background: linear-gradient(135deg, var(--pitch-green), #059669);
  color: #fff;
  border: none;
  padding: 0.8rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.btn-negotiate:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

.btn-negotiate:disabled {
  background: rgba(255,255,255,0.1);
  color: var(--text-secondary);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@keyframes pulseMatch {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BANNER DE ANUNCIOS Y MODALES — v2.19.11
   El banner de AdMob NO es HTML: es una capa NATIVA de Android por encima del
   webview, así que ningún z-index lo tapa. Cualquier overlay a pantalla completa
   tiene que RESERVAR su franja (`--banner-inset`, que fija AdBanner) o los botones
   de abajo quedan debajo del anuncio y no se pueden pulsar (renovaciones, resumen
   de temporada, descanso del partido…).
   El selector casa con los overlays `position: fixed` que llegan hasta abajo.
   ═══════════════════════════════════════════════════════════════════════════ */
/* OJO a las variantes: React convierte `inset: 0` en `inset: 0px` y `bottom: '0'` en
   `bottom: 0;`. La primera versión solo miraba `bottom: 0px`, así que TODOS los modales
   escritos con `inset: 0` (el de «Asignar misión al ojeador», el changelog, el de feedback…)
   se quedaban sin la reserva y su botón inferior caía bajo el anuncio. */
[style*="position: fixed"][style*="bottom: 0px"],
[style*="position: fixed"][style*="bottom: 0;"],
[style*="position: fixed"][style*="inset: 0px"],
[style*="position: fixed"][style*="inset: 0;"] {
  /* v2.20.10: se reserva TAMBIEN el menu inferior (`--menu-height`), no solo el anuncio. En el
     movil el menu es una capa fija por encima del modal, asi que si la ventana llega hasta el
     final de la pantalla su ultima parte (los botones) queda DEBAJO del menu y el scroll no
     sirve de nada: el usuario lo describio como "hago scroll pero sigue tapandolo el menu".
     En escritorio `--menu-height` no esta definida y el fallback es 0, asi que no cambia nada. */
  padding-bottom: calc(var(--banner-inset, 0px) + var(--menu-height, 0px) + 1rem) !important;
  box-sizing: border-box;
  /* v2.20: si el contenido no cabe, el overlay se desplaza en vez de dejar el boton fuera de
     la vista. Con `safe center` el bloque se alinea arriba cuando desborda (asi se ve el
     principio y se llega al final), y si cabe se centra igual que siempre. Los navegadores que
     no entienden `safe` ignoran la linea y se quedan con el centrado de antes. */
  overflow-y: auto !important;
  align-items: safe center !important;
}

/* Excepcion: el tutorial se ancla abajo a proposito (hoja inferior), no centrado. */
[style*="position: fixed"][style*="align-items: flex-end"] {
  align-items: flex-end !important;
}

/* v2.20 — y ademas la TARJETA tiene que caber.
   Reservar la franja del banner no basta: si el contenido crece (una goleada en el resumen
   del partido simulado, un mensaje largo, una lista de fichajes), la tarjeta se hace mas alta
   que la pantalla, el overlay la centra y el boton de continuar se queda FUERA de la vista,
   inalcanzable, ademas de tapado por el anuncio. El usuario reporto exactamente eso: "cuando
   simulo y hay muchos goles el boton para continuar se pone debajo del banner y no puedo seguir".
   La tarjeta se limita al alto visible (descontando banner y margenes) y hace scroll ELLA, asi
   el boton siempre se alcanza desplazandose. Si el contenido cabe, no cambia nada.
   Se aplica solo a las tarjetas que son HIJA DIRECTA del overlay (no a cualquier div de dentro). */
[style*="position: fixed"][style*="bottom: 0px"] > .glass-card,
[style*="position: fixed"][style*="bottom: 0;"] > .glass-card,
[style*="position: fixed"][style*="inset: 0px"] > .glass-card,
[style*="position: fixed"][style*="inset: 0;"] > .glass-card,
[style*="position: fixed"][style*="bottom: 0px"] > .glass-panel,
[style*="position: fixed"][style*="bottom: 0;"] > .glass-panel,
[style*="position: fixed"][style*="inset: 0px"] > .glass-panel,
[style*="position: fixed"][style*="inset: 0;"] > .glass-panel {
  /* v2.20.5: el tope de alto va TAMBIEN con !important. El usuario lo dejo claro: "si hago scroll
     pero el popup no tiene maximo y los botones se siguen quedando por abajo del banner, no me
     vale el scroll". Tener scroll sin tope no sirve de nada si la tarjeta sigue creciendo: hay
     que LIMITARLA al alto visible (descontando el banner) y DESPUES dejar que se desplace. */
  max-height: calc(100vh - var(--banner-inset, 0px) - var(--menu-height, 0px) - 2rem) !important;
  max-height: calc(100dvh - var(--banner-inset, 0px) - var(--menu-height, 0px) - 2rem) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Los overlays que usan top/left/right/bottom por separado (en vez de inset) no llegan a
   "bottom: 0px" literal: React escribe "bottom: 0px;" igual, pero algunos llevan un padding
   propio y el selector de arriba ya los cubre. Aun asi, el modal de la previa del partido y el
   resumen de la simulacion usan esa forma, asi que se cubren aqui de forma explicita. */
.sm-modal-card {
  max-height: calc(100vh - var(--banner-inset, 0px) - var(--menu-height, 0px) - 2rem);
  max-height: calc(100dvh - var(--banner-inset, 0px) - var(--menu-height, 0px) - 2rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-sizing: border-box;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════════
   OPTION FILE MANAGER — v2.19.9
   Rediseño de la pantalla de Option Files: sidebar con tarjetas, mercado
   público, cabecera del editor y pestañas segmentadas. Antes todo esto eran
   estilos inline repetidos por todo el componente.
   ═══════════════════════════════════════════════════════════════════════════ */

.ofm-root {
  --ofm-accent: #10b981;
  --ofm-accent-2: #34d399;
  --ofm-blue: #60a5fa;
  --ofm-violet: #a78bfa;
  --ofm-pink: #f472b6;
  --ofm-amber: #fbbf24;
  --ofm-line: rgba(255, 255, 255, 0.07);
  --ofm-line-2: rgba(255, 255, 255, 0.12);
  --ofm-card: rgba(255, 255, 255, 0.035);
  --ofm-card-hover: rgba(255, 255, 255, 0.075);
  position: relative;
  background:
    radial-gradient(1200px 600px at 12% -8%, rgba(16, 185, 129, 0.10), transparent 60%),
    radial-gradient(900px 520px at 92% 4%, rgba(99, 102, 241, 0.12), transparent 62%),
    #0a1628;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.ofm-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.15rem;
}
.ofm-brand__logo {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  background: linear-gradient(140deg, var(--ofm-accent), #0ea5e9);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.28);
  flex-shrink: 0;
}
.ofm-brand__title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  background: linear-gradient(92deg, #f8fafc, #94a3b8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
}
.ofm-brand__sub {
  font-size: 0.66rem;
  color: #64748b;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ofm-list-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin: 1.15rem 0 0.55rem;
}
.ofm-list-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ofm-line);
}

/* ── Tarjetas de Option File (sidebar) ───────────────────────────────────── */
.ofm-of-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--ofm-line);
  background: var(--ofm-card);
  cursor: pointer;
  transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
  overflow: hidden;
}
.ofm-of-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  transition: background 0.14s ease;
}
.ofm-of-card:hover {
  transform: translateY(-1px);
  background: var(--ofm-card-hover);
  border-color: var(--ofm-line-2);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}
.ofm-of-card.is-active {
  border-color: rgba(16, 185, 129, 0.5);
  background: linear-gradient(100deg, rgba(16, 185, 129, 0.14), rgba(16, 185, 129, 0.03));
}
.ofm-of-card.is-active::before { background: var(--ofm-accent); }
.ofm-of-card.is-public.is-active { border-color: rgba(96, 165, 250, 0.5); }
.ofm-of-card.is-public.is-active::before { background: var(--ofm-blue); }
.ofm-of-card__badge {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.ofm-of-card__name {
  font-weight: 700;
  font-size: 0.86rem;
  color: #f1f5f9;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ofm-of-card__meta {
  font-size: 0.66rem;
  color: #64748b;
  margin-top: 0.1rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* ── Chips ───────────────────────────────────────────────────────────────── */
.ofm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.63rem;
  font-weight: 700;
  padding: 0.13rem 0.42rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.ofm-chip--public { background: rgba(96, 165, 250, 0.16); color: var(--ofm-blue); border-color: rgba(96, 165, 250, 0.3); }
.ofm-chip--private { background: rgba(148, 163, 184, 0.12); color: #94a3b8; border-color: rgba(148, 163, 184, 0.22); }
.ofm-chip--ok { background: rgba(16, 185, 129, 0.16); color: var(--ofm-accent-2); border-color: rgba(16, 185, 129, 0.3); }
.ofm-chip--warn { background: rgba(251, 191, 36, 0.16); color: var(--ofm-amber); border-color: rgba(251, 191, 36, 0.3); }

/* ── Mercado público ─────────────────────────────────────────────────────── */
.ofm-market-card {
  padding: 0.7rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--ofm-line);
  background: linear-gradient(160deg, rgba(96, 165, 250, 0.07), rgba(255, 255, 255, 0.02));
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
  margin-bottom: 0.45rem;
}
.ofm-market-card:hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.42);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}
.ofm-market-card.is-active { border-color: rgba(96, 165, 250, 0.6); background: linear-gradient(160deg, rgba(96, 165, 250, 0.16), rgba(96, 165, 250, 0.04)); }
.ofm-market-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.72rem;
  color: #94a3b8;
}
.ofm-avatar {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #1e293b;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 10px;
  flex-shrink: 0;
}

/* ── Cabecera del editor ─────────────────────────────────────────────────── */
.ofm-hero {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--ofm-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent);
}
.ofm-hero__name {
  flex: 1;
  min-width: 150px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 0.35rem 0.55rem;
  font-weight: 800;
  color: #f8fafc;
  font-size: 1.05rem;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.ofm-hero__name:hover { border-color: var(--ofm-line); background: rgba(255, 255, 255, 0.03); }
.ofm-hero__name:focus { outline: none; border-color: rgba(16, 185, 129, 0.55); background: rgba(16, 185, 129, 0.06); }

.ofm-stats {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0.7rem 1rem 0;
}

/* ── Pestañas segmentadas ────────────────────────────────────────────────── */
.ofm-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ofm-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.ofm-tabs::-webkit-scrollbar { display: none; }
.ofm-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.8rem;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: #94a3b8;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.ofm-tab:hover { background: rgba(255, 255, 255, 0.05); color: #e2e8f0; }
.ofm-tab.is-active {
  background: linear-gradient(140deg, rgba(16, 185, 129, 0.22), rgba(16, 185, 129, 0.08));
  border-color: rgba(16, 185, 129, 0.4);
  color: #d1fae5;
}
.ofm-tab__count {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 0.05rem 0.32rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  color: inherit;
}

/* ── Rejilla de tarjetas de categoría ────────────────────────────────────── */
.ofm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.7rem;
}
.ofm-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--ofm-line);
  background: var(--ofm-card);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ofm-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(220px 90px at 100% 0%, var(--ofm-card-glow, transparent), transparent 70%);
  opacity: 0.55;
  pointer-events: none;
}
.ofm-card:hover {
  transform: translateY(-2px);
  background: var(--ofm-card-hover);
  border-color: var(--ofm-card-line, var(--ofm-line-2));
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.36);
}
.ofm-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ofm-line);
  flex-shrink: 0;
}
.ofm-card__title { font-size: 0.95rem; font-weight: 800; color: var(--ofm-card-accent, #e2e8f0); }
.ofm-card__sub { font-size: 0.7rem; font-weight: 600; color: #64748b; margin-top: 0.12rem; }
.ofm-card__sub.has { color: var(--ofm-card-accent, var(--ofm-accent)); }
.ofm-card__arrow { color: #334155; font-size: 1.05rem; margin-left: auto; }

/* ── Paneles de contenido ────────────────────────────────────────────────── */
.ofm-panel {
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid var(--ofm-line);
  background: rgba(255, 255, 255, 0.025);
  margin-bottom: 0.9rem;
}
.ofm-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.6rem;
}

/* ── Controles ───────────────────────────────────────────────────────────── */
.ofm-input,
.ofm-select {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border-radius: 9px;
  border: 1px solid var(--ofm-line-2);
  background: rgba(0, 0, 0, 0.28);
  color: #f8fafc;
  font-size: 0.85rem;
  font-family: inherit;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.ofm-input:focus,
.ofm-select:focus {
  outline: none;
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.13);
}
.ofm-input::placeholder { color: #475569; }
.ofm-select option { background: #0f172a; color: #f8fafc; }

.ofm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  border-radius: 9px;
  border: 1px solid var(--ofm-line-2);
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.14s ease, border-color 0.14s ease, opacity 0.14s ease;
}
.ofm-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.09); transform: translateY(-1px); }
.ofm-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ofm-btn--primary {
  background: linear-gradient(140deg, var(--ofm-accent), #059669);
  border-color: transparent;
  color: #04231a;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.25);
}
.ofm-btn--primary:hover:not(:disabled) { background: linear-gradient(140deg, var(--ofm-accent-2), #10b981); }
.ofm-btn--danger { color: #fca5a5; border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.1); }
.ofm-btn--danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.18); }

/* Botón «‹ Inicio»: vive en la misma fila que el contenido, así que tiene que
   alinearse arriba (align-self) o se estira como una barra de toda la altura. */
.ofm-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  margin: 0.85rem 1rem 0.5rem;
  padding: 0.4rem 0.9rem 0.4rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--ofm-line-2);
  background: rgba(255, 255, 255, 0.045);
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, transform 0.12s ease;
}
.ofm-back:hover {
  background: rgba(16, 185, 129, 0.13);
  border-color: rgba(16, 185, 129, 0.45);
  color: #d1fae5;
  transform: translateX(-2px);
}

/* ── Filas de traspaso ───────────────────────────────────────────────────── */
.ofm-tr-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border-radius: 11px;
  border: 1px solid rgba(244, 114, 182, 0.22);
  background: linear-gradient(120deg, rgba(244, 114, 182, 0.09), rgba(255, 255, 255, 0.02));
  margin-bottom: 0.4rem;
}
.ofm-tr-row__who { flex: 1; min-width: 0; }
.ofm-tr-row__name { font-size: 0.84rem; font-weight: 700; color: #f1f5f9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ofm-tr-row__route { font-size: 0.68rem; color: #94a3b8; margin-top: 0.1rem; }
.ofm-tr-row__num {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--ofm-pink);
  background: rgba(244, 114, 182, 0.14);
  border: 1px solid rgba(244, 114, 182, 0.3);
  border-radius: 7px;
  padding: 0.15rem 0.4rem;
  flex-shrink: 0;
}
.ofm-tr-arrow { color: var(--ofm-pink); font-weight: 800; flex-shrink: 0; }

.ofm-pick {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-radius: 9px;
  border: 1px solid var(--ofm-line);
  background: rgba(255, 255, 255, 0.03);
  color: #e2e8f0;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.13s ease, border-color 0.13s ease;
}
.ofm-pick:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--ofm-line-2); }
.ofm-pick.is-on { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.45); }
/* Jugador que este Option File ya manda a otro club: se muestra, pero no se puede elegir. */
.ofm-pick.is-out { opacity: 0.55; cursor: default; }
.ofm-pick.is-out:hover { background: rgba(255, 255, 255, 0.03); border-color: var(--ofm-line); }
.ofm-pick__pos {
  font-size: 0.62rem;
  font-weight: 800;
  background: #1e293b;
  border-radius: 5px;
  padding: 0.12rem 0.34rem;
  min-width: 32px;
  text-align: center;
  flex-shrink: 0;
}

.ofm-empty {
  padding: 1.1rem 0.8rem;
  text-align: center;
  font-size: 0.78rem;
  color: #64748b;
  border: 1px dashed var(--ofm-line-2);
  border-radius: 11px;
}

/* ── Selector de club (país → liga → equipo) y asistente de traspasos ────── */
.ofm-picker {
  border: 1px solid var(--ofm-line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.ofm-picker__country {
  flex: 1;
  text-align: center;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ofm-picker-accent, #f472b6) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ofm-picker-accent, #f472b6) 32%, transparent);
  font-size: 0.85rem;
  font-weight: 700;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ofm-picker__nav {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.75rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.14s ease;
}
.ofm-picker__nav:hover { background: rgba(255, 255, 255, 0.16); }
.ofm-picker__teams {
  max-height: 210px;
  overflow-y: auto;
  padding: 0.55rem 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.ofm-playerlist {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.ofm-pick__face {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--ofm-line-2);
}

.ofm-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.6rem;
}
.ofm-step__num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.66rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--ofm-line-2);
  color: #94a3b8;
  flex-shrink: 0;
}
.ofm-step.is-on { color: #f1f5f9; }
.ofm-step.is-on .ofm-step__num {
  background: color-mix(in srgb, var(--ofm-step-accent, #f472b6) 22%, transparent);
  border-color: color-mix(in srgb, var(--ofm-step-accent, #f472b6) 50%, transparent);
  color: #fff;
}
.ofm-step.is-done .ofm-step__num {
  background: rgba(16, 185, 129, 0.22);
  border-color: rgba(16, 185, 129, 0.5);
  color: #6ee7b7;
}

.ofm-choice {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  text-align: left;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--ofm-line-2);
  background: rgba(255, 255, 255, 0.035);
  color: #e2e8f0;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
.ofm-choice:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.07); }
.ofm-choice.is-on { border-color: rgba(16, 185, 129, 0.55); background: rgba(16, 185, 129, 0.12); }
.ofm-choice.is-on-swap { border-color: rgba(244, 114, 182, 0.55); background: rgba(244, 114, 182, 0.12); }
.ofm-choice__icon { font-size: 1.5rem; flex-shrink: 0; }
.ofm-choice__t { font-size: 0.92rem; font-weight: 800; }
.ofm-choice__d { font-size: 0.72rem; color: #94a3b8; margin-top: 0.1rem; }

.ofm-summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.85rem;
  border-radius: 11px;
  border: 1px solid var(--ofm-line-2);
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.86rem;
  font-weight: 700;
  color: #f1f5f9;
}
.ofm-summary__vs { color: #f472b6; font-weight: 800; }
.ofm-summary__mut { color: #64748b; font-weight: 500; font-size: 0.76rem; }

/* ── Móvil ───────────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  .ofm-hero { padding: 0.7rem 0.8rem; }
  .ofm-grid { grid-template-columns: 1fr 1fr; gap: 0.55rem; }
  .ofm-card { padding: 0.75rem 0.8rem; gap: 0.6rem; }
  .ofm-card__icon { width: 36px; height: 36px; font-size: 1.15rem; }
  .ofm-card__title { font-size: 0.86rem; }
  .ofm-panel { padding: 0.8rem; }
  .ofm-tabs { border-radius: 10px; }
  .ofm-tab { padding: 0.45rem 0.65rem; font-size: 0.76rem; }
  .ofm-tr-row { flex-wrap: wrap; }
}

.end-of-season-modal {
  max-width: 500px;
  text-align: center;
  padding: 0;
  overflow: hidden;
  background: var(--bg-secondary);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.4s ease-out;
}

.eos-header {
  background: linear-gradient(135deg, var(--accent-color, #f39c12), #d35400);
  color: white;
  padding: 2rem 1.5rem;
}

.eos-header h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.8rem;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.eos-header p {
  margin: 0;
  font-size: 1rem;
  color: #fff;
  opacity: 0.9;
}

.eos-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.eos-card {
  display: flex;
  align-items: center;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1rem;
  text-align: left;
}

.eos-icon {
  font-size: 2.5rem;
  margin-right: 1.5rem;
  background: rgba(243, 156, 18, 0.1);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.eos-details h4 {
  margin: 0 0 0.25rem 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.eos-value {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--text-primary);
}

.eos-prize {
  display: inline-block;
  margin-top: 0.25rem;
  color: #2ecc71;
  font-weight: bold;
  font-size: 0.9rem;
  background: rgba(46, 204, 113, 0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.eos-footer {
  padding: 1.5rem;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
}

.eos-total {
  margin-bottom: 1rem;
}

.eos-total span {
  display: block;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.eos-total h3 {
  margin: 0.25rem 0 0 0;
  font-size: 2rem;
  color: #2ecc71;
}

.eos-btn {
  width: 100%;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.eos-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
}

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

/* ── v1.87: the summary now lists every trophy, so the body scrolls and rows are compact ── */
/* El root anterior usaba `modal-overlay`, una clase que no existe en ningún CSS del proyecto:
   el resumen se pintaba en el flujo de la página (pegado al borde derecho, sin fondo oscuro).
   Mismo patrón que ChangelogModal: overlay fijo y centrado por encima del tour. */
.eos-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(2, 6, 23, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  /* v2.20.9: reserva la franja del anuncio (--banner-inset) y, si el contenido no cabe, se
     desplaza alineando arriba en vez de recortar. Esta overlay usa CLASE, asi que no le llegaba
     la regla global que va por estilos inline. */
  padding-bottom: calc(var(--banner-inset, 0px) + var(--menu-height, 0px) + 0.75rem);
  box-sizing: border-box;
  overflow-y: auto;
  align-items: safe center;
}

.end-of-season-modal {
  max-width: 560px;
  width: min(560px, 94vw);
  /* dvh: el alto REAL de la pantalla en movil (vh es el maximo, con la barra del navegador
     oculta, y por eso la tarjeta se pasaba y el pie quedaba debajo). */
  max-height: calc(100vh - var(--banner-inset, 0px) - var(--menu-height, 0px) - 1.5rem);
  max-height: calc(100dvh - var(--banner-inset, 0px) - var(--menu-height, 0px) - 1.5rem);
  display: flex;
  flex-direction: column;
}

.eos-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  gap: 0.6rem;
  padding: 1.1rem;
  text-align: left;
}

.eos-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--text-secondary);
  border-radius: 8px;
  padding: 0.9rem 1rem;
}

.eos-hero.champion { border-left-color: #f1c40f; background: rgba(241, 196, 15, 0.08); }
.eos-hero.runnerUp { border-left-color: #95a5a6; }

.eos-hero-pos {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-primary);
}

.eos-hero.champion .eos-hero-pos { color: #f1c40f; }

.eos-hero-sub {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.eos-hero-side { text-align: right; }
.eos-hero-side h4 {
  margin: 0 0 0.2rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

.eos-hero-tag {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
}

.eos-hero-tag.champ { color: #f1c40f; }

.eos-section {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
}

.eos-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
}

.eos-row.champion { border-color: rgba(241, 196, 15, 0.5); }
.eos-row-icon { font-size: 1.2rem; width: 1.4rem; text-align: center; flex-shrink: 0; }
.eos-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.eos-row-label { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
.eos-row-result { font-size: 0.8rem; color: var(--text-secondary); }
.eos-row.champion .eos-row-result { color: #f1c40f; font-weight: 700; }
.eos-row-sub { font-size: 0.75rem; color: var(--text-secondary); width: 100%; }

.eos-note,
.eos-board {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.eos-board h4 { margin: 0 0 0.2rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; }
.eos-verdict { font-weight: 700; color: var(--text-primary); }
.eos-verdict.failed { color: #e74c3c; }
.eos-verdict.exceeded { color: #2ecc71; }
.eos-fired { display: block; margin-top: 0.25rem; color: #e74c3c; font-weight: 700; }

.eos-footer { text-align: center; }
.eos-total { margin-bottom: 0.4rem; }
.eos-total h3 { font-size: 1.15rem; }
.eos-grand {
  margin: 0.6rem 0 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border-color);
}
.eos-grand h3 { font-size: 1.8rem; }

@media (max-width: 480px) {
  .eos-header { padding: 1.2rem 1rem; }
  .eos-header h2 { font-size: 1.4rem; }
  .eos-hero-pos { font-size: 1.6rem; }
  .eos-hero-side { text-align: left; }
}
/* PromocionesModal — animated promotion/relegation board.
   Same overlay recipe as EndOfSeasonModal (.eos-overlay): the project has no generic modal layer. */

.pr-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(2, 6, 23, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}

.pr-card {
  width: min(620px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--bg-secondary, #1e293b);
  color: var(--text-color, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: pr-rise 0.35s ease-out;
}

@keyframes pr-rise {
  from { transform: translateY(18px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.pr-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.4rem 1.5rem;
  background: linear-gradient(135deg, #0f766e, #065f46);
  color: #fff;
}

.pr-emoji {
  font-size: 2rem;
  line-height: 1;
}

.pr-titulos h2 {
  margin: 0;
  font-size: 1.45rem;
  color: #fff;
}

.pr-titulos p {
  margin: 0.2rem 0 0 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

.pr-destacado {
  margin: 1rem 1.5rem 0 1.5rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  animation: pr-pulse 1.6s ease-in-out infinite;
}

.pr-destacado.pr-promoted {
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #34d399;
}

.pr-destacado.pr-relegated {
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #f87171;
}

@keyframes pr-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

.pr-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1.2rem 1.5rem 0 1.5rem;
}

.pr-bloque h3 {
  margin: 0 0 0.6rem 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.pr-bloque-asc h3 { color: #34d399; }
.pr-bloque-desc h3 { color: #f87171; }

.pr-lista {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pr-fila {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.08);
  font-size: 0.9rem;
  opacity: 0;
  /* Cada fila entra con un retardo escalonado: la tabla se "despliega" al abrirla. */
  animation: pr-row 0.28s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

.pr-bloque-asc .pr-fila { border-left: 3px solid rgba(16, 185, 129, 0.55); }
.pr-bloque-desc .pr-fila { border-left: 3px solid rgba(239, 68, 68, 0.55); }

@keyframes pr-row {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

.pr-flecha {
  font-size: 0.8rem;
  width: 1rem;
  flex-shrink: 0;
}

.pr-bloque-asc .pr-flecha { color: #34d399; }
.pr-bloque-desc .pr-flecha { color: #f87171; }

.pr-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pr-mas,
.pr-vacio {
  margin: 0.2rem 0 0 0;
  font-size: 0.8rem;
  color: var(--text-muted, #94a3b8);
}

.pr-playoffs {
  margin: 1rem 1.5rem 0 1.5rem;
  font-size: 0.85rem;
  color: var(--text-muted, #94a3b8);
}

.pr-footer {
  padding: 1.2rem 1.5rem 1.5rem 1.5rem;
  display: flex;
  justify-content: flex-end;
}

.pr-boton {
  background: #10b981;
  color: #04211a;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.3rem;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

.pr-boton:hover {
  background: #34d399;
}

/* Mobile-first: una sola columna y filas más compactas. */
@media (max-width: 560px) {
  .pr-columnas {
    grid-template-columns: 1fr;
  }

  .pr-header {
    padding: 1.1rem 1rem;
  }

  .pr-titulos h2 {
    font-size: 1.2rem;
  }
}
/* Palmarés — trophy archive (v1.87). Mobile first: single column, gold/green accents. */
.palmares {
  padding: 0.75rem 0 2rem;
  color: var(--text-primary);
}

.pm-top h2 {
  margin: 0 0 0.6rem;
  font-size: 1.4rem;
}

.pm-tabs {
  display: flex;
  gap: 0.35rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.25rem;
  position: sticky;
  top: 0;
  z-index: 5;
}

.pm-tab {
  flex: 1;
  border: 0;
  border-radius: 7px;
  padding: 0.5rem 0.4rem;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}

.pm-tab.active {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
}

.pm-panel {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 0.9rem;
}

.pm-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.pm-club-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-left: 4px solid #10b981;
  border-radius: 10px;
  padding: 0.8rem 1rem;
}

.pm-club-head h3 { margin: 0; font-size: 1.15rem; }
.pm-club-head p { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--text-secondary); }
.pm-club-badge { font-size: 1.8rem; }

.pm-group h3 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.pm-cabinet { display: flex; flex-direction: column; gap: 0.6rem; }
.pm-group { display: flex; flex-direction: column; gap: 0.35rem; }

.pm-comp {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}

.pm-comp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}

.pm-comp-btn {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.pm-comp-name { font-weight: 700; font-size: 0.92rem; }
.pm-comp-count { font-size: 0.78rem; color: #10b981; font-weight: 700; white-space: nowrap; }

.pm-seasons { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; }

.pm-chip {
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.pm-chip.runnerUp {
  border-color: var(--border-color);
  background: transparent;
  color: var(--text-secondary);
}

.pm-finals { display: flex; flex-direction: column; gap: 0.25rem; }

.pm-final {
  display: grid;
  grid-template-columns: 4.2rem 1.2rem 1fr auto;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  font-size: 0.82rem;
}

.pm-final.champion { border-left: 3px solid #f1c40f; }
.pm-final.runnerUp { border-left: 3px solid var(--border-color); }
.pm-final-season { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pm-final-comp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-final-result { font-weight: 700; }
.pm-final.champion .pm-final-result { color: #f1c40f; }
.pm-final.runnerUp .pm-final-result { color: var(--text-secondary); }
.pm-final-rival { grid-column: 2 / -1; font-size: 0.75rem; color: var(--text-secondary); }

.pm-season {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.pm-season.champ { border-color: rgba(241, 196, 15, 0.45); }

.pm-season-head {
  display: grid;
  grid-template-columns: 4.6rem 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.pm-season-label { font-weight: 800; font-variant-numeric: tabular-nums; }
.pm-season-pos { font-size: 0.82rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-season-icons { font-size: 0.82rem; font-weight: 700; color: #10b981; }
.pm-season-arrow { font-size: 0.7rem; color: var(--text-secondary); }
.pm-season-body { padding: 0 0.7rem 0.6rem; border-top: 1px dashed var(--border-color); }
.pm-season-line { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--text-secondary); }

.pm-winners { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.2rem; }

.pm-winner {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: 0.4rem;
  font-size: 0.8rem;
  padding: 0.25rem 0;
  border-bottom: 1px dashed var(--border-color);
}

.pm-winner:last-child { border-bottom: 0; }
.pm-winner-season { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pm-winner-club { font-weight: 700; }
.pm-winner-runner { grid-column: 2; color: var(--text-secondary); font-size: 0.75rem; }

.pm-search {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.95rem;
}

.pm-back {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-secondary);
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.pm-rival-list { display: flex; flex-direction: column; gap: 0.25rem; }

.pm-rival {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.2rem 0.6rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pm-rival-name { font-weight: 700; font-size: 0.9rem; }
.pm-rival-league { font-size: 0.75rem; color: var(--text-secondary); }
.pm-rival-titles { grid-row: span 2; font-weight: 800; color: #10b981; }

.pm-empty { font-size: 0.85rem; color: var(--text-secondary); }

@media (min-width: 900px) {
  .pm-top h2 { font-size: 1.7rem; }
  .pm-tabs { max-width: 360px; }
}