/* La barra inferior del móvil y las píldoras de sección (tanda 704). La
   inyecta js/barra-movil.js solo en el móvil; el porqué, en SCHEMA.md. */
@media (max-width: 900px) {
  /* El cajón de la hamburguesa ya no hace falta: todo lo suyo está en la
     barra y en las píldoras. */
  html.con-barra-movil .nav-toggle {
    display: none;
  }
  /* La barra en sí (.bm) vive en style.css desde la 753: va en el HTML. */
  /* El hueco de 76 px bajo la barra de arriba es de escritorio (704c:
     en un iPhone era media pantalla vacía antes del título). */
  html.con-barra-movil .page-content {
    padding-top: var(--e-md);
  }
  /* LA BURBUJA DE LA SECCIÓN (704d): la misma píldora que Mi colección
     (452), flotando encima de la barra, con icono y palabra, deslizable. */
  /* El sitio de la burbuja, en TODA página con barra (981): la burbuja la
     pone el JavaScript y su hueco llegaba con ella, empujando el final de la
     página 64 px en cada carga. Donde no hay burbuja sobra un poco de aire. */
  html.con-burbuja-movil body,
  html.con-barra-movil body:has(> .bm) {
    padding-bottom: calc(72px + 64px + env(safe-area-inset-bottom));
  }
  .bm-burbuja {
    display: flex;
    position: fixed;
    z-index: 90;
    bottom: calc(72px + env(safe-area-inset-bottom) + var(--e-xs));
    inset-inline: 0;
    width: max-content;
    max-width: calc(100% - var(--e-lg) * 2);
    margin: 0 auto;
    padding: 2px;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--white);
    box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .bm-burbuja::-webkit-scrollbar {
    display: none;
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .bm-burbuja {
      background: color-mix(in srgb, var(--white) 82%, transparent);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
  }
  /* Baja (893): solo iconos, y la activa con su palabra al lado. */
  .bm-burbuja-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--e-xs);
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--e-sm);
    border-radius: var(--radius-pill);
    color: var(--text-mid);
    font-size: var(--t-2xs);
    font-weight: 600;
    text-decoration: none;
    scroll-snap-align: start;
  }
  /* La palabra de cada hueco: su propia clase, porque la de Mi colección
     (`mc-menu-texto`) vive en una hoja que las demás páginas no cargan. */
  .bm-texto {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--t-2xs);
    line-height: 1;
  }
  .bm-burbuja-item svg {
    width: 22px;
    height: 22px;
  }
  /* La palabra de las que no están activas se esconde para la vista, no
     para quien escucha (la lección de la 565). */
  .bm-burbuja-item:not([aria-current='page']) .bm-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .bm-burbuja-item[aria-current='page'] {
    background: var(--navy-solid);
    color: var(--blanco-fijo);
  }
  /* Lo que sigue por un lado se insinúa con un degradado en ese lado. */
  .desborda-derecha {
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  }
  .desborda-izquierda {
    mask-image: linear-gradient(90deg, transparent, #000 40px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px);
  }
  .desborda-izquierda.desborda-derecha {
    mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  }
  /* En Mi colección, las otras páginas de Cartas van al final de SU
     burbuja, tras una raya, y la burbuja pasa a deslizarse. */
  .mc-pestanias.bm-con-ajenas {
    overflow-x: auto;
    scrollbar-width: none;
    max-width: calc(100% - var(--e-lg) * 2);
  }
  .mc-pestanias.bm-con-ajenas::-webkit-scrollbar {
    display: none;
  }
  .mc-pestanias .mc-pestania {
    flex: 0 0 auto;
  }
  .bm-ajena {
    text-decoration: none;
  }
  .bm-ajena:first-of-type {
    margin-left: var(--e-xs);
    border-left: 1px solid var(--border);
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  }
  /* La burbuja de Mi colección (452) sigue flotando —PINGU: «ya teniendo
     un menú fijo abajo, la burbuja justo encima»—, subida lo que mide la
     barra, y la página reserva sitio para las dos. */
  .mc-pestanias {
    bottom: calc(80px + env(safe-area-inset-bottom) + var(--e-sm));
  }
  .mc-pagina {
    padding-bottom: calc(80px + 88px + env(safe-area-inset-bottom));
  }
}

