:root {
    /* =========================
       IDENTIDADE FAZAN
    ========================== */

    --fazan-light: #B8E3E9;
    --fazan-secondary: #93B1B5;
    --fazan-primary: #4F7C82;
    --fazan-dark: #0B2E33;

    /* =========================
       INTERFACE
    ========================== */

    --background: #F5F8F8;
    --surface: #FFFFFF;

    --text-primary: #142B2F;
    --text-secondary: #5F7377;

    --border: #DCE5E6;

    --success: #2F7D5B;
    --warning: #A96F13;
    --danger: #B33A3A;

    /* =========================
       TAMANHOS
    ========================== */

    --sidebar-width: 270px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    --shadow-sm:
        0 3px 14px rgba(11, 46, 51, 0.05);

    --shadow-md:
        0 10px 30px rgba(11, 46, 51, 0.10);
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}


html {
    font-size: 16px;
}


html,
body {
    margin: 0;
    min-height: 100%;
}


body {
    min-height: 100vh;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background: var(--background);
    color: var(--text-primary);

    font-size: 1rem;
    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


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


/* =========================================================
   LOGIN
========================================================= */

.login-page {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(340px, 1fr)
        minmax(420px, 1fr);
}


.login-brand {
    display: flex;
    align-items: center;

    padding: clamp(40px, 6vw, 80px);

    background:
        linear-gradient(
            145deg,
            var(--fazan-dark),
            #123F45
        );
}


.brand-content {
    width: 100%;
    max-width: 620px;
}


.brand-badge {
    display: inline-block;

    margin-bottom: 32px;

    color: var(--fazan-light);

    font-size: 1.375rem;
    font-weight: 800;

    letter-spacing: 5px;
}


.brand-content h1 {
    margin: 0 0 24px;

    color: #FFFFFF;

    font-size: clamp(2.3rem, 4vw, 4rem);
    line-height: 1.08;
}


.brand-content p {
    max-width: 520px;

    margin: 0;

    color: var(--fazan-light);

    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.7;
}


.login-area {
    display: flex;

    align-items: center;
    justify-content: center;

    padding: clamp(24px, 5vw, 56px);
}


.login-card {
    width: min(100%, 460px);

    padding: clamp(28px, 4vw, 48px);

    background: var(--surface);

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

    border-radius: 20px;

    box-shadow: var(--shadow-md);
}


.login-logo {
    width: 56px;
    height: 56px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 28px;

    background: var(--fazan-dark);

    color: var(--fazan-light);

    border-radius: 14px;

    font-size: 1.6rem;
    font-weight: 800;
}


.login-header h2 {
    margin: 0;

    font-size: clamp(1.7rem, 3vw, 2rem);
}


.login-header p {
    margin: 10px 0 34px;

    color: var(--text-secondary);

    font-size: 0.95rem;
}


.form-group {
    margin-bottom: 22px;
}


.form-group label {
    display: block;

    margin-bottom: 8px;

    font-size: 0.9rem;
    font-weight: 700;
}


.form-group input {
    width: 100%;

    min-height: 46px;

    padding: 12px 14px;

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

    border-radius: 10px;

    background: #FFFFFF;

    color: var(--text-primary);

    font-size: 1rem;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.form-group input:focus {
    border-color: var(--fazan-primary);

    box-shadow:
        0 0 0 3px
        rgba(79, 124, 130, 0.15);
}


.btn-login {
    width: 100%;

    min-height: 46px;

    padding: 12px 18px;

    border: 0;

    border-radius: 10px;

    background: var(--fazan-dark);

    color: #FFFFFF;

    font-size: 1rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        background 0.2s ease;
}


.btn-login:hover {
    background: var(--fazan-primary);

    transform: translateY(-1px);
}


.login-footer {
    display: flex;
    flex-direction: column;

    gap: 4px;

    margin-top: 36px;

    padding-top: 24px;

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

    color: var(--text-secondary);

    font-size: 0.82rem;
}


.login-footer strong {
    color: var(--fazan-dark);
}


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

.flash-container {
    position: fixed;

    top: 20px;
    right: 20px;

    z-index: 9999;

    width:
        min(
            420px,
            calc(100% - 40px)
        );
}


.alert {
    width: 100%;

    margin-bottom: 10px;

    padding: 14px 16px;

    background: #FFFFFF;

    border-radius: 10px;

    border-left:
        4px solid
        var(--fazan-primary);

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

    font-size: 0.95rem;

    overflow-wrap: anywhere;
}


.alert-danger {
    border-left-color: var(--danger);
}


.alert-warning {
    border-left-color: var(--warning);
}


.alert-success {
    border-left-color: var(--success);
}


/* =========================================================
   ESTRUTURA DO SISTEMA
========================================================= */

.app-shell {
    min-height: 100vh;

    display: flex;

    background: var(--background);
}


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

.sidebar {
    width: var(--sidebar-width);

    height: 100vh;
    height: 100dvh;
    min-height: 0;

    position: fixed;

    top: 0;
    left: 0;

    display: flex;
    flex-direction: column;

    padding: 28px 18px;

    background: var(--fazan-dark);

    color: #FFFFFF;

    overflow: hidden;

    z-index: 1000;
}


.sidebar-brand {
    min-width: 0;
    flex-shrink: 0;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 0 10px 30px;
}


.brand-mark {
    flex: 0 0 auto;

    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--fazan-light);

    color: var(--fazan-dark);

    border-radius: 12px;

    font-size: 1.4rem;
    font-weight: 800;
}


.sidebar-brand > div:last-child {
    min-width: 0;
}


.sidebar-brand strong {
    display: block;

    font-size: 1.15rem;
    font-weight: 800;

    letter-spacing: 2px;

    white-space: nowrap;
}


.sidebar-brand span {
    display: block;

    margin-top: 2px;

    color: var(--fazan-secondary);

    font-size: 0.85rem;
}


.sidebar-nav {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 6px;

    display: flex;
    flex-direction: column;

    gap: 5px;

    flex: 1;
}

.sidebar-nav > * {
    flex-shrink: 0;
}


.nav-item {
    min-height: 44px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 11px 14px;

    color: #D8E5E6;

    text-decoration: none;

    border-radius: 9px;

    font-size: 0.95rem;
    font-weight: 600;

    overflow: hidden;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.nav-item:hover {
    background:
        rgba(184, 227, 233, 0.08);

    color: #FFFFFF;
}


.nav-item.active {
    background: var(--fazan-primary);
    color: #FFFFFF;
}


.nav-icon {
    width: 24px;
    min-width: 24px;
    height: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #d9f7f7;

    font-size: 18px;
    line-height: 1;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.nav-icon i {
    display: block;

    font-size: 18px;
    line-height: 1;
}


.nav-separator {
    height: 1px;

    margin: 12px 10px;

    background:
        rgba(255, 255, 255, 0.08);
}


.sidebar-footer {
    min-width: 0;
    flex-shrink: 0;

    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 20px 10px 4px;

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


.sidebar-footer span,
.sidebar-footer small {
    color: var(--fazan-secondary);

    font-size: 0.78rem;
}


.sidebar-footer strong {
    max-width: 100%;

    font-size: 0.9rem;

    overflow-wrap: anywhere;
}


/* =========================================================
   CONTEÚDO PRINCIPAL
========================================================= */

.main-content {
    min-width: 0;

    width:
        calc(
            100% - var(--sidebar-width)
        );

    min-height: 100vh;

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


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

.topbar {
    min-height: 88px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 24px;

    padding:
        18px
        clamp(20px, 3vw, 36px);

    background: #FFFFFF;

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


.topbar > div:first-child {
    min-width: 0;
}


.topbar-label {
    margin: 0 0 3px;

    color: var(--text-secondary);

    font-size: 0.78rem;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.topbar h2 {
    max-width: 100%;

    margin: 0;

    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.3;

    overflow-wrap: anywhere;
}


.topbar-user {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 12px;
}


.user-avatar {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--fazan-light);

    color: var(--fazan-dark);

    border-radius: 50%;

    font-size: 1rem;
    font-weight: 800;
}


.user-info {
    min-width: 120px;
    max-width: 220px;
}


.user-info strong {
    display: block;

    font-size: 0.9rem;
    line-height: 1.3;

    overflow-wrap: anywhere;
}


.user-info span {
    display: block;

    margin-top: 3px;

    color: var(--text-secondary);

    font-size: 0.8rem;
}


.btn-logout {
    min-height: 38px;

    padding: 8px 13px;

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

    background: #FFFFFF;

    color: var(--text-primary);

    border-radius: 8px;

    font-size: 0.9rem;
    font-weight: 600;

    cursor: pointer;
}


.btn-logout:hover {
    background: var(--background);
}


/* =========================================================
   CONTENT
========================================================= */

.content-wrapper {
    width: 100%;

    padding:
        clamp(22px, 3vw, 38px);
}


/* =========================================================
   CABEÇALHO DA PÁGINA
========================================================= */

.page-header {
    margin-bottom: 28px;
}


.page-eyebrow {
    display: block;

    margin-bottom: 7px;

    color: var(--fazan-primary);

    font-size: 0.78rem;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.2px;
}


.page-header h1 {
    margin: 0;

    font-size: clamp(1.8rem, 2.5vw, 2.25rem);
    line-height: 1.2;
}


.page-header p {
    max-width: 780px;

    margin: 8px 0 0;

    color: var(--text-secondary);

    font-size: 0.95rem;
    line-height: 1.55;
}


/* =========================================================
   CARDS DE INDICADORES
========================================================= */

.metric-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 18px;

    margin-bottom: 24px;
}


.metric-card {
    min-width: 0;

    min-height: 150px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    padding: 22px;

    background: #FFFFFF;

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

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

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

    overflow: hidden;
}


.metric-label {
    display: block;

    margin-bottom: 12px;

    color: var(--text-secondary);

    font-size: 0.9rem;
    font-weight: 600;

    line-height: 1.4;
}


.metric-value {
    display: block;

    max-width: 100%;

    margin-bottom: 10px;

    color: var(--fazan-dark);

    font-size: clamp(1.55rem, 2.2vw, 2rem);
    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -0.02em;

    overflow-wrap: anywhere;
}


.metric-card small {
    color: var(--text-secondary);

    font-size: 0.82rem;
    line-height: 1.4;
}


/* =========================================================
   PAINÉIS
========================================================= */

.dashboard-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(300px, 0.8fr);

    gap: 22px;

    align-items: stretch;
}


.panel-card {
    min-width: 0;

    padding: 24px;

    background: #FFFFFF;

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

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

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

    overflow: hidden;
}


.panel-header {
    min-width: 0;

    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;

    padding-bottom: 20px;

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


.panel-header > div {
    min-width: 0;
}


.panel-header h3 {
    margin: 0;

    font-size: 1.05rem;
    line-height: 1.3;

    overflow-wrap: anywhere;
}


.panel-header p {
    margin: 6px 0 0;

    color: var(--text-secondary);

    font-size: 0.88rem;
    line-height: 1.5;
}


.panel-header a {
    flex: 0 0 auto;

    color: var(--fazan-primary);

    font-size: 0.85rem;
    font-weight: 700;

    text-decoration: none;
}


.panel-header a:hover {
    text-decoration: underline;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.empty-state {
    min-height: 260px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 30px 20px;

    text-align: center;

    color: var(--text-secondary);
}


.empty-icon {
    width: 56px;
    height: 56px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 16px;

    background: var(--fazan-light);

    color: var(--fazan-dark);

    border-radius: 14px;

    font-size: 1.4rem;
}


.empty-state strong {
    margin-bottom: 7px;

    color: var(--text-primary);

    font-size: 0.95rem;
}


.empty-state span {
    max-width: 360px;

    font-size: 0.85rem;
    line-height: 1.6;
}


/* =========================================================
   RESUMO FINANCEIRO
========================================================= */

.financial-summary {
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding-top: 8px;
}


.financial-summary > div {
    min-width: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(110px, auto);

    align-items: center;

    gap: 20px;

    padding: 17px 0;

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


.financial-summary span {
    min-width: 0;

    color: var(--text-secondary);

    font-size: 0.88rem;
    line-height: 1.45;

    overflow-wrap: anywhere;
}


.financial-summary strong {
    max-width: 100%;

    text-align: right;

    color: var(--text-primary);

    font-size: clamp(0.95rem, 1.4vw, 1.08rem);
    line-height: 1.3;

    overflow-wrap: anywhere;
}


.financial-summary .summary-total {
    margin-top: 5px;

    border-bottom: 0;
}


.summary-total span,
.summary-total strong {
    color: var(--fazan-dark);

    font-weight: 800;
}


/* =========================================================
   RESPONSIVIDADE - NOTEBOOK
========================================================= */

@media (max-width: 1180px) {

    :root {
        --sidebar-width: 235px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   RESPONSIVIDADE - TABLET
========================================================= */

@media (max-width: 900px) {

    :root {
        --sidebar-width: 210px;
    }


    .sidebar {
        padding-left: 12px;
        padding-right: 12px;
    }


    .sidebar-brand {
        padding-left: 8px;
        padding-right: 8px;
    }


    .nav-item {
        padding:
            11px
            10px;

        font-size: 0.9rem;
    }


    .user-info {
        display: none;
    }


    .topbar {
        min-height: 78px;
    }

}


/* =========================================================
   RESPONSIVIDADE - MOBILE
========================================================= */

@media (max-width: 720px) {

    .app-shell {
        display: block;
    }


    .sidebar {
        display: none;
    }


    .main-content {
        width: 100%;

        margin-left: 0;
    }


    .topbar {
        min-height: 74px;

        padding:
            14px
            18px;
    }


    .topbar-user {
        gap: 8px;
    }


    .user-avatar {
        width: 38px;
        height: 38px;
    }


    .btn-logout {
        padding:
            7px
            10px;
    }


    .content-wrapper {
        padding: 20px 16px 28px;
    }


    .page-header {
        margin-bottom: 22px;
    }


    .metric-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .metric-card {
        min-height: 135px;

        padding: 19px;
    }


    .panel-card {
        padding: 19px;
    }


    .panel-header {
        flex-direction: column;

        gap: 10px;
    }


    .financial-summary > div {
        grid-template-columns: 1fr;

        gap: 5px;
    }


    .financial-summary strong {
        text-align: left;
    }

}


/* =========================================================
   TELAS MUITO PEQUENAS
========================================================= */

@media (max-width: 420px) {

    html {
        font-size: 15px;
    }


    .topbar h2 {
        max-width: 150px;
    }


    .login-area {
        padding: 16px;
    }


    .login-card {
        padding: 25px 20px;
    }


    .metric-value {
        font-size: 1.55rem;
    }

}

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

.form-page {
    width: 100%;
    max-width: 1400px;
}


.form-card {
    width: 100%;
    min-width: 0;

    margin-bottom: 22px;

    padding: clamp(20px, 2.5vw, 28px);

    background: var(--surface);

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

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

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


.form-card-header {
    margin-bottom: 24px;

    padding-bottom: 18px;

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


.form-card-header h2 {
    margin: 0;

    font-size: 1.15rem;
}


.form-card-header p {
    margin: 6px 0 0;

    color: var(--text-secondary);

    font-size: 0.9rem;
}


.form-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px, 1fr)
        );

    gap: 20px;
}


.field-group {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 8px;
}


.field-span-2 {
    grid-column: span 2;
}


.field-group label {
    color: var(--text-primary);

    font-size: 0.9rem;
    font-weight: 700;
}


.field-group input,
.field-group select,
.field-group textarea {
    width: 100%;

    min-width: 0;

    padding: 12px 14px;

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

    border-radius: 10px;

    background: #FFFFFF;

    color: var(--text-primary);

    font-size: 1rem;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.field-group input,
.field-group select {
    min-height: 46px;
}


.field-group textarea {
    resize: vertical;

    min-height: 110px;

    line-height: 1.5;
}


.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
    border-color:
        var(--fazan-primary);

    box-shadow:
        0 0 0 3px
        rgba(79, 124, 130, 0.14);
}


.form-actions {
    display: flex;

    justify-content: flex-end;

    gap: 12px;

    margin-top: 8px;
    margin-bottom: 40px;
}


.btn-primary {
    min-height: 46px;

    padding: 11px 20px;

    border: 0;

    border-radius: 10px;

    background:
        var(--fazan-dark);

    color: #FFFFFF;

    font-size: 0.95rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.15s ease;
}


.btn-primary:hover {
    background:
        var(--fazan-primary);

    transform:
        translateY(-1px);
}


@media (max-width: 760px) {

    .field-span-2 {
        grid-column: span 1;
    }


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


    .form-actions {
        justify-content: stretch;
    }


    .form-actions .btn-primary {
        width: 100%;
    }

}
/* =========================================================
   LISTAS / TABELAS / AÇÕES
========================================================= */

.page-header-actions {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;
}


.page-actions {
    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;
}


.btn-link {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    text-decoration: none;
}


.btn-secondary {
    min-height: 44px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 10px 16px;

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

    border-radius: 10px;

    background: #FFFFFF;

    color: var(--text-primary);

    font-size: 0.9rem;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;
}


.btn-secondary:hover {
    background: var(--background);
}


.search-bar {
    display: flex;

    gap: 10px;

    margin-bottom: 22px;
}


.search-bar input {
    width: min(100%, 460px);

    min-width: 0;

    min-height: 44px;

    padding: 10px 14px;

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

    border-radius: 10px;

    font-size: 0.95rem;

    outline: none;
}


.search-bar input:focus {
    border-color:
        var(--fazan-primary);

    box-shadow:
        0 0 0 3px
        rgba(79, 124, 130, 0.14);
}


.table-responsive {
    width: 100%;

    overflow-x: auto;

    border-radius: 10px;
}


.data-table {
    width: 100%;

    min-width: 680px;

    border-collapse: collapse;
}


.data-table th,
.data-table td {
    padding: 15px 14px;

    text-align: left;

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

    vertical-align: middle;
}


.data-table th {
    color: var(--text-secondary);

    font-size: 0.82rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.04em;
}


.data-table td {
    font-size: 0.92rem;
}


.data-table td strong {
    display: block;

    color: var(--text-primary);

    font-size: 0.95rem;
}


.table-subtext {
    display: block;

    margin-top: 4px;

    max-width: 520px;

    color: var(--text-secondary);

    font-size: 0.8rem;

    line-height: 1.4;

    overflow-wrap: anywhere;
}


.status-badge {
    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 0.78rem;

    font-weight: 800;

    white-space: nowrap;
}


.status-active {
    background:
        rgba(47, 125, 91, 0.12);

    color: #246347;
}


.status-inactive {
    background:
        rgba(179, 58, 58, 0.10);

    color: var(--danger);
}


/* =========================================================
   LISTAS SIMPLES
========================================================= */

.split-layout {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.7fr)
        minmax(0, 1.3fr);

    gap: 22px;

    align-items: start;
}


.simple-list {
    display: flex;

    flex-direction: column;
}


.simple-list-item {
    min-width: 0;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding: 16px 0;

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


.simple-list-item:last-child {
    border-bottom: 0;
}


.simple-list-item > div {
    min-width: 0;
}


.simple-list-item strong {
    display: block;

    font-size: 0.95rem;

    overflow-wrap: anywhere;
}


.simple-list-item span:not(.status-badge) {
    display: block;

    margin-top: 4px;

    color: var(--text-secondary);

    font-size: 0.82rem;

    line-height: 1.4;

    overflow-wrap: anywhere;
}


.field-margin-top {
    margin-top: 20px;
}


.form-actions-left {
    justify-content: flex-start;
}


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

@media (max-width: 900px) {

    .page-header-actions {
        align-items: flex-start;
        flex-direction: column;
    }


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

}


@media (max-width: 720px) {

    .page-actions {
        width: 100%;
    }


    .page-actions > * {
        flex: 1 1 auto;
    }


    .search-bar {
        flex-direction: column;
    }


    .search-bar input {
        width: 100%;
    }


    .search-bar .btn-secondary {
        width: 100%;
    }


    .simple-list-item {
        align-items: flex-start;
        flex-direction: column;
    }

}
/* =========================================================
   PRODUTO / VARIAÇÕES
========================================================= */

.table-link {
    color: var(--fazan-dark);

    font-size: 0.95rem;
    font-weight: 800;

    text-decoration: none;

    overflow-wrap: anywhere;
}


.table-link:hover {
    color: var(--fazan-primary);

    text-decoration: underline;
}


.product-summary-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 1fr)
        );

    gap: 16px;

    margin-bottom: 22px;
}


.summary-card {
    min-width: 0;

    padding: 18px;

    background: var(--surface);

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

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

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


.summary-card span {
    display: block;

    margin-bottom: 7px;

    color: var(--text-secondary);

    font-size: 0.82rem;
    font-weight: 600;
}


.summary-card strong {
    display: block;

    color: var(--fazan-dark);

    font-size: clamp(1rem, 1.5vw, 1.15rem);

    overflow-wrap: anywhere;
}


.variation-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 1fr)
        );

    gap: 16px;

    margin-top: 22px;
}


.variation-card {
    min-width: 0;

    padding: 20px;

    background: #FFFFFF;

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

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


.variation-card-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    padding-bottom: 16px;

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


.variation-card-header > div {
    min-width: 0;
}


.variation-card-header strong {
    display: block;

    font-size: 1rem;

    overflow-wrap: anywhere;
}


.variation-card-header span:not(.status-badge) {
    display: block;

    margin-top: 4px;

    color: var(--text-secondary);

    font-size: 0.8rem;

    overflow-wrap: anywhere;
}


.variation-info {
    display: grid;

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

    gap: 18px;

    padding-top: 18px;
}


.variation-info > div {
    min-width: 0;
}


.variation-info span {
    display: block;

    margin-bottom: 5px;

    color: var(--text-secondary);

    font-size: 0.8rem;
}


.variation-info strong {
    display: block;

    font-size: clamp(0.9rem, 1.3vw, 1rem);

    line-height: 1.4;

    overflow-wrap: anywhere;
}


@media (max-width: 520px) {

    .variation-grid {
        grid-template-columns: 1fr;
    }


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

}
/* =========================================================
   ESTOQUE
========================================================= */

.stock-value {
    color: var(--fazan-dark);

    font-size: 1rem;

    white-space: nowrap;
}


.status-low {
    background:
        rgba(169, 111, 19, 0.13);

    color:
        #87570E;
}


.table-action {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 36px;

    padding: 7px 11px;

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

    border-radius: 8px;

    background: #FFFFFF;

    color: var(--fazan-primary);

    font-size: 0.82rem;

    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;
}


.table-action:hover {
    border-color:
        var(--fazan-primary);

    background:
        rgba(79, 124, 130, 0.06);
}
/* =========================================================
   HISTÓRICO DE ESTOQUE
========================================================= */

.stock-filters {
    display: grid;

    grid-template-columns:
        minmax(220px, 1fr)
        minmax(180px, 260px)
        auto;

    gap: 16px;

    align-items: end;

    margin-bottom: 24px;
}


.stock-filter-actions {
    display: flex;

    align-items: center;

    gap: 10px;
}


.stock-history-table {
    min-width: 1000px;
}


.nowrap {
    white-space: nowrap;
}


.movement-badge {
    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 0.76rem;

    font-weight: 800;

    white-space: nowrap;
}


.movement-entry {
    background:
        rgba(47, 125, 91, 0.12);

    color:
        #246347;
}


.movement-exit {
    background:
        rgba(179, 58, 58, 0.10);

    color:
        var(--danger);
}


.movement-positive {
    color:
        #246347;

    font-weight: 800;

    white-space: nowrap;
}


.movement-negative {
    color:
        var(--danger);

    font-weight: 800;

    white-space: nowrap;
}


.observation-cell {
    min-width: 200px;

    max-width: 340px;

    white-space: pre-wrap;

    overflow-wrap: anywhere;
}


@media (max-width: 900px) {

    .stock-filters {
        grid-template-columns:
            1fr
            1fr;
    }


    .stock-filter-actions {
        grid-column:
            1 / -1;
    }

}


@media (max-width: 620px) {

    .stock-filters {
        grid-template-columns: 1fr;
    }


    .stock-filter-actions {
        grid-column: auto;

        flex-direction: column;

        align-items: stretch;
    }


    .stock-filter-actions > * {
        width: 100%;
    }

}
/* =========================================================
   PRODUÇÃO
========================================================= */

.production-table {
    min-width: 1180px;
}

.production-table td {
    vertical-align: middle;
}


.traceable-text,
.caixa-detail-note,
.caixa-movement-note p {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


.sale-internal-observation > .traceable-text {
    margin: 0;
}

.production-table .production-note {
    margin-top: 5px;
    max-width: 220px;
}

.production-table .production-note summary {
    width: fit-content;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
}

.production-table .production-note summary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.production-table .production-note-text {
    max-height: 10rem;
    margin-top: 5px;
    overflow: auto;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    font-size: 0.8rem;
    line-height: 1.4;
}
/* =========================================================
   ADICIONAIS
========================================================= */

.addon-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(260px, 1fr)
        );

    gap: 18px;
}


.addon-card {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 18px;

    padding: 20px;

    background: #FFFFFF;

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

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


.addon-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;
}


.addon-header > div {
    min-width: 0;
}


.addon-header strong {
    display: block;

    font-size: 1rem;

    overflow-wrap: anywhere;
}


.addon-header span:not(.status-badge) {
    display: block;

    margin-top: 5px;

    color: var(--text-secondary);

    font-size: 0.85rem;

    line-height: 1.5;

    overflow-wrap: anywhere;
}


.addon-value {
    padding: 16px;

    background: var(--background);

    border-radius: 10px;
}


.addon-value span {
    display: block;

    color: var(--text-secondary);

    font-size: 0.82rem;
}


.addon-value strong {
    display: block;

    margin-top: 4px;

    color: var(--fazan-dark);

    font-size: clamp(1.2rem, 2vw, 1.5rem);

    overflow-wrap: anywhere;
}


.addon-actions {
    display: flex;

    gap: 10px;

    flex-wrap: wrap;
}


.addon-actions form {
    margin: 0;
}


@media (max-width: 520px) {

    .addon-grid {
        grid-template-columns: 1fr;
    }


    .addon-actions {
        flex-direction: column;
    }


    .addon-actions > *,
    .addon-actions form,
    .addon-actions button {
        width: 100%;
    }

}

/* =========================================================
   PAGAMENTOS
========================================================= */

.payment-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(270px, 1fr)
        );

    gap: 18px;
}


.payment-card {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 18px;

    padding: 20px;

    background: var(--surface);

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

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


.payment-card-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;
}


.payment-card-header > div {
    min-width: 0;
}


.payment-card-header strong {
    display: block;

    font-size: 1rem;

    overflow-wrap: anywhere;
}


.payment-card-header span:not(.status-badge) {
    display: block;

    margin-top: 4px;

    color: var(--text-secondary);

    font-size: 0.82rem;
}


.payment-info {
    display: grid;

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

    gap: 14px;
}


.payment-info > div {
    min-width: 0;

    padding: 14px;

    background: var(--background);

    border-radius: 10px;
}


.payment-info span {
    display: block;

    color: var(--text-secondary);

    font-size: 0.8rem;
}


.payment-info strong {
    display: block;

    margin-top: 4px;

    font-size: 0.95rem;

    overflow-wrap: anywhere;
}


.payment-actions {
    display: flex;

    gap: 10px;

    flex-wrap: wrap;
}


.payment-actions form {
    margin: 0;
}


.checkbox-field {
    min-height: 46px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding-top: 26px;

    cursor: pointer;
}


.checkbox-field input {
    width: 18px;
    height: 18px;

    min-height: auto;
}


@media (max-width: 520px) {

    .payment-grid {
        grid-template-columns: 1fr;
    }


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


    .payment-actions {
        flex-direction: column;
    }


    .payment-actions > *,
    .payment-actions form,
    .payment-actions button {
        width: 100%;
    }


    .checkbox-field {
        padding-top: 0;
    }

}
/* =========================================================
   PDV
========================================================= */

.pdv-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 360px);

    gap: 22px;

    align-items: start;
}


