/* ============================================
   ANIMACIONES PARA REGLETAS INTERACTIVAS
   ============================================ */

/* --- KEYFRAMES --- */

@keyframes float-slow {
  0%, 100% {
    transform: translateY(0px) translateX(0px);
  }
  50% {
    transform: translateY(-20px) translateX(10px);
  }
}

@keyframes bounce-correct {
  0%, 100% {
    transform: scale(1) translateY(0);
  }
  25% {
    transform: scale(1.1) translateY(-10px);
  }
  50% {
    transform: scale(1.05) translateY(-5px);
  }
  75% {
    transform: scale(1.02) translateY(-2px);
  }
}

@keyframes shake-error {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-8px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(8px);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5), 0 0 10px rgba(59, 130, 246, 0.3);
  }
  50% {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.8), 0 0 25px rgba(59, 130, 246, 0.5);
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes rotate-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* --- UTILIDADES DE ANIMACIÓN --- */

.animate-float-slow {
  animation: float-slow 6s ease-in-out infinite;
}

.animate-bounce-correct {
  animation: bounce-correct 0.6s ease-out;
}

.animate-shake-error {
  animation: shake-error 0.5s ease-in-out;
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out forwards;
}

.animate-fade-out {
  animation: fade-out 0.3s ease-out forwards;
}

.animate-pop-in {
  animation: pop-in 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* --- ESTILOS PARA WORKSPACE --- */

.workspace-container {
  position: relative;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.workspace-container.dragging-over {
  border-color: rgb(99, 102, 241);
  background: linear-gradient(135deg, rgb(238, 242, 255) 0%, rgb(224, 231, 255) 100%);
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

.workspace-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* --- ESTILOS PARA REGLETAS --- */

.rod-instance {
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease,
    filter 0.2s ease;
  will-change: transform, box-shadow;
}

.rod-instance:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
  z-index: 10;
}

.rod-instance.dragging {
  cursor: grabbing !important;
  transform: scale(1.05) rotate(2deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 100;
  filter: brightness(1.1);
}

.rod-instance.snapping {
  transition: left 0.2s ease-out, top 0.2s ease-out;
}

.rod-instance.rotating {
  animation: rotate-pulse 0.3s ease-out;
  z-index: 50;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

/* --- BOTONES PERSONALIZADOS --- */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, rgb(59, 130, 246) 0%, rgb(37, 99, 235) 100%);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.5);
  background: linear-gradient(135deg, rgb(37, 99, 235) 0%, rgb(29, 78, 216) 100%);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(71, 85, 105);
  background: white;
  border: 2px solid rgb(226, 232, 240);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  border-color: rgb(148, 163, 184);
  background: rgb(248, 250, 252);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary:active {
  transform: translateY(0);
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* --- FEEDBACK MESSAGES --- */

.feedback-success {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, rgb(220, 252, 231) 0%, rgb(187, 247, 208) 100%);
  border: 2px solid rgb(134, 239, 172);
  border-radius: 0.5rem;
  color: rgb(22, 101, 52);
  font-weight: 600;
  animation: fade-in 0.3s ease-out, bounce-correct 0.6s ease-out;
}

.feedback-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, rgb(254, 243, 199) 0%, rgb(253, 224, 71) 100%);
  border: 2px solid rgb(251, 191, 36);
  border-radius: 0.5rem;
  color: rgb(120, 53, 15);
  font-weight: 600;
  animation: fade-in 0.3s ease-out, shake-error 0.5s ease-out;
}

.feedback-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, rgb(224, 231, 255) 0%, rgb(199, 210, 254) 100%);
  border: 2px solid rgb(165, 180, 252);
  border-radius: 0.5rem;
  color: rgb(49, 46, 129);
  font-weight: 500;
}

/* Spinner para loading */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(99, 102, 241, 0.3);
  border-top-color: rgb(99, 102, 241);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* --- PALETA DE REGLETAS --- */

