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

@theme {
  /* Definir color café personalizado con todos los shades */
  --color-coffee-50: #fef9f0;
  --color-coffee-100: #fef3e0;
  --color-coffee-200: #fde5c0;
  --color-coffee-300: #fbd4a0;
  --color-coffee-400: #f0c080;
  --color-coffee-500: #c08040;
  --color-coffee-600: #a06830;
  --color-coffee-700: #805020;
  --color-coffee-800: #5a3a18;
  --color-coffee-900: #3a2a16;
  --color-coffee-950: #1b1209;
}

: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;
}

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

.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);
}

/* 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);
}