:root {
    --nr-blue: #0035a2;
    --nr-blue-dark: #0035a2;
    --nr-yellow: #ffcc00;
    --nr-bg: #f4f8ff;
    --nr-text: #1b2330;
    --nr-border: #ffffff85;
    --nr-muted: #5c6f86;
    --header-background: #0035a2;
    --header-accent: #ffc400;
    --button-height: 38px;
    --button-min-width: 120px;
    --button-padding-x: 16px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16.5px;
    background: #f7f9fc;
    color: var(--nr-text);
    line-height: 1.45;
    overflow-x: hidden;
}

.container {
    width: min(1300px, 92%);
    margin: 0 auto;
}

.topbar {
    background: var(--header-background);
    border-bottom: 3px solid var(--header-accent);
    position: sticky; 
    top: 0;
    z-index: 45;
    padding: 10px 0px;
    box-shadow: 0 2px 6px rgba(12, 57, 152, 0.1);
}

.topbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.brand {
    text-decoration: none;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
}

.brand-logo {
    height: 22px;
    width: auto;
    display: block;
}

.menu {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.menu a {
    color: #e7eeff;
    text-decoration: none;
    font-weight: 600;
    padding: 5px 0px; 
}

.menu-dropdown {
    position: relative;
}

.menu-dropdown-toggle {
    border: 1px solid rgba(255, 255, 255, 0.34);
    background: transparent;
    color: #e7eeff; 
    padding: 7px 12px;
    margin-top: 0;
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: .01em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px; 
}

.menu-dropdown-toggle span[aria-hidden="true"] {
    opacity: .95;
}

.menu-dropdown-toggle .mdi {
    font-size: 17px;
    line-height: 1;
}

 
.menu-dropdown-toggle:active {
    transform: translateY(0);
}

.menu-dropdown-dot {
    font-size: 1.05rem;
    line-height: 1;
    transform: translateY(-1px);
}

.menu-dropdown-list {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 190px;
    max-height: 72vh;
    background: #fff;
    border: 1px solid var(--nr-border);
    border-radius: 5px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    padding: 6px;
    display: none;
    overflow-y: auto;
    z-index: 50;
}

.menu-dropdown.is-open .menu-dropdown-list {
    display: block;
}

.menu-dropdown-list a,
.menu-dropdown-action {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--nr-blue-dark);
    text-decoration: none;
    text-align: left;
    font-size: .9rem;
    font-weight: 600;
    border-radius: 7px;
    padding: 9px 10px;
    margin-top: 0;
    cursor: pointer;
}

.menu-group {
    padding: 4px 2px;
}

.menu-group + .menu-group {
    border-top: 1px solid #edf2fb;
    margin-top: 3px;
    padding-top: 8px;
}

.menu-group-title {
    margin: 0 0 4px;
    padding: 0 8px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6880a3;
    font-weight: 800;
}

.menu-subitem {
    padding-left: 18px !important;
}

.menu-dropdown-list a:hover,
.menu-dropdown-action:hover {
    background: #f5f9ff;
}

.menu-dropdown-action{
    color: rgb(124, 13, 13);
}

.hero {
    background: #fff;
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    padding: 26px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.hero h1 {
    font-size: 16px;
    text-transform: uppercase;
    margin: 0 0 10px;
    color: var(--nr-blue-dark);
    width: 100%;
}

.hero p {
    margin: 0; 
    width: 100%;
    margin-bottom: 10px;
}

.hero .hero-back-btn {
    margin: 0;
    display: inline-flex;
    align-items: center; 
    order: 10;
}

.hero .hero-back-btn .mdi {
    font-size: 18px;
    line-height: 1;
}

.hero > .btn,
.hero > a.btn,
.hero > button,
.hero > form {
    margin-top: 0;
    order: 11;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 22px 0 30px;
}

.login-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    align-items: center;
    gap: clamp(28px, 6vw, 92px);
    width: min(980px, 100%);
    margin: 0 auto;
}

.login-layout .hero,
.login-layout .login-panel {
    margin-top: 0;
}

.login-layout .hero {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #fff;
    text-align: left;
    gap: 0;
}

.login-layout .login-panel {
    width: 100%;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 16px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 24px 60px rgba(1, 15, 39, .28);
}

.login-layout .hero h1 {
    width: auto;
    max-width: 560px;
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 1.08;
    text-transform: none;
}

.login-layout .hero p {
    width: auto;
    max-width: 460px;
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 1.05rem;
    line-height: 1.55;
}

.login-panel form { display: grid; gap: 7px; }
.login-panel form > label { margin-top: 10px; color: #344054; font-size: .88rem; font-weight: 600; }
.login-panel form > input {
    min-height: 48px;
    width: 100%;
    border-color: #d0d5dd;
    border-radius: 9px;
    background: #fff;
}

.login-panel form > input:focus {
    border-color: var(--nr-blue);
    box-shadow: 0 0 0 3px rgba(0, 53, 162, .12);
    outline: 0;
}

.cf-turnstile{
    margin-top: 10px; 
}

.login-actions-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 10px;
}

.login-actions-row button {
    margin-top: 0;
    width: 100%;
    min-height: 48px;
    align-self: stretch;
    box-sizing: border-box;
}

