:root {
  --color-primary: #2563eb;
  --color-secondary: #e8a020;
  --color-background: #0a0a0a;
  --color-text: #f5f5f5;
  --color-card: #141414;
  --color-border: #2a2a2a;
  --color-button-primary: #2563eb;
  --color-button-secondary: #2563eb;
  --color-link: #3b82f6;
  --color-text-on-primary: #ffffff;
  --fondo: var(--color-background);
  --texto: var(--color-text);
  --texto-secundario: color-mix(in srgb, var(--color-text) 65%, var(--color-background));
  --acento: var(--color-primary);
  --acento-hover: #3f76ed;
  --borde: var(--color-border);
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
}

.boton-principal:not(:disabled),
a.boton-principal {
  background-color: var(--color-button-primary);
  border-color: var(--color-button-primary);
  color: var(--color-text-on-primary);
}

.boton-principal:not(:disabled):hover,
a.boton-principal:hover {
  background-color: var(--acento-hover);
  border-color: var(--acento-hover);
  color: var(--color-text-on-primary);
}

.boton-secundario:not(:disabled),
a.boton-secundario {
  background-color: transparent;
  border-color: var(--color-button-secondary);
  color: var(--color-text);
}

.boton-secundario:not(:disabled):hover,
a.boton-secundario:hover {
  background-color: color-mix(in srgb, var(--color-button-secondary) 14%, transparent);
  border-color: var(--color-link);
  color: var(--color-text);
}

.auth-card,
.landing-panel,
.tarjeta-resumen,
.admin-config-tarjeta,
.sala-panel {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-card) 96%, var(--color-background)) 0%,
    color-mix(in srgb, var(--color-card) 88%, var(--color-background)) 100%
  );
  border-color: var(--color-border);
}

.auth-card,
.landing-panel {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.auth-campo input,
.invitacion-campo input,
.formulario-campo input,
.formulario-campo select,
.formulario-campo textarea,
.formulario-branding textarea {
  background-color: color-mix(in srgb, var(--color-card) 70%, var(--color-background));
  border-color: var(--color-border);
  color: var(--color-text);
}

.auth-campo input:focus,
.invitacion-campo input:focus,
.formulario-campo input:focus,
.formulario-campo select:focus,
.formulario-campo textarea:focus,
.formulario-branding textarea:focus {
  border-color: var(--color-link);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-link) 25%, transparent);
}

.auth-submit {
  background-color: var(--color-button-primary);
  color: var(--color-text-on-primary);
}

.auth-submit:hover {
  background-color: var(--acento-hover);
  color: var(--color-text-on-primary);
}

.auth-pie a,
.auth-enlace-volver {
  color: var(--color-link);
}

.auth-pie a:hover,
.auth-enlace-volver:hover {
  color: #5895f7;
}

a.enlace-principal,
.enlace-nav:hover,
.enlace-nav-activo,
.admin-subnav-link-activo {
  color: var(--color-link);
}

.admin-nav-link-activo {
  border-color: var(--color-link);
  color: var(--color-link);
}

.pie,
.admin-pie {
  color: var(--texto-secundario);
}

.aviso-ok {
  background-color: color-mix(in srgb, var(--color-link) 18%, var(--color-background));
  border-color: var(--color-link);
  color: var(--color-text);
}

.nota {
  color: var(--color-secondary);
}