/* Capa de teléfono (ancho < 600 px). Solo actúa con html[data-telefono="true"], que pone mobile/movil.js.
   Usa los tokens de cada diseño (A, B, C): no define colores propios salvo mezclas de esos tokens. */

:root[data-telefono="true"] {
  --nav-alto: 64px;
  --hoja-cab: 52px;
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --pie: calc(var(--nav-alto) + var(--seguro-abajo));
  --hoja-plegada: var(--hoja-cab);
  --hoja-media: 48dvh;
  --hoja-completa: calc(100dvh - var(--seguro-arriba) - var(--pie) - 12px);
  --hoja-alto: var(--hoja-plegada);
  --fondo-hoja: var(--paper, Canvas);
  --borde-hoja: color-mix(in srgb, currentColor 18%, transparent);
  -webkit-text-size-adjust: 100%;
}
:root[data-telefono="true"][data-hoja="media"] { --hoja-alto: var(--hoja-media); }
:root[data-telefono="true"][data-hoja="completa"] { --hoja-alto: var(--hoja-completa); }

:root[data-telefono="true"] body {
  padding-top: var(--seguro-arriba);
  padding-bottom: var(--pie);
  overscroll-behavior-y: contain;
}

/* Objetivos táctiles de 48 dp y letra mínima de 12 px en la interfaz. */
:root[data-telefono="true"] button,
:root[data-telefono="true"] select,
:root[data-telefono="true"] input,
:root[data-telefono="true"] summary { min-height: 48px; }
:root[data-telefono="true"] small,
:root[data-telefono="true"] .fine-print,
:root[data-telefono="true"] .pane-kicker,
:root[data-telefono="true"] sup { font-size: max(12px, .75rem); }

/* ---------- Cabecera: en el teléfono todo pasa a la barra inferior y a «Más» ---------- */
:root[data-telefono="true"] .topbar { display: none !important; }
:root[data-telefono="true"] .topbar .compact-nav,
:root[data-telefono="true"] .topbar .library-menu,
:root[data-telefono="true"] .topbar .appearance-control,
:root[data-telefono="true"] .app-footer,
:root[data-telefono="true"] .pane-view-controls,
:root[data-telefono="true"] #pane-layout-notice,
:root[data-telefono="true"] .pane-resizer,
:root[data-telefono="true"] #pane-biblia .pane-close,
:root[data-telefono="true"] #pane-comentario .pane-close,
:root[data-telefono="true"] #pane-diccionario .pane-close { display: none !important; }

:root[data-telefono="true"] .reading-toolbar {
  display: flex; flex-wrap: nowrap; gap: 4px; padding: 0 8px; margin: 0;
  overflow-x: auto; scrollbar-width: none;
}
:root[data-telefono="true"] .reading-toolbar { padding: 6px 8px 4px; }
:root[data-telefono="true"] .reading-actions { flex-wrap: nowrap; gap: 0; width: 100%; justify-content: space-between; align-items: center; }
:root[data-telefono="true"] .reading-actions > * { flex: 0 1 auto; min-width: 0; }
:root[data-telefono="true"] .reading-actions button,
:root[data-telefono="true"] .reading-actions summary { min-width: 40px; padding-inline: 6px; font-size: .9rem; white-space: nowrap; }
:root[data-telefono="true"] #pane-biblia .passage-picker { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: 6px; width: 100%; }
:root[data-telefono="true"] #pane-biblia .passage-picker select { width: 100%; min-width: 0; }

/* ---------- Lectura a todo el ancho ---------- */
:root[data-telefono="true"] #read-view { padding: 0; }
:root[data-telefono="true"] #reading-desk { display: block; margin: 0; }
:root[data-telefono="true"] #panes.reading-layout {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  height: auto !important;
  min-height: 0;
  margin: 0;
}
:root[data-telefono="true"] #pane-biblia {
  width: 100% !important; max-width: none;
  height: var(--alto-libro, 60dvh) !important;
  min-height: 160px; /* pantallas chicas con letra grande: el pie y las pestañas nunca tapan el texto */
  border-radius: 0; margin: 0; box-shadow: none;
  display: flex; flex-direction: column;
}
:root[data-telefono="true"] #pane-biblia .pane-head { padding: 8px 16px 4px; gap: 6px; flex-wrap: wrap; }
:root[data-telefono="true"] #pane-biblia .passage-picker { flex: 1 1 auto; }
:root[data-telefono="true"] #pane-biblia #comparison-controls { padding: 0 16px 4px; }
:root[data-telefono="true"] #verses.pane-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 8px 20px 32px;
  overscroll-behavior: contain;
}
:root[data-telefono="true"] #verses .verse { width: 100%; max-width: none; }
:root[data-telefono="true"] #pane-biblia .pane-foot { padding: 4px 12px; }
:root[data-telefono="true"] #pane-biblia .page-controls { width: 100%; justify-content: space-between; }
:root[data-telefono="true"] .pane-notes { margin: 0 8px; }

/* ---------- Hoja de estudio (Comentario / Diccionario / Original) ---------- */
:root[data-telefono="true"] #pane-comentario,
:root[data-telefono="true"] #pane-diccionario {
  position: fixed !important;
  left: 0; right: 0;
  bottom: var(--pie);
  width: auto !important;
  height: calc(var(--hoja-alto) - var(--hoja-cab)) !important;
  max-height: none;
  margin: 0; border-radius: 0; box-shadow: none;
  z-index: 40;
  background: var(--fondo-hoja);
  display: none !important;
  flex-direction: column;
  overflow: hidden;
}
:root[data-telefono="true"]:not([data-hoja="plegada"])[data-vista-movil="read-view"][data-pestana="comentario"] #pane-comentario,
:root[data-telefono="true"]:not([data-hoja="plegada"])[data-vista-movil="read-view"][data-pestana="diccionario"] #pane-diccionario,
:root[data-telefono="true"]:not([data-hoja="plegada"])[data-vista-movil="read-view"][data-pestana="original"] #pane-diccionario { display: flex !important; }
:root[data-telefono="true"][data-pestana="original"] #pane-diccionario #dictionary-content,
:root[data-telefono="true"][data-pestana="original"] #pane-diccionario #dictionary-form { display: none; }
:root[data-telefono="true"][data-pestana="original"] #pane-diccionario #original-inline { display: block !important; }
:root[data-telefono="true"][data-pestana="diccionario"] #pane-diccionario #original-inline { display: none !important; }
:root[data-telefono="true"] #pane-comentario .pane-head,
:root[data-telefono="true"] #pane-diccionario .pane-head { padding: 8px 16px; gap: 6px; flex-wrap: wrap; }
:root[data-telefono="true"] #pane-comentario .pane-body,
:root[data-telefono="true"] #pane-diccionario .pane-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 18px 24px; }

