:root {
    --bg: #f4f7f9;
    --surface: #ffffff;
    --surface-2: #f8fafb;
    --surface-3: #eef4f3;

    --text: #17242b;
    --muted: #6b7c86;
    --muted-2: #8a99a2;

    --border: #dce5e8;
    --border-strong: #c9d7db;

    --brand: #0b756a;
    --brand-strong: #075c54;
    --brand-dark: #073d3a;
    --brand-soft: #e6f4f1;

    --nav: #0d2428;
    --nav-2: #102e33;
    --nav-text: #dce9e8;
    --nav-muted: #8aa3a4;

    --success: #15803d;
    --success-bg: #eaf8ef;

    --warning: #b7791f;
    --warning-bg: #fff7df;

    --danger: #b42318;
    --danger-bg: #fff0ee;

    --info: #1769aa;
    --info-bg: #eaf4fc;

    --shadow-xs:
        0 1px 2px rgba(15, 34, 40, 0.04);

    --shadow-sm:
        0 4px 18px rgba(15, 34, 40, 0.06);

    --shadow-md:
        0 12px 36px rgba(15, 34, 40, 0.11);

    --shadow-lg:
        0 24px 70px rgba(5, 26, 30, 0.22);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    --sidebar-width: 258px;
    --topbar-height: 86px;
}


/* =========================================================
   BASE
   ========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    min-height: 100vh;

    background: var(--bg);

    color: var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 1.5;

    -webkit-font-smoothing: antialiased;

}


button,
input,
select,
textarea {

    font: inherit;

}


button,
a {

    -webkit-tap-highlight-color: transparent;

}


a {

    color: inherit;

}


[hidden] {

    display: none !important;

}


::selection {

    background: #cbe9e4;

    color: var(--brand-dark);

}


/* =========================================================
   ESTRUTURA
   ========================================================= */

.app-shell {

    min-height: 100vh;

}


.app-main {

    min-width: 0;

    min-height: 100vh;

    margin-left: var(--sidebar-width);

}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {

    position: fixed;

    inset:
        0
        auto
        0
        0;

    width: var(--sidebar-width);

    z-index: 1200;

    display: flex;

    flex-direction: column;

    background:

        radial-gradient(
            circle at 12% 0%,
            rgba(39, 155, 140, 0.17),
            transparent 34%
        ),

        linear-gradient(
            180deg,
            var(--nav) 0%,
            #0a1f23 100%
        );

    border-right:
        1px solid
        rgba(255, 255, 255, 0.06);

    color: var(--nav-text);

    box-shadow:
        10px
        0
        35px
        rgba(8, 29, 33, 0.08);

}


.brand {

    padding:
        24px
        20px
        18px;

}


.brand-link {

    display: flex;

    align-items: center;

    gap: 12px;

    color: inherit;

    text-decoration: none;

}


.brand-mark {

    flex:
        0
        0
        44px;

    width: 44px;

    height: 44px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    background:

        linear-gradient(
            145deg,
            #26a793,
            #0b756a
        );

    box-shadow:

        0
        8px
        22px
        rgba(3, 17, 20, 0.30),

        inset
        0
        1px
        0
        rgba(255, 255, 255, 0.18);

    color: #ffffff;

    font-size: 14px;

    font-weight: 850;

    letter-spacing: -0.5px;

}


.brand-mark span {

    opacity: 0.7;

    margin:
        0
        1px;

}


.brand-copy {

    min-width: 0;

}


.brand-copy strong,
.brand-copy span {

    display: block;

}


.brand-copy strong {

    color: #ffffff;

    font-size: 15px;

    font-weight: 780;

    letter-spacing: -0.2px;

}


.brand-copy span {

    color: #91aaa9;

    font-size: 11px;

    margin-top: 2px;

}


.nav-section-label {

    padding:
        10px
        22px
        8px;

    color: #638081;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.3px;

}


.nav {

    display: flex;

    flex-direction: column;

    gap: 5px;

    padding:
        0
        12px;

}


.nav-link {

    position: relative;

    width: 100%;

    min-height: 44px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        10px
        12px;

    border: 0;

    border-radius: 11px;

    background: transparent;

    color: #a9bebf;

    font-weight: 620;

    text-decoration: none;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;

}


.nav-link:hover {

    background:
        rgba(
            255,
            255,
            255,
            0.055
        );

    color: #f2f8f7;

}


.nav-link.active {

    background:

        linear-gradient(
            90deg,
            rgba(32, 153, 136, 0.24),
            rgba(32, 153, 136, 0.09)
        );

    color: #ffffff;

    box-shadow:

        inset
        0
        0
        0
        1px
        rgba(82, 191, 174, 0.11);

}


