/* biblical-earth · estilos base: marco de la página, barra superior, ficha como contenedor y avisos.
   Parte de kit/tokens.css y kit/components.css (copiados de las maquetas). Congelado durante el reparto. */

:root { --panel-w: 400px; --timeline-h: 250px; --topbar-h: 60px; }
/* La página no se desplaza nunca: todo cabe en la ventana y cada marco desplaza lo suyo. Sin esto, un solo píxel de más
   (un aviso para lectores de pantalla colgado del body) sacaba la barra vertical, y con ella la horizontal. */
html, body { height: 100%; overflow: hidden; }
.app { position: relative; height: 100vh; height: 100dvh; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: var(--link); }
:root:not(.be-reunion) ::selection { background: var(--accent-soft); color: var(--ink); }

/* ---------- Barra superior ---------- */
.be-logo { text-decoration: none; }
/* Con la búsqueda o el menú Estudio abiertos, la barra pasa por encima de la ficha y de las vistas: sus desplegables no
   quedan debajo. Cerrados, las vistas (grafo, lectura) tapan los botones del mapa que en el móvil cuelgan de la barra. */
.be-topbar:has(.resultados:not([hidden]), .estudio-menu:not([hidden])) { z-index: 7; }
.buscador { min-width: 0; }
.buscador .be-search { min-width: 0; }
.buscador input { min-width: 0; width: 100%; }
.fecha { min-width: 0; flex-shrink: 0; }   /* la fecha no se encoge: cede la búsqueda */
.modos .be-seg__opt { border: 0; background: transparent; cursor: pointer; }
.modos .be-seg__opt--on { background: var(--surface); }
#compartir { cursor: pointer; flex: none; }
.filtro { min-width: 0; flex-shrink: 1; }
/* En la barra de la línea de tiempo, el botón «Sobre las fechas» (linea.js; estilo en linea.css, .fechas-boton). */
.linea-barra .cronologia { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; cursor: help; }
.acerca-enlace { flex: none; gap: 6px; text-decoration: none; color: var(--ink-2); }
.be-presentando .acerca-enlace { display: none; }
/* Con poco sitio la búsqueda se queda en la lupa: el texto de ayuda cortado a media palabra no ayuda. */
.buscador .be-search { container-type: inline-size; }
@container (max-width: 96px) { .buscador input::placeholder { color: transparent; } }
/* Los modos del mapa se quedan en tres iconos cuando falta sitio; el nombre sigue en el texto emergente y para los
   lectores de pantalla (font-size 0 no lo quita del árbol de accesibilidad). */
@media (max-width: 1599px) {
  .modos .be-seg__opt { font-size: 0; gap: 0; padding: 0 10px; }
  .modos .be-seg__opt .be-i { width: 16px; height: 16px; }
}
@media (max-width: 1099px) {
  .logo-text, .acerca-texto, .estudio-texto { display: none; }
  .acerca-enlace { padding: 0 6px; }
  .be-date__value { font-size: 19px; }
}

/* ---------- Fecha de la barra: se ve que se puede escribir ---------- */
/* Un lápiz y «Ir a» al lado de la fecha, y el borde que se marca al pasar: es un campo, no un rótulo (linea.js, editarFecha). */
.fecha-ir { display: inline-flex; align-items: center; gap: 4px; align-self: center; margin-left: 2px; padding: 2px 8px 2px 6px; border-radius: var(--r-pill); border: 1px solid var(--gold-line); color: var(--gold-ink); background: var(--surface); font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; }
.fecha-ir .be-i { width: 13px; height: 13px; }
#fecha { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
#fecha:hover, #fecha:focus-visible { border-color: var(--gold-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-ink) 14%, transparent); }
#fecha:hover .be-date__value { text-decoration: underline dotted 1.5px; text-underline-offset: 4px; }
#fecha.editando .fecha-ir { visibility: hidden; }
@media (max-width: 1439px) { .fecha-ir__texto { display: none; } .fecha-ir { padding: 3px; } }   /* el texto, solo con sitio de sobra */

/* ---------- Modo reunión: botón propio en la barra ---------- */
#reunion-boton { cursor: pointer; flex: none; }
#reunion-boton[aria-pressed="true"] { background: var(--gold-soft); color: var(--gold-ink); border-color: var(--gold-line); }

/* ---------- Separadores: la ficha y la línea de tiempo cambian de tamaño (base.js, marcos) ---------- */
.separador { position: absolute; z-index: 6; touch-action: none; outline: none; }
.separador--panel { top: var(--topbar-h); bottom: var(--timeline-h); right: calc(var(--panel-w) - 5px); width: 10px; cursor: col-resize; }
.separador--linea { left: 0; right: 0; bottom: calc(var(--timeline-h) - 5px); height: 10px; cursor: row-resize; }
/* La raya que se marca al pasar, al arrastrar y con el foco. */
.separador::before { content: ""; position: absolute; background: var(--focus); opacity: 0; transition: opacity .12s; }
.separador--panel::before { top: 0; bottom: 0; left: 4px; width: 2px; }
.separador--linea::before { left: 0; right: 0; top: 4px; height: 2px; }
.separador:hover::before, .separador:focus-visible::before, .separador.arrastrando::before { opacity: 1; }
/* El asa, siempre visible: una píldora con contorno claro, que se ve sobre el mapa y sobre la ficha. */
.separador::after { content: ""; position: absolute; border-radius: 3px; background: var(--ink-3); box-shadow: 0 0 0 2px var(--surface); }
.separador--panel::after { top: 50%; left: 3px; width: 4px; height: 36px; margin-top: -18px; }
.separador--linea::after { left: 50%; top: 3px; width: 40px; height: 4px; margin-left: -20px; }
.separador:hover::after, .separador:focus-visible::after, .separador.arrastrando::after { background: var(--focus); }
.separador:focus-visible { outline: none; }
/* Mientras se arrastra, el mapa y los iframes no se quedan el puntero. */
.marco-arrastrando, .marco-arrastrando * { user-select: none !important; }
.marco-arrastrando .mapa-gl, .marco-arrastrando iframe { pointer-events: none; }
.be-presentando .separador { display: none; }

