/* Generado por "npm run ds:sync" desde el Design System.
   NO editar acá: el cambio se hace en DesignSystemMecsa/packages/shell
   y se vuelve a sincronizar. */

:root {
  --gm-navy: #013483;
  --gm-navy-dark: #112542;
  --gm-navy-light: #13438b;
  --gm-amber: #f29c2e;
  --gm-amber-alt: #f7941d;
  --gm-success: #198754;
  --gm-danger: #dc3545;
  --gm-warning: #ffc107;
  --gm-info: #0dcaf0;
  --gm-font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --gm-space-xs: 0.25rem;
  --gm-space-sm: 0.5rem;
  --gm-space-md: 1rem;
  --gm-space-lg: 1.5rem;
  --gm-space-xl: 2rem;
  --gm-space-xxl: 3rem;
  --gm-radius-sm: 8px;
  --gm-radius-md: 12px;
  --gm-radius-lg: 16px;
  --gm-radius-pill: 999px;
}

:root,
:root[data-theme=light] {
  --bg-app: #f8f9fa;
  --bg-surface: #ffffff;
  --bg-surface-2: #f8f9fa;
  --bg-surface-3: #f3f4f6;
  --border: #eaeaea;
  --border-soft: #f3f4f6;
  --text: #111827;
  --text-2: #4b5563;
  --text-muted: #6b7280;
  --brand: #013483;
  --brand-contrast:#ffffff;
  --accent: #f7941d;
  --accent-text: #b35f00;
  --sidebar-from: #ffffff;
  --sidebar-to: #ffffff;
  --sidebar-text: #6b7280;
  --sidebar-text-hover: #111827;
  --sidebar-text-active: #013483;
  --sidebar-name: #111827;
  --sidebar-group-text: #6b7280;
  --sidebar-hover-bg: #f3f4f6;
  --sidebar-active-bg: rgba(1, 52, 131, 0.1);
  --sidebar-border: #eaeaea;
  --sidebar-logo-bg: transparent;
  --sidebar-newbtn-text: #013483;
  --sidebar-newbtn-border: rgba(1, 52, 131, 0.30);
  --topbar-from: #ffffff;
  --topbar-to: #f6f8fc;
  --topbar-border: #e8ecf3;
  --shadow: rgba(0, 0, 0, .07);
  --shadow-strong: rgba(0, 0, 0, .12);
  --input-bg: #f8f9fa;
  --input-border: #eaeaea;
  --scroll-thumb: #d4d8e0;
  --scroll-thumb-hover: #9ca3af;
  color-scheme: light;
}

:root[data-theme=dark] {
  --bg-app: #0b1120;
  --bg-surface: #131c2e;
  --bg-surface-2: #1a2436;
  --bg-surface-3: #212c40;
  --border: #263248;
  --border-soft: #1e2839;
  --text: #e8edf7;
  --text-2: #b6c2d6;
  --text-muted: #7f8ea8;
  --brand: #5b8def;
  --brand-contrast:#0b1120;
  --accent: #f7941d;
  --accent-text: #f7941d;
  --sidebar-from: #0d1526;
  --sidebar-to: #070d1a;
  --sidebar-text: #c3d0e6;
  --sidebar-text-hover: #ffffff;
  --sidebar-text-active: #ffffff;
  --sidebar-name: #ffffff;
  --sidebar-group-text: #8ba0c4;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.07);
  --sidebar-active-bg: rgba(255, 255, 255, 0.13);
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-logo-bg: #ffffff;
  --sidebar-newbtn-text: #dbe4f2;
  --sidebar-newbtn-border: rgba(255, 255, 255, 0.28);
  --topbar-from: #131c2e;
  --topbar-to: #0f1726;
  --topbar-border: #263248;
  --shadow: rgba(0, 0, 0, .45);
  --shadow-strong: rgba(0, 0, 0, .6);
  --input-bg: #1a2436;
  --input-border: #2c3a52;
  --scroll-thumb: #2e3a52;
  --scroll-thumb-hover: #46587d;
  color-scheme: dark;
  --bs-body-bg: #131c2e;
  --bs-body-color: #e8edf7;
  --bs-emphasis-color: #e8edf7;
  --bs-secondary-color: #b6c2d6;
  --bs-tertiary-color: #7f8ea8;
  --bs-secondary-bg: #1a2436;
  --bs-tertiary-bg: #212c40;
  --bs-border-color: #263248;
  --bs-heading-color: #e8edf7;
  --bs-link-color: #5b8def;
  --bs-link-hover-color: #7ba4f4;
  --bs-code-color: #f0a4c8;
}

:root[data-theme=dark] .form-floating > label::after {
  background-color: transparent !important;
}