.pdv-products {
    min-width: 0;
}


.pdv-reader-card {
    margin-bottom: 20px;

    padding: 22px;

    background: var(--fazan-dark);

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


.barcode-form label {
    display: block;

    margin-bottom: 10px;

    color: var(--fazan-light);

    font-size: 0.9rem;

    font-weight: 700;
}


.barcode-input-wrapper {
    display: grid;

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

    gap: 10px;
}


.barcode-input-wrapper input {
    min-width: 0;

    min-height: 52px;

    padding: 12px 16px;

    border: 0;

    border-radius: 10px;

    background: #FFFFFF;

    color: var(--text-primary);

    font-size: 1.05rem;

    outline: none;
}


.pdv-items-card {
    min-width: 0;
}


.pdv-item-list {
    display: flex;

    flex-direction: column;

    gap: 16px;

    padding-top: 20px;
}


.pdv-item {
    min-width: 0;

    padding: 18px;

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

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

    background: #FFFFFF;
}


.pdv-item-main {
    min-width: 0;

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}


.pdv-item-main > div {
    min-width: 0;
}


.pdv-item-main strong {
    display: block;

    font-size: 1rem;

    overflow-wrap: anywhere;
}


.pdv-item-main span {
    display: block;

    margin-top: 3px;

    color: var(--text-secondary);

    font-size: 0.82rem;

    overflow-wrap: anywhere;
}


.pdv-item-price {
    flex: 0 0 auto;

    color: var(--fazan-dark);

    font-size: 1rem;
}


.pdv-item-controls {
    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

    margin-top: 18px;
}


.quantity-button {
    width: 38px;
    height: 38px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

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

    border-radius: 8px;

    background: var(--surface);

    color: var(--fazan-dark);

    font-size: 1.15rem;

    font-weight: 800;

    cursor: pointer;
}


.quantity-display {
    min-width: 42px;

    text-align: center;

    font-size: 1rem;
}


.btn-remove {
    min-height: 38px;

    padding: 8px 12px;

    border:
        1px solid
        rgba(179, 58, 58, 0.2);

    border-radius: 8px;

    background:
        rgba(179, 58, 58, 0.05);

    color: var(--danger);

    font-size: 0.82rem;

    font-weight: 700;

    cursor: pointer;
}


.addon-selector {
    display: grid;

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

    gap: 10px;

    margin-top: 18px;
}


.addon-selector select {
    min-width: 0;

    min-height: 42px;

    padding: 9px 12px;

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

    border-radius: 9px;

    background: #FFFFFF;

    font-size: 0.9rem;
}


.pdv-addon-list {
    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-top: 14px;

    padding: 12px;

    background: var(--background);

    border-radius: 10px;
}


.pdv-addon-row {
    min-width: 0;

    display: grid;

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

    align-items: center;

    gap: 10px;

    font-size: 0.86rem;
}


.pdv-addon-row span {
    min-width: 0;

    overflow-wrap: anywhere;
}


.pdv-addon-row strong {
    white-space: nowrap;
}


.addon-remove {
    width: 28px;
    height: 28px;

    border: 0;

    border-radius: 50%;

    background:
        rgba(179, 58, 58, 0.08);

    color: var(--danger);

    font-size: 1rem;

    cursor: pointer;
}


.pdv-item-total {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-top: 16px;

    padding-top: 14px;

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


.pdv-item-total span {
    color: var(--text-secondary);

    font-size: 0.88rem;
}


.pdv-item-total strong {
    color: var(--fazan-dark);

    font-size: 1rem;

    overflow-wrap: anywhere;
}


.pdv-summary {
    min-width: 0;

    position: sticky;

    top: 110px;
}


.pdv-summary-card {
    min-width: 0;

    padding: 24px;

    background: var(--fazan-dark);

    color: #FFFFFF;

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

    box-shadow: var(--shadow-md);
}


.pdv-summary-label {
    display: block;

    color: var(--fazan-secondary);

    font-size: 0.8rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.pdv-sale-number {
    display: block;

    margin-top: 5px;

    font-size: 1.15rem;
}


.pdv-totals {
    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 28px;
}


.pdv-totals > div {
    display: flex;

    justify-content: space-between;

    gap: 15px;
}


.pdv-totals span {
    color: var(--fazan-light);

    font-size: 0.88rem;
}


.pdv-totals strong {
    max-width: 60%;

    text-align: right;

    overflow-wrap: anywhere;
}


.pdv-grand-total {
    margin-top: 24px;

    padding-top: 20px;

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


.pdv-grand-total span {
    display: block;

    color: var(--fazan-light);

    font-size: 0.85rem;
}


.pdv-grand-total strong {
    display: block;

    margin-top: 6px;

    color: #FFFFFF;

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.3rem
        );

    line-height: 1.1;

    overflow-wrap: anywhere;
}


.btn-finalize-disabled {
    width: 100%;

    min-height: 48px;

    margin-top: 24px;

    border: 0;

    border-radius: 10px;

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

    color:
        rgba(255, 255, 255, 0.5);

    font-size: 0.95rem;

    font-weight: 800;

    cursor: not-allowed;
}


.pdv-next-step {
    display: block;

    margin-top: 12px;

    color: var(--fazan-secondary);

    font-size: 0.78rem;

    line-height: 1.45;

    text-align: center;
}


@media (max-width: 1050px) {

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


    .pdv-summary {
        position: static;
    }

}


@media (max-width: 620px) {

    .barcode-input-wrapper {
        grid-template-columns: 1fr;
    }


    .barcode-input-wrapper .btn-primary {
        width: 100%;
    }


    .pdv-item-main {
        flex-direction: column;
    }


    .pdv-item-price {
        flex: auto;
    }


    .addon-selector {
        grid-template-columns: 1fr;
    }


    .addon-selector .btn-secondary {
        width: 100%;
    }


    .pdv-addon-row {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }


    .pdv-addon-row form {
        grid-column: 1 / -1;
    }

}
/* =========================================================
   FINALIZAÇÃO DO PDV
========================================================= */

.pdv-payment-form {
    margin-top: 24px;
}


.pdv-payment-section {
    margin-bottom: 14px;
}


.pdv-payment-section label {
    display: block;

    margin-bottom: 7px;

    color: var(--fazan-light);

    font-size: 0.82rem;

    font-weight: 700;
}


.pdv-payment-section select {
    width: 100%;

    min-height: 44px;

    padding: 9px 12px;

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    border-radius: 9px;

    background: #FFFFFF;

    color: var(--text-primary);

    font-size: 0.95rem;
}


.btn-finalize {
    width: 100%;

    min-height: 50px;

    margin-top: 8px;

    border: 0;

    border-radius: 10px;

    background: var(--fazan-light);

    color: var(--fazan-dark);

    font-size: 1rem;

    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.15s ease;
}


.btn-finalize:hover {
    background: #FFFFFF;

    transform:
        translateY(-1px);
}
/* =========================================================
   HISTÓRICO DE VENDAS
========================================================= */

.sales-filters {
    display: grid;

    grid-template-columns:
        minmax(150px, 0.7fr)
        minmax(160px, 0.8fr)
        minmax(160px, 0.8fr)
        minmax(160px, 0.8fr)
        auto;

    gap: 16px;

    align-items: end;

    margin-bottom: 24px;
}


.sales-filter-actions {
    display: flex;

    gap: 10px;

    align-items: center;
}


.sales-history-table {
    min-width: 1100px;
}


.status-open {
    background:
        rgba(79, 124, 130, 0.14);

    color:
        var(--fazan-primary);
}


@media (max-width: 1100px) {

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


    .sales-filter-actions {
        grid-column:
            1 / -1;
    }

}


@media (max-width: 620px) {

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


    .sales-filter-actions {
        grid-column: auto;

        flex-direction: column;
    }


    .sales-filter-actions > * {
        width: 100%;
    }

}
/* =========================================================
   DETALHE DA VENDA
========================================================= */

.sale-payment-card {
    margin-bottom: 22px;
}


.sale-payment-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 1fr)
        );

    gap: 16px;

    padding-top: 20px;
}


.sale-payment-grid > div {
    min-width: 0;

    padding: 16px;

    background: var(--background);

    border-radius: 10px;
}


.sale-payment-grid span {
    display: block;

    margin-bottom: 5px;

    color: var(--text-secondary);

    font-size: 0.82rem;
}


.sale-payment-grid strong {
    display: block;

    color: var(--fazan-dark);

    font-size: 0.98rem;

    overflow-wrap: anywhere;
}

/* =========================================================
   CANCELAMENTO DE VENDA
========================================================= */

.sale-cancelled-box {
    display: flex;

    flex-direction: column;

    gap: 6px;

    margin-bottom: 22px;

    padding: 18px;

    border:
        1px solid
        rgba(179, 58, 58, 0.22);

    border-left:
        4px solid
        var(--danger);

    border-radius: 10px;

    background:
        rgba(179, 58, 58, 0.06);
}


.sale-cancelled-box strong {
    color: var(--danger);

    font-size: 1rem;
}


.sale-cancelled-box span {
    color: var(--text-secondary);

    font-size: 0.88rem;

    line-height: 1.45;
}


.sale-cancel-card {
    margin-top: 22px;
}


.cancel-form {
    padding-top: 20px;
}


.btn-danger {
    min-height: 44px;

    padding: 10px 18px;

    border: 0;

    border-radius: 10px;

    background: var(--danger);

    color: #FFFFFF;

    font-size: 0.92rem;

    font-weight: 800;

    cursor: pointer;

    transition:
        opacity 0.2s ease,
        transform 0.15s ease;
}


.btn-danger:hover {
    opacity: 0.9;

    transform:
        translateY(-1px);
}

/* =====================================================
   PDV - PESQUISA DE PRODUTOS
===================================================== */

.pdv-search-results {
    margin-top: 16px;
}

