/* ============================================================
   nbx-ui.css — capa de microinteracciones de las herramientas
   Solo apariencia: no cambia comportamiento ni estructura.
   Todo el movimiento se apaga con prefers-reduced-motion.
   ============================================================ */

:root {
  --nbx-ease: cubic-bezier(.22, 1, .36, 1);
  --nbx-rapido: 160ms;
  --nbx-medio: 320ms;
  --nbx-lento: 620ms;
}

::selection { background: rgba(37, 99, 235, .18); }

/* ---------- Botones: hundido al presionar y brillo al pasar ---------- */
button, .nbx-boton, a[class*="bg-blue-600"], a[class*="bg-slate-900"], a[class*="bg-emerald-600"] {
  transition: transform var(--nbx-rapido) var(--nbx-ease),
              box-shadow var(--nbx-rapido) var(--nbx-ease),
              background-color var(--nbx-rapido) ease,
              opacity var(--nbx-rapido) ease;
}
button:active:not(:disabled), .nbx-boton:active { transform: scale(.965); }
button:disabled { transform: none !important; }

/* Onda al hacer clic */
.nbx-onda { position: relative; overflow: hidden; }
.nbx-onda > .nbx-gota {
  position: absolute; border-radius: 9999px; pointer-events: none;
  background: currentColor; opacity: .28; transform: scale(0);
  animation: nbx-onda var(--nbx-lento) var(--nbx-ease) forwards;
}
@keyframes nbx-onda { to { transform: scale(2.6); opacity: 0; } }

/* Botón primario: reflejo que cruza al pasar el cursor */
.nbx-brillo { position: relative; overflow: hidden; }
.nbx-brillo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform var(--nbx-lento) var(--nbx-ease);
}
.nbx-brillo:hover::after { transform: translateX(120%); }

/* ---------- Estado de "copiado" ---------- */
.nbx-copiado {
  background-color: #059669 !important;
  color: #fff !important;
  border-color: #059669 !important;
  animation: nbx-late 420ms var(--nbx-ease);
}
@keyframes nbx-late {
  0% { transform: scale(1); } 38% { transform: scale(1.12); } 100% { transform: scale(1); }
}

/* ---------- Campos ---------- */
input, select, textarea {
  transition: border-color var(--nbx-rapido) ease, box-shadow var(--nbx-medio) var(--nbx-ease), background-color var(--nbx-rapido) ease;
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: #cbd5e1; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(37, 99, 235, .10); }

/* Deslizadores */
input[type=range] { cursor: grab; }
input[type=range]:active { cursor: grabbing; }
input[type=range]::-webkit-slider-thumb { transition: transform var(--nbx-rapido) var(--nbx-ease); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.25); }

/* Casillas: marca que aparece con un pequeño rebote */
input[type=checkbox] { transition: transform var(--nbx-rapido) var(--nbx-ease); }
input[type=checkbox]:active { transform: scale(.85); }
input[type=checkbox]:checked { animation: nbx-late 320ms var(--nbx-ease); }

/* ---------- Tarjetas ---------- */
.tool-card {
  transition: transform var(--nbx-medio) var(--nbx-ease),
              box-shadow var(--nbx-medio) var(--nbx-ease),
              border-color var(--nbx-medio) ease;
  will-change: transform;
}
.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -12px rgba(15, 23, 42, .22), 0 4px 10px -6px rgba(15, 23, 42, .10);
}
.tool-card:active { transform: translateY(-1px) scale(.995); }
.tool-card svg { transition: transform var(--nbx-medio) var(--nbx-ease); }
.tool-card:hover svg { transform: scale(1.12) rotate(-4deg); }
.tool-card [class*="rounded-lg"][class*="flex"] { transition: transform var(--nbx-medio) var(--nbx-ease); }

/* ---------- Aparición al hacer scroll ---------- */
.nbx-reveal { opacity: 0; transform: translateY(14px); }
.nbx-reveal.nbx-visible {
  opacity: 1; transform: none;
  transition: opacity var(--nbx-lento) var(--nbx-ease), transform var(--nbx-lento) var(--nbx-ease);
  transition-delay: var(--nbx-retraso, 0ms);
}

/* ---------- Resultados que cambian ---------- */
.nbx-destello { animation: nbx-destello var(--nbx-lento) var(--nbx-ease); }
@keyframes nbx-destello {
  0% { background-color: rgba(37, 99, 235, .10); }
  100% { background-color: transparent; }
}
.nbx-entra { animation: nbx-entra var(--nbx-medio) var(--nbx-ease); }
@keyframes nbx-entra {
  from { opacity: 0; transform: translateY(8px) scale(.995); }
  to { opacity: 1; transform: none; }
}

/* ---------- Acordeones ---------- */
details summary { transition: color var(--nbx-rapido) ease; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary:hover { color: #2563eb; }
details[open] > *:not(summary) { animation: nbx-abre var(--nbx-medio) var(--nbx-ease); }
@keyframes nbx-abre {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Aviso flotante ---------- */
#toast {
  transition: opacity var(--nbx-medio) var(--nbx-ease), transform var(--nbx-medio) var(--nbx-ease);
  transform: translate(-50%, 10px);
}
#toast[style*="opacity: 1"] { transform: translate(-50%, 0); }

/* ---------- Barra de progreso de lectura ---------- */
#nbx-progreso {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, #2563eb, #0ea5e9);
  z-index: 300; pointer-events: none;
  transition: width 90ms linear, opacity var(--nbx-medio) ease;
}

/* ---------- Volver arriba ---------- */
#nbx-arriba {
  position: fixed; right: 20px; bottom: 20px; z-index: 250;
  height: 42px; width: 42px; border-radius: 9999px;
  background: #0f172a; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px -6px rgba(15, 23, 42, .5);
  opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
  transition: opacity var(--nbx-medio) var(--nbx-ease), transform var(--nbx-medio) var(--nbx-ease);
}
#nbx-arriba.nbx-visible { opacity: 1; transform: none; pointer-events: auto; }
#nbx-arriba:hover { background: #1e293b; }

/* ---------- Carga: barrido en bloques que esperan ---------- */
.nbx-cargando {
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
  background-size: 400% 100%;
  animation: nbx-barrido 1.3s ease-in-out infinite;
}
@keyframes nbx-barrido { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- Enlaces del cuerpo ---------- */
.nbx-cuerpo a:not([class]) {
  background-image: linear-gradient(#2563eb, #2563eb);
  background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--nbx-medio) var(--nbx-ease);
}
.nbx-cuerpo a:not([class]):hover { background-size: 100% 1px; }

/* ---------- Preferencia de movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .nbx-reveal { opacity: 1; transform: none; }
  .tool-card:hover { transform: none; }
  .tool-card:hover svg { transform: none; }
  .nbx-brillo::after { display: none; }
}