/* ========================================
   GestãoBLZ — Fechamento de comanda (camada v2)
   Componente: components/fechamento-comanda.js (injeta o próprio <style>
   no <head> em runtime). Todas as regras começam por
   "body #fechamentoComandaModal" para vencer o estilo injetado sem
   !important e sem afetar outros modais da página.
   Só visual/layout: estrutura, textos, campos e fluxos são os mesmos.
   Para voltar ao visual anterior, basta remover o <link> deste arquivo.
   ======================================== */

body #fechamentoComandaModal {
    --fc-border: var(--v2-card-border, #e7e9ee);
    --fc-divider: var(--v2-card-divider, #eef0f3);
    --fc-surface: var(--v2-surface, #f7f8fa);
    --fc-text: var(--v2-text, #111827);
    --fc-text-2: var(--v2-text-2, #4b5563);
    --fc-muted: var(--v2-muted, #6b7482);
    --fc-primary: var(--primary-color, #d97706);
    --fc-primary-hover: var(--primary-dark, var(--primary-color, #b45309));
    --fc-primary-tint: rgba(var(--primary-r, 217), var(--primary-g, 119), var(--primary-b, 6), 0.08);
    --fc-ring: 0 0 0 3px rgba(var(--primary-r, 217), var(--primary-g, 119), var(--primary-b, 6), 0.15);
    --fc-success: #16a34a;
    --fc-success-hover: #15803d;
    --fc-danger: #dc2626;
    --fc-shadow: 0 20px 50px rgba(16, 24, 40, 0.18);

    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--fc-text);
    -webkit-font-smoothing: antialiased;
}

body #fechamentoComandaModal button,
body #fechamentoComandaModal input,
body #fechamentoComandaModal select,
body #fechamentoComandaModal textarea {
    font-family: inherit;
}

/* ========================================
   CASCA: overlay, container, cabeçalho
   ======================================== */
body #fechamentoComandaModal .fechamento-overlay {
    background: rgba(17, 24, 39, 0.45);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body #fechamentoComandaModal .fechamento-container {
    width: calc(100% - 32px);
    max-width: 640px;
    height: min(880px, calc(100vh - 48px));
    height: min(880px, calc(100dvh - 48px));
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    min-height: 0;
    margin: 0;
    background: #ffffff;
    border: 1px solid var(--fc-border);
    border-radius: 14px;
    box-shadow: var(--fc-shadow);
}

body #fechamentoComandaModal .fechamento-header {
    flex-shrink: 0;
    gap: 12px;
    padding: 14px 14px 14px 20px;
    background: #ffffff;
    border-bottom: 1px solid var(--fc-divider);
    color: var(--fc-text);
}

body #fechamentoComandaModal .fechamento-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    color: var(--fc-text);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Ícone do título em caixa chapada (verde = fechamento/pagamento) */
body #fechamentoComandaModal .fechamento-header h4 > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--fc-success);
    color: #ffffff;
    font-size: 13px;
}

body #fechamentoComandaModal .fechamento-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--fc-muted);
    font-size: 15px;
}

body #fechamentoComandaModal .fechamento-close:hover {
    background: #f3f4f6;
    color: var(--fc-text);
}

body #fechamentoComandaModal .fechamento-content {
    background: #ffffff;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Avisos no topo (edição de finalizada / consumo aberto) */
body #fechamentoComandaModal #edicaoFinalizadaBanner,
body #fechamentoComandaModal #consumoAbertoBanner {
    margin-top: 14px;
    margin-left: 20px;
    margin-right: 20px;
    line-height: 1.45;
}

/* ========================================
   SEÇÕES
   ======================================== */
body #fechamentoComandaModal .resumo-atendimento,
body #fechamentoComandaModal .servicos-adicionais,
body #fechamentoComandaModal .produtos-adicionais,
body #fechamentoComandaModal .desconto-section,
body #fechamentoComandaModal .gorjeta-section,
body #fechamentoComandaModal .cliente-alerts,
body #fechamentoComandaModal .pagamento-section {
    padding: 18px 20px;
    border-bottom: 1px solid var(--fc-divider);
}

body #fechamentoComandaModal .pagamento-section {
    border-bottom: 0;
}

/* padding/fundo/borda zerados: atendimento.css tem um .section-header global */
body #fechamentoComandaModal .section-header {
    gap: 12px;
    min-height: 32px;
    margin-bottom: 12px;
    padding: 0;
    border-bottom: 0;
    background: transparent;
}

body #fechamentoComandaModal .section-header i {
    margin-right: 0;
}

body #fechamentoComandaModal .section-header h6 {
    gap: 10px;
    margin: 0;
    color: var(--fc-text);
    font-size: 14px;
    font-weight: 500;
}

body #fechamentoComandaModal .section-header h6 > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    background: var(--fc-surface);
    color: var(--fc-text-2);
    font-size: 12px;
}

body #fechamentoComandaModal .btn-adicionar-servico,
body #fechamentoComandaModal .btn-adicionar-produto {
    flex-shrink: 0;
    gap: 6px;
    min-height: 34px;
    padding: 6px 12px;
    border: 0;
    border-radius: 8px;
    background: var(--fc-primary);
    box-shadow: none;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    transition: background-color 0.15s ease;
}

body #fechamentoComandaModal .btn-adicionar-servico:hover,
body #fechamentoComandaModal .btn-adicionar-produto:hover {
    background: var(--fc-primary-hover);
    transform: none;
}

body #fechamentoComandaModal .btn-adicionar-servico i,
body #fechamentoComandaModal .btn-adicionar-produto i {
    font-size: 11px;
}

/* ========================================
   CLIENTE + SERVIÇO PRINCIPAL
   ======================================== */
body #fechamentoComandaModal .cliente-info {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

body #fechamentoComandaModal .cliente-avatar {
    width: 44px;
    height: 44px;
    background: var(--fc-primary);
    font-size: 17px;
}

body #fechamentoComandaModal .cliente-avatar.has-photo {
    background: transparent;
}

body #fechamentoComandaModal .cliente-details-header {
    align-items: flex-start;
}

body #fechamentoComandaModal .cliente-details h5 {
    margin: 0;
    padding-top: 2px;
    color: var(--fc-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
}

body #fechamentoComandaModal #profissionalNome {
    color: var(--fc-muted);
    font-size: 13px;
    line-height: 1.4;
}

body #fechamentoComandaModal .cliente-info-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
    color: var(--fc-text-2);
    font-size: 14px;
}

body #fechamentoComandaModal .cliente-info-btn:hover {
    background: var(--fc-surface);
    color: var(--fc-text);
    transform: none;
    filter: none;
}

body #fechamentoComandaModal .agendamento-context-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    max-width: none;
    margin-top: 12px;
    padding: 8px 8px 8px 12px;
    border: 1px solid var(--fc-border);
    border-radius: 10px;
    background: var(--fc-surface);
}

body #fechamentoComandaModal .agendamento-context-label {
    color: var(--fc-muted) !important;
    font-size: 12px !important;
    font-weight: 500;
    letter-spacing: 0.04em;
}

body #fechamentoComandaModal .agendamento-context-buttons {
    gap: 6px;
}

body #fechamentoComandaModal .agendamento-context-btn {
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--fc-text-2);
    font-size: 13px;
    font-weight: 500;
}

body #fechamentoComandaModal .agendamento-context-btn i {
    color: #2563eb;
}

body #fechamentoComandaModal .agendamento-context-btn:hover {
    background: #f3f4f6;
    border-color: #d5d9e0;
    color: var(--fc-text);
    transform: none;
}

body #fechamentoComandaModal .agendamento-context-btn.danger {
    border-color: #f3d4d4;
    background: #ffffff;
    color: #b91c1c;
}

body #fechamentoComandaModal .agendamento-context-btn.danger i {
    color: var(--fc-danger);
}

body #fechamentoComandaModal .agendamento-context-btn.danger:hover {
    background: #fef2f2;
    border-color: #fecaca;
}

body #fechamentoComandaModal .servico-principal {
    padding: 12px 14px;
    border: 1px solid var(--fc-border);
    border-radius: 10px;
    background: #ffffff;
}

body #fechamentoComandaModal .servico-principal .servico-item {
    gap: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body #fechamentoComandaModal .servico-text {
    gap: 2px;
    min-width: 0;
}

body #fechamentoComandaModal .servico-nome {
    color: var(--fc-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}

body #fechamentoComandaModal .servico-valor {
    color: var(--fc-text);
    font-size: 15px;
    font-weight: 500;
}

