@font-face {
    font-family: Manrope;
    src: url("../fonts/manrope-variable.ttf") format("truetype");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --nf-navy: #0b1f3b;
    --nf-blue: #2563eb;
    --nf-button-primary: linear-gradient(120deg, #1d4ed8 0%, #2563eb 55%, #08766b 100%);
    --nf-button-primary-hover: linear-gradient(120deg, #173faa 0%, #1d4ed8 55%, #065f56 100%);
    --nf-button-secondary: linear-gradient(120deg, #ffffff 0%, #eef4ff 60%, #e6f7f3 100%);
    --nf-button-secondary-hover: linear-gradient(120deg, #f5f8ff 0%, #e3edff 60%, #d4f0e9 100%);
    --nf-button-border: #c7d8ed;
    --nf-teal: #14b8a6;

    --nf-ink: #12243e;
    --nf-muted: #64748b;
    --nf-line: #e2e8f0;
    --nf-surface: #fff;
    --nf-canvas: #f5f7fb;

    --nf-error: #a82635;
    --nf-error-bg: #fff1f2;
    --nf-focus: #2563eb;

    --nf-font: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;

    --nf-radius-sm: 8px;
    --nf-radius: 12px;
    --nf-radius-lg: 24px;

    --nf-shadow: 0 12px 40px -18px rgb(11 31 59 / 20%);

    --nf-space-1: 4px;
    --nf-space-2: 8px;
    --nf-space-3: 12px;
    --nf-space-4: 16px;
    --nf-space-5: 24px;
    --nf-space-6: 32px;
    --nf-space-7: 48px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--nf-canvas);
    color: var(--nf-ink);
    font-family: var(--nf-font);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
    font: inherit;
}

/* Seta e respiro compartilhados pelos selects de opção única. */
select:not([multiple]):not([size]),
select:not([multiple])[size="1"] {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
}

@media (forced-colors: active) {
    select:not([multiple]):not([size]),
    select:not([multiple])[size="1"] {
        -webkit-appearance: auto;
        appearance: auto;
        background-image: none;
    }
}

button,
a,
input {
    -webkit-tap-highlight-color: transparent;
}

button,
a {
    touch-action: manipulation;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
}

img,
svg {
    max-width: 100%;
}

svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

h1,
h2,
h3,
p {
    margin: 0;
}

h1,
h2,
h3 {
    color: var(--nf-navy);
    line-height: 1.15;
    letter-spacing: -.045em;
}

h1 {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 650;
}

h2 {
    font-size: 26px;
    font-weight: 650;
}

p {
    overflow-wrap: break-word;
}

:focus {
    outline: none;
}


main:focus {
    outline: none;
}

::selection {
    background: #ccf4ef;
    color: var(--nf-navy);
}

.skip-link {
    position: fixed;
    z-index: 20;
    top: 12px;
    left: 12px;
    transform: translateY(-180%);
    padding: 10px 20px;
    background: var(--nf-navy);
    color: white;
    border-radius: 8px;
}

.skip-link:focus {
    transform: none;
}

.brand-slot {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.brand-slot img {
    display: block;
    color: #718096;
    font-size: 14px;
    line-height: 48px;
    text-align: center;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .16em;
    line-height: 1.6;
    color: #55708c;
    margin-bottom: 18px;
}

.eyebrow > span {
    width: 6px;
    height: 6px;
    flex: none;
    background: var(--nf-teal);
    border-radius: 2px;
}

.accent-dot {
    color: var(--nf-teal);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--nf-radius-sm);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.4;
    transition: background .18s, border-color .18s, box-shadow .18s;
    letter-spacing: -.015em;
}

.button-primary {
    background: var(--nf-button-primary);
    color: var(--nf-surface);
    border-color: transparent;
    border-radius: var(--nf-radius);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 6px 18px -9px rgb(37 99 235 / 38%);
}

.button-primary:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    background: var(--nf-button-primary-hover);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 7px 20px -9px rgb(37 99 235 / 42%);
}

.button-secondary {
    background: var(--nf-button-secondary);
    border-color: var(--nf-button-border);
    color: var(--nf-navy);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), 0 5px 14px -10px rgb(11 31 59 / 30%);
}

.button-secondary:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    background: var(--nf-button-secondary-hover);
    border-color: #a6c1e4;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), 0 8px 18px -10px rgb(11 31 59 / 35%);
}


.button:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    box-shadow: inset 0 2px 4px rgb(11 31 59 / 12%);
}

dialog .button:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    box-shadow: none;
}

.button-full {
    width: 100%;
    justify-content: space-between;
}

.button-full > span:last-child {
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}

.button:disabled,
.button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .72;
    transform: none;
}

.button[aria-busy="true"] {
    cursor: wait;
}

.button[aria-busy=true] > span:last-child {
    animation: nf-pulse 1s ease-in-out infinite;
}

.text-link {
    color: var(--nf-blue);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
}

.text-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.field label {
    font-weight: 700;
    font-size: 14px;
    color: #283a53;
}

.input-wrap {
    position: relative;
}

.input-wrap input {
    width: 100%;
    height: 46px;
    min-width: 0;
    border: 1px solid #dce3ec;
    border-radius: var(--nf-radius-sm);
    background: #fff;
    color: var(--nf-ink);
    padding: 0 16px;
    outline: none;
    font-size: 15px;
    transition: border-color .18s, box-shadow .18s;
}

.input-wrap input::placeholder {
    color: #8492a6;
}

.input-wrap input:hover {
    border-color: #acbbcd;
}

.input-wrap input:focus,
:is(.nf-settings, .nf-modal-form) select:focus,
select:focus {
    outline: none;
    border-color: var(--nf-focus);
    box-shadow: 0 0 0 3px #2563eb14;
}

.input-password input {
    padding-right: 54px;
}

.password-toggle {
    display: none;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #708197;
    align-items: center;
    justify-content: center;
}

.js-enabled .password-toggle {
    display: flex;
}

.password-toggle:hover {
    background: #f1f5f9;
    color: var(--nf-blue);
}

.password-toggle svg {
    width: 20px;
    height: 20px;
}

.checkbox-label {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-size: 14px;
    color: #5c6c81;
    cursor: pointer;
    min-height: 36px;
}

.checkbox-label input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--nf-blue);
}

.field-error {
    font-size: 14px;
    color: var(--nf-error);
    text-align: center;
}

.field-invalid input {
    border-color: #d45a66;
}


.alert {
    padding: 14px 16px;
    border-radius: var(--nf-radius-sm);
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}

.alert-error {
    background: var(--nf-error-bg);
    color: var(--nf-error);
    border: 1px solid #f4cbd1;
}

.alert-success {
    background: var(--nf-success-bg);
    color: var(--nf-success);
    border: 1px solid #bce8dd;
}

.alert-loading {
    background: var(--nf-canvas);
    color: var(--nf-blue);
    border: 1px solid var(--nf-button-border);
}

.surface {
    background: var(--nf-surface);
    border: 1px solid var(--nf-line);
    border-radius: var(--nf-radius-lg);
    box-shadow: var(--nf-shadow);
}

