/*
 * Capa «app» para celulares (≤ 720 px): se carga ÚLTIMA en el sitio y en el panel (layouts public.php / admin.php),
 * así sus reglas ganan sin pelear con el orden de los demás archivos. Lo que hace:
 *  - menos texto: sin introducciones, descripciones de sección ni ayudas largas (siguen en la computadora);
 *  - todo más compacto: títulos, encabezados, tarjetas y espacios;
 *  - diálogos como hojas que suben desde abajo (con su tirador), como en cualquier app;
 *  - toques sin demora ni zoom por doble toque.
 * La revisión pantalla por pantalla está más abajo, por sección.
 */
@media (max-width: 720px) {
  html { touch-action: manipulation; }   /* sin la espera del doble toque */

  /* ---------- tipografía y espacios ---------- */
  h1 { font-size: clamp(1.45rem, 6.5vw, 1.8rem); line-height: 1.15; }
  h2 { font-size: clamp(1.15rem, 5vw, 1.4rem); }
  .section { padding-block: 1.6rem; }
  .container { padding-inline: 16px; }

  /* ---------- menos texto ---------- */
  /* panel: el párrafo que explica la sección y «¿Para qué sirve…?» */
  .page-title > div > p, .page-title > p, .page-help, .page-title .page-help { display: none !important; }
  /* sitio: las bajadas largas de los encabezados */
  .hero-lead, .chp-lead, .sec-lead, .tn-hero-lead, .rk-hero .chp-lead { display: none !important; }
  .hint { font-size: .8rem; }

  /* ---------- títulos de pantalla (panel) ---------- */
  .page-title { gap: .6rem; margin-bottom: .9rem; }
  .page-title h1 { font-size: 1.45rem; }

  /* ---------- diálogos: hojas que suben desde abajo ---------- */
  dialog.modal:not(.tset):not(.is-full):not(.le-modal) {
    margin: auto 0 0; width: 100vw; max-width: 100vw; max-height: 92vh;
    border-radius: 16px 16px 0 0; border-bottom: 0;
  }
  dialog.modal:not(.tset):not(.is-full):not(.le-modal)[open] { animation: sheet-up .24s cubic-bezier(.2, .8, .2, 1); }
  dialog.modal:not(.tset):not(.is-full):not(.le-modal) > :first-child { position: relative; }
  dialog.modal:not(.tset):not(.is-full):not(.le-modal) .modal-head { padding-top: 1.3rem; }
  dialog.modal:not(.tset):not(.is-full):not(.le-modal) .modal-head::before {
    content: ""; position: absolute; top: .45rem; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--border-strong);
  }
  dialog.modal .modal-foot, dialog.modal .cc-modal-foot, dialog.modal .form-actions { padding-bottom: calc(.8rem + env(safe-area-inset-bottom)); }
  dialog::backdrop { background: rgb(0 0 0 / .45); }

  /* ---------- botones: alto cómodo para el dedo ---------- */
  .btn { min-height: 42px; }
  .btn-sm { min-height: 36px; }
}

/* =====================================================================
   Sitio (pantallas del jugador)
   ===================================================================== */