body #fechamentoComandaModal .servico-text small {
    color: var(--fc-muted);
    font-size: 12.5px;
    line-height: 1.4;
}

body #fechamentoComandaModal .servico-text small.servico-ajuste-info {
    color: #b45309;
}

body #fechamentoComandaModal .servico-actions {
    flex-shrink: 0;
    gap: 6px;
}

/* Botões quadrados discretos (ajustar / trocar / remover) */
body #fechamentoComandaModal .servico-action,
body #fechamentoComandaModal .servico-remove,
body #fechamentoComandaModal .produto-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--fc-text-2);
    font-size: 13px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body #fechamentoComandaModal .servico-action:hover {
    background: #f3f4f6;
    border-color: #d5d9e0;
    color: var(--fc-text);
    transform: none;
}

body #fechamentoComandaModal .servico-action-adjust {
    gap: 0;
}

body #fechamentoComandaModal .servico-action-chevron {
    margin-top: -1px;
    font-size: 8px;
}

body #fechamentoComandaModal .servico-action-danger,
body #fechamentoComandaModal .servico-remove,
body #fechamentoComandaModal .produto-remove {
    color: var(--fc-danger);
}

body #fechamentoComandaModal .servico-action-danger:hover,
body #fechamentoComandaModal .servico-remove:hover,
body #fechamentoComandaModal .produto-remove:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

/* Controle de quantidade */
body #fechamentoComandaModal .servico-qty-control {
    gap: 2px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    background: #ffffff;
}

body #fechamentoComandaModal .servico-qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    color: var(--fc-text-2);
    font-size: 11px;
}

body #fechamentoComandaModal .servico-qty-btn:hover:not(:disabled) {
    background: #f3f4f6;
    color: var(--fc-text);
}

body #fechamentoComandaModal .servico-qty-value {
    min-width: 28px;
    color: var(--fc-text);
    font-size: 13px;
    font-weight: 500;
}

/* Painel de ajuste de valor */
body #fechamentoComandaModal .servico-ajuste-panel {
    gap: 10px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--fc-border);
    border-radius: 10px;
    background: var(--fc-surface);
}

body #fechamentoComandaModal .servico-item.adjustable > .servico-ajuste-panel {
    margin-top: 0;
}

body #fechamentoComandaModal .servico-ajuste-field {
    gap: 6px;
}

body #fechamentoComandaModal .servico-ajuste-field label {
    margin: 0;
    color: var(--fc-text-2);
    font-size: 12.5px;
    font-weight: 500;
}

body #fechamentoComandaModal .servico-ajuste-input {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--fc-muted);
    font-size: 13px;
    font-weight: 500;
}

body #fechamentoComandaModal .servico-ajuste-input:focus-within {
    border-color: var(--fc-primary);
    box-shadow: var(--fc-ring);
}

body #fechamentoComandaModal .servico-ajuste-input input {
    height: 36px;
    color: var(--fc-text);
    font-size: 14px;
}

body #fechamentoComandaModal .servico-ajuste-field textarea {
    padding: 8px 10px;
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--fc-text);
    font-size: 14px;
}

body #fechamentoComandaModal .servico-ajuste-field textarea:focus {
    outline: none;
    border-color: var(--fc-primary);
    box-shadow: var(--fc-ring);
}

body #fechamentoComandaModal .servico-ajuste-base {
    color: var(--fc-muted);
    font-size: 12px;
}

body #fechamentoComandaModal .btn-ajuste {
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}

body #fechamentoComandaModal .btn-ajuste-cancelar {
    border-color: var(--fc-border);
    background: #ffffff;
    color: var(--fc-text-2);
}

body #fechamentoComandaModal .btn-ajuste-salvar {
    background: var(--fc-primary);
    color: #ffffff;
}

/* ========================================
   ITENS ADICIONAIS (serviços / produtos): lista única com divisórias
   ======================================== */
body #fechamentoComandaModal .servicos-lista,
body #fechamentoComandaModal .produtos-lista {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--fc-border);
    border-radius: 10px;
    background: #ffffff;
}

body #fechamentoComandaModal .servicos-lista:not(:has(.servico-item)),
body #fechamentoComandaModal .produtos-lista:not(:has(.produto-item)) {
    border: 0;
}

body #fechamentoComandaModal .servicos-lista > .servico-item,
body #fechamentoComandaModal .produtos-lista > .produto-item {
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    border-radius: 0;
    background: #ffffff;
}

body #fechamentoComandaModal .servicos-lista > .servico-item + .servico-item,
body #fechamentoComandaModal .produtos-lista > .produto-item + .produto-item {
    border-top: 1px solid var(--fc-divider);
}

body #fechamentoComandaModal .servico-item-row {
    gap: 12px;
}

body #fechamentoComandaModal .servico-info,
body #fechamentoComandaModal .produto-info {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    color: var(--fc-text-2);
    font-size: 13px;
    line-height: 1.4;
}

body #fechamentoComandaModal .servico-info strong,
body #fechamentoComandaModal .produto-info strong {
    color: var(--fc-text);
    font-size: 14px;
    font-weight: 500;
}

body #fechamentoComandaModal .servico-info small,
body #fechamentoComandaModal .produto-info small {
    font-size: 12.5px;
}

body #fechamentoComandaModal .servico-item-actions,
body #fechamentoComandaModal .produto-actions {
    flex-shrink: 0;
    gap: 6px;
}

/* Estados vazios: uma linha discreta */
body #fechamentoComandaModal .servicos-vazio,
body #fechamentoComandaModal .produtos-vazio {
    flex-direction: row;
    gap: 8px;
    padding: 12px;
    border: 1px dashed var(--fc-border);
    border-radius: 10px;
    background: var(--fc-surface);
    color: var(--fc-muted);
    font-size: 13px;
    text-align: center;
}

body #fechamentoComandaModal .servicos-vazio i,
body #fechamentoComandaModal .produtos-vazio i {
    font-size: 14px;
    opacity: 0.7;
}

body #fechamentoComandaModal .produtos-vazio i {
    margin-right: 8px;
}

/* ========================================
   DESCONTO / CUPOM / GORJETA
   ======================================== */
body #fechamentoComandaModal .discount-tabs {
    border-bottom-color: var(--fc-divider) !important;
}

body #fechamentoComandaModal .discount-tabs .tab-btn {
    padding-top: 4px;
    padding-left: 2px;
    padding-right: 2px;
    font-size: 13.5px;
}

body #fechamentoComandaModal .desconto-controls,
body #fechamentoComandaModal .gorjeta-controls {
    gap: 10px;
}

body #fechamentoComandaModal .desconto-type,
body #fechamentoComandaModal .gorjeta-type {
    gap: 6px;
}

body #fechamentoComandaModal .desconto-btn,
body #fechamentoComandaModal .gorjeta-btn {
    min-height: 38px;
    padding: 6px 12px;
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--fc-text-2);
    font-size: 13.5px;
    font-weight: 500;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body #fechamentoComandaModal .desconto-btn:hover,
body #fechamentoComandaModal .gorjeta-btn:hover {
    background: var(--fc-surface);
    color: var(--fc-text);
}

body #fechamentoComandaModal .desconto-btn.active {
    border-color: var(--fc-primary);
    background: var(--fc-primary-tint);
    box-shadow: inset 0 0 0 1px var(--fc-primary);
    color: var(--fc-primary);
}

body #fechamentoComandaModal .gorjeta-btn.active {
    border-color: var(--fc-success);
    background: rgba(22, 163, 74, 0.08);
    box-shadow: inset 0 0 0 1px var(--fc-success);
    color: var(--fc-success-hover);
}

body #fechamentoComandaModal .desconto-input,
body #fechamentoComandaModal .gorjeta-input {
    gap: 0;
    min-height: 40px;
    padding: 0 12px 0 0;
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    background: #ffffff;
}

body #fechamentoComandaModal .desconto-input:focus-within,
body #fechamentoComandaModal .gorjeta-input:focus-within {
    border-color: var(--fc-primary);
    box-shadow: var(--fc-ring);
}

body #fechamentoComandaModal .desconto-input input,
body #fechamentoComandaModal .gorjeta-input input {
    height: 38px;
    padding: 6px 12px;
    color: var(--fc-text);
    font-size: 14px;
    font-weight: 500;
}

body #fechamentoComandaModal .desconto-input span,
body #fechamentoComandaModal .gorjeta-input span {
    padding-right: 0;
    color: var(--fc-muted);
    font-size: 13px;
    font-weight: 500;
}

