/**
 * Admin Buttons Module
 * Estilos para botones de administración (highlight, date) en la galería
 */

/* Botones de acción - Tema unificado violeta pastel */
.highlight-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 244, 255, 0.98) 100%);
  border: 1.5px solid rgba(147, 112, 219, 0.25);
  border-radius: 12px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(147, 112, 219, 0.15), 0 0 0 0 rgba(147, 112, 219, 0);
  color: var(--primary-purple);
}

.highlight-btn svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.highlight-btn:hover {
  transform: translateY(-2px) scale(1.05);
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(248, 244, 255, 1) 100%);
  border-color: rgba(147, 112, 219, 0.4);
  box-shadow: 0 4px 20px rgba(147, 112, 219, 0.25), 0 0 0 4px rgba(147, 112, 219, 0.1);
  color: var(--primary-purple-dark);
}

.highlight-btn:hover svg {
  transform: scale(1.1);
}

.highlight-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 8px rgba(147, 112, 219, 0.2);
}

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

/* 📅 Date button - Tema unificado violeta pastel */
.gallery-item .date-btn,
.date-btn {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  bottom: auto !important;
  right: auto !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 243, 255, 0.98) 100%) !important;
  border: 1.5px solid rgba(147, 112, 219, 0.25) !important;
  border-radius: 12px !important;
  width: 42px !important;
  height: 42px !important;
  cursor: pointer !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 12px rgba(147, 112, 219, 0.15), 0 0 0 0 rgba(147, 112, 219, 0) !important;
  backdrop-filter: blur(12px) !important;
  color: #9333ea !important;
}

.date-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.date-btn:hover {
  transform: translateY(-2px) scale(1.05);
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(245, 243, 255, 1) 100%);
  border-color: rgba(147, 112, 219, 0.4);
  box-shadow: 0 4px 20px rgba(147, 112, 219, 0.25), 0 0 0 4px rgba(147, 112, 219, 0.1);
  color: var(--primary-purple-dark);
}

.date-btn:hover svg {
  transform: scale(1.1);
}

.date-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 8px rgba(147, 112, 219, 0.2);
  transition: all 0.1s ease;
}

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

/* Pulsing animation for date button */
@keyframes pulse-date {
  0% {
    box-shadow: 
      0 4px 15px rgba(218, 112, 214, 0.3),
      0 1px 3px rgba(147, 112, 219, 0.1);
  }
  50% {
    box-shadow: 
      0 6px 20px rgba(218, 112, 214, 0.5),
      0 2px 6px rgba(147, 112, 219, 0.2);
  }
  100% {
    box-shadow: 
      0 4px 15px rgba(218, 112, 214, 0.3),
      0 1px 3px rgba(147, 112, 219, 0.1);
  }
}

.date-btn.show-hint {
  animation: pulse-date 2s ease-in-out infinite;
}