:root {
  --surface: #1b1d21;
  --surface-raised: #24262b;
  --surface-border: #34363c;
  --text: #e8e7e3;
  --text-muted: #9a9890;

  --color-circular-replay: #3987e5;
  --color-mondragon-comp: #d95926;
  --color-acede: #199e70;
  --color-personal: #c98500;
  --color-colaboraciones: #d55181;
  --color-otros: #8a8880;
  --color-sin-sombrero: #6b6a63;

  /* Reservado para huecos de numeración. No usar para nada más. */
  --color-hueco: #e66767;

  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
}

a {
  color: inherit;
}

.error-banner {
  background: var(--surface-raised);
  border: 1px solid var(--color-hueco);
  color: var(--text);
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
}

/* Overlay de token: compartido por las dos vistas. */
.token-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
}

.token-form {
  background: var(--surface-raised);
  border: 1px solid var(--surface-border);
  border-radius: 4px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 280px;
}

.token-form label {
  color: var(--text);
  font-size: 0.9rem;
}

.token-form input {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  color: var(--text);
  padding: 0.5rem;
  font-size: 1rem;
  border-radius: 3px;
}

.token-form button {
  background: var(--color-circular-replay);
  color: var(--text);
  border: none;
  padding: 0.5rem;
  border-radius: 3px;
  font-size: 1rem;
  cursor: pointer;
}