body #fechamentoComandaModal .desconto-scope {
    gap: 10px;
    padding: 6px 6px 6px 12px;
    border: 1px solid var(--fc-border);
    border-radius: 10px;
    background: var(--fc-surface);
}

body #fechamentoComandaModal .desconto-scope > span {
    color: var(--fc-text-2);
    font-size: 12.5px;
    font-weight: 500;
}

body #fechamentoComandaModal .desconto-scope-btn {
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid var(--fc-border);
    border-radius: 6px;
    background: #ffffff;
    color: var(--fc-text-2);
    font-size: 13px;
    font-weight: 500;
}

body #fechamentoComandaModal .desconto-scope-btn.active {
    border-color: var(--fc-primary);
    background: var(--fc-primary-tint);
    color: var(--fc-primary);
}

body #fechamentoComandaModal #couponCodeInput {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    color: var(--fc-text);
    font-size: 14px;
    box-shadow: none;
}

body #fechamentoComandaModal #couponCodeInput:focus {
    border-color: var(--fc-primary);
    box-shadow: var(--fc-ring);
}

body #fechamentoComandaModal #btnApplyCoupon {
    flex-shrink: 0;
    min-height: 40px;
    font-size: 13.5px;
    font-weight: 500;
}

body #fechamentoComandaModal #couponMessage {
    font-size: 13px;
}

/* ========================================
   ALERTAS DO CLIENTE (crédito, cashback, dívidas, pacote)
   ======================================== */
body #fechamentoComandaModal .cliente-alerts {
    padding: 16px 20px 6px;
}

body #fechamentoComandaModal .alert-content {
    gap: 12px;
    margin-bottom: 10px;
    padding: 12px 12px 12px 14px;
    border: 1px solid;
    border-radius: 10px;
}

body #fechamentoComandaModal .alert-content > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
}

body #fechamentoComandaModal .credit-alert,
body #fechamentoComandaModal .cashback-alert {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

body #fechamentoComandaModal .credit-alert > i { background: var(--fc-success); }
body #fechamentoComandaModal .cashback-alert > i { background: #059669; }

body #fechamentoComandaModal .debt-alert {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

body #fechamentoComandaModal .debt-alert > i { background: var(--fc-danger); }

body #fechamentoComandaModal .alert-text {
    gap: 2px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.4;
}

body #fechamentoComandaModal .alert-text strong {
    font-size: 13.5px;
    font-weight: 500;
}

body #fechamentoComandaModal .alert-text small {
    font-size: 12.5px;
}

body #fechamentoComandaModal .btn-use-credit,
body #fechamentoComandaModal .btn-view-debts,
body #fechamentoComandaModal .btn-apply-cashback {
    flex-shrink: 0;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 12px;
    border: 0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    transition: background-color 0.15s ease;
}

body #fechamentoComandaModal .alert-content button i {
    margin: 0;
    font-size: 12px;
}

/* Ação do alerta: botão branco com a cor do alerta */
body #fechamentoComandaModal .btn-use-credit,
body #fechamentoComandaModal .btn-apply-cashback {
    border: 1px solid #bbf7d0;
    background: #ffffff;
    color: var(--fc-success-hover);
}

body #fechamentoComandaModal .btn-use-credit:hover,
body #fechamentoComandaModal .btn-apply-cashback:hover {
    border-color: #86efac;
    background: #dcfce7;
}

body #fechamentoComandaModal .btn-apply-cashback.is-remove {
    border-color: #fde68a;
    background: #ffffff;
    color: #b45309;
}

body #fechamentoComandaModal .btn-apply-cashback.is-remove:hover {
    background: #fef3c7;
}

body #fechamentoComandaModal .btn-view-debts {
    border: 1px solid #fecaca;
    background: #ffffff;
    color: #b91c1c;
}

body #fechamentoComandaModal .btn-view-debts:hover {
    border-color: #fca5a5;
    background: #fee2e2;
}

/* Pacote / plano */
body #fechamentoComandaModal .package-alert {
    gap: 12px;
    padding: 14px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    box-shadow: none;
    color: #78350f;
}

body #fechamentoComandaModal .package-alert-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: 0;
    border-radius: 8px;
    background: #f59e0b;
    box-shadow: none;
    color: #ffffff;
}

body #fechamentoComandaModal .package-alert-icon i {
    margin: 0;
    color: #ffffff;
    font-size: 14px;
}

body #fechamentoComandaModal .package-alert-body {
    gap: 10px;
}

body #fechamentoComandaModal .package-alert-text strong {
    font-size: 14px;
    font-weight: 500;
}

body #fechamentoComandaModal .package-alert-text span {
    font-size: 13px;
}

body #fechamentoComandaModal .package-status-badge {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
}

body #fechamentoComandaModal .package-commission-hint {
    padding: 8px 10px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #ffffff;
    font-size: 12.5px;
}

body #fechamentoComandaModal .package-metrics {
    gap: 8px;
}

body #fechamentoComandaModal .package-metric {
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

body #fechamentoComandaModal .package-metric small {
    font-size: 11px;
    font-weight: 500;
}

body #fechamentoComandaModal .package-metric strong {
    font-size: 14px;
    font-weight: 500;
}

/* ========================================
   RESUMO DE VALORES
   ======================================== */
body #fechamentoComandaModal .total-section {
    margin: 16px 20px;
    padding: 2px 14px;
    border: 1px solid var(--fc-border);
    border-radius: 12px;
    background: var(--fc-surface);
}

body #fechamentoComandaModal .total-breakdown {
    gap: 0;
}

body #fechamentoComandaModal .total-line {
    gap: 12px;
    padding: 9px 0;
    color: var(--fc-text-2);
    font-size: 13.5px;
}

body #fechamentoComandaModal .total-line + .total-line {
    border-top: 1px solid var(--fc-border);
}

body #fechamentoComandaModal .total-line > span:last-child {
    flex-shrink: 0;
    color: var(--fc-text);
    font-weight: 500;
    white-space: nowrap;
}

body #fechamentoComandaModal .desconto-line > span:last-child {
    color: var(--fc-danger);
}

body #fechamentoComandaModal .gorjeta-line > span:last-child {
    color: var(--fc-success-hover);
}

body #fechamentoComandaModal .pacote-line {
    color: var(--fc-text-2);
}

body #fechamentoComandaModal .pacote-badge {
    padding: 3px 8px;
    border-radius: 6px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 12.5px;
}

body #fechamentoComandaModal .total-line.total-final {
    padding: 12px 0;
    color: var(--fc-text);
    font-size: 14px;
}

body #fechamentoComandaModal .total-final > span:first-child strong {
    font-weight: 500;
}

body #fechamentoComandaModal .total-final #totalValue {
    color: var(--fc-text);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* ========================================
   FORMAS DE PAGAMENTO
   ======================================== */
body #fechamentoComandaModal .pagamento-methods {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

body #fechamentoComandaModal .payment-btn {
    --fc-pm: #64748b;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 50px;
    padding: 8px 10px;
    border: 1px solid var(--fc-border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--fc-text);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

body #fechamentoComandaModal .payment-btn[data-method="dinheiro"] { --fc-pm: #16a34a; }
body #fechamentoComandaModal .payment-btn[data-method="pix"] { --fc-pm: #0d9488; }
body #fechamentoComandaModal .payment-btn[data-method="credito"] { --fc-pm: #2563eb; }
body #fechamentoComandaModal .payment-btn[data-method="debito"] { --fc-pm: #7c3aed; }
body #fechamentoComandaModal .payment-btn[data-method="fiado"] { --fc-pm: #ea580c; }
body #fechamentoComandaModal .payment-btn[data-method="cliente_credito"] { --fc-pm: #db2777; }

body #fechamentoComandaModal .payment-btn > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--fc-pm);
    color: #ffffff;
    font-size: 13px;
}

body #fechamentoComandaModal .payment-btn > span {
    min-width: 0;
}

body #fechamentoComandaModal .payment-btn:hover {
    border-color: #d5d9e0;
    background: var(--fc-surface);
}

body #fechamentoComandaModal .payment-btn.selected {
    border-color: var(--fc-primary);
    background: var(--fc-primary-tint);
    box-shadow: inset 0 0 0 1px var(--fc-primary);
    color: var(--fc-text);
}

/* Marca de selecionado à direita */
body #fechamentoComandaModal .payment-btn.selected::after {
    content: "\f00c";
    margin-left: auto;
    padding-left: 4px;
    color: var(--fc-primary);
    font-family: "Font Awesome 6 Free";
    font-size: 12px;
    font-weight: 900;
}