@keyframes nf-pulse {
    50% {
        opacity: .35;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}
/* Núcleo interno: estrutura, navegação e componentes compartilhados. */
:root {
    --nf-sidebar-width: 252px;
    --nf-content-width: 100%;
    --nf-page-gap: clamp(20px, 2vw, 32px);
    --nf-text-sm: 14px;
    --nf-success: #08766b;
    --nf-success-bg: #e6f7f3;
    --nf-sidebar-text: #bbcce0;
}
.nf-shell { display: grid; grid-template-columns: var(--nf-sidebar-width) minmax(0, 1fr); min-height: 100vh; min-height: 100svh; }
.nf-sidebar { position: sticky; top: 0; height: 100vh; height: 100svh; overflow-y: auto; display: flex; flex-direction: column; padding: 32px 20px 24px; color: var(--nf-sidebar-text); background: radial-gradient(ellipse at 0 100%, #10465580, transparent 55%), var(--nf-navy); }
.nf-brand { margin: 0 15px 42px; }
.nf-brand img { color: #c0d1e3; border-color: #52667f; }
.nf-navigation nav { display: grid; gap: 8px; padding-top: 12px; }
.nf-nav-link { min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid transparent; border-radius: var(--nf-radius-sm); text-decoration: none; font-size: var(--nf-text-sm); font-weight: 600; }
.nf-nav-link:hover { background: #ffffff0c; color: white; }
.nf-nav-link.is-active { background: #2563eb26; border-color: #608eec40; color: white; box-shadow: inset 3px 0 var(--nf-teal); }
.nf-nav-link svg { width: 20px; height: 20px; flex: none; }
.nf-nav-link.is-active svg { color: #67d8d0; }

.nf-sidebar-signature { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: auto; border-top: 1px solid #ffffff20; padding: 22px 14px 0; font-size: 12px; }
.nf-sidebar-signature>span { flex: none; width: 6px; height: 6px; background: var(--nf-teal); border-radius: 50%; }
.nf-workspace { min-width: 0; display: flex; flex-direction: column; }
.nf-topbar { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px var(--nf-page-gap); background: var(--nf-surface); border-bottom: 1px solid var(--nf-line); }
.nf-workspace-label,.nf-account,.nf-user { display: flex; align-items: center; gap: 14px; min-width: 0; }
.nf-workspace-label { flex: 1; }
.nf-workspace-label > div { min-width: 0; overflow-wrap: anywhere; }
.nf-workspace-label strong { display: block; color: var(--nf-navy); font-size: clamp(20px, 1.8vw, 26px); font-weight: 650; letter-spacing: -.035em; line-height: 1.3; }
.nf-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid #d7e4fa; border-radius: 50%; background: #edf3ff; color: var(--nf-blue); font-weight: 700; }
.nf-logout { display: flex; align-items: center; gap: 9px; min-height: 44px; border: 1px solid var(--nf-line); background: white; color: var(--nf-ink); padding: 10px 15px; border-radius: var(--nf-radius-sm); font-size: var(--nf-text-sm); font-weight: 650; }
.nf-logout:hover { background: var(--nf-canvas); border-color: #b7c8de; }
.nf-logout svg { width: 18px; height: 18px; }
.nf-main { width: 100%; max-width: var(--nf-content-width); margin-inline: auto; padding: 40px var(--nf-page-gap); flex: 1; min-width: 0; }
.nf-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.nf-page-heading .eyebrow { font-size: 12px; margin-bottom: 12px; }
.nf-page-heading h1 { font-size: clamp(26px, 2.6vw, 32px); }
.nf-page-heading p { margin-top: 12px; color: var(--nf-muted); }
.nf-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid #bce8dd; border-radius: 30px; font-size: 13px; color: var(--nf-success); background: var(--nf-success-bg); white-space: nowrap; }

.nf-footer { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-inline: var(--nf-page-gap); padding: 22px 0; border-top: 1px solid var(--nf-line); font-size: 13px; color: var(--nf-muted); }
.nf-messages { display: grid; gap: 12px; margin-bottom: 24px; }
.nf-message { border: 1px solid var(--nf-line); background: var(--nf-surface); }
@media (max-width: 1200px) {
    :root { --nf-sidebar-width: 224px; --nf-page-gap: 24px; }
    .nf-sidebar { padding-inline: 14px; }
    .nf-brand { margin-inline: 7px; }
    .nf-page-heading { align-items: flex-start; }

}
@media (max-width: 960px) {
    .nf-shell { display: block; }
    .nf-sidebar { position: static; height: auto; overflow: visible; display: block; padding: 16px 24px; }
    .nf-brand { margin: 0 0 12px; }
    .nf-brand img { width: 150px; height: 40px; line-height: 40px; }
    .nf-navigation nav { display: grid; padding-bottom: 16px; }
    .nf-sidebar-signature { display: none; }
    .nf-nav-link { min-height: 44px; }
    .nf-topbar { min-height: 80px; }
    .nf-page-heading { align-items: center; }

}
@media (max-width: 640px) {
    :root { --nf-page-gap: 20px; }
    .nf-sidebar { padding: 16px 20px 10px; }
    .nf-navigation nav { display: grid; }
    .nf-topbar { gap: 12px; padding-block: 16px; }
    .nf-account { flex: none; }
    .nf-main { padding-top: 28px; padding-bottom: 28px; }
    .nf-page-heading { align-items: flex-start; flex-direction: column; gap: 18px; margin-bottom: 24px; }

    .nf-footer { font-size: 12px; }
}
/* Permite reduzir os cartões até as menores telas sem cortar conteúdo. */

/* Módulos V1: grupos expansíveis e destinos ainda não implementados. */
.nf-navigation { margin-bottom: 24px; }
.nf-nav-group > summary { cursor: pointer; list-style: none; }
.nf-nav-group > summary::-webkit-details-marker { display: none; }
.nf-nav-group > summary > span { flex: 1; }
.nf-nav-group .nf-group-chevron { width: 16px; height: 16px; margin-left: auto; }
.nf-nav-group[open] .nf-group-chevron { transform: rotate(180deg); }
.nf-submenu { display: grid; gap: 2px; margin: 4px 0 8px 24px; padding-left: 19px; border-left: 1px solid #ffffff26; }
.nf-submenu-link { display: block; padding: 10px 0; font-size: var(--nf-text-sm); line-height: 1.5; }
 .nf-submenu-link { color: var(--nf-sidebar-text); cursor: not-allowed; }

/* Navegação mobile compartilha os módulos e a conta com o desktop. */
.nf-menu-toggle { display: none; }
.nf-mobile-account-slot:empty { display: none; }
.nf-menu-panel { min-width: 0; }
.nf-desktop-account-slot { flex: none; }
@media (max-width: 960px) {
    .nf-mobile-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .nf-mobile-header .nf-brand { margin: 0; }
    .nf-mobile-header .nf-brand img { object-fit: contain !important; max-width: 180px; }
    .nf-menu-ready .nf-menu-toggle { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid #ffffff40; border-radius: var(--nf-radius-sm); background: #ffffff08; color: white; }
    .nf-menu-toggle:hover { background: #ffffff18; }
    .nf-menu-toggle svg { width: 24px; height: 24px; }
    .nf-menu-close-icon { display: none; }
    .nf-menu-toggle[aria-expanded="true"] .nf-menu-open-icon { display: none; }
    .nf-menu-toggle[aria-expanded="true"] .nf-menu-close-icon { display: block; }
    .nf-menu-panel { display: none; }
    .nf-menu-ready.is-menu-open .nf-menu-panel { display: block; }
    .nf-menu-panel { padding-top: 20px; }
    .nf-mobile-account-slot { border-top: 1px solid #ffffff26; padding: 20px 0 6px; }
    .nf-mobile-account-slot .nf-account { justify-content: space-between; }
    .nf-mobile-account-slot .nf-logout { background: #ffffff0c; color: white; border-color: #ffffff40; }
    .nf-desktop-account-slot:empty { display: none; }
}

/* Planos: demonstração estática, construída sobre o núcleo visual NFSuite. */
.nf-plans { min-width: 0; }

.nf-plans-section { margin-top: var(--nf-space-7); }
.nf-plans-section + .nf-plans-section { padding-top: var(--nf-space-7); border-top: 1px solid var(--nf-line); }
.nf-plans-section-heading { display: flex; align-items: flex-start; gap: var(--nf-space-4); margin-bottom: var(--nf-space-5); }
.nf-plans-section-number { padding-top: 5px; font-size: 13px; font-weight: 800; color: var(--nf-success); letter-spacing: .08em; }
.nf-plans-section-heading h2 { font-size: clamp(22px, 2vw, 26px); letter-spacing: -.035em; }
.nf-plans-section-heading p { margin-top: var(--nf-space-2); color: var(--nf-muted); max-width: 75ch; }
.nf-plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nf-space-5); align-items: stretch; }
.nf-plan-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--nf-space-5);
    border-radius: var(--nf-radius-lg);
    overflow-wrap: anywhere;
}

.nf-plan-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 64px; align-content: flex-start; }
.nf-plan-heading h3 { font-size: 20px; letter-spacing: -.035em; line-height: 1.5; }
.nf-plan-recommendation { display: inline-flex; padding: 5px 9px; border-radius: var(--nf-radius-sm); background: var(--nf-canvas); color: var(--nf-blue); font-size: 12px; font-weight: 800; line-height: 1.5; }
.nf-plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin: 12px 0 24px; color: var(--nf-navy); line-height: 1.25; font-variant-numeric: tabular-nums; }
.nf-plan-price strong { font-size: clamp(28px, 2.65vw, 36px); font-weight: 800; letter-spacing: -.055em; }
.nf-plan-currency { font-size: 17px; font-weight: 650; }
.nf-plan-period { color: var(--nf-muted); font-size: var(--nf-text-sm); white-space: nowrap; }
.nf-plan-group { border-top: 1px solid var(--nf-line); padding-top: 20px; margin-bottom: 20px; }
.nf-plans h4 { margin: 0 0 14px; font-size: var(--nf-text-sm); font-weight: 800; color: var(--nf-navy); }
.nf-plan-capacity, .nf-plan-features, .nf-plan-tags { list-style: none; margin: 0; padding: 0; }
.nf-plan-capacity { display: grid; gap: var(--nf-space-2); font-size: 15px; }
.nf-plan-capacity strong { font-weight: 750; }
.nf-plan-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--nf-space-4); }
.nf-plan-tags li { padding: 4px 8px; border: 1px solid var(--nf-line); border-radius: var(--nf-radius-sm); font-size: 13px; color: var(--nf-muted); }
.nf-plan-features { display: grid; gap: var(--nf-space-2); font-size: var(--nf-text-sm); }
.nf-plan-features li { display: flex; gap: 9px; align-items: baseline; }
.nf-plan-features li::before { content: "✓"; color: var(--nf-success); font-weight: 800; flex: none; }
.nf-plan-overages { margin-top: auto; padding-top: var(--nf-space-5); border-top: 1px solid var(--nf-line); }
.nf-plan-overages dl { margin: 0; display: grid; gap: var(--nf-space-2); font-size: var(--nf-text-sm); }
.nf-plan-overages dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.nf-plan-overages dt { color: var(--nf-muted); }
.nf-plan-overages dd { margin: 0; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nf-plan-overages p { margin-top: 12px; color: var(--nf-muted); font-size: 13px; }
@media (max-width: 1199px) {
    .nf-plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .nf-plans-grid { grid-template-columns: minmax(0, 1fr); }

    .nf-plan-heading { min-height: 0; margin-bottom: 12px; }
    .nf-plan-price strong { font-size: 38px; }
    .nf-plan-card { padding: var(--nf-space-5); }
}

/* Ação visual dos planos; contratação ainda não implementada. */

/* Configurações: prévia visual, reutilizando tokens, campos e botões do núcleo. */
.nf-settings { min-width: 0; }
.nf-settings [hidden] { display: none !important; }
.nf-settings svg { width: 20px; height: 20px; flex: none; }
.nf-settings h2 { font-size: clamp(22px, 2vw, 26px); letter-spacing: -.03em; }
.nf-settings h3 { font-size: 17px; letter-spacing: -.02em; }
.nf-settings p { color: var(--nf-muted); }
:is(.nf-settings, .nf-modal-form) select { width: 100%; min-width: 0; height: 46px; padding: 0 48px 0 16px; border: 1px solid #dce3ec; border-radius: var(--nf-radius-sm); color: var(--nf-ink); background-color: var(--nf-surface); font-family: var(--nf-font); font-size: 15px; text-overflow: ellipsis; outline: none; transition: border-color .18s, box-shadow .18s; }
.nf-settings-tabs { display: flex; gap: var(--nf-space-2); overflow-x: auto; padding: 4px 4px 12px; margin: 0 -4px 12px; }
.nf-settings-tabs [role="tab"] { display: flex; align-items: center; gap: 10px; flex: none; min-height: 44px; padding: 10px 16px; border: 1px solid transparent; border-radius: var(--nf-radius); background: transparent; color: var(--nf-muted); font-weight: 700; font-size: 14px; line-height: 1.4; }
.nf-settings-tabs [role="tab"]:hover { background: var(--nf-surface); color: var(--nf-navy); }
.nf-settings-tabs [aria-selected="true"] { background: var(--nf-surface); border-color: var(--nf-line); color: var(--nf-blue); box-shadow: inset 0 -2px var(--nf-teal); }
.nf-settings-panel { padding: var(--nf-space-5); min-width: 0; }
.nf-settings-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--nf-space-5); margin-bottom: var(--nf-space-5); }
.nf-settings-panel-heading > div { min-width: 0; }
.nf-settings-panel-heading p { margin-top: 8px; font-size: 15px; }
.nf-settings-panel-heading .button { flex: none; }
.nf-settings-quota { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--nf-line); margin-bottom: 20px; }
.nf-settings-quota > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.nf-settings-quota strong { font-size: 15px; }
.nf-settings-quota span { color: var(--nf-muted); font-size: var(--nf-text-sm); }
.nf-settings-quota progress { appearance: none; height: 6px; width: 150px; max-width: 100%; border: 0; border-radius: 20px; overflow: hidden; background: var(--nf-line); color: var(--nf-teal); }
.nf-settings-quota progress::-webkit-progress-bar { background: var(--nf-line); border-radius: 20px; }
.nf-settings-quota progress::-webkit-progress-value { background: var(--nf-teal); border-radius: 20px; }
.nf-settings-quota progress::-moz-progress-bar { background: var(--nf-teal); border-radius: 20px; }

.nf-settings-row-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--nf-radius-sm); background: var(--nf-canvas); color: var(--nf-blue); flex: none; }

.nf-settings-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.nf-settings-text-action { background: none; border: 0; border-radius: 4px; padding: 7px 0; min-height: 36px; color: var(--nf-blue); font-size: var(--nf-text-sm); font-weight: 700; text-align: left; text-decoration: none; }
.nf-settings-text-action:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 4px; }
.nf-settings-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 60px 20px; }
.nf-settings-empty-icon { display: grid; place-items: center; width: 64px; height: 64px; background: var(--nf-canvas); color: var(--nf-blue); border-radius: var(--nf-radius-lg); margin-bottom: 6px; }
.nf-settings-empty-icon svg { width: 28px; height: 28px; }
.nf-settings-empty h3 { font-size: 22px; }
.nf-settings-empty p { max-width: 52ch; font-size: 15px; }
.nf-settings-empty .button { margin-top: 8px; }

/* Padrão reutilizável de carregamento, vazio e erro para blocos de dados. */
.nf-data-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nf-space-4);
    min-height: 500px;
    padding: var(--nf-space-6);
    text-align: center;
}
.nf-data-state[hidden] { display: none !important; }
.nf-data-state-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: var(--nf-radius-lg);
    background: var(--nf-canvas);
    color: var(--nf-blue);
}
.nf-data-state .material-symbols-outlined { font-size: 28px; line-height: 1; }
.nf-data-state p { margin: 0; max-width: 52ch; color: #000; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.nf-data-state[data-state="empty"], .nf-data-state[data-state="error"] { flex-direction: column; }
.nf-data-state[data-state="empty"] .nf-data-state-icon,
.nf-data-state[data-state="error"] .nf-data-state-icon { width: auto; height: auto; border-radius: 0; background: none; color: #94a3b8; }
.nf-data-state[data-state="empty"] .material-symbols-outlined,
.nf-data-state[data-state="error"] .material-symbols-outlined { font-size: 48px; }
.nf-data-state[data-state="loading"] .material-symbols-outlined { animation: nf-data-state-spin 1.2s linear infinite; }
@keyframes nf-data-state-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .nf-data-state[data-state="loading"] .material-symbols-outlined { animation: none; }
}
.nf-settings-company-context { max-width: 780px; margin: 30px 0; }
.nf-settings-company-context p { margin-top: 12px; font-size: var(--nf-text-sm); overflow-wrap: anywhere; }
.nf-settings-company-context strong { color: var(--nf-ink); font-weight: 650; }
.nf-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.nf-form-wide { grid-column: 1 / -1; }
.nf-settings-form-footer { display: flex; align-items: center; justify-content: flex-end; gap: 20px; border-top: 1px solid var(--nf-line); margin-top: 32px; padding-top: 24px; }
.nf-settings-form-footer > span { color: var(--nf-muted); font-size: 13px; }
.nf-settings-document { display: grid; grid-template-columns: minmax(160px, .65fr) minmax(0, 1.35fr); gap: 24px; border-top: 1px solid var(--nf-line); padding: 26px 0; }
.nf-settings-document > div > p { font-size: var(--nf-text-sm); margin-top: 6px; }
.nf-settings-municipal { padding-left: 16px; border-left: 3px solid var(--nf-line); }
.nf-settings-municipal strong { font-size: 15px; }
.nf-settings-preferences { border-top: 1px solid var(--nf-line); padding-top: 26px; }
.nf-settings-preferences h3 { margin-bottom: 18px; }
.nf-settings-check { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; font-size: 15px; cursor: pointer; }
.nf-settings-check input { margin: 3px 0 0; flex: none; width: 18px; height: 18px; accent-color: var(--nf-blue); }
.nf-settings-check span { min-width: 0; overflow-wrap: anywhere; }
.nf-settings-check small { display: block; color: var(--nf-muted); margin-top: 4px; font-size: 13px; }
.nf-settings-admin { display: flex; align-items: flex-start; gap: 18px; padding: 24px 0 30px; border-bottom: 1px solid var(--nf-line); }
.nf-settings-admin > div { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.nf-settings-admin h3 { margin-bottom: 12px; font-size: var(--nf-text-sm); color: var(--nf-muted); }
.nf-settings-admin p { font-size: var(--nf-text-sm); margin-top: 4px; }
.nf-settings-admin .nf-avatar { flex: none; }
.nf-settings-users-heading { margin-top: 30px; }
.nf-settings-table-wrap { overflow-x: auto; }
.nf-settings-table { width: 100%; border-collapse: collapse; font-size: var(--nf-text-sm); text-align: left; }
.nf-settings-table th { color: var(--nf-muted); font-size: 13px; font-weight: 650; padding: 18px 12px; border-bottom: 1px solid var(--nf-line); }
.nf-settings-table td { padding: 16px 12px; border-bottom: 1px solid var(--nf-line); vertical-align: middle; }
.nf-settings-table th:first-child, .nf-settings-table td:first-child { padding-left: 0; }
.nf-settings-table th:last-child, .nf-settings-table td:last-child { padding-right: 0; }
.nf-settings-table tbody tr:last-child td { border-bottom: 0; }
.nf-settings-user-name { min-width: 160px; max-width: 250px; overflow-wrap: anywhere; }
.nf-settings-user-name strong { display: block; font-size: 15px; }
.nf-settings-user-name span { display: block; margin-top: 5px; color: var(--nf-muted); }
.nf-settings-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nf-modal { width: min(760px, calc(100% - 32px)); max-width: 760px; max-height: calc(100vh - 40px); max-height: calc(100svh - 40px); padding: 0; margin: auto; border: 1px solid var(--nf-line); border-radius: var(--nf-radius-lg); box-shadow: var(--nf-shadow); color: var(--nf-ink); background: var(--nf-surface); }
.nf-modal[open] { display: flex; flex-direction: column; }
.nf-modal::backdrop { background: rgb(11 31 59 / 58%); backdrop-filter: blur(3px); }
.nf-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--nf-line); flex: none; }
.nf-modal-header h2 { flex: 1; min-width: 0; margin: 0; font-size: 22px; overflow-wrap: anywhere; }
.nf-modal-body { overflow-y: auto; min-height: 0; padding: 20px 24px; overscroll-behavior: contain; }
.nf-modal-description { margin-bottom: 24px; font-size: var(--nf-text-sm); }
:is(.nf-modal, .nf-modal-form) fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
:is(.nf-modal, .nf-modal-form) fieldset + fieldset { margin-top: 28px; }
:is(.nf-modal, .nf-modal-form) legend { font-size: 16px; font-weight: 750; padding: 0; margin-bottom: 18px; }
.nf-modal .nf-settings-access { margin-top: 28px; }
.nf-settings-access > p { font-size: var(--nf-text-sm); }
.nf-settings-check-all { border-bottom: 1px solid var(--nf-line); margin: 12px 0; padding-bottom: 16px; }
.nf-modal-footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--nf-line); flex: none; }
@media (max-width: 1200px) {

    .nf-settings-document { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 760px) {
    .nf-page-heading h1 { font-size: 24px; }
    .input-wrap input, :is(.nf-settings, .nf-modal-form) select { font-size: 16px; }
    .nf-settings-panel { padding: 20px; }
    .nf-settings-panel-heading { flex-direction: column; align-items: stretch; }
    .nf-form-grid { grid-template-columns: minmax(0, 1fr); }
    .nf-settings-admin { flex-direction: column; gap: 12px; }
    .nf-settings-admin > div { flex: none; width: 100%; }
    .nf-settings-admin h3 { margin-bottom: 8px; }
    .nf-settings-form-footer { flex-direction: column; align-items: stretch; }
    .nf-settings-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .nf-settings-table, .nf-settings-table tbody, .nf-settings-table tr, .nf-settings-table td { display: block; }
    .nf-settings-table tr { padding: 18px 0; border-bottom: 1px solid var(--nf-line); }
    .nf-settings-table tr:last-child { border-bottom: 0; }
    .nf-settings-table td { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 9px 0; border: 0; }
    .nf-settings-table td::before { content: attr(data-label); color: var(--nf-muted); font-size: 13px; }
    .nf-settings-user-name { min-width: 0; max-width: none; }
    .nf-settings-table .nf-badge { justify-self: start; }
    .nf-settings-table .nf-settings-row-actions { align-items: flex-start; }
}
@media (max-width: 420px) {
    .nf-settings-panel { padding: 20px 16px; }

    .nf-settings-row-icon { display: none; }

    .nf-settings-empty { padding: 32px 0; }
    .nf-settings-empty .button { width: 100%; }
    .nf-settings-tabs [role="tab"] { padding-inline: 15px; }
    .nf-settings-table td { grid-template-columns: 1fr; gap: 4px; }
    .nf-modal-header, .nf-modal-body, .nf-modal-footer { padding: 20px; }
    .nf-modal-footer .button { flex: 1; min-width: 0; padding-inline: 12px; }
}

/* Assinatura atual, comparação compacta e detalhes dos planos. */
.nf-plan-current { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 32px; border-color: #bce8dd; }
.nf-plan-current > div { min-width: 0; }
.nf-plan-current [hidden] { display: none !important; }
.nf-plan-current h2 { margin-top: 16px; font-size: 28px; letter-spacing: -.035em; }
.nf-plan-current-description { margin: 8px 0 20px; color: var(--nf-muted); }
.nf-plan-current .nf-plan-capacity { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.nf-plans [hidden] { display: none !important; }
.nf-plan-current-value { flex: 0 1 320px; min-width: min(100%, 280px); }
.nf-plan-cycle-badge {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    padding: 15px 18px;
    border: 1px solid var(--nf-button-border);
    border-radius: var(--nf-radius);
    background: linear-gradient(135deg, var(--nf-surface), var(--nf-canvas));
    box-shadow: 0 10px 24px -20px rgb(11 31 59 / 35%);
}
.nf-plan-cycle-badge > span { display: grid; align-content: center; gap: 5px; min-width: 0; }
.nf-plan-cycle-badge > span + span { padding-left: 16px; border-left: 1px solid var(--nf-line); }
.nf-plan-cycle-badge small { color: var(--nf-muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.nf-plan-cycle-badge strong { color: var(--nf-navy); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

.nf-plans-available { margin-top: 40px; }
.nf-plans-available h2 { font-size: 24px; letter-spacing: -.035em; }
.nf-plans-available p { margin-top: 10px; color: var(--nf-muted); max-width: 85ch; }
.nf-plan-compact .nf-plan-heading { min-height: 0; margin-bottom: 0; }
.nf-plan-compact .nf-plan-price { margin: 20px 0; }
.nf-plan-is-current { border-color: #9bdccd; }
.nf-plan-card-actions { display: grid; gap: 10px; margin-top: auto; padding-top: 24px; }
.nf-plan-card-actions .button { width: 100%; padding-inline: 12px; }
.nf-modal [hidden] { display: none !important; }
.nf-modal-header-compact, .nf-modal-footer-compact { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; flex-shrink: 0; }
.nf-modal-header-compact { border-bottom: 1px solid var(--nf-line); }
.nf-modal-header-compact h2 { font-size: 22px; }
.nf-modal-body-compact { overflow-y: auto; padding: 20px; min-height: 0; }
.nf-modal-footer-compact { border-top: 1px solid var(--nf-line); justify-content: flex-end; }
.nf-modal-close-bordered { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; margin-left: auto; flex: none; border: 1px solid var(--nf-line); border-radius: var(--nf-radius); background: var(--nf-canvas); color: var(--nf-navy); line-height: 1; cursor: pointer; }
.nf-modal-close-bordered:hover { background: var(--nf-line); }
.nf-modal-close-bordered svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.nf-modal-state { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.nf-modal-state-icon { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--nf-line); border-radius: 50%; background: var(--nf-canvas); color: var(--nf-blue); font-size: 28px; }
.nf-plan-confirmation-label { margin: 0; color: var(--nf-muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
 .nf-modal-feedback { max-width: 52ch; margin: 0; color: var(--nf-muted); font-size: 14px; line-height: 1.55; }
.nf-modal-feedback { color: var(--nf-ink); font-weight: 700; text-align: center; }
.nf-plan-change-summary { display: grid; gap: 24px; }
.nf-plan-change-feature { padding: 24px; border: 1px solid var(--nf-button-border); border-radius: var(--nf-radius); background: linear-gradient(135deg, var(--nf-surface), var(--nf-canvas)); box-shadow: inset 0 3px var(--nf-blue); }
.nf-plan-change-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.nf-plan-change-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.nf-plan-change-identity > div { min-width: 0; overflow-wrap: anywhere; }
.nf-plan-change-identity .nf-modal-state-icon { flex: none; }
.nf-plan-change-identity h3 { margin: 5px 0 0; color: var(--nf-navy); font-size: 26px; line-height: 1.2; letter-spacing: -.035em; }
.nf-plan-change-heading .nf-badge { flex: none; }
.nf-plan-change-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--nf-line); }
.nf-plan-change-price > span { color: var(--nf-muted); font-size: 13px; font-weight: 700; }
.nf-plan-change-price .nf-plan-price { margin: 0; }
.nf-plan-change-section h4 { margin: 0 0 14px; color: var(--nf-navy); font-size: var(--nf-text-sm); font-weight: 800; }
.nf-plan-change-capacity { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.nf-plan-change-capacity > div { min-width: 0; padding: 16px 18px; border: 1px solid var(--nf-line); border-radius: var(--nf-radius-sm); background: var(--nf-surface); }
.nf-plan-change-capacity dt { color: var(--nf-muted); font-size: 13px; line-height: 1.4; }
.nf-plan-change-capacity dd { margin: 8px 0 0; color: var(--nf-navy); font-size: 24px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nf-plan-change-notice { padding: 16px 18px; border-left: 3px solid var(--nf-teal); border-radius: 0 var(--nf-radius-sm) var(--nf-radius-sm) 0; background: var(--nf-canvas); }
.nf-plan-change-notice strong { display: block; color: var(--nf-navy); font-size: 13px; font-weight: 800; }
.nf-plan-change-notice p { margin: 6px 0 0; color: var(--nf-muted); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
@media (max-width: 520px) {
    .nf-plan-change-feature { padding: 18px; }
    .nf-plan-change-identity .nf-modal-state-icon { width: 48px; height: 48px; font-size: 24px; }
    .nf-plan-change-identity h3 { font-size: 23px; }
    .nf-plan-change-price { align-items: flex-start; flex-direction: column; }
    .nf-plan-change-capacity { gap: 10px; }
    .nf-plan-change-capacity > div { padding: 14px; }
    .nf-plan-change-capacity dd { font-size: 22px; }
}
.nf-modal-state[data-change-state="loading"] .nf-modal-state-icon { animation: nf-data-state-spin 1.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { .nf-modal-state[data-change-state="loading"] .nf-modal-state-icon { animation: none; } }
html.nf-modal-open { overflow: hidden; }
@media (max-width: 760px) {
    .nf-modal-header, .nf-modal-header-compact { padding: 16px; }
    .nf-modal-header h2, .nf-modal-header-compact h2 { font-size: 20px; }
    .nf-modal-body, .nf-modal-body-compact, .nf-modal-footer { padding: 16px; }
    .nf-plan-current { align-items: stretch; flex-direction: column; gap: 8px; padding: 24px; }
    .nf-plan-current-value { flex-basis: auto; width: 100%; }
    .nf-plan-current-value .button { width: 100%; }
}
@media (max-width: 420px) {
    .nf-plan-current .nf-plan-capacity { grid-template-columns: 1fr; }
    .nf-modal-header-compact, .nf-modal-body-compact, .nf-modal-footer-compact { padding: 16px; }
    .nf-modal-footer-compact { flex-direction: column-reverse; align-items: stretch; }
}

/* Ações e paginação das listagens demonstrativas. */
.nf-settings-row-actions { justify-content: flex-start; }
.nf-settings-table th:last-child, .nf-settings-table td:last-child { text-align: left; }
.nf-pagination { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 24px; margin-top: 16px; border-top: 1px solid var(--nf-line); font-size: var(--nf-text-sm); }
.nf-pagination > span { color: var(--nf-muted); }
.nf-pagination-controls, .nf-pagination [data-page-numbers] { display: flex; flex-wrap: wrap; gap: 6px; }
.nf-pagination button { min-width: 40px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--nf-line); border-radius: var(--nf-radius-sm); background: var(--nf-surface); color: var(--nf-ink); font-size: 14px; }
.nf-pagination button[aria-current="page"] { border-color: var(--nf-blue); background: #eef4ff; color: var(--nf-blue); font-weight: 700; }
.nf-pagination button:disabled { opacity: .45; cursor: default; }
@media (max-width: 760px) {
    .nf-settings-row-actions, .nf-settings-table .nf-settings-row-actions { flex-direction: column; align-items: flex-start; gap: 4px; }
    .nf-settings-row-actions .nf-settings-text-action { min-height: 44px; }
    .nf-settings-table td:last-child { text-align: left; }
    .nf-pagination { align-items: flex-start; flex-direction: column; }
}

/* A coluna de ações ocupa apenas a largura necessária no desktop. */
@media (min-width: 761px) {
    .nf-settings-table .nf-table-actions-heading { width: 1%; min-width: 100px; }
    .nf-settings-table td:last-child { width: 1%; }
    .nf-settings-table .nf-settings-row-actions { flex-wrap: nowrap; }
    .nf-settings-table .nf-settings-text-action { white-space: nowrap; }
}

/* Apenas a paginação separa o final da página de registros dos controles. */

.nf-settings-table tbody tr.nf-pagination-last,
.nf-settings-table tbody tr.nf-pagination-last > td {
    border-bottom: 0;
}

/* Integrações: altura mínima e centralização do estado informativo de Integrações Nativas */
.nf-integracoes-empty {
    min-height: 380px;
    justify-content: center;
}

/* Relatórios: grid e cards dos relatórios disponíveis */
.nf-reports-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nf-space-5);
    align-items: stretch;
}

.nf-report-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: var(--nf-space-5);
    overflow-wrap: anywhere;
}

.nf-report-card .nf-settings-row-icon {
    margin-bottom: var(--nf-space-4);
}

.nf-report-card h3 {
    margin: 0 0 var(--nf-space-2);
    color: var(--nf-navy);
}

.nf-report-card p {
    margin: 0;
    font-size: var(--nf-text-sm);
    line-height: 1.5;
}

.nf-report-card-action {
    margin-top: auto;
    padding-top: var(--nf-space-5);
}

@media (max-width: 760px) {
    .nf-reports-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Submenu de navegação com links ativos */
a.nf-submenu-link {
    cursor: pointer;
    text-decoration: none;
}
a.nf-submenu-link:hover {
    color: white;
}
a.nf-submenu-link.is-active {
    color: white;
    font-weight: 700;
}

/* Clientes: barra de busca e filtros */
.nf-client-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 24px;
}
.nf-client-filter-company {
    flex: 1 1 300px;
    min-width: 260px;
}
.nf-client-search {
    flex: 1 1 280px;
    min-width: 240px;
}
.nf-client-filter-item {
    flex: 0 1 180px;
    min-width: 150px;
}
@media (max-width: 760px) {
    .nf-client-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .nf-client-filter-company,
    .nf-client-search,
    .nf-client-filter-item {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* Clientes: seletor de tipo de pessoa */
.nf-client-type-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
}

.nf-dialog-context {
    padding: 12px 16px;
    margin-bottom: 20px;
    background: var(--nf-canvas);
    border: 1px solid var(--nf-line);
    border-radius: var(--nf-radius-sm);
}
.nf-dialog-context .eyebrow {
    font-size: 10px;
    margin-bottom: 4px;
}
.nf-dialog-context p {
    margin: 0;
    font-size: var(--nf-text-sm);
}

/* Clientes: separador de blocos dentro da aba de configurações */
.nf-settings-section-divider {
    border-top: 1px solid var(--nf-line);
    padding-top: var(--nf-space-6);
    margin-top: var(--nf-space-6);
}

/* Obrigações / Acompanhamento: grid e cards de indicadores */
.nf-indicators-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--nf-space-4);
    margin-bottom: var(--nf-space-5);
}

/* MEI / Receitas mensais: três indicadores distribuídos na largura do painel */
@media (min-width: 861px) {
    [data-receitas-mei] > .nf-indicators-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.nf-indicator-card {
    display: flex;
    flex-direction: column;
    gap: var(--nf-space-1);
    padding: var(--nf-space-4) var(--nf-space-5);
    background: var(--nf-canvas);
    border: 1px solid var(--nf-line);
    border-radius: var(--nf-radius-sm);
}

.nf-indicator-label {
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nf-muted);
}

.nf-indicator-value {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--nf-navy);
}

@media (max-width: 860px) {
    .nf-indicators-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .nf-indicators-grid {
        grid-template-columns: 1fr;
    }
}

/* Obrigações / Acompanhamento: lista de detalhes no modal */
.nf-tracking-dialog {
    width: min(680px, calc(100% - 32px));
    max-width: 680px;
}

.nf-tracking-detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nf-space-4) var(--nf-space-5);
    margin: 0;
    padding: 0;
}

.nf-tracking-detail-item {
    display: flex;
    flex-direction: column;
    gap: var(--nf-space-1);
}

.nf-tracking-detail-item dt {
    font-size: 13px;
    font-weight: 650;
    color: var(--nf-muted);
}

.nf-tracking-detail-item dd {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--nf-ink);
}

@media (max-width: 560px) {
    .nf-tracking-detail-list {
        grid-template-columns: 1fr;
        gap: var(--nf-space-3);
    }
}

/* Obrigações / Acompanhamento / Certificados: variantes de badges de situação */
.nf-badge[data-status="Vencido"],
.nf-badge[data-status="Vencida"],
.nf-badge[data-status="Irregular"] {
    color: var(--nf-error);
    background: var(--nf-error-bg);
    border-color: #f4cbd1;
}

.nf-badge[data-status="Não cadastrado"],
.nf-badge[data-status="Em aberto"],
.nf-badge[data-status="A vencer"],
.nf-badge[data-status="Em andamento"],
.nf-badge[data-status="Sem parcelamento"] {
    color: #334155;
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.nf-badge[data-status="Vence em breve"] {
    color: #92400e;
    background: #fffbeb;
    border-color: #fde68a;
}

/* MEI: barra de seleção da empresa */
.nf-mei-company-bar {
    margin-bottom: var(--nf-space-4);
}

/* MEI: card de enquadramento fiscal na Visão Geral */
.nf-mei-company-card {
    padding: var(--nf-space-4) var(--nf-space-5);
    margin-bottom: var(--nf-space-5);
}

.nf-mei-company-card .eyebrow {
    font-size: 11px;
    letter-spacing: .12em;
    margin-bottom: var(--nf-space-3);
}

.nf-mei-fiscal-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--nf-space-3) var(--nf-space-5);
    margin: 0;
    padding: 0;
}

.nf-mei-fiscal-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--nf-space-1);
    min-width: 0;
}

