:root {
  --mym-page-bg: #eef3f8;
  --mym-page-text: #22384c;
  --mym-page-muted: #6a7d90;
  --mym-surface: #ffffff;
  --mym-surface-soft: #f7fbff;
  --mym-surface-alt: #f1f6fb;
  --mym-border: #d8e2ec;
  --mym-border-strong: #c8d5e2;
  --mym-shadow: 0 18px 36px rgba(24, 46, 68, 0.10);
  --mym-content-grad-end: #f7fbff;
  --mym-table-hover: #f2f7fc;
  --mym-switcher-bg: rgba(255, 255, 255, 0.90);
  --mym-auth-panel-bg: rgba(255, 255, 255, 0.82);
  --mym-auth-form-bg-start: rgba(255, 255, 255, 0.94);
  --mym-auth-form-bg-end: rgba(247, 251, 255, 0.96);
  --mym-alert-bg: #fff0f0;
  --mym-alert-border: #f0b9b8;
  --mym-link: #1f6fb2;
  --mym-accent: #1f6fb2;
  --mym-accent-strong: #174f80;
  --mym-accent-soft: rgba(31, 111, 178, 0.12);
  --mym-header-brand-start: #173a58;
  --mym-header-brand-mid: #1c5f92;
  --mym-header-brand-end: #2b79ad;
  --mym-header-bar-bg: linear-gradient(180deg, #fbfdff 0%, #f1f6fb 100%);
  --mym-header-text: #2f4b66;
  --mym-header-text-soft: #6a7d90;
  --mym-sidebar-start: #17364f;
  --mym-sidebar-mid: #17344c;
  --mym-sidebar-end: #162f43;
  --mym-sidebar-card: rgba(255, 255, 255, 0.07);
  --mym-sidebar-card-border: rgba(255, 255, 255, 0.08);
  --mym-sidebar-text: #e0ebf5;
  --mym-sidebar-text-soft: rgba(226, 236, 244, 0.80);
  --mym-sidebar-hover: rgba(255, 255, 255, 0.10);
  --mym-login-brand-start: rgba(16, 32, 52, 0.95);
  --mym-login-brand-mid: rgba(23, 56, 81, 0.94);
  --mym-login-brand-end: rgba(28, 74, 110, 0.90);
}

html[data-mym-theme="intermedio"] {
  --mym-page-bg: #dbe4ed;
  --mym-page-text: #1f3040;
  --mym-page-muted: #5b6d7f;
  --mym-surface: #eef3f8;
  --mym-surface-soft: #e7edf4;
  --mym-surface-alt: #dde6ef;
  --mym-border: #b8c6d4;
  --mym-border-strong: #a7b6c5;
  --mym-shadow: 0 18px 34px rgba(20, 34, 48, 0.14);
  --mym-content-grad-end: #eaf0f6;
  --mym-table-hover: #e5ecf3;
  --mym-switcher-bg: rgba(233, 239, 245, 0.92);
  --mym-auth-panel-bg: rgba(238, 243, 248, 0.86);
  --mym-auth-form-bg-start: rgba(238, 243, 248, 0.95);
  --mym-auth-form-bg-end: rgba(228, 236, 244, 0.96);
  --mym-alert-bg: #f3dede;
  --mym-alert-border: #d7a9a8;
  --mym-link: #1d5e92;
  --mym-accent: #255f8d;
  --mym-accent-strong: #184566;
  --mym-accent-soft: rgba(37, 95, 141, 0.14);
  --mym-header-brand-start: #31485f;
  --mym-header-brand-mid: #41627f;
  --mym-header-brand-end: #4e7898;
  --mym-header-bar-bg: linear-gradient(180deg, #e9eff5 0%, #dfe7ef 100%);
  --mym-header-text: #22384c;
  --mym-header-text-soft: #607285;
  --mym-sidebar-start: #2e4357;
  --mym-sidebar-mid: #334a60;
  --mym-sidebar-end: #293d50;
  --mym-sidebar-card: rgba(255, 255, 255, 0.08);
  --mym-sidebar-card-border: rgba(255, 255, 255, 0.10);
  --mym-sidebar-text: #e8f0f7;
  --mym-sidebar-text-soft: rgba(231, 239, 246, 0.82);
  --mym-sidebar-hover: rgba(255, 255, 255, 0.12);
  --mym-login-brand-start: rgba(40, 55, 72, 0.96);
  --mym-login-brand-mid: rgba(50, 73, 95, 0.95);
  --mym-login-brand-end: rgba(64, 96, 121, 0.92);
}

html[data-mym-theme="oscuro"] {
  --mym-page-bg: #101924;
  --mym-page-text: #e4edf6;
  --mym-page-muted: #96a8bb;
  --mym-surface: #18232f;
  --mym-surface-soft: #1d2935;
  --mym-surface-alt: #131d28;
  --mym-border: #2a3b4d;
  --mym-border-strong: #355067;
  --mym-shadow: 0 22px 40px rgba(3, 8, 14, 0.34);
  --mym-content-grad-end: #15202b;
  --mym-table-hover: #1c2834;
  --mym-switcher-bg: rgba(24, 35, 47, 0.90);
  --mym-auth-panel-bg: rgba(18, 29, 40, 0.86);
  --mym-auth-form-bg-start: rgba(24, 35, 47, 0.95);
  --mym-auth-form-bg-end: rgba(19, 29, 40, 0.96);
  --mym-alert-bg: #3b2629;
  --mym-alert-border: #6a3d43;
  --mym-link: #7cc6ff;
  --mym-accent: #4ea7eb;
  --mym-accent-strong: #317bb5;
  --mym-accent-soft: rgba(78, 167, 235, 0.16);
  --mym-header-brand-start: #0f2233;
  --mym-header-brand-mid: #17354d;
  --mym-header-brand-end: #1f4b69;
  --mym-header-bar-bg: linear-gradient(180deg, #16212d 0%, #121b25 100%);
  --mym-header-text: #e2ecf6;
  --mym-header-text-soft: #9cb0c4;
  --mym-sidebar-start: #101822;
  --mym-sidebar-mid: #121d28;
  --mym-sidebar-end: #0e1620;
  --mym-sidebar-card: rgba(255, 255, 255, 0.04);
  --mym-sidebar-card-border: rgba(255, 255, 255, 0.08);
  --mym-sidebar-text: #dce8f3;
  --mym-sidebar-text-soft: rgba(220, 232, 243, 0.76);
  --mym-sidebar-hover: rgba(255, 255, 255, 0.08);
  --mym-login-brand-start: rgba(10, 18, 28, 0.97);
  --mym-login-brand-mid: rgba(14, 30, 43, 0.96);
  --mym-login-brand-end: rgba(20, 45, 62, 0.94);
}

html,
body {
  background: var(--mym-page-bg);
  color: var(--mym-page-text);
}

body {
  transition: background-color 0.22s ease, color 0.22s ease;
}

body,
.content-wrapper,
.right-side,
.main-footer,
.wrapper {
  background-color: var(--mym-page-bg);
  color: var(--mym-page-text);
}

.content-wrapper,
.right-side {
  background: linear-gradient(180deg, var(--mym-page-bg) 0%, var(--mym-content-grad-end) 100%) !important;
}

.main-footer,
.footer-vostic {
  background: var(--mym-surface-alt) !important;
  border-top-color: var(--mym-border) !important;
  color: var(--mym-page-muted) !important;
}

.main-footer a,
.footer-vostic a,
a {
  color: var(--mym-link);
}

.box,
.box-header,
.box-body,
.box-footer,
.nav-tabs-custom,
.nav-tabs-custom > .tab-content,
.modal-content,
.dropdown-menu,
.info-box,
.small-box,
.callout,
.table-responsive,
.content-wrapper [class*="-card"],
.content-wrapper [class*="-panel"],
.content-wrapper [class*="-shell"] {
  border-color: var(--mym-border) !important;
}

.box,
.nav-tabs-custom,
.modal-content,
.dropdown-menu,
.info-box,
.small-box,
.callout,
.content-wrapper [class*="-card"],
.content-wrapper [class*="-panel"] {
  background: var(--mym-surface) !important;
  color: var(--mym-page-text) !important;
  box-shadow: var(--mym-shadow) !important;
}

.box-header,
.box-footer,
.nav-tabs-custom > .nav-tabs,
.modal-header,
.modal-footer,
.content-wrapper [class*="toolbar"],
.content-wrapper [class*="header-card"],
.content-wrapper [class*="filter-card"] {
  background: var(--mym-surface-soft) !important;
  border-color: var(--mym-border) !important;
  color: var(--mym-page-text) !important;
}

.content-wrapper h1,
.content-wrapper h2,
.content-wrapper h3,
.content-wrapper h4,
.content-wrapper h5,
.content-wrapper h6,
.modal-title,
.box-title {
  color: var(--mym-page-text) !important;
}

.content-wrapper p,
.content-wrapper small,
.content-wrapper label,
.content-wrapper .help-block,
.content-wrapper [class*="copy"],
.content-wrapper [class*="note"],
.content-wrapper [class*="subtitle"],
.content-wrapper [class*="muted"],
.content-wrapper [class*="eyebrow"],
.modal-body p,
.modal-body label {
  color: var(--mym-page-muted) !important;
}

.content-wrapper .form-control,
.content-wrapper select,
.content-wrapper textarea,
.modal .form-control,
.modal select,
.modal textarea,
.auth-input-group,
.auth-card,
.auth-panel,
.auth-form-side {
  color: var(--mym-page-text);
}

.form-control,
select,
textarea,
.input-group-addon {
  background: var(--mym-surface) !important;
  border-color: var(--mym-border) !important;
  color: var(--mym-page-text) !important;
}

.form-control:focus,
select:focus,
textarea:focus {
  border-color: var(--mym-accent) !important;
  box-shadow: 0 0 0 3px var(--mym-accent-soft) !important;
}

.btn-default,
.btn.btn-default {
  background: var(--mym-surface-soft) !important;
  border-color: var(--mym-border) !important;
  color: var(--mym-page-text) !important;
}

.table,
.table > thead > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  border-color: var(--mym-border) !important;
  color: var(--mym-page-text) !important;
}

.table-striped > tbody > tr:nth-of-type(odd),
.content-wrapper [class*="table"] tbody tr:hover {
  background-color: var(--mym-table-hover) !important;
}

.nav-tabs-custom > .nav-tabs > li > a,
.pagination > li > a,
.pagination > li > span {
  color: var(--mym-page-text) !important;
}

.nav-tabs-custom > .nav-tabs > li.active > a,
.pagination > .active > a,
.pagination > .active > span {
  background: var(--mym-accent) !important;
  color: #fff !important;
  border-color: var(--mym-accent) !important;
}

.mym-theme-switcher-panel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--mym-switcher-bg);
  border: 1px solid var(--mym-border);
  box-shadow: 0 10px 24px rgba(19, 31, 44, 0.12);
}

