Update style.css

style.css

@@ -16,53 +16,44 @@
 /* 2. DESIGN TOKENS                                            */
 /* ─────────────────────────────────────────────────────────── */
 :root {
-  /* Colors - Ultra Blue System */
   --ultra-blue: #3B82F6;
   --ultra-blue-bright: #60A5FA;
   --ultra-blue-deep: #1E40AF;
   --ultra-blue-glow: rgba(39, 100, 180, 0.35);
-  
-  /* Neutrals */
+
   --bg-base: #000000;
   --fg-primary: #FFFFFF;
   --fg-secondary: rgba(255, 255, 255, 0.65);
   --fg-tertiary: rgba(255, 255, 255, 0.40);
-  
-  /* Surfaces */
+
   --surface-glass: rgba(0, 0, 0, 0.30);
   --surface-card: rgba(255, 255, 255, 0.04);
   --surface-card-hover: rgba(255, 255, 255, 0.08);
   --surface-input: rgba(255, 255, 255, 0.03);
-  
-  /* Borders */
+
   --border-subtle: rgba(255, 255, 255, 0.08);
   --border-medium: rgba(255, 255, 255, 0.14);
   --border-accent: rgba(59, 130, 246, 0.35);
-  
-  /* Spacing System (8px base) */
-  --space-xs: 0.5rem;   /* 8px */
-  --space-sm: 0.75rem;  /* 12px */
-  --space-md: 1rem;     /* 16px */
-  --space-lg: 1.5rem;   /* 24px */
-  --space-xl: 2rem;     /* 32px */
-  --space-2xl: 3rem;    /* 48px */
-  
-  /* Radius */
+
+  --space-xs: 0.5rem;
+  --space-sm: 0.75rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-2xl: 3rem;
+
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --radius-full: 999px;
-  
-  /* Typography */
+
   --font-body: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
-  
-  /* Transitions */
+
   --trans-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
   --trans-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
   --trans-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
-  
-  /* Z-index layers */
+
   --z-base: 1;
   --z-dropdown: 10;
   --z-sticky: 20;
@@ -97,7 +88,7 @@ body {
 }
 
 /* ─────────────────────────────────────────────────────────── */
-/* 4. QUANTUM PARTICLE FIELD (Ultra Blue)                      */
+/* 4. QUANTUM PARTICLE FIELD                                   */
 /* ─────────────────────────────────────────────────────────── */
 #quantumField {
   position: fixed;
@@ -232,7 +223,7 @@ body {
   background: rgba(255, 255, 255, 0.02) !important;
   border: 1px solid var(--border-medium) !important;
   border-radius: var(--radius-full) !important;
-  opacity: 0.75 !important;
+  opacity: 0.85 !important;
   transition: all var(--trans-base) !important;
 }
 
@@ -286,12 +277,12 @@ body {
 .gradio-container .gr-button {
   padding: var(--space-sm) var(--space-lg) !important;
   font-size: 0.9375rem !important;
-  font-weight: 500 !important;
+  font-weight: 600 !important;
   color: var(--fg-primary) !important;
-  background: rgba(255, 255, 255, 0.02) !important;
+  background: rgba(255, 255, 255, 0.03) !important;
   border: 1px solid var(--border-medium) !important;
   border-radius: var(--radius-full) !important;
-  opacity: 0.40 !important;
+  opacity: 0.92 !important;
   cursor: pointer !important;
   transition: all var(--trans-base) !important;
 }
@@ -299,24 +290,33 @@ body {
 .gradio-container button:hover:not(.gr-tab-nav button),
 .gradio-container .gr-button:hover {
   opacity: 1 !important;
-  background: rgba(255, 255, 255, 0.08) !important;
+  background: rgba(255, 255, 255, 0.10) !important;
   border-color: var(--border-accent) !important;
   box-shadow: 0 0 16px var(--ultra-blue-glow) !important;
 }
 
-.gradio-container button:active:not(.gr-tab-nav button) {
+.gradio-container button:active:not(.gr-tab-nav button),
+.gradio-container .gr-button:active {
   transform: scale(0.98) !important;
 }
 
-/* Primary action button variant */
+.gradio-container button:disabled,
+.gradio-container .gr-button:disabled {
+  opacity: 0.35 !important;
+  cursor: not-allowed !important;
+  filter: grayscale(0.2) !important;
+}
+
 .gradio-container button.primary,
 .gradio-container .gr-button-primary {
   background: var(--ultra-blue) !important;
   border-color: var(--ultra-blue-bright) !important;
   box-shadow: 0 4px 12px var(--ultra-blue-glow) !important;
+  opacity: 1 !important;
 }
 
-.gradio-container button.primary:hover {
+.gradio-container button.primary:hover,
+.gradio-container .gr-button-primary:hover {
   background: var(--ultra-blue-bright) !important;
   box-shadow: 0 8px 24px var(--ultra-blue-glow) !important;
 }
@@ -334,6 +334,7 @@ body {
   overflow: hidden !important;
   border: 0.5px solid var(--border-subtle) !important;
   transition: all var(--trans-base) !important;
+  background: rgba(255, 255, 255, 0.03) !important;
 }
 
 .gradio-container .gr-gallery .gr-image:hover {
@@ -342,23 +343,23 @@ body {
   transform: translateY(-2px) !important;
 }
 
-/* Image container sizing */
 .gradio-container .gr-image img,
-.gradio-container .gr-gallery img {
+.gradio-container .gr-gallery img,
+.gradio-container img {
   width: 100% !important;
-  height: auto !important;
-  object-fit: inline-flex !important;
+  height: 100% !important;
+  object-fit: contain !important;
   display: block !important;
 }
 
-/* Grid layout for image outputs */
 .gradio-container .gr-image-container,
 .gradio-container [class*="image-container"] {
-  aspect-ratio: 1 / 1;
-  max-width: 40%;
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  background: var(--surface-card);
+  aspect-ratio: auto !important;
+  max-width: none !important;
+  width: 100% !important;
+  border-radius: var(--radius-md) !important;
+  overflow: hidden !important;
+  background: var(--surface-card) !important;
 }
 
 /* ─────────────────────────────────────────────────────────── */
@@ -366,7 +367,7 @@ body {
 /* ─────────────────────────────────────────────────────────── */
 .tq-carousel {
   position: relative;
-  width: 40%;
+  width: 100%;
   overflow: hidden;
   border-radius: var(--radius-lg);
   background: var(--surface-card);
@@ -377,42 +378,42 @@ body {
   display: flex;
   gap: var(--space-md);
   transition: transform var(--trans-slow);
+  will-change: transform;
 }
 
 .tq-carousel__item {
-  flex: 0 0 auto;
-  width: 20px;
-  aspect-ratio: 1 / 1;
+  flex: 0 0 280px;
+  aspect-ratio: 16 / 10;
   border-radius: var(--radius-md);
   overflow: hidden;
   border: 1px solid var(--border-subtle);
   transition: all var(--trans-base);
+  background: rgba(255, 255, 255, 0.03);
 }
 
 .tq-carousel__item:hover {
   border-color: var(--ultra-blue);
   box-shadow: 0 6px 14px var(--ultra-blue-glow);
-  transform: scale(0.5);
+  transform: translateY(-2px) scale(1.04);
 }
 
 .tq-carousel__item img {
-  width: 40%;
-  height: 40%;
-  object-fit: auto;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
   display: block;
 }
 
-/* Carousel navigation */
 .tq-carousel__nav {
-  position: center;
+  position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  width: 20px;
-  height: 20px;
+  width: 38px;
+  height: 38px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--surface-glass);
+  background: rgba(0, 0, 0, 0.35);
   backdrop-filter: blur(12px);
   border: 1px solid var(--border-medium);
   border-radius: 50%;
@@ -427,7 +428,7 @@ body {
 .tq-carousel__nav:hover {
   background: var(--ultra-blue-glow);
   border-color: var(--ultra-blue);
-  box-shadow: 0 0 5px var(--ultra-blue-glow);
+  box-shadow: 0 0 10px var(--ultra-blue-glow);
 }
 
 /* ─────────────────────────────────────────────────────────── */
@@ -448,7 +449,6 @@ body {
   line-height: 1.5 !important;
 }
 
-/* Code blocks */
 .gradio-container pre,
 .gradio-container code {
   font-family: var(--font-mono) !important;
@@ -500,23 +500,23 @@ body {
     --space-lg: 1rem;
     --space-xl: 1.5rem;
   }
-  
+
   .gradio-container {
     padding: var(--space-md);
   }
-  
+
   .tq-hero {
     padding: var(--space-md) var(--space-lg);
   }
-  
+
   .tq-hero__brand {
     font-size: 1.25rem;
   }
-  
+
   .tq-carousel__item {
-    width: 220px;
+    flex-basis: 240px;
   }
-  
+
   .tq-pills {
     justify-content: center;
   }
@@ -524,12 +524,12 @@ body {
 
 @media (max-width: 280px) {
   .tq-carousel__item {
-    width: 220px;
+    flex-basis: 220px;
   }
-  
+
   .tq-carousel__nav {
-    width: 24px;
-    height: 24px;
+    width: 34px;
+    height: 34px;
   }
 }
 
@@ -561,16 +561,13 @@ footer,
   display: none !important;
 }
 
-/* ============================================================
-   TwoQuarks — Gallery as Carousel Strip (horizontal scroll)
-   ============================================================ */
-
+/* ─────────────────────────────────────────────────────────── */
+/* 20. GALLERY AS CAROUSEL STRIP                               */
+/* ─────────────────────────────────────────────────────────── */
 #down_gallery, #strange_gallery {
   margin-top: 12px !important;
 }
 
-/* El contenedor interno de la galería cambia según versión,
-   por eso usamos selectores tolerantes */
 #down_gallery [class*="gallery"],
 #strange_gallery [class*="gallery"] {
   overflow-x: auto !important;
@@ -591,7 +588,6 @@ footer,
   gap: 12px !important;
 }
 
-/* Cada item = tile consistente */
 #down_gallery [role="listitem"],
 #strange_gallery [role="listitem"] {
   flex: 0 0 320px !important;
@@ -602,7 +598,6 @@ footer,
   border: 1px solid rgba(255,255,255,0.10) !important;
 }
 
-/* Imágenes: no deformar plots */
 #down_gallery img, #strange_gallery img {
   width: 100% !important;
   height: 240px !important;