.pdv-search-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pdv-search-item {
    display: grid;
    grid-template-columns:
        minmax(220px, 1fr)
        minmax(80px, 120px)
        minmax(100px, 140px)
        auto;

    gap: 20px;
    align-items: center;

    padding: 16px;

    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.pdv-search-info {
    display: flex;
    flex-direction: column;
    gap: 4px;

    min-width: 0;
}

.pdv-search-info strong {
    font-size: 1rem;
}

.pdv-search-info span {
    font-size: 0.82rem;
    opacity: 0.8;

    overflow-wrap: anywhere;
}

.pdv-search-stock,
.pdv-search-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pdv-search-stock span {
    font-size: 0.75rem;
    opacity: 0.75;
}

.pdv-search-price strong {
    white-space: nowrap;
}


/* =====================================================
   RESPONSIVIDADE
===================================================== */

@media (max-width: 900px) {

    .pdv-search-item {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }

    .pdv-search-stock,
    .pdv-search-price {
        align-items: flex-end;
    }

}


@media (max-width: 600px) {

    .pdv-search-item {
        grid-template-columns: 1fr;
    }

    .pdv-search-stock,
    .pdv-search-price {
        align-items: flex-start;
    }

    .pdv-search-item form,
    .pdv-search-item form button {
        width: 100%;
    }

}
/* =====================================================
   CLIENTES
===================================================== */

.client-search-form {
    display: grid;

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

    gap: 16px;

    align-items: end;

    margin-bottom: 24px;
}


.client-search-actions {
    display: flex;

    gap: 10px;
}


@media (max-width: 700px) {

    .client-search-form {
        grid-template-columns: 1fr;
    }


    .client-search-actions {
        flex-direction: column;
    }


    .client-search-actions > * {
        width: 100%;
    }

}

/* =====================================================
   VALIDAÇÃO DE CAMPOS
===================================================== */

.field-error {
    border-color: #b42318 !important;

    box-shadow:
        0 0 0 2px
        rgba(180, 35, 24, 0.08);
}


.field-error:focus {
    border-color: #b42318 !important;

    box-shadow:
        0 0 0 3px
        rgba(180, 35, 24, 0.12);
}


.field-error-message {
    display: block;

    margin-top: 6px;

    color: #b42318;

    font-size: 0.78rem;

    font-weight: 600;

    line-height: 1.35;
}


.field-help {
    display: block;

    margin-top: 6px;

    color: var(--text-secondary);

    font-size: 0.78rem;

    line-height: 1.35;
}

/* =====================================================
   AÇÕES DAS TABELAS
===================================================== */

.table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


.inline-form {
    display: inline-flex;
    margin: 0;
}


.btn-sm {
    min-height: 34px;
    padding: 7px 11px;

    font-size: 0.78rem;

    white-space: nowrap;
}


@media (max-width: 700px) {

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


    .table-actions > *,
    .table-actions form,
    .table-actions button {
        width: 100%;
    }

}

/* =====================================================
   RESPONSIVIDADE GLOBAL - FAZAN GESTÃO
===================================================== */

:root {
    --sidebar-width: 272px;
    --content-gap: 24px;
}


/* =====================================================
   CONTEÚDO PRINCIPAL
===================================================== */

.app-main,
.main-content,
.content-wrapper {
    min-width: 0;
}


.page-container,
.page-content,
.content-area {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}


/* =====================================================
   CARDS / PAINÉIS
===================================================== */

.panel-card,
.form-card,
.metric-card,
.pdv-reader-card {
    min-width: 0;
    max-width: 100%;
}


/* =====================================================
   TEXTOS LONGOS
===================================================== */

.data-table td,
.data-table th,
.panel-card,
.form-card {
    overflow-wrap: normal;
    word-break: normal;
}


.table-subtext {
    overflow-wrap: anywhere;
}


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

.table-responsive {
    width: 100%;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
}


.data-table {
    width: 100%;

    border-collapse: collapse;

    table-layout: auto;
}


.data-table th,
.data-table td {
    padding: 14px 12px;

    vertical-align: middle;

    white-space: nowrap;
}


/* Primeira coluna pode crescer */
.data-table th:first-child,
.data-table td:first-child {
    min-width: 190px;

    white-space: normal;
}


/* Não quebrar dados importantes */
.data-table td:nth-child(3),
.data-table td:nth-child(4),
.data-table td:nth-child(5) {
    white-space: nowrap;
}


/* Textos livres de auditoria precisam preservar as linhas mesmo dentro
   das tabelas, cuja regra geral mantém os demais dados em uma linha. */
.data-table td.traceable-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


/* =====================================================
   AÇÕES
===================================================== */

.table-actions {
    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: nowrap;

    min-width: max-content;
}


.inline-form {
    display: inline-flex;

    margin: 0;
}


.table-actions .btn-sm {
    min-height: 34px;

    padding: 7px 10px;

    font-size: 0.76rem;

    white-space: nowrap;
}


/* =====================================================
   CABEÇALHOS
===================================================== */

.page-header-actions {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 20px;

    flex-wrap: wrap;
}


.page-actions {
    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;
}


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

.form-grid {
    display: grid;

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

    gap: 18px;
}


.field-group,
.field-span-2 {
    min-width: 0;
}


.field-span-2 {
    grid-column: span 2;
}


.field-group input,
.field-group select,
.field-group textarea {
    width: 100%;
    min-width: 0;
}


/* =====================================================
   NOTEBOOK / DESKTOP MÉDIO
===================================================== */

@media (max-width: 1400px) {

    :root {
        --sidebar-width: 240px;
        --content-gap: 18px;
    }


    .app-main,
    .main-content {
        padding-left: 18px;
        padding-right: 18px;
    }


    .data-table {
        min-width: 1050px;
    }


    .data-table th,
    .data-table td {
        padding: 12px 10px;

        font-size: 0.84rem;
    }


    .data-table th:first-child,
    .data-table td:first-child {
        min-width: 170px;
    }


    .table-actions .btn-sm {
        padding: 6px 9px;
    }


    .form-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}


/* =====================================================
   NOTEBOOK MENOR / TABLET HORIZONTAL
===================================================== */

@media (max-width: 1100px) {

    .data-table {
        min-width: 980px;
    }


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


    .field-span-2 {
        grid-column: span 2;
    }


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


    .page-header-actions {
        align-items: stretch;
    }


    .page-actions {
        width: 100%;
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    .app-main,
    .main-content {
        padding-left: 14px;
        padding-right: 14px;
    }


    .panel-card,
    .form-card {
        padding: 16px;
    }


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


    .field-span-2 {
        grid-column: span 1;
    }


    .metric-grid {
        grid-template-columns: 1fr;
    }


    .client-search-form {
        grid-template-columns: 1fr;
    }


    .client-search-actions {
        width: 100%;

        flex-wrap: wrap;
    }


    .client-search-actions > * {
        flex: 1;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .page-header h1 {
        font-size: 1.7rem;
    }


    .page-header p {
        font-size: 0.9rem;
    }


    .page-actions {
        flex-direction: column;

        align-items: stretch;
    }


    .page-actions > * {
        width: 100%;
    }


    .panel-card,
    .form-card {
        padding: 14px;

        border-radius: 12px;
    }


    .client-search-actions {
        flex-direction: column;
    }


    .client-search-actions > * {
        width: 100%;
    }


    .data-table {
        min-width: 900px;
    }

}
/* =====================================================
   CLIENTES - RESPONSIVIDADE DA TABELA
===================================================== */

.nowrap {
    white-space: nowrap !important;
}


.clients-table {
    min-width: 1100px;
}


.table-responsive {
    width: 100%;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
}


.clients-table th,
.clients-table td {
    white-space: nowrap;
}


.clients-table th:first-child,
.clients-table td:first-child {
    min-width: 190px;
    white-space: normal;
}


.table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}


@media (max-width: 1400px) {

    .clients-table {
        min-width: 1050px;
    }

}


@media (max-width: 900px) {

    .clients-table {
        min-width: 1000px;
    }

}
/* =====================================================
   PDV - CLIENTE DA VENDA
===================================================== */

.pdv-customer {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 20px;
    margin-bottom: 20px;

    padding: 16px;

    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
}


.pdv-customer-label {
    font-size: 0.72rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.05em;

    opacity: 0.65;
}


.pdv-customer-default,
.pdv-customer-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.pdv-customer-default span,
.pdv-customer-info span,
.pdv-customer-empty {
    font-size: 0.8rem;
    opacity: 0.7;
}


.pdv-customer-selected {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 12px;
}


.pdv-customer-form {
    display: flex;
    gap: 8px;
}


.pdv-customer-form select {
    width: 100%;
    min-width: 0;
}


.pdv-customer-remove {
    border: 0;
    background: transparent;

    cursor: pointer;

    font-size: 0.78rem;
    font-weight: 600;

    text-decoration: underline;
}


@media (max-width: 600px) {

    .pdv-customer-form {
        flex-direction: column;
    }


    .pdv-customer-form button {
        width: 100%;
    }


    .pdv-customer-selected {
        align-items: flex-start;
    }

}
/* =====================================================
   PDV - CLIENTE / BUSCA INTELIGENTE
===================================================== */

.pdv-customer-card {
    display: flex;
    flex-direction: column;
    gap: 14px;

    margin: 20px 0;
    padding: 16px;

    background:
        linear-gradient(
            180deg,
            rgba(184, 227, 233, 0.18),
            rgba(255, 255, 255, 0.7)
        );

    border:
        1px solid
        rgba(79, 124, 130, 0.18);

    border-radius: 14px;
}


.pdv-customer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}


.pdv-customer-header > div {
    display: flex;
    flex-direction: column;

    gap: 2px;

    min-width: 0;
}


.pdv-customer-header strong {
    color: #0B2E33;

    font-size: 0.9rem;
}


.pdv-customer-eyebrow {
    color: #4F7C82;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.pdv-customer-status {
    padding: 5px 9px;

    border-radius: 999px;

    background: #B8E3E9;

    color: #0B2E33;

    font-size: 0.68rem;
    font-weight: 700;

    white-space: nowrap;
}


.pdv-customer-status-muted {
    background:
        rgba(147, 177, 181, 0.16);

    color: #4F7C82;
}


/* =====================================================
   CONSUMIDOR FINAL
===================================================== */

.pdv-customer-empty-state,
.pdv-customer-selected {
    display: flex;

    align-items: center;

    gap: 12px;
}


.pdv-customer-avatar,
.pdv-customer-result-avatar {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    border-radius: 12px;

    background: #4F7C82;

    color: #ffffff;

    font-size: 0.95rem;
    font-weight: 800;
}


.pdv-customer-avatar-empty {
    background:
        rgba(79, 124, 130, 0.12);

    color: #4F7C82;
}


.pdv-customer-empty-state > div:last-child,
.pdv-customer-info {
    display: flex;
    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


.pdv-customer-empty-state strong,
.pdv-customer-info strong {
    color: #0B2E33;

    font-size: 0.88rem;
}


.pdv-customer-empty-state span,
.pdv-customer-info span {
    color: #5f7073;

    font-size: 0.76rem;

    line-height: 1.35;

    overflow-wrap: anywhere;
}


.pdv-customer-selected {
    padding: 10px;

    background: #ffffff;

    border:
        1px solid
        rgba(79, 124, 130, 0.14);

    border-radius: 12px;
}


.pdv-customer-selected .pdv-customer-info {
    flex: 1;
}


.pdv-customer-change {
    padding: 7px 9px;

    border: 0;

    border-radius: 8px;

    background:
        rgba(79, 124, 130, 0.10);

    color: #4F7C82;

    font-size: 0.72rem;
    font-weight: 700;

    cursor: pointer;
}


.pdv-customer-change:hover {
    background:
        rgba(79, 124, 130, 0.18);
}


/* =====================================================
   PESQUISA
===================================================== */

.pdv-customer-search {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 6px;
}


.pdv-customer-search > label {
    color: #0B2E33;

    font-size: 0.72rem;
    font-weight: 700;
}


.pdv-customer-search-box {
    position: relative;

    display: flex;
    align-items: center;
}


.pdv-customer-search-box input {
    width: 100%;
    min-width: 0;

    height: 42px;

    padding:
        0
        38px
        0
        36px;

    border:
        1px solid
        rgba(79, 124, 130, 0.25);

    border-radius: 10px;

    background: #ffffff;

    color: #0B2E33;

    font-size: 0.82rem;

    outline: none;

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


.pdv-customer-search-box input:focus {
    border-color: #4F7C82;

    box-shadow:
        0 0 0 3px
        rgba(184, 227, 233, 0.55);
}


.pdv-search-icon {
    position: absolute;

    left: 12px;

    z-index: 1;

    color: #4F7C82;

    font-size: 1rem;

    pointer-events: none;
}


.pdv-customer-loading {
    position: absolute;

    right: 12px;

    color: #4F7C82;

    font-weight: 700;
}


/* =====================================================
   RESULTADOS
===================================================== */

.pdv-customer-results {
    position: absolute;

    top: calc(100% + 6px);
    left: 0;
    right: 0;

    z-index: 50;

    max-height: 320px;

    overflow-y: auto;

    padding: 6px;

    background: #ffffff;

    border:
        1px solid
        rgba(79, 124, 130, 0.20);

    border-radius: 12px;

    box-shadow:
        0 16px 32px
        rgba(11, 46, 51, 0.14);
}


.pdv-customer-result {
    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 10px;

    padding: 10px;

    border-radius: 9px;

    transition:
        background 0.15s ease;
}


.pdv-customer-result:hover {
    background:
        rgba(184, 227, 233, 0.20);
}


.pdv-customer-result-avatar {
    width: 36px;
    height: 36px;

    flex-basis: 36px;

    border-radius: 10px;

    font-size: 0.82rem;
}


.pdv-customer-result-info {
    display: flex;
    flex-direction: column;

    gap: 2px;

    min-width: 0;
}


.pdv-customer-result-info strong {
    overflow: hidden;

    color: #0B2E33;

    font-size: 0.82rem;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.pdv-customer-result-info > span {
    overflow: hidden;

    color: #6e7c7e;

    font-size: 0.7rem;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.pdv-customer-result-meta {
    display: flex;

    gap: 7px;

    flex-wrap: wrap;
}


.pdv-customer-result-meta span {
    color: #6e7c7e;

    font-size: 0.68rem;
}


.pdv-customer-select-button {
    min-height: 32px;

    padding: 6px 9px;

    border: 0;

    border-radius: 8px;

    background: #0B2E33;

    color: #ffffff;

    font-size: 0.7rem;
    font-weight: 700;

    cursor: pointer;
}


.pdv-customer-select-button:hover {
    background: #4F7C82;
}


/* =====================================================
   SEM RESULTADOS
===================================================== */

.pdv-customer-no-results {
    display: flex;
    flex-direction: column;

    gap: 4px;

    padding: 14px;

    text-align: center;
}


.pdv-customer-no-results strong {
    color: #0B2E33;

    font-size: 0.8rem;
}


.pdv-customer-no-results span {
    color: #6e7c7e;

    font-size: 0.72rem;
}


.pdv-customer-no-results a {
    margin-top: 5px;

    color: #4F7C82;

    font-size: 0.72rem;
    font-weight: 700;

    text-decoration: none;
}


/* =====================================================
   NOVO CLIENTE
===================================================== */

.pdv-customer-new {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 8px;

    padding-top: 4px;

    font-size: 0.7rem;
}


.pdv-customer-new span {
    color: #778588;
}


.pdv-customer-new-link {
    color: #4F7C82;

    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;
}


.pdv-customer-new-link:hover {
    text-decoration: underline;
}


/* =====================================================
   RESPONSIVIDADE
===================================================== */

@media (max-width: 1100px) {

    .pdv-customer-result {
        grid-template-columns:
            36px
            minmax(0, 1fr);
    }


    .pdv-customer-result form {
        grid-column:
            1 / -1;
    }


    .pdv-customer-select-button {
        width: 100%;
    }

}


@media (max-width: 600px) {

    .pdv-customer-card {
        padding: 14px;
    }


    .pdv-customer-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .pdv-customer-selected {
        align-items: flex-start;
    }


    .pdv-customer-new {
        align-items: flex-start;

        flex-direction: column;
    }

}
/* =====================================================
   PDV - CLIENTE
   MELHORIA DE CONTRASTE / LEGIBILIDADE
===================================================== */


/* Card principal */
.pdv-customer-card {
    background:
        linear-gradient(
            145deg,
            #0B2E33 0%,
            #123D43 100%
        ) !important;

    border:
        1px solid
        rgba(184, 227, 233, 0.20) !important;

    box-shadow:
        0 8px 22px
        rgba(11, 46, 51, 0.16);
}


/* =====================================================
   CABEÇALHO
===================================================== */

.pdv-customer-eyebrow {
    color: #B8E3E9 !important;

    opacity: 1 !important;

    font-weight: 800;
}


.pdv-customer-header strong {
    color: #FFFFFF !important;

    opacity: 1 !important;
}


/* Badge Consumidor final */
.pdv-customer-status {
    background: #B8E3E9 !important;

    color: #0B2E33 !important;

    opacity: 1 !important;

    font-weight: 800;
}


.pdv-customer-status-muted {
    background:
        rgba(184, 227, 233, 0.16) !important;

    color: #FFFFFF !important;

    border:
        1px solid
        rgba(184, 227, 233, 0.28);
}


/* =====================================================
   CONSUMIDOR FINAL
===================================================== */

.pdv-customer-empty-state strong {
    color: #FFFFFF !important;

    opacity: 1 !important;

    font-weight: 700;
}


.pdv-customer-empty-state span {
    color: #FFFFFF !important;

    opacity: 0.88 !important;

    font-weight: 400;

    line-height: 1.45;
}


/* Ícone */
.pdv-customer-avatar-empty {
    background: #B8E3E9 !important;

    color: #000000 !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.25);
}


/* =====================================================
   CLIENTE SELECIONADO
===================================================== */

.pdv-customer-selected {
    background:
        rgba(255, 255, 255, 0.08) !important;

    border:
        1px solid
        rgba(184, 227, 233, 0.22) !important;
}


.pdv-customer-selected .pdv-customer-avatar {
    background: #B8E3E9 !important;

    color: #000000 !important;
}


.pdv-customer-info strong {
    color: #FFFFFF !important;

    opacity: 1 !important;
}


.pdv-customer-info span {
    color: #FFFFFF !important;

    opacity: 0.86 !important;
}


/* Botão Trocar */
.pdv-customer-change {
    background:
        rgba(184, 227, 233, 0.14) !important;

    color: #FFFFFF !important;

    border:
        1px solid
        rgba(184, 227, 233, 0.22) !important;
}


.pdv-customer-change:hover {
    background: #B8E3E9 !important;

    color: #0B2E33 !important;
}


/* =====================================================
   LABEL BUSCAR CLIENTE
===================================================== */

.pdv-customer-search > label {
    color: #FFFFFF !important;

    opacity: 1 !important;

    font-weight: 700;
}


/* =====================================================
   INPUT DE PESQUISA
===================================================== */

.pdv-customer-search-box input {
    background: #FFFFFF !important;

    color: #0B2E33 !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.35) !important;

    font-weight: 500;
}


.pdv-customer-search-box input::placeholder {
    color: #52676B !important;

    opacity: 1 !important;
}


.pdv-customer-search-box input:focus {
    border-color: #B8E3E9 !important;

    box-shadow:
        0 0 0 3px
        rgba(184, 227, 233, 0.30) !important;
}


/* Ícone de pesquisa PRETO */
.pdv-search-icon {
    color: #000000 !important;

    opacity: 1 !important;

    font-weight: 900;
}


/* Loading */
.pdv-customer-loading {
    color: #0B2E33 !important;

    opacity: 1 !important;
}


/* =====================================================
   RODAPÉ - CADASTRAR CLIENTE
===================================================== */

.pdv-customer-new {
    border-top:
        1px solid
        rgba(184, 227, 233, 0.15);

    padding-top: 11px;
}


.pdv-customer-new span {
    color: #FFFFFF !important;

    opacity: 0.85 !important;
}


/* Link agora ganha muito mais contraste */
.pdv-customer-new-link {
    color: #B8E3E9 !important;

    opacity: 1 !important;

    font-weight: 800;

    text-decoration: none;
}


.pdv-customer-new-link:hover {
    color: #FFFFFF !important;

    text-decoration: underline;
}


/* =====================================================
   LISTA DE RESULTADOS
===================================================== */

.pdv-customer-results {
    background: #FFFFFF !important;

    border:
        1px solid
        rgba(11, 46, 51, 0.18) !important;

    box-shadow:
        0 18px 40px
        rgba(0, 0, 0, 0.22) !important;
}


.pdv-customer-result {
    background: #FFFFFF;
}


.pdv-customer-result:hover {
    background: #EAF5F6 !important;
}


/* Avatar dos resultados */
.pdv-customer-result-avatar {
    background: #0B2E33 !important;

    color: #FFFFFF !important;
}


/* Nome */
.pdv-customer-result-info strong {
    color: #0B2E33 !important;

    opacity: 1 !important;

    font-weight: 800;
}


/* Nome fantasia */
.pdv-customer-result-info > span {
    color: #405A5E !important;

    opacity: 1 !important;
}


/* CPF / telefone */
.pdv-customer-result-meta span {
    color: #405A5E !important;

    opacity: 1 !important;

    font-weight: 500;
}


/* Botão selecionar */
.pdv-customer-select-button {
    background: #0B2E33 !important;

    color: #FFFFFF !important;
}


.pdv-customer-select-button:hover {
    background: #4F7C82 !important;
}


/* =====================================================
   NENHUM RESULTADO
===================================================== */

.pdv-customer-no-results strong {
    color: #0B2E33 !important;

    opacity: 1 !important;
}


.pdv-customer-no-results span {
    color: #405A5E !important;

    opacity: 1 !important;
}


.pdv-customer-no-results a {
    color: #0B2E33 !important;

    font-weight: 800;
}


.pdv-customer-no-results a:hover {
    color: #4F7C82 !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .pdv-customer-card {
        padding: 15px !important;
    }


    .pdv-customer-empty-state {
        align-items: flex-start;
    }


    .pdv-customer-empty-state span {
        font-size: 0.78rem;
    }


    .pdv-customer-new-link {
        font-size: 0.76rem;
    }

}
/* =====================================================
   PDV - DINHEIRO / TROCO
===================================================== */

.pdv-cash-section {
    display: flex;
    flex-direction: column;

    gap: 14px;

    margin-top: 14px;

    padding: 16px;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #0B2E33,
            #123D43
        );

    border:
        1px solid
        rgba(184, 227, 233, 0.20);
}


.pdv-cash-section[hidden] {
    display: none !important;
}


.pdv-cash-header {
    display: flex;

    justify-content: space-between;

    align-items: center;
}


.pdv-cash-header > div {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


.pdv-cash-header span {
    color: #B8E3E9;

    font-size: 0.68rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.06em;
}


.pdv-cash-header strong {
    color: #FFFFFF;

    font-size: 0.88rem;
}


/* =====================================================
   TOTAL
===================================================== */

.pdv-cash-total {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 10px 0;

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

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.10);
}


.pdv-cash-total span {
    color: #FFFFFF;

    opacity: 0.85;

    font-size: 0.78rem;
}


.pdv-cash-total strong {
    color: #FFFFFF;

    font-size: 1rem;
}


/* =====================================================
   INPUT
===================================================== */

.pdv-cash-field {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.pdv-cash-field label {
    color: #FFFFFF;

    font-size: 0.76rem;

    font-weight: 700;
}


.pdv-money-input {
    display: flex;

    align-items: center;

    overflow: hidden;

    background: #FFFFFF;

    border-radius: 10px;

    border:
        2px solid
        transparent;
}


.pdv-money-input:focus-within {
    border-color: #B8E3E9;

    box-shadow:
        0 0 0 3px
        rgba(184, 227, 233, 0.20);
}


.pdv-money-input span {
    padding-left: 13px;

    color: #0B2E33;

    font-weight: 800;
}


.pdv-money-input input {
    width: 100%;

    min-width: 0;

    height: 46px;

    padding:
        0
        12px
        0
        7px;

    border: 0;

    outline: none;

    background: transparent;

    color: #0B2E33;

    font-size: 1rem;

    font-weight: 800;
}


/* =====================================================
   ATALHOS
===================================================== */

.pdv-cash-shortcuts {
    display: grid;

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

    gap: 7px;
}


.pdv-cash-shortcut {
    min-height: 36px;

    border:
        1px solid
        rgba(184, 227, 233, 0.24);

    border-radius: 9px;

    background:
        rgba(184, 227, 233, 0.10);

    color: #FFFFFF;

    font-size: 0.72rem;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}


.pdv-cash-shortcut:hover {
    background: #B8E3E9;

    color: #0B2E33;
}


/* =====================================================
   TROCO
===================================================== */

.pdv-change-box {
    display: flex;

    flex-direction: column;

    gap: 3px;

    padding: 13px;

    border-radius: 11px;

    background: #B8E3E9;
}


.pdv-change-box > span {
    color: #0B2E33;

    font-size: 0.66rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.06em;
}


.pdv-change-box strong {
    color: #0B2E33;

    font-size: 1.25rem;

    font-weight: 900;
}


.pdv-change-box small {
    margin-top: 3px;

    font-size: 0.7rem;

    font-weight: 700;
}


.pdv-change-warning {
    background: #FDE8E7;
}


.pdv-change-warning > span,
.pdv-change-warning strong,
.pdv-change-warning small {
    color: #9B1C1C;
}


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

@media (max-width: 600px) {

    .pdv-cash-shortcuts {
        grid-template-columns: 1fr 1fr;
    }


    .pdv-cash-section {
        padding: 14px;
    }

}
/* =====================================================
   DETALHES DA VENDA - RECEBIDO / TROCO
===================================================== */

.sale-payment-highlight {
    padding: 10px 12px;

    border-radius: 10px;

    background:
        rgba(184, 227, 233, 0.16);

    border:
        1px solid
        rgba(79, 124, 130, 0.18);
}


.sale-payment-highlight span {
    color: #405A5E !important;

    font-weight: 600;
}


.sale-payment-highlight strong {
    color: #0B2E33 !important;

    font-weight: 800;
}
/* =====================================================
   HISTÓRICO DE VENDAS - LAYOUT
===================================================== */

.sales-history-filter-card {
    margin-bottom: 18px;
}


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

.sales-history-filters {
    display: grid;

    grid-template-columns:
        minmax(260px, 2fr)
        minmax(140px, 1fr)
        minmax(160px, 1fr)
        minmax(145px, 1fr)
        minmax(145px, 1fr)
        auto;

    gap: 14px;

    align-items: end;
}


.sales-search-field {
    display: flex;
    flex-direction: column;

    gap: 7px;

    min-width: 0;
}


.sales-search-field label,
.sales-history-filters .field-group label {
    color: #0B2E33;

    font-size: 0.75rem;

    font-weight: 700;
}


.sales-search-field input,
.sales-history-filters input,
.sales-history-filters select {
    width: 100%;

    min-width: 0;

    height: 42px;

    border:
        1px solid
        rgba(79, 124, 130, 0.22);

    border-radius: 9px;

    background: #FFFFFF;

    color: #0B2E33;

    padding: 0 11px;

    font-size: 0.82rem;

    outline: none;

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


.sales-search-field input:focus,
.sales-history-filters input:focus,
.sales-history-filters select:focus {
    border-color: #4F7C82;

    box-shadow:
        0 0 0 3px
        rgba(184, 227, 233, 0.32);
}


.sales-search-field input::placeholder {
    color: #738487;

    opacity: 1;
}


/* =====================================================
   AÇÕES DOS FILTROS
===================================================== */

.sales-filter-actions {
    display: flex;

    align-items: center;

    gap: 8px;
}


.sales-filter-actions .btn-primary,
.sales-filter-actions .btn-secondary {
    min-height: 42px;

    padding-left: 16px;
    padding-right: 16px;

    white-space: nowrap;
}


/* =====================================================
   RESUMO
===================================================== */

.sales-history-summary {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 14px;

    padding-bottom: 12px;

    border-bottom:
        1px solid
        rgba(79, 124, 130, 0.12);
}


.sales-history-summary span {
    color: #596B6E;

    font-size: 0.78rem;
}


.sales-history-summary strong {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 32px;

    padding: 5px 9px;

    border-radius: 999px;

    background:
        rgba(184, 227, 233, 0.35);

    color: #0B2E33;

    font-size: 0.78rem;

    font-weight: 800;
}


/* =====================================================
   TABELA
===================================================== */

.sales-history-table {
    width: 100%;

    min-width: 980px;

    table-layout: auto;
}


.sales-history-table th {
    padding: 11px 12px;

    background:
        rgba(184, 227, 233, 0.10);

    color: #4F6265;

    font-size: 0.7rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    white-space: nowrap;
}


.sales-history-table td {
    padding: 13px 12px;

    vertical-align: middle;

    color: #233A3E;

    font-size: 0.8rem;

    border-bottom:
        1px solid
        rgba(79, 124, 130, 0.09);
}


.sales-history-table tbody tr {
    transition:
        background 0.15s ease;
}


.sales-history-table tbody tr:hover {
    background:
        rgba(184, 227, 233, 0.10);
}


/* Venda */
.sales-history-id {
    color: #0B2E33;

    font-size: 0.86rem;

    font-weight: 800;
}


/* Total */
.sales-history-total {
    color: #0B2E33;

    font-size: 0.88rem;

    font-weight: 800;

    white-space: nowrap;
}


/* Subtexto */
.sales-history-table .table-subtext {
    display: block;

    margin-top: 3px;

    color: #66787B;

    font-size: 0.7rem;

    line-height: 1.3;
}


/* =====================================================
   STATUS
===================================================== */

.sales-history-table .status-badge {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 27px;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 0.68rem;

    font-weight: 800;

    white-space: nowrap;
}


/* =====================================================
   AÇÃO ABRIR
===================================================== */

.sales-history-action {
    text-align: right;

    white-space: nowrap;
}


.sales-history-action .table-action {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding: 6px 11px;

    border-radius: 8px;

    background: #0B2E33;

    color: #FFFFFF;

    font-size: 0.72rem;

    font-weight: 700;

    text-decoration: none;

    transition:
        background 0.15s ease,
        transform 0.15s ease;
}


.sales-history-action .table-action:hover {
    background: #4F7C82;

    transform: translateY(-1px);
}


/* =====================================================
   RESPONSIVIDADE - NOTEBOOK
===================================================== */

@media (max-width: 1400px) {

    .sales-history-filters {
        grid-template-columns:
            minmax(240px, 2fr)
            minmax(125px, 1fr)
            minmax(145px, 1fr)
            minmax(135px, 1fr)
            minmax(135px, 1fr);
    }


    .sales-filter-actions {
        grid-column:
            1 / -1;

        justify-content: flex-end;
    }


    .sales-history-table {
        min-width: 920px;
    }


    .sales-history-table th,
    .sales-history-table td {
        padding-left: 10px;
        padding-right: 10px;
    }

}


/* =====================================================
   RESPONSIVIDADE - NOTEBOOK MENOR / TABLET
===================================================== */

@media (max-width: 1100px) {

    .sales-history-filters {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .sales-search-field {
        grid-column:
            1 / -1;
    }


    .sales-filter-actions {
        grid-column:
            1 / -1;

        justify-content: stretch;
    }


    .sales-filter-actions > * {
        flex: 1;
    }


    .sales-history-table {
        min-width: 900px;
    }

}


/* =====================================================
   RESPONSIVIDADE - MOBILE
===================================================== */

@media (max-width: 700px) {

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


    .sales-search-field,
    .sales-filter-actions {
        grid-column: auto;
    }


    .sales-filter-actions {
        flex-direction: column;
    }


    .sales-filter-actions > * {
        width: 100%;
    }


    .sales-history-summary {
        align-items: flex-start;
    }


    .sales-history-table {
        min-width: 850px;
    }

}
/* =====================================================
   HISTÓRICO - CAMPOS DE DATA MAIS DISCRETOS
===================================================== */

.sales-history-filters input[type="date"] {
    color: #738487;
    font-weight: 400;
}


/* Mantém a data selecionada legível */
.sales-history-filters input[type="date"]:valid {
    color: #0B2E33;
}


/* Texto dd/mm/aaaa exibido pelo navegador */
.sales-history-filters input[type="date"]::-webkit-datetime-edit {
    color: #738487;
}


/* Quando o usuário seleciona uma data */
.sales-history-filters input[type="date"]:focus::-webkit-datetime-edit {
    color: #0B2E33;
}
/* =====================================================
   HISTÓRICO - CAMPOS DE DATA
===================================================== */

.history-date-input {
    color: #738487 !important;
    font-weight: 400;
}

.history-date-input::-webkit-datetime-edit {
    color: #738487;
}

.history-date-input.has-value,
.history-date-input.has-value::-webkit-datetime-edit {
    color: #0B2E33 !important;
}
/* =====================================================
   MEU NEGÓCIO - ESTOQUE
===================================================== */

.dashboard-stock-card {
    min-width: 0;
}


.dashboard-stock-alert {
    display: flex;

    align-items: center;

    margin-bottom: 14px;

    padding: 11px 13px;

    border-radius: 10px;

    background:
        rgba(181, 68, 39, 0.08);

    border:
        1px solid
        rgba(181, 68, 39, 0.14);
}


.dashboard-stock-alert div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.dashboard-stock-alert span {
    color: #8B3A28;

    font-size: 0.68rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.04em;
}


.dashboard-stock-alert strong {
    color: #53251B;

    font-size: 0.82rem;
}


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

.dashboard-stock-list {
    display: flex;

    flex-direction: column;
}


.dashboard-stock-item {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    padding: 12px 2px;

    border-bottom:
        1px solid
        rgba(79, 124, 130, 0.10);
}


.dashboard-stock-item:last-child {
    border-bottom: none;
}


.dashboard-stock-product {
    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


.dashboard-stock-product strong {
    color: #0B2E33;

    font-size: 0.8rem;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.dashboard-stock-product span {
    color: #6A7B7E;

    font-size: 0.68rem;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =====================================================
   SALDO / MÍNIMO
===================================================== */

.dashboard-stock-values {
    display: flex;

    align-items: center;

    gap: 18px;

    flex-shrink: 0;
}


.dashboard-stock-values > div {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 2px;
}


.dashboard-stock-values span {
    color: #758588;

    font-size: 0.62rem;

    font-weight: 600;
}


.dashboard-stock-values strong {
    color: #0B2E33;

    font-size: 0.78rem;

    font-weight: 800;
}


.dashboard-stock-more {
    margin-top: 10px;

    padding-top: 10px;

    border-top:
        1px solid
        rgba(79, 124, 130, 0.10);

    color: #596B6E;

    font-size: 0.7rem;

    text-align: center;
}


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

@media (max-width: 700px) {

    .dashboard-stock-item {
        align-items: flex-start;

        flex-direction: column;
    }


    .dashboard-stock-values {
        width: 100%;

        justify-content: space-between;
    }


    .dashboard-stock-values > div {
        align-items: flex-start;
    }

}
/* =====================================================
   MEU NEGÓCIO - PRODUTOS MAIS VENDIDOS
===================================================== */

.dashboard-ranking-card {
    margin-top: 18px;
}


.dashboard-ranking-list {
    display: flex;
    flex-direction: column;
}


.dashboard-ranking-item {
    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 14px;

    padding: 13px 2px;

    border-bottom:
        1px solid
        rgba(79, 124, 130, 0.10);
}


.dashboard-ranking-item:last-child {
    border-bottom: none;
}


/* =====================================================
   POSIÇÃO
===================================================== */

.dashboard-ranking-position {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border-radius: 9px;

    background:
        rgba(184, 227, 233, 0.30);

    color: #0B2E33;

    font-size: 0.78rem;

    font-weight: 800;
}


/* =====================================================
   PRODUTO
===================================================== */

.dashboard-ranking-product {
    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


.dashboard-ranking-product strong {
    color: #0B2E33;

    font-size: 0.82rem;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.dashboard-ranking-product span {
    color: #6A7B7E;

    font-size: 0.68rem;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =====================================================
   RESULTADOS
===================================================== */

.dashboard-ranking-values {
    display: flex;

    align-items: center;

    gap: 28px;

    flex-shrink: 0;
}


.dashboard-ranking-values > div {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 2px;

    min-width: 90px;
}


.dashboard-ranking-values span {
    color: #758588;

    font-size: 0.62rem;

    font-weight: 600;
}


.dashboard-ranking-values strong {
    color: #0B2E33;

    font-size: 0.8rem;

    font-weight: 800;

    white-space: nowrap;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .dashboard-ranking-item {
        grid-template-columns:
            36px
            minmax(0, 1fr);
    }


    .dashboard-ranking-values {
        grid-column:
            2;

        width: 100%;

        justify-content: space-between;

        gap: 12px;

        margin-top: 4px;
    }


    .dashboard-ranking-values > div {
        align-items: flex-start;

        min-width: 0;
    }

}
/* =====================================================
   MEU NEGÓCIO - FORMAS DE PAGAMENTO
===================================================== */

.dashboard-payment-card {
    margin-top: 18px;
}


.dashboard-payment-list {
    display: flex;
    flex-direction: column;

    gap: 4px;
}


.dashboard-payment-item {
    padding: 13px 2px;

    border-bottom:
        1px solid
        rgba(79, 124, 130, 0.10);
}


.dashboard-payment-item:last-child {
    border-bottom: none;
}


/* =====================================================
   CABEÇALHO DA FORMA
===================================================== */

.dashboard-payment-item-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 9px;
}


.dashboard-payment-item-header > div:first-child {
    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


.dashboard-payment-item-header strong {
    color: #0B2E33;

    font-size: 0.82rem;

    font-weight: 800;
}


.dashboard-payment-item-header span {
    color: #66787B;

    font-size: 0.68rem;
}


/* =====================================================
   VALOR
===================================================== */

.dashboard-payment-value {
    display: flex;

    align-items: flex-end;

    flex-direction: column;

    gap: 2px;

    flex-shrink: 0;
}


.dashboard-payment-value strong {
    color: #0B2E33;

    font-size: 0.84rem;

    white-space: nowrap;
}


.dashboard-payment-value span {
    color: #4F7C82;

    font-size: 0.68rem;

    font-weight: 800;
}


/* =====================================================
   BARRA
===================================================== */

.dashboard-payment-progress {
    width: 100%;

    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(79, 124, 130, 0.10);
}


.dashboard-payment-progress-bar {
    height: 100%;

    min-width: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #0B2E33,
            #4F7C82
        );

    transition:
        width 0.3s ease;
}


/* =====================================================
   TOTAL
===================================================== */

.dashboard-payment-total {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 14px;

    margin-top: 14px;

    padding: 13px 14px;

    border-radius: 10px;

    background:
        rgba(184, 227, 233, 0.18);

    border:
        1px solid
        rgba(79, 124, 130, 0.12);
}


.dashboard-payment-total span {
    color: #53676A;

    font-size: 0.72rem;

    font-weight: 600;
}


.dashboard-payment-total strong {
    color: #0B2E33;

    font-size: 0.9rem;

    font-weight: 800;

    white-space: nowrap;
}


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

@media (max-width: 600px) {

    .dashboard-payment-item-header {
        align-items: flex-start;
    }


    .dashboard-payment-value {
        align-items: flex-end;
    }


    .dashboard-payment-total {
        align-items: flex-start;

        flex-direction: column;
    }

}
/* =====================================================
   MEU NEGÓCIO - COMPARATIVOS
===================================================== */

.metric-comparison {
    margin-top: 10px;
    padding-top: 9px;

    border-top:
        1px solid
        rgba(79, 124, 130, 0.10);
}


.metric-comparison span {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    font-size: 0.67rem;

    font-weight: 700;

    line-height: 1.3;
}


/* POSITIVO */

.comparison-positive {
    color: #35705B;
}


/* NEGATIVO */

.comparison-negative {
    color: #A34A37;
}


/* NEUTRO */

.comparison-neutral {
    color: #718184;
}
/* =====================================================
   MEU NEGÓCIO - COMPARATIVOS
===================================================== */

.metric-comparison {
    margin-top: 10px;
    padding-top: 9px;

    border-top:
        1px solid
        rgba(79, 124, 130, 0.10);
}


.metric-comparison span {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    font-size: 0.67rem;

    font-weight: 700;

    line-height: 1.3;
}


.comparison-positive {
    color: #35705B;
}


.comparison-negative {
    color: #A34A37;
}


.comparison-neutral {
    color: #718184;
}
/* =====================================================
   FINANCEIRO
===================================================== */

.finance-filter-card {
    margin-bottom: 18px;
}


.finance-filters {
    display: grid;

    grid-template-columns:
        minmax(160px, 220px)
        minmax(160px, 220px)
        auto;

    align-items: end;

    gap: 14px;
}


.finance-filter-actions {
    display: flex;

    align-items: center;

    gap: 8px;
}


.finance-filter-actions > * {
    min-height: 42px;
}


.finance-payment-card,
.finance-transactions-card {
    margin-top: 18px;
}


.finance-payment-table {
    min-width: 650px;
}


.finance-transactions-table {
    min-width: 950px;
}


.finance-transactions-table td {
    vertical-align: middle;
}


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

@media (max-width: 900px) {

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


    .finance-filter-actions {
        grid-column:
            1 / -1;
    }


    .finance-filter-actions > * {
        flex: 1;
    }

}


@media (max-width: 600px) {

    .finance-filters {
        grid-template-columns: 1fr;
    }


    .finance-filter-actions {
        grid-column: auto;

        flex-direction: column;
    }


    .finance-filter-actions > * {
        width: 100%;
    }

}
/* =====================================================
   CAIXA
===================================================== */

.caixa-open-card{
    max-width:700px;
}

.caixa-empty{
    text-align:center;
    padding:20px 10px 10px;
}

.caixa-empty-icon{
    width:58px;
    height:58px;
    margin:auto;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:18px;

    background:#E8F1F2;

    color:#0B2E33;

    font-size:1.8rem;
}

.caixa-empty h2{
    margin-top:14px;
    color:#0B2E33;
}

.caixa-empty p{
    color:#66787B;
    font-size:.85rem;
}

.caixa-form{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-top:20px;
}

.caixa-main-button{
    min-height:46px;
}

.caixa-status-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-bottom:18px;
}

.caixa-status-open{
    color:#2E7D32;
}

.caixa-actions-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.caixa-mini-form{
    display:flex;
    flex-direction:column;
    gap:10px;

    padding:14px;

    border:1px solid rgba(79,124,130,.12);
    border-radius:12px;

    background:#fff;
}

.caixa-mini-form h4{
    margin:0;
    color:#0B2E33;
}

.caixa-mini-form p{
    margin:0;
    color:#718184;
    font-size:.78rem;
}

.caixa-mini-form input{
    width:100%;
}

.caixa-close-card{
    margin-top:18px;
}

.caixa-close-summary{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;

    margin-bottom:18px;
}

.caixa-close-summary > div{
    padding:14px;
    border-radius:12px;
    background:rgba(184,227,233,.18);
    border:1px solid rgba(79,124,130,.10);

    display:flex;
    flex-direction:column;
    gap:4px;
}

.caixa-close-summary span{
    color:#66787B;
    font-size:.72rem;
}

.caixa-close-summary strong{
    color:#0B2E33;
    font-size:1.1rem;
}

.caixa-close-form{
    display:flex;
    flex-direction:column;
    gap:16px;
}


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

@media(max-width:900px){

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

}

@media(max-width:650px){

    .caixa-status-grid{
        grid-template-columns:1fr;
    }

    .caixa-actions-grid{
        grid-template-columns:1fr;
    }

    .caixa-close-summary{
        grid-template-columns:1fr;
    }

}
/* =====================================================
   CAIXA - HISTÓRICO
===================================================== */

.caixa-history-filter-card {
    margin-bottom: 18px;
}

.caixa-history-filters {
    display: grid;
    grid-template-columns:
        minmax(140px, 180px)
        minmax(150px, 190px)
        minmax(150px, 190px)
        auto;

    align-items: end;
    gap: 14px;
}

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

.caixa-history-actions > * {
    min-height: 42px;
}

.caixa-history-table {
    min-width: 1050px;
}

.caixa-detail-movements {
    margin-top: 18px;
}

.caixa-detail-note {
    margin-top: 14px;
    padding: 12px 14px;

    border-radius: 10px;

    background:
        rgba(184, 227, 233, 0.14);

    color: #405A5E;

    font-size: 0.78rem;
}


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

@media (max-width: 950px) {

    .caixa-history-filters {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .caixa-history-actions {
        grid-column:
            1 / -1;
    }

}


@media (max-width: 600px) {

    .caixa-history-filters {
        grid-template-columns: 1fr;
    }

    .caixa-history-actions {
        grid-column: auto;
        flex-direction: column;
    }

    .caixa-history-actions > * {
        width: 100%;
    }

}

/* ==========================================================
   FAZAN GESTÃO
   SIDEBAR - REFINAMENTO VISUAL / ÍCONES
   Cole este bloco no FINAL do fazan.css
   ========================================================== */


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

.sidebar {
    background:
        linear-gradient(
            180deg,
            #07363a 0%,
            #083a3e 45%,
            #07363a 100%
        );

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


/* ==========================================================
   MARCA / LOGO
   ========================================================== */

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sidebar-brand .brand-mark {
    width: 42px;
    min-width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #bdebf0;
    color: #06393d;

    font-size: 20px;
    font-weight: 800;
    line-height: 1;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.10);
}

.sidebar-brand strong {
    color: #ffffff;

    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.sidebar-brand span {
    display: block;

    margin-top: 2px;

    color: #8fc7cb;

    font-size: 12px;
    font-weight: 500;
}


/* ==========================================================
   NAVEGAÇÃO
   ========================================================== */

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


/* ==========================================================
   ITEM DO MENU
   ========================================================== */

.sidebar-nav .nav-item {
    width: 100%;
    min-height: 44px;

    display: flex;
    align-items: center;
    gap: 14px;

    box-sizing: border-box;

    padding: 10px 12px;

    border-radius: 9px;

    color: #f3fbfb;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;

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


/* ==========================================================
   ÍCONES
   ========================================================== */

.sidebar-nav .nav-icon {
    width: 24px;
    min-width: 24px;
    height: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: #d9f6f7;

    font-size: 19px;
    line-height: 1;

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

.sidebar-nav .nav-icon i {
    display: block;

    width: 100%;

    font-size: 19px;
    line-height: 1;

    text-align: center;
}


/* ==========================================================
   HOVER
   ========================================================== */

.sidebar-nav .nav-item:hover {
    background: rgba(255, 255, 255, 0.055);

    color: #ffffff;
}

.sidebar-nav .nav-item:hover .nav-icon {
    color: #8de4e8;

    transform: translateX(1px);
}


/* ==========================================================
   ITEM ATIVO
   ========================================================== */

.sidebar-nav .nav-item.active {
    background:
        linear-gradient(
            90deg,
            #5e8f95 0%,
            #638f94 100%
        );

    color: #ffffff;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.08);
}

.sidebar-nav .nav-item.active .nav-icon {
    color: #ffffff;
}


/* Remove movimento do ícone ativo */

.sidebar-nav .nav-item.active:hover .nav-icon {
    transform: none;
}


/* ==========================================================
   SEPARADORES
   ========================================================== */

.sidebar-nav .nav-separator {
    height: 1px;

    margin: 12px 0;

    background: rgba(177, 226, 230, 0.12);
}


/* ==========================================================
   AJUSTE DE ALINHAMENTO
   ========================================================== */

.sidebar-nav .nav-item > :not(.nav-icon) {
    min-width: 0;
}


/* ==========================================================
   ÍCONES ESPECÍFICOS
   Pequenos ajustes ópticos para manter alinhamento visual.
   ========================================================== */

.sidebar-nav .bi-house-door {
    font-size: 20px;
}

.sidebar-nav .bi-cart3 {
    font-size: 19px;
}

.sidebar-nav .bi-box-seam {
    font-size: 19px;
}

.sidebar-nav .bi-grid {
    font-size: 18px;
}

.sidebar-nav .bi-archive {
    font-size: 19px;
}

.sidebar-nav .bi-layers {
    font-size: 19px;
}

.sidebar-nav .bi-tools {
    font-size: 18px;
}

.sidebar-nav .bi-people {
    font-size: 20px;
}

.sidebar-nav .bi-cash-register {
    font-size: 19px;
}

.sidebar-nav .bi-currency-dollar {
    font-size: 20px;
}

.sidebar-nav .bi-pie-chart {
    font-size: 20px;
}

.sidebar-nav .bi-gear {
    font-size: 20px;
}

.sidebar-nav .bi-person-gear {
    font-size: 19px;
}


/* ==========================================================
   RODAPÉ DA SIDEBAR
   ========================================================== */

.sidebar-footer {
    color: #8fc3c7;
}

.sidebar-footer span {
    color: #8fc3c7;

    font-size: 11px;
    font-weight: 500;
}

.sidebar-footer strong {
    display: block;

    margin-top: 5px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;
}

.sidebar-footer small {
    display: block;

    margin-top: 4px;

    color: #74aeb2;

    font-size: 11px;
}


/* ==========================================================
   MELHORIAS DE FOCO / ACESSIBILIDADE
   ========================================================== */

.sidebar-nav .nav-item:focus-visible {
    outline: 2px solid #8de4e8;
    outline-offset: 2px;
}


/* ==========================================================
   SCROLLBAR DA SIDEBAR
   Caso a navegação fique maior que a tela.
   ========================================================== */

.sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color:
        rgba(141, 228, 232, 0.35)
        transparent;
}

.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(141, 228, 232, 0.26);

    border-radius: 999px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(141, 228, 232, 0.42);
}


/* ==========================================================
   RESPONSIVIDADE
   ========================================================== */

@media (max-width: 900px) {

    .sidebar-nav .nav-item {
        gap: 11px;

        padding:
            10px
            10px;

        font-size: 13px;
    }

    .sidebar-nav .nav-icon {
        width: 22px;
        min-width: 22px;
        height: 22px;

        font-size: 18px;
    }

    .sidebar-nav .nav-icon i {
        font-size: 18px;
    }

}


/* ==========================================================
   TELAS PEQUENAS
   ========================================================== */

@media (max-width: 700px) {

    .sidebar-nav .nav-item {
        min-height: 46px;

        border-radius: 8px;
    }

    .sidebar-nav .nav-item.active {
        box-shadow: none;
    }

}

.sidebar-nav .bi-calculator {
    font-size: 19px;
}

/* ==========================================================
   PRODUTOS
   SELETOR DE ORIGEM
   ========================================================== */

.product-category-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.product-category-heading label { margin: 0; }
.product-category-heading .category-quick-trigger {
    padding: 2px 0;
    min-height: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--fazan-primary);
    font-size: .75rem;
    line-height: 1.3;
    white-space: normal;
    text-align: right;
}
.product-category-heading .category-quick-trigger:hover { color: var(--fazan-dark); text-decoration: underline; }
.form-grid.product-first-variation { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-first-variation .barcode-field-group { grid-column: span 2; }
@media (max-width: 1100px) {
    .form-grid.product-first-variation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .form-grid.product-first-variation { grid-template-columns: minmax(0, 1fr); }
    .product-first-variation .barcode-field-group { grid-column: auto; }
}
.category-quick-modal {
    width: min(480px, calc(100% - 32px));
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 24px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    color: var(--text-primary);
}
.category-quick-modal::backdrop { background: rgba(11, 46, 51, .45); }
.category-quick-modal form { display: grid; gap: 16px; min-width: 0; }
.category-quick-modal h2 { margin: 0; font-size: 1.25rem; }
.category-quick-modal #categoria-rapida-erro { color: #9b2424; margin: 0; overflow-wrap: anywhere; }
.category-quick-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.category-quick-actions button { max-width: 100%; }
.category-quick-trigger:focus-visible,
.category-quick-actions button:focus-visible { outline: 3px solid var(--fazan-primary); outline-offset: 3px; }

.product-sku-suggestion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: .8rem;
}
.product-sku-suggestion[hidden] { display: none; }
.product-sku-suggestion > span { min-width: 0; overflow-wrap: anywhere; }
.product-sku-suggestion > button { padding: 6px 10px; min-height: 32px; max-width: 100%; font-size: .8rem; }
.product-sku-suggestion > button:focus-visible { outline: 3px solid var(--fazan-primary); outline-offset: 3px; }

.product-origin-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 2px;
}

.product-origin-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;

    min-width: 0;
    min-height: 92px;
    padding: 16px;

    border: 1px solid #d9e3e5;
    border-radius: 10px;

    background: #ffffff;

    cursor: pointer;

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

.product-origin-card:hover {
    border-color: #83b8bd;
    background: #f8fcfc;
}

.product-origin-card:has(input:checked) {
    border-color: #5e8f95;
    background: #f2f9f9;

    box-shadow:
        0 0 0 2px rgba(94, 143, 149, 0.10);
}

.product-origin-card input[type="radio"] {
    appearance: auto;
    flex: 0 0 17px;
    width: 17px;
    min-width: 17px;
    height: 17px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;

    margin: 2px 0 0;

    accent-color: #477d83;

    cursor: pointer;
}

.product-origin-card:has(input[type="radio"]:focus-visible) {
    outline: 3px solid var(--fazan-primary);
    outline-offset: 3px;
}

.product-origin-content {
    min-width: 0;
    overflow-wrap: anywhere;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.product-origin-title {
    color: #173f43;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.product-origin-description {
    color: #6a7c7e;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

.product-origin-card:has(input:checked)
.product-origin-title {
    color: #275f65;
}

@media (max-width: 700px) {

    .product-origin-options {
        grid-template-columns: 1fr;
    }

    .product-origin-card {
        min-height: auto;
    }

}

/* ==========================================================
   FAZAN GESTÃO
   NAVEGAÇÃO RESPONSIVA
   ========================================================== */


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

.topbar-left {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 14px;
}

.topbar-company {
    min-width: 0;
}

.topbar-company h2 {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================
   BOTÃO DE ABERTURA DA SIDEBAR
   ========================================================== */

.sidebar-toggle {
    display: none;

    width: 42px;
    min-width: 42px;
    height: 42px;

    align-items: center;
    justify-content: center;

    padding: 0;

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

    background: #FFFFFF;
    color: var(--fazan-dark);

    font-size: 23px;
    line-height: 1;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.sidebar-toggle:hover {
    background: #F2F7F7;

    border-color: #B8CDCF;
}

.sidebar-toggle:active {
    transform: scale(0.96);
}

.sidebar-toggle:focus-visible {
    outline: 2px solid var(--fazan-primary);
    outline-offset: 2px;
}


/* ==========================================================
   BOTÃO DE FECHAR
   ========================================================== */

.sidebar-close {
    display: none;

    width: 38px;
    min-width: 38px;
    height: 38px;

    margin-left: auto;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 9px;

    background: rgba(255, 255, 255, 0.06);
    color: #DDF4F5;

    font-size: 18px;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}

.sidebar-close:hover {
    background: rgba(255, 255, 255, 0.12);

    color: #FFFFFF;
}

.sidebar-close:focus-visible {
    outline: 2px solid #8DE4E8;
    outline-offset: 2px;
}


/* ==========================================================
   FUNDO / BACKDROP
   ========================================================== */

.sidebar-backdrop {
    position: fixed;

    inset: 0;

    z-index: 1090;

    background: rgba(5, 25, 28, 0.48);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

    body.sidebar-open {
        overflow: hidden;
    }


    .main-content {
        width: 100%;

        margin-left: 0;
    }


    .sidebar-toggle {
        display: inline-flex;
    }


    .sidebar {
        display: flex;

        width: min(86vw, 310px);
        min-height: 0;

        top: 0;
        left: 0;

        padding:
            20px
            16px;

        z-index: 1100;

        transform: translateX(-105%);

        visibility: hidden;

        box-shadow:
            18px 0 45px
            rgba(0, 0, 0, 0.18);

        transition:
            transform 0.24s ease,
            visibility 0.24s ease;

        overscroll-behavior: contain;
    }


    body.sidebar-open .sidebar {
        transform: translateX(0);

        visibility: visible;
    }


    body.sidebar-open .sidebar-backdrop {
        opacity: 1;

        visibility: visible;

        pointer-events: auto;
    }


    .sidebar-brand {
        gap: 12px;

        padding:
            0
            4px
            22px;
    }


    .sidebar-brand-text {
        min-width: 0;
    }


    .sidebar-close {
        display: inline-flex;
    }


    .sidebar-nav {
        padding-bottom: 12px;
    }


    .sidebar-nav .nav-item {
        min-height: 47px;

        gap: 13px;

        padding:
            11px
            12px;

        font-size: 14px;

        border-radius: 9px;
    }


    .sidebar-nav .nav-icon {
        width: 24px;
        min-width: 24px;
        height: 24px;

        font-size: 19px;
    }


    .sidebar-footer {
        padding-bottom: 10px;
    }


    .topbar {
        min-height: 70px;

        gap: 10px;

        padding:
            12px
            14px;
    }


    .topbar-left {
        flex: 1 1 auto;

        min-width: 0;

        gap: 10px;
    }


    .topbar-company {
        flex: 1 1 auto;

        min-width: 0;
    }


    .topbar-label {
        margin-bottom: 1px;

        font-size: 0.65rem;
    }


    .topbar-company h2 {
        max-width: 100%;

        font-size: 0.9rem;
    }


    .topbar-user {
        flex: 0 0 auto;

        gap: 7px;
    }


    .user-avatar {
        width: 36px;
        height: 36px;

        font-size: 0.88rem;
    }


    .user-info {
        display: none;
    }


    .btn-logout {
        min-height: 36px;

        padding:
            7px
            9px;

        font-size: 0.8rem;
    }


    .content-wrapper {
        padding:
            18px
            14px
            28px;
    }

}


/* ==========================================================
   CELULARES MUITO PEQUENOS
   ========================================================== */

@media (max-width: 420px) {

    .sidebar {
        width: min(90vw, 300px);
    }


    .topbar {
        padding:
            10px
            12px;
    }


    .sidebar-toggle {
        width: 40px;
        min-width: 40px;
        height: 40px;
    }


    .user-avatar {
        display: none;
    }


    .topbar-company h2 {
        font-size: 0.85rem;
    }

}

/* ==========================================================
   FAZAN GESTÃO
   ALERTAS / NOTIFICAÇÕES
   ========================================================== */

.flash-container {
    position: fixed;

    top: 18px;
    right: 18px;

    z-index: 2500;

    width:
        min(
            390px,
            calc(100vw - 36px)
        );

    display: flex;
    flex-direction: column;

    gap: 10px;

    pointer-events: none;
}


.flash-container .alert {
    width: 100%;

    display: grid;

    grid-template-columns:
        24px
        minmax(0, 1fr)
        32px;

    align-items: start;

    gap: 11px;

    margin: 0;

    padding:
        14px
        12px
        14px
        14px;

    border:
        1px solid
        rgba(11, 46, 51, 0.08);

    border-left-width: 4px;

    border-radius: 12px;

    background: #FFFFFF;

    box-shadow:
        0 14px 38px
        rgba(11, 46, 51, 0.16);

    opacity: 1;

    transform: translateX(0);

    pointer-events: auto;

    animation:
        fazanAlertEnter
        0.24s
        ease-out;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.flash-container .alert-success {
    border-left-color: var(--success);
}


.flash-container .alert-warning {
    border-left-color: var(--warning);
}


.flash-container .alert-danger {
    border-left-color: var(--danger);
}


.flash-container .alert-info {
    border-left-color: var(--fazan-primary);
}


.alert-icon {
    width: 24px;
    height: 24px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin-top: 1px;

    font-size: 18px;
}


.alert-success .alert-icon {
    color: var(--success);
}


.alert-warning .alert-icon {
    color: var(--warning);
}


.alert-danger .alert-icon {
    color: var(--danger);
}


.alert-info .alert-icon {
    color: var(--fazan-primary);
}


.alert-content {
    min-width: 0;

    color: var(--text-primary);

    font-size: 0.9rem;
    font-weight: 600;

    line-height: 1.45;

    overflow-wrap: anywhere;
}


.alert-close {
    width: 32px;
    height: 32px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: #7C8C8F;

    font-size: 14px;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}


.alert-close:hover {
    background: #F0F5F5;

    color: var(--fazan-dark);
}


.alert-close:focus-visible {
    outline:
        2px solid
        var(--fazan-primary);

    outline-offset: 2px;
}


.flash-container .alert.alert-hiding {
    opacity: 0;

    transform:
        translateX(24px);

    pointer-events: none;
}


@keyframes fazanAlertEnter {

    from {
        opacity: 0;

        transform:
            translateX(30px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

    .flash-container {
        top: 10px;
        right: 10px;
        left: 10px;

        width: auto;
    }


    .flash-container .alert {
        grid-template-columns:
            22px
            minmax(0, 1fr)
            30px;

        gap: 9px;

        padding:
            12px
            10px
            12px
            12px;

        border-radius: 10px;
    }


    .alert-content {
        font-size: 0.84rem;
    }

}

/* ==========================================================
   FAZAN GESTÃO
   TOPBAR - REFINAMENTO VISUAL
   ========================================================== */

.topbar {
    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #FCFEFE 100%
        );

    box-shadow:
        0 1px 0
        rgba(11, 46, 51, 0.03);
}


.topbar-left {
    min-width: 0;
}


.topbar-company {
    min-width: 0;
}


.topbar-company .topbar-label {
    color: #7B8D90;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.08em;
}


.topbar-company h2 {
    color: var(--fazan-dark);

    font-weight: 800;

    letter-spacing: -0.01em;
}


/* ==========================================================
   USUÁRIO
   ========================================================== */

.topbar-user {
    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        5px
        6px
        5px
        8px;

    border:
        1px solid
        rgba(11, 46, 51, 0.07);

    border-radius: 12px;

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

    box-shadow:
        0 3px 14px
        rgba(11, 46, 51, 0.04);
}


.user-avatar {
    width: 40px;
    height: 40px;

    background:
        linear-gradient(
            145deg,
            #BDEBF0,
            #A7DDE2
        );

    color: #07363A;

    border:
        1px solid
        rgba(7, 54, 58, 0.08);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.45);
}


.user-info {
    min-width: 115px;

    max-width: 210px;

    padding-right: 4px;
}


.user-info strong {
    color: var(--fazan-dark);

    font-size: 0.86rem;
    font-weight: 800;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.user-profile {
    color: #75878A !important;

    font-size: 0.72rem !important;
    font-weight: 600;

    text-transform: capitalize;
}


/* ==========================================================
   LOGOUT
   ========================================================== */

.logout-form {
    margin: 0;
}


.btn-logout {
    min-width: 40px;
    min-height: 40px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    padding:
        8px
        10px;

    border:
        1px solid
        rgba(11, 46, 51, 0.08);

    border-radius: 9px;

    background: #F7FAFA;

    color: #5C6F72;

    font-size: 0.82rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.15s ease;
}


.btn-logout i {
    font-size: 16px;
}


.btn-logout:hover {
    background:
        rgba(179, 58, 58, 0.07);

    border-color:
        rgba(179, 58, 58, 0.14);

    color: var(--danger);
}


.btn-logout:active {
    transform: scale(0.97);
}


.btn-logout:focus-visible {
    outline:
        2px solid
        var(--fazan-primary);

    outline-offset: 2px;
}


/* ==========================================================
   NOTEBOOK
   ========================================================== */

@media (max-width: 1000px) {

    .topbar-user {
        padding:
            4px
            5px
            4px
            6px;
    }


    .user-info {
        display: none;
    }


    .logout-text {
        display: none;
    }


    .btn-logout {
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;

        padding: 0;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

    .topbar-user {
        padding: 3px;

        border-radius: 10px;
    }


    .user-avatar {
        width: 34px;
        height: 34px;

        font-size: 0.8rem;
    }


    .btn-logout {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;

        border-radius: 8px;
    }


    .btn-logout i {
        font-size: 15px;
    }

}


/* ==========================================================
   MOBILE MUITO PEQUENO
   ========================================================== */

@media (max-width: 420px) {

    .user-avatar {
        display: none;
    }


    .topbar-user {
        background: transparent;

        border: 0;

        box-shadow: none;

        padding: 0;
    }

}

/* ==========================================================
   FAZAN GESTÃO
   ESTOQUE - LISTAGEM RESPONSIVA
   ========================================================== */


/* ==========================================================
   DESKTOP
   ========================================================== */

.stock-list-panel {
    overflow: hidden;
}


.stock-main-table {
    min-width: 760px;
}


.stock-main-table tbody tr {
    transition:
        background-color 0.15s ease;
}


.stock-main-table tbody tr:hover {
    background:
        rgba(79, 124, 130, 0.035);
}


.stock-variation-text {
    color: var(--text-primary);
}


.stock-sku {
    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding:
        4px
        8px;

    border:
        1px solid
        rgba(11, 46, 51, 0.07);

    border-radius: 7px;

    background: #F7FAFA;

    color: #607477;

    font-family:
        "Consolas",
        "Courier New",
        monospace;

    font-size: 0.78rem;

    white-space: nowrap;
}


.stock-minimum {
    color: var(--text-secondary);

    font-weight: 600;
}


.stock-action-cell {
    width: 1%;

    white-space: nowrap;
}


.stock-mobile-view {
    display: none;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

    .stock-list-panel {
        padding: 0;

        background: transparent;

        border: 0;

        box-shadow: none;

        overflow: visible;
    }


    .stock-desktop-view {
        display: none;
    }


    .stock-mobile-view {
        display: flex;

        flex-direction: column;

        gap: 12px;
    }


    .stock-mobile-card {
        position: relative;

        min-width: 0;

        padding: 16px;

        background: #FFFFFF;

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

        border-radius: 13px;

        box-shadow:
            0 3px 14px
            rgba(11, 46, 51, 0.05);

        overflow: hidden;

        transition:
            border-color 0.18s ease,
            box-shadow 0.18s ease;
    }


    .stock-mobile-card-low {
        border-color:
            rgba(169, 111, 19, 0.24);
    }


    .stock-mobile-card-low::before {
        content: "";

        position: absolute;

        top: 0;
        left: 0;
        bottom: 0;

        width: 3px;

        background: var(--warning);
    }


    /* ======================================================
       CABEÇALHO
       ====================================================== */

    .stock-mobile-header {
        min-width: 0;

        display: flex;

        align-items: flex-start;
        justify-content: space-between;

        gap: 12px;
    }


    .stock-mobile-title {
        min-width: 0;

        flex: 1 1 auto;
    }


    .stock-mobile-title strong {
        display: block;

        color: var(--fazan-dark);

        font-size: 0.96rem;
        font-weight: 800;

        line-height: 1.35;

        overflow-wrap: anywhere;
    }


    .stock-mobile-title > span {
        display: block;

        margin-top: 4px;

        color: var(--text-secondary);

        font-size: 0.8rem;

        line-height: 1.4;
    }


    .stock-mobile-header .status-badge {
        flex: 0 0 auto;

        min-height: 25px;

        padding:
            4px
            8px;

        font-size: 0.68rem;
    }


    /* ======================================================
       SKU
       ====================================================== */

    .stock-mobile-sku {
        display: flex;

        align-items: center;

        gap: 7px;

        margin-top: 14px;

        padding:
            9px
            10px;

        border-radius: 8px;

        background: #F7FAFA;
    }


    .stock-mobile-sku > span {
        color: #819194;

        font-size: 0.64rem;
        font-weight: 800;

        letter-spacing: 0.05em;

        text-transform: uppercase;
    }


    .stock-mobile-sku strong {
        min-width: 0;

        color: #52676A;

        font-family:
            "Consolas",
            "Courier New",
            monospace;

        font-size: 0.78rem;
        font-weight: 600;

        overflow-wrap: anywhere;
    }


    /* ======================================================
       SALDOS
       ====================================================== */

    .stock-mobile-values {
        display: grid;

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

        gap: 10px;

        margin-top: 12px;
    }


    .stock-mobile-values > div {
        min-width: 0;

        padding:
            11px
            12px;

        border:
            1px solid
            rgba(11, 46, 51, 0.055);

        border-radius: 9px;

        background:
            #FBFDFD;
    }


    .stock-mobile-values span {
        display: block;

        margin-bottom: 4px;

        color: var(--text-secondary);

        font-size: 0.68rem;
        font-weight: 600;

        line-height: 1.3;
    }


    .stock-mobile-value {
        display: block;

        color: var(--fazan-dark);

        font-size: 1.05rem;
        font-weight: 800;

        line-height: 1.2;
    }


    .stock-mobile-value-low {
        color: #87570E;
    }


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

    .stock-mobile-actions {
        display: flex;

        justify-content: flex-end;

        margin-top: 13px;

        padding-top: 13px;

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


    .stock-mobile-entry {
        min-height: 39px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        gap: 7px;

        padding:
            8px
            12px;

        border:
            1px solid
            rgba(79, 124, 130, 0.16);

        border-radius: 9px;

        background:
            rgba(79, 124, 130, 0.06);

        color: var(--fazan-dark);

        font-size: 0.78rem;
        font-weight: 800;

        text-decoration: none;

        transition:
            background-color 0.16s ease,
            border-color 0.16s ease;
    }


    .stock-mobile-entry i {
        font-size: 15px;
    }


    .stock-mobile-entry:hover {
        background:
            rgba(79, 124, 130, 0.12);

        border-color:
            rgba(79, 124, 130, 0.24);
    }

}


/* ==========================================================
   CELULARES MUITO PEQUENOS
   ========================================================== */

@media (max-width: 390px) {

    .stock-mobile-card {
        padding: 14px;
    }


    .stock-mobile-header {
        flex-direction: column;

        gap: 8px;
    }


    .stock-mobile-values {
        gap: 8px;
    }


    .stock-mobile-actions {
        justify-content: stretch;
    }


    .stock-mobile-entry {
        width: 100%;
    }

}

/* ==========================================================
   FAZAN GESTÃO
   CLIENTES - LISTAGEM RESPONSIVA
   ========================================================== */


/* ==========================================================
   BUSCA
   ========================================================== */

.clients-list-panel {
    overflow: hidden;
}


.clients-search-modern {
    margin-bottom: 24px;
}


.clients-search-input {
    position: relative;

    width: 100%;
}


.clients-search-input > i {
    position: absolute;

    top: 50%;
    left: 14px;

    z-index: 2;

    transform: translateY(-50%);

    color: #7D9093;

    font-size: 15px;

    pointer-events: none;
}


.clients-search-input input {
    padding-left: 40px !important;
}


.clients-desktop-view {
    display: block;
}


.clients-mobile-view {
    display: none;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

    .clients-list-panel {
        padding: 0;

        background: transparent;

        border: 0;

        box-shadow: none;

        overflow: visible;
    }


    .clients-search-modern {
        padding: 15px;

        margin-bottom: 14px;

        background: #FFFFFF;

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

        border-radius: 13px;

        box-shadow:
            0 3px 14px
            rgba(11, 46, 51, 0.05);
    }


    .clients-desktop-view {
        display: none;
    }


    .clients-mobile-view {
        display: flex;

        flex-direction: column;

        gap: 12px;
    }


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

    .client-mobile-card {
        position: relative;

        min-width: 0;

        padding: 16px;

        background: #FFFFFF;

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

        border-radius: 13px;

        box-shadow:
            0 3px 14px
            rgba(11, 46, 51, 0.05);

        overflow: hidden;
    }


    .client-mobile-card-inactive {
        background: #FCFDFD;
    }


    .client-mobile-card-inactive::before {
        content: "";

        position: absolute;

        top: 0;
        bottom: 0;
        left: 0;

        width: 3px;

        background: var(--danger);

        opacity: 0.55;
    }


    /* ======================================================
       CABEÇALHO
       ====================================================== */

    .client-mobile-header {
        display: flex;

        align-items: flex-start;
        justify-content: space-between;

        gap: 12px;
    }


    .client-mobile-identity {
        min-width: 0;

        display: flex;

        align-items: center;

        gap: 10px;
    }


    .client-mobile-avatar {
        width: 39px;
        min-width: 39px;
        height: 39px;

        display: flex;

        align-items: center;
        justify-content: center;

        border-radius: 10px;

        background:
            linear-gradient(
                145deg,
                #BDEBF0,
                #A7DDE2
            );

        color: var(--fazan-dark);

        font-size: 0.92rem;
        font-weight: 800;
    }


    .client-mobile-name {
        min-width: 0;
    }


    .client-mobile-name strong {
        display: block;

        color: var(--fazan-dark);

        font-size: 0.95rem;
        font-weight: 800;

        line-height: 1.35;

        overflow-wrap: anywhere;
    }


    .client-mobile-name span {
        display: block;

        margin-top: 3px;

        color: var(--text-secondary);

        font-size: 0.77rem;

        overflow-wrap: anywhere;
    }


    .client-mobile-header .status-badge {
        flex: 0 0 auto;

        min-height: 25px;

        padding:
            4px
            8px;

        font-size: 0.68rem;
    }


    /* ======================================================
       TIPO
       ====================================================== */

    .client-mobile-type {
        display: inline-flex;

        align-items: center;

        gap: 6px;

        margin-top: 13px;

        color: #657A7D;

        font-size: 0.73rem;
        font-weight: 700;
    }


    .client-mobile-type i {
        color: var(--fazan-primary);

        font-size: 14px;
    }


    /* ======================================================
       INFORMAÇÕES
       ====================================================== */

    .client-mobile-info {
        display: grid;

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

        gap: 9px;

        margin-top: 12px;
    }


    .client-mobile-info > div {
        min-width: 0;

        padding:
            10px
            11px;

        border:
            1px solid
            rgba(11, 46, 51, 0.05);

        border-radius: 9px;

        background: #FAFCFC;
    }


    .client-mobile-info span {
        display: block;

        margin-bottom: 4px;

        color: #829295;

        font-size: 0.65rem;
        font-weight: 700;

        line-height: 1.2;
    }


    .client-mobile-info strong {
        display: block;

        color: var(--text-primary);

        font-size: 0.78rem;
        font-weight: 700;

        line-height: 1.4;

        overflow-wrap: anywhere;
    }


    /* ======================================================
       E-MAIL
       ====================================================== */

    .client-mobile-email {
        min-width: 0;

        display: flex;

        align-items: center;

        gap: 8px;

        margin-top: 11px;

        padding:
            9px
            10px;

        border-radius: 8px;

        background:
            rgba(79, 124, 130, 0.055);

        color: #64797C;
    }


    .client-mobile-email i {
        flex: 0 0 auto;

        color: var(--fazan-primary);

        font-size: 14px;
    }


    .client-mobile-email span {
        min-width: 0;

        font-size: 0.74rem;

        overflow-wrap: anywhere;
    }


    /* ======================================================
       AÇÕES
       ====================================================== */

    .client-mobile-actions {
        display: flex;

        flex-wrap: wrap;

        gap: 8px;

        margin-top: 13px;

        padding-top: 13px;

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


    .client-mobile-form {
        margin: 0;
    }


    .client-mobile-action {
        min-height: 38px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        gap: 6px;

        padding:
            8px
            11px;

        border:
            1px solid
            rgba(79, 124, 130, 0.15);

        border-radius: 8px;

        background: #FFFFFF;

        color: #526B6E;

        font-size: 0.74rem;
        font-weight: 800;

        text-decoration: none;

        cursor: pointer;

        transition:
            background-color 0.16s ease,
            border-color 0.16s ease,
            color 0.16s ease;
    }


    .client-mobile-action i {
        font-size: 14px;
    }


    .client-mobile-action:hover {
        background:
            rgba(79, 124, 130, 0.06);

        border-color:
            rgba(79, 124, 130, 0.24);

        color: var(--fazan-dark);
    }


    .client-mobile-action-primary {
        background:
            rgba(79, 124, 130, 0.07);

        color: var(--fazan-dark);
    }


    .client-mobile-action-danger {
        border-color:
            rgba(179, 58, 58, 0.13);

        color: var(--danger);
    }


    .client-mobile-action-danger:hover {
        background:
            rgba(179, 58, 58, 0.07);

        border-color:
            rgba(179, 58, 58, 0.22);

        color: var(--danger);
    }

}


/* ==========================================================
   CELULARES MUITO PEQUENOS
   ========================================================== */

@media (max-width: 390px) {

    .client-mobile-card {
        padding: 14px;
    }


    .client-mobile-header {
        gap: 8px;
    }


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


    .client-mobile-actions {
        display: grid;

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


    .client-mobile-actions > *,
    .client-mobile-form,
    .client-mobile-action {
        width: 100%;
    }


    .client-mobile-form-delete {
        grid-column:
            1 / -1;
    }

}

/* ==========================================================
   FAZAN GESTÃO
   CAIXA - HISTÓRICO RESPONSIVO
   ========================================================== */

.caixa-history-list-panel {
    overflow: hidden;
}


.caixa-history-desktop {
    display: block;
}


.caixa-history-mobile {
    display: none;
}


.caixa-history-movements-panel {
    margin-top: 18px;
    overflow: hidden;
}


.caixa-history-movements-table {
    min-width: 850px;
}


.caixa-history-movements-table .traceable-text {
    min-width: 210px;
    max-width: 360px;
}


.caixa-movement-cash-link {
    color: var(--fazan-dark);
    font-weight: 800;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

    .caixa-history-filter-card {
        padding: 15px;
    }


    .caixa-history-filters {
        grid-template-columns: 1fr;
    }


    .caixa-history-actions {
        grid-column: auto;

        flex-direction: column;

        align-items: stretch;
    }


    .caixa-history-actions > * {
        width: 100%;
    }


    .caixa-history-list-panel {
        padding: 0;

        background: transparent;

        border: 0;

        box-shadow: none;

        overflow: visible;
    }


    .caixa-history-movements-panel {
        padding: 15px;
    }


    .caixa-history-desktop {
        display: none;
    }


    .caixa-history-mobile {
        display: flex;

        flex-direction: column;

        gap: 12px;
    }


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

    .caixa-mobile-card {
        position: relative;

        min-width: 0;

        padding: 16px;

        background: #FFFFFF;

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

        border-radius: 13px;

        box-shadow:
            0 3px 14px
            rgba(11, 46, 51, 0.05);

        overflow: hidden;
    }


    .caixa-mobile-card-open::before,
    .caixa-mobile-card-difference::before {
        content: "";

        position: absolute;

        top: 0;
        bottom: 0;
        left: 0;

        width: 3px;
    }


    .caixa-mobile-card-open::before {
        background: var(--fazan-primary);
    }


    .caixa-mobile-card-difference::before {
        background: var(--warning);
    }


    /* ======================================================
       CABEÇALHO
       ====================================================== */

    .caixa-mobile-header {
        display: flex;

        align-items: flex-start;
        justify-content: space-between;

        gap: 12px;
    }


    .caixa-mobile-header > div {
        min-width: 0;
    }


    .caixa-mobile-eyebrow {
        display: block;

        color: #809194;

        font-size: 0.64rem;
        font-weight: 800;

        text-transform: uppercase;

        letter-spacing: 0.06em;
    }


    .caixa-mobile-header strong {
        display: block;

        margin-top: 2px;

        color: var(--fazan-dark);

        font-size: 1rem;
        font-weight: 800;
    }


    .caixa-mobile-header .status-badge {
        flex: 0 0 auto;

        min-height: 25px;

        padding:
            4px
            8px;

        font-size: 0.68rem;
    }


    /* ======================================================
       DATA / OPERADOR
       ====================================================== */

    .caixa-mobile-meta {
        display: flex;

        flex-direction: column;

        gap: 7px;

        margin-top: 13px;

        padding:
            10px
            11px;

        border-radius: 9px;

        background: #F8FBFB;
    }


    .caixa-mobile-meta > div {
        min-width: 0;

        display: flex;

        align-items: center;

        gap: 8px;

        color: #64797C;
    }


    .caixa-mobile-meta i {
        flex: 0 0 auto;

        color: var(--fazan-primary);

        font-size: 14px;
    }


    .caixa-mobile-meta span {
        min-width: 0;

        font-size: 0.76rem;

        overflow-wrap: anywhere;
    }


    /* ======================================================
       VALORES
       ====================================================== */

    .caixa-mobile-values {
        display: grid;

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

        gap: 9px;

        margin-top: 12px;
    }


    .caixa-mobile-values > div {
        min-width: 0;

        padding:
            10px
            11px;

        border:
            1px solid
            rgba(11, 46, 51, 0.05);

        border-radius: 9px;

        background: #FBFDFD;
    }


    .caixa-mobile-values span {
        display: block;

        margin-bottom: 4px;

        color: #819194;

        font-size: 0.65rem;
        font-weight: 700;
    }


    .caixa-mobile-values strong {
        display: block;

        color: var(--text-primary);

        font-size: 0.82rem;
        font-weight: 800;

        line-height: 1.35;

        overflow-wrap: anywhere;
    }


    /* ======================================================
       DIFERENÇA
       ====================================================== */

    .caixa-mobile-difference {
        display: flex;

        align-items: center;
        justify-content: space-between;

        gap: 12px;

        margin-top: 11px;

        padding:
            11px
            12px;

        border:
            1px solid
            rgba(11, 46, 51, 0.055);

        border-radius: 9px;

        background:
            rgba(79, 124, 130, 0.04);
    }


    .caixa-mobile-difference > span {
        color: var(--text-secondary);

        font-size: 0.72rem;
        font-weight: 700;
    }


    .caixa-mobile-difference strong {
        text-align: right;

        font-size: 0.84rem;
        font-weight: 800;
    }


    .caixa-difference-ok {
        color: var(--success);
    }


    .caixa-difference-alert {
        color: #87570E;
    }


    .caixa-difference-muted {
        color: #839396;
    }


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

    .caixa-mobile-actions {
        display: flex;

        justify-content: flex-end;

        margin-top: 13px;

        padding-top: 13px;

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


    .caixa-mobile-open {
        min-height: 39px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        gap: 7px;

        padding:
            8px
            12px;

        border:
            1px solid
            rgba(79, 124, 130, 0.16);

        border-radius: 9px;

        background:
            rgba(79, 124, 130, 0.06);

        color: var(--fazan-dark);

        font-size: 0.77rem;
        font-weight: 800;

        text-decoration: none;

        transition:
            background-color 0.16s ease,
            border-color 0.16s ease;
    }


    .caixa-mobile-open:hover {
        background:
            rgba(79, 124, 130, 0.12);

        border-color:
            rgba(79, 124, 130, 0.25);
    }

}


/* ==========================================================
   CELULAR PEQUENO
   ========================================================== */

@media (max-width: 390px) {

    .caixa-mobile-card {
        padding: 14px;
    }


    .caixa-mobile-values {
        grid-template-columns: 1fr;
    }


    .caixa-mobile-actions {
        justify-content: stretch;
    }


    .caixa-mobile-open {
        width: 100%;
    }

}

/* ==========================================================
   FAZAN GESTÃO
   CAIXA - DETALHES RESPONSIVOS
   ========================================================== */

.caixa-detail-status-value {
    display: flex;

    align-items: center;
}


.caixa-detail-status-value .status-badge {
    font-size: 0.72rem;
}


.caixa-detail-difference-ok {
    color: var(--success);
}


.caixa-detail-difference-alert {
    color: #87570E;
}


.caixa-movements-desktop,
.caixa-sales-desktop {
    display: block;
}


.caixa-movements-mobile,
.caixa-sales-mobile {
    display: none;
}


.caixa-sales-count {
    display: flex;

    align-items: baseline;

    gap: 5px;

    color: var(--text-secondary);
}


.caixa-sales-count strong {
    color: var(--fazan-dark);

    font-size: 1.05rem;
}


.caixa-sales-count span {
    font-size: 0.75rem;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

    /* ======================================================
       INDICADORES
       ====================================================== */

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


    .dashboard-grid {
        grid-template-columns: 1fr;
    }


    /* ======================================================
       SEÇÕES DE TABELA
       ====================================================== */

    .caixa-detail-movements,
    .caixa-detail-sales {
        padding: 15px;
    }


    .caixa-movements-desktop,
    .caixa-sales-desktop {
        display: none;
    }


    .caixa-movements-mobile,
    .caixa-sales-mobile {
        display: flex;

        flex-direction: column;

        gap: 10px;
    }


    /* ======================================================
       MOVIMENTAÇÃO
       ====================================================== */

    .caixa-movement-card {
        position: relative;

        min-width: 0;

        padding: 14px;

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

        border-radius: 11px;

        background: #FFFFFF;

        overflow: hidden;
    }


    .caixa-movement-card::before {
        content: "";

        position: absolute;

        top: 0;
        bottom: 0;
        left: 0;

        width: 3px;
    }


    .caixa-movement-card-in::before {
        background: var(--success);
    }


    .caixa-movement-card-out::before {
        background: var(--danger);
    }


    .caixa-movement-header {
        display: flex;

        align-items: center;
        justify-content: space-between;

        gap: 12px;
    }


    .caixa-movement-type {
        min-width: 0;

        display: flex;

        align-items: center;

        gap: 9px;
    }


    .caixa-movement-icon {
        width: 34px;
        min-width: 34px;
        height: 34px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        border-radius: 9px;

        background:
            rgba(79, 124, 130, 0.07);

        color: var(--fazan-primary);
    }


    .caixa-movement-type > div {
        min-width: 0;
    }


    .caixa-movement-type > div > span {
        display: block;

        color: #829295;

        font-size: 0.62rem;
        font-weight: 700;
    }


    .caixa-movement-type strong {
        display: block;

        margin-top: 2px;

        color: var(--fazan-dark);

        font-size: 0.8rem;
        font-weight: 800;
    }


    .caixa-movement-value {
        flex: 0 0 auto;

        font-size: 0.84rem;
        font-weight: 800;

        white-space: nowrap;
    }


    .caixa-movement-value-in {
        color: var(--success);
    }


    .caixa-movement-value-out {
        color: var(--danger);
    }


    .caixa-movement-meta {
        display: flex;

        flex-direction: column;

        gap: 6px;

        margin-top: 11px;

        padding:
            9px
            10px;

        border-radius: 8px;

        background: #F8FBFB;
    }


    .caixa-movement-meta > div {
        display: flex;

        align-items: center;

        gap: 7px;

        color: #667B7E;

        font-size: 0.72rem;
    }


    .caixa-movement-meta i {
        color: var(--fazan-primary);
    }


    .caixa-movement-note {
        margin-top: 10px;
    }


    .caixa-movement-note > span {
        color: #829295;

        font-size: 0.64rem;
        font-weight: 700;
    }


    .caixa-movement-note p {
        margin:
            3px
            0
            0;

        color: var(--text-primary);

        font-size: 0.75rem;

        line-height: 1.45;

        overflow-wrap: anywhere;
    }


    /* ======================================================
       VENDA
       ====================================================== */

    .caixa-sale-card {
        min-width: 0;

        padding: 14px;

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

        border-radius: 11px;

        background: #FFFFFF;
    }


    .caixa-sale-header {
        display: flex;

        align-items: flex-start;
        justify-content: space-between;

        gap: 12px;
    }


    .caixa-sale-header > div > span {
        display: block;

        color: #829295;

        font-size: 0.62rem;
        font-weight: 700;

        text-transform: uppercase;

        letter-spacing: 0.04em;
    }


    .caixa-sale-header > div > strong {
        display: block;

        margin-top: 2px;

        color: var(--fazan-dark);

        font-size: 0.92rem;
        font-weight: 800;
    }


    .caixa-sale-total {
        color: var(--fazan-dark);

        font-size: 0.9rem;
        font-weight: 800;

        white-space: nowrap;
    }


    .caixa-sale-meta {
        display: flex;

        flex-direction: column;

        gap: 6px;

        margin-top: 11px;

        padding:
            9px
            10px;

        border-radius: 8px;

        background: #F8FBFB;
    }


    .caixa-sale-meta > div {
        min-width: 0;

        display: flex;

        align-items: center;

        gap: 7px;

        color: #667B7E;

        font-size: 0.72rem;
    }


    .caixa-sale-meta i {
        flex: 0 0 auto;

        color: var(--fazan-primary);
    }


    .caixa-sale-meta span {
        min-width: 0;

        overflow-wrap: anywhere;
    }


    .caixa-sale-info {
        display: grid;

        grid-template-columns:
            minmax(0, 1.4fr)
            minmax(0, 0.6fr);

        gap: 9px;

        margin-top: 10px;
    }


    .caixa-sale-info > div {
        min-width: 0;

        padding:
            9px
            10px;

        border:
            1px solid
            rgba(11, 46, 51, 0.05);

        border-radius: 8px;

        background: #FBFDFD;
    }


    .caixa-sale-info span {
        display: block;

        margin-bottom: 4px;

        color: #829295;

        font-size: 0.63rem;
        font-weight: 700;
    }


    .caixa-sale-info strong {
        display: block;

        color: var(--text-primary);

        font-size: 0.74rem;
        font-weight: 700;

        line-height: 1.4;

        overflow-wrap: anywhere;
    }


    .caixa-sale-payments {
        display: flex;

        flex-direction: column;

        gap: 3px;
    }


    .caixa-sale-actions {
        display: flex;

        justify-content: flex-end;

        margin-top: 11px;

        padding-top: 11px;

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


    .caixa-sale-open {
        min-height: 38px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        gap: 7px;

        padding:
            8px
            12px;

        border:
            1px solid
            rgba(79, 124, 130, 0.16);

        border-radius: 8px;

        background:
            rgba(79, 124, 130, 0.06);

        color: var(--fazan-dark);

        font-size: 0.75rem;
        font-weight: 800;

        text-decoration: none;
    }

}


/* ==========================================================
   CELULAR PEQUENO
   ========================================================== */

@media (max-width: 390px) {

    .metric-grid {
        grid-template-columns: 1fr;
    }


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


    .caixa-movement-header {
        align-items: flex-start;
    }


    .caixa-sale-actions {
        justify-content: stretch;
    }


    .caixa-sale-open {
        width: 100%;
    }

}

/* ==========================================================
   FAZAN GESTÃO
   HISTÓRICO DE VENDAS - RESPONSIVO
   ========================================================== */

.sales-history-desktop {
    display: block;
}


.sales-history-mobile {
    display: none;
}


.sales-search-input {
    position: relative;
}


.sales-search-input i {
    position: absolute;

    top: 50%;
    left: 13px;

    transform: translateY(-50%);

    color: #819194;

    pointer-events: none;
}


.sales-search-input input {
    width: 100%;

    padding-left: 38px;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

    .sales-history-filter-card {
        padding: 15px;
    }


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


    .sales-search-field {
        grid-column: auto;
    }


    .sales-filter-actions {
        grid-column: auto;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 8px;
    }


    .sales-filter-actions > * {
        width: 100%;
    }


    .sales-history-results {
        padding: 0;

        background: transparent;

        border: 0;

        box-shadow: none;
    }


    .sales-history-summary {
        margin-bottom: 10px;

        padding:
            11px
            13px;

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

        border-radius: 10px;

        background: #FFFFFF;
    }


    .sales-history-desktop {
        display: none;
    }


    .sales-history-mobile {
        display: flex;

        flex-direction: column;

        gap: 11px;
    }


    /* ======================================================
       CARD DE VENDA
       ====================================================== */

    .sale-history-card {
        position: relative;

        min-width: 0;

        padding: 15px;

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

        border-radius: 12px;

        background: #FFFFFF;

        box-shadow:
            0 3px 14px
            rgba(11, 46, 51, 0.05);

        overflow: hidden;
    }


    .sale-history-card::before {
        content: "";

        position: absolute;

        top: 0;
        bottom: 0;
        left: 0;

        width: 3px;

        background: var(--success);
    }


    .sale-history-card-open::before {
        background: var(--fazan-primary);
    }


    .sale-history-card-cancelled::before {
        background: var(--danger);
    }


    .sale-history-card-header {
        display: flex;

        align-items: flex-start;
        justify-content: space-between;

        gap: 12px;
    }


    .sale-history-card-header > div > span {
        display: block;

        color: #819194;

        font-size: 0.62rem;
        font-weight: 800;

        text-transform: uppercase;

        letter-spacing: 0.05em;
    }


    .sale-history-card-header > div > strong {
        display: block;

        margin-top: 2px;

        color: var(--fazan-dark);

        font-size: 0.95rem;
        font-weight: 800;
    }


    .sale-history-card-total {
        color: var(--fazan-dark);

        font-size: 0.92rem;
        font-weight: 800;

        white-space: nowrap;
    }


    .sale-history-card-status {
        margin-top: 9px;
    }


    .sale-history-card-status .status-badge {
        min-height: 24px;

        padding:
            4px
            8px;

        font-size: 0.67rem;
    }


    /* ======================================================
       META
       ====================================================== */

    .sale-history-card-meta {
        display: flex;

        flex-direction: column;

        gap: 7px;

        margin-top: 11px;

        padding:
            10px
            11px;

        border-radius: 9px;

        background: #F8FBFB;
    }


    .sale-history-card-meta > div {
        min-width: 0;

        display: flex;

        align-items: center;

        gap: 8px;

        color: #667B7E;

        font-size: 0.73rem;
    }


    .sale-history-card-meta i {
        flex: 0 0 auto;

        color: var(--fazan-primary);
    }


    .sale-history-card-meta span {
        min-width: 0;

        overflow-wrap: anywhere;
    }


    /* ======================================================
       INFORMAÇÕES
       ====================================================== */

    .sale-history-card-info {
        display: grid;

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

        gap: 9px;

        margin-top: 10px;
    }


    .sale-history-card-info > div {
        min-width: 0;

        padding:
            9px
            10px;

        border:
            1px solid
            rgba(11, 46, 51, 0.05);

        border-radius: 8px;

        background: #FBFDFD;
    }


    .sale-history-card-info span {
        display: block;

        margin-bottom: 4px;

        color: #829295;

        font-size: 0.63rem;
        font-weight: 700;
    }


    .sale-history-card-info strong {
        display: block;

        color: var(--text-primary);

        font-size: 0.74rem;
        font-weight: 800;

        line-height: 1.4;

        overflow-wrap: anywhere;
    }


    .sale-history-card-info small {
        display: block;

        margin-top: 2px;

        color: var(--text-secondary);

        font-size: 0.67rem;
    }


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

    .sale-history-card-actions {
        display: flex;

        justify-content: flex-end;

        margin-top: 11px;

        padding-top: 11px;

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


    .sale-history-card-open {
        min-height: 38px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        gap: 7px;

        padding:
            8px
            12px;

        border:
            1px solid
            rgba(79, 124, 130, 0.16);

        border-radius: 8px;

        background:
            rgba(79, 124, 130, 0.06);

        color: var(--fazan-dark);

        font-size: 0.75rem;
        font-weight: 800;

        text-decoration: none;
    }

}


/* ==========================================================
   CELULAR PEQUENO
   ========================================================== */

@media (max-width: 390px) {

    .sale-history-card {
        padding: 14px;
    }


    .sale-history-card-info {
        grid-template-columns: 1fr;
    }


    .sale-history-card-actions {
        justify-content: stretch;
    }


    .sale-history-card-open {
        width: 100%;
    }

}

/* ==========================================================
   FAZAN GESTÃO
   DETALHES DA VENDA - RESPONSIVO
   ========================================================== */

.sale-items-desktop {
    display: block;
}


.sale-items-mobile {
    display: none;
}


.sale-items-count {
    display: flex;

    align-items: baseline;

    gap: 5px;
}


.sale-items-count strong {
    color: var(--fazan-dark);

    font-size: 1.05rem;
    font-weight: 800;
}


.sale-items-count span {
    color: var(--text-secondary);

    font-size: 0.75rem;
}


.sale-cancel-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

    /* ======================================================
       AÇÕES SUPERIORES
       ====================================================== */

    .sale-detail-actions {
        width: 100%;

        display: grid;

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

        gap: 8px;
    }


    .sale-detail-actions > a {
        width: 100%;

        min-height: 42px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        gap: 7px;

        text-align: center;
    }


    /* ======================================================
       CANCELADA
       ====================================================== */

    .sale-cancelled-box {
        padding: 14px;

        border-radius: 11px;
    }


    .sale-cancelled-box strong,
    .sale-cancelled-box span {
        overflow-wrap: anywhere;
    }


    /* ======================================================
       INDICADORES
       ====================================================== */

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


    /* ======================================================
       PAGAMENTO
       ====================================================== */

    .sale-payment-card {
        padding: 15px;
    }


    .sale-payment-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 9px;
    }


    .sale-payment-grid > div {
        min-width: 0;
    }


    .sale-payment-grid strong {
        overflow-wrap: anywhere;
    }


    /* ======================================================
       ITENS
       ====================================================== */

    .sale-items-card {
        padding: 15px;
    }


    .sale-items-desktop {
        display: none;
    }


    .sale-items-mobile {
        display: flex;

        flex-direction: column;

        gap: 10px;
    }


    .sale-item-mobile-card {
        min-width: 0;

        padding: 14px;

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

        border-radius: 11px;

        background: #FFFFFF;
    }


    .sale-item-mobile-header {
        display: flex;

        align-items: flex-start;
        justify-content: space-between;

        gap: 12px;
    }


    .sale-item-mobile-product {
        min-width: 0;

        display: flex;

        align-items: flex-start;

        gap: 9px;
    }


    .sale-item-mobile-icon {
        width: 34px;
        min-width: 34px;
        height: 34px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        border-radius: 9px;

        background:
            rgba(79, 124, 130, 0.07);

        color: var(--fazan-primary);
    }


    .sale-item-mobile-product > div {
        min-width: 0;
    }


    .sale-item-mobile-product strong {
        display: block;

        color: var(--fazan-dark);

        font-size: 0.8rem;
        font-weight: 800;

        line-height: 1.35;

        overflow-wrap: anywhere;
    }


    .sale-item-mobile-product span {
        display: block;

        margin-top: 3px;

        color: var(--text-secondary);

        font-size: 0.69rem;
    }


    .sale-item-mobile-total {
        flex: 0 0 auto;

        color: var(--fazan-dark);

        font-size: 0.82rem;
        font-weight: 800;

        white-space: nowrap;
    }


    .sale-item-mobile-values {
        display: grid;

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

        gap: 7px;

        margin-top: 11px;
    }


    .sale-item-mobile-values > div {
        min-width: 0;

        padding:
            8px
            9px;

        border-radius: 8px;

        background: #F8FBFB;
    }


    .sale-item-mobile-values span {
        display: block;

        margin-bottom: 3px;

        color: #829295;

        font-size: 0.61rem;
        font-weight: 700;
    }


    .sale-item-mobile-values strong {
        display: block;

        color: var(--text-primary);

        font-size: 0.71rem;
        font-weight: 800;

        overflow-wrap: anywhere;
    }


    /* ======================================================
       CANCELAMENTO
       ====================================================== */

    .sale-cancel-card {
        padding: 15px;
    }


    .sale-cancel-card textarea {
        width: 100%;

        min-height: 110px;
    }


    .sale-cancel-button {
        min-height: 42px;
    }

}


/* ==========================================================
   CELULAR PEQUENO
   ========================================================== */

@media (max-width: 390px) {

    .sale-detail-actions {
        grid-template-columns: 1fr;
    }


    .metric-grid {
        grid-template-columns: 1fr;
    }


    .sale-payment-grid {
        grid-template-columns: 1fr;
    }


    .sale-item-mobile-header {
        flex-direction: column;
    }


    .sale-item-mobile-total {
        padding-left: 43px;
    }


    .sale-item-mobile-values {
        grid-template-columns: 1fr;
    }


    .sale-cancel-button {
        width: 100%;
    }

}

/* ==========================================================
   FAZAN GESTÃO
   PRODUÇÃO - LISTAGEM RESPONSIVA
   ========================================================== */

.production-desktop {
    display: block;
}


.production-mobile {
    display: none;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

    .production-list-panel {
        padding: 0;

        background: transparent;

        border: 0;

        box-shadow: none;
    }


    .production-desktop {
        display: none;
    }


    .production-mobile {
        display: flex;

        flex-direction: column;

        gap: 11px;
    }


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

    .production-mobile-card {
        position: relative;

        min-width: 0;

        padding: 15px;

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

        border-radius: 12px;

        background: #FFFFFF;

        box-shadow:
            0 3px 14px
            rgba(11, 46, 51, 0.05);

        overflow: hidden;
    }


    .production-mobile-card::before {
        content: "";

        position: absolute;

        top: 0;
        bottom: 0;
        left: 0;

        width: 3px;

        background: var(--fazan-primary);
    }


    /* ======================================================
       CABEÇALHO
       ====================================================== */

    .production-mobile-header {
        display: flex;

        align-items: flex-start;
        justify-content: space-between;

        gap: 12px;
    }


    .production-mobile-eyebrow {
        display: block;

        color: #819194;

        font-size: 0.62rem;
        font-weight: 800;

        text-transform: uppercase;

        letter-spacing: 0.05em;
    }


    .production-mobile-header > div > strong {
        display: block;

        margin-top: 2px;

        color: var(--fazan-dark);

        font-size: 0.95rem;
        font-weight: 800;
    }


    .production-mobile-header .status-badge {
        flex: 0 0 auto;

        min-height: 24px;

        padding:
            4px
            8px;

        font-size: 0.67rem;
    }


    /* ======================================================
       PRODUTO
       ====================================================== */

    .production-mobile-product {
        min-width: 0;

        display: flex;

        align-items: center;

        gap: 10px;

        margin-top: 12px;

        padding:
            10px
            11px;

        border-radius: 9px;

        background:
            rgba(79, 124, 130, 0.055);
    }


    .production-mobile-icon {
        width: 36px;
        min-width: 36px;
        height: 36px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        border-radius: 9px;

        background: #FFFFFF;

        color: var(--fazan-primary);

        box-shadow:
            0 1px 5px
            rgba(11, 46, 51, 0.06);
    }


    .production-mobile-product > div {
        min-width: 0;
    }


    .production-mobile-product strong {
        display: block;

        color: var(--fazan-dark);

        font-size: 0.79rem;
        font-weight: 800;

        line-height: 1.35;

        overflow-wrap: anywhere;
    }


    .production-mobile-product span {
        display: block;

        margin-top: 3px;

        color: var(--text-secondary);

        font-size: 0.68rem;
    }


    /* ======================================================
       DATA / USUÁRIO
       ====================================================== */

    .production-mobile-meta {
        display: flex;

        flex-direction: column;

        gap: 7px;

        margin-top: 10px;
    }


    .production-mobile-meta > div {
        min-width: 0;

        display: flex;

        align-items: center;

        gap: 7px;

        color: #667B7E;

        font-size: 0.72rem;
    }


    .production-mobile-meta i {
        flex: 0 0 auto;

        color: var(--fazan-primary);
    }


    .production-mobile-meta span {
        min-width: 0;

        overflow-wrap: anywhere;
    }


    /* ======================================================
       VALORES
       ====================================================== */

    .production-mobile-values {
        display: grid;

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

        gap: 8px;

        margin-top: 11px;
    }


    .production-mobile-values > div {
        min-width: 0;

        padding:
            9px
            10px;

        border:
            1px solid
            rgba(11, 46, 51, 0.05);

        border-radius: 8px;

        background: #FBFDFD;
    }


    .production-mobile-values span {
        display: block;

        margin-bottom: 4px;

        color: #829295;

        font-size: 0.62rem;
        font-weight: 700;
    }


    .production-mobile-values strong {
        display: block;

        color: var(--text-primary);

        font-size: 0.74rem;
        font-weight: 800;

        line-height: 1.4;

        overflow-wrap: anywhere;
    }

}


/* ==========================================================
   CELULAR PEQUENO
   ========================================================== */

@media (max-width: 390px) {

    .production-mobile-card {
        padding: 14px;
    }


    .production-mobile-values {
        grid-template-columns: 1fr;
    }

}

/* ==========================================================
   FAZAN GESTÃO
   GESTÃO DE USUÁRIOS - RESPONSIVO
   ========================================================== */

.users-desktop {
    display: block;
}


.users-mobile {
    display: none;
}


.users-table-name {
    display: flex;

    align-items: center;

    gap: 9px;
}


.users-table-avatar {
    width: 32px;
    min-width: 32px;
    height: 32px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background:
        rgba(79, 124, 130, 0.08);

    color: var(--fazan-primary);

    font-size: 0.75rem;
    font-weight: 800;
}


.users-table-name > div {
    min-width: 0;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

    .users-list-panel {
        padding: 0;

        background: transparent;

        border: 0;

        box-shadow: none;
    }


    .users-desktop {
        display: none;
    }


    .users-mobile {
        display: flex;

        flex-direction: column;

        gap: 11px;
    }


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

    .user-mobile-card {
        position: relative;

        min-width: 0;

        padding: 15px;

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

        border-radius: 12px;

        background: #FFFFFF;

        box-shadow:
            0 3px 14px
            rgba(11, 46, 51, 0.05);

        overflow: hidden;
    }


    .user-mobile-card::before {
        content: "";

        position: absolute;

        top: 0;
        bottom: 0;
        left: 0;

        width: 3px;

        background: var(--fazan-primary);
    }


    .user-mobile-card-inactive::before {
        background: var(--danger);
    }


    /* ======================================================
       IDENTIDADE
       ====================================================== */

    .user-mobile-header {
        display: flex;

        align-items: flex-start;
        justify-content: space-between;

        gap: 10px;
    }


    .user-mobile-identity {
        min-width: 0;

        display: flex;

        align-items: center;

        gap: 10px;
    }


    .user-mobile-avatar {
        width: 40px;
        min-width: 40px;
        height: 40px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        border-radius: 11px;

        background:
            rgba(79, 124, 130, 0.08);

        color: var(--fazan-primary);

        font-size: 0.9rem;
        font-weight: 800;
    }


    .user-mobile-identity > div {
        min-width: 0;
    }


    .user-mobile-name {
        min-width: 0;

        display: flex;

        align-items: center;

        flex-wrap: wrap;

        gap: 6px;
    }


    .user-mobile-name > strong {
        min-width: 0;

        color: var(--fazan-dark);

        font-size: 0.82rem;
        font-weight: 800;

        overflow-wrap: anywhere;
    }


    .user-self-badge {
        display: inline-flex;

        align-items: center;

        min-height: 20px;

        padding:
            2px
            6px;

        border-radius: 999px;

        background:
            rgba(79, 124, 130, 0.08);

        color: var(--fazan-primary);

        font-size: 0.58rem;
        font-weight: 800;

        text-transform: uppercase;

        letter-spacing: 0.03em;
    }


    .user-mobile-email {
        display: block;

        margin-top: 3px;

        color: var(--text-secondary);

        font-size: 0.68rem;

        overflow-wrap: anywhere;
    }


    .user-mobile-header > .status-badge {
        flex: 0 0 auto;

        min-height: 24px;

        padding:
            4px
            8px;

        font-size: 0.66rem;
    }


    /* ======================================================
       INFORMAÇÕES
       ====================================================== */

    .user-mobile-details {
        display: grid;

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

        gap: 8px;

        margin-top: 12px;
    }


    .user-mobile-details > div {
        min-width: 0;

        padding:
            9px
            10px;

        border:
            1px solid
            rgba(11, 46, 51, 0.05);

        border-radius: 8px;

        background: #F8FBFB;
    }


    .user-mobile-details > div > span {
        display: block;

        margin-bottom: 5px;

        color: #829295;

        font-size: 0.62rem;
        font-weight: 700;
    }


    .user-mobile-details strong {
        display: block;

        color: var(--text-primary);

        font-size: 0.72rem;
        font-weight: 800;

        line-height: 1.4;

        overflow-wrap: anywhere;
    }


    .user-mobile-details small {
        display: block;

        margin-top: 2px;

        color: var(--text-secondary);

        font-size: 0.65rem;
    }


    .user-mobile-details .status-badge {
        min-height: 23px;

        padding:
            4px
            7px;

        font-size: 0.64rem;
    }


    /* ======================================================
       AÇÕES
       ====================================================== */

    .user-mobile-actions {
        display: flex;

        justify-content: flex-end;

        margin-top: 11px;

        padding-top: 11px;

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


    .user-mobile-edit {
        min-height: 38px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        gap: 7px;

        padding:
            8px
            12px;

        border:
            1px solid
            rgba(79, 124, 130, 0.16);

        border-radius: 8px;

        background:
            rgba(79, 124, 130, 0.06);

        color: var(--fazan-dark);

        font-size: 0.74rem;
        font-weight: 800;

        text-decoration: none;
    }

}


/* ==========================================================
   CELULAR PEQUENO
   ========================================================== */

@media (max-width: 390px) {

    .user-mobile-card {
        padding: 14px;
    }


    .user-mobile-details {
        grid-template-columns: 1fr;
    }


    .user-mobile-actions {
        justify-content: stretch;
    }


    .user-mobile-edit {
        width: 100%;
    }

}

/* ==========================================================
   ENTRADA DE MERCADORIAS - FORMULÁRIO
   ========================================================== */

.purchase-entry-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.purchase-entry-form > .card {
    margin: 0;
    padding: 24px;

    background: #FFFFFF;

    border:
        1px solid
        rgba(11, 46, 51, 0.10);

    border-radius: 14px;

    box-shadow:
        0 8px 24px
        rgba(11, 46, 51, 0.05);
}


.purchase-entry-form .card-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}


.purchase-entry-form .card-header h2 {
    margin: 0 0 5px;

    font-size: 1.15rem;
}


.purchase-entry-form .card-header p {
    margin: 0;

    color: var(--text-secondary);
}


.purchase-entry-form .form-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(180px, 0.7fr)
        minmax(0, 1fr);

    gap: 18px;

    align-items: start;
}


.purchase-entry-form .form-group {
    min-width: 0;

    margin-bottom: 18px;
}


.purchase-entry-form .form-group label {
    display: block;

    margin-bottom: 7px;

    font-size: 0.84rem;
    font-weight: 700;

    color: var(--text-primary);
}


.purchase-entry-form .form-group input,
.purchase-entry-form .form-group select,
.purchase-entry-form .form-group textarea {
    width: 100%;
    max-width: none;

    min-height: 44px;

    padding: 10px 12px;

    border:
        1px solid
        rgba(11, 46, 51, 0.16);

    border-radius: 9px;

    background: #FFFFFF;

    color: var(--text-primary);

    font: inherit;

    outline: none;
}


.purchase-entry-form .form-group textarea {
    min-height: 90px;

    resize: vertical;
}


.purchase-entry-form .form-group input:focus,
.purchase-entry-form .form-group select:focus,
.purchase-entry-form .form-group textarea:focus {
    border-color: var(--fazan-primary);

    box-shadow:
        0 0 0 3px
        rgba(20, 104, 111, 0.10);
}


/* ==========================================================
   TABELA DE ITENS
   ========================================================== */

.purchase-entry-form #lista-itens {
    width: 100%;

    overflow-x: visible;
}


.purchase-entry-form #lista-itens table {
    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;
}


.purchase-entry-form #lista-itens th {
    padding: 10px 8px;

    text-align: left;

    color: var(--text-secondary);

    font-size: 0.75rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.04em;

    border-bottom:
        1px solid
        rgba(11, 46, 51, 0.10);
}


.purchase-entry-form #lista-itens td {
    padding: 12px 8px;

    vertical-align: middle;

    border-bottom:
        1px solid
        rgba(11, 46, 51, 0.08);
}


.purchase-entry-form #lista-itens th:nth-child(1),
.purchase-entry-form #lista-itens td:nth-child(1) {
    width: 44%;
}


.purchase-entry-form #lista-itens th:nth-child(2),
.purchase-entry-form #lista-itens td:nth-child(2) {
    width: 16%;
}


.purchase-entry-form #lista-itens th:nth-child(3),
.purchase-entry-form #lista-itens td:nth-child(3) {
    width: 18%;
}


.purchase-entry-form #lista-itens th:nth-child(4),
.purchase-entry-form #lista-itens td:nth-child(4) {
    width: 15%;
}


.purchase-entry-form #lista-itens th:nth-child(5),
.purchase-entry-form #lista-itens td:nth-child(5) {
    width: 7%;
}


.purchase-entry-form #lista-itens select,
.purchase-entry-form #lista-itens input {
    width: 100%;
    max-width: none;

    min-height: 42px;

    padding: 9px 10px;

    border:
        1px solid
        rgba(11, 46, 51, 0.16);

    border-radius: 8px;

    background: #FFFFFF;

    color: var(--text-primary);

    font: inherit;

    outline: none;
}


.purchase-entry-form #lista-itens select:focus,
.purchase-entry-form #lista-itens input:focus {
    border-color: var(--fazan-primary);

    box-shadow:
        0 0 0 3px
        rgba(20, 104, 111, 0.10);
}


.purchase-entry-form .item-total {
    white-space: nowrap;
}


.purchase-entry-form .btn-remover-item {
    width: 38px;
    height: 38px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0;
}


/* ==========================================================
   TOTAL
   ========================================================== */

.purchase-entry-form .card > .form-actions {
    margin-top: 18px;
    padding-top: 18px;

    border-top:
        1px solid
        rgba(11, 46, 51, 0.10);

    display: flex;

    justify-content: flex-end;
}


.purchase-entry-form #total-geral {
    display: block;

    margin-top: 3px;
}


/* ==========================================================
   MOBILE - ENTRADA DE MERCADORIAS
   ========================================================== */

@media (max-width: 700px) {

    .purchase-entry-form {
        gap: 14px;
    }


    .purchase-entry-form > .card {
        padding: 18px 14px;

        border-radius: 12px;
    }


    .purchase-entry-form .card-header {
        flex-direction: column;

        gap: 14px;

        margin-bottom: 20px;
    }


    .purchase-entry-form .card-header > button {
        width: 100%;
    }


    .purchase-entry-form .form-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .purchase-entry-form .form-group {
        margin-bottom: 16px;
    }


    /*
       No celular cada linha da tabela vira um card.
       Isso elimina a rolagem horizontal.
    */

    .purchase-entry-form #lista-itens {
        overflow: visible;
    }


    .purchase-entry-form #lista-itens table,
    .purchase-entry-form #lista-itens tbody {
        display: block;

        width: 100%;
    }


    .purchase-entry-form #lista-itens thead {
        display: none;
    }


    .purchase-entry-form #lista-itens .item-row {
        display: grid;

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

        gap: 14px;

        width: 100%;

        margin-bottom: 14px;
        padding: 14px;

        background: #F8FBFB;

        border:
            1px solid
            rgba(11, 46, 51, 0.10);

        border-radius: 11px;
    }


    .purchase-entry-form #lista-itens .item-row td {
        display: block;

        width: auto;

        padding: 0;

        border: 0;

        min-width: 0;
    }


    /*
       Produto
    */

    .purchase-entry-form #lista-itens .item-row td:nth-child(1) {
        grid-column: 1 / -1;
    }


    .purchase-entry-form #lista-itens .item-row td:nth-child(1)::before {
        content: "Produto";

        display: block;

        margin-bottom: 6px;

        color: var(--text-secondary);

        font-size: 0.72rem;
        font-weight: 700;

        text-transform: uppercase;
        letter-spacing: 0.04em;
    }


    /*
       Quantidade
    */

    .purchase-entry-form #lista-itens .item-row td:nth-child(2)::before {
        content: "Quantidade";

        display: block;

        margin-bottom: 6px;

        color: var(--text-secondary);

        font-size: 0.72rem;
        font-weight: 700;

        text-transform: uppercase;
        letter-spacing: 0.04em;
    }


    /*
       Custo
    */

    .purchase-entry-form #lista-itens .item-row td:nth-child(3)::before {
        content: "Custo unitário";

        display: block;

        margin-bottom: 6px;

        color: var(--text-secondary);

        font-size: 0.72rem;
        font-weight: 700;

        text-transform: uppercase;
        letter-spacing: 0.04em;
    }


    /*
       Total
    */

    .purchase-entry-form #lista-itens .item-row td:nth-child(4) {
        display: flex;

        flex-direction: column;

        justify-content: center;

        min-height: 42px;
    }


    .purchase-entry-form #lista-itens .item-row td:nth-child(4)::before {
        content: "Total";

        display: block;

        margin-bottom: 4px;

        color: var(--text-secondary);

        font-size: 0.72rem;
        font-weight: 700;

        text-transform: uppercase;
        letter-spacing: 0.04em;
    }


    /*
       Remover
    */

    .purchase-entry-form #lista-itens .item-row td:nth-child(5) {
        display: flex;

        align-items: flex-end;
        justify-content: flex-end;
    }


    .purchase-entry-form .btn-remover-item {
        width: 42px;
        height: 42px;
    }


    /*
       Ações finais
    */

    .purchase-entry-form > .form-actions {
        display: flex;

        flex-direction: column-reverse;

        gap: 10px;

        width: 100%;
    }


    .purchase-entry-form > .form-actions .btn {
        width: 100%;

        justify-content: center;
    }


    .purchase-entry-form .card > .form-actions {
        justify-content: flex-start;
    }

}