.nf-mei-fiscal-item dt {
    font-size: 13px;
    font-weight: 650;
    color: var(--nf-muted);
    line-height: 1.4;
}

.nf-mei-fiscal-item dd {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--nf-ink);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.nf-mei-fiscal-item .nf-badge {
    padding: 4px 10px;
    font-size: 12px;
}

@media (max-width: 960px) {
    .nf-mei-fiscal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--nf-space-4);
    }
}

@media (max-width: 520px) {
    .nf-mei-fiscal-grid {
        grid-template-columns: 1fr;
        gap: var(--nf-space-3);
    }
}

/* MEI: resumo operacional dos indicadores na Visão Geral */
.nf-indicator-card .nf-indicator-meta {
    display: flex;
    flex-direction: column;
    gap: var(--nf-space-1);
    margin: var(--nf-space-2) 0 var(--nf-space-3);
    font-size: var(--nf-text-sm);
    color: var(--nf-muted);
}

.nf-indicator-card .nf-indicator-meta strong {
    color: var(--nf-ink);
}

.nf-indicator-card .nf-badge {
    align-self: flex-start;
}

/* Documentos: tipos e badges de situação */
.nf-doc-type {
    font-weight: 700;
    color: var(--nf-navy);
}

.nf-badge[data-status="Cancelada"],
.nf-badge[data-status="Rejeitada"] {
    color: var(--nf-error);
    background: var(--nf-error-bg);
    border-color: #f4cbd1;
}