.auth-page {
    min-height: 100vh;
    background-color: #071a3a;
    background-image:
        linear-gradient(90deg, rgba(3, 20, 58, .94) 0%, rgba(3, 26, 67, .82) 43%, rgba(3, 19, 43, .54) 100%),
        url("../images/sst-hero.png");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.auth-page .topbar {
    background: rgba(2, 20, 57, .62);
    border-bottom: 0;
    box-shadow: 0 4px 18px rgba(1, 11, 31, .16);
    backdrop-filter: blur(10px);
}

.auth-page .brand-logo {
    height: 30px;
}

.auth-page .whatsapp-support-button--header {
    font-size: 1.75rem;
}

.auth-page main.container {
    display: grid;
    align-items: center;
    width: min(1180px, calc(100% - 40px));
    min-height: calc(100vh - 67px);
    padding: 46px 0 58px;
}

.auth-page .login-actions-row button.btn-accent {
    border-color: var(--nr-yellow);
    background: var(--nr-yellow);
    color: #172033;
    font-weight: 800;
}

.auth-page .login-actions-row button.btn-accent:hover,
.auth-page .login-actions-row button.btn-accent:focus-visible {
    border-color: #e6b800;
    background: #e6b800;
    color: #172033;
    box-shadow: 0 8px 18px rgba(230, 184, 0, .22);
}

@media (max-width: 760px) {
    .auth-page main.container {
        width: min(100% - 28px, 520px);
        min-height: calc(100vh - 62px);
        padding: 34px 0 40px;
    }

    .auth-page .login-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .auth-page .login-layout .hero {
        text-align: center;
    }

    .auth-page .login-layout .hero h1,
    .auth-page .login-layout .hero p {
        margin-right: auto;
        margin-left: auto;
    }

    .auth-page .login-layout .login-panel {
        padding: 24px;
    }
}

.login-remember {
    margin: 4px 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    white-space: nowrap;
}

.login-panel .cf-turnstile {
    width: 100%;
    margin-top: 10px;
}

.login-panel .cf-turnstile iframe {
    width: 100% !important;
    max-width: 100% !important;
}

.hero-form-layout {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 20px;
    align-items: start;
    margin-top: 22px;
}

.hero-form-layout .hero,
.hero-form-layout .card {
    margin-top: 0 !important;
}

.card {
    background: #fff;
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 4px 20px rgba(8, 36, 73, 0.05);
}

.card h2,
.card h3 {
    margin-top: 0;
    font-size: 1rem;
}

/* Navegação modular em sidebar */
.topbar .menu { display: none; }
.sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 38px;
    margin: 0 8px 0 0;
    padding: 0;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 7px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 22px;
}
.header-menu-button {
    gap: 7px;
    width: auto;
    margin: 0;
    padding: 7px 12px;
    font-size: .88rem;
    font-weight: 700;
}
.header-menu-button span { font-size: .88rem; }
.app-sidebar {
    position: fixed;
    z-index: 60;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: min(370px, 92vw);
    padding: 0;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    border-left: 1px solid #e4e7ec;
    border-right: 0;
    box-shadow: -15px 0 45px rgba(0,0,0,.16);
    right: 0;
    left: auto;
    transform: translateX(105%);
    transition: transform .2s ease;
}
.sidebar-head { display:flex; align-items:center; justify-content:space-between; padding:22px 22px 15px; border-bottom:1px solid #eef1f5; color:#172033; }
.sidebar-head small { display:block; color:#98a2b3; font-size:.63rem; font-weight:900; letter-spacing:.12em; }
.sidebar-head h3 { margin:2px 0 0; color:var(--nr-blue-dark); font-size:1.1rem; letter-spacing:-.01em; }
.sidebar-close { display:grid; width:32px; height:32px; place-items:center; border:1px solid #e4e7ec; border-radius:8px; background:#fff; color:#667085; font-size:19px; cursor:pointer; }
.sidebar-close:hover { background:#f2f6ff; border-color:#c9d8f4; color:var(--nr-blue); }
.sidebar-nav { flex:1; overflow:auto; padding:10px 14px; scrollbar-width:thin; }
.sidebar-section { display:flex; align-items:center; justify-content:space-between; width:100%; margin:16px 0 5px; padding:0 9px; border:0; background:transparent; color:#98a2b3; font:inherit; font-size:.74rem; font-weight:800; letter-spacing:.1em; text-align:left; text-transform:uppercase; cursor:pointer; }
.sidebar-section::after { content:''; width:7px; height:7px; margin-right:3px; border-right:1.5px solid #98a2b3; border-bottom:1.5px solid #98a2b3; transform:rotate(225deg); transition:transform .2s ease, border-color .2s ease; }
.sidebar-section.is-collapsed::after { transform:rotate(45deg); }
.sidebar-section:hover,
.sidebar-section:focus-visible { color:var(--nr-blue); }
.sidebar-section:hover::after,
.sidebar-section:focus-visible::after { border-color:var(--nr-blue); }
.sidebar-link { display:flex; align-items:center; gap:11px; min-height:42px; margin:2px 0; padding:8px 10px; border:1px solid transparent; border-radius:8px; color:#475467; font-size:.96rem; font-weight:600; text-decoration:none; transition:background .15s ease, border-color .15s ease, color .15s ease; }
.sidebar-link[hidden] { display:none !important; }
.sidebar-link .mdi { width:20px; color:#667085; font-size:19px; text-align:center; }
.sidebar-link:hover { background:#f2f6ff; border-color:#e1eaf9; color:var(--nr-blue); }
.sidebar-link.is-active { background:#eaf1ff; border-color:#d7e4fb; color:var(--nr-blue); font-weight:700; }
.sidebar-link.is-active .mdi { color:var(--nr-blue); }
.sidebar-user { display:flex; align-items:center; gap:9px; margin:0; padding:15px 22px; border-top:1px solid #eef0f3; color:#4f5e76; font-size:.82rem; font-weight:700; }
.sidebar-user .mdi { color:var(--nr-blue); font-size:21px; }
.sidebar-user span, .sidebar-user small { display:block; }
.sidebar-user small { margin-top:3px; color:#98a2b3; font-size:.64rem; font-weight:500; }
.sidebar-logout { padding:0 22px 20px; }
.sidebar-logout button { display:flex; align-items:center; gap:11px; width:100%; padding:10px; border:1px solid #d7e4fb; border-radius:7px; background:transparent; color:var(--nr-blue); font:inherit; font-size:.96rem; font-weight:600; cursor:pointer; text-align:left; }
.sidebar-logout button:hover { background:#fff1f0; }
.sidebar-backdrop { display:none; }
body.sidebar-open .app-sidebar { transform:translateX(0); }
.app-sidebar ~ main.container { width:min(1300px, 92%); margin-left:auto; margin-right:auto; }
body.sidebar-open .sidebar-backdrop { display:block; position:fixed; inset:0; z-index:55; background:rgba(16,24,40,.35); }
@media (max-width: 900px) {
    .sidebar-toggle { display:inline-flex; }
    .app-sidebar { width:min(370px, 92vw); }
}

.integration-endpoints {
    display: grid;
    gap: 10px;
    margin: 16px 0;
    padding: 14px;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    background: #f8fbff;
}

.integration-endpoints small {
    display: block;
    margin-bottom: 5px;
    color: var(--nr-muted);
    font-weight: 800;
}

.integration-endpoints code {
    display: block;
    white-space: normal;
    word-break: break-all;
    color: var(--nr-blue-dark);
}

.integration-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.integration-card-head h3,
.integration-block-head h4 {
    margin: 0;
    color: var(--nr-blue-dark);
}

.integration-card-head p,
.integration-block-head p {
    margin: 4px 0 0;
    color: var(--nr-muted);
    font-size: .86rem;
}

.integration-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    background: #f8fbff;
    color: var(--nr-blue-dark);
    font-weight: 800;
}

.integration-switch input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--nr-blue);
}

.integration-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin: 6px 0 20px;
    padding: 14px 0 18px;
    border-bottom: 1px solid #dfe8f5;
}

.integration-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    max-width: 760px;
}

.integration-route > div {
    min-width: 0;
}

.integration-route small {
    display: block;
    color: var(--nr-muted);
    font-size: .75rem;
    font-weight: 800;
}

.integration-route b {
    display: block;
    margin-top: 3px;
    color: var(--nr-text);
    font-size: .92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.integration-route > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid #d7e1f0;
    border-radius: 8px;
    background: #f8fbff;
    color: var(--nr-blue);
}

.integration-health {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.integration-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 6px 9px;
    border: 1px solid #dfe8f5;
    border-radius: 999px;
    background: #fff;
    color: #4c5d76;
    font-size: .76rem;
    font-weight: 850;
    white-space: nowrap;
}

.integration-pill.is-ok {
    border-color: #b9dfc8;
    background: #eefbf3;
    color: #197246;
}

.integration-pill.is-pending {
    border-color: #f0d08e;
    background: #fff8e8;
    color: #9a5d00;
}

.integration-pill.is-off {
    border-color: #f2b8b5;
    background: #fff1f0;
    color: #b42318;
}

.integration-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.integration-block {
    padding: 18px 0;
    border-bottom: 1px solid #dfe8f5;
}

.integration-block:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.integration-block-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.integration-endpoints--rows {
    gap: 0;
    margin: 0;
    padding: 0;
    border: 1px solid #dfe8f5;
    background: #fff;
    overflow: hidden;
}

.integration-endpoint-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
}

.integration-endpoint-row + .integration-endpoint-row {
    border-top: 1px solid #dfe8f5;
}

.integration-endpoint-main {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.integration-endpoint-main > .mdi {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #eef4ff;
    color: var(--nr-blue);
    font-size: 18px;
}

.integration-endpoints--rows small {
    margin-bottom: 4px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.integration-endpoints--rows code {
    font-size: .84rem;
    line-height: 1.35;
}

.integration-copy {
    min-width: 88px;
    min-height: 38px;
}

.integration-credentials-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.integration-field label {
    margin-top: 0;
}

.integration-field small {
    display: block;
    margin-top: 6px;
    color: var(--nr-muted);
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.4;
}

.integration-field--wide {
    grid-column: 1 / -1;
}

.integration-check {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin: 0;
    min-height: 44px;
    padding: 11px 12px;
    border: 1px dashed #b9cff4;
    border-radius: 8px;
    background: #f8fbff;
    color: var(--nr-blue-dark);
    font-size: .86rem;
    font-weight: 800;
    cursor: pointer;
}

.integration-check input {
    width: 17px;
    height: 17px;
    accent-color: var(--nr-blue);
}

.integration-check span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.integration-check .mdi {
    color: var(--nr-blue);
    font-size: 18px;
}

@media (max-width: 860px) {
    .integration-card-head,
    .integration-overview {
        grid-template-columns: 1fr;
    }

    .integration-card-head {
        display: grid;
    }

    .integration-health {
        justify-content: flex-start;
    }

    .integration-route {
        grid-template-columns: 1fr;
    }

    .integration-route > span {
        width: 100%;
        height: 30px;
    }

    .integration-route > span .mdi {
        transform: rotate(90deg);
    }

    .integration-credentials-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .integration-endpoint-row {
        grid-template-columns: 1fr;
    }

    .integration-copy {
        width: 100%;
    }

    .integration-endpoint-main {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .integration-endpoint-main > .mdi {
        width: 30px;
        height: 30px;
    }
}

.app-home-hero {
    align-items: stretch;
    background: #ffffff;
    border: 1px solid var(--nr-border);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(8, 36, 73, 0.035);
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    margin-top: 18px;
    padding: 22px;
}

.app-home-hero h1 {
    color: var(--nr-blue-dark);
    font-size: clamp(0.8rem, 3.1vw, 3rem);
    line-height: 1.03;
    margin: 8px 0 12px;
}

.app-home-hero p {
    color: #425a78;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    max-width: 760px;
}

.app-home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.app-home-summary {
    background: #f8fafc;
    border: 1px solid var(--nr-border);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    padding: 14px;
}

.app-home-summary div {
    background: #fff;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    padding: 12px;
}

.app-home-summary strong {
    color: var(--nr-blue-dark);
    display: block;
    font-size: .94rem;
}

.app-home-summary span {
    color: #526984;
    display: block;
    font-size: .88rem;
    line-height: 1.4;
    margin-top: 3px;
}

.app-home-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 16px;
}

.app-home-panel {
    background: #fff;
    border: 1px solid var(--nr-border);
    border-radius: 8px;
    padding: 18px;
}

.app-home-panel .mdi {
    color: var(--nr-blue);
    font-size: 1.8rem;
}

.app-home-panel h2,
.app-home-rules h2 {
    color: var(--nr-blue-dark);
    font-size: 1.02rem;
    margin: 8px 0;
}

.app-home-panel p {
    color: #425a78;
    line-height: 1.55;
    margin: 0;
}

.app-home-rules {
    background: #fff;
    border: 1px solid var(--nr-border);
    border-radius: 8px;
    margin-top: 16px;
    padding: 18px;
}

.app-home-rule-list {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-home-rule-list div {
    align-items: flex-start;
    background: #f8fbff;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    display: grid;
    gap: 10px;
    grid-template-columns: 32px 1fr;
    padding: 12px;
}

.app-home-rule-list span {
    background: var(--nr-yellow);
    border-radius: 999px;
    color: #332700;
    display: grid;
    font-weight: 800;
    height: 32px;
    place-items: center;
    width: 32px;
}

.app-home-rule-list p {
    color: #425a78;
    line-height: 1.45;
    margin: 0;
}

.permission-list {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

.permission-option {
    background: #f8fbff;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    display: block;
    margin: 0;
    padding: 11px 12px;
}

.permission-option-title {
    align-items: center;
    color: var(--nr-blue-dark);
    display: flex;
    font-weight: 700;
    gap: 7px;
}

.permission-option-title input {
    margin: 0;
}

.permission-option small {
    color: #526984;
    display: block;
    font-weight: 400;
    line-height: 1.4;
    margin: 5px 0 0 25px;
}

.calc-flow {
    margin-top: 10px;
    display: grid;
    gap: 10px;
}

.calc-step {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px;
    border: 1px solid var(--nr-border);
    border-radius: 5px;
    background: #f8fbff;
}

.calc-step-num {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--nr-blue);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    display: grid;
    place-items: center;
}

.calc-step-title {
    margin: 0 0 3px;
    font-weight: 700;
    font-size: 0.92rem;
}

.calc-step-desc {
    margin: 0;
    color: #425a78;
    font-size: 0.88rem;
}

label {
    display: block;
    margin-top: 10px;
    margin-bottom: 4px;
    font-size: .92rem;
    font-weight: 600;
}

input,
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    font-size: .95rem;
    background: #fff;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgba(0, 71, 183, 0.25);
    border-color: #7ea5e8;
}

input[type="checkbox"] {
    width: auto;
    margin-right: 6px;
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
}

.inline-field {
    display: flex;
    flex-direction: column;
    flex: 1 1 180px;
    min-width: 160px;
}

.inline-field label {
    margin-top: 0;
}

.inline-field input,
.inline-field select,
.inline-field textarea {
    margin-top: 0;
}

.inline-actions {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.inline-form .btn,
.inline-form button {
    margin-top: 0;
}

button,
.btn {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    margin-top: 15px;
    border: 0;
    border-radius: 5px;
    padding: 0 var(--button-padding-x);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    background: var(--nr-blue);

    color: #fff;
    transition: background .2s ease, box-shadow .2s ease;
}

/* Home: compact spacing and restrained surfaces keep the dashboard easy to scan. */
.app-home-hero { gap: 18px; margin-top: 12px; padding: 22px; border-radius: 12px; box-shadow: 0 2px 10px rgba(8,36,73,.035); }
.app-home-hero p { font-size: 1rem; line-height: 1.5; }
.app-home-actions { gap: 8px; margin-top: 16px; }
.app-home-summary { gap: 8px; padding: 10px; border-radius: 10px; background: #f8fafc; }
.app-home-summary div { border-radius: 8px; padding: 10px 12px; }
.app-home-grid { gap: 12px; margin-top: 12px; }
.app-home-panel { border-radius: 10px; padding: 16px; }
.app-home-panel p { line-height: 1.5; }
.app-home-rules { border-radius: 10px; margin-top: 12px; padding: 16px; }
.app-home-rule-list { gap: 8px; }
.app-home-rule-list div { border-radius: 8px; padding: 10px; }

#payout-rules-title {
    font-size: 1.15rem;
}

.btn,
.btn-with-icon {
    height: var(--button-height);
    min-height: var(--button-height);
    min-width: var(--button-min-width);
    white-space: nowrap;
}

.btn-block {
    width: 100%;
}


.btn-compact {
    height: 30px;
    min-height: 30px;
    min-width: 88px;
    padding-inline: 12px;
}

.btn-secondary {
    background: var(--nr-blue);
    color: #fff;
    border: 1px solid var(--nr-blue);
}

.btn-accent {
    background: var(--nr-blue);
    color: #fff;
    border: 1px solid var(--nr-blue);
}

.btn-home-sale {
    background: var(--nr-yellow);
    border-color: var(--nr-yellow);
    color: #172033;
}

.btn-home-sale:hover,
.btn-home-sale:focus-visible {
    background: #e6b800;
    border-color: #e6b800;
    color: #172033;
}

.btn-danger {
    background: var(--nr-blue);
    color: #fff;
    border: 1px solid var(--nr-blue);
}

.btn.btn-back,
.btn.btn-back:hover,
.btn.btn-back:focus-visible {
    background: transparent;
    border: 0;
    color: var(--nr-blue);
    height: var(--button-height);
    min-height: var(--button-height);
    min-width: var(--button-min-width);
}

.btn.btn-back:hover,
.btn.btn-back:focus-visible {
    background: transparent;
    box-shadow: none;
    color: var(--nr-blue);
    text-decoration: underline;
}

.btn-secondary:hover,
.btn-accent:hover,
.btn-danger:hover {
    background: var(--nr-blue-dark);
    border-color: var(--nr-blue-dark);
}

.btn.btn-home-sale:hover,
.btn.btn-home-sale:focus-visible {
    background: #e6b800;
    border-color: #e6b800;
    color: #172033;
}

.btn-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-with-icon .mdi {
    font-size: 18px;
    line-height: 1;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.actions form {
    margin: 0;
}

.actions .btn,
.actions button {
    margin-top: 0;
}

.actions-icon {
    align-items: center;
}

.settings-card {
    width: min(960px, 100%);
}

.settings-form {
    display: grid;
    gap: 18px;
}

.settings-panel {
    border-top: 1px solid var(--nr-border);
    padding-top: 18px;
}

.settings-panel:first-child {
    border-top: 0;
    padding-top: 0;
}

.settings-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.settings-panel-head h3 {
    margin: 0 0 3px;
}

.settings-panel-head p {
    margin: 0;
    color: var(--nr-muted);
    font-size: .92rem;
}

.settings-panel-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
    background: #f2f6ff;
    color: var(--nr-blue-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.settings-panel-icon .mdi {
    font-size: 20px;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.settings-grid-compact {
    gap: 10px 12px;
}

.settings-field {
    min-width: 0;
}

.settings-field-full {
    margin-top: 12px;
}

.settings-field label,
.settings-subgroup label {
    margin-top: 0;
}

.settings-check {
    margin: 0;
}

.settings-subgroup {
    margin-top: 12px;
    padding-left: 28px;
}

.settings-stack {
    display: grid;
    gap: 14px;
}

.checkbox-group-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

/* Editar tipo de perfil */
.role-edit-page {
    width: min(1120px, 100%);
    margin: 22px auto 48px;
}

.role-edit-hero {
    display: grid;
    gap: 12px;
    margin-top: 0;
    padding: 8px 0 18px;
    border-bottom: 1px solid #d8dee8;
}

.role-edit-hero-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.role-edit-hero-top .hero-back-btn {
    margin: 0;
}

.role-edit-breadcrumb {
    color: var(--nr-muted);
    font-size: .78rem;
    font-weight: 700;
}

.role-edit-breadcrumb .mdi {
    margin: 0 4px;
    color: #667085;
}

.role-edit-hero-content {
    display: grid;
    gap: 6px;
}

.role-edit-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #667085;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.role-edit-eyebrow .mdi {
    display: none;
}

.role-edit-hero h1 {
    width: auto;
    margin: 0;
    font-size: 1.65rem;
    text-transform: none;
}

.role-edit-hero p {
    width: auto;
    max-width: 650px;
    margin: 0;
    color: var(--nr-muted);
}

.role-edit-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.role-edit-hero-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #41536a;
    font-size: .8rem;
    font-weight: 700;
}

.role-edit-profile-name {
    color: #344054;
}

.role-edit-profile-name::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 14px;
    margin-left: 14px;
    vertical-align: -2px;
    background: #d8dee8;
}

.role-edit-hero-meta .mdi {
    color: #667085;
}

.role-edit-status.is-active {
    color: #147342;
}

.role-edit-status.is-active .mdi {
    color: #22a05a;
}

.role-edit-status.is-inactive {
    color: #8a4b0f;
}

.role-edit-status.is-inactive .mdi {
    color: #d98b19;
}

.role-edit-card {
    width: 100%;
    max-width: none;
    margin-top: 16px;
    padding: 0;
    overflow: hidden;
}

.role-edit-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px 18px;
    border-bottom: 1px solid #e5ebf3;
}

.role-edit-card-kicker {
    color: #667085;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.role-edit-card-head h2 {
    margin: 4px 0;
    font-size: 1.25rem;
}

.role-edit-card-head p {
    margin: 0;
    color: var(--nr-muted);
    font-size: .9rem;
}

.role-edit-card-icon {
    display: none;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: #eef4ff;
    color: var(--nr-blue);
    font-size: 22px;
}

.role-edit-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 24px;
    border-bottom: 1px solid #e5ebf3;
    background: #fff;
}

.role-edit-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 12px 4px 10px;
    margin-right: 20px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: #51647b;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
}

.role-edit-nav a:hover,
.role-edit-nav a:focus-visible {
    outline: none;
    border-bottom-color: var(--nr-blue);
    background: transparent;
    color: var(--nr-blue-dark);
}

.role-edit-nav a .mdi {
    display: none;
}

.role-edit-form {
    gap: 0;
    padding: 0 28px 28px;
}

.role-edit-form .settings-panel {
    padding: 22px 0;
    border-top: 1px solid #e6ecf4;
    scroll-margin-top: 90px;
}

.role-edit-form .settings-panel:first-child {
    padding-top: 24px;
    border-top: 0;
}

.role-edit-form .settings-panel-head {
    margin-bottom: 16px;
}

.role-edit-form .settings-panel-head h3 {
    font-size: 1.02rem;
}

.role-edit-form .settings-panel-head p {
    font-size: .86rem;
}

.role-edit-form .settings-subgroup {
    padding-left: 30px;
}

.role-edit-form .role-edit-actions {
    margin-top: 4px;
    padding-top: 20px;
    border-top: 1px solid #e5ebf3;
}

@media (max-width: 900px) {
    .role-edit-page {
        width: min(100% - 28px, 1120px);
        margin-top: 14px;
    }

    .role-edit-hero {
        padding: 8px 0 16px;
    }

    .role-edit-card-head {
        padding: 20px;
    }

    .role-edit-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 12px 20px;
    }

    .role-edit-nav a {
        flex: 0 0 auto;
    }

    .role-edit-form {
        padding: 0 20px 20px;
    }
}

@media (max-width: 600px) {
    .role-edit-hero-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .role-edit-card-head {
        padding: 18px;
    }

    .role-edit-card-icon {
        display: none;
    }

    .role-edit-form {
        padding: 0 18px 18px;
    }

    .role-edit-form .settings-subgroup {
        padding-left: 0;
    }

    .role-edit-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .role-edit-actions .btn,
    .role-edit-actions button {
        width: 100%;
        justify-content: center;
    }

    .role-edit-hero-meta > span { width: auto; }
}

.form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}

.form-actions .btn,
.form-actions button {
    margin-top: 0;
}

.icon-btn {
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    line-height: 1;
    margin-top: 0;
    border: 1px solid var(--nr-blue);
    border-radius: 8px;
    background: var(--nr-blue);
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    appearance: none;
}

.icon-btn:hover {
    background: var(--nr-blue-dark);
    border-color: var(--nr-blue-dark);
}

.icon-btn.is-accent {
    background: var(--nr-blue);
    color: #fff;
    border-color: var(--nr-blue);
}

.icon-btn.is-danger {
    background: var(--nr-blue);
    color: #fff;
    border-color: var(--nr-blue);
}

.icon-btn .mdi {
    font-size: 19px;
    line-height: 1;
}

.icon-btn[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1b2330;
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 20;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid #e3ebf8;
    border-radius: 12px;
}

.execution-steps-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.execution-steps-heading h2 {
    margin-bottom: 4px;
}

.execution-steps-heading p {
    margin: 0;
    color: #5e7190;
    font-size: .92rem;
}

.execution-step-editor-list {
    display: grid;
    gap: 12px;
}

.execution-step-editor {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 10px;
    border: 1px solid #e3ebf8;
    border-radius: 12px;
    background: #f9fbff;
}

.execution-step-editor__order span {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #edf4ff;
    color: var(--nr-blue-dark);
    border: 1px solid #c7d9f5;
    font-weight: 800;
}

.execution-step-editor__form {
    display: grid;
    grid-template-columns: minmax(260px, 1.3fr) minmax(160px, .7fr) minmax(210px, .8fr) minmax(130px, .55fr) auto;
    gap: 10px;
    align-items: end;
    margin: 0;
}

.execution-step-editor__field {
    margin: 0;
    min-width: 0;
}

.execution-step-editor__field span {
    display: block;
    margin-bottom: 6px;
    color: #38506f;
    font-size: .78rem;
    font-weight: 700;
}

.execution-step-editor__field input,
.execution-step-editor__field select,
.execution-step-editor__field textarea {
    margin: 0;
}

.execution-step-editor__description textarea {
    min-height: 74px;
    resize: vertical;
}

.execution-step-editor__sla {
    display: grid;
    grid-template-columns: 82px minmax(105px, 1fr);
    gap: 8px;
}

.execution-step-editor__save {
    min-height: var(--button-height);
    margin-top: 0;
    align-self: end;
}

.execution-step-editor__delete {
    margin: 0;
    align-self: end;
}

.execution-step-editor__delete .icon-btn {
    margin-top: 0;
}

.execution-step-empty {
    padding: 22px;
    border: 1px dashed #cbd7ea;
    border-radius: 12px;
    color: #60728f;
    background: #f9fbff;
}

@media (max-width: 1180px) {
    .execution-step-editor {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .execution-step-editor__delete {
        grid-column: 2;
        justify-self: start;
    }

    .execution-step-editor__form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .execution-step-editor__description {
        grid-column: 1 / -1;
    }

    .execution-step-editor__save {
        justify-self: start;
    }
}

@media (max-width: 720px) {
    .settings-grid,
    .checkbox-group-columns {
        grid-template-columns: 1fr;
    }

    .settings-subgroup {
        padding-left: 0;
    }

    .execution-step-editor {
        grid-template-columns: 1fr;
    }

    .execution-step-editor__delete {
        grid-column: auto;
    }

    .execution-step-editor__form {
        grid-template-columns: 1fr;
    }

    .execution-step-editor__sla {
        grid-template-columns: 1fr;
    }
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
    background: #fff;
}

th,
td {
    border-bottom: 1px solid #e2e9f5;
    padding: 10px 6px;
    text-align: left;
}

th {
    color: var(--nr-blue-dark);
    background: #f7faff;
    font-size: .9rem;
}

.alert {
    margin: 14px 0 20px;
    border-radius: 5px;
    padding: 12px 14px;
}

.alert-success {
    background: #eaf9ee;
    border: 1px solid #9cd9aa;
}

.alert-danger {
    background: #fff1f1;
    border: 1px solid #f3b5b5;
}

.price {
    font-size: 1.3rem;
    color: var(--nr-blue);
    font-weight: 600;
}

.payment-box {
    border: 1px solid var(--nr-border);
    border-radius: 5px;
    padding: 14px;
    background: #f9fbff;
}

.product-picker {
    margin-top: 6px;
}

.product-picker-tools {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin: 8px 0 10px;
}

.product-picker-tools input[type="search"] {
    flex: 1;
    min-width: 200px;
}

.product-grid {
    display: grid;
    gap: 8px;
}

.product-scroll-box {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 6px;
}

.product-item {
    border: 1px solid var(--nr-border);
    border-radius: 5px;
    background: #fff;
    padding: 10px 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.product-item input[type="checkbox"] {
    margin-top: 2px;
}

.product-item-name {
    margin: 0;
    font-weight: 700;
    color: var(--nr-blue-dark);
}

.product-item-meta {
    margin: 2px 0 0;
    color: var(--nr-muted);
    font-size: .9rem;
}

.plan-price-value.is-calculation-prompt,
.product-item-price.is-calculation-prompt {
    display: block;
    min-height: 16px;
    margin-top: 5px;
    color: var(--nr-blue);
    font-size: .72rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
}

.product-item-qty-label {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    color: var(--nr-muted);
}

.product-item-qty-input {
    width: 72px;
    height: 30px;
    padding: 4px 8px;
}

.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
    margin-top: 6px;
}

.plan-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.plan-card {
    border: 1px solid var(--nr-border);
    border-radius: 12px;
    padding: 12px;
    background: #fff;
    cursor: pointer;
    transition: .18s ease;
    display: block;
    min-width: 0;
}

.plan-card:hover {
    border-color: #8fb0ea;
    box-shadow: 0 6px 18px rgba(0, 53, 162, 0.08);
}

.plan-radio:checked + .plan-card {
    border-color: var(--nr-blue);
    box-shadow: 0 0 0 2px rgba(0, 53, 162, 0.12);
    background: #f5f9ff;
}

.plan-title {
    font-weight: 800;
    color: var(--nr-blue-dark);
    margin-bottom: 6px;
    overflow-wrap: anywhere;
}

.plan-price {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--nr-blue);
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}

.plan-meta {
    color: #415a77;
    font-size: .88rem;
    margin-bottom: 3px;
}

.plan-products {
    margin-top: 8px;
    font-size: .85rem;
    color: #2f4057;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.global-loading {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    background: rgba(8, 22, 48, .48);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
}

.global-loading.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.global-loading-box {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    width: min(100%, 360px);
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(217, 229, 251, .9);
    padding: 22px 24px 18px;
    text-align: left;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
}

.global-loading-copy strong,
.global-loading-copy span {
    display: block;
}

.global-loading-copy strong {
    color: var(--nr-blue-dark);
    font-size: 15px;
    font-weight: 750;
}

.global-loading-copy span {
    margin-top: 4px;
    color: #66758c;
    font-size: 13px;
}

.global-loading-spinner {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 3px solid #e8eef9;
    border-top-color: var(--nr-blue);
    border-right-color: #76a5f3;
    animation: spinLoading .9s cubic-bezier(.5, .1, .5, .9) infinite;
}

.global-loading-progress {
    grid-column: 1 / -1;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf2fa;
}

.global-loading-progress span {
    display: block;
    width: 36%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--nr-blue), #74a7ff);
    animation: loadingProgress 1.35s ease-in-out infinite;
}

@keyframes spinLoading {
    to { transform: rotate(360deg); }
}

@keyframes loadingProgress {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(300%); }
}

html.is-loading,
html.is-loading body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .global-loading,
    .global-loading-spinner,
    .global-loading-progress span { animation: none; transition: none; }
}

.order-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 8px;
}

.order-actions .btn,
.order-actions form {
    margin: 0;
    width: 100%;
}

.order-actions .btn,
.order-actions button {
    width: 100%;
    text-align: center;
}

.action-dropdown {
    margin-top: 8px;
    position: relative;
    display: inline-block;
}

.action-dropdown-toggle {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 6px;
    cursor: pointer;
    text-align: center;
}

.action-dropdown-toggle .mdi {
    font-size: 18px;
    line-height: 1;
}

.action-dropdown-toggle.is-icon-only {
    width: 36px;
    height: 36px;
    min-height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: 8px;
}

.action-dropdown-toggle::-webkit-details-marker {
    display: none;
}

.action-dropdown-caret {
    font-size: .85rem;
    transition: transform .2s ease;
}

.action-dropdown[open] .action-dropdown-caret {
    transform: rotate(180deg);
}

.action-dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    display: none;
    gap: 8px;
    min-width: 220px;
    max-width: min(300px, calc(100vw - 24px));
    padding: 10px;
    border: 1px solid #dbe6f6;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(12, 32, 64, 0.18);
    z-index: 1400;
}

.action-dropdown[open] .action-dropdown-menu {
    display: grid;
}

.action-dropdown.is-floating .action-dropdown-menu {
    position: fixed;
    top: var(--action-menu-top, 0);
    left: var(--action-menu-left, 0);
    right: auto;
    width: var(--action-menu-width, 220px);
}

.action-dropdown.is-floating .action-dropdown-menu::after {
    content: "";
    position: absolute;
    right: 14px;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 1px solid #dbe6f6;
    transform: rotate(45deg);
}

.action-dropdown.is-above .action-dropdown-menu::after {
    bottom: -6px;
    border-left: 0;
    border-top: 0;
}

.action-dropdown.is-below .action-dropdown-menu::after {
    top: -6px;
    border-right: 0;
    border-bottom: 0;
}

.action-dropdown-menu .btn,
.action-dropdown-menu form {
    width: 100%;
    margin: 0;
}

.action-dropdown-menu .btn {
    justify-content: center;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.2;
}

.action-dropdown-menu a,
.action-dropdown-menu button {
    white-space: normal;
}

.table-action-dropdown {
    margin-top: 0;
    min-width: 36px;
}

.table-action-dropdown .action-dropdown-menu {
    min-width: 220px;
}

.order-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: 16px;
    align-items: start;
    margin: 22px 0 30px;
}