/* ==========================================================
   CONFIRMAÇÃO PARA DESCARTAR COMPRA NÃO REGISTRADA
   ========================================================== */

.purchase-cancel-dialog {
    width: min(430px, calc(100vw - 32px));
    max-width: none;

    padding: 0;

    border: 0;
    border-radius: 18px;

    background: transparent;

    overflow: visible;
}


.purchase-cancel-dialog[open]:not(:modal) {
    display: none;
}


.purchase-cancel-dialog::backdrop {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}


.purchase-cancel-dialog .barcode-modal-dialog {
    max-width: none;
}


.purchase-cancel-close {
    position: absolute;
    top: 14px;
    right: 14px;

    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 10px;

    background: transparent;
    color: var(--text-secondary);

    cursor: pointer;
}


.purchase-cancel-close:hover {
    background: rgba(79, 124, 130, 0.08);
    color: var(--fazan-dark);
}


.purchase-cancel-close:focus-visible {
    outline: 3px solid rgba(79, 124, 130, 0.3);
    outline-offset: 2px;
}


.purchase-cancel-summary {
    margin-top: 14px !important;
    padding: 10px 12px;

    border-radius: 9px;

    background: #F4F8F8;
    color: var(--fazan-dark) !important;

    font-size: 0.84rem;
    font-weight: 800;

    overflow-wrap: anywhere;
}