.nf-badge[data-status="Processando"] {
    color: #334155;
    background: #f1f5f9;
    border-color: #cbd5e1;
}

/* Documentos: opções do modal de emissão */
.nf-doc-options {
    display: flex;
    flex-direction: column;
    gap: var(--nf-space-3);
}

.nf-doc-option {
    display: flex;
    align-items: center;
    gap: var(--nf-space-4);
    padding: var(--nf-space-4) var(--nf-space-5);
    background: var(--nf-surface);
    border: 1px solid var(--nf-line);
    border-radius: var(--nf-radius-md);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    text-align: left;
    width: 100%;
}

.nf-doc-option:hover {
    border-color: var(--nf-blue);
    background: var(--nf-canvas);
    outline: none;
}

.nf-doc-option-text {
    flex: 1;
    min-width: 0;
}

.nf-doc-option-text strong {
    display: block;
    font-size: 15px;
    color: var(--nf-navy);
}

.nf-doc-option-text span {
    display: block;
    font-size: var(--nf-text-sm);
    color: var(--nf-muted);
    margin-top: 2px;
}

.nf-doc-option-arrow {
    width: 20px;
    height: 20px;
    color: var(--nf-muted);
    flex: none;
    transition: transform .15s ease, color .15s ease;
}

.nf-doc-option:hover .nf-doc-option-arrow {
    color: var(--nf-blue);
    transform: translateX(3px);
}

