@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
@import "tailwindcss";

@layer base {
    body { 
        font-family: 'Poppins', sans-serif; 
        -webkit-tap-highlight-color: transparent; 
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body { 
        font-family: 'Poppins', sans-serif; 
        -webkit-tap-highlight-color: transparent; 
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
}

@layer utilities {
    /* Ocultar scrollbar para el menú de categorías */
    .hide-scrollbar::-webkit-scrollbar { display: none; }
    .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    
    /* 🚀 NUEVO: Scrollbar Elegante para formularios (Como el Checkout) */
    .custom-scrollbar::-webkit-scrollbar { width: 5px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

    .modal-enter { animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    
    .animate-shake { animation: shake 0.4s ease-in-out; }
    .star-1 { animation: star-float-1 3s ease-in-out infinite; }
    .star-2 { animation: star-float-2 4s ease-in-out infinite; }
}

/* Animaciones Clave */
@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}
@keyframes star-float-1 { 
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); } 
    50% { transform: translateY(-20px) rotate(15deg) scale(1.15); } 
}
@keyframes star-float-2 { 
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); } 
    50% { transform: translateY(-15px) rotate(-15deg) scale(0.9); } 
}

/* 🚀 BOTÓN TOGGLE PREMIUM (Simetría Perfecta con Tailwind) */
.toggle-cont {
  --primary: #2563eb;
  --light: #dbeafe;
  --dark: #0f172a;
  --gray: #334155;

  position: relative;
  z-index: 10;
  width: fit-content;
  height: 35px; /* 👈 Exactamente la misma altura que los botones Tailwind */
  border-radius: 9999px;
}

.toggle-cont .toggle-input {
  display: none;
}

.toggle-cont .toggle-label {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  padding: 4px; /* Relleno controlado */
  width: 76px; /* Ancho fijo y proporcionado */
  height: 100%;
  background-color: var(--dark);
  border: 1px solid #475569;
  border-radius: 9999px;
  box-sizing: border-box; /* 👈 CLAVE MAGICA: Evita que el botón se infle sumando el padding */
  transition: all 0.3s ease-in-out;
}

.toggle-label::before {
  content: "";
  position: absolute;
  z-index: -10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 0.5rem);
  height: calc(100% + 0.5rem);
  background-color: var(--gray);
  border: 1px solid #475569;
  border-radius: 9999px;
  transition: all 0.3s ease-in-out;
}

.toggle-label::after {
  content: "";
  position: absolute;
  z-index: -10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 50% -100%, #3b82f6 0%, #020617 80%);
  border-radius: 9999px;
}

.toggle-cont .toggle-label .cont-icon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px; /* 👈 Circulo interior perfectamente proporcionado */
  height: 32px;
  background-image: radial-gradient(circle at 50% 0%, #475569 0%, var(--gray) 100%);
  border: 1px solid #64748b;
  border-radius: 50%;
  box-shadow: inset 0 -0.1rem 0.1rem var(--primary), inset 0 0 0.4rem 0.5rem rgba(255,255,255,0.1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: clip;
}

.cont-icon .sparkle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: calc(var(--width) * 1px);
  aspect-ratio: 1;
  background-color: var(--light);
  border-radius: 50%;
  transform-origin: 50% 50%;
  rotate: calc(1deg * var(--deg));
  transform: translate(-50%, -50%);
  animation: sparkle calc(100s / var(--duration)) linear calc(0s / var(--duration)) infinite;
}

@keyframes sparkle {
  to { width: calc(var(--width) * 0.5px); transform: translate(2000%, -50%); }
}

.cont-icon .icon { width: 0.9rem; fill: var(--light); }

.toggle-cont:has(.toggle-input:checked) { --checked: true; }

@container style(--checked: true) {
  .toggle-cont .toggle-label {
    background-color: transparent;
    border: 1px solid #2563eb;
  }
  .toggle-cont .toggle-label::before { box-shadow: 0 0.5rem 1.5rem -1rem #2563eb; }
  .toggle-cont .toggle-label .cont-icon {
    overflow: visible;
    background-image: radial-gradient(circle at 50% 0%, #3b82f6 0%, var(--primary) 100%);
    border: 1px solid var(--primary);
    transform: translateX(34px) rotate(-225deg); /* 👈 Distancia matemática exacta (76px ancho total - 8px de padding - 2px bordes - 32px de ancho del circulo = 34px restantes) */
  }
  .toggle-cont .toggle-label .cont-icon .sparkle {
    z-index: -10;
    width: calc(var(--width) * 1.5px);
    background-color: #93c5fd;
    animation: sparkle calc(100s / var(--duration)) linear calc(10s / var(--duration)) infinite;
  }
}