/* ---------- Hoja inferior y avisos ---------- */
.sobre-hoja { display: none; }
.aviso { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 6; padding: 8px 14px; border-radius: var(--r-md); background: var(--ink); color: #fbf7ef; font-size: var(--fs-sm); box-shadow: var(--shadow-3); max-width: 90%; }

/* ---------- Ficha: contenedor ---------- */
.panel::after { display: none; }
.hoja-asa { display: none; }
.panel-cuerpo { flex: 1; overflow: auto; padding: 14px 16px 28px; display: flex; flex-direction: column; gap: 12px; background: var(--surface-2); outline: none; }
.panel-cuerpo > * { flex-shrink: 0; }
.panel-cuerpo .be-card__title { font-size: var(--fs-3xl); }

/* ---------- Tabletas en vertical y móviles: los tres mapas y el modo reunión bajan al mapa ---------- */
/* En la barra le quitaban a la búsqueda el sitio que no tiene: a 768 px quedaba en «Busca». */
@media (max-width: 900px) {
  .modos { position: absolute; top: calc(var(--topbar-h) + 10px); left: 10px; z-index: 4; box-shadow: var(--shadow-2); }
  .modos .be-seg__opt { height: 28px; padding: 0 9px; }
  #reunion-boton { position: absolute; top: calc(var(--topbar-h) + 10px); left: 134px; z-index: 4; width: 36px; height: 36px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
}

/* ---------- Pantallas estrechas: hoja inferior ---------- */
@media (max-width: 760px) {
  :root { --topbar-h: 56px; --timeline-h: 250px; }
  .be-app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "map" "time"; }   /* una ficha ancha no ensancha la página */
  /* Alto máximo de la hoja. Sin %: un % deja que la ficha estire la fila del mapa. Sin alto elegido a mano, la hoja deja
     al menos 210 px de mapa para sus botones (con la línea ampliada, el mapa quedaba en 80 px). */
  .be-app { --hoja-max: max(96px, min(var(--hoja-h, min(34vh, calc(100dvh - var(--topbar-h) - var(--timeline-h) - 210px))), calc(100dvh - var(--topbar-h) - var(--timeline-h) - 16px))); }
  .be-topbar { gap: 8px; padding: 0 10px; }
  .logo-text, .be-date__hint, #compartir, .acerca-texto { display: none !important; }
  .acerca-enlace { width: 30px; padding: 0; justify-content: center; }
  #fecha { gap: 5px; }
  .fecha-ir { border: 0; background: none; padding: 0; margin-left: 0; }   /* solo el lápiz: la búsqueda necesita el sitio */
  #fecha.editando { min-width: 186px; }   /* al escribir, la fecha toma el sitio de la búsqueda: su ejemplo se lee entero */
  .buscador { min-width: 44px; }   /* y la búsqueda se queda en su lupa, entera */
  .be-topbar > .be-spacer { display: none; }
  .be-date { padding: 4px 10px; }
  .be-date__value { font-size: 17px; }
  .separador--panel { display: none; }
  .be-app > .be-panel { grid-area: map; align-self: end; z-index: 5; max-height: var(--hoja-max); border-left: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -6px 30px rgba(40, 28, 10, .18); overflow: visible; }
  /* Arriba de la hoja, bajo el asa: el suceso de esta fecha en una línea y el botón de la leyenda. Iban flotando encima
     de la hoja y tapaban el mapa y lo que flota en él (el recorrido, «Ahora mismo», el grafo). Dentro de la hoja se ven
     también con la hoja plegada. */
  .sobre-hoja { display: flex; align-items: center; gap: 8px; order: 0; flex: none; padding: 0 10px 8px; background: var(--surface); border-bottom: 1px solid var(--line); }
  .sobre-hoja:not(:has(> :not([hidden]))) { display: none; }
  .hoja-asa { order: -1; }
  .panel.plegada .panel-cuerpo { display: none; }
  .hoja-asa { display: block; width: 100%; border: 0; border-radius: 18px 18px 0 0; background: var(--surface); padding: 8px 0 2px; cursor: pointer; touch-action: none; }
  /* flex: none: la ficha es una columna flexible y encogía el asa a medio píxel. El asa es un span: sin display: block
     no se veía la raya. */
  .hoja-asa { flex: none; }
  .hoja-asa .be-sheet__grip { display: block; margin: 0 auto; }
  .panel-cuerpo { padding: 6px 12px 18px; }
  .panel-cuerpo .be-card__title { font-size: var(--fs-2xl); }
}