/* Visão Geral: espaçamento entre seções e blocos */
.nf-overview-section {
    margin-bottom: var(--nf-space-6);
}

.nf-heading-actions {
    display: flex;
    align-items: center;
    gap: var(--nf-space-4);
    flex-wrap: wrap;
}

/* Dashboard / Visão Geral: Cards de Totais com Fundo Branco */
.nf-overview-indicators .nf-indicator-card,
.nf-tab-panel > .nf-indicators-grid .nf-indicator-card {
    background: var(--nf-surface);
}

/* Dashboard / Visão Geral: Grids e Cards de Gráficos */
.nf-dashboard-grid {
    display: grid;
    gap: var(--nf-space-5);
    margin-bottom: var(--nf-space-5);
}

.nf-dashboard-grid-2col {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr);
    gap: var(--nf-space-5);
    margin-bottom: var(--nf-space-5);
}

.nf-dashboard-grid-equal {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nf-space-5);
    margin-bottom: var(--nf-space-5);
}

.nf-chart-card {
    padding: var(--nf-space-5);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.nf-chart-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--nf-space-4);
    margin-bottom: var(--nf-space-4);
}

.nf-chart-header h3 {
    font-size: 17px;
    font-weight: 750;
    color: var(--nf-navy);
    letter-spacing: -.02em;
    margin: 0;
}

