:root {
  /* Runa's Beer: negro · gris · dorado (marrón solo si un detalle lo pide) */
  --first-color: #c9a24a;
  --second-color: #ffffff;
  --third-color: rgb(255, 255, 255);
  --fourth-color: #ffffff;
  --five-color: rgb(255, 255, 255);
  --body-color: #2e2e2e;
  --nav-color: #0d0d0d;
  --card-color: #333333;
  --card2-color: #fff;
  --wave-color: #3a3a3a;
  --wave2-color: #333333;
  --wave1-color: #3a3a3a;
  --wave3-color: #2e2e2e;
  --wave4-color: #0d0d0d;
  --cursor-color: #c9a24a;
  --gold: var(--first-color);
  --gold-bright: #d4b35c;
  --dark: #0d0d0d;
  --dark2: #2e2e2e;
  --light-gray: #f5f5f4;
  --text-gray: #78716c;
}

html.dark {
  color-scheme: dark;
  caret-color: var(--cursor-color);
}

html:not(.dark) {
  color-scheme: light;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--light-gray);
}

html.dark * {
  scrollbar-color: var(--cursor-color) var(--body-color);
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: var(--light-gray);
}

html.dark *::-webkit-scrollbar-track {
  background: var(--body-color);
}

*::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 4px;
}

html.dark *::-webkit-scrollbar-thumb {
  background: var(--cursor-color);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--gold-bright);
}

html.dark *::-webkit-scrollbar-thumb:hover {
  background: var(--first-color);
}

/* Layout usa Tailwind en main.php; no forzar body/nav aquí */

.text-gold { color: var(--gold); }
.bg-gold { background-color: var(--gold); }

.border-gold {
  border-color: var(--gold);
}

/* Alerts legacy (si se usan fuera de Tailwind) */
.alert {
  border: none;
  border-left: 4px solid;
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.alert-success {
  background-color: #f0fdf4;
  border-color: #22c55e;
  color: #166534;
}

.alert-error {
  background-color: #fef2f2;
  border-color: #ef4444;
  color: #991b1b;
}

.alert-warning {
  background-color: #fffbeb;
  border-color: #f59e0b;
  color: #92400e;
}

html.dark .alert-success {
  background-color: rgba(6, 78, 59, 0.35);
  color: #bbf7d0;
}

html.dark .alert-error {
  background-color: rgba(127, 29, 29, 0.35);
  color: #fecaca;
}

html.dark .alert-warning {
  background-color: rgba(120, 53, 15, 0.35);
  color: #fde68a;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  margin: 0;
}

input[type=number] {
  appearance: textfield;
}