.nav-link.active::before {

    content: "";

    position: absolute;

    left: -12px;

    top: 9px;

    bottom: 9px;

    width: 3px;

    border-radius:
        0
        4px
        4px
        0;

    background: #43b9a6;

}


.nav-icon {

    width: 22px;

    height: 22px;

    display: grid;

    place-items: center;

    color: #83a8a7;

    font-size: 17px;

    font-weight: 700;

}


.nav-link.active .nav-icon,
.nav-link:hover .nav-icon {

    color: #75d3c3;

}


.sidebar-spacer {

    flex: 1;

}


.sidebar-footer {

    padding: 12px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);

}


.help-link {

    margin-bottom: 10px;

}


.sidebar-status {

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        11px
        12px;

    border-radius: 11px;

    background:
        rgba(
            255,
            255,
            255,
            0.03
        );

}


.status-dot {

    width: 8px;

    height: 8px;

    flex:
        0
        0
        8px;

    border-radius: 50%;

    background: #45c67a;

    box-shadow:

        0
        0
        0
        4px
        rgba(69, 198, 122, 0.12);

}


.sidebar-status strong,
.sidebar-status span {

    display: block;

}


.sidebar-status strong {

    color: #dceae9;

    font-size: 11px;

}


.sidebar-status span {

    margin-top: 1px;

    color: #6f8b8c;

    font-size: 9px;

}


.sidebar-overlay {

    display: none;

}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {

    min-height:
        var(--topbar-height);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    padding:
        18px
        30px;

    background:
        rgba(
            255,
            255,
            255,
            0.92
        );

    border-bottom:
        1px solid
        var(--border);

    backdrop-filter:
        blur(14px);

    position: sticky;

    top: 0;

    z-index: 700;

}


.topbar-left,
.topbar-actions {

    display: flex;

    align-items: center;

}


.topbar-left {

    min-width: 0;

    gap: 12px;

}


.topbar-actions {

    gap: 9px;

    flex-wrap: wrap;

    justify-content: flex-end;

}


.page-heading h1,
.page-heading p {

    margin: 0;

}


.page-heading h1 {

    color: #173037;

    font-size: 22px;

    line-height: 1.25;

    font-weight: 780;

    letter-spacing: -0.45px;

}


.page-heading p {

    margin-top: 3px;

    color: var(--muted);

    font-size: 12px;

}


.content {

    width: 100%;

    max-width: 1760px;

    margin:
        0
        auto;

    padding:
        26px
        30px
        44px;

}


.mobile-menu {

    display: none !important;

}


.help-top-button {

    width: 38px;

    height: 38px;

}


/* =========================================================
   CARD
   ========================================================= */

.card {

    background: var(--surface);

    border:
        1px solid
        var(--border);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-xs);

    padding: 20px;

}


.card + .card {

    margin-top: 18px;

}


.card-head {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 18px;

}


.card-head h2,
.card-head h3,
.card-head p {

    margin: 0;

}


.card-head h2 {

    margin-top: 2px;

    color: #173037;

    font-size: 17px;

    line-height: 1.3;

    font-weight: 760;

    letter-spacing: -0.28px;

}


.eyebrow {

    display: block;

    color: var(--brand);

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 1.15px;

    text-transform: uppercase;

}


.muted {

    color:
        var(--muted)
        !important;

}


.right {

    text-align:
        right
        !important;

}


.align-start {

    align-items:
        start
        !important;

}


.wrap {

    flex-wrap:
        wrap
        !important;

}


.link,
.table-link {

    color: var(--brand);

    font-weight: 700;

    text-decoration: none;

}


.link:hover,
.table-link:hover {

    color:
        var(--brand-strong);

    text-decoration: underline;

}


.empty {

    color:
        var(--muted);

    text-align: center;

    padding:
        34px
        18px
        !important;

}


.info-box {

    padding:
        12px
        14px;

    border:
        1px solid
        #cfe2df;

    border-radius:
        var(--radius-md);

    background:
        #f1f8f7;

    color:
        #3f5c60;

    font-size:
        12px;

}


.info-box strong {

    color:
        #21494a;

}


/* =========================================================
   BOTÕES
   ========================================================= */

.btn,
.btn-link {

    min-height: 38px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding:
        8px
        14px;

    border:
        1px solid
        transparent;

    border-radius: 10px;

    font-weight: 700;

    font-size: 12px;

    line-height: 1.2;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease;

}


.btn:hover,
.btn-link:hover {

    transform:
        translateY(-1px);

}


.btn:disabled {

    opacity: 0.55;

    cursor: not-allowed;

    transform: none;

}