.nf-chart-header p {
    font-size: 13px;
    color: var(--nf-muted);
    margin: 4px 0 0;
}

.nf-chart-badge {
    font-size: 12px;
    font-weight: 700;
    color: var(--nf-muted);
    background: var(--nf-canvas);
    border: 1px solid var(--nf-line);
    border-radius: var(--nf-radius-sm);
    padding: 4px 10px;
    white-space: nowrap;
}

.nf-chart-container {
    width: 100%;
    min-width: 0;
}

.nf-chart-container svg,
.highcharts-container svg {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    flex: auto !important;
    stroke: none;
    stroke-width: 0;
}

.highcharts-root text {
    stroke: none !important;
    stroke-width: 0 !important;
}

.highcharts-background,
.highcharts-plot-background {
    stroke: none !important;
    stroke-width: 0 !important;
}

/* Badges informativos e de movimento de documentos. */
.nf-badge-info,
.nf-badge[data-status="Emitido"] {
    color: var(--nf-blue);
    background: #eff6ff;
    border-color: #bfdbfe;
}

.nf-badge[data-status="Recebido"] {
    color: var(--nf-navy);
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.nf-table-meta-text {
    color: var(--nf-muted);
    font-size: 13px;
}

@media (max-width: 992px) {
    .nf-dashboard-grid-2col,
    .nf-dashboard-grid-equal {
        grid-template-columns: 1fr;
    }
}

/* Páginas de erro (403 e 404) */
.nf-error-body {
    background: var(--nf-canvas);
    min-height: 100vh;
}

.nf-error-layout {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(24px, 4vw, 48px) 16px;
    box-sizing: border-box;
}

.nf-error-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 440px;
    padding: 44px 36px;
    box-sizing: border-box;
}

.nf-error-brand {
    margin-bottom: 28px;
}

.nf-error-logo {
    display: block;
    width: 152px;
    height: auto;
    object-fit: contain;
}

.nf-error-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    color: var(--nf-blue);
    margin-bottom: 16px;
}

.nf-error-icon svg {
    width: 24px;
    height: 24px;
}

.nf-error-code {
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--nf-navy);
    margin-bottom: 12px;
}

.nf-error-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.25;
    color: var(--nf-navy);
    margin: 0 0 10px 0;
}

.nf-error-message {
    color: var(--nf-muted);
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 28px 0;
    max-width: 32ch;
}

.nf-error-button {
    min-width: 180px;
}

@media (max-width: 480px) {
    .nf-error-card {
        padding: 32px 20px;
        border-radius: var(--nf-radius);
    }

    .nf-error-code {
        font-size: 44px;
    }

    .nf-error-title {
        font-size: 20px;
    }

    .nf-error-message {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .nf-error-button {
        width: 100%;
    }
}

/* Tabela canônica: visual de Usuários e rolagem horizontal em qualquer viewport. */
.nf-table-scroll { min-height: 500px; max-width: 100%; -webkit-overflow-scrolling: touch; }
.nf-settings-table.nf-table-horizontal { display: table; min-width: 960px; }
.nf-settings-table.nf-table-horizontal thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: table-header-group; }
.nf-settings-table.nf-table-horizontal tbody { display: table-row-group; }
.nf-settings-table.nf-table-horizontal tr { display: table-row; padding: 0; }
.nf-settings-table.nf-table-horizontal td { display: table-cell; padding: 16px 12px; border-bottom: 1px solid var(--nf-line); }
.nf-settings-table.nf-table-horizontal td:first-child { padding-left: 0; }
.nf-settings-table.nf-table-horizontal td:last-child { padding-right: 0; }
.nf-settings-table.nf-table-horizontal td::before { content: none; }
.nf-settings-table.nf-table-horizontal tbody tr:last-child td { border-bottom: 0; }
.nf-table-horizontal th, .nf-table-horizontal td { white-space: nowrap; }
.nf-table-text { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-settings-table .nf-table-icon-actions { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 16px; }
.nf-table-icon-actions .nf-settings-text-action { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 0; background: none; }
.nf-table-icon-actions .nf-settings-text-action:hover { text-decoration: none; }
.nf-table-icon-actions .nf-settings-text-action:hover:not(:disabled) { color: var(--nf-teal); }
.nf-table-icon-actions .nf-settings-text-action:disabled { opacity: .45; cursor: default; }
.nf-table-icon-actions .material-symbols-outlined { font-size: 22px; }
.nf-settings-table .nf-table-state { height: 420px; text-align: center; }
.nf-table-state > div { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--nf-muted); text-align: center; }
.nf-table-state .material-symbols-outlined { font-size: 40px; color: var(--nf-blue); }
.nf-table-horizontal .nf-badge[data-status="Inativa"] { color: var(--nf-muted); background: var(--nf-canvas); border-color: var(--nf-line); }