.order-detail-main {
    display: grid;
    gap: 16px;
}

.order-section-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.order-section-head h2 {
    margin: 0 0 4px;
}

.order-section-head p {
    margin: 0;
    color: var(--nr-muted);
    font-size: .88rem;
}

.order-id-pill,
.order-status-pill {
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 800;
    line-height: 1;
    min-height: 26px;
    padding: 6px 10px;
    white-space: nowrap;
}

.order-id-pill {
    background: #eaf2ff;
    color: var(--nr-blue-dark);
}

.order-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.order-info-item {
    border: 1px solid #e1e9f7;
    border-radius: 10px;
    background: #fbfdff;
    min-width: 0;
    padding: 10px 12px;
}

.order-info-wide {
    grid-column: span 2;
}

.order-info-item span {
    color: var(--nr-muted);
    display: block;
    font-size: .75rem;
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.order-info-item strong {
    color: #20324b;
    display: block;
    font-size: .92rem;
    overflow-wrap: anywhere;
}

.order-product-line {
    border: 1px solid #e1e9f7;
    border-left: 4px solid var(--nr-blue);
    border-radius: 10px;
    background: #fbfdff;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
}

.order-product-line div {
    min-width: 0;
}

.order-product-line strong {
    color: var(--nr-blue-dark);
    display: block;
}

.order-product-line span {
    color: var(--nr-muted);
    display: block;
    font-size: .86rem;
    margin-top: 3px;
}

.order-products-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.order-products-list span {
    background: #eef4ff;
    border: 1px solid #d8e5fb;
    border-radius: 999px;
    color: #244a82;
    font-size: .78rem;
    font-weight: 700;
    padding: 5px 9px;
}

.order-summary-panel {
    position: sticky;
    top: 96px;
}

.order-summary-top {
    background: linear-gradient(135deg, var(--nr-blue) 0%, #1b7bd8 100%);
    border-radius: 10px;
    color: #fff;
    margin-bottom: 12px;
    padding: 14px;
}

.order-summary-top span {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    opacity: .9;
    text-transform: uppercase;
}

.order-summary-top strong {
    display: block;
    font-size: 1.75rem;
    line-height: 1.15;
    margin-top: 4px;
}

.order-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.order-status-pending {
    background: #fff2bd;
    color: #7a5200;
}

.order-status-approved {
    background: #dff7e7;
    color: #166534;
}

.order-status-canceled,
.order-status-failed {
    background: #ffe2e2;
    color: #991b1b;
}

.order-status-payout {
    background: #eef4ff;
    color: #244a82;
}

.order-summary-list {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
}

.order-summary-list div {
    border-bottom: 1px solid #edf2fb;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
}

.order-summary-list dt {
    color: var(--nr-muted);
    font-size: .8rem;
}

.order-summary-list dd {
    color: #20324b;
    font-size: .82rem;
    font-weight: 800;
    margin: 0;
    text-align: right;
}

.order-actions-dropdown {
    margin-top: 0;
}

.order-primary-actions {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
}

.order-primary-actions .btn {
    width: 100%;
    text-align: center;
}

.order-public-link-box {
    border: 1px solid #d8e5fb;
    border-radius: 10px;
    background: #f8fbff;
    margin: 0 0 14px;
    padding: 12px;
}

.order-public-link-box span {
    display: block;
    margin-bottom: 7px;
    color: var(--nr-muted);
    font-size: .78rem;
    font-weight: 800;
}

.order-public-link-box textarea {
    min-height: 58px;
    font-size: .78rem;
}

.order-admin-reprocess-form {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid #d8e5fb;
    border-radius: 8px;
    background: #f8fbff;
}

.order-admin-reprocess-form label {
    color: var(--nr-muted);
    font-size: .8rem;
    font-weight: 800;
}

.order-admin-reprocess-form input,
.order-admin-reprocess-form .btn {
    width: 100%;
}

.order-sale-status-form {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid #d8e5fb;
    border-radius: 8px;
    background: #f8fbff;
}

.order-sale-status-form label {
    color: var(--nr-muted);
    font-size: .8rem;
    font-weight: 800;
}

.order-sale-status-form select,
.order-sale-status-form .btn {
    width: 100%;
}

.order-edit-hint {
    display: block;
    color: var(--nr-muted);
    font-size: .72rem;
    line-height: 1.35;
}

.order-contract-form {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid #d8e5fb;
    border-radius: 8px;
    background: #f8fbff;
}

.order-contract-form label {
    color: var(--nr-muted);
    font-size: .8rem;
    font-weight: 800;
}

.order-contract-form select,
.order-contract-form .btn {
    width: 100%;
}

.order-pix-box {
    border: 1px solid #d8e5fb;
    border-radius: 10px;
    background: #f8fbff;
    margin-top: 12px;
    padding: 12px;
}

.order-pix-box p {
    margin: 0 0 8px;
}

.order-pix-box textarea {
    font-size: .82rem;
}

.order-pix-box .btn {
    margin-top: 8px;
    width: 100%;
    text-align: center;
}


.order-back-btn {
    width: 100%;
    text-align: center;
}

.pagination-wrap {
    margin-top: 14px;
    display: flex;
    justify-content: center;
}

.pagination {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.page-item .page-link {
    display: inline-block;
    padding: 7px 11px;
    border: 1px solid var(--nr-border);
    border-radius: 8px;
    color: var(--nr-blue-dark);
    background: #fff;
    text-decoration: none;
}

.page-item.active .page-link {
    background: var(--nr-blue);
    color: #fff;
    border-color: var(--nr-blue);
}

.page-item.disabled .page-link {
    opacity: .55;
    pointer-events: none;
}

.mt-10 { margin-top: 10px !important; }
.mt-12 { margin-top: 12px !important; }
.mt-16 { margin-top: 16px !important; }
.mb-12 { margin-bottom: 12px !important; }
.m0 { margin: 0 !important; }
.maxw-420 { max-width: 420px !important; }
.maxw-640 { max-width: 640px !important; }
.maxw-680 { max-width: 680px !important; }
.maxw-700 { max-width: 700px !important; }
.maxw-720 { max-width: 720px !important; }
.maxw-760 { max-width: 760px !important; }
.maxw-960 { max-width: 960px !important; }

.inline-field-320 { flex-basis: 320px; }
.inline-search-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: end;
    margin-bottom: 12px;
}
.inline-min-220-flex {
    min-width: 220px;
    flex: 1;
}
.inline-min-220 {
    min-width: 220px;
}
.inline-flex-center-gap8 {
    display: flex;
    gap: 8px;
    align-items: center;
}
.field-maxw-140 { max-width: 140px; }
.logout-form-block { display: block; }
.plan-card-static {
    cursor: default;
    margin-bottom: 10px;
}
.payment-box-mt12 { margin-top: 12px; }
.text-warning-note { color: #9a5c00; }
.feedback-muted {
    margin: 8px 0 0;
    color: #4b5e77;
}
.feedback-muted-tight {
    margin: 6px 0 8px;
    color: #4b5e77;
}
.is-hidden { display: none !important; }

.plan-card[hidden],
.product-item[hidden] {
    display: none !important;
}

.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.confirm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}

.confirm-modal-card {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    padding: 24px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
}

.confirm-modal-card h3 {
    margin: 0 0 8px;
    font-size: 1.15rem;
}

.confirm-modal-text {
    margin: 0 0 16px;
    color: #516987;
    font-size: 0.92rem;
    line-height: 1.45;
}

.confirm-modal-card label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.confirm-modal-card input {
    width: 100%;
    margin-bottom: 8px;
}

.confirm-modal-feedback {
    margin: 0 0 12px;
    color: #b42318;
    font-size: 0.88rem;
}

.confirm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.has-open-modal {
    overflow: hidden;
}

.consultation-request-trigger {
    position: static;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-top: 12px;
    padding: 12px 15px 12px 11px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: #0035a2;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.24);
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

.consultation-request-trigger:hover,
.consultation-request-trigger:focus-visible {
    background: #002779;
}

.consultation-request-trigger-icon {
    display: grid;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
}

.consultation-request-modal-card {
    width: min(100%, 520px);
    border-radius: 8px;
}

.consultation-request-modal-card textarea {
    width: 100%;
    min-height: 130px;
    resize: vertical;
}

.sales-create-grid {
    grid-template-columns: minmax(620px, 1.35fr) minmax(280px, 0.65fr);
    align-items: start;
}

.sales-form-subtitle {
    margin: -2px 0 12px;
    color: #516987;
    font-size: .9rem;
}

.sales-form {
    display: grid;
    gap: 6px;
}

.sales-form input,
.sales-form select,
.sales-form textarea {
    background: #fcfdff;
}

.sales-form input:focus,
.sales-form select:focus,
.sales-form textarea:focus {
    border-color: #7ea5e8;
    box-shadow: 0 0 0 3px rgba(0, 53, 162, 0.1);
}

.sales-cnpj-btn {
    margin-top: 8px;
    width: fit-content;
    display: inline-flex;
    justify-self: start;
    align-self: start;
    padding: 6px 10px;
    font-size: .82rem;
}

.sales-submit-btn {
    width: fit-content;
    display: inline-flex;
    justify-self: start;
    align-self: start;
    padding: 7px 12px;
    font-size: .86rem;
}

.sales-offer-box {
    margin-top: 10px;
    border: 1px dashed #b8caea;
    border-radius: 12px;
    padding: 10px 12px 12px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 70%);
}

.sales-playbook {
    background: linear-gradient(180deg, #f7faff 0%, #ffffff 55%);
}

.sales-playbook h3 {
    margin-bottom: 8px;
}

/* Cadastro de cliente com a mesma linguagem visual do checkout publico. */
.sales-checkout-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
}

.sales-checkout-main,
.sales-checkout-summary {
    border: 1px solid #e6eaf1;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
    min-width: 0;
}

.sales-checkout-main {
    padding: 24px;
}

.sales-checkout-head {
    border-bottom: 1px solid #e6eaf1;
    margin-bottom: 18px;
    padding-bottom: 14px;
}

.sales-checkout-head h2 {
    color: #172033;
    font-size: 1.22rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 5px;
}

.sales-checkout-head .sales-form-subtitle {
    color: #667085;
    margin: 0;
}

.sales-checkout-main .sales-form {
    gap: 0;
}

.sales-checkout-main .sales-form > label,
.sales-cnpj-field > label,
.sales-checkout-main .sales-offer-box > label,
.sales-checkout-main #normal-sale-fields > label,
.sales-checkout-main #custom-sale-fields > label {
    color: #172033;
    font-size: .86rem;
    font-weight: 600;
    margin: 10px 0 6px;
}

.sales-checkout-main .sales-form input,
.sales-checkout-main .sales-form select,
.sales-checkout-main .sales-form textarea {
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    color: #172033;
}

.sales-checkout-main .sales-form > input,
.sales-checkout-main .sales-form > select,
.sales-cnpj-row input {
    height: 42px;
}

.sales-payment-field {
    display: block;
    grid-column: 1 / -1;
    width: 100%;
}

.sales-payment-field label {
    display: block;
    color: #172033;
    font-size: .86rem;
    font-weight: 600;
    margin: 10px 0 6px;
}

.sales-payment-field select {
    display: block;
    width: 100%;
    height: 42px;
}

.sales-cnpj-field {
    min-width: 0;
}

.sales-cnpj-row {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) 112px;
    min-width: 0;
}

