/* Tour de primer uso del lector (reader-onboarding.js) */
.onb-highlight {
  outline: 3px solid #1d4ed8;
  outline-offset: 3px;
  border-radius: 6px;
}

.onb-card {
  --onb-arrow-left: 50%;
  --onb-arrow-top: 50%;
  position: fixed;
  z-index: 10010;
  width: min(320px, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 16px 18px;
  background: #fff;
  color: #1f2937;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.22);
  font-family: 'Nunito', system-ui, sans-serif;
  line-height: 1.4;
}

.onb-card::before {
  content: '';
  position: absolute;
  left: var(--onb-arrow-left);
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: inherit;
  transform: rotate(45deg);
  display: none;
}
.onb-card.onb-below::before { display: block; top: -6px; }
.onb-card.onb-above::before { display: block; bottom: -6px; }
.onb-card.onb-left::before,
.onb-card.onb-right::before { left: auto; margin-left: 0; top: var(--onb-arrow-top); margin-top: -6px; }
.onb-card.onb-left::before { display: block; right: -6px; }
.onb-card.onb-right::before { display: block; left: -6px; }

.onb-count { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: #5b6678; }
.onb-title { margin: 0 0 6px; font-size: 17px; font-weight: 900; color: #0f2a5c; text-shadow: none; }
.onb-text { margin: 0 0 14px; font-size: 14px; }

.onb-actions { display: flex; justify-content: space-between; align-items: center; }
.onb-skip {
  background: none;
  border: 0;
  padding: 6px 4px;
  color: #5b6678;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.onb-next {
  background: #1d4ed8;
  color: #fff;
  border: 1.5px solid #1e3a8a;
  border-radius: 12px;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.onb-help-btn {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 10001;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #fff;
  color: #374151;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.onb-help-btn:hover { background: #f3f4f6; }

/* Modo oscuro: la misma tarjeta con los colores oscuros del sitio */
body.active .onb-highlight { outline-color: #60a5fa; }
body.active .onb-card { background: #111c33; color: #e8edf5; border-color: rgba(148, 163, 184, 0.24); }
body.active .onb-title { color: #dbeafe; }
body.active .onb-count,
body.active .onb-skip { color: #a7b4c8; }
body.active .onb-next { background: #60a5fa; border-color: #2563eb; color: #0b1220; }
.onb-next:focus-visible,
.onb-skip:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .onb-card { animation: onb-in 0.2s ease-out; }
  @keyframes onb-in { from { opacity: 0; } to { opacity: 1; } }
}

.onb-panel-help {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

/* En pantallas pequeñas el botón flotante taparía el texto: la ayuda vive en el panel «Aa». */
@media (max-width: 700px) {
  .onb-help-btn { display: none; }
}