pwa configuration lista

nuxt4-app/app/assets/css/main.css

@@ -1,2 +1,69 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
+
+:root {
+  --brand-bg: #14100b;
+  --brand-surface: #1f180f;
+  --brand-border: #3a2a16;
+  --brand-primary: #e0c080;
+  --brand-primary-strong: #c08040;
+  --brand-accent: #ffe0a0;
+  --brand-text: #fef9f0;
+  --brand-text-muted: #d8c7a6;
+}
+
+html,
+body {
+  background-color: var(--brand-bg);
+  color: var(--brand-text);
+}
+
+.brand-shell {
+  background: radial-gradient(circle at 20% 20%, rgba(255, 224, 160, 0.08), transparent 55%),
+    radial-gradient(circle at 80% 10%, rgba(192, 128, 64, 0.08), transparent 45%),
+    var(--brand-bg);
+  min-height: 100vh;
+}
+
+.brand-card {
+  background: linear-gradient(145deg, rgba(20, 16, 11, 0.95), rgba(31, 24, 15, 0.85));
+  border: 1px solid rgba(224, 192, 128, 0.12);
+  box-shadow: 0 12px 40px rgba(12, 8, 4, 0.55);
+}
+
+.brand-divider {
+  border-top: 1px solid rgba(224, 192, 128, 0.16);
+}
+
+.brand-chip {
+  background: rgba(255, 224, 160, 0.08);
+  border: 1px solid rgba(255, 224, 160, 0.18);
+  color: var(--brand-accent);
+}
+
+.brand-table thead {
+  background: linear-gradient(90deg, rgba(32, 24, 15, 0.95), rgba(24, 18, 11, 0.95));
+}
+
+.brand-table tbody tr {
+  transition: background 0.2s ease, transform 0.2s ease;
+}
+
+.brand-table tbody tr:hover {
+  background: rgba(255, 224, 160, 0.06);
+}
+
+.brand-pill {
+  background: rgba(224, 192, 128, 0.14);
+  border: 1px solid rgba(224, 192, 128, 0.28);
+  color: var(--brand-primary);
+}
+
+.brand-badge {
+  color: var(--brand-bg);
+  background: var(--brand-primary);
+}
+
+.brand-section-title {
+  color: var(--brand-primary);
+}