/* Formas escolhidas */
body #fechamentoComandaModal .pagamentos-selecionados {
    gap: 8px;
}

body #fechamentoComandaModal .pagamento-selecionado {
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--fc-border);
    border-radius: 10px;
    background: #ffffff;
}

body #fechamentoComandaModal .pagamento-info {
    align-items: flex-start;
    gap: 10px;
}

body #fechamentoComandaModal .pagamento-info > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #64748b;
    color: #ffffff;
    font-size: 13px;
}

body #fechamentoComandaModal .pagamento-info > i.fa-money-bill-wave { background: #16a34a; }
body #fechamentoComandaModal .pagamento-info > i.fa-qrcode { background: #0d9488; }
body #fechamentoComandaModal .pagamento-info > i.fa-credit-card { background: #2563eb; }
body #fechamentoComandaModal .pagamento-info > i.fa-wallet { background: #db2777; }
body #fechamentoComandaModal .pagamento-info > i.fa-hand-holding-usd { background: #ea580c; }

body #fechamentoComandaModal .pagamento-info > div {
    flex: 1;
    min-width: 0;
}

body #fechamentoComandaModal .pagamento-info > div > span:first-child {
    display: flex;
    align-items: center;
    min-height: 30px;
    color: var(--fc-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

body #fechamentoComandaModal .pagamento-selecionado select.form-control {
    -webkit-appearance: menulist;
    appearance: auto;
    width: auto;
    max-width: 100%;
    min-height: 34px;
    padding: 4px 8px;
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    background-color: #ffffff;
    color: var(--fc-text);
    font-size: 13px;
    box-shadow: none;
}

body #fechamentoComandaModal .pagamento-selecionado select.form-control:focus {
    border-color: var(--fc-primary);
    box-shadow: var(--fc-ring);
}

body #fechamentoComandaModal .payment-fee-controls {
    gap: 8px;
    margin-top: 2px;
}

body #fechamentoComandaModal .payment-fee-control {
    gap: 3px;
    min-width: 120px;
}

body #fechamentoComandaModal .payment-fee-control > span,
body #fechamentoComandaModal .payment-fee-single-machine > span {
    color: var(--fc-muted);
    font-size: 11px;
    font-weight: 500;
}

body #fechamentoComandaModal .payment-fee-single-machine {
    justify-content: center;
    min-height: 34px;
    padding: 4px 10px;
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    background: var(--fc-surface);
}

body #fechamentoComandaModal .payment-fee-snapshot-preview {
    padding-bottom: 8px;
    color: #047857;
    font-size: 12.5px;
}

body #fechamentoComandaModal .payment-fee-selection-error {
    color: #b91c1c;
    font-size: 12.5px;
}

body #fechamentoComandaModal .pagamento-valor {
    flex-shrink: 0;
    gap: 6px;
}

body #fechamentoComandaModal .pagamento-valor input {
    width: 118px;
    height: 38px;
    padding: 6px 10px;
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--fc-text);
    font-size: 14px;
    font-weight: 500;
}

body #fechamentoComandaModal .pagamento-valor input:focus {
    outline: none;
    border-color: var(--fc-primary);
    box-shadow: var(--fc-ring);
}

body #fechamentoComandaModal .pagamento-valor input:disabled {
    background: var(--fc-surface);
    color: var(--fc-text-2);
}

body #fechamentoComandaModal .valor-restante {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13.5px;
}

body #fechamentoComandaModal .valor-restante strong {
    font-size: 15px;
    font-weight: 500;
}

body #fechamentoComandaModal .valor-excedente {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13.5px;
}

body #fechamentoComandaModal .valor-excedente-info strong {
    font-size: 15px;
    font-weight: 500;
}

body #fechamentoComandaModal .valor-excedente-actions {
    gap: 6px;
}

body #fechamentoComandaModal .btn-excedente {
    justify-content: center;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--fc-text);
    font-size: 13px;
    font-weight: 500;
}

body #fechamentoComandaModal .btn-excedente:hover {
    background: var(--fc-surface);
}

body #fechamentoComandaModal .btn-excedente-tip i { color: var(--fc-success); }
body #fechamentoComandaModal .btn-excedente-credit i { color: #2563eb; }

/* ========================================
   RODAPÉ
   ======================================== */
body #fechamentoComandaModal .fechamento-footer {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 20px;
    border-top: 1px solid var(--fc-divider);
    background: #ffffff;
}

body #fechamentoComandaModal .btn-cancelar,
body #fechamentoComandaModal .btn-finalizar,
body #fechamentoComandaModal .btn-nota-fiscal,
body #fechamentoComandaModal .btn-add-credit {
    flex: 0 0 auto;
    gap: 8px;
    min-height: 42px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body #fechamentoComandaModal .btn-cancelar i,
body #fechamentoComandaModal .btn-finalizar i,
body #fechamentoComandaModal .btn-nota-fiscal i,
body #fechamentoComandaModal .btn-add-credit i {
    font-size: 13px;
}

body #fechamentoComandaModal .btn-cancelar {
    border-color: var(--fc-border);
    background: #ffffff;
    color: var(--fc-text-2);
}

body #fechamentoComandaModal .btn-cancelar:hover {
    border-color: #d5d9e0;
    background: #f3f4f6;
    color: var(--fc-text);
}

body #fechamentoComandaModal .btn-add-credit {
    border-color: var(--fc-border);
    background: #ffffff;
    color: var(--fc-text);
}

body #fechamentoComandaModal .btn-add-credit i {
    color: var(--fc-success);
}

body #fechamentoComandaModal .btn-add-credit:hover {
    border-color: #d5d9e0;
    background: #f3f4f6;
    box-shadow: none;
    transform: none;
}

body #fechamentoComandaModal .btn-finalizar {
    flex: 1 1 auto;
    border-color: var(--fc-success);
    background: var(--fc-success);
    color: #ffffff;
}

body #fechamentoComandaModal .btn-finalizar:hover:not(:disabled) {
    border-color: var(--fc-success-hover);
    background: var(--fc-success-hover);
    box-shadow: none;
    transform: none;
}

body #fechamentoComandaModal .btn-nota-fiscal {
    border-color: #2563eb;
    background: #2563eb;
    color: #ffffff;
}

body #fechamentoComandaModal .btn-nota-fiscal:hover:not(:disabled) {
    border-color: #1d4ed8;
    background: #1d4ed8;
    box-shadow: none;
    transform: none;
}

body #fechamentoComandaModal .btn-finalizar:disabled,
body #fechamentoComandaModal .btn-nota-fiscal:disabled {
    border-color: #e5e7eb;
    background: #e5e7eb;
    color: #9ca3af;
    box-shadow: none;
}

/* Total fixo no rodapé (só telas estreitas; no desktop o resumo já aparece) */
body #fechamentoComandaModal .fechamento-footer-total {
    display: none;
}

/* ========================================
   PAINEL "PAGAMENTO JÁ COBERTO" (dividir / gorjeta / crédito)
   ======================================== */
body #fechamentoComandaModal .split-overlay {
    background: rgba(17, 24, 39, 0.45);
}

body #fechamentoComandaModal .payment-split-panel {
    width: min(560px, 100%);
    padding: 0;
    border: 1px solid var(--fc-border);
    border-radius: 14px;
    box-shadow: var(--fc-shadow);
}

body #fechamentoComandaModal .split-header {
    align-items: center;
    margin: 0;
    padding: 14px 14px 14px 20px;
    border-bottom: 1px solid var(--fc-divider);
}

body #fechamentoComandaModal .split-header strong {
    color: var(--fc-text);
    font-size: 16px;
    font-weight: 500;
}

body #fechamentoComandaModal .split-subtitle {
    margin-top: 2px;
    color: var(--fc-muted);
    font-size: 13px;
}

body #fechamentoComandaModal .split-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: var(--fc-muted);
    font-size: 15px;
}

body #fechamentoComandaModal .split-close:hover {
    background: #f3f4f6;
    color: var(--fc-text);
}

body #fechamentoComandaModal .split-body {
    padding: 16px 20px 6px;
}

body #fechamentoComandaModal .split-summary {
    gap: 8px;
}

body #fechamentoComandaModal .split-summary div {
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--fc-border);
    border-radius: 10px;
    background: var(--fc-surface);
    color: var(--fc-text-2);
    font-size: 12.5px;
}

body #fechamentoComandaModal .split-summary strong {
    color: var(--fc-text);
    font-size: 14px;
    font-weight: 500;
}

body #fechamentoComandaModal .split-mode {
    gap: 6px;
}