#movil-hoja-cabecera { display: none; }
:root[data-telefono="true"][data-vista-movil="read-view"] #movil-hoja-cabecera {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 40px; align-items: center; gap: 4px;
  position: fixed; left: 0; right: 0; z-index: 41;
  bottom: calc(var(--pie) + var(--hoja-alto) - var(--hoja-cab));
  height: var(--hoja-cab);
  background: var(--fondo-hoja);
  border-top: 1px solid var(--borde-hoja);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 18px color-mix(in srgb, black 12%, transparent);
  padding: 0 4px;
  transition: bottom .22s ease;
}
.movil-hoja-izquierda { display: flex; align-items: center; min-width: 44px; height: 100%; }
.movil-hoja-asa { background: none; border: 0; display: grid; place-items: center; cursor: grab; color: inherit; width: 44px; height: 100%; }
/* Hoja abierta: el asa cede su lugar a «⌄ Biblia», que siempre devuelve al texto. */
.movil-hoja-volver { display: none; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border-radius: 18px;
  border: 1px solid var(--borde-hoja); background: none; color: inherit; font: inherit; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.movil-hoja-volver span:first-child { font-size: 1.1rem; line-height: 1; }
:root:is([data-hoja="media"], [data-hoja="completa"]) .movil-hoja-volver { display: inline-flex; }
:root:is([data-hoja="media"], [data-hoja="completa"]) .movil-hoja-asa { display: none; }
.movil-hoja-asa span { width: 28px; height: 4px; border-radius: 2px; background: currentColor; opacity: .35; }
.movil-hoja-pestanas { display: flex; justify-content: center; gap: 2px; }
.movil-hoja-pestanas button {
  flex: 1 1 0; min-width: 0; border: 0; background: none; color: inherit;
  font: inherit; font-size: .9rem; padding: 0 4px; border-bottom: 2px solid transparent; border-radius: 0;
  height: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Con letra grande del sistema, las pestañas se encogen en vez de pisarse. */
@media (max-width: 400px) { .movil-hoja-pestanas button { font-size: .8rem; } }
.movil-hoja-pestanas button[aria-selected="true"] { font-weight: 700; border-bottom-color: currentColor; }
.movil-hoja-fijar { opacity: .5; }
.movil-hoja-fijar[aria-pressed="true"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #movil-hoja-cabecera { transition: none; } }

/* ---------- Navegación inferior ---------- */
#movil-nav { display: none; }
:root[data-telefono="true"] #movil-nav {
  display: grid; grid-template-columns: repeat(5, 1fr);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: var(--pie); padding-bottom: var(--seguro-abajo);
  background: var(--fondo-hoja);
  border-top: 1px solid var(--borde-hoja);
}
#movil-nav button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; background: none; color: inherit; font: inherit; min-height: 48px; padding: 4px 0;
  opacity: .72; border-radius: 0;
}
#movil-nav .movil-nav-icono { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; box-sizing: content-box; }
#movil-nav .movil-nav-texto { font-size: .75rem; }
#movil-nav button[aria-current="page"] { opacity: 1; font-weight: 700; }
#movil-nav button[aria-current="page"] .movil-nav-icono {
  background: color-mix(in srgb, currentColor 14%, transparent); border-radius: 999px; padding: 2px 16px;
}

/* ---------- Menú «Más» ---------- */
#movil-mas {
  margin: auto 0 0; width: 100%; max-width: none; max-height: 82dvh;
  border: 0; border-radius: 18px 18px 0 0; padding: 8px 16px calc(16px + var(--seguro-abajo));
  background: var(--fondo-hoja); color: inherit;
}
#movil-mas::backdrop { background: rgb(0 0 0 / .35); }
.movil-mas-cabecera { display: flex; justify-content: space-between; align-items: center; }
.movil-mas-cabecera h2 { margin: 0; font-size: 1.2rem; }
.movil-mas-ajustes { display: grid; gap: 8px; margin: 8px 0 12px; }
.movil-mas-ajustes .appearance-control { display: grid !important; grid-template-columns: 5rem 1fr; align-items: center; }
.movil-mas-lista { display: grid; }
.movil-mas-lista button { text-align: left; min-height: 48px; border-radius: 10px; padding: 0 12px; }

/* ---------- Diálogos a pantalla de teléfono ---------- */
:root[data-telefono="true"] dialog:not(#movil-mas):not(#original-dialog) {
  width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0;
  border-radius: 0; padding-top: var(--seguro-arriba); padding-bottom: var(--seguro-abajo);
}
/* Popover de la palabra: mitad opuesta al toque. */
:root[data-telefono="true"] #original-dialog {
  position: fixed; left: 12px; right: 12px; width: auto; max-width: none;
  max-height: 44dvh; overflow-y: auto; margin: 0; border-radius: 14px;
}
:root[data-telefono="true"] #original-dialog[data-lado="arriba"] { top: calc(var(--seguro-arriba) + 12px); bottom: auto; }
:root[data-telefono="true"] #original-dialog[data-lado="abajo"],
:root[data-telefono="true"] #original-dialog:not([data-lado]) { bottom: calc(var(--pie) + 12px); top: auto; }

