Update globals.css

AppImage/app/globals.css

@@ -139,36 +139,39 @@
 }
 
 /* ===================== */
-/* Base layer            */
+/* Base styles           */
 /* ===================== */
-@layer base {
+/* Removed @layer base to fix Tailwind CSS v4 compatibility */
 * {
-    @apply border-border outline-ring/50;
+  border-color: var(--border);
+  outline-color: color-mix(in oklch, var(--ring), transparent 50%);
 }
 
 body {
-    @apply bg-background text-foreground;
+  background-color: var(--background);
+  color: var(--foreground);
 }
 
 /* Foco accesible */
 :is(button, [role="button"], a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus {
-    @apply outline-none;
+  outline: none;
 }
+
 :is(button, [role="button"], a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
-    @apply ring-2;
-    --tw-ring-color: var(--ring);
-    --tw-ring-opacity: 0.5; /* equivalente al /50 */
-  }
+  outline: 2px solid color-mix(in oklch, var(--ring), transparent 50%);
+  outline-offset: 2px;
 }
 
 /* ===================== */
-/* Ajustes para Charts   */
+/* Component styles      */
 /* ===================== */
-@layer components {
+/* Removed @layer components to fix Tailwind CSS v4 compatibility */
+
 /* Recharts axis */
 .recharts-cartesian-axis-tick tspan {
   fill: var(--muted-foreground);
 }
+
 .recharts-cartesian-axis-line,
 .recharts-cartesian-grid line {
   stroke: var(--border);
@@ -178,6 +181,7 @@
 .chartjs-render-monitor text {
   fill: var(--muted-foreground);
 }
+
 .chartjs-render-monitor line {
   stroke: var(--border);
 }
@@ -185,7 +189,6 @@
 /* Estilos personalizados para notas de ProxMenux */
 /* Asegura que el contenido HTML de ProxMenux se renderice correctamente */
 .proxmenux-notes {
-    /* Centrar el contenido */
   text-align: center;
 }
 
@@ -239,4 +242,3 @@
   margin: 0;
   line-height: 1.2;
 }
-}