/**
 * Amanda Estética v1.11.1 — pacote de melhorias de formulários:
 * produtos vinculados do protocolo, máscaras e CEP do cadastro de cliente,
 * parcelamento no atendimento, categorias/marcas rápidas de produto e financeiro,
 * subtítulo e rodapé em duas linhas nas janelas flutuantes (inspirado no Borion).
 */

/* =========================================================
   Protocolos — produtos vinculados (botão + / lista / seletor)
   ========================================================= */
.linked-products-field{display:flex;flex-direction:column;gap:10px}
.linked-products-list{display:flex;flex-direction:column;gap:6px}
.linked-product-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.85);font-size:12px;
}
.linked-products-empty{padding:10px 2px;font-size:12px}
.linked-products-picker{
  display:grid;grid-template-columns:1.4fr .7fr .8fr;gap:8px;
  padding:12px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface-soft);
}
.linked-products-picker.is-hidden{display:none}
.linked-products-picker select,
.linked-products-picker input{
  height:38px;border:1px solid var(--line);border-radius:9px;padding:0 10px;
  background:#fff;font-size:12px;color:var(--ink);
}
.linked-products-picker-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}
[data-picker-open].is-hidden{display:none}
.linked-products-subtotal{margin:-4px 0 0;font-size:11px}

/* =========================================================
   Cliente — CEP: sugestões e status de busca
   ========================================================= */
.cep-helper{display:flex;flex-direction:column;gap:8px}
.cep-actions{display:flex;gap:8px;flex-wrap:wrap}
.cep-suggestion-list{display:flex;flex-direction:column;gap:6px}
.cep-result{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:9px 12px;border:1px solid var(--line);border-radius:11px;
  background:#fff;text-align:left;width:100%;
}
.cep-result:hover{background:var(--surface-soft)}
.cep-result strong{font-size:12px}
.cep-result small{font-size:10px;color:var(--muted)}
.cep-status{font-size:10px;color:var(--muted)}

/* =========================================================
   Financeiro / Produtos — categoria e marca com adição rápida
   ========================================================= */
/* =========================================================
   Financeiro / Produtos — categoria e marca com criação rápida
   (opção "Criar novo(a)..." dentro do próprio select, sem popup)
   ========================================================= */
.field-with-add{display:flex;flex-direction:column;gap:6px}
.quick-add-box{display:flex;gap:8px}
.quick-add-box.is-hidden{display:none}
.quick-add-box input{
  flex:1;height:38px;border:1px solid var(--rose);border-radius:9px;
  padding:0 10px;font-size:12px;background:var(--surface-soft);color:var(--ink);outline:none;
}

/* =========================================================
   Atendimento — parcelas do cartão de crédito
   ========================================================= */
.installments-field.is-hidden{display:none}

/* =========================================================
   Configurações — gerenciador de marcas/categorias/centros de custo
   ========================================================= */
.tag-manager-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tag-manager{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.tag-manager strong{font-size:12px}
.tag-manager>small{color:var(--muted);font-size:10px;margin-top:-4px}
.tag-list{display:flex;flex-wrap:wrap;gap:6px}
.tag-empty{font-size:11px}
.tag-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 6px 5px 10px;border-radius:999px;background:var(--surface-soft);color:var(--rose-dark);font-size:11px;font-weight:700}
.tag-chip .icon-btn{width:18px;height:18px;border-radius:50%;color:inherit}
.tag-add-row{display:flex;gap:6px}
.tag-add-row input{flex:1;height:36px;border:1px solid var(--line);border-radius:9px;padding:0 10px;font-size:12px;background:#fff;color:var(--ink)}
@media(max-width:860px){.tag-manager-grid{grid-template-columns:1fr}}

/* =========================================================
   Modal — subtítulo, rodapé em duas linhas e floreio no fechar
   (estrutura inspirada no Borion: ação principal separada das
   ações secundárias/destrutivas, com contexto de uma linha no topo)
   ========================================================= */
.modal-header .icon-btn{transition:background-color .18s ease,color .18s ease,transform .18s ease}
.modal-header .icon-btn:hover{transform:rotate(4deg) scale(1.05)}
@media(min-width:601px){
  .modal-footer-primary{align-items:center}
  .modal-footer-primary .btn{min-width:120px}
}

/* =========================================================
   Campos de valor — selo "R$" fixo (inspirado no Borion)
   O valor digitado passa a ser só o número; o "R$" vira um
   selo dourado fixo à esquerda, e o número fica alinhado à direita.
   ========================================================= */
.field.money-field{position:relative}
.field.money-field input[data-money-input]{
  padding-left:54px!important;
  text-align:right;
}
.field.money-field::after{
  content:'R$';
  position:absolute;
  left:12px;bottom:7px;
  min-width:30px;height:24px;
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;letter-spacing:.02em;
  color:#4a3312;
  background:linear-gradient(180deg,#ecd39a,var(--gold));
  box-shadow:0 5px 14px rgba(181,139,69,.28);
  pointer-events:none;
}
@media(max-width:860px){
  .modal-body .field.money-field::after{bottom:12px;height:26px}
  .modal-body .form-grid{gap:18px}
  .modal-body .field{gap:8px}
  .modal-body .field>span{font-size:11px}
}