body #fechamentoComandaModal .split-mode-btn {
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--fc-text-2);
    font-size: 13px;
    font-weight: 500;
}

body #fechamentoComandaModal .split-mode-btn.active {
    border-color: var(--fc-primary);
    background: var(--fc-primary-tint);
    box-shadow: inset 0 0 0 1px var(--fc-primary);
    color: var(--fc-primary);
}

body #fechamentoComandaModal .split-input label {
    color: var(--fc-text-2);
    font-size: 13px;
    font-weight: 500;
}

body #fechamentoComandaModal .split-input input {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    color: var(--fc-text);
    font-size: 15px;
    font-weight: 500;
}

body #fechamentoComandaModal .split-input input:focus {
    outline: none;
    border-color: var(--fc-primary);
    box-shadow: var(--fc-ring);
}

body #fechamentoComandaModal .split-hint {
    color: var(--fc-muted);
    font-size: 12.5px;
}

body #fechamentoComandaModal .split-quick {
    gap: 6px;
}

body #fechamentoComandaModal .split-chip {
    min-height: 32px;
    padding: 4px 12px;
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--fc-text-2);
    font-size: 13px;
    font-weight: 500;
}

body #fechamentoComandaModal .split-chip:hover {
    background: var(--fc-surface);
    color: var(--fc-text);
}

body #fechamentoComandaModal .split-preview {
    padding: 2px 12px;
    border: 1px solid var(--fc-border);
    border-radius: 10px;
    background: var(--fc-surface);
}

body #fechamentoComandaModal .split-preview-row {
    padding: 8px 0;
    color: var(--fc-text-2);
    font-size: 13.5px;
}

body #fechamentoComandaModal .split-preview-row + .split-preview-row {
    border-top: 1px solid var(--fc-border);
}

body #fechamentoComandaModal .split-preview-row strong {
    color: var(--fc-text);
}

body #fechamentoComandaModal .split-actions {
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 12px 20px;
    border-top: 1px solid var(--fc-divider);
    background: var(--fc-surface);
}

body #fechamentoComandaModal .split-btn {
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
}

body #fechamentoComandaModal .split-btn-secondary {
    border-color: var(--fc-border);
    background: #ffffff;
    color: var(--fc-text-2);
}

body #fechamentoComandaModal .split-btn-primary {
    background: var(--fc-primary);
    color: #ffffff;
}

body #fechamentoComandaModal .split-btn-tip {
    background: var(--fc-success);
    color: #ffffff;
}

body #fechamentoComandaModal .split-btn-credit {
    background: #2563eb;
    color: #ffffff;
}

/* ========================================
   SUB-MODAIS: adicionar produto/serviço, NF-e, cliente, crédito, dívidas
   ======================================== */
body #fechamentoComandaModal .produtos-modal,
body #fechamentoComandaModal .servicos-modal,
body #fechamentoComandaModal .nota-fiscal-modal,
body #fechamentoComandaModal .cliente-info-modal,
body #fechamentoComandaModal .credit-modal,
body #fechamentoComandaModal .debts-modal {
    background: rgba(17, 24, 39, 0.45);
}

body #fechamentoComandaModal .produtos-modal-content,
body #fechamentoComandaModal .servicos-modal-content,
body #fechamentoComandaModal .nota-fiscal-modal-content,
body #fechamentoComandaModal .cliente-info-modal-content,
body #fechamentoComandaModal .credit-modal-content,
body #fechamentoComandaModal .debts-modal-content {
    display: flex;
    flex-direction: column;
    width: calc(100% - 32px);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    border: 1px solid var(--fc-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: var(--fc-shadow);
}

body #fechamentoComandaModal .produtos-modal-content,
body #fechamentoComandaModal .servicos-modal-content {
    max-width: 480px;
    height: min(680px, calc(100vh - 48px));
    height: min(680px, calc(100dvh - 48px));
}

body #fechamentoComandaModal .nota-fiscal-modal-content {
    max-width: 620px;
    height: min(860px, calc(100dvh - 48px));
}

body #fechamentoComandaModal .produtos-modal-header,
body #fechamentoComandaModal .servicos-modal-header,
body #fechamentoComandaModal .nota-fiscal-modal-header,
body #fechamentoComandaModal .cliente-info-modal-header,
body #fechamentoComandaModal .credit-modal-header,
body #fechamentoComandaModal .debts-modal-header {
    flex-shrink: 0;
    gap: 12px;
    padding: 14px 14px 14px 20px;
    border-bottom: 1px solid var(--fc-divider);
    background: #ffffff;
    color: var(--fc-text);
}

body #fechamentoComandaModal .produtos-modal-header h5,
body #fechamentoComandaModal .servicos-modal-header h5,
body #fechamentoComandaModal .nota-fiscal-modal-header h5,
body #fechamentoComandaModal .cliente-info-modal-header h5,
body #fechamentoComandaModal .credit-modal-header h5,
body #fechamentoComandaModal .debts-modal-header h5 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--fc-text);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

body #fechamentoComandaModal .nota-fiscal-modal-header h5 > i,
body #fechamentoComandaModal .cliente-info-modal-header h5 > i,
body #fechamentoComandaModal .credit-modal-header h5 > i,
body #fechamentoComandaModal .debts-modal-header h5 > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #ffffff;
    font-size: 13px;
}

body #fechamentoComandaModal .nota-fiscal-modal-header h5 > i { background: #2563eb; }
body #fechamentoComandaModal .cliente-info-modal-header h5 > i { background: var(--fc-primary); }
body #fechamentoComandaModal .credit-modal-header h5 > i { background: var(--fc-success); }
body #fechamentoComandaModal .debts-modal-header h5 > i { background: var(--fc-danger); }

body #fechamentoComandaModal .produtos-modal-close,
body #fechamentoComandaModal .servicos-modal-close,
body #fechamentoComandaModal .nota-fiscal-modal-close,
body #fechamentoComandaModal .cliente-info-modal-close,
body #fechamentoComandaModal .credit-modal-close,
body #fechamentoComandaModal .debts-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--fc-muted);
    font-size: 15px;
}

body #fechamentoComandaModal .produtos-modal-close:hover,
body #fechamentoComandaModal .servicos-modal-close:hover,
body #fechamentoComandaModal .nota-fiscal-modal-close:hover,
body #fechamentoComandaModal .cliente-info-modal-close:hover,
body #fechamentoComandaModal .credit-modal-close:hover,
body #fechamentoComandaModal .debts-modal-close:hover {
    background: #f3f4f6;
    color: var(--fc-text);
}

body #fechamentoComandaModal .produtos-modal-body,
body #fechamentoComandaModal .servicos-modal-body {
    flex: 1;
    height: auto;
    max-height: none;
    min-height: 0;
    padding: 16px 20px;
}

body #fechamentoComandaModal .nota-fiscal-modal-body,
body #fechamentoComandaModal .cliente-info-modal-body,
body #fechamentoComandaModal .credit-modal-body,
body #fechamentoComandaModal .debts-modal-body {
    padding: 18px 20px;
}

/* Campos dos sub-modais */
body #fechamentoComandaModal .form-group {
    margin-bottom: 14px;
}

body #fechamentoComandaModal .form-group label {
    margin-bottom: 6px;
    color: var(--fc-text-2);
    font-size: 13px;
    font-weight: 500;
}

body #fechamentoComandaModal .produto-search .form-control,
body #fechamentoComandaModal .servico-search .form-control,
body #fechamentoComandaModal .form-group .form-control,
body #fechamentoComandaModal .nf-observacoes .form-control {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    background-color: #ffffff;
    color: var(--fc-text);
    font-size: 14px;
    box-shadow: none;
}

body #fechamentoComandaModal .produto-search .form-control:focus,
body #fechamentoComandaModal .servico-search .form-control:focus,
body #fechamentoComandaModal .form-group .form-control:focus,
body #fechamentoComandaModal .nf-observacoes .form-control:focus {
    border-color: var(--fc-primary);
    box-shadow: var(--fc-ring);
}

body #fechamentoComandaModal .form-group select.form-control {
    -webkit-appearance: menulist;
    appearance: auto;
}

body #fechamentoComandaModal .produto-search,
body #fechamentoComandaModal .servico-search {
    margin-bottom: 12px;
}

/* Listas de escolha (produtos / serviços) */
body #fechamentoComandaModal .produtos-grid,
body #fechamentoComandaModal .servicos-grid {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--fc-border);
    border-radius: 10px;
}

body #fechamentoComandaModal .produtos-grid:not(:has(> *)),
body #fechamentoComandaModal .servicos-grid:not(:has(> *)) {
    border: 0;
}