.btn-primary {

    background:

        linear-gradient(
            180deg,
            #0e8175,
            #0a6d63
        );

    color:
        #ffffff;

    border-color:
        #08675e;

    box-shadow:

        0
        4px
        11px
        rgba(11, 117, 106, 0.17);

}


.btn-primary:hover {

    background:

        linear-gradient(
            180deg,
            #0c756b,
            #075e56
        );

}


.btn-secondary {

    background:
        #263d43;

    color:
        #ffffff;

    border-color:
        #263d43;

}


.btn-ghost {

    background:
        #ffffff;

    color:
        #425960;

    border-color:
        var(--border-strong);

}


.btn-ghost:hover {

    background:
        #f7fafb;

}


.btn-danger {

    background:
        #ffffff;

    color:
        var(--danger);

    border-color:
        #efc2bc;

}


.btn-danger:hover {

    background:
        var(--danger-bg);

}


.btn-small {

    min-height: 30px;

    padding:
        6px
        9px;

    border-radius:
        8px;

    font-size:
        11px;

}


.btn-block {

    width:
        100%;

    margin-top:
        10px;

}


.btn-link {

    min-height:
        auto;

    padding:
        6px
        9px;

    background:
        var(--brand-soft);

    color:
        var(--brand-strong);

    border-color:
        #cee6e1;

}


.btn-link.secondary {

    background:
        #f0f3f5;

    color:
        #53666d;

    border-color:
        #dce4e7;

}


.icon-button {

    width: 36px;

    height: 36px;

    display: inline-grid;

    place-items: center;

    padding: 0;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        #466067;

    font-weight:
        800;

    cursor:
        pointer;

}


.icon-button:hover {

    background:
        #f4f8f8;

    color:
        var(--brand);

}


/* =========================================================
   FORMULÁRIOS
   ========================================================= */

.field {

    min-width: 0;

}


.field label {

    display: block;

    margin-bottom: 5px;

    color: #50656b;

    font-size: 11px;

    font-weight: 750;

}


input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="month"],
input[type="search"],
input[type="file"],
input:not([type]),
select,
textarea {

    width: 100%;

    min-height: 40px;

    border:
        1px solid
        var(--border-strong);

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        var(--text);

    padding:
        9px
        11px;

    outline:
        none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;

}


textarea {

    min-height:
        84px;

    resize:
        vertical;

}


input:focus,
select:focus,
textarea:focus {

    border-color:
        #55a99f;

    box-shadow:

        0
        0
        0
        3px
        rgba(11, 117, 106, 0.10);

}


input::placeholder,
textarea::placeholder {

    color:
        #9aa7ad;

}


input[type="checkbox"] {

    accent-color:
        var(--brand);

}


.form-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        13px
        14px;

}


.form-grid.cols-3 {

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

}


.span-2 {

    grid-column:
        span 2;

}


.form-section + .form-section {

    margin-top:
        18px;

    padding-top:
        18px;

    border-top:
        1px solid
        #edf1f2;

}


.form-section-title {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        12px;

}


.form-section-title > span {

    width:
        28px;

    height:
        28px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

    background:
        var(--brand-soft);

    color:
        var(--brand);

    font-size:
        11px;

    font-weight:
        850;

}


.form-section-title strong,
.form-section-title small {

    display:
        block;

}


.form-section-title strong {

    color:
        #274148;

    font-size:
        12px;

}


.form-section-title small {

    margin-top:
        1px;

    color:
        var(--muted);

    font-size:
        10px;

}


.form-actions,
.row-actions,
.modal-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    flex-wrap:
        wrap;

}


/* =========================================================
   ALERTAS
   ========================================================= */

.flash-stack {

    display:
        grid;

    gap:
        8px;

    margin-bottom:
        18px;

}


.flash {

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        10px;

    padding:
        11px
        12px;

    border:
        1px solid
        var(--border);

    border-radius:
        11px;

    background:
        #ffffff;

    box-shadow:
        var(--shadow-sm);

}


.flash-indicator {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--info);

}


.flash.sucesso {

    border-color:
        #cce8d5;

    background:
        #f7fcf8;

}


.flash.sucesso .flash-indicator {

    background:
        var(--success);

}


.flash.erro {

    border-color:
        #f1c8c3;

    background:
        #fff9f8;

}


.flash.erro .flash-indicator {

    background:
        var(--danger);

}


.flash-message {

    font-size:
        12px;

    font-weight:
        600;

    color:
        #385158;

}


.flash-close {

    border:
        0;

    background:
        transparent;

    color:
        #87979d;

    cursor:
        pointer;

    font-size:
        18px;

}


/* =========================================================
   KPI
   ========================================================= */

