/* ══════════════════════════════════════════════════════════════════
   REFERENCIAS BÍBLICAS

   Tres piezas: la referencia dentro del texto, la ventanita del
   computador y la tarjeta del teléfono.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* Dos arenas, y no es capricho: la oscura es para el fondo claro de
     las publicaciones, la clara para el fondo oscuro de la ventanita.
     Usar una sola deja uno de los dos apagado. */
  --sr-arena-osc:#8A6520;    /* la referencia, sobre fondo claro */
  --sr-arena:#E0C88F;        /* el pie de la ventanita, sobre fondo oscuro */
  --sr-celeste:#A8C8DC;      /* la referencia dentro de la ventanita */
  --sr-petroleo:#14212B;   /* las dos franjas */
  --sr-tinta:#0D1117;      /* el cuerpo, para que las franjas se vean */
  --sr-borde:#243542;
  --sr-claro:#EDF2F5;
  --sr-suave:#AFC0CA;
}

/* ── LA REFERENCIA EN EL TEXTO ──
   Del color de la Paralela, con un subrayado discreto. Mismo tamaño y
   mismo peso que el texto: se nota que es tocable, no grita.

   El nowrap es lo que impide que «Mateo 13:13» quede partido entre
   dos líneas, con «Mateo» arriba y «13:13» abajo. Eso pasaba con
   RefTagger y dejaba el enlace cortado por la mitad. */
.syrref{
  color:var(--sr-arena-osc);
  text-decoration:none;
  border-bottom:1px solid rgba(138,101,32,.42);
  white-space:nowrap;
  cursor:pointer;
}
.syrref:hover,
.syrref:focus-visible{ border-bottom-color:var(--sr-arena-osc) }
.syrref:focus-visible{ outline:2px solid var(--sr-arena-osc); outline-offset:2px }

/* ══ LA VENTANITA — computador ══ */
.sr-nube{
  position:absolute;
  z-index:9000;
  width:380px;
  max-width:calc(100vw - 32px);
  background:var(--sr-tinta);
  border:1px solid var(--sr-borde);
  border-radius:8px;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.62);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .13s, transform .13s;
  pointer-events:none;
}
.sr-nube.on{ opacity:1; transform:none; pointer-events:auto }

.sr-cab{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; height:38px; padding:0 14px;
  background:var(--sr-petroleo);
  border-bottom:1px solid var(--sr-borde);
  border-radius:8px 8px 0 0;
}
.sr-ref{
  font-size:13px; font-weight:700; letter-spacing:.02em;
  color:var(--sr-celeste);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sr-ver{
  font-size:10px; font-weight:700; letter-spacing:.12em;
  color:var(--sr-suave); flex:none;
}

/* CINCO LÍNEAS Y SE ACABÓ.
   El servidor ya recorta a 260 caracteres; esto es el seguro por si
   una palabra larga o una pantalla angosta desordenan la cuenta. */
.sr-txt{
  padding:12px 14px;
  font-size:14.5px; line-height:1.62;
  color:var(--sr-claro);
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;
  overflow:hidden;
}

.sr-pie{
  display:block; height:34px; line-height:34px;
  padding:0 14px;
  background:var(--sr-petroleo);
  border-top:1px solid var(--sr-borde);
  border-radius:0 0 8px 8px;
  font-size:12px; font-weight:700; letter-spacing:.06em;
  color:var(--sr-arena); text-decoration:none;
}
.sr-pie:hover{ background:#1A2A36 }

/* ══ LA TARJETA — teléfono ══
   Entra desde abajo, al alcance del pulgar, y NO tapa lo que se
   venía leyendo. La ventanita de RefTagger se abre encima del texto
   y cubre tres líneas; esto no. */
.sr-velo{
  position:fixed; inset:0; z-index:8990;
  background:rgba(0,0,0,.42);
  opacity:0; pointer-events:none;
  transition:opacity .18s;
}
.sr-velo.on{ opacity:1; pointer-events:auto }

.sr-hoja{
  position:fixed; left:0; right:0; bottom:0; z-index:9000;
  max-height:45vh;
  display:flex; flex-direction:column;
  background:var(--sr-tinta);
  border-top:1px solid var(--sr-borde);
  border-radius:14px 14px 0 0;
  box-shadow:0 -14px 40px -10px rgba(0,0,0,.6);
  transform:translateY(100%);
  transition:transform .22s cubic-bezier(.22,.61,.36,1);
  padding-bottom:env(safe-area-inset-bottom);
}
.sr-hoja.on{ transform:none }

/* El tirador: dice «esto se puede deslizar» sin escribirlo */
.sr-tirador{
  width:38px; height:4px; margin:9px auto 3px;
  border-radius:2px; background:var(--sr-borde);
  flex:none;
}
/* El tirador va sobre la franja, no sobre el cuerpo */
.sr-hoja{ background:var(--sr-petroleo) }
.sr-hoja .sr-txt{ background:var(--sr-tinta) }
.sr-hoja .sr-cab{ height:44px; border-radius:0 }
/* En el teléfono la letra es más grande, así que los mismos 260
   caracteres ocupan una línea más. Seis, y no hay nada que deslizar:
   el texto entra entero. */
.sr-hoja .sr-txt{
  font-size:16px; -webkit-line-clamp:6;
}
.sr-hoja .sr-pie{
  height:48px; line-height:48px; font-size:13px; text-align:center;
  border-radius:0;
  flex:none;
}

@media (prefers-reduced-motion:reduce){
  .sr-nube,.sr-hoja,.sr-velo{ transition:none }
}