body #fechamentoComandaModal .produto-option,
body #fechamentoComandaModal .servico-option {
    gap: 12px;
    min-height: 52px;
    padding: 10px 12px;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    color: var(--fc-text-2);
    font-size: 13px;
    transition: background-color 0.15s ease;
}

body #fechamentoComandaModal .produto-option + .produto-option,
body #fechamentoComandaModal .servico-option + .servico-option {
    border-top: 1px solid var(--fc-divider);
}

body #fechamentoComandaModal .produto-option strong,
body #fechamentoComandaModal .servico-option strong {
    color: var(--fc-text);
    font-size: 14px;
    font-weight: 500;
}

body #fechamentoComandaModal .produto-option:hover,
body #fechamentoComandaModal .servico-option:hover {
    background: var(--fc-surface);
}

body #fechamentoComandaModal .servico-option.added,
body #fechamentoComandaModal .servico-option.primary-service {
    border-style: solid;
    background: var(--fc-surface);
}

body #fechamentoComandaModal .servico-option.quantity-target {
    border-style: solid;
    background: #fffbeb;
}

body #fechamentoComandaModal .produto-option.produto-out-of-stock {
    background: #fef2f2;
}

body #fechamentoComandaModal .produto-preco,
body #fechamentoComandaModal .servico-preco {
    flex-shrink: 0;
    color: var(--fc-text);
    font-size: 13.5px;
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
}

body #fechamentoComandaModal .servico-option.added .servico-preco,
body #fechamentoComandaModal .servico-option.primary-service .servico-preco,
body #fechamentoComandaModal .servico-option.quantity-target .servico-preco {
    color: var(--fc-success-hover);
}

/* NF-e */
body #fechamentoComandaModal .nf-client-info,
body #fechamentoComandaModal .nf-address-info,
body #fechamentoComandaModal .nf-observacoes,
body #fechamentoComandaModal .nf-resumo {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom-color: var(--fc-divider);
}

body #fechamentoComandaModal .nf-client-info h6,
body #fechamentoComandaModal .nf-address-info h6,
body #fechamentoComandaModal .nf-observacoes h6,
body #fechamentoComandaModal .nf-resumo h6 {
    margin-bottom: 12px;
    color: var(--fc-text);
    font-size: 14px;
    font-weight: 500;
}

body #fechamentoComandaModal .nf-resumo-content {
    padding: 2px 14px;
    border: 1px solid var(--fc-border);
    border-radius: 12px;
    background: var(--fc-surface);
}

body #fechamentoComandaModal .nf-resumo-line {
    margin: 0;
    padding: 9px 0;
    color: var(--fc-text-2);
    font-size: 13.5px;
}

body #fechamentoComandaModal .nf-resumo-line + .nf-resumo-line {
    border-top: 1px solid var(--fc-border);
}

body #fechamentoComandaModal .nf-resumo-line.nf-total {
    margin: 0;
    padding: 12px 0;
    color: var(--fc-text);
    font-size: 15px;
}

body #fechamentoComandaModal .nf-footer-buttons,
body #fechamentoComandaModal .credit-footer-buttons,
body #fechamentoComandaModal .debts-footer-buttons {
    justify-content: flex-end;
    gap: 8px;
    padding-top: 14px;
    border-top-color: var(--fc-divider);
}

body #fechamentoComandaModal .btn-nf-cancelar,
body #fechamentoComandaModal .btn-nf-emitir,
body #fechamentoComandaModal .btn-credit-cancelar,
body #fechamentoComandaModal .btn-credit-add,
body #fechamentoComandaModal .btn-debts-close {
    flex: 0 1 auto;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: none;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

body #fechamentoComandaModal .btn-nf-cancelar,
body #fechamentoComandaModal .btn-credit-cancelar {
    border-color: var(--fc-border);
    background: #ffffff;
    color: var(--fc-text-2);
}

body #fechamentoComandaModal .btn-nf-cancelar:hover,
body #fechamentoComandaModal .btn-credit-cancelar:hover {
    border-color: #d5d9e0;
    background: #f3f4f6;
    color: var(--fc-text);
}

body #fechamentoComandaModal .btn-nf-emitir { background: #2563eb; color: #ffffff; }
body #fechamentoComandaModal .btn-nf-emitir:hover { background: #1d4ed8; box-shadow: none; transform: none; }
body #fechamentoComandaModal .btn-credit-add { background: var(--fc-success); color: #ffffff; }
body #fechamentoComandaModal .btn-credit-add:hover { background: var(--fc-success-hover); box-shadow: none; transform: none; }
body #fechamentoComandaModal .btn-debts-close { background: var(--fc-danger); color: #ffffff; }
body #fechamentoComandaModal .btn-debts-close:hover { background: #b91c1c; box-shadow: none; transform: none; }

/* Crédito / dívidas */
body #fechamentoComandaModal .customer-info {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--fc-border);
    border-radius: 10px;
    background: var(--fc-surface);
    font-size: 13.5px;
}

body #fechamentoComandaModal .customer-info h6 {
    margin-bottom: 4px;
    color: var(--fc-text);
    font-size: 14px;
    font-weight: 500;
}

body #fechamentoComandaModal .debts-list {
    margin: 12px 0;
}

body #fechamentoComandaModal .debt-item {
    margin-bottom: 6px;
    padding: 10px 12px;
    border-color: #fecaca;
    border-radius: 8px;
    font-size: 13.5px;
}

body #fechamentoComandaModal .debt-item-amount {
    font-size: 15px;
    font-weight: 500;
}

body #fechamentoComandaModal .total-debts {
    padding: 12px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    font-size: 15px;
}

/* Informações do cliente */
body #fechamentoComandaModal .cliente-info-header {
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px;
    border-color: var(--fc-border);
    border-radius: 10px;
    background: var(--fc-surface);
}

body #fechamentoComandaModal .cliente-modal-avatar {
    width: 52px;
    height: 52px;
    box-shadow: none;
}

body #fechamentoComandaModal .cliente-basic-info h4 {
    margin-bottom: 4px;
    color: var(--fc-text);
    font-size: 16px;
    font-weight: 500;
}

body #fechamentoComandaModal .cliente-info-section h6 {
    color: var(--fc-text);
    font-size: 14px;
    font-weight: 500;
}

body #fechamentoComandaModal .cliente-info-section h6 > i {
    color: var(--fc-muted);
}

body #fechamentoComandaModal .cliente-info-grid {
    gap: 8px;
}

body #fechamentoComandaModal .cliente-info-item {
    padding: 8px 12px;
    border-color: var(--fc-border);
    border-radius: 8px;
    background: var(--fc-surface);
}

body #fechamentoComandaModal .cliente-info-item label {
    color: var(--fc-muted);
    font-size: 11px;
    font-weight: 500;
}

body #fechamentoComandaModal .cliente-info-item div {
    color: var(--fc-text);
    font-size: 13.5px;
}

body #fechamentoComandaModal .cliente-info-badge,
body #fechamentoComandaModal .cliente-info-tag {
    border-radius: 6px;
}

/* ========================================
   TELAS ESTREITAS (≤ 768px): total fixo no rodapé
   O "Cancelar" do rodapé já fica oculto aqui (fechar pelo X do topo).
   ======================================== */
@media (max-width: 768px) {
    body #fechamentoComandaModal .fechamento-footer-total {
        display: flex;
        flex: 1 0 100%;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 0 2px;
    }

    body #fechamentoComandaModal .fechamento-footer-total span {
        color: var(--fc-text-2);
        font-size: 13.5px;
        font-weight: 500;
    }

    body #fechamentoComandaModal .fechamento-footer-total strong {
        color: var(--fc-text);
        font-size: 20px;
        font-weight: 500;
        letter-spacing: -0.01em;
    }

    body #fechamentoComandaModal .fechamento-footer {
        padding: 10px 20px 12px;
    }

    body #fechamentoComandaModal .btn-finalizar,
    body #fechamentoComandaModal .btn-nota-fiscal,
    body #fechamentoComandaModal .btn-add-credit {
        min-height: 44px;
        box-shadow: none;
    }
}

/* ========================================
   CELULAR (≤ 576px): folha em tela cheia
   Cabeçalho no topo, corpo rolável, total + Finalizar sempre visíveis.
   ======================================== */