.kpi-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );

    gap:
        12px;

    margin-bottom:
        18px;

}


.kpi-grid.mini {

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

}


.kpi-card {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        116px;

    padding:
        16px
        16px
        14px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-lg);

    background:
        var(--surface);

    box-shadow:
        var(--shadow-xs);

}


.kpi-card::after {

    content:
        "";

    position:
        absolute;

    right:
        -24px;

    bottom:
        -34px;

    width:
        90px;

    height:
        90px;

    border-radius:
        50%;

    background:
        rgba(11, 117, 106, 0.045);

}


.kpi-card > span,
.kpi-card > strong,
.kpi-card > small {

    position:
        relative;

    z-index:
        1;

    display:
        block;

}


.kpi-card > span {

    color:
        #667a80;

    font-size:
        10px;

    font-weight:
        760;

    text-transform:
        uppercase;

    letter-spacing:
        0.55px;

}


.kpi-card > strong {

    margin-top:
        10px;

    color:
        #18343a;

    font-size:
        20px;

    line-height:
        1.1;

    font-weight:
        810;

    letter-spacing:
        -0.55px;

}


.kpi-card > small {

    margin-top:
        8px;

    color:
        var(--muted);

    font-size:
        10px;

}


.kpi-card.positive {

    border-top:
        3px solid
        #33a460;

}


.kpi-card.danger {

    border-top:
        3px solid
        #d36b61;

}


/* =========================================================
   GRIDS
   ========================================================= */

.grid-2 {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        18px;

    margin-bottom:
        18px;

}


.dashboard-grid {

    grid-template-columns:
        1.15fr
        0.85fr;

}


/* =========================================================
   GRÁFICO
   ========================================================= */

.chart-bars {

    min-height:
        270px;

    display:
        flex;

    align-items:
        stretch;

    gap:
        12px;

    padding:
        12px
        2px
        0;

}


.chart-column {

    flex:
        1;

    min-width:
        0;

    display:
        grid;

    grid-template-rows:
        1fr
        auto;

    gap:
        8px;

}


.chart-column-bars {

    min-height:
        220px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        center;

    gap:
        5px;

    padding:
        0
        4px;

    border-bottom:
        1px solid
        #e5ecee;

}


.chart-bar {

    width:
        min(
            32px,
            42%
        );

    min-height:
        2px;

    border-radius:
        7px
        7px
        2px
        2px;

    position:
        relative;

}


.chart-bar.expected {

    background:
        #d9e7e6;

}


.chart-bar.received {

    background:

        linear-gradient(
            180deg,
            #32aa98,
            #0b756a
        );

}


.chart-bar:hover::after {

    content:
        attr(data-value);

    position:
        absolute;

    bottom:
        calc(100% + 7px);

    left:
        50%;

    transform:
        translateX(-50%);

    white-space:
        nowrap;

    padding:
        5px
        7px;

    border-radius:
        7px;

    background:
        #173138;

    color:
        #ffffff;

    font-size:
        9px;

    z-index:
        4;

}


.chart-label {

    color:
        var(--muted);

    font-size:
        10px;

    font-weight:
        650;

    text-align:
        center;

}


.chart-legend {

    display:
        flex;

    justify-content:
        center;

    gap:
        18px;

    margin-top:
        10px;

    color:
        var(--muted);

    font-size:
        10px;

}


.chart-legend span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

}


.dot {

    width:
        8px;

    height:
        8px;

    display:
        inline-block;

    border-radius:
        50%;

}


.dot.expected {

    background:
        #d3e1e0;

}


.dot.received {

    background:
        var(--brand);

}


/* =========================================================
   AGING
   ========================================================= */

.aging-list {

    display:
        grid;

    gap:
        17px;

    padding-top:
        4px;

}


.aging-label {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        7px;

}


.aging-label span {

    color:
        #536a70;

    font-size:
        11px;

    font-weight:
        650;

}


.aging-label strong {

    color:
        #243f45;

    font-size:
        11px;

}


.progress {

    height:
        7px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        #edf2f3;

}


.progress.large {

    height:
        10px;

}


.progress > span {

    display:
        block;

    height:
        100%;

    border-radius:
        inherit;

    background:
        var(--brand);

}


.progress > span.ok {

    background:
        #44a96c;

}


.progress > span.warn {

    background:
        #d6b04b;

}


.progress > span.warn2 {

    background:
        #d8923f;

}


.progress > span.danger2 {

    background:
        #ce6b58;

}


.progress > span.danger {

    background:
        #b8463e;

}


/* =========================================================
   AÇÃO / PRIORIDADES
   ========================================================= */