.sales-cnpj-row .sales-cnpj-btn {
    align-items: center;
    align-self: stretch;
    display: inline-flex;
    font-size: .78rem;
    height: 42px;
    justify-content: center;
    margin: 0;
    padding: 0 10px;
    width: 100%;
}

.sales-checkout-main .sales-offer-box {
    background: transparent;
    border: 0;
    border-top: 1px solid #e6eaf1;
    border-radius: 0;
    margin-top: 24px;
    padding: 18px 0 0;
}

.sales-checkout-main .plan-grid {
    gap: 12px;
}

.sales-checkout-main .plan-card {
    border: 2px solid #e6eaf1;
    min-height: 86px;
    padding: 16px;
}

.sales-checkout-main .plan-radio:checked + .plan-card {
    background: #fff;
    border-color: var(--nr-blue);
    box-shadow: 0 0 0 3px rgba(0, 53, 162, .1);
}

.sales-checkout-main .product-item {
    border-color: #e6eaf1;
    border-radius: 8px;
}

.sales-checkout-summary {
    background: #fff;
    padding: 24px;
    position: sticky;
    top: 82px;
}

.sales-checkout-summary h3 {
    color: #172033;
    font-size: 1.22rem;
    font-weight: 500;
    line-height: 1.25;
    margin: 0 0 16px;
}

.sales-checkout-summary .sales-cart {
    border-color: #e6eaf1;
    border-radius: 10px;
    margin-bottom: 18px;
    padding: 12px 14px;
}

.sales-checkout-summary .sales-submit-btn {
    align-items: center;
    background: var(--nr-blue);
    border-radius: 10px;
    display: flex;
    font-size: 1rem;
    height: 48px;
    justify-content: center;
    margin: 0;
    width: 100%;
}

.sales-checkout-summary .consultation-request-trigger {
    align-self: stretch;
    max-width: none;
    width: 100%;
}