@media (max-width: 576px) {
    body #fechamentoComandaModal .fechamento-container {
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        min-height: 0;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body #fechamentoComandaModal .fechamento-header {
        padding: 8px 6px 8px 16px;
        padding-top: calc(8px + env(safe-area-inset-top, 0px));
    }

    body #fechamentoComandaModal .fechamento-close {
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    body #fechamentoComandaModal #edicaoFinalizadaBanner,
    body #fechamentoComandaModal #consumoAbertoBanner {
        margin-left: 16px;
        margin-right: 16px;
    }

    body #fechamentoComandaModal .resumo-atendimento,
    body #fechamentoComandaModal .servicos-adicionais,
    body #fechamentoComandaModal .produtos-adicionais,
    body #fechamentoComandaModal .desconto-section,
    body #fechamentoComandaModal .gorjeta-section,
    body #fechamentoComandaModal .pagamento-section {
        padding: 16px;
    }

    body #fechamentoComandaModal .cliente-alerts {
        padding: 14px 16px 4px;
    }

    body #fechamentoComandaModal .total-section {
        margin: 14px 16px;
    }

    /* Botões de toque ≥ 44px */
    body #fechamentoComandaModal .btn-adicionar-servico,
    body #fechamentoComandaModal .btn-adicionar-produto,
    body #fechamentoComandaModal .agendamento-context-btn,
    body #fechamentoComandaModal .desconto-btn,
    body #fechamentoComandaModal .gorjeta-btn,
    body #fechamentoComandaModal .btn-use-credit,
    body #fechamentoComandaModal .btn-view-debts,
    body #fechamentoComandaModal .btn-apply-cashback,
    body #fechamentoComandaModal .btn-excedente,
    body #fechamentoComandaModal .btn-ajuste,
    body #fechamentoComandaModal #btnApplyCoupon {
        min-height: 44px;
        font-size: 14px;
    }

    body #fechamentoComandaModal .btn-adicionar-servico,
    body #fechamentoComandaModal .btn-adicionar-produto {
        padding: 8px 14px;
    }

    body #fechamentoComandaModal .discount-tabs .tab-btn {
        min-height: 40px;
        font-size: 14px;
    }

    body #fechamentoComandaModal .section-header h6 {
        font-size: 14.5px;
    }

    /* Cliente */
    body #fechamentoComandaModal .cliente-avatar {
        width: 44px;
        height: 44px;
    }

    body #fechamentoComandaModal .cliente-info-btn {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    /* Ações do agendamento na largura toda (sai do recuo do avatar) */
    body #fechamentoComandaModal .agendamento-context-actions {
        flex-direction: column;
        align-self: stretch;
        align-items: stretch;
        width: auto;
        margin-left: -56px;
        padding: 10px;
    }

    body #fechamentoComandaModal .agendamento-context-buttons {
        flex-direction: row;
        gap: 8px;
    }

    body #fechamentoComandaModal .agendamento-context-btn {
        flex: 1 1 0;
    }

    /* Itens: texto em cima, ações embaixo (quantidade à esquerda) */
    body #fechamentoComandaModal .servico-principal {
        padding: 12px;
    }

    body #fechamentoComandaModal .servico-principal .servico-item,
    body #fechamentoComandaModal .servico-item-row,
    body #fechamentoComandaModal .produtos-lista > .produto-item {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    body #fechamentoComandaModal .servico-text,
    body #fechamentoComandaModal .servico-info,
    body #fechamentoComandaModal .produto-info {
        flex: 1 1 100%;
    }

    body #fechamentoComandaModal .servico-actions,
    body #fechamentoComandaModal .servico-item-actions,
    body #fechamentoComandaModal .produto-actions {
        flex: 1 1 100%;
        justify-content: flex-end;
        align-self: auto;
        margin: 0;
    }

    body #fechamentoComandaModal .servico-actions > .servico-qty-control,
    body #fechamentoComandaModal .servico-item-actions > .servico-qty-control,
    body #fechamentoComandaModal .produto-actions > .servico-qty-control {
        margin-right: auto;
    }

    body #fechamentoComandaModal .servicos-lista > .servico-item,
    body #fechamentoComandaModal .produtos-lista > .produto-item {
        padding: 12px;
    }

    body #fechamentoComandaModal .servico-qty-control {
        height: 44px;
    }

    body #fechamentoComandaModal .servico-qty-btn {
        width: 38px;
        height: 38px;
        font-size: 12px;
    }

    body #fechamentoComandaModal .servico-qty-value {
        min-width: 32px;
        font-size: 14px;
    }

    body #fechamentoComandaModal .servico-action,
    body #fechamentoComandaModal .servico-remove,
    body #fechamentoComandaModal .produto-remove {
        width: 44px;
        height: 44px;
        font-size: 15px;
    }

    body #fechamentoComandaModal .servico-ajuste-actions .btn-ajuste {
        flex: 1 1 0;
    }

    /* Desconto / gorjeta: opções lado a lado */
    body #fechamentoComandaModal .desconto-type,
    body #fechamentoComandaModal .gorjeta-type {
        flex-direction: row;
    }

    body #fechamentoComandaModal .desconto-btn,
    body #fechamentoComandaModal .gorjeta-btn {
        padding: 6px 8px;
        white-space: nowrap;
    }

    body #fechamentoComandaModal .desconto-btn[data-type="none"],
    body #fechamentoComandaModal .gorjeta-btn[data-type="none"] {
        flex-grow: 1.6;
    }

    body #fechamentoComandaModal .desconto-scope {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px;
    }

    body #fechamentoComandaModal .desconto-scope-btn {
        min-height: 40px;
        font-size: 13.5px;
    }

    /* Campos: 44px e 16px (evita zoom automático do iOS ao focar) */
    body #fechamentoComandaModal .desconto-input,
    body #fechamentoComandaModal .gorjeta-input,
    body #fechamentoComandaModal .servico-ajuste-input {
        min-height: 44px;
    }

    body #fechamentoComandaModal .desconto-input input,
    body #fechamentoComandaModal .gorjeta-input input,
    body #fechamentoComandaModal .servico-ajuste-input input {
        height: 42px;
        font-size: 16px;
    }

    body #fechamentoComandaModal .servico-ajuste-field textarea,
    body #fechamentoComandaModal #couponCodeInput,
    body #fechamentoComandaModal .split-input input,
    body #fechamentoComandaModal .produto-search .form-control,
    body #fechamentoComandaModal .servico-search .form-control,
    body #fechamentoComandaModal .form-group .form-control,
    body #fechamentoComandaModal .nf-observacoes .form-control {
        min-height: 44px;
        font-size: 16px;
    }

    /* Alertas: botão em linha própria */
    body #fechamentoComandaModal .alert-content {
        flex-wrap: wrap;
    }

    body #fechamentoComandaModal .alert-content > .alert-text {
        flex: 1 1 0;
    }

    body #fechamentoComandaModal .alert-content > button {
        flex: 1 1 100%;
    }

    body #fechamentoComandaModal .package-alert {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    body #fechamentoComandaModal .package-alert-header {
        flex-direction: row;
        align-items: flex-start;
    }

    body #fechamentoComandaModal .package-metrics {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    body #fechamentoComandaModal .package-metric {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    /* Resumo */
    body #fechamentoComandaModal .total-line {
        font-size: 14px;
    }

    body #fechamentoComandaModal .total-final #totalValue {
        font-size: 20px;
    }

    /* Formas de pagamento: 2 colunas */
    body #fechamentoComandaModal .pagamento-methods {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body #fechamentoComandaModal .payment-btn {
        min-height: 52px;
        padding: 8px 10px;
        font-size: 14px;
    }

    body #fechamentoComandaModal .payment-btn i {
        font-size: 13px;
    }

    body #fechamentoComandaModal .pagamento-selecionado {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
    }

    body #fechamentoComandaModal .pagamento-valor {
        align-self: stretch;
        justify-content: flex-end;
        gap: 8px;
    }

    body #fechamentoComandaModal .pagamento-valor input {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        height: 44px;
        font-size: 16px;
    }

    body #fechamentoComandaModal .pagamento-selecionado select.form-control {
        width: 100%;
        min-height: 44px;
        font-size: 16px;
    }

    body #fechamentoComandaModal .payment-fee-control {
        flex: 1 1 130px;
    }

    body #fechamentoComandaModal .payment-fee-single-machine {
        flex: 1 1 130px;
        min-height: 44px;
    }

    body #fechamentoComandaModal .valor-excedente-actions .btn-excedente {
        flex: 1 1 0;
    }

    /* Rodapé fixo: total + ações */
    body #fechamentoComandaModal .fechamento-footer {
        flex-direction: row;
        gap: 8px;
        margin: 0;
        padding: 10px 16px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    body #fechamentoComandaModal .btn-finalizar,
    body #fechamentoComandaModal .btn-nota-fiscal,
    body #fechamentoComandaModal .btn-add-credit {
        min-height: 48px;
        padding: 8px 14px;
        font-size: 15px;
    }

    body #fechamentoComandaModal .btn-add-credit {
        font-size: 14px;
    }

    /* Painel de divisão: folha inferior */
    body #fechamentoComandaModal .split-overlay {
        align-items: flex-end;
        padding: 0;
    }

    body #fechamentoComandaModal .payment-split-panel {
        width: 100%;
        max-height: 92dvh;
        padding: 0;
        border: 0;
        border-radius: 14px 14px 0 0;
    }

    body #fechamentoComandaModal .split-header {
        padding: 8px 6px 8px 16px;
    }

    body #fechamentoComandaModal .split-close {
        width: 44px;
        height: 44px;
    }

    body #fechamentoComandaModal .split-body {
        padding: 14px 16px 4px;
    }

    /* Resumo do painel em linhas (rótulo à esquerda, valor à direita) */
    body #fechamentoComandaModal .split-summary {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 2px 12px;
        border: 1px solid var(--fc-border);
        border-radius: 10px;
        background: var(--fc-surface);
    }

    body #fechamentoComandaModal .split-summary div {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-size: 13.5px;
    }

    body #fechamentoComandaModal .split-summary div + div {
        border-top: 1px solid var(--fc-border);
    }

    body #fechamentoComandaModal .split-summary strong {
        text-align: right;
    }

    body #fechamentoComandaModal .split-mode-btn {
        min-height: 44px;
        font-size: 14px;
    }

    body #fechamentoComandaModal .split-chip {
        flex: 1 1 0;
        min-height: 44px;
    }

    body #fechamentoComandaModal .split-preview-row {
        flex-direction: row;
        align-items: center;
    }

    body #fechamentoComandaModal .split-actions {
        flex-direction: row;
        padding: 10px 16px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    body #fechamentoComandaModal .split-btn {
        flex: 1 1 0;
        min-height: 48px;
        font-size: 15px;
    }

    /* Sub-modais em tela cheia (listas / NF-e / cliente) */
    body #fechamentoComandaModal .produtos-modal-content,
    body #fechamentoComandaModal .servicos-modal-content,
    body #fechamentoComandaModal .nota-fiscal-modal-content,
    body #fechamentoComandaModal .cliente-info-modal-content {
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* Crédito / dívidas: folha inferior */
    body #fechamentoComandaModal .credit-modal,
    body #fechamentoComandaModal .debts-modal {
        align-items: flex-end;
    }

    body #fechamentoComandaModal .credit-modal-content,
    body #fechamentoComandaModal .debts-modal-content {
        width: 100%;
        max-width: none;
        max-height: 92dvh;
        border: 0;
        border-radius: 14px 14px 0 0;
    }

    body #fechamentoComandaModal .produtos-modal-header,
    body #fechamentoComandaModal .servicos-modal-header,
    body #fechamentoComandaModal .nota-fiscal-modal-header,
    body #fechamentoComandaModal .cliente-info-modal-header,
    body #fechamentoComandaModal .credit-modal-header,
    body #fechamentoComandaModal .debts-modal-header {
        padding: 8px 6px 8px 16px;
    }

    body #fechamentoComandaModal .produtos-modal-close,
    body #fechamentoComandaModal .servicos-modal-close,
    body #fechamentoComandaModal .nota-fiscal-modal-close,
    body #fechamentoComandaModal .cliente-info-modal-close,
    body #fechamentoComandaModal .credit-modal-close,
    body #fechamentoComandaModal .debts-modal-close {
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    body #fechamentoComandaModal .produtos-modal-body,
    body #fechamentoComandaModal .servicos-modal-body {
        padding: 14px 16px;
    }

    body #fechamentoComandaModal .nota-fiscal-modal-body,
    body #fechamentoComandaModal .cliente-info-modal-body,
    body #fechamentoComandaModal .credit-modal-body,
    body #fechamentoComandaModal .debts-modal-body {
        padding: 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    body #fechamentoComandaModal .produto-option,
    body #fechamentoComandaModal .servico-option {
        min-height: 56px;
        padding: 10px 12px;
        font-size: 13px;
    }

    body #fechamentoComandaModal .form-row {
        flex-wrap: wrap;
        gap: 0 10px;
    }

    body #fechamentoComandaModal .nf-footer-buttons > button,
    body #fechamentoComandaModal .credit-footer-buttons > button,
    body #fechamentoComandaModal .debts-footer-buttons > button {
        flex: 1 1 0;
        gap: 6px;
        min-height: 48px;
        padding: 8px 10px;
        white-space: nowrap;
    }

    body #fechamentoComandaModal .cliente-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ========================================
   FATURAMENTO AGRUPADO (agenda: .billing-overlay, css/agenda/billing-modal.css)
   Já tem layout próprio e folha em tela cheia no celular; aqui só
   alinhamos ao padrão v2: sem degradês, sem sombras coloridas,
   sem movimento no hover.
   ======================================== */