.purchase-cancel-dialog .is-disabled {
    pointer-events: none;
    opacity: 0.62;
}


@media (max-width: 600px) {

    .purchase-cancel-dialog .barcode-modal-actions > * {
        width: 100%;
        justify-content: center;
    }

}

/* ==========================================================
   DETALHES DA ENTRADA DE MERCADORIAS
   ========================================================== */

.purchase-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.purchase-details-card {
    padding: 24px;
}


.purchase-details-heading {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 24px;
}


.purchase-details-heading h2,
.purchase-details-section-header h2 {
    margin: 3px 0 5px;

    font-size: 1.15rem;
}


.purchase-details-heading p,
.purchase-details-section-header p {
    margin: 0;

    color: var(--text-secondary);
}


.purchase-details-label {
    color: var(--fazan-primary);

    font-size: 0.72rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.06em;
}


.purchase-details-total-top {
    display: flex;
    flex-direction: column;

    align-items: flex-end;

    flex-shrink: 0;
}


.purchase-details-total-top span,
.purchase-details-grand-total span {
    margin-bottom: 3px;

    color: var(--text-secondary);

    font-size: 0.76rem;
}


.purchase-details-total-top strong {
    font-size: 1.35rem;
}


.purchase-details-grid {
    display: grid;

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

    gap: 16px;
}


