/* ==========================================================================
   PACOTES PRÉ-PAGOS (Fase J)

   A tabela reaproveita `.sales-table` e os cards `.sales-metrics-grid` — mesma
   família de tela das outras abas de Vendas (dinheiro, histórico, filtros).
   ========================================================================== */

/* --- Barra de progresso na tabela ------------------------------------------ */

/* Enche conforme o cliente USA os créditos (não conforme sobram): a leitura
   natural de uma barra é "quanto já foi", e é isso que o dono quer ver de
   relance — um pacote quase cheio é um pacote quase esgotado. O rótulo ao lado
   diz o número que interessa ao balcão, que é quanto ainda resta. */
.pkg-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 140px;
}

.pkg-progress-track {
    flex: 1;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    overflow: hidden;
}

.pkg-progress-fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--primary);
    transition: width 0.25s ease;
}

.pkg-progress-fill.pkg-progress-completa { background: var(--text-muted); }

.pkg-progress-label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* O serviço que o crédito paga, embaixo do nome do pacote. "Pacote 4 Cortes"
   não diz sozinho o que ele paga quando o salão tem Corte Simples e Corte
   Degradê — e é essa distinção que decide se o crédito serve hoje. */
.pkg-alvo {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 11px;
}

/* --- Resumo dentro do modal de histórico ----------------------------------- */

.pkg-historico-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
}

.pkg-historico-resumo span {
    display: block;
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pkg-historico-resumo strong {
    color: var(--text-main);
    font-size: 13px;
}

/* --- Aviso de crédito disponível, dentro do checkout ----------------------- */

/* Roxo, e não verde: o banner de fidelidade logo acima usa o verde de
   "benefício liberado", e dois avisos verdes em cima do outro viram um bloco
   só aos olhos de quem está fechando a conta com o cliente esperando. */
.pkg-checkout-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(139, 92, 246, .3);
    border-radius: var(--radius-md);
    background: var(--primary-light);
}

.pkg-checkout-banner[hidden] { display: none; }

.pkg-checkout-banner > i {
    color: var(--primary);
    font-size: 1.1rem;
}

.pkg-checkout-banner div { flex: 1; min-width: 0; }

.pkg-checkout-banner strong {
    display: block;
    color: var(--text-main);
    font-size: 12px;
}

.pkg-checkout-banner small {
    color: var(--text-muted);
    font-size: 10px;
}

/* Já aplicado: vira verde de confirmado. É o inverso da fidelidade de
   propósito — lá o verde é a oferta e o roxo é o aplicado. Aqui o estado final
   precisa se destacar do estado de oferta, e não combinar com ele. */
.pkg-checkout-banner.pkg-checkout-banner-aplicado {
    background: var(--success-light);
    border-color: rgba(16, 185, 129, .35);
}

.pkg-checkout-banner.pkg-checkout-banner-aplicado > i { color: var(--success); }

/* --- A linha do carrinho que está paga com crédito ------------------------- */

/* Sem isto, o item pago com crédito seria indistinguível de um item que alguém
   digitou como R$ 0,00 por engano — e os dois zeram o total do mesmo jeito. */
.checkout-item.checkout-item-credito {
    border-left: 3px solid var(--primary);
    padding-left: 9px;
}

.pkg-item-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary);
    font-weight: 700;
}

/* Venda toda paga pelo pacote: o formulário de Pix/Dinheiro some (o `hidden`
   sozinho perde para o display da classe) e "Pacote" ocupa o lugar dele. */
#modal-checkout .checkout-payment-form[hidden] { display: none !important; }

.checkout-payment-pacote .checkout-payment-method {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-weight: 700;
}

/* "Cobrar" / "Usar crédito" de cada linha. Botão-texto, e não um botão cheio:
   ele fica embaixo do nome do item, e um botão do tamanho dos outros
   disputaria atenção com o "Finalizar venda". */
.pkg-linha-acao {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-top: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* --- Campos de pacote no cadastro de serviço ------------------------------- */

.service-package-toggle {
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.service-package-toggle .form-hint {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
}

/* A lista de serviços que o crédito paga. Rolagem própria para o formulário
   não crescer além da tela num salão com muitos serviços. */
.pkg-servicos-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.pkg-servicos-lista .checkbox-container {
    color: var(--text-primary);
}

.pkg-servicos-lista small {
    color: var(--text-muted);
    font-weight: 400;
}

#service-package-fields .form-hint {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
}

/* Os dois precisam do `display:none` explícito: o atributo `hidden` do HTML
   vale como `display:block` de baixa prioridade, e QUALQUER regra que defina
   `display` no elemento o vence — `.form-group` define, então o campo
   continuaria na tela mesmo com `el.hidden = true`. Foi o que aconteceu com a
   duração do pacote na primeira conferência visual: o atributo estava certo e
   o campo aparecia assim mesmo. */
#service-package-fields[hidden],
#service-duration-group[hidden] { display: none !important; }

/* `.form-row` já vira coluna no celular (10-responsivo.css); só o banner do
   checkout precisa de ajuste próprio para o botão não ficar espremido. */
@media (max-width: 768px) {
    .pkg-checkout-banner { flex-wrap: wrap; }
    .pkg-checkout-banner button { width: 100%; justify-content: center; }
}