/**
 * Design System - Layout (navbar, footer)
 */

/* Navbar oscuro #121212 */
.ds-navbar {
  background-color: #121212 !important;
  padding-top: var(--ds-s);
  padding-bottom: var(--ds-s);
}

.ds-navbar .ds-navbar__brand {
  display: inline-flex;
  align-items: center;
  color: var(--ds-on-surface);
  text-decoration: none;
  font-size: var(--ds-font-label-large-size);
  font-weight: 600;
}

.ds-navbar .ds-navbar__brand img {
  height: 28px;
  width: auto;
}

.ds-navbar .ds-navbar__right {
  display: flex;
  align-items: center;
  gap: var(--ds-s);
  font-size: var(--ds-font-body-medium-size);
  color: var(--ds-on-surface-secondary);
}

.ds-navbar .ds-navbar__right a {
  color: var(--ds-on-surface-secondary);
  text-decoration: none;
}

.ds-navbar .ds-navbar__right a:hover {
  color: var(--ds-on-surface);
}

.ds-navbar .ds-navbar__separator {
  color: var(--ds-on-surface-secondary);
  opacity: 0.6;
  user-select: none;
}

.ds-navbar .navbar-toggler {
  color: var(--ds-on-surface-secondary);
}

.ds-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Footer negro */
.ds-footer {
  background-color: var(--ds-background);
  color: var(--ds-background-secondary);
  padding: var(--ds-l) 0;
  margin-top: auto;
  font-size: var(--ds-font-body-small-size);
}

.ds-footer .ds-footer__copyright {
  color: var(--ds-on-surface-secondary);
  margin: 0;
}

.ds-footer .ds-footer__links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-xs);
  margin: 0;
}

.ds-footer .ds-footer__links a {
  color: var(--ds-accent);
  text-decoration: none;
}

.ds-footer .ds-footer__links a:hover {
  text-decoration: underline;
  opacity: 0.9;
}

.ds-footer .ds-footer__links .ds-footer__separator {
  color: var(--ds-on-surface-secondary);
  opacity: 0.5;
}