/* Móvil (teléfonos): secciones en una barra abajo, como una app; cabecera compacta; catálogo como
   botón flotante; filas de filtros que se desplazan de lado en vez de apilarse; y objetivos táctiles
   de al menos 40 px. Va el último para poder ajustar lo de las demás hojas. */

.mob-only { display: none !important; }

@media (max-width: 700px) {
  :root { --bottom-nav: calc(60px + env(safe-area-inset-bottom)); }
  body { padding-bottom: var(--bottom-nav); }

  /* ---- Secciones: barra inferior fija ---- */
  .sections {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    order: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    height: var(--bottom-nav);
    margin: 0;
    padding: 0 6px env(safe-area-inset-bottom);
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .sections .mob-only { display: flex !important; }
  /* Iconos con su nombre; la activa, con el filete del acento arriba (las pestañas, al revés) */
  .sections a { flex-direction: column; justify-content: center; gap: 4px; height: 60px; padding: 0; font-size: var(--fs-xs); }
  .sections a span { display: inline !important; font-size: 11px !important; font-weight: 560; letter-spacing: .01em; }
  .sections a .i { width: 21px; height: 21px; }
  .sections a::after { top: 0; bottom: auto; left: 28%; right: 28%; border-radius: 0 0 2px 2px; }
  .sections a.active { color: var(--text); background: none; box-shadow: none; }
  .sections a.active .i { color: var(--accent-2); }
  .topbar .mesa-btn { display: none; }

  /* ---- Cabecera compacta ----
     Sin backdrop-filter: si no, la barra inferior y el botón flotante (position: fixed, hijos de la
     cabecera) se colocarían respecto a la cabecera y no respecto a la pantalla */
  .topbar { padding: 8px 12px; gap: 8px; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
  .logo-text { display: none; }
  .logo .k-mark { width: 24px; height: 24px; }
  .live-chip { order: 2; padding: 0 9px; }
  .live-chip .lc-t { display: none; }
  .top-kpis { height: 46px; }
  .tk { padding: 0 10px; }
  .tk-s { display: none !important; }
  .tk-v { font-size: 17px; }
  .tk-l { font-size: var(--fs-2xs); }
  .topbar-actions { gap: 2px; }
  .topbar-actions .btn .label { display: none; }
  /* Álbum: el nombre del binder se queda con la primera fila (solo comparte con el logo y la cuenta);
     el chip de los datos y el idioma bajan a la fila de las herramientas, al final */
  body[data-section="album"] .topbar-actions { order: 5; flex: 1 1 auto; width: auto; }
  body[data-section="album"] .topbar > :is(.live-chip, .lang-btn) { order: 6; }
  .binder-nav { flex: 1 1 0; }
  /* Fuera del álbum (Mis binders) solo lleva su botón: no encoge por debajo de él (si no, las
     herramientas de la sección se le montan encima) */
  body:not([data-section="album"]) .binder-nav { flex: none; }
  .binder-switch { gap: 7px; padding-right: 4px; }
  /* Si no cabe en una línea, en dos (solo trunca un nombre largo de verdad) */
  .binder-switch .nm { display: -webkit-box; font-size: 16px; line-height: 1.08; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  /* ---- Catálogo: botón flotante ---- */
  .catalog-toggle {
    position: fixed;
    right: 16px;
    bottom: calc(var(--bottom-nav) + 14px);
    z-index: 50;
    height: 48px;
    padding: 0 20px;
    border-radius: var(--r-lg);
    margin: 0;
    box-shadow: 0 14px 34px -6px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .3);
  }
  /* Lo último del álbum (el pie de la página, con su menú) no se queda debajo del botón flotante ni de
     la barra de abajo: el escenario llega hasta el borde de la pantalla, detrás de ella */
  .book-stage { padding-bottom: calc(var(--bottom-nav) + 84px); }
  .overview { padding-bottom: calc(var(--bottom-nav) + 84px); }

  /* ---- Barra del libro: vista y resaltado en una fila, páginas en otra ---- */
  .book-toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding: 10px 12px 0; }
  .book-toolbar #view-mode { grid-row: 1; grid-column: 1; }
  .book-toolbar #highlight { grid-row: 1; grid-column: 3; }
  .book-toolbar .pager { grid-row: 2; grid-column: 1 / -1; justify-self: center; }
  .book-toolbar #btn-add-page { display: none; }
  .book-toolbar #view-mode button { font-size: 0; gap: 0; }
  .book-toolbar #view-mode button .i { font-size: var(--fs-sm); }

  /* ---- Avisos por encima de la barra inferior ---- */
  .toasts { bottom: calc(var(--bottom-nav) + 12px); width: calc(100vw - 24px); }
  /* …salvo los que piden ir arriba (toast({ up })): bajo la barra, donde no tapan lo último de la página */
  .toasts.at-top { top: calc(var(--toast-top, var(--topbar-h)) + 8px); bottom: auto; }

  /* ---- Buscadores de las listas: a todo el ancho ---- */
  .panel .toolbar > .search-box { flex: 1 1 100%; }

  /* ---- Filas de filtros: se desplazan de lado ---- */
  .panel .toolbar .chips, .fam-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -15px; padding: 2px 15px; max-width: calc(100% + 30px); }
  .panel .toolbar .chips::-webkit-scrollbar { display: none; }
  .panel .toolbar .chips > * { flex: none; }
  .segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .segmented button { white-space: nowrap; flex: none; }

  /* ---- Radar: cada carta, una tarjeta (puntuación, carta, precio y estrella; debajo los datos clave) ---- */
  .radar-table thead { display: none; }
  .radar-table, .radar-table tbody { display: block; }
  .radar-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
  .radar-table td { padding: 0; border: 0; text-align: left; white-space: nowrap; }
  .radar-table td:nth-child(1) { order: 0; flex: none; }
  .radar-table td:nth-child(2) { order: 1; flex: 1 1 55%; min-width: 0; white-space: normal; }
  .radar-table td:nth-child(4) { order: 2; flex: none; font-size: var(--fs-lg); }
  .radar-table td:nth-child(10) { order: 3; flex: none; }
  .radar-table td:nth-child(3) { order: 4; margin-left: 48px; }
  .radar-table td:nth-child(5) { order: 5; }
  .radar-table td:nth-child(7) { order: 6; }
  .radar-table td:nth-child(8) { order: 7; }
  .radar-table td:nth-child(6), .radar-table td:nth-child(9) { display: none; }
  .radar-table td:nth-child(7):not(:empty)::before { content: var(--i18n-radarVs); /* el texto, de common.css (i18n.js) */ color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
  .radar-table td:nth-child(8)::before { content: var(--i18n-radarWeek); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
  .radar-table .td-card b { white-space: normal; }

  /* ---- Fichas laterales a pantalla completa ---- */
  .dialog.drawer { inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .pp-hero .kpi-v, .pp-hero b, .ppc-pnl { white-space: nowrap; }

  /* ---- Pie de los diálogos: los botones se reparten las filas (dos, no tres con uno suelto) ---- */
  .dlg-foot .spacer { display: none; }
  .dlg-foot > .btn { flex: 1 1 auto; }

  /* ---- Catálogo: los atajos en una fila que se desplaza (no tres filas que empujan los resultados) ---- */
  .catalog .presets, .am-browser .presets { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .catalog .presets > *, .am-browser .presets > * { flex: none; }
}
/* Con poco alto (el móvil, y más en horizontal) los filtros abiertos no tapan la barra de resultados */
@media (max-height: 700px) and (max-width: 900px) {
  .catalog > .catalog-head .filters { max-height: 30vh; max-height: 30dvh; }
}

/* La ficha en el móvil estrecho: la carta y su valor arriba, y las cifras a todo el ancho debajo (en la
   columna de al lado no caben); las etiquetas largas (una versión con nombre) se parten */
@media (max-width: 520px) {
  .pp-hero { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "art tags" "art value" "stats stats" "act act"; row-gap: 12px; align-items: start; }
  .pp-hero > .pp-art { grid-area: art; }
  .pp-hero > .pp-head { display: contents; }
  .pp-head > .pp-tags { grid-area: tags; }
  .pp-head > .pp-value { grid-area: value; }
  .pp-head > .pp-stats { grid-area: stats; }
  .pp-head > .pp-actions { grid-area: act; }
  .pp-tags .tag, .pp-tags .tagx { height: auto; min-height: 24px; padding-block: 3px; white-space: normal; }
  /* Las cifras de los diálogos (Progreso) con el ancho que hay */
  .stat-tile .val { font-size: 20px; overflow-wrap: anywhere; }
}

/* Teléfonos estrechos: las herramientas del álbum caben en una fila con sus dianas de 40 px (sin que el
   idioma baje solo a otra). La cuenta de faltantes va sobre su icono; por debajo de 360 px no cabe todo
   y el chip de los datos (solo un punto de estado) se queda fuera */
@media (max-width: 420px) {
  body[data-section="album"] .topbar { column-gap: 4px; }
  .topbar-actions { gap: 0; }
  .topbar-actions #btn-missing { position: relative; width: 40px; padding: 0; }
  .topbar-actions #btn-missing .badge-count { position: absolute; top: 0; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
  /* El selector de juego, más justo: el sitio es para el nombre del binder */
  .topbar .game-switch { padding: 0 5px 0 7px; gap: 3px; }
  .topbar .game-switch .gs-logo { max-width: 56px; }
}
/* Las herramientas de Portfolio y Mercado en el móvil estrecho: las secundarias (sin caja) se quedan con su
   icono; su nombre sigue ahí para el lector de pantalla y en su ayuda */
@media (max-width: 520px) {
  .section-tools .btn-ghost .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .section-tools .btn-ghost { padding: 0; width: 40px; justify-content: center; }
}
@media (max-width: 359px) {
  body[data-section="album"] .topbar > .live-chip { display: none; }
  /* «Mis binders» también está en el menú del nombre: su botón deja el sitio al nombre */
  body[data-section="album"] .binder-nav > .binders-btn { display: none; }
  .binder-switch .nm { font-size: 15px; }
}

/* Objetivos táctiles cómodos con el dedo: 40×40 px como poco en pantallas táctiles (móvil y tableta).
   Lo que se toca crece; lo que tiene que seguir pequeño a la vista (un icono sobre una carta) agranda
   solo su zona de toque con un ::after, sin pisar a sus vecinos */
@media (pointer: coarse) {
  :root { --control-h: 40px; --control-h-sm: 40px; }
  /* Las herramientas de la barra van con su icono (y a veces su nombre): no encogen por debajo de él */
  .topbar-actions .btn, .section-tools .btn { min-width: 40px; flex-shrink: 0; }
  .btn.icon-btn, .btn-ghost.icon-btn { min-width: 40px; min-height: 40px; }
  /* Sin min-width: un segmento con texto no encoge por debajo de él; los de solo icono llegan a 40 con su relleno */
  .segmented button { min-height: 40px; justify-content: center; }
  .book-toolbar .segmented button { min-width: 40px; }
  /* Los de un símbolo o dos (€ y $, 3M, 1A) sí, a 40 de ancho: no tienen texto que encoger */
  :is([data-seg="cur"], [data-seg="range"]) button { min-width: 40px; flex-shrink: 0; }
  .chip, .preset, .fchip, .pill { min-height: 40px; }
  .chip.color-chip { width: 40px; height: 40px; }
  .menu-item { min-height: 44px; }
  .live-chip, .lang-btn, .game-switch { min-height: 40px; min-width: 40px; }
  .pager .nav { width: 40px; height: 40px; }
  /* El deslizador de páginas: la pista sigue fina, la zona de toque mide 40 de alto */
  .scrubber { height: 40px; margin-block: -12px; }
  .thumb .info-btn { top: 7px; right: 7px; }
  .thumb .zoom-btn { top: 7px; }
  .thumb .info-btn::after, .page-menu-btn::after, .own-btn::after { content: ""; position: absolute; inset: -7px; }
  .pocket.owned .own-btn::after { inset: -12px; }
  .page-menu-btn { position: relative; opacity: 1; }
  .page-menu-btn::after { inset: -11px -9px; }
  /* Campos y desplegables de los filtros, a la altura de los controles */
  .fselects .select, .fprice-row .input { height: 40px; }
  .filters-toggle button, .pt-title, .gs-legal { min-height: 40px; }
  .watch-btn.big { width: 40px; height: 40px; }
  /* Lo que va dentro de una línea de texto (la ayuda «i», la casilla de la barra de resultados, los
     enlaces de las cifras de la ficha) no crece a la vista: crece su zona de toque */
  .info-dot, .result-bar .check, .pp-stats a, .link-btn, .set-link, .sh-public, .crumbs a, .row-link, .rate-btn, .sources-panel a, .panel-head .sub a { position: relative; }
  .info-dot::after { content: ""; position: absolute; inset: -11px; }
  .result-bar .check::after { content: ""; position: absolute; inset: -12px -4px; }
  .pp-stats a::after { content: ""; position: absolute; inset: -12px -6px; }
  .link-btn::after, .set-link::after, .sh-public::after, .crumbs a::after, .row-link::after, .sources-panel a::after, .panel-head .sub a::after { content: ""; position: absolute; inset: -12px -4px; }
  .rate-btn::after { content: ""; position: absolute; inset: -8px -2px; }
  /* Portfolio y Mercado: lo que se toca, a 40 px (también los campos, que llevan su altura propia) */
  .mk-back, .pc-chip, .miss-in, .cmp-check, .switch, .presale-box summary, .callout .btn, .pt-status .btn, .sub-actions .btn { min-height: 40px; }
  .mk-back, .pc-chip, .miss-in, .callout .btn, .pt-status .btn, .sub-actions .btn { height: auto; }
  .watch-btn { width: 40px; height: 40px; }
  .search-box .input, .mk-search .input, .wl-target .input, .input.sm, .select.sm, .amb-cost .input, .amb-cost .select.sm { height: 40px; }
  .mk-clear { width: 40px; height: 40px; right: 0; }
  .amb-qty { height: 40px; }
  .amb-qty button { width: 36px; height: 36px; }
  .dtable input[type="checkbox"] { width: 24px; height: 24px; }
}