/* Sporty como app instalada (PWA). Todo lo de este archivo cuelga de `html.pwa` (la clase la pone un script cuando la
   página corre en modo «standalone»): en la web de escritorio y en el navegador no cambia nada. */
.pwa-barra, .pwa-mas, .pwa-quien, .pwa-pie { display: none; }

@media (max-width: 991.98px) {
  /* Mi perfil de jugador en la app: primero editar el perfil; sin «Mi rendimiento»; «Mis deportes» y «Mis clubes» al final.
     Las dos columnas se vuelven una sola pila para poder ordenarlas. */
  html.pwa .perfil-jugador { display: flex; flex-direction: column; gap: 1rem; margin: 0; }
  html.pwa .perfil-jugador > [class*="col-"] { display: contents; }
  html.pwa .perfil-jugador .card { margin-top: 0 !important; width: 100%; }
  html.pwa .perfil-jugador #card-resumen { order: 1; }
  html.pwa .perfil-jugador #card-editar { order: 2; }
  html.pwa .perfil-jugador #card-clave { order: 3; }
  html.pwa .perfil-jugador #deportes { order: 4; }
  html.pwa .perfil-jugador #card-clubes { order: 5; }
  html.pwa .perfil-jugador #card-campeonatos { order: 6; }
  html.pwa .perfil-jugador #card-rendimiento { display: none; }
  html.pwa .perfil-jugador #card-resumen hr, html.pwa .perfil-jugador #card-resumen .text-muted.small.mb-1,
  html.pwa .perfil-jugador #card-resumen .d-flex.flex-wrap, html.pwa .perfil-jugador #card-resumen .text-start.small { display: none; }  /* ya están al final */

  /* Las escarapelas son de Tours: en la app salen en Más → Tours y no dentro de las pantallas de Clubes. */
  html.pwa #escarapelas { display: none !important; }
  /* Lista de campeonatos: buscador + botón «Filtros»; los combos van plegados y, abiertos, en dos columnas. */
  html.pwa .cf-toggle { display: inline-flex; flex: none; }
  html.pwa .cf-combos { display: none; flex: 1 1 100%; width: 100%; }
  html.pwa .cf-combos.abierto { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  html.pwa .cf-combos .tr-filtro { display: grid; gap: .2rem; width: 100%; min-width: 0; }
  html.pwa .cf-combos .tr-filtro .tr-input { min-width: 0; width: 100%; }
  html.pwa .tr-filtros-fila:has(.cf-toggle) { padding: .6rem .7rem; gap: .5rem; }
  html.pwa .tr-filtros-fila:has(.cf-toggle) > .tr-filtro:first-of-type { flex: 1 1 0; min-width: 0; }
  html.pwa .tr-filtros-fila:has(.cf-toggle) > .tr-filtro:first-of-type label { display: none; }

  /* Listas públicas en la app: buscar por nombre y ordenar por cercanía; sin combos ni botones de ciudad (eso es de la web). */
  html.pwa .sin-combos-pwa select, html.pwa .chips-ciudades { display: none !important; }

  /* Con la barra de abajo (solo con sesión) el contenido deja espacio de sobra: lo último nunca queda tapado y se puede
     hacer scroll hasta que se vea completo. Sin sesión no hay barra y la página queda como siempre. */
  /* `html, body { height: 100% }` hace que el relleno de abajo se pierda cuando el contenido es más alto que la pantalla (el
     relleno de una caja de alto fijo no cuenta en el scroll): con alto automático el espacio de la barra sí cuenta. */
  html.pwa:has(.pwa-barra), html.pwa body:has(.pwa-barra) { height: auto; min-height: 100%; }
  html.pwa body:has(.pwa-barra) { padding-bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px)); }
  html.pwa body:has(.pwa-barra) main { padding-bottom: 2rem !important; }
  html.pwa body:has(.pwa-barra) .tr-body, html.pwa body:has(.pwa-barra) .tr > :last-child { scroll-margin-bottom: 6rem; }

  /* --- encabezado: el logo y quién eres --- */
  /* En la app no hay hamburguesa arriba, para nadie: la barra de abajo y «Más» reemplazan al menú. El personal del club ve las
     secciones de su menú de gestión dentro de «Más». */
  html.pwa .navbar .navbar-collapse, html.pwa .navbar .navbar-toggler { display: none !important; }
  html.pwa .pwa-mas-admin { display: contents; }
  html.pwa .navbar > .container-fluid { flex-wrap: nowrap; }
  html.pwa .pj-quien, html.pwa .navbar > .container-fluid > form.d-lg-none { display: none !important; }   /* el chip y «salir» de antes */
  html.pwa .pwa-quien {
    display: flex; align-items: center; gap: .5rem; margin-left: auto; min-width: 0; max-width: calc(100% - 7.5rem); padding: .25rem .7rem .25rem .3rem;
    border: 1px solid var(--border, #ddd); border-radius: 999px; background: var(--surface-strong, #fff);
    color: var(--text, #111); text-decoration: none; font-weight: 700; font-size: .85rem;
  }
  html.pwa .pwa-quien .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent, #333); color: #fff; display: grid; place-items: center; font-size: .78rem; flex: none; }
  html.pwa .pwa-quien .nombre { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.pwa .pwa-quien--entrar { padding: .45rem .9rem; background: var(--hm-cta, #cc3a12); border-color: transparent; color: #fff; }

  /* --- barra de abajo: una sola para todos --- */
  html.pwa .pj-tabbar, html.pwa .cm-tabs, html.pwa .cm-more, html.pwa .tr.cm-tabs, html.pwa .tr.cm-more { display: none !important; }
  /* En la app no hay pie de empresa (para eso está la web): solo dos enlaces legales, y solo sin sesión. */
  html.pwa .site-footer { display: none !important; }
  html.pwa .pwa-pie { display: flex; justify-content: center; align-items: center; padding: .8rem 1rem calc(.9rem + env(safe-area-inset-bottom, 0px)); font-size: .78rem; color: var(--text-dim, #666); }
  html.pwa .pwa-pie a + a { margin-left: .8rem; padding-left: .8rem; border-left: 1px solid var(--border, #d8d4c8); }     /* una línea fina separa, en vez de puntos */
  html.pwa .pwa-pie a { color: inherit; text-decoration: none; padding: .35rem 0; }        /* área táctil cómoda */
  html.pwa .pwa-pie a i { margin-right: .15rem; }
  html.pwa .pwa-barra {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    background: var(--surface-strong, #fff); border-top: 1px solid var(--border, #ddd);
    padding: .25rem .25rem max(.2rem, calc(env(safe-area-inset-bottom, 0px) - 1.3rem)); transform: translateZ(0);
  }
  html.pwa .pwa-barra > a, html.pwa .pwa-barra > button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; position: relative; min-width: 0;
    min-height: 2.8rem; padding: .15rem 0; border: 0; background: none; border-radius: 12px; cursor: pointer;
    color: var(--text-dim, #666); font: 700 .62rem/1.1 "Inter", system-ui, sans-serif; text-decoration: none;
  }
  html.pwa .pwa-barra i { font-size: 1.5rem; line-height: 1; }
  html.pwa .pwa-barra span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.pwa .pwa-barra > a.on, html.pwa .pwa-barra > button.on { color: var(--text, #111); background: rgba(127, 127, 127, .14); }
  html.pwa .pwa-barra > a.on i { color: var(--hm-cta, var(--accent, #cc3a12)); }
  html.pwa .pwa-punto { position: absolute; top: .3rem; left: calc(50% + .5rem); width: .6rem; height: .6rem; border-radius: 50%; background: #ffd43b; border: 2px solid #fff; }

  /* --- «Más»: las opciones de cada módulo --- */
  html.pwa .pwa-mas { display: block; position: fixed; inset: 0; z-index: 1039; background: rgba(10, 20, 35, .45); }
  html.pwa .pwa-mas[hidden] { display: none; }
  html.pwa.pwa-mas-abierto { overflow: hidden; }
  html.pwa .pwa-mas { touch-action: none; overscroll-behavior: contain; }
  html.pwa .pwa-mas-hoja {
    position: absolute; left: 0; right: 0; bottom: var(--barra-h, 4rem); max-height: calc(100% - var(--barra-h, 4rem) - 5rem); overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: .35rem .4rem .45rem;
    background: var(--surface-strong, #fff); color: var(--text, #111); border: 2px solid var(--text, #111); border-bottom: 0; border-radius: 16px 16px 0 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .3rem;          /* compacto: las opciones van de a dos */
  }
  html.pwa .pwa-mas-seccion { grid-column: 1 / -1; padding: .55rem .5rem .15rem; font: 800 .64rem/1 "Inter", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim, #666); }
  html.pwa .pwa-mas-seccion:first-child { padding-top: .25rem; }
  html.pwa .pwa-mas-hoja a, html.pwa .pwa-mas-hoja button {
    display: flex; align-items: center; gap: .5rem; width: 100%; min-width: 0; min-height: 2.4rem; padding: .3rem .55rem; border: 0; background: none; border-radius: 9px;
    color: inherit; font: 600 .84rem/1.15 "Inter", system-ui, sans-serif; text-align: left; text-decoration: none; cursor: pointer;
  }
  html.pwa .pwa-mas-hoja a:active, html.pwa .pwa-mas-hoja button:active { background: rgba(127, 127, 127, .16); }
  html.pwa .pwa-mas-hoja i { flex: none; font-size: 1rem; color: var(--hm-cta, var(--accent, #cc3a12)); }
  html.pwa .pwa-mas-hoja em { margin-left: auto; font-style: normal; background: #ffd43b; color: #111; border-radius: 99px; padding: 0 .45rem; font-size: .7rem; }
  html.pwa .pwa-mas-hoja form { grid-column: 1 / -1; margin: .15rem 0 0; border-top: 1px solid var(--border, #ddd); padding-top: .15rem; }
}