/* ---------- IA a pantalla completa ---------- */
:root[data-telefono="true"] #ai-pane:not([hidden]) {
  position: fixed !important; inset: 0 0 var(--pie) 0; z-index: 60;
  width: auto !important; height: auto !important; max-width: none; margin: 0; border-radius: 0;
  padding-top: var(--seguro-arriba);
}
:root[data-telefono="true"] #ai-resizer { display: none !important; }

/* ---------- Botón «volver al principio» sobre la hoja ---------- */
:root[data-telefono="true"] #back-to-top { bottom: calc(var(--pie) + var(--hoja-alto) + 12px); right: 12px; }

/* ---------- Otras vistas (plan, devocional, oración) ---------- */
:root[data-telefono="true"] main { overflow-x: hidden; padding-inline: 0 !important; }
:root[data-telefono="true"] main > section.view:not(#read-view) { padding: 12px 12px 24px; }
/* Tarjetas, formularios y filas: nada más ancho que el teléfono. */
:root[data-telefono="true"] main > section.view :is(.card, section[id$="-create"], .workspace-grid > section) { padding: 18px 16px; border-radius: 14px; }
:root[data-telefono="true"] main > section.view :is(.workspace-grid, .cards, .grid) { grid-template-columns: minmax(0, 1fr) !important; }
:root[data-telefono="true"] main > section.view form { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)) !important; }
:root[data-telefono="true"] main > section.view :is(label, select, input, textarea) { min-width: 0; max-width: 100%; }
:root[data-telefono="true"] main > section.view form :is(select, input, textarea) { width: 100%; box-sizing: border-box; }
:root[data-telefono="true"] main > section.view :is(.form-row, .series-actions, .section-heading, .actions, .row) { flex-wrap: wrap; gap: 8px; }
:root[data-telefono="true"] main > section.view h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); overflow-wrap: anywhere; }

/* En el teléfono la hoja es el estudio: el interruptor «Solo lectura» de escritorio sobra. */
:root[data-telefono="true"] #study-open { display: none !important; }

/* ---------- Barra del versículo ---------- */
#movil-versiculo { display: none; }
:root[data-telefono="true"][data-vista-movil="read-view"] #movil-versiculo:not([hidden]) {
  /* Dos filas si hace falta (letra grande): antes los últimos botones quedaban escondidos a la derecha. */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 2px; overflow: visible;
  position: fixed; left: 6px; right: 6px; z-index: 45;
  bottom: calc(var(--pie) + var(--hoja-alto) + 8px);
  padding: 4px 2px; border-radius: 14px;
  background: var(--fondo-hoja); border: 1px solid var(--borde-hoja);
  box-shadow: 0 6px 20px color-mix(in srgb, black 18%, transparent);
}
#movil-versiculo .movil-tintas { display: flex; gap: 4px; padding-right: 6px; border-right: 1px solid var(--borde-hoja); }
#movil-versiculo .movil-tintas button { width: 32px; min-width: 32px; height: 32px; min-height: 32px; border-radius: 50%; padding: 0; }
#movil-versiculo > button { flex: 0 0 auto; min-width: 40px; padding: 0 6px; font-size: .9rem; }
#movil-versiculo .movil-tintas { gap: 2px; padding-right: 4px; flex: 0 0 auto; }
#movil-versiculo > button { white-space: nowrap; }

/* «Mis notas» como hoja: se abre desde la barra del versículo. */
:root[data-telefono="true"] .pane-notes:not([open]) { display: none; }
:root[data-telefono="true"] .pane-notes[open] {
  position: fixed; left: 0; right: 0; bottom: var(--pie); z-index: 46; margin: 0;
  max-height: 70dvh; overflow-y: auto; border-radius: 16px 16px 0 0;
  background: var(--fondo-hoja); padding: 4px 16px 16px;
  box-shadow: 0 -8px 24px color-mix(in srgb, black 20%, transparent);
}
:root[data-telefono="true"] .pane-notes[open] textarea { width: 100%; box-sizing: border-box; }

/* ---------- Música (YouTube) en el teléfono ----------
   Regla de YouTube: mientras suena, el reproductor se ve con al menos 200×200 px.
   Se ancla sobre la hoja de estudio; el arrastre de escritorio no aplica. */
:root[data-telefono="true"] #music-panel:not([hidden]) {
  left: 8px !important; right: 8px !important; top: auto !important;
  bottom: calc(var(--pie) + var(--hoja-cab) + 8px) !important;
  width: auto !important; max-width: none; z-index: 55;
}
:root[data-telefono="true"] #music-panel #music-frame { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; min-height: 200px; }
:root[data-telefono="true"] #music-panel[data-mini="true"] { left: auto !important; width: 202px !important; }
:root[data-telefono="true"] #music-panel[data-mini="true"] #music-frame { width: 200px; height: 200px; aspect-ratio: auto; }
:root[data-telefono="true"] #music-panel #music-drag span { visibility: hidden; width: 0; overflow: hidden; }
:root[data-telefono="true"] #music-panel #music-drag { justify-content: flex-end; }
:root[data-telefono="true"] #music-panel button { min-height: 40px; }

/* Lectura inmersiva (devocional): sin barras propias mientras dura. */
:root.lectura-inmersiva #movil-nav,
:root.lectura-inmersiva #movil-hoja-cabecera,
:root.lectura-inmersiva #movil-versiculo { display: none !important; }
:root.lectura-inmersiva body { padding-bottom: var(--seguro-abajo); }

/* Strong y voz plegados tras «Lectura ▾». */
#movil-lectura { display: none; }
:root[data-telefono="true"] #movil-lectura { display: inline-flex; align-items: center; }
:root[data-telefono="true"]:not([data-controles-lectura="abiertos"]) #library-controls { display: none !important; }
:root[data-telefono="true"][data-controles-lectura="abiertos"] #library-controls {
  display: flex !important; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px 12px; margin: 0;
}
:root[data-telefono="true"] #library-controls .voice-controls { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
:root[data-telefono="true"] #library-controls #voice-select { flex: 1 1 100%; min-width: 0; }
/* El «Preguntar» flotante de escritorio pasa a la barra del versículo. */
:root[data-telefono="true"] #ai-verse-ask { display: none !important; }