/* ── 705: los diálogos son HOJAS DESDE ABAJO en el móvil ──
   El panel de filtros era un cajón lateral y la ficha de una carta un
   diálogo centrado: los dos de escritorio. En el móvil se usan desde
   abajo, donde está el pulgar (PINGU: «mira Dex»). La bandeja de añadir
   (`.mc-bandeja`) ya nacía así. */
@media (max-width: 900px) {
  .mc-panel-filtros,
  .mc-editor,
  .mc-dlg-adorno {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 92dvh;
    margin: auto 0 0;
    border: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    overscroll-behavior: contain;
  }
  .mc-editor {
    padding: var(--e-md) var(--e-md) calc(var(--e-md) + env(safe-area-inset-bottom));
  }
  /* Una hoja no se desliza de lado (PINGU: «con el dedo se va para los
     lados; debería ser inmóvil»): la fila de mando de la ficha salía 12 px
     por cada lado —sus márgenes negativos son los del relleno de
     escritorio— y el desplazamiento horizontal del diálogo hacía el resto. */
  .mc-panel-filtros,
  .mc-editor,
  .mc-dlg-adorno,
  .mc-bandeja {
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }
  .mc-editor .mc-ficha-mando {
    margin-inline: calc(-1 * var(--e-md));
  }
  .mc-bandeja,
  .mc-panel-filtros,
  .mc-dlg-adorno {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ── 706: la expansión, compacta ──
   Antes de ver una carta pasabas por la miga, el título, el buscador,
   los chips y un carrusel de estadísticas con aire de escritorio. */
@media (max-width: 900px) {
  /* La miga volvió al móvil en la 856, como botón «‹ Expansiones»: la
     burbuja dice dónde estás, pero no es la salida. */
  .mc-album-barra {
    margin-bottom: var(--e-xs);
  }
  .mc-diapos {
    gap: var(--e-sm);
    margin-bottom: var(--e-xs);
  }
  .mc-diapo {
    padding: var(--e-sm) var(--e-md);
    gap: 2px;
  }
  .mc-puntos {
    margin: var(--e-xs) 0 var(--e-sm);
  }
  /* El «+» tapaba un cuarto del dibujo de cada carta: abajo a la
     izquierda (la cuenta va abajo a la derecha y «×2» arriba a la
     izquierda), blanco translúcido con el signo azul, y el mismo tamaño. */
  .mc-mas {
    top: auto;
    right: auto;
    bottom: var(--e-xs);
    left: var(--e-xs);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--white) 88%, transparent);
    color: var(--navy);
    box-shadow: none;
  }
}

/* ── 707: la ficha de una carta, con las acciones a mano ──
   Las acciones iban bajo la foto, que en el móvil es la
   primera pantalla entera: había que bajar para encontrarlas. Van en una
   barra fija encima de la barra de secciones, y la foto se queda más
   pequeña para que nombre, foto y datos entren a la vez. */
@media (max-width: 900px) {
  html.con-barra-movil .carta-scan {
    max-width: 200px;
  }
  html.con-barra-movil .carta-scan .carta-acciones {
    position: fixed;
    z-index: 94;
    inset-inline: var(--e-md);
    bottom: calc(80px + env(safe-area-inset-bottom) + var(--e-sm));
    margin: 0;
    padding: var(--e-xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--white) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-md);
  }
  html.con-barra-movil .carta-cuerpo {
    padding-bottom: 88px;
  }
}

/* ── 709: al bajar, las barras se apartan ──
   La de arriba sube, la de abajo baja y la burbuja (o la de Mi colección,
   o la de acciones de /carta) baja a ocupar su sitio. */
@media (max-width: 900px) {
  html.con-barra-movil .navbar,
  .bm,
  .bm-burbuja,
  .mc-pestanias,
  html.con-barra-movil .carta-scan .carta-acciones {
    transition: transform 0.3s var(--ease);
  }
  html.bm-escondidas .navbar {
    transform: translateY(-100%);
  }
  html.bm-escondidas .bm {
    transform: translateY(100%);
  }
  html.bm-escondidas .mc-pestanias,
  html.bm-escondidas.con-barra-movil .carta-scan .carta-acciones {
    transform: translateY(calc(80px + var(--e-xs)));
  }
  html.bm-escondidas .bm-burbuja {
    transform: translateY(calc(72px + var(--e-xs)));
  }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  html.con-barra-movil .navbar,
  .bm,
  .bm-burbuja,
  .mc-pestanias,
  html.con-barra-movil .carta-scan .carta-acciones {
    transition: none;
  }
}