.action-kpis {

    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap:
        10px;

}


.action-kpi {

    min-height:
        92px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        14px;

    border:
        1px solid
        var(--border);

    border-radius:
        13px;

    background:
        #fbfdfd;

    text-decoration:
        none;

}


.action-kpi:hover {

    transform:
        translateY(-1px);

    border-color:
        #c7dcda;

    box-shadow:
        var(--shadow-sm);

}


.action-kpi strong {

    color:
        #17383c;

    font-size:
        23px;

    line-height:
        1;

}


.action-kpi span {

    margin-top:
        7px;

    color:
        var(--muted);

    font-size:
        10px;

}


.action-kpi.alert {

    background:
        #fff8f7;

    border-color:
        #f1cdc9;

}


/* =========================================================
   TABELAS
   ========================================================= */

.table-wrap {

    width:
        100%;

    overflow-x:
        auto;

    border:
        1px solid
        #e6edef;

    border-radius:
        12px;

}


.data-table {

    width:
        100%;

    min-width:
        760px;

    border-collapse:
        collapse;

    background:
        #ffffff;

}


.data-table.compact {

    min-width:
        620px;

}


.data-table th,
.data-table td {

    padding:
        11px
        12px;

    border-bottom:
        1px solid
        #edf1f2;

    text-align:
        left;

    vertical-align:
        middle;

}


.data-table th {

    background:
        #f7fafb;

    color:
        #6c7f85;

    font-size:
        9px;

    font-weight:
        820;

    text-transform:
        uppercase;

    letter-spacing:
        0.55px;

    white-space:
        nowrap;

}


.data-table td {

    color:
        #40585f;

    font-size:
        11px;

}


.data-table tbody tr:last-child td {

    border-bottom:
        0;

}


.data-table tbody tr:hover {

    background:
        #fbfdfd;

}


.data-table td strong {

    color:
        #263e44;

}


.table-sub {

    display:
        block;

    margin-top:
        2px;

    color:
        #84949a;

    font-size:
        9px;

}


/* =========================================================
   BADGES
   ========================================================= */

.badge {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        23px;

    padding:
        3px
        8px;

    border-radius:
        999px;

    border:
        1px solid
        transparent;

    background:
        #f0f3f4;

    color:
        #62757b;

    font-size:
        9px;

    font-weight:
        820;

    white-space:
        nowrap;

}


.badge.success,
.badge.PAGA,
.badge.ENVIADO,
.badge.SIMULADO {

    background:
        var(--success-bg);

    border-color:
        #cce8d6;

    color:
        var(--success);

}


.badge.warn,
.badge.PARCIAL {

    background:
        var(--warning-bg);

    border-color:
        #f0dfa9;

    color:
        #926716;

}


.badge.danger,
.badge.ATRASADA,
.badge.ERRO {

    background:
        var(--danger-bg);

    border-color:
        #f2ccc7;

    color:
        var(--danger);

}


.badge.neutral,
.badge.ABERTA,
.badge.PENDENTE {

    background:
        #eef4f5;

    border-color:
        #d9e4e6;

    color:
        #5b747a;

}


/* =========================================================
   CONTRATOS
   ========================================================= */

.grid-contracts {

    display:
        grid;

    grid-template-columns:
        minmax(
            350px,
            430px
        )
        minmax(
            0,
            1fr
        );

    gap:
        18px;

    align-items:
        start;

}


.contract-form-card {

    position:
        sticky;

    top:
        calc(
            var(--topbar-height)
            + 16px
        );

}


.deal-summary {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        8px;

    margin-top:
        12px;

    padding:
        12px;

    border-radius:
        12px;

    background:

        linear-gradient(
            135deg,
            #f0f8f6,
            #f7fbfa
        );

    border:
        1px solid
        #d6e9e5;

}


.deal-summary div {

    padding:
        8px;

}


.deal-summary span,
.deal-summary strong {

    display:
        block;

}


.deal-summary span {

    color:
        #71868b;

    font-size:
        9px;

    font-weight:
        700;

    text-transform:
        uppercase;

}


.deal-summary strong {

    margin-top:
        4px;

    color:
        #164c49;

    font-size:
        13px;

}


.payment-form {

    min-width:
        560px;

    display:
        grid;

    grid-template-columns:
        115px
        100px
        115px
        minmax(
            130px,
            1fr
        )
        auto;

    gap:
        6px;

    align-items:
        center;

}


.payment-form input,
.payment-form select {

    min-height:
        32px;

    padding:
        6px
        8px;

    font-size:
        10px;

}


.contracts-stack {

    display:
        grid;

    gap:
        10px;

}


.contract-card {

    overflow:
        hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    background:
        #ffffff;

}


