/* ==========================================================================
   Mega Sirius — camada visual (v3)
   Carregada DEPOIS de bootstrap / shards / main.css. Não muda o HTML das
   páginas: reestiliza os componentes existentes (Shards Dashboard + Bootstrap 4)
   com tokens de cor, e implementa os temas claro e escuro.
   Tema: atributo data-theme="light|dark" no <html> (ver assets/js/mega-ui.js).
   ========================================================================== */

:root,
html[data-theme="light"] {
  --ms-bg: #f5f6f8;
  --ms-surface: #ffffff;
  --ms-surface-2: #f1f3f6;
  --ms-surface-3: #e9edf2;
  --ms-border: rgba(16, 24, 40, .09);
  --ms-border-strong: rgba(16, 24, 40, .18);
  --ms-text: #1d2430;
  --ms-text-2: #5b6474;
  --ms-text-3: #8a93a3;
  --ms-accent: #185fa5;
  --ms-accent-hover: #0c447c;
  --ms-accent-soft: #e6f1fb;
  --ms-accent-text: #0c447c;
  --ms-success: #2f7d32;
  --ms-success-soft: #e8f5e9;
  --ms-warning: #8a5a00;
  --ms-warning-soft: #fdf3dc;
  --ms-danger: #b42318;
  --ms-danger-soft: #fdecea;
  --ms-info: #0b6b8a;
  --ms-info-soft: #e3f4f9;
  --ms-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --ms-focus: 0 0 0 3px rgba(24, 95, 165, .25);
  --ms-radius: 10px;
  --ms-radius-lg: 14px;
  --ms-sidebar-w: 240px;
  color-scheme: light;
}

html[data-theme="dark"] {
  --ms-bg: #0f1216;
  --ms-surface: #171b21;
  --ms-surface-2: #1e232a;
  --ms-surface-3: #262c34;
  --ms-border: rgba(255, 255, 255, .08);
  --ms-border-strong: rgba(255, 255, 255, .16);
  --ms-text: #e6e9ee;
  --ms-text-2: #a7afbc;
  --ms-text-3: #77808e;
  --ms-accent: #6aa9e6;
  --ms-accent-hover: #8fc0ef;
  --ms-accent-soft: rgba(106, 169, 230, .14);
  --ms-accent-text: #a9cdf2;
  --ms-success: #7ccf83;
  --ms-success-soft: rgba(124, 207, 131, .13);
  --ms-warning: #f2c46b;
  --ms-warning-soft: rgba(242, 196, 107, .13);
  --ms-danger: #f28b82;
  --ms-danger-soft: rgba(242, 139, 130, .13);
  --ms-info: #7fd0e8;
  --ms-info-soft: rgba(127, 208, 232, .13);
  --ms-shadow: none;
  --ms-focus: 0 0 0 3px rgba(106, 169, 230, .3);
  color-scheme: dark;
}

/* ---------- base ---------- */
html body {
  background: var(--ms-bg) !important;
  color: var(--ms-text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
html body a { color: var(--ms-accent); }
html body a:hover { color: var(--ms-accent-hover); }
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 { color: var(--ms-text); font-weight: 600; letter-spacing: -.01em; }
html body hr { border-color: var(--ms-border); }
html body .text-muted, html body small.text-muted { color: var(--ms-text-2) !important; }
html body .text-dark { color: var(--ms-text) !important; }
html body .text-secondary { color: var(--ms-text-2) !important; }
html body .text-primary { color: var(--ms-accent) !important; }
html body .text-success { color: var(--ms-success) !important; }
html body .text-warning { color: var(--ms-warning) !important; }
html body .text-danger { color: var(--ms-danger) !important; }
html body .text-info { color: var(--ms-info) !important; }
html body .text-white { color: #fff !important; }
html body .bg-white, html body .bg-light { background-color: var(--ms-surface) !important; }
html body .border, html body .border-top, html body .border-bottom, html body .border-left, html body .border-right { border-color: var(--ms-border) !important; }
html body ::selection { background: var(--ms-accent-soft); }
html body *:focus-visible { outline: none; box-shadow: var(--ms-focus); }

/* ---------- menu lateral ---------- */
html body .main-sidebar {
  background: var(--ms-surface) !important;
  border-right: 1px solid var(--ms-border);
  box-shadow: none !important;
}
html body .main-sidebar .navbar,
html body .main-sidebar .main-navbar { background: var(--ms-surface) !important; border-bottom: 1px solid var(--ms-border) !important; }
html body .main-sidebar .navbar-brand { color: var(--ms-text) !important; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
html body .main-sidebar .navbar-brand span { color: var(--ms-text); }
html body .main-sidebar .nav-wrapper { padding: 8px 10px 24px; background: var(--ms-surface); }
html body .main-sidebar .nav-wrapper .nav-item { border: 0; }
html body .main-sidebar .nav-wrapper .nav-link {
  display: flex; align-items: center; gap: 10px;
  color: var(--ms-text-2) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px;
  padding: 8px 10px !important;
  font-size: 13.5px; font-weight: 500;
  box-shadow: none !important;
  transition: background .12s ease, color .12s ease;
}
html body .main-sidebar .nav-wrapper .nav-link span { flex: 1; }
html body .main-sidebar .nav-wrapper .nav-link i,
html body .main-sidebar .nav-wrapper .nav-link .material-icons { color: var(--ms-text-3) !important; width: 18px; min-width: 18px; text-align: center; font-size: 15px; margin: 0 !important; }
html body .main-sidebar .nav-wrapper .nav-link i.fa-sort-down { font-size: 12px; opacity: .7; transform: translateY(-3px); }
html body .main-sidebar .nav-wrapper .nav-link:hover { background: var(--ms-surface-2) !important; color: var(--ms-text) !important; }
html body .main-sidebar .nav-wrapper .nav-link.active,
html body .main-sidebar .nav-wrapper .nav-item.active > .nav-link {
  background: var(--ms-accent-soft) !important;
  color: var(--ms-accent-text) !important;
}
html body .main-sidebar .nav-wrapper .nav-link.active i { color: var(--ms-accent) !important; }
html body .main-sidebar .nav-wrapper .collapse ul,
html body .main-sidebar .nav-wrapper .collapsing ul { list-style: none; margin: 2px 0 6px 18px; padding: 0 0 0 10px; border-left: 1px solid var(--ms-border); }
html body .main-sidebar .nav-wrapper .collapse ul .nav-link,
html body .main-sidebar .nav-wrapper .collapsing ul .nav-link { font-size: 13px; font-weight: 400; padding: 6px 10px !important; }
html body .main-sidebar .nav-wrapper li.level:hover { background: transparent; }
html body .main-sidebar .ms-grupo {
  list-style: none;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ms-text-3);
  padding: 16px 10px 6px;
}
html body .main-sidebar .ms-grupo:first-child { padding-top: 6px; }

/* ---------- barra superior ---------- */
html body .main-navbar,
html body .main-content > .main-navbar,
html body .main-navbar.bg-white {
  background: color-mix(in srgb, var(--ms-surface) 88%, transparent) !important;
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--ms-border) !important;
  box-shadow: none !important;
}
html body .main-navbar .navbar { background: transparent !important; min-height: 60px; }
html body .main-navbar .navbar-nav .nav-link { color: var(--ms-text-2) !important; }
html body .main-navbar .border-left, html body .main-navbar .border-right { border-color: var(--ms-border) !important; }
html body .main-navbar__search { padding: 10px 16px; }
html body .main-navbar__search .input-group { background: transparent; border: 0; }
html body .main-navbar__search .input-group:has(.navbar-search) {
  background: var(--ms-surface-2);
  border: 1px solid var(--ms-border);
  border-radius: 10px;
  max-width: 560px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
html body .main-navbar__search .input-group:has(.navbar-search):focus-within { border-color: var(--ms-accent); box-shadow: var(--ms-focus); }
html body .main-navbar__search .input-group-text,
html body .main-navbar__search .navbar-search { background: transparent !important; border: 0 !important; color: var(--ms-text) !important; box-shadow: none !important; }
html body .main-navbar__search .navbar-search::placeholder { color: var(--ms-text-3); }
html body .ms-kbd {
  align-self: center; margin-right: 10px;
  font: 500 11px/1 "Inter", system-ui, sans-serif;
  color: var(--ms-text-3);
  border: 1px solid var(--ms-border-strong);
  border-radius: 5px; padding: 3px 6px; white-space: nowrap;
}
html body .user-avatar { width: 34px !important; height: 34px !important; object-fit: cover; border: 1px solid var(--ms-border); }
html body .nav-link-icon__wrapper .badge { font-size: 10px; }

/* botão de tema */
.ms-tema-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin: 11px 6px;
  border-radius: 10px;
  border: 1px solid var(--ms-border);
  background: var(--ms-surface);
  color: var(--ms-text-2);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.ms-tema-btn:hover { background: var(--ms-surface-2); color: var(--ms-text); border-color: var(--ms-border-strong); }
.ms-tema-btn svg { width: 18px; height: 18px; }
.ms-tema-btn .ms-ico-sol { display: none; }
html[data-theme="dark"] .ms-tema-btn .ms-ico-sol { display: block; }
html[data-theme="dark"] .ms-tema-btn .ms-ico-lua { display: none; }

/* ---------- conteúdo ---------- */
html body .main-content { background: var(--ms-bg) !important; }
html body .main-content-container { padding-top: 8px; }
html body .page-header { padding: 20px 0 8px !important; }
html body .page-header .page-title { font-size: 22px; font-weight: 600; color: var(--ms-text); letter-spacing: -.02em; }
html body .page-header .page-subtitle { font-size: 12px; color: var(--ms-text-2); letter-spacing: .02em; text-transform: none; }

/* cards */
html body .card {
  background: var(--ms-surface) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-lg) !important;
  box-shadow: var(--ms-shadow) !important;
  color: var(--ms-text);
}
html body .card-header, html body .card-footer {
  background: transparent !important;
  border-color: var(--ms-border) !important;
  color: var(--ms-text);
}
html body .card-header { padding: 14px 18px !important; }
html body .card-header h5, html body .card-header h6, html body .card-header .m-0 { font-size: 14px; font-weight: 600; }
html body .card-body { color: var(--ms-text); }
html body .card-small { border-radius: var(--ms-radius-lg) !important; }
html body .stats-small .stats-small__label { color: var(--ms-text-2) !important; font-size: 11.5px; letter-spacing: .02em; text-transform: none; }
html body .stats-small .stats-small__value { color: var(--ms-text) !important; font-weight: 600; }
html body .stats-small__percentage--increase { color: var(--ms-success) !important; }
html body .stats-small__percentage--decrease { color: var(--ms-danger) !important; }

/* tabelas */
html body .table { color: var(--ms-text); background: transparent; }
html body .table th, html body .table td { border-color: var(--ms-border) !important; vertical-align: middle; }
html body .table thead th, html body .table thead.bg-light th, html body thead.bg-light {
  background: var(--ms-surface-2) !important;
  color: var(--ms-text-2) !important;
  font-size: 11.5px; font-weight: 600; text-transform: none; letter-spacing: .02em;
  border-bottom: 1px solid var(--ms-border) !important;
}
html body .table-striped tbody tr:nth-of-type(odd) { background-color: color-mix(in srgb, var(--ms-surface-2) 55%, transparent); }
html body .table-hover tbody tr:hover, html body .table tbody tr:hover { background-color: var(--ms-surface-2); }
html body .table-bordered, html body .table-bordered th, html body .table-bordered td { border-color: var(--ms-border) !important; }
html body .table .thead-dark th { background: var(--ms-surface-3) !important; color: var(--ms-text) !important; }

/* botões */
html body .btn { border-radius: 8px; font-weight: 500; letter-spacing: 0; box-shadow: none !important; transition: background .12s ease, border-color .12s ease, color .12s ease, transform .05s ease; }
html body .btn:active { transform: scale(.98); }
html body .btn-primary { background: var(--ms-accent) !important; border-color: var(--ms-accent) !important; color: #fff !important; }
html[data-theme="dark"] body .btn-primary { color: #0b1a2a !important; }
html body .btn-primary:hover { background: var(--ms-accent-hover) !important; border-color: var(--ms-accent-hover) !important; }
html body .btn-secondary, html body .btn-light, html body .btn-white, html body .btn-outline-secondary, html body .btn-outline-light {
  background: var(--ms-surface) !important; color: var(--ms-text) !important; border: 1px solid var(--ms-border-strong) !important;
}
html body .btn-secondary:hover, html body .btn-light:hover, html body .btn-white:hover, html body .btn-outline-secondary:hover { background: var(--ms-surface-2) !important; }
html body .btn-outline-primary { color: var(--ms-accent) !important; border-color: var(--ms-accent) !important; background: transparent !important; }
html body .btn-outline-primary:hover { background: var(--ms-accent-soft) !important; }

/* formulários */
html body .form-control, html body .custom-select, html body select.form-control, html body textarea.form-control,
html body .input-group-text {
  background-color: var(--ms-surface) !important;
  color: var(--ms-text) !important;
  border: 1px solid var(--ms-border-strong) !important;
  border-radius: 8px;
}
html body .input-group > .form-control:not(:first-child), html body .input-group > .input-group-append > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
html body .input-group > .form-control:not(:last-child), html body .input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
html body .form-control:focus, html body .custom-select:focus { border-color: var(--ms-accent) !important; box-shadow: var(--ms-focus) !important; }
html body .form-control::placeholder { color: var(--ms-text-3); }
html body .form-control:disabled, html body .form-control[readonly] { background-color: var(--ms-surface-2) !important; color: var(--ms-text-2) !important; }
html body label { color: var(--ms-text-2); font-weight: 500; font-size: 12.5px; }

/* etiquetas de status */
html body .badge { font-weight: 600; font-size: 11px; padding: 4px 9px; border-radius: 999px; letter-spacing: .01em; }
html body .badge-primary { background: var(--ms-accent-soft) !important; color: var(--ms-accent-text) !important; }
html body .badge-success { background: var(--ms-success-soft) !important; color: var(--ms-success) !important; }
html body .badge-warning { background: var(--ms-warning-soft) !important; color: var(--ms-warning) !important; }
html body .badge-danger  { background: var(--ms-danger-soft) !important;  color: var(--ms-danger) !important; }
html body .badge-info    { background: var(--ms-info-soft) !important;    color: var(--ms-info) !important; }
html body .badge-secondary, html body .badge-light, html body .badge-dark { background: var(--ms-surface-3) !important; color: var(--ms-text-2) !important; }
html body .nav-link-icon__wrapper .badge-danger { background: var(--ms-danger) !important; color: #fff !important; }

/* alertas */
html body .alert { border-radius: var(--ms-radius); border: 1px solid transparent; }
html body .alert-primary, html body .alert-info { background: var(--ms-info-soft) !important; color: var(--ms-info) !important; border-color: transparent !important; }
html body .alert-success { background: var(--ms-success-soft) !important; color: var(--ms-success) !important; border-color: transparent !important; }
html body .alert-warning { background: var(--ms-warning-soft) !important; color: var(--ms-warning) !important; border-color: transparent !important; }
html body .alert-danger  { background: var(--ms-danger-soft) !important;  color: var(--ms-danger) !important;  border-color: transparent !important; }

/* menus suspensos, modais, listas, abas, paginação */
html body .dropdown-menu {
  background: var(--ms-surface) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .14) !important;
  padding: 6px;
}
html body .dropdown-item { color: var(--ms-text) !important; border-radius: 7px; }
html body .dropdown-item:hover, html body .dropdown-item:focus { background: var(--ms-surface-2) !important; }
html body .dropdown-divider { border-color: var(--ms-border); }
html body .modal-content { background: var(--ms-surface) !important; color: var(--ms-text); border: 1px solid var(--ms-border); border-radius: var(--ms-radius-lg); }
html body .modal-header, html body .modal-footer { border-color: var(--ms-border) !important; }
html body .close { color: var(--ms-text); text-shadow: none; }
html body .list-group-item { background: var(--ms-surface) !important; color: var(--ms-text); border-color: var(--ms-border) !important; }
html body .list-group-item.active { background: var(--ms-accent-soft) !important; color: var(--ms-accent-text) !important; }
html body .nav-tabs { border-color: var(--ms-border); }
html body .nav-tabs .nav-link { color: var(--ms-text-2); border: 0; border-bottom: 2px solid transparent; }
html body .nav-tabs .nav-link.active { background: transparent !important; color: var(--ms-accent) !important; border-bottom-color: var(--ms-accent); }
html body .nav-pills .nav-link.active { background: var(--ms-accent-soft) !important; color: var(--ms-accent-text) !important; }
html body .page-link, html body .page-numbers { background: var(--ms-surface) !important; color: var(--ms-text) !important; border: 1px solid var(--ms-border) !important; border-radius: 8px; margin: 0 2px; }
html body .page-item.active .page-link, html body .page-numbers.current { background: var(--ms-accent) !important; border-color: var(--ms-accent) !important; color: #fff !important; }
html body .progress { background: var(--ms-surface-3); border-radius: 999px; }
html body .popover { background: var(--ms-surface); border-color: var(--ms-border); }
html body .popover-body { color: var(--ms-text); }

/* jQuery UI datepicker */
html body .ui-datepicker { background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: 12px; padding: 8px; color: var(--ms-text); box-shadow: 0 12px 32px rgba(16, 24, 40, .14); }
html body .ui-datepicker .ui-widget-header { background: transparent; border: 0; color: var(--ms-text); }
html body .ui-datepicker .ui-state-default { background: transparent; border: 0; color: var(--ms-text); text-align: center; border-radius: 6px; }
html body .ui-datepicker .ui-state-hover { background: var(--ms-surface-2); }
html body .ui-datepicker .ui-state-active, html body .ui-datepicker .ui-state-highlight { background: var(--ms-accent); color: #fff; }

/* mapas (Leaflet) */
html body .leaflet-container { border-radius: var(--ms-radius); background: var(--ms-surface-2); }
html body .leaflet-popup-content-wrapper, html body .leaflet-popup-tip { background: var(--ms-surface); color: var(--ms-text); }
html body .leaflet-bar a { background: var(--ms-surface); color: var(--ms-text); border-color: var(--ms-border); }

/* rodapé */
html body .main-footer { background: transparent !important; border-top: 1px solid var(--ms-border) !important; color: var(--ms-text-3); }

/* barra de rolagem discreta */
html body ::-webkit-scrollbar { width: 10px; height: 10px; }
html body ::-webkit-scrollbar-thumb { background: var(--ms-surface-3); border-radius: 10px; border: 2px solid var(--ms-bg); }
html body ::-webkit-scrollbar-track { background: transparent; }

/* ---------- tema escuro: ajustes de componentes com cor fixa ---------- */
html[data-theme="dark"] body img[src*="admin_logo"] { filter: brightness(1.15); }
html[data-theme="dark"] body .table-light, html[data-theme="dark"] body .table-light > td, html[data-theme="dark"] body .table-light > th { background: var(--ms-surface-2) !important; }
html[data-theme="dark"] body .table-success, html[data-theme="dark"] body .table-success > td { background: var(--ms-success-soft) !important; color: var(--ms-text); }
html[data-theme="dark"] body .table-warning, html[data-theme="dark"] body .table-warning > td { background: var(--ms-warning-soft) !important; color: var(--ms-text); }
html[data-theme="dark"] body .table-danger,  html[data-theme="dark"] body .table-danger > td  { background: var(--ms-danger-soft) !important;  color: var(--ms-text); }
html[data-theme="dark"] body .table-info,    html[data-theme="dark"] body .table-info > td    { background: var(--ms-info-soft) !important;    color: var(--ms-text); }
html[data-theme="dark"] body [style*="background-color: #fff"], html[data-theme="dark"] body [style*="background-color:#fff"],
html[data-theme="dark"] body [style*="background: #fff"], html[data-theme="dark"] body [style*="background:#fff"],
html[data-theme="dark"] body [style*="background-color: white"], html[data-theme="dark"] body [style*="background:white"] { background: var(--ms-surface) !important; }
html[data-theme="dark"] body [style*="color: #000"], html[data-theme="dark"] body [style*="color:#000"],
html[data-theme="dark"] body [style*="color: black"], html[data-theme="dark"] body [style*="color:black"] { color: var(--ms-text) !important; }
html[data-theme="dark"] body .fc-unthemed td, html[data-theme="dark"] body .fc-unthemed th, html[data-theme="dark"] body .fc-unthemed .fc-content, html[data-theme="dark"] body .fc-unthemed .fc-divider, html[data-theme="dark"] body .fc-unthemed thead { border-color: var(--ms-border) !important; }
html[data-theme="dark"] body .fc-unthemed td.fc-today { background: var(--ms-accent-soft) !important; }
html[data-theme="dark"] body .material-icons, html[data-theme="dark"] body .fas, html[data-theme="dark"] body .far { color: inherit; }
html[data-theme="dark"] body canvas { filter: none; }

/* transição suave ao trocar de tema (aplicada só durante a troca) */
html.ms-trocando-tema body, html.ms-trocando-tema body * { transition: background-color .2s ease, border-color .2s ease, color .2s ease !important; }

/* ---------- celular ---------- */
@media (max-width: 767.98px) {
  html body .main-sidebar { width: 82vw; max-width: 320px; }
  html body .main-navbar__search { padding: 8px 10px; }
  html body .ms-kbd { display: none; }
  html body .page-header .page-title { font-size: 19px; }
  html body .card-header { padding: 12px 14px !important; }
  html body .table-responsive, html body .card-body { -webkit-overflow-scrolling: touch; }
}

@media (prefers-reduced-motion: reduce) {
  html.ms-trocando-tema body, html.ms-trocando-tema body * { transition: none !important; }
}

/* ---------- painel-resumo (página inicial) ---------- */
.ms-painel { padding: 20px 24px 8px; }
.ms-painel__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ms-painel__titulo { font-size: 22px; font-weight: 600; margin: 0; color: var(--ms-text); letter-spacing: -.02em; }
.ms-painel__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--ms-text-2); }
.ms-painel__acoes { display: flex; gap: 8px; }
.ms-painel__acoes .btn i { margin-right: 4px; }
.ms-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.ms-kpi { background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: var(--ms-radius-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ms-kpi__rot { font-size: 12px; color: var(--ms-text-2); font-weight: 500; }
.ms-kpi__rot i { color: var(--ms-text-3); margin-right: 4px; }
.ms-kpi__val { font-size: 26px; font-weight: 600; color: var(--ms-text); letter-spacing: -.02em; line-height: 1.25; }
.ms-kpi__nota { font-size: 11.5px; color: var(--ms-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-pos { color: var(--ms-success) !important; }
.ms-neg { color: var(--ms-danger) !important; }
.ms-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; margin-bottom: 12px; }
.ms-card { margin: 0 !important; }
.ms-barras { display: flex; align-items: flex-end; gap: 10px; height: 170px; padding-top: 8px; }
.ms-barra { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.ms-barra__col { width: 100%; max-width: 44px; background: color-mix(in srgb, var(--ms-accent) 35%, transparent); border-radius: 6px 6px 2px 2px; transition: height .3s ease; }
.ms-barra__col.ms-atual { background: var(--ms-accent); }
.ms-barra__n { font-size: 11px; color: var(--ms-text-2); font-variant-numeric: tabular-nums; }
.ms-barra__rot { font-size: 11px; color: var(--ms-text-3); }
.ms-tabela td, .ms-tabela th { padding: 9px 14px !important; font-size: 13px; }
.ms-tabela thead th { border-top: 0 !important; }
.ms-trunc { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-link { font-size: 12.5px; font-weight: 500; }
.ms-mapa-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 8px 0 8px; }
.ms-legenda { font-size: 12px; color: var(--ms-text-2); display: inline-flex; align-items: center; gap: 6px; }
.ms-pt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 8px; }
.ms-pt--ok { background: #1d9e75; } .ms-pt--parcial { background: #ef9f27; } .ms-pt--parado { background: #e24b4a; }
.ms-mapa-area { position: relative; margin: 0 24px 24px; border: 1px solid var(--ms-border); border-radius: var(--ms-radius-lg); overflow: hidden; }
@media (max-width: 991.98px) {
  .ms-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .ms-painel { padding: 14px 12px 4px; }
  .ms-mapa-area { margin: 0 12px 16px; }
  .ms-kpi__val { font-size: 22px; }
  .ms-trunc { max-width: 170px; }
}

/* links dentro de etiquetas (ex.: nº da OS): seguem a cor da etiqueta, não o branco fixo antigo */
html body .badge a, html body .badge a[style] { color: inherit !important; text-decoration: none; }
html body .badge a:hover { text-decoration: underline; }
html body .ms-painel__acoes .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px !important; line-height: 1.3; font-size: 13px; height: auto; }
html body .ms-painel__acoes .btn i { margin: 0; }