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

@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  /* Definir color café personalizado con todos los shades
     Optimizado para dark mode - los valores más altos son más claros */
  --color-coffee-50: #1b1209;
  --color-coffee-100: #2a1f14;
  --color-coffee-200: #3a2a16;
  --color-coffee-300: #5a3a18;
  --color-coffee-400: #805020;
  --color-coffee-500: #c08040;
  --color-coffee-600: #d09050;
  --color-coffee-700: #e0c080;
  --color-coffee-800: #f0d0a0;
  --color-coffee-900: #fde5c0;
  --color-coffee-950: #fef9f0;
}

:root {
  /* Colores base del tema */
  --brand-bg: #14100b;
  --brand-surface: #1f180f;
  --brand-border: #3a2a16;
  --brand-primary: #e0c080;
  --brand-primary-strong: #c08040;
  --brand-accent: #ffe0a0;
  --brand-success: #00dc82;    /* Nuxt green - éxito/confirmación */
  --brand-text: #fef9f0;
  --brand-text-muted: #d8c7a6;

  /* Colores intermedios para gráficas de cosechas */
  --brand-cosecha-2: #8b6f47;     /* Tono café intermedio 1 */
  --brand-cosecha-3: #a0826e;     /* Tono café intermedio 2 */
  --brand-cosecha-4: #b89968;     /* Tono café intermedio 3 */

  /* Colores para tipos de café */
  --coffee-uva: #a855f7;      /* Purple - Café Uva */
  --coffee-oreado: #f97316;   /* Orange - Café Oreado */
  --coffee-mojado: #06b6d4;   /* Cyan - Café Mojado */
  --coffee-verde: #22c55e;    /* Green - Café Verde */

  /* Colores para estados */
  --status-pendiente: #f59e0b; /* Amber - Pendiente de pago */
  --status-pagado: #10b981;    /* Emerald - Pagado */
  --status-anulado: #6b7280;   /* Gray - Anulado */

  /* Mapear variables UI neutral a nuestras variables dinámicas --brand-*
     Esto permite que los componentes de Nuxt UI respondan a cambios de tema
     IMPORTANTE: Nuxt UI usa neutral-50 para fondos oscuros y neutral-950 para texto claro en dark mode */
  --ui-color-neutral-50: var(--brand-text);
  --ui-color-neutral-100: var(--brand-text-muted);
  --ui-color-neutral-200: var(--brand-primary);
  --ui-color-neutral-300: var(--brand-primary);
  --ui-color-neutral-400: var(--brand-primary-strong);
  --ui-color-neutral-500: var(--brand-border);
  --ui-color-neutral-600: var(--brand-border);
  --ui-color-neutral-700: var(--brand-surface);
  --ui-color-neutral-800: var(--brand-surface);
  --ui-color-neutral-900: var(--brand-bg);
  --ui-color-neutral-950: var(--brand-bg);

  /* Mapear variables UI success a nuestro color de éxito del tema
     Esto permite que color="success" en componentes use --brand-success */
  --ui-color-success-50: color-mix(in srgb, var(--brand-success) 5%, white);
  --ui-color-success-100: color-mix(in srgb, var(--brand-success) 10%, white);
  --ui-color-success-200: color-mix(in srgb, var(--brand-success) 20%, white);
  --ui-color-success-300: color-mix(in srgb, var(--brand-success) 40%, white);
  --ui-color-success-400: color-mix(in srgb, var(--brand-success) 60%, white);
  --ui-color-success-500: var(--brand-success);
  --ui-color-success-600: color-mix(in srgb, var(--brand-success) 80%, black);
  --ui-color-success-700: color-mix(in srgb, var(--brand-success) 60%, black);
  --ui-color-success-800: color-mix(in srgb, var(--brand-success) 40%, black);
  --ui-color-success-900: color-mix(in srgb, var(--brand-success) 20%, black);
  --ui-color-success-950: color-mix(in srgb, var(--brand-success) 10%, black);
}

/* Critical: Prevent white flash on load */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--brand-bg) !important;
  color: var(--brand-text);
  min-height: 100vh;
}

.brand-shell {
  background: radial-gradient(circle at 20% 20%,
      color-mix(in srgb, var(--brand-accent) 8%, transparent), transparent 55%),
    radial-gradient(circle at 80% 10%,
      color-mix(in srgb, var(--brand-primary-strong) 8%, transparent), transparent 45%),
    var(--brand-bg);
  min-height: 100vh;
}

.brand-card {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--brand-bg) 95%, transparent),
    color-mix(in srgb, var(--brand-surface) 85%, transparent));
  border: 1px solid color-mix(in srgb, var(--brand-primary) 12%, transparent);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--brand-bg) 55%, transparent);
}

.brand-divider {
  border-top: 1px solid color-mix(in srgb, var(--brand-primary) 16%, transparent);
}

.brand-chip {
  background: color-mix(in srgb, var(--brand-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 18%, transparent);
  color: var(--brand-accent);
}

.brand-table thead {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--brand-surface) 95%, transparent),
    color-mix(in srgb, var(--brand-bg) 95%, transparent));
}

.brand-table tbody tr {
  transition: background 0.2s ease, transform 0.2s ease;
}

.brand-table tbody tr:hover {
  background: color-mix(in srgb, var(--brand-accent) 6%, transparent);
}

.brand-pill {
  background: color-mix(in srgb, var(--brand-primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, transparent);
  color: var(--brand-primary);
}

.brand-badge {
  color: var(--brand-bg);
  background: var(--brand-primary);
}

.brand-section-title {
  color: var(--brand-primary);
}

/* Custom Scrollbar Styles */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--brand-primary-strong) var(--brand-surface);
}

/* WebKit browsers (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: var(--brand-surface);
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
  background: var(--brand-primary-strong);
  border-radius: 4px;
  border: 2px solid var(--brand-surface);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--brand-primary);
}

*::-webkit-scrollbar-thumb:active {
  background: var(--brand-accent);
}

/* Scrollbar corner (when both scrollbars are visible) */
*::-webkit-scrollbar-corner {
  background: var(--brand-surface);
}