.contract-card > summary {

    list-style:
        none;

    cursor:
        pointer;

}


.contract-card > summary::-webkit-details-marker {

    display:
        none;

}


.contract-summary-grid {

    display:
        grid;

    grid-template-columns:
        28px
        1fr
        1.2fr
        1fr
        0.85fr
        0.85fr
        0.75fr;

    gap:
        12px;

    align-items:
        center;

    padding:
        14px
        16px;

}


.contract-summary-grid
> div:not(.chevron)
span,

.contract-summary-grid
> div:not(.chevron)
strong,

.contract-summary-grid
> div:not(.chevron)
small {

    display:
        block;

}


.contract-summary-grid
> div:not(.chevron)
span {

    color:
        #8a999f;

    font-size:
        8px;

    font-weight:
        800;

    text-transform:
        uppercase;

}


.contract-summary-grid
> div:not(.chevron)
strong {

    margin-top:
        3px;

    color:
        #304a50;

    font-size:
        11px;

}


.chevron {

    width:
        25px;

    height:
        25px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        8px;

    background:
        #eef5f4;

    color:
        var(--brand);

    transform:
        rotate(-90deg);

    transition:
        transform 0.18s ease;

}


.contract-card[open]
.chevron {

    transform:
        rotate(0deg);

}


.contract-detail {

    padding:
        14px
        16px
        16px;

    border-top:
        1px solid
        #edf1f2;

    background:
        #fbfcfd;

}


/* =========================================================
   CAMPANHAS
   ========================================================= */

.campaign-builder {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        minmax(
            320px,
            0.75fr
        );

    gap:
        16px;

    align-items:
        start;

}


.selection-summary {

    grid-column:
        1 / -1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;

    padding:
        10px
        12px;

    border:
        1px solid
        #dce7e8;

    border-radius:
        11px;

    background:
        #f8fbfb;

}


.selection-summary strong {

    margin-right:
        auto;

    color:
        var(--brand-dark);

}


.selection-summary span {

    color:
        var(--muted);

    font-size:
        10px;

}


.data-table.selectable
tbody
tr.selected {

    background:
        #f0f9f7;

}


.check-col {

    width:
        36px;

    text-align:
        center !important;

}


.contact-check,
#selectAll {

    width:
        16px;

    height:
        16px;

}


.upload-box {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        14px;

    border:
        1px dashed
        #b9d1cf;

    border-radius:
        13px;

    background:
        #f8fbfb;

}


.upload-box.large {

    min-height:
        140px;

    flex-wrap:
        wrap;

}


.upload-box input[type="file"] {

    flex:
        1;

    min-width:
        200px;

    border-style:
        dashed;

    background:
        #ffffff;

}


.upload-box div {

    flex:
        1;

    min-width:
        190px;

}


.upload-box strong,
.upload-box span {

    display:
        block;

}


.upload-box span {

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        10px;

}


.email-preview {

    overflow:
        hidden;

    border:
        1px solid
        #dfe8ea;

    border-radius:
        13px;

    background:
        #ffffff;

}


.preview-meta {

    display:
        grid;

    grid-template-columns:
        70px
        1fr;

    gap:
        10px;

    padding:
        9px
        12px;

    border-bottom:
        1px solid
        #edf1f2;

    font-size:
        10px;

}


.preview-meta span {

    color:
        var(--muted);

}


.preview-meta strong {

    color:
        #334d54;

}


.preview-message {

    min-height:
        180px;

    padding:
        18px;

    color:
        #40565c;

    line-height:
        1.65;

    font-size:
        12px;

}


.campaign-progress {

    display:
        grid;

    grid-template-columns:
        1fr
        auto;

    align-items:
        center;

    gap:
        10px;

    margin:
        15px
        0;

}


.sticky-card {

    position:
        sticky;

    top:
        calc(
            var(--topbar-height)
            + 16px
        );

}


/* =========================================================
   FILTROS
   ========================================================= */

.filter-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            7,
            minmax(
                120px,
                1fr
            )
        )
        auto;

    gap:
        10px;

    align-items:
        end;

}


.filter-action {

    display:
        flex;

    align-items:
        end;

}


/* =========================================================
   MODAL
   ========================================================= */

.modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        1800;

    display:
        grid;

    place-items:
        center;

    padding:
        20px;

}


.modal-backdrop {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(
            8,
            25,
            29,
            0.55
        );

    backdrop-filter:
        blur(3px);

}


.modal-card {

    position:
        relative;

    z-index:
        1;

    width:
        min(
            680px,
            100%
        );

    max-height:
        min(
            760px,
            90vh
        );

    overflow:
        auto;

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

    background:
        #ffffff;

    box-shadow:
        var(--shadow-lg);

    padding:
        18px;

}