.purchase-detail-item {
    min-width: 0;

    padding: 14px;

    background: #F8FBFB;

    border:
        1px solid
        rgba(11, 46, 51, 0.08);

    border-radius: 10px;
}


.purchase-detail-item span,
.purchase-details-observation > span,
.purchase-register-grid span {
    display: block;

    margin-bottom: 5px;

    color: var(--text-secondary);

    font-size: 0.74rem;
    font-weight: 700;
}


.purchase-detail-item strong {
    display: block;

    overflow-wrap: anywhere;
}


.purchase-detail-item small {
    display: block;

    margin-top: 4px;

    color: var(--text-secondary);
}


.purchase-details-observation {
    margin-top: 16px;

    padding: 14px;

    background: #F8FBFB;

    border:
        1px solid
        rgba(11, 46, 51, 0.08);

    border-radius: 10px;
}


.purchase-details-observation p {
    margin: 0;

    white-space: pre-wrap;
}


.purchase-details-section-header {
    margin-bottom: 18px;
}


.purchase-items-table {
    width: 100%;
}


.purchase-items-mobile {
    display: none;
}


.purchase-details-grand-total {
    display: flex;
    flex-direction: column;

    align-items: flex-end;

    margin-top: 18px;
    padding-top: 18px;

    border-top:
        1px solid
        rgba(11, 46, 51, 0.10);
}


