/* CTC · Versión pública: franja de prototipo, ventana «Acerca de» y guía por pasos (publico.js). */

/* ---------------------------------------------------------------- franja de prototipo (siempre visible) */
.proto-band {
  position: sticky; bottom: 0; z-index: 1200;
  display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap;
  padding: 6px 18px; background: #1b2433; border-top: 1px solid rgba(57, 135, 229, .45);
  color: #c9d6e8; font-size: 12px; line-height: 1.35;
}
.proto-band .pt { flex: 1 1 300px; min-width: 0; }
.proto-band .pt b { color: #fff; font-weight: 600; }
.proto-band .pl { display: flex; gap: 6px; }
.proto-link { border: 1px solid rgba(57, 135, 229, .55); background: rgba(57, 135, 229, .14); color: #e6eef9; border-radius: 6px;
  padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; min-height: 30px; white-space: nowrap; }
.proto-link:hover, .proto-link:focus-visible { background: rgba(57, 135, 229, .3); outline: none; }
body.wall .proto-band { position: static; flex: 0 0 auto; padding: 4px 14px; }
@media (max-width: 640px) {
  .proto-band { padding: 6px 12px; font-size: 11.5px; }
  .proto-link { min-height: 36px; padding: 6px 12px; }
}

/* ---------------------------------------------------------------- ventana «Acerca de» */
.pub-back { position: fixed; inset: 0; z-index: 5000; background: rgba(0, 0, 0, .62); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pub-modal { background: var(--surface-1, #17181a); color: var(--text-primary, #eee); border: 1px solid var(--border, #333); border-radius: 12px;
  width: min(640px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; box-shadow: 0 16px 60px rgba(0, 0, 0, .6); }
.pub-modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px 6px; }
.pub-modal-head h2 { margin: 0; font-size: 17px; }
.pub-x { margin-left: auto; border: 0; background: transparent; color: var(--text-primary, #eee); font-size: 22px; cursor: pointer; min-width: 44px; min-height: 44px; }
.pub-modal-body { padding: 0 18px; overflow-y: auto; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary, #ccc); }
.pub-modal-body h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted, #999); margin: 16px 0 4px; }
.pub-modal-body ul { padding-left: 18px; margin: 4px 0; }
.pub-modal-body li { margin: 4px 0; }
.pub-modal-body a { color: #8fbaf0; }
.pub-modal-foot { padding: 12px 18px 14px; display: flex; justify-content: flex-end; }

/* ---------------------------------------------------------------- guía por pasos */
.tour { position: fixed; inset: 0; z-index: 5000; }
.tour.dim { background: rgba(0, 0, 0, .66); }
.tour-hole { position: fixed; border-radius: 10px; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .66); outline: 2px solid var(--accent, #3987e5);
  pointer-events: none; transition: left .2s, top .2s, width .2s, height .2s; }
.tour-card { position: fixed; background: var(--surface-1, #17181a); color: var(--text-primary, #eee); border: 1px solid var(--accent, #3987e5);
  border-radius: 12px; padding: 14px 16px 12px; box-shadow: 0 12px 48px rgba(0, 0, 0, .6); outline: none; }
.tour-card.center { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 24px)); }
.tour-card.top, .tour-card.bottom { left: 12px; right: 12px; }
.tour-card.top { top: 12px; }
.tour-card.bottom { bottom: 12px; }
.tour-card h2 { margin: 2px 0 8px; font-size: 16px; }
.tour-card p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary, #ccc); }
.tour-step { font-size: 11px; color: var(--text-muted, #999); text-transform: uppercase; letter-spacing: .06em; }
.tour-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.tour-actions .btn { min-height: 36px; }
.tour-skip { margin-right: auto; }
@media (prefers-reduced-motion: reduce) { .tour-hole { transition: none; } }

/* Móviles: la capa se puede desplazar si la ventana no cabe y respeta la barra inferior del navegador */
.pub-back { overflow-y: auto; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
/* «No oficial», bien visible */
.no-oficial { color: #fff; font-weight: 700; }