.modal-head {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        15px;

}


.modal-head h3 {

    margin:
        0;

}


/* =========================================================
   HELP DRAWER
   ========================================================= */

.drawer-backdrop {

    position:
        fixed;

    inset:
        0;

    z-index:
        1390;

    background:
        rgba(
            7,
            23,
            27,
            0.32
        );

    backdrop-filter:
        blur(2px);

}


.help-drawer {

    position:
        fixed;

    top:
        0;

    right:
        0;

    bottom:
        0;

    z-index:
        1400;

    width:
        min(
            410px,
            94vw
        );

    display:
        flex;

    flex-direction:
        column;

    background:
        #ffffff;

    border-left:
        1px solid
        var(--border);

    box-shadow:

        -18px
        0
        50px
        rgba(
            8,
            28,
            32,
            0.14
        );

    transform:
        translateX(102%);

    transition:
        transform 0.22s ease;

}


.help-drawer.open {

    transform:
        translateX(0);

}


.drawer-head {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        22px;

    border-bottom:
        1px solid
        var(--border);

}


.drawer-head strong,
.drawer-head small {

    display:
        block;

}


.drawer-head strong {

    margin-top:
        4px;

    color:
        #1f3b41;

    font-size:
        18px;

}


.drawer-head small {

    margin-top:
        3px;

    color:
        var(--muted);

}


.drawer-body {

    overflow-y:
        auto;

    padding:
        18px
        22px
        28px;

}


.setting-line {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        14px;

    border:
        1px solid
        var(--border);

    border-radius:
        13px;

    background:
        #fbfdfd;

}


.setting-line strong,
.setting-line span {

    display:
        block;

}


.setting-line strong {

    color:
        #314b51;

    font-size:
        12px;

}


.setting-line span {

    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        10px;

}


/* SWITCH */

.switch {

    position:
        relative;

    width:
        42px;

    height:
        24px;

    flex:
        0
        0
        42px;

}


.switch input {

    position:
        absolute;

    opacity:
        0;

}


.switch > span {

    position:
        absolute;

    inset:
        0;

    border-radius:
        999px;

    background:
        #cbd5d8;

    cursor:
        pointer;

}


.switch > span::after {

    content:
        "";

    position:
        absolute;

    width:
        18px;

    height:
        18px;

    top:
        3px;

    left:
        3px;

    border-radius:
        50%;

    background:
        #ffffff;

    box-shadow:

        0
        2px
        6px
        rgba(
            0,
            0,
            0,
            0.17
        );

    transition:
        transform
        0.18s
        ease;

}


.switch input:checked + span {

    background:
        var(--brand);

}


.switch input:checked + span::after {

    transform:
        translateX(18px);

}


/* =========================================================
   LISTA AJUDA
   ========================================================= */

.help-list {

    display:
        grid;

    gap:
        9px;

    margin-top:
        18px;

}


.help-list > div {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    padding:
        12px
        2px;

    border-bottom:
        1px solid
        #edf1f2;

}


.help-number {

    color:
        #89aaa6;

    font-size:
        9px;

    font-weight:
        850;

}


.help-list strong,
.help-list span:not(.help-number) {

    display:
        block;

}


.help-list strong {

    color:
        #314b51;

    font-size:
        11px;

}


.help-list span:not(.help-number) {

    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        10px;

}


.help-note {

    margin-top:
        18px;

    padding:
        13px;

    border-radius:
        12px;

    background:
        #f2f8f7;

    color:
        #587074;

    font-size:
        10px;

}


.help-note strong,
.help-note span {

    display:
        block;

}


.help-note strong {

    color:
        var(--brand-strong);

    margin-bottom:
        3px;

}


/* =========================================================
   TUTORIAL
   ========================================================= */

.tour-layer {

    position:
        fixed;

    inset:
        0;

    z-index:
        1600;

}


.tour-mask {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(
            5,
            19,
            23,
            0.56
        );

    backdrop-filter:
        blur(1px);

}


body.touring .sidebar {

    z-index:
        1650;

}


.tour-focus {

    position:
        relative !important;

    z-index:
        1660 !important;

    box-shadow:

        0
        0
        0
        4px
        rgba(
            255,
            255,
            255,
            0.80
        ),

        0
        0
        0
        8px
        rgba(
            47,
            183,
            163,
            0.65
        )
        !important;

}


.tour-card {

    position:
        fixed;

    z-index:
        1700;

    width:
        min(
            360px,
            calc(
                100vw
                - 32px
            )
        );

    padding:
        18px;

    border-radius:
        16px;

    background:
        #ffffff;

    box-shadow:
        var(--shadow-lg);

}