.sales-checkout-summary .consultation-request-trigger--submit-size {
    align-self: stretch;
    box-sizing: border-box;
    display: flex;
    height: 48px;
    margin: 10px 0 0;
    max-width: none;
    min-width: 100%;
    padding: 10px;
    width: 100%;
}

.sales-cart {
    border: 1px solid #d6e3fb;
    border-radius: 12px;
    background: #ffffff;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.sales-cart-line,
.sales-cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: .86rem;
    color: #365277;
}

.sales-cart-line strong,
.sales-cart-total strong {
    color: #0f2f5c;
    text-align: right;
}

.sales-cart-total {
    margin: 4px 0;
    padding: 9px 0;
    border-top: 1px solid #e3ebfa;
    border-bottom: 1px solid #e3ebfa;
}

.sales-cart-total span {
    font-weight: 700;
    color: #1c3e72;
}

.sales-cart-total strong {
    font-size: 1.08rem;
    color: var(--nr-blue);
}

.sales-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.sales-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    color: #1f4a89;
    background: #eaf2ff;
    border: 1px solid #cadcf9;
}

.simulation-panel {
    width: 100%;
    max-width: 520px;
    border: 1px solid var(--nr-border);
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    padding: 10px;
}

.simulation-header {
    margin-bottom: 8px;
}

.simulation-title {
    margin: 0;
    font-size: 1rem;
    color: var(--nr-blue-dark);
}

.simulation-subtitle {
    margin: 4px 0 0;
    font-size: .82rem;
    color: var(--nr-muted);
}

.simulation-table-wrap {
    border: 1px solid #e3ebfa;
    border-radius: 5px;
    background: #fff;
}

.simulation-table {
    width: 100%;
    table-layout: fixed;
}

.simulation-table th,
.simulation-table td {
    font-size: .78rem;
    padding: 6px 4px;
    vertical-align: middle; 
}
 

.simulation-table th {
    background: #f0f5ff;
    color: #28426b;
}

.state-simulation-price {
    font-weight: 800;
    color: var(--nr-blue-dark);
    white-space: nowrap;
}

.simulation-state-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.simulation-adjustment {
    display: inline-flex;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}

.simulation-adjustment.is-positive {
    background: #e7f7ed;
    color: #1d7a3a;
}

.simulation-adjustment.is-negative {
    background: #fdebec;
    color: #a33a41;
}

.simulation-adjustment.is-neutral {
    background: #eef2f7;
    color: #4a5c74;
}

.kanban-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.kanban-head h3 {
    margin-bottom: 4px;
}

.kanban-head p {
    margin: 0;
    color: var(--nr-muted);
    font-size: .9rem;
}

