/* =============================================================
   app.css — complementos a Tailwind (CDN) para el generador QR 3D
   ============================================================= */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body { overflow-x: clip; }

dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 92vw;
}
dialog::backdrop {
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(2px);
}

.tk-ad-slot {
  background-image: repeating-linear-gradient(
    45deg, rgba(148,163,184,.12), rgba(148,163,184,.12) 10px,
    transparent 10px, transparent 20px
  );
}

#tk-corner-toast {
  transition: transform .4s cubic-bezier(0.16,1,0.3,1), opacity .4s ease;
}

/* Botones de selección (estilo / formato / modo de contenido) */
.qr-mode-btn, .qr-style-btn, .qr-format-btn {
  transition: background-color .15s ease, color .15s ease;
}

.qr-emoji-btn.is-active {
  outline: 2px solid #f59e0b;
  outline-offset: 1px;
}

#qr-preview-2d canvas, #qr-preview-2d svg, #qr-preview-2d img {
  max-width: 100%;
  height: auto;
}

/* input[type=color] sin borde nativo feo en algunos navegadores */
input[type="color"] {
  padding: 2px;
}

.tk-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.tk-scroll::-webkit-scrollbar-thumb { background: #334155; border-radius: 8px; }
.tk-scroll::-webkit-scrollbar-track { background: transparent; }