.tour-progress {

    height:
        4px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        #e9eff0;

    margin-bottom:
        14px;

}


.tour-progress::after {

    content:
        "";

    display:
        block;

    height:
        100%;

    width:
        var(
            --tour-progress,
            20%
        );

    border-radius:
        inherit;

    background:
        var(--brand);

}


.tour-card h3 {

    margin:
        6px
        0;

    color:
        #213e44;

    font-size:
        18px;

}


.tour-card p {

    margin:
        0;

    color:
        #60747a;

    font-size:
        12px;

    line-height:
        1.6;

}


.tour-actions {

    display:
        flex;

    justify-content:
        flex-end;

    gap:
        8px;

    margin-top:
        16px;

}


/* =========================================================
   CONCILIAÇÃO
   ========================================================= */

.step-list {

    margin:
        0;

    padding:
        0;

    list-style:
        none;

    display:
        grid;

    gap:
        12px;

}


.step-list li {

    position:
        relative;

    padding-left:
        34px;

}


.step-list li strong,
.step-list li span {

    display:
        block;

}


.step-list li strong {

    color:
        #314a50;

    font-size:
        11px;

}


.step-list li span {

    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        10px;

}


.step-list li::after {

    content:
        "✓";

    position:
        absolute;

    left:
        0;

    top:
        1px;

    width:
        22px;

    height:
        22px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        7px;

    background:
        var(--brand-soft);

    color:
        var(--brand);

    font-size:
        10px;

    font-weight:
        850;

}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 1500px) {

    .kpi-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

    }


    .filter-grid {

        grid-template-columns:
            repeat(
                4,
                minmax(
                    130px,
                    1fr
                )
            );

    }


    .action-kpis {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

    }


    .contract-summary-grid {

        grid-template-columns:
            28px
            repeat(
                3,
                minmax(0, 1fr)
            );

    }

}


@media (max-width: 1180px) {

    :root {

        --sidebar-width:
            232px;

    }


    .grid-contracts {

        grid-template-columns:
            1fr;

    }


    .contract-form-card,
    .sticky-card {

        position:
            static;

    }


    .campaign-builder {

        grid-template-columns:
            1fr;

    }


    .dashboard-grid,
    .grid-2 {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 900px) {

    :root {

        --sidebar-width:
            270px;

        --topbar-height:
            76px;

    }


    .sidebar {

        transform:
            translateX(-102%);

        transition:
            transform
            0.2s
            ease;

    }


    body.sidebar-open
    .sidebar {

        transform:
            translateX(0);

    }


    .sidebar-overlay {

        position:
            fixed;

        inset:
            0;

        z-index:
            1150;

        display:
            block;

        border:
            0;

        background:
            rgba(
                6,
                21,
                24,
                0.36
            );

        opacity:
            0;

        visibility:
            hidden;

    }


    body.sidebar-open
    .sidebar-overlay {

        opacity:
            1;

        visibility:
            visible;

    }


    .app-main {

        margin-left:
            0;

    }


    .mobile-menu {

        display:
            inline-grid
            !important;

    }


    .topbar {

        padding:
            14px
            18px;

    }


    .content {

        padding:
            20px
            18px
            34px;

    }


    .topbar-actions
    .btn {

        display:
            none;

    }


    .kpi-grid,
    .kpi-grid.mini {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .filter-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .action-kpis {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .form-grid,
    .form-grid.cols-3 {

        grid-template-columns:
            1fr
            1fr;

    }

}


@media (max-width: 620px) {

    .page-heading p {

        display:
            none;

    }


    .page-heading h1 {

        font-size:
            18px;

    }


    .help-top-button {

        display:
            none;

    }


    .content {

        padding:
            16px
            12px
            28px;

    }


    .card {

        padding:
            15px;

        border-radius:
            14px;

    }


    .kpi-grid,
    .kpi-grid.mini,
    .action-kpis,
    .filter-grid,
    .form-grid,
    .form-grid.cols-3,
    .deal-summary {

        grid-template-columns:
            1fr;

    }


    .span-2 {

        grid-column:
            auto;

    }


    .selection-summary {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    .selection-summary strong {

        margin-right:
            0;

    }


    .upload-box {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    .contract-summary-grid {

        grid-template-columns:
            28px
            1fr;

    }


    .tour-card {

        left:
            16px
            !important;

        right:
            16px
            !important;

        bottom:
            16px
            !important;

        top:
            auto
            !important;

        width:
            auto;

    }

}


@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        transition:
            none !important;

        animation:
            none !important;

    }

}