.sales-kanban {
    display: grid;
    grid-template-columns: repeat(5, minmax(240px, 1fr));
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.kanban-column {
    background: #f8fbff;
    border: 1px solid #dfe8f7;
    border-radius: 12px;
    min-width: 240px;
    padding: 10px;
}

.kanban-column-pending {
    background: linear-gradient(180deg, #fff9e8 0%, #fffdf7 74%);
    border-color: #f4d37a;
}

.kanban-column-under-review {
    background: linear-gradient(180deg, #f5efff 0%, #fcfaff 74%);
    border-color: #b99ae8;
}

.kanban-column-accepted {
    background: linear-gradient(180deg, #edf7ff 0%, #f9fdff 74%);
    border-color: #8fc7f3;
}

.kanban-column-approved {
    background: linear-gradient(180deg, #ecf9f0 0%, #fbfffc 74%);
    border-color: #89d7a2;
}

.kanban-column-closed {
    background: linear-gradient(180deg, #fff0f0 0%, #fffafa 74%);
    border-color: #f0a0a0;
}

.kanban-column-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
}

.kanban-column-pending .kanban-column-head {
    background: #ffe8a3;
}

.kanban-column-under-review .kanban-column-head {
    background: #e2d2fa;
}

.kanban-column-accepted .kanban-column-head {
    background: #cceaff;
}

.kanban-column-approved .kanban-column-head {
    background: #c9f0d4;
}

.kanban-column-closed .kanban-column-head {
    background: #ffd1d1;
}

.kanban-column-head h4 {
    margin: 0 0 3px;
    color: var(--nr-blue-dark);
    font-size: .92rem;
}

.kanban-column-head span {
    color: var(--nr-muted);
    display: block;
    font-size: .76rem;
    line-height: 1.3;
}

.kanban-column-head strong {
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 999px;
    color: var(--nr-blue-dark);
    min-width: 30px;
    padding: 3px 8px;
    text-align: center;
}

.kanban-card-list {
    display: grid;
    gap: 8px;
    max-height: 560px;
    overflow-y: auto;
    padding-right: 2px;
}

.kanban-sale-card {
    background: #fff;
    border: 1px solid #e1e9f7;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 4px 14px rgba(8, 36, 73, .04);
}

.kanban-column-pending .kanban-sale-card {
    border-left: 4px solid #f2b705;
}

.kanban-column-under-review .kanban-sale-card {
    border-left: 4px solid #7c3fb8;
}

.kanban-column-accepted .kanban-sale-card {
    border-left: 4px solid #1d8fd6;
}

.kanban-column-approved .kanban-sale-card {
    border-left: 4px solid #21a65b;
}

.kanban-column-closed .kanban-sale-card {
    border-left: 4px solid #d92d20;
}

.kanban-sale-top {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.kanban-sale-top strong {
    color: var(--nr-blue-dark);
}

.kanban-order-id {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.kanban-order-id small {
    color: var(--nr-muted);
    font-size: .72rem;
    font-weight: 700;
}

.kanban-sale-top span {
    background: #eef4ff;
    border-radius: 999px;
    color: #244a82;
    font-size: .68rem;
    font-weight: 800;
    padding: 2px 7px;
}

.kanban-column-pending .kanban-sale-top span {
    background: #fff2bd;
    color: #7a5200;
}

.kanban-column-under-review .kanban-sale-top span {
    background: #eadcff;
    color: #5b248b;
}

.kanban-column-accepted .kanban-sale-top span {
    background: #d9efff;
    color: #075985;
}

.kanban-column-approved .kanban-sale-top span {
    background: #dff7e7;
    color: #166534;
}

.kanban-column-closed .kanban-sale-top span {
    background: #ffe2e2;
    color: #991b1b;
}

.kanban-sale-card h5 {
    color: var(--nr-text);
    font-size: .92rem;
    margin: 0 0 4px;
}

.kanban-sale-card p {
    color: var(--nr-muted);
    font-size: .8rem;
    margin: 0 0 8px;
}

.kanban-sale-card dl {
    display: grid;
    gap: 4px;
    margin: 0 0 8px;
}

.kanban-sale-card dl div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.kanban-sale-card dt {
    color: var(--nr-muted);
    font-size: .74rem;
}

.kanban-sale-card dd {
    color: var(--nr-text);
    font-size: .74rem;
    font-weight: 700;
    margin: 0;
    text-align: right;
}

.kanban-sale-card .btn {
    margin-top: 0;
    padding: 6px 10px;
    text-align: center;
    width: 100%;
}

.kanban-empty {
    border: 1px dashed #cbd8ec;
    border-radius: 10px;
    color: var(--nr-muted);
    font-size: .84rem;
    padding: 14px;
    text-align: center;
}

.timeline-form {
    border: 1px solid #e3ebf8;
    border-radius: 12px;
    background: #f8fbff;
    padding: 12px;
    margin-bottom: 16px;
}

.timeline-form button {
    margin-top: 10px;
}

.timeline-list {
    display: grid;
    gap: 0;
    position: relative;
}

.timeline-entry {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    position: relative;
}

.timeline-entry + .timeline-entry {
    margin-top: 12px;
}

.timeline-entry::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 22px;
    bottom: -14px;
    width: 2px;
    background: #dbe6f7;
}

.timeline-entry:last-child::before {
    display: none;
}

.timeline-marker {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--nr-blue);
    border: 4px solid #eaf2ff;
    margin-top: 4px;
    position: relative;
    z-index: 1;
}

.timeline-entry-body {
    border: 1px solid #e1e9f7;
    border-radius: 10px;
    background: #fff;
    padding: 10px 12px;
}

.timeline-entry-body header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 6px;
}

.timeline-entry-body header strong {
    color: var(--nr-blue-dark);
}

.timeline-entry-body header span {
    color: var(--nr-muted);
    font-size: .78rem;
    white-space: nowrap;
}

.timeline-entry-body p {
    margin: 0 0 8px;
    color: #2f4057;
    white-space: pre-line;
}

.timeline-file-link {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    color: var(--nr-blue-dark);
    font-weight: 700;
    text-decoration: none;
}

.timeline-file-link span {
    color: var(--nr-muted);
    font-weight: 600;
}

.timeline-image-preview {
    border: 1px solid #d8e5fb;
    border-radius: 10px;
    display: block;
    margin: 8px 0;
    max-width: 260px;
    overflow: hidden;
    background: #f8fbff;
}

.timeline-image-preview img {
    display: block;
    height: auto;
    width: 100%;
}

.timeline-empty {
    border: 1px dashed #cbd8ec;
    border-radius: 10px;
    color: var(--nr-muted);
    padding: 14px;
    text-align: center;
}

@media (max-width: 900px) {
    .container {
        width: min(1100px, 95%);
    }

    .login-layout {
        grid-template-columns: 1fr;
    }

    .hero-form-layout {
        grid-template-columns: 1fr;
    }

    .app-home-hero,
    .app-home-grid,
    .app-home-rule-list {
        grid-template-columns: 1fr;
    }

    .hero {
        padding: 20px;
    }

    .card {
        padding: 14px;
    }

    .sales-create-grid {
        grid-template-columns: 1fr;
    }

    .sales-checkout-summary {
        position: static;
    }

    .order-detail-layout {
        grid-template-columns: 1fr;
    }

    .order-summary-panel {
        position: static;
    }

    .order-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .has-consultation-trigger {
        padding-bottom: 0;
    }

    .brand {
        font-size: 1.1rem;
    }

    .brand-logo {
        height: 20px;
    }

    .menu a {
        font-size: .92rem;
        padding: 5px 7px;
    }

    .menu-dropdown-list {
        right: 0;
        left: auto;
        min-width: 170px;
    }

    .grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .sales-checkout-main,
    .sales-checkout-summary {
        border-radius: 6px;
        padding: 16px;
    }

    .sales-cnpj-row {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 1.3rem;
    }

    .app-home-hero {
        padding: 18px;
    }

    .app-home-hero h1 {
        font-size: 2rem;
    }

    .app-home-actions .btn {
        justify-content: center;
        width: 100%;
    }

    .price {
        font-size: 1.1rem;
    }

    input,
    select,
    textarea,
    .btn,
    button {
        font-size: .92rem;
    }

    .order-section-head,
    .order-product-line,
    .order-summary-list div {
        flex-direction: column;
        align-items: flex-start;
    }

    .order-info-grid {
        grid-template-columns: 1fr;
    }

    .order-info-wide {
        grid-column: auto;
    }

    .order-summary-list dd {
        text-align: left;
    }

    .order-summary-top strong {
        font-size: 1.45rem;
    }

    .consultation-request-trigger {
        position: static;
        inset: auto;
        justify-content: center;
        max-width: none;
        padding: 10px 14px;
        border-radius: 8px;
        text-align: center;
        transform: none;
    }

    .consultation-request-modal-card {
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        padding: 20px;
    }

    .consultation-request-modal-card .confirm-modal-actions {
        flex-direction: column-reverse;
    }

    .consultation-request-modal-card .confirm-modal-actions .btn {
        width: 100%;
    }

}

.landing-total-box {
    margin-top: 12px;
}

.soft-panel {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin: 12px 0;
    padding: 14px;
}

.soft-panel h3 {
    font-size: 1rem;
    margin: 0 0 12px;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 12px;
}

.advanced-fields,
.inline-edit {
    background: #f8fbff;
    border: 1px solid #dfe8f5;
    border-radius: 6px;
    margin-top: 14px;
    padding: 0 12px;
}
.advanced-fields > summary,
.inline-edit > summary {
    color: var(--nr-blue);
    cursor: pointer;
    font-weight: 600;
    padding: 11px 0;
}
.advanced-fields[open],
.inline-edit[open] { padding-bottom: 12px; }
.inline-edit { background: transparent; border: 0; margin: 4px 0 0; padding: 0; }
.inline-edit > summary { font-size: .82rem; padding: 3px 0; }
.inline-edit .inline-form { display: grid; gap: 5px; margin-top: 5px; }
.inline-edit .btn { width: auto !important; }
/* Repasses: organize the report around its total, filters and status tabs. */
.payouts-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px 24px; padding:22px 24px; }
.payouts-hero .hero-back-btn { grid-column:1 / -1; justify-self:start; }
.payouts-heading h1 { width:auto; margin:0 0 5px; font-size:1.35rem; text-transform:none; }
.payouts-heading p { width:auto; margin:0; color:var(--nr-muted); font-size:.92rem; }
.payouts-total { min-width:190px; padding:12px 16px; border:1px solid #dbe6f5; border-radius:10px; background:#f8fbff; text-align:right; }
.payouts-total span { display:block; color:var(--nr-muted); font-size:.78rem; font-weight:700; }
.payouts-total strong { display:block; margin-top:3px; color:var(--nr-blue); font-size:1.3rem; }
.payouts-context,
.payouts-hero .text-warning-note { grid-column:1 / -1; width:auto; margin:0; }
.payouts-card { padding:20px; }
.payouts-section-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.payouts-section-title h2 { margin:0 0 3px; color:var(--nr-blue-dark); font-size:1.05rem; }
.payouts-section-title span { color:var(--nr-muted); font-size:.86rem; }
.payouts-filters { padding:14px; border:1px solid #e7ebf2; border-radius:10px; background:#fbfcfe; }
.payouts-status-tabs { gap:6px; padding-bottom:14px; border-bottom:1px solid #edf0f4; }
.payouts-status-tabs .btn { min-width:104px; }
.payouts-card .table-wrap { border:1px solid #e7ebf2; border-radius:10px; }
.payouts-card table { min-width:760px; }
.payouts-card th { background:#f8fafc; color:#475467; font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; }
.payouts-card td { vertical-align:top; }
.payouts-card td small { color:var(--nr-muted); line-height:1.35; }
.payout-error-note { display:block; max-width:220px; margin-top:4px; color:#a12626 !important; }
@media (max-width:760px) {
    .payouts-hero { grid-template-columns:1fr; padding:18px; }
    .payouts-total { min-width:0; text-align:left; }
    .payouts-card { padding:14px; }
    .payouts-status-tabs { display:grid; grid-template-columns:repeat(3,1fr); }
    .payouts-status-tabs .btn { min-width:0; width:100%; }
}

/* Estrutura global: navegação lateral fixa e áreas de trabalho consistentes. */
@media (min-width:901px) {
    body { background: #f4f6fa; }
    .topbar { height: 52px; padding: 0; border-bottom: 2px solid var(--header-accent); }
    .topbar-content { width: 100%; max-width: none; height: 50px; margin: 0; padding: 0 20px; }
    .brand-logo { height: 30px; }
    .header-menu-button { display: none; }
    .app-sidebar {
        top: 52px; bottom: 0; left: 0; right: auto; width: 252px; transform: none;
        border: 0; border-right: 1px solid #dfe5ee; border-radius: 0;
        box-shadow: 3px 0 18px rgba(16,36,68,.06); background: #fff;
    }
    .sidebar-head { padding: 18px 18px 14px; }
    .sidebar-head h3 { font-size: .96rem; }
    .sidebar-close { display: none; }
    .sidebar-search { display:flex; align-items:center; gap:7px; margin: 0 14px 7px; padding: 0 10px; height: 34px; border: 1px solid #e1e6ef; border-radius: 7px; background:#f8fafc; color:#98a2b3; }
    .sidebar-search input { min-width:0; padding: 4px 0; border:0; outline:0; background:transparent; font-size:.78rem; }
    .sidebar-search input:focus { outline:0; border:0; }
    .sidebar-nav { padding: 5px 12px 16px; }
    .sidebar-section { margin: 17px 0 4px; font-size:.67rem; letter-spacing:.11em; }
    .sidebar-link { min-height: 37px; padding: 7px 9px; border-radius: 7px; font-size:.84rem; }
    .sidebar-link .mdi { font-size: 17px; }
    .sidebar-user { padding: 13px 18px; font-size:.76rem; }
    .sidebar-logout { padding: 0 18px 16px; }
    .sidebar-logout button { font-size:.82rem; padding:8px 9px; }
    .app-sidebar ~ main.container { width: auto; max-width:none; margin:0 28px 0 280px; padding-top: 22px; }
    .app-sidebar ~ main.container > .hero:first-child,
    .app-sidebar ~ main.container > .page-header:first-child { margin-top:0; }
    .hero { border-radius: 12px; box-shadow: 0 3px 14px rgba(16,36,68,.05); }
    .card { border-color:#e3e8f0; border-radius: 11px; box-shadow:0 2px 10px rgba(16,36,68,.045); }
    body.sidebar-collapsed .app-sidebar { transform: translateX(-105%); }
    body.sidebar-collapsed .app-sidebar ~ main.container { margin-left: 28px; }
}

@media (max-width:900px) {
    .header-home-button { display:none; }
}

.form-grid { gap: 16px; }
label { color:#344054; font-size:.82rem; font-weight:700; letter-spacing:.005em; }
input, select, textarea { min-height: 42px; border-color:#d7dee9; border-radius:8px; color:#1d2939; transition:border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color:#98a2b3; }
input:focus, select:focus, textarea:focus { outline:0; border-color:#82a6df; box-shadow:0 0 0 3px rgba(0,53,162,.11); }
button, .btn { border-radius:8px; font-weight:700; }
table { border-color:#e5e9f0; }
th { background:#f7f9fc; color:#667085; font-size:.73rem; letter-spacing:.055em; text-transform:uppercase; }
td { color:#344054; font-size:.86rem; }

@media (max-width:900px) {
    .sidebar-search { display:flex; align-items:center; gap:7px; margin: 0 14px 6px; padding:0 10px; height:36px; border:1px solid #e1e6ef; border-radius:7px; background:#f8fafc; color:#98a2b3; }
    .sidebar-search input { min-width:0; padding:4px 0; border:0; outline:0; background:transparent; font-size:.8rem; }
    .sidebar-search input:focus { outline:0; border:0; }
}

/* Controles compactos do cabeçalho no desktop. */
@media (min-width:901px) {
    .brand-logo { height: 20px; max-width: 108px; object-fit: contain; }
    .topbar .brand { order: 1; flex: 0 0 130px; width: 130px; }
    .header-menu-button {
        order: 2;
        display: inline-flex;
        width: 32px;
        height: 32px;
        margin: 0 0 0 8px;
        padding: 0;
        border: 0;
        color: #fff;
        background: transparent;
        font-size: 22px;
    }
    .header-menu-button span { display: none; }
    .header-menu-button:hover { background: rgba(255,255,255,.12); }
    .whatsapp-support-button--header { order: 3; margin-left: auto; }
    .header-home-button { order: 4; display:inline-grid; place-items:center; width:32px; height:32px; margin-left:6px; color:#dce8ff; text-decoration:none; border-radius:7px; font-size:18px; }
    .header-home-button:hover { background:rgba(255,255,255,.12); color:#fff; }
}

/* Kanban comercial */
.kanban-head { align-items:center; padding-bottom:16px; border-bottom:1px solid #e7ecf3; }
.kanban-head h3 { margin:0 0 3px; color:#172b4d; font-size:1.25rem; letter-spacing:-.02em; }
.kanban-head-total { display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border:1px solid #dce5f2; border-radius:999px; background:#f7faff; color:#52647d; font-size:.76rem; font-weight:800; white-space:nowrap; }
.kanban-head-total .mdi { color:var(--nr-blue); font-size:16px; }
.sales-view-actions { display:flex; align-items:center; gap:12px; }
.sales-category-filter { display:inline-flex; align-items:center; gap:7px; color:#52647d; font-size:.76rem; font-weight:700; white-space:nowrap; }
.sales-category-filter select { min-height:34px; padding:5px 28px 5px 9px; border:1px solid #dce5f2; border-radius:8px; background:#fff; color:#344054; font:inherit; font-weight:600; }
.sales-view-toggle { display:inline-flex; padding:3px; border:1px solid #dce5f2; border-radius:10px; background:#f7faff; }
.sales-view-toggle button { display:inline-flex; align-items:center; gap:5px; min-height:32px; padding:6px 10px; border:0; border-radius:7px; background:transparent; color:#52647d; font:inherit; font-size:.76rem; font-weight:700; cursor:pointer; }
.sales-view-toggle button.is-active { background:#fff; color:var(--nr-blue); box-shadow:0 1px 4px rgba(16,36,68,.12); }
.sales-view-toggle button:focus-visible { outline:2px solid var(--nr-blue); outline-offset:2px; }
.sales-list-view { margin-top:18px; }
.sales-list-view td { vertical-align:middle; }
.sales-list-view td .btn { white-space:nowrap; }
[data-sales-panel][hidden] { display:none !important; }
[data-sales-category][hidden] { display:none !important; }
.sales-kanban { gap:20px; padding:2px 2px 8px; }
.kanban-column { min-width:252px; padding:9px; border-radius:14px; box-shadow:0 4px 13px rgba(16,36,68,.035); }
.kanban-column-head { position:sticky; top:0; z-index:1; min-height:57px; padding:11px 12px; margin-bottom:11px; border:1px solid rgba(255,255,255,.7); box-shadow:0 2px 7px rgba(16,36,68,.05); }
.kanban-column-head h4 { font-size:.86rem; letter-spacing:-.01em; }
.kanban-column-head strong { min-width:27px; padding:2px 7px; font-size:.78rem; }
.kanban-card-list { gap:10px; max-height:600px; padding:1px 2px 3px; }
.kanban-sale-card { padding:13px; border:1px solid #e3e9f2; border-radius:11px; box-shadow:0 3px 10px rgba(16,36,68,.055); transition:transform .16s, box-shadow .16s, border-color .16s; }
.kanban-sale-card:hover { transform:translateY(-2px); border-color:#b9cce8; box-shadow:0 8px 18px rgba(16,36,68,.11); }
.kanban-sale-top { margin-bottom:8px; }
.kanban-sale-top strong { font-size:.82rem; }
.kanban-sale-card h5 { font-size:.88rem; line-height:1.3; }
.kanban-sale-card p { min-height:1.1em; font-size:.76rem; }
.kanban-sale-card dl { margin-bottom:12px; padding-top:9px; border-top:1px solid #edf0f5; }
.kanban-sale-card .btn { display:flex; align-items:center; justify-content:center; gap:6px; min-height:32px; padding:6px 10px; border-color:#d8e2f1; background:#f7faff; color:var(--nr-blue); font-size:.75rem; }
.kanban-sale-card .btn:hover { background:#eaf1ff; }
.kanban-empty { padding:22px 12px; background:rgba(255,255,255,.45); }
@media (max-width:760px) {
    .kanban-head { align-items:flex-start; flex-direction:column; }
    .kanban-head-total { align-self:flex-start; }
    .sales-view-actions { align-items:flex-start; flex-direction:column; }
    .sales-kanban { grid-template-columns:repeat(5, minmax(240px, 1fr)); }
}

/* Alinhamento consistente de tabelas e indicadores de status. */
table th,
table td { vertical-align: middle; }
table td:has(.order-status-pill) { white-space: nowrap; text-align: center; }
.order-status-pill { vertical-align: middle; }
table td .actions { align-items:center; justify-content:flex-start; }

/* Campos booleanos devem permanecer na mesma linha do texto. */
label:has(> input[type="checkbox"]),
label.check,
label.checkbox-line {
    display: inline-flex;
    align-items: center;
    align-self: end;
    gap: 8px;
    min-height: 42px;
    margin-top: 10px;
    margin-bottom: 0;
    line-height: 1.25;
    white-space: normal;
}
label:has(> input[type="checkbox"]) input[type="checkbox"],
label.check input[type="checkbox"],
label.checkbox-line input[type="checkbox"] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    min-height: 17px;
    margin: 0;
    accent-color: var(--nr-blue);
}
.checkout-acceptance {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
}
.checkout-acceptance input[type="checkbox"] {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
}
.login-actions-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.login-actions-row .login-remember {
    width: auto;
    min-height: 32px;
    margin: 0;
    justify-content: flex-start;
}
.login-actions-row button {
    width: auto;
    min-width: 112px;
    min-height: 42px;
}

/* Acabamento sóbrio: menos efeitos decorativos e mais linguagem de sistema. */
.card, .hero, .btn, button, input, select, textarea,
.kanban-column, .kanban-column-head, .kanban-sale-card,
.order-info-item, .order-product-line,
.order-status-pill { border-radius: 6px; }
.card, .hero, .kanban-sale-card, .kanban-column { box-shadow: 0 1px 4px rgba(16,36,68,.055); }
.btn, button { box-shadow: none; }
.order-page-hero { background: #fff; box-shadow: 0 1px 4px rgba(16,36,68,.055); }
.order-page-hero::after { display:none; }
.order-summary-top { background: var(--nr-blue); }
.kanban-column-pending,
.kanban-column-under-review,
.kanban-column-accepted,
.kanban-column-approved,
.kanban-column-closed { background: #f8fafc; border-color: #dfe5ed; }
.kanban-column-pending .kanban-column-head,
.kanban-column-under-review .kanban-column-head,
.kanban-column-accepted .kanban-column-head,
.kanban-column-approved .kanban-column-head,
.kanban-column-closed .kanban-column-head { background:#fff; border-color:#e3e8ef; }
.kanban-sale-card:hover, .order-info-item:hover { transform:none; box-shadow:0 2px 7px rgba(16,36,68,.08); }
.form-grid > label:has(> input[type="checkbox"]),
.form-grid > label.check {
    grid-column: 1 / -1;
    justify-self: start;
    width: 100%;
}

/* No login, mantém a apresentação à esquerda e o card de acesso à direita. */
@media (min-width:761px) {
    .auth-page .login-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
        align-items: center;
    }
    .auth-page .login-layout > .hero { grid-column: 1; grid-row: 1; order: 1; }
    .auth-page .login-layout > .login-panel { grid-column: 2; grid-row: 1; order: 2; }
}

/* Tipografia mais leve e uniforme em todo o sistema. */
body { font-weight: 400; }
h1, h2, h3, h4, h5, h6,
strong, b,
label, th,
button, .btn,
.badge, .order-status-pill,
.sidebar-section, .sidebar-link,
.menu-dropdown-toggle { font-weight: 600 !important; }
.sidebar-head h3 { font-weight: 600 !important; }
.kanban-head-total, .kanban-eyebrow, .kanban-column-head strong,
.kanban-sale-top strong, .kanban-sale-top span, .order-id-pill,
.order-summary-top span, .order-summary-top strong { font-weight: 600 !important; }

/* Detalhes do pedido */
.order-page-hero { position:relative; overflow:hidden; padding:22px 26px; border:1px solid #dce6f3; background:linear-gradient(135deg,#fff 0%,#f4f8ff 100%); }
.order-page-hero::after { content:''; position:absolute; width:220px; height:220px; right:-75px; top:-100px; border-radius:50%; background:rgba(0,53,162,.07); pointer-events:none; }
.order-page-hero .hero-back-btn { order:0; margin-bottom:10px; }
.order-page-hero h1 { order:1; }
.order-page-hero p { order:2; }
.order-page-hero h1 { position:relative; z-index:1; margin:0; font-size:1.55rem; letter-spacing:-.025em; }
.order-page-hero p { position:relative; z-index:1; max-width:720px; margin:6px 0 0; color:#667085; font-size:.9rem; }
.order-page-layout { margin-top:16px; }
.order-page-layout .card { border-color:#e0e7f0; box-shadow:0 4px 16px rgba(16,36,68,.045); }
.order-page-layout .order-company-card,
.order-page-layout .order-products-card,
.order-page-layout .order-timeline-card { padding:20px; }
.order-page-layout .order-section-head h2 { display:flex; align-items:center; gap:8px; color:#172b4d; font-size:1.02rem; }
.order-page-layout .order-section-head h2::before { content:''; width:4px; height:18px; border-radius:5px; background:var(--nr-blue); }
.order-page-layout .order-summary-panel { top:70px; padding:14px; }
.order-page-layout .order-summary-top { margin:-14px -14px 14px; border-radius:11px 11px 0 0; padding:18px 16px; }
.order-page-layout .order-summary-top strong { font-size:1.9rem; }
.order-page-layout .order-status-row { padding:0 2px; }
.order-page-layout .order-summary-list { padding:0 2px; }
.order-page-layout .order-summary-list div { padding:8px 0; }
.order-page-layout .order-summary-list dt { font-size:.75rem; }
.order-page-layout .order-summary-list dd { font-size:.8rem; }
.order-page-layout .order-primary-actions .btn,
.order-page-layout .order-actions-dropdown > summary { min-height:38px; }
.order-page-layout .timeline-form { border-color:#dfe8f5; background:#f8fbff; }
.order-page-layout .order-info-item { background:#fbfdff; transition:border-color .15s, transform .15s; }
.order-page-layout .order-info-item:hover { border-color:#b8cce8; transform:translateY(-1px); }
@media (max-width:760px) {
    .order-page-hero { padding:18px; }
    .order-page-hero h1 { font-size:1.3rem; }
    .order-page-layout .order-company-card,
    .order-page-layout .order-products-card,
    .order-page-layout .order-timeline-card { padding:15px; }
}

.packages-hero { padding:22px 24px; }
.packages-hero h1 { text-transform:none; font-size:1.35rem; }
.packages-hero p { color:var(--nr-muted); font-size:.92rem; }
.packages-card { padding:20px; }
.packages-section-title { margin-bottom:16px; }
.packages-section-title h2 { margin:0 0 3px; color:var(--nr-blue-dark); font-size:1.05rem; }
.packages-section-title span { color:var(--nr-muted); font-size:.86rem; }
.packages-card .table-wrap { border:1px solid #e7ebf2; border-radius:10px; }
.packages-card table { min-width:650px; }
.packages-card th { background:#f8fafc; color:#475467; font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; }
.packages-card td { vertical-align:top; }
@media (max-width:760px) {
    .packages-card { padding:14px; }
    .packages-hero { padding:18px; }
}

.bank-bearers-hero { padding:22px 24px; }
.bank-bearers-hero h1 { text-transform:none; font-size:1.35rem; }
.bank-bearers-hero p { color:var(--nr-muted); font-size:.92rem; }
.bank-bearers-filters { padding:16px 20px; background:#fbfcfe; }
.bank-bearers-filters .inline-form { justify-content:space-between; }
.bank-bearers-filters .inline-field { max-width:460px; }
.btn-search-icon { width:42px; min-width:42px; padding:0; }
.btn-search-icon .mdi { font-size:20px; }
.bank-bearers-card { padding:20px; }
.bank-bearers-section-title { margin-bottom:16px; }
.bank-bearers-section-title h2 { margin:0 0 3px; color:var(--nr-blue-dark); font-size:1.05rem; }
.bank-bearers-section-title span { color:var(--nr-muted); font-size:.86rem; }
.bank-bearers-card .table-wrap { border:1px solid #e7ebf2; border-radius:10px; }
.bank-bearers-card table { min-width:680px; }
.bank-bearers-card th { background:#f8fafc; color:#475467; font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; }
.bank-bearers-card td { vertical-align:top; }
@media (max-width:760px) {
    .bank-bearers-hero { padding:18px; }
    .bank-bearers-filters,
    .bank-bearers-card { padding:14px; }
    .bank-bearers-filters .inline-field { max-width:none; }
}

.users-hero { padding:22px 24px; }
.users-hero h1 { text-transform:none; font-size:1.35rem; }
.users-hero p { color:var(--nr-muted); font-size:.92rem; }
.users-filters { padding:16px 20px; background:#fbfcfe; }
.users-filters .inline-field { max-width:460px; }
.users-card { padding:20px; }
.users-section-title { margin-bottom:16px; }
.users-section-title h2 { margin:0 0 3px; color:var(--nr-blue-dark); font-size:1.05rem; }
.users-section-title span { color:var(--nr-muted); font-size:.86rem; }
.users-card .table-wrap { border:1px solid #e7ebf2; border-radius:10px; }
.users-card table { min-width:760px; }
.users-card th { background:#f8fafc; color:#475467; font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; }
.users-card td { vertical-align:top; }
@media (max-width:760px) {
    .users-hero { padding:18px; }
    .users-filters,
    .users-card { padding:14px; }
    .users-filters .inline-field { max-width:none; }
}

.roles-card { padding:20px; }
.roles-card .table-wrap { border:1px solid #e7ebf2; border-radius:10px; }
.roles-card th { background:#f8fafc; color:#475467; font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; }
.roles-card td { vertical-align:top; }
.roles-card td small { display:block; margin-top:3px; color:var(--nr-muted); }
@media (max-width:760px) {
    .roles-card { padding:14px; }
}

/* Base visual compartilhada */
:root {
    --surface: #ffffff;
    --surface-subtle: #f8fafc;
    --surface-muted: #f1f5f9;
    --text-primary: #1d2939;
    --text-secondary: #5d6b7e;
    --border-subtle: #e2e8f0;
    --border-strong: #cbd5e1;
    --focus-ring: rgba(0, 53, 162, .16);
    --success: #18794e;
    --success-bg: #edf8f2;
    --danger: #b42318;
    --danger-bg: #fff3f2;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md: 0 8px 24px rgba(16, 24, 40, .07);
    --content-gap: 18px;
    --nr-border: var(--border-subtle);
}

html { scroll-behavior: smooth; }

body {
    background: #f4f6f9;
    color: var(--text-primary);
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

a { text-underline-offset: 2px; }

:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 8px;
    left: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #fff;
    color: var(--nr-blue);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-150%);
    transition: transform .15s ease;
}

.skip-link:focus { transform: translateY(0); }

#main-content:focus { outline: 0; }

/* Cabeçalho e navegação */
.topbar {
    height: 50px;
    padding: 0;
    border-bottom: 2px solid var(--header-accent);
    box-shadow: 0 1px 6px rgba(0, 27, 82, .16);
}

.topbar-content {
    width: 100%;
    max-width: none;
    height: 48px;
    margin: 0;
    padding: 0 16px;
    gap: 8px;
    flex-wrap: nowrap;
}

.brand-logo {
    width: auto;
    height: 20px;
    max-width: 108px;
    object-fit: contain;
}

.header-menu-button,
.header-home-button {
    border-radius: 5px;
    transition: background-color .15s ease, color .15s ease;
}

.header-menu-button:hover,
.header-home-button:hover { background: rgba(255, 255, 255, .13); }

.app-sidebar {
    background: #fff;
    border-right: 1px solid var(--border-subtle);
    box-shadow: 2px 0 12px rgba(16, 24, 40, .045);
}

.sidebar-search {
    border-color: var(--border-subtle) !important;
    background: var(--surface-subtle) !important;
}

.sidebar-search:focus-within {
    border-color: #8eaddd !important;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.sidebar-search input { color: var(--text-primary); }
.sidebar-search input::placeholder { color: #8b98aa; }

.sidebar-section {
    color: #7a8799;
    font-size: .66rem;
    letter-spacing: .09em;
}

.sidebar-link {
    min-height: 38px;
    color: #465467;
    font-size: .84rem;
    font-weight: 500 !important;
}

.sidebar-link .mdi { color: #6b788b; }

.sidebar-link:hover {
    border-color: transparent;
    background: #f3f6fb;
    color: var(--nr-blue);
}

.sidebar-link.is-active {
    position: relative;
    border-color: #dce7f8;
    background: #edf3ff;
    color: var(--nr-blue);
    font-weight: 600 !important;
}

.sidebar-link.is-active::before {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: -6px;
    width: 3px;
    border-radius: 3px;
    background: var(--nr-blue);
    content: "";
}

.sidebar-user { color: var(--text-secondary); }

.sidebar-logout button {
    border-color: var(--border-subtle);
    color: #475467;
    font-weight: 500 !important;
}

.sidebar-logout button:hover {
    border-color: #f2c7c3;
    background: var(--danger-bg);
    color: var(--danger);
}

/* Superfícies e cabeçalhos de página */
.card,
.hero {
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.card { padding: 20px; }

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 18px;
    min-height: 92px;
    padding: 18px 20px;
}

.hero h1 {
    grid-column: 1;
    margin: 0;
    color: #172b4d;
    font-size: 1.28rem;
    font-weight: 600 !important;
    letter-spacing: -.015em;
    line-height: 1.25;
    text-transform: none;
}

.hero p {
    grid-column: 1;
    max-width: 760px;
    margin: 1px 0 0;
    color: var(--text-secondary);
    font-size: .87rem;
    line-height: 1.45;
}

.hero > .btn:not(.hero-back-btn),
.hero > a.btn:not(.hero-back-btn),
.hero > button,
.hero > form {
    grid-column: 2;
    grid-row: auto;
    margin: 0;
    justify-self: end;
}

.hero > .hero-back-btn {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
    min-width: 0;
    height: auto;
    min-height: 28px;
    padding: 0;
}

.hero-form-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--content-gap);
    width: min(960px, 100%);
    margin-top: var(--content-gap);
}

.hero-form-layout .hero {
    display: grid;
    min-height: 0;
}

.hero-form-layout > .card { width: 100%; max-width: 960px; }

.card h2,
.card h3 {
    color: #26364d;
    font-weight: 600 !important;
    letter-spacing: -.01em;
}

/* Formulários */
form label {
    margin-top: 14px;
    margin-bottom: 5px;
    color: #344054;
    font-size: .8rem;
    font-weight: 600 !important;
}

input,
select,
textarea {
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: #fff;
    color: var(--text-primary);
    font: inherit;
    font-size: .88rem;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

textarea { min-height: 96px; resize: vertical; }

input:hover,
select:hover,
textarea:hover { border-color: #aeb9c8; }

input:focus,
select:focus,
textarea:focus {
    outline: 0;
    border-color: #6f94cf;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

input:disabled,
select:disabled,
textarea:disabled,
input[readonly] {
    border-color: var(--border-subtle);
    background: var(--surface-muted);
    color: #667085;
    cursor: not-allowed;
}

input::placeholder,
textarea::placeholder { color: #98a2b3; opacity: 1; }

fieldset {
    margin: 16px 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: 7px;
    background: var(--surface-subtle);
}

legend {
    padding: 0 6px;
    color: #344054;
    font-size: .82rem;
    font-weight: 600;
}

label:has(> input[type="checkbox"]),
label.check,
label.checkbox-line {
    display: flex;
    width: 100%;
    min-height: 32px;
    margin-top: 8px;
    padding: 4px 0;
    font-size: .84rem;
}

label:has(> input[type="checkbox"]):hover { color: var(--nr-blue); }

input[type="checkbox"],
input[type="radio"] {
    width: 17px;
    height: 17px;
    min-height: 17px;
    accent-color: var(--nr-blue);
}

.inline-form {
    gap: 12px;
    padding: 0;
}

.inline-field label { margin-bottom: 5px; }

.hero-form-layout form > .actions,
.settings-form > .actions {
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
}

/* Botões e menus de ação */
button,
.btn {
    min-width: 0;
    min-height: 38px;
    margin-top: 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0 14px;
    font-size: .82rem;
    font-weight: 600 !important;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
}

.btn-with-icon { min-width: 0; }

button:active,
.btn:active { transform: translateY(1px); }

.btn-accent,
button:not([class]),
.btn-with-icon:not(.btn-secondary):not(.btn-danger) {
    border-color: var(--nr-blue);
    background: var(--nr-blue);
    color: #fff;
}

.btn-secondary {
    border-color: var(--border-strong);
    background: #fff;
    color: #344054;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    border-color: #9aabd0;
    background: #f4f7fc;
    color: var(--nr-blue);
}

.btn-accent:hover,
.btn-accent:focus-visible,
button:not([class]):hover {
    border-color: #002a82;
    background: #002a82;
}

.btn-home-sale,
.btn-home-sale:hover,
.btn-home-sale:focus-visible {
    border-color: var(--nr-yellow);
    background: var(--nr-yellow);
    color: #172033;
}

.btn-home-sale:hover,
.btn-home-sale:focus-visible { background: #e9ba00; }

.btn-danger {
    border-color: #f1b8b3;
    background: #fff;
    color: var(--danger);
}

.btn-danger:hover,
.btn-danger:focus-visible {
    border-color: var(--danger);
    background: var(--danger-bg);
    color: #912018;
}

.btn-compact {
    min-width: 0;
    height: 32px;
    min-height: 32px;
    padding: 0 11px;
    font-size: .77rem;
}

.table-action-dropdown {
    display: inline-flex;
    width: 34px;
    height: 34px;
    min-width: 34px;
    margin: 0;
    vertical-align: middle;
}

.table-action-dropdown > summary.action-dropdown-toggle.is-icon-only {
    display: inline-flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: #fff;
    color: #475467;
    line-height: 1;
    list-style: none;
    box-sizing: border-box;
}

.table-action-dropdown > summary.action-dropdown-toggle.is-icon-only::marker,
.table-action-dropdown > summary.action-dropdown-toggle.is-icon-only::-webkit-details-marker {
    display: none;
    content: "";
}

.table-action-dropdown > summary.action-dropdown-toggle.is-icon-only .mdi {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
}

.table-action-dropdown > summary.action-dropdown-toggle.is-icon-only:hover,
.table-action-dropdown[open] > summary.action-dropdown-toggle.is-icon-only {
    border-color: #9aabd0;
    background: #f1f5fb;
    color: var(--nr-blue);
}

td:has(> .table-action-dropdown) {
    width: 58px;
    text-align: center;
    white-space: nowrap;
}

.action-dropdown-menu {
    padding: 6px;
    border: 1px solid var(--border-subtle);
    border-radius: 7px;
    box-shadow: var(--shadow-md);
}

.action-dropdown-menu .btn,
.action-dropdown-menu .btn.btn-with-icon,
.action-dropdown-menu button {
    justify-content: flex-start;
    width: 100%;
    min-height: 36px;
    margin: 0;
    border-color: transparent;
    background: transparent;
    color: #344054;
}

.action-dropdown-menu .btn:hover,
.action-dropdown-menu button:hover { background: var(--surface-muted); }

.action-dropdown-menu .btn-danger { color: var(--danger); }
.action-dropdown-menu .btn-danger:hover { background: var(--danger-bg); color: #912018; }

td .actions,
.action-dropdown-menu .actions {
    margin: 0;
    padding: 0;
    border-top: 0;
}

.hero-form-layout .card > form { max-width: 780px; }

.payouts-hero .payouts-heading { grid-column: 1; }
.payouts-hero .payouts-total { grid-column: 2; grid-row: 1; }
.payouts-hero .payouts-context,
.payouts-hero .text-warning-note { grid-column: 1 / -1; }

/* Tabelas */
.table-wrap {
    position: relative;
    overflow: auto;
    border: 1px solid var(--border-subtle);
    border-radius: 7px;
    background: #fff;
    scrollbar-color: #c7d0dc transparent;
    scrollbar-width: thin;
}

.card > .table-wrap { margin: -1px; }

table {
    border: 0;
    background: #fff;
    font-variant-numeric: tabular-nums;
}

th,
td {
    height: 46px;
    padding: 10px 12px;
    border-bottom: 1px solid #e9edf3;
    vertical-align: middle;
}

th {
    background: #f7f9fc;
    color: #59677a;
    font-size: .7rem;
    font-weight: 600 !important;
    letter-spacing: .045em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

td {
    color: #344054;
    font-size: .83rem;
}

tbody tr { transition: background-color .12s ease; }
tbody tr:hover { background: #f9fbfd; }
tbody tr:last-child td { border-bottom: 0; }

td small {
    display: block;
    margin-top: 2px;
    color: #7a8798;
    font-size: .74rem;
}

td[colspan] { color: var(--text-secondary); text-align: center; }

.pagination-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

/* Feedback e carregamento */
.alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    margin: 16px 0;
    padding: 12px 14px;
    border-radius: 7px;
    box-shadow: var(--shadow-sm);
    font-size: .85rem;
}

.alert > .mdi { margin-top: 1px; font-size: 19px; }
.alert strong { display: block; margin-bottom: 3px; }
.alert ul { margin: 4px 0 0; padding-left: 18px; }

.alert-success {
    border: 1px solid #a9dec2;
    background: var(--success-bg);
    color: #166c47;
}

.alert-danger {
    border: 1px solid #f2b8b3;
    background: var(--danger-bg);
    color: #912018;
}

.customer-delinquency-banner {
    margin: 24px 0 20px;
    padding: 18px 20px;
    border: 1px solid #f2b8b3;
    border-left: 5px solid #c62828;
    border-radius: 12px;
    background: #fff5f4;
    color: #5f1714;
}

.customer-delinquency-banner__header { display: flex; justify-content: space-between; gap: 16px; }
.customer-delinquency-banner__label { display: inline-flex; align-items: center; gap: 6px; color: #a51d1d; font-size: 13px; font-weight: 800; text-transform: uppercase; }
.customer-delinquency-banner h2 { margin: 7px 0 4px; color: #711b18; font-size: 18px; }
.customer-delinquency-banner p { margin: 0; color: #743a35; }
.customer-delinquency-banner__items { display: grid; gap: 8px; margin-top: 14px; }
.customer-delinquency-banner__item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 9px; border-top: 1px solid #f1ceca; font-size: 13px; }
.customer-delinquency-banner__item a { color: #9e1d1d; font-weight: 700; text-decoration: underline; }

@media (max-width: 600px) {
    .customer-delinquency-banner { padding: 15px; }
    .customer-delinquency-banner__item { align-items: flex-start; flex-direction: column; gap: 4px; }
}

.alert-close {
    display: grid;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    margin: -4px -6px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: currentColor;
    place-items: center;
}

.alert-close:hover { background: rgba(0, 0, 0, .05); }

.global-loading { backdrop-filter: blur(6px); }

.global-loading-box { border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); }

@media (min-width: 901px) {
    .topbar .brand {
        order: 1;
        flex: 0 0 188px;
        width: 188px;
    }

    .header-menu-button { order: 2; margin: 0; }
    .header-home-button { order: 3; margin-left: 2px; }
    .whatsapp-support-button--header { order: 4; margin-left: auto; }

    .app-sidebar { top: 50px; width: 252px; }
    .sidebar-head { display: none; }
    .sidebar-search { margin-top: 12px; }
    .app-sidebar ~ main.container {
        margin: 0 24px 0 276px;
        padding: 20px 0 32px;
        transition: margin-left .18s ease;
    }
    body.sidebar-collapsed .app-sidebar ~ main.container { margin-left: 24px; }
}

@media (max-width: 900px) {
    .topbar-content { padding-inline: 12px; }
    .brand { margin-right: auto; }
    .brand-logo { height: 19px; }
    .whatsapp-support-button--header { display: none; }
    .header-menu-button { order: initial; }
    .app-sidebar { top: 0; width: min(330px, 90vw); }
    main.container { width: min(100% - 24px, 1300px); padding: 14px 0 28px; }
    .hero-form-layout { grid-template-columns: 1fr; }
    .hero-form-layout .hero { position: static; }
}

@media (max-width: 640px) {
    body { font-size: 13.5px; }
    main.container { width: min(100% - 20px, 1300px); }
    .card { padding: 14px; }
    .hero {
        display: flex;
        min-height: 0;
        padding: 15px;
        gap: 5px;
    }
    .hero h1 { width: 100%; font-size: 1.12rem; }
    .hero p { width: 100%; }
    .hero > .btn:not(.hero-back-btn),
    .hero > a.btn:not(.hero-back-btn),
    .hero > button,
    .hero > form { width: 100%; margin-top: 10px; }
    .hero > .btn:not(.hero-back-btn),
    .hero > a.btn:not(.hero-back-btn) { justify-content: center; }
    .inline-form,
    .inline-actions { width: 100%; }
    .inline-actions .btn,
    .inline-actions button { flex: 1; }
    .actions { align-items: stretch; flex-direction: column; }
    .actions .btn,
    .actions button { width: 100%; }
    th, td { padding-inline: 10px; }
    .alert { margin: 12px 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Ações da hero permanecem na mesma linha. */
.hero,
.hero-form-layout .hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
}

.hero h1,
.hero p {
    flex: 0 0 100%;
    width: 100%;
}

.hero:not(.payouts-hero)::after {
    content: "";
    flex: 0 0 100%;
    width: 100%;
    height: 0;
    order: 9;
}

.hero > .hero-back-btn {
    flex: 0 0 auto;
    order: 10;
    width: auto;
    margin-top: 10px;
}

.hero > .btn:not(.hero-back-btn),
.hero > a.btn:not(.hero-back-btn),
.hero > button,
.hero > form {
    flex: 0 1 auto;
    order: 11;
    width: auto;
    margin-top: 10px;
}

.hero > form > .btn,
.hero > form > button { margin-top: 0; }

.payouts-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 640px) {
    .hero > .btn:not(.hero-back-btn),
    .hero > a.btn:not(.hero-back-btn),
    .hero > button,
    .hero > form {
        width: auto;
        max-width: 100%;
    }

    .payouts-hero { display: grid; grid-template-columns: 1fr; }
    .payouts-hero .payouts-total { grid-column: 1; grid-row: auto; width: 100%; }
}

/* Formulários e heroes utilizam toda a largura disponível. */
.hero,
.hero-form-layout,
.hero-form-layout > .hero,
.hero-form-layout > .card,
.hero-form-layout > [class*="maxw-"],
.settings-card {
    width: 100%;
    max-width: none !important;
}

.hero-form-layout .card > form,
.card > form:not(.inline-form),
.settings-form,
.sales-form {
    width: 100%;
    max-width: none;
}

.card.maxw-720 {
    width: 100%;
    max-width: none !important;
}

.sales-pdf-button { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }

/* Botões de salvar mantêm largura natural em formulários e ações responsivas. */
button.btn-with-icon[type="submit"],
.form-actions > button[type="submit"],
.form-actions > .btn[type="submit"],
.actions > button[type="submit"],
.actions > .btn[type="submit"],
.order-primary-actions .btn[type="submit"] {
    width:fit-content !important;
    max-width:100%;
    flex:0 0 auto;
    justify-self:start;
}

@media print {
    @page { size: landscape; margin: 12mm; }
    body * { visibility:hidden !important; }
    .sales-view, .sales-view * { visibility:visible !important; }
    .sales-view {
        position:absolute !important;
        inset:0 auto auto 0 !important;
        width:100% !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        box-shadow:none !important;
    }
    .sales-view > :not(.kanban-head):not(.sales-list-view) { display:none !important; }
    .sales-view .kanban-head { padding:0 0 10px !important; border-bottom:1px solid #cbd5e1 !important; }
    .sales-view .kanban-head > div:first-child { display:block !important; }
    .sales-view .kanban-head > div:first-child h3 { margin:0 !important; color:#172b4d !important; font-size:18pt !important; }
    .sales-view .kanban-head > div:first-child p { margin:3px 0 0 !important; color:#52647d !important; }
    .sales-view .sales-view-actions { display:none !important; }
    .sales-view .sales-list-view,
    .sales-view .sales-list-view[hidden] { display:block !important; margin-top:10px !important; }
    .sales-view .table-wrap { overflow:visible !important; border:0 !important; }
    .sales-view table { width:100% !important; border-collapse:collapse !important; font-size:9pt !important; }
    .sales-view th, .sales-view td { padding:6px 7px !important; border:1px solid #cbd5e1 !important; color:#172033 !important; }
    .sales-view th { background:#edf2f7 !important; font-size:8pt !important; }
    .sales-view td .btn { display:none !important; }
    .sales-view tr { break-inside:avoid; }
}