/* =============================================================
   app.css — complementos a Tailwind (CDN) para el sitio de
   herramientas. Tailwind cubre el 95%; esto es lo que no cubre.
   ============================================================= */

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

body {
  overflow-x: clip;
}

/* Dropzone */
.tk-dropzone {
  transition: border-color .2s ease, background-color .2s ease;
}
.tk-dropzone.is-dragover {
  border-color: #818cf8;
  background-color: rgba(99, 102, 241, 0.08);
}

/* Estados de la tarjeta de herramienta */
.tk-tool-card[data-state="loading"] [data-idle-only] { opacity: .35; pointer-events: none; }
.tk-tool-card[data-state="done"] [data-idle-only] { opacity: .6; }

/* dialog reset — quitamos el estilo por defecto del navegador */
dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 92vw;
}
dialog::backdrop {
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(2px);
}

/* Firma dibujada a mano */
.tk-signature-pad {
  touch-action: none;
  cursor: crosshair;
}

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

/* Barra de progreso indeterminada */
@keyframes tk-progress {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.tk-progress-bar {
  animation: tk-progress 1.1s ease-in-out infinite;
}

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

/* Scrollbar sutil en listas de reordenar */
.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; }