/* O formulário usa os mesmos blocos do modal existente, com rolagem no corpo. */
.nf-modal-form { display: flex; flex-direction: column; min-height: 0; max-height: calc(100svh - 32px); }

/* As dimensões dos modais compartilhados acompanham a largura disponível. */
.nf-modal-dynamic { min-width: min(800px, calc(100% - 32px)); max-width: calc(100% - 32px); }
.nf-modal-processing { width: min(500px, calc(100% - 32px)); min-width: min(500px, calc(100% - 32px)); max-width: calc(100% - 32px); }

/* Consulta de registros: identidade e dados agrupados no modal compartilhado. */
.nf-record-identity { padding: var(--nf-space-5); border: 1px solid var(--nf-line); border-left: 3px solid var(--nf-teal); border-radius: var(--nf-radius); background: linear-gradient(120deg, var(--nf-canvas), var(--nf-surface)); }
.nf-record-identity-top { display: flex; align-items: center; justify-content: space-between; gap: var(--nf-space-4); margin-bottom: var(--nf-space-5); }
.nf-record-identity-top > div { min-width: 0; }
.nf-record-detail-label, .nf-record-detail dt { color: var(--nf-muted); font-size: 12px; font-weight: 650; }
.nf-record-document { margin: 0; color: var(--nf-navy); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; overflow-wrap: anywhere; }
.nf-record-identity h3 { margin: var(--nf-space-1) 0 var(--nf-space-4); color: var(--nf-navy); font-size: 20px; line-height: 1.4; font-weight: 800; overflow-wrap: anywhere; }
.nf-record-identity-name { margin: 0; }
.nf-record-details .nf-badge[data-status="Inativa"] { color: var(--nf-muted); background: var(--nf-canvas); border-color: var(--nf-line); }
.nf-record-section { padding-top: var(--nf-space-5); }
.nf-record-section + .nf-record-section { margin-top: var(--nf-space-5); border-top: 1px solid var(--nf-line); }
.nf-record-section h3 { display: flex; align-items: center; gap: var(--nf-space-3); margin: 0 0 var(--nf-space-4); color: var(--nf-navy); font-size: 15px; font-weight: 800; }
.nf-record-section h3 span { color: var(--nf-blue); font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.nf-record-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nf-space-4) var(--nf-space-5); margin: 0; }
.nf-record-address-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nf-record-detail { min-width: 0; }
.nf-record-detail-wide { grid-column: 1 / -1; }
.nf-record-detail dd { margin: var(--nf-space-1) 0 0; color: var(--nf-ink); font-size: 14px; font-weight: 650; line-height: 1.6; overflow-wrap: anywhere; }
.nf-record-detail dd.nf-record-detail-empty { color: var(--nf-muted); font-weight: 400; }
.nf-record-details-footer { align-items: center; justify-content: space-between; }
.nf-record-details-footer p { margin: 0; color: var(--nf-muted); font-size: 12px; }
.nf-record-details-footer strong { display: block; color: var(--nf-ink); font-size: 13px; font-weight: 700; }
@media (max-width: 760px) {
    .nf-record-identity { padding: var(--nf-space-4); }
    .nf-record-identity-top { align-items: flex-start; flex-wrap: wrap; margin-bottom: var(--nf-space-4); }
    .nf-record-identity h3 { font-size: 19px; }
    .nf-record-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nf-space-4); }
    .nf-record-contact-grid { grid-template-columns: minmax(0, 1fr); }
    .nf-record-details-footer .button { flex: none; }
}

/* Confirmação de cópia exclusiva do modal de credenciais de API. */
.nf-api-copy-feedback:not([hidden]) { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 16px 18px; border: 1px solid var(--nf-teal); border-left-width: 3px; border-radius: var(--nf-radius); color: var(--nf-success); background: linear-gradient(120deg, var(--nf-success-bg), var(--nf-surface)); }
.nf-api-copy-feedback > .material-symbols-outlined { flex: none; font-size: 28px; }
.nf-api-copy-feedback > div { min-width: 0; flex: 1; text-align: center; }
.nf-api-copy-feedback strong { display: block; font-size: var(--nf-text-sm); font-weight: 800; }
.nf-api-copy-feedback p { margin-top: 4px; color: var(--nf-muted); font-size: 12px; line-height: 1.6; }
.nf-api-copy-feedback[data-estado="manual"] { border-color: var(--nf-blue); color: var(--nf-blue); background: var(--nf-canvas); }

/* Orientação de guarda da chave: reutiliza o feedback de credenciais. */
.nf-api-key-notice:not([hidden]) {
    align-items: flex-start;
    margin: 0 0 20px;
    padding: 20px;
}

.nf-api-key-notice > .material-symbols-outlined {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--nf-line);
    border-radius: var(--nf-radius-sm);
    background: var(--nf-surface);
    font-size: 24px;
}

.nf-api-key-notice p {
    font-size: 14px;
    line-height: 1.55;
}

/* Confirmações de ações: componente compartilhado pelos recursos da plataforma. */
.nf-confirmation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 32px 24px;
    text-align: center;
    background: radial-gradient(ellipse at 50% 0, rgb(37 99 235 / 5%), transparent 65%);
}

.nf-confirmation-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border: 1px solid rgb(37 99 235 / 15%);
    border-radius: 50%;
    color: var(--nf-blue);
    background: linear-gradient(135deg, #eff6ff, #e8faf5);
    box-shadow: 0 0 0 8px rgb(37 99 235 / 3%);
}

.nf-confirmation-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nf-confirmation-icon circle {
    fill: currentColor;
    stroke: none;
}

.nf-confirmation h3 {
    margin: 0;
    color: var(--nf-navy);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.35;
}

.nf-confirmation-description {
    max-width: 56ch;
    margin: 0;
    color: var(--nf-muted);
    font-size: 16px;
    line-height: 1.75;
}

.nf-modal-confirmation .nf-modal-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 168px));
    justify-content: center;
    gap: 16px;
    background: var(--nf-canvas);
}

.nf-modal-confirmation .nf-modal-footer .button {
    width: 100%;
    min-width: 0;
}

