/* Móvil en vertical: HUD en dos filas arriba, los apartados como barra de pestañas abajo (con el
   submenú justo encima) y cada pantalla en una sola columna que se desplaza en vertical.
   Se carga la última. */

@media (orientation: portrait) and (max-width: 820px) {
  :root { --hud-h: 46px; --nav-h: 46px; font-size: 14px; }
  .only-wide { display: none; }
  .only-compact { display: inline; }

  /* ---------- Estructura: HUD · pantalla · submenú · apartados ---------- */
  .app {
    grid-template-columns: minmax(0, 1fr);
    width: 100vw;
    grid-template-rows: auto 1fr auto auto;
  }
  .hud { grid-row: 1; grid-column: 1; }
  .main { grid-row: 2; grid-column: 1; margin: 0; }
  .subnav { grid-row: 3; grid-column: 1; }
  .sidebar { grid-row: 4; grid-column: 1; }

  /* ---------- HUD en dos filas ---------- */
  .hud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 6px;
    padding: 5px 8px;
    padding-top: max(5px, env(safe-area-inset-top));
  }
  .hud__left { flex: 1 1 auto; gap: 6px; order: 1; }
  .hud__center { order: 2; gap: 6px; padding: 2px 10px 2px 6px; }
  .hud__right { order: 3; flex: 1 1 100%; justify-content: space-between; gap: 6px; }
  .crest { width: 34px; font-size: 18px; }
  .hud__info { padding: 2px 8px 3px; }
  .hud__club { font-size: 14px; }
  .badge--level { display: none; }
  .hud__sub { gap: 6px; font-size: 11px; }
  .mood { font-size: 20px; }
  .balance { font-size: 17px; }
  .rival { flex: 1; min-width: 0; }
  .rival__name { display: inline; font-size: 0.8rem; }
  .rival__vs { font-size: 0.7rem; }
  .rival__crest { width: 28px; font-size: 15px; }
  .weather { font-size: 18px; }
  .kickoff { flex-direction: row; align-items: center; gap: 6px; padding: 2px 8px; }
  .kickoff small { font-size: 9px; }
  .kickoff b { font-size: 15px; }
  .help-btn, .hud-btn { width: 30px; font-size: 15px; }

  /* ---------- Apartados: barra de pestañas abajo ---------- */
  .sidebar {
    flex-direction: row;
    align-items: stretch;
    gap: 5px;
    padding: 6px 6px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    overflow: visible;
    border-right: 0;
    border-top: 3px solid var(--outline, #061433);
    box-shadow: inset 0 3px 0 var(--rim), 0 -6px 18px rgba(0, 0, 0, 0.3);
  }
  .sidebar__nav { flex-direction: row; gap: 5px; }
  .sidebar__nav li { flex: 1 1 0; min-width: 0; display: flex; }
  .sidebar__link { min-height: 0; flex: 1; gap: 1px; padding: 4px 2px 5px; border-radius: 14px; }
  .sidebar__link .sidebar__icon { font-size: 22px; }
  .sidebar__label { font-size: 11px; letter-spacing: 0; }
  .sidebar__link.is-active { transform: translateY(-3px); }

  /* ---------- Submenú: encima de los apartados, icono encima del nombre ---------- */
  .subnav { height: auto; gap: 5px; padding: 5px 6px 4px; }
  .subnav__link { flex-direction: column; gap: 0; padding: 3px 2px; border-radius: 14px; }
  .subnav__icon { font-size: 17px; }
  .subnav__label { font-size: 11px; letter-spacing: 0; max-width: 100%; }

  /* ---------- Pantallas en una columna que se desplaza ---------- */
  .home { grid-template-columns: 1fr; gap: 10px; padding: 8px; }
  .cal, .stats, .search, .staff, .medical, .economy { padding: 8px; gap: 10px; }
  .economy { grid-template-columns: 1fr; }
  .eco-moves-box { max-height: none; }
  .search-filters { gap: 10px 14px; }
  .search-filters__group input[type='range'] { width: 140px; }
  .staff-grid { grid-template-columns: 1fr; }
  .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clinic { grid-template-columns: 1fr; }

  /* Clasificación */
  .league {
    overflow: auto;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    align-content: start;
    gap: 8px;
    padding: 8px;
  }
  .league__head { flex-wrap: wrap; gap: 8px; }
  .league__title { min-width: 0; }
  .league__legend { flex-wrap: wrap; }
  .league__bar { gap: 6px; }
  .league__table, .league__side { min-height: auto; overflow: visible; }
  .standings td, .standings th { padding: 5px 3px; }
  .hide-sm { display: none; }

  /* Plantilla: la tabla se desplaza en horizontal dentro de su panel */
  .squad { padding: 8px; gap: 8px; }
  .squad__head { flex-wrap: wrap; }

  /* Entrenamiento: lista arriba (más baja) y el detalle debajo */
  .gym { overflow: auto; grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 10px; padding: 8px; }
  .gym__list { max-height: 34vh; }

  /* Tácticas: el campo se pone de pie (se ataca hacia arriba) y el banquillo va debajo */
  .tactics { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; padding: 8px 46px 8px 8px; gap: 6px; }
  .bench { min-width: 0; }
  .tactics__bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pitch { min-height: 0; }
  .slot {
    --card-h: calc(min(15cqh, 22cqw, 110px) * var(--k, 1));
    left: calc(var(--y) * 1%);
    top: calc((100 - var(--x)) * 1%);
  }
  .pitch__lines {
    width: 100cqh;
    height: 100cqw;
    transform-origin: 0 0;
    transform: rotate(-90deg) translateX(-100%);
  }
  .pitch { background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.12), transparent 70%), repeating-linear-gradient(0deg, #36c94f 0 10%, #2db345 10% 20%); }
  .bench { --card-h: 92px; }

  /* Ficha de un equipo */
  .team-view { overflow: auto; }
  .team-complex, .team-league { grid-template-columns: 1fr; height: auto; }
  .team-complex__scene { min-height: 240px; }
  .team-league .league__table, .team-league__games { overflow: visible; }

  /* Partido en directo: marcador, crónica y debajo minicampo y estadísticas */
  .match { overflow: auto; grid-template-rows: auto auto auto; gap: 8px; padding: 8px; }
  .match__board { padding: 6px 8px; gap: 6px; }
  .match__crest { width: 38px; font-size: 22px; }
  .match__name { font-size: 0.9rem; white-space: normal; }
  .match__score { font-size: 34px; }
  .match__body { grid-template-columns: 1fr; }
  .match__feed { max-height: 44vh; }
  .match__side { overflow: visible; }
  .match__pitch { --pitch-max-h: 210px; }

  /* Traspasos: cartas arriba y la puja debajo, en columna */
  .bidbar { grid-template-columns: 1fr; justify-items: center; gap: 8px; padding: 6px 12px 10px; text-align: center; }
  .bidbar__wage { align-items: center; text-align: center; }
  .cf-nav { width: 34px; height: 34px; }

  /* Ojeadores: los expedientes en columna */

  /* Instalaciones: la escena se ensancha para que el estadio y los edificios se vean grandes;
     se desliza en horizontal */

  /* Ayuda: índice de iconos a la izquierda */
  .help { gap: 6px; padding: 6px; }
  .help__index { padding: 4px; gap: 2px; }
  .help__index h2 { display: none; }
  .help__topic { justify-content: center; padding: 6px 0; font-size: 0; }
  .help__content { padding: 12px; font-size: 0.9rem; }
  .help-table { display: block; overflow-x: auto; }

  /* Ventanas */
  .modal-overlay { padding: 8px; }
  .modal { max-height: calc(100dvh - 16px); }
  .report__cols { grid-template-columns: 1fr; }
}