/* «Volver al principio»: botón redondo con flecha en el teléfono (no tapa el contenido). */
:root[data-telefono="true"] #back-to-top {
  width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%;
  font-size: 0; display: grid; place-items: center;
}
:root[data-telefono="true"] #back-to-top::before { content: "↑"; font-size: 1.3rem; line-height: 1; }
:root[data-telefono="true"]:not([data-vista-movil="read-view"]) #back-to-top { bottom: calc(var(--pie) + 12px); }
/* Más contraste en lo no seleccionado de la barra y la hoja. */
#movil-nav button { opacity: .85; }
.movil-hoja-pestanas button:not([aria-selected="true"]) { opacity: .8; }

/* ---------- Traer desde la PC ---------- */
#movil-traspaso .movil-traspaso-cuerpo { display: grid; gap: 12px; max-width: 34rem; margin: 0 auto; padding: 24px 20px; }
#movil-traspaso h3 { margin: 0; font-size: 1.3rem; }
#movil-traspaso p { margin: 0; line-height: 1.5; }
#movil-traspaso progress { width: 100%; height: 8px; }
#movil-traspaso .movil-traspaso-resumen { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 8px 12px; margin: 4px 0; }
#movil-traspaso .movil-traspaso-resumen dt { font-weight: 700; }
#movil-traspaso .movil-traspaso-resumen dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
#movil-traspaso .movil-traspaso-aviso { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borde-hoja); }
#movil-traspaso .movil-traspaso-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
#movil-traspaso .movil-traspaso-acciones button { min-height: 48px; padding: 0 16px; }

/* Hoja compacta: la pestaña ya nombra el panel; más alto para el contenido. */
:root[data-telefono="true"] #pane-comentario .pane-heading,
:root[data-telefono="true"] #pane-diccionario .pane-heading { display: none; }
:root[data-telefono="true"] #pane-comentario .pane-head,
:root[data-telefono="true"] #pane-diccionario .pane-head { padding: 6px 14px 4px; gap: 4px; }
:root[data-telefono="true"] #dictionary-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; width: 100%; }
:root[data-telefono="true"] #dictionary-form .dictionary-query-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
:root[data-telefono="true"] #pane-comentario .pane-foot,
:root[data-telefono="true"] #pane-diccionario .pane-foot { padding: 4px 14px; font-size: .75rem; }