@media (max-width: 720px) {
  /* encabezados de sección de la portada: solo el título (sin «— TORNEOS» arriba ni la bajada abajo) */
  .kicker:has(+ h2), h2 + .prose.muted { display: none; }
  .section h2 { margin-bottom: .6rem; }
  .hero { padding-block: 1.6rem 1.8rem; }
  .hero h1 { margin-bottom: 1rem; }
  .hero-actions { gap: .5rem; }
  .hero-actions .btn-lg { min-height: 46px; font-size: 1rem; }

  /* tarjetas de torneo (portada, torneos, club): lo justo para decidir si tocarla */
  .tf-card.is-big .tf-cover, .tf-cover { height: 120px; }
  .tf-body { padding: .75rem .85rem .85rem; gap: .35rem; }
  .tf-card.is-big h3, .tf-body h3 { font-size: 1.12rem; }
  .tf-kicker { gap: .3rem; font-size: .8rem; }
  .tf-kicker .chip, .tf-kicker .badge, .tf-kicker > a, .tf-kicker > span { font-size: .74rem; padding: .1rem .45rem; min-height: 0; }
  .tf-meta { font-size: .82rem; gap: .15rem .8rem; }
  .tf-meta > span:nth-child(n+3) { display: none; }   /* fecha y lugar alcanzan; premios, precio y cupos están adentro */
  .tf-sub { display: none; }
  .tf-actions { padding-top: .2rem; }
  .tf-actions .btn { flex: 1; justify-content: center; min-height: 40px; }

  /* tarjetas de torneo de la lista /torneos */
  .tn-card-top { height: 96px; }

  /* actividades y clases (cal-card) */
  .cal-card-top { min-height: 0; height: 110px; }
  .cal-card-body { padding: .75rem .85rem; gap: .3rem; }
  .cal-card .cal-meta { font-size: .82rem; }
  .cal-card-foot { padding: 0 .85rem .85rem; }

  /* página de un torneo: menos cosas antes de las pestañas */
  .tn-t-crumb-m, .tn-t-hero .breadcrumb { display: none; }
  .tn-t-hero:has(.tn-champ-box) .tn-done-banner { display: none; }   /* el campeón ya está en su recuadro */
  .tn-t-hero { padding-bottom: 1rem; }
  .tn-t-hero-grid { gap: .8rem; }
  .tn-t-cta { padding: .85rem; }
  .tn-champ-box { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .1rem .7rem; text-align: left; padding: .2rem 0 .6rem; }
  .tn-champ-box .bk-trophy { grid-row: span 2; width: 44px; height: 44px; }
  .tn-champ-box small { grid-column: 2; }
  .tn-champ-box strong { grid-column: 2; font-size: 1.1rem; }
  .tn-champ-box .tn-pod-go { grid-column: 3; grid-row: 1 / span 2; }
  .tn-facts { gap: .3rem .6rem; margin: .4rem 0; }
  .tn-facts dd { font-size: 1.15rem; }
  /* compartir y reportar: dos íconos en una fila */
  .tn-t-cta .tn-share-btn, .tn-t-cta .tn-report-btn { display: inline-flex; width: auto; }
  .tn-t-cta .tn-report-btn > span { display: none; }
  .tn-t-cta :is(.tn-share-btn, .tn-report-btn) { min-height: 40px; }
  .tn-spband-in { padding-block: .6rem; gap: .4rem; }
  .tn-spband img { max-height: 34px; }
  .tn-spband small, .tn-spband .kicker { font-size: .66rem; }
  /* condiciones de inscripción: más chicas */
  .su-facts, .signup-facts { font-size: .8rem; }

  /* «Mi cuenta» (el dueño): cabecera compacta, el contenido de cada pestaña arriba */
  .pp.acc .pp-tagline, .pp.acc .pp-hero .pp-chips, .pp.acc .pp-showcase { display: none !important; }
  .pp.acc .pp-hero-in { padding-top: 1rem; gap: .2rem .9rem; }
  .pp.acc .pp-avatar { width: 3.8rem; height: 3.8rem; font-size: 1.3rem; }
  .pp.acc .pp-name { font-size: 1.35rem; }
  .pp.acc .pp-handle { font-size: .82rem; }
  .pp.acc .pp-hero-side { margin-top: .3rem; }
  .pp.acc .pp-lvlbadge .lvl { padding: .35rem .6rem; }
  .pp.acc .pp-lvlbadge .lvl-n { width: 2rem; height: 2.2rem; font-size: .9rem; }
  /* perfiles de otros: las etiquetas en una sola fila que se desliza */
  .pp:not(.acc) .pp-hero .pp-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .pp:not(.acc) .pp-hero .pp-chips > * { flex: none; }
  .pp:not(.acc) .pp-tagline { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* desafíos: nombre, qué hay que hacer (2 renglones), avance y experiencia */
  .chp-sec-h p.muted { display: none; }
  .chl { padding: .75rem; gap: .7rem; }
  .chl-goal { font-size: .82rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .chl-meta small:not(.chl-time) { display: none; }   /* «se renueva cada semana»: ya lo dice el título de la sección */
  .chl-unlocks > small { display: none; }
  .chl-art svg, .chl-art img { width: 48px; height: 48px; }
  .chp-clocks span, .chp-clocks a { font-size: .8rem; padding: .3rem .6rem; }

  /* rankings: tarjetas más bajas */
  .rk-card .rk-tags { font-size: .74rem; }
  .rk-empty p { font-size: .86rem; }
}

/* =====================================================================
   Formularios (sitio y panel): ayuda en contexto
   ===================================================================== */
@media (max-width: 720px) {
  /* la explicación de cada campo aparece mientras se lo está editando (los errores se ven siempre) */
  form .field:not(:focus-within) .hint:not(.is-always) { display: none; }
  form :not(:focus-within) > .hint:not(.field .hint):not(.is-always) { display: none; }   /* ayudas sueltas (interruptores, casillas) */
  form .field { margin-bottom: .8rem; }
  form .field > label { margin-bottom: .25rem; }
}

/* =====================================================================
   Panel (vistas internas)
   ===================================================================== */
@media (max-width: 720px) {
  /* recuadros más compactos */
  .panel-head { padding: .7rem .85rem; }
  .panel-body { padding: .85rem; }
  .panel + .panel, .panel + .card { margin-top: .8rem; }

  /* lista de torneos: una fila corta por torneo */
  .tn-status-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: calc(100% + 32px); margin-inline: -16px; padding-inline: 16px; border-radius: 0; }
  .tn-status-filter::-webkit-scrollbar { display: none; }
  .tn-status-filter > * { flex: none; }
  .tn-arow { padding: .75rem .8rem; gap: .5rem; }
  .tn-arow-main { gap: .65rem; align-items: flex-start; }
  .tn-arow-badge img, .tn-arow-badge svg, .tn-arow-badge > * { width: 36px; height: 36px; }
  .tn-arow-top { flex-wrap: nowrap; overflow: hidden; }
  .tn-arow-top > * { flex: none; font-size: .72rem; }
  .tn-arow-top .tn-rk-badge:not(.is-on) { display: none; }   /* «amistoso · no suma»: lo normal, no hace falta decirlo en la lista */
  .tn-arow-text > strong { font-size: 1.05rem; }
  .tn-arow .tn-admin-meta { font-size: .8rem; }
  .tn-arow .tn-admin-meta > span:nth-child(n+3) { display: none; }
  .tn-arow-stats { gap: .6rem; }
  .tn-arow-stats strong { font-size: 1.1rem; }
  .tn-arow-actions .btn { min-height: 38px; }

  /* nuevo torneo: las plantillas en una tira que se desliza (nombre e ícono) */
  .tn-templates { display: flex; overflow-x: auto; scrollbar-width: none; gap: .5rem; margin-inline: -16px; padding: 0 16px .2rem; }
  .tn-templates::-webkit-scrollbar { display: none; }
  .tn-template { flex: none; width: auto; padding: .55rem .8rem; }
  .tn-template small { display: none; }

  /* roles: nombre, etiqueta y cuántas personas (los permisos, en la ficha del rol) */
  .role-card > p.muted, .role-card .role-can, .role-card .role-line { display: none; }

  /* migas de pan: con el botón «← Volver» de la pantalla alcanzan; quedan solo como título corto */
  .admin-topbar .crumbs { font-size: .85rem; }
}

/* =====================================================================
   Últimos ajustes de la revisión
   ===================================================================== */
@media (max-width: 720px) {
  .kicker:has(+ h1) { display: none; }   /* «— CLUB», «— SETGO»: el título ya dice qué es */
  /* insignias: de a tres y más bajas */
  body .bdg-grid, body .bdg-grid.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
  body .bdg-grid .bdg-card { padding: .55rem .35rem .5rem; gap: .2rem; }
  body .bdg-grid .bdg-card strong { font-size: .78rem; line-height: 1.15; }
  body .bdg-grid .bdg-card small, body .bdg-grid .bdg-card .bdg-rar { font-size: 11px; }
  body .bdg-card svg, body .bdg-card .bdg-art { max-width: 52px; max-height: 52px; }
}

/* contenido que se cortaba a la derecha (encontrado con el escáner de recortes) */
@media (max-width: 720px) {
  .page-title > * { min-width: 0; max-width: 100%; }   /* ficha de un ranking: el título se estiraba con sus datos */
  .tn-rank-facts-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr)); }
  .page-title .actions { flex-wrap: wrap; }   /* si los botones no entran en una fila, bajan */
  .page-title .actions > .btn-primary { flex: 1 1 auto; }
  .auth-card, .join-card { box-sizing: border-box; max-width: 100%; }
}
@media (max-width: 720px) {
  .auth-wrap { padding-inline: 16px; box-sizing: border-box; grid-template-columns: minmax(0, 1fr); }   /* sin minmax la columna se estiraba al contenido */
  .auth-wrap > .auth-card { min-width: 0; }
  .auth-card :is(.btn, a, strong) { overflow-wrap: anywhere; }
  .auth-wrap > .auth-card { width: 100%; max-width: 440px; }
}
@media (max-width: 720px) {
  .tn-facts dd { font-size: 1.05rem; line-height: 1.2; overflow-wrap: anywhere; }
}
/* encabezado del sitio en celulares angostos: con la campanita no entraba todo (el ☰ quedaba cortado).
   El tema ya está dentro del menú ☰ y «Mi cuenta» queda como ícono. */
