:root {
  /* Tokens de facturanza_common/lib/src/ui/style/style.dart (tema claro) */
  --bg-primary: #f5f5f5;      /* lightBackground */
  --bg-secondary: #ffffff;    /* lightSectionEditable */
  --text-primary: #3a3a3a;
  --text-secondary: #616161;  /* mutedTextColor */
  --brand-primary: #255b6a;   /* primarySwatch.shade800 */
  --brand-secondary: #307588; /* actionFill */
  --brand-light-green: #00a791;
  --brand-gold: #d3853c;
  --border-color: rgba(0, 0, 0, 0.10);
  --card-bg: #ffffff;
  --card-hover: #e4e4e4;      /* lightSection */
  --nav-tint: 48, 117, 136;
}

.dark {
  /* tema oscuro */
  --bg-primary: #414141;      /* darkBackground */
  --bg-secondary: #4a4a4a;
  --text-primary: #e8e8e8;    /* darkText */
  --text-secondary: #d0d0d0;
  --brand-primary: #86c4d5;   /* linkTextColor dark */
  --brand-secondary: #a4d2df;
  --brand-light-green: #63d389;
  --brand-gold: #ffc14d;
  --border-color: rgba(255, 255, 255, 0.14);
  --card-bg: #545454;         /* darkSectionEditable */
  --card-hover: #5c5c5c;
  --nav-tint: 94, 176, 199;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.code-font {
  font-family: 'JetBrains Mono', monospace;
}

/* Custom Scrollbars */
.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 4px;
}

/* Sidebar Nav Items */
.nav-group-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  padding: 0.75rem 0.75rem 0.25rem 0.75rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.45rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.nav-item:hover {
  color: var(--brand-primary);
  background-color: rgba(var(--nav-tint), 0.10);
}

.nav-item.active {
  color: var(--brand-primary);
  background-color: rgba(var(--nav-tint), 0.18);
  font-weight: 600;
}

/* Feature Grid Cards (Flutter Docs reference) */
.doc-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  transition: all 0.2s ease;
}

.doc-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-primary);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
}

/* Placeholder device frame styles */
.device-placeholder {
  background: repeating-linear-gradient(
    -45deg,
    rgba(148, 163, 184, 0.03),
    rgba(148, 163, 184, 0.03) 10px,
    rgba(148, 163, 184, 0.06) 10px,
    rgba(148, 163, 184, 0.06) 20px
  );
}

/* Tarjetas del catálogo: color por función, gradiente Premium y de IA (premium_avatar_ring.dart / ai_button.dart) */
.doc-card { position: relative; }
.card-plain { border-top: 3px solid var(--accent); }
.card-plain:hover { border-color: var(--accent); }
.card-icon { display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; width: 2.5rem; border-radius: 12px; color: #fff; }
.grad-premium { background: linear-gradient(135deg, #FFC83D, #10B981, #3B82F6, #8B5CF6); color: #0e1b4d; }
.grad-ai { background: linear-gradient(135deg, #5EB0C7, #63D389 50%, #C5D0F9); color: #0e1b4d; }
.card-premium, .card-ai { border: 2px solid transparent; }
.card-premium { background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, linear-gradient(135deg, #FFC83D, #10B981, #3B82F6, #8B5CF6, #FFC83D) border-box; }
.card-ai { background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, linear-gradient(135deg, #5EB0C7, #63D389 50%, #C5D0F9) border-box; }
.chip-premium, .chip-ai { font-size: 0.625rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; color: #0e1b4d; }
.chip-premium { background: linear-gradient(90deg, #FFC83D, #10B981, #3B82F6, #8B5CF6); }
.chip-ai { background: linear-gradient(90deg, #5EB0C7, #63D389 50%, #C5D0F9); }