/* ── 717: la barra de arriba, limpia, y la hoja «Tú» (SCHEMA 717) ──
   Logo, una pastilla que se lee como un buscador y el avatar con su número.
   Los iconos siguen en la página (sus chapas cuentan), sin verse. El tema
   va a la hoja con cuenta; sin ella se queda en la barra a todo ancho (su
   gemelo era del cajón, que aquí no existe). */
@media (max-width: 900px) {
  html.con-barra-movil .nav-right > .nav-search-wrap,
  html.con-barra-movil .nav-right:has(#navUserBtn) > #navThemeToggle,
  html.con-barra-movil .nav-right > .nav-bell-wrap,
  html.con-barra-movil .nav-tema-menu {
    display: none;
  }
  html.con-barra-movil .nav-right:not(:has(#navUserBtn)) > #navThemeToggle {
    display: flex;
  }
  .bm-pastilla {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--e-sm);
    min-width: 0;
    min-height: 44px;
    margin: 0 var(--e-sm);
    padding: 0 var(--e-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg);
    color: var(--text-mid);
    font-size: var(--t-sm);
    text-decoration: none;
  }
  .bm-pastilla span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html.con-barra-movil .nav-inner {
    gap: 0;
  }
  html.con-barra-movil .nav-logo,
  html.con-barra-movil .nav-right {
    flex-shrink: 0;
  }
  #navUserBtn {
    position: relative;
  }
  .bm-punto {
    position: absolute;
    top: -4px;
    right: -4px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--e-xs);
    border: 2px solid var(--white);
    border-radius: var(--radius-pill);
    background: var(--danger-solid);
    color: var(--blanco-fijo);
    font-size: var(--t-2xs);
    font-weight: 800;
    line-height: 1;
  }
  /* La hoja: el desplegable de siempre, desde abajo y a lo ancho. */
  html.con-barra-movil #navUserDropdown:not(.hidden) {
    position: fixed;
    z-index: 1;
    inset: auto 0 0;
    width: auto;
    max-height: 86dvh;
    margin: 0;
    padding-bottom: calc(var(--e-md) + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -10px 40px rgb(0 0 0 / 22%);
  }
  .bm-velo {
    display: none;
  }
  html.bm-tu-abierta .bm-velo {
    display: block;
    position: fixed;
    /* Por debajo de la barra de arriba (100), donde vive la hoja, y por
       encima de la de abajo (95) y de la burbuja (90). */
    z-index: 99;
    inset: 0;
    background: rgb(10 20 30 / 45%);
  }
  /* La hoja vive DENTRO de la barra de arriba, y un `backdrop-filter` o un
     `transform` en la barra la convierten en la caja de lo que va fijo:
     «abajo del todo» sería el pie de la barra. Con la hoja abierta, fuera. */
  html.bm-tu-abierta .navbar {
    transform: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--white);
  }
}