@media (max-width: 760px) {
    .nf-confirmation {
        gap: 20px;
        padding: 24px 16px;
    }

    .nf-confirmation-icon {
        width: 44px;
        height: 44px;
    }

    .nf-confirmation h3 {
        font-size: 22px;
    }

    .nf-modal-confirmation .nf-modal-footer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

/* Busca, filtros e ação principal dentro do painel das tabelas estáticas. */
.nf-client-filters.nf-table-toolbar {
    flex-direction: row;
    align-items: flex-end;
}

.nf-table-toolbar .nf-client-filter-item {
    flex: 1 1 180px;
    min-width: min(100%, 180px);
}

.nf-table-toolbar .nf-client-search {
    flex: 2 1 240px;
    min-width: min(100%, 240px);
}

.nf-table-toolbar > .button {
    flex: 1 1 220px;
    min-width: min(100%, 220px);
}

/* Seleção compacta de um único certificado A1 no formulário compartilhado. */
.nf-certificate-upload {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 20px;
    border: 1px solid #dce3ec;
    border-radius: var(--nf-radius);
    background: linear-gradient(135deg, #f8fbff, var(--nf-surface));
    transition: border-color .18s, box-shadow .18s;
}

.nf-certificate-upload > input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.nf-certificate-upload:hover {
    border-color: #acbbcd;
}

.nf-certificate-upload:focus-within {
    border-color: var(--nf-blue);
    box-shadow: 0 0 0 4px rgb(37 99 235 / 8%);
}

.nf-certificate-upload-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 48px;
    border: 1px solid #bfdbfe;
    border-radius: var(--nf-radius-sm);
    color: var(--nf-blue);
    background: #eff6ff;
}

.nf-certificate-upload-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nf-certificate-upload-info {
    display: grid;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.nf-certificate-upload-info strong {
    overflow: hidden;
    color: var(--nf-ink);
    font-size: 14px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nf-certificate-upload-info > span {
    color: var(--nf-muted);
    font-size: 12px;
    line-height: 1.5;
}

.nf-certificate-upload-action {
    flex: none;
    color: var(--nf-blue);
    font-size: 13px;
    font-weight: 750;
}

.nf-certificate-upload[data-arquivo-selecionado="true"] {
    border-color: #bce8dd;
    background: linear-gradient(135deg, #f0faf7, var(--nf-surface));
}

.nf-certificate-upload[data-arquivo-selecionado="true"] .nf-certificate-upload-icon {
    color: var(--nf-success);
    border-color: #bce8dd;
    background: var(--nf-success-bg);
}

@media (max-width: 520px) {
    .nf-certificate-upload {
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px;
    }

    .nf-certificate-upload-info {
        flex-basis: calc(100% - 56px);
    }

    .nf-certificate-upload-action {
        margin-left: 56px;
    }
}

/* Ações principais compartilham largura no desktop e os ícones do Google Fonts. */
.nf-button-action > .material-symbols-outlined {
    flex: none;
    font-size: 20px;
    line-height: 1;
}

@media (min-width: 761px) {
    .button.nf-button-action {
        flex: 0 0 160px;
        width: 160px;
        min-width: 160px;
    }
}

/* Visões gerais de obrigações: componentes compartilhados com o MEI. */
.nf-obligations-overview {
    box-shadow: none;
    --nf-overview-accent: var(--nf-blue);
    --nf-overview-tint: color-mix(in srgb, var(--nf-blue) 5%, var(--nf-surface));
}

.nf-obligations-overview .nf-mei-company-bar {
    margin-bottom: 16px;
}

.nf-obligations-overview .nf-mei-company-card {
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    border-color: var(--nf-line);
    border-left: 3px solid var(--nf-teal);
    background: var(--nf-surface);
}

.nf-obligations-overview .nf-mei-company-card > .nf-settings-panel-heading {
    justify-content: flex-start;
    align-items: center;
    gap: var(--nf-space-4);
    margin-bottom: var(--nf-space-3);
}

.nf-obligations-overview .nf-mei-company-card h2 {
    margin: 0;
    font-weight: 750;
    line-height: 1.3;
}

.nf-obligations-overview .nf-mei-fiscal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding-top: var(--nf-space-3);
    border-top: 1px solid color-mix(in srgb, var(--nf-blue) 10%, var(--nf-line));
}

.nf-obligations-overview[data-visao-geral-simples-nacional] .nf-mei-fiscal-grid {
    display: flex;
    justify-content: space-between;
}

.nf-obligations-overview .nf-mei-fiscal-item dt {
    font-size: 12px;
    font-weight: 500;
}

.nf-obligations-overview .nf-mei-fiscal-item dd {
    font-size: 14px;
    font-weight: 550;
}

.nf-obligations-overview-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    color: var(--nf-overview-accent);
    border: 1px solid color-mix(in srgb, var(--nf-overview-accent) 12%, var(--nf-line));
    border-radius: var(--nf-radius-sm);
    background: linear-gradient(135deg, var(--nf-surface), var(--nf-overview-tint));
}

.nf-obligations-overview-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nf-obligations-overview > .nf-indicators-grid {
    gap: 16px;
    margin-bottom: 16px;
}

.nf-obligations-overview > .nf-indicators-grid .nf-indicator-card {
    position: relative;
    gap: var(--nf-space-2);
    padding: var(--nf-space-4);
    background: var(--nf-surface);
}

.nf-obligations-overview > .nf-indicators-grid .nf-obligations-overview-icon {
    position: absolute;
    top: var(--nf-space-4);
    right: var(--nf-space-4);
    width: 30px;
    height: 30px;
}

.nf-obligations-overview > .nf-indicators-grid .nf-obligations-overview-icon,
.nf-obligations-overview-operation .nf-obligations-overview-icon,
.nf-obligations-overview .nf-mei-company-card .nf-obligations-overview-icon {
    color: var(--nf-blue);
    border-color: var(--nf-line);
    background: var(--nf-surface);
}

.nf-obligations-overview > .nf-indicators-grid .nf-indicator-label {
    padding-right: 38px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
}

.nf-obligations-overview > .nf-indicators-grid .nf-indicator-value {
    color: var(--nf-navy);
    font-size: 36px;
    font-weight: 750;
    letter-spacing: -.05em;
    overflow-wrap: anywhere;
}

.nf-obligations-overview .nf-indicator-meta {
    font-size: 13px;
    line-height: 1.6;
}

.nf-obligations-overview > .nf-indicators-grid .nf-indicator-meta {
    margin: 0;
}

.nf-obligations-overview-tables {
    align-items: start;
    gap: 16px;
}

.nf-obligations-overview-operation {
    min-width: 0;
    padding: var(--nf-space-4);
    border: 1px solid var(--nf-line);
    border-radius: var(--nf-radius);
    background: var(--nf-surface);
}

.nf-obligations-overview-operation .nf-settings-panel-heading {
    align-items: center;
    justify-content: flex-start;
    gap: var(--nf-space-3);
    margin-bottom: var(--nf-space-4);
}

.nf-obligations-overview-operation h3 {
    margin: 0;
    font-weight: 700;
}

.nf-obligations-overview-operation .nf-settings-panel-heading p {
    margin-top: var(--nf-space-1);
    font-size: 13px;
    line-height: 1.5;
}

/* Mesma área reservada para três registros, estado vazio ou erro. */
.nf-obligations-overview-operation .nf-table-scroll {
    container-type: inline-size;
    height: 240px;
    min-height: 240px;
}

.nf-obligations-overview-operation .nf-settings-table thead tr {
    height: 44px;
}

.nf-obligations-overview-operation .nf-settings-table tbody tr {
    height: 60px;
}

.nf-obligations-overview-operation .nf-settings-table .nf-table-state {
    height: 180px;
}

/* Centralizar o aviso na largura visível, inclusive na rolagem mobile. */
.nf-obligations-overview-operation .nf-table-state > div {
    position: sticky;
    left: 0;
    width: 100cqw;
    padding: 0 var(--nf-space-3);
}

.nf-obligations-overview-operation .nf-table-state p {
    white-space: normal;
}

.nf-obligations-overview-tables .nf-settings-table.nf-table-horizontal {
    min-width: 640px;
    table-layout: fixed;
}

.nf-obligations-overview-operation .nf-table-text {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nf-obligations-overview-operation .nf-table-actions-heading {
    width: 60px;
    min-width: 60px;
}

.nf-obligations-overview-operation .nf-badge.nf-table-text {
    display: inline-block;
    box-sizing: border-box;
}

.nf-obligations-overview-operation .nf-settings-table th {
    padding-top: var(--nf-space-3);
    padding-bottom: var(--nf-space-3);
    font-size: 12px;
    font-weight: 550;
}

.nf-obligations-overview-operation .nf-settings-table td {
    font-size: 13px;
    padding-top: var(--nf-space-3);
    padding-bottom: var(--nf-space-3);
}

.nf-obligations-overview-operation .nf-badge {
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 600;
}

.nf-obligations-overview-operation .nf-settings-text-action {
    transition: color .15s ease;
}

.nf-obligations-overview-summary {
    margin-top: 16px;
    padding-top: 16px;
}

.nf-obligations-overview-summary .nf-settings-panel-heading {
    margin-bottom: var(--nf-space-4);
}

.nf-obligations-overview-summary .nf-settings-panel-heading p {
    font-size: 13px;
}

.nf-obligations-overview-summary .nf-indicators-grid {
    margin-bottom: 0;
}

.nf-obligations-overview-summary .nf-indicator-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr auto;
    gap: var(--nf-space-3);
    padding: var(--nf-space-4);
    background: linear-gradient(160deg, var(--nf-surface), var(--nf-canvas));
}

.nf-obligations-overview-summary .nf-obligations-overview-icon {
    grid-column: 2;
    grid-row: 1;
    width: 30px;
    height: 30px;
}

.nf-obligations-overview-summary .nf-indicator-label {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--nf-navy);
}

.nf-obligations-overview-summary .nf-indicator-meta {
    grid-column: 1 / -1;
    margin: 0;
}

.nf-obligations-overview-summary .nf-indicator-meta:last-child {
    padding-top: var(--nf-space-3);
    border-top: 1px solid var(--nf-line);
}

.nf-obligations-overview-row {
    gap: 16px;
    margin-top: 16px;
    align-items: stretch;
}

.nf-obligations-overview > .nf-indicators-grid + .nf-obligations-overview-row {
    margin-top: 0;
}

.nf-obligations-overview .nf-chart-container,
.nf-obligations-overview .nf-chart-card > .nf-data-state {
    height: 300px;
    min-height: 300px;
}

.nf-obligations-overview .nf-chart-card {
    box-shadow: none;
}

.nf-obligations-overview .nf-data-state p {
    color: var(--nf-muted);
    font-size: 13px;
    font-weight: 400;
}

.nf-obligations-overview .nf-data-state .material-symbols-outlined {
    color: var(--nf-blue);
    font-size: 40px;
}

@media (max-width: 860px) {
    .nf-obligations-overview-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1800px) {
    .nf-obligations-overview-tables {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 960px) {
    .nf-obligations-overview .nf-mei-fiscal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .nf-obligations-overview[data-visao-geral-simples-nacional] .nf-mei-fiscal-grid {
        flex-direction: column;
    }

    .nf-obligations-overview .nf-mei-company-card > .nf-settings-panel-heading,
    .nf-obligations-overview-operation .nf-settings-panel-heading {
        flex-direction: row;
        align-items: flex-start;
    }
}

@media (max-width: 520px) {
    .nf-obligations-overview .nf-mei-company-card {
        padding: var(--nf-space-4);
    }

    .nf-obligations-overview .nf-mei-fiscal-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}