:root[data-theme=dark] .cms-main-content {
  color: var(--text);
}
:root[data-theme=dark] .card,
:root[data-theme=dark] .card-header.bg-white, :root[data-theme=dark] .card-header.bg-light,
:root[data-theme=dark] .modal-content,
:root[data-theme=dark] .dropdown-menu,
:root[data-theme=dark] .list-group-item,
:root[data-theme=dark] .accordion-item,
:root[data-theme=dark] .offcanvas,
:root[data-theme=dark] .toast,
:root[data-theme=dark] .bg-white,
:root[data-theme=dark] .bg-light {
  background-color: var(--bg-surface) !important;
  color: var(--text);
  border-color: var(--border);
}
:root[data-theme=dark] .card-header, :root[data-theme=dark] .card-footer, :root[data-theme=dark] .modal-header, :root[data-theme=dark] .modal-footer {
  background-color: var(--bg-surface-2);
  border-color: var(--border);
}
:root[data-theme=dark] .text-dark, :root[data-theme=dark] .text-black, :root[data-theme=dark] .text-body {
  color: var(--text) !important;
}
:root[data-theme=dark] .text-muted, :root[data-theme=dark] .text-secondary {
  color: var(--text-muted) !important;
}
:root[data-theme=dark] h1, :root[data-theme=dark] h2, :root[data-theme=dark] h3, :root[data-theme=dark] h4, :root[data-theme=dark] h5, :root[data-theme=dark] h6,
:root[data-theme=dark] .h1, :root[data-theme=dark] .h2, :root[data-theme=dark] .h3, :root[data-theme=dark] .h4, :root[data-theme=dark] .h5, :root[data-theme=dark] .h6 {
  color: var(--text);
}
:root[data-theme=dark] .text-primary, :root[data-theme=dark] .text-primary-gm, :root[data-theme=dark] .text-primary-title-gm {
  color: var(--brand) !important;
}
:root[data-theme=dark] .text-dark-gm {
  color: var(--text) !important;
}
:root[data-theme=dark] .border, :root[data-theme=dark] .border-top, :root[data-theme=dark] .border-bottom,
:root[data-theme=dark] .border-start, :root[data-theme=dark] .border-end {
  border-color: var(--border) !important;
}
:root[data-theme=dark] hr {
  border-color: var(--border);
  opacity: 1;
}
:root[data-theme=dark] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: var(--bg-surface-2);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: var(--bg-surface-3);
  --bs-table-hover-color: var(--text);
  color: var(--text);
}
:root[data-theme=dark] .table > thead {
  color: var(--text-2);
}
:root[data-theme=dark] .table > :not(caption) > * > * {
  background-color: transparent;
  border-color: var(--border);
}
:root[data-theme=dark] .table-light, :root[data-theme=dark] .table-light > th, :root[data-theme=dark] .table-light > td,
:root[data-theme=dark] thead.table-light th, :root[data-theme=dark] .table > thead.table-light > tr > * {
  --bs-table-bg: var(--bg-surface-2);
  background-color: var(--bg-surface-2) !important;
  color: var(--text-2) !important;
  border-color: var(--border) !important;
}
:root[data-theme=dark] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--bg-surface-2);
  color: var(--text);
}
:root[data-theme=dark] .table-hover > tbody > tr:hover > * {
  background-color: var(--bg-surface-3);
  color: var(--text);
}
:root[data-theme=dark] .form-control, :root[data-theme=dark] .form-select, :root[data-theme=dark] .input-group-text, :root[data-theme=dark] .ts-control, :root[data-theme=dark] .ts-dropdown {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
:root[data-theme=dark] .form-control::placeholder {
  color: var(--text-muted);
}
:root[data-theme=dark] .form-control:focus, :root[data-theme=dark] .form-select:focus {
  background-color: var(--bg-surface-2);
  border-color: var(--brand);
  color: var(--text);
  box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.15);
}
:root[data-theme=dark] .form-control:disabled, :root[data-theme=dark] .form-control[readonly] {
  background-color: var(--bg-surface-3);
  color: var(--text-2);
}
:root[data-theme=dark] .form-label, :root[data-theme=dark] .form-check-label {
  color: var(--text-2);
}
:root[data-theme=dark] input[type=date]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.6);
}
:root[data-theme=dark] .btn-light, :root[data-theme=dark] .btn-outline-secondary, :root[data-theme=dark] .btn-outline-dark {
  background-color: var(--bg-surface-2);
  border-color: var(--border);
  color: var(--text);
}
:root[data-theme=dark] .btn-light:hover, :root[data-theme=dark] .btn-outline-secondary:hover, :root[data-theme=dark] .btn-outline-dark:hover {
  background-color: var(--bg-surface-3);
  color: var(--text);
}
:root[data-theme=dark] .bg-body, :root[data-theme=dark] .bg-body-tertiary, :root[data-theme=dark] .bg-body-secondary {
  background-color: var(--bg-surface) !important;
}
:root[data-theme=dark] .badge.bg-light, :root[data-theme=dark] .badge.text-bg-light {
  background-color: var(--bg-surface-3) !important;
  color: var(--text) !important;
}
:root[data-theme=dark] a:not(.btn):not(.nav-link-gm):not(.apps-item):not(.sidebar-workspace):not(.sidebar-new-btn):not(.sidebar-group-header) {
  color: var(--brand);
}
:root[data-theme=dark] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}
:root[data-theme=dark] .nav-tabs {
  border-bottom-color: var(--border);
}
:root[data-theme=dark] .nav-tabs .nav-link {
  color: var(--text-2);
  border-color: transparent;
}
:root[data-theme=dark] .nav-tabs .nav-link:hover {
  border-color: var(--border);
  background: var(--bg-surface-2);
}
:root[data-theme=dark] .nav-tabs .nav-link.active {
  background: var(--bg-surface);
  border-color: var(--border) var(--border) var(--bg-surface);
  color: var(--text);
}
:root[data-theme=dark] .nav-pills .nav-link {
  color: var(--text-2);
}
:root[data-theme=dark] .nav-pills .nav-link.active {
  background: var(--brand);
  color: var(--brand-contrast);
}
:root[data-theme=dark] .page-link {
  background: var(--bg-surface-2);
  border-color: var(--border);
  color: var(--text-2);
}
:root[data-theme=dark] .page-link:hover {
  background: var(--bg-surface-3);
  color: var(--text);
}
:root[data-theme=dark] .page-item.active .page-link {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-contrast);
}
:root[data-theme=dark] .page-item.disabled .page-link {
  background: var(--bg-surface);
  color: var(--text-muted);
}
:root[data-theme=dark] .btn-page {
  background: var(--bg-surface-2);
  border-color: var(--border);
  color: var(--text-2);
}
:root[data-theme=dark] .btn-page:hover {
  background: var(--bg-surface-3);
  color: var(--text);
}
:root[data-theme=dark] .btn-page.active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-contrast);
}
:root[data-theme=dark] .alert-success {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.3);
  color: #86efac;
}
:root[data-theme=dark] .alert-danger {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}
:root[data-theme=dark] .alert-warning {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fcd34d;
}
:root[data-theme=dark] .alert-info,
:root[data-theme=dark] .alert-primary {
  background: rgba(91, 141, 239, 0.14);
  border-color: rgba(91, 141, 239, 0.3);
  color: #b9cdff;
}
:root[data-theme=dark] .alert-secondary, :root[data-theme=dark] .alert-light {
  background: var(--bg-surface-2);
  border-color: var(--border);
  color: var(--text-2);
}
:root[data-theme=dark] .progress {
  background: var(--bg-surface-3);
}
:root[data-theme=dark] .breadcrumb-item, :root[data-theme=dark] .breadcrumb-item a {
  color: var(--text-2);
}
:root[data-theme=dark] .breadcrumb-item.active {
  color: var(--text);
}
:root[data-theme=dark] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-muted);
}
:root[data-theme=dark] .form-check-input {
  background-color: var(--input-bg);
  border-color: var(--input-border);
}
:root[data-theme=dark] .form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}
:root[data-theme=dark] .spinner-border.text-primary {
  color: var(--brand) !important;
}
:root[data-theme=dark] .role-item-premium.active {
  background: rgba(91, 141, 239, 0.12) !important;
  border-color: var(--brand) !important;
}
:root[data-theme=dark] .role-item-premium.active .role-icon-box {
  background: rgba(91, 141, 239, 0.22) !important;
  color: #b9cdff !important;
}

