/* ═══════════════════════════════════════════════════════════════
   HANS · Móvil (4e · «el pulgar manda»)
   Arriba solo el título. Los cuatro destinos abajo; Dictar en
   píldora sobre el pulgar — el único objeto con esa forma en todo el
   producto. Todo objeto tocable mide 44 px o más.
   ═══════════════════════════════════════════════════════════════ */

.pestanas-inferiores { display: none; }
.acciones-pulgar { display: none; }

@media (max-width: 700px) {

  /* El riel y las acciones de documento se retiran: los destinos
     bajan a la barra de pestañas. */
  .riel { display: none; }
  .superior .gh { display: none; }

  .superior { padding: 8px 18px 10px; }
  .superior .tit { font-size: 17px; }

  /* La regleta se vuelve carrusel: celdas de 44 px deslizables. */
  .formato { min-height: 46px; }
  .formato .fb { min-width: 44px; height: 45px; }
  .formato .fmenu { height: 45px; }

  .escritorio { padding: 16px 12px 12px; }
  .hoja { padding: 20px 20px 26px; }
  .hoja p { font-size: 16.5px; line-height: 1.75; }
  .hoja .t { font-size: 24px; }

  /* Dictar sobre el pulgar. */
  .acciones-pulgar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    background: var(--papel);
    border-top: 1px solid var(--linea-fina);
  }
  .acciones-pulgar .atajo {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 46px; height: 46px;
    border: 0; background: none; border-radius: 0;
    color: var(--tinta-media);
    font-family: var(--serif); font-size: 15px;
    transition: color var(--rapido) var(--llega);
  }
  .acciones-pulgar .atajo:active,
  .acciones-pulgar .atajo[aria-pressed="true"] { color: var(--tinta); }
  .acciones-pulgar .atajo.mono { font-family: var(--mono); font-size: 14px; }
  .acciones-pulgar .hueco { flex: 1; }

  /* Cuatro destinos, alcanzables con el pulgar. */
  .pestanas-inferiores {
    position: sticky; bottom: 0; z-index: 40;
    display: flex; background: var(--papel-hondo);
    border-top: 1px solid var(--linea);
    padding: 6px 4px 12px;
  }
  .pestanas-inferiores b {
    flex: 1; min-height: 48px;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px;
    color: var(--tinta-media); cursor: pointer;
    font-family: var(--mono); font-size: 9.5px; font-weight: 400;
    letter-spacing: .08em; text-transform: uppercase;
  }
  .pestanas-inferiores b svg {
    width: 19px; height: 19px; stroke: currentColor; fill: none;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  }
  .pestanas-inferiores b[aria-current] {
    color: var(--tinta); font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--tinta);
  }
  [data-piel="noche"] .pestanas-inferiores b[aria-current] {
    box-shadow: inset 0 -2px 0 var(--noche-lampara);
  }

  /* Reacomodos de pantalla ancha. */
  .inicio { flex-direction: column; }
  .panel-pieza { width: auto; flex: none; border-left: 0; border-top: 1px solid var(--linea); }
  .cajetines { grid-template-columns: 1fr 1fr; }
  .fichas { grid-template-columns: 1fr; }
  .galerada { grid-template-columns: 1fr; }
  .galerada .lectura { border-right: 0; border-bottom: 1px solid var(--linea-fina); }
  .mesa-doble { grid-template-columns: 1fr; }
  .lectura-mesa { flex-direction: column; }
  .rueda { width: auto; flex: none; border-right: 0; border-bottom: 1px solid var(--linea); max-height: 200px; }
  .chat { flex-direction: column; }
  .previa { width: auto; flex: none; border-left: 0; border-top: 1px solid var(--linea); }
  .dicho-hans { max-width: 100%; }
  .dicho-yo { max-width: 86%; }
  .prefs-grupo { grid-template-columns: 1fr; }
  .entrada-alto { padding: 32px 24px 30px; }
  .entrada-bajo { padding: 22px 24px 30px; }
  .letra { flex-wrap: wrap; }
  .letra .n, .letra .anio { min-width: 0; }
  .oraculo-cabeza { padding: 20px 18px 0; }
  .catalogo { padding: 0 18px 26px; }
}