.mym-theme-switcher-button {
  border: none;
  border-radius: 999px;
  min-height: 34px;
  padding: 0 12px;
  background: transparent;
  color: var(--mym-page-muted);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mym-theme-switcher-button.is-active {
  background: var(--mym-accent);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(15, 38, 63, 0.18);
}

.mym-theme-floating {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1200;
}

.auth-shell,
.auth-panel,
.auth-card,
.auth-form-side,
.auth-brand-showcase,
.auth-feature-card,
.auth-input-group,
.auth-input-icon,
.auth-footer .status,
.auth-alert {
  transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

html[data-mym-theme] .auth-panel {
  background: var(--mym-auth-panel-bg) !important;
  border-color: var(--mym-border) !important;
  box-shadow: var(--mym-shadow) !important;
}

html[data-mym-theme] .auth-form-side {
  background: linear-gradient(180deg, var(--mym-auth-form-bg-start) 0%, var(--mym-auth-form-bg-end) 100%) !important;
}

html[data-mym-theme] .auth-card,
html[data-mym-theme] .auth-brand-showcase,
html[data-mym-theme] .auth-feature-card {
  background: var(--mym-surface) !important;
  border-color: var(--mym-border) !important;
  color: var(--mym-page-text) !important;
  box-shadow: var(--mym-shadow) !important;
}

html[data-mym-theme] .auth-brand {
  background: linear-gradient(160deg, var(--mym-login-brand-start) 0%, var(--mym-login-brand-mid) 54%, var(--mym-login-brand-end) 100%) !important;
}

html[data-mym-theme] .auth-card-chip,
html[data-mym-theme] .auth-footer .status {
  background: var(--mym-accent-soft) !important;
  color: var(--mym-accent) !important;
}

html[data-mym-theme] .auth-card h2,
html[data-mym-theme] .auth-footer strong {
  color: var(--mym-page-text) !important;
}

html[data-mym-theme] .auth-card p,
html[data-mym-theme] .auth-label,
html[data-mym-theme] .auth-footer {
  color: var(--mym-page-muted) !important;
}

html[data-mym-theme] .auth-input-group {
  background: var(--mym-surface) !important;
  border-color: var(--mym-border) !important;
}

html[data-mym-theme] .auth-input-icon {
  background: var(--mym-surface-soft) !important;
  border-right-color: var(--mym-border) !important;
  color: var(--mym-page-muted) !important;
}

html[data-mym-theme] .auth-input-group .form-control {
  color: var(--mym-page-text) !important;
}

html[data-mym-theme] .auth-submit {
  background: linear-gradient(135deg, var(--mym-accent) 0%, var(--mym-accent-strong) 100%) !important;
}

html[data-mym-theme] .auth-alert {
  background: var(--mym-alert-bg) !important;
  border-color: var(--mym-alert-border) !important;
  color: #ffb9b7 !important;
}

@media (max-width: 767px) {
  .mym-theme-switcher-button span {
    display: none;
  }
}