/* ---------- Preparando tu biblioteca (Android) ---------- */
#preparacion-biblioteca { display: none; }
#preparacion-biblioteca[data-estado="preparando"],
#preparacion-biblioteca[data-estado="fallo"] {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 90;
  background: var(--paper, Canvas); color: var(--ink, CanvasText); padding: 24px;
}
#preparacion-biblioteca .preparacion-caja { display: grid; gap: 14px; justify-items: center; max-width: 22rem; text-align: center; }
#preparacion-biblioteca .preparacion-texto { margin: 0; font-size: 1.05rem; line-height: 1.5; }
#preparacion-biblioteca .preparacion-icono { width: 36px; height: 36px; border-radius: 50%; border: 3px solid color-mix(in srgb, currentColor 20%, transparent); border-top-color: currentColor; animation: girar-preparacion 1s linear infinite; }
#preparacion-biblioteca[data-estado="fallo"] .preparacion-icono { animation: none; border-color: currentColor; }
#preparacion-biblioteca .preparacion-reintentar { min-height: 48px; padding: 0 22px; }
@keyframes girar-preparacion { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #preparacion-biblioteca .preparacion-icono { animation: none; } }

/* IA en el teléfono: pegar el código de OpenRouter y reportar respuestas. */
#movil-ia-codigo { display: grid; gap: 8px; margin: 10px 0; padding: 12px; border: 1px solid var(--borde-hoja, currentColor); border-radius: 12px; }
#movil-ia-codigo p { margin: 0; }
.movil-ia-codigo-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.movil-ia-codigo-fila input { min-width: 0; font-family: ui-monospace, monospace; }
.movil-ia-aviso { font-size: .85rem; opacity: .85; }
#movil-ia-reporte textarea { width: 100%; box-sizing: border-box; }
.movil-ia-motivos { display: grid; gap: 2px; }
.movil-ia-motivos .opcion { display: flex; gap: 8px; align-items: center; min-height: 40px; }
/* Panel de IA: los enlaces y fuentes largas se parten; nada desborda a lo ancho. */
:root[data-telefono="true"] #ai-pane, :root[data-telefono="true"] #ai-pane * { overflow-wrap: anywhere; min-width: 0; }
:root[data-telefono="true"] #ai-pane #ai-context, :root[data-telefono="true"] #ai-pane textarea { width: 100%; box-sizing: border-box; }
:root[data-telefono="true"] #ai-pane .ai-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* Cuaderno tapado al salir si no se pudo cerrar; texto del reporte; cuota visible. */
#cuaderno-cubierto { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px; background: var(--paper, Canvas); color: var(--ink, CanvasText); }
#cuaderno-cubierto[hidden] { display: none; }
#cuaderno-cubierto .preparacion-caja { display: grid; gap: 12px; max-width: 22rem; text-align: center; }
#cuaderno-cubierto button { min-height: 48px; }
.movil-ia-reporte-texto { max-height: 30dvh; overflow: auto; white-space: pre-wrap; font: inherit; font-size: .9rem; padding: 10px; border: 1px solid var(--borde-hoja, currentColor); border-radius: 10px; margin: 0; }
.movil-ia-cuota { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: .82rem; opacity: .9; }
.movil-ia-cuota-texto { flex: 1 1 auto; min-width: 0; }
.movil-ia-cuota-refrescar { min-width: 40px; min-height: 40px; padding: 0; }

/* ---------- Estudiar con IA en el teléfono: que la respuesta tenga lugar ----------
   Las seis acciones en una sola fila deslizable, la pregunta en una línea que crece al escribir, y la cabecera
   compacta: antes las acciones y la caja de pregunta ocupaban casi toda la pantalla. */
:root[data-telefono="true"] #ai-acciones { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 6px; padding-bottom: 2px; }
:root[data-telefono="true"] #ai-acciones::-webkit-scrollbar { display: none; }
:root[data-telefono="true"] #ai-acciones .ai-accion { flex: 0 0 auto; white-space: nowrap; }
:root[data-telefono="true"] #ai-question { min-height: 44px; height: 44px; transition: height .15s; }
:root[data-telefono="true"] #ai-question:focus, :root[data-telefono="true"] #ai-question:not(:placeholder-shown) { height: 96px; }
:root[data-telefono="true"] #ai-compose { max-height: 38%; padding: 8px 12px; }
:root[data-telefono="true"] #ai-thread { min-height: 40%; }
:root[data-telefono="true"] .ai-pane-head { padding-bottom: 4px; }
:root[data-telefono="true"] .ai-pane-head > small, :root[data-telefono="true"] #ai-studies-open { display: inline-block; margin-right: 8px; }
:root[data-telefono="true"] #ai-thread .ai-bubble p, :root[data-telefono="true"] #ai-thread .ai-section p { font-size: 16px; line-height: 1.5; }
:root[data-telefono="true"] #ai-thread .ai-section h4 { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; margin: 10px 0 2px; }
:root[data-telefono="true"] #ai-compose { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; }
:root[data-telefono="true"] #ai-compose > #ai-acciones, :root[data-telefono="true"] #ai-compose > textarea, :root[data-telefono="true"] #ai-compose > #ai-preview, :root[data-telefono="true"] #ai-compose > #ai-status { flex: 1 1 100%; }
:root[data-telefono="true"] #ai-compose > #ai-context-options { flex: 1 1 auto; }
:root[data-telefono="true"] #ai-compose > .ai-actions { flex: 0 0 auto; margin: 0; }

/* Edición tienda: «Apoyar el proyecto» (vista previa hasta publicar en Google Play). */
#movil-apoyo { width: min(100vw - 32px, 480px); border: 1px solid var(--line, #e3dbcf); border-radius: 16px; padding: 16px; }
#movil-apoyo p { margin: 0 0 12px; line-height: 1.5; }
.movil-apoyo-montos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.movil-apoyo-montos button { min-height: 48px; font-weight: 600; }
.movil-apoyo-aviso { font-weight: 600; }

/* Edición tienda: sin música ni módulos personales (CONSENSO-PLAY.md). */
html[data-edicion="tienda"] #music-quick,
html[data-edicion="tienda"] #module-import-open,
html[data-edicion="tienda"] #sources-refresh,
html[data-edicion="tienda"] #sources-warning,
html[data-edicion="tienda"] #sources-dialog > p.muted { display: none !important; }

/* ---------- Paso 1 del diseño (CONSENSO-MOVIL.md): barra superior de una fila ---------- */
/* Fichas de espaciado: 4/8/12/16/24/32 · toques de 48 px · sin alturas fijas. */
#movil-barra { display: none; }
:root[data-telefono="true"] #movil-barra {
  display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 30;
  padding: calc(8px + var(--seguro-arriba)) 16px 8px; background: var(--paper); border-bottom: 1px solid var(--line);
}
:root[data-telefono="true"] .movil-barra-icono { flex: none; min-width: 48px; min-height: 48px; padding: 0; border: 0; background: none; color: var(--ink); font-size: 1.375rem; display: grid; place-items: center; }
:root[data-telefono="true"] .movil-barra-svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
:root[data-telefono="true"] .movil-barra-ref {
  flex: 1; min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink);
  font-family: var(--font-reader, Georgia, serif); font-size: 1.125rem; font-weight: 600;
}
:root[data-telefono="true"] .movil-barra-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
:root[data-telefono="true"] .movil-barra-flecha { flex: none; font-size: .875rem; color: var(--muted); }
/* Lo que reemplaza la barra: la fila de herramientas, libro/capítulo, la referencia repetida y «Pantalla completa». */
:root[data-telefono="true"] .reading-toolbar,
:root[data-telefono="true"] #pane-biblia .pane-heading,
:root[data-telefono="true"] #pane-biblia .passage-picker,
:root[data-telefono="true"] #pane-biblia #bible-ref,
:root[data-telefono="true"] #pane-biblia .enfoque-abrir { display: none !important; }
/* Versión y «Comparar» en una sola fila compacta al comienzo de la Biblia. */
:root[data-telefono="true"] #pane-biblia > .pane-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 16px; }
:root[data-telefono="true"] #pane-biblia #version-select { min-height: 48px; max-width: 50%; }
:root[data-telefono="true"] #read-view { row-gap: 0; }
:root[data-telefono="true"] #pane-biblia #comparison-controls { padding: 0; margin: 0; border: 0; flex: 1 1 auto; min-width: 0; }
:root[data-telefono="true"] #pane-biblia #comparison-controls .comparison-actions { display: flex; gap: 8px; justify-content: flex-end; }
:root[data-telefono="true"] #pane-biblia #compare-toggle { min-height: 48px; }
/* «Más»: fila de letra. */
.movil-mas-letra { display: flex; align-items: center; gap: 8px; }
.movil-mas-letra span { flex: 1; }
.movil-mas-letra button { min-width: 64px; min-height: 48px; font-weight: 600; }

