/**
 * components.css — Reusable UI: .button, .slide-footer.
 * Depends on: variables.css.
 */

.button {
  align-items: center;
  border-radius: var(--button-border-radius);
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-button);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  gap: var(--spacing-1);
  line-height: 1.5;
  padding-block: var(--button-padding-block);
  padding-inline: var(--button-padding-inline);
  text-decoration: none;
  transition: all var(--button-transition-duration) var(--button-transition-type);
  white-space: normal;
  -webkit-font-smoothing: antialiased;
}
.button--primary {
  background-color: var(--button-primary-bg);
  border: 0.125rem solid var(--button-primary-border);
  box-shadow: 0 0.125rem 0.25rem 0 var(--button-box-shadow);
  color: var(--button-primary-fg);
}
.button--primary:hover,
.button--primary:focus {
  background-color: var(--button-primary-bg-hover);
  box-shadow: 0 0.5rem 0.5rem 0 var(--button-box-shadow);
  text-decoration: none;
}

.slide-footer {
  font-family: var(--font-acumin);
  font-weight: var(--fw-regular);
  position: absolute;
  bottom: calc(var(--nav-bar-h) + 1.5rem);
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(0.65rem, 1.5vw, 0.7rem);
  color: var(--color-text);
  opacity: 0.7;
}
.slide-cover .slide-footer {
  color: rgba(255,255,255,0.75);
  bottom: calc(var(--nav-bar-h) + 2rem);
}

/* ---- Citation references: DaisyUI btn btn-link btn-xs text-primary; only citation-specific ---- */
.cite-ref {
  display: inline;
  vertical-align: super;
  font-size: 0.7em;
  line-height: 0;
  font-family: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.cite-ref:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
/* Tooltip de referencias (clic): fondo oscuro transparente, texto blanco */
.cite-tooltip {
  font-family: var(--font-acumin);
  font-weight: var(--fw-regular);
  position: fixed;
  z-index: 350;
  max-width: min(90vw, 420px);
  padding: var(--space-type-snug) var(--space-type-relaxed);
  background-color: rgba(20, 33, 40, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  letter-spacing: var(--text-caption-tracking);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.cite-tooltip__title { font-family: var(--font-acumin); font-weight: var(--fw-bold); margin-bottom: 0.35em; color: #fff; }
.cite-tooltip__list { margin: 0; padding-left: 1.2em; color: #fff; }
.cite-tooltip__list li { margin-bottom: 0.25em; }
.cite-tooltip__list li:last-child { margin-bottom: 0; }

/* Tooltip hover de referencias (DaisyUI): mismo estilo oscuro transparente y texto blanco */
.tooltip-cite-ref {
  --tt-bg: rgba(20, 33, 40, 0.92);
}
.tooltip-cite-ref[data-tip]:before {
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tooltip-cite-ref:after {
  background-color: rgba(20, 33, 40, 0.92);
}