@media (max-width: 480px) {
  .site-header .header-tools > [data-theme-toggle] { display: none; }
  .site-header .header-tools > .btn-primary > span { display: none; }
  .site-header .header-tools > .btn-primary { width: 40px; padding: 0; justify-content: center; }
}

/* =====================================================================
   KPIs compactos en el celular (panel y sitio). De a dos o de a tres por fila, el número y su nombre siempre a la
   vista y la bajada corta. Si al final sobra una tarjeta, se estira para no dejar un hueco al lado.
   ===================================================================== */
@media (max-width: 720px) {
  /* panel: Inicio, Moderación, Seguridad, Proyectos, ficha de un espacio y de una persona */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
  .kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi { padding: .6rem .7rem; border-radius: var(--radius); }
  .kpi small { font-size: .74rem; gap: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kpi small .icon { width: 13px; height: 13px; }
  .kpi strong { font-size: 1.4rem; margin-top: .05rem; }
  .kpi span { font-size: .74rem; }
  .kpi.us-handle small { padding-right: 1.2rem; }   /* la manija para reordenar no pisa el nombre */

  /* Análisis */
  .anl-kpis { gap: .5rem; }
  .anl-kpi { padding: .6rem .65rem; gap: .25rem; border-radius: var(--radius); }
  .anl-kpi-ic { width: 1.55rem; height: 1.55rem; }
  .anl-kpi-ic .icon { width: .85rem; height: .85rem; }
  .anl-kpi-l { font-size: .74rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .anl-kpi strong { font-size: 1.3rem; }

  /* Logros */
  .bdg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .bdg-kpi { padding: .6rem .7rem; gap: .55rem; }
  .bdg-kpi > .icon { width: 1.85rem; height: 1.85rem; padding: .4rem; }
  .bdg-kpi strong { font-size: 1.3rem; }
  .bdg-kpi small { display: block; font-size: .74rem; line-height: 1.2; }

  /* Pagos */
  .pay-kpis { gap: .5rem; }
  .pay-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pay-kpi { padding: .6rem .7rem; border-radius: var(--radius); }
  .pay-kpi small, .pay-kpi > span:last-child { font-size: .74rem; }
  .pay-kpi strong { font-size: 1.3rem; }

  /* moderación de una persona */
  .mod-tab-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .mod-tab-kpis > div { padding: .55rem .7rem; }
  .mod-tab-kpis strong { font-size: 1.3rem; }
  .mod-tab-kpis small { font-size: .74rem; }

  /* De a tres (proyectos y perfil del jugador): grilla de 6 partes; cada tarjeta ocupa 2. Si en la última fila quedan
     dos, ocupan 3 cada una; si queda una, toda la fila; y si son 4 en total, van de a dos. */
  :is(.pm-stats, .pp-kpis.pp-kpis-x) { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .45rem; }
  :is(.pm-stats, .pp-kpis.pp-kpis-x) > * { grid-column: span 2; }
  :is(.pm-stats, .pp-kpis.pp-kpis-x) > :nth-child(3n+1):nth-last-child(2),
  :is(.pm-stats, .pp-kpis.pp-kpis-x) > :nth-child(3n+1):nth-last-child(2) + *,
  :is(.pm-stats, .pp-kpis.pp-kpis-x) > :first-child:nth-last-child(4),
  :is(.pm-stats, .pp-kpis.pp-kpis-x) > :first-child:nth-last-child(4) ~ * { grid-column: span 3; }
  :is(.pm-stats, .pp-kpis.pp-kpis-x) > :nth-child(3n+1):last-child { grid-column: 1 / -1; }

  /* Proyectos: resumen del espacio */
  .pm-stat { padding: .55rem .6rem; gap: .1rem; }
  .pm-stat small { font-size: .72rem; gap: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pm-stat small .icon { width: 12px; height: 12px; flex: none; }
  button.pm-stat small { padding-right: .9rem; }
  .pm-stat strong { font-size: 1.3rem; }
  .pm-stat > span { font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pm-stat .pm-progress { margin-top: .3rem; height: 4px; }
  .pm-stat-chev { top: .5rem; right: .4rem; width: 12px; height: 12px; }
  .pm-kpi-more { padding: .65rem .7rem; }

  /* Proyectos: tarjetas de los tableros (espacio y ficha en el panel), más bajas; las columnas en una fila que se desliza */
  .pm-boards { gap: .6rem; }
  .pm-board-card { padding: .75rem .85rem .6rem; gap: .5rem; }
  .pm-board-top .pm-dot { width: 1.75rem; height: 1.75rem; }
  .pm-board-link { font-size: 1rem; }
  .pm-colmix { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -.85rem; padding-inline: .85rem; }
  .pm-colmix::-webkit-scrollbar { display: none; }
  .pm-colmix li { flex: none; font-size: .74rem; }
  .pm-board-nums { font-size: .8rem; gap: .2rem .7rem; }
  .pm-board-foot { padding-top: .5rem; }
  .pm-board-new button { min-height: 4.5rem; }

  /* perfil del jugador: números más bajos */
  .pp-kpi { padding: .5rem .35rem .45rem; }
  .pp-kpi strong, .pp-kpi b { font-size: 1.3rem; }
  .pp-kpi > span { font-size: .66rem; letter-spacing: .03em; }
  .pp-kpi-chev { top: .4rem; right: .4rem; width: .75rem; height: .75rem; }
  .pp-kpis:not(.pp-kpis-x) { gap: .45rem; }
  .pp-kpis:not(.pp-kpis-x) > div { padding: .55rem .4rem; }
  .pp-kpis:not(.pp-kpis-x) strong { font-size: 1.35rem; }
  .pp-kpis:not(.pp-kpis-x) span { font-size: .68rem; }

  /* En vivo y torneo */
  .ltv-kpis { gap: .45rem; }
  .tn-auto-kpis li { padding: .55rem .7rem; }
  .tn-auto-kpis strong { font-size: 1.25rem; }
  .tn-auto-kpis span { font-size: .68rem; }
}