/* ---------- Paso 2 del diseño (CONSENSO-MOVIL.md): pestañas abajo, una cosa a la vez ---------- */
:root[data-telefono="true"] { --hoja-cab: 0px; --nav-alto: 56px; }
:root[data-telefono="true"] #movil-nav,
:root[data-telefono="true"] #movil-hoja-cabecera,
:root[data-telefono="true"] #pane-biblia .pane-foot,
:root[data-telefono="true"] #pane-comentario .pane-foot,
:root[data-telefono="true"] .pane .enfoque-abrir { display: none !important; }
#movil-pestanas { display: none; }
:root[data-telefono="true"] #movil-pestanas {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 0 8px var(--seguro-abajo); gap: 4px; overflow-x: auto; scrollbar-width: none;
  background: var(--paper); border-top: 1px solid var(--line);
}
:root[data-telefono="true"] #movil-pestanas::-webkit-scrollbar { display: none; }
:root[data-telefono="true"] #movil-pestanas button {
  flex: none; min-height: 56px; padding: 0 16px; border: 0; border-top: 3px solid transparent; border-radius: 0;
  background: none; color: var(--muted); font-size: 1rem; font-weight: 600; white-space: nowrap;
}
:root[data-telefono="true"] #movil-pestanas button[aria-selected="true"] { color: var(--accent); border-top-color: var(--accent); }
:root.lectura-inmersiva #movil-pestanas { display: none !important; }

/* Cada pestaña ocupa todo el alto entre la barra de arriba y las pestañas. */
:root[data-telefono="true"] #pane-biblia { position: relative; }
:root[data-telefono="true"][data-vista-movil="read-view"]:not([data-pestana="biblia"]) #pane-biblia { visibility: hidden; }
:root[data-telefono="true"][data-vista-movil="read-view"]:not([data-pestana="biblia"]) #movil-versiculo { display: none !important; }
:root[data-telefono="true"] #pane-comentario,
:root[data-telefono="true"] #pane-diccionario {
  top: var(--cabeceras-lectura, 64px) !important; bottom: var(--pie) !important; height: auto !important; display: none !important;
}
:root[data-telefono="true"][data-vista-movil="read-view"][data-pestana="comentario"] #pane-comentario,
:root[data-telefono="true"][data-vista-movil="read-view"][data-pestana="referencias"] #pane-comentario,
:root[data-telefono="true"][data-vista-movil="read-view"][data-pestana="diccionario"] #pane-diccionario,
:root[data-telefono="true"][data-vista-movil="read-view"][data-pestana="original"] #pane-diccionario { display: flex !important; }
/* Comentario: sin la caja de referencias (tiene su pestaña). Referencias: solo la caja, abierta y a todo el alto. */
:root[data-telefono="true"][data-pestana="comentario"] #connections-box { display: none; }
:root[data-telefono="true"][data-pestana="referencias"] #pane-comentario > :not(#connections-box) { display: none !important; }
:root[data-telefono="true"][data-pestana="referencias"] #connections-box { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; margin: 0; }
:root[data-telefono="true"][data-pestana="referencias"] #connections-box > summary { pointer-events: none; list-style: none; font-weight: 700; font-size: 1.125rem; }
:root[data-telefono="true"][data-pestana="referencias"] #connections-box > summary::-webkit-details-marker { display: none; }

/* Flechas de capítulo: a los lados del texto, discretas. */
.movil-flecha { display: none; }
:root[data-telefono="true"] .movil-flecha {
  display: grid; place-items: center; position: absolute; top: 50%; z-index: 5; width: 48px; height: 48px; min-height: 48px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--paper) 82%, transparent); color: var(--accent);
  font-size: 1.75rem; line-height: 1; opacity: .85;
}
:root[data-telefono="true"] #movil-flecha-ant { left: 4px; }
:root[data-telefono="true"] #movil-flecha-sig { right: 4px; }

/* ☰ a pantalla completa, por secciones. */
:root[data-telefono="true"] #movil-mas { max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; padding-top: calc(8px + var(--seguro-arriba)); overflow-y: auto; }
.movil-mas-seccion { margin: 24px 0 8px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
:root[data-telefono="true"] #movil-mas .movil-mas-lista button { min-height: 48px; }
:root[data-telefono="true"][data-pestana="referencias"] #connections-list { max-height: none !important; overflow: visible !important; }

/* ---------- Paso 3 (CONSENSO-MOVIL.md): fila del versículo, «⋯» y varios versículos ---------- */
:root[data-telefono="true"] #movil-versiculo button { min-height: 48px; }
:root[data-telefono="true"] #movil-versiculo .movil-mas-acciones { font-size: 1.5rem; min-width: 48px; font-weight: 700; }
#movil-acciones { width: min(100vw, 520px); max-width: 100vw; margin: auto auto 0; border: 0; border-radius: 18px 18px 0 0; padding: 8px 16px calc(16px + var(--seguro-abajo, 0px)); background: var(--paper); color: inherit; }
#movil-acciones::backdrop { background: rgb(0 0 0 / .35); }
#movil-acciones .movil-mas-lista button { display: block; width: 100%; min-height: 48px; text-align: left; font-size: 1rem; }
#movil-seleccion { display: none; }
:root[data-telefono="true"] #movil-seleccion:not([hidden]) {
  display: flex; align-items: center; gap: 4px; position: fixed; left: 8px; right: 8px; bottom: calc(var(--pie) + 8px); z-index: 60;
  padding: 4px 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 6px 20px rgb(0 0 0 / .18); overflow-x: auto;
}
:root[data-telefono="true"] #movil-seleccion button { min-height: 48px; flex: none; white-space: nowrap; font-size: .95rem; }
.movil-seleccion-cuenta { flex: 1 0 auto; padding: 0 8px; font-weight: 700; white-space: nowrap; }
:root[data-telefono="true"] #verses .verse.movil-elegido { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 4px 0 var(--accent); }
:root[data-telefono="true"][data-seleccion="varios"] #movil-versiculo { display: none !important; }