/* ── 732: instalar PokeDoc y tirar para refrescar (SCHEMA 732) ── */
@media (max-width: 900px) {
  /* 753: la hoja del iPhone (desde abajo, con velo) y la tarjeta de
     Android (encima de la barra). Por encima de la barra (95). */
  /* La banda de instalar (892): una línea encima del contenido. */
  .bm-instalar-banda {
    display: flex;
    align-items: center;
    gap: var(--e-xs);
    margin: 0 0 var(--e-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--ice);
    color: var(--navy);
  }
  .bm-instalar-banda-abrir {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--e-sm);
    min-height: 44px;
    padding: 0 var(--e-sm);
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: var(--t-sm);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .bm-instalar-banda-abrir img { border-radius: 6px; }
  .bm-instalar-banda-abrir span { flex: 1; }
  .bm-instalar-banda-no {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: none;
    color: var(--text-mid);
    cursor: pointer;
  }
  .bm-instalar-velo {
    position: fixed;
    inset: 0;
    z-index: 101;
    background: rgb(10 20 30 / 45%);
  }
  .bm-instalar {
    position: fixed;
    z-index: 102;
    border: 1px solid var(--border);
    background: var(--white);
    box-shadow: var(--shadow-lg);
  }
  .bm-instalar-hoja {
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: var(--e-sm);
    padding: var(--e-sm) var(--e-md) calc(var(--e-md) + env(safe-area-inset-bottom));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .bm-instalar-asa {
    align-self: center;
    width: 40px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--border-strong);
  }
  .bm-instalar-cabeza {
    display: flex;
    align-items: center;
    gap: var(--e-md);
  }
  .bm-instalar-cabeza img { flex: none; border-radius: var(--radius-md); }
  .bm-instalar-cabeza div { display: flex; flex-direction: column; gap: var(--e-xs); }
  .bm-instalar-cabeza b { font-size: var(--t-lg); }
  .bm-instalar-cabeza span,
  .bm-instalar-nota { color: var(--text-mid); font-size: var(--t-sm); }
  .bm-instalar-pasos {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .bm-instalar-pasos li {
    display: flex;
    align-items: center;
    gap: var(--e-md);
    min-height: 48px;
    font-size: var(--t-sm);
  }
  .bm-instalar-pasos li + li { border-top: 1px solid var(--border); }
  .bm-instalar-pasos svg { flex: none; color: var(--navy); }
  .bm-instalar-n {
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--navy-solid);
    color: var(--blanco-fijo);
    font-size: var(--t-xs);
    font-weight: 700;
  }
  .bm-instalar-botones { display: flex; gap: var(--e-sm); }
  .bm-instalar-botones > * { flex: 1 1 0; min-height: 44px; }
  .bm-instalar-nota { margin: 0; text-align: center; font-size: var(--t-xs); }
  .bm-instalar-tarjeta {
    right: var(--e-md);
    bottom: calc(96px + env(safe-area-inset-bottom));
    left: var(--e-md);
    display: flex;
    align-items: center;
    gap: var(--e-md);
    padding: var(--e-md);
    border-radius: var(--radius-lg);
  }
  .bm-instalar-tarjeta img { flex: none; border-radius: var(--radius-md); }
  .bm-instalar-texto {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    font-size: var(--t-sm);
  }
  .bm-instalar-texto > span { color: var(--text-mid); font-size: var(--t-xs); }
  .bm-instalar-no {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--text-mid);
    cursor: pointer;
  }
  .bm-refrescar {
    position: fixed;
    top: calc(80px + env(safe-area-inset-top));
    left: calc(50% - 20px);
    z-index: 96;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: var(--shadow-md);
    color: var(--navy);
    font-size: var(--t-lg);
    opacity: var(--tirado, 0);
    transform: rotate(calc(var(--tirado, 0) * 270deg));
    pointer-events: none;
  }
  .bm-bola-aro {
    stroke-dasharray: 1;
    stroke-dashoffset: calc(1 - var(--tirado, 0));
  }
  .bm-bola-tapa {
    opacity: calc(var(--tirado, 0) * 0.35);
  }
  .bm-refrescar.lista .bm-bola-aro,
  .bm-refrescar.recargando .bm-bola-aro {
    stroke-dashoffset: 0;
  }
  .bm-refrescar.lista .bm-bola-tapa,
  .bm-refrescar.recargando .bm-bola-tapa {
    opacity: 1;
  }
  .bm-refrescar.lista,
  .bm-refrescar.recargando {
    background: var(--navy-solid);
    color: var(--blanco-fijo);
  }
  .bm-refrescar.recargando {
    opacity: 1;
    animation: bm-girar 0.8s linear infinite;
  }
}

@keyframes bm-girar {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bm-refrescar.recargando {
    animation: none;
  }
}


/* LAS MIGAS, EN EL MÓVIL (742 → 857). La 742 las dejó en antetítulo —un
   paso en versalitas—, y PINGU, con el botón de la 856 delante: «en móvil
   con eso mejora muchísimo». Así que el paso de arriba (el último enlace)
   es ahora el botón «‹ Padre»: 44 de alto, borde y flecha, igual que el de
   Mi colección. Si el único enlace es «Inicio», nada. La carta se queda en
   antetítulo: su cabecera ya lleva el ‹ redondo (716). Las migas siguen
   enteras en el HTML para Google. */
