/* ══════════════════════════════════════════════════════════════════
   BIBLIA INTERLINEAL

   Mismo molde que la Paralela. Los colores salen del tema; aquí solo
   se declaran los que la herramienta necesita y el tema no trae.

   Todas las medidas de este archivo están en la especificación, y
   cada una tiene su razón medida — no son gusto.
   ══════════════════════════════════════════════════════════════════ */

.syr-interlineal{--il-lat:265px}

.il{
  display:grid;
  grid-template-columns:var(--il-lat) minmax(0,1fr);
  /* Dos filas: arriba la lateral y el centro; abajo la franja
     gramatical, cruzando las dos columnas y sin moverse. */
  grid-template-rows:minmax(0,1fr) auto;
  /* La pantalla menos la cabecera del tema. medir.js la calcula y la
     deja en --apilado; si no está, se asume 60.

     El max-height va además del height: sin él, con Salmos 119 y sus
     176 versículos la rejilla crecía y empujaba los iconos fuera de
     la pantalla. Es lo mismo que hace la Paralela. */
  height:calc(100vh - var(--apilado, 60px));
  max-height:calc(100vh - var(--apilado, 60px));
  background:var(--tinta,#0D1117);
  color:var(--g050,#EDF2F5);
  overflow:hidden;
}

/* Cada columna se desliza sola y nunca empuja a la otra */
.il-lat,.il-cen{min-height:0;min-width:0}
.il-lat{grid-row:1}
.il-cen{grid-row:1}

/* ══ LA LATERAL ══
   Las mismas medidas que la Biblia Paralela. No se inventa nada: lo
   que ya está probado en una herramienta sirve en la otra, y así el
   visitante no tiene que aprender dos cosas.

   Se desliza solo la rejilla; la barra de abajo no se mueve. */
.il-lat{
  background:var(--noche,#101B26);
  border-right:.5px solid var(--g600,#243542);
  display:flex; flex-direction:column;
  justify-content:flex-start;   /* todo arriba, sin repartir el sobrante */
  overflow:hidden;
  padding:0;
}
.il-lat-arriba{flex:0 0 auto;padding:18px 20px 6px}

/* ── EL TÍTULO ──
   Quien llega desde un enlace compartido no pasa por el inicio, y en
   teléfono la cabecera del sitio se esconde al bajar. Sin esto no se
   sabe qué herramienta se está usando: son tres. */
.il-logo{
  display:block;width:100%;max-width:186px;height:auto;
  margin:0 0 16px;padding-bottom:14px;
  border-bottom:.5px solid var(--g600,#243542);
}
/* En modo claro el crema y el blanco se pierden sobre fondo claro,
   así que el dibujo se oscurece. */
[data-modo="claro"] .il-logo{filter:brightness(.42) saturate(1.5)}

/* Los rótulos y los selectores, igual que la Paralela */
.il-rot{
  height:16px;line-height:16px;
  font-size:11px;font-weight:900;letter-spacing:1.9px;text-transform:uppercase;
  color:var(--g400,#546B7A);margin:0 0 7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.il-rot + .il-rot{margin-top:18px}
.il-sel{
  width:100%;height:48px;padding:0 38px 0 15px;margin:0 0 18px;
  background:var(--petroleo,#14212B);border:.5px solid var(--g600,#243542);
  border-radius:6px;color:var(--g050,#EDF2F5);
  /* 16 px es el mínimo: bajo eso el teléfono hace acercamiento solo
     al tocar el campo y descuadra la página. */
  font-size:16px;font-family:inherit;
  appearance:none;cursor:pointer;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A8C99' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  transition:border-color .2s;
}
.il-sel:hover,.il-sel:focus{border-color:var(--arena,#E0C88F);outline:none}

/* ── La rejilla de versículos ──
   Salmos 119 tiene 176. Se desliza dentro de sí misma; nunca crece
   ni empuja a la barra de abajo.

   Ocupa solo lo que necesita, no todo lo que hay: con Juan son 51
   versículos y ocho filas, y con «flex:1» el resto quedaba vacío y
   la barra se iba al fondo dejando un hueco.

   Números sueltos, sin recuadro. Con borde ocupaban el doble y la
   lateral se veía escandalosa al lado del texto. */
.il-rej{
  flex:0 1 auto;min-height:0;overflow-y:auto;
  padding:0 20px 16px;scrollbar-width:thin;
  display:grid;grid-template-columns:repeat(7,1fr);gap:2px;
  align-content:start;
}
.il-rej button{
  height:30px;display:flex;align-items:center;justify-content:center;
  border:none;border-radius:4px;background:transparent;
  color:var(--g200,#AFC0CA);font-size:13.5px;font-weight:700;
  font-family:inherit;cursor:pointer;padding:0;transition:all .14s;
}
.il-rej button:hover{background:rgba(224,200,143,.13);color:var(--arena,#E0C88F)}
.il-rej button.act{background:var(--arena,#E0C88F);color:var(--tinta,#0D1117);font-weight:900}

/* ── La barra de herramientas ──
   Pegada debajo de la rejilla, no al fondo de la columna. Sin
   «margin-top:auto», que la empujaría al fondo y dejaría un hueco
   justo bajo los números.

   El botón mide 42 y el icono 26: llena casi todo su cuadro. Con 19
   dentro de 40 se veían perdidos y nadie sabía qué eran. */
.il-barra{
  flex:0 0 58px;height:58px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  border-top:.5px solid var(--g600,#243542);
  background:var(--noche,#101B26);
}
.il-ic{
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  border:.5px solid transparent;border-radius:6px;background:none;
  color:var(--g200,#AFC0CA);transition:all .18s;padding:0;
  cursor:pointer;text-decoration:none;
}
.il-ic svg{width:26px;height:26px}
.il-ic:hover{border-color:var(--arena,#E0C88F);color:var(--arena,#E0C88F)}

/* ══ EL CENTRO ══
   Columna en flex. TODOS los hijos van con «flex:0 0 auto».

   Sin eso, flex reparte el faltante encogiendo a los que puedan, y
   el que más se deja es el versículo, porque lleva «overflow:hidden»:
   se comprimía por debajo de sus dos líneas y la segunda salía
   cortada por la mitad (Ap 1:20 lo mostraba). No era el line-clamp:
   era la caja midiendo menos que su contenido. */
.il-cen{
  overflow-y:auto;padding:18px 24px 24px;
  display:flex;flex-direction:column;
}
.il-ref,.il-rv,.il-inv,.il-palabras,.il-flechas{flex:0 0 auto}

.il-ref{font-size:13px;letter-spacing:2px;color:var(--arena,#E0C88F);
  font-weight:900;margin:0 0 8px}

/* El versículo en español: ENTERO, las líneas que haga falta.

   Antes iba limitado a dos y lo que sobraba se cortaba con puntos
   suspensivos. En un interlineal eso no se puede: la línea corrida
   es la referencia contra la que se leen las cajas, y una referencia
   incompleta no sirve de referencia. Los pasajes no miden todos lo
   mismo — el más largo del NT es Apocalipsis 20:4 con 329
   caracteres — así que la zona se adapta al texto, no al revés.

   Lo que se mueve es la columna, que ya sabe desplazarse
   («overflow-y:auto» en .il-cen). Nada se esconde. */
.il-rv{
  font-size:20px;line-height:1.45;color:var(--g050,#EDF2F5);margin:0 0 6px;
}
/* Es la instrucción y el acceso a la mitad de la herramienta: en
   12,5 px gris se leía como nota al pie. */
.il-inv{font-size:16px;color:var(--g200,#AFC0CA);margin:0 0 18px}

/* ══ LAS CAJAS ══
   Alto PAREJO POR FILA, no fijo para todas.

   El alto fijo de 148 era correcto mientras nada se pasara, pero hay
   palabras que sí se pasan: προκεχειροτονημένοις (Hch 10:41, veinte
   letras) desborda el ancho, y «habiendo sido crucificados
   juntamente» (Mt 27:44, 37 caracteres) no entra en dos líneas.

   Con «min-height» y el estiramiento por defecto del flex, las cajas
   de una misma fila siguen midiendo todas lo mismo —que es lo que
   se buscaba— y además la que necesita más, crece. Nada se corta.

   Centradas, porque con la última fila a la izquierda una sola caja
   con todo el ancho vacío al lado se vería como un error.

   El griego en 24 y no en 28: medido, se pasa de 7 palabras por fila
   a 9. A 22 siguen siendo 9, así que se pierde legibilidad sin ganar
   nada. */
.il-palabras{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
  gap:6px;direction:ltr;
}
.il-palabras.heb{direction:rtl}

/* ALTO por contenido, sin mínimo, y las cuatro líneas JUNTAS.

   Antes: mínimo de 148 px y «space-between». El contenido ocupa unos
   82, así que sobraban 66 —casi la mitad de la caja— estirados en un
   hueco en el medio. Con alto fijo el reparto tenía sentido; con la
   caja adaptable, no: solo derrocha pantalla y obliga a desplazar
   para ver las filas de abajo.

   Ahora manda el contenido y las líneas van pegadas con un espacio
   parejo de 3 px. La caja que necesite más, crece; las demás no
   ocupan lo que no usan.

   El ancho lo manda la palabra, SIN TECHO.

   Tenía tope de 200 px y προκεχειροτονημένοις (Hch 10:41, veinte
   letras) no cabía: la caja la partía en dos líneas. En un
   interlineal la palabra griega es el dato — partirla es romper lo
   único que no se puede tocar.

   Quitar el máximo no ensancha las demás: el flex mide cada caja por
   su contenido, así que καί se queda en los 96 de mínimo y solo
   crece la que lo necesita. */
.il-caja{
  flex:0 0 auto;
  min-width:96px;max-width:none;min-height:0;
  background:var(--petroleo,#14212B);border:.5px solid var(--g600,#243542);
  border-radius:8px;padding:9px 8px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:3px;
  text-align:center;direction:ltr;
}
.il-caja:hover{border-color:var(--arena,#E0C88F)}
.il-caja.act{border-color:var(--arena,#E0C88F);background:rgba(224,200,143,.09)}

/* El Strong es dato consultable, no adorno: a 12 px gris oscuro
   costaba leerlo de corrido. */
.il-s   {font-size:13px;color:var(--g400,#546B7A);font-family:ui-monospace,monospace}
/* La palabra griega NO se parte nunca. Ya no hace falta el recurso
   de partirla «donde sea», porque la caja crece hasta donde la
   palabra pida. */
.il-g   {font-size:24px;line-height:1.25;color:var(--g050,#EDF2F5);
         font-family:'Times New Roman',Georgia,serif;
         white-space:nowrap;word-break:keep-all}
/* La morfología era el texto MÁS CHICO de toda la herramienta —8 px
   en gris oscuro— cuando es la mitad de lo que un interlineal viene
   a mostrar. A 11 px y en celeste se lee, y el color la separa del
   Strong sin competir con la traducción en arena. */
.il-m   {font-size:11px;letter-spacing:.04em;color:var(--celeste,#A8C8DC);
         text-transform:lowercase;max-width:100%;overflow-wrap:anywhere}
.il-t   {font-size:12px;color:var(--g400,#546B7A);font-style:italic}
/* Sin límite de líneas, por lo mismo que el versículo: las
   compuestas del léxico se vierten enteras aunque tomen varias
   palabras en español («avaro de ganancia vil», «entrometido en lo
   ajeno», «habiendo sido decapitados con hacha»), y una caja que
   corta la última palabra estaría mintiendo sobre lo que dice el
   griego. La caja crece; la traducción no se toca. */
/* La traducción sí envuelve, y su envoltura tope los 190: si no,
   una compuesta larga («habiendo sido crucificados juntamente»)
   ensancharía la caja de una palabra griega corta. El griego manda
   el ancho; la traducción se acomoda dentro. */
.il-tr  {font-size:14px;color:var(--arena,#E0C88F);line-height:1.25;
         max-width:190px;overflow-wrap:break-word}

/* ── LAS CAJAS DEL HEBREO ──
   Una palabra ESCRITA por caja, con sus piezas adentro.

   וּבִשְׁנַת es una sola palabra en el rollo pero trae tres: «y» +
   «en» + «año». Mostrarlas como tres cajas sueltas es mentir sobre
   el original. */
/* El hebreo es la excepción: la palabra NO se parte nunca
   («white-space:nowrap»), así que si una no cupiera no habría dónde
   envolverla. Aquí el recorte es el mal menor. */
/* Antes: max-width:260px + overflow:hidden. Una caja de cuatro piezas
   («וּלְזַרְעֲךָ» = y · a · simiente · de ti) no cabía, y lo que sobraba
   se cortaba: las piezas estaban en los datos pero no en pantalla.
   Ahora crece como la griega: sin techo y sin recorte. */
.il-caja.heb{max-width:none;min-height:0;overflow:visible}
.il-heb{font-size:27px;line-height:1.5;color:var(--g050,#EDF2F5);
  font-family:'Times New Roman',Georgia,serif;direction:rtl;
  /* La palabra hebrea NO se parte nunca */
  white-space:nowrap}
.il-pz{display:flex;width:100%;border-top:.5px solid var(--g600,#243542);
  margin-top:5px;direction:rtl}
/* Cada pieza apila lo suyo —morfología, transliteración, traducción—
   una debajo de otra, igual que la caja griega. Antes iban en línea y se
   partían a mitad de palabra («t/ierra»). La pieza toma el ancho de su
   contenido (flex:1 0 auto) y no se encoge. */
.il-p1{flex:1 0 auto;min-width:0;padding:5px 5px 2px;text-align:center;direction:ltr;
  display:flex;flex-direction:column;align-items:center;gap:2px}
.il-p1+.il-p1{border-right:.5px solid rgba(36,53,66,.6)}
/* Los prefijos se distinguen solos: fondo más oscuro y traducción en
   gris en vez de arena. Sin leyenda que explicar. */
.il-p1.pref{background:rgba(8,12,18,.35)}
.il-p1.pref .il-tr{color:var(--g200,#AFC0CA)}

.il-flechas{display:flex;gap:10px;margin-top:auto;padding-top:20px}
.il-fl{
  flex:1;height:44px;background:transparent;border:.5px solid var(--g600,#243542);
  border-radius:8px;color:var(--g200,#AFC0CA);font-size:13px;font-family:inherit;
  cursor:pointer;
}
.il-fl:hover{border-color:var(--arena,#E0C88F);color:var(--arena,#E0C88F)}

/* ══ TELÉFONO ══ */
@media (max-width:768px){

  /* Una columna: la lateral arriba, el centro debajo.
     El grid-row hay que soltarlo: en escritorio están los dos en la
     fila 1, y si se queda fijo siguen lado a lado aquí. */
  .il{
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr);
    height:auto;max-height:none;overflow:visible;
  }
  .il-lat{grid-row:auto;grid-column:1}
  .il-cen{grid-row:auto;grid-column:1;overflow:visible}

  /* La lateral pasa a una barra: los dos selectores en fila y los
     iconos debajo. Sin el título ni los rótulos, que en una pantalla
     angosta son cuatro líneas antes de llegar al texto.

     Y sin la rejilla: 176 números en un teléfono ocupan la pantalla
     entera. Se cambia de versículo con las flechas. */
  .il-lat{
    display:flex;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:8px;
    border-right:none;border-bottom:.5px solid var(--g600,#243542);
    padding:12px 20px;
  }
  .il-lat-arriba{
    display:flex;gap:8px;width:100%;padding:0;order:1;
  }
  .il-logo,.il-rot{display:none}

  /* ── LA TIRA DE VERSÍCULOS ──
     Igual que en la Biblia Paralela: una fila que corre de lado, no
     una rejilla.

     Estaba escondida («display:none») con el argumento de que 176
     números llenaban la pantalla. El argumento valía para la rejilla
     de siete columnas, no para una tira: en fila ocupa 38 px de alto
     y se desliza. Y sin ella, ir del versículo 1 al 48 son 47
     toques en las flechas, que es peor. */
  .il-rej{
    display:flex;flex-wrap:nowrap;overflow-x:auto;
    width:100%;order:3;
    gap:0;padding:2px 0 6px;margin:0;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .il-rej::-webkit-scrollbar{display:none}
  /* Ancho mínimo y no encoger: con «1fr» heredado de la rejilla, con
     48 versículos cada número quedaba en dos píxeles. */
  .il-rej button{
    flex:0 0 auto;min-width:46px;height:38px;font-size:15px;
    border-radius:6px;
  }
  .il-sel{flex:1;min-width:0;margin:0;height:44px;padding:0 30px 0 12px}
  .il-barra{
    width:100%;flex:0 0 auto;height:48px;margin:0;order:4;
    border-top:.5px solid var(--g600,#243542);justify-content:space-around;
  }

  .il-cen{padding:14px 20px 24px}
  .il-rv{font-size:16px}

  /* Las flechas, PEGADAS a las cajas.

     En escritorio «margin-top:auto» las deja al pie de la columna,
     que es lo correcto. Aquí no: la fila de cajas es una sola y se
     desliza de lado, así que el contenido es corto, pero la columna
     se estira igual por el «minmax(0,1fr)» de la grilla — y el auto
     mandaba las flechas al fondo dejándolas en un subterráneo, con
     media pantalla de hueco encima. */
  .il-flechas{margin-top:0;padding-top:16px}

  /* Una sola fila que se desliza de lado, con un degradado en el
     borde que avisa que hay más. */
  .il-palabras{
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    gap:5px;padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(to right,#000 92%,transparent);
  }
  /* En la fila que se desliza cada caja mantiene su tamaño (no se
     encoge), pero crece si la palabra lo pide. */
  .il-caja{min-width:82px;max-width:none;min-height:0;flex:0 0 auto}
  .il-g{font-size:20px}
  .il-s,.il-t{font-size:12px}
  .il-m{font-size:10px}
  .il-tr{font-size:13px;max-width:160px}
  .il-caja.heb{max-width:none}
  .il-heb{font-size:23px}
}

/* ══════════════════════════════════════════════════════════════════
   PÁGINA 2 — LA PALABRA

   Cinco fondos distintos, todos oscuros y de la misma familia. Al
   deslizar en el teléfono, el cambio de tono avisa que se entró a
   otra sección. Petróleo y hondo van separados porque se parecen
   demasiado.

   Tres colores de título, no cinco: medido, celeste y calipso se
   confunden entre sí, y arena con terracota. Con tres el color
   agrupa y el icono distingue.
   ══════════════════════════════════════════════════════════════════ */
.ilp{background:var(--tinta,#0D1117);color:var(--g050,#EDF2F5);min-height:60vh;padding:26px 0 40px}
/* Casi todo el ancho, como la Paralela. Con 1180 las tres cajas de
   arriba quedaban angostas y sobraba pantalla a los lados. */
.ilp-env{max-width:1720px;margin:0 auto;padding:0 30px}

.ilp-migas{font-size:13px;color:var(--g400,#546B7A);margin-bottom:18px}
.ilp-migas a{color:var(--calipso,#8FCFC6);text-decoration:none}
.ilp-migas a:hover{text-decoration:underline}
.ilp-migas i{font-style:normal;margin:0 6px;color:var(--g600,#243542)}
.ilp-migas b{color:var(--g050,#EDF2F5);font-weight:700}

.ilp-cab{border-bottom:.5px solid var(--g600,#243542);padding-bottom:18px;margin-bottom:22px}
.ilp-pal{font-size:44px;line-height:1.1;margin:0 0 6px;
  font-family:'Times New Roman',Georgia,serif;color:var(--g050,#EDF2F5)}
.ilp-tl{font-size:18px;color:var(--g200,#AFC0CA);margin:0 0 6px;font-style:italic}
/* La morfología, que antes iba apretada en la franja de la página 1 */
.ilp-morf{font-size:16px;color:var(--g050,#EDF2F5);margin:0 0 6px}
.ilp-como{font-size:18px;color:var(--arena,#E0C88F);margin:0 0 12px}
.ilp-hay{font-size:16px;color:var(--g200,#AFC0CA);margin:0;line-height:1.6}

/* ── LAS TRES FILAS ──
   El ancho para quien lo necesita. Medido sobre 2.124 palabras:
   casi todas las secciones son cortas —la mediana más alta es 304
   caracteres— pero dos se disparan a 3.500 y 5.600 en el 10% de los
   casos.

   Si fueran todas del mismo ancho, esas dos obligarían a que las
   ocho fueran anchas, y se perdería media pantalla en las que solo
   tienen tres líneas.                                              */
/* Las columnas las pone el código, según cuántas cajas le tocan a
   cada fila. Así nunca queda un hueco, venga lo que venga. */
.ilp-fila{display:grid;gap:14px;margin-bottom:14px;align-items:start}

.ilp-sec{border-radius:10px;overflow:hidden;
  border:.5px solid var(--g600,#243542)}
.ilp-sec header{height:48px;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;border-bottom:.5px solid rgba(36,53,66,.7)}
.ilp-sec h3{font-size:13px;letter-spacing:1.6px;font-weight:900;margin:0;text-transform:uppercase}
.ilp-sec header span{font-size:11.5px;color:var(--g400,#546B7A)}

/* Ocho fondos, todos oscuros y de la misma familia. Al deslizar en
   el teléfono, el cambio de tono avisa que se entró a otra sección.
   Los que se parecen van separados en el orden. */
.ilp-sec.ace{background:#141C24}
.ilp-sec.def{background:#14212B}
.ilp-sec.sig{background:#101B26}
.ilp-sec.ori{background:#0F1922}
.ilp-sec.cla{background:#121F28}
.ilp-sec.esc{background:#111E28}
.ilp-sec.tra{background:#0E1A21}
.ilp-sec.for{background:#131D26}

/* Tres colores de título, no ocho. Medido: celeste y calipso se
   confunden entre sí, y arena con terracota. Con tres el color
   agrupa —qué es la palabra / cómo se usa / con qué se relaciona— y
   el nombre distingue cada una. */
/* Toda la paleta, una por sección: así se distinguen de un vistazo,
   como en la Paralela. */
.ilp-sec.for h3{color:var(--calipso,#8FCFC6)}
.ilp-sec.ace h3{color:var(--celeste,#A8C8DC)}
.ilp-sec.sig h3{color:var(--arena,#E0C88F)}
.ilp-sec.cla h3{color:#D99C7A}
.ilp-sec.def h3{color:var(--celeste,#A8C8DC)}
.ilp-sec.ori h3{color:var(--calipso,#8FCFC6)}
.ilp-sec.esc h3{color:var(--arena,#E0C88F)}
.ilp-sec.tra h3{color:#D99C7A}

/* Y una tira del mismo color a la izquierda, que es lo que en la
   Paralela hace que cada caja se reconozca sin leer el título. */
.ilp-sec{border-left-width:3px;border-left-style:solid}
.ilp-sec.for{border-left-color:var(--calipso,#8FCFC6)}
.ilp-sec.ace{border-left-color:var(--celeste,#A8C8DC)}
.ilp-sec.sig{border-left-color:var(--arena,#E0C88F)}
.ilp-sec.cla{border-left-color:#D99C7A}
.ilp-sec.def{border-left-color:var(--celeste,#A8C8DC)}
.ilp-sec.ori{border-left-color:var(--calipso,#8FCFC6)}
.ilp-sec.esc{border-left-color:var(--arena,#E0C88F)}
.ilp-sec.tra{border-left-color:#D99C7A}

.ilp-cuerpo{padding:14px 16px;font-size:15px;line-height:1.7;color:var(--g200,#AFC0CA)}
.ilp-cuerpo b,.ilp-cuerpo strong{color:var(--g050,#EDF2F5)}
.ilp-cuerpo a{color:var(--calipso,#8FCFC6)}

/* Los 420 px son un punto de partida, no un número definitivo: la
   mitad de las entradas son cortas y caben enteras, pero Tuggy llega
   a 80.000 caracteres en las palabras importantes — que son justo
   las que la gente busca. */
/* Asomo corto: con ocho cajas a la vista lo que importa es que se
   vean TODAS las cabeceras de una, para saber qué hay antes de abrir
   nada. El que quiera leer, abre. */
.ilp-cuerpo.asomo{max-height:230px;overflow:hidden;
  mask-image:linear-gradient(to bottom,#000 70%,transparent)}
.ilp-cuerpo.abierta{max-height:70vh;overflow-y:auto}

.ilp-mas{width:100%;height:44px;background:rgba(58,86,102,.16);border:none;
  border-top:.5px solid rgba(36,53,66,.7);color:var(--g200,#AFC0CA);
  font-size:12px;font-weight:900;letter-spacing:1.4px;font-family:inherit;cursor:pointer}
.ilp-mas:hover{background:rgba(58,86,102,.3);color:var(--arena,#E0C88F)}

.ilp-vacio{color:var(--g400,#546B7A);font-style:italic;padding:20px 0}

/* Tres formas de volver: el menú del sitio, este botón, y las migas */
.ilp-volver{margin-top:22px}
/* El mismo estilo que el botón que trae hasta aquí */
.ilp-btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--arena,#E0C88F);color:var(--tinta,#0D1117);
  font-size:13px;font-weight:900;letter-spacing:1.1px;
  padding:13px 22px;border-radius:8px;text-decoration:none;white-space:nowrap;
}
.ilp-btn svg{width:18px;height:18px}
.ilp-btn:hover{filter:brightness(1.08)}
@media (max-width:768px){
  .ilp-btn{width:100%;justify-content:center;padding:14px;font-size:12.5px}
}

@media (max-width:768px){
  /* Todas a una columna, en el mismo orden */
  .ilp-fila{grid-template-columns:1fr!important}
  .ilp-env{padding:0 20px}
  .ilp-pal{font-size:34px}
  .ilp-sec header{padding:0 13px}
  .ilp-cuerpo{padding:12px 13px;font-size:15px}
}

/* ══════════════════════════════════════════════════════════════════
   CLARO Y OSCURO — solo el interlineal

   No toca el resto del sitio: quien lee puede querer fondo claro sin
   que le cambie el inicio.
   ══════════════════════════════════════════════════════════════════ */
.il[data-modo="claro"]{
  --tinta:#F4F1EA; --petroleo:#FFFFFF; --noche:#EAE6DC;
  --g600:#D6CFC0; --g400:#7A7264; --g200:#4A443A; --g050:#1A1712;
  background:#F4F1EA; color:#1A1712;
}
.il[data-modo="claro"] .il-lat{background:#EAE6DC;border-right-color:#D6CFC0}
.il[data-modo="claro"] .il-logo{filter:brightness(.42) saturate(1.5)}
.il[data-modo="claro"] .il-caja{background:#FFF;border-color:#D6CFC0}
.il[data-modo="claro"] .il-g,
.il[data-modo="claro"] .il-heb{color:#1A1712}
.il[data-modo="claro"] .il-tr{color:#8A6520}
.il[data-modo="claro"] .il-s,
.il[data-modo="claro"] .il-m,
.il[data-modo="claro"] .il-t{color:#7A7264}
.il[data-modo="claro"] .il-rv{color:#1A1712}
.il[data-modo="claro"] .il-sel{background:#FFF;color:#1A1712;border-color:#D6CFC0}
.il[data-modo="claro"] .il-rej button{color:#4A443A}
.il[data-modo="claro"] .il-fl{color:#4A443A;border-color:#D6CFC0}
.il[data-modo="claro"] .il-ic{color:#4A443A}

/* ══ TAMAÑO DE LETRA ══
   Tres pasos. Todo lo demás está declarado en función de la caja. */
.il[data-letra="grande"] .il-g   {font-size:28px}
.il[data-letra="grande"] .il-heb {font-size:31px}
.il[data-letra="grande"] .il-tr  {font-size:16px}
.il[data-letra="grande"] .il-rv  {font-size:23px}
.il[data-letra="grande"] .il-caja{height:166px;min-width:110px;max-width:150px}

.il[data-letra="mayor"] .il-g    {font-size:32px}
.il[data-letra="mayor"] .il-heb  {font-size:35px}
.il[data-letra="mayor"] .il-tr   {font-size:18px}
.il[data-letra="mayor"] .il-rv   {font-size:26px}
.il[data-letra="mayor"] .il-caja {height:186px;min-width:124px;max-width:170px}

/* La caja HEBREA no lleva la altura fija ni el ancho máximo de los
   tamaños grandes: trae varias piezas, y con altura fija la traducción
   de abajo quedaba cortada (Gn 49:6 וּבִרְצֹנָם: caja de 206 px para un
   contenido de 349). Crece lo que pida. La caja griega sigue igual. */
.il[data-letra="grande"] .il-caja.heb,
.il[data-letra="mayor"] .il-caja.heb{height:auto;max-width:none}

/* ══ LAS VENTANAS ══ */
/* El «hidden» del HTML no gana contra un display declarado. Sin esta
   línea la ventana se abre sola y tapa la página. */
.il-modal[hidden]{display:none}

.il-modal{
  position:fixed;inset:0;z-index:9000;
  background:rgba(5,8,12,.72);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.il-caja-modal{
  width:100%;max-width:560px;max-height:82vh;display:flex;flex-direction:column;
  background:var(--petroleo,#14212B);border:.5px solid var(--g600,#243542);
  border-radius:12px;overflow:hidden;
}
.il-caja-modal header{
  height:54px;flex:0 0 54px;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;border-bottom:.5px solid var(--g600,#243542);
}
.il-caja-modal h3{
  margin:0;font-size:13px;font-weight:900;letter-spacing:1.8px;
  color:var(--arena,#E0C88F);
}
.il-cerrar{
  width:34px;height:34px;background:none;border:none;border-radius:6px;
  color:var(--g200,#AFC0CA);font-size:24px;line-height:1;cursor:pointer;
}
.il-cerrar:hover{background:rgba(58,86,102,.25);color:var(--arena,#E0C88F)}
.il-modal-cuerpo{padding:18px;overflow-y:auto}

/* ── Buscar ── */
#ilBuscaCampo{
  width:100%;height:48px;padding:0 14px;
  background:var(--tinta,#0D1117);border:.5px solid var(--g600,#243542);
  border-radius:8px;color:var(--g050,#EDF2F5);
  font-size:16px;font-family:inherit;
}
#ilBuscaCampo:focus{outline:none;border-color:var(--arena,#E0C88F)}
.il-busca-ayuda{font-size:12.5px;color:var(--g400,#546B7A);margin:8px 0 0;line-height:1.5}
.il-busca-res{margin-top:14px}
.il-busca-fila{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;margin-bottom:6px;border-radius:8px;text-decoration:none;
  background:var(--tinta,#0D1117);border:.5px solid var(--g600,#243542);
}
.il-busca-fila:hover{border-color:var(--arena,#E0C88F)}
.il-busca-fila b{color:var(--g050,#EDF2F5);font-size:15px}
.il-busca-fila span{color:var(--g400,#546B7A);font-size:12.5px}
.il-busca-nada{color:var(--g400,#546B7A);font-size:14px;font-style:italic}

/* ── Compartir ── */
.il-previo{
  background:var(--tinta,#0D1117);border:.5px solid var(--g600,#243542);
  border-radius:8px;padding:14px;margin-bottom:14px;max-height:230px;overflow-y:auto;
}
.il-previo .ilp-ref {font-size:13px;font-weight:900;color:var(--arena,#E0C88F);margin:0 0 8px}
.il-previo .ilp-orig{font-size:16px;color:var(--g050,#EDF2F5);margin:0 0 5px;
                     font-family:'Times New Roman',Georgia,serif;line-height:1.6}
.il-previo .ilp-orig.heb{direction:rtl;text-align:right;font-size:18px}
.il-previo .ilp-esp {font-size:14px;color:var(--g200,#AFC0CA);margin:0 0 10px;line-height:1.6}
.il-previo .ilp-url {font-size:12px;color:var(--calipso,#8FCFC6);margin:0;word-break:break-all}

.il-redes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.il-red{
  height:46px;display:flex;align-items:center;justify-content:center;
  background:var(--tinta,#0D1117);border:.5px solid var(--g600,#243542);
  border-radius:8px;color:var(--g200,#AFC0CA);
  font-size:14px;font-family:inherit;text-decoration:none;cursor:pointer;
}
.il-red:hover{border-color:var(--arena,#E0C88F);color:var(--arena,#E0C88F)}
.il-red.ancho{grid-column:1 / -1;background:var(--arena,#E0C88F);
              color:var(--tinta,#0D1117);border-color:var(--arena,#E0C88F);font-weight:700}

@media (max-width:768px){
  .il-modal{padding:0;align-items:flex-end}
  .il-caja-modal{max-width:none;max-height:88vh;border-radius:14px 14px 0 0}
}

/* ══ VOLTEAR EL HEBREO ══
   El hebreo va de derecha a izquierda, que es como se lee. Con el
   botón se pone al derecho, para quien no está acostumbrado.

   El texto en español NO se voltea nunca: es una cita, no el
   original. Y en las cajas la traducción sigue a su palabra hebrea
   esté como esté puesta — solo cambia el orden de las cajas. */
.il-palabras.heb.volteado{direction:ltr}
/* Volteado, las piezas de cada caja también van de izquierda a
   derecha: el prefijo queda delante, como se lee en español
   («y · arruinaron»). La palabra hebrea de arriba no cambia. */
.il-palabras.heb.volteado .il-pz{direction:ltr}
.il-palabras.heb.volteado .il-p1+.il-p1{border-right:0;border-left:.5px solid rgba(36,53,66,.6)}
.il-ic.act{border-color:var(--arena,#E0C88F);color:var(--arena,#E0C88F);
  background:rgba(224,200,143,.12)}

/* ══ LOS CUATRO QUE ROBINSON NO TRAE ══
   Es contenido, no un error: la persona aprende algo que en otras
   Biblias no le explican. */
.il-ausente{
  max-width:70ch;margin:10px auto;padding:20px 22px;
  background:var(--petroleo,#14212B);border:.5px solid var(--g600,#243542);
  border-left:3px solid var(--celeste,#A8C8DC);border-radius:10px;
}
.il-ausente h4{
  margin:0 0 12px;font-size:15px;font-weight:900;
  color:var(--celeste,#A8C8DC);letter-spacing:.3px;
}
.il-ausente p{margin:0 0 10px;font-size:15px;line-height:1.65;color:var(--g200,#AFC0CA)}
.il-ausente-txt{
  margin-top:16px;padding-top:14px;border-top:.5px solid var(--g600,#243542);
}
.il-ausente-txt span{
  display:block;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--g400,#546B7A);margin-bottom:7px;
}
.il-ausente-txt p{
  margin:0;font-size:16px;line-height:1.7;color:var(--g050,#EDF2F5);font-style:italic;
}


/* ══ EL AVISO DE LA DOXOLOGÍA DE ROMANOS ══
   Distinto del cartel de los ausentes: aquí SÍ hay cajas arriba, así
   que el aviso va debajo y en arena, no en celeste. No compite con el
   texto: lo explica. */
.il-aviso{
  max-width:70ch;margin:22px auto 4px;padding:16px 18px;
  background:var(--petroleo,#14212B);border:.5px solid var(--g600,#243542);
  border-left:3px solid var(--arena,#E0C88F);border-radius:10px;
}
.il-aviso h4{
  margin:0 0 10px;font-size:14px;font-weight:900;
  color:var(--arena,#E0C88F);letter-spacing:.3px;
}
.il-aviso p{margin:0 0 8px;font-size:14.5px;line-height:1.6;color:var(--g200,#AFC0CA)}
.il-aviso p:last-child{margin-bottom:0}
.il-aviso a{
  color:var(--calipso,#8FCFC6);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;
}
.il-aviso a:hover{color:var(--arena,#E0C88F)}

/* ══ LAS CITAS Y LOS STRONG DENTRO DE LOS DICCIONARIOS ══
   El circuito: de una palabra se llega a otra, y de una cita al
   versículo. */
.ilp-cita{
  color:var(--calipso,#8FCFC6);text-decoration:none;cursor:pointer;
  border-bottom:1px dotted rgba(143,207,198,.45);
}
.ilp-cita:hover{border-bottom-style:solid;color:var(--arena,#E0C88F)}
.ilp-strong{
  color:var(--celeste,#A8C8DC);text-decoration:none;
  font-family:ui-monospace,monospace;font-size:.94em;
  border-bottom:1px dotted rgba(168,200,220,.45);
}
.ilp-strong:hover{border-bottom-style:solid;color:var(--arena,#E0C88F)}

/* ══ LOS POPUP ══
   En una lista de veinte sinónimos, un enlace obliga a salir veinte
   veces. La ventanita muestra lo esencial sin perder el hilo. */
.ilp-pop[hidden]{display:none}
.ilp-pop{
  position:absolute;z-index:9500;width:330px;max-width:calc(100vw - 24px);
  background:var(--petroleo,#14212B);border:.5px solid var(--g600,#243542);
  border-radius:10px;padding:13px 15px;
  box-shadow:0 10px 28px rgba(0,0,0,.5);
}
.ilp-pop-ref{
  margin:0 0 5px;font-size:13px;font-weight:900;letter-spacing:.5px;
  color:var(--arena,#E0C88F);
}
.ilp-pop-tl{margin:0 0 6px;font-size:12.5px;color:var(--g400,#546B7A);font-style:italic}
.ilp-pop-txt{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--g200,#AFC0CA)}
.ilp-pop-cargando{margin:0;font-size:13px;color:var(--g400,#546B7A);font-style:italic}
.ilp-pop-ir{
  display:inline-block;font-size:12.5px;font-weight:700;
  color:var(--calipso,#8FCFC6);text-decoration:none;
}
.ilp-pop-ir:hover{color:var(--arena,#E0C88F)}

/* En teléfono se levanta desde abajo, al alcance del pulgar */
.ilp-pop.tactil{
  position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;
  border-radius:14px 14px 0 0;padding:18px 20px 24px;
  box-shadow:0 -10px 28px rgba(0,0,0,.55);
}
.ilp-pop.tactil .ilp-pop-txt{font-size:15px}
.ilp-pop.tactil .ilp-pop-ir{font-size:14px;padding:8px 0}

/* EL TÍTULO DE LOS SALMOS: va delante del versículo 1, como en la
   Valera. La línea marca el fin de su versículo hebreo (sof pasuq);
   en el texto corrido, el título en cursiva y menor, como lo imprime
   la Valera. */
.il-sep{flex:0 0 100%;height:0;border-top:1px solid var(--g500,#5A7180);margin:4px 0}
.il-rv .il-rvt{font-size:.85em;font-style:italic}