/* 1199 en el móvil y la tableta.

   Este archivo lo enlaza base.html con media="(pointer: coarse)": solo se
   aplica cuando lo que manda es un dedo. Un ordenador con ratón o trackpad no
   lo cumple nunca, tampoco con la ventana estrecha, así que nada de lo que hay
   aquí puede cambiar cómo se ve 1199 en un ordenador. Es la regla: lo que sea
   solo del móvil o de la tableta va aquí (o en movil.js), no en style.css.

   Dentro, tres medidas:
   - todo lo táctil (lo de arriba del todo): tamaños de dedo, la letra de los
     campos a 16 px, lo que con ratón se veía al pasar por encima;
   - hasta 1023 px de ancho (el teléfono y la tableta de pie): la barra de
     abajo y el menú «Más» como hoja;
   - el teléfono (hasta 640 px, o tumbado: hasta 500 px de alto): las páginas
     reordenadas para una columna.
   La tableta tumbada (1024 px o más) se queda con la barra de arriba de
   siempre, con los tamaños de dedo. */

/* --- Todo lo táctil -------------------------------------------------------- */
/* iOS agranda la letra al tumbar el teléfono si no se le dice que no */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* el destello gris al tocar: cada botón ya dice que se ha tocado (:active) */
body { -webkit-tap-highlight-color: transparent; }
/* sin la espera del doble toque (que en iOS acerca la página) en lo que se pulsa */
a, button, summary, label, select, [role="button"], [role="tab"] { touch-action: manipulation; }

/* La letra de los campos, a 16 px como poco: con menos, el iPhone acerca la
   página al escribir y no vuelve a alejarla (en el árbol y el mapa ni siquiera
   se puede, el lienzo se queda los dedos). */
input, select, textarea { font-size: max(16px, 1rem); }
/* los que en style.css van más pequeños a propósito (los grandes, como el
   título de una entrada, se quedan como están) */
.tree-buscar input, :is(.tree-style, .tree-vista, .tree-rama), input.cdx-person-input, .featured-note input,
.gx-person select, .aj .aj-papel select, .pz-seccion select, .pz-sec-opciones select,
.filters :is(input, select), .sheet-form :is(input, select, textarea), .tree-add :is(input, select, textarea),
.ln-tools input, .place-query { font-size: max(16px, 1rem); }