@media (orientation: portrait) and (max-width: 820px) {
  /* Submenú sin iconos: el nombre en una línea */
  .subnav__link { flex-direction: row; gap: 3px; padding: 6px 2px; }
  .subnav__label { font-size: 12px; white-space: normal; text-align: center; line-height: 1.05; }
}

/* Letra más grande en los menús (móvil en vertical) */
@media (orientation: portrait) and (max-width: 820px) {
  .sidebar__label { font-size: 13px; }
  .subnav__label { font-size: 15px; }
  .subnav--many .subnav__label { font-size: 12px; }
  .subnav__link { padding-left: 1px; padding-right: 1px; }
}
@media (orientation: portrait) and (max-width: 370px) {
  .subnav__label { font-size: 13px; }
  .subnav--many .subnav__label { font-size: 11px; }
}
@media (orientation: portrait) and (max-width: 820px) {
  .subnav__label { white-space: normal; text-align: center; line-height: 1.05; overflow-wrap: anywhere; }
}
@media (orientation: portrait) and (max-width: 500px) {
  .subnav__label { font-size: 13px; }
}

@media (orientation: portrait) and (max-width: 820px) {
  .subnav__link { flex-direction: column; gap: 0; }
  .subnav__icon { font-size: 18px; }
}
@media (orientation: portrait) and (max-width: 820px) {
  :root { --nav-h: auto; }
  .subnav { height: auto; }
}

