/* Modo enfoque: un solo panel a pantalla completa (escritorio y teléfono). Usa los tokens de cada diseño.
   Los selectores repiten el atributo para ganar a las reglas de diseño y de la capa móvil. */
.enfoque-abrir, .refs-abrir { min-height: 32px; padding: 0 10px; font-size: .85rem; line-height: 1; white-space: nowrap; }
/* PC: acciones en la fila del título de cada panel (Comparar, Pantalla completa, Referencias cruzadas). */
:root:not([data-telefono="true"]) .pane-heading { flex-wrap: wrap; align-self: stretch; min-width: 0; max-width: 100%; }
.pane-ref-fila { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; margin-top: auto; min-width: 0; }
#pane-biblia .pane-ref-fila { align-self: stretch; }
#pane-biblia .pane-ref-fila > .pane-ref { margin-top: 0 !important; flex: 0 1 auto !important; width: auto !important; min-width: 0; }
/* Las acciones no se encogen: si no caben junto al título, bajan juntas a la línea siguiente (nunca bajo la ×). */
.pane-heading .pane-acciones, .pane-ref-fila .pane-acciones { flex: 0 0 auto; max-width: 100%; }
.pane-ref-fila .pane-acciones, .pane-heading .pane-acciones { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 6px; margin-left: auto; min-width: 0; }
.pane-acciones .comparison-actions { display: flex; gap: 6px; }
.pane-acciones .outline { min-height: 32px; padding: 0 10px; font-size: .85rem; white-space: nowrap; }
:root:not([data-telefono="true"]) #comparison-controls:not(:has(.comparison-actions)):not(:has(#compare-options:not([hidden]))) { display: none; }
:root:not([data-telefono="true"]) #connections-box > summary { display: none; }
:root:not([data-telefono="true"]) #connections-box:not([open]) { display: none; }
:root[data-telefono="true"] .refs-abrir { display: none !important; }
.pane-acciones.compactas .etq { display: none; }
.pane-acciones.compactas :is(.enfoque-abrir, .refs-abrir) { min-width: 32px; padding: 0 8px; font-size: 1rem; }
#enfoque-barra { display: none; }

:root[data-enfoque][data-enfoque][data-enfoque] :is(.topbar, .reading-toolbar, .rail, .app-footer, .pane-notes, #ai-pane, #ai-resizer, .pane-resizer,
  #library-controls, #pane-layout-notice, #movil-nav, #movil-hoja-cabecera, #movil-versiculo, #back-to-top, #comparison-controls, .enfoque-abrir) { display: none !important; }
:root[data-enfoque="biblia"][data-enfoque][data-enfoque] :is(#pane-comentario, #pane-diccionario),
:root[data-enfoque="comentario"][data-enfoque][data-enfoque] :is(#pane-biblia, #pane-diccionario),
:root[data-enfoque="diccionario"][data-enfoque][data-enfoque] :is(#pane-biblia, #pane-comentario) { display: none !important; }

:root[data-enfoque="biblia"][data-enfoque][data-enfoque] #pane-biblia,
:root[data-enfoque="comentario"][data-enfoque][data-enfoque] #pane-comentario,
:root[data-enfoque="diccionario"][data-enfoque][data-enfoque] #pane-diccionario {
  display: flex !important; flex-direction: column;
  position: fixed !important; inset: 0; z-index: 80;
  width: auto !important; height: auto !important; max-width: none !important; max-height: none !important;
  margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: var(--paper, Canvas); color: var(--ink, CanvasText);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Columna de lectura cómoda (unos 46 caracteres de ancho por línea en pantalla grande). */
:root[data-enfoque][data-enfoque][data-enfoque] #panes > .pane .pane-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; height: auto !important; max-height: none !important;
  padding: 3.5rem max(1.25rem, calc((100vw - 46rem) / 2)) 6rem !important;
}
:root[data-enfoque][data-enfoque][data-enfoque] #panes > .pane .pane-head { padding-inline: max(1.25rem, calc((100vw - 46rem) / 2)) !important; }
:root[data-enfoque][data-enfoque][data-enfoque] #panes > .pane .pane-close { display: none !important; }
:root[data-enfoque][data-enfoque][data-enfoque] #panes > .pane .pane-foot { padding-inline: max(1.25rem, calc((100vw - 46rem) / 2)) !important; }

:root[data-enfoque] #enfoque-barra:not([hidden]) {
  display: flex; gap: 2px; position: fixed; z-index: 81;
  /* Abajo al centro: nunca tapa los selectores de libro, capítulo y versión de la cabecera. */
  left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  padding: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--paper, Canvas) 88%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  opacity: .75; transition: opacity .2s;
}
:root[data-enfoque] #enfoque-barra:hover, :root[data-enfoque] #enfoque-barra:focus-within { opacity: 1; }
#enfoque-barra button { min-height: 40px; min-width: 40px; padding: 0 10px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { #enfoque-barra { transition: none; } }
/* Teléfono: márgenes más cortos. */
@media (max-width: 599px) {
  :root[data-enfoque][data-enfoque][data-enfoque] #panes > .pane .pane-head { padding-inline: 1.25rem !important; }
  :root[data-enfoque][data-enfoque][data-enfoque] #panes > .pane .pane-body { padding: 1.25rem 1.25rem 5rem !important; }
}