/* Tamaño de dedo: 44 px como poco (lo que piden Apple y Google). */
button, .btn { min-height: 2.75rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.btn.small, button.small { min-height: 2.75rem; padding-left: 0.95rem; padding-right: 0.95rem; font-size: 0.9rem; }
/* «Quitar» y compañía: texto sin caja, pero con su sitio para el dedo */
button.linkish { min-height: 2.75rem; padding: 0 0.35rem; font-size: 0.9rem; }
/* casillas y botones redondos de 22 px, y toda la fila se puede tocar */
:is(input[type="checkbox"], input[type="radio"]) {
  width: 1.375rem !important;
  height: 1.375rem !important;
  flex: none;
  margin-top: 0;
  accent-color: var(--ink);
}
label.check { min-height: 2.75rem; gap: 0.7rem; font-size: 0.95rem; }
/* que se note el toque */
:is(button, .btn, .chip, .pill, summary):active { opacity: 0.72; }
/* el hover se queda pegado después de tocar: los botones vuelven a su color */
.btn.ghost:hover { background: transparent; }
button.linkish:hover { color: var(--muted); }

/* Sobre un lienzo que se mueve, el desenfoque se recalcula a cada fotograma y
   en un móvil se nota (el mapa y la cabecera del árbol ya lo quitaron). */
.tree-zoom, .tree-panel, .tree-rama-aviso, .stage-share > summary {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.tree-zoom button, .tree-fondo button { touch-action: manipulation; }
.tree-badges button { width: 2.75rem; height: 2.75rem; }
/* en la tableta el panel de la derecha crece con los botones de dedo: que no
   suba hasta «Compartir», arriba a la derecha */
body.tree-page .tree-stage > .tree-panel { max-height: calc(100% - 5.4rem); }
.tree-fondo button { width: 2.75rem; height: 2.75rem; font-size: 1.2rem; }
.tree-privacy-pick button { min-height: 2.75rem; }
.tree-buscar-lista button { min-height: 2.75rem; font-size: 1rem; }
.tree-opciones > summary { min-height: 2.75rem; display: flex; align-items: center; }

/* Lo que con ratón se veía al pasar por encima, a la vista con el dedo */
.con-raton { display: none !important; }
.con-dedo { display: revert !important; }
.solo-tactil:not([hidden]) { display: revert; }

/* Los textos largos (un enlace, un correo) se parten antes que salirse */
.prose, .bio, .post-body, .flash, .meta, .lede { overflow-wrap: break-word; }

/* Los campos de la cabecera de la barra (el menú plegado), de dedo */
body > header .nav-burger { width: 2.75rem; height: 2.75rem; }
header.nav-tight .nav-menu a,
header.nav-tight .nav-menu button,
header.nav-tight .nav-menu form { min-height: 2.75rem; font-size: 1rem; }
.nav-menu-theme { width: 2.75rem; height: 2.75rem; }
/* la tableta tumbada lleva la barra de arriba entera: enlaces con su sitio */
body > header:not(.nav-tight) .nav-menu > a,
body > header:not(.nav-tight) .nav-mine > a { padding: 0.6rem 0.15rem; }

/* Pestañas, chips y pastillas */
.product-tabs a { padding: 0.65rem 1rem; font-size: 0.95rem; }
.chip, .gx-chip, .tp-chips a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.pill span { min-height: 2.5rem; display: inline-flex; align-items: center; }
.compartir-menu > summary, .compartir-btn { min-height: 2.75rem; }

/* --- Hasta 1023 px: la barra de abajo y el menú «Más» --------------------- */
@media (max-width: 1023px) {
  :root { --barra-movil: calc(3.6rem + env(safe-area-inset-bottom)); }

  .barra-movil {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    height: var(--barra-movil);
    padding: 0 max(0.25rem, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(0.25rem, env(safe-area-inset-right));
    background: var(--paper);
    border-top: 1px solid var(--line);
    font-family: var(--font-ui);
  }
  .barra-movil > a, .barra-movil > button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0.35rem 0.1rem 0.3rem;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.1;
    text-decoration: none;
  }
  .barra-movil span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra-movil svg { display: block; width: 1.5rem; height: 1.5rem; padding: 0.15rem 0.9rem; box-sizing: content-box; border-radius: 999px; }
  .barra-movil :is([aria-current="page"], .es-aqui, .barra-mas[aria-expanded="true"]) { color: var(--ink); font-weight: 600; }
  .barra-movil :is([aria-current="page"], .es-aqui, .barra-mas[aria-expanded="true"]) svg { background: var(--soft-hover); }
  .barra-movil > :active { opacity: 0.6; }
  /* revista pinta la cabecera sobre la foto; la barra de abajo es la de siempre */

  /* la página deja sitio a la barra */
  body.con-barra { padding-bottom: var(--barra-movil); }
  body.con-barra.tree-page { height: 100dvh; max-height: 100dvh; }
  /* con el teclado abierto, la barra estorba: fuera mientras se escribe */
  body.con-barra:has(:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="button"]), textarea, select, [contenteditable="true"]):focus) .barra-movil { display: none; }
  body.con-barra:has(:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="button"]), textarea, select, [contenteditable="true"]):focus) { padding-bottom: 0; }

  /* Lo que flota abajo sube por encima de la barra */
  body.con-barra :is(.site-tools, .visita-barra, .tp-bar) { bottom: calc(var(--barra-movil) + 0.6rem); }
  body.con-barra.gx-js .gx-selbar, body.con-barra .gx-js .gx-selbar { bottom: calc(var(--barra-movil) + 0.6rem); }
  body.con-barra .alb-pickbar { bottom: var(--barra-movil); }
  body.con-barra .toasts.is-floating { bottom: calc(var(--barra-movil) + 0.75rem); }
  body.con-barra .pz-ver-movil { bottom: calc(var(--barra-movil) + 0.75rem); }
  /* la conversación se abre por la caja de contestar (mensajes.js): que su
     botón no quede debajo de la barra */
  body.con-barra :is(.msj-contestar, .msj-cerrada) { scroll-margin-bottom: calc(var(--barra-movil) + 1rem); }
  body.con-barra :is(.woot-widget-bubble, .woot--bubble-holder) { bottom: calc(var(--barra-movil) + 0.75rem) !important; }
  body.con-barra .woot-widget-holder { bottom: calc(var(--barra-movil) + 4.5rem) !important; max-height: calc(100dvh - var(--barra-movil) - 6rem) !important; }
  body.con-barra.tree-page :is(.woot-widget-bubble, .woot--bubble-holder) { display: none !important; }
  body.con-barra > .pie { padding-bottom: 1.5rem; }
  /* la visita guiada de un árbol vacío: la tarjeta, por encima de la barra,
     que es lo que señala (tutorial.js) */
  body.con-barra .tuto :is(.en-barra, .en-menu) { display: none; }
  body.con-barra .tuto .en-abajo { display: inline; }
  body.con-barra .tuto-donde svg { transform: rotate(180deg); }
  body.con-barra dialog.tuto[open] .tuto-carta { margin-bottom: calc(var(--barra-movil) + 0.5rem); max-height: calc(100% - 4.75rem - var(--barra-movil)); }

  /* La cabecera: el menú se abre con «Más», abajo; las tres rayas sobran.
     Sin desenfoque: con él, la hoja de «Más» (que vive dentro) se colocaría
     respecto a la cabecera y no a la pantalla. */
  body.con-barra > header { backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.con-barra > header .nav-burger { display: none !important; }

  /* «Más»: el mismo menú de siempre, como una hoja que sube desde la barra */
  body.con-barra > header.nav-tight .nav-menu {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: var(--barra-movil);
    z-index: 20;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: calc(100dvh - var(--barra-movil) - 4rem);
    padding: 0.35rem max(0.75rem, env(safe-area-inset-right)) 0.75rem max(0.75rem, env(safe-area-inset-left));
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -14px 40px var(--shadow-md);
    gap: 0;
  }
  /* el asa, para que se vea que es una hoja */
  body.con-barra > header.nav-tight .nav-menu::before {
    content: "";
    flex: none;
    align-self: center;
    width: 2.6rem;
    height: 0.3rem;
    margin: 0.2rem 0 0.55rem;
    border-radius: 999px;
    background: var(--edge);
  }
  /* el velo de detrás, que también cierra al tocarlo (cuenta como «fuera») */
  body.con-barra > header:has(#nav-menu:not([hidden]))::after {
    content: "";
    position: fixed;
    inset: 0 0 var(--barra-movil) 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.38);
  }
  body.con-barra:has(#nav-menu:not([hidden])), html:has(body.con-barra #nav-menu:not([hidden])) { overflow: hidden; }
  body.con-barra > header.nav-tight .nav-menu a,
  body.con-barra > header.nav-tight .nav-menu button,
  body.con-barra > header.nav-tight .nav-menu form {
    min-height: 2.8rem;
    padding: 0.45rem 0.7rem;
    gap: 0.85rem;
    border-radius: 12px;
    font-size: 1.02rem;
  }
  body.con-barra > header.nav-tight .nav-menu form button { min-height: 0; padding: 0; width: auto; font-size: 1.02rem; }
  /* lo que ya está en la barra no se repite en la hoja */
  .barra-arbol #nav-menu :is([data-seccion="sitio"], [data-seccion="galeria"], [data-seccion="arbol"], [data-seccion="personas"]),
  .barra-cuenta #nav-menu :is([data-seccion="inicio"], [data-seccion="buscar"], [data-seccion="arboles"], [data-seccion="cuenta"]) { display: none !important; }
  /* cada fila con su icono (los iconos solo existen aquí) */
  #nav-menu [data-seccion]::before {
    content: "";
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    background: currentColor;
    -webkit-mask: var(--ico) center / contain no-repeat;
    mask: var(--ico) center / contain no-repeat;
  }
  [data-seccion="entradas"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11l3 3v13H5z'/%3E%3Cpath d='M8.5 10h7M8.5 13.5h7M8.5 17h4'/%3E%3C/svg%3E"); }
  [data-seccion="mapa"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E"); }
  [data-seccion="cronologia"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Ccircle cx='12' cy='7' r='1.8'/%3E%3Ccircle cx='12' cy='16' r='1.8'/%3E%3Cpath d='M14 7h6M4 16h6'/%3E%3C/svg%3E"); }
  [data-seccion="ajustes"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h4M12 17h8'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='10' cy='17' r='2'/%3E%3C/svg%3E"); }
  [data-seccion="exportar"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7.5 10.5 12 15l4.5-4.5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E"); }
  [data-seccion="arboles"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-6'/%3E%3Cpath d='M12 3c3.5 0 6 2.6 6 5.8 0 3.3-2.7 6.2-6 6.2s-6-2.9-6-6.2C6 5.6 8.5 3 12 3z'/%3E%3C/svg%3E"); }
  [data-seccion="mensajes"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16v11H9l-5 4z'/%3E%3Cpath d='M8 9.5h8M8 12.5h5'/%3E%3C/svg%3E"); }
  [data-seccion="cuenta"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M5 20c.9-3.8 3.7-6 7-6s6.1 2.2 7 6'/%3E%3C/svg%3E"); }
  [data-seccion="inicio"], [data-seccion="sitio"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20H4z'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E"); }
  [data-seccion="buscar"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E"); }
  [data-seccion="ayuda"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18.5V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8.5a2 2 0 0 1-2 2H8.5z'/%3E%3Cpath d='M10 9a2 2 0 1 1 2.6 1.9c-.4.2-.6.5-.6.9v.2M12 14v.01'/%3E%3C/svg%3E"); }
  [data-seccion="instalar"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.5'/%3E%3Cpath d='M12 7v7M9.2 11.2 12 14l2.8-2.8M10.5 18.5h3'/%3E%3C/svg%3E"); }
  [data-seccion="salir"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4H6v16h8'/%3E%3Cpath d='M10 12h10M16.5 8.5 20 12l-3.5 3.5'/%3E%3C/svg%3E"); }
  [data-seccion="registro"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8.5' r='3.6'/%3E%3Cpath d='M3 20c.9-3.8 3.7-6 7-6 1.6 0 3 .5 4.2 1.4M18 14v6M15 17h6'/%3E%3C/svg%3E"); }
  [data-seccion="entrar"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4h8v16h-8'/%3E%3Cpath d='M4 12h10M10.5 8.5 14 12l-3.5 3.5'/%3E%3C/svg%3E"); }
  /* «Exportar» en la hoja: una fila más, no un botón negro */
  body.con-barra #nav-menu > a.nav-exportar { background: none; color: var(--text-strong); }
  body.con-barra #nav-menu > a.nav-exportar.here { background: var(--soft); color: var(--ink); }
  body.con-barra.theme-revista.site-home > header.nav-tight #nav-menu > a.nav-exportar { background: none; color: var(--text-strong); }
}

/* --- El teléfono ------------------------------------------------------------ */
@media (max-width: 640px), (max-height: 500px) {
  /* el margen de los lados: 16 px, lo de cualquier app */
  main { padding: 1.4rem 1rem 3rem; }
  body > header nav { padding: 0.3rem max(1rem, env(safe-area-inset-right)) 0.3rem max(1rem, env(safe-area-inset-left)); gap: 1rem; min-height: 3.4rem; align-items: center; }
  body > header .nav-tree { font-size: 1.15rem; max-width: none; }
  h1 { font-size: 2.2rem; overflow-wrap: break-word; }
  .product h1 { font-size: 2.35rem; overflow-wrap: break-word; hyphens: auto; }
  .lede { font-size: 1rem; }

  /* «Confirma tu email»: en una línea, con el botón al lado */
  .flash-warn { padding: 0.55rem 0.85rem; font-size: 0.92rem; align-items: center; margin-bottom: 1rem; }
  .flash-warn .aviso-largo { display: none; }
  .flash-warn .aviso-corto { display: inline; }
  .flash-warn button.linkish { min-height: 2.5rem; color: var(--ink); text-decoration: underline; }
  /* en el árbol y el mapa, ni eso: ahí cada píxel es del lienzo */
  body.tree-page .flash-warn { display: none; }

  /* Entrar sin cuenta: a la vista, sin abrir el menú */
  .nav-entrar-movil { display: inline-flex !important; align-items: center; min-height: 2.75rem; margin-left: auto; padding: 0 1rem; border: 1px solid var(--edge); border-radius: 999px; color: var(--ink) !important; font-size: 0.95rem; font-weight: 500; }
  header:has(.nav-entrar-movil) .nav-burger { margin-left: 0.4rem; }
}

/* --- La app instalada ------------------------------------------------------- */
/* volver atrás, en la cabecera (movil.js la enseña si hay adónde) */
body > header .nav-atras:not([hidden]) {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  min-height: 0;
  margin: 0 -0.5rem 0 -0.6rem;
  padding: 0;
  align-self: center;
  background: none;
  color: var(--ink);
  border-radius: 999px;
}
/* los dos pasos para añadirla en el iPhone */
dialog.instalar-pasos {
  width: min(26rem, calc(100% - 2rem));
  padding: 1.4rem 1.4rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 24px 70px var(--shadow-lg);
}
dialog.instalar-pasos::backdrop { background: rgba(0, 0, 0, 0.4); }
dialog.instalar-pasos h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; margin: 0 0 0.5rem; line-height: 1.15; }
dialog.instalar-pasos p { margin: 0 0 0.8rem; color: var(--text); }
dialog.instalar-pasos ol { margin: 0 0 1rem; padding-left: 1.3rem; line-height: 1.5; }
dialog.instalar-pasos li + li { margin-top: 0.4rem; }
dialog.instalar-pasos .btn { width: 100%; margin: 0; }

/* --- El árbol, en el teléfono -------------------------------------------------
   Pantalla completa: el buscador y «Vista» arriba, + − y «ver todo» abajo a la
   derecha, y la persona elegida en una hoja que sube desde abajo (arbol.js le
   pone el asa, la × y «Añadir familiar»). El panel de siempre deja de ser una
   caja: sus dos partes se colocan cada una en su sitio. */
@media (max-width: 640px), (max-height: 500px) {
  body.tree-page .tree-stage > .tree-panel {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  /* arriba: buscar y «Vista» */
  body.tree-page .tree-opciones {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    right: 0.6rem;
    z-index: 6;
    margin: 0;
    padding: 0;
    border: 0;
  }
  body.tree-page .tree-opciones > summary { display: none; }
  body.tree-page .tree-opciones > * + * { margin-top: 0; }
  body.tree-page .tree-arriba { display: flex; gap: 0.45rem; align-items: flex-start; }
  body.tree-page .tree-buscar { flex: 1; min-width: 0; position: relative; }
  body.tree-page .tree-buscar::before {
    content: "";
    position: absolute;
    left: 0.95rem;
    top: 0.9rem;
    width: 1.1rem;
    height: 1.1rem;
    background: var(--muted);
    pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  body.tree-page .tree-buscar input {
    height: 2.9rem;
    padding: 0 1rem 0 2.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    box-shadow: 0 6px 18px var(--shadow);
  }
  body.tree-page .tree-buscar-lista {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    z-index: 7;
    margin: 0;
    max-height: 50dvh;
    box-shadow: 0 14px 36px var(--shadow-md);
  }
  body.tree-page .tree-vista-boton {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 2.9rem;
    min-height: 0;
    margin: 0;
    padding: 0 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font-size: 0.95rem;
    box-shadow: 0 6px 18px var(--shadow);
  }
  body.tree-page .tree-vista-boton[aria-expanded="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
  /* «Vista» abierta: la barra se hace tarjeta y debajo salen la vista, el
     estilo, la profundidad del reloj y «Compartir» */
  body.tree-page .tree-opciones:not(.ver-vista) > :is(.tree-look, .tree-reloj, .stage-share) { display: none; }
  body.tree-page .tree-opciones.ver-vista {
    top: 0.35rem;
    left: 0.35rem;
    right: 0.35rem;
    padding: 0.25rem 0.25rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--card);
    box-shadow: 0 18px 44px var(--shadow-md);
  }
  body.tree-page .tree-opciones.ver-vista :is(.tree-buscar input, .tree-vista-boton) { box-shadow: none; }
  body.tree-page .tree-opciones > :is(.tree-look, .tree-reloj, .stage-share) { padding: 0 0.5rem; }
  body.tree-page .tree-opciones .tree-reloj { margin-top: 0.35rem; }
  body.tree-page .tree-opciones .tree-look { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.6rem; margin-top: 0.35rem; }
  body.tree-page .tree-opciones :is(.tree-vista, .tree-style) { min-height: 2.9rem; }
  body.tree-page .tree-opciones .tree-reloj[hidden] { display: none; }
  body.tree-page .tree-opciones .stage-share { position: static; margin-top: 0.5rem; }
  body.tree-page .tree-opciones .stage-share > summary { width: 100%; justify-content: center; min-height: 2.9rem; background: var(--soft); }
  body.tree-page .tree-opciones .stage-share .compartir-pop { left: 0; right: 0; }

  /* abajo a la derecha: + − y ver todo, en columna, por encima de la hoja */
  body.tree-page .tree-zoom {
    top: auto;
    left: auto;
    right: 0.6rem;
    bottom: calc(var(--hoja, 0px) + 0.6rem);
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.3rem;
  }
  body.tree-page .tree-zoom button {
    display: grid;
    place-items: center;
    width: 2.75rem;
    min-width: 0;
    height: 2.75rem;
    padding: 0;
  }
  body.tree-page .tree-stage:has(.tree-who.abierta) .tree-zoom { display: none; }
  body.tree-page .tree-rama-aviso { top: 4.1rem; }

  /* la pista, la primera vez, como un aviso encima de todo lo de abajo */
  body.tree-page .tree-hint { display: none; }
  body.tree-page .tree-hint.es-aviso:not([hidden]) {
    display: block;
    left: 0.75rem;
    right: 4.6rem;
    bottom: calc(var(--hoja, 0px) + 0.75rem);
    z-index: 4;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 8px 24px var(--shadow);
    color: var(--text);
    font-size: 0.9rem;
    letter-spacing: 0;
    line-height: 1.4;
  }

  /* la persona elegida: una hoja desde abajo */
  body.tree-page .tree-who {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    max-height: 78%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.35rem max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    border-radius: 22px 22px 0 0;
    background: var(--card);
    box-shadow: 0 -12px 34px var(--shadow-md);
  }
  body.tree-page .tree-who[hidden] { display: none; }
  body.tree-page .tree-who > * { grid-column: 1 / -1; min-width: 0; }
  body.tree-page .tree-who > .tree-asa {
    position: absolute;
    top: 0;
    left: 50%;
    width: 6rem;
    height: 1.6rem;
    min-height: 0;
    margin: 0 0 0 -3rem;
    padding: 0;
    border: 0;
    background: none;
  }
  body.tree-page .tree-who > .tree-asa::before {
    content: "";
    display: block;
    width: 2.6rem;
    height: 0.3rem;
    margin: 0.5rem auto 0;
    border-radius: 999px;
    background: var(--edge);
  }
  body.tree-page .tree-who > p.tree-panel-kicker:not(.tree-sub) { display: none; }
  body.tree-page .tree-who > .tree-who-photo {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 0.85rem 0 0;
    aspect-ratio: 1;
    border-radius: 50%;
  }
  body.tree-page .tree-who > h2 { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.55rem; line-height: 1.15; overflow-wrap: break-word; }
  body.tree-page .tree-who > .meta { grid-column: 2; grid-row: 2; margin: 0.1rem 0 0; font-size: 0.95rem; }
  body.tree-page .tree-who > .tree-cerrar {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: start;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: -0.35rem -0.35rem 0 0.5rem;
    padding: 0;
    border-radius: 50%;
    background: var(--soft);
    color: var(--ink);
  }
  body.tree-page .tree-who .tree-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
  body.tree-page .tree-who .tree-acts .btn { flex: 1 1 auto; margin: 0; font-size: 0.95rem; }
  body.tree-page .tree-who .tree-acts .btn[hidden] { display: none; }
  body.tree-page .tree-who .tree-act-anadir[aria-expanded="true"] { background: var(--soft); border-color: var(--edge); }
  body.tree-page .tree-who .tree-anadir { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.5rem; }
  body.tree-page .tree-who .tree-anadir[hidden] { display: none; }
  body.tree-page .tree-who .tree-anadir .btn { margin: 0; font-size: 0.95rem; }
  /* asomada: lo de cada día; abierta (el asa, o deslizar hacia arriba), el resto */
  body.tree-page .tree-who:not(.abierta) > :is(.tree-ramas, .tree-sub, .tree-badges, .tree-privacy),
  body.tree-page .tree-who:not(.abierta) .tree-act-drop { display: none; }
  body.tree-page .tree-who.abierta { max-height: 82%; }
  body.tree-page .tree-who .tree-ramas select { min-height: 2.9rem; }
  body.tree-page .tree-who .tree-badges { gap: 0.4rem; }

  /* Añadir a alguien: a pantalla completa, con los botones siempre a mano. El
     lienzo aísla lo suyo (isolation): mientras está abierto, sube por encima
     de la cabecera y de la barra de abajo. */
  body.tree-page .tree-stage:has(> :is(.tree-add, .tree-ask):not([hidden])) { z-index: 50; }
  body.tree-page :is(.tree-add, .tree-ask) {
    position: fixed;
    inset: 0;
    z-index: 60;
    padding: 0;
    align-items: stretch;
  }
  body.tree-page .tree-ask { align-items: flex-end; }
  body.tree-page .tree-ask-card { width: 100%; border-radius: 22px 22px 0 0; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); }
  body.tree-page .tree-add-card {
    width: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
    padding: max(1rem, env(safe-area-inset-top)) 1rem 0;
    box-shadow: none;
  }
  body.tree-page .tree-add h2 { font-size: 1.7rem; }
  body.tree-page .tree-add .pair { grid-template-columns: 1fr; gap: 0; }
  body.tree-page .tree-add-hits { max-height: 12rem; }
  body.tree-page .tree-add-hits button { min-height: 2.75rem; }
  body.tree-page .tree-add .fiche-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 0.6rem;
    margin: 1.2rem -1rem 0;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--card);
  }
  body.tree-page .tree-add .fiche-actions > * { flex: 1; margin: 0; }
}

/* --- Las páginas, en el teléfono -------------------------------------------- */
@media (max-width: 640px), (max-height: 500px) {
  .solo-telefono:not([hidden]) { display: revert; }
  /* una rejilla no se ensancha por lo que lleva dentro (un selector largo, un enlace) */
  .grid > *, .fiche > *, .product-spread > * { min-width: 0; }

  /* «Personas» y el buscador: una lista de gente, no una tabla de 9 columnas */
  .sheet:has(> table.db) { overflow: visible; border-radius: 16px; }
  table.db thead { display: none; }
  table.db, table.db tbody { display: block; }
  table.db tbody tr {
    display: grid;
    grid-template-columns: 2.9rem minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.85rem;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--line);
  }
  table.db tbody tr:last-child { border-bottom: 0; }
  table.db td { display: none; padding: 0; border: 0; max-width: none; white-space: normal; font-size: 1rem; }
  table.db td:is(.cell-photo, .cell-movil, .cell-lock) { display: block; width: auto; }
  table.db td.cell-photo img, table.db .cell-ini {
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--soft);
    color: var(--muted);
    font-family: var(--font-display);
    font-size: 1.1rem;
  }
  table.db td.cell-movil .cell-name { display: block; color: var(--ink); font-size: 1.05rem; font-weight: 500; line-height: 1.3; }
  table.db td.cell-movil .muted { display: block; margin-top: 0.1rem; font-size: 0.88rem; line-height: 1.35; }
  table.db tbody tr:active { background: var(--soft); }
  .orden-movil {
    display: flex !important;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.9rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    scrollbar-width: none;
  }
  .orden-movil > .muted { flex: none; font-size: 0.85rem; margin-right: 0.15rem; }
  .orden-movil .th-sort {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: 0.92rem;
    text-decoration: none;
  }
  .orden-movil .th-sort.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
  /* los filtros: el buscador a la vista y el resto detrás de «Filtros» (movil.js) */
  .filters-more:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .filters-more[hidden] { display: none; }
  .filters-more :is(input, select) { width: 100%; min-height: 2.9rem; }
  .filters-more :is(button, .btn) { min-height: 2.9rem; }
  .filtros-boton { justify-self: start; margin: 0; }
  .filtros-boton[aria-expanded="true"] { background: var(--soft); }
  .top-row { flex-wrap: wrap; align-items: flex-end; }

  /* La ficha de una persona */
  .product-bar { flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
  .product-bar > a.muted { flex: 1 1 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .product-bar-actions { flex: 1 1 100%; flex-wrap: wrap; gap: 0.5rem; }
  .product-bar-actions > :is(.btn, form, details) { flex: 1 1 auto; }
  .product-bar-actions form .btn, .product-bar-actions details > summary { width: 100%; justify-content: center; }
  .product-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 0.3rem; margin-bottom: 1.6rem; padding-bottom: 0.8rem; scrollbar-width: none; }
  .product-tabs a { flex: none; }
  .product-life { font-size: 1.25rem; }
  /* sin retrato no se deja el hueco gris (en el teléfono era media pantalla) */
  .product-shot:not(:has(img)) { display: none; }
  .product-shot { max-height: 70svh; }
  .product-band { margin-top: 2.2rem; padding-top: 1.6rem; }
  /* el árbol pequeño de la ficha deja bajar la página con el dedo */
  .product-tree.tree-stage { height: min(420px, 62svh); }
  .product-tree.tree-stage > canvas { touch-action: pan-y; }

  /* Editar y ficha nueva: la etiqueta encima del campo, a todo lo ancho */
  .sheet-row, .sheet-row-wide { grid-template-columns: minmax(0, 1fr); }
  .sheet-k { padding: 0.65rem 0.85rem 0.1rem; border-right: 0; background: none; font-size: 0.78rem; }
  .sheet-form :is(input, select, textarea) { padding-left: 0.85rem; padding-right: 0.85rem; min-height: 2.9rem; }
  .sheet-field { padding: 0 0.35rem 0.25rem 0; }
  .sheet-field.pills { padding: 0.15rem 0.85rem 0.6rem; gap: 0.4rem; }
  .sheet-field.life-when { padding: 0 0.85rem 0.25rem 0; gap: 0.6rem; }
  .sheet-field.check { padding: 0.3rem 0.85rem 0.6rem; }
  .portrait.sheet { max-width: 12rem; margin: 0 auto; }
  .fiche { gap: 1.4rem; margin-top: 1rem; }
  .fiche-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .fiche-actions > :is(.btn, button) { flex: 1 1 auto; margin-top: 0; }

  /* Un evento */
  .times li { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }

  /* La galería y los álbumes vacíos */
  .gx-empty .con-dedo { margin-top: 0.5rem; }
}

/* --- El mapa del árbol, en el teléfono ---------------------------------------
   La leyenda es una hoja que sale de abajo: plegada deja ver solo qué se
   enseña (personas, eventos, fotos); abierta, la lista (movil.js le pone el
   asa). Debajo, la línea del tiempo, más bajita. */
@media (max-width: 640px), (max-height: 500px) {
  .map-page .map-legend.es-hoja {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 4.9rem;
    padding: 1.35rem 0.85rem 0.6rem;
    overflow: hidden;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 20px 20px 0 0;
    background: var(--card);
    box-shadow: 0 -10px 30px var(--shadow);
  }
  .map-page .map-legend.es-hoja.abierta { max-height: 82%; overflow-y: auto; }
  .map-page .map-legend.es-hoja > .tree-panel-kicker { display: none; }
  .map-page .map-legend.es-hoja:not(.abierta) > :is(.map-skins, .map-mode) { display: none !important; }
  .map-page .map-legend.es-hoja .map-modes { margin: 0; }
  .map-page .map-legend.es-hoja .map-modes button { min-height: 2.6rem; font-size: 0.95rem; }
  .map-page .map-legend.es-hoja.abierta .map-modes { margin-bottom: 0.8rem; }
  .map-page .map-legend.es-hoja .meta { display: block; font-size: 0.88rem; }
  .map-page .map-legend.es-hoja .map-people li { min-height: 2.75rem; align-items: center; font-size: 0.98rem; padding: 0.45rem 0; }
  .map-page .map-legend .hoja-asa {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1.35rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .map-page .map-legend .hoja-asa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .map-page .map-legend .hoja-asa::before {
    content: "";
    display: block;
    width: 2.6rem;
    height: 0.3rem;
    margin: 0.5rem auto 0;
    border-radius: 999px;
    background: var(--edge);
  }
  /* la atribución del mapa (OpenStreetMap), siempre a la vista: encima de la hoja */
  .map-page .maplibregl-ctrl-bottom-left, .map-page .maplibregl-ctrl-bottom-right { bottom: 4.9rem; }
  .map-page .map-time { height: 132px; }
  .map-page .map-time-play { width: 2.75rem; height: 2.75rem; }
  .map-page .map-time-all { min-height: 2.5rem; }
}

/* --- Editar el sitio, en el teléfono: plegado en un botón (movil.js) -------- */
@media (max-width: 640px), (max-height: 500px) {
  .site-tools.plegada {
    left: auto;
    right: max(0.8rem, env(safe-area-inset-right));
    transform: none;
    width: auto;
    max-width: calc(100vw - 1.6rem);
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .site-tools.plegada:not(.abierta) > :not(.site-tools-abre) { display: none !important; }
  .site-tools .site-tools-abre {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    margin: 0;
    padding: 0 1.2rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--on-ink);
    font-size: 0.98rem;
    box-shadow: 0 10px 28px var(--shadow-md);
  }
  .site-tools.plegada.abierta {
    width: min(19rem, calc(100vw - 1.6rem));
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--card);
    box-shadow: 0 16px 44px var(--shadow-md);
  }
  .site-tools.plegada.abierta .site-tools-abre { order: 9; box-shadow: none; }
  .site-tools.plegada.abierta > :is(form, a) { display: flex; }
  .site-tools.plegada.abierta form { margin: 0; }
  .site-tools.plegada.abierta :is(.btn, button:not(.site-tools-abre)) {
    width: 100%;
    min-height: 3rem;
    margin: 0;
    padding: 0 1rem;
    justify-content: flex-start;
    font-size: 0.98rem;
  }
  .site-tools.plegada.abierta .site-tools-ojo span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .site-tools.plegada .site-tools-que { display: none; }
}

/* --- La galería y el visor, con el dedo ------------------------------------- */
/* mantener el dedo sobre una foto la elige (seleccion.js): sin el menú de iOS */
.gx-js .gx-link, .gx-js .gx-link img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* las caras de una foto, a la vista: con ratón asomaban al pasar por encima */
.ph-face { opacity: 0.55; }
.lightbox-acts :is(button, a) { min-height: 2.75rem; min-width: 2.75rem; }
.lightbox-close { font-size: 1.6rem; }
body.lightbox-open .barra-movil { display: none; }
@media (max-width: 640px), (max-height: 500px) {
  /* arriba no caben cuatro botones con su palabra: con su icono */
  .lightbox-top { padding: max(0.4rem, env(safe-area-inset-top)) 0.4rem 0.2rem 0.9rem; }
  .lightbox-acts { gap: 0.15rem; }
  .lightbox-info span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lightbox-acts :is(.lightbox-info, .lightbox-share, .lightbox-download, .lightbox-close) {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
  }
  .lightbox-acts :is(.lightbox-share, .lightbox-download) { font-size: 0 !important; }
  .lightbox-acts :is(.lightbox-share, .lightbox-download)::before {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background: currentColor;
    -webkit-mask: var(--ico) center / contain no-repeat;
    mask: var(--ico) center / contain no-repeat;
  }
  .lightbox-share { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M8 8l4-4 4 4'/%3E%3Cpath d='M5 12v7h14v-7'/%3E%3C/svg%3E"); }
  .lightbox-download { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7.5 10.5 12 15l4.5-4.5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E"); }
  .lightbox-panel { padding-bottom: env(safe-area-inset-bottom); }
}

/* «Se hace en un ordenador»: las maneras de mandarse el enlace (movil.js) */
.solo-pc-mandar { width: 100%; margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: var(--soft-2); }
.solo-pc-mandar p { margin: 0 0 0.75rem !important; font-weight: 500; }
.solo-pc-vias { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.solo-pc-vias .btn { margin: 0 !important; width: 100%; }
.solo-pc svg { flex: none; }
.solo-pc .solo-pc-mandar svg { color: inherit; margin: 0; }

/* --- Lo que quedaba por debajo de los 44 px (medido página a página) -------- */
body > header .brand { padding: 0.3rem; margin: -0.3rem; }
body > header .nav-tree { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.pie a, .pie-idiomas a, .landing-foot > a { display: inline-block; padding: 0.65rem 0.35rem; }
.landing-film-btn { min-width: 2.75rem; min-height: 2.75rem; }
details > summary:not(.btn, .compartir-btn, .linkish) { padding-top: 0.6rem; padding-bottom: 0.6rem; }
summary.linkish { display: inline-flex; align-items: center; min-height: 2.75rem; }
:is(.plaza-block-head, .site-gallery-head) > a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.2rem; }
.results-logo { padding-top: 0.35rem; padding-bottom: 0.35rem; }
a.aj-link, .ph-back, .writer-back { display: inline-flex; align-items: center; min-height: 2.75rem; }
.ph-arrows a { width: 2.75rem; height: 2.75rem; }
.place-buscar { width: 2.75rem; min-width: 2.75rem; }
label.check.tight { min-width: 2.75rem; }
.ln-zoom button { width: 2.75rem; height: 2.75rem; }
button.icon-btn { width: 2.75rem; height: 2.75rem; }
a.theme-see { min-height: 2.75rem; display: inline-flex; align-items: center; }
.writer-more > summary { min-width: 2.75rem; min-height: 2.75rem; }
.maplibregl-ctrl-group button { width: 2.75rem !important; height: 2.75rem !important; }
.maplibregl-popup-close-button { width: 2.75rem; height: 2.75rem; font-size: 1.4rem; }
/* el pie de foto de una cita del editor: de 16 px, o el iPhone acerca al escribir */
.writer-body .cdx-quote__caption, .writer-body .cdx-input { font-size: max(16px, 1rem); }

@media (max-width: 640px), (max-height: 500px) {
  /* dos fechas no caben lado a lado: una debajo de otra */
  .pair:has(input[type="date"]) { grid-template-columns: minmax(0, 1fr); }
  /* las ventanitas de la galería (álbum nuevo, añadir a un álbum): abajo, a lo ancho */
  :is(.gx-new-album, .ph-add-album) .gx-pop {
    position: fixed;
    top: auto;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(var(--barra-movil, 0px) + 0.75rem);
    width: auto;
    z-index: 45;
  }
  /* «Compartir» del mapa: la ventanita, a lo ancho */
  .map-stage .stage-share .compartir-pop { max-width: calc(100vw - 54px - 1rem); }
  body.tree-page .tree-who > .tree-asa { height: 2.2rem; }
  .map-page .map-legend .hoja-asa { height: 1.6rem; }
}

/* --- Lo público, en el teléfono --------------------------------------------- */
@media (max-width: 640px), (max-height: 500px) {
  /* comparar los planes: las cabeceras se leen (iban a 10 px) y la tabla cabe */
  .price-compara thead th { font-size: 0.68rem; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--text-strong); padding: 0.6rem 0.2rem; overflow-wrap: anywhere; }
  .price-compara tbody th { width: 40%; font-size: 0.88rem; }
  .price-compara td { font-size: 0.85rem; padding: 0.55rem 0.2rem; }
  /* los botones de empezar, de pulgar */
  :is(.landing-hero, .price-card, .pricing) .btn { min-height: 3rem; padding-left: 1.3rem; padding-right: 1.3rem; font-size: 1rem; }
}