body .billing-overlay {
    background: rgba(17, 24, 39, 0.45);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body .billing-overlay .billing-modal {
    border: 1px solid var(--v2-card-border, #e7e9ee);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(16, 24, 40, 0.18);
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body .billing-overlay .billing-header {
    padding: 14px 14px 14px 20px;
    border-bottom-color: var(--v2-card-divider, #eef0f3);
}

body .billing-overlay .billing-title {
    color: var(--v2-text, #111827);
    font-size: 16px;
}

body .billing-overlay .billing-title-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #16a34a;
    font-size: 13px;
}

body .billing-overlay .billing-subtitle {
    padding-left: 40px;
    font-size: 13px;
}

body .billing-overlay .billing-close {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: transparent;
    color: var(--v2-muted, #6b7482);
    font-size: 15px;
}

body .billing-overlay .billing-close:hover {
    background: #f3f4f6;
    color: var(--v2-text, #111827);
    transform: none;
}

body .billing-overlay .billing-metric,
body .billing-overlay .billing-panel {
    border-color: var(--v2-card-border, #e7e9ee);
    background: var(--v2-surface, #f7f8fa);
}

body .billing-overlay .billing-metric:last-child .billing-metric-value {
    color: var(--v2-text, #111827);
    font-weight: 500;
}

body .billing-overlay .billing-item:hover {
    box-shadow: none;
}

body .billing-overlay .billing-complete-options button:hover {
    transform: none;
}

body .billing-overlay .billing-progress-fill {
    background: var(--primary-color, #3b82f6);
}

body .billing-overlay .billing-footer {
    padding: 12px 20px;
    border-top-color: var(--v2-card-divider, #eef0f3);
}

body .billing-overlay .billing-btn {
    min-height: 40px;
    padding: 8px 16px;
    border-color: var(--v2-card-border, #e7e9ee);
    border-radius: 8px;
    font-size: 14px;
}

body .billing-overlay .billing-btn.is-primary {
    border-color: #16a34a;
    background: #16a34a;
    box-shadow: none;
    color: #ffffff;
}

body .billing-overlay .billing-btn.is-primary:hover:not(:disabled) {
    border-color: #15803d;
    background: #15803d;
    box-shadow: none;
    transform: none;
}

@media (max-width: 600px) {
    body .billing-overlay .billing-modal {
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body .billing-overlay .billing-header {
        padding: 8px 6px 8px 16px;
        padding-top: calc(8px + env(safe-area-inset-top, 0px));
    }

    body .billing-overlay .billing-subtitle {
        padding-left: 0;
    }

    body .billing-overlay .billing-close {
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    body .billing-overlay .billing-footer {
        padding: 10px 16px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        box-shadow: none;
    }

    body .billing-overlay .billing-btn {
        min-height: 48px;
        font-size: 15px;
    }

    /* Resumo do topo em linhas (antes: 3 cartões empilhados) */
    body .billing-overlay .billing-metrics {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 2px 14px;
        border: 1px solid var(--v2-card-border, #e7e9ee);
        border-radius: 12px;
        background: var(--v2-surface, #f7f8fa);
    }

    body .billing-overlay .billing-metric {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        grid-column: auto;
        padding: 9px 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    body .billing-overlay .billing-metric + .billing-metric {
        border-top: 1px solid var(--v2-card-border, #e7e9ee);
    }

    body .billing-overlay .billing-metric-label {
        margin: 0;
        font-size: 12px;
    }

    body .billing-overlay .billing-metric-value {
        font-size: 15px;
    }
}