/* Clases personalizadas de Tailwind JIT */
/* Incluye clases que NO existen en tailwind.min.css */

/* =========================================
   PREVENIR SCROLL HORIZONTAL
   ========================================= */
html, body {
    overflow-x: hidden;
}

/* =========================================
   MEJORA DE RENDERIZADO DE IMÁGENES
   ========================================= */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* =========================================
   GAP (Faltantes en tailwind.min.css)
   ========================================= */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-x-8 { column-gap: 2rem; }
.gap-x-10 { column-gap: 2.5rem; }
.gap-y-4 { row-gap: 1rem; }
.gap-y-8 { row-gap: 2rem; }
.gap-y-10 { row-gap: 2.5rem; }
.gap-y-16 { row-gap: 4rem; }
.gap-0\.5 { gap: 0.125rem; }

/* =========================================
   GRID COLUMNS (Faltantes)
   ========================================= */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* =========================================
   SPACE (Faltantes)
   ========================================= */
.space-x-1 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.25rem; }
.space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem; }
.space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }
.space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem; }
.space-x-8 > :not([hidden]) ~ :not([hidden]) { margin-left: 2rem; }
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }

/* =========================================
   FLEXBOX (Faltantes)
   ========================================= */
.flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* =========================================
   TRANSFORM / ROTATE (Faltantes)
   ========================================= */
.rotate-180 { transform: rotate(180deg); }

/* =========================================
   MARGIN / PADDING ADICIONALES
   ========================================= */
.mr-3 { margin-right: 0.75rem; }
.ml-2 { margin-left: 0.5rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-16 { padding-bottom: 4rem; }

/* =========================================
   HOVER BACKGROUNDS
   ========================================= */
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }

/* =========================================
   FOCUS
   ========================================= */
.focus\:outline-none:focus { outline: none; }

/* =========================================
   OPACIDADES DE FONDO
   ========================================= */
.bg-black\/10 { background-color: rgb(0 0 0 / 0.1); }
.bg-black\/40 { background-color: rgb(0 0 0 / 0.4); }
.bg-black\/50 { background-color: rgb(0 0 0 / 0.5); }
.bg-white\/5 { background-color: rgb(255 255 255 / 0.05); }
.bg-white\/10 { background-color: rgb(255 255 255 / 0.1); }
.bg-white\/20 { background-color: rgb(255 255 255 / 0.2); }
.bg-gray-900\/90 { background-color: rgb(17 24 39 / 0.9); }
.bg-yellow-500\/40 { background-color: rgb(234 179 8 / 0.4); }
.bg-yellow-500\/60 { background-color: rgb(234 179 8 / 0.6); }
.bg-yellow-500\/80 { background-color: rgb(234 179 8 / 0.8); }
.bg-amber-500 { background-color: rgb(245 158 11); }
.bg-orange-500 { background-color: rgb(249 115 22); }

/* =========================================
   COLORES TEAL
   ========================================= */
.bg-teal-100 { background-color: rgb(204 251 241); }
.bg-teal-500 { background-color: rgb(20 184 166); }
.bg-teal-600 { background-color: rgb(13 148 136); }
.text-teal-500 { color: rgb(20 184 166); }
.text-teal-600 { color: rgb(13 148 136); }
.border-teal-200 { border-color: rgb(153 246 228); }
.border-t-teal-600 { border-top-color: rgb(13 148 136); }
.hover\:bg-teal-600:hover { background-color: rgb(13 148 136); }
.hover\:bg-teal-700:hover { background-color: rgb(15 118 110); }
.hover\:border-teal-300:hover { border-color: rgb(94 234 212); }
.hover\:border-t-teal-600:hover { border-top-color: rgb(13 148 136); }

/* =========================================
   COLORES AMBER
   ========================================= */
.bg-amber-100 { background-color: rgb(254 243 199); }
.text-amber-500 { color: rgb(245 158 11); }
.text-amber-600 { color: rgb(217 119 6); }
.hover\:bg-amber-600:hover { background-color: rgb(217 119 6); }

/* =========================================
   RING (para destacar tarjetas)
   ========================================= */
.ring-4 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.ring-yellow-400 { --tw-ring-color: rgb(250 204 21); }
.ring-blue-500 { --tw-ring-color: rgb(59 130 246); }

/* =========================================
   SCALE
   ========================================= */
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.10); }
.group:hover .group-hover\:scale-110 { transform: scale(1.10); }

/* =========================================
   GRADIENTES CON OPACIDAD
   ========================================= */
.from-blue-900\/80 { --tw-gradient-from: rgb(30 58 138 / 0.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 58 138 / 0)); }
.to-blue-800\/60 { --tw-gradient-to: rgb(30 64 175 / 0.6); }
.from-black\/80 { --tw-gradient-from: rgb(0 0 0 / 0.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(0 0 0 / 0)); }
.via-black\/20 { --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.2), var(--tw-gradient-to, rgb(0 0 0 / 0)); }
.via-gray-900\/40 { --tw-gradient-stops: var(--tw-gradient-from), rgb(17 24 39 / 0.4), var(--tw-gradient-to, rgb(17 24 39 / 0)); }
.from-gray-900\/60 { --tw-gradient-from: rgb(17 24 39 / 0.6); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(17 24 39 / 0)); }
.via-gray-900\/10 { --tw-gradient-stops: var(--tw-gradient-from), rgb(17 24 39 / 0.1), var(--tw-gradient-to, rgb(17 24 39 / 0)); }