.purchase-details-grand-total strong {
    font-size: 1.35rem;
}


.purchase-register-grid {
    display: grid;

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

    gap: 16px;
}


.purchase-register-grid > div {
    min-width: 0;

    padding: 14px;

    background: #F8FBFB;

    border:
        1px solid
        rgba(11, 46, 51, 0.08);

    border-radius: 10px;
}


.purchase-register-grid code {
    display: block;

    max-width: 100%;

    overflow-wrap: anywhere;

    color: var(--text-primary);

    font-family: monospace;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .purchase-details {
        gap: 14px;
    }


    .purchase-details-card {
        padding: 18px 14px;
    }


    .purchase-details-heading {
        flex-direction: column;

        gap: 14px;

        margin-bottom: 18px;
    }


    .purchase-details-total-top {
        width: 100%;

        align-items: flex-start;

        padding-top: 14px;

        border-top:
            1px solid
            rgba(11, 46, 51, 0.10);
    }


    .purchase-details-grid {
        grid-template-columns: 1fr 1fr;

        gap: 10px;
    }


    .purchase-detail-item {
        padding: 12px;
    }


    .purchase-items-desktop {
        display: none;
    }


    .purchase-items-mobile {
        display: block;
    }


    .purchase-item-mobile-card {
        padding: 14px;

        background: #F8FBFB;

        border:
            1px solid
            rgba(11, 46, 51, 0.10);

        border-radius: 11px;
    }


    .purchase-item-mobile-card + .purchase-item-mobile-card {
        margin-top: 12px;
    }


    .purchase-item-mobile-header {
        padding-bottom: 12px;

        border-bottom:
            1px solid
            rgba(11, 46, 51, 0.08);
    }


    .purchase-item-mobile-header span,
    .purchase-item-mobile-grid span {
        display: block;

        margin-bottom: 4px;

        color: var(--text-secondary);

        font-size: 0.7rem;
        font-weight: 700;

        text-transform: uppercase;
        letter-spacing: 0.04em;
    }


    .purchase-item-mobile-header strong,
    .purchase-item-mobile-header small {
        display: block;
    }


    .purchase-item-mobile-header small {
        margin-top: 4px;

        color: var(--text-secondary);
    }


    .purchase-item-mobile-grid {
        display: grid;

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

        gap: 14px;

        padding-top: 12px;
    }


    .purchase-item-mobile-grid > div {
        min-width: 0;
    }


    .purchase-item-mobile-grid strong {
        overflow-wrap: anywhere;
    }


    .purchase-register-grid {
        grid-template-columns: 1fr;
    }


    .purchase-details-grand-total {
        align-items: flex-start;
    }

}


@media (max-width: 430px) {

    .purchase-details-grid {
        grid-template-columns: 1fr;
    }

}

/* ==========================================================
   PÁGINAS DE ERRO
   ========================================================== */

.system-error-page {
    min-height: calc(100vh - 180px);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 32px 0;
}


.system-error-card {
    width: 100%;
    max-width: 560px;

    padding: 42px 36px;

    text-align: center;
}


.system-error-icon {
    width: 64px;
    height: 64px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 18px;

    background: #EAF5F5;

    color: var(--fazan-primary);

    font-size: 28px;
}


.system-error-code {
    display: block;

    margin-bottom: 8px;

    color: var(--fazan-primary);

    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.08em;
}


.system-error-card h1 {
    margin: 0 0 10px;

    font-size: 1.65rem;
}


.system-error-card > p {
    max-width: 430px;

    margin: 0 auto;

    color: var(--text-secondary);

    line-height: 1.6;
}


.system-error-actions {
    display: flex;
    justify-content: center;

    gap: 10px;

    margin-top: 28px;
}


@media (max-width: 600px) {

    .system-error-page {
        min-height: calc(100vh - 120px);

        padding: 20px 0;
    }


    .system-error-card {
        padding: 32px 18px;
    }


    .system-error-actions {
        flex-direction: column;

        width: 100%;
    }


    .system-error-actions > * {
        width: 100%;

        justify-content: center;
    }

}

/* ==========================================================
   GERADOR DE CÓDIGO DE BARRAS
   ========================================================== */

.barcode-input-group {
    display: flex;
    align-items: stretch;
    gap: 8px;
}


.barcode-input-group input {
    flex: 1;
    min-width: 0;
}


.barcode-generate-button {
    flex-shrink: 0;
    white-space: nowrap;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}


.field-help {
    display: block;

    margin-top: 6px;

    font-size: 0.78rem;
    line-height: 1.4;

    color: var(--text-secondary);
}


@media (max-width: 600px) {

    .barcode-input-group {
        flex-direction: column;
    }


    .barcode-generate-button {
        width: 100%;
    }

}

/* ==========================================================
   AJUSTE DO CAMPO DE CÓDIGO DE BARRAS
   ========================================================== */

.barcode-field-group {
    grid-column: span 2;
}


.barcode-field-group .barcode-input-group input {
    width: 100%;
}


@media (max-width: 700px) {

    .barcode-field-group {
        grid-column: 1 / -1;
    }

}

/* ==========================================================
   MODAL - CÓDIGO DE BARRAS
   ========================================================== */

.barcode-modal {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;
}


.barcode-modal.is-open {
    display: flex;
}


.barcode-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}


.barcode-modal-dialog {
    position: relative;

    width: 100%;
    max-width: 430px;

    padding: 30px;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 24px 70px rgba(15, 23, 42, 0.25);

    text-align: center;
}


.barcode-modal-icon {
    width: 56px;
    height: 56px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 16px;

    border-radius: 16px;

    background: #EAF5F5;

    color: var(--fazan-primary);

    font-size: 24px;
}


.barcode-modal-dialog h3 {
    margin: 0 0 8px;

    font-size: 1.2rem;
}


.barcode-modal-dialog p {
    margin: 0;

    line-height: 1.55;

    color: var(--text-secondary);
}


.barcode-modal-actions {
    display: flex;
    justify-content: flex-end;

    gap: 10px;

    margin-top: 24px;
}


@media (max-width: 600px) {

    .barcode-modal-dialog {
        padding: 26px 20px;
    }


    .barcode-modal-actions {
        flex-direction: column-reverse;
    }


    .barcode-modal-actions button {
        width: 100%;
        justify-content: center;
    }

}

/* ==========================================================
   ETIQUETAS DE PRODUTOS
   ========================================================== */

.barcode-print-layout {
    display: grid;
    grid-template-columns:
        minmax(320px, 0.85fr)
        minmax(420px, 1.15fr);

    gap: 20px;
}


.barcode-config-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

    padding-top: 20px;
}


.barcode-custom-size {
    grid-column: 1 / -1;

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

    gap: 16px;
}


.barcode-custom-size[hidden] {
    display: none;
}


.barcode-checkbox {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;

    gap: 9px;

    cursor: pointer;

    font-size: 0.9rem;
    font-weight: 600;
}


.barcode-checkbox input {
    width: 18px;
    height: 18px;
}


.barcode-product-info {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-top: 22px;
    padding-top: 20px;

    border-top: 1px solid var(--border-color);
}


.barcode-product-info div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.barcode-product-info span {
    color: var(--text-secondary);

    font-size: 0.76rem;
}


.barcode-product-info strong {
    overflow-wrap: anywhere;
}


.barcode-print-actions {
    display: flex;
    justify-content: flex-end;

    margin-top: 24px;
}


.barcode-print-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;
}


.barcode-label-preview {
    min-height: 320px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: auto;

    margin-top: 20px;
    padding: 28px;

    border-radius: 14px;

    background:
        repeating-linear-gradient(
            45deg,
            #f6f8f8,
            #f6f8f8 10px,
            #eef2f2 10px,
            #eef2f2 20px
        );
}


/* ==========================================================
   ETIQUETA
   ========================================================== */

.barcode-label {
    box-sizing: border-box;

    width: var(
        --barcode-label-width,
        50mm
    );

    height: var(
        --barcode-label-height,
        30mm
    );

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    padding: 2mm;

    border: 1px solid #d4dada;

    background: #ffffff;

    color: #000000;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    text-align: center;
}