/* ---------- Paso 4 (CONSENSO-MOVIL.md): Mi estudio ---------- */
#mi-estudio, #movil-etiquetar { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; padding: calc(8px + var(--seguro-arriba, 0px)) 16px calc(16px + var(--seguro-abajo, 0px)); background: var(--paper); color: inherit; display: none; flex-direction: column; }
#mi-estudio[open], #movil-etiquetar[open] { display: flex; }
#movil-etiquetar { height: auto; margin: auto 0 0; border-radius: 18px 18px 0 0; }
.mi-estudio-filtros { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0; scrollbar-width: none; flex: none; }
.mi-estudio-filtros button { flex: none; min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 24px; background: var(--bg); color: var(--ink); font-weight: 600; white-space: nowrap; }
.mi-estudio-filtros button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.mi-estudio-lista { flex: 1; overflow-y: auto; padding: 8px 0 24px; }
.mi-estudio-fila { display: grid; gap: 4px; width: 100%; min-height: 48px; padding: 12px 0; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; }
.mi-estudio-fila b { color: var(--accent); font-size: .95rem; }
.mi-estudio-fila span { font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
.mi-estudio-vacio { color: var(--muted); padding: 24px 0; line-height: 1.6; }
.mi-estudio-grupo { margin: 24px 0 8px; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mi-estudio-colores { display: grid; gap: 8px; margin: 8px 0 16px; }
.mi-estudio-color { display: flex; align-items: center; gap: 12px; margin: 0; }
.mi-estudio-color .ink { flex: none; width: 32px; height: 32px; border-radius: 50%; }
.mi-estudio-color input { flex: 1; min-width: 0; min-height: 48px; margin: 0; }
.movil-etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.movil-etiquetas button { min-height: 48px; padding: 0 16px; border-radius: 24px; }
.movil-etiquetas button.activa { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.movil-etiquetar-form { display: flex; gap: 8px; margin: 8px 0; }
.movil-etiquetar-form input { flex: 1; min-width: 0; min-height: 48px; margin: 0; }
.movil-etiquetar-form button { min-height: 48px; }
/* Barra de varios versículos: la cuenta arriba y las acciones repartidas abajo (no se desliza de lado). */
:root[data-telefono="true"] #movil-seleccion:not([hidden]) { flex-wrap: wrap; overflow-x: visible; }
:root[data-telefono="true"] #movil-seleccion .movil-seleccion-cuenta { flex: 1 1 100%; padding: 8px; }
/* Cada botón mide lo que pide su nombre (antes todos iguales: con letra grande «Copiar», «Compartir» e
   «Imagen» se encimaban). Si no caben, bajan a otra fila. */
:root[data-telefono="true"] #movil-seleccion button { flex: 1 0 auto; min-width: 48px; padding: 0 10px; }

/* Números Strong a la vista en ☰ y aviso del módulo con márgenes. */
.movil-mas-strong { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; margin: 8px 0 0; font-size: 1rem; color: inherit; }
.movil-mas-strong input { width: 48px; height: 28px; margin: 0; accent-color: var(--accent); }
:root[data-telefono="true"] #module-status:not(:empty) { margin: 0; padding: 8px 16px; font-size: .85rem; line-height: 1.4; }

/* Fila de herramientas de lectura: visible por defecto, una sola fila, minimizable. */
:root[data-telefono="true"][data-controles-lectura="abiertos"] #library-controls {
  display: flex !important; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 4px 16px; margin: 0;
  overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); background: var(--paper);
}
:root[data-telefono="true"] #library-controls .voice-controls { display: flex; flex-wrap: nowrap; gap: 4px; width: auto; flex: none; }
:root[data-telefono="true"] #library-controls #voice-select,
:root[data-telefono="true"] #library-controls #voice-status { display: none !important; }
:root[data-telefono="true"] #library-controls label.checkbox-label { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 48px; flex: none; font-size: .95rem; color: inherit; white-space: nowrap; }
:root[data-telefono="true"] #library-controls label.checkbox-label input { width: 24px; height: 24px; margin: 0; }
:root[data-telefono="true"] #library-controls button { min-width: 48px; min-height: 48px; padding: 0 8px; flex: none; font-size: 1rem; white-space: nowrap; }
:root[data-telefono="true"] #movil-herr-completa { margin-left: auto; font-size: 1.25rem; }
:root[data-telefono="true"] #movil-herr-plegar { font-size: 1.1rem; }
/* Minimizada: solo una franja con ⌄ para volver a abrirla. */
:root[data-telefono="true"][data-herramientas="mini"] #library-controls > :not(#movil-herr-plegar) { display: none !important; }
:root[data-telefono="true"][data-herramientas="mini"] #library-controls { padding: 0 16px; }
:root[data-telefono="true"][data-herramientas="mini"] #movil-herr-plegar { min-height: 32px; font-size: .85rem; color: var(--muted); }
:root[data-telefono="true"]:not([data-pestana="biblia"]) #library-controls { display: none !important; }

/* La fila cabe en 360 px: sin «■ detener» (⏸ pausa y continúa), separaciones de 4 y botones de icono de 44 de ancho. */
/* Detener vuelve a la vista (Entrega 1): pausa, detener y pantalla completa como iconos de 44 px. */
:root[data-telefono="true"][data-controles-lectura="abiertos"] #library-controls { gap: 4px; padding: 4px 12px; flex-wrap: wrap; overflow-x: visible; }
:root[data-telefono="true"] #library-controls button { min-width: 44px; padding: 0 6px; }
:root[data-telefono="true"] #library-controls .voice-controls { gap: 4px; }

/* ---------- Entrega 1 (CONSENSO-BIBLIAS.md, decisiones de Edward del 12-oct) ---------- */
/* Iconos Lucide: 24×24, trazo 1,75, del color del texto. */
:root[data-telefono="true"] svg.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
:root[data-telefono="true"] .movil-barra-icono svg.ico { width: 24px; height: 24px; }
:root[data-telefono="true"] button.con-ico { display: flex; align-items: center; gap: 12px; text-align: left; }
:root[data-telefono="true"] #movil-versiculo button.con-ico { gap: 4px; }
:root[data-telefono="true"] #movil-seleccion button.con-ico { justify-content: center; gap: 4px; }
#movil-acciones .movil-mas-lista button.con-ico { display: flex; }
:root[data-telefono="true"] #library-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }

/* Las 6 pestañas fijas, con icono y nombre corto (opción A). Si un nombre no cabe (letra del sistema muy grande),
   movil.js pone data-filas="dos": dos filas de tres y el nombre sigue a la vista. */
:root[data-telefono="true"] #movil-pestanas {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: 0 0 var(--seguro-abajo); overflow: visible;
}
:root[data-telefono="true"] #movil-pestanas[data-filas="dos"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root[data-telefono="true"] #movil-pestanas button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 56px;
  padding: 6px 2px 4px; border: 0; border-top: 3px solid transparent; border-radius: 0; background: none; color: var(--muted);
  font-size: .6875rem; font-weight: 600; line-height: 1.15; white-space: nowrap;
}
:root[data-telefono="true"] #movil-pestanas button > span { display: block; max-width: 100%; overflow: hidden; }
:root[data-telefono="true"] #movil-pestanas button[aria-selected="true"] { color: var(--accent); border-top-color: var(--accent); }

