/* =========================================================
   VALORIUM SISTEMAS
   DASHBOARD - STYLE.CSS
   ========================================================= */

:root {
    --primary: #4f46e5;
    --primary-dark: #3730a3;
    --primary-light: #eef2ff;

    --success: #16a34a;
    --success-light: #f0fdf4;

    --danger: #dc2626;
    --danger-light: #fef2f2;

    --info: #2563eb;
    --info-light: #eff6ff;

    --purple: #7c3aed;
    --purple-light: #f5f3ff;

    --finance: #059669;
    --finance-light: #ecfdf5;

    --fiscal: #ea580c;
    --fiscal-light: #fff7ed;

    --text: #172033;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;

    --bg: #f5f7fb;
    --card: #ffffff;
    --border: #e5e7eb;

    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 20px 45px rgba(15, 23, 42, 0.12);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;

    --transition: 0.25s ease;
}


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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(79, 70, 229, 0.06),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(37, 99, 235, 0.05),
            transparent 25%
        ),
        var(--bg);

    color: var(--text);

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

    line-height: 1.5;
}

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

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.container {
    width: min(1400px, calc(100% - 48px));
    margin: 0 auto;
}

.dashboard-page {
    position: relative;
    padding: 38px 0 60px;
}


/* =========================================================
   MENU DO USUÁRIO
   ========================================================= */

.user-menu-container {
    position: absolute;
    top: 32px;
    right: 0;
    z-index: 1000;
}

.dots-btn {
    width: 46px;
    height: 46px;

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

    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 13px;

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

    color: var(--text-secondary);

    cursor: pointer;

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

    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition),
        box-shadow var(--transition);
}

.dots-btn:hover {
    transform: translateY(-2px);

    color: var(--primary);

    background: #ffffff;

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

.dots-btn:active {
    transform: scale(0.96);
}

.dots-btn i {
    font-size: 18px;
}


/* =========================================================
   DROPDOWN
   ========================================================= */

.dropdown-menu-custom {
    position: absolute;

    top: 56px;
    right: 0;

    width: 270px;

    display: none;

    overflow: hidden;

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

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

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

    animation: dropdownIn 0.18s ease;
}

@keyframes dropdownIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dropdown-user-info {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 17px;
}

.dropdown-user-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

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

    border-radius: 12px;

    background: var(--primary-light);
    color: var(--primary);
}

.dropdown-user-info strong {
    display: block;

    max-width: 175px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 14px;
    font-weight: 700;
}

.dropdown-user-info span {
    display: block;

    margin-top: 2px;

    color: var(--text-muted);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
}

.dropdown-divider {
    height: 1px;
    background: var(--border);
}

.dropdown-menu-custom > a {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px 17px;

    color: var(--text-secondary);

    font-size: 13px;
    font-weight: 600;

    transition:
        background var(--transition),
        color var(--transition);
}

.dropdown-menu-custom > a:hover {
    background: #f8fafc;
    color: var(--primary);
}

.dropdown-menu-custom > a i {
    width: 20px;
    text-align: center;
}

.dropdown-menu-custom > a.logout {
    color: var(--danger);
}

.dropdown-menu-custom > a.logout:hover {
    background: var(--danger-light);
    color: #b91c1c;
}


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

.dashboard-header {
    position: relative;

    overflow: hidden;

    margin-bottom: 34px;

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

    background:
        linear-gradient(
            135deg,
            #111827 0%,
            #1e293b 55%,
            #312e81 100%
        );

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

.dashboard-header::before {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    right: -100px;
    top: -180px;

    border-radius: 50%;

    background: rgba(99, 102, 241, 0.22);

    filter: blur(5px);
}

.dashboard-header::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: 24%;
    bottom: -170px;

    border-radius: 50%;

    background: rgba(59, 130, 246, 0.12);
}

.dashboard-header-content {
    position: relative;
    z-index: 2;

    min-height: 220px;

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

    gap: 40px;

    padding: 42px 46px;
}

.dashboard-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 13px;

    color: #a5b4fc;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.dashboard-brand i {
    font-size: 15px;
}

.dashboard-welcome h2 {
    color: #ffffff;

    font-size: clamp(28px, 4vw, 40px);

    line-height: 1.1;

    letter-spacing: -1px;
}

.dashboard-welcome p {
    max-width: 650px;

    margin-top: 13px;

    color: #cbd5e1;

    font-size: 15px;
}

.dashboard-welcome p strong {
    color: #ffffff;
}

.dashboard-user-status {
    min-width: 190px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 9px;
}

.status-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #bbf7d0;

    font-size: 12px;
    font-weight: 700;
}

.status-label i {
    color: #4ade80;
    font-size: 9px;
}

.status-role {
    display: inline-flex;

    padding: 7px 12px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;

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

    color: #e2e8f0;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;
}


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

.dashboard-summary {
    margin-bottom: 20px;
}

.summary-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
}

.section-kicker {
    display: block;

    margin-bottom: 4px;

    color: var(--primary);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.3px;
}

.summary-title h3 {
    font-size: 22px;
    font-weight: 750;
    letter-spacing: -0.4px;
}

.summary-date {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--text-muted);

    font-size: 12px;
    font-weight: 600;
}


/* =========================================================
   GRID DOS CARDS
   ========================================================= */

.dashboard-grid {
    display: grid;

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

    gap: 20px;
}


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

.card-dash {
    min-width: 0;
}

.dashboard-card {
    position: relative;

    min-height: 330px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    padding: 24px;

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

    background: var(--card);

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

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.dashboard-card:hover {
    transform: translateY(-5px);

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

    border-color: rgba(99, 102, 241, 0.2);
}

.dashboard-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: var(--card-color, var(--primary));
}

.dashboard-card::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    top: -70px;
    right: -55px;

    border-radius: 50%;

    background: var(--card-light, var(--primary-light));

    opacity: 0.7;

    pointer-events: none;
}


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

.dashboard-card-indigo {
    --card-color: #4f46e5;
    --card-light: #eef2ff;
}

.dashboard-card-purple {
    --card-color: #7c3aed;
    --card-light: #f5f3ff;
}

.dashboard-card-green {
    --card-color: #16a34a;
    --card-light: #f0fdf4;
}

.dashboard-card-blue {
    --card-color: #2563eb;
    --card-light: #eff6ff;
}

.dashboard-card-finance {
    --card-color: #059669;
    --card-light: #ecfdf5;
}

.dashboard-card-fiscal {
    --card-color: #ea580c;
    --card-light: #fff7ed;
}


/* =========================================================
   TOPO DO CARD
   ========================================================= */

.dashboard-card-top {
    position: relative;
    z-index: 2;

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

    gap: 12px;
}

.dashboard-icon {
    width: 50px;
    height: 50px;

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

    border-radius: 14px;

    background: var(--card-light, var(--primary-light));

    color: var(--card-color, var(--primary));

    font-size: 20px;

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.dashboard-card:hover .dashboard-icon {
    transform: scale(1.07);
}

.dashboard-card-tag {
    padding: 6px 9px;

    border-radius: 7px;

    background: var(--card-light, var(--primary-light));

    color: var(--card-color, var(--primary));

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.8px;
}


/* =========================================================
   CONTEÚDO DO CARD
   ========================================================= */

.dashboard-card-content {
    position: relative;
    z-index: 2;

    flex: 1;

    padding-top: 28px;
}

.dashboard-card-content h3 {
    margin-bottom: 7px;

    color: var(--text);

    font-size: 18px;
    font-weight: 750;
}

.numero {
    display: block;

    color: var(--text);

    font-size: 38px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: -1.5px;
}

.dashboard-text-small {
    font-size: 27px;
    letter-spacing: -0.7px;
}

.dashboard-card-content p {
    margin-top: 9px;

    color: var(--text-secondary);

    font-size: 13px;
}

.dashboard-number-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;
}

.dashboard-status-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 9px;

    border-radius: 7px;

    background: var(--danger-light);

    color: var(--danger);

    font-size: 10px;
    font-weight: 750;
}

.dashboard-status-danger i {
    font-size: 6px;
}


/* =========================================================
   BOTÃO DOS CARDS
   ========================================================= */

.dashboard-card-button {
    position: relative;
    z-index: 3;

    width: 100%;

    min-height: 45px;

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

    padding: 0 14px;

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

    background: #ffffff;

    color: var(--text-secondary);

    font-size: 12px;
    font-weight: 700;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.dashboard-card-button:hover {
    background: var(--card-light, var(--primary-light));

    border-color: transparent;

    color: var(--card-color, var(--primary));

    transform: translateX(2px);
}

.dashboard-card-button i {
    transition: transform var(--transition);
}

.dashboard-card-button:hover i {
    transform: translateX(4px);
}


/* =========================================================
   API
   ========================================================= */

.dashboard-api {
    position: relative;

    margin-top: 24px;

    overflow: hidden;

    padding: 27px;

    border: 1px solid #dbeafe;
    border-radius: var(--radius-md);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 100%
        );

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

.dashboard-api::before {
    content: "";

    position: absolute;

    top: -80px;
    right: -80px;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background: rgba(37, 99, 235, 0.06);
}

.api-section-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 14px;
}

.api-icon {
    width: 48px;
    height: 48px;

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

    flex-shrink: 0;

    border-radius: 13px;

    background: var(--info-light);
    color: var(--info);

    font-size: 19px;
}

.api-section-header h3 {
    font-size: 18px;
    font-weight: 750;
}

.api-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-left: auto;

    padding: 7px 10px;

    border-radius: 999px;

    background: var(--success-light);

    color: var(--success);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.7px;
}

.api-status i {
    font-size: 6px;
}

.api-description {
    position: relative;
    z-index: 2;

    max-width: 850px;

    margin: 18px 0 21px;

    color: var(--text-secondary);

    font-size: 13px;
    line-height: 1.7;
}

.api-endpoints {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: 12px;
}

.api-endpoint {
    display: flex;
    align-items: center;

    min-width: 0;

    padding: 13px;

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

    background: #ffffff;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.api-endpoint:hover {
    transform: translateY(-2px);

    border-color: #bfdbfe;

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

.api-method {
    width: 48px;

    padding: 6px 5px;

    border-radius: 6px;

    text-align: center;

    font-size: 9px;
    font-weight: 900;
}

.api-get {
    background: #ecfdf5;
    color: #047857;
}

.api-post {
    background: #eff6ff;
    color: #1d4ed8;
}

.api-endpoint-info {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;

    margin-left: 12px;
}

.api-endpoint-info strong {
    color: var(--text);

    font-size: 12px;
}

.api-endpoint-info code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--text-muted);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 10px;
}

.api-endpoint > i {
    margin-left: auto;

    color: var(--text-muted);

    font-size: 11px;

    transition:
        transform var(--transition),
        color var(--transition);
}

.api-endpoint:hover > i {
    color: var(--info);
    transform: translateX(3px);
}


/* =========================================================
   SUPORTE
   ========================================================= */

.api-support {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 18px;
    padding-top: 17px;

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

.api-support-icon {
    width: 38px;
    height: 38px;

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

    border-radius: 10px;

    background: #f1f5f9;

    color: var(--text-secondary);

    font-size: 14px;
}

.api-support span {
    display: block;

    color: var(--text-secondary);

    font-size: 10px;
    font-weight: 700;
}

.api-support a {
    display: inline-block;

    margin-top: 1px;

    color: var(--info);

    font-size: 12px;
    font-weight: 700;
}

.api-support a:hover {
    text-decoration: underline;
}


/* =========================================================
   ANIMAÇÕES DE ENTRADA
   ========================================================= */

.dashboard-header {
    animation: fadeUp 0.45s ease both;
}

.dashboard-summary {
    animation: fadeUp 0.45s 0.08s ease both;
}

.dashboard-card {
    animation: fadeUp 0.45s ease both;
}

.dashboard-card:nth-child(1) {
    animation-delay: 0.10s;
}

.dashboard-card:nth-child(2) {
    animation-delay: 0.15s;
}

.dashboard-card:nth-child(3) {
    animation-delay: 0.20s;
}

.dashboard-card:nth-child(4) {
    animation-delay: 0.25s;
}

.dashboard-card:nth-child(5) {
    animation-delay: 0.30s;
}

.dashboard-card:nth-child(6) {
    animation-delay: 0.35s;
}

.dashboard-api {
    animation: fadeUp 0.45s 0.4s ease both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   FOCO / ACESSIBILIDADE
   ========================================================= */

a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(79, 70, 229, 0.25);
    outline-offset: 3px;
}


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

@media (max-width: 1100px) {

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

}


@media (max-width: 850px) {

    .dashboard-header-content {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-user-status {
        align-items: flex-start;
    }

    .api-endpoints {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .container {
        width: min(100% - 28px, 1400px);
    }

    .dashboard-page {
        padding-top: 22px;
    }

    .user-menu-container {
        top: 16px;
        right: 0;
    }

    .dots-btn {
        width: 42px;
        height: 42px;
    }

    .dropdown-menu-custom {
        right: 0;
        width: 250px;
    }

    .dashboard-header {
        margin-top: 54px;
        border-radius: 18px;
    }

    .dashboard-header-content {
        min-height: auto;

        padding: 30px 24px;
    }

    .dashboard-welcome h2 {
        font-size: 29px;
    }

    .dashboard-welcome p {
        font-size: 13px;
    }

    .summary-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

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

    .dashboard-card {
        min-height: 300px;
    }

    .dashboard-api {
        padding: 21px;
    }

    .api-section-header {
        align-items: flex-start;
    }

    .api-status {
        margin-left: auto;
    }

}


@media (max-width: 430px) {

    .dashboard-header-content {
        padding: 26px 20px;
    }

    .dashboard-brand {
        font-size: 10px;
    }

    .dashboard-welcome h2 {
        font-size: 26px;
    }

    .dashboard-card {
        padding: 20px;
    }

    .dashboard-card-content {
        padding-top: 23px;
    }

    .numero {
        font-size: 34px;
    }

    .dashboard-number-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .api-section-header {
        flex-wrap: wrap;
    }

    .api-status {
        margin-left: 0;
    }

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}

/* =========================================================
   FORNECEDORES
   ========================================================= */

/* ---------------------------------------------------------
   CABEÇALHO
   --------------------------------------------------------- */

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

.fornecedores-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.page-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 10px;

    color: #6366f1;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-brand i {
    font-size: 15px;
}

.fornecedores-header h2 {
    margin: 0;

    color: #111827;

    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.fornecedores-header .page-header-description {
    margin: 10px 0 0;

    color: #64748b;

    font-size: 14px;
    line-height: 1.6;
}

.nav-voltar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 42px;
    padding: 0 17px;

    border: 1px solid #e2e8f0;
    border-radius: 11px;

    background: #ffffff;

    color: #475569;
    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    box-shadow: 0 3px 12px rgba(15, 23, 42, .05);

    transition:
        transform .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

.nav-voltar:hover {
    color: #4f46e5;
    border-color: #c7d2fe;

    transform: translateY(-1px);

    box-shadow: 0 8px 20px rgba(79, 70, 229, .10);
}

.nav-voltar i {
    font-size: 12px;
}


/* ---------------------------------------------------------
   ALERTAS
   --------------------------------------------------------- */

.fornecedores-alert {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 22px;
    padding: 14px 17px;

    border-radius: 12px;

    font-size: 13px;
    font-weight: 600;

    animation: fornecedorAlertIn .3s ease;
}

.fornecedores-alert i {
    font-size: 17px;
}

.alert-sucesso.fornecedores-alert {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.alerta-erro.fornecedores-alert {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #dc2626;
}

@keyframes fornecedorAlertIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ---------------------------------------------------------
   CARD DO FORMULÁRIO
   --------------------------------------------------------- */

.fornecedor-form-card {
    position: relative;

    margin-bottom: 38px;
    padding: 28px;

    border: 1px solid #e5e7eb;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 4px 14px rgba(15, 23, 42, .04),
        0 15px 40px rgba(15, 23, 42, .035);

    overflow: hidden;
}

.fornecedor-form-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: linear-gradient(
        90deg,
        #4f46e5,
        #6366f1,
        #818cf8
    );
}

.fornecedor-form-header {
    margin-bottom: 26px;
    padding-bottom: 20px;

    border-bottom: 1px solid #f1f5f9;
}

.fornecedor-form-title {
    display: flex;
    align-items: center;
    gap: 15px;
}

.fornecedor-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    border-radius: 13px;

    background: #eef2ff;
    color: #4f46e5;

    font-size: 18px;
}

.fornecedor-form-title h3 {
    margin: 0;

    color: #111827;

    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.fornecedor-form-title p {
    margin: 5px 0 0;

    color: #64748b;

    font-size: 13px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   FORMULÁRIO
   --------------------------------------------------------- */

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

    gap: 20px;

    margin-bottom: 20px;
}

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

.form-group {
    min-width: 0;
}

.form-group label {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 8px;

    color: #334155;

    font-size: 12px;
    font-weight: 750;
}

.form-group label i {
    color: #6366f1;
    font-size: 11px;
}

.form-control {
    width: 100%;
    min-height: 45px;

    padding: 0 13px;

    border: 1px solid #dbe2ea;
    border-radius: 10px;

    background: #ffffff;

    color: #1e293b;

    font-family: inherit;
    font-size: 13px;

    outline: none;

    box-sizing: border-box;

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

.form-control::placeholder {
    color: #94a3b8;
}

.form-control:hover {
    border-color: #cbd5e1;
}

.form-control:focus {
    border-color: #6366f1;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(99, 102, 241, .10);
}


/* ---------------------------------------------------------
   AÇÕES DO FORMULÁRIO
   --------------------------------------------------------- */

.fornecedor-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 8px;
    padding-top: 22px;

    border-top: 1px solid #f1f5f9;
}

.fornecedor-btn-salvar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 44px;
    padding: 0 18px;

    border: 0;
    border-radius: 10px;

    background: linear-gradient(
        135deg,
        #4f46e5,
        #6366f1
    );

    color: #ffffff;

    font-size: 13px;
    font-weight: 750;

    cursor: pointer;

    box-shadow:
        0 6px 15px rgba(79, 70, 229, .18);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.fornecedor-btn-salvar:hover {
    transform: translateY(-1px);

    filter: brightness(1.03);

    box-shadow:
        0 9px 22px rgba(79, 70, 229, .24);
}

.fornecedor-btn-salvar:active {
    transform: translateY(0);
}

.fornecedor-btn-cancelar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 44px;
    padding: 0 17px;

    border: 1px solid #e2e8f0;
    border-radius: 10px;

    background: #ffffff;

    color: #64748b;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.fornecedor-btn-cancelar:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #334155;
}


/* ---------------------------------------------------------
   CABEÇALHO DA LISTAGEM
   --------------------------------------------------------- */

.fornecedores-list-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;

    margin-bottom: 18px;
}

.fornecedores-section-label {
    display: inline-block;

    margin-bottom: 7px;

    color: #6366f1;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: .12em;
}

.fornecedores-list-header h3 {
    margin: 0;

    color: #111827;

    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.fornecedores-list-header p {
    margin: 6px 0 0;

    color: #64748b;

    font-size: 13px;
}


/* ---------------------------------------------------------
   CONTADOR
   --------------------------------------------------------- */

.fornecedores-counter {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 9px 13px;

    border: 1px solid #e2e8f0;
    border-radius: 12px;

    background: #ffffff;

    box-shadow: 0 3px 10px rgba(15, 23, 42, .035);
}

.fornecedores-counter > i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 9px;

    background: #eef2ff;
    color: #4f46e5;

    font-size: 13px;
}

.fornecedores-counter div {
    display: flex;
    flex-direction: column;
}

.fornecedores-counter strong {
    color: #111827;

    font-size: 16px;
    line-height: 1.1;
}

.fornecedores-counter span {
    margin-top: 2px;

    color: #64748b;

    font-size: 10px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .05em;
}


/* ---------------------------------------------------------
   TABELA
   --------------------------------------------------------- */

.fornecedores-table-wrapper {
    width: 100%;

    border: 1px solid #e5e7eb;
    border-radius: 17px;

    background: #ffffff;

    overflow-x: auto;

    box-shadow:
        0 4px 14px rgba(15, 23, 42, .04),
        0 15px 35px rgba(15, 23, 42, .025);
}

.fornecedores-table {
    width: 100%;

    border-collapse: separate;
    border-spacing: 0;

    min-width: 900px;
}

.fornecedores-table thead th {
    height: 48px;

    padding: 0 17px;

    border-bottom: 1px solid #e5e7eb;

    background: #f8fafc;

    color: #64748b;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: .07em;
    text-align: left;
    text-transform: uppercase;

    white-space: nowrap;
}

.fornecedores-table thead th:first-child {
    border-top-left-radius: 17px;
}

.fornecedores-table thead th:last-child {
    border-top-right-radius: 17px;
}

.fornecedores-table tbody td {
    padding: 15px 17px;

    border-bottom: 1px solid #f1f5f9;

    color: #334155;

    font-size: 12px;

    vertical-align: middle;
}

.fornecedores-table tbody tr {
    transition: background .18s ease;
}

.fornecedores-table tbody tr:hover {
    background: #fafbff;
}

.fornecedores-table tbody tr:last-child td {
    border-bottom: 0;
}

.col-id {
    width: 70px;
}

.col-acoes {
    width: 175px;
    text-align: right !important;
}


/* ---------------------------------------------------------
   ID
   --------------------------------------------------------- */

.fornecedor-id {
    color: #94a3b8 !important;

    font-size: 11px !important;
    font-weight: 750;
}


/* ---------------------------------------------------------
   NOME DO FORNECEDOR
   --------------------------------------------------------- */

.fornecedor-nome {
    display: flex;
    align-items: center;
    gap: 11px;

    min-width: 210px;
}

.fornecedor-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 37px;
    height: 37px;

    flex: 0 0 37px;

    border-radius: 10px;

    background: #eef2ff;
    color: #4f46e5;

    font-size: 13px;
}

.fornecedor-nome > div:last-child {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.fornecedor-nome strong {
    max-width: 230px;

    overflow: hidden;

    color: #1e293b;

    font-size: 12px;
    font-weight: 750;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.fornecedor-nome span {
    margin-top: 3px;

    max-width: 230px;

    overflow: hidden;

    color: #94a3b8;

    font-size: 10px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   INFORMAÇÕES
   --------------------------------------------------------- */

.fornecedor-info {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #475569;

    white-space: nowrap;
}

.fornecedor-info i {
    width: 14px;

    color: #94a3b8;

    font-size: 10px;
    text-align: center;
}

.fornecedor-email {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    max-width: 220px;

    color: #475569;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.fornecedor-email i {
    color: #94a3b8;
    font-size: 10px;
}

.fornecedor-vazio {
    color: #94a3b8;

    font-size: 11px;
    font-style: italic;
}


/* ---------------------------------------------------------
   AÇÕES
   --------------------------------------------------------- */

.fornecedor-acoes {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
}

.fornecedor-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 32px;
    padding: 0 10px;

    border: 1px solid transparent;
    border-radius: 8px;

    font-size: 10px;
    font-weight: 750;

    text-decoration: none;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.fornecedor-action:hover {
    transform: translateY(-1px);
}

.fornecedor-action i {
    font-size: 10px;
}

.fornecedor-action.editar {
    border-color: #c7d2fe;

    background: #eef2ff;
    color: #4f46e5;
}

.fornecedor-action.editar:hover {
    border-color: #a5b4fc;

    background: #e0e7ff;
}

.fornecedor-action.excluir {
    border-color: #fecaca;

    background: #fef2f2;
    color: #dc2626;
}

.fornecedor-action.excluir:hover {
    border-color: #fca5a5;

    background: #fee2e2;
}


/* ---------------------------------------------------------
   ESTADO VAZIO
   --------------------------------------------------------- */

.fornecedores-empty {
    padding: 65px 30px !important;

    text-align: center !important;
}

.fornecedores-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin: 0 auto 15px;

    border-radius: 15px;

    background: #f1f5f9;
    color: #94a3b8;

    font-size: 22px;
}

.fornecedores-empty strong {
    display: block;

    color: #334155;

    font-size: 14px;
    font-weight: 800;
}

.fornecedores-empty span {
    display: block;

    max-width: 430px;

    margin: 6px auto 0;

    color: #94a3b8;

    font-size: 12px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   RESPONSIVIDADE
   --------------------------------------------------------- */

@media (max-width: 900px) {

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

    .fornecedor-form-grid-3 .form-group:last-child {
        grid-column: 1 / -1;
    }

    .fornecedores-header-content {
        align-items: flex-start;
    }

}


@media (max-width: 700px) {

    .fornecedores-header-content {
        flex-direction: column;
        gap: 18px;
    }

    .fornecedores-header h2 {
        font-size: 25px;
    }

    .nav-voltar {
        width: 100%;
    }

    .fornecedor-form-card {
        padding: 20px;
        border-radius: 15px;
    }

    .fornecedor-form-grid,
    .fornecedor-form-grid-3 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .fornecedor-form-grid-3 .form-group:last-child {
        grid-column: auto;
    }

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

    .fornecedor-btn-salvar,
    .fornecedor-btn-cancelar {
        width: 100%;
    }

    .fornecedores-list-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .fornecedores-counter {
        width: 100%;
        box-sizing: border-box;
    }

}


@media (max-width: 480px) {

    .fornecedores-header h2 {
        font-size: 22px;
    }

    .fornecedor-form-card {
        padding: 17px;
    }

    .fornecedor-form-title {
        align-items: flex-start;
    }

    .fornecedor-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .fornecedor-form-title h3 {
        font-size: 16px;
    }

    .fornecedores-list-header h3 {
        font-size: 18px;
    }

    .fornecedores-table-wrapper {
        border-radius: 13px;
    }

}


/* ---------------------------------------------------------
   DARK MODE
   --------------------------------------------------------- */

body.dark-mode .fornecedores-header h2,
body.dark-mode .fornecedor-form-title h3,
body.dark-mode .fornecedores-list-header h3,
body.dark-mode .fornecedor-nome strong,
body.dark-mode .fornecedores-counter strong {
    color: #f8fafc;
}

body.dark-mode .page-header-description,
body.dark-mode .fornecedor-form-title p,
body.dark-mode .fornecedores-list-header p {
    color: #94a3b8;
}

body.dark-mode .nav-voltar,
body.dark-mode .fornecedor-form-card,
body.dark-mode .fornecedores-counter,
body.dark-mode .fornecedores-table-wrapper {
    border-color: #1e293b;
    background: #111827;
}

body.dark-mode .nav-voltar {
    color: #cbd5e1;
}

body.dark-mode .nav-voltar:hover {
    color: #818cf8;
    border-color: #3730a3;
}

body.dark-mode .fornecedor-form-header,
body.dark-mode .fornecedor-form-actions {
    border-color: #1e293b;
}

body.dark-mode .form-group label {
    color: #cbd5e1;
}

body.dark-mode .form-control {
    border-color: #334155;
    background: #0f172a;
    color: #f8fafc;
}

body.dark-mode .form-control::placeholder {
    color: #64748b;
}

body.dark-mode .form-control:focus {
    border-color: #6366f1;
    background: #0f172a;
}

body.dark-mode .fornecedores-table thead th {
    border-color: #1e293b;
    background: #0f172a;
    color: #94a3b8;
}

body.dark-mode .fornecedores-table tbody td {
    border-color: #1e293b;
    color: #cbd5e1;
}

body.dark-mode .fornecedores-table tbody tr:hover {
    background: #172033;
}

body.dark-mode .fornecedor-nome span,
body.dark-mode .fornecedor-vazio {
    color: #64748b;
}

body.dark-mode .fornecedor-info,
body.dark-mode .fornecedor-email {
    color: #cbd5e1;
}

body.dark-mode .fornecedores-counter > i,
body.dark-mode .fornecedor-avatar,
body.dark-mode .fornecedor-icon {
    background: rgba(99, 102, 241, .14);
}

body.dark-mode .fornecedor-btn-cancelar {
    border-color: #334155;
    background: #111827;
    color: #cbd5e1;
}

body.dark-mode .fornecedor-btn-cancelar:hover {
    background: #1e293b;
    border-color: #475569;
}

body.dark-mode .fornecedores-empty-icon {
    background: #1e293b;
    color: #64748b;
}

body.dark-mode .fornecedores-empty strong {
    color: #cbd5e1;
}

/* =========================================================
   FORNECEDORES
   Cabeçalho seguindo o padrão do Dashboard
   ========================================================= */

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

.fornecedores-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


/* ---------------------------------------------------------
   Botão voltar
   --------------------------------------------------------- */

.header-back-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 11px 17px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 11px;

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

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.header-back-button i {
    font-size: 13px;
}

.header-back-button:hover {
    background: rgba(255, 255, 255, 0.14);

    border-color: rgba(255, 255, 255, 0.25);

    transform: translateY(-1px);

    box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
}


/* =========================================================
   FORMULÁRIO DE FORNECEDOR
   ========================================================= */

.fornecedor-form-card {
    margin-bottom: 34px;
}

.fornecedor-form-header {
    margin-bottom: 26px;
}

.fornecedor-form-title {
    display: flex;
    align-items: center;
    gap: 15px;
}

.fornecedor-icon {
    width: 48px;
    height: 48px;

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

    flex-shrink: 0;

    border-radius: 13px;

    background: linear-gradient(
        135deg,
        #eef2ff,
        #e0e7ff
    );

    color: #4f46e5;

    font-size: 19px;
}

.fornecedor-form-title h3 {
    margin: 0 0 5px;

    font-size: 19px;
    font-weight: 800;

    color: #111827;
}

.fornecedor-form-title p {
    margin: 0;

    color: #6b7280;

    font-size: 13px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   Grid do formulário
   --------------------------------------------------------- */

.fornecedor-form-grid {
    display: grid;

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

    gap: 20px;

    margin-bottom: 20px;
}

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


/* ---------------------------------------------------------
   Campos
   --------------------------------------------------------- */

.fornecedor-form-card .form-group {
    min-width: 0;
}

.fornecedor-form-card .form-group label {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 8px;

    color: #374151;

    font-size: 13px;
    font-weight: 700;
}

.fornecedor-form-card .form-group label i {
    color: #6366f1;
    font-size: 12px;
}

.fornecedor-form-card .form-control {
    width: 100%;

    box-sizing: border-box;

    min-height: 44px;

    padding: 11px 13px;

    border: 1px solid #dbe1ea;
    border-radius: 10px;

    background: #ffffff;

    color: #111827;

    font-size: 14px;

    outline: none;

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

.fornecedor-form-card .form-control::placeholder {
    color: #9ca3af;
}

.fornecedor-form-card .form-control:hover {
    border-color: #c7ced9;
}

.fornecedor-form-card .form-control:focus {
    border-color: #6366f1;

    box-shadow:
        0 0 0 3px rgba(99, 102, 241, .12);
}


/* ---------------------------------------------------------
   Ações
   --------------------------------------------------------- */

.fornecedor-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 26px;
    padding-top: 22px;

    border-top: 1px solid #eef0f4;
}

.fornecedor-btn-salvar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 44px;

    padding: 0 18px;

    border-radius: 10px;
}

.fornecedor-btn-cancelar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 44px;

    padding: 0 17px;

    border: 1px solid #e5e7eb;

    border-radius: 10px;

    background: #ffffff;

    color: #4b5563;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.fornecedor-btn-cancelar:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #111827;
}


/* =========================================================
   LISTAGEM
   ========================================================= */

.fornecedores-list-header {
    display: flex;

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

    gap: 20px;

    margin-bottom: 17px;
}

.fornecedores-section-label {
    display: block;

    margin-bottom: 5px;

    color: #6366f1;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .12em;
}

.fornecedores-list-header h3 {
    margin: 0 0 5px;

    color: #111827;

    font-size: 20px;
    font-weight: 800;
}

.fornecedores-list-header p {
    margin: 0;

    color: #6b7280;

    font-size: 13px;
}


/* ---------------------------------------------------------
   Contador
   --------------------------------------------------------- */

.fornecedores-counter {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 10px 14px;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    background: #ffffff;

    box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
}

.fornecedores-counter > i {
    width: 34px;
    height: 34px;

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

    border-radius: 9px;

    background: #eef2ff;

    color: #4f46e5;

    font-size: 13px;
}

.fornecedores-counter strong {
    display: block;

    color: #111827;

    font-size: 16px;
    font-weight: 800;
}

.fornecedores-counter span {
    display: block;

    color: #6b7280;

    font-size: 11px;
}


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

.fornecedores-table-wrapper {
    overflow-x: auto;

    border: 1px solid #e5e7eb;
    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 8px 28px rgba(15, 23, 42, .05);
}

.fornecedores-table {
    width: 100%;

    border-collapse: collapse;

    min-width: 900px;
}

.fornecedores-table thead th {
    padding: 14px 16px;

    border-bottom: 1px solid #e5e7eb;

    background: #f8fafc;

    color: #6b7280;

    font-size: 11px;
    font-weight: 800;

    text-align: left;

    text-transform: uppercase;

    letter-spacing: .05em;
}

.fornecedores-table tbody td {
    padding: 15px 16px;

    border-bottom: 1px solid #f1f3f6;

    color: #374151;

    font-size: 13px;

    vertical-align: middle;
}

.fornecedores-table tbody tr:last-child td {
    border-bottom: none;
}

.fornecedores-table tbody tr {
    transition: background .18s ease;
}

.fornecedores-table tbody tr:hover {
    background: #fafbff;
}

.col-id {
    width: 70px;
}

.col-acoes {
    width: 180px;
    text-align: right !important;
}


/* =========================================================
   FORNECEDOR
   ========================================================= */

.fornecedor-id {
    color: #9ca3af !important;

    font-size: 12px !important;

    font-weight: 700;
}

.fornecedor-nome {
    display: flex;
    align-items: center;

    gap: 11px;
}

.fornecedor-avatar {
    width: 38px;
    height: 38px;

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

    flex-shrink: 0;

    border-radius: 10px;

    background: #eef2ff;

    color: #4f46e5;
}

.fornecedor-nome strong {
    display: block;

    color: #111827;

    font-size: 13px;
    font-weight: 800;
}

.fornecedor-nome span {
    display: block;

    margin-top: 3px;

    color: #9ca3af;

    font-size: 11px;
}

.fornecedor-info,
.fornecedor-email {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #4b5563;

    font-size: 12px;
}

.fornecedor-info i,
.fornecedor-email i {
    color: #9ca3af;

    font-size: 11px;
}

.fornecedor-vazio {
    color: #9ca3af;

    font-size: 12px;

    font-style: italic;
}


/* =========================================================
   AÇÕES DA TABELA
   ========================================================= */

.fornecedor-acoes {
    display: flex;

    justify-content: flex-end;

    gap: 7px;
}

.fornecedor-action {
    display: inline-flex;

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

    gap: 6px;

    min-height: 34px;

    padding: 0 10px;

    border: 1px solid transparent;
    border-radius: 8px;

    text-decoration: none;

    font-size: 11px;
    font-weight: 800;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.fornecedor-action:hover {
    transform: translateY(-1px);
}

.fornecedor-action.editar {
    background: #eef2ff;

    border-color: #e0e7ff;

    color: #4f46e5;
}

.fornecedor-action.editar:hover {
    background: #e0e7ff;
}

.fornecedor-action.excluir {
    background: #fef2f2;

    border-color: #fee2e2;

    color: #dc2626;
}

.fornecedor-action.excluir:hover {
    background: #fee2e2;
}


/* =========================================================
   ESTADO VAZIO
   ========================================================= */

.fornecedores-empty {
    padding: 55px 25px !important;

    text-align: center;
}

.fornecedores-empty-icon {
    width: 58px;
    height: 58px;

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

    margin: 0 auto 14px;

    border-radius: 15px;

    background: #f3f4f6;

    color: #9ca3af;

    font-size: 22px;
}

.fornecedores-empty strong {
    display: block;

    margin-bottom: 5px;

    color: #374151;

    font-size: 14px;
}

.fornecedores-empty span {
    display: block;

    color: #9ca3af;

    font-size: 12px;
}


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

.fornecedores-alert {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    padding: 13px 15px;

    border-radius: 11px;

    font-size: 13px;
    font-weight: 600;
}

.fornecedores-alert i {
    font-size: 15px;
}

/* =========================================================
   PRODUTOS
   Identidade visual alinhada ao Dashboard
   ========================================================= */


/* =========================================================
   PÁGINA
   ========================================================= */

.produtos-page {
    padding-bottom: 60px;
}


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

.produtos-header {
    margin-bottom: 18px;
}

.produtos-header .dashboard-header-content {
    min-height: 150px;
}


/* =========================================================
   NAVEGAÇÃO
   ========================================================= */

.products-navigation {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.products-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    min-height: 42px;
    padding: 0 16px;

    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;

    background: var(--card-bg, #ffffff);

    color: var(--text-secondary, #475569);

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

.products-nav-link i {
    font-size: 14px;
}

.products-nav-link:hover {
    transform: translateY(-2px);

    background: #f8fafc;

    border-color: #cbd5e1;

    color: #1e293b;

    box-shadow: 0 6px 16px rgba(15, 23, 42, .07);
}

.products-nav-primary {
    margin-left: auto;

    background: #2563eb;

    border-color: #2563eb;

    color: #ffffff;
}

.products-nav-primary:hover {
    background: #1d4ed8;

    border-color: #1d4ed8;

    color: #ffffff;
}


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

.system-alert {
    display: flex;
    align-items: center;
    gap: 14px;

    width: 100%;

    padding: 16px 18px;

    margin-bottom: 20px;

    border-radius: 14px;

    border: 1px solid transparent;

    box-sizing: border-box;
}

.system-alert-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 10px;

    font-size: 17px;
}

.system-alert > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.system-alert strong {
    font-size: 14px;
    font-weight: 800;
}

.system-alert span {
    font-size: 13px;
}

.system-alert.success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.system-alert.success .system-alert-icon {
    background: #dcfce7;
    color: #16a34a;
}

.system-alert.error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.system-alert.error .system-alert-icon {
    background: #fee2e2;
    color: #dc2626;
}


/* =========================================================
   CABEÇALHO DA VISÃO GERAL
   ========================================================= */

.products-overview-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin: 8px 0 16px;
}

.products-overview-header h3 {
    margin: 5px 0 4px;

    color: var(--text-primary, #0f172a);

    font-size: 21px;
    font-weight: 800;

    letter-spacing: -.02em;
}

.products-overview-header p {
    margin: 0;

    color: var(--text-secondary, #64748b);

    font-size: 13px;
}

.products-overview-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 13px;

    border-radius: 999px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    color: #64748b;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
}

.products-overview-status i {
    color: #2563eb;
}


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

.products-summary {
    display: grid;

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

    gap: 16px;

    margin-bottom: 30px;
}

.summary-card {
    position: relative;

    display: flex;
    align-items: center;

    gap: 15px;

    min-height: 105px;

    padding: 18px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    box-shadow:
        0 5px 18px rgba(15, 23, 42, .045);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.summary-card:hover {
    transform: translateY(-3px);

    border-color: #cbd5e1;

    box-shadow:
        0 12px 28px rgba(15, 23, 42, .08);
}

.summary-card-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    border-radius: 13px;

    font-size: 19px;
}

.summary-card-icon.blue {
    background: #eff6ff;
    color: #2563eb;
}

.summary-card-icon.green {
    background: #f0fdf4;
    color: #16a34a;
}

.summary-card-icon.purple {
    background: #faf5ff;
    color: #9333ea;
}

.summary-card-icon.orange {
    background: #fff7ed;
    color: #ea580c;
}

.summary-card > div:last-child {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.summary-label {
    color: #64748b;

    font-size: 12px;
    font-weight: 700;
}

.summary-card strong {
    color: #0f172a;

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

    font-weight: 800;
}

.summary-warning {
    border-color: #fed7aa;
    background: #fffdfa;
}


/* =========================================================
   FORMULÁRIO DE PRODUTO
   ========================================================= */

.product-form-card {
    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 18px;

    padding: 28px;

    margin-bottom: 34px;

    box-shadow:
        0 8px 30px rgba(15, 23, 42, .055);
}


/* =========================================================
   TÍTULO DA SEÇÃO
   ========================================================= */

.section-title {
    display: flex;
    align-items: center;

    gap: 14px;

    padding-bottom: 22px;

    margin-bottom: 26px;

    border-bottom: 1px solid #eef2f7;
}

.section-title-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    border-radius: 12px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 18px;
}

.section-title h3 {
    margin: 4px 0 4px;

    color: #0f172a;

    font-size: 19px;
    font-weight: 800;
}

.section-title p {
    margin: 0;

    color: #64748b;

    font-size: 13px;
}


/* =========================================================
   FORM SECTIONS
   ========================================================= */

.form-section {
    margin-bottom: 30px;
}

.form-section-header {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 20px;
}

.form-section-number {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

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

    border-radius: 10px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 12px;
    font-weight: 900;
}

.form-section-header h4 {
    margin: 0 0 3px;

    color: #1e293b;

    font-size: 15px;
    font-weight: 800;
}

.form-section-header p {
    margin: 0;

    color: #64748b;

    font-size: 12px;
}


/* =========================================================
   GRIDS DO FORMULÁRIO
   ========================================================= */

.form-grid {
    display: grid;

    gap: 18px;

    margin-bottom: 18px;
}

.product-basic-grid {
    grid-template-columns:
        minmax(0, 2fr)
        minmax(180px, 1fr)
        minmax(180px, 1fr);
}

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


/* =========================================================
   CAMPOS
   ========================================================= */

.form-group {
    min-width: 0;
}

.form-group label {
    display: block;

    margin-bottom: 7px;

    color: #334155;

    font-size: 12px;
    font-weight: 800;
}

.form-group label span {
    color: #dc2626;
}

.form-control {
    width: 100%;

    min-height: 44px;

    padding: 10px 13px;

    box-sizing: border-box;

    border: 1px solid #dbe2ea;

    border-radius: 10px;

    background: #ffffff;

    color: #0f172a;

    font-family: inherit;

    font-size: 13px;

    outline: none;

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

.form-control:hover {
    border-color: #cbd5e1;
}

.form-control:focus {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, .10);

    background: #ffffff;
}

textarea.form-control {
    min-height: 95px;

    resize: vertical;
}

select.form-control {
    cursor: pointer;
}


/* =========================================================
   INPUT COM ÍCONE
   ========================================================= */

.input-icon {
    position: relative;
}

.input-icon > i {
    position: absolute;

    left: 13px;
    top: 50%;

    transform: translateY(-50%);

    color: #94a3b8;

    font-size: 13px;

    pointer-events: none;

    z-index: 2;
}

.input-icon .form-control {
    padding-left: 38px;
}

.input-icon.select-icon > i {
    top: 50%;
}


/* =========================================================
   DADOS FISCAIS
   ========================================================= */

.fiscal-section {
    padding: 24px;

    margin-top: 8px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 16px;
}

.fiscal-header {
    margin-bottom: 24px;
}

.fiscal-number {
    background: #f0fdf4;

    color: #16a34a;
}

.fiscal-header h4 i {
    margin-right: 6px;

    color: #16a34a;
}

.fiscal-badge {
    margin-left: auto;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 11px;

    border-radius: 999px;

    background: #f0fdf4;

    border: 1px solid #bbf7d0;

    color: #15803d;

    font-size: 11px;
    font-weight: 800;
}

.fiscal-subsection {
    padding: 20px;

    margin-bottom: 16px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 13px;
}

.fiscal-subsection:last-child {
    margin-bottom: 0;
}

.fiscal-subtitle {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 17px;

    color: #334155;

    font-size: 13px;
    font-weight: 800;
}

.fiscal-subtitle i {
    color: #2563eb;
}

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

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

.form-group small {
    display: block;

    margin-top: 6px;

    color: #94a3b8;

    font-size: 11px;
    line-height: 1.4;
}


/* =========================================================
   BOTÕES DO FORMULÁRIO
   ========================================================= */

.form-actions {
    display: flex;
    align-items: center;

    gap: 10px;

    padding-top: 24px;

    margin-top: 24px;

    border-top: 1px solid #eef2f7;
}

.btn-product-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 44px;

    padding: 0 19px;

    border: 0;
    border-radius: 10px;

    background: #2563eb;

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 5px 14px rgba(37, 99, 235, .18);

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.btn-product-save:hover {
    transform: translateY(-2px);

    background: #1d4ed8;

    box-shadow:
        0 8px 20px rgba(37, 99, 235, .24);
}

.btn-product-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 44px;

    padding: 0 17px;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    background: #ffffff;

    color: #64748b;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.btn-product-cancel:hover {
    background: #f8fafc;

    border-color: #cbd5e1;

    color: #334155;
}


/* =========================================================
   LISTAGEM
   ========================================================= */

.products-list-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 14px;
}

.products-list-header h3 {
    margin: 5px 0 4px;

    color: #0f172a;

    font-size: 20px;
    font-weight: 800;
}

.products-list-header p {
    margin: 0;

    color: #64748b;

    font-size: 13px;
}


/* =========================================================
   CARD DA TABELA
   ========================================================= */

.products-table-card {
    width: 100%;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    box-shadow:
        0 6px 24px rgba(15, 23, 42, .045);
}

.table-responsive {
    width: 100%;

    overflow-x: auto;
}


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

.products-table {
    width: 100%;

    min-width: 1100px;

    border-collapse: collapse;
}

.products-table thead {
    background: #f8fafc;
}

.products-table th {
    padding: 14px 16px;

    border-bottom: 1px solid #e2e8f0;

    color: #64748b;

    text-align: left;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .06em;

    text-transform: uppercase;

    white-space: nowrap;
}

.products-table td {
    padding: 15px 16px;

    border-bottom: 1px solid #f1f5f9;

    color: #334155;

    font-size: 12px;

    vertical-align: middle;
}

.products-table tbody tr {
    transition: background .15s ease;
}

.products-table tbody tr:hover {
    background: #f8fafc;
}

.products-table tbody tr:last-child td {
    border-bottom: 0;
}


/* =========================================================
   ID
   ========================================================= */

.product-id {
    display: inline-flex;

    padding: 5px 8px;

    border-radius: 7px;

    background: #f1f5f9;

    color: #64748b;

    font-size: 11px;
    font-weight: 800;
}


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

.product-name-cell {
    display: flex;
    align-items: center;

    gap: 11px;

    min-width: 220px;
}

.product-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 10px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 14px;
}

.product-name-cell > div:last-child {
    min-width: 0;
}

.product-name-cell strong {
    display: block;

    overflow: hidden;

    color: #1e293b;

    font-size: 13px;
    font-weight: 800;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.product-name-cell small {
    display: block;

    max-width: 220px;

    margin-top: 3px;

    overflow: hidden;

    color: #94a3b8;

    font-size: 11px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   CATEGORIA
   ========================================================= */

.category-badge {
    display: inline-flex;

    padding: 6px 9px;

    border-radius: 7px;

    background: #f5f3ff;

    color: #7c3aed;

    font-size: 11px;
    font-weight: 700;
}

.empty-value {
    color: #94a3b8;

    font-size: 11px;

    font-style: italic;
}


/* =========================================================
   PREÇO
   ========================================================= */

.product-price {
    color: #15803d;

    font-size: 13px;
    font-weight: 800;

    white-space: nowrap;
}


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

.stock-cell {
    display: flex;
    align-items: center;

    gap: 7px;

    flex-wrap: wrap;
}

.stock-cell > strong {
    color: #1e293b;

    font-size: 14px;
}

.stock-badge {
    display: inline-flex;

    padding: 4px 7px;

    border-radius: 6px;

    font-size: 9px;
    font-weight: 900;

    text-transform: uppercase;
}

.stock-ok {
    background: #dcfce7;

    color: #15803d;
}

.stock-warning {
    background: #fef3c7;

    color: #b45309;
}

.stock-danger {
    background: #fee2e2;

    color: #b91c1c;
}


/* =========================================================
   INFORMAÇÕES FISCAIS DA TABELA
   ========================================================= */

.fiscal-table-info {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.fiscal-table-info div {
    display: flex;
    align-items: center;

    gap: 7px;
}

.fiscal-table-info span {
    min-width: 30px;

    color: #94a3b8;

    font-size: 9px;
    font-weight: 900;

    text-transform: uppercase;
}

.fiscal-table-info strong {
    color: #475569;

    font-size: 10px;
    font-weight: 700;
}


/* =========================================================
   FORNECEDOR
   ========================================================= */

.supplier-cell {
    display: flex;
    align-items: center;

    gap: 8px;

    max-width: 180px;
}

.supplier-icon {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

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

    border-radius: 8px;

    background: #f5f3ff;

    color: #9333ea;

    font-size: 11px;
}

.supplier-cell span {
    overflow: hidden;

    color: #475569;

    font-size: 11px;
    font-weight: 700;

    text-overflow: ellipsis;

    white-space: nowrap;
}


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

.table-actions-column {
    text-align: right !important;
}

.product-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 6px;
}

.product-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    min-height: 32px;

    padding: 0 9px;

    border-radius: 8px;

    text-decoration: none;

    font-size: 10px;
    font-weight: 800;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.product-action:hover {
    transform: translateY(-1px);
}

.product-action.edit {
    background: #eff6ff;

    color: #2563eb;
}

.product-action.edit:hover {
    background: #dbeafe;

    color: #1d4ed8;
}

.product-action.delete {
    background: #fef2f2;

    color: #dc2626;
}

.product-action.delete:hover {
    background: #fee2e2;

    color: #b91c1c;
}


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

.empty-table {
    padding: 60px 20px !important;

    text-align: center !important;
}

.empty-table-icon {
    width: 58px;
    height: 58px;

    margin: 0 auto 13px;

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

    border-radius: 14px;

    background: #f1f5f9;

    color: #94a3b8;

    font-size: 22px;
}

.empty-table strong {
    display: block;

    margin-bottom: 5px;

    color: #334155;

    font-size: 14px;
}

.empty-table span {
    display: block;

    color: #94a3b8;

    font-size: 12px;
}


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

@media (max-width: 1100px) {

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

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

    .product-basic-grid .form-group:first-child {
        grid-column: 1 / -1;
    }

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

}


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

@media (max-width: 768px) {

    .produtos-page {
        padding-bottom: 35px;
    }

    .products-navigation {
        gap: 8px;
    }

    .products-nav-link {
        flex: 1 1 auto;

        justify-content: center;
    }

    .products-nav-primary {
        margin-left: 0;
    }

    .products-overview-header {
        align-items: flex-start;

        flex-direction: column;
    }

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

        gap: 10px;
    }

    .summary-card {
        min-height: 92px;

        padding: 14px;

        gap: 11px;
    }

    .summary-card-icon {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }

    .product-form-card {
        padding: 20px 16px;

        border-radius: 14px;
    }

    .product-basic-grid,
    .product-category-grid,
    .fiscal-grid-1,
    .fiscal-grid-2 {
        grid-template-columns: 1fr;
    }

    .product-basic-grid .form-group:first-child {
        grid-column: auto;
    }

    .fiscal-section {
        padding: 16px;
    }

    .fiscal-subsection {
        padding: 15px;
    }

    .fiscal-badge {
        display: none;
    }

    .form-actions {
        align-items: stretch;

        flex-direction: column;
    }

    .btn-product-save,
    .btn-product-cancel {
        width: 100%;
    }

}


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

@media (max-width: 480px) {

    .products-summary {
        grid-template-columns: 1fr;
    }

    .products-nav-link {
        width: 100%;
    }

    .products-overview-header h3 {
        font-size: 18px;
    }

    .section-title {
        align-items: flex-start;
    }

    .section-title-icon {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }

    .form-section-header {
        align-items: flex-start;
    }

    .products-list-header h3 {
        font-size: 18px;
    }

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

    .product-action {
        justify-content: center;
    }

}
/* =========================================================
   VALORIUM SISTEMAS
   MESAS - STYLE.CSS
   Seguindo o padrão visual do Dashboard
   ========================================================= */


/* =========================================================
   PÁGINA
   ========================================================= */

.mesas-page {
    position: relative;
    padding: 38px 0 60px;
}


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

.mesas-header {
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(
            135deg,
            #111827 0%,
            #1e293b 55%,
            #312e81 100%
        );
    box-shadow: var(--shadow-lg);
}

.mesas-header::before {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    right: -100px;
    top: -190px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.22);
    filter: blur(5px);
    pointer-events: none;
}

.mesas-header::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: 25%;
    bottom: -180px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.12);
    pointer-events: none;
}

.page-header-content {
    position: relative;
    z-index: 2;
    min-height: 190px;
    
    /* Alterado para empilhar os itens verticalmente */
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    gap: 20px;
    padding: 38px 42px;
}

/* Criamos um container interno para alinhar o texto e o ícone do topo lado a lado */
.page-header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
}
/* =========================================================
   MARCA
   ========================================================= */

.page-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    color: #a5b4fc;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.page-brand i {
    font-size: 14px;
}


/* =========================================================
   TÍTULO
   ========================================================= */

.page-header-content h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
}

.page-header-content h2 i {
    margin-right: 8px;
    color: #818cf8;
    font-size: 0.72em;
}

.page-subtitle {
    max-width: 680px;
    margin-top: 12px;
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   ÍCONE DO CABEÇALHO
   ========================================================= */

.mesas-header-icon {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    color: #a5b4fc;
    font-size: 31px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 30px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   NAVEGAÇÃO (Movida para baixo)
   ========================================================= */

.page-navigation {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: none;
}

.nav-action {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 700;
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.nav-action:hover {
    transform: translateY(-2px);
    border-color: rgba(165, 180, 252, 0.25);
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.nav-action i {
    font-size: 12px;
}

.nav-action-success {
    border-color: rgba(74, 222, 128, 0.2);
    background: rgba(34, 197, 94, 0.15);
    color: #bbf7d0;
}

.nav-action-success:hover {
    border-color: rgba(74, 222, 128, 0.35);
    background: rgba(34, 197, 94, 0.25);
    color: #dcfce7;
}

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

.system-alert {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 20px;
    padding: 15px 17px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

.system-alert.success {
    border-color: #bbf7d0;
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f0fdf4
        );
}

.system-alert.error {
    border-color: #fecaca;
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fef2f2
        );
}

.system-alert-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 16px;
}

.system-alert.success .system-alert-icon {
    background: var(--success-light);
    color: var(--success);
}

.system-alert.error .system-alert-icon {
    background: var(--danger-light);
    color: var(--danger);
}

.system-alert strong {
    display: block;
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.system-alert span {
    display: block;
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 12px;
}


/* =========================================================
   RESUMO DAS MESAS
   ========================================================= */

.mesas-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.summary-card {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.summary-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(79, 70, 229, 0.16);
}

.summary-card::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    right: -55px;
    top: -55px;
    border-radius: 50%;
    background: var(--summary-light, var(--primary-light));
    opacity: 0.75;
}

.summary-card-icon {
    position: relative;
    z-index: 2;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font-size: 18px;
}

.summary-card-icon.blue {
    background: var(--info-light);
    color: var(--info);
    --summary-light: var(--info-light);
}

.summary-card-icon.green {
    background: var(--success-light);
    color: var(--success);
    --summary-light: var(--success-light);
}

.summary-card-icon.red {
    background: var(--danger-light);
    color: var(--danger);
    --summary-light: var(--danger-light);
}

.summary-card-icon.orange {
    background: var(--fiscal-light);
    color: var(--fiscal);
    --summary-light: var(--fiscal-light);
}

.summary-card > div:last-child {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.summary-label {
    display: block;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
}

.summary-card strong {
    display: block;
    margin-top: 2px;
    color: var(--text);
    font-size: 27px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.8px;
}


/* =========================================================
   CARD DO FORMULÁRIO
   ========================================================= */

.mesa-form-card {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    box-shadow: var(--shadow-sm);
}

.mesa-form-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background:
        linear-gradient(
            90deg,
            var(--primary),
            #6366f1,
            #818cf8
        );
}


/* =========================================================
   TÍTULO DA SEÇÃO
   ========================================================= */

.section-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 25px;
}

.section-title-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 17px;
}

.section-title h3 {
    color: var(--text);
    font-size: 18px;
    font-weight: 750;
}

.section-title p {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 12px;
}


/* =========================================================
   FORM SECTION
   ========================================================= */

.form-section {
    padding: 21px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fafbff 100%
        );
}

.form-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.form-section-number {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.form-section-header h4 {
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
}

.form-section-header p {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 11px;
}


/* =========================================================
   GRID DO FORMULÁRIO
   ========================================================= */

.form-grid {
    display: grid;
    gap: 16px;
}

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


/* =========================================================
   FORM GROUP
   ========================================================= */

.form-group {
    min-width: 0;
}

.form-group label {
    display: block;
    margin-bottom: 7px;
    color: var(--text);
    font-size: 11px;
    font-weight: 750;
}

.form-group label span {
    color: var(--danger);
}

.form-group label small {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
}


/* =========================================================
   INPUT COM ÍCONE
   ========================================================= */

.input-icon {
    position: relative;
}

.input-icon > i {
    position: absolute;
    left: 14px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 13px;
    pointer-events: none;
    transition: color var(--transition);
}

.input-icon:focus-within > i {
    color: var(--primary);
}

.input-icon.select-icon > i {
    pointer-events: none;
}


/* =========================================================
   INPUTS
   ========================================================= */

.form-control {
    width: 100%;
    min-height: 45px;
    padding: 0 13px 0 39px;
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    background: #ffffff;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.form-control::placeholder {
    color: #a8b1bf;
}

.form-control:hover {
    border-color: #cbd5e1;
}

.form-control:focus {
    border-color: rgba(79, 70, 229, 0.55);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

select.form-control {
    appearance: none;
    cursor: pointer;
    padding-right: 36px;
}

.select-icon::after {
    content: "\f107";
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-family: "Font Awesome 6 Free";
    font-size: 11px;
    font-weight: 900;
    pointer-events: none;
}


/* =========================================================
   AÇÕES DO FORMULÁRIO
   ========================================================= */

.form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.btn-product-save,
.btn-product-cancel {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 17px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}

.btn-product-save {
    border: 1px solid var(--primary);
    background:
        linear-gradient(
            135deg,
            var(--primary),
            #6366f1
        );
    color: #ffffff;
    box-shadow: 0 5px 14px rgba(79, 70, 229, 0.2);
}

.btn-product-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 20px rgba(79, 70, 229, 0.25);
}

.btn-product-save:active,
.btn-product-cancel:active {
    transform: scale(0.97);
}

.btn-product-cancel {
    border: 1px solid var(--border);
    background: #ffffff;
    color: var(--text-secondary);
}

.btn-product-cancel:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: var(--text);
}


/* =========================================================
   CABEÇALHO DO MAPA
   ========================================================= */

.products-list-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.products-list-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 19px;
    font-weight: 750;
    letter-spacing: -0.3px;
}

.products-list-header h3 i {
    color: var(--primary);
    font-size: 17px;
}

.products-list-header p {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}

.mesas-live-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--success-light);
    color: var(--success);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.mesas-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.10);
    animation: livePulse 2s infinite;
}

@keyframes livePulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.45;
    }
}


/* =========================================================
   GRID DAS MESAS
   ========================================================= */

.grid-mesas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}


/* =========================================================
   CARD DA MESA
   ========================================================= */

.card-mesa {
    --mesa-color: var(--primary);
    --mesa-light: var(--primary-light);
    position: relative;
    min-width: 0;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.card-mesa::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--mesa-color);
}

.card-mesa::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -55px;
    top: -60px;
    border-radius: 50%;
    background: var(--mesa-light);
    opacity: 0.65;
    pointer-events: none;
}

.card-mesa:hover {
    transform: translateY(-5px);
    border-color: color-mix(
        in srgb,
        var(--mesa-color) 20%,
        var(--border)
    );
    box-shadow: var(--shadow-md);
}


/* =========================================================
   CORES DOS STATUS
   ========================================================= */

.card-mesa.status-livre {
    --mesa-color: #16a34a;
    --mesa-light: #f0fdf4;
}

.card-mesa.status-ocupada {
    --mesa-color: #dc2626;
    --mesa-light: #fef2f2;
}

.card-mesa.status-reservada {
    --mesa-color: #ea580c;
    --mesa-light: #fff7ed;
}


/* =========================================================
   TOPO DO CARD
   ========================================================= */

.mesa-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.mesa-numero {
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.mesa-id {
    margin-top: 4px;
    color: var(--text-muted);
    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;
    font-size: 9px;
}


/* =========================================================
   BADGE DE STATUS
   ========================================================= */

.badge-status {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 7px;
    background: var(--mesa-light);
    color: var(--mesa-color);
    font-size: 9px;
    font-weight: 850;
    white-space: nowrap;
}

.badge-status i {
    font-size: 8px;
}


/* =========================================================
   INFORMAÇÕES
   ========================================================= */

.mesa-info {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    padding: 23px 0 18px;
}

.mesa-cliente {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text);
    font-size: 12px;
    font-weight: 750;
}

.mesa-cliente i {
    color: var(--mesa-color);
    font-size: 11px;
}

.mesa-capacidade {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
}

.mesa-capacidade i {
    color: var(--text-muted);
    font-size: 10px;
}

.mesa-sem-capacidade {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 8px;
    border-radius: 7px;
    background: #f8fafc;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
}


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

.card-actions {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.btn-lancar {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid var(--mesa-color);
    border-radius: 9px;
    background: var(--mesa-color);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    box-shadow:
        0 4px 12px color-mix(
            in srgb,
            var(--mesa-color) 18%,
            transparent
        );
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        filter var(--transition);
}

.btn-lancar:hover {
    transform: translateY(-2px);
    filter: brightness(0.96);
    box-shadow:
        0 7px 17px color-mix(
            in srgb,
            var(--mesa-color) 25%,
            transparent
        );
}

.btn-lancar i {
    font-size: 10px;
}


/* =========================================================
   LINKS DE STATUS
   ========================================================= */

.link-mudar {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    transition:
        color var(--transition),
        background var(--transition);
}

.link-mudar:hover {
    color: var(--mesa-color);
}

.link-liberar:hover {
    background: var(--mesa-light);
    border-radius: 7px;
}


/* =========================================================
   RODAPÉ DOS CARDS
   ========================================================= */

.card-footer-links {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.card-footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 750;
    transition:
        color var(--transition),
        transform var(--transition);
}

.card-footer-links a:hover {
    transform: translateX(1px);
}

.link-editar {
    color: var(--info);
}

.link-editar:hover {
    color: #1d4ed8;
}

.link-excluir {
    color: var(--danger);
}

.link-excluir:hover {
    color: #b91c1c;
}


/* =========================================================
   ESTADO VAZIO
   ========================================================= */

.sem-mesas {
    grid-column: 1 / -1;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 35px;
    border: 1px dashed #cbd5e1;
    border-radius: var(--radius-md);
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f8fafc
        );
    text-align: center;
}

.empty-table-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    border-radius: 16px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 22px;
}

.sem-mesas strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
}

.sem-mesas span {
    max-width: 420px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.6;
}


/* =========================================================
   MODAL VENDA RÁPIDA
   ========================================================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.68);
    backdrop-filter: blur(5px);
    animation: modalOverlayIn 0.2s ease both;
}

@keyframes modalOverlayIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-venda-card {
    width: min(100%, 470px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.25);
    animation: modalCardIn 0.25s ease both;
}

@keyframes modalCardIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-venda-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px;
    border-bottom: 1px solid var(--border);
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f8fafc
        );
}

.modal-venda-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 13px;
    background: var(--finance-light);
    color: var(--finance);
    font-size: 19px;
}

.modal-venda-header h3 {
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
}

.modal-venda-header p {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 11px;
}

.modal-venda-card form {
    padding: 24px;
}

.modal-venda-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 20px;
}


/* =========================================================
   FOCO / ACESSIBILIDADE
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(79, 70, 229, 0.22);
    outline-offset: 3px;
}


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

@media (max-width: 1200px) {

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

}


@media (max-width: 1050px) {

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

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

}


@media (max-width: 900px) {

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

    .page-header-content {
        align-items: flex-start;
        flex-direction: column;
        padding: 32px;
    }

    .mesas-header-icon {
        width: 58px;
        height: 58px;
        border-radius: 15px;
        font-size: 23px;
    }

}


@media (max-width: 700px) {

    .mesas-page {
        padding-top: 24px;
    }

    .page-header-content {
        min-height: auto;
        padding: 28px 24px;
    }

    .page-header-content h2 {
        font-size: 29px;
    }

    .page-subtitle {
        font-size: 13px;
    }

    .page-navigation {
        padding: 12px;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .page-navigation::-webkit-scrollbar {
        display: none;
    }

    .nav-action {
        flex-shrink: 0;
    }

    .mesa-form-card {
        padding: 21px;
    }

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

    .products-list-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

}


@media (max-width: 600px) {

    .mesas-summary {
        grid-template-columns: 1fr;
    }

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

    .card-mesa {
        min-height: 235px;
    }

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

    .btn-product-save,
    .btn-product-cancel {
        width: 100%;
    }

    .modal-venda-actions {
        flex-direction: column-reverse;
    }

    .modal-venda-actions .btn-product-save,
    .modal-venda-actions .btn-product-cancel {
        width: 100%;
    }

}


@media (max-width: 430px) {

    .mesas-page {
        padding-top: 18px;
    }

    .page-header {
        border-radius: 18px;
    }

    .page-header-content {
        padding: 25px 20px;
    }

    .page-brand {
        font-size: 10px;
    }

    .page-header-content h2 {
        font-size: 26px;
    }

    .page-subtitle {
        font-size: 12px;
    }

    .mesas-summary .summary-card {
        padding: 16px;
    }

    .mesa-form-card {
        padding: 18px;
    }

    .form-section {
        padding: 17px;
    }

    .section-title {
        align-items: flex-start;
    }

    .mesa-card-top {
        flex-direction: column;
    }

    .badge-status {
        align-self: flex-start;
    }

    .card-mesa {
        padding: 18px;
    }

    .modal-overlay {
        padding: 12px;
    }

    .modal-venda-header,
    .modal-venda-card form {
        padding: 20px;
    }

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}

/* =========================================================
   VALORIUM SISTEMAS
   PEDIDOS_MESA.PHP
   COMANDA DIGITAL
   ========================================================= */


/* =========================================================
   CABEÇALHO DA COMANDA
   ========================================================= */

.page-header-comanda {
    position: relative;

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

    gap: 30px;

    margin-bottom: 24px;
    padding: 30px 34px;

    overflow: hidden;

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

    background:
        linear-gradient(
            135deg,
            #111827 0%,
            #1e293b 55%,
            #312e81 100%
        );

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

    animation: fadeUp 0.45s ease both;
}

.page-header-comanda::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -100px;
    top: -170px;

    border-radius: 50%;

    background: rgba(99, 102, 241, 0.20);

    filter: blur(5px);

    pointer-events: none;
}

.page-header-comanda::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    right: 25%;
    bottom: -150px;

    border-radius: 50%;

    background: rgba(59, 130, 246, 0.10);

    pointer-events: none;
}

.page-header-info {
    position: relative;
    z-index: 2;

    min-width: 0;
}

.page-brand {
    display: inline-flex;
    align-items: center;

    margin-bottom: 9px;

    color: #a5b4fc;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.page-header-comanda h2 {
    color: #ffffff;

    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -0.7px;
}

.mesa-titulo {
    color: #a5b4fc;
}

.mesa-info-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 12px;

    color: #cbd5e1;

    font-size: 12px;
    font-weight: 600;
}


/* =========================================================
   STATUS DA MESA
   ========================================================= */

.status-indicator {
    display: inline-flex;
    align-items: center;

    padding: 6px 10px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.5px;

    text-transform: uppercase;
}

.status-livre {
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
}

.status-ocupada {
    background: rgba(239, 68, 68, 0.14);
    color: #fca5a5;
}

.status-pagamento {
    background: rgba(234, 179, 8, 0.16);
    color: #fde68a;
}


/* =========================================================
   NAVEGAÇÃO
   ========================================================= */

.page-header-comanda .nav-links {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;
}

.page-header-comanda .nav-voltar {
    display: inline-flex;
    align-items: center;

    min-height: 40px;

    padding: 0 13px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;

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

    color: #e2e8f0;

    font-size: 11px;
    font-weight: 700;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.page-header-comanda .nav-voltar:hover {
    transform: translateY(-2px);

    border-color: rgba(255, 255, 255, 0.20);

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

    color: #ffffff;
}


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

.alert-sucesso,
.alert-erro {
    display: flex;
    align-items: center;

    min-height: 48px;

    margin-bottom: 20px;
    padding: 12px 16px;

    border-radius: 12px;

    font-size: 13px;
    font-weight: 700;

    animation: fadeUp 0.35s ease both;
}

.alert-sucesso {
    border: 1px solid #bbf7d0;

    background: var(--success-light);

    color: #15803d;
}

.alert-erro {
    border: 1px solid #fecaca;

    background: var(--danger-light);

    color: #b91c1c;
}


/* =========================================================
   RESUMO DA COMANDA
   ========================================================= */

.comanda-resumo {
    display: grid;

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

    gap: 16px;

    margin-bottom: 20px;

    animation: fadeUp 0.45s 0.08s ease both;
}

.resumo-item {
    min-width: 0;

    display: flex;
    flex-direction: column;

    justify-content: center;

    min-height: 105px;

    padding: 20px 22px;

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

    background: var(--card);

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

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.resumo-item:hover {
    transform: translateY(-2px);

    border-color: rgba(79, 70, 229, 0.16);

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

.resumo-label {
    margin-bottom: 6px;

    color: var(--text-muted);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.resumo-item strong {
    color: var(--text);

    font-size: 25px;
    font-weight: 800;

    letter-spacing: -0.5px;
}

.resumo-total {
    border-color: #bbf7d0;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f0fdf4 100%
        );
}

.resumo-total strong {
    color: var(--success);
}


/* =========================================================
   LAYOUT PRINCIPAL
   ========================================================= */

.comanda-layout {
    display: grid;

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

    gap: 20px;

    align-items: start;

    animation: fadeUp 0.45s 0.12s ease both;
}


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

.card-form {
    min-width: 0;

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

    background: var(--card);

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

.comanda-itens-card {
    overflow: hidden;
}

.adicionar-item-card {
    padding: 24px;

    position: sticky;
    top: 20px;
}


/* =========================================================
   CABEÇALHO DOS CARDS
   ========================================================= */

.card-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding: 22px 24px;

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

.adicionar-item-card .card-section-header {
    padding: 0 0 21px;
}

.section-eyebrow {
    display: block;

    margin-bottom: 4px;

    color: var(--primary);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1.3px;
}

.card-section-header h3 {
    color: var(--text);

    font-size: 18px;
    font-weight: 750;

    letter-spacing: -0.3px;
}

.badge-contagem {
    display: inline-flex;
    align-items: center;

    flex-shrink: 0;

    padding: 7px 10px;

    border-radius: 8px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 10px;
    font-weight: 800;
}

.icone-adicionar {
    width: 38px;
    height: 38px;

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

    flex-shrink: 0;

    border-radius: 11px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 20px;
    font-weight: 700;
}


/* =========================================================
   COMANDA VAZIA
   ========================================================= */

.comanda-vazia {
    min-height: 300px;

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

    flex-direction: column;

    padding: 35px;

    text-align: center;
}

.comanda-vazia-icon {
    width: 58px;
    height: 58px;

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

    margin-bottom: 15px;

    border-radius: 16px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 27px;
    font-weight: 400;
}

.comanda-vazia strong {
    color: var(--text);

    font-size: 15px;
}

.comanda-vazia span {
    margin-top: 5px;

    color: var(--text-muted);

    font-size: 12px;
}


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

.table-wrapper {
    width: 100%;
}

.comanda-table-wrapper {
    overflow-x: auto;
}

.tabela-comanda {
    width: 100%;

    border-collapse: collapse;

    font-size: 12px;
}

.tabela-comanda thead {
    background: #f8fafc;
}

.tabela-comanda th {
    padding: 12px 14px;

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

    color: var(--text-muted);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.7px;

    text-align: left;

    text-transform: uppercase;

    white-space: nowrap;
}

.tabela-comanda td {
    padding: 15px 14px;

    border-bottom: 1px solid #eef2f7;

    vertical-align: middle;
}

.tabela-comanda tbody tr {
    transition:
        background var(--transition);
}

.tabela-comanda tbody tr:hover {
    background: #fafbff;
}

.tabela-comanda tbody tr:last-child td {
    border-bottom: none;
}

.coluna-acoes {
    text-align: right;
}


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

.produto-comanda {
    display: flex;
    flex-direction: column;

    gap: 3px;

    min-width: 160px;
}

.produto-comanda strong {
    color: var(--text);

    font-size: 13px;
    font-weight: 750;
}

.observacao-item {
    color: var(--text-muted);

    font-size: 10px;

    line-height: 1.4;
}

.quantidade-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 32px;
    min-height: 30px;

    padding: 0 8px;

    border-radius: 8px;

    background: #f1f5f9;

    color: var(--text);

    font-size: 12px;
    font-weight: 800;
}

.hora-item {
    color: var(--text-muted);

    font-size: 11px;
    font-weight: 600;

    white-space: nowrap;
}

.subtotal-item {
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    white-space: nowrap;
}


/* =========================================================
   AÇÕES DA TABELA
   ========================================================= */

.acoes-tabela {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 6px;
}

.btn-acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding: 0 9px;

    border: 1px solid transparent;
    border-radius: 8px;

    font-size: 10px;
    font-weight: 750;

    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
}

.btn-acao:hover {
    transform: translateY(-1px);
}

.btn-alterar {
    border-color: #c7d2fe;

    background: var(--primary-light);

    color: var(--primary);
}

.btn-alterar:hover {
    background: #e0e7ff;
}

.btn-excluir {
    border-color: #fecaca;

    background: var(--danger-light);

    color: var(--danger);
}

.btn-excluir:hover {
    background: #fee2e2;
}


/* =========================================================
   TOTAL DA COMANDA
   ========================================================= */

.comanda-total {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 19px 24px;

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

    background: #fafbff;
}

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

    font-size: 12px;
    font-weight: 700;
}

.comanda-total strong {
    color: var(--primary);

    font-size: 20px;
    font-weight: 850;

    white-space: nowrap;
}


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

.adicionar-item-card form {
    margin-top: 20px;
}

.adicionar-item-card .card-section-header + form {
    margin-top: 22px;
}

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

.form-group label {
    display: block;

    margin-bottom: 7px;

    color: var(--text);

    font-size: 11px;
    font-weight: 750;
}

.form-control {
    width: 100%;

    min-height: 44px;

    padding: 0 12px;

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

    outline: none;

    background: #ffffff;

    color: var(--text);

    font-size: 12px;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-control:hover {
    border-color: #cbd5e1;
}

.form-control:focus {
    border-color: var(--primary);

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(79, 70, 229, 0.10);
}

.campo-produto {
    position: relative;
}


/* =========================================================
   BOTÃO ADICIONAR
   ========================================================= */

.btn-adicionar-item {
    width: 100%;

    min-height: 46px;

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

    border: none;
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #4338ca
        );

    color: #ffffff;

    cursor: pointer;

    font-size: 12px;
    font-weight: 800;

    box-shadow:
        0 7px 16px
        rgba(79, 70, 229, 0.20);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        filter var(--transition);
}

.btn-adicionar-item:hover {
    transform: translateY(-2px);

    filter: brightness(1.03);

    box-shadow:
        0 11px 22px
        rgba(79, 70, 229, 0.25);
}

.btn-adicionar-item:active {
    transform: scale(0.98);
}


/* =========================================================
   AUTOCOMPLETE
   ========================================================= */

.sugestoes-box-dinamica {
    position: absolute;

    z-index: 100;

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

    max-height: 250px;

    overflow-y: auto;

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

    background: #ffffff;

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

    animation: dropdownIn 0.16s ease;
}

.sugestao-item-dinamico {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 11px 13px;

    cursor: pointer;

    border-bottom: 1px solid #f1f5f9;

    transition:
        background var(--transition);
}

.sugestao-item-dinamico:last-child {
    border-bottom: none;
}

.sugestao-item-dinamico:hover {
    background: var(--primary-light);
}

.sugestao-produto {
    overflow: hidden;

    color: var(--text);

    font-size: 11px;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.sugestao-preco {
    flex-shrink: 0;

    color: var(--success);

    font-size: 10px;
    font-weight: 800;
}

.sugestao-vazia {
    padding: 15px;

    color: var(--text-muted);

    font-size: 11px;

    text-align: center;
}


/* =========================================================
   DIVISOR
   ========================================================= */

.divisor-card {
    display: flex;
    align-items: center;

    gap: 12px;

    margin: 23px 0 18px;
}

.divisor-card::before,
.divisor-card::after {
    content: "";

    flex: 1;

    height: 1px;

    background: var(--border);
}

.divisor-card span {
    color: var(--text-muted);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* =========================================================
   CONFIRMAR PEDIDO
   ========================================================= */

.btn-confirmar-pedido {
    width: 100%;

    min-height: 46px;

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

    border: 1px solid #bbf7d0;
    border-radius: 10px;

    background: var(--success-light);

    color: var(--success);

    cursor: pointer;

    font-size: 12px;
    font-weight: 800;

    transition:
        transform var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.btn-confirmar-pedido:hover {
    transform: translateY(-2px);

    background: #dcfce7;

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


/* =========================================================
   AÇÕES DA CONTA
   ========================================================= */

.acoes-conta-card {
    margin-top: 20px;

    overflow: hidden;

    animation: fadeUp 0.45s 0.20s ease both;
}

.acoes-conta-card .card-section-header {
    padding-bottom: 20px;
}

.acoes-conta-grid {
    display: grid;

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

    gap: 12px;

    padding: 0 24px 24px;
}

.acao-conta {
    position: relative;

    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 0;

    min-height: 78px;

    padding: 13px;

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

    background: #ffffff;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition),
        background var(--transition);
}

.acao-conta:hover {
    transform: translateY(-3px);

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

.acao-icone {
    width: 38px;
    height: 38px;

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

    flex-shrink: 0;

    border-radius: 10px;

    font-size: 15px;
    font-weight: 800;
}

.acao-conta strong {
    display: block;

    color: var(--text);

    font-size: 11px;
    font-weight: 800;
}

.acao-conta small {
    display: block;

    margin-top: 3px;

    color: var(--text-muted);

    font-size: 9px;
    line-height: 1.35;
}


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

.acao-parcial .acao-icone {
    background: var(--finance-light);
    color: var(--finance);
}

.acao-parcial:hover {
    border-color: #a7f3d0;
    background: #f8fffc;
}

.acao-total .acao-icone {
    background: var(--success-light);
    color: var(--success);
}

.acao-total:hover {
    border-color: #bbf7d0;
    background: #f9fffa;
}

.acao-trocar .acao-icone {
    background: var(--info-light);
    color: var(--info);
}

.acao-trocar:hover {
    border-color: #bfdbfe;
    background: #f8fbff;
}

.acao-imprimir .acao-icone {
    background: var(--purple-light);
    color: var(--purple);
}

.acao-imprimir:hover {
    border-color: #ddd6fe;
    background: #fbfaff;
}


/* =========================================================
   MODO EDIÇÃO
   ========================================================= */

.linha-edicao {
    background: #fafbff;
}

.linha-edicao td {
    padding-top: 12px;
    padding-bottom: 12px;
}

.campo-qtd {
    width: 80px;
}

.campo-observacao {
    margin-top: 8px;
}

.campo-produto-edicao {
    position: relative;
}

.acoes-edicao {
    display: flex;
    align-items: center;

    gap: 6px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    padding: 0 10px;

    border-radius: 8px;

    font-size: 10px;
    font-weight: 750;

    cursor: pointer;

    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-success {
    border: 1px solid #bbf7d0;

    background: var(--success-light);

    color: var(--success);
}

.btn-success:hover {
    background: #dcfce7;
}

.btn-cancelar {
    border: 1px solid #fecaca;

    background: var(--danger-light);

    color: var(--danger);
}

.btn-cancelar:hover {
    background: #fee2e2;
}

.celula-vazia {
    color: var(--text-muted);

    text-align: center;
}


/* =========================================================
   ANIMAÇÕES
   ========================================================= */

.page-header-comanda {
    animation: fadeUp 0.45s ease both;
}

.comanda-resumo {
    animation: fadeUp 0.45s 0.08s ease both;
}

.comanda-layout {
    animation: fadeUp 0.45s 0.13s ease both;
}

.comanda-itens-card {
    animation: fadeUp 0.45s 0.16s ease both;
}

.adicionar-item-card {
    animation: fadeUp 0.45s 0.20s ease both;
}

.acoes-conta-card {
    animation: fadeUp 0.45s 0.24s ease both;
}


/* =========================================================
   FOCO / ACESSIBILIDADE
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(79, 70, 229, 0.25);
    outline-offset: 3px;
}


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

@media (max-width: 1100px) {

    .comanda-layout {
        grid-template-columns:
            minmax(0, 1fr)
            310px;
    }

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

}


@media (max-width: 900px) {

    .page-header-comanda {
        align-items: flex-start;

        flex-direction: column;
    }

    .page-header-comanda .nav-links {
        width: 100%;
    }

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

    .adicionar-item-card {
        position: static;
    }

}


@media (max-width: 700px) {

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

        gap: 10px;
    }

    .resumo-item {
        min-height: 90px;

        padding: 15px;
    }

    .resumo-item strong {
        font-size: 21px;
    }

    .resumo-label {
        font-size: 9px;
    }

    .acoes-conta-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .page-header-comanda {
        margin-top: 0;

        padding: 26px 22px;

        border-radius: 18px;
    }

    .page-header-comanda h2 {
        font-size: 25px;
    }

    .page-header-comanda .nav-links {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header-comanda .nav-voltar {
        justify-content: center;

        width: 100%;
    }

    .comanda-resumo {
        grid-template-columns: 1fr;
    }

    .resumo-item {
        min-height: 82px;
    }

    .card-section-header {
        padding: 20px;
    }

    .adicionar-item-card {
        padding: 20px;
    }

    .comanda-total {
        padding: 17px 20px;
    }

    .acoes-conta-grid {
        padding: 0 20px 20px;
    }

}


@media (max-width: 500px) {

    .mesa-info-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .card-section-header {
        align-items: flex-start;
    }

    .badge-contagem {
        margin-left: auto;
    }

    .tabela-comanda {
        min-width: 650px;
    }

    .comanda-table-wrapper {
        overflow-x: auto;

        scrollbar-width: thin;
    }

    .comanda-total {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }

    .acoes-tabela {
        justify-content: flex-start;

        flex-direction: column;
        align-items: stretch;
    }

    .btn-acao {
        width: 100%;
    }

}


@media (max-width: 430px) {

    .page-header-comanda {
        padding: 23px 18px;
    }

    .page-header-comanda h2 {
        font-size: 23px;
    }

    .page-brand {
        font-size: 9px;
    }

    .card-section-header h3 {
        font-size: 16px;
    }

    .comanda-vazia {
        min-height: 250px;

        padding: 25px 20px;
    }

    .adicionar-item-card {
        padding: 18px;
    }

    .acoes-conta-grid {
        padding: 0 18px 18px;
    }

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

}

/* =========================================================
   BAIXA PARCIAL
   Layout seguindo o padrão visual do Dashboard
   ========================================================= */


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

.baixa-header {
    position: relative;

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

    gap: 30px;

    margin-bottom: 28px;
    padding: 30px 34px;

    overflow: hidden;

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

    background:
        linear-gradient(
            135deg,
            #111827 0%,
            #1e293b 55%,
            #312e81 100%
        );

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

    animation: fadeUp 0.45s ease both;
}

.baixa-header::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -90px;
    top: -150px;

    border-radius: 50%;

    background: rgba(99, 102, 241, 0.20);

    filter: blur(5px);

    pointer-events: none;
}

.baixa-header::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: 28%;
    bottom: -140px;

    border-radius: 50%;

    background: rgba(59, 130, 246, 0.10);

    pointer-events: none;
}

.baixa-header-info {
    position: relative;
    z-index: 2;

    min-width: 0;
}

.baixa-header-info .page-brand {
    display: inline-flex;
    align-items: center;

    margin-bottom: 9px;

    color: #a5b4fc;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.baixa-header-info h2 {
    color: #ffffff;

    font-size: clamp(26px, 3vw, 34px);
    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.8px;
}

.baixa-mesa-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 10px;

    color: #cbd5e1;

    font-size: 13px;
    font-weight: 600;
}

.baixa-mesa-info span {
    color: #94a3b8;
}


/* =========================================================
   BOTÃO VOLTAR
   ========================================================= */

.baixa-header .nav-voltar {
    position: relative;
    z-index: 3;

    flex-shrink: 0;

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

    min-height: 43px;

    padding: 0 15px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;

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

    color: #e2e8f0;

    font-size: 12px;
    font-weight: 700;

    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition),
        color var(--transition);
}

.baixa-header .nav-voltar:hover {
    transform: translateY(-2px);

    border-color: rgba(255, 255, 255, 0.25);

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

    color: #ffffff;
}


/* =========================================================
   RESUMO DA CONTA
   ========================================================= */

.baixa-resumo {
    display: grid;

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

    gap: 16px;

    margin-bottom: 22px;

    animation: fadeUp 0.45s 0.08s ease both;
}

.baixa-resumo-item {
    position: relative;

    min-height: 105px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 20px 22px;

    overflow: hidden;

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

    background: var(--card);

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

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.baixa-resumo-item:hover {
    transform: translateY(-3px);

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

    border-color: rgba(79, 70, 229, 0.18);
}

.baixa-resumo-item::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    top: -55px;
    right: -35px;

    border-radius: 50%;

    background: var(--primary-light);

    opacity: 0.7;

    pointer-events: none;
}

.baixa-resumo-label {
    position: relative;
    z-index: 2;

    margin-bottom: 4px;

    color: var(--text-muted);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.baixa-resumo-item strong {
    position: relative;
    z-index: 2;

    color: var(--text);

    font-size: 26px;
    font-weight: 800;

    line-height: 1.1;
}

.baixa-resumo-total {
    border-color: rgba(5, 150, 105, 0.16);
}

.baixa-resumo-total::after {
    background: var(--finance-light);
}

.baixa-resumo-total strong {
    color: var(--finance);
}


/* =========================================================
   GRID PRINCIPAL
   ========================================================= */

.baixa-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(330px, 0.9fr);

    gap: 20px;

    align-items: start;
}


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

.baixa-card {
    min-width: 0;

    overflow: hidden;

    padding: 0;

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

    background: var(--card);

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

    animation: fadeUp 0.45s ease both;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.baixa-card:hover {
    box-shadow: var(--shadow-md);

    border-color: rgba(99, 102, 241, 0.15);
}

.baixa-grid > .baixa-card:first-child {
    animation-delay: 0.12s;
}

.baixa-grid > .baixa-card:last-child {
    animation-delay: 0.17s;
}


/* =========================================================
   CABEÇALHO DO CARD
   ========================================================= */

.baixa-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding: 24px 25px 20px;

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

.baixa-card-header .section-kicker {
    margin-bottom: 5px;
}

.baixa-card-header h3 {
    color: var(--text);

    font-size: 18px;
    font-weight: 750;

    letter-spacing: -0.3px;
}

.baixa-card-header p {
    margin-top: 6px;

    color: var(--text-secondary);

    font-size: 12px;
}


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

.baixa-table-wrapper {
    width: 100%;

    overflow-x: auto;
    overflow-y: visible;
}

.baixa-table {
    width: 100%;

    border-collapse: collapse;

    min-width: 680px;
}

.baixa-table thead {
    background: #f8fafc;
}

.baixa-table th {
    padding: 12px 15px;

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

    color: var(--text-muted);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.7px;
    text-transform: uppercase;

    text-align: left;

    white-space: nowrap;
}

.baixa-table td {
    padding: 15px;

    border-bottom: 1px solid #f1f5f9;

    color: var(--text-secondary);

    font-size: 12px;

    vertical-align: middle;
}

.baixa-table tbody tr {
    transition:
        background var(--transition);
}

.baixa-table tbody tr:hover {
    background: #fafbff;
}

.baixa-table tbody tr:last-child td {
    border-bottom: none;
}


/* =========================================================
   COLUNAS
   ========================================================= */

.baixa-table .col-selecao {
    width: 55px;

    text-align: center;
}

.baixa-table .col-qtd {
    width: 100px;

    text-align: center;
}

.baixa-table .col-preco {
    width: 120px;

    text-align: right;
}

.baixa-table .col-preco strong {
    color: var(--text);

    font-size: 12px;
    font-weight: 800;
}


/* =========================================================
   CHECKBOX
   ========================================================= */

.checkbox-custom {
    position: relative;

    width: 20px;
    height: 20px;

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

    cursor: pointer;
}

.checkbox-custom input {
    position: absolute;

    opacity: 0;

    width: 0;
    height: 0;
}

.checkbox-custom span {
    width: 19px;
    height: 19px;

    display: block;

    border: 1.5px solid #cbd5e1;
    border-radius: 6px;

    background: #ffffff;

    transition:
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.checkbox-custom input:checked + span {
    border-color: var(--primary);

    background: var(--primary);

    box-shadow: 0 3px 8px rgba(79, 70, 229, 0.22);
}

.checkbox-custom input:checked + span::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 9px;

    top: 3px;
    left: 7px;

    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;

    transform: rotate(45deg);
}

.checkbox-custom:hover span {
    border-color: var(--primary);
}


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

.produto-baixa {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.produto-baixa strong {
    color: var(--text);

    font-size: 13px;
    font-weight: 750;
}

.produto-observacao {
    display: flex;
    align-items: flex-start;
    gap: 5px;

    color: var(--text-muted);

    font-size: 10px;

    line-height: 1.4;
}

.produto-observacao span {
    color: var(--primary);

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
}


/* =========================================================
   QUANTIDADE
   ========================================================= */

.qtd-disponivel {
    min-width: 30px;

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

    padding: 5px 8px;

    border-radius: 7px;

    background: #f1f5f9;

    color: var(--text-secondary);

    font-size: 11px;
    font-weight: 800;
}

.qtd-baixa {
    width: 70px;

    min-height: 38px;

    padding: 0 9px;

    text-align: center;
}


/* =========================================================
   INPUTS
   ========================================================= */

.form-control {
    width: 100%;

    min-height: 43px;

    padding: 0 12px;

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

    outline: none;

    background: #ffffff;

    color: var(--text);

    font-size: 12px;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.form-control:hover {
    border-color: #cbd5e1;
}

.form-control:focus {
    border-color: var(--primary);

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(79, 70, 229, 0.10);
}


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

.baixa-total-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin: 0 20px 20px;

    padding: 17px 18px;

    border: 1px solid #dbeafe;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 100%
        );
}

.baixa-total-box span {
    display: block;

    color: var(--text);

    font-size: 12px;
    font-weight: 750;
}

.baixa-total-box small {
    display: block;

    margin-top: 2px;

    color: var(--text-muted);

    font-size: 10px;
}

.baixa-total-box strong {
    color: var(--info);

    font-size: 21px;
    font-weight: 800;

    white-space: nowrap;
}


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

.pagamentos-opcoes {
    display: flex;
    flex-direction: column;

    gap: 9px;

    padding: 20px 22px;
}

.pagamento-opcao {
    position: relative;

    display: flex;
    align-items: center;

    gap: 12px;

    min-height: 66px;

    padding: 12px 14px;

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

    background: #ffffff;

    cursor: pointer;

    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.pagamento-opcao:hover {
    transform: translateX(2px);

    border-color: #c7d2fe;

    background: #fafaff;

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

.pagamento-opcao input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.pagamento-radio {
    position: relative;

    width: 19px;
    height: 19px;

    flex-shrink: 0;

    border: 1.5px solid #cbd5e1;
    border-radius: 50%;

    background: #ffffff;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.pagamento-opcao input:checked ~ .pagamento-radio {
    border-color: var(--primary);

    box-shadow:
        inset 0 0 0 5px #ffffff;

    background: var(--primary);
}

.pagamento-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

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

    border-radius: 10px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 16px;
}

.pagamento-info {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.pagamento-info strong {
    color: var(--text);

    font-size: 12px;
    font-weight: 750;
}

.pagamento-info small {
    color: var(--text-muted);

    font-size: 10px;
}


/* =========================================================
   DINHEIRO
   ========================================================= */

.dinheiro-box {
    margin: -2px 22px 8px;

    padding: 16px;

    border: 1px solid #bbf7d0;
    border-radius: 11px;

    background: var(--success-light);

    animation: fadeUp 0.2s ease both;
}

.dinheiro-box > label {
    display: block;

    margin-bottom: 7px;

    color: var(--text-secondary);

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.dinheiro-input-wrapper {
    position: relative;
}

.dinheiro-input-wrapper > span {
    position: absolute;

    left: 12px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--text-secondary);

    font-size: 12px;
    font-weight: 700;

    pointer-events: none;
}

.dinheiro-input-wrapper .form-control {
    padding-left: 38px;

    background: #ffffff;
}

.troco-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-top: 10px;
    padding-top: 10px;

    border-top: 1px solid rgba(22, 163, 74, 0.15);
}

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

    font-size: 11px;
    font-weight: 700;
}

.troco-box strong {
    color: var(--success);

    font-size: 15px;
    font-weight: 800;
}


/* =========================================================
   TOTAL FINAL DO PAGAMENTO
   ========================================================= */

.pagamento-total-final {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin: 4px 22px 18px;
    padding: 18px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #f5f3ff 0%,
            #eef2ff 100%
        );
}

.pagamento-total-final span {
    color: var(--text-secondary);

    font-size: 12px;
    font-weight: 700;
}

.pagamento-total-final strong {
    color: var(--primary);

    font-size: 24px;
    font-weight: 850;

    white-space: nowrap;
}


/* =========================================================
   BOTÃO FINALIZAR
   ========================================================= */

.btn-baixa-finalizar {
    width: calc(100% - 44px);

    min-height: 48px;

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

    gap: 9px;

    margin: 0 22px 22px;

    padding: 0 18px;

    border: none;
    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #16a34a 0%,
            #15803d 100%
        );

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 8px 18px rgba(22, 163, 74, 0.20);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        filter var(--transition);
}

.btn-baixa-finalizar:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(22, 163, 74, 0.26);

    filter: brightness(1.03);
}

.btn-baixa-finalizar:active {
    transform: translateY(0);
}

.btn-baixa-finalizar span {
    font-size: 15px;
}


/* =========================================================
   ESTADO VAZIO
   ========================================================= */

.baixa-empty {
    padding: 55px 25px !important;

    text-align: center;
}

.baixa-empty-icon {
    width: 50px;
    height: 50px;

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

    margin: 0 auto 12px;

    border-radius: 14px;

    background: var(--primary-light);

    font-size: 20px;
}

.baixa-empty strong {
    display: block;

    color: var(--text);

    font-size: 13px;
}

.baixa-empty span {
    display: block;

    margin-top: 4px;

    color: var(--text-muted);

    font-size: 11px;
}


/* =========================================================
   ANIMAÇÕES
   ========================================================= */

.baixa-header {
    animation: fadeUp 0.45s ease both;
}

.baixa-resumo {
    animation: fadeUp 0.45s 0.08s ease both;
}

.baixa-card {
    animation: fadeUp 0.45s ease both;
}


/* =========================================================
   FOCO / ACESSIBILIDADE
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
label:focus-visible {
    outline: 3px solid rgba(79, 70, 229, 0.22);
    outline-offset: 3px;
}


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

@media (max-width: 1050px) {

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

    .pagamento-card {
        width: 100%;
    }

}


@media (max-width: 800px) {

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

    .baixa-resumo-total {
        grid-column: span 2;
    }

    .baixa-header {
        align-items: flex-start;

        flex-direction: column;

        padding: 27px 25px;
    }

    .baixa-header .nav-voltar {
        width: 100%;
    }

}


@media (max-width: 650px) {

    .container {
        width: min(100% - 28px, 1400px);
    }

    .baixa-header {
        margin-top: 18px;

        border-radius: 18px;

        padding: 25px 21px;
    }

    .baixa-header-info h2 {
        font-size: 28px;
    }

    .baixa-resumo {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .baixa-resumo-total {
        grid-column: auto;
    }

    .baixa-resumo-item {
        min-height: 90px;
    }

    .baixa-card-header {
        padding: 21px 19px 18px;
    }

    .baixa-total-box {
        align-items: flex-start;

        flex-direction: column;

        gap: 8px;

        margin: 0 15px 15px;

        padding: 15px;
    }

    .pagamentos-opcoes {
        padding: 16px;
    }

    .dinheiro-box {
        margin-left: 16px;
        margin-right: 16px;
    }

    .pagamento-total-final {
        margin-left: 16px;
        margin-right: 16px;
    }

    .btn-baixa-finalizar {
        width: calc(100% - 32px);

        margin-left: 16px;
        margin-right: 16px;
    }

}


@media (max-width: 430px) {

    .baixa-header {
        padding: 23px 18px;
    }

    .baixa-header-info .page-brand {
        font-size: 10px;
    }

    .baixa-header-info h2 {
        font-size: 25px;
    }

    .baixa-mesa-info {
        font-size: 11px;
    }

    .baixa-resumo-item {
        padding: 17px 18px;
    }

    .baixa-resumo-item strong {
        font-size: 23px;
    }

    .baixa-table {
        min-width: 650px;
    }

    .baixa-card-header h3 {
        font-size: 17px;
    }

    .pagamento-opcao {
        min-height: 62px;

        padding: 10px 11px;
    }

    .pagamento-icon {
        width: 35px;
        height: 35px;
    }

    .pagamento-total-final strong {
        font-size: 21px;
    }

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */

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

    .baixa-header,
    .baixa-resumo,
    .baixa-card,
    .dinheiro-box {
        animation: none !important;
    }

}

/* =========================================================
   VALORIUM SISTEMAS
   FECHAR_CONTA.PHP
   Fechamento da Conta
   ========================================================= */


/* =========================================================
   CABEÇALHO DE FECHAMENTO
   ========================================================= */

.fechamento-header {
    position: relative;

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

    gap: 30px;

    margin-bottom: 28px;
    padding: 26px 30px;

    overflow: hidden;

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

    background:
        linear-gradient(
            135deg,
            #111827 0%,
            #1e293b 58%,
            #312e81 100%
        );

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

    animation: fechamentoFadeUp 0.45s ease both;
}

.fechamento-header::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    top: -150px;
    right: -70px;

    border-radius: 50%;

    background: rgba(99, 102, 241, 0.20);

    filter: blur(4px);

    pointer-events: none;
}

.fechamento-header::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: 28%;
    bottom: -140px;

    border-radius: 50%;

    background: rgba(59, 130, 246, 0.10);

    pointer-events: none;
}

.fechamento-titulo-area {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 16px;

    min-width: 0;
}

.icone-fechamento {
    width: 54px;
    height: 54px;

    flex-shrink: 0;

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

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 15px;

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

    color: #86efac;

    font-size: 22px;
    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.12);

    transition:
        transform var(--transition),
        background var(--transition);
}

.fechamento-header:hover .icone-fechamento {
    transform: scale(1.05);

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

.fechamento-titulo-area h2 {
    color: #ffffff;

    font-size: clamp(24px, 3vw, 32px);

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.8px;
}

.fechamento-subtitulo {
    margin-top: 7px;

    color: #cbd5e1;

    font-size: 12px;
    font-weight: 600;
}

.btn-voltar-fechamento {
    position: relative;
    z-index: 3;

    flex-shrink: 0;

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

    min-height: 42px;

    padding: 0 15px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;

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

    color: #e2e8f0;

    font-size: 12px;
    font-weight: 700;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition);
}

.btn-voltar-fechamento:hover {
    transform: translateX(-2px);

    border-color: rgba(255, 255, 255, 0.22);

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

    color: #ffffff;
}


/* =========================================================
   GRID PRINCIPAL
   ========================================================= */

.fechamento-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(360px, 0.75fr);

    align-items: start;

    gap: 22px;

    animation: fechamentoFadeUp 0.45s 0.08s ease both;
}


/* =========================================================
   CARD DE FECHAMENTO
   ========================================================= */

.card-fechamento {
    min-width: 0;

    overflow: hidden;

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

    background: var(--card);

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

    transition:
        box-shadow var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.card-fechamento:hover {
    border-color: rgba(79, 70, 229, 0.16);

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

.card-fechamento-header {
    position: relative;

    padding: 24px 25px 20px;

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

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafbff 100%
        );
}

.card-fechamento-header::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: var(--primary);
}

.card-fechamento-header h3 {
    color: var(--text);

    font-size: 18px;
    font-weight: 750;

    letter-spacing: -0.3px;
}

.card-fechamento-header p {
    margin-top: 6px;

    color: var(--text-secondary);

    font-size: 12px;
}

.card-fechamento-body {
    padding: 23px 25px 25px;
}


/* =========================================================
   RESUMO DA CONTA
   ========================================================= */

.resumo-conta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
    padding: 16px 17px;

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

    background: #f8fafc;
}

.resumo-conta-direita {
    text-align: right;
}

.resumo-label {
    color: var(--text-muted);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.resumo-valor {
    margin-top: 3px;

    color: var(--text);

    font-size: 15px;
    font-weight: 800;
}


/* =========================================================
   TABELA DE FECHAMENTO
   ========================================================= */

.tabela-fechamento-wrapper {
    width: 100%;

    overflow-x: auto;

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

    background: #ffffff;
}

.tabela-fechamento {
    width: 100%;

    border-collapse: collapse;

    min-width: 480px;
}

.tabela-fechamento thead {
    background: #f8fafc;
}

.tabela-fechamento th {
    padding: 12px 14px;

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

    color: var(--text-muted);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.8px;

    text-align: left;

    text-transform: uppercase;
}

.tabela-fechamento td {
    padding: 14px;

    border-bottom: 1px solid #f1f5f9;

    color: var(--text-secondary);

    font-size: 12px;

    vertical-align: middle;
}

.tabela-fechamento tbody tr:last-child td {
    border-bottom: none;
}

.tabela-fechamento tbody tr {
    transition:
        background var(--transition);
}

.tabela-fechamento tbody tr:hover {
    background: #fafbff;
}

.tabela-fechamento th:first-child,
.tabela-fechamento td:first-child {
    width: 70px;
}

.tabela-fechamento .coluna-subtotal {
    width: 135px;

    text-align: right;
}


/* =========================================================
   QUANTIDADE
   ========================================================= */

.quantidade-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 38px;

    padding: 5px 8px;

    border-radius: 7px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 10px;
    font-weight: 800;
}


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

.produto-nome {
    color: var(--text);

    font-size: 13px;
    font-weight: 750;
}

.produto-obs {
    margin-top: 4px;

    color: var(--text-muted);

    font-size: 10px;
    font-style: italic;
}

.subtotal-item {
    color: var(--text);

    font-size: 12px;
    font-weight: 800;
}


/* =========================================================
   TOTAL DA CONTA
   ========================================================= */

.total-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 20px;
    padding: 20px 21px;

    border: 1px solid #c7d2fe;
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #eef2ff 0%,
            #f8faff 100%
        );

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

.total-box-label {
    color: var(--primary);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1px;
}

.total-box-valor {
    color: var(--text);

    font-size: 25px;
    font-weight: 850;

    letter-spacing: -0.7px;
}


/* =========================================================
   OPÇÕES DE PAGAMENTO
   ========================================================= */

.pagamento-opcoes {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.pagamento-item {
    position: relative;
}

.pagamento-item input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.pagamento-label {
    display: flex;
    align-items: center;

    gap: 13px;

    min-height: 66px;

    padding: 11px 13px;

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

    background: #ffffff;

    cursor: pointer;

    transition:
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.pagamento-label:hover {
    transform: translateY(-1px);

    border-color: #c7d2fe;

    background: #fafbff;

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

.pagamento-item input:checked + .pagamento-label {
    border-color: rgba(79, 70, 229, 0.38);

    background: var(--primary-light);

    box-shadow:
        0 0 0 3px rgba(79, 70, 229, 0.07);
}


/* =========================================================
   ÍCONE DO PAGAMENTO
   ========================================================= */

.icone-pagamento {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

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

    border-radius: 11px;

    background: #f1f5f9;

    color: var(--text-secondary);

    font-size: 11px;
    font-weight: 900;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}

.pagamento-item input:checked + .pagamento-label .icone-pagamento {
    background: #ffffff;

    color: var(--primary);

    transform: scale(1.05);
}


/* =========================================================
   TEXTO DO PAGAMENTO
   ========================================================= */

.pagamento-texto {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.pagamento-nome {
    color: var(--text);

    font-size: 13px;
    font-weight: 750;
}

.pagamento-descricao {
    color: var(--text-muted);

    font-size: 10px;
    font-weight: 500;
}


/* =========================================================
   INDICADOR DE SELEÇÃO
   ========================================================= */

.pagamento-label::after {
    content: "";

    width: 16px;
    height: 16px;

    flex-shrink: 0;

    margin-left: auto;

    border: 2px solid #cbd5e1;
    border-radius: 50%;

    background: #ffffff;

    transition:
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.pagamento-item input:checked + .pagamento-label::after {
    border-color: var(--primary);

    background:
        radial-gradient(
            circle,
            var(--primary) 0 4px,
            #ffffff 4.5px
        );

    box-shadow:
        0 0 0 3px rgba(79, 70, 229, 0.10);
}


/* =========================================================
   CAMPO DINHEIRO
   ========================================================= */

.container-dinheiro {
    margin-top: 3px;
    margin-bottom: 2px;

    padding: 17px;

    border: 1px solid #dbeafe;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #eff6ff 100%
        );

    animation: dinheiroIn 0.2s ease both;
}

@keyframes dinheiroIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dinheiro-label {
    display: block;

    margin-bottom: 7px;

    color: var(--text-secondary);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.5px;
}

.container-dinheiro .form-control {
    width: 100%;

    min-height: 44px;

    padding: 0 13px;

    border: 1px solid #cbd5e1;
    border-radius: 9px;

    outline: none;

    background: #ffffff;

    color: var(--text);

    font-size: 14px;
    font-weight: 700;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.container-dinheiro .form-control:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(79, 70, 229, 0.10);
}

.container-dinheiro .form-control::placeholder {
    color: #cbd5e1;
}


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

.troco-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 12px;
    padding: 12px 13px;

    border: 1px solid #dcfce7;
    border-radius: 9px;

    background: var(--success-light);
}

.troco-box strong {
    color: var(--text-secondary);

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.6px;
}

.troco-box span {
    color: var(--success);

    font-size: 15px;
    font-weight: 850;
}


/* =========================================================
   BOTÃO DE CONCLUSÃO
   ========================================================= */

.btn-concluir-fechamento {
    width: 100%;

    min-height: 50px;

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

    gap: 9px;

    margin-top: 22px;

    padding: 0 18px;

    border: 0;
    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #16a34a 0%,
            #15803d 100%
        );

    color: #ffffff;

    cursor: pointer;

    font-size: 12px;
    font-weight: 800;

    box-shadow:
        0 8px 18px rgba(22, 163, 74, 0.18);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        filter var(--transition);
}

.btn-concluir-fechamento:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 24px rgba(22, 163, 74, 0.24);

    filter: brightness(1.03);
}

.btn-concluir-fechamento:active {
    transform: translateY(0) scale(0.99);
}

.btn-concluir-fechamento span {
    font-size: 15px;
}


/* =========================================================
   AVISO
   ========================================================= */

.aviso-fechamento {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-top: 14px;
    padding: 12px 13px;

    border: 1px solid #fed7aa;
    border-radius: 10px;

    background: var(--fiscal-light);

    color: #9a3412;

    font-size: 10px;
    line-height: 1.55;
}

.aviso-icone {
    width: 20px;
    height: 20px;

    flex-shrink: 0;

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

    border-radius: 50%;

    background: #ffedd5;

    color: var(--fiscal);

    font-size: 11px;
    font-weight: 900;
}


/* =========================================================
   FOCO / ACESSIBILIDADE
   ========================================================= */

.btn-voltar-fechamento:focus-visible,
.pagamento-label:focus-visible,
.btn-concluir-fechamento:focus-visible,
.form-control:focus-visible {
    outline: 3px solid rgba(79, 70, 229, 0.22);

    outline-offset: 3px;
}


/* =========================================================
   ANIMAÇÕES
   ========================================================= */

@keyframes fechamentoFadeUp {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


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

@media (max-width: 1050px) {

    .fechamento-grid {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(320px, 0.8fr);
    }

}


@media (max-width: 850px) {

    .fechamento-header {
        align-items: flex-start;
        flex-direction: column;

        padding: 25px;
    }

    .btn-voltar-fechamento {
        width: 100%;
    }

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

}


@media (max-width: 650px) {

    .fechamento-header {
        margin-top: 8px;

        border-radius: 18px;

        padding: 22px 20px;
    }

    .fechamento-titulo-area {
        align-items: flex-start;
    }

    .icone-fechamento {
        width: 48px;
        height: 48px;

        border-radius: 13px;

        font-size: 19px;
    }

    .fechamento-titulo-area h2 {
        font-size: 25px;
    }

    .fechamento-subtitulo {
        font-size: 11px;
        line-height: 1.5;
    }

    .card-fechamento-header {
        padding: 21px 20px 18px;
    }

    .card-fechamento-body {
        padding: 20px;
    }

    .resumo-conta {
        padding: 14px;
    }

    .total-box {
        align-items: flex-start;
        flex-direction: column;

        gap: 6px;

        padding: 17px;
    }

    .total-box-valor {
        font-size: 23px;
    }

}


@media (max-width: 430px) {

    .fechamento-header {
        padding: 20px 17px;
    }

    .fechamento-titulo-area {
        gap: 12px;
    }

    .icone-fechamento {
        width: 44px;
        height: 44px;

        font-size: 17px;
    }

    .fechamento-titulo-area h2 {
        font-size: 22px;
    }

    .fechamento-subtitulo {
        margin-top: 5px;

        font-size: 10px;
    }

    .card-fechamento-header {
        padding: 19px 17px 17px;
    }

    .card-fechamento-body {
        padding: 17px;
    }

    .resumo-conta {
        align-items: flex-start;
        flex-direction: column;

        gap: 12px;
    }

    .resumo-conta-direita {
        text-align: left;
    }

    .tabela-fechamento {
        min-width: 430px;
    }

    .tabela-fechamento th,
    .tabela-fechamento td {
        padding: 11px 10px;
    }

    .pagamento-label {
        min-height: 62px;

        padding: 10px;
    }

    .icone-pagamento {
        width: 37px;
        height: 37px;
    }

    .pagamento-nome {
        font-size: 12px;
    }

    .pagamento-descricao {
        font-size: 9px;
    }

    .btn-concluir-fechamento {
        min-height: 48px;

        font-size: 11px;
    }

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */

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

    .fechamento-header,
    .fechamento-grid,
    .container-dinheiro {
        animation: none !important;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }

}

/* =========================================================
   VALORIUM SISTEMAS
   FECHAR_MESA.PHP
   Transferência de Comanda / Troca de Mesa
   ========================================================= */


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

.page-header {
    position: relative;

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

    gap: 30px;

    margin-bottom: 24px;
    padding: 26px 30px;

    overflow: hidden;

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

    background:
        linear-gradient(
            135deg,
            #111827 0%,
            #1e293b 58%,
            #312e81 100%
        );

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

    animation: trocaMesaFadeUp 0.45s ease both;
}

.page-header::before {
    content: "";

    position: absolute;

    width: 270px;
    height: 270px;

    top: -155px;
    right: -70px;

    border-radius: 50%;

    background: rgba(99, 102, 241, 0.20);

    filter: blur(4px);

    pointer-events: none;
}

.page-header::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    right: 30%;
    bottom: -145px;

    border-radius: 50%;

    background: rgba(59, 130, 246, 0.10);

    pointer-events: none;
}

.page-header-content {
    position: relative;
    z-index: 2;

    min-width: 0;
}

.page-brand {
    display: inline-block;

    margin-bottom: 7px;

    color: #93c5fd;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;
    text-transform: uppercase;
}

.page-header-content h2 {
    color: #ffffff;

    font-size: clamp(24px, 3vw, 32px);

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.8px;
}

.page-subtitle {
    margin-top: 7px;

    color: #cbd5e1;

    font-size: 12px;
    font-weight: 600;
}

.nav-links {
    position: relative;
    z-index: 3;

    flex-shrink: 0;
}

.nav-voltar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 0 15px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;

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

    color: #e2e8f0;

    font-size: 12px;
    font-weight: 700;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition);
}

.nav-voltar:hover {
    transform: translateX(-2px);

    border-color: rgba(255, 255, 255, 0.22);

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

    color: #ffffff;
}


/* =========================================================
   AVISO DE TRANSFERÊNCIA
   ========================================================= */

.transferencia-info {
    position: relative;

    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 22px;
    padding: 16px 18px;

    border: 1px solid #c7d2fe;
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #eef2ff 0%,
            #f8faff 100%
        );

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

    animation: trocaMesaFadeUp 0.45s 0.05s ease both;
}

.transferencia-info-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

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

    border-radius: 11px;

    background: #ffffff;

    color: var(--primary);

    font-size: 21px;
    font-weight: 800;

    box-shadow:
        0 4px 12px rgba(79, 70, 229, 0.08);
}

.transferencia-info strong {
    display: block;

    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}

.transferencia-info span {
    display: block;

    margin-top: 3px;

    color: var(--text-secondary);

    font-size: 11px;
    line-height: 1.5;
}


/* =========================================================
   GRID PRINCIPAL
   ========================================================= */

.troca-mesa-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(350px, 0.75fr);

    align-items: start;

    gap: 22px;

    animation: trocaMesaFadeUp 0.45s 0.08s ease both;
}


/* =========================================================
   CARDS
   ========================================================= */

.card-form {
    min-width: 0;

    overflow: hidden;

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

    background: var(--card);

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

    transition:
        box-shadow var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.card-form:hover {
    border-color: rgba(79, 70, 229, 0.16);

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


/* =========================================================
   CABEÇALHO DOS CARDS
   ========================================================= */

.card-section-header {
    position: relative;

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

    gap: 18px;

    padding: 22px 24px 19px;

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

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafbff 100%
        );
}

.card-section-header::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: var(--primary);
}

.section-kicker {
    display: block;

    margin-bottom: 5px;

    color: var(--primary);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.card-section-header h3 {
    color: var(--text);

    font-size: 18px;
    font-weight: 750;

    letter-spacing: -0.3px;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 28px;

    padding: 0 10px;

    border: 1px solid #c7d2fe;
    border-radius: 8px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}


/* =========================================================
   AVISO INTERNO
   ========================================================= */

.transferencia-aviso {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    margin: 20px 24px 17px;
    padding: 13px 14px;

    border: 1px solid #dbeafe;
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #eff6ff 100%
        );
}

.transferencia-aviso-icon {
    width: 22px;
    height: 22px;

    flex-shrink: 0;

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

    border-radius: 50%;

    background: #dbeafe;

    color: #2563eb;

    font-size: 11px;
    font-weight: 900;
}

.transferencia-aviso p {
    color: var(--text-secondary);

    font-size: 10px;
    line-height: 1.6;
}

.transferencia-aviso strong {
    color: var(--text);
    font-weight: 800;
}


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

.troca-mesa-itens .table-wrapper {
    width: auto;

    margin: 0 24px 24px;

    overflow-x: auto;

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

    background: #ffffff;
}

.tabela-transferencia {
    width: 100%;

    min-width: 570px;

    border-collapse: collapse;
}

.tabela-transferencia thead {
    background: #f8fafc;
}

.tabela-transferencia th {
    padding: 12px 13px;

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

    color: var(--text-muted);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.8px;

    text-align: left;

    text-transform: uppercase;
}

.tabela-transferencia td {
    padding: 14px 13px;

    border-bottom: 1px solid #f1f5f9;

    color: var(--text-secondary);

    font-size: 12px;

    vertical-align: middle;

    transition:
        background var(--transition),
        border-color var(--transition);
}

.tabela-transferencia tbody tr:last-child td {
    border-bottom: none;
}

.tabela-transferencia tbody tr {
    transition:
        background var(--transition);
}

.tabela-transferencia tbody tr:hover {
    background: #fafbff;
}

.tabela-transferencia .col-selecao {
    width: 55px;

    text-align: center;
}

.tabela-transferencia th:nth-child(2),
.tabela-transferencia td:nth-child(2) {
    width: 65px;
}

.tabela-transferencia th:last-child,
.tabela-transferencia td:last-child {
    width: 125px;

    text-align: right;
}


/* =========================================================
   LINHA SELECIONADA
   ========================================================= */

.tabela-transferencia tbody tr.item-selecionado {
    background:
        linear-gradient(
            90deg,
            #eef2ff 0%,
            #f8faff 100%
        );
}

.tabela-transferencia tbody tr.item-selecionado td {
    border-bottom-color: #e0e7ff;
}

.tabela-transferencia tbody tr.item-selecionado:hover {
    background:
        linear-gradient(
            90deg,
            #e5e7ff 0%,
            #f5f7ff 100%
        );
}


/* =========================================================
   CHECKBOX
   ========================================================= */

.checkbox-transferencia {
    position: relative;

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

    width: 22px;
    height: 22px;

    cursor: pointer;
}

.checkbox-transferencia input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}

.checkbox-custom {
    position: relative;

    width: 19px;
    height: 19px;

    display: block;

    border: 2px solid #cbd5e1;
    border-radius: 6px;

    background: #ffffff;

    transition:
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.checkbox-transferencia:hover .checkbox-custom {
    border-color: #a5b4fc;
}

.checkbox-transferencia input:checked + .checkbox-custom {
    border-color: var(--primary);

    background: var(--primary);

    box-shadow:
        0 0 0 3px rgba(79, 70, 229, 0.10);

    transform: scale(1.04);
}

.checkbox-transferencia input:checked + .checkbox-custom::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 9px;

    left: 5px;
    top: 2px;

    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;

    transform: rotate(45deg);
}

.checkbox-transferencia input:focus-visible + .checkbox-custom {
    outline: 3px solid rgba(79, 70, 229, 0.20);

    outline-offset: 3px;
}


/* =========================================================
   QUANTIDADE
   ========================================================= */

.quantidade-item {
    color: var(--primary);

    font-size: 11px;
    font-weight: 800;
}

.tabela-transferencia td.quantidade-item {
    white-space: nowrap;
}


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

.produto-transferencia {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.produto-transferencia strong {
    color: var(--text);

    font-size: 12px;
    font-weight: 750;
}

.produto-transferencia small {
    color: var(--text-muted);

    font-size: 10px;
    font-style: italic;

    line-height: 1.4;
}


/* =========================================================
   VALOR
   ========================================================= */

.valor-item {
    color: var(--text) !important;

    font-size: 12px !important;
    font-weight: 800;

    white-space: nowrap;
}


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

.tabela-vazia {
    padding: 35px 20px !important;

    color: var(--text-muted) !important;

    text-align: center !important;

    font-size: 11px !important;
}


/* =========================================================
   CARD DE DESTINO
   ========================================================= */

.troca-mesa-destino {
    overflow: visible;
}

.troca-mesa-destino .card-section-header {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.destino-icon {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

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

    border-radius: 11px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 20px;
    font-weight: 800;

    transition:
        transform var(--transition),
        background var(--transition);
}

.troca-mesa-destino:hover .destino-icon {
    transform: translateX(3px);

    background: #e0e7ff;
}


/* =========================================================
   RESUMO DA MESA DE ORIGEM
   ========================================================= */

.mesa-origem-resumo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin: 22px 24px 0;
    padding: 15px 16px;

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

    background: #f8fafc;
}

.mesa-origem-resumo span {
    color: var(--text-muted);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.6px;

    text-transform: uppercase;
}

.mesa-origem-resumo strong {
    color: var(--text);

    font-size: 14px;
    font-weight: 800;
}


/* =========================================================
   FORMULÁRIO DE DESTINO
   ========================================================= */

.mesa-destino-form {
    margin: 22px 24px 0;
}

.mesa-destino-form label {
    display: block;

    margin-bottom: 7px;

    color: var(--text-secondary);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.5px;
}

.input-mesa-wrapper {
    position: relative;

    display: flex;
    align-items: center;
}

.input-mesa-icon {
    position: absolute;

    left: 13px;

    z-index: 2;

    color: var(--text-muted);

    font-size: 14px;
    font-weight: 800;

    pointer-events: none;
}

.input-mesa-wrapper .form-control {
    width: 100%;

    min-height: 46px;

    padding: 0 13px 0 34px;

    border: 1px solid #cbd5e1;
    border-radius: 10px;

    outline: none;

    background: #ffffff;

    color: var(--text);

    font-size: 14px;
    font-weight: 700;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.input-mesa-wrapper .form-control:hover {
    border-color: #94a3b8;
}

.input-mesa-wrapper .form-control:focus {
    border-color: var(--primary);

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(79, 70, 229, 0.10);
}

.input-mesa-wrapper .form-control::placeholder {
    color: #cbd5e1;

    font-weight: 500;
}

.form-help {
    display: block;

    margin-top: 7px;

    color: var(--text-muted);

    font-size: 9px;
    line-height: 1.5;
}


/* =========================================================
   STATUS / SEGURANÇA
   ========================================================= */

.destino-status-info {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    margin: 20px 24px 0;
    padding: 13px 14px;

    border: 1px solid #dcfce7;
    border-radius: 10px;

    background: var(--success-light);
}

.status-info-icon {
    width: 22px;
    height: 22px;

    flex-shrink: 0;

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

    border-radius: 50%;

    background: #dcfce7;

    color: var(--success);

    font-size: 11px;
    font-weight: 900;
}

.destino-status-info strong {
    display: block;

    color: #166534;

    font-size: 11px;
    font-weight: 800;
}

.destino-status-info span {
    display: block;

    margin-top: 3px;

    color: #4d7c5a;

    font-size: 9px;

    line-height: 1.5;
}


/* =========================================================
   BOTÃO TRANSFERIR
   ========================================================= */

.btn-transferir {
    width: calc(100% - 48px);

    min-height: 50px;

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

    gap: 9px;

    margin: 22px 24px 0;

    padding: 0 18px;

    border: 0;
    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #4f46e5 0%,
            #4338ca 100%
        );

    color: #ffffff;

    cursor: pointer;

    font-size: 12px;
    font-weight: 800;

    box-shadow:
        0 8px 18px rgba(79, 70, 229, 0.18);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        filter var(--transition);
}

.btn-transferir:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 24px rgba(79, 70, 229, 0.25);

    filter: brightness(1.04);
}

.btn-transferir:active {
    transform: translateY(0) scale(0.99);
}

.btn-icon {
    font-size: 16px;
}


/* =========================================================
   BOTÃO CANCELAR
   ========================================================= */

.btn-cancelar-transferencia {
    width: calc(100% - 48px);

    min-height: 42px;

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

    margin: 10px 24px 24px;

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

    background: #ffffff;

    color: var(--text-secondary);

    font-size: 11px;
    font-weight: 700;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition);
}

.btn-cancelar-transferencia:hover {
    transform: translateY(-1px);

    border-color: #cbd5e1;

    background: #f8fafc;

    color: var(--text);
}


/* =========================================================
   FOCO / ACESSIBILIDADE
   ========================================================= */

.nav-voltar:focus-visible,
.btn-transferir:focus-visible,
.btn-cancelar-transferencia:focus-visible,
.form-control:focus-visible {
    outline: 3px solid rgba(79, 70, 229, 0.22);

    outline-offset: 3px;
}


/* =========================================================
   ANIMAÇÕES
   ========================================================= */

@keyframes trocaMesaFadeUp {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


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

@media (max-width: 1050px) {

    .troca-mesa-grid {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(320px, 0.8fr);
    }

}


@media (max-width: 850px) {

    .page-header {
        align-items: flex-start;

        flex-direction: column;

        padding: 25px;
    }

    .nav-links {
        width: 100%;
    }

    .nav-voltar {
        width: 100%;
    }

    .troca-mesa-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .page-header {
        margin-top: 8px;

        padding: 22px 20px;

        border-radius: 18px;
    }

    .page-header-content h2 {
        font-size: 25px;
    }

    .page-subtitle {
        font-size: 11px;

        line-height: 1.5;
    }

    .transferencia-info {
        align-items: flex-start;

        padding: 14px;
    }

    .transferencia-info-icon {
        width: 38px;
        height: 38px;

        font-size: 18px;
    }

    .card-section-header {
        padding: 21px 20px 18px;
    }

    .troca-mesa-itens .table-wrapper {
        margin: 0 20px 20px;
    }

    .transferencia-aviso {
        margin: 18px 20px 16px;
    }

    .mesa-origem-resumo {
        margin-left: 20px;
        margin-right: 20px;
    }

    .mesa-destino-form {
        margin-left: 20px;
        margin-right: 20px;
    }

    .destino-status-info {
        margin-left: 20px;
        margin-right: 20px;
    }

    .btn-transferir {
        width: calc(100% - 40px);

        margin-left: 20px;
        margin-right: 20px;
    }

    .btn-cancelar-transferencia {
        width: calc(100% - 40px);

        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 20px;
    }

}


@media (max-width: 430px) {

    .page-header {
        padding: 20px 17px;
    }

    .page-header-content h2 {
        font-size: 22px;
    }

    .page-brand {
        font-size: 9px;
    }

    .page-subtitle {
        margin-top: 5px;

        font-size: 10px;
    }

    .transferencia-info {
        gap: 10px;

        padding: 13px;
    }

    .transferencia-info-icon {
        width: 35px;
        height: 35px;

        font-size: 16px;
    }

    .transferencia-info strong {
        font-size: 11px;
    }

    .transferencia-info span {
        font-size: 9px;
    }

    .card-section-header {
        padding: 19px 17px 17px;
    }

    .card-section-header h3 {
        font-size: 16px;
    }

    .section-badge {
        min-height: 25px;

        padding: 0 8px;

        font-size: 9px;
    }

    .transferencia-aviso {
        margin: 17px 17px 15px;

        padding: 11px 12px;
    }

    .troca-mesa-itens .table-wrapper {
        margin: 0 17px 17px;
    }

    .tabela-transferencia {
        min-width: 520px;
    }

    .tabela-transferencia th,
    .tabela-transferencia td {
        padding: 11px 10px;
    }

    .produto-transferencia strong {
        font-size: 11px;
    }

    .produto-transferencia small {
        font-size: 9px;
    }

    .mesa-origem-resumo {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;

        margin: 17px 17px 0;

        padding: 13px;
    }

    .mesa-destino-form {
        margin: 18px 17px 0;
    }

    .destino-status-info {
        margin: 17px 17px 0;

        padding: 11px 12px;
    }

    .btn-transferir {
        width: calc(100% - 34px);

        margin: 18px 17px 0;

        min-height: 48px;

        font-size: 11px;
    }

    .btn-cancelar-transferencia {
        width: calc(100% - 34px);

        margin: 9px 17px 17px;
    }

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */

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

    .page-header,
    .transferencia-info,
    .troca-mesa-grid {
        animation: none !important;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }

}

/* =========================================================
   VALORIUM SISTEMAS
   NOTA_ENTRADA.PHP
   Importação de Nota Fiscal XML
   ========================================================= */


/* =========================================================
   PÁGINA
   ========================================================= */

.nota-entrada-page {
    max-width: 900px;
    margin: 0 auto;
}


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

.nota-entrada-header {
    margin-bottom: 25px;
}

.nota-entrada-header .page-header-content {
    min-width: 0;
}


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

.nota-alert {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-bottom: 20px;
    padding: 14px 16px;

    border-radius: 12px;

    font-size: 12px;

    animation: notaEntradaFadeUp 0.35s ease both;
}

.nota-alert > div {
    display: flex;
    flex-direction: column;

    gap: 3px;

    min-width: 0;
}

.nota-alert strong {
    font-size: 12px;
    font-weight: 800;
}

.nota-alert span:not(.nota-alert-icon) {
    line-height: 1.5;
}

.nota-alert-success {
    border: 1px solid #bbf7d0;

    background: #f0fdf4;

    color: #166534;
}

.nota-alert-error {
    border: 1px solid #fecaca;

    background: #fef2f2;

    color: #991b1b;
}

.nota-alert-icon {
    width: 25px;
    height: 25px;

    flex-shrink: 0;

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

    border-radius: 50%;

    font-size: 12px;
    font-weight: 900;
}

.nota-alert-success .nota-alert-icon {
    background: #dcfce7;

    color: #15803d;
}

.nota-alert-error .nota-alert-icon {
    background: #fee2e2;

    color: #dc2626;
}


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

.nota-entrada-card {
    overflow: hidden;

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

    background: var(--card);

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

    animation: notaEntradaFadeUp 0.45s 0.05s ease both;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.nota-entrada-card:hover {
    border-color: rgba(79, 70, 229, 0.16);

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


/* =========================================================
   CABEÇALHO DO CARD
   ========================================================= */

.nota-card-header {
    position: relative;

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

    gap: 20px;

    padding: 25px 27px 22px;

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

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafbff 100%
        );
}

.nota-card-header::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: var(--primary);
}

.nota-card-title {
    min-width: 0;
}

.nota-card-title h3 {
    margin-top: 5px;

    color: var(--text);

    font-size: 20px;
    font-weight: 800;

    letter-spacing: -0.4px;
}

.nota-card-title p {
    margin-top: 6px;

    color: var(--text-secondary);

    font-size: 12px;

    line-height: 1.5;
}

.nota-card-icon {
    width: 54px;
    height: 54px;

    flex-shrink: 0;

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

    border: 1px solid #c7d2fe;
    border-radius: 14px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 0.5px;

    box-shadow:
        0 6px 16px rgba(79, 70, 229, 0.08);
}


/* =========================================================
   CORPO
   ========================================================= */

.nota-card-body {
    padding: 25px 27px 27px;
}


/* =========================================================
   BOX INFORMATIVO
   ========================================================= */

.nota-info-box {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-bottom: 24px;
    padding: 15px 16px;

    border: 1px solid #dbeafe;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #eff6ff 100%
        );
}

.nota-info-icon {
    width: 27px;
    height: 27px;

    flex-shrink: 0;

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

    border-radius: 50%;

    background: #dbeafe;

    color: #2563eb;

    font-size: 12px;
    font-weight: 900;
}

.nota-info-box div {
    min-width: 0;
}

.nota-info-box strong {
    display: block;

    color: var(--text);

    font-size: 12px;
    font-weight: 800;
}

.nota-info-box p {
    margin-top: 4px;

    color: var(--text-secondary);

    font-size: 11px;

    line-height: 1.55;
}


/* =========================================================
   FORMULÁRIO
   ========================================================= */

.nota-upload-form {
    width: 100%;
}

.nota-upload-group {
    width: 100%;
}

.nota-upload-label {
    display: block;

    margin-bottom: 8px;

    color: var(--text);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.3px;
}


/* =========================================================
   ÁREA DE UPLOAD
   ========================================================= */

.nota-upload-area {
    position: relative;

    min-height: 205px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 7px;

    padding: 30px 20px;

    border: 2px dashed #cbd5e1;
    border-radius: 13px;

    background: #f8fafc;

    cursor: pointer;

    text-align: center;

    transition:
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.nota-upload-area:hover {
    border-color: #a5b4fc;

    background: #fafbff;

    box-shadow:
        0 6px 18px rgba(79, 70, 229, 0.06);
}

.nota-upload-area:focus-within {
    border-color: var(--primary);

    box-shadow:
        0 0 0 4px rgba(79, 70, 229, 0.08);
}

.nota-upload-area.arquivo-selecionado {
    border-color: #86efac;

    background: #f0fdf4;

    box-shadow:
        0 6px 18px rgba(22, 163, 74, 0.06);
}

.nota-upload-area input[type="file"] {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


/* =========================================================
   ÍCONE UPLOAD
   ========================================================= */

.nota-upload-icon {
    width: 50px;
    height: 50px;

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

    margin-bottom: 3px;

    border-radius: 14px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 23px;
    font-weight: 700;

    transition:
        transform var(--transition),
        background var(--transition);
}

.nota-upload-area:hover .nota-upload-icon {
    transform: translateY(-3px);
}

.nota-upload-area.arquivo-selecionado .nota-upload-icon {
    background: #dcfce7;

    color: #16a34a;
}


/* =========================================================
   TEXTO DO UPLOAD
   ========================================================= */

.nota-upload-title {
    color: var(--text);

    font-size: 14px;
    font-weight: 800;
}

.nota-upload-description {
    color: var(--text-secondary);

    font-size: 11px;
}

.nota-upload-format {
    margin-top: 4px;

    padding: 4px 8px;

    border-radius: 6px;

    background: #e2e8f0;

    color: var(--text-muted);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.5px;

    text-transform: uppercase;
}

.nota-upload-area.arquivo-selecionado .nota-upload-format {
    background: #dcfce7;

    color: #15803d;
}


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

.nota-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    margin-top: 20px;
}


/* =========================================================
   BOTÃO CANCELAR
   ========================================================= */

.nota-btn-cancelar {
    min-height: 44px;

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

    padding: 0 17px;

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

    background: #ffffff;

    color: var(--text-secondary);

    font-size: 11px;
    font-weight: 750;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition);
}

.nota-btn-cancelar:hover {
    transform: translateY(-1px);

    border-color: #cbd5e1;

    background: #f8fafc;

    color: var(--text);
}


/* =========================================================
   BOTÃO PROCESSAR
   ========================================================= */

.nota-btn-processar {
    min-height: 44px;

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

    gap: 8px;

    padding: 0 20px;

    border: 0;
    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #111827 0%,
            #1e293b 100%
        );

    color: #ffffff;

    cursor: pointer;

    font-size: 11px;
    font-weight: 800;

    box-shadow:
        0 7px 16px rgba(15, 23, 42, 0.14);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        filter var(--transition);
}

.nota-btn-processar:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 22px rgba(15, 23, 42, 0.20);

    filter: brightness(1.05);
}

.nota-btn-processar:active {
    transform: translateY(0) scale(0.99);
}

.nota-btn-processar span {
    font-size: 14px;
}


/* =========================================================
   RECURSOS / ETAPAS
   ========================================================= */

.nota-recursos {
    display: grid;

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

    gap: 12px;

    margin-top: 15px;

    animation: notaEntradaFadeUp 0.45s 0.12s ease both;
}

.nota-recurso {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    padding: 14px;

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

    background: var(--card);

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

.nota-recurso-icon {
    width: 27px;
    height: 27px;

    flex-shrink: 0;

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

    border-radius: 8px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 10px;
    font-weight: 900;
}

.nota-recurso div {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.nota-recurso strong {
    color: var(--text);

    font-size: 10px;
    font-weight: 800;
}

.nota-recurso span:not(.nota-recurso-icon) {
    color: var(--text-muted);

    font-size: 9px;

    line-height: 1.45;
}


/* =========================================================
   FOCO / ACESSIBILIDADE
   ========================================================= */

.nota-btn-cancelar:focus-visible,
.nota-btn-processar:focus-visible,
.nota-upload-area:focus-within {
    outline: 3px solid rgba(79, 70, 229, 0.20);

    outline-offset: 3px;
}


/* =========================================================
   ANIMAÇÃO
   ========================================================= */

@keyframes notaEntradaFadeUp {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


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

@media (max-width: 700px) {

    .nota-entrada-page {
        max-width: 100%;
    }

    .nota-card-header {
        align-items: flex-start;

        padding: 22px 21px 20px;
    }

    .nota-card-body {
        padding: 21px;
    }

    .nota-recursos {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 550px) {

    .nota-entrada-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .nota-entrada-header .nav-links {
        width: 100%;
    }

    .nota-entrada-header .nav-voltar {
        width: 100%;
    }

    .nota-card-header {
        gap: 14px;
    }

    .nota-card-icon {
        width: 46px;
        height: 46px;

        border-radius: 12px;

        font-size: 10px;
    }

    .nota-card-title h3 {
        font-size: 18px;
    }

    .nota-upload-area {
        min-height: 180px;

        padding: 25px 15px;
    }

    .nota-form-actions {
        flex-direction: column-reverse;
    }

    .nota-btn-cancelar,
    .nota-btn-processar {
        width: 100%;
    }

}


@media (max-width: 430px) {

    .nota-card-header {
        padding: 19px 17px 17px;
    }

    .nota-card-body {
        padding: 17px;
    }

    .nota-info-box {
        padding: 13px;
    }

    .nota-upload-icon {
        width: 45px;
        height: 45px;
    }

    .nota-upload-title {
        font-size: 13px;
    }

    .nota-upload-description {
        font-size: 10px;
    }

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */

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

    .nota-alert,
    .nota-entrada-card,
    .nota-recursos {
        animation: none !important;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }

}

/* =========================================================
   VALORIUM SISTEMAS
   PEDIDOS.PHP
   Gestão de Pedidos
   ========================================================= */


/* =========================================================
   PÁGINA
   ========================================================= */

.pedidos-page {
    animation: pedidosFadeUp 0.45s ease both;
}


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

.pedidos-header {
    position: relative;

    overflow: hidden;

    margin-bottom: 28px;
    padding: 26px 30px;

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

    background:
        linear-gradient(
            135deg,
            #111827 0%,
            #1e293b 58%,
            #312e81 100%
        );

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

    animation: pedidosFadeUp 0.45s ease both;
}

.pedidos-header::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    top: -170px;
    right: -80px;

    border-radius: 50%;

    background: rgba(99, 102, 241, 0.20);

    filter: blur(4px);

    pointer-events: none;
}

.pedidos-header::after {
    content: "";

    position: absolute;

    width: 200px;
    height: 200px;

    right: 30%;
    bottom: -155px;

    border-radius: 50%;

    background: rgba(59, 130, 246, 0.10);

    pointer-events: none;
}


/* =========================================================
   ÁREA SUPERIOR DO CABEÇALHO
   ========================================================= */

.pedidos-header-top {
    position: relative;
    z-index: 2;

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

    gap: 25px;
}

.pedidos-title-area {
    min-width: 0;
}

.pedidos-title-area .page-brand {
    display: inline-block;

    margin-bottom: 7px;

    color: #a5b4fc;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}

.pedidos-title-area h2 {
    color: #ffffff;

    font-size: clamp(24px, 3vw, 32px);

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.8px;
}

.pedidos-title-area .page-subtitle {
    margin-top: 8px;

    color: #cbd5e1;

    font-size: 12px;
    font-weight: 500;

    line-height: 1.5;
}


/* =========================================================
   BOTÃO ZERAR DIA
   ========================================================= */

.btn-danger-compact {
    position: relative;
    z-index: 3;

    flex-shrink: 0;

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

    gap: 8px;

    min-height: 42px;

    padding: 0 15px;

    border: 1px solid rgba(248, 113, 113, 0.25);
    border-radius: 10px;

    background: rgba(127, 29, 29, 0.45);

    color: #fecaca;

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.btn-danger-compact:hover {
    transform: translateY(-2px);

    border-color: rgba(248, 113, 113, 0.45);

    background: rgba(153, 27, 27, 0.60);

    color: #ffffff;

    box-shadow:
        0 8px 18px rgba(127, 29, 29, 0.20);
}

.btn-danger-compact:active {
    transform: translateY(0) scale(0.98);
}

.btn-danger-compact .btn-icon {
    font-size: 13px;
}


/* =========================================================
   NAVEGAÇÃO
   ========================================================= */

.pedidos-navigation {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 22px;
    padding-top: 18px;

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

.pedidos-navigation .nav-voltar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    padding: 0 11px;

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

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

    color: #cbd5e1;

    font-size: 10px;
    font-weight: 700;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition);
}

.pedidos-navigation .nav-voltar:hover {
    transform: translateY(-1px);

    border-color: rgba(255, 255, 255, 0.18);

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

    color: #ffffff;
}

.nav-separator {
    color: #64748b;

    font-size: 12px;
}


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

.pedidos-alert {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 22px;
    padding: 13px 15px;

    border-radius: 10px;

    font-size: 11px;
    font-weight: 600;

    line-height: 1.45;

    animation: pedidosFadeUp 0.35s ease both;
}

.pedidos-alert .alert-icon {
    width: 22px;
    height: 22px;

    flex-shrink: 0;

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

    border-radius: 50%;

    font-size: 11px;
    font-weight: 900;
}

.pedidos-alert.alert-sucesso {
    border: 1px solid #bbf7d0;

    background: #f0fdf4;

    color: #166534;
}

.pedidos-alert.alert-sucesso .alert-icon {
    background: #dcfce7;

    color: #15803d;
}

.pedidos-alert.alert-erro {
    border: 1px solid #fecaca;

    background: #fef2f2;

    color: #991b1b;
}

.pedidos-alert.alert-erro .alert-icon {
    background: #fee2e2;

    color: #dc2626;
}


/* =========================================================
   CABEÇALHO DA SEÇÃO
   ========================================================= */

.pedidos-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 15px;

    animation: pedidosFadeUp 0.45s 0.06s ease both;
}

.pedidos-section-heading .section-eyebrow {
    display: block;

    margin-bottom: 5px;

    color: var(--primary);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.pedidos-section-heading h3 {
    color: var(--text);

    font-size: 19px;
    font-weight: 800;

    letter-spacing: -0.35px;
}


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

.pedidos-live {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    min-height: 30px;

    padding: 0 10px;

    border: 1px solid #dcfce7;
    border-radius: 8px;

    background: #f0fdf4;

    color: #15803d;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.3px;
}

.live-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 0 3px rgba(34, 197, 94, 0.12);

    animation: pedidosLivePulse 1.8s ease-in-out infinite;
}

@keyframes pedidosLivePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(0.82);
    }

}


/* =========================================================
   CARD DA TABELA
   ========================================================= */

.pedidos-table-card {
    min-width: 0;

    overflow: hidden;

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

    background: var(--card);

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

    animation: pedidosFadeUp 0.45s 0.10s ease both;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.pedidos-table-card:hover {
    border-color: rgba(79, 70, 229, 0.16);

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


/* =========================================================
   WRAPPER DA TABELA
   ========================================================= */

.pedidos-table-wrapper {
    width: 100%;

    overflow-x: auto;

    border-radius: inherit;
}


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

.pedidos-table {
    width: 100%;

    min-width: 850px;

    border-collapse: collapse;
}

.pedidos-table thead {
    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #f1f5f9 100%
        );
}

.pedidos-table th {
    padding: 13px 15px;

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

    color: var(--text-muted);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.8px;

    text-align: left;

    text-transform: uppercase;

    white-space: nowrap;
}

.pedidos-table td {
    padding: 15px;

    border-bottom: 1px solid #f1f5f9;

    color: var(--text-secondary);

    font-size: 12px;

    vertical-align: middle;
}

.pedidos-table tbody tr {
    transition:
        background var(--transition);
}

.pedidos-table tbody tr:hover {
    background: #fafbff;
}

.pedidos-table tbody tr:last-child td {
    border-bottom: none;
}


/* =========================================================
   ID DO PEDIDO
   ========================================================= */

.pedido-id {
    width: 70px;

    color: var(--primary) !important;

    font-size: 11px !important;
    font-weight: 850 !important;

    white-space: nowrap;
}


/* =========================================================
   CLIENTE / MESA
   ========================================================= */

.pedido-cliente {
    min-width: 190px;
}

.pedido-identificacao {
    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 0;
}

.pedido-identificacao > div {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.pedido-identificacao strong {
    overflow: hidden;

    color: var(--text);

    font-size: 12px;
    font-weight: 750;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.pedido-identificacao small {
    color: var(--text-muted);

    font-size: 9px;
    font-weight: 500;
}

.pedido-tipo-icon {
    width: 35px;
    height: 35px;

    flex-shrink: 0;

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

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

    background: #f8fafc;

    font-size: 14px;

    transition:
        transform var(--transition),
        background var(--transition);
}

.pedidos-table tbody tr:hover .pedido-tipo-icon {
    transform: scale(1.05);

    background: #eef2ff;
}


/* =========================================================
   ORIGEM
   ========================================================= */

.pedido-origem {
    display: inline-flex;
    align-items: center;

    min-height: 26px;

    padding: 0 9px;

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

    background: #f8fafc;

    color: var(--text-secondary);

    font-size: 9px;
    font-weight: 750;

    text-transform: capitalize;

    white-space: nowrap;
}


/* =========================================================
   VALOR
   ========================================================= */

.pedido-valor {
    color: var(--text) !important;

    font-size: 12px !important;
    font-weight: 850 !important;

    white-space: nowrap;
}


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

.status-badge {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    min-height: 27px;

    padding: 0 9px;

    border: 1px solid transparent;
    border-radius: 8px;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.6px;

    white-space: nowrap;
}

.status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;
}


/* Pendente */

.status-pendente {
    border-color: #fde68a;

    background: #fffbeb;

    color: #a16207;
}


/* Em preparo */

.status-em_preparo {
    border-color: #bfdbfe;

    background: #eff6ff;

    color: #1d4ed8;
}


/* Pronto */

.status-pronto {
    border-color: #bbf7d0;

    background: #f0fdf4;

    color: #15803d;
}


/* Cancelado */

.status-cancelado {
    border-color: #fecaca;

    background: #fef2f2;

    color: #dc2626;
}


/* Finalizado */

.status-finalizado {
    border-color: #ddd6fe;

    background: #f5f3ff;

    color: #6d28d9;
}


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

.pedidos-acoes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    min-width: 220px;
}

.pedido-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 29px;

    padding: 0 9px;

    border: 1px solid transparent;
    border-radius: 7px;

    font-size: 8px;
    font-weight: 800;

    white-space: nowrap;

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        color var(--transition);
}

.pedido-action:hover {
    transform: translateY(-1px);
}


/* Preparo */

.pedido-action-preparo {
    border-color: #bfdbfe;

    background: #eff6ff;

    color: #1d4ed8;
}

.pedido-action-preparo:hover {
    border-color: #93c5fd;

    background: #dbeafe;

    box-shadow:
        0 4px 10px rgba(37, 99, 235, 0.10);
}


/* Pronto */

.pedido-action-pronto {
    border-color: #bbf7d0;

    background: #f0fdf4;

    color: #15803d;
}

.pedido-action-pronto:hover {
    border-color: #86efac;

    background: #dcfce7;

    box-shadow:
        0 4px 10px rgba(22, 163, 74, 0.10);
}


/* Cancelar */

.pedido-action-cancelar {
    border-color: #fecaca;

    background: #fef2f2;

    color: #dc2626;
}

.pedido-action-cancelar:hover {
    border-color: #fca5a5;

    background: #fee2e2;

    box-shadow:
        0 4px 10px rgba(220, 38, 38, 0.10);
}


/* Visualização */

.pedido-visualizacao {
    display: inline-flex;
    align-items: center;

    min-height: 29px;

    padding: 0 9px;

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

    background: #f8fafc;

    color: var(--text-muted);

    font-size: 8px;
    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   ESTADO VAZIO
   ========================================================= */

.pedido-empty td {
    padding: 0 !important;
}

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

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 7px;

    padding: 40px 20px;

    text-align: center;
}

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

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

    margin-bottom: 5px;

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

    background: #f8fafc;

    font-size: 22px;
}

.empty-state strong {
    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}

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

    color: var(--text-muted);

    font-size: 10px;

    line-height: 1.5;
}


/* =========================================================
   FOCO / ACESSIBILIDADE
   ========================================================= */

.btn-danger-compact:focus-visible,
.pedidos-navigation .nav-voltar:focus-visible,
.pedido-action:focus-visible {
    outline: 3px solid rgba(79, 70, 229, 0.22);

    outline-offset: 3px;
}


/* =========================================================
   ANIMAÇÕES
   ========================================================= */

@keyframes pedidosFadeUp {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


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

@media (max-width: 900px) {

    .pedidos-header-top {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-danger-compact {
        width: 100%;
    }

    .pedidos-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .pedidos-live {
        align-self: flex-start;
    }

}


@media (max-width: 650px) {

    .pedidos-header {
        margin-top: 8px;

        padding: 22px 20px;

        border-radius: 18px;
    }

    .pedidos-title-area h2 {
        font-size: 25px;
    }

    .pedidos-title-area .page-subtitle {
        font-size: 11px;
    }

    .pedidos-navigation {
        align-items: stretch;
        flex-direction: column;

        gap: 7px;
    }

    .pedidos-navigation .nav-voltar {
        width: 100%;
    }

    .nav-separator {
        display: none;
    }

    .pedidos-section-heading h3 {
        font-size: 17px;
    }

    .pedidos-table {
        min-width: 820px;
    }

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

    .pedido-tipo-icon {
        width: 32px;
        height: 32px;

        border-radius: 9px;

        font-size: 12px;
    }

    .pedido-identificacao strong {
        font-size: 11px;
    }

    .pedido-identificacao small {
        font-size: 8px;
    }

}


@media (max-width: 430px) {

    .pedidos-header {
        padding: 20px 17px;
    }

    .pedidos-title-area h2 {
        font-size: 22px;
    }

    .pedidos-title-area .page-brand {
        font-size: 9px;
    }

    .pedidos-alert {
        padding: 11px 12px;

        font-size: 10px;
    }

    .pedidos-section-heading {
        margin-bottom: 12px;
    }

    .pedidos-live {
        width: 100%;

        justify-content: center;
    }

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

        padding: 30px 15px;
    }

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */

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

    .pedidos-page,
    .pedidos-header,
    .pedidos-section-heading,
    .pedidos-table-card,
    .pedidos-alert {
        animation: none !important;
    }

    .live-dot {
        animation: none !important;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }

}
/* =========================================================
   VALORIUM SISTEMAS
   PEDIDOS.PHP
   Gestão de Pedidos
   ========================================================= */


/* =========================================================
   PÁGINA
   ========================================================= */

.pedidos-page {
    animation: pedidosFadeUp 0.45s ease both;
}


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

.pedidos-header {
    position: relative;

    overflow: hidden;

    margin-bottom: 28px;
    padding: 26px 30px;

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

    background:
        linear-gradient(
            135deg,
            #111827 0%,
            #1e293b 58%,
            #312e81 100%
        );

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

    animation: pedidosFadeUp 0.45s ease both;
}

.pedidos-header::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    top: -170px;
    right: -80px;

    border-radius: 50%;

    background: rgba(99, 102, 241, 0.20);

    filter: blur(4px);

    pointer-events: none;
}

.pedidos-header::after {
    content: "";

    position: absolute;

    width: 200px;
    height: 200px;

    right: 30%;
    bottom: -155px;

    border-radius: 50%;

    background: rgba(59, 130, 246, 0.10);

    pointer-events: none;
}


/* =========================================================
   ÁREA SUPERIOR DO CABEÇALHO
   ========================================================= */

.pedidos-header-top {
    position: relative;
    z-index: 2;

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

    gap: 25px;
}

.pedidos-title-area {
    min-width: 0;
}

.pedidos-title-area .page-brand {
    display: inline-block;

    margin-bottom: 7px;

    color: #a5b4fc;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}

.pedidos-title-area h2 {
    color: #ffffff;

    font-size: clamp(24px, 3vw, 32px);

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.8px;
}

.pedidos-title-area .page-subtitle {
    margin-top: 8px;

    color: #cbd5e1;

    font-size: 12px;
    font-weight: 500;

    line-height: 1.5;
}


/* =========================================================
   BOTÃO ZERAR DIA
   ========================================================= */

.btn-danger-compact {
    position: relative;
    z-index: 3;

    flex-shrink: 0;

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

    gap: 8px;

    min-height: 42px;

    padding: 0 15px;

    border: 1px solid rgba(248, 113, 113, 0.25);
    border-radius: 10px;

    background: rgba(127, 29, 29, 0.45);

    color: #fecaca;

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.btn-danger-compact:hover {
    transform: translateY(-2px);

    border-color: rgba(248, 113, 113, 0.45);

    background: rgba(153, 27, 27, 0.60);

    color: #ffffff;

    box-shadow:
        0 8px 18px rgba(127, 29, 29, 0.20);
}

.btn-danger-compact:active {
    transform: translateY(0) scale(0.98);
}

.btn-danger-compact .btn-icon {
    font-size: 13px;
}


/* =========================================================
   NAVEGAÇÃO
   ========================================================= */

.pedidos-navigation {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 22px;
    padding-top: 18px;

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

.pedidos-navigation .nav-voltar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    padding: 0 11px;

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

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

    color: #cbd5e1;

    font-size: 10px;
    font-weight: 700;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition);
}

.pedidos-navigation .nav-voltar:hover {
    transform: translateY(-1px);

    border-color: rgba(255, 255, 255, 0.18);

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

    color: #ffffff;
}

.nav-separator {
    color: #64748b;

    font-size: 12px;
}


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

.pedidos-alert {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 22px;
    padding: 13px 15px;

    border-radius: 10px;

    font-size: 11px;
    font-weight: 600;

    line-height: 1.45;

    animation: pedidosFadeUp 0.35s ease both;
}

.pedidos-alert .alert-icon {
    width: 22px;
    height: 22px;

    flex-shrink: 0;

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

    border-radius: 50%;

    font-size: 11px;
    font-weight: 900;
}

.pedidos-alert.alert-sucesso {
    border: 1px solid #bbf7d0;

    background: #f0fdf4;

    color: #166534;
}

.pedidos-alert.alert-sucesso .alert-icon {
    background: #dcfce7;

    color: #15803d;
}

.pedidos-alert.alert-erro {
    border: 1px solid #fecaca;

    background: #fef2f2;

    color: #991b1b;
}

.pedidos-alert.alert-erro .alert-icon {
    background: #fee2e2;

    color: #dc2626;
}


/* =========================================================
   CABEÇALHO DA SEÇÃO
   ========================================================= */

.pedidos-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 15px;

    animation: pedidosFadeUp 0.45s 0.06s ease both;
}

.pedidos-section-heading .section-eyebrow {
    display: block;

    margin-bottom: 5px;

    color: var(--primary);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.pedidos-section-heading h3 {
    color: var(--text);

    font-size: 19px;
    font-weight: 800;

    letter-spacing: -0.35px;
}


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

.pedidos-live {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    min-height: 30px;

    padding: 0 10px;

    border: 1px solid #dcfce7;
    border-radius: 8px;

    background: #f0fdf4;

    color: #15803d;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.3px;
}

.live-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 0 3px rgba(34, 197, 94, 0.12);

    animation: pedidosLivePulse 1.8s ease-in-out infinite;
}

@keyframes pedidosLivePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(0.82);
    }

}


/* =========================================================
   CARD DA TABELA
   ========================================================= */

.pedidos-table-card {
    min-width: 0;

    overflow: hidden;

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

    background: var(--card);

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

    animation: pedidosFadeUp 0.45s 0.10s ease both;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.pedidos-table-card:hover {
    border-color: rgba(79, 70, 229, 0.16);

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


/* =========================================================
   WRAPPER DA TABELA
   ========================================================= */

.pedidos-table-wrapper {
    width: 100%;

    overflow-x: auto;

    border-radius: inherit;
}


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

.pedidos-table {
    width: 100%;

    min-width: 850px;

    border-collapse: collapse;
}

.pedidos-table thead {
    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #f1f5f9 100%
        );
}

.pedidos-table th {
    padding: 13px 15px;

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

    color: var(--text-muted);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.8px;

    text-align: left;

    text-transform: uppercase;

    white-space: nowrap;
}

.pedidos-table td {
    padding: 15px;

    border-bottom: 1px solid #f1f5f9;

    color: var(--text-secondary);

    font-size: 12px;

    vertical-align: middle;
}

.pedidos-table tbody tr {
    transition:
        background var(--transition);
}

.pedidos-table tbody tr:hover {
    background: #fafbff;
}

.pedidos-table tbody tr:last-child td {
    border-bottom: none;
}


/* =========================================================
   ID DO PEDIDO
   ========================================================= */

.pedido-id {
    width: 70px;

    color: var(--primary) !important;

    font-size: 11px !important;
    font-weight: 850 !important;

    white-space: nowrap;
}


/* =========================================================
   CLIENTE / MESA
   ========================================================= */

.pedido-cliente {
    min-width: 190px;
}

.pedido-identificacao {
    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 0;
}

.pedido-identificacao > div {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.pedido-identificacao strong {
    overflow: hidden;

    color: var(--text);

    font-size: 12px;
    font-weight: 750;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.pedido-identificacao small {
    color: var(--text-muted);

    font-size: 9px;
    font-weight: 500;
}

.pedido-tipo-icon {
    width: 35px;
    height: 35px;

    flex-shrink: 0;

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

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

    background: #f8fafc;

    font-size: 14px;

    transition:
        transform var(--transition),
        background var(--transition);
}

.pedidos-table tbody tr:hover .pedido-tipo-icon {
    transform: scale(1.05);

    background: #eef2ff;
}


/* =========================================================
   ORIGEM
   ========================================================= */

.pedido-origem {
    display: inline-flex;
    align-items: center;

    min-height: 26px;

    padding: 0 9px;

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

    background: #f8fafc;

    color: var(--text-secondary);

    font-size: 9px;
    font-weight: 750;

    text-transform: capitalize;

    white-space: nowrap;
}


/* =========================================================
   VALOR
   ========================================================= */

.pedido-valor {
    color: var(--text) !important;

    font-size: 12px !important;
    font-weight: 850 !important;

    white-space: nowrap;
}


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

.status-badge {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    min-height: 27px;

    padding: 0 9px;

    border: 1px solid transparent;
    border-radius: 8px;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.6px;

    white-space: nowrap;
}

.status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;
}


/* Pendente */

.status-pendente {
    border-color: #fde68a;

    background: #fffbeb;

    color: #a16207;
}


/* Em preparo */

.status-em_preparo {
    border-color: #bfdbfe;

    background: #eff6ff;

    color: #1d4ed8;
}


/* Pronto */

.status-pronto {
    border-color: #bbf7d0;

    background: #f0fdf4;

    color: #15803d;
}


/* Cancelado */

.status-cancelado {
    border-color: #fecaca;

    background: #fef2f2;

    color: #dc2626;
}


/* Finalizado */

.status-finalizado {
    border-color: #ddd6fe;

    background: #f5f3ff;

    color: #6d28d9;
}


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

.pedidos-acoes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    min-width: 220px;
}

.pedido-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 29px;

    padding: 0 9px;

    border: 1px solid transparent;
    border-radius: 7px;

    font-size: 8px;
    font-weight: 800;

    white-space: nowrap;

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        color var(--transition);
}

.pedido-action:hover {
    transform: translateY(-1px);
}


/* Preparo */

.pedido-action-preparo {
    border-color: #bfdbfe;

    background: #eff6ff;

    color: #1d4ed8;
}

.pedido-action-preparo:hover {
    border-color: #93c5fd;

    background: #dbeafe;

    box-shadow:
        0 4px 10px rgba(37, 99, 235, 0.10);
}


/* Pronto */

.pedido-action-pronto {
    border-color: #bbf7d0;

    background: #f0fdf4;

    color: #15803d;
}

.pedido-action-pronto:hover {
    border-color: #86efac;

    background: #dcfce7;

    box-shadow:
        0 4px 10px rgba(22, 163, 74, 0.10);
}


/* Cancelar */

.pedido-action-cancelar {
    border-color: #fecaca;

    background: #fef2f2;

    color: #dc2626;
}

.pedido-action-cancelar:hover {
    border-color: #fca5a5;

    background: #fee2e2;

    box-shadow:
        0 4px 10px rgba(220, 38, 38, 0.10);
}


/* Visualização */

.pedido-visualizacao {
    display: inline-flex;
    align-items: center;

    min-height: 29px;

    padding: 0 9px;

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

    background: #f8fafc;

    color: var(--text-muted);

    font-size: 8px;
    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   ESTADO VAZIO
   ========================================================= */

.pedido-empty td {
    padding: 0 !important;
}

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

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 7px;

    padding: 40px 20px;

    text-align: center;
}

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

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

    margin-bottom: 5px;

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

    background: #f8fafc;

    font-size: 22px;
}

.empty-state strong {
    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}

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

    color: var(--text-muted);

    font-size: 10px;

    line-height: 1.5;
}


/* =========================================================
   FOCO / ACESSIBILIDADE
   ========================================================= */

.btn-danger-compact:focus-visible,
.pedidos-navigation .nav-voltar:focus-visible,
.pedido-action:focus-visible {
    outline: 3px solid rgba(79, 70, 229, 0.22);

    outline-offset: 3px;
}


/* =========================================================
   ANIMAÇÕES
   ========================================================= */

@keyframes pedidosFadeUp {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


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

@media (max-width: 900px) {

    .pedidos-header-top {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-danger-compact {
        width: 100%;
    }

    .pedidos-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .pedidos-live {
        align-self: flex-start;
    }

}


@media (max-width: 650px) {

    .pedidos-header {
        margin-top: 8px;

        padding: 22px 20px;

        border-radius: 18px;
    }

    .pedidos-title-area h2 {
        font-size: 25px;
    }

    .pedidos-title-area .page-subtitle {
        font-size: 11px;
    }

    .pedidos-navigation {
        align-items: stretch;
        flex-direction: column;

        gap: 7px;
    }

    .pedidos-navigation .nav-voltar {
        width: 100%;
    }

    .nav-separator {
        display: none;
    }

    .pedidos-section-heading h3 {
        font-size: 17px;
    }

    .pedidos-table {
        min-width: 820px;
    }

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

    .pedido-tipo-icon {
        width: 32px;
        height: 32px;

        border-radius: 9px;

        font-size: 12px;
    }

    .pedido-identificacao strong {
        font-size: 11px;
    }

    .pedido-identificacao small {
        font-size: 8px;
    }

}


@media (max-width: 430px) {

    .pedidos-header {
        padding: 20px 17px;
    }

    .pedidos-title-area h2 {
        font-size: 22px;
    }

    .pedidos-title-area .page-brand {
        font-size: 9px;
    }

    .pedidos-alert {
        padding: 11px 12px;

        font-size: 10px;
    }

    .pedidos-section-heading {
        margin-bottom: 12px;
    }

    .pedidos-live {
        width: 100%;

        justify-content: center;
    }

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

        padding: 30px 15px;
    }

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */

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

    .pedidos-page,
    .pedidos-header,
    .pedidos-section-heading,
    .pedidos-table-card,
    .pedidos-alert {
        animation: none !important;
    }

    .live-dot {
        animation: none !important;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }

}

/* =========================================================
   VALORIUM SISTEMAS
   FINANCAS.PHP
   Controle de Caixa & Finanças
   ========================================================= */


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

.financeiro-header {
    position: relative;

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

    gap: 30px;

    margin-bottom: 24px;
    padding: 26px 30px;

    overflow: hidden;

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

    background:
        linear-gradient(
            135deg,
            #111827 0%,
            #1e293b 58%,
            #312e81 100%
        );

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

    animation: financeiroFadeUp 0.45s ease both;
}

.financeiro-header::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    top: -170px;
    right: -70px;

    border-radius: 50%;

    background: rgba(99, 102, 241, 0.20);

    filter: blur(5px);

    pointer-events: none;
}

.financeiro-header::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    right: 30%;
    bottom: -150px;

    border-radius: 50%;

    background: rgba(59, 130, 246, 0.10);

    pointer-events: none;
}

.financeiro-header-titulo {
    position: relative;
    z-index: 2;

    min-width: 0;
}

.financeiro-header-titulo .page-brand {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 9px;

    color: #cbd5e1;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.5px;
}

.financeiro-header-titulo .page-brand i {
    color: #93c5fd;

    font-size: 12px;
}

.financeiro-header-titulo h2 {
    color: #ffffff;

    font-size: clamp(24px, 3vw, 32px);

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.8px;
}

.financeiro-header-titulo .page-subtitle {
    margin-top: 8px;

    color: #cbd5e1;

    font-size: 12px;
    font-weight: 600;
}

.financeiro-header-acoes {
    position: relative;
    z-index: 3;

    flex-shrink: 0;
}

.financeiro-header-acoes .nav-voltar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 42px;

    padding: 0 15px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;

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

    color: #e2e8f0;

    font-size: 12px;
    font-weight: 700;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition);
}

.financeiro-header-acoes .nav-voltar:hover {
    transform: translateX(-2px);

    border-color: rgba(255, 255, 255, 0.22);

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

    color: #ffffff;
}


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

.financeiro-alerta {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 20px;
    padding: 13px 16px;

    border-radius: 10px;

    font-size: 12px;
    font-weight: 700;

    animation: financeiroFadeUp 0.35s ease both;
}

.financeiro-alerta i {
    flex-shrink: 0;

    font-size: 15px;
}

.financeiro-alerta.alert-sucesso {
    border: 1px solid #bbf7d0;

    background: #f0fdf4;

    color: #166534;
}

.financeiro-alerta.alert-erro {
    border: 1px solid #fecaca;

    background: #fef2f2;

    color: #991b1b;
}


/* =========================================================
   ABAS PRINCIPAIS
   ========================================================= */

.financeiro-tabs {
    display: flex;
    align-items: stretch;

    gap: 5px;

    margin-bottom: 26px;
    padding: 5px;

    overflow-x: auto;

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

    background: #f8fafc;

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

    scrollbar-width: thin;
}

.financeiro-tab {
    position: relative;

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

    gap: 8px;

    min-height: 43px;

    padding: 0 15px;

    border-radius: 9px;

    color: var(--text-secondary);

    font-size: 11px;
    font-weight: 750;

    white-space: nowrap;

    transition:
        background var(--transition),
        color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.financeiro-tab i {
    font-size: 12px;
}

.financeiro-tab:hover {
    color: var(--primary);

    background: #ffffff;
}

.financeiro-tab.active {
    background: #ffffff;

    color: var(--primary);

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

.financeiro-tab.active::after {
    content: "";

    position: absolute;

    left: 15px;
    right: 15px;
    bottom: -1px;

    height: 2px;

    border-radius: 2px;

    background: var(--primary);
}


/* =========================================================
   SEÇÕES
   ========================================================= */

.financeiro-section {
    animation: financeiroFadeUp 0.4s ease both;
}

.financeiro-section > .section-heading {
    margin-bottom: 18px;
}


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

.financeiro-card,
.card-form-caixa {
    min-width: 0;

    overflow: hidden;

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

    background: var(--card);

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

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.financeiro-card:hover,
.card-form-caixa:hover {
    border-color: rgba(79, 70, 229, 0.14);

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


/* =========================================================
   CAIXA FECHADO
   ========================================================= */

.caixa-fechado {
    display: flex;
    align-items: center;

    gap: 18px;

    padding: 24px 25px;

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

    background:
        linear-gradient(
            135deg,
            #f8fafc 0%,
            #f1f5f9 100%
        );
}

.caixa-status-icon {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

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

    border: 1px solid #e2e8f0;
    border-radius: 14px;

    background: #ffffff;

    color: #64748b;

    font-size: 19px;

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

.caixa-status-content {
    min-width: 0;
}

.caixa-status-content h4 {
    color: var(--text);

    font-size: 17px;
    font-weight: 800;
}

.caixa-status-content p {
    max-width: 700px;

    margin-top: 5px;

    color: var(--text-secondary);

    font-size: 11px;
    line-height: 1.55;
}


/* =========================================================
   FORMULÁRIO ABERTURA DE CAIXA
   ========================================================= */

.form-caixa-inline {
    display: flex;
    align-items: flex-end;

    gap: 15px;

    padding: 22px 25px;
}

.caixa-input-group {
    flex: 1;
    max-width: 360px;
}

.caixa-input-group label {
    display: block;

    margin-bottom: 7px;

    color: var(--text-secondary);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.5px;
}

.input-money {
    display: flex;
    align-items: center;

    min-height: 44px;

    overflow: hidden;

    border: 1px solid #cbd5e1;
    border-radius: 9px;

    background: #ffffff;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.input-money:focus-within {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(79, 70, 229, 0.10);
}

.input-money > span {
    display: flex;
    align-items: center;

    height: 100%;

    padding: 0 12px;

    border-right: 1px solid #e2e8f0;

    background: #f8fafc;

    color: var(--text-muted);

    font-size: 11px;
    font-weight: 800;
}

.input-money input {
    width: 100%;

    height: 42px;

    padding: 0 12px;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--text);

    font-size: 13px;
    font-weight: 700;
}

.btn-acao-caixa {
    min-height: 44px;

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

    gap: 8px;

    padding: 0 17px;

    border: 0;
    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #2563eb 0%,
            #1d4ed8 100%
        );

    color: #ffffff;

    cursor: pointer;

    font-size: 11px;
    font-weight: 800;

    box-shadow:
        0 7px 16px rgba(37, 99, 235, 0.18);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        filter var(--transition);
}

.btn-acao-caixa:hover {
    transform: translateY(-1px);

    box-shadow:
        0 10px 20px rgba(37, 99, 235, 0.23);

    filter: brightness(1.03);
}


/* =========================================================
   CAIXA ABERTO
   ========================================================= */

.caixa-aberto-card {
    padding: 25px;
}

.caixa-aberto-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding-bottom: 21px;

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

.status-aberto {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    border: 1px solid #bbf7d0;

    background: #f0fdf4;

    color: #15803d;
}

.status-aberto i {
    font-size: 7px;
}

.caixa-data-abertura {
    margin-top: 7px;

    color: var(--text-muted);

    font-size: 10px;
}

.caixa-data-abertura strong {
    color: var(--text-secondary);
}

.caixa-valor-total {
    text-align: right;
}

.caixa-valor-total span {
    display: block;

    margin-bottom: 3px;

    color: var(--text-muted);

    font-size: 10px;
    font-weight: 700;
}

.caixa-valor-total strong {
    color: var(--text);

    font-size: 27px;
    font-weight: 850;

    letter-spacing: -0.8px;
}


/* =========================================================
   RESUMO DOS MEIOS DE PAGAMENTO
   ========================================================= */

.caixa-resumo-grid {
    display: grid;

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

    gap: 12px;

    margin-top: 20px;
}

.caixa-resumo-item {
    display: flex;
    align-items: center;

    gap: 11px;

    min-width: 0;

    padding: 15px;

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

    background: #ffffff;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.caixa-resumo-item:hover {
    transform: translateY(-2px);

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

.caixa-resumo-icon {
    width: 37px;
    height: 37px;

    flex-shrink: 0;

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

    border-radius: 10px;

    background: #f1f5f9;

    color: var(--text-secondary);

    font-size: 13px;
}

.caixa-resumo-item.dinheiro .caixa-resumo-icon {
    background: #ecfdf5;
    color: #059669;
}

.caixa-resumo-item.pix .caixa-resumo-icon {
    background: #eff6ff;
    color: #2563eb;
}

.caixa-resumo-item.credito .caixa-resumo-icon {
    background: #eef2ff;
    color: #4f46e5;
}

.caixa-resumo-item.debito .caixa-resumo-icon {
    background: #fff7ed;
    color: #ea580c;
}

.caixa-resumo-item small {
    display: block;

    margin-bottom: 3px;

    color: var(--text-muted);

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
}

.caixa-resumo-item strong {
    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}


/* =========================================================
   INFORMAÇÕES DO CAIXA
   ========================================================= */

.caixa-informacoes {
    display: grid;

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

    gap: 12px;

    margin-top: 16px;
}

.caixa-informacoes > div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 14px 16px;

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

    background: #f8fafc;
}

.caixa-informacoes span {
    color: var(--text-muted);

    font-size: 10px;
    font-weight: 700;
}

.caixa-informacoes strong {
    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}


/* =========================================================
   FECHAMENTO FÍSICO
   ========================================================= */

.fechamento-caixa {
    margin-top: 22px;

    overflow: hidden;

    border: 1px solid #e2e8f0;
    border-radius: 13px;

    background: #f8fafc;
}

.fechamento-caixa .fechamento-header {
    display: flex;
    align-items: center;

    margin: 0;
    padding: 18px 20px;

    border-radius: 0;

    background: #ffffff;

    box-shadow: none;

    animation: none;
}

.fechamento-caixa .fechamento-header::before,
.fechamento-caixa .fechamento-header::after {
    display: none;
}

.fechamento-caixa .fechamento-header h4 {
    margin-top: 4px;

    color: var(--text);

    font-size: 15px;
    font-weight: 800;
}

.form-fechamento-caixa {
    padding: 20px;
}

.form-fechamento-caixa .fechamento-grid {
    display: grid;

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

    gap: 12px;
}

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

.form-field label {
    display: block;

    margin-bottom: 7px;

    color: var(--text-secondary);

    font-size: 10px;
    font-weight: 800;
}

.form-field > input,
.form-field > select {
    width: 100%;

    min-height: 43px;

    padding: 0 12px;

    border: 1px solid #cbd5e1;
    border-radius: 9px;

    outline: none;

    background: #ffffff;

    color: var(--text);

    font-size: 12px;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.form-field > input:focus,
.form-field > select:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(79, 70, 229, 0.10);
}

.btn-fechar-caixa {
    width: 100%;

    min-height: 47px;

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

    gap: 8px;

    margin-top: 17px;

    border: 0;
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #dc2626 0%,
            #b91c1c 100%
        );

    color: #ffffff;

    cursor: pointer;

    font-size: 11px;
    font-weight: 800;

    box-shadow:
        0 8px 18px rgba(220, 38, 38, 0.17);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        filter var(--transition);
}

.btn-fechar-caixa:hover {
    transform: translateY(-1px);

    box-shadow:
        0 11px 22px rgba(220, 38, 38, 0.23);

    filter: brightness(1.03);
}


/* =========================================================
   CABEÇALHOS DE CARDS
   ========================================================= */

.card-heading {
    display: flex;
    align-items: center;

    gap: 13px;

    padding: 20px 22px;

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

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafbff 100%
        );
}

.card-heading-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

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

    border-radius: 10px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 13px;
}

.card-heading h4 {
    color: var(--text);

    font-size: 15px;
    font-weight: 800;
}

.card-heading p {
    margin-top: 4px;

    color: var(--text-muted);

    font-size: 10px;
}


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

.financeiro-card .table-wrapper {
    width: 100%;

    overflow-x: auto;
}

.financeiro-card table {
    width: 100%;

    min-width: 850px;

    border-collapse: collapse;
}

.financeiro-card table thead {
    background: #f8fafc;
}

.financeiro-card table th {
    padding: 12px 14px;

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

    color: var(--text-muted);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.7px;

    text-align: left;

    text-transform: uppercase;

    white-space: nowrap;
}

.financeiro-card table td {
    padding: 13px 14px;

    border-bottom: 1px solid #f1f5f9;

    color: var(--text-secondary);

    font-size: 11px;

    vertical-align: middle;

    white-space: nowrap;
}

.financeiro-card table tbody tr {
    transition: background var(--transition);
}

.financeiro-card table tbody tr:hover {
    background: #fafbff;
}

.financeiro-card table tbody tr:last-child td {
    border-bottom: 0;
}

.financeiro-card table td strong {
    color: var(--text);

    font-weight: 750;
}


/* =========================================================
   VALORES
   ========================================================= */

.valor-positivo {
    color: #15803d !important;

    font-weight: 750;
}

.valor-negativo {
    color: #dc2626 !important;

    font-weight: 750;
}

.valor-lucro {
    color: #047857 !important;
}

.valor-lucro strong {
    color: inherit !important;
}


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

.status-pago {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    border: 1px solid #bbf7d0;

    background: #f0fdf4;

    color: #15803d;
}

.status-pendente {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    border: 1px solid #fde68a;

    background: #fffbeb;

    color: #a16207;
}

.status-recebivel {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    border: 1px solid #bfdbfe;

    background: #eff6ff;

    color: #1d4ed8;
}


/* =========================================================
   AÇÕES DE TABELA
   ========================================================= */

.table-actions {
    display: flex;
    align-items: center;

    gap: 6px;
}

.action-btn {
    min-height: 30px;

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

    gap: 5px;

    padding: 0 9px;

    border: 1px solid transparent;
    border-radius: 7px;

    font-size: 9px;
    font-weight: 800;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition);
}

.action-btn:hover {
    transform: translateY(-1px);
}

.action-success {
    border-color: #bbf7d0;

    background: #f0fdf4;

    color: #15803d;
}

.action-success:hover {
    background: #dcfce7;
}

.action-danger {
    border-color: #fecaca;

    background: #fef2f2;

    color: #dc2626;
}

.action-danger:hover {
    background: #fee2e2;
}


/* =========================================================
   FORMULÁRIO DE DESPESAS
   ========================================================= */

.despesa-form-card {
    margin-bottom: 18px;
}

.form-despesas-grid {
    display: grid;

    grid-template-columns:
        minmax(180px, 1.5fr)
        minmax(170px, 1.2fr)
        minmax(140px, 0.8fr)
        minmax(140px, 0.8fr)
        auto;

    align-items: end;

    gap: 12px;

    padding: 22px;
}

.form-despesas-grid .btn-acao-despesa {
    min-height: 43px;

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

    gap: 7px;

    padding: 0 15px;

    border: 0;
    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #2563eb 0%,
            #1d4ed8 100%
        );

    color: #ffffff;

    cursor: pointer;

    font-size: 10px;
    font-weight: 800;

    box-shadow:
        0 7px 16px rgba(37, 99, 235, 0.16);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.form-despesas-grid .btn-acao-despesa:hover {
    transform: translateY(-1px);

    box-shadow:
        0 10px 20px rgba(37, 99, 235, 0.22);
}


/* =========================================================
   RELATÓRIOS
   ========================================================= */

.relatorio-tabs {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 16px;

    overflow-x: auto;
}

.relatorio-tabs a {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    min-height: 39px;

    padding: 0 13px;

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

    background: #ffffff;

    color: var(--text-secondary);

    font-size: 10px;
    font-weight: 750;

    white-space: nowrap;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition);
}

.relatorio-tabs a span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 21px;
    height: 21px;

    border-radius: 6px;

    background: #f1f5f9;

    color: var(--text-muted);

    font-size: 8px;
    font-weight: 900;
}

.relatorio-tabs a:hover {
    border-color: #c7d2fe;

    color: var(--primary);
}

.relatorio-tabs a.active {
    border-color: rgba(79, 70, 229, 0.25);

    background: var(--primary-light);

    color: var(--primary);
}

.relatorio-tabs a.active span {
    background: #ffffff;

    color: var(--primary);
}

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

    gap: 20px;

    padding: 21px 22px;

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

.relatorio-header h4 {
    margin-top: 4px;

    color: var(--text);

    font-size: 16px;
    font-weight: 800;
}

.periodo-tabs {
    display: flex;
    align-items: center;

    gap: 4px;

    padding: 4px;

    border-radius: 8px;

    background: #f1f5f9;
}

.periodo-tabs a {
    min-height: 30px;

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

    padding: 0 10px;

    border-radius: 6px;

    color: var(--text-muted);

    font-size: 9px;
    font-weight: 800;

    transition:
        background var(--transition),
        color var(--transition);
}

.periodo-tabs a:hover {
    color: var(--primary);
}

.periodo-tabs a.active {
    background: #ffffff;

    color: var(--primary);

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


/* =========================================================
   NOTA DE ENTRADA XML
   ========================================================= */

.nota-entrada-card {
    display: flex;
    align-items: flex-start;

    gap: 22px;

    padding: 26px;
}

.xml-upload-icon {
    width: 58px;
    height: 58px;

    flex-shrink: 0;

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

    border: 1px solid #c7d2fe;
    border-radius: 15px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 23px;
}

.xml-upload-content {
    min-width: 0;

    flex: 1;
}

.xml-upload-content h4 {
    color: var(--text);

    font-size: 17px;
    font-weight: 800;
}

.xml-upload-content > p {
    max-width: 800px;

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

    color: var(--text-secondary);

    font-size: 11px;
    line-height: 1.6;
}

.form-xml {
    max-width: 650px;
}

.form-xml input[type="file"] {
    width: 100%;

    min-height: 50px;

    padding: 9px 11px;

    border: 2px dashed #cbd5e1;
    border-radius: 10px;

    background: #f8fafc;

    color: var(--text-secondary);

    cursor: pointer;

    font-size: 10px;

    transition:
        border-color var(--transition),
        background var(--transition);
}

.form-xml input[type="file"]:hover {
    border-color: #a5b4fc;

    background: #fafbff;
}

.form-xml small {
    display: block;

    margin-top: 6px;

    color: var(--text-muted);

    font-size: 9px;
}

.btn-processar-xml {
    min-height: 44px;

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

    gap: 8px;

    margin-top: 15px;

    padding: 0 17px;

    border: 0;
    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #2563eb 0%,
            #1d4ed8 100%
        );

    color: #ffffff;

    cursor: pointer;

    font-size: 10px;
    font-weight: 800;

    box-shadow:
        0 7px 16px rgba(37, 99, 235, 0.17);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        filter var(--transition);
}

.btn-processar-xml:hover {
    transform: translateY(-1px);

    box-shadow:
        0 10px 21px rgba(37, 99, 235, 0.23);

    filter: brightness(1.03);
}


/* =========================================================
   ESTADO VAZIO
   ========================================================= */

.financeiro-card .empty-state {
    padding: 50px 25px;

    text-align: center;
}

.financeiro-card .empty-state > i {
    display: block;

    margin-bottom: 13px;

    color: #cbd5e1;

    font-size: 30px;
}

.financeiro-card .empty-state h4 {
    color: var(--text);

    font-size: 14px;
    font-weight: 800;
}

.financeiro-card .empty-state p {
    margin-top: 5px;

    color: var(--text-muted);

    font-size: 10px;
}


/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

.financeiro-tab:focus-visible,
.financeiro-header-acoes .nav-voltar:focus-visible,
.btn-acao-caixa:focus-visible,
.btn-fechar-caixa:focus-visible,
.btn-acao-despesa:focus-visible,
.action-btn:focus-visible,
.relatorio-tabs a:focus-visible,
.periodo-tabs a:focus-visible,
.btn-processar-xml:focus-visible,
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-xml input:focus-visible {
    outline: 3px solid rgba(79, 70, 229, 0.22);

    outline-offset: 3px;
}


/* =========================================================
   ANIMAÇÃO
   ========================================================= */

@keyframes financeiroFadeUp {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


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

@media (max-width: 1100px) {

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

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

    .form-despesas-grid .btn-acao-despesa {
        width: 100%;
    }

}


@media (max-width: 900px) {

    .financeiro-header {
        align-items: flex-start;

        flex-direction: column;

        padding: 25px;
    }

    .financeiro-header-acoes {
        width: 100%;
    }

    .financeiro-header-acoes .nav-voltar {
        width: 100%;
    }

    .form-caixa-inline {
        align-items: stretch;

        flex-direction: column;
    }

    .caixa-input-group {
        max-width: none;
    }

    .btn-acao-caixa {
        width: 100%;
    }

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

    .relatorio-header {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 700px) {

    .financeiro-header {
        margin-top: 8px;

        padding: 22px 20px;

        border-radius: 18px;
    }

    .financeiro-header-titulo h2 {
        font-size: 25px;
    }

    .financeiro-tabs {
        border-radius: 11px;
    }

    .financeiro-tab {
        min-height: 41px;

        padding: 0 12px;
    }

    .caixa-aberto-card {
        padding: 20px;
    }

    .caixa-aberto-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .caixa-valor-total {
        width: 100%;

        text-align: left;
    }

    .caixa-resumo-grid {
        grid-template-columns: 1fr;
    }

    .caixa-informacoes {
        grid-template-columns: 1fr;
    }

    .nota-entrada-card {
        align-items: flex-start;

        flex-direction: column;

        padding: 21px;
    }

    .xml-upload-content {
        width: 100%;
    }

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

        padding: 20px;
    }

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

    .relatorio-tabs {
        padding-bottom: 3px;
    }

    .periodo-tabs {
        width: 100%;

        justify-content: space-between;
    }

    .periodo-tabs a {
        flex: 1;
    }

}


@media (max-width: 480px) {

    .financeiro-header {
        padding: 20px 17px;
    }

    .financeiro-header-titulo h2 {
        font-size: 22px;
    }

    .financeiro-header-titulo .page-subtitle {
        font-size: 10px;

        line-height: 1.5;
    }

    .financeiro-tab {
        font-size: 10px;
    }

    .financeiro-tab i {
        font-size: 11px;
    }

    .caixa-fechado {
        align-items: flex-start;

        padding: 20px;

        gap: 13px;
    }

    .caixa-status-icon {
        width: 45px;
        height: 45px;

        border-radius: 12px;

        font-size: 16px;
    }

    .caixa-status-content h4 {
        font-size: 15px;
    }

    .caixa-status-content p {
        font-size: 10px;
    }

    .caixa-aberto-card {
        padding: 17px;
    }

    .caixa-valor-total strong {
        font-size: 23px;
    }

    .caixa-informacoes > div {
        align-items: flex-start;

        flex-direction: column;

        gap: 4px;
    }

    .form-fechamento-caixa {
        padding: 17px;
    }

    .card-heading {
        padding: 18px;
    }

    .nota-entrada-card {
        padding: 18px;
    }

    .xml-upload-icon {
        width: 50px;
        height: 50px;

        border-radius: 13px;

        font-size: 20px;
    }

    .xml-upload-content h4 {
        font-size: 15px;
    }

    .xml-upload-content > p {
        font-size: 10px;
    }

    .financeiro-card table {
        min-width: 760px;
    }

    .financeiro-card table th,
    .financeiro-card table td {
        padding: 11px 10px;
    }

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */

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

    .financeiro-header,
    .financeiro-alerta,
    .financeiro-section {
        animation: none !important;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }

}

/* ================================================================
   FISCAL.PHP
   Setor Fiscal / Obrigações Legais
   Seguindo o padrão visual do ValoriumSistemas
   ================================================================ */


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

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

.fiscal-page-header .page-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.fiscal-page-header h2 {
    margin: 0;
}


/* ================================================================
   ABAS
   ================================================================ */

.fiscal-tabs {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 24px;
    padding: 6px;

    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;

    overflow-x: auto;
    scrollbar-width: thin;
}

.fiscal-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 42px;
    padding: 10px 15px;

    border-radius: 10px;

    color: var(--text-muted, #64748b);
    background: transparent;

    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;

    text-decoration: none;

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

.fiscal-tab i {
    font-size: 13px;
}

.fiscal-tab:hover {
    color: var(--text-color, #0f172a);
    background: var(--bg-hover, #f1f5f9);
}

.fiscal-tab.active {
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    box-shadow:
        0 4px 12px rgba(37, 99, 235, .20);
}

.fiscal-tab.active:hover {
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    transform: translateY(-1px);
}


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

.fiscal-content {
    width: 100%;
    padding: 28px;

    background: var(--card-bg, #ffffff);

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

    box-shadow:
        0 4px 16px rgba(15, 23, 42, .04);
}

.fiscal-content h3 {
    margin: 0 0 7px;

    color: var(--text-color, #0f172a);

    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
}

.fiscal-content h4 {
    color: var(--text-color, #0f172a);
}

.fiscal-description {
    margin: 0 0 24px;

    color: var(--text-muted, #64748b);

    font-size: 14px;
    line-height: 1.7;
}


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

.fiscal-table-wrapper {
    width: 100%;

    overflow-x: auto;

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

    background: var(--card-bg, #ffffff);
}

.fiscal-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 13px;
}

.fiscal-table thead {
    background: #f8fafc;
}

.fiscal-table th {
    padding: 13px 15px;

    color: #475569;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;

    text-align: left;

    border-bottom: 1px solid var(--border-color, #e5e7eb);

    white-space: nowrap;
}

.fiscal-table td {
    padding: 14px 15px;

    color: var(--text-color, #334155);

    vertical-align: middle;

    border-bottom: 1px solid #eef2f7;
}

.fiscal-table tbody tr {
    transition: background .15s ease;
}

.fiscal-table tbody tr:hover {
    background: #f8fafc;
}

.fiscal-table tbody tr:last-child td {
    border-bottom: none;
}

.fiscal-table .text-right {
    text-align: right;
}

.fiscal-table .text-center {
    text-align: center;
}


/* ================================================================
   TIPOGRAFIA AUXILIAR
   ================================================================ */

.font-semibold {
    font-weight: 600;
}

.text-muted {
    color: #64748b !important;
}


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

.fiscal-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;

    white-space: nowrap;
}

.fiscal-status-error {
    color: #b91c1c;
    background: #fee2e2;
}

.fiscal-status-warning {
    color: #92400e;
    background: #fef3c7;
}

.fiscal-status-success {
    color: #166534;
    background: #dcfce7;
}

.fiscal-status-info {
    color: #1d4ed8;
    background: #dbeafe;
}


/* ================================================================
   MENSAGEM DE ERRO SEFAZ
   ================================================================ */

.fiscal-error-message {
    max-width: 430px;

    color: #b91c1c !important;

    font-size: 12px;
    line-height: 1.5;
}


/* ================================================================
   MENSAGEM DE SUCESSO
   ================================================================ */

.fiscal-success-message {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0;
    padding: 15px 17px;

    color: #166534;

    background: #f0fdf4;

    border: 1px solid #bbf7d0;
    border-radius: 10px;

    font-size: 13px;
    font-weight: 600;
}

.fiscal-success-message i {
    font-size: 17px;
}


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

.fiscal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 40px;
    padding: 9px 15px;

    border: 1px solid transparent;
    border-radius: 9px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    text-decoration: none;
    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease,
        transform .15s ease;
}

.fiscal-btn:hover {
    transform: translateY(-1px);
}

.fiscal-btn:active {
    transform: translateY(0);
}

.fiscal-btn-primary {
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    box-shadow:
        0 4px 10px rgba(37, 99, 235, .16);
}

.fiscal-btn-primary:hover {
    color: #ffffff;
    box-shadow:
        0 6px 14px rgba(37, 99, 235, .23);
}

.fiscal-btn-success {
    color: #ffffff;
    background: #16a34a;
}

.fiscal-btn-success:hover {
    color: #ffffff;
    background: #15803d;
}

.fiscal-btn-neutral {
    color: #334155;
    background: #ffffff;

    border-color: #cbd5e1;
}

.fiscal-btn-neutral:hover {
    color: #0f172a;
    background: #f8fafc;
}

.fiscal-btn-large {
    min-height: 46px;
    padding: 11px 18px;

    font-size: 13px;
}


/* ================================================================
   SEFAZ - STATUS
   ================================================================ */

.sefaz-status-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 22px;
    padding: 18px 20px;

    border: 1px solid #e2e8f0;
    border-radius: 12px;

    background: #f8fafc;

    transition:
        background .25s ease,
        border-color .25s ease;
}

.sefaz-status-content {
    display: flex;
    align-items: center;
    gap: 13px;

    min-width: 0;
}

.sefaz-status-content strong {
    color: #334155;

    font-size: 13px;
    line-height: 1.5;
}

.sefaz-status-box.sefaz-online {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.sefaz-status-box.sefaz-online strong {
    color: #166534;
}

.sefaz-status-box.sefaz-offline {
    background: #fff7ed;
    border-color: #fed7aa;
}

.sefaz-status-box.sefaz-offline strong {
    color: #9a3412;
}

.sefaz-status-box.sefaz-verificando {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.sefaz-spinner {
    width: 12px;
    height: 12px;

    flex: 0 0 12px;

    border-radius: 50%;

    border: 2px solid #cbd5e1;
    border-top-color: #2563eb;

    animation: fiscal-spin .8s linear infinite;
}

.sefaz-online .sefaz-spinner {
    width: 11px;
    height: 11px;

    border: none;

    background: #22c55e;

    animation: none;
}

.sefaz-offline .sefaz-spinner {
    width: 11px;
    height: 11px;

    border: none;

    background: #f97316;

    animation: none;
}

@keyframes fiscal-spin {
    to {
        transform: rotate(360deg);
    }
}


/* ================================================================
   CONTINGÊNCIA
   ================================================================ */

.contingencia-box {
    margin-top: 22px;
    padding: 22px;

    background: #fffbeb;

    border: 1px solid #fde68a;
    border-radius: 14px;
}

.contingencia-box h4 {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 0 0 8px;

    color: #92400e;

    font-size: 15px;
    font-weight: 700;
}

.contingencia-box h4 i {
    color: #f59e0b;
}

.contingencia-box p {
    margin: 0 0 18px;

    color: #78350f;

    font-size: 13px;
    line-height: 1.7;
}

.retransmissao-status {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 16px;
    padding: 12px 14px;

    border-radius: 9px;

    font-size: 12px;
    font-weight: 600;
}

.retransmissao-status.status-success {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.retransmissao-status.status-warning {
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
}

.retransmissao-status.status-processing {
    color: #1d4ed8;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
}

.retransmissao-status.status-error {
    color: #b91c1c;
    background: #fee2e2;
    border: 1px solid #fecaca;
}

.contingencia-table {
    background: #ffffff;
}


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

.fiscal-form {
    display: flex;
    align-items: flex-end;
    gap: 14px;

    margin-top: 24px;
}

.fiscal-form-wrap {
    flex-wrap: wrap;
}

.fiscal-form-field {
    display: flex;
    flex-direction: column;
    gap: 7px;

    min-width: 220px;
}

.fiscal-form-field label {
    color: #334155;

    font-size: 12px;
    font-weight: 600;
}

.fiscal-form-field input,
.fiscal-form-field select {
    width: 100%;
    min-height: 42px;

    padding: 9px 12px;

    color: #0f172a;
    background: #ffffff;

    border: 1px solid #cbd5e1;
    border-radius: 9px;

    outline: none;

    font-family: inherit;
    font-size: 13px;

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

.fiscal-form-field input:focus,
.fiscal-form-field select:focus {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, .10);
}

.fiscal-form-field select {
    min-width: 360px;
}

.fiscal-regime-form {
    display: flex;
    align-items: flex-end;
    gap: 14px;

    max-width: 760px;
    margin-top: 24px;
}


/* ================================================================
   BACKUP XML
   ================================================================ */

.xml-backup-completo {
    display: flex;
    align-items: center;

    margin: 24px 0 28px;
    padding: 20px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.fiscal-section-title {
    margin: 0 0 15px;

    color: #334155;

    font-size: 14px;
    font-weight: 700;
}


/* ================================================================
   MANIFESTAÇÃO
   ================================================================ */

.manifestacao-consulta {
    margin: 22px 0;
}

.manifestacao-table th:last-child,
.manifestacao-table td:last-child {
    min-width: 300px;
}

.manifestacao-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

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

.manifestacao-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 32px;
    padding: 6px 9px;

    border: 1px solid transparent;
    border-radius: 7px;

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .15s ease;
}

.manifestacao-btn:hover {
    transform: translateY(-1px);
}

.manifestacao-ciencia {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.manifestacao-ciencia:hover {
    background: #dbeafe;
}

.manifestacao-confirmar {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.manifestacao-confirmar:hover {
    background: #dcfce7;
}

.manifestacao-desconhecer {
    color: #92400e;
    background: #fffbeb;
    border-color: #fde68a;
}

.manifestacao-desconhecer:hover {
    background: #fef3c7;
}

.manifestacao-nao-realizada {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.manifestacao-nao-realizada:hover {
    background: #fee2e2;
}

.manifestacao-xml {
    color: #475569;
    background: #f8fafc;
    border-color: #cbd5e1;
}

.manifestacao-xml:hover {
    color: #1e293b;
    background: #f1f5f9;
}


/* ================================================================
   MANIFESTAÇÃO - ESTADO VAZIO
   ================================================================ */

.manifestacao-empty {
    display: flex;
    align-items: center;
    gap: 16px;

    margin-top: 22px;
    padding: 22px;

    color: #64748b;

    background: #f8fafc;

    border: 1px dashed #cbd5e1;
    border-radius: 12px;

    font-size: 13px;
    line-height: 1.6;
}

.manifestacao-empty > i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    color: #64748b;

    background: #e2e8f0;

    border-radius: 50%;

    font-size: 17px;
}

.manifestacao-empty strong {
    color: #334155;
}


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

.fiscal-alert {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 20px;
    padding: 13px 15px;

    border-radius: 10px;

    font-size: 13px;
    font-weight: 600;
}

.fiscal-alert-success {
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.fiscal-alert-error {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
}


/* ================================================================
   CRUZAMENTO FISCAL
   ================================================================ */

.fiscal-divergencia-ok {
    color: #166534 !important;

    font-weight: 700;

    white-space: nowrap;
}

.fiscal-divergencia-ok i {
    margin-right: 5px;
}


/* ================================================================
   MODAL DE MANIFESTAÇÃO
   ================================================================ */

.modal-manifestacao {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: none;

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

    padding: 20px;

    background: rgba(15, 23, 42, .62);

    backdrop-filter: blur(4px);

    animation: modal-overlay-in .18s ease;
}

.modal-manifestacao-conteudo {
    width: min(100%, 560px);
    max-height: calc(100vh - 40px);

    overflow-y: auto;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 16px;

    box-shadow:
        0 24px 60px rgba(15, 23, 42, .25);

    animation: modal-content-in .22s ease;
}

.modal-manifestacao-header {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    padding: 20px;

    border-bottom: 1px solid #e2e8f0;
}

.modal-manifestacao-icone {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 11px;

    font-size: 17px;
}

.modal-icone-desconhecer {
    color: #b45309;
    background: #fef3c7;
}

.modal-icone-nao-realizada {
    color: #dc2626;
    background: #fee2e2;
}

.modal-icone-padrao {
    color: #2563eb;
    background: #dbeafe;
}

.modal-manifestacao-titulo {
    flex: 1;
    min-width: 0;
}

.modal-manifestacao-titulo h3 {
    margin: 1px 0 4px;

    color: #0f172a;

    font-size: 16px;
    font-weight: 700;
}

.modal-manifestacao-titulo p {
    margin: 0;

    color: #64748b;

    font-size: 12px;
    line-height: 1.5;
}

.modal-fechar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    color: #64748b;
    background: transparent;

    border: none;
    border-radius: 8px;

    font-size: 16px;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease;
}

.modal-fechar:hover {
    color: #0f172a;
    background: #f1f5f9;
}


/* ================================================================
   CAMPO DE JUSTIFICATIVA
   ================================================================ */

.campo-justificativa {
    padding: 20px;
}

.campo-justificativa label {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 8px;

    color: #334155;

    font-size: 12px;
    font-weight: 700;
}

.campo-justificativa textarea {
    display: block;

    width: 100%;

    min-height: 130px;

    padding: 12px 13px;

    resize: vertical;

    color: #0f172a;
    background: #ffffff;

    border: 1px solid #cbd5e1;
    border-radius: 10px;

    outline: none;

    font-family: inherit;
    font-size: 13px;
    line-height: 1.6;

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

.campo-justificativa textarea::placeholder {
    color: #94a3b8;
}

.campo-justificativa textarea:focus {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, .10);
}

.justificativa-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-top: 8px;
}

.justificativa-ajuda {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #64748b;

    font-size: 11px;
}

.contador-justificativa {
    color: #64748b;

    font-size: 11px;
    font-weight: 600;

    white-space: nowrap;
}


/* ================================================================
   AÇÕES DO MODAL
   ================================================================ */

.modal-manifestacao-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;

    padding: 16px 20px;

    background: #f8fafc;

    border-top: 1px solid #e2e8f0;
}

.btn-modal-cancelar,
.btn-modal-enviar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 39px;
    padding: 9px 14px;

    border-radius: 8px;

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .15s ease;
}

.btn-modal-cancelar {
    color: #475569;
    background: #ffffff;

    border: 1px solid #cbd5e1;
}

.btn-modal-cancelar:hover {
    background: #f1f5f9;
}

.btn-modal-enviar {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    border: 1px solid #2563eb;

    box-shadow:
        0 4px 10px rgba(37, 99, 235, .15);
}

.btn-modal-enviar:hover {
    transform: translateY(-1px);

    box-shadow:
        0 6px 14px rgba(37, 99, 235, .22);
}


/* ================================================================
   ANIMAÇÕES DO MODAL
   ================================================================ */

@keyframes modal-overlay-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modal-content-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

body.modal-aberto {
    overflow: hidden;
}


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

@media (max-width: 1100px) {

    .fiscal-tabs {
        gap: 4px;
    }

    .fiscal-tab {
        padding: 9px 12px;
    }

    .fiscal-content {
        padding: 22px;
    }

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

    .fiscal-table {
        min-width: 750px;
    }

}


@media (max-width: 768px) {

    .fiscal-page-header {
        margin-bottom: 20px;
    }

    .fiscal-page-header h2 {
        font-size: 20px;
    }

    .fiscal-tabs {
        margin-bottom: 18px;
        padding: 5px;

        border-radius: 11px;
    }

    .fiscal-tab {
        min-height: 38px;

        padding: 8px 11px;

        font-size: 12px;
    }

    .fiscal-content {
        padding: 18px;

        border-radius: 13px;
    }

    .fiscal-content h3 {
        font-size: 17px;
    }

    .fiscal-description {
        font-size: 13px;
    }

    .sefaz-status-box {
        align-items: stretch;
        flex-direction: column;
        gap: 13px;
    }

    .sefaz-status-box .fiscal-btn {
        width: 100%;
    }

    .fiscal-form,
    .fiscal-regime-form {
        align-items: stretch;
        flex-direction: column;
    }

    .fiscal-form-field {
        width: 100%;
        min-width: 0;
    }

    .fiscal-form-field select {
        min-width: 0;
    }

    .fiscal-form .fiscal-btn,
    .fiscal-regime-form .fiscal-btn {
        width: 100%;
    }

    .xml-backup-completo {
        align-items: stretch;
        flex-direction: column;
    }

    .xml-backup-completo .fiscal-btn {
        width: 100%;
    }

    .manifestacao-consulta .fiscal-btn {
        width: 100%;
    }

    .manifestacao-empty {
        align-items: flex-start;
    }

    .modal-manifestacao {
        padding: 12px;
    }

    .modal-manifestacao-conteudo {
        max-height: calc(100vh - 24px);
    }

    .modal-manifestacao-acoes {
        flex-direction: column-reverse;
    }

    .btn-modal-cancelar,
    .btn-modal-enviar {
        width: 100%;
    }

}


@media (max-width: 480px) {

    .fiscal-page-header h2 {
        font-size: 18px;
    }

    .fiscal-content {
        padding: 15px;
    }

    .fiscal-content h3 {
        font-size: 16px;
    }

    .fiscal-tabs {
        margin-left: -2px;
        margin-right: -2px;
    }

    .fiscal-tab {
        padding: 8px 10px;
    }

    .fiscal-tab i {
        font-size: 12px;
    }

    .contingencia-box {
        padding: 16px;
    }

    .modal-manifestacao-header {
        padding: 16px;
    }

    .campo-justificativa {
        padding: 16px;
    }

    .modal-manifestacao-acoes {
        padding: 14px 16px;
    }

    .justificativa-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

}

/* ================================================================
   USUARIOS.PHP
   Gerenciamento de usuários
   Seguindo o padrão visual do ValoriumSistemas
   ================================================================ */


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

.usuarios-page-header {
    margin-bottom: 18px;
}

.usuarios-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.usuarios-header-actions .nav-voltar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


/* ================================================================
   DESCRIÇÃO
   ================================================================ */

.usuarios-description {
    margin: 0 0 24px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}


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

.usuarios-alert {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px 16px;

    margin-bottom: 24px;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 600;
}

.usuarios-alert i {
    font-size: 18px;
    flex-shrink: 0;
}

.usuarios-alert-success {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.usuarios-alert-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}


/* ================================================================
   CARD DO FORMULÁRIO
   ================================================================ */

.usuarios-form-card {
    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    padding: 24px;

    margin-bottom: 32px;

    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.04);
}


/* ================================================================
   CABEÇALHO DO FORMULÁRIO
   ================================================================ */

.usuarios-form-header {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 24px;

    padding-bottom: 20px;

    border-bottom: 1px solid #e2e8f0;
}

.usuarios-form-icon {
    width: 44px;
    height: 44px;

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

    flex-shrink: 0;

    border-radius: 10px;

    background: #eff6ff;
    color: #2563eb;

    font-size: 18px;
}

.usuarios-form-header h3 {
    margin: 0 0 4px;

    color: #0f172a;

    font-size: 18px;
    font-weight: 700;
}

.usuarios-form-header p {
    margin: 0;

    color: #64748b;

    font-size: 13px;
    line-height: 1.5;
}


/* ================================================================
   FORMULÁRIO
   ================================================================ */

.usuarios-form {
    width: 100%;
}

.usuarios-form-grid {
    display: grid;

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

    gap: 20px;
}

.usuarios-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.usuarios-form-field label {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #334155;

    font-size: 13px;
    font-weight: 700;
}

.usuarios-form-field label i {
    color: #64748b;

    font-size: 12px;
}

.usuarios-form-field input,
.usuarios-form-field select {
    width: 100%;

    min-height: 44px;

    padding: 10px 13px;

    box-sizing: border-box;

    border: 1px solid #cbd5e1;

    border-radius: 9px;

    background: #ffffff;

    color: #0f172a;

    font-family: inherit;
    font-size: 14px;

    outline: none;

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

.usuarios-form-field input::placeholder {
    color: #94a3b8;
}

.usuarios-form-field input:hover,
.usuarios-form-field select:hover {
    border-color: #94a3b8;
}

.usuarios-form-field input:focus,
.usuarios-form-field select:focus {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.10);
}

.usuarios-form-field select {
    cursor: pointer;
}

.usuarios-field-help {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-top: -2px;

    color: #64748b;

    font-size: 11px;
    line-height: 1.4;
}

.usuarios-field-help i {
    color: #94a3b8;
}


/* ================================================================
   AÇÕES DO FORMULÁRIO
   ================================================================ */

.usuarios-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 24px;

    padding-top: 20px;

    border-top: 1px solid #e2e8f0;
}

.usuarios-btn {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 17px;

    border-radius: 9px;

    border: none;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

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

.usuarios-btn:hover {
    transform: translateY(-1px);
}

.usuarios-btn-primary {
    background: #2563eb;
    color: #ffffff;

    box-shadow:
        0 3px 8px rgba(37, 99, 235, 0.18);
}

.usuarios-btn-primary:hover {
    background: #1d4ed8;
}

.usuarios-btn-secondary {
    background: #f1f5f9;
    color: #475569;

    border: 1px solid #e2e8f0;
}

.usuarios-btn-secondary:hover {
    background: #e2e8f0;
    color: #334155;
}


/* ================================================================
   CABEÇALHO DA LISTA
   ================================================================ */

.usuarios-list-section {
    margin-bottom: 30px;
}

.usuarios-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 15px;
}

.usuarios-list-header h3 {
    margin: 0 0 4px;

    color: #0f172a;

    font-size: 18px;
    font-weight: 700;
}

.usuarios-list-header p {
    margin: 0;

    color: #64748b;

    font-size: 13px;
}

.usuarios-total {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 11px;

    border-radius: 8px;

    background: #f1f5f9;

    color: #475569;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
}

.usuarios-total i {
    color: #64748b;
}


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

.usuarios-table-wrapper {
    width: 100%;

    overflow-x: auto;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.04);
}

.usuarios-table {
    width: 100%;

    min-width: 720px;

    border-collapse: collapse;
}

.usuarios-table thead {
    background: #1a1f2c;
}

.usuarios-table th {
    padding: 13px 15px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    text-align: left;

    white-space: nowrap;
}

.usuarios-table td {
    padding: 13px 15px;

    border-bottom: 1px solid #e2e8f0;

    color: #334155;

    font-size: 13px;

    vertical-align: middle;
}

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

.usuarios-table tbody tr:hover {
    background: #f8fafc;
}

.usuarios-table tbody tr:last-child td {
    border-bottom: none;
}


/* ================================================================
   ID
   ================================================================ */

.usuarios-id {
    color: #64748b !important;

    font-weight: 700;

    white-space: nowrap;
}


/* ================================================================
   NOME
   ================================================================ */

.usuarios-name {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #334155;

    font-weight: 600;

    white-space: nowrap;
}

.usuarios-avatar {
    width: 32px;
    height: 32px;

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

    flex-shrink: 0;

    border-radius: 8px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 12px;
}


/* ================================================================
   E-MAIL
   ================================================================ */

.usuarios-email {
    color: #64748b !important;

    white-space: nowrap;
}

.usuarios-email i {
    margin-right: 6px;

    color: #94a3b8;

    font-size: 11px;
}


/* ================================================================
   NÍVEL / ROLE
   ================================================================ */

.usuarios-role {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 9px;

    border-radius: 7px;

    font-size: 11px;
    font-weight: 700;

    white-space: nowrap;
}

.usuarios-role i {
    font-size: 10px;
}

.usuarios-role-admin {
    background: #eff6ff;
    color: #1d4ed8;
}

.usuarios-role-garcom {
    background: #f1f5f9;
    color: #475569;
}


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

.usuarios-table-actions-header {
    width: 120px;

    text-align: center !important;
}

.usuarios-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.usuarios-delete-form {
    display: inline-flex;

    margin: 0;
}

.usuarios-action-btn {
    width: 34px;
    height: 34px;

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

    border: none;

    border-radius: 8px;

    text-decoration: none;

    cursor: pointer;

    font-size: 12px;

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

.usuarios-action-btn:hover {
    transform: translateY(-1px);
}

.usuarios-action-edit {
    background: #2563eb;
    color: #ffffff;

    box-shadow:
        0 2px 5px rgba(37, 99, 235, 0.15);
}

.usuarios-action-edit:hover {
    background: #1d4ed8;
}

.usuarios-action-delete {
    background: #dc2626;
    color: #ffffff;

    box-shadow:
        0 2px 5px rgba(220, 38, 38, 0.15);
}

.usuarios-action-delete:hover {
    background: #b91c1c;
}


/* ================================================================
   ESTADO VAZIO
   ================================================================ */

.usuarios-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 220px;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    text-align: center;

    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.04);
}

.usuarios-empty-icon {
    width: 54px;
    height: 54px;

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

    margin-bottom: 14px;

    border-radius: 12px;

    background: #f1f5f9;

    color: #94a3b8;

    font-size: 20px;
}

.usuarios-empty h4 {
    margin: 0 0 6px;

    color: #334155;

    font-size: 15px;
    font-weight: 700;
}

.usuarios-empty p {
    margin: 0;

    color: #94a3b8;

    font-size: 13px;
}


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

@media (max-width: 768px) {

    .usuarios-page-header {
        align-items: flex-start;
        gap: 16px;
    }

    .usuarios-header-actions {
        width: auto;
    }

    .usuarios-form-card {
        padding: 18px;
    }

    .usuarios-form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

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

    .usuarios-btn {
        width: 100%;
    }

    .usuarios-list-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .usuarios-total {
        align-self: flex-start;
    }

}


@media (max-width: 480px) {

    .usuarios-page-header {
        flex-direction: column;
    }

    .usuarios-header-actions {
        width: 100%;
    }

    .usuarios-header-actions .nav-voltar {
        width: 100%;

        justify-content: center;
    }

    .usuarios-form-header {
        align-items: flex-start;
    }

    .usuarios-form-icon {
        width: 40px;
        height: 40px;
    }

    .usuarios-form-header h3 {
        font-size: 16px;
    }

    .usuarios-description {
        font-size: 13px;
    }

}

/* ================================================================
   EMITIR_NF.PHP
   Emissão de NFC-e / NF-e
   Seguindo o padrão visual do ValoriumSistemas
   ================================================================ */


/* ================================================================
   PÁGINA
   ================================================================ */

.emitir-nf-page {
    max-width: 900px;
}


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

.emitir-nf-page-header {
    margin-bottom: 24px;
}

.emitir-nf-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.emitir-nf-header-actions .nav-voltar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


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

.emitir-nf-card {
    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    padding: 26px;

    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.04);
}


/* ================================================================
   CABEÇALHO DO CARD
   ================================================================ */

.emitir-nf-card-header {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 22px;
}

.emitir-nf-icon {
    width: 46px;
    height: 46px;

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

    flex-shrink: 0;

    border-radius: 11px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 19px;
}

.emitir-nf-card-header h3 {
    margin: 0 0 5px;

    color: #0f172a;

    font-size: 19px;
    font-weight: 700;
}

.emitir-nf-card-header p {
    margin: 0;

    color: #64748b;

    font-size: 13px;

    line-height: 1.5;
}


/* ================================================================
   IDENTIFICAÇÃO DA COMANDA
   ================================================================ */

.emitir-nf-comanda {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px 16px;

    border: 1px solid #dbeafe;

    border-radius: 10px;

    background: #f8fbff;
}

.emitir-nf-comanda-icon {
    width: 36px;
    height: 36px;

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

    flex-shrink: 0;

    border-radius: 8px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 14px;
}

.emitir-nf-comanda span {
    display: block;

    margin-bottom: 3px;

    color: #64748b;

    font-size: 11px;
    font-weight: 600;
}

.emitir-nf-comanda strong {
    display: block;

    color: #1e3a8a;

    font-size: 16px;
    font-weight: 800;
}


/* ================================================================
   DIVISOR
   ================================================================ */

.emitir-nf-divider {
    height: 1px;

    margin: 24px 0;

    background: #e2e8f0;
}


/* ================================================================
   FORMULÁRIO
   ================================================================ */

.emitir-nf-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.emitir-nf-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.emitir-nf-field label {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #334155;

    font-size: 13px;
    font-weight: 700;
}

.emitir-nf-field label i {
    color: #64748b;

    font-size: 12px;
}

.emitir-nf-field select {
    width: 100%;

    min-height: 44px;

    padding: 10px 13px;

    box-sizing: border-box;

    border: 1px solid #cbd5e1;

    border-radius: 9px;

    background: #ffffff;

    color: #0f172a;

    font-family: inherit;
    font-size: 14px;

    outline: none;

    cursor: pointer;

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

.emitir-nf-field select:hover {
    border-color: #94a3b8;
}

.emitir-nf-field select:focus {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.10);
}

.emitir-nf-help {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #64748b;

    font-size: 11px;

    line-height: 1.5;
}

.emitir-nf-help i {
    color: #94a3b8;
}


/* ================================================================
   BLOCO DE EMISSÃO
   ================================================================ */

.emitir-nf-emissao-box {
    padding: 18px;

    border: 1px solid #e2e8f0;

    border-radius: 11px;

    background: #f8fafc;
}

.emitir-nf-emissao-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-bottom: 17px;
}

.emitir-nf-emissao-icon {
    width: 38px;
    height: 38px;

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

    flex-shrink: 0;

    border-radius: 8px;

    background: #ffffff;

    color: #2563eb;

    border: 1px solid #dbeafe;

    font-size: 14px;
}

.emitir-nf-emissao-header strong {
    display: block;

    margin-bottom: 4px;

    color: #334155;

    font-size: 14px;
    font-weight: 700;
}

.emitir-nf-emissao-header span {
    display: block;

    color: #64748b;

    font-size: 12px;

    line-height: 1.5;
}


/* ================================================================
   CHECKBOX
   ================================================================ */

.emitir-nf-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;

    cursor: pointer;

    color: #1e293b;

    font-size: 13px;
    font-weight: 700;
}

.emitir-nf-checkbox-label input {
    position: absolute;

    opacity: 0;

    width: 1px;
    height: 1px;
}

.emitir-nf-checkbox-custom {
    width: 20px;
    height: 20px;

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

    flex-shrink: 0;

    border: 2px solid #94a3b8;

    border-radius: 5px;

    background: #ffffff;

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

.emitir-nf-checkbox-custom::after {
    content: "";

    width: 8px;
    height: 4px;

    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;

    transform:
        rotate(-45deg)
        scale(0);

    transition:
        transform 0.15s ease;
}

.emitir-nf-checkbox-label input:checked
+ .emitir-nf-checkbox-custom {
    background: #2563eb;

    border-color: #2563eb;
}

.emitir-nf-checkbox-label input:checked
+ .emitir-nf-checkbox-custom::after {
    transform:
        rotate(-45deg)
        scale(1);
}

.emitir-nf-checkbox-label input:focus
+ .emitir-nf-checkbox-custom {
    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12);
}

.emitir-nf-checkbox-text {
    line-height: 1.4;
}


/* ================================================================
   AVISO DA EMISSÃO
   ================================================================ */

.emitir-nf-emissao-help {
    display: flex;
    align-items: flex-start;
    gap: 7px;

    margin-top: 12px;
    padding-left: 30px;

    color: #64748b;

    font-size: 11px;

    line-height: 1.5;
}

.emitir-nf-emissao-help i {
    margin-top: 2px;

    color: #94a3b8;
}


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

.emitir-nf-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    padding-top: 20px;

    border-top: 1px solid #e2e8f0;
}

.emitir-nf-btn {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 18px;

    border-radius: 9px;

    font-family: inherit;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

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

.emitir-nf-btn:hover {
    transform: translateY(-1px);
}

.emitir-nf-btn-primary {
    border: none;

    background: #2563eb;

    color: #ffffff;

    box-shadow:
        0 3px 8px rgba(37, 99, 235, 0.18);
}

.emitir-nf-btn-primary:hover {
    background: #1d4ed8;
}

.emitir-nf-btn-secondary {
    border: 1px solid #e2e8f0;

    background: #f1f5f9;

    color: #475569;
}

.emitir-nf-btn-secondary:hover {
    background: #e2e8f0;

    color: #334155;
}


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

@media (max-width: 768px) {

    .emitir-nf-page-header {
        align-items: flex-start;

        gap: 16px;
    }

    .emitir-nf-header-actions {
        width: auto;
    }

    .emitir-nf-card {
        padding: 20px;
    }

}


@media (max-width: 480px) {

    .emitir-nf-page-header {
        flex-direction: column;
    }

    .emitir-nf-header-actions {
        width: 100%;
    }

    .emitir-nf-header-actions .nav-voltar {
        width: 100%;

        justify-content: center;
    }

    .emitir-nf-card {
        padding: 16px;

        border-radius: 12px;
    }

    .emitir-nf-card-header {
        align-items: flex-start;
    }

    .emitir-nf-card-header h3 {
        font-size: 17px;
    }

    .emitir-nf-emissao-box {
        padding: 15px;
    }

    .emitir-nf-actions {
        flex-direction: column-reverse;

        align-items: stretch;
    }

    .emitir-nf-btn {
        width: 100%;
    }

}

/* ================================================================
   LOGIN - VALORIUM SISTEMAS
   ================================================================ */


/* ================================================================
   PÁGINA
   ================================================================ */

.login-page {

    min-height: 100vh;

    margin: 0;

    padding: 30px 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle at top left,
            rgba(37, 99, 235, 0.12),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(15, 23, 42, 0.10),
            transparent 35%
        ),
        #f8fafc;

    font-family:
        'Plus Jakarta Sans',
        Arial,
        sans-serif;

    box-sizing: border-box;
}


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

.login-card {

    width: 100%;

    max-width: 430px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 18px;

    padding: 38px;

    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.10);

    box-sizing: border-box;

    animation: loginCardEntrada 0.45s ease;
}


/* ================================================================
   ANIMAÇÃO
   ================================================================ */

@keyframes loginCardEntrada {

    from {

        opacity: 0;

        transform:
            translateY(15px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


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

.login-header {

    text-align: center;

    margin-bottom: 30px;
}


.login-logo {

    width: 64px;

    height: 64px;

    margin: 0 auto 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background: #0f172a;

    color: #ffffff;

    font-size: 26px;

    box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.18);
}


.login-header h1 {

    margin: 0;

    color: #0f172a;

    font-size: 1.55rem;

    font-weight: 800;

    letter-spacing: -0.4px;
}


.login-header p {

    margin: 8px 0 0;

    color: #64748b;

    font-size: 0.92rem;

}


/* ================================================================
   ALERTA
   ================================================================ */

.alerta-erro {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 22px;

    padding: 13px 15px;

    border: 1px solid #fecaca;

    border-radius: 10px;

    background: #fef2f2;

    color: #b91c1c;

    font-size: 0.88rem;

    font-weight: 600;

}


.alerta-erro i {

    flex-shrink: 0;

    font-size: 16px;
}


/* ================================================================
   FORMULÁRIO
   ================================================================ */

.login-form {

    width: 100%;
}


/* ================================================================
   GRUPO
   ================================================================ */

.login-form .form-group {

    margin-bottom: 20px;
}


/* ================================================================
   LABEL
   ================================================================ */

.login-form label {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 8px;

    color: #334155;

    font-size: 0.88rem;

    font-weight: 700;
}


.login-form label i {

    color: #64748b;

    font-size: 13px;
}


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

.login-form .input-wrapper {

    position: relative;

    width: 100%;
}


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

.login-form .form-control {

    width: 100%;

    min-height: 48px;

    box-sizing: border-box;

    padding: 12px 14px;

    border: 1px solid #cbd5e1;

    border-radius: 10px;

    background: #ffffff;

    color: #0f172a;

    font-family: inherit;

    font-size: 0.92rem;

    outline: none;

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


.login-form .form-control::placeholder {

    color: #94a3b8;
}


.login-form .form-control:hover {

    border-color: #94a3b8;
}


.login-form .form-control:focus {

    border-color: #2563eb;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12);
}


/* ================================================================
   BOTÃO ENTRAR
   ================================================================ */

.btn-entrar {

    width: 100%;

    min-height: 50px;

    margin-top: 5px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    border: none;

    border-radius: 10px;

    background: #0f172a;

    color: #ffffff;

    font-family: inherit;

    font-size: 0.94rem;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.btn-entrar:hover {

    background: #1e293b;

    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.18);

    transform:
        translateY(-1px);
}


.btn-entrar:active {

    transform:
        translateY(0);

    box-shadow: none;
}


.btn-entrar:focus-visible {

    outline: 3px solid rgba(37, 99, 235, 0.25);

    outline-offset: 2px;
}


/* ================================================================
   RODAPÉ
   ================================================================ */

.login-footer {

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid #e2e8f0;

    text-align: center;

    color: #94a3b8;

    font-size: 0.78rem;
}


.login-footer span {

    display: inline-flex;

    align-items: center;

    gap: 6px;
}


.login-footer i {

    font-size: 12px;
}


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

@media (max-width: 480px) {

    .login-page {

        padding: 20px 14px;

        align-items: center;
    }


    .login-card {

        padding: 28px 22px;

        border-radius: 15px;
    }


    .login-header {

        margin-bottom: 25px;
    }


    .login-logo {

        width: 58px;

        height: 58px;

        margin-bottom: 15px;

        font-size: 23px;
    }


    .login-header h1 {

        font-size: 1.35rem;
    }


    .login-header p {

        font-size: 0.84rem;
    }

}

/* ================================================================
   PERFIL DO USUÁRIO
   ================================================================ */

.perfil-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}


.perfil-description {
    margin: 0 0 20px;
    color: #64748b;
    font-size: 0.95rem;
}


/* ================================================================
   ALERTA
   ================================================================ */

.perfil-alert {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    box-sizing: border-box;

    padding: 13px 16px;

    margin-bottom: 20px;

    border-radius: 10px;

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


.perfil-alert-success {
    background: #ecfdf3;
    color: #166534;
    border: 1px solid #bbf7d0;
}


.perfil-alert-success i {
    font-size: 17px;
}


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

.perfil-card {
    width: 100%;
    max-width: 520px;

    margin: 10px auto 0;

    padding: 32px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    box-shadow:
        0 10px 25px rgba(15, 23, 42, 0.06),
        0 2px 6px rgba(15, 23, 42, 0.04);

    text-align: center;
}


/* ================================================================
   AVATAR
   ================================================================ */

.perfil-avatar {
    width: 82px;
    height: 82px;

    margin: 0 auto 18px;

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

    border-radius: 50%;

    background: #f1f5f9;

    color: #1a1f2c;

    border: 1px solid #e2e8f0;

    font-size: 38px;

    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05);
}


.perfil-nome {
    margin: 0 0 5px;

    color: #1e293b;

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


.perfil-subtitulo {
    margin: 0 0 25px;

    color: #64748b;

    font-size: 0.92rem;
}


/* ================================================================
   INFORMAÇÕES
   ================================================================ */

.perfil-informacoes {
    padding-top: 8px;

    border-top: 1px solid #e2e8f0;

    text-align: left;
}


.perfil-info-item {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 15px 0;

    border-bottom: 1px solid #f1f5f9;
}


.perfil-info-item:last-child {
    border-bottom: none;
    padding-bottom: 4px;
}


.perfil-info-icone {
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

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

    border-radius: 10px;

    background: #f8fafc;

    color: #475569;

    border: 1px solid #e2e8f0;

    font-size: 15px;
}


.perfil-info-conteudo {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.perfil-info-label {
    color: #64748b;

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

    text-transform: uppercase;
    letter-spacing: 0.03em;
}


.perfil-info-conteudo strong {
    color: #334155;

    font-size: 0.95rem;

    font-weight: 600;

    overflow-wrap: anywhere;
}


/* ================================================================
   NÍVEL DE ACESSO
   ================================================================ */

.perfil-nivel {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    padding: 4px 9px;

    border-radius: 6px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 0.76rem;

    font-weight: 800;

    letter-spacing: 0.04em;
}


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

@media (max-width: 768px) {

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

    .perfil-nav {
        width: 100%;
        justify-content: flex-start;
        margin-top: 10px;
    }

}


@media (max-width: 480px) {

    .perfil-card {
        padding: 22px 16px;
        border-radius: 13px;
    }

    .perfil-avatar {
        width: 72px;
        height: 72px;
        font-size: 32px;
    }

    .perfil-nome {
        font-size: 1.2rem;
    }

    .perfil-info-item {
        gap: 10px;
    }

    .perfil-info-icone {
        flex: 0 0 36px;

        width: 36px;
        height: 36px;

        font-size: 14px;
    }

}

/* =========================================================
   STATUS DE PAGAMENTO - FECHAMENTO DA CONTA
   ========================================================= */

.status-item-pagamento {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    font-size: 17px;
    font-weight: 800;

    line-height: 1;
}


/* =========================================================
   ITEM TOTALMENTE PAGO
   ========================================================= */

.status-item-pago {
    color: #15803d;
    background: #dcfce7;
    border: 1px solid #86efac;
}


/* =========================================================
   ITEM PARCIALMENTE PAGO
   ========================================================= */

.status-item-parcial {
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fcd34d;
}


/* =========================================================
   ITEM NÃO PAGO
   ========================================================= */

.status-item-pendente {
    color: #b91c1c;
    background: #fee2e2;
    border: 1px solid #fca5a5;
}

/* =========================================================
   COMANDA - CABEÇALHO / ITENS PAGOS
   ========================================================= */

.comanda-header-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}


.btn-itens-pagos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 38px;
    padding: 8px 14px;

    border: 1px solid #86efac;
    border-radius: 10px;

    background: #dcfce7;

    color: #15803d;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

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


.btn-itens-pagos:hover {
    background: #bbf7d0;

    transform: translateY(-1px);

    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.14);
}


.btn-itens-pagos strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 22px;
    height: 22px;

    padding: 0 6px;

    border-radius: 999px;

    background: #15803d;
    color: #ffffff;

    font-size: 11px;
}


.btn-itens-pagos-vazio {
    margin-top: 14px;
}


/* =========================================================
   PAGAMENTO PARCIAL NO ITEM
   ========================================================= */

.item-pagamento-parcial-texto {
    display: inline-flex;

    margin-top: 5px;
    padding: 3px 8px;

    border-radius: 999px;

    background: #fef3c7;

    color: #92400e;

    font-size: 11px;
    font-weight: 700;
}


.item-bloqueado-pagamento {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: #64748b;

    font-size: 11px;
    font-weight: 600;
}


/* =========================================================
   MODAL ITENS PAGOS
   ========================================================= */

.modal-itens-pagos {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: none;

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

    padding: 24px;
}


.modal-itens-pagos.ativo {
    display: flex;
}


.modal-itens-pagos-overlay {
    position: absolute;
    inset: 0;

    background: rgba(15, 23, 42, 0.68);

    backdrop-filter: blur(4px);
}


.modal-itens-pagos-card {
    position: relative;

    z-index: 1;

    width: min(850px, 100%);
    max-height: 85vh;

    overflow: auto;

    padding: 24px;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.30);
}


.modal-itens-pagos-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}


.modal-itens-pagos-header h3 {
    margin: 4px 0;
}


.modal-itens-pagos-header p {
    margin: 0;

    color: #64748b;
}


.modal-itens-pagos-fechar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border: 0;
    border-radius: 10px;

    background: #f1f5f9;

    color: #334155;

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

    cursor: pointer;
}


.modal-itens-pagos-fechar:hover {
    background: #e2e8f0;
}


.modal-itens-pagos-resumo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 20px;
    padding: 16px 18px;

    border-radius: 12px;

    background: #f8fafc;
}


.modal-itens-pagos-resumo span {
    color: #64748b;

    font-weight: 600;
}


.modal-itens-pagos-resumo strong {
    color: #15803d;

    font-size: 20px;
}


body.modal-aberto {
    overflow: hidden;
}


/* =========================================================
   STATUS DE PAGAMENTO
   ========================================================= */

.status-item-pagamento {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    font-size: 17px;
    font-weight: 800;

    line-height: 1;
}


.status-item-pago {
    color: #15803d;
    background: #dcfce7;
    border: 1px solid #86efac;
}


.status-item-parcial {
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fcd34d;
}


.status-item-pendente {
    color: #b91c1c;
    background: #fee2e2;
    border: 1px solid #fca5a5;
}


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

@media (max-width: 768px) {

    .comanda-header-acoes {
        width: 100%;

        justify-content: flex-start;
    }


    .modal-itens-pagos {
        padding: 12px;
    }


    .modal-itens-pagos-card {
        padding: 16px;

        border-radius: 14px;
    }
}

/* =========================================================
   BADGE CONTAGEM - MESMO TAMANHO DO BOTÃO ITENS PAGOS
   ========================================================= */

.badge-contagem {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 8px 14px;

    border-radius: 10px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
}

/* =========================================================
   TRANSFERÊNCIA - ITEM COM PAGAMENTO
   ========================================================= */

.item-transferencia-bloqueado {
    opacity: 0.72;
    background: #f8fafc;
}


.transferencia-bloqueado {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 8px;

    background: #f1f5f9;
    color: #64748b;

    font-size: 14px;
}


.transferencia-aviso-pagamento {
    margin-bottom: 18px;

    border: 1px solid #fcd34d;

    background: #fffbeb;
}


.transferencia-aviso-pagamento .transferencia-aviso-icon {
    color: #b45309;
}

.action-receive {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.action-receive:hover {
    border-color: #93c5fd;
    background: #dbeafe;
    color: #1e40af;
}

.form-xml input[type="file"]::file-selector-button {
    min-height: 34px;

    margin-right: 12px;
    padding: 0 14px;

    border: 0;
    border-radius: 8px;

    background: linear-gradient(
        135deg,
        #2563eb 0%,
        #1d4ed8 100%
    );

    color: #ffffff;

    cursor: pointer;

    font-size: 10px;
    font-weight: 800;

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

.form-xml input[type="file"]::file-selector-button:hover {
    background: linear-gradient(
        135deg,
        #1d4ed8 0%,
        #1e40af 100%
    );
}

.nota-historico-card,
.nota-itens-card {
    display: block;
    margin-top: 24px;
    overflow: hidden;
}

.nota-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin: 0;
    padding: 22px 24px 16px;
}

.nota-card-heading h3 {
    margin: 5px 0 0;
}

.nota-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.nota-table-wrapper table {
    width: 100%;
    min-width: 1100px;
    margin: 0;
}

.nota-vinculo-form {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 360px;
}

.nota-vinculo-form select {
    flex: 1;
    min-width: 230px;
    padding: 9px 11px;
    border: 1px solid #d8dcec;
    border-radius: 8px;
    background: #fff;
    color: #25283d;
}

.nota-vinculo-form .action-btn {
    white-space: nowrap;
}

.nota-vinculo-status {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100%;
    margin-bottom: 8px;
}

.nota-entrada-confirmacao {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.nota-produto-confirmado {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 180px;
}

.nota-produto-confirmado small {
    margin-bottom: 3px;
    color: #7b829d;
    font-weight: 600;
}

.nota-produto-confirmado strong {
    color: #25283d;
    line-height: 1.3;
}

.nota-confirmar-entrada {
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}

.nota-excluir-importacao {
    border: 1px solid #f0b8bd;
    background: #fff1f2;
    color: #c93442;
    cursor: pointer;
    white-space: nowrap;
}

.nota-excluir-importacao:hover {
    border-color: #df8992;
    background: #ffe3e6;
    color: #a91f2c;
}

.nota-estornar-entrada {
    border: 1px solid #e0a56f;
    background: #fff3e8;
    color: #b65516;
    cursor: pointer;
    white-space: nowrap;
}

.nota-estornar-entrada:hover {
    border-color: #cf8240;
    background: #ffe7d1;
    color: #923d0c;
}

.status-estornado {
    border-color: #c7b8ef !important;
    background: #f2edff !important;
    color: #6544b5 !important;
}

.estorno-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 24, 42, 0.58);
    backdrop-filter: blur(3px);
}

.estorno-modal.is-open {
    display: flex;
}

.estorno-modal-card {
    width: min(540px, 100%);
    overflow: hidden;
    border: 1px solid #e6e8f1;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(20, 24, 42, 0.24);
}

.estorno-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid #eceef5;
}

.estorno-modal-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.estorno-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 11px;
    background: #fff0e3;
    color: #b65516;
}

.estorno-modal-title h3 {
    margin: 0 0 5px;
    color: #20243a;
    font-size: 18px;
}

.estorno-modal-title p {
    margin: 0;
    color: #7b829d;
    font-size: 13px;
    line-height: 1.45;
}

.estorno-modal-close {
    border: 0;
    background: transparent;
    color: #8d93a9;
    cursor: pointer;
    font-size: 18px;
}

.estorno-modal-body {
    padding: 22px 24px;
}

.estorno-modal-alert {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid #f1d0b2;
    border-radius: 10px;
    background: #fff8f1;
    color: #7e451c;
    font-size: 13px;
    line-height: 1.45;
}

.estorno-modal-body label {
    display: block;
    margin-bottom: 8px;
    color: #30354d;
    font-size: 13px;
    font-weight: 700;
}

.estorno-modal-body textarea {
    width: 100%;
    min-height: 118px;
    resize: vertical;
    padding: 12px 14px;
    border: 1px solid #d9ddea;
    border-radius: 10px;
    color: #25283d;
    font: inherit;
}

.estorno-modal-body textarea:focus {
    border-color: #b578e8;
    outline: 3px solid rgba(139, 92, 246, 0.12);
}

.estorno-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 22px;
}

.estorno-modal-cancelar {
    border: 1px solid #d9ddea;
    background: #fff;
    color: #555c76;
    cursor: pointer;
}

.nota-confirmacao-aviso {
    margin: 0 24px 20px;
    padding: 12px 14px;
    border: 1px solid #f0cf62;
    border-radius: 10px;
    background: #fff9df;
    color: #735c00;
    font-size: 13px;
}

.nota-itens-card {
    margin-bottom: 28px;
}

@media (max-width: 768px) {
    .nota-historico-card,
    .nota-itens-card {
        margin-top: 18px;
    }

    .nota-card-heading {
        padding: 18px 16px 14px;
    }

    .nota-entrada-confirmacao {
        width: 100%;
        margin-left: 0;
    }
}

.nota-fiscal-comparacao {
    width: 100%;
    min-width: 245px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #e3e6f1;
    border-radius: 10px;
    background: #f8f9fd;
}

.nota-fiscal-titulo {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: #5c35c9;
    font-size: 12px;
    font-weight: 800;
}

.nota-fiscal-grid {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) minmax(95px, 1fr);
    gap: 6px 10px;
    margin-bottom: 10px;
    font-size: 11px;
}

.nota-fiscal-grid span {
    color: #7c829c;
}

.nota-fiscal-grid strong {
    color: #30354c;
    text-align: right;
}

.nota-fiscal-grid .fiscal-divergente {
    color: #c93442;
}

.nota-fiscal-grid .fiscal-atencao {
    color: #a55a18;
}

.nota-fiscal-alerta,
.nota-fiscal-validado,
.nota-fiscal-sem-alteracao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.nota-fiscal-alerta {
    color: #b32634;
}

.nota-fiscal-validado {
    color: #27813e;
}

.nota-fiscal-sem-alteracao {
    color: #777d95;
}

.nota-aplicar-fiscal {
    width: 100%;
    justify-content: center;
    border: 1px solid #cfc0f4;
    background: #f2edff;
    color: #6544b5;
    cursor: pointer;
}

.nota-aplicar-fiscal:hover {
    border-color: #a98ae5;
    background: #e8ddff;
    color: #50309c;
}

@media (max-width: 768px) {
    .nota-fiscal-comparacao {
        min-width: 0;
    }

    .nota-fiscal-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* =========================================================
   HISTÓRICO DE MOVIMENTAÇÕES DE ESTOQUE
   Adicionar ao final de assets/css/style.css
   ========================================================= */

.inventory-history-page {
    padding-bottom: 40px;
}

.inventory-history-section {
    margin-top: 26px;
}

.inventory-history-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 16px;
}

.inventory-history-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #651fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.inventory-history-heading h3 {
    margin: 7px 0 4px;
    color: #171d35;
    font-size: 22px;
}

.inventory-history-heading p {
    margin: 0;
    color: #8b91aa;
    font-size: 13px;
}

.inventory-history-filters {
    display: grid;
    grid-template-columns: minmax(240px, 2fr) minmax(150px, .8fr) minmax(150px, .8fr) minmax(150px, .8fr) auto;
    gap: 14px;
    align-items: end;
    padding: 20px;
    margin-bottom: 18px;
    border: 1px solid #e4e6f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 9px 24px rgba(40, 45, 80, .06);
}

.inventory-history-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.inventory-history-field label {
    color: #30364d;
    font-size: 12px;
    font-weight: 700;
}

.inventory-history-field select,
.inventory-history-field input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #dfe2ec;
    border-radius: 10px;
    outline: none;
    background: #fff;
    color: #242a42;
    font: inherit;
    font-size: 13px;
}

.inventory-history-field select:focus,
.inventory-history-field input:focus {
    border-color: #7c4dff;
    box-shadow: 0 0 0 3px rgba(124, 77, 255, .11);
}

.inventory-history-filter-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.inventory-history-filter-button,
.inventory-history-clear-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 44px;
    padding: 0 15px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.inventory-history-filter-button {
    border: 0;
    background: linear-gradient(135deg, #651fff, #8b3dff);
    color: #fff;
}

.inventory-history-clear-button {
    border: 1px solid #e0e3ed;
    background: #f7f8fc;
    color: #666d86;
}

.inventory-history-card {
    overflow: hidden;
    border: 1px solid #e3e5ee;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(42, 48, 82, .07);
}

.inventory-history-table-wrapper {
    overflow-x: auto;
}

.inventory-history-table {
    width: 100%;
    min-width: 1180px;
    border-collapse: collapse;
}

.inventory-history-table th {
    padding: 15px 14px;
    border-bottom: 1px solid #e4e6ef;
    background: #f7f8fc;
    color: #9298b1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
}

.inventory-history-table td {
    padding: 16px 14px;
    border-bottom: 1px solid #eceef4;
    color: #3a4058;
    font-size: 12px;
    vertical-align: top;
}

.inventory-history-table tbody tr:last-child td {
    border-bottom: 0;
}

.inventory-history-table td > strong,
.inventory-history-table td > small,
.inventory-history-table td > span,
.inventory-history-table td > a {
    display: block;
}

.inventory-history-table td > small {
    margin-top: 4px;
    color: #8990a8;
}

.inventory-history-product-id {
    margin-bottom: 4px;
    color: #8e94aa;
    font-size: 10px;
    font-weight: 800;
}

.inventory-movement-type,
.inventory-history-status {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    width: max-content;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.inventory-movement-entrada,
.inventory-history-status-active {
    border: 1px solid #bdeac7;
    background: #effcf2;
    color: #27813c;
}

.inventory-movement-saida {
    border: 1px solid #ffcfd2;
    background: #fff2f3;
    color: #c5424b;
}

.inventory-movement-ajuste {
    border: 1px solid #cbd9ff;
    background: #f0f4ff;
    color: #4164bf;
}

.inventory-history-status-reversed {
    border: 1px solid #ffd9a4;
    background: #fff7e9;
    color: #a96708;
}

.inventory-history-quantity {
    white-space: nowrap;
}

.inventory-history-quantity-entrada {
    color: #25803b;
}

.inventory-history-quantity-saida {
    color: #c5424b;
}

.inventory-history-balance {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.inventory-history-balance i {
    color: #a3a8ba;
    font-size: 9px;
}

.inventory-history-reversal-balance {
    color: #a96708 !important;
    white-space: nowrap;
}

.inventory-history-origin-link {
    color: #651fff;
    font-weight: 800;
    text-decoration: none;
}

.inventory-history-origin-link:hover {
    text-decoration: underline;
}

.inventory-history-reason {
    max-width: 220px;
    margin-top: 7px;
    color: #6f758d;
    font-size: 11px;
    line-height: 1.4;
}

.inventory-history-empty {
    padding: 64px 24px;
    color: #8a90a8;
    text-align: center;
}

.inventory-history-empty i {
    margin-bottom: 14px;
    color: #b2a4f8;
    font-size: 38px;
}

.inventory-history-empty h4 {
    margin: 0 0 7px;
    color: #30364d;
}

.inventory-history-empty p {
    margin: 0;
}

.inventory-history-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
}

.inventory-history-pagination a,
.inventory-history-pagination span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 13px;
    border: 1px solid #e0e3ec;
    border-radius: 9px;
    background: #fff;
    color: #5f667f;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.inventory-history-pagination a:hover {
    border-color: #8b5cff;
    color: #651fff;
}

@media (max-width: 1100px) {
    .inventory-history-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-history-product-field,
    .inventory-history-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .inventory-history-filters {
        grid-template-columns: 1fr;
        padding: 15px;
    }

    .inventory-history-product-field,
    .inventory-history-filter-actions {
        grid-column: auto;
    }

    .inventory-history-filter-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .inventory-history-pagination {
        flex-wrap: wrap;
    }
}

/* =========================================================
   MODAL DE AJUSTE MANUAL DE ESTOQUE
   Adicionar ao final de assets/css/style.css
   ========================================================= */

.inventory-history-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 13px 16px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
}

.inventory-history-alert-success {
    border-color: #b7ebc0;
    background: #f0fff3;
    color: #19762b;
}

.inventory-history-alert-error {
    border-color: #ffc7cc;
    background: #fff4f5;
    color: #b42331;
}

.inventory-adjust-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 17px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #651fff, #8b00ff);
    box-shadow: 0 9px 20px rgba(101, 31, 255, .2);
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.inventory-adjust-open:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(101, 31, 255, .28);
}

.inventory-adjust-lock {
    overflow: hidden;
}

.inventory-adjust-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
}

.inventory-adjust-modal.is-open {
    display: flex;
}

.inventory-adjust-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 18, 36, .68);
    backdrop-filter: blur(4px);
}

.inventory-adjust-dialog {
    position: relative;
    width: min(100%, 620px);
    max-height: calc(100vh - 44px);
    overflow-y: auto;
    border: 1px solid rgba(101, 31, 255, .13);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(21, 20, 48, .3);
}

.inventory-adjust-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 25px 27px 21px;
    border-bottom: 1px solid #eceef5;
}

.inventory-adjust-header h3 {
    margin: 8px 0 5px;
    color: #171a33;
    font-size: 22px;
}

.inventory-adjust-header p {
    margin: 0;
    color: #858ba3;
    font-size: 12px;
}

.inventory-adjust-close {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    height: 38px;
    border: 1px solid #e2e4ed;
    border-radius: 10px;
    background: #f8f8fc;
    color: #6f758d;
    cursor: pointer;
}

.inventory-adjust-form {
    display: grid;
    gap: 18px;
    padding: 24px 27px 27px;
}

.inventory-adjust-field {
    display: grid;
    gap: 8px;
}

.inventory-adjust-field label {
    color: #252941;
    font-size: 12px;
    font-weight: 800;
}

.inventory-adjust-field input,
.inventory-adjust-field select,
.inventory-adjust-field textarea {
    width: 100%;
    border: 1px solid #dfe2ec;
    border-radius: 11px;
    outline: none;
    background: #fff;
    color: #252941;
    font: inherit;
    font-size: 13px;
    transition: border-color .2s, box-shadow .2s;
}

.inventory-adjust-field input,
.inventory-adjust-field select {
    min-height: 46px;
    padding: 0 13px;
}

.inventory-adjust-field textarea {
    min-height: 100px;
    padding: 13px;
    resize: vertical;
}

.inventory-adjust-field input:focus,
.inventory-adjust-field select:focus,
.inventory-adjust-field textarea:focus {
    border-color: #8b5cff;
    box-shadow: 0 0 0 3px rgba(101, 31, 255, .1);
}

.inventory-adjust-field input[readonly] {
    background: #f5f6fa;
    color: #676d85;
}

.inventory-adjust-field small {
    color: #9196aa;
    font-size: 11px;
}

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

.inventory-adjust-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 3px;
}

.inventory-adjust-cancel,
.inventory-adjust-submit {
    min-height: 42px;
    padding: 0 17px;
    border-radius: 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.inventory-adjust-cancel {
    border: 1px solid #dfe2ec;
    background: #fff;
    color: #656b83;
}

.inventory-adjust-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    background: linear-gradient(135deg, #651fff, #8b00ff);
    color: #fff;
}

.inventory-history-adjustment-reason {
    max-width: 230px;
    margin-top: 4px;
    color: #777d94;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .inventory-history-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .inventory-adjust-open {
        width: 100%;
    }

    .inventory-adjust-modal {
        align-items: flex-end;
        padding: 0;
    }

    .inventory-adjust-dialog {
        width: 100%;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
    }

    .inventory-adjust-header,
    .inventory-adjust-form {
        padding-right: 19px;
        padding-left: 19px;
    }

    .inventory-adjust-values {
        grid-template-columns: 1fr;
    }

    .inventory-adjust-actions {
        flex-direction: column-reverse;
    }

    .inventory-adjust-cancel,
    .inventory-adjust-submit {
        width: 100%;
    }
}

.table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-width: 430px;
}

.form-pagamento-despesa {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.form-pagamento-despesa .form-control {
    flex: 1 1 230px;
    min-width: 210px;
    width: auto;
    margin: 0;
}

.form-pagamento-despesa .action-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.table-actions > form:not(.form-pagamento-despesa) {
    flex: 0 0 auto;
    margin: 0;
}

.table-actions .action-btn {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

@media (max-width: 900px) {
    .table-actions {
        min-width: 280px;
        flex-wrap: wrap;
    }

    .form-pagamento-despesa {
        width: 100%;
        flex-wrap: wrap;
    }

    .form-pagamento-despesa .form-control {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }
}

.finance-table th:last-child,
.finance-table td:last-child {
    min-width: 430px;
}

.payment-feedback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    margin: 0 0 24px;
    padding: 16px 18px;
    border: 1px solid;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.payment-feedback-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.payment-feedback-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

.payment-feedback-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.payment-feedback-text strong {
    font-size: 14px;
    line-height: 1.35;
}

.payment-feedback-text span {
    font-size: 13px;
    line-height: 1.45;
}

.payment-feedback-error {
    color: #991b1b;
    background: #fff1f2;
    border-color: #fecdd3;
}

.payment-feedback-error .payment-feedback-icon {
    color: #ffffff;
    background: #dc2626;
}

.payment-feedback-success {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.payment-feedback-success .payment-feedback-icon {
    color: #ffffff;
    background: #16a34a;
}

.payment-feedback-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 10px 15px;
    color: #ffffff;
    background: #dc2626;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.payment-feedback-action:hover {
    color: #ffffff;
    background: #b91c1c;
    transform: translateY(-1px);
}

@media (max-width: 700px) {
    .payment-feedback {
        align-items: stretch;
        flex-direction: column;
    }

    .payment-feedback-action {
        width: 100%;
    }
}
/* =========================================================
   VALORIUM SISTEMAS
   CONFIGURAR CLIENTE
   CABEÇALHO PADRÃO DO SISTEMA
   ========================================================= */

.client-config-standard-header {
    position: relative;

    overflow: hidden;

    margin-bottom: 26px;

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

    background:
        linear-gradient(
            135deg,
            #111827 0%,
            #1e293b 55%,
            #312e81 100%
        );

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

    animation: fadeUp .45s ease both;
}

.client-config-standard-header::before {
    content: "";

    position: absolute;

    width: 340px;
    height: 340px;

    top: -190px;
    right: -100px;

    border-radius: 50%;

    background:
        rgba(99, 102, 241, .22);

    filter: blur(5px);

    pointer-events: none;
}

.client-config-standard-header::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    right: 25%;
    bottom: -175px;

    border-radius: 50%;

    background:
        rgba(59, 130, 246, .12);

    pointer-events: none;
}

.client-config-standard-content {
    position: relative;

    z-index: 2;

    min-height: 205px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 22px;

    padding: 38px 42px;
}

.client-config-standard-main {
    width: 100%;

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

    gap: 32px;
}

.client-config-standard-info {
    min-width: 0;
}

.client-config-standard-info .page-brand {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 11px;

    color: #a5b4fc;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}

.client-config-standard-info .page-brand i {
    color: #818cf8;

    font-size: 13px;
}

.client-config-standard-info h1 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            28px,
            4vw,
            38px
        );

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -1px;
}

.client-config-standard-info p {
    max-width: 680px;

    margin: 12px 0 0;

    color: #cbd5e1;

    font-size: 14px;

    line-height: 1.7;
}


/* ---------------------------------------------------------
   ÍCONE
   --------------------------------------------------------- */

.client-config-standard-icon {
    width: 76px;
    height: 76px;

    flex: 0 0 76px;

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

    border:
        1px solid
        rgba(255, 255, 255, .12);

    border-radius: 20px;

    background:
        rgba(255, 255, 255, .08);

    color: #a5b4fc;

    font-size: 30px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .08),
        0 10px 30px
        rgba(0, 0, 0, .15);

    transition:
        transform var(--transition),
        background var(--transition);
}

.client-config-standard-header:hover
.client-config-standard-icon {
    transform: scale(1.04);

    background:
        rgba(255, 255, 255, .12);
}


/* ---------------------------------------------------------
   NAVEGAÇÃO
   --------------------------------------------------------- */

.client-config-standard-navigation {
    position: relative;

    z-index: 3;

    display: flex;
    align-items: center;

    gap: 9px;
}

.client-config-header-back {
    min-height: 39px;

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

    gap: 8px;

    padding: 0 14px;

    border:
        1px solid
        rgba(255, 255, 255, .12);

    border-radius: 9px;

    background:
        rgba(255, 255, 255, .08);

    color: #cbd5e1;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.client-config-header-back:hover {
    transform: translateY(-2px);

    border-color:
        rgba(165, 180, 252, .28);

    background:
        rgba(255, 255, 255, .15);

    color: #ffffff;
}

.client-config-header-back i {
    font-size: 12px;
}


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

@media (max-width: 800px) {

    .client-config-standard-content {
        padding: 32px;
    }

    .client-config-standard-main {
        align-items: flex-start;
    }

    .client-config-standard-icon {
        width: 60px;
        height: 60px;

        flex-basis: 60px;

        border-radius: 16px;

        font-size: 24px;
    }

}


@media (max-width: 650px) {

    .client-config-standard-header {
        border-radius: 18px;
    }

    .client-config-standard-content {
        min-height: auto;

        padding: 28px 23px;
    }

    .client-config-standard-main {
        flex-direction: column;

        gap: 20px;
    }

    .client-config-standard-icon {
        display: none;
    }

    .client-config-standard-info h1 {
        font-size: 29px;
    }

    .client-config-standard-info p {
        font-size: 13px;
    }

    .client-config-standard-navigation {
        width: 100%;
    }

    .client-config-header-back {
        width: 100%;
    }

}


@media (max-width: 430px) {

    .client-config-standard-content {
        padding: 25px 20px;
    }

    .client-config-standard-info .page-brand {
        font-size: 10px;
    }

    .client-config-standard-info h1 {
        font-size: 26px;
    }

}

/* =========================================================
   VALORIUM SISTEMAS
   CONFIGURAR CLIENTE
   CARDS + BOTÕES PREMIUM
   ========================================================= */


/* =========================================================
   GRID
   ========================================================= */

.client-config-page .config-grid {
    display: grid;

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

    gap: 24px;

    margin-top: 24px;
}


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

.client-config-page .config-card {
    position: relative;

    min-height: 300px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    padding: 28px 28px 26px;

    border:
        1px solid
        rgba(148, 163, 184, 0.22);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(250, 251, 255, 0.98) 100%
        );

    box-shadow:
        0 3px 8px rgba(15, 23, 42, 0.025),
        0 18px 45px rgba(15, 23, 42, 0.055);

    isolation: isolate;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}


/* detalhe superior */
.client-config-page .config-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #4f46e5 0%,
            #6366f1 45%,
            #8b5cf6 100%
        );

    opacity: .88;

    z-index: 2;
}


/* brilho decorativo */
.client-config-page .config-card::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    top: -100px;
    right: -85px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(99, 102, 241, 0.13) 0%,
            rgba(99, 102, 241, 0.045) 50%,
            transparent 72%
        );

    pointer-events: none;

    z-index: -1;
}


.client-config-page .config-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(99, 102, 241, 0.22);

    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.045),
        0 28px 55px rgba(15, 23, 42, 0.095);
}


/* =========================================================
   ÍCONE DO CARD
   ========================================================= */

.client-config-page .config-card-icon {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

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

    margin-bottom: 22px;

    border:
        1px solid
        rgba(99, 102, 241, 0.10);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #eef2ff 0%,
            #e8edff 100%
        );

    color: #4f46e5;

    font-size: 20px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 7px 18px rgba(79, 70, 229, 0.10);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.client-config-page .config-card:hover
.config-card-icon {
    transform:
        translateY(-2px)
        scale(1.04);

    background:
        linear-gradient(
            145deg,
            #e9edff,
            #dde5ff
        );

    box-shadow:
        0 10px 24px rgba(79, 70, 229, .16);
}


/* =========================================================
   TÍTULOS
   ========================================================= */

.client-config-page .config-card h2 {
    margin:
        0 0 12px;

    color:
        #111827;

    font-size:
        20px;

    font-weight:
        800;

    letter-spacing:
        -0.035em;

    line-height:
        1.25;
}


.client-config-page .config-card p {
    margin:
        5px 0;

    color:
        #64748b;

    font-size:
        13px;

    line-height:
        1.6;
}


.client-config-page .config-card p strong {
    color:
        #1e293b;

    font-weight:
        800;
}


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

.client-config-page .status-badge {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    gap: 7px;

    margin-top: 16px;

    padding:
        7px 11px;

    border:
        1px solid
        rgba(148, 163, 184, .20);

    border-radius:
        999px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8fafc
        );

    color:
        #475569;

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        .02em;

    box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.035);
}


/* verde */
.client-config-page .status-badge[style*="#067647"],
.client-config-page .status-badge.success {
    border-color:
        #bbf7d0 !important;

    background:
        linear-gradient(
            180deg,
            #f0fdf4,
            #e8faef
        ) !important;

    color:
        #15803d !important;
}


/* vermelho */
.client-config-page .status-badge[style*="#b42318"],
.client-config-page .status-badge.danger {
    border-color:
        #fecaca !important;

    background:
        linear-gradient(
            180deg,
            #fef2f2,
            #fff7f7
        ) !important;

    color:
        #b91c1c !important;
}


/* amarelo */
.client-config-page .status-badge[style*="#93370d"],
.client-config-page .status-badge.warning {
    border-color:
        #fed7aa !important;

    background:
        linear-gradient(
            180deg,
            #fff7ed,
            #fffaf5
        ) !important;

    color:
        #c2410c !important;
}


/* =========================================================
   ÁREA DE AÇÕES DO CARD
   ========================================================= */

.client-config-page .config-card > div:last-child {
    margin-top: auto;
}


/* =========================================================
   BOTÃO SECUNDÁRIO PREMIUM
   Editar / Abrir / Substituir
   ========================================================= */

.client-config-page .config-card .back-button {
    min-height: 44px;

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

    gap: 9px;

    margin-top: 14px;

    padding:
        0 16px;

    border:
        1px solid
        #d8dee8;

    border-radius:
        11px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcfe 100%
        );

    color:
        #172033;

    font-size:
        12px;

    font-weight:
        800;

    text-decoration:
        none;

    box-shadow:
        0 2px 5px rgba(15, 23, 42, .025);

    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease,
        color .22s ease;
}


.client-config-page .config-card .back-button i {
    color:
        #4f46e5;

    font-size:
        12px;

    transition:
        transform .22s ease;
}


.client-config-page .config-card .back-button:hover {
    transform:
        translateY(-2px);

    border-color:
        #c7d2fe;

    background:
        linear-gradient(
            180deg,
            #f7f8ff 0%,
            #eef2ff 100%
        );

    color:
        #3730a3;

    box-shadow:
        0 8px 20px
        rgba(79, 70, 229, .10);
}


.client-config-page .config-card .back-button:hover i {
    transform:
        translateX(2px);
}


/* =========================================================
   BOTÃO PRINCIPAL DOS FORMULÁRIOS
   ========================================================= */

.client-config-page button[type="submit"] {
    min-height:
        46px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    padding:
        0 19px;

    border:
        1px solid
        rgba(79, 70, 229, .65);

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            #4f46e5 0%,
            #6366f1 55%,
            #7c3aed 100%
        );

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        800;

    cursor:
        pointer;

    box-shadow:
        0 7px 18px
        rgba(79, 70, 229, .20);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease;
}


.client-config-page button[type="submit"]:hover {
    transform:
        translateY(-2px);

    filter:
        brightness(1.035);

    box-shadow:
        0 11px 26px
        rgba(79, 70, 229, .27);
}


.client-config-page button[type="submit"]:active {
    transform:
        translateY(0)
        scale(.985);
}


/* =========================================================
   CARD 1 - EMPRESA
   ========================================================= */

.client-config-page
.config-card:nth-child(1)::before {
    background:
        linear-gradient(
            90deg,
            #2563eb,
            #4f46e5
        );
}


/* =========================================================
   CARD 2 - FISCAL
   ========================================================= */

.client-config-page
.config-card:nth-child(2)::before {
    background:
        linear-gradient(
            90deg,
            #4f46e5,
            #7c3aed
        );
}


/* =========================================================
   CARD 3 - CERTIFICADO
   ========================================================= */

.client-config-page
.config-card:nth-child(3)::before {
    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #9333ea
        );
}


/* =========================================================
   CARD 4 - DIAGNÓSTICO
   ========================================================= */

.client-config-page
.config-card:nth-child(4)::before {
    background:
        linear-gradient(
            90deg,
            #2563eb,
            #0891b2
        );
}


/* =========================================================
   ÍCONES INDIVIDUAIS
   ========================================================= */

.client-config-page
.config-card:nth-child(1)
.config-card-icon {
    color:
        #2563eb;

    background:
        #eff6ff;
}


.client-config-page
.config-card:nth-child(2)
.config-card-icon {
    color:
        #4f46e5;

    background:
        #eef2ff;
}


.client-config-page
.config-card:nth-child(3)
.config-card-icon {
    color:
        #7c3aed;

    background:
        #f5f3ff;
}


.client-config-page
.config-card:nth-child(4)
.config-card-icon {
    color:
        #0891b2;

    background:
        #ecfeff;
}


/* =========================================================
   BANNER VALORIUM MASTER MAIS PREMIUM
   ========================================================= */

.client-config-page .master-banner {
    position:
        relative;

    overflow:
        hidden;

    margin-bottom:
        24px;

    padding:
        20px 22px;

    border:
        1px solid
        rgba(255, 255, 255, .08);

    border-radius:
        17px;

    background:
        linear-gradient(
            120deg,
            #0f172a 0%,
            #172033 55%,
            #1e293b 100%
        );

    box-shadow:
        0 14px 34px
        rgba(15, 23, 42, .13);
}


.client-config-page .master-banner::before {
    content:
        "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    right:
        -55px;

    top:
        -70px;

    border-radius:
        50%;

    background:
        rgba(99, 102, 241, .10);
}


.client-config-page .master-banner > i {
    width:
        48px;

    height:
        48px;

    flex:
        0 0 48px;

    border:
        1px solid
        rgba(255, 255, 255, .08);

    background:
        rgba(255, 255, 255, .09);

    color:
        #ffffff;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .08);
}


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

@media (max-width: 850px) {

    .client-config-page .config-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 650px) {

    .client-config-page .config-grid {
        gap:
            16px;
    }

    .client-config-page .config-card {
        min-height:
            auto;

        padding:
            23px;

        border-radius:
            18px;
    }

    .client-config-page .config-card-icon {
        width:
            48px;

        height:
            48px;

        flex-basis:
            48px;
    }

    .client-config-page
    .config-card .back-button {
        width:
            100%;
    }

}

/* =========================================================
   VALORIUM SISTEMAS
   CONFIGURAR CLIENTE
   TELAS INTERNAS PREMIUM
   ========================================================= */


/* =========================================================
   IDENTIFICAÇÃO DAS TELAS
   ========================================================= */

/*
   EMPRESA:
   section que contém salvar_empresa

   FISCAL:
   section que contém salvar_fiscal

   CERTIFICADO:
   section que contém salvar_certificado

   DIAGNÓSTICO:
   section que contém executar_diagnostico
*/


/* =========================================================
   VALORIUM SISTEMAS
   CONFIGURAR CLIENTE
   TELAS INTERNAS PREMIUM
   SEM :has()
   ========================================================= */


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

.client-section {
    --section-accent: #4f46e5;
    --section-accent-2: #6366f1;
    --section-soft: #eef2ff;
    --section-glow: rgba(79, 70, 229, .12);

    position: relative;
    overflow: hidden;

    margin-top: 30px !important;

    padding: 0 !important;

    border:
        1px solid
        rgba(148, 163, 184, .20) !important;

    border-radius:
        24px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbfcff 100%
        ) !important;

    box-shadow:
        0 5px 15px rgba(15, 23, 42, .035),
        0 25px 60px rgba(15, 23, 42, .075) !important;

    animation:
        clientSectionIn .38s ease both;
}


.client-section::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--section-accent),
            var(--section-accent-2)
        );

    z-index: 5;
}


.client-section::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -130px;
    top: -160px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            var(--section-glow),
            transparent 68%
        );

    pointer-events: none;

    z-index: 0;
}


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

.client-section > div:first-child {
    position: relative;

    z-index: 2;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 25px !important;

    margin: 0 !important;

    padding: 30px 32px 26px !important;

    border-bottom:
        1px solid #edf0f5;

    background:
        linear-gradient(
            180deg,
            rgba(248, 250, 252, .84),
            rgba(255, 255, 255, .95)
        );
}


.client-section > div:first-child small {
    display: inline-flex !important;
    align-items: center;

    width: fit-content;

    margin-bottom: 7px !important;

    padding: 5px 9px;

    border-radius: 7px;

    background:
        var(--section-soft);

    color:
        var(--section-accent) !important;

    font-size: 9px !important;
    font-weight: 900 !important;

    letter-spacing: .10em !important;

    text-transform: uppercase;
}


.client-section > div:first-child h2 {
    margin: 0 !important;

    color: #111827;

    font-size: 24px;

    font-weight: 850;

    letter-spacing: -.035em;

    line-height: 1.2;
}


.client-section > div:first-child p {
    margin: 7px 0 0 !important;

    max-width: 700px;

    color:
        #64748b !important;

    font-size: 13px;

    line-height: 1.65;
}


/* =========================================================
   FECHAR / VOLTAR
   ========================================================= */

.client-section
> div:first-child
> .back-button {
    flex-shrink: 0;

    min-height: 42px;

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

    gap: 8px;

    padding: 0 15px;

    border:
        1px solid #e2e8f0;

    border-radius: 10px;

    background:
        #ffffff;

    color:
        #475569;

    font-size: 11px;
    font-weight: 800;

    box-shadow:
        0 3px 9px
        rgba(15, 23, 42, .035);

    transition:
        transform .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}


.client-section
> div:first-child
> .back-button:hover {
    transform:
        translateY(-2px);

    border-color:
        #c7d2fe;

    color:
        var(--section-accent);

    box-shadow:
        0 8px 20px
        var(--section-glow);
}


/* =========================================================
   FORMS
   ========================================================= */

.client-section form {
    position: relative;

    z-index: 2;
}


/* =========================================================
   LABELS
   ========================================================= */

.client-section form label {
    display: block;

    margin-bottom: 7px;

    color:
        #334155 !important;

    font-size: 11px !important;
    font-weight: 800 !important;

    letter-spacing: .01em;
}


/* =========================================================
   CAMPOS
   ========================================================= */

.client-section form
input:not([type="hidden"]):not([type="submit"]):not([type="button"]),
.client-section form select,
.client-section form textarea {
    width: 100%;

    min-height: 47px;

    box-sizing: border-box;

    margin-top:
        7px !important;

    padding:
        11px 13px !important;

    border:
        1px solid
        #dbe2ea !important;

    border-radius:
        11px !important;

    outline:
        none;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fdfdff
        ) !important;

    color:
        #172033 !important;

    font-size:
        13px !important;

    box-shadow:
        inset 0 1px 1px
        rgba(15, 23, 42, .015);

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


.client-section form
input:not([type="hidden"]):hover,
.client-section form select:hover,
.client-section form textarea:hover {
    border-color:
        #c7ced9 !important;
}


.client-section form
input:not([type="hidden"]):focus,
.client-section form select:focus,
.client-section form textarea:focus {
    border-color:
        var(--section-accent) !important;

    background:
        #ffffff !important;

    box-shadow:
        0 0 0 4px
        var(--section-glow) !important;
}


.client-section form input::placeholder,
.client-section form textarea::placeholder {
    color:
        #9ca3af;
}


.client-section form select {
    cursor: pointer;
}


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

.client-section input[type="file"] {
    padding:
        7px !important;

    background:
        #f8fafc !important;
}


.client-section
input[type="file"]::file-selector-button {
    margin-right:
        12px;

    padding:
        9px 13px;

    border: 0;

    border-radius:
        8px;

    background:
        var(--section-soft);

    color:
        var(--section-accent);

    font-size:
        11px;

    font-weight:
        800;

    cursor:
        pointer;
}


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

.client-section
button[type="submit"] {
    min-height:
        47px !important;

    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    padding:
        0 20px !important;

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

    border-radius:
        11px !important;

    background:
        linear-gradient(
            135deg,
            var(--section-accent),
            var(--section-accent-2)
        ) !important;

    color:
        #ffffff !important;

    font-size:
        12px !important;

    font-weight:
        850 !important;

    cursor:
        pointer !important;

    box-shadow:
        0 8px 20px
        var(--section-glow) !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease !important;
}


.client-section
button[type="submit"]:hover {
    transform:
        translateY(-2px);

    filter:
        brightness(1.04);

    box-shadow:
        0 12px 27px
        var(--section-glow) !important;
}


/* =========================================================
   EMPRESA
   ========================================================= */

.client-section-empresa {
    --section-accent: #2563eb;
    --section-accent-2: #4f46e5;
    --section-soft: #eff6ff;
    --section-glow: rgba(37, 99, 235, .14);
}


.client-section-empresa form {
    padding:
        30px 32px 32px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 100%
        );
}


.client-section-empresa
form > div[style*="grid"] {
    gap:
        20px !important;
}


/* =========================================================
   FISCAL
   ========================================================= */

.client-section-fiscal {
    --section-accent: #4f46e5;
    --section-accent-2: #7c3aed;
    --section-soft: #eef2ff;
    --section-glow: rgba(79, 70, 229, .14);
}


.client-section-fiscal form {
    margin:
        25px 32px !important;

    padding:
        25px !important;

    border:
        1px solid #e5e7eb;

    border-radius:
        16px;

    background:
        #ffffff;

    box-shadow:
        0 7px 25px
        rgba(15, 23, 42, .045);
}


.client-section-fiscal form h3 {
    margin:
        0 0 7px;

    color:
        #111827;

    font-size:
        17px;

    font-weight:
        850;

    letter-spacing:
        -.025em;
}


.client-section-fiscal form p {
    color:
        #64748b;

    font-size:
        12px;

    line-height:
        1.6;
}


/* bloco CSC */

.client-section-fiscal .fiscal-csc-kicker {
    display: inline-flex;

    margin:
        5px 32px 8px !important;

    padding:
        6px 10px;

    border-radius:
        7px;

    background:
        #eef2ff;

    color:
        #4f46e5;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}


.client-section-fiscal .fiscal-csc-title {
    margin:
        0 32px 8px !important;

    color:
        #172033;

    font-size:
        20px;

    font-weight:
        850;

    letter-spacing:
        -.025em;
}


.client-section-fiscal .fiscal-csc-description {
    margin:
        0 32px 20px !important;

    color:
        #64748b;

    font-size:
        13px;

    line-height:
        1.65;
}


.client-section-fiscal .fiscal-csc-status {
    margin:
        0 32px !important;

    padding:
        15px 17px;

    border:
        1px solid #e2e8f0;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #f8fafc,
            #ffffff
        );

    color:
        #475569;

    box-shadow:
        0 3px 12px
        rgba(15, 23, 42, .025);
}


.client-section-fiscal .fiscal-csc-form {
    position: relative;

    margin:
        24px 32px 32px !important;

    padding:
        26px !important;

    overflow:
        hidden;

    border:
        1px solid
        #ddd6fe !important;

    border-radius:
        17px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fbfaff
        ) !important;

    box-shadow:
        0 8px 25px
        rgba(79, 70, 229, .045);
}


.client-section-fiscal
.fiscal-csc-form::before {
    content: "";

    position: absolute;

    top: 18px;
    bottom: 18px;
    left: 0;

    width:
        3px;

    border-radius:
        0 5px 5px 0;

    background:
        linear-gradient(
            180deg,
            #6366f1,
            #8b5cf6
        );
}


/* =========================================================
   CERTIFICADO
   ========================================================= */

.client-section-certificado {
    --section-accent: #7c3aed;
    --section-accent-2: #4f46e5;
    --section-soft: #f5f3ff;
    --section-glow: rgba(124, 58, 237, .14);
}


.client-section-certificado form {
    padding:
        30px 32px 32px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fcfbff 100%
        );
}


.client-section-certificado
input[type="file"] {
    min-height:
        58px;

    border:
        1px dashed
        #c4b5fd !important;

    background:
        linear-gradient(
            145deg,
            #faf5ff,
            #ffffff
        ) !important;
}


.client-section-certificado
input[type="password"] {
    border-color:
        #ddd6fe !important;
}


/* =========================================================
   DIAGNÓSTICO
   ========================================================= */

.client-section-diagnostico {
    --section-accent: #0891b2;
    --section-accent-2: #2563eb;
    --section-soft: #ecfeff;
    --section-glow: rgba(8, 145, 178, .14);
}


.client-section-diagnostico form {
    position:
        relative;

    z-index:
        2;

    padding:
        0 32px 26px !important;

    margin:
        0 !important;
}


.client-section-diagnostico
button[type="submit"] {
    min-width:
        220px;
}


.client-section-diagnostico
> div[style*="grid-template-columns"] {
    position:
        relative;

    z-index:
        2;

    padding:
        0 32px 32px;

    gap:
        14px !important;
}


.client-section-diagnostico
> div[style*="grid-template-columns"]
> article {
    position:
        relative;

    overflow:
        hidden;

    padding:
        20px !important;

    border:
        1px solid
        #e5e7eb !important;

    border-radius:
        15px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fbfdff
        ) !important;

    box-shadow:
        0 5px 17px
        rgba(15, 23, 42, .04);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.client-section-diagnostico
> div[style*="grid-template-columns"]
> article:hover {
    transform:
        translateY(-3px);

    border-color:
        #bae6fd !important;

    box-shadow:
        0 12px 28px
        rgba(8, 145, 178, .08);
}


.client-section-diagnostico article h3 {
    color:
        #172033;

    font-size:
        15px !important;

    font-weight:
        850;

    letter-spacing:
        -.02em;
}


.client-section-diagnostico details {
    margin-top:
        15px !important;

    padding:
        10px 12px;

    border:
        1px solid
        #edf0f5;

    border-radius:
        9px;

    background:
        #f8fafc;
}


.client-section-diagnostico summary {
    color:
        #334155 !important;

    font-size:
        11px;

    font-weight:
        800 !important;
}


/* =========================================================
   ANIMAÇÃO
   ========================================================= */

@keyframes clientSectionIn {

    from {
        opacity:
            0;

        transform:
            translateY(10px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}


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

@media (max-width: 850px) {

    .client-section
    > div:first-child {
        align-items:
            flex-start !important;

        flex-direction:
            column;

        padding:
            25px !important;
    }


    .client-section
    > div:first-child
    .back-button {
        width:
            100%;
    }


    .client-section-empresa form,
    .client-section-certificado form {
        padding:
            25px !important;
    }


    .client-section-fiscal form {
        margin:
            20px 25px !important;
    }


    .client-section-diagnostico
    > div[style*="grid-template-columns"] {
        grid-template-columns:
            1fr !important;

        padding:
            0 25px 25px;
    }
}


@media (max-width: 600px) {

    .client-section {
        border-radius:
            18px !important;
    }


    .client-section
    > div:first-child {
        padding:
            22px 20px !important;
    }


    .client-section
    > div:first-child h2 {
        font-size:
            21px;
    }


    .client-section-empresa form,
    .client-section-certificado form {
        padding:
            21px 20px !important;
    }


    .client-section-fiscal form {
        margin:
            16px 20px !important;

        padding:
            20px !important;
    }


    .client-section
    button[type="submit"] {
        width:
            100%;
    }


    .client-section-diagnostico form {
        padding:
            0 20px 20px !important;
    }


    .client-section-diagnostico
    > div[style*="grid-template-columns"] {
        padding:
            0 20px 20px;
    }


    .client-section-fiscal .fiscal-csc-kicker,
    .client-section-fiscal .fiscal-csc-title,
    .client-section-fiscal .fiscal-csc-description,
    .client-section-fiscal .fiscal-csc-status {
        margin-left:
            20px !important;

        margin-right:
            20px !important;
    }


    .client-section-fiscal
    .fiscal-csc-form {
        margin:
            18px 20px 20px !important;

        padding:
            21px !important;
    }
}

/* =========================================================
   CONFIGURAÇÃO FISCAL
   CABEÇALHO PREMIUM DO CSC
   ========================================================= */

.client-section-fiscal .fiscal-csc-header {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 17px;

    margin:
        0 32px 20px;

    padding:
        21px 22px;

    overflow: hidden;

    border:
        1px solid
        rgba(99, 102, 241, .16);

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            rgba(238, 242, 255, .72) 0%,
            rgba(248, 250, 255, .92) 50%,
            #ffffff 100%
        );

    box-shadow:
        0 5px 18px
        rgba(79, 70, 229, .045);
}


/* faixa lateral */

.client-section-fiscal
.fiscal-csc-header::before {
    content: "";

    position: absolute;

    top: 16px;
    bottom: 16px;
    left: 0;

    width: 3px;

    border-radius:
        0 5px 5px 0;

    background:
        linear-gradient(
            180deg,
            #4f46e5,
            #7c3aed
        );
}


/* brilho decorativo */

.client-section-fiscal
.fiscal-csc-header::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    top: -95px;
    right: -50px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(124, 58, 237, .11),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   ÍCONE
   ========================================================= */

.client-section-fiscal
.fiscal-csc-header-icon {
    position: relative;

    z-index: 2;

    flex:
        0 0 45px;

    width: 45px;
    height: 45px;

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

    border:
        1px solid
        rgba(99, 102, 241, .13);

    border-radius:
        13px;

    background:
        linear-gradient(
            145deg,
            #eef2ff,
            #e8eaff
        );

    color:
        #5b4fe9;

    font-size:
        17px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .9),
        0 6px 15px
        rgba(79, 70, 229, .09);
}


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

.client-section-fiscal
.fiscal-csc-header-content {
    position: relative;

    z-index: 2;

    min-width: 0;
}


/* kicker NFC-e */

.client-section-fiscal
.fiscal-csc-header
.fiscal-csc-kicker {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin:
        0 0 7px !important;

    padding:
        5px 8px;

    border:
        1px solid
        rgba(99, 102, 241, .10);

    border-radius:
        6px;

    background:
        rgba(238, 242, 255, .92);

    color:
        #4f46e5 !important;

    font-size:
        8px !important;

    font-weight:
        900 !important;

    line-height:
        1;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}


/* título */

.client-section-fiscal
.fiscal-csc-header
.fiscal-csc-title {
    margin:
        0 0 6px !important;

    color:
        #172033 !important;

    font-size:
        18px !important;

    font-weight:
        850;

    line-height:
        1.3;

    letter-spacing:
        -.025em;
}


/* descrição */

.client-section-fiscal
.fiscal-csc-header
.fiscal-csc-description {
    max-width:
        800px;

    margin:
        0 !important;

    color:
        #64748b !important;

    font-size:
        12px !important;

    font-weight:
        400;

    line-height:
        1.65;
}


/* =========================================================
   STATUS CSC
   Agora visualmente conectado à seção
   ========================================================= */

.client-section-fiscal
.fiscal-csc-status {
    position: relative;

    margin:
        0 32px 18px !important;

    padding:
        14px 17px !important;

    border:
        1px solid
        #e2e8f0 !important;

    border-radius:
        11px !important;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8fafc
        ) !important;

    color:
        #475569;

    font-size:
        12px;

    box-shadow:
        0 3px 10px
        rgba(15, 23, 42, .025);
}


.client-section-fiscal
.fiscal-csc-status strong {
    color:
        #334155;

    font-weight:
        850;
}


/* =========================================================
   FORM CSC
   Aproxima visualmente do cabeçalho
   ========================================================= */

.client-section-fiscal
.fiscal-csc-form {
    margin:
        0 32px 32px !important;
}


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

@media (max-width: 850px) {

    .client-section-fiscal
    .fiscal-csc-header,

    .client-section-fiscal
    .fiscal-csc-status,

    .client-section-fiscal
    .fiscal-csc-form {
        margin-left:
            25px !important;

        margin-right:
            25px !important;
    }

}


@media (max-width: 600px) {

    .client-section-fiscal
    .fiscal-csc-header {
        gap:
            13px;

        margin:
            0 20px 17px !important;

        padding:
            18px;
    }


    .client-section-fiscal
    .fiscal-csc-header-icon {
        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;

        border-radius:
            11px;

        font-size:
            15px;
    }


    .client-section-fiscal
    .fiscal-csc-header
    .fiscal-csc-title {
        font-size:
            16px !important;
    }


    .client-section-fiscal
    .fiscal-csc-status {
        margin:
            0 20px 16px !important;
    }


    .client-section-fiscal
    .fiscal-csc-form {
        margin:
            0 20px 20px !important;
    }

}
/* =========================================================
   CSC PREMIUM HEADER - VALORIUM
   Configuração Fiscal
   ========================================================= */

.client-section-fiscal
.fiscal-csc-header {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 18px;

    margin:
        0 32px 18px;

    padding:
        22px 23px;

    overflow: hidden;

    border:
        1px solid
        rgba(99, 102, 241, .16);

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            #f8faff 0%,
            #f5f3ff 48%,
            #ffffff 100%
        );

    box-shadow:
        0 5px 18px
        rgba(79, 70, 229, .045);
}


/* barra lateral */

.client-section-fiscal
.fiscal-csc-header::before {
    content: "";

    position: absolute;

    top: 15px;
    bottom: 15px;
    left: 0;

    width: 3px;

    border-radius:
        0 4px 4px 0;

    background:
        linear-gradient(
            180deg,
            #4f46e5,
            #7c3aed
        );
}


/* glow decorativo */

.client-section-fiscal
.fiscal-csc-header::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -120px;
    right: -65px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(124, 58, 237, .11),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   ÍCONE
   ========================================================= */

.client-section-fiscal
.fiscal-csc-header-icon {
    position: relative;

    z-index: 2;

    flex:
        0 0 46px;

    width: 46px;
    height: 46px;

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

    border:
        1px solid
        rgba(99, 102, 241, .13);

    border-radius:
        13px;

    background:
        linear-gradient(
            145deg,
            #eef2ff,
            #e9e7ff
        );

    color:
        #5b4fe9;

    font-size:
        18px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .92),
        0 7px 18px
        rgba(79, 70, 229, .10);
}


/* =========================================================
   TEXTO
   ========================================================= */

.client-section-fiscal
.fiscal-csc-header-content {
    position: relative;

    z-index: 2;

    min-width: 0;

    padding-top:
        1px;
}


.client-section-fiscal
.fiscal-csc-kicker {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin:
        0 0 7px !important;

    padding:
        5px 8px;

    border:
        1px solid
        rgba(99, 102, 241, .10);

    border-radius:
        6px;

    background:
        rgba(238, 242, 255, .92);

    color:
        #4f46e5 !important;

    font-size:
        8px !important;

    font-weight:
        900 !important;

    line-height:
        1;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}


.client-section-fiscal
.fiscal-csc-title {
    margin:
        0 0 7px !important;

    color:
        #172033 !important;

    font-size:
        18px !important;

    font-weight:
        850;

    line-height:
        1.28;

    letter-spacing:
        -.025em;
}


.client-section-fiscal
.fiscal-csc-description {
    max-width:
        820px;

    margin:
        0 !important;

    color:
        #64748b !important;

    font-size:
        12px !important;

    font-weight:
        400;

    line-height:
        1.65;
}


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

.client-section-fiscal
.fiscal-csc-status {
    position: relative;

    margin:
        0 32px 18px !important;

    padding:
        15px 17px !important;

    border:
        1px solid
        #e2e8f0 !important;

    border-radius:
        11px !important;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8fafc
        ) !important;

    color:
        #64748b !important;

    font-size:
        12px;

    box-shadow:
        0 3px 10px
        rgba(15, 23, 42, .025);
}


.client-section-fiscal
.fiscal-csc-status strong {
    color:
        #334155;

    font-weight:
        850;
}


/* =========================================================
   FORMULÁRIO CSC
   ========================================================= */

.client-section-fiscal
.fiscal-csc-form {
    position: relative;

    margin:
        0 32px 32px !important;

    padding:
        26px !important;

    overflow:
        hidden;

    border:
        1px solid
        #ddd6fe !important;

    border-radius:
        17px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fbfaff
        ) !important;

    box-shadow:
        0 8px 25px
        rgba(79, 70, 229, .045);
}


.client-section-fiscal
.fiscal-csc-form::before {
    content: "";

    position: absolute;

    top: 17px;
    bottom: 17px;
    left: 0;

    width: 3px;

    border-radius:
        0 5px 5px 0;

    background:
        linear-gradient(
            180deg,
            #6366f1,
            #8b5cf6
        );
}


/* botão */

.client-section-fiscal
.fiscal-csc-form
button[type="submit"] {
    background:
        linear-gradient(
            135deg,
            #4f46e5 0%,
            #7c3aed 100%
        ) !important;

    box-shadow:
        0 8px 20px
        rgba(79, 70, 229, .18) !important;
}


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

@media (max-width: 850px) {

    .client-section-fiscal
    .fiscal-csc-header,

    .client-section-fiscal
    .fiscal-csc-status,

    .client-section-fiscal
    .fiscal-csc-form {
        margin-left:
            25px !important;

        margin-right:
            25px !important;
    }

}


@media (max-width: 600px) {

    .client-section-fiscal
    .fiscal-csc-header {
        gap:
            13px;

        margin:
            0 20px 16px !important;

        padding:
            18px;
    }


    .client-section-fiscal
    .fiscal-csc-header-icon {
        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;

        border-radius:
            11px;

        font-size:
            15px;
    }


    .client-section-fiscal
    .fiscal-csc-title {
        font-size:
            16px !important;
    }


    .client-section-fiscal
    .fiscal-csc-description {
        font-size:
            11px !important;
    }


    .client-section-fiscal
    .fiscal-csc-status {
        margin:
            0 20px 15px !important;
    }


    .client-section-fiscal
    .fiscal-csc-form {
        margin:
            0 20px 20px !important;

        padding:
            21px !important;
    }

}


/* =========================================================
   CERTIFICATE STATUS PREMIUM - VALORIUM
   Configuração do Cliente
   ========================================================= */

.client-section-certificado
.certificate-status-panel {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 18px;

    margin:
        0 32px 22px;

    padding:
        22px 23px;

    overflow: hidden;

    border:
        1px solid
        rgba(124, 58, 237, .16);

    border-radius:
        17px;

    background:
        linear-gradient(
            135deg,
            #faf7ff 0%,
            #f6f2ff 48%,
            #ffffff 100%
        );

    box-shadow:
        0 6px 20px
        rgba(91, 33, 182, .05);
}


/* barra lateral */

.client-section-certificado
.certificate-status-panel::before {
    content: "";

    position: absolute;

    top: 15px;
    bottom: 15px;
    left: 0;

    width: 3px;

    border-radius:
        0 5px 5px 0;

    background:
        linear-gradient(
            180deg,
            #7c3aed,
            #4f46e5
        );
}


/* glow */

.client-section-certificado
.certificate-status-panel::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    top: -125px;
    right: -70px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(124, 58, 237, .12),
            transparent 70%
        );

    pointer-events: none;
}


/* ícone */

.client-section-certificado
.certificate-status-icon {
    position: relative;

    z-index: 2;

    flex:
        0 0 48px;

    width: 48px;
    height: 48px;

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

    border:
        1px solid
        rgba(124, 58, 237, .14);

    border-radius:
        14px;

    background:
        linear-gradient(
            145deg,
            #f5f3ff,
            #ede9fe
        );

    color:
        #6d28d9;

    font-size:
        19px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .95),
        0 7px 18px
        rgba(124, 58, 237, .10);
}


/* conteúdo */

.client-section-certificado
.certificate-status-content {
    position: relative;

    z-index: 2;

    flex: 1;

    min-width: 0;
}


/* título */

.client-section-certificado
.certificate-status-title {
    margin-bottom:
        14px;

    color:
        #172033;

    font-size:
        17px;

    font-weight:
        850;

    letter-spacing:
        -.02em;
}


/* grid */

.client-section-certificado
.certificate-status-grid {
    display: grid;

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

    gap: 12px;
}


/* item */

.client-section-certificado
.certificate-status-item {
    min-width: 0;

    padding:
        13px 14px;

    border:
        1px solid
        rgba(148, 163, 184, .18);

    border-radius:
        11px;

    background:
        rgba(255, 255, 255, .76);

    box-shadow:
        0 2px 8px
        rgba(15, 23, 42, .025);
}


/* label */

.client-section-certificado
.certificate-status-label {
    display: block;

    margin-bottom:
        5px;

    color:
        #64748b;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


/* valor */

.client-section-certificado
.certificate-status-value {
    display: block;

    color:
        #334155;

    font-size:
        12px;

    font-weight:
        800;

    line-height:
        1.4;
}


/* status positivo */

.client-section-certificado
.certificate-status-ok {
    color:
        #15803d;
}


/* hover sutil */

.client-section-certificado
.certificate-status-item {
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.client-section-certificado
.certificate-status-item:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(124, 58, 237, .22);

    box-shadow:
        0 7px 18px
        rgba(124, 58, 237, .07);
}


/* responsivo */

@media (max-width: 800px) {

    .client-section-certificado
    .certificate-status-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 600px) {

    .client-section-certificado
    .certificate-status-panel {
        gap:
            13px;

        margin:
            0 20px 18px;

        padding:
            18px;
    }


    .client-section-certificado
    .certificate-status-icon {
        width:
            42px;

        height:
            42px;

        flex-basis:
            42px;

        border-radius:
            12px;

        font-size:
            16px;
    }


    .client-section-certificado
    .certificate-status-title {
        font-size:
            15px;
    }

}


/* =========================================================
   DIAGNOSTIC PREMIUM - VALORIUM
   Configuração do Cliente
   ========================================================= */


/* =========================================================
   IDENTIDADE
   ========================================================= */

.client-section-diagnostico {
    --section-accent:
        #0891b2;

    --section-accent-2:
        #4f46e5;

    --section-soft:
        #ecfeff;

    --section-glow:
        rgba(8, 145, 178, .13);
}


/* =========================================================
   FORM EXECUÇÃO
   ========================================================= */

.client-section-diagnostico
.diagnostic-run-form {
    position: relative;

    z-index: 2;

    margin:
        0 !important;

    padding:
        28px 32px 24px !important;

    border: 0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


/* =========================================================
   BOTÃO EXECUTAR
   ========================================================= */

.client-section-diagnostico
.diagnostic-run-button {
    position: relative;

    min-width:
        245px;

    min-height:
        50px !important;

    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        0 20px !important;

    overflow:
        hidden;

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

    border-radius:
        13px !important;

    background:
        linear-gradient(
            135deg,
            #0891b2 0%,
            #2563eb 55%,
            #4f46e5 100%
        ) !important;

    color:
        #ffffff !important;

    font-size:
        12px !important;

    font-weight:
        850 !important;

    letter-spacing:
        -.01em;

    box-shadow:
        0 10px 24px
        rgba(37, 99, 235, .20) !important;

    cursor:
        pointer;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease !important;
}


.client-section-diagnostico
.diagnostic-run-button::after {
    content: "";

    position: absolute;

    width:
        110px;

    height:
        110px;

    top:
        -70px;

    right:
        -30px;

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, .10);

    pointer-events:
        none;
}


.client-section-diagnostico
.diagnostic-run-button:hover {
    transform:
        translateY(-2px);

    filter:
        brightness(1.04);

    box-shadow:
        0 14px 32px
        rgba(37, 99, 235, .27) !important;
}


.client-section-diagnostico
.diagnostic-run-button-icon {
    width:
        27px;

    height:
        27px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        8px;

    background:
        rgba(255, 255, 255, .13);

    font-size:
        10px;
}


/* =========================================================
   AVISO LOCAL / SEFAZ
   ========================================================= */

.client-section-diagnostico
.diagnostic-security-notice {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;

    margin:
        0 32px 26px !important;

    padding:
        16px 18px !important;

    border:
        1px solid
        rgba(245, 158, 11, .20) !important;

    border-radius:
        13px !important;

    background:
        linear-gradient(
            135deg,
            #fffdf7 0%,
            #fffbeb 100%
        ) !important;

    color:
        #92400e !important;

    box-shadow:
        0 5px 16px
        rgba(245, 158, 11, .045);
}


.client-section-diagnostico
.diagnostic-security-notice-icon {
    flex:
        0 0 35px;

    width:
        35px;

    height:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        #fef3c7;

    color:
        #d97706;

    font-size:
        14px;
}


.client-section-diagnostico
.diagnostic-security-notice-content {
    min-width:
        0;
}


.client-section-diagnostico
.diagnostic-security-notice-content strong {
    display:
        block;

    margin-bottom:
        3px;

    color:
        #92400e;

    font-size:
        11px;

    font-weight:
        850;
}


.client-section-diagnostico
.diagnostic-security-notice-content p {
    margin:
        0 !important;

    color:
        #a16207 !important;

    font-size:
        11px !important;

    line-height:
        1.6;
}


/* =========================================================
   GRID DOS MÓDULOS
   ========================================================= */

.client-section-diagnostico
.diagnostic-results-grid {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

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

    gap:
        16px;

    padding:
        0 32px 32px;
}


/* =========================================================
   CARD DE CADA MÓDULO
   ========================================================= */

.client-section-diagnostico
.diagnostic-module-card {
    position:
        relative;

    min-width:
        0;

    overflow:
        hidden;

    padding:
        20px !important;

    border:
        1px solid
        rgba(148, 163, 184, .20) !important;

    border-radius:
        16px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbfdff 100%
        ) !important;

    box-shadow:
        0 4px 13px
        rgba(15, 23, 42, .032);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


.client-section-diagnostico
.diagnostic-module-card::before {
    content: "";

    position:
        absolute;

    top:
        16px;

    bottom:
        16px;

    left:
        0;

    width:
        3px;

    border-radius:
        0 5px 5px 0;

    background:
        linear-gradient(
            180deg,
            #06b6d4,
            #4f46e5
        );

    opacity:
        .75;
}


.client-section-diagnostico
.diagnostic-module-card::after {
    content: "";

    position:
        absolute;

    width:
        120px;

    height:
        120px;

    top:
        -80px;

    right:
        -50px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(14, 165, 233, .08),
            transparent 70%
        );

    pointer-events:
        none;
}


.client-section-diagnostico
.diagnostic-module-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(14, 165, 233, .24) !important;

    box-shadow:
        0 13px 30px
        rgba(14, 165, 233, .075);
}


/* =========================================================
   CABEÇALHO DO CARD
   ========================================================= */

.client-section-diagnostico
.diagnostic-module-card
> div:first-child {
    position:
        relative;

    z-index:
        2;

    margin:
        0 0 13px !important;

    padding:
        0 !important;

    border:
        0 !important;

    background:
        transparent !important;
}


.client-section-diagnostico
.diagnostic-module-card h3 {
    margin:
        0 0 3px !important;

    color:
        #172033 !important;

    font-size:
        15px !important;

    font-weight:
        850 !important;

    line-height:
        1.3;

    letter-spacing:
        -.025em;
}


.client-section-diagnostico
.diagnostic-module-card small {
    color:
        #94a3b8 !important;

    font-size:
        9px !important;

    font-weight:
        750;

    letter-spacing:
        .03em;
}


/* =========================================================
   STATUS BADGE DOS MÓDULOS
   ========================================================= */

.client-section-diagnostico
.diagnostic-module-card
span[style*="border-radius:999px"] {
    min-height:
        26px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 9px !important;

    border-radius:
        999px !important;

    font-size:
        9px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .02em;

    box-shadow:
        0 2px 6px
        rgba(15, 23, 42, .035);
}


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

.client-section-diagnostico
.diagnostic-module-card > p {
    position:
        relative;

    z-index:
        2;

    margin:
        0 0 15px !important;

    color:
        #64748b !important;

    font-size:
        11px !important;

    line-height:
        1.6 !important;
}


/* =========================================================
   META INFORMAÇÕES
   ========================================================= */

.client-section-diagnostico
.diagnostic-module-card
> div[style*="display:flex"] {
    position:
        relative;

    z-index:
        2;

    gap:
        7px !important;
}


.client-section-diagnostico
.diagnostic-module-card
> div[style*="display:flex"]
> span {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        26px;

    padding:
        0 8px;

    border:
        1px solid #edf0f4;

    border-radius:
        7px;

    background:
        #f8fafc;

    color:
        #64748b;

    font-size:
        9px;
}


.client-section-diagnostico
.diagnostic-module-card
> div[style*="display:flex"]
> span strong {
    margin-right:
        3px;

    color:
        #475569;
}


/* =========================================================
   DETAILS
   ========================================================= */

.client-section-diagnostico
.diagnostic-details {
    position:
        relative;

    z-index:
        2;

    margin-top:
        15px !important;

    padding:
        0;

    overflow:
        hidden;

    border:
        1px solid #edf0f5;

    border-radius:
        10px;

    background:
        #f8fafc;
}


.client-section-diagnostico
.diagnostic-details-summary {
    display:
        flex;

    align-items:
        center;

    min-height:
        38px;

    padding:
        0 12px;

    cursor:
        pointer;

    color:
        #475569 !important;

    font-size:
        10px;

    font-weight:
        850 !important;

    list-style:
        none;
}


.client-section-diagnostico
.diagnostic-details-summary::-webkit-details-marker {
    display:
        none;
}


.client-section-diagnostico
.diagnostic-details-summary::before {
    content:
        "\f054";

    margin-right:
        8px;

    font-family:
        "Font Awesome 6 Free";

    font-size:
        8px;

    font-weight:
        900;

    color:
        #0891b2;

    transition:
        transform .2s ease;
}


.client-section-diagnostico
.diagnostic-details[open]
.diagnostic-details-summary::before {
    transform:
        rotate(90deg);
}


/* =========================================================
   CHECKS INTERNOS
   ========================================================= */

.client-section-diagnostico
.diagnostic-details
> div {
    margin:
        0 !important;

    padding:
        10px !important;

    border-top:
        1px solid #edf0f5;
}


.client-section-diagnostico
.diagnostic-details
> div
> div {
    margin:
        0 0 6px;

    padding:
        9px 10px !important;

    border:
        1px solid #edf2f7;

    border-radius:
        8px !important;

    background:
        #ffffff !important;

    color:
        #64748b !important;

    font-size:
        10px !important;
}


.client-section-diagnostico
.diagnostic-details
> div
> div:last-child {
    margin-bottom:
        0;
}


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

.client-section-diagnostico
.diagnostic-empty-state {
    position:
        relative;

    z-index:
        2;

    margin:
        0 32px 32px;

    padding:
        40px 25px;

    border:
        1px dashed
        #bae6fd;

    border-radius:
        15px;

    background:
        linear-gradient(
            145deg,
            #f8fdff,
            #ffffff
        );

    color:
        #64748b;

    text-align:
        center;
}


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

@media (max-width: 850px) {

    .client-section-diagnostico
    .diagnostic-results-grid {
        grid-template-columns:
            1fr;

        padding:
            0 25px 25px;
    }


    .client-section-diagnostico
    .diagnostic-run-form {
        padding:
            25px 25px 22px !important;
    }


    .client-section-diagnostico
    .diagnostic-security-notice {
        margin:
            0 25px 23px !important;
    }

}


@media (max-width: 600px) {

    .client-section-diagnostico
    .diagnostic-run-form {
        padding:
            20px !important;
    }


    .client-section-diagnostico
    .diagnostic-run-button {
        width:
            100%;

        min-width:
            0;
    }


    .client-section-diagnostico
    .diagnostic-security-notice {
        margin:
            0 20px 20px !important;
    }


    .client-section-diagnostico
    .diagnostic-results-grid {
        padding:
            0 20px 20px;
    }


    .client-section-diagnostico
    .diagnostic-module-card {
        padding:
            18px !important;

        border-radius:
            14px !important;
    }

}


/* =========================================================
   EMPRESA PREMIUM - VALORIUM
   Configuração do Cliente
   ========================================================= */


/* =========================================================
   IDENTIDADE
   ========================================================= */

.client-section-empresa {
    --section-accent:
        #2563eb;

    --section-accent-2:
        #4f46e5;

    --section-soft:
        #eff6ff;

    --section-glow:
        rgba(37, 99, 235, .13);
}


/* =========================================================
   FORM
   ========================================================= */

.client-section-empresa
.empresa-form {
    position:
        relative;

    z-index:
        2;

    padding:
        30px 32px 32px !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 100%
        ) !important;
}


/* =========================================================
   GRID
   ========================================================= */

.client-section-empresa
.empresa-form
> div[style*="grid"] {
    gap:
        20px !important;
}


/* =========================================================
   LABEL
   ========================================================= */

.client-section-empresa
.empresa-form label {
    color:
        #334155 !important;

    font-size:
        11px !important;

    font-weight:
        850 !important;

    letter-spacing:
        .01em;
}


/* =========================================================
   CAMPOS
   ========================================================= */

.client-section-empresa
.empresa-form
input:not([type="hidden"]),
.client-section-empresa
.empresa-form select,
.client-section-empresa
.empresa-form textarea {
    min-height:
        48px;

    border:
        1px solid
        #dbe4ef !important;

    border-radius:
        11px !important;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fcfdff
        ) !important;

    color:
        #172033 !important;

    box-shadow:
        inset 0 1px 1px
        rgba(15, 23, 42, .015);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        transform .2s ease;
}


.client-section-empresa
.empresa-form
input:not([type="hidden"]):hover,
.client-section-empresa
.empresa-form select:hover,
.client-section-empresa
.empresa-form textarea:hover {
    border-color:
        #bfccdc !important;
}


.client-section-empresa
.empresa-form
input:not([type="hidden"]):focus,
.client-section-empresa
.empresa-form select:focus,
.client-section-empresa
.empresa-form textarea:focus {
    border-color:
        #2563eb !important;

    background:
        #ffffff !important;

    box-shadow:
        0 0 0 4px
        rgba(37, 99, 235, .09) !important;
}


/* =========================================================
   SELECT
   ========================================================= */

.client-section-empresa
.empresa-form select {
    cursor:
        pointer;
}


/* =========================================================
   BLOCOS DE CAMPOS
   ========================================================= */

.client-section-empresa
.empresa-form
> div[style*="grid"]
> label,
.client-section-empresa
.empresa-form
> div[style*="grid"]
> div {
    position:
        relative;
}


/* =========================================================
   BOTÃO SALVAR
   ========================================================= */

.client-section-empresa
.empresa-save-button {
    position:
        relative;

    min-width:
        220px;

    min-height:
        50px !important;

    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        0 20px !important;

    overflow:
        hidden;

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

    border-radius:
        13px !important;

    background:
        linear-gradient(
            135deg,
            #2563eb 0%,
            #4f46e5 100%
        ) !important;

    color:
        #ffffff !important;

    font-size:
        12px !important;

    font-weight:
        850 !important;

    box-shadow:
        0 10px 24px
        rgba(37, 99, 235, .20) !important;

    cursor:
        pointer;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease !important;
}


.client-section-empresa
.empresa-save-button::after {
    content:
        "";

    position:
        absolute;

    width:
        110px;

    height:
        110px;

    top:
        -70px;

    right:
        -30px;

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, .10);

    pointer-events:
        none;
}


.client-section-empresa
.empresa-save-button:hover {
    transform:
        translateY(-2px);

    filter:
        brightness(1.04);

    box-shadow:
        0 14px 32px
        rgba(37, 99, 235, .27) !important;
}


.client-section-empresa
.empresa-save-button-icon {
    width:
        28px;

    height:
        28px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        8px;

    background:
        rgba(255, 255, 255, .13);

    font-size:
        11px;
}


/* =========================================================
   BLOCO DE AÇÕES
   ========================================================= */

.client-section-empresa
.empresa-form
> div:last-child {
    margin-top:
        26px !important;

    padding-top:
        22px;

    border-top:
        1px solid
        #edf1f6;
}


/* =========================================================
   ALERTA SUCESSO
   ========================================================= */

.client-section-empresa
div[style*="#ecfdf3"] {
    margin:
        24px 32px 0 !important;

    padding:
        14px 16px !important;

    border:
        1px solid
        #bbf7d0 !important;

    border-radius:
        11px !important;

    background:
        linear-gradient(
            135deg,
            #f0fdf4,
            #ecfdf3
        ) !important;

    color:
        #15803d !important;

    box-shadow:
        0 5px 15px
        rgba(22, 163, 74, .05);
}


/* =========================================================
   ALERTA ERRO
   ========================================================= */

.client-section-empresa
div[style*="#fef3f2"] {
    margin:
        24px 32px 0 !important;

    padding:
        14px 16px !important;

    border:
        1px solid
        #fecaca !important;

    border-radius:
        11px !important;

    background:
        linear-gradient(
            135deg,
            #fff7f7,
            #fef2f2
        ) !important;

    color:
        #b91c1c !important;
}


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

@media (max-width: 850px) {

    .client-section-empresa
    .empresa-form {
        padding:
            25px !important;
    }

}


@media (max-width: 600px) {

    .client-section-empresa
    .empresa-form {
        padding:
            21px 20px !important;
    }


    .client-section-empresa
    .empresa-save-button {
        width:
            100%;

        min-width:
            0;
    }


    .client-section-empresa
    div[style*="#ecfdf3"],
    .client-section-empresa
    div[style*="#fef3f2"] {
        margin-left:
            20px !important;

        margin-right:
            20px !important;
    }

}

/* VALORIUM_LUXE_V2_START */

/* =========================================================
   VALORIUM SISTEMAS
   LUXE DESIGN SYSTEM V2

   DIREÇÃO VISUAL:
   - Midnight Navy
   - Champagne Gold
   - Royal Blue
   - Ivory White
   - Premium SaaS
   - Luxo discreto
   ========================================================= */


/* =========================================================
   TOKENS
   ========================================================= */

:root {

    --vl-midnight-950: #07111f;
    --vl-midnight-900: #0a1728;
    --vl-midnight-850: #0d1d32;
    --vl-midnight-800: #10243c;

    --vl-blue-700: #174ea6;
    --vl-blue-600: #2563eb;
    --vl-blue-500: #3b82f6;
    --vl-blue-400: #60a5fa;

    --vl-gold-700: #8d671f;
    --vl-gold-600: #a77b29;
    --vl-gold-500: #c89b43;
    --vl-gold-400: #dfba70;
    --vl-gold-300: #ecd39e;
    --vl-gold-100: #fbf3df;

    --vl-ivory: #fffdf8;
    --vl-paper: #ffffff;
    --vl-bg: #f4f6fa;
    --vl-bg-soft: #f8fafc;

    --vl-text: #182233;
    --vl-text-2: #536173;
    --vl-text-3: #8793a3;

    --vl-border: #e5e9ef;
    --vl-border-strong: #d6dce5;

    --vl-success: #159447;
    --vl-success-bg: #edf9f1;

    --vl-danger: #cf3341;
    --vl-danger-bg: #fff1f2;

    --vl-warning: #b87812;
    --vl-warning-bg: #fff8e8;

    --vl-info: #2b6eea;
    --vl-info-bg: #eef4ff;

    --vl-radius-xs: 8px;
    --vl-radius-sm: 11px;
    --vl-radius-md: 16px;
    --vl-radius-lg: 22px;
    --vl-radius-xl: 28px;

    --vl-shadow-xs:
        0 2px 8px rgba(7, 17, 31, .035);

    --vl-shadow-sm:
        0 8px 22px rgba(7, 17, 31, .055);

    --vl-shadow-md:
        0 15px 38px rgba(7, 17, 31, .085);

    --vl-shadow-lg:
        0 28px 70px rgba(7, 17, 31, .16);

    --vl-gold-line:
        linear-gradient(
            90deg,
            transparent,
            rgba(223, 186, 112, .75),
            transparent
        );

    --vl-transition:
        .22s cubic-bezier(.2,.7,.2,1);

}


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

html {

    scroll-behavior: smooth;

}

body {

    min-height: 100vh;

    margin: 0;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(37, 99, 235, .055),
            transparent 34%
        ),
        radial-gradient(
            circle at 91% 5%,
            rgba(200, 155, 67, .045),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #f4f6fa 45%,
            #f7f8fb 100%
        );

    color:
        var(--vl-text);

    font-family:
        Inter,
        "Plus Jakarta Sans",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}


/* =========================================================
   SELEÇÃO
   ========================================================= */

::selection {

    background:
        rgba(200, 155, 67, .24);

    color:
        var(--vl-midnight-950);

}


/* =========================================================
   CONTAINER
   ========================================================= */

.container {

    width:
        min(
            1440px,
            calc(100% - 52px)
        );

    margin-left:
        auto;

    margin-right:
        auto;

}


/* =========================================================
   HEADERS PRINCIPAIS
   ========================================================= */

.dashboard-header,
.mesas-header,
.page-header,
.page-header-comanda,
.baixa-header,
.fechamento-header,
.produtos-header,
.fornecedores-page-header,
.fiscal-dashboard-header,
.client-config-standard-header,
.usuarios-page-header,
.usuarios-header,
.financeiro-header,
.nota-entrada-header,
.pedidos-header {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    border:
        1px solid
        rgba(223, 186, 112, .13);

    border-radius:
        var(--vl-radius-xl);

    background:
        linear-gradient(
            135deg,
            #07111f 0%,
            #0a1728 40%,
            #10243c 73%,
            #172f52 100%
        );

    box-shadow:
        0 28px 70px rgba(7, 17, 31, .19);

}


/* =========================================================
   GLOW DO HEADER
   ========================================================= */

.dashboard-header::before,
.mesas-header::before,
.page-header::before,
.page-header-comanda::before,
.baixa-header::before,
.fechamento-header::before,
.produtos-header::before,
.fornecedores-page-header::before,
.fiscal-dashboard-header::before,
.client-config-standard-header::before,
.usuarios-page-header::before,
.usuarios-header::before,
.financeiro-header::before,
.nota-entrada-header::before,
.pedidos-header::before {

    content: "";

    position: absolute;

    z-index: -1;

    width: 420px;
    height: 420px;

    right: -125px;
    top: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(59, 130, 246, .28) 0%,
            rgba(59, 130, 246, .08) 43%,
            transparent 72%
        );

    pointer-events: none;

}


/* =========================================================
   GOLD GLOW
   ========================================================= */

.dashboard-header::after,
.mesas-header::after,
.page-header::after,
.page-header-comanda::after,
.baixa-header::after,
.fechamento-header::after,
.produtos-header::after,
.fornecedores-page-header::after,
.fiscal-dashboard-header::after,
.client-config-standard-header::after,
.usuarios-page-header::after,
.usuarios-header::after,
.financeiro-header::after,
.nota-entrada-header::after,
.pedidos-header::after {

    content: "";

    position: absolute;

    z-index: -1;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background:
        var(--vl-gold-line);

    opacity:
        .8;

}


/* =========================================================
   CONTEÚDO DE HEADER
   ========================================================= */

.dashboard-header-content,
.page-header-content,
.mesas-header-main,
.pedidos-header-top {

    position:
        relative;

    z-index:
        2;

}


/* =========================================================
   TÍTULOS
   ========================================================= */

.dashboard-header h1,
.dashboard-header h2,
.mesas-header h1,
.mesas-header h2,
.page-header h1,
.page-header h2,
.page-header-comanda h1,
.page-header-comanda h2,
.baixa-header h1,
.baixa-header h2,
.fechamento-header h1,
.fechamento-header h2,
.produtos-header h1,
.produtos-header h2,
.fornecedores-page-header h1,
.fornecedores-page-header h2,
.fiscal-dashboard-header h1,
.fiscal-dashboard-header h2,
.client-config-standard-header h1,
.client-config-standard-header h2,
.usuarios-page-header h1,
.financeiro-header h1,
.nota-entrada-header h1,
.pedidos-header h1 {

    color:
        #ffffff;

    font-weight:
        800;

    letter-spacing:
        -.8px;

    text-shadow:
        0 1px 0 rgba(255,255,255,.02);

}


/* =========================================================
   TEXTOS HEADER
   ========================================================= */

.dashboard-header p,
.mesas-header p,
.page-header p,
.page-header-comanda p,
.baixa-header p,
.fechamento-header p,
.produtos-header p,
.fornecedores-page-header p,
.fiscal-dashboard-header p,
.client-config-standard-header p,
.usuarios-page-header p,
.financeiro-header p,
.nota-entrada-header p,
.pedidos-header p {

    color:
        rgba(226, 232, 240, .78);

}


/* =========================================================
   MARCA / LABELS SUPERIORES
   ========================================================= */

.page-brand,
.dashboard-brand,
.section-kicker,
.section-eyebrow,
.fornecedores-section-label {

    color:
        var(--vl-gold-400);

    font-weight:
        800;

    letter-spacing:
        1.15px;

}


/* =========================================================
   BOTÕES VOLTAR DE HEADER
   ========================================================= */

.nav-voltar,
.header-back-button,
.btn-voltar-fechamento,
.client-config-header-back,
.back-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-height:
        42px;

    padding:
        0 15px;

    border:
        1px solid
        rgba(236, 211, 158, .18);

    border-radius:
        11px;

    background:
        rgba(255,255,255,.055);

    color:
        #e9eef5;

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transition:
        transform var(--vl-transition),
        border-color var(--vl-transition),
        background var(--vl-transition),
        color var(--vl-transition);

}

.nav-voltar:hover,
.header-back-button:hover,
.btn-voltar-fechamento:hover,
.client-config-header-back:hover,
.back-button:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(236, 211, 158, .38);

    background:
        rgba(255,255,255,.10);

    color:
        #ffffff;

}


/* =========================================================
   CARDS GERAIS
   ========================================================= */

.dashboard-card,
.summary-card,
.card-form,
.product-form-card,
.mesa-form-card,
.baixa-card,
.card-fechamento,
.fornecedor-form-card,
.products-table-card,
.dashboard-api,
.acoes-conta-card,
.fiscal-content,
.fiscal-card,
.config-card,
.client-config-card,
.usuario-card,
.usuarios-card,
.inventory-card,
.estoque-card,
.caixa-card,
.finance-card,
.financeiro-card,
.despesa-card,
.recebivel-card,
.relatorio-card,
.report-card,
.entrada-card,
.nota-card,
.nota-entrada-card,
.profile-card {

    border:
        1px solid
        rgba(214, 220, 229, .92);

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

    background:
        rgba(255,255,255,.94);

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

    transition:
        transform var(--vl-transition),
        box-shadow var(--vl-transition),
        border-color var(--vl-transition);

}


/* =========================================================
   CARD GENÉRICO
   ========================================================= */

.container [class$="-card"] {

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

}


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

.dashboard-card:hover,
.summary-card:hover,
.product-form-card:hover,
.fornecedor-form-card:hover,
.config-card:hover,
.fiscal-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(200,155,67,.28);

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

}


/* =========================================================
   DASHBOARD CARDS
   ========================================================= */

.dashboard-card {

    position:
        relative;

    overflow:
        hidden;

}

.dashboard-card::before {

    content: "";

    position:
        absolute;

    top:
        0;

    left:
        20px;

    right:
        20px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(200,155,67,.46),
            transparent
        );

}


/* =========================================================
   ÍCONES DOS CARDS
   ========================================================= */

.dashboard-icon,
.config-card-icon,
.fiscal-csc-header-icon {

    border:
        1px solid
        rgba(200,155,67,.18);

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #fffdf8
        );

    color:
        var(--vl-gold-600);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8);

}


/* =========================================================
   TAGS
   ========================================================= */

.dashboard-card-tag,
.section-badge,
.category-badge,
.stock-badge,
.badge-status,
.fiscal-status,
.status-badge {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .035em;

}


/* =========================================================
   TÍTULOS INTERNOS
   ========================================================= */

.section-title h1,
.section-title h2,
.section-title h3,
.card-section-header h2,
.card-section-header h3,
.form-section-header h3,
.form-section-header h4,
.products-list-header h3,
.fornecedores-list-header h3,
.products-overview-header h3,
.baixa-card-header h3,
.card-fechamento-header h3,
.config-card h2,
.config-card h3 {

    color:
        var(--vl-text);

    font-weight:
        800;

    letter-spacing:
        -.35px;

}


/* =========================================================
   TEXTO SECUNDÁRIO
   ========================================================= */

.container p,
.container small {

    color:
        var(--vl-text-2);

}


/* =========================================================
   INPUTS
   ========================================================= */

.form-control,
.fiscal-form input:not([type="hidden"]),
.fiscal-form select,
.fiscal-form textarea,
.container input[type="text"],
.container input[type="email"],
.container input[type="password"],
.container input[type="number"],
.container input[type="date"],
.container input[type="time"],
.container input[type="month"],
.container input[type="search"],
.container input[type="tel"],
.container input[type="url"],
.container select,
.container textarea {

    width:
        100%;

    min-height:
        45px;

    box-sizing:
        border-box;

    padding:
        10px 13px;

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

    border-radius:
        var(--vl-radius-sm);

    background:
        rgba(255,255,255,.95);

    color:
        var(--vl-text);

    font:
        inherit;

    font-size:
        13px;

    outline:
        none;

    box-shadow:
        inset 0 1px 1px rgba(7,17,31,.018);

    transition:
        border-color var(--vl-transition),
        box-shadow var(--vl-transition),
        background var(--vl-transition);

}


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

.container input:hover,
.container select:hover,
.container textarea:hover {

    border-color:
        #cbd2dc;

}


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

.form-control:focus,
.fiscal-form input:not([type="hidden"]):focus,
.fiscal-form select:focus,
.fiscal-form textarea:focus,
.container input[type="text"]:focus,
.container input[type="email"]:focus,
.container input[type="password"]:focus,
.container input[type="number"]:focus,
.container input[type="date"]:focus,
.container input[type="time"]:focus,
.container input[type="month"]:focus,
.container input[type="search"]:focus,
.container input[type="tel"]:focus,
.container input[type="url"]:focus,
.container select:focus,
.container textarea:focus {

    border-color:
        var(--vl-gold-500);

    background:
        #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(200,155,67,.10);

}


/* =========================================================
   LABELS
   ========================================================= */

.container label {

    color:
        #354255;

    font-weight:
        700;

}


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

.btn,
[class*="btn-"],
.fiscal-btn,
.fornecedor-action,
.product-action,
.nav-action,
.products-nav-link {

    border-radius:
        var(--vl-radius-sm);

    font-family:
        inherit;

    font-weight:
        750;

    transition:
        transform var(--vl-transition),
        box-shadow var(--vl-transition),
        background var(--vl-transition),
        border-color var(--vl-transition),
        color var(--vl-transition);

}


/* =========================================================
   BOTÃO PRINCIPAL
   ========================================================= */

.btn-primary,
.fiscal-btn-primary,
.btn-salvar,
.btn-confirmar,
.dashboard-card-button {

    border:
        1px solid
        rgba(200,155,67,.22);

    background:
        linear-gradient(
            135deg,
            #0a1728,
            #10243c
        );

    color:
        #ffffff;

    box-shadow:
        0 8px 18px rgba(7,17,31,.15);

}

.btn-primary:hover,
.fiscal-btn-primary:hover,
.btn-salvar:hover,
.btn-confirmar:hover,
.dashboard-card-button:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(223,186,112,.45);

    box-shadow:
        0 11px 25px rgba(7,17,31,.21);

}


/* =========================================================
   BOTÕES DE SUCESSO
   ========================================================= */

.btn-success,
.fiscal-btn-success {

    background:
        linear-gradient(
            135deg,
            #128341,
            #159447
        );

    color:
        #ffffff;

}


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

.btn-danger,
.fiscal-btn-danger,
.product-action.delete,
.fornecedor-action.excluir {

    background:
        var(--vl-danger-bg);

    color:
        var(--vl-danger);

    border-color:
        #fecdd3;

}


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

.container table {

    width:
        100%;

    border-collapse:
        separate;

    border-spacing:
        0;

    background:
        #ffffff;

}


/* =========================================================
   THEAD
   ========================================================= */

.container table thead {

    background:
        linear-gradient(
            180deg,
            #fafbfc,
            #f6f8fa
        );

}


/* =========================================================
   TH
   ========================================================= */

.container table th {

    padding:
        13px 14px;

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

    color:
        #697789;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;

    white-space:
        nowrap;

}


/* =========================================================
   TD
   ========================================================= */

.container table td {

    padding:
        13px 14px;

    border-bottom:
        1px solid
        #eef1f5;

    color:
        #344154;

    vertical-align:
        middle;

}


/* =========================================================
   ROW HOVER
   ========================================================= */

.container table tbody tr {

    transition:
        background var(--vl-transition);

}

.container table tbody tr:hover {

    background:
        #fbfcfe;

}

.container table tbody tr:last-child td {

    border-bottom:
        0;

}


/* =========================================================
   TABLE WRAPPERS
   ========================================================= */

.table-responsive,
.table-wrapper,
.fiscal-table-wrapper,
.fornecedores-table-wrapper,
.baixa-table-wrapper,
.tabela-fechamento-wrapper,
.comanda-table-wrapper {

    overflow:
        auto;

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

    scrollbar-width:
        thin;

    scrollbar-color:
        #cbd2dc transparent;

}


/* =========================================================
   FISCAL TABS
   ========================================================= */

.fiscal-tabs {

    display:
        flex;

    gap:
        7px;

    padding:
        6px;

    overflow-x:
        auto;

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

    border-radius:
        14px;

    background:
        rgba(255,255,255,.95);

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

    scrollbar-width:
        none;

}

.fiscal-tabs::-webkit-scrollbar {

    display:
        none;

}

.fiscal-tab {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    min-height:
        39px;

    padding:
        0 14px;

    border-radius:
        10px;

    color:
        #697789;

    font-size:
        11px;

    font-weight:
        750;

    white-space:
        nowrap;

    transition:
        background var(--vl-transition),
        color var(--vl-transition),
        box-shadow var(--vl-transition);

}

.fiscal-tab:hover {

    background:
        var(--vl-gold-100);

    color:
        var(--vl-gold-700);

}

.fiscal-tab.active {

    background:
        linear-gradient(
            135deg,
            #0a1728,
            #10243c
        );

    color:
        #ffffff;

    box-shadow:
        0 6px 15px rgba(7,17,31,.16);

}


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

.fiscal-content {

    padding:
        27px;

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

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

    background:
        rgba(255,255,255,.96);

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

}


/* =========================================================
   MESAS
   ========================================================= */

.mesa,
.mesa-card,
[class*="mesa-card"] {

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

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

    transition:
        transform var(--vl-transition),
        box-shadow var(--vl-transition),
        border-color var(--vl-transition);

}

.mesa:hover,
.mesa-card:hover {

    transform:
        translateY(-3px);

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

}


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

.mesa.livre,
.mesa-card.livre {

    border-color:
        #c7ead3;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f4fcf7
        );

}


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

.mesa.ocupada,
.mesa-card.ocupada {

    border-color:
        #f4c5ca;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fff6f7
        );

}


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

.financeiro-header {

    margin-bottom:
        22px;

}

.caixa-aberto-header,
.relatorio-header,
.fechamento-header {

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

}


/* =========================================================
   CONFIG CLIENTE
   ========================================================= */

.client-config-page .config-card {

    position:
        relative;

    overflow:
        hidden;

}

.client-config-page .config-card::before {

    content: "";

    position:
        absolute;

    left:
        18px;

    right:
        18px;

    top:
        0;

    height:
        1px;

    background:
        var(--vl-gold-line);

}


/* =========================================================
   CLIENT CONFIG INLINE OVERRIDE
   ========================================================= */

.client-config-page
button[style*="background:#101828"],
.client-config-page
button[style*="background: #101828"] {

    background:
        linear-gradient(
            135deg,
            #0a1728,
            #10243c
        ) !important;

    color:
        #ffffff !important;

    border:
        1px solid
        rgba(223,186,112,.18) !important;

    box-shadow:
        0 8px 18px rgba(7,17,31,.15) !important;

}


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

.system-alert,
.fiscal-alert,
.fornecedores-alert,
.alert-sucesso,
.alert-erro {

    border-radius:
        13px;

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

}


/* =========================================================
   SUCESSO
   ========================================================= */

.alert-sucesso {

    background:
        var(--vl-success-bg);

    color:
        var(--vl-success);

}


/* =========================================================
   ERRO
   ========================================================= */

.alert-erro {

    background:
        var(--vl-danger-bg);

    color:
        var(--vl-danger);

}


/* =========================================================
   MODAIS
   ========================================================= */

.modal-venda-card,
.modal-card,
.modal-content,
.estorno-modal-card {

    border:
        1px solid
        rgba(223,186,112,.16);

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

    background:
        rgba(255,255,255,.98);

    box-shadow:
        0 30px 80px rgba(7,17,31,.26);

}


/* =========================================================
   OVERLAY
   ========================================================= */

.modal-overlay,
.modal-manifestacao {

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

}


/* =========================================================
   EMPTY STATES
   ========================================================= */

.empty-table,
.fornecedores-empty,
.comanda-vazia,
.baixa-empty,
.sem-mesas {

    color:
        var(--vl-text-3);

}


/* =========================================================
   USUÁRIOS
   ========================================================= */

.usuarios-permission-group,
.usuarios-master-access {

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

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

    background:
        #ffffff;

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

}

.usuarios-master-access {

    border-color:
        rgba(200,155,67,.25);

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #fffdf8
        );

}

.usuarios-master-access i {

    color:
        var(--vl-gold-600);

}


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

.login-page {

    background:
        radial-gradient(
            circle at 15% 5%,
            rgba(59,130,246,.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 0%,
            rgba(200,155,67,.10),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #07111f,
            #0a1728 60%,
            #10243c
        );

}

.login-card,
.login-box {

    border:
        1px solid
        rgba(223,186,112,.16);

    border-radius:
        24px;

    background:
        rgba(255,255,255,.98);

    box-shadow:
        0 34px 90px rgba(0,0,0,.28);

}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {

    width:
        10px;

    height:
        10px;

}

::-webkit-scrollbar-track {

    background:
        transparent;

}

::-webkit-scrollbar-thumb {

    border:
        3px solid transparent;

    border-radius:
        999px;

    background:
        #c6cdd7;

    background-clip:
        padding-box;

}

::-webkit-scrollbar-thumb:hover {

    background:
        #aeb7c4;

    background-clip:
        padding-box;

}


/* =========================================================
   LINKS
   ========================================================= */

.container a {

    text-decoration:
        none;

}


/* =========================================================
   FOCUS
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {

    outline:
        3px solid
        rgba(200,155,67,.24);

    outline-offset:
        3px;

}


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

@media (max-width: 1100px) {

    .container {

        width:
            calc(100% - 36px);

    }

}


@media (max-width: 768px) {

    .container {

        width:
            calc(100% - 26px);

    }

    .dashboard-header,
    .mesas-header,
    .page-header,
    .page-header-comanda,
    .baixa-header,
    .fechamento-header,
    .produtos-header,
    .fornecedores-page-header,
    .fiscal-dashboard-header,
    .client-config-standard-header,
    .usuarios-page-header,
    .financeiro-header,
    .nota-entrada-header,
    .pedidos-header {

        border-radius:
            19px;

    }

    .fiscal-content {

        padding:
            19px;

    }

    .fiscal-tabs {

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

    }

    .table-responsive,
    .table-wrapper,
    .fiscal-table-wrapper,
    .fornecedores-table-wrapper,
    .baixa-table-wrapper,
    .tabela-fechamento-wrapper,
    .comanda-table-wrapper {

        overflow-x:
            auto;

        -webkit-overflow-scrolling:
            touch;

    }

}


@media (max-width: 520px) {

    .container {

        width:
            calc(100% - 20px);

    }

    .fiscal-content {

        padding:
            15px;

    }

    .dashboard-header,
    .mesas-header,
    .page-header,
    .page-header-comanda,
    .baixa-header,
    .fechamento-header,
    .produtos-header,
    .fornecedores-page-header,
    .fiscal-dashboard-header,
    .client-config-standard-header,
    .usuarios-page-header,
    .financeiro-header,
    .nota-entrada-header,
    .pedidos-header {

        border-radius:
            16px;

    }

}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

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

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

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }

}

/* VALORIUM_LUXE_V2_END */

/* VALORIUM_LUXE_V21_MODULES_START */

/* =========================================================
   VALORIUM LUXE V2.1
   MÓDULOS OPERACIONAIS
   ========================================================= */


/* =========================================================
   01 - GESTÃO DE PEDIDOS
   ========================================================= */

.pedidos-page {

    padding-bottom:
        42px;

}


.pedidos-page .pedidos-header {

    padding:
        31px 34px;

    margin-bottom:
        26px;

    border:
        1px solid
        rgba(223, 186, 112, .16);

    border-radius:
        var(--vl-radius-xl);

    background:
        linear-gradient(
            135deg,
            #07111f 0%,
            #0a1728 44%,
            #10243c 76%,
            #19385d 100%
        );

    box-shadow:
        0 28px 65px
        rgba(7, 17, 31, .18);

}


.pedidos-page .pedidos-title-area {

    position:
        relative;

    z-index:
        2;

}


.pedidos-page .pedidos-title-area h2 {

    margin:
        8px 0 5px;

    color:
        #ffffff;

    font-size:
        clamp(25px, 3vw, 34px);

    font-weight:
        800;

    letter-spacing:
        -.8px;

}


.pedidos-page .page-subtitle {

    margin:
        0;

    color:
        rgba(226, 232, 240, .75);

    font-size:
        13px;

}


.pedidos-page .pedidos-navigation {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        23px;

    padding-top:
        18px;

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

}


.pedidos-page .nav-separator {

    color:
        rgba(223,186,112,.55);

}


.pedidos-page .pedidos-nav-danger {

    border-color:
        rgba(248,113,113,.22);

    background:
        rgba(220,38,38,.10);

    color:
        #fecaca;

}


.pedidos-page .pedidos-nav-danger:hover {

    background:
        rgba(220,38,38,.18);

    color:
        #ffffff;

}


.pedidos-page .pedidos-section-heading {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin:
        0 0 15px;

}


.pedidos-page .pedidos-section-heading h3 {

    margin:
        4px 0 0;

    color:
        var(--vl-text);

    font-size:
        19px;

    font-weight:
        800;

}


.pedidos-page .pedidos-live {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        8px 11px;

    border:
        1px solid
        #d9eee1;

    border-radius:
        999px;

    background:
        #f4fbf6;

    color:
        #27834c;

    font-size:
        11px;

    font-weight:
        750;

}


.pedidos-page .live-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #22c55e;

    box-shadow:
        0 0 0 4px
        rgba(34,197,94,.10);

}


.pedidos-page .pedidos-table-card {

    overflow:
        hidden;

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

    border-radius:
        18px;

    background:
        #ffffff;

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

}


.pedidos-page .pedidos-table {

    margin:
        0;

}


.pedidos-page .pedidos-table thead {

    background:
        linear-gradient(
            180deg,
            #fbfcfd,
            #f6f8fa
        );

}


.pedidos-page .pedidos-table th {

    padding:
        14px 15px;

    color:
        #738093;

    font-size:
        10px;

    font-weight:
        850;

}


.pedidos-page .pedidos-table td {

    padding:
        15px;

}


.pedidos-page .pedido-id {

    color:
        var(--vl-gold-700);

    font-weight:
        850;

}


.pedidos-page .pedido-identificacao {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

}


.pedidos-page .pedido-identificacao strong {

    display:
        block;

    color:
        var(--vl-text);

    font-weight:
        800;

}


.pedidos-page .pedido-identificacao small {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--vl-text-3);

}


.pedidos-page .pedido-tipo-icon {

    width:
        38px;

    height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(200,155,67,.18);

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #fffdf8
        );

}


.pedidos-page .pedido-origem {

    display:
        inline-flex;

    padding:
        6px 9px;

    border:
        1px solid
        #e4e9ef;

    border-radius:
        999px;

    background:
        #f8fafc;

    color:
        #536173;

    font-size:
        11px;

    font-weight:
        700;

}


.pedidos-page .pedido-valor {

    color:
        #172033;

    font-weight:
        850;

}


.pedidos-page .status-badge {

    gap:
        6px;

    padding:
        7px 10px;

    border:
        1px solid transparent;

}


.pedidos-page .status-dot {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        currentColor;

}


.pedidos-page .status-pendente {

    background:
        var(--vl-warning-bg);

    border-color:
        #f8df9a;

    color:
        #9b650f;

}


.pedidos-page .status-em_preparo {

    background:
        var(--vl-info-bg);

    border-color:
        #cfe0ff;

    color:
        #2563eb;

}


.pedidos-page .status-pronto {

    background:
        var(--vl-success-bg);

    border-color:
        #caecd7;

    color:
        #15803d;

}


.pedidos-page .status-entregue {

    background:
        #f2f5f8;

    border-color:
        #e1e6ec;

    color:
        #5b6879;

}


.pedidos-page .status-cancelado {

    background:
        var(--vl-danger-bg);

    border-color:
        #fecdd3;

    color:
        var(--vl-danger);

}


.pedidos-page .pedidos-acoes {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

}


.pedidos-page .pedido-action {

    min-height:
        32px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 10px;

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

    border-radius:
        9px;

    background:
        #ffffff;

    font-size:
        10px;

    font-weight:
        800;

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

}


.pedidos-page .pedido-action-preparo {

    color:
        #2563eb;

    border-color:
        #d4e2ff;

    background:
        #f4f7ff;

}


.pedidos-page .pedido-action-pronto {

    color:
        #15803d;

    border-color:
        #cfe9d8;

    background:
        #f2fbf5;

}


.pedidos-page .pedido-action-cancelar {

    color:
        #cf3341;

    border-color:
        #f5d0d4;

    background:
        #fff5f6;

}


/* =========================================================
   02 - MESAS
   ========================================================= */

.mesas-page .mesas-header {

    padding:
        31px 34px;

    margin-bottom:
        25px;

}


.mesas-page .mesas-header-main {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        22px;

}


.mesas-page .mesas-list-header,
.mesas-page .form-section-header {

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

    padding-bottom:
        13px;

    margin-bottom:
        17px;

}


.mesas-page .mesas-grid,
.mesas-page .grid-mesas {

    gap:
        15px;

}


.mesas-page .mesa,
.mesas-page .mesa-card {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        150px;

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

    border-radius:
        17px;

    background:
        #ffffff;

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

}


.mesas-page .mesa::before,
.mesas-page .mesa-card::before {

    content: "";

    position:
        absolute;

    left:
        15px;

    right:
        15px;

    top:
        0;

    height:
        1px;

    background:
        var(--vl-gold-line);

}


.mesas-page .mesa:hover,
.mesas-page .mesa-card:hover {

    transform:
        translateY(-4px);

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

}


.mesas-page .mesa.livre,
.mesas-page .mesa-card.livre {

    border-color:
        #caead5;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7fcf8
        );

}


.mesas-page .mesa.ocupada,
.mesas-page .mesa-card.ocupada {

    border-color:
        #f1c7cc;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fff7f8
        );

}


.mesas-page .mesa.pagamento,
.mesas-page .mesa-card.pagamento {

    border-color:
        #efd9a8;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fffaf0
        );

}


.mesas-page .mesa h3,
.mesas-page .mesa-card h3 {

    color:
        var(--vl-midnight-900);

    font-weight:
        850;

}


.mesas-page .mesa-total,
.mesas-page .mesa-valor {

    color:
        var(--vl-gold-700);

    font-weight:
        850;

}


/* =========================================================
   03 - FINANCEIRO
   ========================================================= */

.financeiro-header,
.financas-page .page-header {

    padding:
        31px 34px;

    margin-bottom:
        24px;

}


.financeiro-header-titulo h2,
.financeiro-header-titulo h1 {

    color:
        #ffffff;

    font-weight:
        800;

}


.financeiro-header-acoes {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

}


.financeiro-card,
.caixa-card,
.finance-card {

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

    border-radius:
        18px;

    background:
        #ffffff;

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

}


.financeiro-card {

    position:
        relative;

    overflow:
        hidden;

}


.financeiro-card::before {

    content: "";

    position:
        absolute;

    left:
        20px;

    right:
        20px;

    top:
        0;

    height:
        1px;

    background:
        var(--vl-gold-line);

}


.caixa-aberto-header {

    padding:
        18px 20px;

    border:
        1px solid
        #cfe9d8;

    border-radius:
        15px;

    background:
        linear-gradient(
            135deg,
            #f3fbf5,
            #ffffff
        );

}


.fechamento-caixa {

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

    border-radius:
        18px;

    background:
        #ffffff;

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

}


.fechamento-caixa .fechamento-header {

    padding:
        18px 20px;

    border:
        0;

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

    border-radius:
        18px 18px 0 0;

    background:
        linear-gradient(
            135deg,
            #0a1728,
            #10243c
        );

    box-shadow:
        none;

}


.fechamento-caixa .fechamento-header h4 {

    color:
        #ffffff;

}


.fechamento-caixa .fechamento-header p,
.fechamento-caixa .fechamento-header small {

    color:
        rgba(226,232,240,.72);

}


.fechamento-grid {

    gap:
        16px;

}


.form-fechamento-caixa {

    padding:
        20px;

}


.relatorio-header {

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

    border-radius:
        16px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbfcfd
        );

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

}


/* =========================================================
   04 - BAIXA PARCIAL
   ========================================================= */

.baixa-header {

    padding:
        30px 33px;

    margin-bottom:
        22px;

}


.baixa-header-info h2 {

    margin:
        7px 0 5px;

    color:
        #ffffff;

    font-size:
        30px;

    font-weight:
        800;

}


.baixa-mesa-info {

    color:
        rgba(226,232,240,.77);

    font-size:
        13px;

}


.baixa-resumo {

    display:
        grid;

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

    gap:
        13px;

    margin-bottom:
        20px;

}


.baixa-resumo-item {

    position:
        relative;

    overflow:
        hidden;

    padding:
        17px 18px;

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

    border-radius:
        15px;

    background:
        #ffffff;

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

}


.baixa-resumo-item::before {

    content: "";

    position:
        absolute;

    left:
        14px;

    right:
        14px;

    top:
        0;

    height:
        1px;

    background:
        var(--vl-gold-line);

}


.baixa-resumo-label {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--vl-text-3);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .055em;

    text-transform:
        uppercase;

}


.baixa-resumo-item strong {

    color:
        var(--vl-midnight-900);

    font-size:
        19px;

    font-weight:
        850;

}


.baixa-resumo-total {

    border-color:
        rgba(200,155,67,.26);

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #ffffff
        );

}


.baixa-resumo-total strong {

    color:
        var(--vl-gold-700);

}


.baixa-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(330px, .7fr);

    gap:
        18px;

    align-items:
        start;

}


.baixa-card {

    overflow:
        hidden;

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

    border-radius:
        18px;

    background:
        #ffffff;

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

}


.baixa-card-header {

    padding:
        19px 20px;

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

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbfcfd
        );

}


.baixa-card-header h3 {

    margin:
        5px 0 4px;

    color:
        var(--vl-text);

    font-size:
        18px;

    font-weight:
        800;

}


.baixa-card-header p {

    margin:
        0;

    color:
        var(--vl-text-2);

    font-size:
        12px;

}


.baixa-table-wrapper {

    border-radius:
        0;

}


.baixa-table th {

    background:
        #f8fafc;

}


.baixa-table tbody tr:hover {

    background:
        #fffdf8;

}


.baixa-total-box {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin:
        18px;

    padding:
        17px 18px;

    border:
        1px solid
        rgba(200,155,67,.24);

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #fffdf8
        );

}


.baixa-total-box span {

    display:
        block;

    color:
        var(--vl-text);

    font-weight:
        800;

}


.baixa-total-box small {

    color:
        var(--vl-text-3);

}


.baixa-total-box > strong {

    color:
        var(--vl-gold-700);

    font-size:
        22px;

    font-weight:
        900;

}


.pagamento-card {

    position:
        sticky;

    top:
        18px;

}


/* =========================================================
   05 - BAIXA TOTAL / FECHAMENTO
   ========================================================= */

.fechamento-header {

    padding:
        30px 33px;

    margin-bottom:
        22px;

}


.fechamento-titulo-area {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

}


.icone-fechamento {

    width:
        46px;

    height:
        46px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(223,186,112,.22);

    border-radius:
        14px;

    background:
        rgba(255,255,255,.07);

    color:
        var(--vl-gold-400);

}


.fechamento-subtitulo {

    color:
        rgba(226,232,240,.72);

}


.fechamento-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(330px, .8fr);

    gap:
        18px;

    align-items:
        start;

}


.card-fechamento {

    overflow:
        hidden;

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

    border-radius:
        18px;

    background:
        #ffffff;

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

}


.card-fechamento-header {

    padding:
        19px 21px;

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

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbfcfd
        );

}


.card-fechamento-header h3 {

    margin:
        0 0 4px;

    color:
        var(--vl-text);

    font-size:
        18px;

    font-weight:
        850;

}


.card-fechamento-header p {

    margin:
        0;

    color:
        var(--vl-text-2);

    font-size:
        12px;

}


.card-fechamento-body {

    padding:
        20px;

}


.resumo-conta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    margin-bottom:
        18px;

    padding:
        15px 16px;

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

    border-radius:
        13px;

    background:
        #f8fafc;

}


.resumo-label {

    color:
        var(--vl-text-3);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .05em;

    text-transform:
        uppercase;

}


.resumo-valor {

    margin-top:
        4px;

    color:
        var(--vl-midnight-900);

    font-size:
        19px;

    font-weight:
        850;

}


.pagamento-item {

    margin-bottom:
        10px;

}


.pagamento-label {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    min-height:
        62px;

    padding:
        12px 14px;

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

    border-radius:
        13px;

    background:
        #ffffff;

    cursor:
        pointer;

    transition:
        border-color var(--vl-transition),
        background var(--vl-transition),
        box-shadow var(--vl-transition),
        transform var(--vl-transition);

}


.pagamento-label:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(200,155,67,.32);

    background:
        #fffdf8;

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

}


.pagamento-item input:checked + .pagamento-label {

    border-color:
        var(--vl-gold-500);

    background:
        linear-gradient(
            135deg,
            #fff9eb,
            #fffdf8
        );

    box-shadow:
        0 0 0 3px
        rgba(200,155,67,.08);

}


.icone-pagamento {

    width:
        40px;

    height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        #f5f7fa;

    color:
        var(--vl-gold-700);

}


.pagamento-texto {

    min-width:
        0;

}


.pagamento-nome {

    display:
        block;

    color:
        var(--vl-text);

    font-weight:
        800;

}


.pagamento-descricao {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--vl-text-3);

    font-size:
        11px;

}


.pagamento-total-final {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin-top:
        18px;

    padding:
        18px;

    border:
        1px solid
        rgba(200,155,67,.27);

    border-radius:
        15px;

    background:
        linear-gradient(
            135deg,
            #fff8e8,
            #fffdf8
        );

}


.pagamento-total-final strong {

    color:
        var(--vl-gold-700);

    font-size:
        24px;

    font-weight:
        900;

}


.btn-concluir-fechamento {

    width:
        100%;

    min-height:
        49px;

    margin-top:
        15px;

    border:
        1px solid
        rgba(223,186,112,.24);

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #07111f,
            #10243c
        );

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        850;

    box-shadow:
        0 10px 25px
        rgba(7,17,31,.19);

    cursor:
        pointer;

    transition:
        transform var(--vl-transition),
        box-shadow var(--vl-transition),
        border-color var(--vl-transition);

}


.btn-concluir-fechamento:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(223,186,112,.50);

    box-shadow:
        0 15px 34px
        rgba(7,17,31,.24);

}


.aviso-fechamento {

    margin-top:
        14px;

    padding:
        13px 14px;

    border:
        1px solid
        #f4dfaa;

    border-radius:
        12px;

    background:
        #fff9eb;

    color:
        #895b14;

    font-size:
        12px;

    line-height:
        1.55;

}


.payment-feedback {

    margin-bottom:
        18px;

    border-radius:
        14px;

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

}


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

@media (max-width: 980px) {

    .baixa-grid,
    .fechamento-grid {

        grid-template-columns:
            1fr;

    }

    .pagamento-card {

        position:
            static;

    }

    .baixa-resumo {

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

    }

}


@media (max-width: 700px) {

    .pedidos-page .pedidos-header,
    .mesas-page .mesas-header,
    .financeiro-header,
    .baixa-header,
    .fechamento-header {

        padding:
            24px 20px;

        border-radius:
            18px;

    }

    .pedidos-page .pedidos-section-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

    .pedidos-page .pedidos-navigation {

        gap:
            7px;

    }

    .pedidos-page .nav-separator {

        display:
            none;

    }

    .baixa-resumo {

        grid-template-columns:
            1fr;

    }

    .baixa-total-box,
    .pagamento-total-final {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}


@media (max-width: 520px) {

    .pedidos-page .pedido-action {

        padding:
            0 8px;

    }

    .baixa-card-header,
    .card-fechamento-header,
    .card-fechamento-body {

        padding:
            16px;

    }

}

/* VALORIUM_LUXE_V21_MODULES_END */

/* VALORIUM_LUXE_MESAS_FINAL_START */

/* =========================================================
   VALORIUM SISTEMAS
   GESTÃO DE MESAS
   LUXE FINAL

   Escopo totalmente isolado em .mesas-page
   ========================================================= */


/* =========================================================
   PÁGINA
   ========================================================= */

.mesas-page {

    position: relative;

    padding:
        34px 0 60px;

}


/* =========================================================
   HEADER
   ========================================================= */

.mesas-page .mesas-header {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    padding:
        0 !important;

    margin-bottom:
        24px;

    border:
        1px solid
        rgba(223, 186, 112, .15);

    border-radius:
        var(--vl-radius-xl);

    background:
        linear-gradient(
            135deg,
            #07111f 0%,
            #0a1728 42%,
            #10243c 73%,
            #19385d 100%
        );

    box-shadow:
        0 28px 68px
        rgba(7, 17, 31, .18);

}


/* =========================================================
   GLOW HEADER
   ========================================================= */

.mesas-page .mesas-header::before {

    content: "";

    position:
        absolute;

    z-index:
        -1;

    width:
        420px;

    height:
        420px;

    right:
        -125px;

    top:
        -245px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.27) 0%,
            rgba(59,130,246,.08) 44%,
            transparent 72%
        );

    pointer-events:
        none;

}


.mesas-page .mesas-header::after {

    content: "";

    position:
        absolute;

    z-index:
        -1;

    left:
        0;

    right:
        0;

    bottom:
        0;

    width:
        auto;

    height:
        1px;

    background:
        var(--vl-gold-line);

    opacity:
        .85;

    border-radius:
        0;

}


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

.mesas-page .page-header-content {

    position:
        relative;

    z-index:
        2;

    min-height:
        0 !important;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        stretch;

    justify-content:
        flex-start;

    gap:
        22px;

    padding:
        34px 38px 27px;

}


/* =========================================================
   CORREÇÃO PRINCIPAL
   V2.1 HAVIA TRANSFORMADO EM FLEX HORIZONTAL
   ========================================================= */

.mesas-page .mesas-header-main {

    display:
        block !important;

    width:
        100%;

    max-width:
        760px;

}


/* =========================================================
   MARCA
   ========================================================= */

.mesas-page .page-brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin:
        0 0 11px;

    color:
        var(--vl-gold-400);

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        1.25px;

    text-transform:
        uppercase;

}


.mesas-page .page-brand i {

    color:
        var(--vl-gold-500);

}


/* =========================================================
   TÍTULO
   ========================================================= */

.mesas-page .mesas-header-main h2 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            27px,
            3vw,
            35px
        );

    font-weight:
        800;

    line-height:
        1.12;

    letter-spacing:
        -.85px;

}


/* =========================================================
   SUBTÍTULO
   ========================================================= */

.mesas-page .page-subtitle {

    max-width:
        680px;

    margin:
        8px 0 0;

    color:
        rgba(226,232,240,.74);

    font-size:
        13px;

    line-height:
        1.65;

}


/* =========================================================
   NAVEGAÇÃO
   ========================================================= */

.mesas-page .page-navigation {

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

    width:
        100%;

    padding:
        17px 0 0 !important;

    margin:
        0;

    border:
        0;

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

    background:
        transparent;

}


/* =========================================================
   LINKS HEADER
   ========================================================= */

.mesas-page .page-navigation .nav-action {

    min-height:
        39px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(236,211,158,.14);

    border-radius:
        10px;

    background:
        rgba(255,255,255,.055);

    color:
        rgba(226,232,240,.88);

    font-size:
        11px;

    font-weight:
        750;

    text-decoration:
        none;

    box-shadow:
        none;

    backdrop-filter:
        blur(8px);

    transition:
        transform var(--vl-transition),
        border-color var(--vl-transition),
        background var(--vl-transition),
        color var(--vl-transition);

}


.mesas-page .page-navigation .nav-action:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(236,211,158,.30);

    background:
        rgba(255,255,255,.10);

    color:
        #ffffff;

}


.mesas-page .page-navigation .nav-action-success {

    border-color:
        rgba(223,186,112,.34);

    background:
        linear-gradient(
            135deg,
            rgba(200,155,67,.20),
            rgba(200,155,67,.09)
        );

    color:
        #f4dca9;

}


.mesas-page .page-navigation .nav-action-success:hover {

    border-color:
        rgba(223,186,112,.52);

    background:
        rgba(200,155,67,.23);

    color:
        #ffffff;

}


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

.mesas-page .mesas-summary {

    display:
        grid;

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

    gap:
        14px;

    margin-bottom:
        25px;

}


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

.mesas-page .summary-card {

    position:
        relative;

    min-width:
        0;

    min-height:
        103px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        17px 18px;

    overflow:
        hidden;

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

    border-radius:
        16px;

    background:
        rgba(255,255,255,.97);

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

    transition:
        transform var(--vl-transition),
        border-color var(--vl-transition),
        box-shadow var(--vl-transition);

}


.mesas-page .summary-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(200,155,67,.26);

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

}


/* remove decoração circular antiga */
.mesas-page .summary-card::after {

    content:
        none !important;

}


/* linha premium */
.mesas-page .summary-card::before {

    content: "";

    position:
        absolute;

    left:
        17px;

    right:
        17px;

    top:
        0;

    height:
        1px;

    background:
        var(--vl-gold-line);

}


/* =========================================================
   ÍCONES RESUMO
   ========================================================= */

.mesas-page .summary-card-icon {

    position:
        relative;

    z-index:
        2;

    width:
        46px;

    height:
        46px;

    flex:
        0 0 46px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        transparent;

    border-radius:
        13px;

    font-size:
        17px;

}


.mesas-page .summary-card-icon.blue {

    border-color:
        #d7e4ff;

    background:
        #f1f6ff;

    color:
        #2563eb;

}


.mesas-page .summary-card-icon.green {

    border-color:
        #ccebd6;

    background:
        #f1fbf4;

    color:
        #159447;

}


.mesas-page .summary-card-icon.red {

    border-color:
        #f5d3d7;

    background:
        #fff4f5;

    color:
        #cf3341;

}


.mesas-page .summary-card-icon.orange {

    border-color:
        #f1dfb9;

    background:
        #fff9ed;

    color:
        #b87812;

}


.mesas-page .summary-label {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--vl-text-3);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .045em;

    text-transform:
        uppercase;

}


.mesas-page .summary-card strong {

    display:
        block;

    margin:
        0;

    color:
        var(--vl-midnight-900);

    font-size:
        27px;

    font-weight:
        850;

    line-height:
        1;

    letter-spacing:
        -.75px;

}


/* =========================================================
   FORMULÁRIO DE MESA
   ========================================================= */

.mesas-page .mesa-form-card {

    position:
        relative;

    overflow:
        hidden;

    margin-bottom:
        31px;

    padding:
        27px;

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

    border-radius:
        18px;

    background:
        #ffffff;

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

}


/* =========================================================
   LINHA SUPERIOR FORM
   ========================================================= */

.mesas-page .mesa-form-card::before {

    content: "";

    position:
        absolute;

    left:
        24px;

    right:
        24px;

    top:
        0;

    width:
        auto;

    height:
        1px;

    background:
        var(--vl-gold-line);

}


/* =========================================================
   TÍTULO FORM
   ========================================================= */

.mesas-page .section-title {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        23px;

}


.mesas-page .section-title-icon {

    width:
        46px;

    height:
        46px;

    flex:
        0 0 46px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(200,155,67,.20);

    border-radius:
        13px;

    background:
        linear-gradient(
            135deg,
            #fff8e9,
            #fffdf8
        );

    color:
        var(--vl-gold-700);

}


.mesas-page .section-title h3 {

    margin:
        0;

    color:
        var(--vl-text);

    font-size:
        19px;

    font-weight:
        850;

    letter-spacing:
        -.3px;

}


.mesas-page .section-title p {

    margin:
        4px 0 0;

    color:
        var(--vl-text-2);

    font-size:
        12px;

}


/* =========================================================
   SEÇÃO DO FORM
   ========================================================= */

.mesas-page .mesa-form-section {

    padding:
        20px;

    border:
        1px solid
        #ebeff4;

    border-radius:
        14px;

    background:
        linear-gradient(
            180deg,
            #fbfcfd,
            #ffffff
        );

}


/* =========================================================
   FORM HEADER
   ========================================================= */

.mesas-page .form-section-header {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding-bottom:
        14px;

    margin-bottom:
        17px;

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

}


.mesas-page .form-section-number {

    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(200,155,67,.22);

    border-radius:
        10px;

    background:
        #fff9ec;

    color:
        var(--vl-gold-700);

    font-size:
        10px;

    font-weight:
        900;

}


.mesas-page .form-section-header h4 {

    margin:
        0;

    color:
        var(--vl-text);

    font-size:
        14px;

    font-weight:
        800;

}


.mesas-page .form-section-header p {

    margin:
        3px 0 0;

    color:
        var(--vl-text-3);

    font-size:
        11px;

}


/* =========================================================
   GRID FORM
   ========================================================= */

.mesas-page .mesa-form-grid {

    display:
        grid;

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

    gap:
        16px;

}


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

.mesas-page .input-icon {

    position:
        relative;

}


.mesas-page .input-icon > i {

    color:
        var(--vl-gold-600);

}


/* =========================================================
   BOTÃO SALVAR
   ========================================================= */

.mesas-page .btn-product-save {

    min-height:
        45px;

    padding:
        0 18px;

    border:
        1px solid
        rgba(223,186,112,.24);

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            #07111f,
            #10243c
        );

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        800;

    box-shadow:
        0 8px 20px
        rgba(7,17,31,.16);

}


.mesas-page .btn-product-save:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(223,186,112,.48);

    box-shadow:
        0 12px 27px
        rgba(7,17,31,.22);

}


/* =========================================================
   MAPA DO SALÃO HEADER
   ========================================================= */

.mesas-page .mesas-list-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        0 1px 14px;

    margin-bottom:
        16px;

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

}


.mesas-page .mesas-list-header h3 {

    margin:
        0;

    color:
        var(--vl-text);

    font-size:
        20px;

    font-weight:
        850;

    letter-spacing:
        -.35px;

}


.mesas-page .mesas-list-header h3 i {

    margin-right:
        6px;

    color:
        var(--vl-gold-600);

}


.mesas-page .mesas-list-header p {

    margin:
        5px 0 0;

    color:
        var(--vl-text-3);

    font-size:
        11px;

}


/* =========================================================
   STATUS ATUALIZAÇÃO
   ========================================================= */

.mesas-page .mesas-live-status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        7px 10px;

    border:
        1px solid
        #d6eadc;

    border-radius:
        999px;

    background:
        #f5fbf7;

    color:
        #398157;

    font-size:
        10px;

    font-weight:
        750;

}


.mesas-page .mesas-live-dot {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #22c55e;

    box-shadow:
        0 0 0 4px
        rgba(34,197,94,.09);

}


/* =========================================================
   GRID DE MESAS
   ========================================================= */

.mesas-page .grid-mesas {

    display:
        grid;

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

    gap:
        16px;

}


/* =========================================================
   CARD REAL DO mesas.php
   ========================================================= */

.mesas-page .card-mesa {

    --mesa-color:
        var(--vl-blue-600);

    --mesa-light:
        #f2f6ff;

    position:
        relative;

    min-width:
        0;

    min-height:
        240px;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    padding:
        19px;

    box-sizing:
        border-box;

    border:
        1px solid
        var(--vl-border) !important;

    border-radius:
        18px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fdfefe 100%
        ) !important;

    color:
        var(--vl-text) !important;

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

    transition:
        transform var(--vl-transition),
        border-color var(--vl-transition),
        box-shadow var(--vl-transition);

}


/* =========================================================
   LINHA DE STATUS
   ========================================================= */

.mesas-page .card-mesa::before {

    content: "";

    position:
        absolute;

    top:
        0;

    left:
        18px;

    right:
        18px;

    width:
        auto;

    height:
        2px;

    border-radius:
        0 0 999px 999px;

    background:
        var(--mesa-color);

}


/* =========================================================
   GLOW DO CARD
   ========================================================= */

.mesas-page .card-mesa::after {

    content: "";

    position:
        absolute;

    width:
        125px;

    height:
        125px;

    right:
        -63px;

    top:
        -65px;

    border-radius:
        50%;

    background:
        var(--mesa-light);

    opacity:
        .70;

    pointer-events:
        none;

}


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

.mesas-page .card-mesa:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(200,155,67,.24) !important;

    box-shadow:
        0 17px 38px
        rgba(7,17,31,.10);

}


/* =========================================================
   IMPORTANTE:
   NEUTRALIZAR REGRAS GLOBAIS .status-*
   ========================================================= */

.mesas-page .card-mesa.status-livre {

    --mesa-color:
        #159447;

    --mesa-light:
        #edf9f1;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbfefc
        ) !important;

    color:
        var(--vl-text) !important;

}


.mesas-page .card-mesa.status-ocupada {

    --mesa-color:
        #cf3341;

    --mesa-light:
        #fff1f2;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fffdfd
        ) !important;

    color:
        var(--vl-text) !important;

}


.mesas-page .card-mesa.status-reservada {

    --mesa-color:
        #b87812;

    --mesa-light:
        #fff8e8;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fffefd
        ) !important;

    color:
        var(--vl-text) !important;

}


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

.mesas-page .mesa-card-top {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        12px;

}


/* =========================================================
   NÚMERO DA MESA
   ========================================================= */

.mesas-page .mesa-numero {

    margin:
        0;

    color:
        var(--vl-midnight-900) !important;

    font-size:
        18px;

    font-weight:
        850;

    line-height:
        1.2;

    letter-spacing:
        -.35px;

}


/* =========================================================
   ID
   ========================================================= */

.mesas-page .mesa-id {

    margin-top:
        4px;

    color:
        var(--vl-text-3);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size:
        9px;

}


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

.mesas-page .card-mesa .badge-status {

    position:
        relative;

    z-index:
        3;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    padding:
        6px 9px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--mesa-color) 17%,
            transparent
        );

    border-radius:
        999px;

    background:
        var(--mesa-light);

    color:
        var(--mesa-color);

    font-size:
        9px;

    font-weight:
        850;

    white-space:
        nowrap;

}


/* =========================================================
   INFORMAÇÕES
   ========================================================= */

.mesas-page .mesa-info {

    position:
        relative;

    z-index:
        2;

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    gap:
        9px;

    padding:
        21px 0 17px;

}


.mesas-page .mesa-cliente {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--vl-text) !important;

    font-size:
        12px;

    font-weight:
        800;

}


.mesas-page .mesa-cliente i {

    color:
        var(--mesa-color);

}


.mesas-page .mesa-capacidade {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--vl-text-2) !important;

    font-size:
        11px;

    font-weight:
        600;

}


.mesas-page .mesa-capacidade i {

    color:
        var(--vl-text-3);

}


.mesas-page .mesa-sem-capacidade {

    width:
        fit-content;

    padding:
        6px 8px;

    border:
        1px solid
        #ebeff4;

    border-radius:
        8px;

    background:
        #f8fafc;

    color:
        var(--vl-text-3) !important;

    font-size:
        10px;

}


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

.mesas-page .card-actions {

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


/* =========================================================
   BOTÃO PRINCIPAL DO CARD
   ========================================================= */

.mesas-page .btn-lancar {

    width:
        100%;

    min-height:
        41px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 12px;

    border:
        1px solid
        rgba(223,186,112,.22);

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            #07111f,
            #10243c
        );

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        800;

    box-shadow:
        0 7px 16px
        rgba(7,17,31,.15);

}


.mesas-page .btn-lancar:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(223,186,112,.42);

    filter:
        none;

    box-shadow:
        0 11px 23px
        rgba(7,17,31,.21);

}


/* =========================================================
   LIBERAR MESA
   ========================================================= */

.mesas-page .link-mudar {

    min-height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    border-radius:
        8px;

    color:
        var(--vl-text-2);

    font-size:
        10px;

    font-weight:
        700;

}


.mesas-page .link-liberar:hover {

    background:
        #f7f9fb;

    color:
        var(--mesa-color);

}


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

.mesas-page .card-footer-links {

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-top:
        14px;

    padding-top:
        12px;

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

}


.mesas-page .card-footer-links a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    padding:
        5px 7px;

    border-radius:
        7px;

    font-size:
        10px;

    font-weight:
        750;

    transition:
        background var(--vl-transition),
        color var(--vl-transition);

}


.mesas-page .link-editar {

    color:
        #2b6eea;

}


.mesas-page .link-editar:hover {

    background:
        #eef4ff;

    color:
        #1d4ed8;

}


.mesas-page .link-excluir {

    color:
        #cf3341;

}


.mesas-page .link-excluir:hover {

    background:
        #fff1f2;

    color:
        #b42331;

}


/* =========================================================
   ESTADO VAZIO
   ========================================================= */

.mesas-page .sem-mesas {

    grid-column:
        1 / -1;

    min-height:
        270px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        34px;

    border:
        1px dashed
        #ced5df;

    border-radius:
        17px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f9fafc
        );

    text-align:
        center;

}


/* =========================================================
   MODAL VENDA RÁPIDA
   ========================================================= */

.mesas-page ~ .modal-overlay .modal-venda-card,
.modal-overlay .modal-venda-card {

    overflow:
        hidden;

    border:
        1px solid
        rgba(223,186,112,.18);

    border-radius:
        20px;

    background:
        #ffffff;

    box-shadow:
        0 30px 80px
        rgba(7,17,31,.27);

}


.modal-venda-header {

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

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafbfd
        );

}


.modal-venda-icon {

    border:
        1px solid
        rgba(200,155,67,.20);

    background:
        #fff9ec;

    color:
        var(--vl-gold-700);

}


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

@media (max-width: 1200px) {

    .mesas-page .grid-mesas {

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

    }

}


@media (max-width: 1050px) {

    .mesas-page .mesas-summary {

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

    }


    .mesas-page .mesa-form-grid {

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

    }

}


@media (max-width: 900px) {

    .mesas-page .grid-mesas {

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

    }

}


@media (max-width: 700px) {

    .mesas-page {

        padding-top:
            23px;

    }


    .mesas-page .page-header-content {

        padding:
            27px 22px 22px;

    }


    .mesas-page .page-navigation {

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        padding-top:
            15px !important;

        scrollbar-width:
            none;

    }


    .mesas-page
    .page-navigation::-webkit-scrollbar {

        display:
            none;

    }


    .mesas-page
    .page-navigation
    .nav-action {

        flex:
            0 0 auto;

    }


    .mesas-page .mesa-form-card {

        padding:
            21px;

    }


    .mesas-page .mesa-form-grid {

        grid-template-columns:
            1fr;

    }


    .mesas-page .mesas-list-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}


@media (max-width: 600px) {

    .mesas-page .mesas-summary {

        grid-template-columns:
            1fr;

    }


    .mesas-page .grid-mesas {

        grid-template-columns:
            1fr;

    }


    .mesas-page .card-mesa {

        min-height:
            225px;

    }

}


@media (max-width: 430px) {

    .mesas-page {

        padding-top:
            17px;

    }


    .mesas-page .page-header-content {

        padding:
            24px 18px 20px;

    }


    .mesas-page .mesas-header-main h2 {

        font-size:
            26px;

    }


    .mesas-page .summary-card {

        min-height:
            92px;

        padding:
            15px;

    }


    .mesas-page .mesa-form-card {

        padding:
            17px;

    }


    .mesas-page .mesa-form-section {

        padding:
            16px;

    }


    .mesas-page .mesa-card-top {

        align-items:
            flex-start;

        flex-direction:
            row;

    }


    .mesas-page .card-mesa {

        padding:
            17px;

    }

}

/* VALORIUM_LUXE_MESAS_FINAL_END */

/* VALORIUM_LUXE_PEDIDOS_FINAL_START */

/* =========================================================
   VALORIUM SISTEMAS
   GESTÃO DE PEDIDOS
   LUXE FINAL

   Escopo isolado:
   .pedidos-page
   ========================================================= */


/* =========================================================
   PÁGINA
   ========================================================= */

.pedidos-page {

    position:
        relative;

    padding:
        34px 0 60px;

}


/* =========================================================
   HEADER PRINCIPAL
   ========================================================= */

.pedidos-page .pedidos-header {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    margin:
        0 0 27px;

    padding:
        0 !important;

    border:
        1px solid
        rgba(223,186,112,.15);

    border-radius:
        var(--vl-radius-xl);

    background:
        linear-gradient(
            135deg,
            #07111f 0%,
            #0a1728 42%,
            #10243c 73%,
            #19385d 100%
        );

    box-shadow:
        0 28px 68px
        rgba(7,17,31,.18);

}


/* =========================================================
   GLOW AZUL
   ========================================================= */

.pedidos-page .pedidos-header::before {

    content: "";

    position:
        absolute;

    z-index:
        -1;

    width:
        430px;

    height:
        430px;

    right:
        -125px;

    top:
        -255px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.28) 0%,
            rgba(59,130,246,.08) 44%,
            transparent 72%
        );

    pointer-events:
        none;

}


/* =========================================================
   LINHA DOURADA
   ========================================================= */

.pedidos-page .pedidos-header::after {

    content: "";

    position:
        absolute;

    z-index:
        -1;

    left:
        0;

    right:
        0;

    bottom:
        0;

    width:
        auto;

    height:
        1px;

    border-radius:
        0;

    background:
        var(--vl-gold-line);

    opacity:
        .85;

}


/* =========================================================
   ÁREA SUPERIOR
   ========================================================= */

.pedidos-page .pedidos-header-top {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        28px;

    padding:
        34px 38px 0;

}


/* =========================================================
   TÍTULO
   ========================================================= */

.pedidos-page .pedidos-title-area {

    min-width:
        0;

    max-width:
        760px;

}


/* =========================================================
   BRAND
   ========================================================= */

.pedidos-page
.pedidos-title-area
.page-brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin:
        0 0 11px;

    color:
        var(--vl-gold-400);

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        1.25px;

    text-transform:
        uppercase;

}


/* =========================================================
   H2
   ========================================================= */

.pedidos-page
.pedidos-title-area
h2 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            27px,
            3vw,
            35px
        );

    font-weight:
        800;

    line-height:
        1.12;

    letter-spacing:
        -.85px;

}


/* =========================================================
   SUBTÍTULO
   ========================================================= */

.pedidos-page
.pedidos-title-area
.page-subtitle {

    max-width:
        680px;

    margin:
        8px 0 0;

    color:
        rgba(226,232,240,.74);

    font-size:
        13px;

    font-weight:
        500;

    line-height:
        1.65;

}


/* =========================================================
   FORM ENCERRAR DIA
   ========================================================= */

.pedidos-page
.pedidos-close-day-form {

    flex:
        0 0 auto;

    margin:
        0;

}


/* =========================================================
   NAVEGAÇÃO
   ========================================================= */

.pedidos-page
.pedidos-navigation {

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin:
        24px 38px 0;

    padding:
        17px 0 27px;

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

}


/* =========================================================
   LINKS DA NAVEGAÇÃO
   ========================================================= */

.pedidos-page
.pedidos-navigation
.nav-voltar {

    min-height:
        39px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(236,211,158,.14);

    border-radius:
        10px;

    background:
        rgba(255,255,255,.055);

    color:
        rgba(226,232,240,.88);

    font-size:
        11px;

    font-weight:
        750;

    white-space:
        nowrap;

    text-decoration:
        none;

    box-shadow:
        none;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    transition:
        transform var(--vl-transition),
        border-color var(--vl-transition),
        background var(--vl-transition),
        color var(--vl-transition),
        box-shadow var(--vl-transition);

}


/* =========================================================
   HOVER NAV
   ========================================================= */

.pedidos-page
.pedidos-navigation
.nav-voltar:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(236,211,158,.31);

    background:
        rgba(255,255,255,.10);

    color:
        #ffffff;

}


/* =========================================================
   SEPARADOR
   ========================================================= */

.pedidos-page
.pedidos-navigation
.nav-separator {

    color:
        rgba(223,186,112,.48);

    font-size:
        12px;

}


/* =========================================================
   ENCERRAR DIA
   ========================================================= */

.pedidos-page
.pedidos-navigation
.pedidos-nav-danger {

    border-color:
        rgba(248,113,113,.23);

    background:
        rgba(127,29,29,.22);

    color:
        #fecaca;

    cursor:
        pointer;

}


.pedidos-page
.pedidos-navigation
.pedidos-nav-danger:hover {

    border-color:
        rgba(248,113,113,.42);

    background:
        rgba(153,27,27,.34);

    color:
        #ffffff;

    box-shadow:
        0 8px 18px
        rgba(127,29,29,.13);

}


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

.pedidos-page
.pedidos-alert {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin:
        0 0 23px;

    padding:
        14px 16px;

    border-radius:
        13px;

    font-size:
        11px;

    font-weight:
        650;

    line-height:
        1.5;

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

}


/* =========================================================
   ÍCONE ALERTA
   ========================================================= */

.pedidos-page
.pedidos-alert
.alert-icon {

    width:
        27px;

    height:
        27px;

    flex:
        0 0 27px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    font-size:
        11px;

    font-weight:
        900;

}


/* =========================================================
   SUCESSO
   ========================================================= */

.pedidos-page
.alert-sucesso.pedidos-alert {

    border:
        1px solid
        #ccebd6;

    background:
        linear-gradient(
            135deg,
            #f2fbf5,
            #ffffff
        );

    color:
        #16783d;

}


.pedidos-page
.alert-sucesso.pedidos-alert
.alert-icon {

    background:
        #dcf5e5;

    color:
        #159447;

}


/* =========================================================
   ERRO
   ========================================================= */

.pedidos-page
.alert-erro.pedidos-alert {

    border:
        1px solid
        #f2cdd2;

    background:
        linear-gradient(
            135deg,
            #fff4f5,
            #ffffff
        );

    color:
        #a52834;

}


.pedidos-page
.alert-erro.pedidos-alert
.alert-icon {

    background:
        #fde5e8;

    color:
        #cf3341;

}


/* =========================================================
   CABEÇALHO DA LISTAGEM
   ========================================================= */

.pedidos-page
.pedidos-section-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        18px;

    margin:
        0 1px 16px;

}


/* =========================================================
   EYEBROW
   ========================================================= */

.pedidos-page
.pedidos-section-heading
.section-eyebrow {

    display:
        block;

    margin:
        0 0 5px;

    color:
        var(--vl-gold-700);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        1.1px;

    text-transform:
        uppercase;

}


/* =========================================================
   TÍTULO LISTAGEM
   ========================================================= */

.pedidos-page
.pedidos-section-heading
h3 {

    margin:
        0;

    color:
        var(--vl-text);

    font-size:
        20px;

    font-weight:
        850;

    letter-spacing:
        -.4px;

}


/* =========================================================
   LIVE
   ========================================================= */

.pedidos-page
.pedidos-live {

    min-height:
        32px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        0 11px;

    border:
        1px solid
        #d5eadc;

    border-radius:
        999px;

    background:
        linear-gradient(
            180deg,
            #f8fdf9,
            #f2faf5
        );

    color:
        #358055;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .02em;

}


/* =========================================================
   DOT
   ========================================================= */

.pedidos-page
.pedidos-live
.live-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #22c55e;

    box-shadow:
        0 0 0 4px
        rgba(34,197,94,.09);

}


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

.pedidos-page
.pedidos-table-card {

    position:
        relative;

    min-width:
        0;

    overflow:
        hidden;

    padding:
        0;

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

    border-radius:
        18px;

    background:
        #ffffff;

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

    transition:
        border-color var(--vl-transition),
        box-shadow var(--vl-transition);

}


/* =========================================================
   LINHA PREMIUM
   ========================================================= */

.pedidos-page
.pedidos-table-card::before {

    content: "";

    position:
        absolute;

    z-index:
        3;

    left:
        24px;

    right:
        24px;

    top:
        0;

    height:
        1px;

    background:
        var(--vl-gold-line);

}


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

.pedidos-page
.pedidos-table-card:hover {

    border-color:
        rgba(200,155,67,.21);

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

}


/* =========================================================
   WRAPPER
   ========================================================= */

.pedidos-page
.pedidos-table-wrapper {

    width:
        100%;

    overflow-x:
        auto;

    border-radius:
        inherit;

    scrollbar-width:
        thin;

    scrollbar-color:
        #c7ced8 transparent;

}


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

.pedidos-page
.pedidos-table {

    width:
        100%;

    min-width:
        850px;

    margin:
        0;

    border-collapse:
        separate;

    border-spacing:
        0;

    background:
        #ffffff;

}


/* =========================================================
   THEAD
   ========================================================= */

.pedidos-page
.pedidos-table
thead {

    background:
        linear-gradient(
            180deg,
            #fbfcfd,
            #f5f7fa
        );

}


/* =========================================================
   TH
   ========================================================= */

.pedidos-page
.pedidos-table
th {

    padding:
        15px 16px;

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

    color:
        #738093;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .075em;

    text-align:
        left;

    text-transform:
        uppercase;

    white-space:
        nowrap;

}


/* =========================================================
   TD
   ========================================================= */

.pedidos-page
.pedidos-table
td {

    padding:
        16px;

    border-bottom:
        1px solid
        #eef1f5;

    color:
        #455266;

    font-size:
        12px;

    vertical-align:
        middle;

}


/* =========================================================
   LINHA
   ========================================================= */

.pedidos-page
.pedidos-table
tbody
tr {

    background:
        #ffffff;

    transition:
        background var(--vl-transition),
        box-shadow var(--vl-transition);

}


/* =========================================================
   HOVER LINHA
   ========================================================= */

.pedidos-page
.pedidos-table
tbody
tr:hover {

    background:
        linear-gradient(
            90deg,
            #fffdf8,
            #fbfcfe
        );

}


/* =========================================================
   ÚLTIMA LINHA
   ========================================================= */

.pedidos-page
.pedidos-table
tbody
tr:last-child
td {

    border-bottom:
        0;

}


/* =========================================================
   ID
   sobrescreve legado com !important
   ========================================================= */

.pedidos-page
.pedidos-table
.pedido-id {

    width:
        72px;

    color:
        var(--vl-gold-700) !important;

    font-size:
        11px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .02em;

    white-space:
        nowrap;

}


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

.pedidos-page
.pedido-cliente {

    min-width:
        205px;

}


/* =========================================================
   IDENTIFICAÇÃO
   ========================================================= */

.pedidos-page
.pedido-identificacao {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    min-width:
        0;

}


/* =========================================================
   ÍCONE TIPO
   ========================================================= */

.pedidos-page
.pedido-tipo-icon {

    width:
        39px;

    height:
        39px;

    flex:
        0 0 39px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(200,155,67,.18);

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #fff9ed,
            #fffdf8
        );

    font-size:
        15px;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.9);

    transition:
        transform var(--vl-transition),
        border-color var(--vl-transition),
        background var(--vl-transition);

}


/* =========================================================
   ÍCONE HOVER
   ========================================================= */

.pedidos-page
.pedidos-table
tbody
tr:hover
.pedido-tipo-icon {

    transform:
        translateY(-1px);

    border-color:
        rgba(200,155,67,.32);

    background:
        #fff8e8;

}


/* =========================================================
   TEXTOS CLIENTE
   ========================================================= */

.pedidos-page
.pedido-identificacao
> div {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.pedidos-page
.pedido-identificacao
strong {

    overflow:
        hidden;

    color:
        var(--vl-midnight-900);

    font-size:
        12px;

    font-weight:
        800;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.pedidos-page
.pedido-identificacao
small {

    color:
        var(--vl-text-3);

    font-size:
        9px;

    font-weight:
        550;

}


/* =========================================================
   ORIGEM
   ========================================================= */

.pedidos-page
.pedido-origem {

    min-height:
        27px;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        0 9px;

    border:
        1px solid
        #e2e7ed;

    border-radius:
        999px;

    background:
        linear-gradient(
            180deg,
            #fafbfd,
            #f7f9fb
        );

    color:
        #586679;

    font-size:
        9px;

    font-weight:
        800;

    text-transform:
        capitalize;

    white-space:
        nowrap;

}


/* =========================================================
   VALOR
   sobrescreve legado com !important
   ========================================================= */

.pedidos-page
.pedidos-table
.pedido-valor {

    color:
        var(--vl-midnight-900) !important;

    font-size:
        12px !important;

    font-weight:
        900 !important;

    white-space:
        nowrap;

}


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

.pedidos-page
.status-badge {

    min-height:
        28px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    padding:
        0 10px;

    border:
        1px solid transparent;

    border-radius:
        999px;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .055em;

    white-space:
        nowrap;

}


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

.pedidos-page
.status-badge
.status-dot {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        currentColor;

}


/* =========================================================
   PENDENTE
   ========================================================= */

.pedidos-page
.status-badge.status-pendente {

    border-color:
        #efdbab;

    background:
        linear-gradient(
            180deg,
            #fffaf0,
            #fff7e5
        );

    color:
        #98610c;

}


/* =========================================================
   EM PREPARO
   ========================================================= */

.pedidos-page
.status-badge.status-em_preparo {

    border-color:
        #cbdcff;

    background:
        linear-gradient(
            180deg,
            #f4f7ff,
            #edf3ff
        );

    color:
        #2563eb;

}


/* =========================================================
   PRONTO
   ========================================================= */

.pedidos-page
.status-badge.status-pronto {

    border-color:
        #c9ead4;

    background:
        linear-gradient(
            180deg,
            #f3fbf5,
            #ecf9f0
        );

    color:
        #15803d;

}


/* =========================================================
   ENTREGUE
   ========================================================= */

.pedidos-page
.status-badge.status-entregue {

    border-color:
        #dce2e9;

    background:
        linear-gradient(
            180deg,
            #f7f9fb,
            #f2f5f8
        );

    color:
        #657183;

}


/* =========================================================
   CANCELADO
   ========================================================= */

.pedidos-page
.status-badge.status-cancelado {

    border-color:
        #f2cdd2;

    background:
        linear-gradient(
            180deg,
            #fff5f6,
            #fff0f2
        );

    color:
        #c82f3e;

}


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

.pedidos-page
.pedidos-acoes {

    min-width:
        210px;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

}


/* =========================================================
   BOTÃO BASE
   ========================================================= */

.pedidos-page
.pedido-action {

    min-height:
        31px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 10px;

    border:
        1px solid transparent;

    border-radius:
        9px;

    font-size:
        8px;

    font-weight:
        850;

    white-space:
        nowrap;

    text-decoration:
        none;

    transition:
        transform var(--vl-transition),
        border-color var(--vl-transition),
        background var(--vl-transition),
        box-shadow var(--vl-transition),
        color var(--vl-transition);

}


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

.pedidos-page
.pedido-action:hover {

    transform:
        translateY(-1px);

}


/* =========================================================
   PREPARO
   ========================================================= */

.pedidos-page
.pedido-action-preparo {

    border-color:
        #cfddfa;

    background:
        #f4f7ff;

    color:
        #275ebd;

}


.pedidos-page
.pedido-action-preparo:hover {

    border-color:
        #adc6f5;

    background:
        #eaf1ff;

    box-shadow:
        0 6px 13px
        rgba(37,99,235,.09);

}


/* =========================================================
   PRONTO
   ========================================================= */

.pedidos-page
.pedido-action-pronto {

    border-color:
        #cae7d4;

    background:
        #f2faf4;

    color:
        #16783d;

}


.pedidos-page
.pedido-action-pronto:hover {

    border-color:
        #9cd0ad;

    background:
        #e9f7ed;

    box-shadow:
        0 6px 13px
        rgba(21,148,71,.08);

}


/* =========================================================
   CANCELAR
   ========================================================= */

.pedidos-page
.pedido-action-cancelar {

    border-color:
        #f0cdd2;

    background:
        #fff5f6;

    color:
        #c62f3e;

}


.pedidos-page
.pedido-action-cancelar:hover {

    border-color:
        #e9adb5;

    background:
        #ffebee;

    box-shadow:
        0 6px 13px
        rgba(207,51,65,.08);

}


/* =========================================================
   ENCERRADO / SOMENTE VISUALIZAÇÃO
   ========================================================= */

.pedidos-page
.pedido-visualizacao {

    min-height:
        30px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 10px;

    border:
        1px solid
        #e0e5eb;

    border-radius:
        9px;

    background:
        #f7f9fb;

    color:
        #8994a3;

    font-size:
        8px;

    font-weight:
        800;

    white-space:
        nowrap;

}


/* =========================================================
   ESTADO VAZIO
   ========================================================= */

.pedidos-page
.pedido-empty
td {

    padding:
        0 !important;

}


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

.pedidos-page
.empty-state {

    min-height:
        290px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        8px;

    padding:
        45px 20px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fafbfd
        );

    text-align:
        center;

}


/* =========================================================
   EMPTY ICON
   ========================================================= */

.pedidos-page
.empty-icon {

    width:
        60px;

    height:
        60px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        5px;

    border:
        1px solid
        rgba(200,155,67,.19);

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            #fff9ed,
            #fffdf8
        );

    font-size:
        25px;

}


/* =========================================================
   EMPTY TITLE
   ========================================================= */

.pedidos-page
.empty-state
strong {

    color:
        var(--vl-text);

    font-size:
        14px;

    font-weight:
        850;

}


/* =========================================================
   EMPTY TEXT
   ========================================================= */

.pedidos-page
.empty-state
span {

    color:
        var(--vl-text-3);

    font-size:
        11px;

}


/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

.pedidos-page
.pedidos-navigation
.nav-voltar:focus-visible,

.pedidos-page
.pedido-action:focus-visible {

    outline:
        3px solid
        rgba(200,155,67,.22);

    outline-offset:
        3px;

}


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

@media (max-width: 900px) {

    .pedidos-page
    .pedidos-header-top {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .pedidos-page
    .pedidos-close-day-form {

        width:
            100%;

    }


    .pedidos-page
    .pedidos-close-day-form
    .pedidos-nav-danger {

        width:
            100%;

    }


    .pedidos-page
    .pedidos-section-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}


@media (max-width: 700px) {

    .pedidos-page {

        padding-top:
            23px;

    }


    .pedidos-page
    .pedidos-header-top {

        padding:
            27px 22px 0;

    }


    /*
     * Sobrescreve o legado que colocava navegação
     * vertical inteira em telas pequenas.
     *
     * Mantemos navegação horizontal rolável,
     * igual ao padrão moderno do restante.
     */

    .pedidos-page
    .pedidos-navigation {

        align-items:
            center !important;

        flex-direction:
            row !important;

        flex-wrap:
            nowrap;

        gap:
            7px;

        margin:
            21px 22px 0;

        padding:
            15px 0 22px;

        overflow-x:
            auto;

        scrollbar-width:
            none;

    }


    .pedidos-page
    .pedidos-navigation::-webkit-scrollbar {

        display:
            none;

    }


    .pedidos-page
    .pedidos-navigation
    .nav-voltar {

        width:
            auto !important;

        flex:
            0 0 auto;

    }


    .pedidos-page
    .pedidos-navigation
    .nav-separator {

        display:
            none;

    }


    .pedidos-page
    .pedidos-table {

        min-width:
            820px;

    }


    .pedidos-page
    .pedidos-table
    th,

    .pedidos-page
    .pedidos-table
    td {

        padding:
            13px 11px;

    }

}


@media (max-width: 430px) {

    .pedidos-page {

        padding-top:
            17px;

    }


    .pedidos-page
    .pedidos-header-top {

        padding:
            24px 18px 0;

    }


    .pedidos-page
    .pedidos-navigation {

        margin-left:
            18px;

        margin-right:
            18px;

        padding-bottom:
            19px;

    }


    .pedidos-page
    .pedidos-title-area
    h2 {

        font-size:
            26px;

    }


    .pedidos-page
    .pedidos-title-area
    .page-brand {

        font-size:
            9px;

    }


    .pedidos-page
    .pedidos-section-heading
    h3 {

        font-size:
            18px;

    }


    .pedidos-page
    .pedidos-live {

        width:
            auto;

        justify-content:
            flex-start;

    }

}


/* =========================================================
   REDUZIR MOVIMENTO
   ========================================================= */

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

    .pedidos-page,
    .pedidos-page *,
    .pedidos-page *::before,
    .pedidos-page *::after {

        animation:
            none !important;

        transition-duration:
            .01ms !important;

    }

}

/* VALORIUM_LUXE_PEDIDOS_FINAL_END */

/* VALORIUM_DESIGN_CORE_V3_START */

/* =========================================================
   VALORIUM SISTEMAS
   DESIGN SYSTEM CENTRAL
   CORE V3

   Este bloco controla APARÊNCIA GLOBAL.

   Os módulos continuam responsáveis apenas por:
   - grid
   - posicionamento específico
   - comportamento
   - status próprios
   - componentes exclusivos
   ========================================================= */


/* =========================================================
   01. BRAND TOKENS
   ALTERE AQUI PARA REFLETIR NOS MÓDULOS
   ========================================================= */

:root {

    /* identidade */

    --vl-core-midnight:
        #07111f;

    --vl-core-midnight-soft:
        #0a1728;

    --vl-core-navy:
        #10243c;

    --vl-core-navy-light:
        #19385d;


    /* ouro Valorium */

    --vl-core-gold:
        #c89b43;

    --vl-core-gold-light:
        #dfba70;

    --vl-core-gold-pale:
        #ecd39e;

    --vl-core-gold-surface:
        #fff9ed;


    /* superfícies */

    --vl-core-page:
        #f4f6fa;

    --vl-core-surface:
        #ffffff;

    --vl-core-surface-soft:
        #f8fafc;


    /* texto */

    --vl-core-text:
        #182233;

    --vl-core-text-secondary:
        #536173;

    --vl-core-text-muted:
        #8793a3;


    /* bordas */

    --vl-core-border:
        #e5e9ef;

    --vl-core-border-strong:
        #d6dce5;


    /* geometria */

    --vl-core-radius-sm:
        11px;

    --vl-core-radius-md:
        16px;

    --vl-core-radius-lg:
        22px;

    --vl-core-radius-header:
        28px;


    /* sombras */

    --vl-core-shadow-card:
        0 8px 22px
        rgba(7,17,31,.055);

    --vl-core-shadow-card-hover:
        0 15px 38px
        rgba(7,17,31,.085);

    --vl-core-shadow-header:
        0 28px 68px
        rgba(7,17,31,.18);


    /* header */

    --vl-core-header-bg:
        linear-gradient(
            135deg,
            #07111f 0%,
            #0a1728 42%,
            #10243c 73%,
            #19385d 100%
        );


    /* navegação */

    --vl-core-nav-bg:
        rgba(255,255,255,.055);

    --vl-core-nav-bg-hover:
        rgba(255,255,255,.10);

    --vl-core-nav-border:
        rgba(236,211,158,.14);

    --vl-core-nav-border-hover:
        rgba(236,211,158,.31);


    /* tabela */

    --vl-core-table-head:
        linear-gradient(
            180deg,
            #fbfcfd,
            #f5f7fa
        );

    --vl-core-table-row-hover:
        linear-gradient(
            90deg,
            #fffdf8,
            #fbfcfe
        );


    /* foco */

    --vl-core-focus:
        rgba(200,155,67,.22);


    /* animação */

    --vl-core-transition:
        .22s cubic-bezier(.2,.7,.2,1);

}


/* =========================================================
   02. ALIASES DOS TOKENS LUXE EXISTENTES

   Isso mantém compatibilidade com os módulos
   que já construímos.
   ========================================================= */

:root {

    --vl-midnight-950:
        var(--vl-core-midnight);

    --vl-midnight-900:
        var(--vl-core-midnight-soft);

    --vl-midnight-800:
        var(--vl-core-navy);

    --vl-gold-500:
        var(--vl-core-gold);

    --vl-gold-400:
        var(--vl-core-gold-light);

    --vl-gold-300:
        var(--vl-core-gold-pale);

    --vl-text:
        var(--vl-core-text);

    --vl-text-2:
        var(--vl-core-text-secondary);

    --vl-text-3:
        var(--vl-core-text-muted);

    --vl-border:
        var(--vl-core-border);

    --vl-border-strong:
        var(--vl-core-border-strong);

    --vl-radius-sm:
        var(--vl-core-radius-sm);

    --vl-radius-md:
        var(--vl-core-radius-md);

    --vl-radius-lg:
        var(--vl-core-radius-lg);

    --vl-radius-xl:
        var(--vl-core-radius-header);

    --vl-shadow-sm:
        var(--vl-core-shadow-card);

    --vl-shadow-md:
        var(--vl-core-shadow-card-hover);

    --vl-transition:
        var(--vl-core-transition);

}


/* =========================================================
   03. FUNDO GERAL
   ========================================================= */

body {

    background:
        radial-gradient(
            circle at 8% 0%,
            rgba(37,99,235,.045),
            transparent 32%
        ),
        radial-gradient(
            circle at 93% 5%,
            rgba(200,155,67,.045),
            transparent 27%
        ),
        var(--vl-core-page);

    color:
        var(--vl-core-text);

}


/* =========================================================
   04. HEADERS OFICIAIS

   SOMENTE identidade visual.
   Layout interno continua no módulo.
   ========================================================= */

.dashboard-header,
.produtos-header,
.fornecedores-page-header,
.mesas-header,
.pedidos-header,
.financeiro-header,
.baixa-header,
.fechamento-header,
.fiscal-dashboard-header,
.client-config-standard-header,
.usuarios-page-header,
.usuarios-header,
.nota-entrada-header {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    border:
        1px solid
        rgba(223,186,112,.15);

    border-radius:
        var(--vl-core-radius-header);

    background:
        var(--vl-core-header-bg);

    box-shadow:
        var(--vl-core-shadow-header);

}


/* =========================================================
   05. LINHA DOURADA DOS HEADERS
   ========================================================= */

.dashboard-header::after,
.produtos-header::after,
.fornecedores-page-header::after,
.mesas-header::after,
.pedidos-header::after,
.financeiro-header::after,
.baixa-header::after,
.fechamento-header::after,
.fiscal-dashboard-header::after,
.client-config-standard-header::after,
.usuarios-page-header::after,
.usuarios-header::after,
.nota-entrada-header::after {

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(223,186,112,.75),
            transparent
        );

}


/* =========================================================
   06. MARCA VALORIUM
   ========================================================= */

.dashboard-brand,
.page-brand,
.fornecedores-section-label {

    color:
        var(--vl-core-gold-light);

    font-weight:
        850;

    letter-spacing:
        1.15px;

}


/* =========================================================
   07. ÍCONES DENTRO DA MARCA
   ========================================================= */

.dashboard-brand > i,
.page-brand > i {

    color:
        var(--vl-core-gold-light);

}


/* =========================================================
   08. ÍCONE EXCLUSIVO DE PEDIDOS

   Desenha um pequeno RECIBO em CSS.

   :has() impede duplicidade caso futuramente
   adicionemos um <i> real no HTML.
   ========================================================= */

.pedidos-page
.page-brand:not(:has(> i)) {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

}


.pedidos-page
.page-brand:not(:has(> i))::before {

    content: "";

    width:
        12px;

    height:
        15px;

    flex:
        0 0 12px;

    box-sizing:
        border-box;

    border:
        1.4px solid
        currentColor;

    border-radius:
        2px 2px 3px 3px;

    background:
        linear-gradient(
            currentColor,
            currentColor
        )
        2.5px 4px /
        6px 1px
        no-repeat,

        linear-gradient(
            currentColor,
            currentColor
        )
        2.5px 7px /
        6px 1px
        no-repeat,

        linear-gradient(
            currentColor,
            currentColor
        )
        2.5px 10px /
        4px 1px
        no-repeat;

    color:
        var(--vl-core-gold-light);

    opacity:
        .96;

}


/* =========================================================
   09. TÍTULOS DOS HEADERS
   ========================================================= */

.dashboard-header h1,
.dashboard-header h2,
.produtos-header h1,
.produtos-header h2,
.fornecedores-page-header h1,
.fornecedores-page-header h2,
.mesas-header h1,
.mesas-header h2,
.pedidos-header h1,
.pedidos-header h2,
.financeiro-header h1,
.financeiro-header h2,
.baixa-header h1,
.baixa-header h2,
.fechamento-header h1,
.fechamento-header h2,
.fiscal-dashboard-header h1,
.fiscal-dashboard-header h2,
.client-config-standard-header h1,
.client-config-standard-header h2,
.usuarios-page-header h1,
.usuarios-page-header h2,
.nota-entrada-header h1,
.nota-entrada-header h2 {

    color:
        #ffffff;

    font-weight:
        800;

    letter-spacing:
        -.8px;

}


/* =========================================================
   10. SUBTÍTULOS DO HEADER
   ========================================================= */

.dashboard-header p,
.produtos-header p,
.fornecedores-page-header p,
.mesas-header p,
.pedidos-header p,
.financeiro-header p,
.baixa-header p,
.fechamento-header p,
.fiscal-dashboard-header p,
.client-config-standard-header p,
.usuarios-page-header p,
.nota-entrada-header p {

    color:
        rgba(226,232,240,.75);

}


/* =========================================================
   11. NAVEGAÇÃO DE HEADER

   NÃO mexemos em layout;
   somente aparência.
   ========================================================= */

.nav-voltar,
.nav-action,
.header-back-button,
.products-nav-link,
.btn-voltar-fechamento,
.client-config-header-back {

    border-color:
        var(--vl-core-nav-border);

    border-radius:
        var(--vl-core-radius-sm);

    transition:
        transform var(--vl-core-transition),
        border-color var(--vl-core-transition),
        background var(--vl-core-transition),
        color var(--vl-core-transition),
        box-shadow var(--vl-core-transition);

}


/* navegadores que estão dentro de header escuro */

.pedidos-header .nav-voltar,
.mesas-header .nav-action,
.financeiro-header .nav-action,
.baixa-header .nav-voltar,
.fechamento-header .nav-voltar {

    background:
        var(--vl-core-nav-bg);

    border-color:
        var(--vl-core-nav-border);

    color:
        rgba(226,232,240,.88);

}


/* hover */

.pedidos-header .nav-voltar:hover,
.mesas-header .nav-action:hover,
.financeiro-header .nav-action:hover,
.baixa-header .nav-voltar:hover,
.fechamento-header .nav-voltar:hover {

    border-color:
        var(--vl-core-nav-border-hover);

    background:
        var(--vl-core-nav-bg-hover);

    color:
        #ffffff;

}


/* =========================================================
   12. CARDS CENTRAIS

   SOMENTE superfície/borda/sombra.
   ========================================================= */

.dashboard-card,
.summary-card,
.card-form,
.product-form-card,
.products-table-card,
.fornecedor-form-card,
.mesa-form-card,
.card-mesa,
.pedidos-table-card,
.financeiro-card,
.caixa-card,
.finance-card,
.baixa-card,
.card-fechamento,
.fiscal-content,
.fiscal-card,
.config-card,
.client-config-card,
.usuario-card,
.usuarios-card,
.inventory-card,
.estoque-card,
.nota-entrada-card,
.profile-card {

    border-color:
        var(--vl-core-border);

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

    background-color:
        var(--vl-core-surface);

    box-shadow:
        var(--vl-core-shadow-card);

}


/* =========================================================
   13. CARD TRANSITION
   ========================================================= */

.dashboard-card,
.summary-card,
.product-form-card,
.fornecedor-form-card,
.card-mesa,
.pedidos-table-card,
.financeiro-card,
.baixa-card,
.card-fechamento,
.fiscal-card,
.config-card {

    transition:
        transform var(--vl-core-transition),
        border-color var(--vl-core-transition),
        box-shadow var(--vl-core-transition);

}


/* =========================================================
   14. CARD HOVER
   ========================================================= */

.dashboard-card:hover,
.summary-card:hover,
.product-form-card:hover,
.fornecedor-form-card:hover,
.card-mesa:hover,
.pedidos-table-card:hover,
.financeiro-card:hover,
.fiscal-card:hover,
.config-card:hover {

    border-color:
        rgba(200,155,67,.24);

    box-shadow:
        var(--vl-core-shadow-card-hover);

}


/* =========================================================
   15. HEADERS DE SEÇÃO
   ========================================================= */

.section-kicker,
.section-eyebrow {

    color:
        var(--vl-core-gold);

    font-weight:
        900;

}


/* =========================================================
   16. TÍTULOS DE SEÇÃO
   ========================================================= */

.section-title h2,
.section-title h3,
.section-heading h2,
.section-heading h3,
.products-list-header h3,
.fornecedores-list-header h3,
.mesas-list-header h3,
.pedidos-section-heading h3 {

    color:
        var(--vl-core-text);

    font-weight:
        850;

}


/* =========================================================
   17. TABELAS
   ========================================================= */

.products-table,
.fornecedores-table,
.pedidos-table,
.baixa-table,
.tabela-fechamento,
.fiscal-table,
.usuarios-table,
.estoque-table,
.notas-entrada-table {

    background:
        var(--vl-core-surface);

}


/* =========================================================
   18. TABLE HEAD
   ========================================================= */

.products-table thead,
.fornecedores-table thead,
.pedidos-table thead,
.baixa-table thead,
.tabela-fechamento thead,
.fiscal-table thead,
.usuarios-table thead,
.estoque-table thead,
.notas-entrada-table thead {

    background:
        var(--vl-core-table-head);

}


/* =========================================================
   19. TH
   ========================================================= */

.products-table th,
.fornecedores-table th,
.pedidos-table th,
.baixa-table th,
.tabela-fechamento th,
.fiscal-table th,
.usuarios-table th,
.estoque-table th,
.notas-entrada-table th {

    border-bottom-color:
        var(--vl-core-border);

    color:
        #738093;

}


/* =========================================================
   20. TD
   ========================================================= */

.products-table td,
.fornecedores-table td,
.pedidos-table td,
.baixa-table td,
.tabela-fechamento td,
.fiscal-table td,
.usuarios-table td,
.estoque-table td,
.notas-entrada-table td {

    border-bottom-color:
        #eef1f5;

    color:
        #455266;

}


/* =========================================================
   21. ROW HOVER
   ========================================================= */

.products-table tbody tr:hover,
.fornecedores-table tbody tr:hover,
.pedidos-table tbody tr:hover,
.baixa-table tbody tr:hover,
.tabela-fechamento tbody tr:hover,
.fiscal-table tbody tr:hover,
.usuarios-table tbody tr:hover,
.estoque-table tbody tr:hover,
.notas-entrada-table tbody tr:hover {

    background:
        var(--vl-core-table-row-hover);

}


/* =========================================================
   22. CAMPOS
   ========================================================= */

.container
input[type="text"],

.container
input[type="email"],

.container
input[type="password"],

.container
input[type="number"],

.container
input[type="date"],

.container
input[type="time"],

.container
input[type="month"],

.container
input[type="search"],

.container
input[type="tel"],

.container
select,

.container
textarea {

    border-color:
        var(--vl-core-border);

    border-radius:
        var(--vl-core-radius-sm);

    background:
        var(--vl-core-surface);

    color:
        var(--vl-core-text);

}


/* =========================================================
   23. FOCUS CAMPOS
   ========================================================= */

.container
input[type="text"]:focus,

.container
input[type="email"]:focus,

.container
input[type="password"]:focus,

.container
input[type="number"]:focus,

.container
input[type="date"]:focus,

.container
input[type="time"]:focus,

.container
input[type="month"]:focus,

.container
input[type="search"]:focus,

.container
input[type="tel"]:focus,

.container
select:focus,

.container
textarea:focus {

    border-color:
        var(--vl-core-gold);

    box-shadow:
        0 0 0 3px
        rgba(200,155,67,.10);

}


/* =========================================================
   24. FOCO GLOBAL
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {

    outline-color:
        var(--vl-core-focus);

}


/* =========================================================
   25. SCROLLBAR
   ========================================================= */

::-webkit-scrollbar-thumb {

    background:
        #c6cdd7;

    background-clip:
        padding-box;

}


/* =========================================================
   26. MOBILE BASE
   ========================================================= */

@media (max-width: 768px) {

    .dashboard-header,
    .produtos-header,
    .fornecedores-page-header,
    .mesas-header,
    .pedidos-header,
    .financeiro-header,
    .baixa-header,
    .fechamento-header,
    .fiscal-dashboard-header,
    .client-config-standard-header,
    .usuarios-page-header,
    .nota-entrada-header {

        border-radius:
            19px;

    }

}


/* =========================================================
   27. SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .dashboard-header,
    .produtos-header,
    .fornecedores-page-header,
    .mesas-header,
    .pedidos-header,
    .financeiro-header,
    .baixa-header,
    .fechamento-header,
    .fiscal-dashboard-header,
    .client-config-standard-header,
    .usuarios-page-header,
    .nota-entrada-header {

        border-radius:
            16px;

    }

}

/* VALORIUM_DESIGN_CORE_V3_END */

/* VALORIUM_LUXE_FINANCEIRO_FINAL_START */

/* =========================================================
   VALORIUM SISTEMAS
   FINANCEIRO
   LUXE FINAL

   Identidade global:
   VALORIUM DESIGN CORE V3

   Este bloco contém somente particularidades
   do módulo financeiro.
   ========================================================= */


/* =========================================================
   HEADER
   ========================================================= */

.financeiro-header {

    position:
        relative;

    isolation:
        isolate;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    margin:
        34px 0 26px;

    padding:
        34px 38px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(223,186,112,.15);

    border-radius:
        var(--vl-core-radius-header);

    background:
        var(--vl-core-header-bg);

    box-shadow:
        var(--vl-core-shadow-header);

}


/* =========================================================
   HEADER GLOW
   ========================================================= */

.financeiro-header::before {

    content: "";

    position:
        absolute;

    z-index:
        -1;

    width:
        430px;

    height:
        430px;

    top:
        -255px;

    right:
        -125px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.27) 0%,
            rgba(59,130,246,.08) 45%,
            transparent 72%
        );

    pointer-events:
        none;

}


/* =========================================================
   LINHA DOURADA
   ========================================================= */

.financeiro-header::after {

    content: "";

    position:
        absolute;

    z-index:
        -1;

    left:
        0;

    right:
        0;

    bottom:
        0;

    width:
        auto;

    height:
        1px;

    border-radius:
        0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(223,186,112,.78),
            transparent
        );

}


/* =========================================================
   ÁREA DO TÍTULO
   ========================================================= */

.financeiro-header-titulo {

    position:
        relative;

    z-index:
        2;

    min-width:
        0;

    max-width:
        770px;

}


/* =========================================================
   MARCA
   ========================================================= */

.financeiro-header-titulo
.page-brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin:
        0 0 11px;

    color:
        var(--vl-core-gold-light);

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        1.25px;

    text-transform:
        uppercase;

}


/* =========================================================
   ÍCONE FINANCEIRO EXCLUSIVO

   O HTML possui fa-utensils.
   Escondemos apenas o desenho interno e criamos
   uma pequena moeda/valor através de CSS.

   HTML permanece intacto.
   ========================================================= */

.financeiro-header-titulo
.page-brand
> i {

    position:
        relative;

    width:
        15px;

    height:
        15px;

    flex:
        0 0 15px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        transparent !important;

    font-size:
        0 !important;

}


/* moeda */

.financeiro-header-titulo
.page-brand
> i::before {

    content:
        "$";

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    box-sizing:
        border-box;

    border:
        1.3px solid
        var(--vl-core-gold-light);

    border-radius:
        50%;

    color:
        var(--vl-core-gold-light);

    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size:
        9px;

    font-weight:
        900;

    line-height:
        1;

}


/* =========================================================
   TÍTULO
   ========================================================= */

.financeiro-header-titulo h2 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            27px,
            3vw,
            35px
        );

    font-weight:
        800;

    line-height:
        1.12;

    letter-spacing:
        -.85px;

}


/* =========================================================
   SUBTÍTULO
   ========================================================= */

.financeiro-header-titulo
.page-subtitle {

    max-width:
        690px;

    margin:
        8px 0 0;

    color:
        rgba(226,232,240,.74);

    font-size:
        13px;

    font-weight:
        500;

    line-height:
        1.65;

}


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

.financeiro-header-acoes {

    position:
        relative;

    z-index:
        3;

    flex:
        0 0 auto;

}


/* =========================================================
   VOLTAR
   ========================================================= */

.financeiro-header-acoes
.nav-voltar {

    min-height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0 14px;

    border:
        1px solid
        var(--vl-core-nav-border);

    border-radius:
        var(--vl-core-radius-sm);

    background:
        var(--vl-core-nav-bg);

    color:
        rgba(226,232,240,.90);

    font-size:
        11px;

    font-weight:
        750;

    box-shadow:
        none;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

}


.financeiro-header-acoes
.nav-voltar:hover {

    transform:
        translateY(-1px);

    border-color:
        var(--vl-core-nav-border-hover);

    background:
        var(--vl-core-nav-bg-hover);

    color:
        #ffffff;

}


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

.financeiro-alerta {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        20px;

    padding:
        14px 16px;

    border-radius:
        13px;

    font-size:
        11px;

    font-weight:
        700;

    box-shadow:
        0 4px 12px
        rgba(7,17,31,.04);

}


.financeiro-alerta.alert-sucesso {

    border:
        1px solid
        #ccebd6;

    background:
        linear-gradient(
            135deg,
            #f3fbf5,
            #ffffff
        );

    color:
        #16783d;

}


.financeiro-alerta.alert-erro {

    border:
        1px solid
        #f2cdd2;

    background:
        linear-gradient(
            135deg,
            #fff4f5,
            #ffffff
        );

    color:
        #a52834;

}


/* =========================================================
   ABAS PRINCIPAIS
   ========================================================= */

.financeiro-tabs {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-bottom:
        27px;

    padding:
        6px;

    overflow-x:
        auto;

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

    border-radius:
        15px;

    background:
        rgba(255,255,255,.96);

    box-shadow:
        0 5px 18px
        rgba(7,17,31,.045);

    scrollbar-width:
        none;

}


.financeiro-tabs::-webkit-scrollbar {

    display:
        none;

}


/* =========================================================
   TAB
   ========================================================= */

.financeiro-tab {

    flex:
        0 0 auto;

    min-height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0 14px;

    border:
        1px solid
        transparent;

    border-radius:
        10px;

    color:
        var(--vl-core-text-secondary);

    font-size:
        10px;

    font-weight:
        800;

    white-space:
        nowrap;

    transition:
        transform var(--vl-core-transition),
        border-color var(--vl-core-transition),
        background var(--vl-core-transition),
        color var(--vl-core-transition),
        box-shadow var(--vl-core-transition);

}


.financeiro-tab i {

    color:
        #8793a3;

    font-size:
        12px;

}


/* =========================================================
   TAB HOVER
   ========================================================= */

.financeiro-tab:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(200,155,67,.15);

    background:
        var(--vl-core-gold-surface);

    color:
        #8d671f;

}


.financeiro-tab:hover i {

    color:
        var(--vl-core-gold);

}


/* =========================================================
   TAB ACTIVE
   ========================================================= */

.financeiro-tab.active {

    border-color:
        rgba(223,186,112,.22);

    background:
        linear-gradient(
            135deg,
            var(--vl-core-midnight),
            var(--vl-core-navy)
        );

    color:
        #ffffff;

    box-shadow:
        0 7px 17px
        rgba(7,17,31,.16);

}


.financeiro-tab.active i {

    color:
        var(--vl-core-gold-light);

}


/* =========================================================
   SEÇÕES
   ========================================================= */

.financeiro-section {

    margin-bottom:
        28px;

}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.financeiro-section
.section-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        18px;

    margin:
        0 1px 16px;

}


.financeiro-section
.section-heading
.section-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    margin-bottom:
        5px;

    color:
        var(--vl-core-gold);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}


.financeiro-section
.section-heading
h3 {

    margin:
        0;

    color:
        var(--vl-core-text);

    font-size:
        20px;

    font-weight:
        850;

    letter-spacing:
        -.4px;

}


/* =========================================================
   CARDS
   ========================================================= */

.financeiro-card,
.card-form-caixa {

    position:
        relative;

    min-width:
        0;

    overflow:
        hidden;

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

    border-radius:
        18px;

    background:
        var(--vl-core-surface);

    box-shadow:
        var(--vl-core-shadow-card);

    transition:
        transform var(--vl-core-transition),
        border-color var(--vl-core-transition),
        box-shadow var(--vl-core-transition);

}


/* linha premium */

.financeiro-card::before,
.card-form-caixa::before {

    content: "";

    position:
        absolute;

    z-index:
        2;

    top:
        0;

    left:
        22px;

    right:
        22px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(200,155,67,.44),
            transparent
        );

}


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

.financeiro-card:hover,
.card-form-caixa:hover {

    border-color:
        rgba(200,155,67,.24);

    box-shadow:
        var(--vl-core-shadow-card-hover);

}


/* =========================================================
   CAIXA FECHADO
   ========================================================= */

.caixa-fechado {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    padding:
        25px;

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

    background:
        linear-gradient(
            135deg,
            #f8fafc,
            #ffffff
        );

}


/* =========================================================
   ÍCONE CAIXA FECHADO
   ========================================================= */

.caixa-status-icon {

    width:
        52px;

    height:
        52px;

    flex:
        0 0 52px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(200,155,67,.20);

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            #fff9ed,
            #fffdf8
        );

    color:
        var(--vl-core-gold);

    font-size:
        18px;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.9);

}


/* =========================================================
   TEXTO CAIXA
   ========================================================= */

.caixa-status-content h4 {

    margin:
        0;

    color:
        var(--vl-core-text);

    font-size:
        17px;

    font-weight:
        850;

}


.caixa-status-content p {

    margin:
        5px 0 0;

    color:
        var(--vl-core-text-secondary);

    font-size:
        11px;

}


/* =========================================================
   ABRIR CAIXA
   ========================================================= */

.form-caixa-inline {

    display:
        flex;

    align-items:
        flex-end;

    gap:
        10px;

}


.caixa-input-group {

    flex:
        1;

    min-width:
        0;

}


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

.input-money {

    display:
        flex;

    align-items:
        stretch;

    overflow:
        hidden;

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

    border-radius:
        10px;

    background:
        #ffffff;

    transition:
        border-color var(--vl-core-transition),
        box-shadow var(--vl-core-transition);

}


.input-money:focus-within {

    border-color:
        var(--vl-core-gold);

    box-shadow:
        0 0 0 3px
        rgba(200,155,67,.10);

}


.input-money > span {

    min-width:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-right:
        1px solid
        var(--vl-core-border);

    background:
        #fafbfd;

    color:
        var(--vl-core-gold);

    font-size:
        10px;

    font-weight:
        850;

}


.input-money input {

    border:
        0 !important;

    box-shadow:
        none !important;

}


/* =========================================================
   ABRIR CAIXA BUTTON
   ========================================================= */

.btn-acao-caixa,
.btn-fechar-caixa,
.btn-acao-despesa,
.btn-processar-xml {

    min-height:
        45px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0 17px;

    border:
        1px solid
        rgba(223,186,112,.23);

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            var(--vl-core-midnight),
            var(--vl-core-navy)
        );

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        850;

    cursor:
        pointer;

    box-shadow:
        0 8px 19px
        rgba(7,17,31,.16);

    transition:
        transform var(--vl-core-transition),
        border-color var(--vl-core-transition),
        box-shadow var(--vl-core-transition);

}


.btn-acao-caixa:hover,
.btn-fechar-caixa:hover,
.btn-acao-despesa:hover,
.btn-processar-xml:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(223,186,112,.48);

    box-shadow:
        0 12px 26px
        rgba(7,17,31,.22);

}


/* =========================================================
   CAIXA ABERTO
   ========================================================= */

.caixa-aberto-card {

    position:
        relative;

    padding:
        25px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fffefd
        );

}


/* =========================================================
   HEADER CAIXA ABERTO
   ========================================================= */

.caixa-aberto-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    padding:
        0 0 21px;

    border:
        0;

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

    border-radius:
        0;

    background:
        transparent;

}


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

.status-aberto {

    min-height:
        28px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        0 10px;

    border:
        1px solid
        #ccebd6;

    border-radius:
        999px;

    background:
        linear-gradient(
            180deg,
            #f4fbf6,
            #eef9f1
        );

    color:
        #15803d;

    font-size:
        9px;

    font-weight:
        850;

}


/* =========================================================
   DATA ABERTURA
   ========================================================= */

.caixa-data-abertura {

    margin-top:
        7px;

    color:
        var(--vl-core-text-muted);

    font-size:
        10px;

}


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

.caixa-valor-total {

    min-width:
        180px;

    text-align:
        right;

}


.caixa-valor-total span {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--vl-core-text-muted);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .04em;

    text-transform:
        uppercase;

}


.caixa-valor-total strong {

    color:
        var(--vl-core-midnight-soft);

    font-size:
        28px;

    font-weight:
        900;

    letter-spacing:
        -.7px;

}


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

.caixa-resumo-grid {

    display:
        grid;

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

    gap:
        12px;

    margin-top:
        19px;

}


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

.caixa-resumo-item {

    position:
        relative;

    min-width:
        0;

    overflow:
        hidden;

    padding:
        15px;

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

    border-radius:
        14px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafbfd
        );

    box-shadow:
        0 3px 10px
        rgba(7,17,31,.025);

}


/* =========================================================
   ÍCONE RESUMO
   ========================================================= */

.caixa-resumo-icon {

    width:
        35px;

    height:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        10px;

    border:
        1px solid
        rgba(200,155,67,.15);

    border-radius:
        10px;

    background:
        #fffaf0;

    color:
        var(--vl-core-gold);

}


/* =========================================================
   CORES POR FORMA
   ========================================================= */

.caixa-resumo-item.dinheiro
.caixa-resumo-icon {

    background:
        #f2fbf5;

    border-color:
        #cfe9d8;

    color:
        #168044;

}


.caixa-resumo-item.pix
.caixa-resumo-icon {

    background:
        #eefbf9;

    border-color:
        #c8ebe5;

    color:
        #0f8b78;

}


.caixa-resumo-item.credito
.caixa-resumo-icon {

    background:
        #f3f6ff;

    border-color:
        #d7e2ff;

    color:
        #315fc3;

}


.caixa-resumo-item.debito
.caixa-resumo-icon {

    background:
        #f7f3ff;

    border-color:
        #e3d7fb;

    color:
        #7550b8;

}


.caixa-resumo-item.saida-dinheiro
.caixa-resumo-icon {

    background:
        #fff4f5;

    border-color:
        #f2d1d5;

    color:
        #c53443;

}


/* =========================================================
   INFORMAÇÕES DO CAIXA
   ========================================================= */

.caixa-informacoes {

    margin-top:
        17px;

    padding:
        16px;

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

    border-radius:
        13px;

    background:
        #fafbfd;

}


/* =========================================================
   FECHAMENTO FÍSICO
   ========================================================= */

.fechamento-caixa {

    margin-top:
        22px;

    overflow:
        hidden;

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

    border-radius:
        17px;

    background:
        #ffffff;

    box-shadow:
        0 6px 18px
        rgba(7,17,31,.04);

}


/* =========================================================
   HEADER FECHAMENTO DENTRO DO FINANCEIRO
   NÃO É O HEADER DE BAIXA TOTAL
   ========================================================= */

.fechamento-caixa
.fechamento-header {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin:
        0;

    padding:
        19px 20px;

    border:
        0;

    border-bottom:
        1px solid
        rgba(223,186,112,.12);

    border-radius:
        0;

    background:
        linear-gradient(
            135deg,
            var(--vl-core-midnight-soft),
            var(--vl-core-navy)
        );

    box-shadow:
        none;

    animation:
        none;

}


/* remove glows globais neste componente interno */

.fechamento-caixa
.fechamento-header::before,

.fechamento-caixa
.fechamento-header::after {

    display:
        none !important;

}


/* =========================================================
   TÍTULO FECHAMENTO
   ========================================================= */

.fechamento-caixa
.fechamento-header h4 {

    margin:
        4px 0 0;

    color:
        #ffffff;

    font-size:
        15px;

    font-weight:
        850;

}


.fechamento-caixa
.fechamento-header p,

.fechamento-caixa
.fechamento-header small {

    color:
        rgba(226,232,240,.68);

}


/* =========================================================
   FORM FECHAMENTO
   ========================================================= */

.form-fechamento-caixa {

    padding:
        20px;

}


/* =========================================================
   GRID FECHAMENTO
   ========================================================= */

.form-fechamento-caixa
.fechamento-grid {

    display:
        grid;

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

    gap:
        12px;

}


/* =========================================================
   ORIENTAÇÃO
   ========================================================= */

.fechamento-orientacao {

    margin-bottom:
        17px;

    padding:
        13px 14px;

    border:
        1px solid
        #eadbb9;

    border-radius:
        11px;

    background:
        #fffbf2;

    color:
        #805b19;

    font-size:
        10px;

    line-height:
        1.55;

}


/* =========================================================
   FORM FIELD
   ========================================================= */

.financeiro-section
.form-field label,

.financeiro-card
.form-field label,

.form-fechamento-caixa
.form-field label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--vl-core-text-secondary);

    font-size:
        10px;

    font-weight:
        800;

}


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

.financeiro-card
.card-heading {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        20px 21px;

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

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafbfd
        );

}


.financeiro-card
.card-heading-icon {

    width:
        40px;

    height:
        40px;

    flex:
        0 0 40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(200,155,67,.18);

    border-radius:
        12px;

    background:
        #fff9ed;

    color:
        var(--vl-core-gold);

}


.financeiro-card
.card-heading h4 {

    margin:
        0;

    color:
        var(--vl-core-text);

    font-size:
        15px;

    font-weight:
        850;

}


.financeiro-card
.card-heading p {

    margin:
        4px 0 0;

    color:
        var(--vl-core-text-muted);

    font-size:
        10px;

}


/* =========================================================
   DESPESAS / RECEBÍVEIS FORM
   ========================================================= */

.form-despesas-grid {

    display:
        grid;

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

    align-items:
        end;

    gap:
        13px;

    padding:
        21px;

}


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

.financeiro-card
.table-wrapper,

.financeiro-card
.table-responsive {

    width:
        100%;

    overflow-x:
        auto;

    scrollbar-width:
        thin;

    scrollbar-color:
        #c7ced8 transparent;

}


/* =========================================================
   TABLE
   ========================================================= */

.financeiro-card table {

    width:
        100%;

    min-width:
        850px;

    margin:
        0;

    border-collapse:
        separate;

    border-spacing:
        0;

    background:
        #ffffff;

}


/* =========================================================
   THEAD
   ========================================================= */

.financeiro-card table thead {

    background:
        var(--vl-core-table-head);

}


/* =========================================================
   TH
   ========================================================= */

.financeiro-card table th {

    padding:
        14px 15px;

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

    color:
        #738093;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .07em;

    text-align:
        left;

    text-transform:
        uppercase;

    white-space:
        nowrap;

}


/* =========================================================
   TD
   ========================================================= */

.financeiro-card table td {

    padding:
        14px 15px;

    border-bottom:
        1px solid
        #eef1f5;

    color:
        #455266;

    font-size:
        11px;

    vertical-align:
        middle;

    white-space:
        nowrap;

}


/* =========================================================
   ROW HOVER
   ========================================================= */

.financeiro-card table tbody tr {

    transition:
        background var(--vl-core-transition);

}


.financeiro-card table tbody tr:hover {

    background:
        var(--vl-core-table-row-hover);

}


.financeiro-card table tbody tr:last-child td {

    border-bottom:
        0;

}


.financeiro-card table td strong {

    color:
        var(--vl-core-text);

    font-weight:
        800;

}


/* =========================================================
   VALORES
   ========================================================= */

.valor-positivo {

    color:
        #168044 !important;

}


.valor-negativo {

    color:
        #c53443 !important;

}


.valor-lucro {

    color:
        #08775a !important;

}


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

.financeiro-card
.status-badge {

    min-height:
        27px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    padding:
        0 9px;

    border-radius:
        999px;

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        .025em;

}


/* pago */

.financeiro-card
.status-pago {

    border:
        1px solid
        #ccebd6;

    background:
        #f2fbf5;

    color:
        #15803d;

}


/* pendente */

.financeiro-card
.status-pendente {

    border:
        1px solid
        #efdba8;

    background:
        #fff9ec;

    color:
        #98610c;

}


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

.table-actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

}


/* =========================================================
   PAGAMENTO DESPESA
   ========================================================= */

.form-pagamento-despesa {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

}


/* =========================================================
   ACTION BTN
   ========================================================= */

.action-btn {

    min-height:
        32px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    padding:
        0 10px;

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

    border-radius:
        9px;

    background:
        #ffffff;

    color:
        var(--vl-core-text-secondary);

    font-size:
        9px;

    font-weight:
        800;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        transform var(--vl-core-transition),
        border-color var(--vl-core-transition),
        background var(--vl-core-transition),
        color var(--vl-core-transition),
        box-shadow var(--vl-core-transition);

}


.action-btn:hover {

    transform:
        translateY(-1px);

}


/* =========================================================
   AÇÃO SUCESSO
   ========================================================= */

.action-success,
.action-receive {

    border-color:
        #cce7d5;

    background:
        #f3faf5;

    color:
        #16783d;

}


.action-success:hover,
.action-receive:hover {

    border-color:
        #9ed2af;

    background:
        #eaf7ee;

}


/* =========================================================
   AÇÃO PERIGO
   ========================================================= */

.action-danger,
.nota-estornar-entrada,
.nota-excluir-importacao,
.nota-desvincular-btn {

    border-color:
        #f0cdd2;

    background:
        #fff5f6;

    color:
        #c52f3e;

}


.action-danger:hover,
.nota-estornar-entrada:hover,
.nota-excluir-importacao:hover,
.nota-desvincular-btn:hover {

    border-color:
        #e9adb5;

    background:
        #ffebee;

}


/* =========================================================
   RELATÓRIO TABS
   ========================================================= */

.relatorio-tabs {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-bottom:
        14px;

    overflow-x:
        auto;

    scrollbar-width:
        none;

}


.relatorio-tabs::-webkit-scrollbar {

    display:
        none;

}


.relatorio-tabs a {

    flex:
        0 0 auto;

    min-height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        0 12px;

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

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        var(--vl-core-text-secondary);

    font-size:
        9px;

    font-weight:
        800;

}


.relatorio-tabs a:hover {

    border-color:
        rgba(200,155,67,.24);

    background:
        #fffaf0;

    color:
        #8d671f;

}


.relatorio-tabs a.active {

    border-color:
        rgba(223,186,112,.25);

    background:
        linear-gradient(
            135deg,
            var(--vl-core-midnight),
            var(--vl-core-navy)
        );

    color:
        #ffffff;

}


/* =========================================================
   RELATÓRIO HEADER
   ========================================================= */

.financeiro-card
.relatorio-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        20px 21px;

    border:
        0;

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

    border-radius:
        0;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafbfd
        );

    box-shadow:
        none;

}


/* =========================================================
   PERÍODO TABS
   ========================================================= */

.periodo-tabs {

    display:
        flex;

    align-items:
        center;

    gap:
        4px;

    padding:
        4px;

    border:
        1px solid
        #e9edf2;

    border-radius:
        9px;

    background:
        #f5f7fa;

}


.periodo-tabs a {

    min-height:
        30px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 10px;

    border-radius:
        7px;

    color:
        var(--vl-core-text-muted);

    font-size:
        9px;

    font-weight:
        800;

}


.periodo-tabs a.active {

    background:
        #ffffff;

    color:
        #8d671f;

    box-shadow:
        0 3px 9px
        rgba(7,17,31,.06);

}


/* =========================================================
   NOTA ENTRADA UPLOAD
   ========================================================= */

.financeiro-card.nota-entrada-card {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    padding:
        24px;

}


/* =========================================================
   XML ICON
   ========================================================= */

.xml-upload-icon {

    width:
        58px;

    height:
        58px;

    flex:
        0 0 58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(200,155,67,.20);

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            #fff9ed,
            #fffdf8
        );

    color:
        var(--vl-core-gold);

    font-size:
        22px;

}


/* =========================================================
   NOTA HISTÓRICO / ITENS
   ========================================================= */

.financeiro-card.nota-historico-card,
.financeiro-card.nota-itens-card {

    margin-top:
        18px;

}


/* =========================================================
   NOTA CARD HEADING
   ========================================================= */

.nota-card-heading {

    padding:
        20px 21px;

    margin:
        0;

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

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafbfd
        );

}


/* =========================================================
   COMPARAÇÃO FISCAL INTERNA DA NOTA

   Apenas visual.
   Nenhuma lógica fiscal é alterada.
   ========================================================= */

.nota-fiscal-comparacao {

    margin-top:
        10px;

    padding:
        12px;

    border:
        1px solid
        #e7ebf0;

    border-radius:
        11px;

    background:
        #fafbfd;

}


.nota-fiscal-titulo {

    color:
        var(--vl-core-text);

    font-size:
        10px;

    font-weight:
        850;

}


.nota-fiscal-titulo i {

    color:
        var(--vl-core-gold);

}


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

.financeiro-card
.empty-state {

    min-height:
        240px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        7px;

    padding:
        40px 25px;

    text-align:
        center;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fafbfd
        );

}


.financeiro-card
.empty-state
> i {

    width:
        54px;

    height:
        54px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 0 5px;

    border:
        1px solid
        rgba(200,155,67,.17);

    border-radius:
        16px;

    background:
        #fff9ed;

    color:
        var(--vl-core-gold);

    font-size:
        20px;

}


/* =========================================================
   MODAIS DE ESTORNO / CONCILIAÇÃO
   ========================================================= */

.estorno-modal {

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

}


.estorno-modal-card {

    overflow:
        hidden;

    border:
        1px solid
        rgba(223,186,112,.17);

    border-radius:
        20px;

    background:
        #ffffff;

    box-shadow:
        0 30px 80px
        rgba(7,17,31,.27);

}


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

.estorno-modal-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        20px 21px;

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

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafbfd
        );

}


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

.estorno-modal-icon {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(200,155,67,.18);

    border-radius:
        12px;

    background:
        #fff9ed;

    color:
        var(--vl-core-gold);

}


/* conciliação permanece verde semanticamente */

.conciliacao-modal-icon {

    border-color:
        #ccebd6 !important;

    background:
        #f1faf4 !important;

    color:
        #159447 !important;

}


/* =========================================================
   MODAL RESUMO
   Sobrescreve visual do <style> interno
   ========================================================= */

.conciliacao-modal
.conciliacao-resumo
> div {

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

    border-radius:
        14px;

    background:
        linear-gradient(
            180deg,
            #fafbfd,
            #ffffff
        );

}


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

.estorno-modal-body {

    padding:
        21px;

}


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

.estorno-modal-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        9px;

    padding:
        17px 21px;

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

    background:
        #fafbfd;

}


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

.estorno-modal-cancelar {

    border-color:
        var(--vl-core-border);

    background:
        #ffffff;

    color:
        var(--vl-core-text-secondary);

}


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

@media (max-width: 1180px) {

    .caixa-resumo-grid {

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

    }


    .form-despesas-grid {

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

    }


    .form-despesas-grid
    .btn-acao-despesa {

        width:
            100%;

    }

}


@media (max-width: 900px) {

    .financeiro-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            28px 25px;

    }


    .financeiro-header-acoes {

        width:
            100%;

    }


    .financeiro-header-acoes
    .nav-voltar {

        width:
            100%;

    }


    .form-caixa-inline {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    .caixa-input-group {

        max-width:
            none;

    }


    .btn-acao-caixa {

        width:
            100%;

    }


    .form-fechamento-caixa
    .fechamento-grid {

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

    }


    .financeiro-card
    .relatorio-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}


@media (max-width: 700px) {

    .financeiro-header {

        margin-top:
            23px;

        padding:
            25px 21px;

        border-radius:
            19px;

    }


    .financeiro-header-titulo
    h2 {

        font-size:
            26px;

    }


    .financeiro-tabs {

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

    }


    .financeiro-tab {

        flex:
            0 0 auto;

    }


    .caixa-aberto-card {

        padding:
            20px;

    }


    .caixa-aberto-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .caixa-valor-total {

        width:
            100%;

        min-width:
            0;

        text-align:
            left;

    }


    .caixa-resumo-grid {

        grid-template-columns:
            1fr;

    }


    .caixa-informacoes {

        grid-template-columns:
            1fr;

    }


    .form-despesas-grid {

        grid-template-columns:
            1fr;

        padding:
            20px;

    }


    .form-fechamento-caixa
    .fechamento-grid {

        grid-template-columns:
            1fr;

    }


    .periodo-tabs {

        width:
            100%;

    }


    .periodo-tabs a {

        flex:
            1;

    }


    .financeiro-card.nota-entrada-card {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .xml-upload-content {

        width:
            100%;

    }

}


@media (max-width: 520px) {

    .financeiro-header {

        padding:
            23px 18px;

        border-radius:
            16px;

    }


    .financeiro-header-titulo
    h2 {

        font-size:
            24px;

    }


    .financeiro-header-titulo
    .page-subtitle {

        font-size:
            11px;

    }


    .financeiro-tab {

        min-height:
            39px;

        padding:
            0 11px;

    }


    .caixa-fechado {

        align-items:
            flex-start;

        padding:
            19px;

        gap:
            13px;

    }


    .caixa-status-icon {

        width:
            45px;

        height:
            45px;

        flex-basis:
            45px;

    }


    .caixa-aberto-card {

        padding:
            17px;

    }


    .caixa-valor-total
    strong {

        font-size:
            24px;

    }


    .form-fechamento-caixa {

        padding:
            17px;

    }


    .financeiro-card
    .card-heading {

        padding:
            18px;

    }


    .financeiro-card
    table {

        min-width:
            760px;

    }


    .financeiro-card
    table th,

    .financeiro-card
    table td {

        padding:
            11px 10px;

    }


    .estorno-modal-footer {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    .estorno-modal-footer
    .action-btn {

        width:
            100%;

    }

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */

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

    .financeiro-header,
    .financeiro-alerta,
    .financeiro-section,
    .financeiro-card,
    .card-form-caixa {

        animation:
            none !important;

    }

}

/* VALORIUM_LUXE_FINANCEIRO_FINAL_END */

/* VALORIUM_LUXE_COMANDA_FINAL_START */

/* =========================================================
   VALORIUM SISTEMAS
   COMANDA DIGITAL / PEDIDOS DA MESA
   LUXE FINAL

   O escopo usa :has(.page-header-comanda)
   para não contaminar outros módulos.
   ========================================================= */


/* =========================================================
   PÁGINA
   ========================================================= */

body:has(.page-header-comanda)
.container {

    position:
        relative;

    padding-top:
        34px;

    padding-bottom:
        60px;

}


/* =========================================================
   HEADER
   ========================================================= */

.page-header-comanda {

    position:
        relative;

    isolation:
        isolate;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    margin:
        0 0 25px;

    padding:
        34px 38px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(223,186,112,.15);

    border-radius:
        var(--vl-core-radius-header);

    background:
        var(--vl-core-header-bg);

    box-shadow:
        var(--vl-core-shadow-header);

    animation:
        none;

}


/* =========================================================
   GLOW AZUL
   ========================================================= */

.page-header-comanda::before {

    content: "";

    position:
        absolute;

    z-index:
        -1;

    width:
        430px;

    height:
        430px;

    top:
        -255px;

    right:
        -125px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.27) 0%,
            rgba(59,130,246,.08) 45%,
            transparent 72%
        );

    filter:
        none;

    pointer-events:
        none;

}


/* =========================================================
   LINHA DOURADA
   ========================================================= */

.page-header-comanda::after {

    content: "";

    position:
        absolute;

    z-index:
        -1;

    left:
        0;

    right:
        0;

    bottom:
        0;

    width:
        auto;

    height:
        1px;

    border-radius:
        0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(223,186,112,.78),
            transparent
        );

    opacity:
        .9;

}


/* =========================================================
   HEADER INFO
   ========================================================= */

.page-header-comanda
.page-header-info {

    position:
        relative;

    z-index:
        2;

    min-width:
        0;

    max-width:
        760px;

}


/* =========================================================
   BRAND
   ========================================================= */

.page-header-comanda
.page-brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin:
        0 0 11px;

    color:
        var(--vl-core-gold-light);

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        1.25px;

    text-transform:
        uppercase;

}


/* =========================================================
   ÍCONE EXCLUSIVO DE COMANDA
   pequeno clipboard dourado
   ========================================================= */

.page-header-comanda
.page-brand::before {

    content: "";

    position:
        relative;

    width:
        12px;

    height:
        14px;

    flex:
        0 0 12px;

    box-sizing:
        border-box;

    border:
        1.3px solid
        var(--vl-core-gold-light);

    border-radius:
        2px;

    background:
        linear-gradient(
            var(--vl-core-gold-light),
            var(--vl-core-gold-light)
        )
        2px 4px /
        6px 1px
        no-repeat,

        linear-gradient(
            var(--vl-core-gold-light),
            var(--vl-core-gold-light)
        )
        2px 7px /
        6px 1px
        no-repeat,

        linear-gradient(
            var(--vl-core-gold-light),
            var(--vl-core-gold-light)
        )
        2px 10px /
        4px 1px
        no-repeat;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.08);

}


/* presilha superior */

.page-header-comanda
.page-brand::after {

    content: "";

    position:
        absolute;

    left:
        3px;

    top:
        -1px;

    width:
        6px;

    height:
        3px;

    border-radius:
        3px 3px 1px 1px;

    background:
        var(--vl-core-gold-light);

}


/* =========================================================
   TÍTULO
   ========================================================= */

.page-header-comanda h2 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            27px,
            3vw,
            35px
        );

    font-weight:
        800;

    line-height:
        1.12;

    letter-spacing:
        -.85px;

}


/* =========================================================
   MESA
   ========================================================= */

.page-header-comanda
.mesa-titulo {

    color:
        var(--vl-core-gold-light);

}


/* =========================================================
   INFO MESA
   ========================================================= */

.page-header-comanda
.mesa-info-header {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-top:
        13px;

    color:
        rgba(226,232,240,.72);

    font-size:
        11px;

    font-weight:
        600;

}


/* =========================================================
   STATUS DA MESA
   ========================================================= */

.page-header-comanda
.status-indicator {

    min-height:
        27px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 10px;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius:
        999px;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .05em;

    text-transform:
        uppercase;

}


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

.page-header-comanda
.status-indicator.status-livre {

    border-color:
        rgba(74,222,128,.27);

    background:
        rgba(22,163,74,.16);

    color:
        #bbf7d0;

}


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

.page-header-comanda
.status-indicator.status-ocupada {

    border-color:
        rgba(248,113,113,.28);

    background:
        rgba(185,28,28,.17);

    color:
        #fecaca;

}


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

.page-header-comanda
.status-indicator.status-reservada {

    border-color:
        rgba(251,191,36,.30);

    background:
        rgba(180,83,9,.15);

    color:
        #fde68a;

}


/* =========================================================
   NAVEGAÇÃO
   ========================================================= */

.page-header-comanda
.nav-links {

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

}


/* =========================================================
   VOLTAR
   ========================================================= */

.page-header-comanda
.nav-voltar {

    min-height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0 14px;

    border:
        1px solid
        var(--vl-core-nav-border);

    border-radius:
        var(--vl-core-radius-sm);

    background:
        var(--vl-core-nav-bg);

    color:
        rgba(226,232,240,.90);

    font-size:
        11px;

    font-weight:
        750;

    text-decoration:
        none;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    transition:
        transform var(--vl-core-transition),
        border-color var(--vl-core-transition),
        background var(--vl-core-transition),
        color var(--vl-core-transition);

}


/* =========================================================
   NAV HOVER
   ========================================================= */

.page-header-comanda
.nav-voltar:hover {

    transform:
        translateY(-1px);

    border-color:
        var(--vl-core-nav-border-hover);

    background:
        var(--vl-core-nav-bg-hover);

    color:
        #ffffff;

}


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

body:has(.page-header-comanda)
.alert-sucesso,

body:has(.page-header-comanda)
.alert-erro {

    min-height:
        48px;

    display:
        flex;

    align-items:
        center;

    margin:
        0 0 20px;

    padding:
        13px 16px;

    border-radius:
        13px;

    font-size:
        11px;

    font-weight:
        700;

    animation:
        none;

    box-shadow:
        0 4px 12px
        rgba(7,17,31,.035);

}


/* sucesso */

body:has(.page-header-comanda)
.alert-sucesso {

    border:
        1px solid
        #ccebd6;

    background:
        linear-gradient(
            135deg,
            #f3fbf5,
            #ffffff
        );

    color:
        #16783d;

}


/* erro */

body:has(.page-header-comanda)
.alert-erro {

    border:
        1px solid
        #f2cdd2;

    background:
        linear-gradient(
            135deg,
            #fff4f5,
            #ffffff
        );

    color:
        #a52834;

}


/* =========================================================
   RESUMO DA COMANDA
   ========================================================= */

body:has(.page-header-comanda)
.comanda-resumo {

    display:
        grid;

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

    gap:
        14px;

    margin-bottom:
        22px;

    animation:
        none;

}


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

body:has(.page-header-comanda)
.resumo-item {

    position:
        relative;

    min-width:
        0;

    min-height:
        105px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        18px 20px;

    overflow:
        hidden;

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

    border-radius:
        16px;

    background:
        #ffffff;

    box-shadow:
        var(--vl-core-shadow-card);

    transition:
        transform var(--vl-core-transition),
        border-color var(--vl-core-transition),
        box-shadow var(--vl-core-transition);

}


/* linha premium */

body:has(.page-header-comanda)
.resumo-item::before {

    content: "";

    position:
        absolute;

    top:
        0;

    left:
        18px;

    right:
        18px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(200,155,67,.44),
            transparent
        );

}


/* hover */

body:has(.page-header-comanda)
.resumo-item:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(200,155,67,.24);

    box-shadow:
        var(--vl-core-shadow-card-hover);

}


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

body:has(.page-header-comanda)
.resumo-label {

    margin-bottom:
        6px;

    color:
        var(--vl-core-text-muted);

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .075em;

    text-transform:
        uppercase;

}


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

body:has(.page-header-comanda)
.resumo-item strong {

    color:
        var(--vl-core-midnight-soft);

    font-size:
        24px;

    font-weight:
        900;

    line-height:
        1.1;

    letter-spacing:
        -.5px;

}


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

body:has(.page-header-comanda)
.resumo-item.resumo-total {

    border-color:
        rgba(200,155,67,.26);

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #ffffff
        );

}


body:has(.page-header-comanda)
.resumo-item.resumo-total strong {

    color:
        #8d671f;

}


/* =========================================================
   LAYOUT PRINCIPAL
   ========================================================= */

body:has(.page-header-comanda)
.comanda-layout {

    display:
        grid;

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

    align-items:
        start;

    gap:
        20px;

    animation:
        none;

}


/* =========================================================
   CARDS
   ========================================================= */

body:has(.page-header-comanda)
.card-form {

    position:
        relative;

    min-width:
        0;

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

    border-radius:
        18px;

    background:
        #ffffff;

    box-shadow:
        var(--vl-core-shadow-card);

}


/* =========================================================
   COMANDA ITENS
   ========================================================= */

body:has(.page-header-comanda)
.comanda-itens-card {

    overflow:
        hidden;

    animation:
        none;

}


/* =========================================================
   LINHA PREMIUM CARD
   ========================================================= */

body:has(.page-header-comanda)
.comanda-itens-card::before,

body:has(.page-header-comanda)
.adicionar-item-card::before,

body:has(.page-header-comanda)
.acoes-conta-card::before {

    content: "";

    position:
        absolute;

    z-index:
        2;

    top:
        0;

    left:
        22px;

    right:
        22px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(200,155,67,.44),
            transparent
        );

}


/* =========================================================
   CARD SECTION HEADER
   ========================================================= */

body:has(.page-header-comanda)
.card-section-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    padding:
        21px 22px;

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

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafbfd
        );

}


/* =========================================================
   EYEBROW
   ========================================================= */

body:has(.page-header-comanda)
.section-eyebrow {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--vl-core-gold);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        1.05px;

}


/* =========================================================
   TÍTULO CARD
   ========================================================= */

body:has(.page-header-comanda)
.card-section-header h3 {

    margin:
        0;

    color:
        var(--vl-core-text);

    font-size:
        18px;

    font-weight:
        850;

    letter-spacing:
        -.3px;

}


/* =========================================================
   AÇÕES HEADER COMANDA
   ========================================================= */

body:has(.page-header-comanda)
.comanda-header-acoes {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex-wrap:
        wrap;

    gap:
        8px;

}


/* =========================================================
   ITENS PAGOS
   ========================================================= */

body:has(.page-header-comanda)
.btn-itens-pagos {

    min-height:
        36px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 11px;

    border:
        1px solid
        #ccebd6;

    border-radius:
        9px;

    background:
        #f2fbf5;

    color:
        #16783d;

    font-size:
        9px;

    font-weight:
        850;

    cursor:
        pointer;

    box-shadow:
        none;

    transition:
        transform var(--vl-core-transition),
        border-color var(--vl-core-transition),
        background var(--vl-core-transition);

}


body:has(.page-header-comanda)
.btn-itens-pagos:hover {

    transform:
        translateY(-1px);

    border-color:
        #9ed2af;

    background:
        #eaf7ee;

}


/* =========================================================
   CONTAGEM
   ========================================================= */

body:has(.page-header-comanda)
.badge-contagem {

    min-height:
        36px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 11px;

    border:
        1px solid
        rgba(200,155,67,.19);

    border-radius:
        9px;

    background:
        #fff9ed;

    color:
        #8d671f;

    font-size:
        9px;

    font-weight:
        850;

}


/* =========================================================
   COMANDA VAZIA
   ========================================================= */

body:has(.page-header-comanda)
.comanda-vazia {

    min-height:
        300px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    padding:
        36px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fafbfd
        );

    text-align:
        center;

}


/* =========================================================
   ÍCONE VAZIO
   ========================================================= */

body:has(.page-header-comanda)
.comanda-vazia-icon {

    width:
        58px;

    height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        14px;

    border:
        1px solid
        rgba(200,155,67,.19);

    border-radius:
        17px;

    background:
        #fff9ed;

    color:
        var(--vl-core-gold);

    font-size:
        25px;

}


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

body:has(.page-header-comanda)
.comanda-table-wrapper {

    width:
        100%;

    overflow-x:
        auto;

    border-radius:
        0;

    scrollbar-width:
        thin;

    scrollbar-color:
        #c7ced8 transparent;

}


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

body:has(.page-header-comanda)
.tabela-comanda {

    width:
        100%;

    min-width:
        720px;

    margin:
        0;

    border-collapse:
        separate;

    border-spacing:
        0;

    background:
        #ffffff;

}


/* =========================================================
   THEAD
   ========================================================= */

body:has(.page-header-comanda)
.tabela-comanda thead {

    background:
        var(--vl-core-table-head);

}


/* =========================================================
   TH
   ========================================================= */

body:has(.page-header-comanda)
.tabela-comanda th {

    padding:
        14px 14px;

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

    color:
        #738093;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .07em;

    text-align:
        left;

    text-transform:
        uppercase;

    white-space:
        nowrap;

}


/* =========================================================
   LINK DO TH
   ========================================================= */

body:has(.page-header-comanda)
.th-clicavel a {

    color:
        #738093;

    text-decoration:
        none;

}


body:has(.page-header-comanda)
.th-clicavel a:hover {

    color:
        #8d671f;

}


/* =========================================================
   TD
   ========================================================= */

body:has(.page-header-comanda)
.tabela-comanda td {

    padding:
        15px 14px;

    border-bottom:
        1px solid
        #eef1f5;

    color:
        #455266;

    font-size:
        11px;

    vertical-align:
        middle;

}


/* =========================================================
   HOVER LINHA
   ========================================================= */

body:has(.page-header-comanda)
.tabela-comanda tbody tr {

    transition:
        background var(--vl-core-transition);

}


body:has(.page-header-comanda)
.tabela-comanda tbody tr:hover {

    background:
        var(--vl-core-table-row-hover);

}


body:has(.page-header-comanda)
.tabela-comanda tbody tr:last-child td {

    border-bottom:
        0;

}


/* =========================================================
   QUANTIDADE
   ========================================================= */

body:has(.page-header-comanda)
.quantidade-item {

    min-width:
        30px;

    min-height:
        30px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(200,155,67,.18);

    border-radius:
        9px;

    background:
        #fff9ed;

    color:
        #8d671f;

    font-size:
        11px;

    font-weight:
        900;

}


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

body:has(.page-header-comanda)
.produto-comanda {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


body:has(.page-header-comanda)
.produto-comanda strong {

    color:
        var(--vl-core-text);

    font-size:
        11px;

    font-weight:
        800;

}


/* =========================================================
   OBSERVAÇÃO
   ========================================================= */

body:has(.page-header-comanda)
.observacao-item {

    color:
        var(--vl-core-text-muted);

    font-size:
        9px;

    font-style:
        italic;

}


/* =========================================================
   PARCIAL TEXTO
   ========================================================= */

body:has(.page-header-comanda)
.item-pagamento-parcial-texto {

    width:
        fit-content;

    margin-top:
        2px;

    padding:
        4px 7px;

    border:
        1px solid
        #efdba8;

    border-radius:
        7px;

    background:
        #fff9ec;

    color:
        #98610c;

    font-size:
        8px;

    font-weight:
        750;

}


/* =========================================================
   HORA
   ========================================================= */

body:has(.page-header-comanda)
.hora-item {

    color:
        var(--vl-core-text-muted);

    font-variant-numeric:
        tabular-nums;

}


/* =========================================================
   SUBTOTAL
   ========================================================= */

body:has(.page-header-comanda)
.subtotal-item {

    color:
        var(--vl-core-midnight-soft);

    font-size:
        11px;

    font-weight:
        900;

    white-space:
        nowrap;

}


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

body:has(.page-header-comanda)
.status-item-pagamento {

    width:
        29px;

    height:
        29px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid transparent;

    border-radius:
        50%;

    font-size:
        10px;

    font-weight:
        900;

}


/* pago */

body:has(.page-header-comanda)
.status-item-pago {

    border-color:
        #ccebd6;

    background:
        #f2fbf5;

    color:
        #15803d;

}


/* parcial */

body:has(.page-header-comanda)
.status-item-parcial {

    border-color:
        #efdba8;

    background:
        #fff9ec;

    color:
        #98610c;

}


/* pendente */

body:has(.page-header-comanda)
.status-item-pendente {

    border-color:
        #f2cdd2;

    background:
        #fff4f5;

    color:
        #c53443;

}


/* =========================================================
   ITEM BLOQUEADO
   ========================================================= */

body:has(.page-header-comanda)
.item-bloqueado-pagamento {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        6px 8px;

    border:
        1px solid
        #e4e8ed;

    border-radius:
        8px;

    background:
        #f8fafc;

    color:
        var(--vl-core-text-muted);

    font-size:
        8px;

    font-weight:
        700;

}


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

body:has(.page-header-comanda)
.acoes-tabela,

body:has(.page-header-comanda)
.acoes-edicao {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

}


/* =========================================================
   BUTTON ACTION
   ========================================================= */

body:has(.page-header-comanda)
.btn-acao,

body:has(.page-header-comanda)
.btn-pequeno {

    min-height:
        31px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 10px;

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

    border-radius:
        8px;

    font-size:
        8px;

    font-weight:
        850;

    text-decoration:
        none;

    cursor:
        pointer;

}


/* alterar */

body:has(.page-header-comanda)
.btn-alterar {

    border-color:
        #cfddfa;

    background:
        #f4f7ff;

    color:
        #275ebd;

}


/* excluir */

body:has(.page-header-comanda)
.btn-excluir {

    border-color:
        #f0cdd2;

    background:
        #fff5f6;

    color:
        #c52f3e;

}


/* salvar */

body:has(.page-header-comanda)
.btn-success {

    border-color:
        #cce7d5;

    background:
        #f3faf5;

    color:
        #16783d;

}


/* cancelar */

body:has(.page-header-comanda)
.btn-cancelar {

    border-color:
        #e3e7ec;

    background:
        #f8fafc;

    color:
        #667386;

}


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

body:has(.page-header-comanda)
.comanda-total {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        19px 22px;

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

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #ffffff
        );

}


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

body:has(.page-header-comanda)
.comanda-total span {

    color:
        var(--vl-core-text-secondary);

    font-size:
        11px;

    font-weight:
        750;

}


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

body:has(.page-header-comanda)
.comanda-total strong {

    color:
        #8d671f;

    font-size:
        21px;

    font-weight:
        900;

    white-space:
        nowrap;

}


/* =========================================================
   ADICIONAR ITEM
   ========================================================= */

body:has(.page-header-comanda)
.adicionar-item-card {

    position:
        sticky;

    top:
        20px;

    padding:
        23px;

    animation:
        none;

}


/* =========================================================
   HEADER DO CARD LATERAL
   ========================================================= */

body:has(.page-header-comanda)
.adicionar-item-card
.card-section-header {

    padding:
        0 0 19px;

    background:
        transparent;

}


/* =========================================================
   ÍCONE ADICIONAR
   ========================================================= */

body:has(.page-header-comanda)
.icone-adicionar {

    width:
        39px;

    height:
        39px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(200,155,67,.20);

    border-radius:
        11px;

    background:
        #fff9ed;

    color:
        var(--vl-core-gold);

    font-size:
        19px;

}


/* =========================================================
   FORM
   ========================================================= */

body:has(.page-header-comanda)
.adicionar-item-card form {

    margin-top:
        20px;

}


/* =========================================================
   FORM GROUP
   ========================================================= */

body:has(.page-header-comanda)
.adicionar-item-card
.form-group {

    margin-bottom:
        16px;

}


/* =========================================================
   LABEL
   ========================================================= */

body:has(.page-header-comanda)
.adicionar-item-card
.form-group label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--vl-core-text-secondary);

    font-size:
        10px;

    font-weight:
        800;

}


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

body:has(.page-header-comanda)
.adicionar-item-card
.form-control,

body:has(.page-header-comanda)
.linha-edicao
.form-control {

    width:
        100%;

    min-height:
        44px;

    padding:
        0 12px;

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

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        var(--vl-core-text);

    font-size:
        11px;

    outline:
        none;

    box-shadow:
        none;

    transition:
        border-color var(--vl-core-transition),
        box-shadow var(--vl-core-transition);

}


/* =========================================================
   FOCUS
   ========================================================= */

body:has(.page-header-comanda)
.adicionar-item-card
.form-control:focus,

body:has(.page-header-comanda)
.linha-edicao
.form-control:focus {

    border-color:
        var(--vl-core-gold);

    box-shadow:
        0 0 0 3px
        rgba(200,155,67,.10);

}


/* =========================================================
   AUTOCOMPLETE
   ========================================================= */

body:has(.page-header-comanda)
.sugestoes-box-dinamica {

    position:
        absolute;

    z-index:
        100;

    left:
        0;

    right:
        0;

    top:
        calc(100% + 5px);

    max-height:
        270px;

    overflow-y:
        auto;

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

    border-radius:
        11px;

    background:
        #ffffff;

    box-shadow:
        0 18px 42px
        rgba(7,17,31,.14);

}


/* =========================================================
   AUTOCOMPLETE ITEM
   ========================================================= */

body:has(.page-header-comanda)
.sugestao-item-dinamico {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        11px 12px;

    border-bottom:
        1px solid
        #eef1f5;

    cursor:
        pointer;

    transition:
        background var(--vl-core-transition);

}


body:has(.page-header-comanda)
.sugestao-item-dinamico:last-child {

    border-bottom:
        0;

}


body:has(.page-header-comanda)
.sugestao-item-dinamico:hover {

    background:
        #fffaf0;

}


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

body:has(.page-header-comanda)
.sugestao-produto {

    color:
        var(--vl-core-text);

    font-size:
        10px;

    font-weight:
        750;

}


/* =========================================================
   AUTOCOMPLETE PREÇO
   ========================================================= */

body:has(.page-header-comanda)
.sugestao-preco {

    color:
        #8d671f;

    font-size:
        10px;

    font-weight:
        900;

}


/* =========================================================
   AUTOCOMPLETE EMPTY
   ========================================================= */

body:has(.page-header-comanda)
.sugestao-vazia {

    padding:
        13px;

    color:
        var(--vl-core-text-muted);

    font-size:
        10px;

    text-align:
        center;

}


/* =========================================================
   ADICIONAR ITEM
   ========================================================= */

body:has(.page-header-comanda)
.btn-adicionar-item {

    width:
        100%;

    min-height:
        45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(223,186,112,.23);

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            var(--vl-core-midnight),
            var(--vl-core-navy)
        );

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        850;

    box-shadow:
        0 8px 19px
        rgba(7,17,31,.16);

    cursor:
        pointer;

    transition:
        transform var(--vl-core-transition),
        border-color var(--vl-core-transition),
        box-shadow var(--vl-core-transition);

}


body:has(.page-header-comanda)
.btn-adicionar-item:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(223,186,112,.45);

    box-shadow:
        0 12px 26px
        rgba(7,17,31,.21);

}


/* =========================================================
   DIVISOR
   ========================================================= */

body:has(.page-header-comanda)
.divisor-card {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin:
        20px 0 16px;

    color:
        var(--vl-core-text-muted);

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


body:has(.page-header-comanda)
.divisor-card::before,

body:has(.page-header-comanda)
.divisor-card::after {

    content: "";

    flex:
        1;

    height:
        1px;

    background:
        var(--vl-core-border);

}


/* =========================================================
   CONFIRMAR PEDIDO
   ========================================================= */

body:has(.page-header-comanda)
.btn-confirmar-pedido {

    width:
        100%;

    min-height:
        45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #c7e4d1;

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            #11763b,
            #159447
        );

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        850;

    cursor:
        pointer;

    box-shadow:
        0 8px 18px
        rgba(21,148,71,.14);

}


/* =========================================================
   AÇÕES DA CONTA
   ========================================================= */

body:has(.page-header-comanda)
.acoes-conta-card {

    margin-top:
        21px;

    overflow:
        hidden;

    animation:
        none;

}


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

body:has(.page-header-comanda)
.acoes-conta-grid {

    display:
        grid;

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

    gap:
        12px;

    padding:
        20px 22px 22px;

}


/* =========================================================
   AÇÃO CONTA
   ========================================================= */

body:has(.page-header-comanda)
.acao-conta {

    position:
        relative;

    min-width:
        0;

    min-height:
        92px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        14px;

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

    border-radius:
        13px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafbfd
        );

    color:
        var(--vl-core-text);

    text-decoration:
        none;

    transition:
        transform var(--vl-core-transition),
        border-color var(--vl-core-transition),
        box-shadow var(--vl-core-transition);

}


body:has(.page-header-comanda)
.acao-conta:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(200,155,67,.24);

    box-shadow:
        0 10px 24px
        rgba(7,17,31,.07);

}


/* =========================================================
   ÍCONE DA AÇÃO
   ========================================================= */

body:has(.page-header-comanda)
.acao-icone {

    width:
        41px;

    height:
        41px;

    flex:
        0 0 41px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(200,155,67,.18);

    border-radius:
        11px;

    background:
        #fff9ed;

    color:
        #8d671f;

    font-size:
        16px;

}


/* =========================================================
   TEXTOS AÇÃO
   ========================================================= */

body:has(.page-header-comanda)
.acao-conta strong {

    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--vl-core-text);

    font-size:
        10px;

    font-weight:
        850;

}


body:has(.page-header-comanda)
.acao-conta small {

    display:
        block;

    color:
        var(--vl-core-text-muted);

    font-size:
        8px;

    line-height:
        1.35;

}


/* =========================================================
   BAIXA PARCIAL
   ========================================================= */

body:has(.page-header-comanda)
.acao-parcial
.acao-icone {

    border-color:
        #efdba8;

    background:
        #fff9ec;

    color:
        #98610c;

}


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

body:has(.page-header-comanda)
.acao-total
.acao-icone {

    border-color:
        #ccebd6;

    background:
        #f2fbf5;

    color:
        #15803d;

}


/* =========================================================
   TROCAR MESA
   ========================================================= */

body:has(.page-header-comanda)
.acao-trocar
.acao-icone {

    border-color:
        #cfddfa;

    background:
        #f4f7ff;

    color:
        #275ebd;

}


/* =========================================================
   IMPRESSÃO
   ========================================================= */

body:has(.page-header-comanda)
.acao-personalizada
.acao-icone {

    border-color:
        #e3d8f6;

    background:
        #f8f4ff;

    color:
        #7650ad;

}


/* =========================================================
   MODAL ITENS PAGOS
   ========================================================= */

body:has(.page-header-comanda)
.modal-itens-pagos {

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

}


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

body:has(.page-header-comanda)
.modal-itens-pagos-card {

    overflow:
        hidden;

    padding:
        0;

    border:
        1px solid
        rgba(223,186,112,.17);

    border-radius:
        20px;

    background:
        #ffffff;

    box-shadow:
        0 30px 80px
        rgba(7,17,31,.27);

}


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

body:has(.page-header-comanda)
.modal-itens-pagos-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        21px 22px;

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

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafbfd
        );

}


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

body:has(.page-header-comanda)
.modal-itens-pagos-header h3 {

    margin:
        0;

    color:
        var(--vl-core-text);

    font-size:
        18px;

    font-weight:
        850;

}


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

body:has(.page-header-comanda)
.modal-itens-pagos-header p {

    margin:
        5px 0 0;

    color:
        var(--vl-core-text-muted);

    font-size:
        10px;

}


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

body:has(.page-header-comanda)
.modal-itens-pagos-fechar {

    width:
        36px;

    height:
        36px;

    flex:
        0 0 36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        var(--vl-core-text-secondary);

    font-size:
        20px;

    cursor:
        pointer;

}


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

body:has(.page-header-comanda)
.tabela-itens-pagos {

    min-width:
        640px;

}


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

body:has(.page-header-comanda)
.modal-itens-pagos-resumo {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        18px 22px;

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

    background:
        linear-gradient(
            135deg,
            #f2fbf5,
            #ffffff
        );

}


body:has(.page-header-comanda)
.modal-itens-pagos-resumo span {

    color:
        var(--vl-core-text-secondary);

    font-size:
        10px;

    font-weight:
        750;

}


body:has(.page-header-comanda)
.modal-itens-pagos-resumo strong {

    color:
        #15803d;

    font-size:
        19px;

    font-weight:
        900;

}


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

@media (max-width: 1100px) {

    body:has(.page-header-comanda)
    .comanda-layout {

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

    }


    body:has(.page-header-comanda)
    .acoes-conta-grid {

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

    }

}


@media (max-width: 900px) {

    .page-header-comanda {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            28px 25px;

    }


    .page-header-comanda
    .nav-links {

        width:
            100%;

    }


    body:has(.page-header-comanda)
    .comanda-layout {

        grid-template-columns:
            1fr;

    }


    body:has(.page-header-comanda)
    .adicionar-item-card {

        position:
            static;

    }

}


@media (max-width: 700px) {

    body:has(.page-header-comanda)
    .container {

        padding-top:
            23px;

    }


    .page-header-comanda {

        padding:
            25px 21px;

        border-radius:
            19px;

    }


    .page-header-comanda
    .nav-links {

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        scrollbar-width:
            none;

    }


    .page-header-comanda
    .nav-links::-webkit-scrollbar {

        display:
            none;

    }


    .page-header-comanda
    .nav-voltar {

        width:
            auto;

        flex:
            0 0 auto;

    }


    body:has(.page-header-comanda)
    .comanda-resumo {

        gap:
            10px;

    }


    body:has(.page-header-comanda)
    .resumo-item {

        min-height:
            92px;

        padding:
            15px;

    }


    body:has(.page-header-comanda)
    .resumo-item strong {

        font-size:
            21px;

    }

}


@media (max-width: 600px) {

    body:has(.page-header-comanda)
    .comanda-resumo {

        grid-template-columns:
            1fr;

    }


    body:has(.page-header-comanda)
    .acoes-conta-grid {

        grid-template-columns:
            1fr;

    }


    body:has(.page-header-comanda)
    .card-section-header {

        align-items:
            flex-start;

        padding:
            18px;

    }


    body:has(.page-header-comanda)
    .adicionar-item-card {

        padding:
            18px;

    }


    body:has(.page-header-comanda)
    .comanda-total {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            5px;

        padding:
            17px 18px;

    }

}


@media (max-width: 430px) {

    body:has(.page-header-comanda)
    .container {

        padding-top:
            17px;

    }


    .page-header-comanda {

        padding:
            23px 18px;

        border-radius:
            16px;

    }


    .page-header-comanda h2 {

        font-size:
            23px;

    }


    .page-header-comanda
    .page-brand {

        font-size:
            9px;

    }


    body:has(.page-header-comanda)
    .acoes-conta-grid {

        padding:
            16px 18px 18px;

    }


    body:has(.page-header-comanda)
    .modal-itens-pagos-header {

        padding:
            18px;

    }


    body:has(.page-header-comanda)
    .modal-itens-pagos-resumo {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            16px 18px;

    }

}


/* =========================================================
   REDUZIR MOVIMENTO
   ========================================================= */

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

    body:has(.page-header-comanda) *,
    body:has(.page-header-comanda) *::before,
    body:has(.page-header-comanda) *::after {

        animation:
            none !important;

        transition-duration:
            .01ms !important;

    }

}

/* VALORIUM_LUXE_COMANDA_FINAL_END */

/* VALORIUM_LUXE_BAIXA_PARCIAL_FINAL_START */

/* =========================================================
   VALORIUM SISTEMAS
   BAIXA PARCIAL
   LUXE FINAL

   Design global:
   VALORIUM DESIGN CORE V3

   Escopo específico da página através de:
   body:has(.baixa-header)
   ========================================================= */


/* =========================================================
   PÁGINA
   ========================================================= */

body:has(.baixa-header)
.container {

    position:
        relative;

    padding-top:
        34px;

    padding-bottom:
        60px;

}


/* =========================================================
   HEADER
   ========================================================= */

.baixa-header {

    position:
        relative;

    isolation:
        isolate;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    margin:
        0 0 24px;

    padding:
        34px 38px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(223,186,112,.15);

    border-radius:
        var(--vl-core-radius-header);

    background:
        var(--vl-core-header-bg);

    box-shadow:
        var(--vl-core-shadow-header);

    animation:
        none;

}


/* =========================================================
   GLOW
   ========================================================= */

.baixa-header::before {

    content: "";

    position:
        absolute;

    z-index:
        -1;

    width:
        430px;

    height:
        430px;

    top:
        -255px;

    right:
        -125px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.27) 0%,
            rgba(59,130,246,.08) 45%,
            transparent 72%
        );

    filter:
        none;

    pointer-events:
        none;

}


/* =========================================================
   LINHA DOURADA
   ========================================================= */

.baixa-header::after {

    content: "";

    position:
        absolute;

    z-index:
        -1;

    left:
        0;

    right:
        0;

    bottom:
        0;

    width:
        auto;

    height:
        1px;

    border-radius:
        0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(223,186,112,.78),
            transparent
        );

    opacity:
        .9;

}


/* =========================================================
   HEADER INFO
   ========================================================= */

.baixa-header-info {

    position:
        relative;

    z-index:
        2;

    min-width:
        0;

    max-width:
        760px;

}


/* =========================================================
   BRAND
   ========================================================= */

.baixa-header-info
.page-brand {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin:
        0 0 11px;

    color:
        var(--vl-core-gold-light);

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        1.25px;

    text-transform:
        uppercase;

}


/* =========================================================
   ÍCONE BAIXA PARCIAL
   moeda dividida visualmente
   ========================================================= */

.baixa-header-info
.page-brand::before {

    content: "";

    width:
        15px;

    height:
        15px;

    flex:
        0 0 15px;

    box-sizing:
        border-box;

    border:
        1.4px solid
        var(--vl-core-gold-light);

    border-radius:
        50%;

    background:
        linear-gradient(
            90deg,
            var(--vl-core-gold-light)
            0 48%,
            transparent
            48% 100%
        );

    box-shadow:
        inset 0 0 0 2px
        rgba(7,17,31,.28);

}


/* detalhe central */

.baixa-header-info
.page-brand::after {

    content: "";

    position:
        absolute;

    left:
        6px;

    top:
        3px;

    width:
        1px;

    height:
        9px;

    border-radius:
        2px;

    background:
        rgba(223,186,112,.92);

}


/* =========================================================
   TÍTULO
   ========================================================= */

.baixa-header-info h2 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            27px,
            3vw,
            35px
        );

    font-weight:
        800;

    line-height:
        1.12;

    letter-spacing:
        -.85px;

}


/* =========================================================
   MESA
   ========================================================= */

.baixa-mesa-info {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        10px;

    color:
        rgba(226,232,240,.78);

    font-size:
        11px;

    font-weight:
        650;

}


.baixa-mesa-info span {

    color:
        rgba(226,232,240,.58);

}


/* =========================================================
   VOLTAR
   ========================================================= */

.baixa-header
.nav-voltar {

    position:
        relative;

    z-index:
        3;

    flex:
        0 0 auto;

    min-height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0 14px;

    border:
        1px solid
        var(--vl-core-nav-border);

    border-radius:
        var(--vl-core-radius-sm);

    background:
        var(--vl-core-nav-bg);

    color:
        rgba(226,232,240,.90);

    font-size:
        11px;

    font-weight:
        750;

    text-decoration:
        none;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

}


.baixa-header
.nav-voltar:hover {

    transform:
        translateY(-1px);

    border-color:
        var(--vl-core-nav-border-hover);

    background:
        var(--vl-core-nav-bg-hover);

    color:
        #ffffff;

}


/* =========================================================
   FEEDBACK DE PAGAMENTO
   ========================================================= */

body:has(.baixa-header)
.payment-feedback {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        20px;

    padding:
        14px 16px;

    border-radius:
        13px;

    box-shadow:
        0 4px 14px
        rgba(7,17,31,.04);

}


/* =========================================================
   CONTEÚDO FEEDBACK
   ========================================================= */

body:has(.baixa-header)
.payment-feedback-content {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

}


/* =========================================================
   ÍCONE FEEDBACK
   ========================================================= */

body:has(.baixa-header)
.payment-feedback-icon {

    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

}


/* erro */

body:has(.baixa-header)
.payment-feedback-error {

    border:
        1px solid
        #f2cdd2;

    background:
        linear-gradient(
            135deg,
            #fff4f5,
            #ffffff
        );

    color:
        #a52834;

}


body:has(.baixa-header)
.payment-feedback-error
.payment-feedback-icon {

    background:
        #fde8eb;

    color:
        #c53443;

}


/* sucesso */

body:has(.baixa-header)
.payment-feedback-success {

    border:
        1px solid
        #ccebd6;

    background:
        linear-gradient(
            135deg,
            #f2fbf5,
            #ffffff
        );

    color:
        #16783d;

}


body:has(.baixa-header)
.payment-feedback-success
.payment-feedback-icon {

    background:
        #ddf5e5;

    color:
        #159447;

}


/* =========================================================
   TEXTO FEEDBACK
   ========================================================= */

body:has(.baixa-header)
.payment-feedback-text {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


body:has(.baixa-header)
.payment-feedback-text strong {

    font-size:
        11px;

    font-weight:
        850;

}


body:has(.baixa-header)
.payment-feedback-text span {

    font-size:
        10px;

}


/* =========================================================
   AÇÃO FEEDBACK
   ========================================================= */

body:has(.baixa-header)
.payment-feedback-action {

    min-height:
        35px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 11px;

    border:
        1px solid
        rgba(200,155,67,.19);

    border-radius:
        9px;

    background:
        #fff9ed;

    color:
        #8d671f;

    font-size:
        9px;

    font-weight:
        850;

}


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

body:has(.baixa-header)
.baixa-resumo {

    display:
        grid;

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

    gap:
        14px;

    margin-bottom:
        23px;

    animation:
        none;

}


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

body:has(.baixa-header)
.baixa-resumo-item {

    position:
        relative;

    min-width:
        0;

    min-height:
        103px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        17px 18px;

    overflow:
        hidden;

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

    border-radius:
        16px;

    background:
        #ffffff;

    box-shadow:
        var(--vl-core-shadow-card);

    transition:
        transform var(--vl-core-transition),
        border-color var(--vl-core-transition),
        box-shadow var(--vl-core-transition);

}


/* remove decoração circular antiga */

body:has(.baixa-header)
.baixa-resumo-item::after {

    content:
        none;

}


/* linha premium */

body:has(.baixa-header)
.baixa-resumo-item::before {

    content: "";

    position:
        absolute;

    left:
        17px;

    right:
        17px;

    top:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(200,155,67,.48),
            transparent
        );

}


/* hover */

body:has(.baixa-header)
.baixa-resumo-item:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(200,155,67,.24);

    box-shadow:
        var(--vl-core-shadow-card-hover);

}


/* =========================================================
   LABEL
   ========================================================= */

body:has(.baixa-header)
.baixa-resumo-label {

    position:
        relative;

    z-index:
        2;

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--vl-core-text-muted);

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;

}


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

body:has(.baixa-header)
.baixa-resumo-item strong {

    position:
        relative;

    z-index:
        2;

    color:
        var(--vl-core-midnight-soft);

    font-size:
        21px;

    font-weight:
        900;

    line-height:
        1.1;

    letter-spacing:
        -.45px;

}


/* =========================================================
   SALDO RESTANTE
   ========================================================= */

body:has(.baixa-header)
.baixa-resumo-total {

    border-color:
        rgba(200,155,67,.27);

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #ffffff
        );

}


body:has(.baixa-header)
.baixa-resumo-total strong {

    color:
        #8d671f;

}


/* =========================================================
   GRID PRINCIPAL
   ========================================================= */

body:has(.baixa-header)
.baixa-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0,1.55fr)
        minmax(340px,.72fr);

    align-items:
        start;

    gap:
        19px;

}


/* =========================================================
   CARDS
   ========================================================= */

body:has(.baixa-header)
.baixa-card {

    position:
        relative;

    min-width:
        0;

    overflow:
        hidden;

    padding:
        0;

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

    border-radius:
        18px;

    background:
        #ffffff;

    box-shadow:
        var(--vl-core-shadow-card);

    animation:
        none;

}


/* linha premium */

body:has(.baixa-header)
.baixa-card::before {

    content: "";

    position:
        absolute;

    z-index:
        3;

    top:
        0;

    left:
        22px;

    right:
        22px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(200,155,67,.44),
            transparent
        );

}


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

body:has(.baixa-header)
.baixa-card-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        20px 21px;

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

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafbfd
        );

}


/* =========================================================
   KICKER
   ========================================================= */

body:has(.baixa-header)
.baixa-card-header
.section-kicker {

    display:
        block;

    margin:
        0 0 5px;

    color:
        var(--vl-core-gold);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        1.05px;

}


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

body:has(.baixa-header)
.baixa-card-header h3 {

    margin:
        0;

    color:
        var(--vl-core-text);

    font-size:
        18px;

    font-weight:
        850;

    letter-spacing:
        -.3px;

}


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

body:has(.baixa-header)
.baixa-card-header p {

    margin:
        5px 0 0;

    color:
        var(--vl-core-text-muted);

    font-size:
        10px;

    line-height:
        1.5;

}


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

body:has(.baixa-header)
.baixa-table-wrapper {

    width:
        100%;

    overflow-x:
        auto;

    overflow-y:
        visible;

    border-radius:
        0;

    scrollbar-width:
        thin;

    scrollbar-color:
        #c7ced8 transparent;

}


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

body:has(.baixa-header)
.baixa-table {

    width:
        100%;

    min-width:
        740px;

    margin:
        0;

    border-collapse:
        separate;

    border-spacing:
        0;

    background:
        #ffffff;

}


/* =========================================================
   THEAD
   ========================================================= */

body:has(.baixa-header)
.baixa-table thead {

    background:
        var(--vl-core-table-head);

}


/* =========================================================
   TH
   ========================================================= */

body:has(.baixa-header)
.baixa-table th {

    padding:
        14px 13px;

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

    background:
        transparent;

    color:
        #738093;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;

    white-space:
        nowrap;

}


/* =========================================================
   TD
   ========================================================= */

body:has(.baixa-header)
.baixa-table td {

    padding:
        14px 13px;

    border-bottom:
        1px solid
        #eef1f5;

    color:
        #455266;

    font-size:
        11px;

    vertical-align:
        middle;

}


/* =========================================================
   ROW
   ========================================================= */

body:has(.baixa-header)
.baixa-table tbody tr {

    transition:
        background var(--vl-core-transition);

}


body:has(.baixa-header)
.baixa-table tbody tr:hover {

    background:
        var(--vl-core-table-row-hover);

}


body:has(.baixa-header)
.baixa-table tbody tr:last-child td {

    border-bottom:
        0;

}


/* =========================================================
   COLUNAS
   ========================================================= */

body:has(.baixa-header)
.baixa-table
.col-selecao {

    width:
        54px;

    text-align:
        center;

}


body:has(.baixa-header)
.baixa-table
.col-qtd {

    width:
        86px;

    text-align:
        center;

}


body:has(.baixa-header)
.baixa-table
.col-preco {

    width:
        108px;

    text-align:
        right;

}


/* =========================================================
   CHECKBOX
   ========================================================= */

body:has(.baixa-header)
.checkbox-custom {

    width:
        21px;

    height:
        21px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

}


body:has(.baixa-header)
.checkbox-custom span {

    width:
        20px;

    height:
        20px;

    box-sizing:
        border-box;

    border:
        1.5px solid
        #cbd3dd;

    border-radius:
        6px;

    background:
        #ffffff;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.85);

}


/* checked */

body:has(.baixa-header)
.checkbox-custom
input:checked + span {

    border-color:
        var(--vl-core-gold);

    background:
        linear-gradient(
            135deg,
            #b9872f,
            #d7ae5d
        );

    box-shadow:
        0 4px 10px
        rgba(200,155,67,.18);

}


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

body:has(.baixa-header)
.produto-baixa {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


body:has(.baixa-header)
.produto-baixa strong {

    color:
        var(--vl-core-text);

    font-size:
        11px;

    font-weight:
        800;

}


/* =========================================================
   OBSERVAÇÃO
   ========================================================= */

body:has(.baixa-header)
.produto-observacao {

    width:
        fit-content;

    padding:
        4px 7px;

    border:
        1px solid
        #e7ebf0;

    border-radius:
        7px;

    background:
        #f8fafc;

    color:
        var(--vl-core-text-muted);

    font-size:
        8px;

}


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

body:has(.baixa-header)
.qtd-estoque {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        31px;

    min-height:
        27px;

    padding:
        0 7px;

    border:
        1px solid
        #e2e7ed;

    border-radius:
        8px;

    background:
        #f8fafc;

    color:
        #667386;

    font-size:
        10px;

    font-weight:
        800;

}


/* =========================================================
   DISPONÍVEL
   ========================================================= */

body:has(.baixa-header)
.qtd-disponivel {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        31px;

    min-height:
        27px;

    padding:
        0 7px;

    border:
        1px solid
        #ccebd6;

    border-radius:
        8px;

    background:
        #f2fbf5;

    color:
        #15803d;

    font-size:
        10px;

    font-weight:
        850;

}


/* =========================================================
   QUANTIDADE PARA PAGAR
   ========================================================= */

body:has(.baixa-header)
.qtd-baixa {

    width:
        66px !important;

    min-width:
        66px;

    min-height:
        36px !important;

    padding:
        0 7px !important;

    margin:
        0 auto;

    border-radius:
        8px !important;

    text-align:
        center;

    font-size:
        11px;

    font-weight:
        800;

}


/* =========================================================
   PREÇO
   ========================================================= */

body:has(.baixa-header)
.baixa-table
.col-preco strong {

    color:
        var(--vl-core-midnight-soft);

    font-size:
        11px;

    font-weight:
        900;

    white-space:
        nowrap;

}


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

body:has(.baixa-header)
.baixa-empty {

    padding:
        50px 25px !important;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fafbfd
        );

    text-align:
        center;

}


body:has(.baixa-header)
.baixa-empty-icon {

    width:
        54px;

    height:
        54px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 12px;

    border:
        1px solid
        rgba(200,155,67,.18);

    border-radius:
        16px;

    background:
        #fff9ed;

    font-size:
        21px;

}


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

body:has(.baixa-header)
.baixa-total-box {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    margin:
        18px;

    padding:
        17px 18px;

    border:
        1px solid
        rgba(200,155,67,.24);

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #fffdf8
        );

}


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

body:has(.baixa-header)
.baixa-total-box span {

    display:
        block;

    color:
        var(--vl-core-text);

    font-size:
        11px;

    font-weight:
        850;

}


body:has(.baixa-header)
.baixa-total-box small {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--vl-core-text-muted);

    font-size:
        9px;

}


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

body:has(.baixa-header)
.baixa-total-box
> strong {

    color:
        #8d671f;

    font-size:
        22px;

    font-weight:
        900;

    letter-spacing:
        -.35px;

    white-space:
        nowrap;

}


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

body:has(.baixa-header)
.pagamento-card {

    position:
        sticky;

    top:
        18px;

}


/* =========================================================
   OPÇÕES
   ========================================================= */

body:has(.baixa-header)
.pagamentos-opcoes {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    padding:
        19px 20px;

}


/* =========================================================
   OPÇÃO PAGAMENTO
   ========================================================= */

body:has(.baixa-header)
.pagamento-opcao {

    position:
        relative;

    min-height:
        64px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        11px 13px;

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

    border-radius:
        11px;

    background:
        #ffffff;

    cursor:
        pointer;

    transition:
        transform var(--vl-core-transition),
        border-color var(--vl-core-transition),
        background var(--vl-core-transition),
        box-shadow var(--vl-core-transition);

}


body:has(.baixa-header)
.pagamento-opcao:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(200,155,67,.28);

    background:
        #fffdf8;

    box-shadow:
        0 7px 17px
        rgba(7,17,31,.05);

}


/* =========================================================
   RADIO NATIVO ESCONDIDO
   ========================================================= */

body:has(.baixa-header)
.pagamento-opcao
> input {

    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;

}


/* =========================================================
   RADIO VISUAL
   ========================================================= */

body:has(.baixa-header)
.pagamento-radio {

    width:
        19px;

    height:
        19px;

    flex:
        0 0 19px;

    box-sizing:
        border-box;

    border:
        1.5px solid
        #cbd3dd;

    border-radius:
        50%;

    background:
        #ffffff;

    transition:
        border-color var(--vl-core-transition),
        background var(--vl-core-transition),
        box-shadow var(--vl-core-transition);

}


/* =========================================================
   RADIO SELECIONADO
   ========================================================= */

body:has(.baixa-header)
.pagamento-opcao
> input:checked
+ .pagamento-radio {

    border-color:
        var(--vl-core-gold);

    background:
        radial-gradient(
            circle,
            var(--vl-core-gold)
            0 4px,
            #ffffff
            4.5px
        );

    box-shadow:
        0 0 0 3px
        rgba(200,155,67,.08);

}


/* =========================================================
   OPÇÃO SELECIONADA
   ========================================================= */

body:has(.baixa-header)
.pagamento-opcao:has(
    > input:checked
) {

    border-color:
        rgba(200,155,67,.38);

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #ffffff
        );

    box-shadow:
        0 0 0 3px
        rgba(200,155,67,.055);

}


/* =========================================================
   ÍCONE PAGAMENTO
   ========================================================= */

body:has(.baixa-header)
.pagamento-icon {

    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(200,155,67,.16);

    border-radius:
        10px;

    background:
        #fff9ed;

    color:
        #8d671f;

    font-size:
        15px;

}


/* =========================================================
   TEXTO PAGAMENTO
   ========================================================= */

body:has(.baixa-header)
.pagamento-info {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


body:has(.baixa-header)
.pagamento-info strong {

    color:
        var(--vl-core-text);

    font-size:
        11px;

    font-weight:
        850;

}


body:has(.baixa-header)
.pagamento-info small {

    color:
        var(--vl-core-text-muted);

    font-size:
        9px;

}


/* =========================================================
   DINHEIRO
   IMPORTANTE:
   NÃO DEFINE display.
   O JS continua controlando display:none/block.
   ========================================================= */

body:has(.baixa-header)
.dinheiro-box {

    margin:
        1px 0;

    padding:
        15px;

    border:
        1px solid
        #eadbb9;

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #ffffff
        );

}


/* =========================================================
   LABEL DINHEIRO
   ========================================================= */

body:has(.baixa-header)
.dinheiro-box
> label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--vl-core-text-secondary);

    font-size:
        9px;

    font-weight:
        850;

}


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

body:has(.baixa-header)
.dinheiro-input-wrapper {

    display:
        flex;

    align-items:
        stretch;

    overflow:
        hidden;

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

    border-radius:
        10px;

    background:
        #ffffff;

}


body:has(.baixa-header)
.dinheiro-input-wrapper:focus-within {

    border-color:
        var(--vl-core-gold);

    box-shadow:
        0 0 0 3px
        rgba(200,155,67,.10);

}


/* R$ */

body:has(.baixa-header)
.dinheiro-input-wrapper
> span {

    min-width:
        43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-right:
        1px solid
        var(--vl-core-border);

    background:
        #fafbfd;

    color:
        #8d671f;

    font-size:
        10px;

    font-weight:
        900;

}


/* input */

body:has(.baixa-header)
.dinheiro-input-wrapper
.form-control {

    min-height:
        43px;

    border:
        0;

    border-radius:
        0;

    box-shadow:
        none;

}


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

body:has(.baixa-header)
.troco-box {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    margin-top:
        11px;

    padding:
        11px 12px;

    border:
        1px solid
        #ccebd6;

    border-radius:
        9px;

    background:
        #f2fbf5;

}


/* label */

body:has(.baixa-header)
.troco-box span {

    color:
        #3f7654;

    font-size:
        9px;

    font-weight:
        850;

    text-transform:
        uppercase;

}


/* valor */

body:has(.baixa-header)
.troco-box strong {

    color:
        #15803d;

    font-size:
        14px;

    font-weight:
        900;

}


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

body:has(.baixa-header)
.pagamento-total-final {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin:
        3px 20px 17px;

    padding:
        16px 17px;

    border:
        1px solid
        rgba(200,155,67,.23);

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #fffdf8
        );

}


/* label */

body:has(.baixa-header)
.pagamento-total-final span {

    color:
        var(--vl-core-text-secondary);

    font-size:
        10px;

    font-weight:
        800;

}


/* valor */

body:has(.baixa-header)
.pagamento-total-final strong {

    color:
        #8d671f;

    font-size:
        22px;

    font-weight:
        900;

    white-space:
        nowrap;

}


/* =========================================================
   CONCLUIR
   ========================================================= */

body:has(.baixa-header)
.btn-baixa-finalizar {

    width:
        calc(100% - 40px);

    min-height:
        47px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin:
        0 20px 20px;

    padding:
        0 16px;

    border:
        1px solid
        rgba(223,186,112,.25);

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            var(--vl-core-midnight),
            var(--vl-core-navy)
        );

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        850;

    cursor:
        pointer;

    box-shadow:
        0 9px 20px
        rgba(7,17,31,.17);

    transition:
        transform var(--vl-core-transition),
        border-color var(--vl-core-transition),
        box-shadow var(--vl-core-transition);

}


body:has(.baixa-header)
.btn-baixa-finalizar:hover:not(:disabled) {

    transform:
        translateY(-1px);

    border-color:
        rgba(223,186,112,.48);

    box-shadow:
        0 13px 27px
        rgba(7,17,31,.22);

}


/* disabled */

body:has(.baixa-header)
.btn-baixa-finalizar:disabled {

    border-color:
        #dfe4ea;

    background:
        #edf0f4;

    color:
        #9ca6b3;

    box-shadow:
        none;

    cursor:
        not-allowed;

}


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

@media (max-width: 1050px) {

    body:has(.baixa-header)
    .baixa-grid {

        grid-template-columns:
            1fr;

    }


    body:has(.baixa-header)
    .pagamento-card {

        position:
            static;

        top:
            auto;

    }

}


@media (max-width: 850px) {

    body:has(.baixa-header)
    .baixa-resumo {

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

    }


    .baixa-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            28px 25px;

    }


    .baixa-header
    .nav-voltar {

        width:
            100%;

    }

}


@media (max-width: 650px) {

    body:has(.baixa-header)
    .container {

        padding-top:
            23px;

    }


    .baixa-header {

        padding:
            25px 21px;

        border-radius:
            19px;

    }


    body:has(.baixa-header)
    .baixa-resumo {

        grid-template-columns:
            1fr;

        gap:
            11px;

    }


    body:has(.baixa-header)
    .baixa-resumo-item {

        min-height:
            88px;

    }


    body:has(.baixa-header)
    .baixa-card-header {

        padding:
            18px;

    }


    body:has(.baixa-header)
    .baixa-total-box,

    body:has(.baixa-header)
    .pagamento-total-final {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            6px;

    }


    body:has(.baixa-header)
    .baixa-total-box {

        margin:
            15px;

    }


    body:has(.baixa-header)
    .pagamentos-opcoes {

        padding:
            16px;

    }


    body:has(.baixa-header)
    .dinheiro-box {

        margin-left:
            16px;

        margin-right:
            16px;

    }


    body:has(.baixa-header)
    .pagamento-total-final {

        margin-left:
            16px;

        margin-right:
            16px;

    }


    body:has(.baixa-header)
    .btn-baixa-finalizar {

        width:
            calc(100% - 32px);

        margin-left:
            16px;

        margin-right:
            16px;

    }

}


@media (max-width: 430px) {

    body:has(.baixa-header)
    .container {

        padding-top:
            17px;

    }


    .baixa-header {

        padding:
            23px 18px;

        border-radius:
            16px;

    }


    .baixa-header-info
    .page-brand {

        font-size:
            9px;

    }


    .baixa-header-info h2 {

        font-size:
            24px;

    }


    .baixa-mesa-info {

        font-size:
            10px;

    }


    body:has(.baixa-header)
    .baixa-resumo-item {

        padding:
            15px 17px;

    }


    body:has(.baixa-header)
    .baixa-resumo-item strong {

        font-size:
            20px;

    }


    body:has(.baixa-header)
    .baixa-table {

        min-width:
            700px;

    }


    body:has(.baixa-header)
    .pagamento-opcao {

        min-height:
            60px;

        padding:
            10px 11px;

    }


    body:has(.baixa-header)
    .pagamento-icon {

        width:
            35px;

        height:
            35px;

        flex-basis:
            35px;

    }


    body:has(.baixa-header)
    .payment-feedback {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

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

    body:has(.baixa-header) *,
    body:has(.baixa-header) *::before,
    body:has(.baixa-header) *::after {

        animation:
            none !important;

        transition-duration:
            .01ms !important;

    }

}

/* VALORIUM_LUXE_BAIXA_PARCIAL_FINAL_END */

/* VALORIUM_LUXE_BAIXA_TOTAL_FINAL_START */

/* =========================================================
   VALORIUM SISTEMAS
   BAIXA TOTAL / FECHAR CONTA
   LUXE FINAL

   IMPORTANTE:
   Todo o escopo específico usa
   body:has(#formFechamentoTotal)

   para NÃO afetar o fechamento de caixa
   existente dentro de financas.php.
   ========================================================= */


/* =========================================================
   PÁGINA
   ========================================================= */

body:has(#formFechamentoTotal)
.container {

    position:
        relative;

    padding-top:
        34px;

    padding-bottom:
        60px;

}


/* =========================================================
   HEADER EXCLUSIVO DA BAIXA TOTAL
   ========================================================= */

body:has(#formFechamentoTotal)
.fechamento-header {

    position:
        relative;

    isolation:
        isolate;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    margin:
        0 0 24px;

    padding:
        34px 38px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(223,186,112,.15);

    border-radius:
        var(--vl-core-radius-header);

    background:
        var(--vl-core-header-bg);

    box-shadow:
        var(--vl-core-shadow-header);

    animation:
        none;

}


/* =========================================================
   GLOW
   ========================================================= */

body:has(#formFechamentoTotal)
.fechamento-header::before {

    content: "";

    position:
        absolute;

    z-index:
        -1;

    width:
        430px;

    height:
        430px;

    top:
        -255px;

    right:
        -125px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.27) 0%,
            rgba(59,130,246,.08) 45%,
            transparent 72%
        );

    filter:
        none;

    pointer-events:
        none;

}


/* =========================================================
   LINHA DOURADA
   ========================================================= */

body:has(#formFechamentoTotal)
.fechamento-header::after {

    content: "";

    position:
        absolute;

    z-index:
        -1;

    left:
        0;

    right:
        0;

    bottom:
        0;

    width:
        auto;

    height:
        1px;

    border-radius:
        0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(223,186,112,.78),
            transparent
        );

}


/* =========================================================
   ÁREA DO TÍTULO
   ========================================================= */

body:has(#formFechamentoTotal)
.fechamento-titulo-area {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    min-width:
        0;

}


/* =========================================================
   ÍCONE DO FECHAMENTO
   ========================================================= */

body:has(#formFechamentoTotal)
.icone-fechamento {

    width:
        48px;

    height:
        48px;

    flex:
        0 0 48px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(223,186,112,.23);

    border-radius:
        14px;

    background:
        rgba(200,155,67,.10);

    color:
        var(--vl-core-gold-light);

    font-size:
        18px;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.06);

}


/* =========================================================
   TÍTULO
   ========================================================= */

body:has(#formFechamentoTotal)
.fechamento-titulo-area h2 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            27px,
            3vw,
            35px
        );

    font-weight:
        800;

    line-height:
        1.12;

    letter-spacing:
        -.85px;

}


/* =========================================================
   SUBTÍTULO
   ========================================================= */

body:has(#formFechamentoTotal)
.fechamento-subtitulo {

    margin-top:
        7px;

    color:
        rgba(226,232,240,.72);

    font-size:
        11px;

    font-weight:
        600;

}


/* =========================================================
   VOLTAR
   ========================================================= */

body:has(#formFechamentoTotal)
.btn-voltar-fechamento {

    position:
        relative;

    z-index:
        3;

    flex:
        0 0 auto;

    min-height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0 14px;

    border:
        1px solid
        var(--vl-core-nav-border);

    border-radius:
        var(--vl-core-radius-sm);

    background:
        var(--vl-core-nav-bg);

    color:
        rgba(226,232,240,.90);

    font-size:
        11px;

    font-weight:
        750;

    text-decoration:
        none;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    transition:
        transform var(--vl-core-transition),
        border-color var(--vl-core-transition),
        background var(--vl-core-transition),
        color var(--vl-core-transition);

}


body:has(#formFechamentoTotal)
.btn-voltar-fechamento:hover {

    transform:
        translateY(-1px);

    border-color:
        var(--vl-core-nav-border-hover);

    background:
        var(--vl-core-nav-bg-hover);

    color:
        #ffffff;

}


/* =========================================================
   GRID PRINCIPAL
   ========================================================= */

body:has(#formFechamentoTotal)
.fechamento-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0,1.55fr)
        minmax(340px,.72fr);

    align-items:
        start;

    gap:
        19px;

}


/* =========================================================
   CARDS
   ========================================================= */

body:has(#formFechamentoTotal)
.card-fechamento {

    position:
        relative;

    min-width:
        0;

    overflow:
        hidden;

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

    border-radius:
        18px;

    background:
        #ffffff;

    box-shadow:
        var(--vl-core-shadow-card);

    animation:
        none;

}


/* linha premium */

body:has(#formFechamentoTotal)
.card-fechamento::before {

    content: "";

    position:
        absolute;

    z-index:
        3;

    top:
        0;

    left:
        22px;

    right:
        22px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(200,155,67,.44),
            transparent
        );

}


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

body:has(#formFechamentoTotal)
.card-fechamento-header {

    padding:
        20px 21px;

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

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafbfd
        );

}


/* =========================================================
   H3
   ========================================================= */

body:has(#formFechamentoTotal)
.card-fechamento-header h3 {

    margin:
        0;

    color:
        var(--vl-core-text);

    font-size:
        18px;

    font-weight:
        850;

    letter-spacing:
        -.3px;

}


/* =========================================================
   P
   ========================================================= */

body:has(#formFechamentoTotal)
.card-fechamento-header p {

    margin:
        5px 0 0;

    color:
        var(--vl-core-text-muted);

    font-size:
        10px;

    line-height:
        1.5;

}


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

body:has(#formFechamentoTotal)
.card-fechamento-body {

    padding:
        20px 21px;

}


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

body:has(#formFechamentoTotal)
.resumo-conta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        17px;

    margin-bottom:
        18px;

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

    border-radius:
        13px;

    background:
        linear-gradient(
            135deg,
            #fafbfd,
            #ffffff
        );

}


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

body:has(#formFechamentoTotal)
.resumo-label {

    margin-bottom:
        4px;

    color:
        var(--vl-core-text-muted);

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;

}


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

body:has(#formFechamentoTotal)
.resumo-valor {

    color:
        var(--vl-core-midnight-soft);

    font-size:
        17px;

    font-weight:
        900;

}


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

body:has(#formFechamentoTotal)
.tabela-fechamento-wrapper {

    width:
        100%;

    overflow-x:
        auto;

    margin-top:
        15px;

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

    border-radius:
        13px;

    scrollbar-width:
        thin;

    scrollbar-color:
        #c7ced8 transparent;

}


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

body:has(#formFechamentoTotal)
.tabela-fechamento {

    width:
        100%;

    min-width:
        690px;

    margin:
        0;

    border-collapse:
        separate;

    border-spacing:
        0;

    background:
        #ffffff;

}


/* =========================================================
   THEAD
   ========================================================= */

body:has(#formFechamentoTotal)
.tabela-fechamento thead {

    background:
        var(--vl-core-table-head);

}


/* =========================================================
   TH
   ========================================================= */

body:has(#formFechamentoTotal)
.tabela-fechamento th {

    padding:
        13px;

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

    color:
        #738093;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;

    white-space:
        nowrap;

}


/* =========================================================
   TD
   ========================================================= */

body:has(#formFechamentoTotal)
.tabela-fechamento td {

    padding:
        14px 13px;

    border-bottom:
        1px solid
        #eef1f5;

    color:
        #455266;

    font-size:
        11px;

    vertical-align:
        middle;

}


/* =========================================================
   ROW HOVER
   ========================================================= */

body:has(#formFechamentoTotal)
.tabela-fechamento tbody tr:hover {

    background:
        var(--vl-core-table-row-hover);

}


/* =========================================================
   STATUS DOS ITENS
   ========================================================= */

body:has(#formFechamentoTotal)
.status-item-pagamento {

    width:
        29px;

    height:
        29px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid transparent;

    border-radius:
        50%;

    font-size:
        10px;

    font-weight:
        900;

}


/* pago */

body:has(#formFechamentoTotal)
.status-item-pago {

    border-color:
        #ccebd6;

    background:
        #f2fbf5;

    color:
        #15803d;

}


/* parcial */

body:has(#formFechamentoTotal)
.status-item-parcial {

    border-color:
        #efdba8;

    background:
        #fff9ec;

    color:
        #98610c;

}


/* pendente */

body:has(#formFechamentoTotal)
.status-item-pendente {

    border-color:
        #f2cdd2;

    background:
        #fff4f5;

    color:
        #c53443;

}


/* =========================================================
   OPÇÕES DE PAGAMENTO
   ========================================================= */

body:has(#formFechamentoTotal)
.pagamento-opcoes {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

}


/* =========================================================
   ITEM DE PAGAMENTO
   ========================================================= */

body:has(#formFechamentoTotal)
.pagamento-item {

    position:
        relative;

}


/* =========================================================
   RADIO NATIVO
   ========================================================= */

body:has(#formFechamentoTotal)
.pagamento-item
> input {

    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;

}


/* =========================================================
   LABEL PAGAMENTO
   ========================================================= */

body:has(#formFechamentoTotal)
.pagamento-label {

    position:
        relative;

    min-height:
        64px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        11px 13px;

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

    border-radius:
        11px;

    background:
        #ffffff;

    cursor:
        pointer;

    transition:
        transform var(--vl-core-transition),
        border-color var(--vl-core-transition),
        background var(--vl-core-transition),
        box-shadow var(--vl-core-transition);

}


/* =========================================================
   HOVER
   ========================================================= */

body:has(#formFechamentoTotal)
.pagamento-label:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(200,155,67,.28);

    background:
        #fffdf8;

    box-shadow:
        0 7px 17px
        rgba(7,17,31,.05);

}


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

body:has(#formFechamentoTotal)
.pagamento-item
> input:checked
+ .pagamento-label {

    border-color:
        rgba(200,155,67,.38);

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #ffffff
        );

    box-shadow:
        0 0 0 3px
        rgba(200,155,67,.055);

}


/* =========================================================
   INDICADOR LATERAL DA SELEÇÃO
   ========================================================= */

body:has(#formFechamentoTotal)
.pagamento-label::after {

    content: "";

    width:
        18px;

    height:
        18px;

    flex:
        0 0 18px;

    margin-left:
        auto;

    box-sizing:
        border-box;

    border:
        1.5px solid
        #cbd3dd;

    border-radius:
        50%;

    background:
        #ffffff;

}


/* marcado */

body:has(#formFechamentoTotal)
.pagamento-item
> input:checked
+ .pagamento-label::after {

    border-color:
        var(--vl-core-gold);

    background:
        radial-gradient(
            circle,
            var(--vl-core-gold)
            0 4px,
            #ffffff
            4.5px
        );

    box-shadow:
        0 0 0 3px
        rgba(200,155,67,.08);

}


/* =========================================================
   ÍCONES
   MESMOS DA BAIXA PARCIAL
   ========================================================= */

body:has(#formFechamentoTotal)
.icone-pagamento {

    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    box-sizing:
        border-box;

    border:
        1px solid
        rgba(200,155,67,.16);

    border-radius:
        10px;

    background:
        #fff9ed;

    color:
        transparent;

    font-size:
        0;

    line-height:
        1;

}


/* =========================================================
   BASE DOS ÍCONES
   ========================================================= */

body:has(#formFechamentoTotal)
.icone-pagamento::before {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #8d671f;

    font-size:
        16px;

    line-height:
        1;

}


/* =========================================================
   DINHEIRO → MESMO DA BAIXA PARCIAL
   ========================================================= */

body:has(#formFechamentoTotal)
#pagamento-dinheiro
+ .pagamento-label
.icone-pagamento::before {

    content:
        "💵";

}


/* =========================================================
   PIX → MESMO DA BAIXA PARCIAL
   ========================================================= */

body:has(#formFechamentoTotal)
#pagamento-pix
+ .pagamento-label
.icone-pagamento::before {

    content:
        "▣";

    color:
        #8d671f;

    font-size:
        18px;

    font-weight:
        900;

}


/* =========================================================
   DÉBITO → MESMO DA BAIXA PARCIAL
   ========================================================= */

body:has(#formFechamentoTotal)
#pagamento-debito
+ .pagamento-label
.icone-pagamento::before {

    content:
        "💳";

}


/* =========================================================
   CRÉDITO → MESMO DA BAIXA PARCIAL
   ========================================================= */

body:has(#formFechamentoTotal)
#pagamento-credito
+ .pagamento-label
.icone-pagamento::before {

    content:
        "💳";

}


/* =========================================================
   TEXTO
   ========================================================= */

body:has(#formFechamentoTotal)
.pagamento-texto {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


/* =========================================================
   NOME
   ========================================================= */

body:has(#formFechamentoTotal)
.pagamento-nome {

    color:
        var(--vl-core-text);

    font-size:
        11px;

    font-weight:
        850;

}


/* =========================================================
   DESCRIÇÃO
   ========================================================= */

body:has(#formFechamentoTotal)
.pagamento-descricao {

    color:
        var(--vl-core-text-muted);

    font-size:
        9px;

}


/* =========================================================
   DINHEIRO
   NÃO ALTERAR DISPLAY
   JS CONTINUA RESPONSÁVEL POR MOSTRAR/ESCONDER
   ========================================================= */

body:has(#formFechamentoTotal)
.container-dinheiro {

    margin-top:
        10px;

    padding:
        15px;

    border:
        1px solid
        #eadbb9;

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #ffffff
        );

}


/* =========================================================
   LABEL DINHEIRO
   ========================================================= */

body:has(#formFechamentoTotal)
.dinheiro-label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--vl-core-text-secondary);

    font-size:
        9px;

    font-weight:
        850;

}


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

body:has(#formFechamentoTotal)
.container-dinheiro
.form-control {

    width:
        100%;

    min-height:
        43px;

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

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        var(--vl-core-text);

    font-size:
        11px;

    font-weight:
        750;

}


/* =========================================================
   FOCUS
   ========================================================= */

body:has(#formFechamentoTotal)
.container-dinheiro
.form-control:focus {

    border-color:
        var(--vl-core-gold);

    box-shadow:
        0 0 0 3px
        rgba(200,155,67,.10);

}


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

body:has(#formFechamentoTotal)
.troco-box {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    margin-top:
        11px;

    padding:
        11px 12px;

    border:
        1px solid
        #ccebd6;

    border-radius:
        9px;

    background:
        #f2fbf5;

}


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

body:has(#formFechamentoTotal)
.troco-box strong {

    color:
        #3f7654;

    font-size:
        9px;

    font-weight:
        850;

    text-transform:
        uppercase;

}


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

body:has(#formFechamentoTotal)
.troco-box span {

    color:
        #15803d;

    font-size:
        14px;

    font-weight:
        900;

}


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

body:has(#formFechamentoTotal)
.pagamento-total-final {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-top:
        18px;

    padding:
        16px 17px;

    border:
        1px solid
        rgba(200,155,67,.23);

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #fffdf8
        );

}


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

body:has(#formFechamentoTotal)
.pagamento-total-final span {

    color:
        var(--vl-core-text-secondary);

    font-size:
        10px;

    font-weight:
        800;

}


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

body:has(#formFechamentoTotal)
.pagamento-total-final strong {

    color:
        #8d671f;

    font-size:
        22px;

    font-weight:
        900;

    white-space:
        nowrap;

}


/* =========================================================
   BOTÃO FINAL
   ========================================================= */

body:has(#formFechamentoTotal)
.btn-concluir-fechamento {

    width:
        100%;

    min-height:
        47px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        17px;

    border:
        1px solid
        rgba(223,186,112,.25);

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            var(--vl-core-midnight),
            var(--vl-core-navy)
        );

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        850;

    cursor:
        pointer;

    box-shadow:
        0 9px 20px
        rgba(7,17,31,.17);

    transition:
        transform var(--vl-core-transition),
        border-color var(--vl-core-transition),
        box-shadow var(--vl-core-transition);

}


/* =========================================================
   BOTÃO HOVER
   ========================================================= */

body:has(#formFechamentoTotal)
.btn-concluir-fechamento:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(223,186,112,.48);

    box-shadow:
        0 13px 27px
        rgba(7,17,31,.22);

}


/* =========================================================
   AVISO
   ========================================================= */

body:has(#formFechamentoTotal)
.aviso-fechamento {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin-top:
        15px;

    padding:
        12px 13px;

    border:
        1px solid
        #eadbb9;

    border-radius:
        10px;

    background:
        #fffbf2;

    color:
        #805b19;

    font-size:
        9px;

    line-height:
        1.5;

}


/* =========================================================
   ÍCONE AVISO
   ========================================================= */

body:has(#formFechamentoTotal)
.aviso-icone {

    width:
        22px;

    height:
        22px;

    flex:
        0 0 22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #fff0c8;

    color:
        #98610c;

    font-size:
        9px;

    font-weight:
        900;

}


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

@media (max-width: 1050px) {

    body:has(#formFechamentoTotal)
    .fechamento-grid {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 800px) {

    body:has(#formFechamentoTotal)
    .fechamento-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            28px 25px;

    }


    body:has(#formFechamentoTotal)
    .btn-voltar-fechamento {

        width:
            100%;

    }

}


@media (max-width: 650px) {

    body:has(#formFechamentoTotal)
    .container {

        padding-top:
            23px;

    }


    body:has(#formFechamentoTotal)
    .fechamento-header {

        padding:
            25px 21px;

        border-radius:
            19px;

    }


    body:has(#formFechamentoTotal)
    .card-fechamento-header,

    body:has(#formFechamentoTotal)
    .card-fechamento-body {

        padding:
            18px;

    }


    body:has(#formFechamentoTotal)
    .resumo-conta {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    body:has(#formFechamentoTotal)
    .pagamento-total-final {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            6px;

    }

}


@media (max-width: 430px) {

    body:has(#formFechamentoTotal)
    .container {

        padding-top:
            17px;

    }


    body:has(#formFechamentoTotal)
    .fechamento-header {

        padding:
            23px 18px;

        border-radius:
            16px;

    }


    body:has(#formFechamentoTotal)
    .icone-fechamento {

        width:
            43px;

        height:
            43px;

        flex-basis:
            43px;

    }


    body:has(#formFechamentoTotal)
    .fechamento-titulo-area h2 {

        font-size:
            23px;

    }


    body:has(#formFechamentoTotal)
    .pagamento-label {

        min-height:
            60px;

        padding:
            10px 11px;

    }


    body:has(#formFechamentoTotal)
    .icone-pagamento {

        width:
            35px;

        height:
            35px;

        flex-basis:
            35px;

    }


    body:has(#formFechamentoTotal)
    .tabela-fechamento {

        min-width:
            650px;

    }

}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

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

    body:has(#formFechamentoTotal) *,
    body:has(#formFechamentoTotal) *::before,
    body:has(#formFechamentoTotal) *::after {

        animation:
            none !important;

        transition-duration:
            .01ms !important;

    }

}

/* VALORIUM_LUXE_BAIXA_TOTAL_FINAL_END */

/* VALORIUM_LUXE_EMITIR_NF_FINAL_START */

/* =========================================================
   VALORIUM SISTEMAS
   EMITIR NF / NFC-e
   LUXE FINAL

   Apenas apresentação.
   Nenhuma regra Fiscal, NFC-e ou SEFAZ.
   ========================================================= */


/* =========================================================
   PÁGINA
   ========================================================= */

.emitir-nf-page {

    width:
        100%;

    max-width:
        980px;

    margin-left:
        auto;

    margin-right:
        auto;

    padding-top:
        34px;

    padding-bottom:
        60px;

}


/* =========================================================
   HEADER
   ========================================================= */

.emitir-nf-page
.emitir-nf-page-header {

    position:
        relative;

    isolation:
        isolate;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    margin:
        0 0 25px;

    padding:
        34px 38px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(223,186,112,.15);

    border-radius:
        var(--vl-core-radius-header);

    background:
        var(--vl-core-header-bg);

    box-shadow:
        var(--vl-core-shadow-header);

}


/* =========================================================
   GLOW AZUL
   ========================================================= */

.emitir-nf-page
.emitir-nf-page-header::before {

    content: "";

    position:
        absolute;

    z-index:
        -1;

    width:
        430px;

    height:
        430px;

    top:
        -255px;

    right:
        -125px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.27) 0%,
            rgba(59,130,246,.08) 45%,
            transparent 72%
        );

    pointer-events:
        none;

}


/* =========================================================
   LINHA DOURADA
   ========================================================= */

.emitir-nf-page
.emitir-nf-page-header::after {

    content: "";

    position:
        absolute;

    z-index:
        -1;

    left:
        0;

    right:
        0;

    bottom:
        0;

    width:
        auto;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(223,186,112,.78),
            transparent
        );

}


/* =========================================================
   BRAND
   ========================================================= */

.emitir-nf-page-header
.page-brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin:
        0 0 10px;

    color:
        var(--vl-core-gold-light);

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        1.25px;

    text-transform:
        uppercase;

}


/* =========================================================
   SUBSTITUIR VISUALMENTE O UTENSILS
   POR DOCUMENTO FISCAL

   HTML permanece intacto.
   ========================================================= */

.emitir-nf-page-header
.page-brand
> .fa-utensils {

    position:
        relative;

    width:
        14px;

    height:
        16px;

    flex:
        0 0 14px;

    display:
        inline-block;

    overflow:
        visible;

    color:
        transparent;

    font-size:
        0;

}


/* corpo do documento */

.emitir-nf-page-header
.page-brand
> .fa-utensils::before {

    content: "";

    position:
        absolute;

    inset:
        0;

    box-sizing:
        border-box;

    border:
        1.3px solid
        var(--vl-core-gold-light);

    border-radius:
        2px;

    background:
        linear-gradient(
            var(--vl-core-gold-light),
            var(--vl-core-gold-light)
        )
        3px 5px /
        7px 1px
        no-repeat,

        linear-gradient(
            var(--vl-core-gold-light),
            var(--vl-core-gold-light)
        )
        3px 8px /
        7px 1px
        no-repeat,

        linear-gradient(
            var(--vl-core-gold-light),
            var(--vl-core-gold-light)
        )
        3px 11px /
        5px 1px
        no-repeat;

}


/* dobra do documento */

.emitir-nf-page-header
.page-brand
> .fa-utensils::after {

    content: "";

    position:
        absolute;

    top:
        -1px;

    right:
        -1px;

    width:
        5px;

    height:
        5px;

    border-left:
        1px solid
        var(--vl-core-gold-light);

    border-bottom:
        1px solid
        var(--vl-core-gold-light);

    background:
        #10243c;

}


/* =========================================================
   TÍTULO DO HEADER
   ========================================================= */

.emitir-nf-page-header h2 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            27px,
            3vw,
            35px
        );

    font-weight:
        800;

    line-height:
        1.12;

    letter-spacing:
        -.85px;

}


/* =========================================================
   HEADER ACTION
   ========================================================= */

.emitir-nf-header-actions {

    position:
        relative;

    z-index:
        3;

    flex:
        0 0 auto;

}


/* =========================================================
   VOLTAR
   ========================================================= */

.emitir-nf-header-actions
.nav-voltar {

    min-height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0 14px;

    border:
        1px solid
        var(--vl-core-nav-border);

    border-radius:
        var(--vl-core-radius-sm);

    background:
        var(--vl-core-nav-bg);

    color:
        rgba(226,232,240,.90);

    font-size:
        11px;

    font-weight:
        750;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

}


.emitir-nf-header-actions
.nav-voltar:hover {

    transform:
        translateY(-1px);

    border-color:
        var(--vl-core-nav-border-hover);

    background:
        var(--vl-core-nav-bg-hover);

    color:
        #ffffff;

}


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

.emitir-nf-page
.emitir-nf-card {

    position:
        relative;

    overflow:
        hidden;

    padding:
        27px;

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

    border-radius:
        19px;

    background:
        #ffffff;

    box-shadow:
        var(--vl-core-shadow-card);

}


/* linha dourada */

.emitir-nf-page
.emitir-nf-card::before {

    content: "";

    position:
        absolute;

    top:
        0;

    left:
        24px;

    right:
        24px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(200,155,67,.48),
            transparent
        );

}


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

.emitir-nf-card-header {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        22px;

}


/* =========================================================
   ÍCONE CARD
   ========================================================= */

.emitir-nf-icon {

    width:
        48px;

    height:
        48px;

    flex:
        0 0 48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(200,155,67,.19);

    border-radius:
        13px;

    background:
        linear-gradient(
            135deg,
            #fff9ed,
            #fffdf8
        );

    color:
        var(--vl-core-gold);

    font-size:
        18px;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.9);

}


/* =========================================================
   TÍTULO CARD
   ========================================================= */

.emitir-nf-card-header h3 {

    margin:
        0 0 5px;

    color:
        var(--vl-core-text);

    font-size:
        19px;

    font-weight:
        850;

    letter-spacing:
        -.35px;

}


/* =========================================================
   DESCRIÇÃO CARD
   ========================================================= */

.emitir-nf-card-header p {

    margin:
        0;

    color:
        var(--vl-core-text-muted);

    font-size:
        11px;

    line-height:
        1.55;

}


/* =========================================================
   COMANDA
   ========================================================= */

.emitir-nf-comanda {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        15px 16px;

    border:
        1px solid
        rgba(200,155,67,.18);

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #ffffff
        );

}


/* =========================================================
   ÍCONE COMANDA
   ========================================================= */

.emitir-nf-comanda-icon {

    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(200,155,67,.18);

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        #8d671f;

    font-size:
        14px;

}


/* =========================================================
   COMANDA LABEL
   ========================================================= */

.emitir-nf-comanda span {

    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--vl-core-text-muted);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .04em;

    text-transform:
        uppercase;

}


/* =========================================================
   COMANDA VALOR
   ========================================================= */

.emitir-nf-comanda strong {

    display:
        block;

    color:
        var(--vl-core-midnight-soft);

    font-size:
        16px;

    font-weight:
        900;

}


/* =========================================================
   RESUMO INLINE EXISTENTE

   O HTML atual possui este grid através
   de style="" inline.

   Apenas o visual é sobrescrito.
   ========================================================= */

.emitir-nf-page
div[style*="grid-template-columns:repeat(3,1fr)"] {

    gap:
        12px !important;

    margin-top:
        16px !important;

}


/* cards internos */

.emitir-nf-page
div[style*="grid-template-columns:repeat(3,1fr)"]
> div {

    position:
        relative;

    overflow:
        hidden;

    padding:
        15px !important;

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

    border-radius:
        13px !important;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafbfd
        ) !important;

    box-shadow:
        0 4px 12px
        rgba(7,17,31,.035);

}


/* linha premium */

.emitir-nf-page
div[style*="grid-template-columns:repeat(3,1fr)"]
> div::before {

    content: "";

    position:
        absolute;

    top:
        0;

    left:
        14px;

    right:
        14px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(200,155,67,.36),
            transparent
        );

}


/* labels */

.emitir-nf-page
div[style*="grid-template-columns:repeat(3,1fr)"]
> div
> span {

    color:
        var(--vl-core-text-muted) !important;

    font-size:
        9px !important;

    font-weight:
        850;

    letter-spacing:
        .055em;

    text-transform:
        uppercase;

}


/* valor interno */

.emitir-nf-page
div[style*="grid-template-columns:repeat(3,1fr)"]
> div
> strong {

    color:
        var(--vl-core-midnight-soft);

    font-size:
        17px;

    font-weight:
        900;

}


/* =========================================================
   DIVISOR
   ========================================================= */

.emitir-nf-divider {

    height:
        1px;

    margin:
        25px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--vl-core-border),
            transparent
        );

}


/* =========================================================
   FORM
   ========================================================= */

.emitir-nf-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        22px;

}


/* =========================================================
   FIELD
   ========================================================= */

.emitir-nf-field {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


/* =========================================================
   LABEL
   ========================================================= */

.emitir-nf-field label {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--vl-core-text-secondary);

    font-size:
        10px;

    font-weight:
        850;

}


/* =========================================================
   LABEL ICON
   ========================================================= */

.emitir-nf-field label i {

    color:
        var(--vl-core-gold);

    font-size:
        11px;

}


/* =========================================================
   SELECT
   ========================================================= */

.emitir-nf-field select {

    width:
        100%;

    min-height:
        45px;

    padding:
        0 13px;

    box-sizing:
        border-box;

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

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        var(--vl-core-text);

    font-size:
        11px;

    font-weight:
        650;

    outline:
        none;

    cursor:
        pointer;

    transition:
        border-color var(--vl-core-transition),
        box-shadow var(--vl-core-transition);

}


/* =========================================================
   SELECT FOCUS
   ========================================================= */

.emitir-nf-field select:focus {

    border-color:
        var(--vl-core-gold);

    box-shadow:
        0 0 0 3px
        rgba(200,155,67,.10);

}


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

.emitir-nf-help {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    color:
        var(--vl-core-text-muted);

    font-size:
        9px;

    line-height:
        1.5;

}


.emitir-nf-help i {

    color:
        var(--vl-core-gold);

}


/* =========================================================
   BLOCO DE EMISSÃO
   ========================================================= */

.emitir-nf-emissao-box {

    padding:
        19px;

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

    border-radius:
        15px;

    background:
        linear-gradient(
            180deg,
            #fafbfd,
            #ffffff
        );

}


/* =========================================================
   HEADER EMISSÃO
   ========================================================= */

.emitir-nf-emissao-header {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    margin-bottom:
        17px;

}


/* =========================================================
   ÍCONE EMISSÃO
   ========================================================= */

.emitir-nf-emissao-icon {

    width:
        40px;

    height:
        40px;

    flex:
        0 0 40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(200,155,67,.19);

    border-radius:
        11px;

    background:
        #fff9ed;

    color:
        #8d671f;

    font-size:
        14px;

}


/* =========================================================
   HEADER EMISSÃO TEXTO
   ========================================================= */

.emitir-nf-emissao-header strong {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--vl-core-text);

    font-size:
        13px;

    font-weight:
        850;

}


.emitir-nf-emissao-header span {

    display:
        block;

    color:
        var(--vl-core-text-muted);

    font-size:
        10px;

    line-height:
        1.55;

}


/* =========================================================
   OPÇÕES
   ========================================================= */

.emitir-nf-option {

    position:
        relative;

    min-height:
        66px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        9px;

    padding:
        12px 14px;

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

    border-radius:
        12px;

    background:
        #ffffff;

    color:
        var(--vl-core-text-secondary);

    cursor:
        pointer;

    transition:
        transform var(--vl-core-transition),
        border-color var(--vl-core-transition),
        background var(--vl-core-transition),
        box-shadow var(--vl-core-transition);

}


/* =========================================================
   HOVER OPÇÃO
   ========================================================= */

.emitir-nf-option:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(200,155,67,.28);

    background:
        #fffdf8;

    box-shadow:
        0 7px 17px
        rgba(7,17,31,.045);

}


/* =========================================================
   RADIO
   ========================================================= */

.emitir-nf-option
input[type="radio"] {

    width:
        18px;

    height:
        18px;

    flex:
        0 0 18px;

    accent-color:
        var(--vl-core-gold);

    cursor:
        pointer;

}


/* =========================================================
   ÍCONES OPÇÕES
   ========================================================= */

.emitir-nf-option
i {

    width:
        35px;

    height:
        35px;

    flex:
        0 0 35px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #e4e8ee;

    border-radius:
        10px;

    background:
        #f8fafc;

    color:
        #69768a;

}


/* =========================================================
   OPÇÃO SELECIONADA - BASE
   ========================================================= */

.emitir-nf-option:has(
    input[type="radio"]:checked
) {

    border-color:
        rgba(200,155,67,.38);

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #ffffff
        );

    box-shadow:
        0 0 0 3px
        rgba(200,155,67,.055);

}


/* =========================================================
   SEM NOTA
   ========================================================= */

.emitir-nf-option:has(
    #tipo_sem_nota
)
i {

    border-color:
        #e0e5eb;

    background:
        #f7f8fa;

    color:
        #667386;

}


/* selecionado */

.emitir-nf-option:has(
    #tipo_sem_nota:checked
) {

    border-color:
        #cfd6de;

    background:
        linear-gradient(
            135deg,
            #f7f8fa,
            #ffffff
        );

}


/* =========================================================
   NFC-e NORMAL
   ========================================================= */

.emitir-nf-option:has(
    #tipo_normal
)
i {

    border-color:
        #ccebd6;

    background:
        #f2fbf5;

    color:
        #15803d;

}


/* selecionado */

.emitir-nf-option:has(
    #tipo_normal:checked
) {

    border-color:
        #b9e0c6;

    background:
        linear-gradient(
            135deg,
            #f2fbf5,
            #ffffff
        );

    box-shadow:
        0 0 0 3px
        rgba(21,128,61,.055);

}


/* =========================================================
   CONTINGÊNCIA
   ========================================================= */

.emitir-nf-option:has(
    #tipo_contingencia
)
i {

    border-color:
        #efdba8;

    background:
        #fff9ec;

    color:
        #98610c;

}


/* selecionado */

.emitir-nf-option:has(
    #tipo_contingencia:checked
) {

    border-color:
        #e9cf8b;

    background:
        linear-gradient(
            135deg,
            #fff9ec,
            #ffffff
        );

    box-shadow:
        0 0 0 3px
        rgba(152,97,12,.055);

}


/* =========================================================
   CONTINGÊNCIA / JUSTIFICATIVA

   IMPORTANTE:
   não definimos display.
   JavaScript continua controlando block/none.
   ========================================================= */

.emitir-nf-contingencia {

    margin-top:
        15px;

    padding:
        16px;

    border:
        1px solid
        #ead7a7;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #ffffff
        );

}


/* =========================================================
   TEXTAREA CONTINGÊNCIA
   ========================================================= */

.emitir-nf-contingencia
textarea {

    width:
        100%;

    min-height:
        105px;

    padding:
        12px 13px;

    box-sizing:
        border-box;

    resize:
        vertical;

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

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        var(--vl-core-text);

    font-family:
        inherit;

    font-size:
        11px;

    line-height:
        1.5;

    outline:
        none;

}


/* =========================================================
   TEXTAREA FOCUS
   ========================================================= */

.emitir-nf-contingencia
textarea:focus {

    border-color:
        #c89b43;

    box-shadow:
        0 0 0 3px
        rgba(200,155,67,.10);

}


/* =========================================================
   HELP EMISSÃO
   ========================================================= */

.emitir-nf-emissao-help {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        7px;

    margin-top:
        13px;

    padding:
        11px 12px;

    border:
        1px solid
        #e6eaf0;

    border-radius:
        10px;

    background:
        #fafbfd;

    color:
        var(--vl-core-text-muted);

    font-size:
        9px;

    line-height:
        1.55;

}


/* =========================================================
   ÍCONE HELP
   ========================================================= */

.emitir-nf-emissao-help i {

    margin-top:
        2px;

    color:
        var(--vl-core-gold);

}


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

.emitir-nf-actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;

    padding-top:
        21px;

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

}


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

.emitir-nf-btn {

    min-height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0 17px;

    border-radius:
        10px;

    font-size:
        10px;

    font-weight:
        850;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        transform var(--vl-core-transition),
        border-color var(--vl-core-transition),
        background var(--vl-core-transition),
        box-shadow var(--vl-core-transition),
        color var(--vl-core-transition);

}


/* =========================================================
   SECUNDÁRIO
   ========================================================= */

.emitir-nf-btn-secondary {

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

    background:
        #ffffff;

    color:
        var(--vl-core-text-secondary);

}


.emitir-nf-btn-secondary:hover {

    transform:
        translateY(-1px);

    border-color:
        #cbd2dc;

    background:
        #f8fafc;

    color:
        var(--vl-core-text);

}


/* =========================================================
   PRIMÁRIO
   ========================================================= */

.emitir-nf-btn-primary {

    border:
        1px solid
        rgba(223,186,112,.25);

    background:
        linear-gradient(
            135deg,
            var(--vl-core-midnight),
            var(--vl-core-navy)
        );

    color:
        #ffffff;

    box-shadow:
        0 9px 20px
        rgba(7,17,31,.17);

}


/* =========================================================
   PRIMÁRIO HOVER
   ========================================================= */

.emitir-nf-btn-primary:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(223,186,112,.48);

    background:
        linear-gradient(
            135deg,
            var(--vl-core-midnight),
            #16365b
        );

    color:
        #ffffff;

    box-shadow:
        0 13px 27px
        rgba(7,17,31,.22);

}


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

@media (max-width: 768px) {

    .emitir-nf-page {

        max-width:
            100%;

        padding-top:
            23px;

    }


    .emitir-nf-page
    .emitir-nf-page-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            28px 25px;

    }


    .emitir-nf-header-actions {

        width:
            100%;

    }


    .emitir-nf-header-actions
    .nav-voltar {

        width:
            100%;

    }


    .emitir-nf-page
    div[style*="grid-template-columns:repeat(3,1fr)"] {

        grid-template-columns:
            1fr !important;

    }

}


@media (max-width: 520px) {

    .emitir-nf-page {

        padding-top:
            17px;

        padding-bottom:
            40px;

    }


    .emitir-nf-page
    .emitir-nf-page-header {

        padding:
            23px 18px;

        border-radius:
            16px;

    }


    .emitir-nf-page-header h2 {

        font-size:
            24px;

    }


    .emitir-nf-page
    .emitir-nf-card {

        padding:
            18px;

        border-radius:
            16px;

    }


    .emitir-nf-card-header {

        align-items:
            flex-start;

    }


    .emitir-nf-icon {

        width:
            43px;

        height:
            43px;

        flex-basis:
            43px;

    }


    .emitir-nf-emissao-box {

        padding:
            15px;

    }


    .emitir-nf-option {

        min-height:
            61px;

        padding:
            10px 11px;

    }


    .emitir-nf-actions {

        align-items:
            stretch;

        flex-direction:
            column-reverse;

    }


    .emitir-nf-btn {

        width:
            100%;

    }

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */

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

    .emitir-nf-page *,
    .emitir-nf-page *::before,
    .emitir-nf-page *::after {

        animation:
            none !important;

        transition-duration:
            .01ms !important;

    }

}

/* VALORIUM_LUXE_EMITIR_NF_FINAL_END */

/* VALORIUM_LUXE_CONFIGURAR_CLIENTE_FINAL_START */

/* =========================================================
   VALORIUM SISTEMAS
   CONFIGURAÇÃO DO CLIENTE
   LUXE FINAL

   Identidade:
   VALORIUM DESIGN CORE V3

   Somente camada de apresentação.
   ========================================================= */


/* =========================================================
   PÁGINA
   ========================================================= */

.client-config-page {

    padding-bottom:
        60px;

}


/* =========================================================
   HEADER
   ========================================================= */

.client-config-page
.client-config-standard-header {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    margin:
        34px 0 25px;

    border:
        1px solid
        rgba(223,186,112,.15) !important;

    border-radius:
        var(--vl-core-radius-header) !important;

    background:
        var(--vl-core-header-bg) !important;

    box-shadow:
        var(--vl-core-shadow-header) !important;

    animation:
        none !important;

}


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

.client-config-page
.client-config-standard-content {

    position:
        relative;

    z-index:
        2;

    min-height:
        0 !important;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        34px 38px !important;

}


/* =========================================================
   HEADER INFO
   ========================================================= */

.client-config-page
.client-config-standard-info {

    position:
        relative;

    z-index:
        2;

    min-width:
        0;

    max-width:
        780px;

}


/* =========================================================
   GLOW
   ========================================================= */

.client-config-page
.client-config-standard-header::before {

    content: "";

    position:
        absolute;

    z-index:
        -1;

    width:
        430px;

    height:
        430px;

    top:
        -255px;

    right:
        -125px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.27) 0%,
            rgba(59,130,246,.08) 45%,
            transparent 72%
        ) !important;

    filter:
        none !important;

    pointer-events:
        none;

}


/* =========================================================
   LINHA DOURADA
   ========================================================= */

.client-config-page
.client-config-standard-header::after {

    content: "";

    position:
        absolute;

    z-index:
        -1;

    left:
        0;

    right:
        0;

    bottom:
        0;

    width:
        auto;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(223,186,112,.78),
            transparent
        ) !important;

    opacity:
        1;

}


/* =========================================================
   BRAND
   ========================================================= */

.client-config-page
.client-config-standard-info
.page-brand {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin:
        0 0 11px;

    color:
        var(--vl-core-gold-light) !important;

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        1.25px;

    text-transform:
        uppercase;

}


/* =========================================================
   ÍCONE EXCLUSIVO DE CONFIGURAÇÃO

   Mantém eventual FontAwesome real oculto
   e desenha engrenagem visual através do CSS.
   ========================================================= */

.client-config-page
.client-config-standard-info
.page-brand
> i {

    width:
        15px;

    height:
        15px;

    flex:
        0 0 15px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--vl-core-gold-light) !important;

    font-size:
        12px;

}


/* caso não haja ícone no HTML */

.client-config-page
.client-config-standard-info
.page-brand:not(:has(> i))::before {

    content:
        "⚙";

    width:
        15px;

    height:
        15px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--vl-core-gold-light);

    font-size:
        12px;

    line-height:
        1;

}


/* =========================================================
   TÍTULO
   ========================================================= */

.client-config-page
.client-config-standard-info
h1,

.client-config-page
.client-config-standard-info
h2 {

    margin:
        0 !important;

    color:
        #ffffff !important;

    font-size:
        clamp(
            27px,
            3vw,
            35px
        ) !important;

    font-weight:
        800 !important;

    line-height:
        1.12;

    letter-spacing:
        -.85px !important;

}


/* =========================================================
   SUBTÍTULO
   ========================================================= */

.client-config-page
.client-config-standard-info
p {

    max-width:
        700px;

    margin:
        8px 0 0 !important;

    color:
        rgba(226,232,240,.74) !important;

    font-size:
        12px !important;

    line-height:
        1.65;

}


/* =========================================================
   BOTÃO VOLTAR
   ========================================================= */

.client-config-page
.client-config-header-back {

    position:
        relative;

    z-index:
        3;

    min-height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0 14px;

    border:
        1px solid
        var(--vl-core-nav-border) !important;

    border-radius:
        var(--vl-core-radius-sm) !important;

    background:
        var(--vl-core-nav-bg) !important;

    color:
        rgba(226,232,240,.90) !important;

    font-size:
        11px;

    font-weight:
        750;

    text-decoration:
        none;

    box-shadow:
        none !important;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

}


.client-config-page
.client-config-header-back:hover {

    transform:
        translateY(-1px);

    border-color:
        var(--vl-core-nav-border-hover) !important;

    background:
        var(--vl-core-nav-bg-hover) !important;

    color:
        #ffffff !important;

}


/* =========================================================
   MASTER BANNER
   ========================================================= */

.client-config-page
.master-banner {

    position:
        relative;

    isolation:
        isolate;

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    margin:
        0 0 22px !important;

    padding:
        18px 20px !important;

    overflow:
        hidden;

    border:
        1px solid
        rgba(223,186,112,.13) !important;

    border-radius:
        15px !important;

    background:
        linear-gradient(
            135deg,
            var(--vl-core-midnight),
            var(--vl-core-navy)
        ) !important;

    box-shadow:
        0 12px 28px
        rgba(7,17,31,.13) !important;

}


/* =========================================================
   MASTER GLOW
   ========================================================= */

.client-config-page
.master-banner::before {

    content: "";

    position:
        absolute;

    z-index:
        -1;

    width:
        220px;

    height:
        220px;

    top:
        -135px;

    right:
        -60px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.20),
            transparent 70%
        ) !important;

}


/* =========================================================
   MASTER ICON
   ========================================================= */

.client-config-page
.master-banner
> i {

    width:
        43px !important;

    height:
        43px !important;

    flex:
        0 0 43px !important;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(223,186,112,.18) !important;

    border-radius:
        11px;

    background:
        rgba(255,255,255,.06) !important;

    color:
        var(--vl-core-gold-light) !important;

    font-size:
        15px;

}


/* =========================================================
   MASTER TEXT
   ========================================================= */

.client-config-page
.master-banner
strong {

    color:
        #ffffff !important;

    font-weight:
        850;

}


.client-config-page
.master-banner
span,

.client-config-page
.master-banner
p {

    color:
        rgba(226,232,240,.68) !important;

}


/* =========================================================
   GRID PRINCIPAL
   ========================================================= */

.client-config-page
.config-grid {

    display:
        grid;

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

    gap:
        18px !important;

    margin-top:
        0 !important;

}


/* =========================================================
   CARDS PRINCIPAIS
   ========================================================= */

.client-config-page
.config-card {

    position:
        relative;

    min-height:
        275px !important;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    padding:
        24px !important;

    border:
        1px solid
        var(--vl-core-border) !important;

    border-radius:
        18px !important;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fdfefe
        ) !important;

    box-shadow:
        var(--vl-core-shadow-card) !important;

    isolation:
        isolate;

    transition:
        transform var(--vl-core-transition),
        border-color var(--vl-core-transition),
        box-shadow var(--vl-core-transition);

}


/* =========================================================
   LINHA PREMIUM
   ========================================================= */

.client-config-page
.config-card::before {

    content: "" !important;

    position:
        absolute;

    z-index:
        2;

    top:
        0;

    left:
        20px !important;

    right:
        20px !important;

    width:
        auto !important;

    height:
        1px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(200,155,67,.48),
            transparent
        ) !important;

    opacity:
        1 !important;

}


/* =========================================================
   REMOVER GLOW ROXO ANTIGO
   ========================================================= */

.client-config-page
.config-card::after {

    content:
        none !important;

}


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

.client-config-page
.config-card:hover {

    transform:
        translateY(-3px) !important;

    border-color:
        rgba(200,155,67,.25) !important;

    box-shadow:
        var(--vl-core-shadow-card-hover) !important;

}


/* =========================================================
   ÍCONE CARD
   ========================================================= */

.client-config-page
.config-card-icon {

    width:
        48px !important;

    height:
        48px !important;

    flex:
        0 0 48px !important;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        18px !important;

    border:
        1px solid
        rgba(200,155,67,.18) !important;

    border-radius:
        13px !important;

    background:
        linear-gradient(
            135deg,
            #fff9ed,
            #fffdf8
        ) !important;

    color:
        var(--vl-core-gold) !important;

    font-size:
        17px !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.9) !important;

}


/* =========================================================
   NÃO ALTERAR ÍCONE AO HOVER
   ========================================================= */

.client-config-page
.config-card:hover
.config-card-icon {

    transform:
        none !important;

    background:
        linear-gradient(
            135deg,
            #fff9ed,
            #fffdf8
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.9) !important;

}


/* =========================================================
   TÍTULOS CARD
   ========================================================= */

.client-config-page
.config-card
h2,

.client-config-page
.config-card
h3 {

    margin:
        0 0 9px !important;

    color:
        var(--vl-core-text) !important;

    font-size:
        18px !important;

    font-weight:
        850 !important;

    letter-spacing:
        -.3px !important;

}


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

.client-config-page
.config-card
p {

    margin:
        4px 0 !important;

    color:
        var(--vl-core-text-secondary) !important;

    font-size:
        11px !important;

    line-height:
        1.6 !important;

}


/* =========================================================
   BADGE
   ========================================================= */

.client-config-page
.status-badge {

    min-height:
        27px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    width:
        fit-content;

    margin-top:
        14px !important;

    padding:
        0 9px !important;

    border-radius:
        999px !important;

    font-size:
        8px !important;

    font-weight:
        850 !important;

    letter-spacing:
        .03em;

    box-shadow:
        none !important;

}


/* =========================================================
   BOTÃO DO CARD
   ========================================================= */

.client-config-page
.config-card
.back-button {

    min-height:
        40px !important;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        15px !important;

    padding:
        0 13px !important;

    border:
        1px solid
        var(--vl-core-border) !important;

    border-radius:
        10px !important;

    background:
        #ffffff !important;

    color:
        var(--vl-core-text-secondary) !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

    box-shadow:
        none !important;

}


/* =========================================================
   BOTÃO CARD HOVER
   ========================================================= */

.client-config-page
.config-card
.back-button:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(200,155,67,.27) !important;

    background:
        #fffaf0 !important;

    color:
        #8d671f !important;

    box-shadow:
        0 6px 16px
        rgba(7,17,31,.05) !important;

}


/* =========================================================
   ÍCONE BOTÃO
   ========================================================= */

.client-config-page
.config-card
.back-button
i {

    color:
        var(--vl-core-gold) !important;

}


/* =========================================================
   BASE DAS SEÇÕES INTERNAS
   ========================================================= */

.client-config-page
.client-section {

    position:
        relative;

    overflow:
        hidden;

    margin-top:
        25px !important;

    padding:
        0 !important;

    border:
        1px solid
        var(--vl-core-border) !important;

    border-radius:
        19px !important;

    background:
        #ffffff !important;

    box-shadow:
        var(--vl-core-shadow-card) !important;

    animation:
        none !important;

}


/* =========================================================
   LINHA DAS SEÇÕES
   ========================================================= */

.client-config-page
.client-section::before {

    content: "";

    position:
        absolute;

    z-index:
        5;

    top:
        0;

    left:
        22px;

    right:
        22px;

    width:
        auto;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(200,155,67,.48),
            transparent
        ) !important;

}


/* =========================================================
   REMOVER GLOW ROXO DAS SEÇÕES
   ========================================================= */

.client-config-page
.client-section::after {

    content:
        none !important;

}


/* =========================================================
   HEADER INTERNO
   ========================================================= */

.client-config-page
.client-section
> div:first-child {

    position:
        relative;

    z-index:
        2;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        24px !important;

    margin:
        0 !important;

    padding:
        24px 26px !important;

    border-bottom:
        1px solid
        var(--vl-core-border) !important;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafbfd
        ) !important;

}


/* =========================================================
   KICKER DAS SEÇÕES
   ========================================================= */

.client-config-page
.client-section
> div:first-child
small {

    display:
        inline-flex !important;

    align-items:
        center;

    width:
        fit-content;

    margin:
        0 0 6px !important;

    padding:
        4px 7px !important;

    border:
        1px solid
        rgba(200,155,67,.15);

    border-radius:
        6px;

    background:
        #fff9ed !important;

    color:
        #8d671f !important;

    font-size:
        8px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .09em !important;

    text-transform:
        uppercase;

}


/* =========================================================
   TÍTULO INTERNO
   ========================================================= */

.client-config-page
.client-section
> div:first-child
h2 {

    margin:
        0 !important;

    color:
        var(--vl-core-text) !important;

    font-size:
        21px !important;

    font-weight:
        850 !important;

    letter-spacing:
        -.35px !important;

}


/* =========================================================
   DESCRIÇÃO
   ========================================================= */

.client-config-page
.client-section
> div:first-child
p {

    max-width:
        720px;

    margin:
        6px 0 0 !important;

    color:
        var(--vl-core-text-secondary) !important;

    font-size:
        11px !important;

    line-height:
        1.6 !important;

}


/* =========================================================
   VOLTAR INTERNO
   ========================================================= */

.client-config-page
.client-section
> div:first-child
.back-button {

    min-height:
        39px;

    flex:
        0 0 auto;

    padding:
        0 13px;

    border:
        1px solid
        var(--vl-core-border) !important;

    border-radius:
        9px;

    background:
        #ffffff !important;

    color:
        var(--vl-core-text-secondary) !important;

    font-size:
        10px;

    font-weight:
        800;

    box-shadow:
        none !important;

}


/* =========================================================
   FORMS - BASE
   ========================================================= */

.client-config-page
.client-section
form {

    position:
        relative;

    z-index:
        2;

}


/* =========================================================
   LABEL
   ========================================================= */

.client-config-page
.client-section
form
label {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--vl-core-text-secondary) !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

}


/* =========================================================
   CAMPOS
   ========================================================= */

.client-config-page
.client-section
form
input:not([type="hidden"]):not([type="submit"]):not([type="button"]),

.client-config-page
.client-section
form
select,

.client-config-page
.client-section
form
textarea {

    width:
        100%;

    min-height:
        45px !important;

    box-sizing:
        border-box;

    margin-top:
        6px !important;

    padding:
        10px 12px !important;

    border:
        1px solid
        var(--vl-core-border) !important;

    border-radius:
        10px !important;

    background:
        #ffffff !important;

    color:
        var(--vl-core-text) !important;

    font-size:
        11px !important;

    box-shadow:
        none !important;

}


/* =========================================================
   FOCUS
   ========================================================= */

.client-config-page
.client-section
form
input:not([type="hidden"]):focus,

.client-config-page
.client-section
form
select:focus,

.client-config-page
.client-section
form
textarea:focus {

    border-color:
        var(--vl-core-gold) !important;

    background:
        #ffffff !important;

    box-shadow:
        0 0 0 3px
        rgba(200,155,67,.10) !important;

}


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

.client-config-page
.client-section
input[type="file"] {

    min-height:
        55px;

    padding:
        6px !important;

    border-style:
        dashed !important;

    border-color:
        #d9c79f !important;

    background:
        #fffdf8 !important;

}


/* =========================================================
   FILE BUTTON
   ========================================================= */

.client-config-page
.client-section
input[type="file"]::file-selector-button {

    margin-right:
        11px;

    padding:
        9px 12px;

    border:
        1px solid
        rgba(200,155,67,.18);

    border-radius:
        8px;

    background:
        #fff9ed;

    color:
        #8d671f;

    font-size:
        10px;

    font-weight:
        800;

    cursor:
        pointer;

}


/* =========================================================
   SUBMIT GLOBAL DA CONFIGURAÇÃO
   ========================================================= */

.client-config-page
.client-section
button[type="submit"] {

    min-height:
        45px !important;

    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0 17px !important;

    border:
        1px solid
        rgba(223,186,112,.24) !important;

    border-radius:
        10px !important;

    background:
        linear-gradient(
            135deg,
            var(--vl-core-midnight),
            var(--vl-core-navy)
        ) !important;

    color:
        #ffffff !important;

    font-size:
        10px !important;

    font-weight:
        850 !important;

    cursor:
        pointer;

    box-shadow:
        0 8px 19px
        rgba(7,17,31,.16) !important;

}


/* =========================================================
   SUBMIT HOVER
   ========================================================= */

.client-config-page
.client-section
button[type="submit"]:hover {

    transform:
        translateY(-1px);

    filter:
        none !important;

    border-color:
        rgba(223,186,112,.45) !important;

    box-shadow:
        0 12px 25px
        rgba(7,17,31,.21) !important;

}


/* =========================================================
   EMPRESA
   ========================================================= */

.client-config-page
.client-section-empresa {

    --section-accent:
        var(--vl-core-blue);

    --section-accent-2:
        var(--vl-core-gold);

    --section-soft:
        #f4f7ff;

    --section-glow:
        rgba(59,130,246,.09);

}


/* =========================================================
   FORM EMPRESA
   ========================================================= */

.client-config-page
.client-section-empresa
.empresa-form {

    padding:
        25px 26px 27px !important;

    background:
        #ffffff !important;

}


/* =========================================================
   BOTÃO EMPRESA
   ========================================================= */

.client-config-page
.client-section-empresa
.empresa-save-button {

    min-width:
        190px !important;

    min-height:
        45px !important;

    background:
        linear-gradient(
            135deg,
            var(--vl-core-midnight),
            var(--vl-core-navy)
        ) !important;

    box-shadow:
        0 8px 19px
        rgba(7,17,31,.16) !important;

}


/* =========================================================
   FISCAL
   ========================================================= */

.client-config-page
.client-section-fiscal {

    --section-accent:
        var(--vl-core-gold);

    --section-accent-2:
        var(--vl-core-navy);

    --section-soft:
        #fff9ed;

    --section-glow:
        rgba(200,155,67,.10);

}


/* =========================================================
   FORM FISCAL
   ========================================================= */

.client-config-page
.client-section-fiscal
form {

    margin:
        20px 26px !important;

    padding:
        22px !important;

    border:
        1px solid
        var(--vl-core-border) !important;

    border-radius:
        14px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 4px 14px
        rgba(7,17,31,.035) !important;

}


/* =========================================================
   CSC HEADER
   ========================================================= */

.client-config-page
.client-section-fiscal
.fiscal-csc-header {

    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;

    margin:
        0 26px 15px !important;

    padding:
        18px 19px !important;

    overflow:
        hidden;

    border:
        1px solid
        rgba(200,155,67,.21) !important;

    border-radius:
        14px !important;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #ffffff
        ) !important;

    box-shadow:
        none !important;

}


/* =========================================================
   CSC LATERAL
   ========================================================= */

.client-config-page
.client-section-fiscal
.fiscal-csc-header::before {

    content: "";

    position:
        absolute;

    top:
        14px;

    bottom:
        14px;

    left:
        0;

    width:
        3px;

    border-radius:
        0 4px 4px 0;

    background:
        linear-gradient(
            180deg,
            var(--vl-core-gold),
            var(--vl-core-gold-light)
        ) !important;

}


/* =========================================================
   REMOVE CSC GLOW ANTIGO
   ========================================================= */

.client-config-page
.client-section-fiscal
.fiscal-csc-header::after {

    content:
        none !important;

}


/* =========================================================
   CSC ICON
   ========================================================= */

.client-config-page
.client-section-fiscal
.fiscal-csc-header-icon {

    width:
        42px !important;

    height:
        42px !important;

    flex:
        0 0 42px !important;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(200,155,67,.19) !important;

    border-radius:
        11px !important;

    background:
        #fff9ed !important;

    color:
        #8d671f !important;

    font-size:
        15px !important;

    box-shadow:
        none !important;

}


/* =========================================================
   CSC KICKER
   ========================================================= */

.client-config-page
.client-section-fiscal
.fiscal-csc-kicker {

    margin:
        0 0 6px !important;

    padding:
        4px 7px !important;

    border:
        1px solid
        rgba(200,155,67,.15) !important;

    border-radius:
        6px;

    background:
        #fff9ed !important;

    color:
        #8d671f !important;

    font-size:
        8px !important;

}


/* =========================================================
   CSC TITLE
   ========================================================= */

.client-config-page
.client-section-fiscal
.fiscal-csc-title {

    margin:
        0 0 5px !important;

    color:
        var(--vl-core-text) !important;

    font-size:
        16px !important;

    font-weight:
        850 !important;

}


/* =========================================================
   CSC DESC
   ========================================================= */

.client-config-page
.client-section-fiscal
.fiscal-csc-description {

    margin:
        0 !important;

    color:
        var(--vl-core-text-secondary) !important;

    font-size:
        10px !important;

    line-height:
        1.6;

}


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

.client-config-page
.client-section-fiscal
.fiscal-csc-status {

    margin:
        0 26px 15px !important;

    padding:
        13px 15px !important;

    border:
        1px solid
        var(--vl-core-border) !important;

    border-radius:
        11px !important;

    background:
        #fafbfd !important;

    color:
        var(--vl-core-text-secondary) !important;

    font-size:
        10px;

    box-shadow:
        none !important;

}


/* =========================================================
   CSC FORM
   ========================================================= */

.client-config-page
.client-section-fiscal
.fiscal-csc-form {

    margin:
        0 26px 27px !important;

    padding:
        22px !important;

    border:
        1px solid
        rgba(200,155,67,.21) !important;

    border-radius:
        14px !important;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fffdf8
        ) !important;

    box-shadow:
        none !important;

}


/* =========================================================
   CSC FORM LINHA
   ========================================================= */

.client-config-page
.client-section-fiscal
.fiscal-csc-form::before {

    content: "";

    position:
        absolute;

    top:
        16px;

    bottom:
        16px;

    left:
        0;

    width:
        3px;

    border-radius:
        0 4px 4px 0;

    background:
        linear-gradient(
            180deg,
            var(--vl-core-gold),
            var(--vl-core-gold-light)
        ) !important;

}


/* =========================================================
   CERTIFICADO
   ========================================================= */

.client-config-page
.client-section-certificado {

    --section-accent:
        var(--vl-core-gold);

    --section-accent-2:
        #159447;

    --section-soft:
        #f2fbf5;

    --section-glow:
        rgba(21,148,71,.08);

}


/* =========================================================
   FORM CERTIFICADO
   ========================================================= */

.client-config-page
.client-section-certificado
form {

    padding:
        24px 26px 27px !important;

    background:
        #ffffff !important;

}


/* =========================================================
   CERT STATUS PANEL
   ========================================================= */

.client-config-page
.client-section-certificado
.certificate-status-panel {

    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        15px;

    margin:
        0 26px 20px !important;

    padding:
        18px 19px !important;

    overflow:
        hidden;

    border:
        1px solid
        rgba(200,155,67,.20) !important;

    border-radius:
        14px !important;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #ffffff
        ) !important;

    box-shadow:
        none !important;

}


/* =========================================================
   CERT LINHA
   ========================================================= */

.client-config-page
.client-section-certificado
.certificate-status-panel::before {

    content: "";

    position:
        absolute;

    top:
        14px;

    bottom:
        14px;

    left:
        0;

    width:
        3px;

    border-radius:
        0 4px 4px 0;

    background:
        linear-gradient(
            180deg,
            var(--vl-core-gold),
            #159447
        ) !important;

}


/* =========================================================
   REMOVER CERT GLOW
   ========================================================= */

.client-config-page
.client-section-certificado
.certificate-status-panel::after {

    content:
        none !important;

}


/* =========================================================
   CERT ICON
   ========================================================= */

.client-config-page
.client-section-certificado
.certificate-status-icon {

    width:
        43px !important;

    height:
        43px !important;

    flex:
        0 0 43px !important;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(200,155,67,.19) !important;

    border-radius:
        11px !important;

    background:
        #fff9ed !important;

    color:
        #8d671f !important;

    font-size:
        16px !important;

    box-shadow:
        none !important;

}


/* =========================================================
   CERT TITLE
   ========================================================= */

.client-config-page
.client-section-certificado
.certificate-status-title {

    margin-bottom:
        12px;

    color:
        var(--vl-core-text) !important;

    font-size:
        15px !important;

    font-weight:
        850;

}


/* =========================================================
   CERT GRID
   ========================================================= */

.client-config-page
.client-section-certificado
.certificate-status-grid {

    display:
        grid;

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

    gap:
        10px;

}


/* =========================================================
   CERT ITEM
   ========================================================= */

.client-config-page
.client-section-certificado
.certificate-status-item {

    min-width:
        0;

    padding:
        11px 12px;

    border:
        1px solid
        var(--vl-core-border) !important;

    border-radius:
        10px !important;

    background:
        rgba(255,255,255,.86) !important;

    box-shadow:
        none !important;

}


/* =========================================================
   CERT ITEM HOVER
   ========================================================= */

.client-config-page
.client-section-certificado
.certificate-status-item:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(200,155,67,.24) !important;

    box-shadow:
        0 5px 13px
        rgba(7,17,31,.04) !important;

}


/* =========================================================
   CERT LABEL
   ========================================================= */

.client-config-page
.client-section-certificado
.certificate-status-label {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--vl-core-text-muted) !important;

    font-size:
        8px !important;

    font-weight:
        850;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;

}


/* =========================================================
   CERT VALUE
   ========================================================= */

.client-config-page
.client-section-certificado
.certificate-status-value {

    color:
        var(--vl-core-text-secondary) !important;

    font-size:
        10px !important;

    font-weight:
        800;

}


/* =========================================================
   CERT OK
   ========================================================= */

.client-config-page
.client-section-certificado
.certificate-status-ok {

    color:
        #15803d !important;

}


/* =========================================================
   DIAGNÓSTICO
   ========================================================= */

.client-config-page
.client-section-diagnostico {

    --section-accent:
        var(--vl-core-blue);

    --section-accent-2:
        var(--vl-core-gold);

    --section-soft:
        #eef6ff;

    --section-glow:
        rgba(59,130,246,.08);

}


/* =========================================================
   FORM RUN
   ========================================================= */

.client-config-page
.client-section-diagnostico
.diagnostic-run-form {

    margin:
        0 !important;

    padding:
        23px 26px 20px !important;

    border:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

}


/* =========================================================
   BOTÃO DIAGNÓSTICO
   ========================================================= */

.client-config-page
.client-section-diagnostico
.diagnostic-run-button {

    min-width:
        210px !important;

    min-height:
        45px !important;

    background:
        linear-gradient(
            135deg,
            var(--vl-core-midnight),
            var(--vl-core-navy)
        ) !important;

    box-shadow:
        0 8px 19px
        rgba(7,17,31,.16) !important;

}


/* =========================================================
   ICON BUTTON
   ========================================================= */

.client-config-page
.client-section-diagnostico
.diagnostic-run-button-icon {

    width:
        25px;

    height:
        25px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        7px;

    background:
        rgba(255,255,255,.10);

}


/* =========================================================
   AVISO DIAGNÓSTICO
   ========================================================= */

.client-config-page
.client-section-diagnostico
.diagnostic-security-notice {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    margin:
        0 26px 22px !important;

    padding:
        14px 16px !important;

    border:
        1px solid
        #eadbb9 !important;

    border-radius:
        11px !important;

    background:
        #fffbf2 !important;

    color:
        #805b19 !important;

    box-shadow:
        none !important;

}


/* =========================================================
   AVISO ICON
   ========================================================= */

.client-config-page
.client-section-diagnostico
.diagnostic-security-notice-icon {

    width:
        32px;

    height:
        32px;

    flex:
        0 0 32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        9px;

    background:
        #fff0c8 !important;

    color:
        #98610c !important;

}


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

.client-config-page
.client-section-diagnostico
.diagnostic-results-grid {

    display:
        grid;

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

    gap:
        13px;

    padding:
        0 26px 27px;

}


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

.client-config-page
.client-section-diagnostico
.diagnostic-module-card {

    position:
        relative;

    min-width:
        0;

    overflow:
        hidden;

    padding:
        17px !important;

    border:
        1px solid
        var(--vl-core-border) !important;

    border-radius:
        13px !important;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafbfd
        ) !important;

    box-shadow:
        none !important;

}


/* =========================================================
   MODULE LINE
   ========================================================= */

.client-config-page
.client-section-diagnostico
.diagnostic-module-card::before {

    content: "";

    position:
        absolute;

    top:
        13px;

    bottom:
        13px;

    left:
        0;

    width:
        2px;

    border-radius:
        0 4px 4px 0;

    background:
        linear-gradient(
            180deg,
            var(--vl-core-blue),
            var(--vl-core-gold)
        ) !important;

}


/* =========================================================
   REMOVE MODULE GLOW
   ========================================================= */

.client-config-page
.client-section-diagnostico
.diagnostic-module-card::after {

    content:
        none !important;

}


/* =========================================================
   MODULE HOVER
   ========================================================= */

.client-config-page
.client-section-diagnostico
.diagnostic-module-card:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(200,155,67,.23) !important;

    box-shadow:
        0 7px 17px
        rgba(7,17,31,.05) !important;

}


/* =========================================================
   MODULE TITLE
   ========================================================= */

.client-config-page
.client-section-diagnostico
.diagnostic-module-card
h3 {

    color:
        var(--vl-core-text) !important;

    font-size:
        13px !important;

    font-weight:
        850 !important;

}


/* =========================================================
   MODULE SMALL
   ========================================================= */

.client-config-page
.client-section-diagnostico
.diagnostic-module-card
small {

    color:
        var(--vl-core-text-muted) !important;

    font-size:
        8px !important;

}


/* =========================================================
   DETAILS
   ========================================================= */

.client-config-page
.client-section-diagnostico
.diagnostic-details {

    margin-top:
        12px !important;

    overflow:
        hidden;

    border:
        1px solid
        var(--vl-core-border) !important;

    border-radius:
        9px !important;

    background:
        #f8fafc !important;

}


/* =========================================================
   DETAILS SUMMARY
   ========================================================= */

.client-config-page
.client-section-diagnostico
.diagnostic-details-summary {

    min-height:
        36px;

    display:
        flex;

    align-items:
        center;

    padding:
        0 11px;

    color:
        var(--vl-core-text-secondary) !important;

    font-size:
        9px;

    font-weight:
        850 !important;

    cursor:
        pointer;

}


/* =========================================================
   DETAILS CHEVRON
   ========================================================= */

.client-config-page
.client-section-diagnostico
.diagnostic-details-summary::before {

    color:
        var(--vl-core-gold) !important;

}


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

.client-config-page
.client-section-diagnostico
.diagnostic-empty-state {

    margin:
        0 26px 27px;

    padding:
        34px 22px;

    border:
        1px dashed
        rgba(200,155,67,.28);

    border-radius:
        13px;

    background:
        linear-gradient(
            135deg,
            #fffdf8,
            #ffffff
        );

    color:
        var(--vl-core-text-secondary);

    text-align:
        center;

}


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

@media (max-width: 900px) {

    .client-config-page
    .config-grid {

        grid-template-columns:
            1fr !important;

    }


    .client-config-page
    .client-config-standard-content {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            28px 25px !important;

    }


    .client-config-page
    .client-config-header-back {

        width:
            100%;

    }


    .client-config-page
    .client-section
    > div:first-child {

        align-items:
            flex-start !important;

        flex-direction:
            column;

    }


    .client-config-page
    .client-section
    > div:first-child
    .back-button {

        width:
            100%;

    }


    .client-config-page
    .client-section-certificado
    .certificate-status-grid {

        grid-template-columns:
            1fr;

    }


    .client-config-page
    .client-section-diagnostico
    .diagnostic-results-grid {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 650px) {

    .client-config-page
    .client-config-standard-header {

        margin-top:
            23px;

        border-radius:
            19px !important;

    }


    .client-config-page
    .client-config-standard-content {

        padding:
            25px 21px !important;

    }


    .client-config-page
    .config-grid {

        gap:
            13px !important;

    }


    .client-config-page
    .config-card {

        min-height:
            auto !important;

        padding:
            20px !important;

        border-radius:
            15px !important;

    }


    .client-config-page
    .client-section {

        border-radius:
            16px !important;

    }


    .client-config-page
    .client-section
    > div:first-child {

        padding:
            20px !important;

    }


    .client-config-page
    .client-section-empresa
    .empresa-form,

    .client-config-page
    .client-section-certificado
    form {

        padding:
            20px !important;

    }


    .client-config-page
    .client-section-fiscal
    form {

        margin-left:
            20px !important;

        margin-right:
            20px !important;

        padding:
            19px !important;

    }


    .client-config-page
    .client-section-fiscal
    .fiscal-csc-header,

    .client-config-page
    .client-section-fiscal
    .fiscal-csc-status,

    .client-config-page
    .client-section-fiscal
    .fiscal-csc-form {

        margin-left:
            20px !important;

        margin-right:
            20px !important;

    }


    .client-config-page
    .client-section-certificado
    .certificate-status-panel {

        margin-left:
            20px !important;

        margin-right:
            20px !important;

    }


    .client-config-page
    .client-section-diagnostico
    .diagnostic-run-form {

        padding:
            20px !important;

    }


    .client-config-page
    .client-section-diagnostico
    .diagnostic-security-notice {

        margin-left:
            20px !important;

        margin-right:
            20px !important;

    }


    .client-config-page
    .client-section-diagnostico
    .diagnostic-results-grid {

        padding:
            0 20px 20px;

    }


    .client-config-page
    .client-section
    button[type="submit"] {

        width:
            100%;

    }

}


@media (max-width: 430px) {

    .client-config-page
    .client-config-standard-header {

        margin-top:
            17px;

        border-radius:
            16px !important;

    }


    .client-config-page
    .client-config-standard-content {

        padding:
            23px 18px !important;

    }


    .client-config-page
    .client-config-standard-info
    h1,

    .client-config-page
    .client-config-standard-info
    h2 {

        font-size:
            24px !important;

    }


    .client-config-page
    .config-card {

        padding:
            18px !important;

    }


    .client-config-page
    .master-banner {

        align-items:
            flex-start;

        padding:
            16px !important;

    }


    .client-config-page
    .client-section-fiscal
    .fiscal-csc-header,

    .client-config-page
    .client-section-certificado
    .certificate-status-panel {

        align-items:
            flex-start;

        gap:
            11px;

        padding:
            16px !important;

    }

}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

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

    .client-config-page *,
    .client-config-page *::before,
    .client-config-page *::after {

        animation:
            none !important;

        transition-duration:
            .01ms !important;

    }

}

/* VALORIUM_LUXE_CONFIGURAR_CLIENTE_FINAL_END */

/* VALORIUM_CONFIG_CLIENTE_BACK_BELOW_CARDS_START */

/* =========================================================
   CONFIGURAR CLIENTE
   VOLTAR AO DASHBOARD ABAIXO DOS 4 CARDS
   ========================================================= */

.client-config-page
.client-config-bottom-navigation {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    margin-top:
        18px;

    margin-bottom:
        4px;

}


/* =========================================================
   NAVEGAÇÃO INTERNA
   ========================================================= */

.client-config-page
.client-config-bottom-navigation
.client-config-standard-navigation {

    width:
        auto !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    margin:
        0 !important;

    padding:
        0 !important;

}


/* =========================================================
   BOTÃO
   ========================================================= */

.client-config-page
.client-config-bottom-navigation
.client-config-header-back {

    width:
        auto !important;

    min-width:
        0;

    min-height:
        41px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin:
        0 !important;

    padding:
        0 15px;

    border:
        1px solid
        var(--vl-core-border) !important;

    border-radius:
        10px !important;

    background:
        #ffffff !important;

    color:
        var(--vl-core-text-secondary) !important;

    font-size:
        10px;

    font-weight:
        800;

    text-decoration:
        none;

    box-shadow:
        0 4px 12px
        rgba(7,17,31,.045) !important;

    transition:
        transform var(--vl-core-transition),
        border-color var(--vl-core-transition),
        background var(--vl-core-transition),
        color var(--vl-core-transition),
        box-shadow var(--vl-core-transition);

}


/* =========================================================
   ÍCONE
   ========================================================= */

.client-config-page
.client-config-bottom-navigation
.client-config-header-back
i {

    color:
        var(--vl-core-gold) !important;

    font-size:
        11px;

}


/* =========================================================
   HOVER
   ========================================================= */

.client-config-page
.client-config-bottom-navigation
.client-config-header-back:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(200,155,67,.30) !important;

    background:
        #fffaf0 !important;

    color:
        #8d671f !important;

    box-shadow:
        0 7px 17px
        rgba(7,17,31,.065) !important;

}


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

@media (max-width: 650px) {

    .client-config-page
    .client-config-bottom-navigation {

        margin-top:
            14px;

    }


    .client-config-page
    .client-config-bottom-navigation
    .client-config-standard-navigation {

        width:
            100% !important;

    }


    .client-config-page
    .client-config-bottom-navigation
    .client-config-header-back {

        width:
            100% !important;

    }

}

/* VALORIUM_CONFIG_CLIENTE_BACK_BELOW_CARDS_END */

/* VALORIUM_USUARIOS_HEADER_SUBTITLE_START */

/* =========================================================
   USUÁRIOS
   SUBTÍTULO DENTRO DO HEADER
   ========================================================= */

.usuarios-page
.usuarios-page-header
.usuarios-description {

    max-width:
        680px;

    margin:
        8px 0 0 !important;

    color:
        rgba(226,232,240,.74) !important;

    font-size:
        13px !important;

    font-weight:
        500;

    line-height:
        1.65;

}


/* =========================================================
   GARANTIR BLOCO ESQUERDO ORGANIZADO
   ========================================================= */

.usuarios-page
.usuarios-page-header
> div:first-child {

    min-width:
        0;

}


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

@media (max-width: 480px) {

    .usuarios-page
    .usuarios-page-header
    .usuarios-description {

        margin-top:
            7px !important;

        font-size:
            11px !important;

        line-height:
            1.55;

    }

}

/* VALORIUM_USUARIOS_HEADER_SUBTITLE_END */

/* VALORIUM_PERFIL_HEADER_SUBTITLE_START */

/* =========================================================
   PERFIL
   SUBTÍTULO DENTRO DO HEADER
   ========================================================= */

body:has(.perfil-card)
.page-header
.perfil-description {

    max-width:
        680px;

    margin:
        8px 0 0 !important;

    color:
        rgba(226,232,240,.74) !important;

    font-size:
        13px !important;

    font-weight:
        500;

    line-height:
        1.65;

}


/* =========================================================
   BLOCO ESQUERDO DO HEADER
   ========================================================= */

body:has(.perfil-card)
.page-header
> div:first-child {

    min-width:
        0;

}


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

@media (max-width: 480px) {

    body:has(.perfil-card)
    .page-header
    .perfil-description {

        margin-top:
            7px !important;

        font-size:
            11px !important;

        line-height:
            1.55;

    }

}

/* VALORIUM_PERFIL_HEADER_SUBTITLE_END */

/* VALORIUM_WAITER_MOBILE_REMOVE_BASE_START */

.garcom-mobile-remove-form {

    display:
        none;

}

/* VALORIUM_WAITER_MOBILE_REMOVE_BASE_END */


/* VALORIUM_DELIVERY_ISOLATED_UI_START */

/* =========================================================
   VALORIUM DELIVERY
   CONFIGURAÇÃO - LAYOUT PREMIUM
   ========================================================= */


/* FORMULÁRIO PRINCIPAL */

.client-section-delivery .delivery-config-form {

    display:
        grid;

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

    gap:
        18px 22px;

    max-width:
        1080px;

    margin:
        0 auto;

    padding:
        4px 0 0;

}


/* =========================================================
   CAMPOS
   ========================================================= */

.client-section-delivery .delivery-config-field {

    display:
        flex !important;

    flex-direction:
        column !important;

    gap:
        8px !important;

    min-width:
        0;

    margin:
        0 !important;

    color:
        #17233d !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .01em;

}


.client-section-delivery .delivery-config-field-full {

    grid-column:
        1 / -1;

}


.client-section-delivery
.delivery-config-field
> input[type="url"],

.client-section-delivery
.delivery-config-field
> input[type="text"],

.client-section-delivery
.delivery-config-field
> input[type="password"] {

    width:
        100% !important;

    height:
        46px !important;

    min-height:
        46px !important;

    margin:
        0 !important;

    padding:
        0 15px !important;

    border:
        1px solid #dce2ec !important;

    border-radius:
        10px !important;

    background:
        #ffffff !important;

    color:
        #17233d !important;

    font-size:
        13px !important;

    font-weight:
        600 !important;

    box-sizing:
        border-box !important;

    box-shadow:
        0 1px 2px rgba(15,23,42,.025) !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;

}


.client-section-delivery
.delivery-config-field
> input::placeholder {

    color:
        #9aa4b5 !important;

    opacity:
        1 !important;

}


.client-section-delivery
.delivery-config-field
> input:focus {

    outline:
        none !important;

    border-color:
        #c89b43 !important;

    background:
        #fffefa !important;

    box-shadow:
        0 0 0 3px rgba(200,155,67,.11) !important;

}


/* =========================================================
   AUTOMAÇÕES
   ========================================================= */

.client-section-delivery .delivery-config-options {

    grid-column:
        1 / -1;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    gap:
        10px !important;

    margin:
        8px 0 0 !important;

    padding:
        20px 0 0 !important;

    border-top:
        1px solid #e8ebf1;

}


/* =========================================================
   OPÇÕES
   ========================================================= */

.client-section-delivery .delivery-config-option {

    display:
        flex !important;

    flex-direction:
        row !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    gap:
        10px !important;

    width:
        100% !important;

    min-height:
        44px !important;

    margin:
        0 !important;

    padding:
        10px 12px !important;

    border:
        1px solid #e4e8ef !important;

    border-radius:
        9px !important;

    background:
        #fbfcfe !important;

    color:
        #273652 !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    box-sizing:
        border-box;

    cursor:
        pointer;

}


/* =========================================================
   CHECKBOX NATIVO
   ========================================================= */

.client-section-delivery
.delivery-config-option
> input[type="checkbox"] {

    appearance:
        auto !important;

    -webkit-appearance:
        checkbox !important;

    width:
        16px !important;

    height:
        16px !important;

    min-width:
        16px !important;

    min-height:
        16px !important;

    max-width:
        16px !important;

    max-height:
        16px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    flex:
        0 0 16px !important;

    border:
        initial !important;

    border-radius:
        initial !important;

    background:
        initial !important;

    box-shadow:
        none !important;

    accent-color:
        #c89b43;

    cursor:
        pointer;

}


/* =========================================================
   STATUS DA INTEGRAÇÃO
   ========================================================= */

.client-section-delivery .delivery-config-status {

    grid-column:
        1 / -1;

    position:
        relative;

    margin:
        2px 0 0;

    padding:
        16px 18px;

    border:
        1px solid #e2e7ef;

    border-left:
        3px solid #c89b43;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            #fffdfa 0%,
            #f9fafc 100%
        );

    color:
        #344054;

}


.client-section-delivery .delivery-config-status strong {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #17233d;

    font-size:
        13px;

}


.client-section-delivery .delivery-config-status p {

    margin:
        4px 0 0 !important;

    color:
        #667085;

    font-size:
        12px;

    line-height:
        1.5;

}


/* =========================================================
   BOTÃO SALVAR
   ========================================================= */

.client-section-delivery .delivery-config-submit {

    grid-column:
        1 / -1;

    justify-self:
        end;

    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    width:
        auto !important;

    min-width:
        230px !important;

    min-height:
        44px;

    margin:
        6px 0 0 !important;

    padding:
        0 20px !important;

    border-radius:
        10px !important;

    box-shadow:
        0 7px 18px rgba(15,23,42,.10);

}


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

@media (max-width: 820px) {

    .client-section-delivery .delivery-config-form {

        grid-template-columns:
            1fr;

        gap:
            16px;

        max-width:
            none;

    }


    .client-section-delivery .delivery-config-field,
    .client-section-delivery .delivery-config-field-full {

        grid-column:
            1 / -1;

    }


    .client-section-delivery .delivery-config-options {

        grid-template-columns:
            1fr !important;

    }


    .client-section-delivery .delivery-config-submit {

        justify-self:
            stretch;

        width:
            100% !important;

        min-width:
            0 !important;

    }

}


@media (max-width: 520px) {

    .client-section-delivery .delivery-config-form {

        gap:
            14px;

    }


    .client-section-delivery .delivery-config-option {

        min-height:
            54px !important;

        padding:
            12px 13px !important;

    }

}

/* VALORIUM_DELIVERY_ISOLATED_UI_END */




/* ============================================================
   VALORIUM_DELIVERY_OPERATIONAL_UI_START
   Layout exclusivo da pagina public_html/delivery.php
   ============================================================ */

.delivery-page {
    max-width: 1440px;
    margin: 0 auto;
    padding-bottom: 48px;
}


/* ============================================================
   HEADER
   ============================================================ */

.delivery-page .delivery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;

    padding: 30px 34px;
    margin-bottom: 28px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #0d1228 0%,
            #121a3b 58%,
            #253b8f 100%
        );

    color: #ffffff;

    box-shadow:
        0 20px 46px rgba(17, 24, 58, 0.18);
}

.delivery-page .delivery-header .page-brand {
    display: inline-block;

    margin-bottom: 8px;

    color: #d6ad4f;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.delivery-page .delivery-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.1;
}

.delivery-page .delivery-header .page-subtitle {
    max-width: 760px;

    margin: 10px 0 0;

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

    font-size: 14px;
    line-height: 1.55;
}

.delivery-page .delivery-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    flex-shrink: 0;
}

.delivery-page .delivery-navigation .nav-separator {
    display: none;
}

.delivery-page .delivery-navigation .nav-voltar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 0 18px;

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

    border-radius: 12px;

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

    color: #ffffff;

    text-decoration: none;
    font-size: 13px;
    font-weight: 700;

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

.delivery-page .delivery-navigation .nav-voltar:hover {
    transform: translateY(-1px);

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

    border-color:
        rgba(255, 255, 255, 0.24);
}


/* ============================================================
   TITULOS DAS SECOES
   ============================================================ */

.delivery-page .section-heading {
    display: flex;
    align-items: flex-end;
    gap: 18px;

    margin:
        28px 0
        14px;
}

.delivery-page .section-heading::after {
    content: "";

    flex: 1;

    height: 1px;

    margin-bottom: 7px;

    background:
        linear-gradient(
            90deg,
            rgba(200, 155, 67, 0.32),
            rgba(45, 67, 145, 0.12)
        );
}

.delivery-page .section-eyebrow {
    display: block;

    margin-bottom: 3px;

    color: #b58a28;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.delivery-page .section-heading h3 {
    margin: 0;

    color: #11182e;

    font-size: 22px;
    line-height: 1.2;
}


/* ============================================================
   GRID - VISAO GERAL
   ============================================================ */

.delivery-page .delivery-overview-grid {
    display: grid !important;

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

    gap: 18px !important;

    align-items: stretch;
}

.delivery-page .delivery-overview-grid .dashboard-card {
    min-height: 0 !important;
    height: auto !important;

    padding: 20px !important;

    border:
        1px solid
        rgba(31, 42, 89, 0.08);

    border-radius: 18px !important;

    box-shadow:
        0 12px 28px rgba(24, 33, 72, 0.07);
}

.delivery-page .delivery-overview-grid .dashboard-card:first-child {
    border-color:
        rgba(200, 155, 67, 0.30);
}


/* ============================================================
   GRID - FILA OPERACIONAL
   ============================================================ */

.delivery-page .delivery-queue-grid {
    display: grid !important;

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

    gap: 18px !important;
}

.delivery-page .delivery-queue-grid .dashboard-card {
    min-height: 0 !important;
    height: auto !important;

    padding: 20px !important;

    border:
        1px solid
        rgba(31, 42, 89, 0.08);

    border-radius: 18px !important;

    box-shadow:
        0 12px 28px rgba(24, 33, 72, 0.07);
}


/* ============================================================
   CARDS
   ============================================================ */

.delivery-page .dashboard-card {
    position: relative;

    overflow: hidden;

    background: #ffffff;
}

.delivery-page .dashboard-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 18px;
}

.delivery-page .dashboard-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border:
        1px solid
        rgba(200, 155, 67, 0.27);

    border-radius: 13px;

    background: #fffaf0;

    color: #b58a00;

    font-size: 18px;
}

.delivery-page .dashboard-card-tag {
    position: static !important;

    display: inline-flex;

    width: auto !important;

    padding: 7px 11px;

    border-radius: 999px;

    background: #f1efff;

    color: #5528ef;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.delivery-page .dashboard-card-content {
    display: block !important;

    padding: 0 !important;
    margin: 0 !important;
}

.delivery-page .dashboard-card-content h3 {
    margin:
        0 0
        8px;

    color: #20263d;

    font-size: 15px;
    font-weight: 700;
}

.delivery-page .dashboard-card-content .numero {
    display: block;

    margin-bottom: 6px;

    color: #161b37;

    font-size: 30px;
    line-height: 1.1;
    font-weight: 800;
}

.delivery-page .dashboard-card-content .dashboard-text-small {
    font-size: 25px !important;
}

.delivery-page .dashboard-card-content p {
    margin: 0;

    color: #697189;

    font-size: 13px;
    line-height: 1.45;
}


/* ============================================================
   FILA - CARDS MAIS HORIZONTAIS
   ============================================================ */

.delivery-page .delivery-queue-grid .dashboard-card {
    display: grid;

    grid-template-columns:
        auto 1fr;

    column-gap: 18px;
}

.delivery-page .delivery-queue-grid .dashboard-card-top {
    display: block;

    margin: 0;
}

.delivery-page .delivery-queue-grid .dashboard-card-tag {
    position: absolute !important;

    top: 20px;
    right: 20px;
}

.delivery-page .delivery-queue-grid .dashboard-card-content {
    padding-right: 70px !important;
}

.delivery-page .delivery-queue-grid .dashboard-card-content .numero {
    margin-top: 2px;
}


/* ============================================================
   BLOCOS FULL WIDTH
   ============================================================ */

.delivery-page > .card-form {
    padding: 22px 24px;

    border:
        1px solid
        rgba(31, 42, 89, 0.08);

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 10px 24px rgba(24, 33, 72, 0.055);
}

.delivery-page .delivery-status-list {
    display: grid;

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

    gap: 0;
}

.delivery-page .delivery-status-list p {
    margin: 0;

    padding: 4px 22px;

    border-right:
        1px solid
        rgba(31, 42, 89, 0.10);

    color: #626b83;

    font-size: 13px;
}

.delivery-page .delivery-status-list p:first-child {
    padding-left: 0;
}

.delivery-page .delivery-status-list p:last-child {
    border-right: 0;
}

.delivery-page .delivery-status-list strong {
    display: block;

    margin-bottom: 3px;

    color: #192039;

    font-size: 12px;
}


/* ============================================================
   LOGS
   ============================================================ */

.delivery-page .table-wrapper {
    overflow-x: auto;
}

.delivery-page table {
    width: 100%;

    border-collapse: collapse;
}

.delivery-page table th {
    padding: 13px 14px;

    border-bottom:
        1px solid
        rgba(31, 42, 89, 0.10);

    color: #353d58;

    text-align: left;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.delivery-page table td {
    padding: 14px;

    border-bottom:
        1px solid
        rgba(31, 42, 89, 0.07);

    color: #5e667d;

    font-size: 13px;
}


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

@media (max-width: 1180px) {

    .delivery-page .delivery-overview-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


@media (max-width: 820px) {

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

        padding: 24px;
    }

    .delivery-page .delivery-navigation {
        width: 100%;

        justify-content: flex-start;

        flex-wrap: wrap;
    }

    .delivery-page .delivery-queue-grid {
        grid-template-columns:
            1fr !important;
    }

    .delivery-page .delivery-status-list {
        grid-template-columns:
            1fr;
    }

    .delivery-page .delivery-status-list p {
        padding:
            11px 0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(31, 42, 89, 0.08);
    }

    .delivery-page .delivery-status-list p:last-child {
        border-bottom: 0;
    }

}


@media (max-width: 600px) {

    .delivery-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .delivery-page .delivery-overview-grid {
        grid-template-columns:
            1fr !important;
    }

    .delivery-page .delivery-header h2 {
        font-size: 28px;
    }

    .delivery-page .delivery-navigation .nav-voltar {
        width: 100%;
    }

}


/* ============================================================
   VALORIUM_DELIVERY_OPERATIONAL_UI_END
   ============================================================ */


/* ============================================================
   VALORIUM_DELIVERY_QUEUE_FIX_START
   Corrige cards da Fila Operacional
   ============================================================ */

.delivery-page .delivery-queue-grid {
    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}


/* CARD */

.delivery-page .delivery-queue-grid .dashboard-card {
    position: relative !important;

    display: grid !important;
    grid-template-columns:
        52px minmax(0, 1fr) !important;

    align-items: center !important;

    column-gap: 18px !important;

    min-height: 132px !important;
    height: auto !important;

    padding: 22px 24px !important;

    overflow: hidden !important;
}


/* BLOCO DO ICONE */

.delivery-page .delivery-queue-grid .dashboard-card-top {
    position: static !important;

    display: flex !important;

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

    width: 52px !important;
    height: 52px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ICONE */

.delivery-page .delivery-queue-grid .dashboard-icon {
    width: 46px !important;
    height: 46px !important;

    margin: 0 !important;

    flex: 0 0 46px !important;
}


/* BADGE PEDIDOS / EVENTOS */

.delivery-page .delivery-queue-grid .dashboard-card-tag {
    position: absolute !important;

    top: 18px !important;
    right: 18px !important;

    left: auto !important;
    bottom: auto !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;

    padding: 7px 11px !important;

    transform: none !important;

    z-index: 5 !important;

    white-space: nowrap !important;
}


/* CONTEUDO */

.delivery-page .delivery-queue-grid .dashboard-card-content {
    display: block !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding:
        0 95px
        0 0 !important;
}


/* TITULO */

.delivery-page .delivery-queue-grid
.dashboard-card-content h3 {
    margin:
        0 0
        7px !important;

    font-size: 15px !important;
    line-height: 1.3 !important;
}


/* NUMERO */

.delivery-page .delivery-queue-grid
.dashboard-card-content .numero {
    display: block !important;

    margin:
        0 0
        6px !important;

    font-size: 30px !important;
    line-height: 1 !important;
}


/* DESCRICAO */

.delivery-page .delivery-queue-grid
.dashboard-card-content p {
    margin: 0 !important;

    line-height: 1.45 !important;
}


/* TABLET */

@media (max-width: 820px) {

    .delivery-page .delivery-queue-grid {
        grid-template-columns:
            1fr !important;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .delivery-page .delivery-queue-grid .dashboard-card {
        grid-template-columns:
            44px minmax(0, 1fr) !important;

        column-gap: 14px !important;

        padding: 18px !important;
    }

    .delivery-page .delivery-queue-grid
    .dashboard-card-content {
        padding-right: 0 !important;
        padding-top: 28px !important;
    }

    .delivery-page .delivery-queue-grid
    .dashboard-card-tag {
        top: 14px !important;
        right: 14px !important;
    }

}


/* ============================================================
   VALORIUM_DELIVERY_QUEUE_FIX_END
   ============================================================ */