/* Barra superior con solo el club y la ayuda: una fila */
@media (orientation: portrait) and (max-width: 820px) {
  .hud { flex-wrap: nowrap; }
  .hud__right { flex: 0 0 auto; }
}

/* El nombre del club se ve siempre en la barra superior */
.hud__club { display: block !important; }
.hud__info { min-width: 0; }
.hud__club { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Icono que sobresale del botón (móvil en vertical) */
@media (orientation: portrait) and (max-width: 820px) {
  .sidebar { --gap: 5px; padding-top: 6px; --side-btn: calc((100vw - 12px - 4 * var(--gap)) / 5); }
  .sidebar__link { padding: 4px 1px 3px; }
  .sidebar__link .sidebar__icon { font-size: calc(var(--side-btn) * 0.52); }
  .subnav { padding-top: 6px; }
  .subnav .subnav__icon { font-size: 26px; margin-top: 0; }
  .subnav__link { min-height: 56px; padding: 4px 1px 4px; }
}

/* ---------- Móvil/táctil: todos los botones con al menos 44 px para pulsarlos con el dedo ---------- */
@media (pointer: coarse), (max-width: 820px) {
  .btn, .btn-bid, .tab, .link-btn, .league__nav, .bench__nav, .modal__close, .help-btn, .hud-btn, .cf-nav, .focus-btn, .drawer__tab, .squad-sell {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn, .tab, .squad-sell { padding-left: 14px; padding-right: 14px; }
  .btn-bid { min-height: 56px; }
  .league__nav, .group-picker .league__nav { width: 44px; height: 44px; }
  .group-picker select { width: auto; height: 44px; }
  button.chip { min-height: 44px; padding-left: 14px; padding-right: 14px; }
  .select, select, .opt, .gym-row { min-height: 44px; }
  input[type='range'] { min-height: 34px; }
  .hud .hud-btn, .hud .help-btn { width: 44px; height: 44px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  :root { --hud-h: 52px; }
}

/* Barra superior con cinco botones: el nombre del club debe caber entero */
@media (orientation: portrait) and (max-width: 820px) {
  .hud { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .hud__right { gap: 3px; }
  .hud .hud-btn, .hud .help-btn { width: 42px; height: 42px; min-width: 42px; min-height: 42px; }
  .crest { width: 28px; }
  .hud__left { gap: 5px; }
  .hud__club { font-size: 13px; letter-spacing: 0; }
  .hud__info { padding-left: 7px; padding-right: 7px; }
}

/* Con el botón de cambiar de club junto al nombre, la barra va más ajustada */
@media (orientation: portrait) and (max-width: 820px) {
  .hud { padding-left: 6px; padding-right: 6px; gap: 3px; }
  .hud .hud-btn, .hud .help-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  .hud__right { gap: 2px; }
  .crest { width: 24px; font-size: 14px; }
  .hud__left { gap: 3px; min-width: 0; flex: 1 1 auto; }
  .hud__club { font-size: 12px; min-width: 0; }
}

/* Nombres largos del submenú (Estadística, Plantilla…): la letra se ajusta al ancho para que quepan en una línea */
@media (orientation: portrait) and (max-width: 500px) {
  .subnav .subnav__label--long { font-size: clamp(9px, 2.75vw, 13px); }
}

/* Botones de la barra superior: cuadrados y lo más bajos posible, sin perder facilidad para pulsarlos */
:root { --hud-btn: 40px; --hud-h: 52px; }
@media (max-height: 500px) and (orientation: landscape) { :root { --hud-h: 50px; } }
.hud .hud-btn, .hud .help-btn { width: var(--hud-btn); height: var(--hud-btn); min-width: var(--hud-btn); min-height: var(--hud-btn); }
.hud__left .hud__team { min-height: var(--hud-btn); }
.cal__head .hud-btn--tools { width: var(--hud-btn); height: var(--hud-btn); min-width: var(--hud-btn); min-height: var(--hud-btn); }

/* ---------- Tipografía unificada: un tamaño para el título de cada apartado y otro para sus paneles ---------- */
:root { --title-size: clamp(18px, 4vh, 28px); --panel-title-size: 1rem; }
@media (max-height: 500px) and (orientation: landscape) { :root { --title-size: 1.05rem; --panel-title-size: 0.85rem; } }
.stadium__head h2, .gym__list-head h2, .gym__info h2, .squad__head h2, .scouting__head h2, .league__title h2,
.team-view__title h2, .economy__head h2, .medical__head h2, .cal__head h2, .help__content h2 { font-size: var(--title-size); }
.league__side h3, .match__feed h3, .match__side h3, .eco-card h3, .info-card h3, .playoff-block h3, .home-card h3,
.cal-card h3, .stats-card h3, .search-card h3, .clinic h3, .gym__info h3, .report__injuries h3, .scout-card__top h3,
.drawer__body h3, .reveal__info h3 { font-size: var(--panel-title-size); }
/* El rótulo de noticias del mercado usa la misma letra que el resto del juego */
.ticker { font-family: var(--font-body); }

/* Amistoso en directo: el país, la división y el grupo con letra más pequeña y en varias líneas */
@media (orientation: portrait) and (max-width: 820px) {
  .match__origin { font-size: 0.62rem; line-height: 1.15; overflow-wrap: anywhere; }
  .match__team .match__who { min-width: 0; }
  .match__name { font-size: 0.82rem; }
}

/* ---------- Entrenar en móvil vertical: todo cabe sin desplazarse ----------
   Arriba, la plantilla como una tira de jugadores que se desliza de lado; debajo, la carta con los datos a su derecha,
   las estadísticas en dos columnas, el potencial y los botones de qué se entrena. */
@media (orientation: portrait) and (max-width: 820px) {
  .gym { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 6px; padding: 6px; }
  .gym__list, .gym__detail { min-width: 0; }
  .gym__list { max-height: none; flex-direction: row; align-items: stretch; }
  .gym__list-head { flex: none; padding: 4px 4px 4px 6px; align-items: center; }
  .gym__list-head h2 { display: none; }
  .gym__list-head .chip { padding: 0.3em 0.5em; }
  .gym__rows { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 4px 6px 4px 2px; gap: 4px; scrollbar-width: none; }
  .gym-row { flex: 0 0 74px; grid-template-columns: 1fr; justify-items: center; gap: 0; min-height: 0; padding: 4px 2px; text-align: center; }
  .gym-row__face { font-size: 26px; }
  .gym-row__name { max-width: 100%; font-size: 0.68rem; }
  .gym-row__name small { font-size: 0.6rem; }
  .gym-row__focus { display: none; }
  .gym-row__pts { min-width: 0; font-size: 0.78rem; text-align: center; }

  .gym__detail { overflow-x: hidden; --card-h: clamp(118px, 19vh, 160px); grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 4px; padding: 2px; }
  .gym__card { grid-row: 1 / span 3; position: static; padding-top: 0; }
  .gym__info { display: contents; }
  .gym__info > h2, .gym__info > p { grid-column: 2; min-width: 0; margin: 0; }
  .gym__info > h2 { font-size: 1rem; line-height: 1.1; align-self: end; }
  .gym__info > p { font-size: 0.72rem; }
  .gym__info .tag { display: block; padding: 2px 8px; font-size: 0.68rem; line-height: 1.2; white-space: normal; }
  .gym__info .stat-bars { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 2px; margin: 4px 0 0; }
  .gym__info .stat-bar { grid-template-columns: 4.6em 1fr 1.8em; gap: 4px; font-size: 0.72rem; white-space: nowrap; }
  .gym__info .stat-bar__track { height: 8px; }
  .gym__info .potential { grid-column: 1 / -1; margin: 4px 0 0; padding: 6px 10px; }
  .gym__info .potential__head { font-size: 0.82rem; }
  .gym__info .potential__head b { font-size: 1rem; }
  .gym__info .potential__track { margin: 3px 0; }
  .gym__info .potential small { font-size: 0.66rem; line-height: 1.2; }
  .gym__info > h3 { grid-column: 1 / -1; margin: 4px 0 0; font-size: 0.82rem; }
  .gym__info .focus-picker { grid-column: 1 / -1; gap: 3px; }
  .gym__info .focus-btn { min-height: 0; flex-direction: column; gap: 0; padding: 4px 1px 3px; }
  .gym__info .focus-btn__icon { font-size: 18px; }
  .gym__info .focus-btn__name { display: block; font-size: 0.62rem; line-height: 1.15; letter-spacing: 0; }
  .gym__info .focus-btn__star { top: 1px; right: 3px; font-size: 9px; }
}

/* ---------- Plantilla en móvil vertical: toda la plantilla de un vistazo, sin desplazarse ----------
   Filas bajas, solo lo esencial (nombre, posición, edad, nivel, las 6 estadísticas, potencial y resistencia) y la venta
   como botón 💸 (el precio sale al tocarlo). El salario y la estadística que entrena (ya marcada en verde) se quitan. */
@media (orientation: portrait) and (max-width: 820px) {
  .squad { padding: 4px; gap: 4px; }
  .squad__head { flex-wrap: nowrap; overflow-x: auto; gap: 4px; }
  .squad__head h2 { font-size: 0.95rem; white-space: nowrap; }
  .squad__head .chip.muted { display: none; }
  .squad > .squad__table { overflow-y: auto; overflow-x: hidden; border-radius: 12px; }
  .squad__section { margin: 3px 6px 1px; font-size: 0.74rem; }
  .squad > .squad__table .squad-table { table-layout: fixed; font-size: 0.7rem; }
  .squad > .squad__table .squad-table th { padding: 2px 0; font-size: 0; line-height: 1; }
  .squad > .squad__table .squad-table th small { display: block; font-size: 0.56rem; }
  .squad > .squad__table .squad-table td { padding: 0; height: 22px; line-height: 1.1; }
  .squad > .squad__table .squad-table :is(th, td):nth-child(13),
  .squad > .squad__table .squad-table :is(th, td):nth-child(14),
  .squad > .squad__table .squad-table :is(th, td):nth-child(15) { display: none; }
  .squad > .squad__table .squad-table th:nth-child(1) { width: auto; font-size: 0.56rem; }
  .squad > .squad__table .squad-table th:nth-child(2) { width: 24px; font-size: 0.56rem; }
  .squad > .squad__table .squad-table th:nth-child(3) { width: 22px; font-size: 0.56rem; }
  .squad > .squad__table .squad-table th:nth-child(4) { width: 28px; font-size: 0.56rem; }
  .squad > .squad__table .squad-table th:nth-child(n+5):nth-child(-n+10) { width: 23px; }
  .squad > .squad__table .squad-table th:nth-child(11) { width: 28px; }
  .squad > .squad__table .squad-table th:nth-child(12) { width: 23px; }
  .squad > .squad__table .squad-table th:nth-child(15) { width: 30px; font-size: 0.56rem; }
  .squad > .squad__table .squad-name { position: static; max-width: none; gap: 3px; padding-left: 3px; overflow: hidden; background: none; }
  .squad > .squad__table .squad-face { display: block; flex: none; font-size: 14px; }
  .squad > .squad__table .squad-name > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.68rem; }
  .squad > .squad__table .squad-name .emoji, .squad > .squad__table .squad-name img { display: none; }
  .squad > .squad__table .squad-name small { display: none; }
  .squad > .squad__table .squad-name small.is-injured { display: inline; font-size: 0.6rem; }
  .squad > .squad__table tr.is-starter .squad-name { color: var(--cyan); }
  .squad > .squad__table .lvl { min-width: 0; padding: 0 3px; font-size: 0.66rem; line-height: 1.25; border-radius: 6px; }
  .squad > .squad__table .squad-sell { box-sizing: border-box; width: 24px; min-width: 0; height: 18px; min-height: 0; padding: 0; font-size: 0; line-height: 1; border-width: 0; border-radius: 6px; box-shadow: 0 2px 0 #5a0d1d; }
  .squad > .squad__table .squad-sell::before { content: '💸'; font-size: 0.8rem; }
}
@media (orientation: portrait) and (max-width: 820px) and (max-height: 800px) {
  .squad > .squad__table .squad-table td { height: 19px; }
  .squad > .squad__table .squad-sell { height: 16px; }
  .squad > .squad__table .squad-table { font-size: 0.66rem; }
  .squad > .squad__table .squad-face { font-size: 12px; }
}

/* ---------- Tácticas en móvil vertical: el botón ⚙️ Tácticas va en la barra de arriba ----------
   Sin la pestaña lateral, el campo ocupa todo el ancho; el menú se abre como una hoja por encima y se cierra con ✕ o tocando fuera. */
@media (orientation: portrait) and (max-width: 820px) {
  .tactics { padding: 6px; }
  .drawer__tab { display: none; }
  .drawer { top: 6px; bottom: 6px; right: 0; width: min(340px, 90%); transform: translateX(110%); border-radius: 16px 0 0 16px; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.5); }
  .drawer.is-open { transform: none; }
  .chip--tactics { display: inline-flex; flex: none; cursor: pointer; border: 0; color: #fff; background: linear-gradient(180deg, var(--pink), var(--purple)); font-family: var(--font-display); }
  .drawer__close { display: grid; place-items: center; position: absolute; top: 8px; right: 8px; z-index: 1; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #ffffff22; color: #fff; font-size: 16px; cursor: pointer; }
  .drawer__body { position: relative; padding-top: 12px; }
  .tactics__bar .chip { padding: 0.2em 0.55em; font-size: 0.72rem; white-space: nowrap; }
}

/* ---------- Liga en móvil vertical: todo cabe a lo ancho, sin desplazarse en horizontal ----------
   La cabecera y los filtros se reparten en varias líneas; las tablas se ajustan al ancho y el nombre del equipo se recorta
   con puntos suspensivos (se quita el distintivo "IA" y las columnas menos importantes). */
@media (orientation: portrait) and (max-width: 820px) {
  .league { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; padding: 6px; gap: 6px; }
  .league > * { min-width: 0; }
  .league__head { flex-wrap: wrap; gap: 6px; }
  .league__title { flex: 1 1 0; min-width: 0; }
  .league__title h2 { flex-wrap: wrap; gap: 4px; font-size: 1.1rem; line-height: 1.1; }
  .league__title h2 .tag { font-size: 0.62rem; padding: 1px 7px; }
  .league__title .muted { font-size: 0.7rem; }
  .league__nav { flex: none; width: 36px; height: 36px; }
  .league__legend { flex: 1 1 100%; flex-wrap: wrap; gap: 4px; }
  .league__legend .zone { padding: 2px 8px; font-size: 0.66rem; }
  .league__bar { flex-wrap: wrap; gap: 6px; }
  .league__bar .tabs { flex: 1 1 100%; }
  .league__bar .tabs .tab { flex: 1; padding-left: 4px; padding-right: 4px; }
  .group-picker { flex: 1 1 100%; min-width: 0; }
  .group-picker select { flex: 1; min-width: 0; }
  .group-picker .btn { flex: none; padding: 4px 8px; font-size: 0.72rem; }
  .group-picker .league__nav { width: 34px; height: 34px; }

  .league__table { overflow-x: hidden; }
  .standings { table-layout: fixed; width: 100%; }
  .standings th { padding: 6px 1px; font-size: 0.6rem; }
  .standings td { padding: 6px 1px; font-size: 0.78rem; }
  .standings .team-col { width: auto; max-width: none; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; }
  .standings .team-col .badge, .standings .team-col .kind-badge, .standings .team-col [class*='badge'] { display: none; }
  .standings th:first-child, .standings td:first-child { width: 28px; }
  .standings .pts { font-size: 0.95rem; }
  .standings th:nth-child(n+3), .standings td:nth-child(n+3) { width: 24px; }
  .standings th:last-child, .standings td:last-child { width: 30px; }
  .league__side section { padding: 8px; }
  .fixtures li { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px; padding: 5px 6px; font-size: 0.74rem; }
  .fx-team { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fx-team .team-link, .fx-team a { overflow: hidden; text-overflow: ellipsis; }
}
@media (orientation: portrait) and (max-width: 820px) {
  /* Ranking de campeones: # · equipo · grupo · DG · Pts · destino (PJ y GF se ocultan) */
  .standings--champions th:nth-child(3), .standings--champions td:nth-child(3) { width: 42px; }
  .standings--champions th:nth-child(n+4), .standings--champions td:nth-child(n+4) { width: 30px; }
  .standings--champions th:last-child, .standings--champions td:last-child { width: 36px; }
  .standings .link-btn { min-height: 0; padding: 1px 6px; font-size: 0.72rem; border-radius: 8px; }
  .standings--champions .zone { padding: 1px 4px; font-size: 0.7rem; }
}

/* ---------- Buscar en móvil vertical: cada jugador en subasta es una tarjeta de dos líneas, sin desplazamiento horizontal ----------
   Línea 1: jugador · posición · edad · nivel · potencial. Línea 2: puja actual · tiempo restante · Ver · Pujar. */
@media (orientation: portrait) and (max-width: 820px) {
  .search { padding: 6px; gap: 6px; overflow-x: hidden; }
  .search > * { min-width: 0; }
  .search-card { padding: 8px 10px; }
  .search-filters { gap: 8px 12px; }
  .search-filters__group { flex: 1 1 calc(50% - 6px); min-width: 0; font-size: 0.78rem; gap: 3px; }
  .search-filters__group:first-child { flex-basis: 100%; }
  .search-filters__group input[type='range'], .search-filters__group select { width: 100%; min-width: 0; }
  .search-filters .tab { flex: 1; padding: 4px 6px; font-size: 0.78rem; }
  .search-results { overflow-x: hidden; padding: 6px; }
  .search-table, .search-table tbody { display: block; width: 100%; }
  .search-table thead { display: none; }
  .search-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
    grid-template-areas: 'name pos age lvl pot' 'bid bid time act act';
    align-items: center;
    gap: 2px 8px;
    padding: 6px 4px;
    border-top: 1px solid #ffffff14;
  }
  .search-table tr:first-child { border-top: 0; }
  .search-table td { padding: 0; border: 0; white-space: nowrap; font-size: 0.78rem; }
  .search-table td:nth-child(1) { grid-area: name; text-align: left; min-width: 0; overflow: hidden; }
  .search-table td:nth-child(2) { grid-area: pos; }
  .search-table td:nth-child(3) { grid-area: age; }
  .search-table td:nth-child(3)::after { content: ' a'; color: var(--muted); font-size: 0.66rem; }
  .search-table td:nth-child(4) { grid-area: lvl; }
  .search-table td:nth-child(5) { grid-area: pot; color: var(--yellow); }
  .search-table td:nth-child(6) { grid-area: bid; text-align: left; }
  .search-table td:nth-child(6) small { display: inline; margin-left: 6px; }
  .search-table td:nth-child(7) { grid-area: time; }
  .search-table td:nth-child(7)::before { content: '⏱ '; }
  .search-table td:nth-child(8) { grid-area: act; display: flex; gap: 4px; justify-content: flex-end; }
  .search-table .squad-name { gap: 4px; }
  .search-table .squad-name > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.8rem; }
  .search-table .squad-name small { font-size: 0.62rem; overflow: hidden; text-overflow: ellipsis; }
  .search-table .squad-face { font-size: 20px; }
  .search-table .lvl { min-width: 0; padding: 0 5px; font-size: 0.74rem; }
  .search-table .search-price { font-size: 0.95rem; }
  .search-table .search-actions .btn { min-height: 0; padding: 0.3em 0.6em; font-size: 0.72rem; }
}
@media (orientation: portrait) and (max-width: 820px) {
  .search .cal__head { gap: 8px; }
  .search .cal__head h2 { font-size: 1.15rem; }
  .search-filters__group select { height: 30px; }
  .search-filters .tab { min-height: 0; }
}

/* Plantilla en móvil vertical: cada jugador ocupa dos líneas; la segunda, con el salario y el precio de venta bien visibles */
@media (orientation: portrait) and (max-width: 820px) {
  .squad > .squad__table .squad-table tr.squad-sellrow { display: table-row; }
  .squad-table .squad-sellrow td { display: table-cell; height: auto; padding: 0 8px 3px 5px; text-align: left; border-top: 0; overflow: hidden; }
  .squad-sellrow__in { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .squad-sellrow__wage { color: var(--muted); font-size: 0.66rem; white-space: nowrap; }
  .squad-sell2 { min-height: 0; padding: 2px 10px; font-size: 0.74rem; line-height: 1.3; border-radius: 8px; white-space: nowrap; }
  .squad > .squad__table tr:not(.squad-sellrow) td { border-bottom: 0; }
  .squad > .squad__table tr.squad-sellrow td { border-bottom: 1px solid #ffffff10; }
  .squad-table tbody tr:not(.squad-sellrow) td { border-top: 1px solid #ffffff10; }
}