/* ==========================================================================
   eq-numbering.css — Numeración automática de ecuaciones referenciables.
   Pareja JS: eq-numbering.js
   ========================================================================== */

/* Contenedor de la ecuación numerada (clase .eq-numbered se aplica
   sobre .boxed o el elemento marcado con data-eq). */
.eq-numbered{
  position: relative;
  padding-right: 4.2em;  /* deja hueco a la derecha para el número */
}

/* Etiqueta "(N.M)" inyectada por el script. */
.eq-tag{
  position: absolute;
  right: .9em;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif, "Source Serif 4", Georgia, serif);
  font-size: .95em;
  color: var(--muted, #6c6c78);
  letter-spacing: .02em;
  user-select: text;
  white-space: nowrap;
  pointer-events: auto;
}

.eq-tag::before{ content:"("; }
.eq-tag::after { content:")"; }

/* En contenedores muy estrechos, el tag pasa abajo a la derecha. */
@media (max-width: 600px){
  .eq-numbered{ padding-right: 1em; padding-bottom: 1.6em; }
  .eq-tag{
    top: auto;
    bottom: .3em;
    right: .6em;
    transform: none;
  }
}

/* Enlace de referencia a ecuación. */
a.eqref,
.eqref{
  color: var(--accent, #1d4ed8);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  cursor: help;
  position: relative;
  white-space: nowrap;
}

a.eqref:hover,
a.eqref:focus{
  background: var(--accent-soft, #eef3ff);
  outline: none;
}

/* Resaltado momentáneo al saltar a una ecuación. */
.eq-numbered.eq-flash{
  animation: eq-flash 1.6s ease-out;
}
@keyframes eq-flash{
  0%   { background: var(--accent-soft, #eef3ff); box-shadow: 0 0 0 3px var(--accent-soft, #eef3ff); }
  100% { background: transparent; box-shadow: none; }
}

/* Tooltip que muestra el contenido de la ecuación referenciada. */
.eqref-tooltip{
  position: absolute;
  z-index: 9999;
  max-width: min(560px, 92vw);
  padding: .55em .8em .55em .9em;
  background: var(--paper, #fff);
  color: var(--fg, #1a1a1f);
  border: 1px solid var(--rule, #e1ddd0);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.10);
  font-family: var(--serif, Georgia, serif);
  font-size: .95em;
  line-height: 1.35;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease;
}

.eqref-tooltip.is-open{
  opacity: 1;
  transform: translateY(0);
}

.eqref-tooltip .eqref-tooltip-label{
  display: block;
  font-family: var(--sans, sans-serif);
  font-size: .72em;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #6c6c78);
  margin-bottom: .25em;
}

.eqref-tooltip .eqref-tooltip-body{
  display: block;
  overflow-x: auto;
  max-height: 50vh;
}

/* Asegurar contraste en modo oscuro/sepia (las variables --paper/--fg
   se actualizan vía theme.css). */