.palette-rod-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  background: #fff8ee;
  border: 1.5px solid #e8d5b0;
  border-radius: 0.625rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.7rem;
  color: #7a5c38;
  min-height: 64px;
}

.palette-rod-btn.flex-col {
  flex-direction: column;
}

.palette-rod-btn:hover {
  background: #fdefd0;
  border-color: #c8a878;
  transform: scale(1.03);
  box-shadow: 0 3px 10px rgba(146, 113, 74, 0.2);
  color: #5c3d1e;
}

.palette-rod-btn:active {
  transform: scale(0.97);
}

.palette-rod-preview {
  display: inline-block;
  height: 20px;
  border-radius: 0.25rem;
  border: 2px solid rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* --- PALETA MÓVIL --- */

@media (max-width: 767px) {
  /* Posición y estado inicial (oculta abajo) */
  #palette-container {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 60vh;
    border-radius: 1.25rem 1.25rem 0 0 !important;
    transform: translateY(100%) !important;
    /* safe area para iPhone con barra de inicio */
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Estado abierto */
  #palette-container.palette-open {
    transform: translateY(0) !important;
  }

  /* Grid de 4 columnas en móvil */
  #palette {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.375rem !important;
  }

  .palette-rod-btn {
    min-height: 56px;
    padding: 0.375rem;
  }

  .palette-rod-preview {
    height: 12px !important;
  }

  /* Tacho más visible */
  #trash-zone {
    bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.5);
  }

  /* Regletas con área táctil mínima */
  .rod-instance {
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* Feedback compacto */
  .feedback-success,
  .feedback-error,
  .feedback-loading {
    padding: 0.375rem 0.5rem;
    font-size: 0.625rem;
  }

  /* Botón abrir paleta pulso suave */
  #toggle-palette-btn {
    animation: pulse-gentle 2.5s ease-in-out infinite;
  }

  @keyframes pulse-gentle {
    0%, 100% { box-shadow: 0 4px 16px rgba(146,113,74,0.4); }
    50%       { box-shadow: 0 6px 24px rgba(146,113,74,0.65); }
  }
}

/* --- RESPONSIVE GENERAL --- */

@media (max-width: 768px) {
  /* Área de trabajo touch: desactivar scroll nativo */
  #workspace {
    touch-action: none;
  }
}

@media (max-width: 640px) {
  /* Ajustes para pantallas muy pequeñas */
  .workspace-pattern {
    background-size: 20px 20px;
  }

  .btn-primary,
  .btn-secondary {
    font-size: 0.8125rem;
  }

  /* Iconos más pequeños en móviles */
  .btn-primary svg,
  .btn-secondary svg {
    width: 1rem;
    height: 1rem;
  }
}

/* Estilos específicos para tablets */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Paleta ligeramente más pequeña en tablets verticales */
  .palette-rod-btn {
    min-height: 70px;
  }
}

/* Mejoras para pantallas táctiles */
@media (hover: none) and (pointer: coarse) {
  .rod-instance:hover {
    /* Desactivar hover en dispositivos táctiles */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: none;
  }

  /* Área táctil más grande para botones */
  .palette-rod-btn {
    min-height: 64px;
    touch-action: manipulation;
  }

  .btn-primary,
  .btn-secondary {
    min-height: 44px; /* Tamaño táctil recomendado */
    touch-action: manipulation;
  }

  /* Prevenir zoom en doble tap */
  #workspace {
    touch-action: none;
  }
}

/* --- TOOLTIP PARA MODO HOVER --- */

.has-tooltip {
  position: relative;
  cursor: help !important;
}

.has-tooltip:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  padding: 0.25rem 0.5rem;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0.375rem;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  animation: fade-in 0.2s ease-out;
}

.has-tooltip:hover::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  border: 4px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.9);
  z-index: 999;
  pointer-events: none;
  animation: fade-in 0.2s ease-out;
}

/* --- ACCESIBILIDAD --- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}