/* =========================================
   OPACIDADES DE TEXTO Y BORDE
   ========================================= */
.text-white\/80 { color: rgb(255 255 255 / 0.8); }
.border-white\/5 { border-color: rgb(255 255 255 / 0.05); }
.border-white\/10 { border-color: rgb(255 255 255 / 0.1); }

/* =========================================
   TAMAÑOS DECIMALES
   ========================================= */
.w-0\.5 { width: 0.125rem; }
.w-1\.5 { width: 0.375rem; }
.h-1\.5 { height: 0.375rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.mt-0\.5 { margin-top: 0.125rem; }

/* =========================================
   POSICIONAMIENTO
   ========================================= */
.left-1\/2 { left: 50%; }
.top-1\/2 { top: 50%; }
.-translate-x-1\/2 { transform: translateX(-50%); }
.-top-1 { top: -0.25rem; }
.-right-1 { right: -0.25rem; }
.-bottom-1 { bottom: -0.25rem; }
.-top-8 { top: -2rem; }
.translate-y-1 { transform: translateY(0.25rem); }
.translate-y-24 { transform: translateY(6rem); }

/* =========================================
   TAMAÑOS ARBITRARIOS
   ========================================= */
.h-\[100dvh\] { height: 100dvh; }
.h-\[34rem\] { height: 34rem; }
.w-\[45\%\] { width: 45%; }
.w-\[55\%\] { width: 55%; }
.max-w-\[120px\] { max-width: 120px; }

/* =========================================
   TEXTO ARBITRARIO
   ========================================= */
.text-\[8px\] { font-size: 8px; line-height: 1; }
.text-\[10px\] { font-size: 10px; line-height: 1.2; }

/* =========================================
   ESCALAS Y EFECTOS HOVER ARBITRARIOS
   ========================================= */
.hover\:scale-\[1\.01\]:hover { transform: scale(1.01); }
.hover\:scale-\[1\.02\]:hover { transform: scale(1.02); }
.hover\:shadow-\[0_25px_60px_rgba\(0\2c 0\2c 0\2c 0\.5\)\]:hover {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

/* =========================================
   Z-INDEX Y BORDES
   ========================================= */
.z-\[60\] { z-index: 60; }
.border-t-3 { border-top-width: 3px; }
.border-t-4 { border-top-width: 4px; }
.border-l-4 { border-left-width: 4px; }

/* =========================================
   COLORES DE BORDE SUPERIOR (border-t-4)
   ========================================= */
.border-red-500 { border-color: rgb(239 68 68); }
.border-yellow-500 { border-color: rgb(234 179 8); }
.border-green-500 { border-color: rgb(34 197 94); }
.border-blue-500 { border-color: rgb(59 130 246); }
.border-blue-600 { border-color: rgb(37 99 235); }
.border-indigo-500 { border-color: rgb(99 102 241); }
.border-purple-500 { border-color: rgb(168 85 247); }
.border-gray-800 { border-color: rgb(31 41 55); }
.border-teal-500 { border-color: rgb(20 184 166); }

/* =========================================
   ASPECT RATIO
   ========================================= */
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }

/* =========================================
   DURACIONES Y ANIMACIONES
   ========================================= */
.duration-\[4000ms\] { transition-duration: 4000ms; }
.group:hover .group-hover\:rotate-\[360deg\] { transform: rotate(360deg); }

/* Animación de spin para el mini-player */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin { animation: spin 3s linear infinite; }

/* Animación bounce para visualizador */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-25%); }
}
.animate-bounce { animation: bounce 1s infinite; }

/* Animación pulse */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Translate Y 0 */
.translate-y-0 { transform: translateY(0); }
.opacity-100 { opacity: 1; }

/* =========================================
   VIEWPORT
   ========================================= */
.-ml-\[50vw\] { margin-left: -50vw; }
.-mr-\[50vw\] { margin-right: -50vw; }

/* =========================================
   MEDIA QUERIES - SM (640px)
   ========================================= */
@media (min-width: 640px) {
    .sm\:px-0 { padding-left: 0; padding-right: 0; }
}

/* =========================================
   MEDIA QUERIES - MD (768px)
   ========================================= */
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:gap-6 { gap: 1.5rem; }
    .md\:gap-8 { gap: 2rem; }
    .md\:gap-12 { gap: 3rem; }
    .md\:h-\[34rem\] { height: 34rem; }
    .md\:bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
    .md\:flex { display: flex; }
    .md\:hidden { display: none; }
    .md\:block { display: block; }
    .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) { margin-left: 2rem; }
}

/* =========================================
   MEDIA QUERIES - LG (1024px)
   ========================================= */
@media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:w-\[45\%\] { width: 45%; }
    .lg\:w-\[55\%\] { width: 55%; }
    .lg\:h-\[34rem\] { height: 34rem; }
    .lg\:h-auto { height: auto; }
    .lg\:flex-row { flex-direction: row; }
    .lg\:p-8 { padding: 2rem; }
    .lg\:p-12 { padding: 3rem; }
    .lg\:w-72 { width: 18rem; }
    .lg\:sticky { position: sticky; }
    .lg\:top-4 { top: 1rem; }
}