/* Pie de capítulo: «‹ Salmos 22 · Salmos 24 ›» sobre las pestañas, nunca encima del texto. */
#movil-pie { display: none; }
:root[data-telefono="true"][data-vista-movil="read-view"][data-pestana="biblia"] #movil-pie {
  display: flex; justify-content: space-between; align-items: stretch; position: fixed; left: 0; right: 0; bottom: var(--pie); z-index: 44;
  padding: 0 4px; background: var(--paper); border-top: 1px solid var(--line);
}
:root[data-telefono="true"][data-barra-versiculo="visible"] #movil-pie,
:root[data-telefono="true"][data-seleccion="varios"] #movil-pie,
:root.lectura-inmersiva #movil-pie { display: none !important; }
:root[data-telefono="true"] #movil-pie .movil-flecha {
  position: static; display: inline-flex; align-items: center; gap: 4px; width: auto; max-width: 50%; height: auto; min-height: 48px;
  padding: 0 12px; border: 0; border-radius: 0; background: none; color: var(--accent); font-size: .875rem; font-weight: 600; opacity: 1;
}
:root[data-telefono="true"] #movil-pie .movil-flecha[hidden] { display: none; }
:root[data-telefono="true"] #movil-pie #movil-flecha-sig { margin-left: auto; }
:root[data-telefono="true"] #movil-pie .movil-flecha-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Comentario: fichas de qué ver; la fuente solo en «Comentario»; estado vacío que guía. */
#movil-coment-modos { display: none; }
:root[data-telefono="true"] #movil-coment-modos { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 8px 16px; flex: none; }
:root[data-telefono="true"] #movil-coment-modos::-webkit-scrollbar { display: none; }
:root[data-telefono="true"] #movil-coment-modos button { flex: none; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); color: var(--ink); font-size: .875rem; font-weight: 600; white-space: nowrap; }
:root[data-telefono="true"] #movil-coment-modos button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
:root[data-telefono="true"] #pane-comentario .graphics-toolbar #graphics-mode { display: none; }
:root[data-telefono="true"]:not([data-coment-modo="comment"]) #comment-select,
:root[data-telefono="true"][data-sin-comentarios="true"] #comment-select { display: none !important; }
:root[data-telefono="true"] #comment-select { width: 100%; }
:root[data-telefono="true"][data-coment-modo="comment"][data-sin-comentarios="true"] #comment-content { display: none !important; }
.movil-vacio { display: grid; justify-items: start; gap: 8px; padding: 24px 16px; color: var(--ink); }
.movil-vacio svg.ico { width: 32px; height: 32px; color: var(--muted); }
.movil-vacio p { margin: 0; line-height: 1.5; color: var(--muted); }
.movil-vacio .movil-vacio-titulo { font-weight: 700; color: var(--ink); font-size: 1.0625rem; }
.movil-vacio-acciones { display: grid; gap: 8px; width: 100%; margin-top: 8px; }
.movil-vacio-acciones button { min-height: 48px; justify-content: flex-start; }
/* Diccionario: fuente a lo ancho, búsqueda debajo; aviso de idioma. */
:root[data-telefono="true"] #dictionary-form { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px; width: 100%; }
:root[data-telefono="true"] #dictionary-form #dictionary-select { width: 100%; max-width: none; }
:root[data-telefono="true"] #dictionary-form .dictionary-query-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.movil-aviso-idioma { margin: 0; font-size: .8125rem; color: var(--muted); }

/* Voz y velocidad en ☰. */
.movil-mas-voz { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; margin: 8px 0 0; }
.movil-mas-voz label { margin: 0; font-size: 1rem; color: inherit; }
:root[data-telefono="true"] .movil-mas-voz select { display: block !important; width: 100%; min-height: 48px; margin: 0; }

/* Dos filas (letra muy grande): icono al lado del nombre y 48 px de alto por fila, para gastar menos pantalla. */
:root[data-telefono="true"] #movil-pestanas[data-filas="dos"] button { flex-direction: row; gap: 6px; min-height: 48px; padding: 0 4px; }
:root[data-telefono="true"] #movil-pestanas[data-filas="dos-alta"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root[data-telefono="true"] #movil-pestanas[data-filas="dos-alta"] button { flex-direction: column; gap: 2px; min-height: 56px; padding: 4px 2px; font-size: .625rem; }
:root[data-telefono="true"] #library-controls[data-compacta="si"] #voice-play span { display: none; }
:root[data-telefono="true"] #pane-biblia #comparison-controls .comparison-actions { flex-wrap: nowrap; }

/* Mantener pulsado un versículo abre la selección de la app: sin el menú de texto de Android encima
   (Traducir · Copiar), que tapaba la barra. Copiar y compartir siguen en la barra de la app. */
:root[data-telefono="true"] #verses .verse { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }