/* DM8 UI: tokens compartilhados pelo shell e pela camada opt-in. */
.dm8-shell,
.dm8-ui {
    --dm8-navy-950: #0b1f33;
    --dm8-navy-900: #102a43;
    --dm8-navy-800: #173f5f;
    --dm8-action: #1769aa;
    --dm8-action-hover: #0f568e;
    --dm8-brand-50: #f2f7fa;
    --dm8-brand-100: #e2eef5;
    --dm8-brand-200: #c8deeb;
    --dm8-brand-300: #a8cada;
    --dm8-brand-400: #8ab3cf;
    --dm8-brand-500: #6396b9;
    --dm8-brand-600: #4d7b9d;
    --dm8-brand-700: #40647f;
    --dm8-brand-800: #38546a;
    --dm8-brand-900: #324858;
    --dm8-surface: #ffffff;
    --dm8-surface-muted: #f5f7f9;
    --dm8-canvas: #edf2f7;
    --dm8-text: #24313a;
    --dm8-text-muted: #62717c;
    --dm8-border: #d8e0e5;
    --dm8-focus: #246b9c;
    --dm8-success: #287a4b;
    --dm8-warning: #8a5a00;
    --dm8-danger: #b2363f;
    --dm8-info: #356f91;
    --dm8-radius-sm: 0.375rem;
    --dm8-radius: 0.625rem;
    --dm8-radius-lg: 0.875rem;
    --dm8-shadow-sm: 0 0.125rem 0.5rem rgba(36, 49, 58, 0.08);
    --dm8-shadow: 0 0.5rem 1.5rem rgba(36, 49, 58, 0.1);
    --dm8-shadow-md: 0 0.75rem 2rem rgba(16, 42, 67, 0.14);
    --dm8-control-height: 2.375rem;
    --dm8-space-1: 0.25rem;
    --dm8-space-2: 0.5rem;
    --dm8-space-3: 0.75rem;
    --dm8-space-4: 1rem;
    --dm8-space-5: 1.5rem;
    --dm8-space-6: 2rem;
    color: var(--dm8-text);
    font-size: 0.9375rem;
}

html {
    scrollbar-gutter: stable;
}

.dm8-shell {
    background: var(--dm8-canvas);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.dm8-shell__workspace {
    flex: 1 0 auto;
    max-width: 1600px;
    padding-inline: clamp(0.75rem, 2vw, 2rem);
    width: 100%;
}

.dm8-shell__footer {
    flex: 0 0 auto;
    margin-top: auto;
    width: 100%;
}

/* O row do rodapé fica dentro de um container com padding próprio; neutraliza
 * a margem negativa do Bootstrap para não criar overflow em telas estreitas. */
.dm8-shell__footer > .container > .row {
  margin-left: 0;
  margin-right: 0;
}

.dm8-navbar {
    background: linear-gradient(105deg, var(--dm8-navy-950), var(--dm8-navy-800));
    box-shadow: 0 0.25rem 1rem rgba(11, 31, 51, 0.2);
    min-height: 4rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.dm8-navbar__brand {
    align-items: center;
    display: inline-flex;
    margin-right: 0.75rem;
}

.dm8-navbar .nav-link {
    border-radius: var(--dm8-radius-sm);
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 0.9rem;
    font-weight: 550;
    margin-inline: 0.08rem;
    padding-inline: 0.7rem !important;
}

.dm8-navbar .nav-link:hover,
.dm8-navbar .nav-link:focus-visible,
.dm8-navbar .nav-link.active,
.dm8-navbar .nav-item.show > .nav-link {
    background: rgba(255, 255, 255, 0.12);
    color: #fff !important;
}

.dm8-navbar .nav-link:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.55);
    outline-offset: 2px;
}

.dm8-navbar__user {
    border-left: 1px solid rgba(255, 255, 255, 0.24);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.35;
    margin-left: auto;
    max-width: 8rem;
    padding: 0.2rem 0 0.2rem 0.8rem;
}

.dm8-navbar__user div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .dm8-navbar__user {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        margin: 0.5rem 0 0;
        max-width: none;
        padding: 0.65rem 0 0;
        width: 100%;
    }
}

.dm8-ui :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--dm8-focus) 35%, transparent);
    outline-offset: 2px;
}

.dm8-ui.dm8-auth {
    align-items: center;
    background:
        radial-gradient(circle at top left, var(--dm8-brand-100), transparent 42%),
        var(--dm8-surface-muted);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: var(--dm8-space-5);
}

.dm8-ui .dm8-auth__shell {
    display: grid;
    gap: var(--dm8-space-6);
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem);
    max-width: 64rem;
    width: 100%;
}

.dm8-ui .dm8-auth__brand {
    align-self: center;
    color: var(--dm8-brand-800);
}

.dm8-ui .dm8-auth__logo {
    display: block;
    height: auto;
    margin-bottom: var(--dm8-space-5);
    max-width: 14rem;
    width: 100%;
}

.dm8-ui .dm8-auth__title {
    font-size: clamp(2rem, 1.4rem + 2vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
}

.dm8-ui .dm8-auth__subtitle {
    color: var(--dm8-brand-600);
    display: block;
}

.dm8-ui .dm8-auth__card {
    align-self: center;
    background: var(--dm8-surface);
    border: 1px solid var(--dm8-border);
    border-radius: var(--dm8-radius-lg);
    box-shadow: var(--dm8-shadow);
    padding: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.dm8-ui .dm8-auth__card form {
    width: 100%;
}

.dm8-ui .dm8-auth__card .form-control {
    box-sizing: border-box;
    display: block;
    max-width: 100%;
    width: 100%;
}

.dm8-ui .dm8-password-input { align-items: stretch; display: flex; gap: var(--dm8-space-2); width: 100%; }
.dm8-ui .dm8-password-input .form-control { flex: 1 1 auto; min-width: 0; }
.dm8-ui .dm8-password-toggle { align-items: center; background: var(--dm8-surface-muted); border: 1px solid var(--dm8-border); border-radius: var(--dm8-radius); color: var(--dm8-text-muted); cursor: pointer; display: inline-flex; flex: 0 0 2.75rem; justify-content: center; min-height: var(--dm8-control-height); padding: 0.5rem; }
.dm8-ui .dm8-password-toggle svg { fill: none; height: 1.25rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 1.25rem; }
.dm8-ui .dm8-password-toggle:focus-visible { border-radius: var(--dm8-radius); outline: 2px solid var(--dm8-brand-500); outline-offset: 1px; }

.dm8-ui .dm8-password-meter { color: var(--dm8-text-muted); font-size: 0.875rem; margin: var(--dm8-space-2) 0 var(--dm8-space-3); }
.dm8-ui .dm8-password-meter__bar { background: var(--dm8-brand-500); border-radius: 999px; height: 0.4rem; margin-bottom: var(--dm8-space-1); transition: width 160ms ease; width: 0; }
.dm8-ui .dm8-password-requirements { color: var(--dm8-text-muted); font-size: 0.8125rem; margin: 0 0 var(--dm8-space-3); padding-left: 1.25rem; }
.dm8-ui .dm8-password-requirements .is-valid { color: var(--dm8-success, #198754); }

.dm8-ui .dm8-auth__card-title {
    color: var(--dm8-brand-800);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 var(--dm8-space-5);
}

.dm8-ui .dm8-auth__actions {
    display: grid;
    gap: var(--dm8-space-2);
}

.dm8-ui .dm8-auth__validation[hidden] {
    display: none;
}

.dm8-ui .dm8-page-header {
    align-items: center;
    background: linear-gradient(120deg, var(--dm8-brand-700), var(--dm8-navy-800));
    border-radius: var(--dm8-radius);
    box-shadow: var(--dm8-shadow-sm);
    color: #fff;
    display: flex;
    gap: var(--dm8-space-4);
    justify-content: space-between;
    margin-bottom: var(--dm8-space-1);
    min-height: 3.5rem;
    padding: var(--dm8-space-3) var(--dm8-space-4);
}

.dm8-ui .dm8-page-header > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.dm8-ui .dm8-page-header__title {
    font-size: clamp(1.25rem, 1rem + 0.7vw, 1.75rem);
    font-weight: 650;
    line-height: 1.25;
    margin: 0;
}

.dm8-ui .dm8-page-header__description {
    align-items: center;
    color: rgba(255, 255, 255, 0.88);
    display: flex;
    gap: var(--dm8-space-2);
    margin: var(--dm8-space-1) 0 0;
}

.dm8-ui .dm8-page-header__description .btn {
    margin-left: auto;
    flex-shrink: 0;
}

@media (max-width: 479px) {
    .dm8-ui .dm8-page-header__description {
        align-items: flex-start;
        flex-direction: column;
    }

    .dm8-ui .dm8-page-header__description .btn {
        margin-left: 0;
    }
}

.dm8-ui .dm8-page-header__actions,
.dm8-ui .dm8-action-bar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--dm8-space-2);
}

.dm8-ui .dm8-page-header__actions {
    justify-content: flex-end;
}

.dm8-ui .dm8-page-header__actions .btn-primary {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-color: var(--dm8-brand-700);
    --bs-btn-hover-bg: var(--dm8-brand-50);
    --bs-btn-hover-border-color: var(--dm8-brand-50);
    --bs-btn-hover-color: var(--dm8-brand-800);
}

.dm8-ui .dm8-context-nav {
    margin-bottom: var(--dm8-space-4);
}

.dm8-ui .dm8-context-nav .nav-link {
    color: var(--dm8-brand-700);
}

.dm8-ui .dm8-context-nav .nav-link.active {
    color: var(--dm8-text);
    font-weight: 600;
}

/* Moldura opcional para subáreas que mantêm navegação e conteúdo no mesmo contexto. */
.dm8-ui .dm8-content-frame {
    background: var(--dm8-surface);
    border: 1px solid var(--dm8-border);
    border-radius: var(--dm8-radius);
    box-shadow: var(--dm8-shadow-sm);
    margin-bottom: var(--dm8-space-4);
    padding: var(--dm8-space-2);
}

.dm8-ui .dm8-content-frame > .dm8-context-nav {
    border-bottom: 1px solid var(--dm8-border);
    margin: calc(-1 * var(--dm8-space-2)) calc(-1 * var(--dm8-space-2)) var(--dm8-space-4);
    padding: 0 var(--dm8-space-2);
}

.dm8-ui .dm8-content-frame > .dm8-context-nav .nav-tabs {
    border-bottom: 0;
}

.dm8-ui .dm8-content-frame__body,
.dm8-ui .dm8-followup-agendamentos {
    display: grid;
    gap: var(--dm8-space-3);
}

.dm8-ui :where(.form-control, .form-select) {
    border-radius: var(--bs-border-radius-sm);
    font-size: 0.875rem;
    min-height: calc(1.5em + 0.5rem + (var(--bs-border-width) * 2));
    padding: 0.25rem 0.5rem;
}

.dm8-ui .dm8-content-frame__body > .dm8-filter-panel,
.dm8-ui .dm8-followup-agendamentos > .dm8-filter-panel {
    margin-bottom: 0;
}

.dm8-ui .card,
.dm8-ui .dm8-filter-panel {
    border-color: var(--dm8-border);
    border-radius: var(--dm8-radius);
    box-shadow: var(--dm8-shadow-sm);
}

.dm8-ui .dm8-form-card {
    background: var(--dm8-surface);
    border: 1px solid var(--dm8-border);
    border-radius: var(--dm8-radius);
    box-shadow: var(--dm8-shadow-sm);
    padding: var(--dm8-space-4);
}

.dm8-ui .dm8-filter-panel {
    background: var(--dm8-surface);
    margin-bottom: var(--dm8-space-4);
    padding: var(--dm8-space-4);
}

.dm8-ui .dm8-filter-panel__title {
    font-size: 1rem;
    font-weight: 650;
    margin: 0 0 var(--dm8-space-3);
}

.dm8-ui .dm8-filter-panel--sectioned {
    overflow: hidden;
    padding: 0;
}

.dm8-ui .dm8-filter-panel--sectioned > .dm8-filter-panel__title {
    background: var(--dm8-brand-50);
    border-bottom: 1px solid var(--dm8-brand-200);
    color: var(--dm8-brand-800);
    margin: 0;
    padding: var(--dm8-space-3) var(--dm8-space-4);
}

.dm8-ui .dm8-filter-panel__body {
    padding: var(--dm8-space-4);
}

.dm8-ui .dm8-filter-panel__actions {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: var(--dm8-space-2);
    justify-content: flex-end;
}

.dm8-ui .dm8-filter-panel__footer {
    border-top: 1px solid var(--dm8-border);
    margin-top: var(--dm8-space-3);
    padding-top: var(--dm8-space-3);
    text-align: left;
}

.dm8-ui .form-label {
    color: var(--dm8-text);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--dm8-space-1);
}

.dm8-ui .form-text {
    color: var(--dm8-text-muted);
}

@media (min-width: 1200px) {
    .dm8-ui .dm8-filter-code { width: 7.8125rem; }
    .dm8-ui .dm8-filter-status { width: 12.5rem; }

    .dm8-ui .dm8-filter-reference {
        width: 8.75rem;
    }

    .dm8-ui .dm8-filter-canal {
        width: 9rem;
    }

    .dm8-ui .dm8-filter-date {
        width: 10.5rem;
    }
}

.dm8-ui .dm8-checkbox-dropdown {
    position: relative;
    z-index: 30;
}

.dm8-ui .dm8-filter-panel--sectioned:has(.dm8-checkbox-dropdown) {
    overflow: visible;
}

.dm8-ui .dm8-checkbox-dropdown__toggle {
    align-items: center;
    cursor: pointer;
    display: flex;
    min-height: var(--dm8-control-height);
    overflow: hidden;
}

.dm8-ui .dm8-checkbox-dropdown__toggle span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm8-ui .dm8-checkbox-dropdown__menu {
    background: var(--dm8-surface);
    border: 1px solid var(--dm8-border);
    border-radius: var(--dm8-radius);
    box-shadow: var(--dm8-shadow-md);
    left: 0;
    margin-top: var(--dm8-space-1);
    max-height: 16rem;
    overflow: auto;
    padding: var(--dm8-space-2);
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 100;
}

.dm8-ui .dm8-checkbox-dropdown__option {
    border-radius: var(--dm8-radius-sm);
    margin: 0;
    padding: 0.375rem 0.5rem 0.375rem 1.75rem;
}

.dm8-ui .dm8-checkbox-dropdown__option:hover {
    background: var(--dm8-surface-muted);
}

.dm8-ui .dm8-form-stack {
    display: grid;
    gap: var(--dm8-space-4);
}

.dm8-ui .dm8-form-section {
    background: var(--dm8-surface);
    border: 1px solid var(--dm8-border);
    border-radius: var(--dm8-radius);
    box-shadow: var(--dm8-shadow-sm);
    overflow: hidden;
}

.dm8-ui .dm8-form-section__header {
    background: var(--dm8-brand-50);
    border-bottom: 1px solid var(--dm8-brand-200);
    color: var(--dm8-brand-800);
    font-size: 1rem;
    font-weight: 650;
    margin: 0;
    padding: var(--dm8-space-3) var(--dm8-space-4);
}

.dm8-ui .dm8-form-section__body {
    padding: var(--dm8-space-4);
}

.dm8-ui .dm8-form-section__body > :last-child {
    margin-bottom: 0;
}

.dm8-ui .dm8-cotacao-row {
    padding: var(--dm8-space-3);
}

.dm8-ui .dm8-proposta-form .row.g-3 {
    --bs-gutter-x: 2rem;
    gap: 0.5rem;
    padding-left: 0.5rem;
}

.dm8-ui .dm8-proposta-form input[name="freeTime"] {
    max-width: none;
    width: 100%;
}

.dm8-ui .dm8-cotacao-add {
    align-self: end;
    flex: 0 0 auto;
    width: auto;
}

.dm8-ui .dm8-cotacao-unit {
    max-width: 14rem;
}

.dm8-ui .dm8-cotacao-temperature {
    max-width: 8rem;
}

.dm8-ui .dm8-free-time-card {
    flex: 0 0 11%;
    max-width: 11%;
}

.dm8-ui .dm8-collapsed {
    display: none;
}

.dm8-ui .dm8-cotacao-suppliers,
.dm8-ui .dm8-upload-preview {
    font-size: 0.85rem;
}

.dm8-ui .dm8-cotacao-ncm {
    width: 80%;
}

.dm8-ui .dm8-cotacao-status-card {
    width: 100%;
}

.dm8-ui .dm8-message-fade {
    transition: opacity 1s ease-out;
}

.dm8-ui .dm8-message-fade.hidden {
    opacity: 0;
}

.dm8-ui .dm8-form-actions {
    border-top: 1px solid var(--dm8-border);
    margin-top: var(--dm8-space-4);
    padding-top: var(--dm8-space-4);
}

.dm8-ui .iti {
    width: 100%;
}

.dm8-ui .iti input {
    width: 100% !important;
}

.dm8-ui .iti--separate-dial-code input.form-control {
    padding-left: 6.5rem !important;
}

.dm8-ui .linha-tabela-clicavel {
    cursor: pointer;
}

.dm8-ui .dm8-table__message {
    max-width: 25rem;
    white-space: pre-line;
    word-break: break-word;
}

.dm8-ui .dm8-table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--dm8-surface-muted);
    border-color: var(--dm8-border);
    font-size: 0.875rem;
    margin-bottom: 0;
}

.dm8-ui .dm8-table > :not(caption) > * > * {
    padding: 0.625rem 0.75rem;
    vertical-align: middle;
}

.dm8-ui .dm8-table thead th {
    background: var(--dm8-brand-50);
    border-bottom-color: var(--dm8-brand-200);
    color: var(--dm8-brand-800);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    white-space: nowrap;
}

.dm8-ui .dm8-table--compact {
    font-size: 0.8125rem;
}

.dm8-ui .dm8-table--compact > :not(caption) > * > * {
    padding: 0.375rem 0.5rem;
}

.dm8-ui .dm8-table--single-line {
    min-width: 100%;
    width: max-content;
}

.dm8-ui .dm8-table--single-line > :not(caption) > * > * {
    white-space: nowrap;
}

.dm8-ui .dm8-table__actions {
    text-align: right;
    white-space: nowrap;
}

.dm8-ui .dm8-table-link {
    color: inherit;
    display: block;
    height: 100%;
    text-decoration: none;
    width: 100%;
}

.dm8-ui .dm8-empty-state {
    color: var(--dm8-text-muted);
    padding: var(--dm8-space-6) var(--dm8-space-4);
    text-align: center;
}

.dm8-ui .dm8-empty-state__title {
    color: var(--dm8-text);
    font-size: 1rem;
    font-weight: 650;
    margin-bottom: var(--dm8-space-1);
}

.dm8-ui .dm8-feedback[aria-live] {
    min-height: 1px;
}

.dm8-ui .dm8-badge {
    border: 1px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 700;
    gap: var(--dm8-space-1);
    line-height: 1;
    padding: 0.35rem 0.55rem;
}

.dm8-ui .dm8-badge--neutral { background: #eef1f3; color: #46545e; }
.dm8-ui .dm8-badge--success { background: #e6f4ec; color: var(--dm8-success); }
.dm8-ui .dm8-badge--warning { background: #fff3d6; color: var(--dm8-warning); }
.dm8-ui .dm8-badge--danger { background: #fbe9eb; color: var(--dm8-danger); }
.dm8-ui .dm8-badge--info { background: #e7f2f8; color: var(--dm8-info); }
.dm8-ui .dm8-badge--process-liberado { background: #ffffcc; color: #212529; border-color: rgba(33, 37, 41, .18); }
.dm8-ui .dm8-badge--process-registrado { background: #ccc0da; color: #212529; border-color: rgba(33, 37, 41, .18); }
.dm8-ui .dm8-badge--process-atracado { background: #d8e4bc; color: #212529; border-color: rgba(33, 37, 41, .18); }
.dm8-ui .dm8-badge--process-em-transito { background: #c5d9f1; color: #212529; border-color: rgba(33, 37, 41, .18); }
.dm8-ui .dm8-badge--process-ag-embarque { background: #e6b8b7; color: #212529; border-color: rgba(33, 37, 41, .18); }

.dm8-ui .dm8-pagination-wrap {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--dm8-space-3);
    justify-content: space-between;
    margin-top: var(--dm8-space-3);
}

.dm8-ui .dm8-pagination-context {
    color: var(--dm8-text-muted);
    font-size: 0.8125rem;
}

.dm8-ui .pagination {
    margin-bottom: 0;
}

.dm8-ui .page-link {
    color: var(--dm8-brand-700);
}

.dm8-ui .active > .page-link {
    background-color: var(--dm8-brand-600);
    border-color: var(--dm8-brand-600);
    color: #fff;
}

.dm8-ui .dm8-icon {
    fill: currentColor;
    height: 1em;
    vertical-align: -0.125em;
    width: 1em;
}

.dm8-ui .btn > .dm8-icon {
    width: 0.9375rem;
    height: 0.9375rem;
    flex-shrink: 0;
    margin-inline-end: 0.375rem;
    pointer-events: none;
}

.dm8-ui .modal-content {
    border: 0;
    border-radius: var(--dm8-radius-lg);
    box-shadow: var(--dm8-shadow);
}

.dm8-ui .modal-header {
    border-bottom-color: var(--dm8-border);
}

.dm8-ui#novoTemplateModal .modal-dialog {
    height: calc(100dvh - 2rem);
}

.dm8-ui#novoTemplateModal .modal-content {
    max-height: 100%;
}

.dm8-ui .dm8-template-format {
    width: 9.375rem;
}

.dm8-ui [data-template-editor] {
    height: clamp(11.25rem, 35vh, 26.25rem);
    max-height: 26.25rem;
    min-height: 11.25rem;
    overflow-y: auto;
}

.dm8-ui .dm8-pre-wrap {
    white-space: pre-wrap;
}

.dm8-ui .dm8-email-frame {
    min-height: 26.25rem;
}

.dm8-ui .dm8-remote-frame {
    display: block;
}

.dm8-ui .dm8-remote-frame--email {
    min-height: 55vh;
}

.dm8-ui .dm8-remote-frame--detail {
    min-height: 75vh;
}

.dm8-ui .dm8-remote-frame--upload {
    height: 26.25rem;
    min-height: 21.25rem;
}

@media (max-width: 767.98px) {
    .dm8-ui.dm8-auth {
        align-items: flex-start;
        padding: var(--dm8-space-4);
    }

    .dm8-ui .dm8-auth__shell {
        gap: var(--dm8-space-4);
        grid-template-columns: 1fr;
    }

    .dm8-ui .dm8-auth__brand {
        text-align: center;
    }

    .dm8-ui .dm8-auth__logo {
        margin: 0 auto var(--dm8-space-3);
        max-width: 10rem;
    }

    .dm8-ui .dm8-auth__title {
        font-size: 1.75rem;
    }

    .dm8-ui .dm8-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .dm8-ui .dm8-page-header__actions,
    .dm8-ui .dm8-filter-panel__actions,
    .dm8-ui .dm8-action-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .dm8-ui .dm8-page-header__actions > *,
    .dm8-ui .dm8-filter-panel__actions > *,
    .dm8-ui .dm8-action-bar > * {
        width: 100%;
    }

    .dm8-ui .dm8-content-frame {
        padding: var(--dm8-space-2);
    }
}

/* Toasts de feedback: popup fixo, fora do fluxo — não desloca layout. */
.dm8-toast-stack {
    display: grid;
    gap: 0.5rem;
    max-width: min(22rem, 90vw);
    pointer-events: none;
    position: fixed;
    right: 1rem;
    top: 1rem;
    z-index: 1080;
}

.dm8-toast-stack .alert {
    animation: dm8-toast-in 0.2s ease-out;
    margin-bottom: 0;
    pointer-events: auto;
    position: relative;
    box-shadow: 0 0.5rem 1.5rem rgba(36, 49, 58, 0.18);
}

.dm8-toast-stack .alert.dm8-toast--leaving {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.dm8-toast-stack .dm8-toast__progress {
    bottom: 0;
    height: 3px;
    left: 0;
    opacity: 0.5;
    position: absolute;
    width: 100%;
}

.dm8-toast-stack .dm8-toast__progress > span {
    background: currentColor;
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left;
}

@keyframes dm8-toast-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Componentes editoriais adicionados pela evolução visual por módulos. */
.dm8-ui .dm8-page-header__category { color: rgba(255,255,255,.82); font-size: .6875rem; font-weight: 750; letter-spacing: .09em; margin-bottom: .15rem; text-transform: uppercase; }
.dm8-ui .dm8-form-section__header { align-items: center; display: flex; gap: var(--dm8-space-3); }
.dm8-ui .dm8-form-section__title { font: inherit; margin: 0; }
.dm8-ui .dm8-form-section__description { color: var(--dm8-text-muted); font-size: .8125rem; font-weight: 400; margin: .2rem 0 0; }
.dm8-ui .dm8-form-section__number { align-items: center; background: var(--dm8-brand-700); border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 1.75rem; font-size: .75rem; height: 1.75rem; justify-content: center; }
.dm8-ui .dm8-section-card { background: var(--dm8-surface); border: 1px solid var(--dm8-border); border-radius: var(--dm8-radius); box-shadow: var(--dm8-shadow-sm); overflow: hidden; }
.dm8-ui .dm8-section-card__header { align-items: center; background: var(--dm8-brand-50); border-bottom: 1px solid var(--dm8-brand-200); display: flex; gap: var(--dm8-space-3); justify-content: space-between; padding: var(--dm8-space-3) var(--dm8-space-4); }
.dm8-ui .dm8-section-card__title { color: var(--dm8-brand-800); font-size: 1rem; font-weight: 700; margin: 0; }
.dm8-ui .dm8-section-card__count { background: var(--dm8-brand-200); border-radius: 999px; font-size: .72rem; margin-left: .3rem; padding: .2rem .45rem; }
.dm8-ui .dm8-section-card__description { color: var(--dm8-text-muted); font-size: .8125rem; margin: .2rem 0 0; }
.dm8-ui .dm8-section-card__actions { flex: 0 0 auto; }
.dm8-ui .dm8-section-card__body { padding: var(--dm8-space-4); }
.dm8-ui .dm8-advanced-filters { border-top: 1px solid var(--dm8-border); margin-top: var(--dm8-space-3); padding-top: var(--dm8-space-3); }
.dm8-ui .dm8-advanced-filters summary { color: var(--dm8-action); cursor: pointer; font-weight: 650; width: fit-content; }
.dm8-ui .dm8-advanced-filters__body { padding-top: var(--dm8-space-3); }
.dm8-ui .dm8-filter-chips { display: flex; flex-wrap: wrap; gap: var(--dm8-space-2); }
.dm8-ui .dm8-filter-chip { background: var(--dm8-brand-50); border: 1px solid var(--dm8-brand-200); border-radius: 999px; color: var(--dm8-text-muted); font-size: .75rem; max-width: 100%; overflow-wrap: anywhere; padding: .3rem .6rem; }
.dm8-ui .dm8-metric-grid { display: grid; gap: var(--dm8-space-3); grid-template-columns: repeat(auto-fit,minmax(min(100%,11rem),1fr)); }
.dm8-ui .dm8-metric { background: var(--dm8-surface); border: 1px solid var(--dm8-border); border-left: .25rem solid var(--dm8-brand-400); border-radius: var(--dm8-radius); padding: var(--dm8-space-3) var(--dm8-space-4); }
.dm8-ui .dm8-metric--primary { border-left-color: var(--dm8-action); }
.dm8-ui .dm8-metric--loading { opacity: .72; }
.dm8-ui .dm8-metric--unavailable { border-left-color: var(--dm8-text-muted); }
.dm8-ui .dm8-metric--error { border-left-color: var(--dm8-danger); }
.dm8-ui .dm8-metric__label { color: var(--dm8-text-muted); font-size: .75rem; font-weight: 650; }
.dm8-ui .dm8-metric__value { font-size: 1.5rem; font-weight: 750; line-height: 1.2; margin-top: .2rem; }
.dm8-ui .dm8-metric__context { color: var(--dm8-text-muted); font-size: .75rem; margin-top: .2rem; }
.dm8-ui .dm8-metric-grid--compact { display: flex; flex-wrap: wrap; gap: var(--dm8-space-2); }
.dm8-ui .dm8-metric-grid--compact .dm8-metric {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .125rem var(--dm8-space-3);
    min-width: min(100%, 14rem);
    max-width: 100%;
    padding: var(--dm8-space-2) var(--dm8-space-3);
}
.dm8-ui .dm8-metric-grid--compact .dm8-metric__value { font-size: 1.125rem; margin: 0; overflow-wrap: anywhere; }
.dm8-ui .dm8-metric-grid--compact .dm8-metric__context { grid-column: 1 / -1; margin: 0; overflow-wrap: anywhere; }
.dm8-ui .dm8-result-header {
    align-items: center;
    background: var(--dm8-brand-50);
    border-bottom: 1px solid var(--dm8-brand-200);
    display: flex;
    flex-wrap: wrap;
    gap: var(--dm8-space-2) var(--dm8-space-4);
    justify-content: space-between;
    padding: var(--dm8-space-3) var(--dm8-space-4);
}
.dm8-ui .dm8-result-summary {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: var(--dm8-space-1) var(--dm8-space-2);
    justify-content: flex-end;
    margin-left: auto;
    text-align: right;
}
.dm8-ui .dm8-result-summary__label,
.dm8-ui .dm8-result-summary__context { color: var(--dm8-text-muted); font-size: .75rem; }
.dm8-ui .dm8-result-summary__value { color: var(--dm8-text); font-size: 1.125rem; line-height: 1; }
.dm8-ui .dm8-result-header__tools {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--dm8-space-3) var(--dm8-space-4);
    justify-content: flex-end;
    margin-left: auto;
}
.dm8-ui .dm8-result-sort {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: var(--dm8-space-2);
    justify-content: flex-end;
}
.dm8-ui .dm8-result-sort .form-label { display: block; font-size: .75rem; margin: 0 0 var(--dm8-space-1); }
.dm8-ui .dm8-result-sort .form-select { min-width: 8rem; }
@media (max-width: 575.98px) {
    .dm8-ui .dm8-result-summary { flex: 1 1 100%; }
    .dm8-ui .dm8-result-summary__context { flex-basis: 100%; }
    .dm8-ui .dm8-result-header__tools,
    .dm8-ui .dm8-result-sort { width: 100%; }
    .dm8-ui .dm8-result-sort > div { flex: 1 1 8rem; }
    .dm8-ui .dm8-result-sort .form-select,
    .dm8-ui .dm8-result-sort .btn { width: 100%; }
}
.dm8-ui .dm8-source-meta { color: var(--dm8-text-muted); font-size: .75rem; margin: var(--dm8-space-2) 0 0; }
.dm8-ui .manuals-section-title { color: var(--dm8-navy-800); font-weight: 700; }
.dm8-ui .manual-card { border: 0; border-left: .3rem solid var(--dm8-action); box-shadow: var(--dm8-shadow-sm); transition: transform .15s ease, box-shadow .15s ease; }
.dm8-ui .manual-card:hover, .dm8-ui .manual-card:focus-within { box-shadow: var(--dm8-shadow-md); transform: translateY(-2px); }
.dm8-ui .manual-card--technical { border-left-color: var(--dm8-warning); }
.dm8-ui .manual-card .stretched-link { color: var(--dm8-navy-800); text-decoration: none; }
.dm8-ui .dm8-density-compact :where(.form-control,.form-select,.btn), .dm8-ui.dm8-density-compact :where(.form-control,.form-select,.btn) { font-size: .8125rem; min-height: 2rem; padding-block: .25rem; }
.dm8-ui .dm8-density-compact textarea.form-control, .dm8-ui.dm8-density-compact textarea.form-control { min-height: 4.5rem; }
.dm8-ui .dm8-density-compact :where(.form-check-input), .dm8-ui.dm8-density-compact :where(.form-check-input) { min-height: 1rem; min-width: 1rem; }
.dm8-ui .dm8-table-scroll { max-height: min(65vh,36rem); overflow: auto; }
.dm8-ui .dm8-table--sticky thead th { position: sticky; top: 0; z-index: 2; }
.dm8-ui .dm8-progress { accent-color: var(--dm8-action); display: block; height: .75rem; margin-bottom: var(--dm8-space-1); max-width: 12rem; width: 100%; }

@media (max-width: 767.98px) {
    .dm8-toast-stack {
        left: 1rem;
        right: 1rem;
        max-width: none;
    }
}
.manual-shell {
    max-width: 980px;
    margin-inline: auto;
}

.manual-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgb(248 249 250 / 94%);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #dbe5eb;
}

.manual-content {
    background: #fff;
    border: 1px solid #dbe5eb;
    border-radius: 1rem;
    padding: clamp(1.25rem, 4vw, 3.5rem);
    box-shadow: 0 .75rem 2rem rgb(23 63 95 / 8%);
    color: #273845;
    line-height: 1.72;
}

.manual-content h1,
.manual-content h2,
.manual-content h3 {
    color: #173f5f;
    scroll-margin-top: 5rem;
}

.manual-content h1 {
    border-bottom: .2rem solid #6bb7c9;
    padding-bottom: .75rem;
    margin-bottom: 1.5rem;
}

.manual-content h2 {
    margin-top: 2.2rem;
    border-left: .25rem solid #2878a8;
    padding-left: .75rem;
}

.manual-content pre {
    background: #142531;
    color: #e7f1f5;
    border-radius: .65rem;
    padding: 1rem;
    overflow-x: auto;
}

.manual-content code { color: #9b4d14; }
.manual-content pre code { color: inherit; }
.manual-content table {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
}
.manual-content th,
.manual-content td {
    border: 1px solid #cfdae0;
    padding: .55rem .7rem;
    min-width: 8rem;
}
.manual-content th { background: #eaf3f7; }
.manual-content img {
    max-width: 100%;
    height: auto;
    border-radius: .5rem;
}
.manual-type {
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .72rem;
}

.manual-toc summary { cursor: pointer; }
.manual-toc__subitem { margin-left: var(--dm8-space-4); }

@media print {
    body:has(.manual-shell) .dm8-navbar,
    body:has(.manual-shell) .dm8-page-header,
    body:has(.manual-shell) footer,
    .manual-shell .manual-toolbar,
    .manual-shell .manual-toc {
        display: none !important;
    }

    .manual-shell,
    .manual-content {
        max-width: none;
        width: 100%;
    }

    .manual-content {
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .manual-content table { display: table; }
    .manual-content pre { white-space: pre-wrap; }
}
.dm8-debug-timing { font-size: .625rem; }
.cnpj-consulta-loading { align-items: center; display: inline-flex; gap: .4rem; white-space: nowrap; }
@media (min-width: 1200px) {
    .followup-filtros-linha { flex-wrap: wrap; }
    .followup-filtros-linha > .dm8-action-bar { flex-basis: 100%; }
}
@media (max-width: 575.98px) {
    .cnpj-consulta-loading { flex-basis: 100%; }
}