@media (max-width: 900px) {
  html.con-barra-movil .carta-migas {
    gap: 0;
    margin: 0 0 var(--e-xs);
    color: var(--text-mid);
    font-size: var(--t-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  html.con-barra-movil .carta-migas > :not(a:last-of-type) {
    display: none;
  }
  html.con-barra-movil .carta-migas:not(:has(a:nth-of-type(2))) {
    display: none;
  }
  html.con-barra-movil .carta-migas > a:last-of-type {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -12px 0;
    color: var(--text-mid);
    font-weight: 700;
  }

  html.con-barra-movil :is(.breadcrumb, .foro-migas) {
    gap: 0;
    margin: 0 0 var(--e-sm);
  }
  html.con-barra-movil :is(.breadcrumb, .foro-migas) > :not(a:last-of-type) {
    display: none;
  }
  html.con-barra-movil :is(.breadcrumb, .foro-migas):has(> a:first-of-type:last-of-type:is([href="/"], [href="/index.html"], [href="index.html"])) {
    display: none;
  }
  html.con-barra-movil :is(.breadcrumb, .foro-migas) > a:last-of-type {
    display: inline-flex;
    align-items: center;
    gap: var(--e-xs);
    min-height: 44px;
    padding: 0 var(--e-md) 0 var(--e-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--text);
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
  }
  html.con-barra-movil :is(.breadcrumb, .foro-migas) > a:last-of-type::before {
    content: '';
    width: 8px;
    height: 8px;
    margin-left: 4px;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(45deg);
  }
}

/* 776: iOS deja el visor movido al cerrar el teclado; lo fijo se mueve lo que falta (js/barra-movil.js, SCHEMA 776). */
@media (max-width: 900px) {
  html.ios-desfase .bm,
  html.ios-desfase .bm-burbuja,
  html.ios-desfase .mc-pestanias,
  html.ios-desfase.con-barra-movil .carta-scan .carta-acciones,
  html.ios-desfase .volver-arriba,
  html.ios-desfase .bm-instalar-tarjeta,
  html.ios-desfase.con-barra-movil #navUserDropdown:not(.hidden) {
    translate: 0 var(--ios-abajo);
  }
  html.ios-desfase.con-barra-movil .navbar,
  html.ios-desfase .bm-refrescar,
  html.ios-desfase .toast-container,
  html.ios-desfase .progreso-lectura {
    translate: 0 var(--ios-arriba);
  }
}

/* 780 (PA19): lo de detrás de la barra y la burbuja se lee «debajo», no partido (SCHEMA 780). */
@media (max-width: 900px) {
  html.con-barra-movil body::after {
    content: '';
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 89;
    /* Siempre de 160 (981): crecía de 96 a 160 al llegar la burbuja y eso
       también es un salto. Sin burbuja, lo de arriba es transparente. */
    height: calc(160px + env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, transparent calc(100% - 96px - env(safe-area-inset-bottom)), var(--bg) calc(100% - 28px - env(safe-area-inset-bottom)));
    pointer-events: none;
    transition: transform 0.3s var(--ease);
  }
  html.con-burbuja-movil body::after,
  html.con-barra-movil:has(.mc-pestanias) body::after {
    background: linear-gradient(to bottom, transparent, var(--bg) 72%);
  }
  html.bm-escondidas.con-barra-movil body::after {
    transform: translateY(84px);
  }
  html.ios-desfase.con-barra-movil body::after {
    translate: 0 var(--ios-abajo);
  }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  html.con-barra-movil body::after { transition: none; }
}

/* 780 (PA20): el pie del móvil, en filas de enlaces y no en tres columnas apiladas. */
@media (max-width: 900px) {
  .pie-rejilla { grid-template-columns: 1fr; gap: var(--e-md); }
  .pie-lema { display: none; }
  .pie-col { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-xs); }
  .pie-col .pie-titulo { flex: 1 0 100%; margin: 0; }
  .pie-col a,
  .pie-redes a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 var(--e-sm); }
  .pie-redes { margin: 0; gap: 0; }
}
/* En la app instalada, la barra de abajo ya lleva a todo: del pie, lo legal. */
@media (max-width: 900px) and (display-mode: standalone) {
  .pie-rejilla { display: none; }
}

/* ── 893: cabeceras de una línea en las páginas de lista (SCHEMA 893) ──
   Título en una línea y más pequeño, sin el párrafo, y el botón principal
   a la derecha del título. Lo lleva cada página con `cab-lista`. */
@media (max-width: 900px) {
  .cab-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-xs) var(--e-sm);
    margin: 0 0 var(--e-sm);
    padding: var(--e-xs) 0;
  }
  .cab-lista > div:first-child,
  .cab-lista > h1 {
    flex: 1 1 auto;
    min-width: 0;
  }
  .cab-lista h1 {
    margin: 0;
    font-size: var(--t-xl);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cab-lema,
  .cab-largo {
    display: none;
  }
  .cab-lista .btn-primary,
  .cab-lista .btn-secondary {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 var(--e-md);
    font-size: var(--t-sm);
    white-space: nowrap;
  }
}