:root {
  color-scheme: light;
  --tm-cyan: #3fbdDA;
  --tm-navy: #052937;
  --tm-black: #050a0f;
  --tm-white: #ffffff;
  --tm-gray: #5f5f5e;
  --navy: #052937;
  --navy-2: #050a0f;
  --blue: #3fbdDA;
  --cyan: #3fbdDA;
  --sky: #e8f8fb;
  --accent: #3fbdDA;
  --accent-soft: #e8f8fb;
  --ink: #050a0f;
  --muted: #5f5f5e;
  --line: #dce8ea;
  --canvas: #f7fbfc;
  --bg: #f7fbfc;
  --paper: #ffffff;
  --color-primary: #052937;
  --color-primary-dark: #050a0f;
  --color-primary-light: #e8f8fb;
  --color-primary-text: #ffffff;
  --color-accent: #3fbdDA;
  --color-info: #3fbdDA;
  --color-text-primary: #050a0f;
  --color-text-secondary: #5f5f5e;
  --mat-sys-primary: #052937;
  --mat-sys-on-primary: #ffffff;
  --mat-sys-secondary: #3fbdDA;
  --mat-sys-on-secondary: #052937;
}
html, body { color: #050a0f; }
body { background-color: #f7fbfc; }
.sidebar { background: linear-gradient(165deg, #050a0f 0%, #052937 82%, #073f4a 100%); }
.login-visual { background: radial-gradient(ellipse at 75% 100%, #3fbdDA38 0%, transparent 46%), linear-gradient(135deg, #050a0f 0%, #052937 76%, #073f4a 100%); }
.welcome-hero { background: linear-gradient(120deg, #052937 0%, #064653 66%, #0b7380 118%); }
.button:not(.secondary):not(.success):not(.danger), .login-submit, #login-submit, #submit-request { color: #052937; background: #3fbdDA; }
.button:not(.secondary):not(.success):not(.danger):hover, .login-submit:hover, #login-submit:hover, #submit-request:hover { background: #34b0cf; }
.nav-item.active { color: #052937; background: #3fbdDA24; box-shadow: inset 3px 0 #3fbdDA; }
.hero-kicker, .login-message > span, .eyebrow, .login-kicker { color: #08798d; }
.login-visual .login-message > span, .login-visual .hero-kicker { color: #3fbdDA; }
.brand-wordmark { display: block; width: min(190px, 40vw); height: auto; max-height: 46px; flex: 0 1 190px; object-fit: contain; object-position: left center; }
.login-card > .brand-wordmark, .login-brand > .brand-wordmark { width: min(230px, 100%); max-height: 52px; margin: 0 0 24px; }
.brand-mark.logo-symbol, .product-mark.logo-symbol {
  color: transparent !important;
  font-size: 0 !important;
  background-color: transparent !important;
  background-image: url('/tecnomusic-logo.png') !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: 355% auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.login-brand > .brand-wordmark, .aside-brand > .brand-wordmark { width: min(255px, 100%); max-height: 58px; }
@media (max-width: 520px) {
  .brand-wordmark { width: min(142px, 36vw); max-height: 36px; }
  .login-card > .brand-wordmark, .login-brand > .brand-wordmark { width: min(205px, 100%); }
}
.brand-wordmark-light { padding: 8px 12px; border-radius: 10px; background: #fff; box-shadow: 0 10px 28px #0002; }
.brand > .brand-wordmark-light { width: min(250px, 100%); max-height: 60px; margin: 0 0 34px; }
.aside-brand .brand-mark.logo-symbol { display: block; width: 42px; height: 42px; flex: 0 0 42px; background-size: 355% auto !important; }
.area-chat__launcher, .area-chat__composer button { color: #052937 !important; background: #3fbdDA !important; }
.area-chat__header, .area-chat__image-viewer-content header { background: #052937 !important; }
.area-chat__message.own { color: #052937 !important; background: #3fbdDA !important; }
.area-chat__avatar { color: #052937 !important; background: #e8f8fb !important; }
.area-chat__contact:hover { background: #e8f8fb !important; }
.area-chat__composer input:focus { border-color: #3fbdDA !important; box-shadow: 0 0 0 3px #3fbdDA24 !important; }.login-card button:not(.secondary):not(.danger):not(.success),
button[type="submit"]:not(.secondary):not(.danger):not(.success),
.btn-primary, .button-primary, .primary-button, [data-variant="primary"] {
  color: #052937 !important;
  background: #3fbdDA !important;
}
.login-card button:not(.secondary):not(.danger):not(.success):hover,
button[type="submit"]:not(.secondary):not(.danger):not(.success):hover,
.btn-primary:hover, .button-primary:hover, .primary-button:hover {
  background: #34b0cf !important;
}
/* Dark-surface logo variants supplied for the Tecnomusic brand refresh. */
.brand-wordmark-dark {
  display: block;
  width: min(250px, 64vw);
  max-height: 62px;
  object-fit: contain;
  object-position: left center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.brand-lockup-dark {
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 24px;
}
.brand-lockup-dark .brand-wordmark-dark { flex: 0 1 250px; }
.brand-name-dark {
  color: #fff !important;
  font-size: .95rem !important;
  font-weight: 850 !important;
  letter-spacing: .12em !important;
  white-space: nowrap;
}
.brand-lockup-dark--compact { gap: 12px; margin: 0 0 4px; }
.brand-lockup-dark--compact .brand-wordmark-dark { width: min(170px, 100%); max-height: 42px; }
.brand-lockup-dark--compact .brand-name-dark { font-size: .76rem !important; }
.brand-mark.logo-symbol-dark, .product-mark.logo-symbol-dark {
  display: block;
  color: transparent !important;
  font-size: 0 !important;
  background-color: transparent !important;
  background-image: url('/tecnomusic-dark-vertical.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.login-visual .product-mark.logo-symbol-dark {
  width: 53px;
  height: 53px;
  flex: 0 0 53px;
}
.aside-brand .brand-mark.logo-symbol-dark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}
@media (max-width: 520px) {
  .brand-lockup-dark { gap: 10px; }
  .brand-lockup-dark .brand-wordmark-dark { width: min(205px, 62vw); }
  .brand-name-dark { font-size: .75rem !important; }
}
/* Readable navigation on the dark application sidebars. */
.sidebar .nav-item:not(.active) { color: #d2e5e9 !important; }
.sidebar .nav-item:hover { color: #ffffff !important; background: #ffffff12 !important; }
.sidebar .nav-item.active { color: #ffffff !important; background: #143d49 !important; box-shadow: inset 3px 0 #3fbdDA !important; }
.topbar > div:first-child > strong { display: block; margin-bottom: 4px; }
.topbar > div:first-child > small { display: block; }
.brand-lockup-dark .brand-wordmark-dark { width: min(250px, 100%); max-height: 62px; }
.brand-wordmark-dark--compact { width: min(210px, 100%); max-height: 48px; margin: 0 auto 18px; }
.brand > .brand-wordmark-dark { width: min(210px, 100%); height: auto; max-height: 52px; margin: 0 0 5px; box-shadow: none; }
.login-product-brand > .brand-wordmark-dark { width: min(255px, 100%); height: auto; max-height: 58px; box-shadow: none; }
.login-visual .product-brand > .brand-wordmark-dark { width: min(270px, 46vw); height: auto; max-height: 64px; flex: 0 1 270px; }
.login-brand > .brand-wordmark-dark { width: min(255px, 100%); max-height: 60px; margin: 0 0 28px; }