.barcode-label-product {
    width: 100%;

    overflow: hidden;

    font-size: 9pt;
    font-weight: 700;

    line-height: 1.05;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.barcode-label-variation {
    width: 100%;

    margin-top: 1mm;

    overflow: hidden;

    font-size: 7pt;
    font-weight: 600;

    line-height: 1;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.barcode-label-image {
    width: 100%;

    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 0;

    margin-top: 1mm;
}


.barcode-label-image img {
    display: block;

    width: 94%;
    height: auto;

    max-height: 17mm;

    object-fit: contain;
}


.barcode-label-code {
    margin-top: 0.5mm;

    font-size: 7pt;
    line-height: 1;
}


.barcode-label-footer {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2mm;

    margin-top: 1mm;

    font-size: 6.5pt;

    line-height: 1;
}


.barcode-label-sku {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.barcode-label-price {
    flex-shrink: 0;

    font-size: 7pt;
}


/* Área não exibida durante uso normal */

.barcode-print-area {
    display: none;
}


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

@media (max-width: 1000px) {

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

}


@media (max-width: 600px) {

    .barcode-config-grid,
    .barcode-custom-size,
    .barcode-product-info {
        grid-template-columns: 1fr;
    }


    .barcode-label-preview {
        min-height: 240px;

        justify-content: flex-start;

        padding: 20px;
    }


    .barcode-print-actions {
        justify-content: stretch;
    }


    .barcode-print-actions .btn-primary {
        width: 100%;
    }

}

.barcode-label-small {
    padding: 1.3mm;
}


.barcode-label-small .barcode-label-product {
    font-size: 7pt;
}


.barcode-label-small .barcode-label-variation {
    margin-top: 0.4mm;

    font-size: 5.5pt;
}


.barcode-label-small .barcode-label-image {
    margin-top: 0.4mm;
}


.barcode-label-small .barcode-label-image img {
    width: 90%;
    max-height: 11mm;
}


.barcode-label-small .barcode-label-code {
    margin-top: 0.2mm;

    font-size: 5.5pt;
}


.barcode-label-small .barcode-label-footer {
    margin-top: 0.4mm;

    font-size: 5pt;
}


.barcode-label-small .barcode-label-price {
    font-size: 5.5pt;
}


/* ==========================================================
   IMPRESSÃO DE ETIQUETAS
   ========================================================== */

@media print {

    @page {
        margin: 0;
    }


    html,
    body {
        margin: 0 !important;
        padding: 0 !important;

        width: auto !important;
        height: auto !important;

        min-height: 0 !important;

        overflow: visible !important;

        background: #ffffff !important;
    }


    body * {
        visibility: hidden !important;
    }


    .barcode-print-area,
    .barcode-print-area * {
        visibility: visible !important;
    }


    .barcode-print-area {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;

        z-index: 999999 !important;

        display: flex !important;

        flex-wrap: wrap !important;
        align-content: flex-start !important;
        justify-content: flex-start !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;
    }


    .barcode-print-area .barcode-label {
        box-sizing: border-box !important;

        flex:
            0 0
            var(
                --barcode-label-width,
                50mm
            ) !important;

        width:
            var(
                --barcode-label-width,
                50mm
            ) !important;

        height:
            var(
                --barcode-label-height,
                30mm
            ) !important;

        margin: 0 !important;

        border: none !important;

        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

}

/* ==========================================================
   ETIQUETAS COMPACTAS
   ========================================================== */

.barcode-label-small {
    padding: 1.3mm;
}


.barcode-label-small .barcode-label-product {
    font-size: 7pt;
}


.barcode-label-small .barcode-label-variation {
    margin-top: 0.4mm;

    font-size: 5.5pt;
}


.barcode-label-small .barcode-label-image {
    margin-top: 0.4mm;
}


.barcode-label-small .barcode-label-image img {
    width: 90%;

    max-height: 11mm;
}


.barcode-label-small .barcode-label-code {
    margin-top: 0.2mm;

    font-size: 5.5pt;
}


.barcode-label-small .barcode-label-footer {
    margin-top: 0.4mm;

    font-size: 5pt;
}


.barcode-label-small .barcode-label-price {
    font-size: 5.5pt;
}

/* ==========================================================
   IDENTIDADE VISUAL DA EMPRESA
   ========================================================== */

.company-logo-settings {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);

    align-items: center;
    gap: 22px;

    padding-top: 20px;
}


.company-logo-preview {
    width: 88px;
    height: 88px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border: 1px solid var(--border-color);
    border-radius: 18px;

    background: #ffffff;
}


.company-logo-preview img {
    display: block;

    width: 100%;
    height: 100%;

    padding: 8px;

    object-fit: contain;
}


.company-logo-preview span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    font-size: 2rem;
    font-weight: 700;

    color: var(--fazan-primary);

    background: #eaf5f5;
}


.company-logo-controls {
    min-width: 0;
}


.company-logo-controls input[type="file"] {
    width: 100%;
}


@media (max-width: 600px) {

    .company-logo-settings {
        grid-template-columns: 1fr;
    }


    .company-logo-preview {
        width: 80px;
        height: 80px;
    }

}

.company-logo-preview [hidden] {
    display: none !important;
}

/* ==========================================================
   LOGO DA EMPRESA - TOPBAR
   ========================================================== */

.topbar-company {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}


.topbar-company-logo {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border: 1px solid rgba(15, 73, 77, 0.14);
    border-radius: 12px;

    background: #ffffff;
}


.topbar-company-logo img {
    display: block;

    width: 100%;
    height: 100%;

    padding: 5px;

    object-fit: contain;
}


.topbar-company-logo span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    font-size: 1rem;
    font-weight: 700;

    color: var(--fazan-primary);

    background: #eaf5f5;
}


.topbar-company-info {
    min-width: 0;
}


.topbar-company-info h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


@media (max-width: 600px) {

    .topbar-company {
        gap: 8px;
    }


    .topbar-company-logo {
        width: 38px;
        height: 38px;

        flex-basis: 38px;

        border-radius: 10px;
    }


    .topbar-company-info h2 {
        max-width: 180px;
    }

}

/* ==========================================================
   FINANCEIRO - CAMPOS DE DATA
   ========================================================== */

.finance-date-input {
    color: #9AA8AB;
    font-weight: 400;
}


.finance-date-input::-webkit-datetime-edit {
    color: #9AA8AB;
}


/* Data realmente preenchida */
.finance-date-input.has-value {
    color: #0B2E33;
}


.finance-date-input.has-value::-webkit-datetime-edit {
    color: #0B2E33;
}


/* Ao editar uma data preenchida */
.finance-date-input.has-value:focus::-webkit-datetime-edit {
    color: #0B2E33;
}

/* Preserva espaço de navegação em janelas baixas e zoom ampliado. */
@media (max-height: 480px) {
    .sidebar {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .sidebar-brand {
        padding-bottom: 10px;
    }

    .sidebar-footer {
        padding-top: 8px;
        padding-bottom: 0;
    }
}

@media (max-height: 320px) {
    .sidebar {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .sidebar-brand {
        padding-bottom: 6px;
    }

    .sidebar-footer {
        gap: 0;
        padding-top: 4px;
    }

    .sidebar-footer strong,
    .sidebar-footer small {
        margin-top: 0;
    }
}


/* Cadastro de pagamento: controle nativo de parcelamento e espaçamento local. */
.payment-create-form { max-width: 760px; }
.payment-create-form .form-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.payment-create-form .field-span-2 { grid-column: auto; }
.payment-create-form .payment-installments {
    padding: 14px 16px;
    border: 1px solid var(--fazan-secondary);
    border-radius: 12px;
    background: #f5faf9;
}
.payment-create-form .payment-installments-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    cursor: pointer;
}
.payment-create-form .payment-installments-label strong { display: block; color: var(--fazan-dark); }
.payment-create-form .payment-installments-description,
.payment-create-form #parcelamento-estado { display: block; font-size: .82rem; line-height: 1.5; color: #52676b; }
.payment-create-form #parcelamento-estado { margin-top: 6px; }
.payment-create-form #permite-parcelamento {
    appearance: none;
    position: relative;
    flex: 0 0 46px;
    width: 46px;
    height: 26px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid #74888b;
    border-radius: 999px;
    background: #dde6e7;
    cursor: pointer;
    transition: background-color .15s ease;
}
.payment-create-form #permite-parcelamento::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #74888b;
    transition: transform .15s ease;
}
.payment-create-form #permite-parcelamento:checked { background: var(--fazan-primary); border-color: var(--fazan-primary); }
.payment-create-form #permite-parcelamento:checked::before { transform: translateX(20px); }
.payment-create-form #permite-parcelamento:focus-visible { outline: 3px solid var(--fazan-primary); outline-offset: 3px; }
.payment-create-form #permite-parcelamento:hover:not(:disabled) { border-color: var(--fazan-dark); }
.payment-create-form #permite-parcelamento:disabled { opacity: .55; cursor: not-allowed; }
.payment-create-form .payment-installments-label:has(input:disabled) { cursor: default; }
@media (prefers-reduced-motion: reduce) {
    .payment-create-form #permite-parcelamento,
    .payment-create-form #permite-parcelamento::before { transition: none; }
}

/* UX-02: área operacional do PDV. Os demais módulos e o mobile mantêm seus estilos. */
@media (min-width: 1051px) {
    .main-content:has(.pdv-workspace) {
        height: 100dvh;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .main-content:has(.pdv-workspace) > .topbar { flex-shrink: 0; min-height: 64px; padding: 10px 16px; }

    .content-wrapper:has(.pdv-workspace) {
        flex: 1;
        min-height: 0;
        padding: 12px;
        display: flex;
        flex-direction: column;
    }

    .content-wrapper:has(.pdv-workspace) > .flash-container,
    .content-wrapper:has(.pdv-workspace) > #orientacao-pagamentos {
        flex-shrink: 0;
        max-height: 25vh;
        overflow-y: auto;
    }

    .pdv-workspace {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .pdv-workspace > .page-header { margin: 0; align-items: center; flex-shrink: 0; }
    .pdv-workspace > .page-header h1 { margin: 0; font-size: 1.5rem; }
    .pdv-workspace > .page-header p { margin: 0; font-size: .8rem; }
    .pdv-workspace > .page-header .page-eyebrow { display: none; }
    .pdv-workspace .page-actions { width: auto; }
    .pdv-workspace .pdv-layout {
        flex: 1;
        min-height: 0;
        grid-template-columns: minmax(0, 1fr) minmax(400px, 460px);
        gap: 14px;
        align-items: stretch;
    }

    .pdv-workspace .pdv-products { display: flex; flex-direction: column; min-height: 0; gap: 10px; }
    .pdv-workspace .pdv-reader-card { flex-shrink: 0; margin: 0; padding: 12px; }
    .pdv-workspace .barcode-form label { margin-bottom: 5px; }
    .pdv-workspace .barcode-input-wrapper input { min-height: 42px; padding: 8px 12px; }
    .pdv-workspace .pdv-catalog-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
    .pdv-workspace .pdv-catalog-scroll:focus-visible { outline: 2px solid var(--fazan-primary); outline-offset: -2px; }
    .pdv-workspace .pdv-items-card,
    .pdv-workspace .pdv-search-results { padding: 12px; }
    .pdv-workspace .panel-header { margin-bottom: 8px; }
    .pdv-workspace .panel-header h3 { font-size: 1rem; }
    .pdv-workspace .panel-header p { margin: 0; }
    .pdv-workspace .pdv-item-list { gap: 8px; padding-top: 0; }
    .pdv-workspace .pdv-item { padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
    .pdv-workspace .pdv-item-main { grid-column: 1 / -1; gap: 10px; }
    .pdv-workspace .pdv-item-main span { display: inline; margin-right: 8px; }
    .pdv-workspace .pdv-item-controls { margin-top: 0; }
    .pdv-workspace .pdv-item-total { margin: 0; padding: 0; border: 0; align-items: center; gap: 8px; }
    .pdv-workspace .addon-selector,
    .pdv-workspace .pdv-addon-list { grid-column: 1 / -1; margin: 0; }
    .pdv-workspace .pdv-item-total { grid-column: 2; grid-row: 2; }

    .pdv-workspace .pdv-summary { position: static; min-height: 0; overflow-y: auto; border-radius: var(--radius-lg); }
    .pdv-workspace .pdv-summary-card { min-height: 100%; padding: 12px; }
    .pdv-workspace .pdv-summary-label,
    .pdv-workspace .pdv-sale-number { display: inline; margin: 0; font-size: .8rem; }
    .pdv-workspace .pdv-customer-card { margin: 8px 0; padding: 10px; gap: 6px; box-shadow: none; }
    /* Textos repetidos; o estado, a busca e todas as ações permanecem visíveis. */
    .pdv-workspace .pdv-customer-header strong,
    .pdv-workspace .pdv-customer-empty-state,
    .pdv-workspace .pdv-customer-new > span { display: none; }
    .pdv-workspace .pdv-customer-new { padding: 0; border: 0; }
    .pdv-workspace .pdv-customer-search { gap: 3px; }
    .pdv-workspace .pdv-customer-search-box input { height: 36px; }
    .pdv-workspace .pdv-customer-results { max-height: min(260px, 40vh); }
    .pdv-workspace .pdv-customer-selected { padding: 6px; gap: 8px; }
    .pdv-workspace .pdv-customer-selected .pdv-customer-avatar { display: none; }
    .pdv-workspace .pdv-customer-info strong { overflow-wrap: anywhere; line-height: 1.3; }
    .pdv-workspace .pdv-customer-info { flex-direction: row; flex-wrap: wrap; gap: 2px 8px; }
    .pdv-workspace .pdv-customer-info strong { width: 100%; }
    .pdv-workspace .pdv-totals { margin: 8px 0 0; gap: 3px; font-variant-numeric: tabular-nums; }
    .pdv-workspace .pdv-grand-total { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; }
    .pdv-workspace .pdv-grand-total strong { margin: 0; font-size: 2rem; font-variant-numeric: tabular-nums; }
    .pdv-workspace .pdv-payment-form { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr) 94px; gap: 10px; }
    .pdv-workspace .pdv-payment-section { margin: 0; min-width: 0; }
    .pdv-workspace .pdv-payment-section label { margin-bottom: 4px; }
    .pdv-workspace .pdv-payment-section select { min-height: 38px; padding: 6px 8px; }
    .pdv-workspace .pdv-cash-section { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 0; padding: 10px; }
    /* Total já destacado acima; mantém dinheiro-total/data-total para o cálculo existente. */
    .pdv-workspace .pdv-cash-header,
    .pdv-workspace .pdv-cash-total { display: none; }
    .pdv-workspace .pdv-cash-field { gap: 4px; }
    .pdv-workspace .pdv-money-input input { height: 38px; }
    .pdv-workspace .pdv-change-box { grid-column: 2; grid-row: 1; padding: 8px; }
    .pdv-workspace .pdv-change-box strong { font-variant-numeric: tabular-nums; }
    .pdv-workspace .pdv-cash-shortcuts { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
    .pdv-workspace .btn-finalize { grid-column: 1 / -1; min-height: 46px; margin: 0; }
    .pdv-workspace .btn-finalize-disabled { margin-top: 12px; }
}

/* Em pouca altura, permite rolagem da página em vez de cortar controles. */
@media (min-width: 1051px) and (max-height: 699px) {
    .main-content:has(.pdv-workspace) { height: auto; min-height: 100dvh; }
    .pdv-workspace .pdv-catalog-scroll { max-height: 65vh; }
    .pdv-workspace .pdv-summary { overflow: visible; }
}

/* A.6.1: ações locais da consulta de estoque. */
.page-header:has(+ .stock-context-actions) {
    margin-bottom: 18px;
}
.stock-context-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.stock-context-actions > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 40px;
    padding: 9px 14px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    white-space: normal;
}
.stock-context-actions > a > i {
    flex-shrink: 0;
}
@media (max-width: 720px) {
    .stock-context-actions > a {
        flex: 1 1 100%;
    }
}

/* A.7.1: hierarquia exclusiva da página principal do Caixa. */
.caixa-workspace .page-header { margin-bottom: 18px; }
.caixa-workspace .caixa-session {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    margin-top: 10px; color: var(--text-secondary); font-size: .9rem;
}
.caixa-workspace .caixa-overview {
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; margin-bottom: 18px;
}
.caixa-workspace .panel-card { min-width: 0; padding: 20px; }
.caixa-workspace .caixa-cash { background: #f0f7f7; border-color: #c5dcdc; }
.caixa-workspace h2 { margin: 0 0 14px; font-size: 1rem; }
.caixa-workspace .caixa-expected,
.caixa-workspace .caixa-sales-total { display: block; overflow-wrap: anywhere; }
.caixa-workspace .caixa-expected { font-size: clamp(1.8rem, 3vw, 2.35rem); color: var(--fazan-dark); }
.caixa-workspace .caixa-sales-total { font-size: 1.65rem; }
.caixa-workspace .field-help { margin: 5px 0 12px; }
.caixa-workspace .caixa-summary-list { margin: 0; }
.caixa-workspace .caixa-summary-list > div {
    display: flex; justify-content: space-between; gap: 12px; padding: 5px 0;
}
.caixa-workspace dt { color: var(--text-secondary); }
.caixa-workspace dd { margin: 0; font-weight: 600; text-align: right; }
.caixa-workspace .panel-header { margin-bottom: 12px; }
.caixa-workspace .caixa-mini-form { gap: 6px; padding: 12px; }
.caixa-workspace .caixa-mini-form p { margin: 0 0 4px; }
.caixa-workspace .caixa-mini-form label { font-size: .875rem; font-weight: 600; }
.caixa-workspace .caixa-mini-form button { margin-top: 6px; }
.caixa-workspace .caixa-close-form {
    display: grid; grid-template-columns: minmax(180px, 1fr) minmax(240px, 2fr);
    align-items: start; gap: 12px 18px;
}
.caixa-workspace .caixa-close-form .field-group:has(textarea) { grid-column: 2; grid-row: 1; }
.caixa-workspace .caixa-divergencia { grid-column: 1 / -1; }
.caixa-workspace .caixa-close-form .btn-danger { grid-column: 1 / -1; justify-self: end; }
.caixa-workspace :is(a, button, input, textarea):focus-visible {
    outline: 3px solid var(--fazan-primary); outline-offset: 3px;
}
@media (max-width: 900px) {
    .caixa-workspace .caixa-overview { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
    .caixa-workspace .panel-card { padding: 16px; }
    .caixa-workspace .caixa-close-form { grid-template-columns: 1fr; }
    .caixa-workspace .caixa-close-form .field-group:has(textarea) { grid-column: auto; grid-row: auto; }
    .caixa-workspace .caixa-close-form .btn-danger { justify-self: stretch; }
}

/* A.7.2: operações compactas e diálogos locais, com fallback sem JS. */
.caixa-workspace .caixa-modal-triggers:not([hidden]) {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.caixa-workspace .caixa-modal-triggers button { gap: 8px; }
.caixa-workspace [data-caixa-open="suprimento"] { color: #275d50; background: #f2f8f5; }
.caixa-workspace [data-caixa-open="sangria"] { color: #785330; background: #faf7f1; }
.caixa-workspace .caixa-operation-dialog {
    color: var(--text-primary); background: white; border: 1px solid var(--border);
    border-radius: 14px; padding: 8px; box-sizing: border-box;
}
.caixa-workspace .caixa-operation-dialog[open]:not(:modal) {
    position: static; width: 100%; margin: 0;
}
.caixa-workspace .caixa-operation-dialog:modal {
    width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
    overflow-y: auto; margin: auto;
}
.caixa-workspace .caixa-operation-dialog::backdrop { background: rgb(11 46 51 / 45%); }
.caixa-workspace .caixa-operation-dialog .caixa-mini-form { border: 0; }
.caixa-workspace .caixa-operation-dialog [data-caixa-cancel][hidden] { display: none; }

/* A.7.2.1: acabamento dos modais, sem afetar os demais formulários. */
.caixa-workspace .caixa-operation-dialog:modal {
    width: min(480px, calc(100vw - 32px));
    box-shadow: 0 18px 60px rgb(11 46 51 / 20%);
}
.caixa-workspace .caixa-operation-dialog .caixa-mini-form { padding: 18px; gap: 10px; }
.caixa-workspace .caixa-modal-heading {
    display: flex; align-items: flex-start; gap: 12px;
    padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
}
.caixa-workspace .caixa-modal-heading > div { flex: 1; min-width: 0; }
.caixa-workspace .caixa-modal-heading h4 { font-size: 1.2rem; margin-bottom: 5px; }
.caixa-workspace .caixa-modal-heading p { font-size: .875rem; line-height: 1.5; }
.caixa-workspace .caixa-modal-marker {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
    background: #edf5f1; color: #275d50; font-size: 1.4rem;
}
.caixa-workspace #caixa-modal-sangria .caixa-modal-marker { background: #f8f2e9; color: #785330; }
.caixa-workspace .caixa-operation-dialog .caixa-modal-close {
    margin: 0; padding: 0; width: 32px; height: 32px; flex-shrink: 0;
    border: 0; border-radius: 8px; background: transparent;
    color: var(--text-secondary); font-size: 1.5rem; cursor: pointer;
}
.caixa-workspace .caixa-modal-close:hover { background: #f0f4f4; }
.caixa-workspace .caixa-operation-dialog input {
    min-height: 44px; padding: 10px 12px; border: 1px solid var(--border);
    border-radius: 9px; font: inherit; box-sizing: border-box; min-width: 0;
}
.caixa-workspace .caixa-money-field { position: relative; }
.caixa-workspace .caixa-money-field > span {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--text-secondary); pointer-events: none;
}
.caixa-workspace .caixa-money-field input { padding-left: 44px; font-size: 1.2rem; font-weight: 600; }
.caixa-workspace .caixa-modal-footer {
    display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px;
    border-top: 1px solid var(--border); margin-top: 10px; padding-top: 14px;
}
.caixa-workspace .caixa-modal-footer button { margin-top: 0; }
.caixa-workspace .caixa-modal-submit { background: #315f53; }
.caixa-workspace #caixa-modal-sangria .caixa-modal-submit { background: #795b3c; }
.caixa-workspace .caixa-modal-submit:hover { filter: brightness(.92); }
@media (max-width: 480px) {
    .caixa-workspace .caixa-operation-dialog .caixa-mini-form { padding: 12px; }
    .caixa-workspace .caixa-modal-footer button { flex: 1 1 100%; }
}
/* =====================================================
   CENTRAL GERENCIAL
===================================================== */

.central-gerencial {
    --central-info: var(--fazan-primary);
    --central-atencao: #9a6700;
    --central-favoravel: #287a51;
    --central-desfavoravel: #a33a3a;
    display: grid;
    gap: 20px;
    min-width: 0;
}

.central-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.central-header h1,
.central-header p {
    margin: 0;
}

.central-filtros {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.central-campo {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.central-datas {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.central-datas[hidden] {
    display: none;
}

.central-filtros label {
    font-size: 0.78rem;
    font-weight: 700;
}

.central-filtros :is(select, input, button) {
    min-height: 42px;
}

.central-gerencial :is(a, button, input, select, summary):focus-visible {
    outline: 3px solid var(--fazan-primary);
    outline-offset: 3px;
}

.central-periodo,
.central-kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.central-periodo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    padding: 12px 16px;
}

.central-periodo small {
    flex-basis: 100%;
    color: var(--text-secondary);
}

.central-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.central-kpi {
    min-width: 0;
    padding: 18px;
}

.central-kpi > span {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 700;
}

.central-kpi > strong {
    display: block;
    margin: 8px 0 12px;
    overflow-wrap: anywhere;
    color: var(--text-primary);
    font-size: clamp(1.45rem, 2.2vw, 2rem);
}

.central-kpi-comparacao {
    display: grid;
    gap: 3px;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.central-tendencia-favoravel {
    color: var(--central-favoravel);
    font-weight: 800;
}

.central-tendencia-desfavoravel {
    color: var(--central-desfavoravel);
    font-weight: 800;
}

.central-tendencia-neutra {
    color: var(--text-secondary);
    font-weight: 800;
}

.central-indisponivel {
    font-size: 1.1rem !important;
    color: var(--central-atencao) !important;
}

.central-nota-financeira {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.central-visualizacoes,
.central-rankings {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 16px;
}

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

.central-painel {
    min-width: 0;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.central-painel > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.central-painel h2,
.central-painel header p {
    margin: 0;
}

.central-painel h2 {
    font-size: 1rem;
}

.central-painel header p,
.central-vazio {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.central-serie-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.central-serie-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.central-serie-legenda i {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--fazan-primary);
}

.central-serie-legenda .central-legenda-anterior {
    background: var(--fazan-secondary);
}

.central-grafico-barras {
    display: flex;
    align-items: stretch;
    min-height: 220px;
    margin-top: 16px;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
}

.central-grupo-barra {
    display: grid;
    grid-template-rows: 1fr auto;
    flex: 1 0 42px;
    min-width: 42px;
    gap: 6px;
    text-align: center;
}

.central-barras {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
}

.central-barra {
    width: min(16px, 38%);
    min-height: 2px;
    height: var(--central-barra);
    max-height: 180px;
    background: var(--fazan-primary);
    border-radius: 4px 4px 0 0;
}

.central-barra-anterior {
    background: var(--fazan-secondary);
}

.central-grupo-barra small {
    font-size: 0.68rem;
    white-space: nowrap;
}

.central-resumo-textual {
    margin-top: 12px;
    font-size: 0.82rem;
}

.central-lista-participacao,
.central-ranking {
    display: grid;
    gap: 12px;
    margin: 0;
    padding-left: 22px;
}

.central-lista-participacao {
    list-style: none;
    padding-left: 0;
}

.central-lista-participacao li,
.central-ranking li {
    min-width: 0;
}

.central-lista-participacao li > div,
.central-ranking li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.central-lista-participacao li > div {
    min-width: 0;
    align-items: baseline;
}

.central-lista-participacao strong {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}

.central-lista-participacao li > div > span {
    flex: 0 0 auto;
}

.central-trilho {
    display: block;
    height: 7px;
    margin-top: 5px;
    overflow: hidden;
    background: var(--background);
    border-radius: 999px;
}

.central-trilho i {
    display: block;
    width: var(--central-barra);
    height: 100%;
    background: var(--fazan-primary);
    border-radius: inherit;
}

.central-ranking span {
    display: grid;
    min-width: 0;
}

.central-ranking strong {
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
}

.central-ranking small {
    color: var(--text-secondary);
}

.central-ranking-sem-numero {
    list-style: none;
    padding-left: 0;
}

.central-aviso {
    color: #704600;
    font-size: 0.78rem;
    font-weight: 700;
}

.central-aviso-consulta {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    background: #fff8e5;
}

.central-secao-titulo {
    margin-top: 4px;
}

.central-secao-titulo span {
    color: var(--fazan-primary);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.central-secao-titulo h2 {
    margin: 2px 0 0;
    font-size: 1.3rem;
}

.central-operacional {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.central-operacional-secundario {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.central-mini-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.central-mini-kpis > div {
    display: grid;
    gap: 2px;
    padding: 10px;
    background: var(--background);
    border-radius: var(--radius-sm);
}

.central-mini-kpis strong {
    font-size: 1.4rem;
}

.central-mini-kpis span,
.central-painel > small {
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.central-mini-kpis .central-critico strong {
    color: var(--danger);
}

.central-mini-kpis .central-alerta strong {
    color: var(--warning);
}

.central-definicoes {
    display: grid;
    gap: 8px;
    margin: 0 0 12px;
}

.central-definicoes > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border);
}

.central-definicoes dt {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.central-definicoes dd {
    margin: 0;
    font-weight: 800;
    text-align: right;
}

@media (max-width: 1050px) {
    .central-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .central-header {
        align-items: stretch;
        flex-direction: column;
    }

    .central-visualizacoes,
    .central-rankings,
    .central-operacional,
    .central-operacional-secundario {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .central-kpis {
        grid-template-columns: 1fr;
    }

    .central-filtros,
    .central-datas {
        align-items: stretch;
        flex-direction: column;
    }

    .central-filtros > *,
    .central-datas > *,
    .central-filtros :is(select, input, button) {
        width: 100%;
        max-width: 100%;
    }

    .central-mini-kpis {
        grid-template-columns: 1fr;
    }

    .central-painel,
    .central-kpi,
    .central-periodo {
        padding: 14px;
    }

    .central-definicoes > div,
    .central-ranking li {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .central-definicoes dd {
        text-align: left;
    }
}
.pdv-connection-status {
    margin-bottom: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.5rem;
    background: #fff4dc;
    color: #704b00;
    font-size: 0.875rem;
}