:root[data-theme=dark] .btn-primary, :root[data-theme=dark] .btn-gm-primary, :root[data-theme=dark] .btn-primary-gm {
  background-color: var(--brand);
  border-color: var(--brand);
  color: var(--brand-contrast);
}
:root[data-theme=dark] .btn-primary:hover, :root[data-theme=dark] .btn-primary:focus, :root[data-theme=dark] .btn-primary:active, :root[data-theme=dark] .btn-gm-primary:hover, :root[data-theme=dark] .btn-gm-primary:focus, :root[data-theme=dark] .btn-gm-primary:active, :root[data-theme=dark] .btn-primary-gm:hover, :root[data-theme=dark] .btn-primary-gm:focus, :root[data-theme=dark] .btn-primary-gm:active {
  background-color: #7ba4f4;
  border-color: #7ba4f4;
  color: var(--brand-contrast);
}
:root[data-theme=dark] .btn-outline-primary, :root[data-theme=dark] .btn-gm-outline-primary {
  color: var(--brand);
  border-color: var(--brand);
}
:root[data-theme=dark] .btn-outline-primary:hover, :root[data-theme=dark] .btn-outline-primary:focus, :root[data-theme=dark] .btn-outline-primary:active, :root[data-theme=dark] .btn-gm-outline-primary:hover, :root[data-theme=dark] .btn-gm-outline-primary:focus, :root[data-theme=dark] .btn-gm-outline-primary:active {
  background-color: var(--brand);
  color: var(--brand-contrast);
}
:root[data-theme=dark] .btn-gm-outline-secondary, :root[data-theme=dark] .btn-outline-secondary, :root[data-theme=dark] .btn-outline-dark {
  color: var(--text-2);
  border-color: var(--border);
}
:root[data-theme=dark] .btn-gm-outline-secondary:hover, :root[data-theme=dark] .btn-gm-outline-secondary:focus, :root[data-theme=dark] .btn-gm-outline-secondary:active, :root[data-theme=dark] .btn-outline-secondary:hover, :root[data-theme=dark] .btn-outline-secondary:focus, :root[data-theme=dark] .btn-outline-secondary:active, :root[data-theme=dark] .btn-outline-dark:hover, :root[data-theme=dark] .btn-outline-dark:focus, :root[data-theme=dark] .btn-outline-dark:active {
  background-color: var(--bg-surface-2);
  color: var(--text);
  border-color: var(--border);
}
:root[data-theme=dark] .btn-gm-outline-light {
  color: var(--text-2);
  border-color: var(--border);
}
:root[data-theme=dark] .btn-gm-outline-light:hover {
  color: var(--text);
  background: var(--bg-surface-2);
}
:root[data-theme=dark] .btn-gm-secondary, :root[data-theme=dark] .btn-light, :root[data-theme=dark] .btn-secondary {
  background-color: var(--bg-surface-2);
  border-color: var(--border);
  color: var(--text);
}
:root[data-theme=dark] .btn-gm-secondary:hover, :root[data-theme=dark] .btn-light:hover, :root[data-theme=dark] .btn-secondary:hover {
  background-color: var(--bg-surface-3);
  color: var(--text);
}
:root[data-theme=dark] .btn-link, :root[data-theme=dark] .btn-link-gm {
  color: var(--brand);
}
:root[data-theme=dark] .btn:disabled, :root[data-theme=dark] .btn.disabled {
  background-color: var(--bg-surface-3);
  border-color: var(--border);
  color: var(--text-muted);
  opacity: 0.65;
}
:root[data-theme=dark] .modal-content {
  background-color: var(--bg-surface);
  color: var(--text);
  border-color: var(--border);
}
:root[data-theme=dark] .modal-header, :root[data-theme=dark] .modal-footer {
  background-color: var(--bg-surface-2);
  border-color: var(--border);
}
:root[data-theme=dark] .modal-title {
  color: var(--text);
}
:root[data-theme=dark] .modal .form-control, :root[data-theme=dark] .modal .form-select, :root[data-theme=dark] .modal .input-group-text {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
:root[data-theme=dark] .modal .form-label, :root[data-theme=dark] .modal .form-check-label {
  color: var(--text-2);
}
:root[data-theme=dark] .modal .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}
:root[data-theme=dark] .modal .table {
  color: var(--text);
  --bs-table-color: var(--text);
}
:root[data-theme=dark] .ts-wrapper.single .ts-control,
:root[data-theme=dark] .ts-control, :root[data-theme=dark] .ts-control input {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--input-border) !important;
}
:root[data-theme=dark] .ts-control input::placeholder {
  color: var(--text-muted) !important;
}
:root[data-theme=dark] .ts-wrapper.focus .ts-control {
  border-color: var(--brand) !important;
}
:root[data-theme=dark] .ts-control .item {
  color: var(--text) !important;
}
:root[data-theme=dark] .ts-dropdown {
  background: var(--bg-surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: 0 8px 24px var(--shadow);
}
:root[data-theme=dark] .ts-dropdown .option {
  color: var(--text-2) !important;
}
:root[data-theme=dark] .ts-dropdown .option:hover,
:root[data-theme=dark] .ts-dropdown .active {
  background: var(--bg-surface-2) !important;
  color: var(--text) !important;
}
:root[data-theme=dark] .ts-dropdown .optgroup-header {
  background: var(--bg-surface-2) !important;
  color: var(--text-muted) !important;
}
:root[data-theme=dark] .ts-dropdown .no-results {
  color: var(--text-muted) !important;
}
:root[data-theme=dark] .ts-dropdown [data-selectable].option[data-value=""] {
  color: var(--text-muted) !important;
}

:root[data-theme=dark] .swal2-popup {
  background: var(--bg-surface) !important;
  color: var(--text) !important;
}
:root[data-theme=dark] .swal2-title, :root[data-theme=dark] .swal2-html-container {
  color: var(--text) !important;
}
:root[data-theme=dark] .swal2-input, :root[data-theme=dark] .swal2-textarea, :root[data-theme=dark] .swal2-select {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
}