/* ==========================================================================
   fdp-cliente-form.css (25/09/2026, Luiz): a pele do formulário de cliente que o
   sistema inteiro usa (painel de Cadastros, portal do distribuidor e app do cliente),
   junto com a página cheia (.fx-overlay) que o carrega. Veio inteira do
   preview-painel-clientes-v1.html (v64/v65, "O Balcão da Fábrica"): as MESMAS regras,
   na MESMA ordem. Quem precisar mudar o formulário muda AQUI, e vale nos três.
   Regras da casa: papel quente, laranja só onde a mão vai (Salvar, Buscar), pill
   tintada, borda 1px, sombra só no que flutua, 44px de toque no celular.
   ========================================================================== */
/* os tokens (--q-*) valem na página inteira: os botões e pills do módulo também aparecem fora da
   tela cheia (confirmações do portal, rodapé dos detalhes). O painel de Cadastros define os mesmos
   valores no :root dele. */
:root,.fx-overlay{
  --q-fdp:#FF5500;--q-fundo:#C2410C;--q-tosta:#A8360A;--q-mao:#E64D00;--q-creme:#FFE8DD;--q-sopro:#FFF4EE;--q-fdp-l:#FFC7A6;
  --q-ink:#1A1814;--q-ink2:#5C5751;--q-ink3:#726C63;--q-ink4:#B8B3AA;
  --q-papel:#FAF8F5;--q-papel2:#F2EEE8;--q-papel3:#E8E2D8;--q-card:#FFFFFF;--q-fosco:#F7F5F2;
  --q-linha:#EBE6DE;--q-linha2:#DCD6CC;--q-forte:#C4BDB0;
  --q-pago:#1F8A52;--q-pago-bg:#E6F4ED;--q-pago-ink:#0F5A34;--q-pago-l:#B9DEC8;
  --q-at:#B07A00;--q-at-bg:#FFF4D6;--q-at-ink:#7A5600;--q-at-l:#F2DC9B;
  --q-venc:#C4331C;--q-venc-bg:#FCE7E3;--q-venc-ink:#8A2110;--q-venc-l:#F2C4BB;
  --q-info:#1F6FC4;--q-info-bg:#E0EDFB;--q-info-ink:#1A4E86;--q-info-l:#BCD6F2;
  --q-lp:#1F6FC4;--q-tr:#FF5500;--q-dl:#C67A16;
  --q-soft:0 1px 2px rgba(26,24,20,.04),0 1px 3px rgba(26,24,20,.06);
  --q-xl:0 24px 64px rgba(26,24,20,.18);
  --q-anel:0 0 0 3px rgba(255,85,0,.18);
}
.fx-overlay{
  font-family:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-variant-numeric:tabular-nums;
}
.fx-overlay ::selection{background:var(--q-creme);color:var(--q-ink)}

/* ----- página cheia (sobe do rodapé em 400ms, como sempre foi) ----- */
.fx-overlay{position:fixed;inset:0;z-index:600;background:var(--q-papel);color:var(--q-ink);display:flex;flex-direction:column;transform:translateY(100%);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.fx-overlay.ca2-aberta{transform:translateY(0)}
.fx-edit{z-index:620} /* a ficha (view) carrega async e entraria por cima sem isto */
.fx-top{background:var(--q-papel);padding:18px 28px 12px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex:0 0 auto;border-bottom:1px solid var(--q-linha)}
.fx-top h2{margin:0;font-size:16px;font-weight:800;line-height:1.25;color:var(--q-ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-top-dir{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:0}
.fx-x{width:40px;height:40px;border:1px solid transparent;background:none;color:var(--q-ink2);cursor:pointer;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.fx-x svg{width:14px;height:14px}
.fx-x:hover{background:var(--q-papel2);color:var(--q-ink)}
.fx-overlay :focus-visible{outline:2px solid var(--q-fundo);outline-offset:2px}
.fx-scroll{flex:1 1 auto;overflow:auto;overscroll-behavior:contain;padding:20px 28px 32px;scrollbar-width:thin;scrollbar-color:var(--q-forte) transparent}
.fx-scroll::-webkit-scrollbar{width:10px}
.fx-scroll::-webkit-scrollbar-thumb{background:var(--q-linha2);border-radius:10px;border:3px solid var(--q-papel)}
.fx-sheet{display:flex;flex-direction:column;gap:12px;max-width:1180px;margin:0 auto}

/* ----- cartões, pills e o "não informado" ----- */
.fxe-card{background:var(--q-card);border:1px solid var(--q-linha);border-radius:14px;box-shadow:var(--q-soft)}
.fxe-h{margin:0;font-size:16px;font-weight:800;line-height:1.25;color:var(--q-ink)}
.fx-nd{color:var(--q-ink3);font-weight:500}
.fx-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:750;white-space:nowrap;background:var(--q-papel2);color:var(--q-ink2);border:1px solid var(--q-linha2)}
.fx-pill.ok{background:var(--q-pago-bg);color:var(--q-pago-ink);border-color:var(--q-pago-l)}
.fx-pill.warn{background:var(--q-at-bg);color:var(--q-at-ink);border-color:var(--q-at-l)}
.fx-pill.off{background:var(--q-venc-bg);color:var(--q-venc-ink);border-color:var(--q-venc-l)}
.fx-pill.info{background:var(--q-info-bg);color:var(--q-info-ink);border-color:var(--q-info-l)}
.fx-pill.brand{background:var(--q-sopro);color:var(--q-fundo);border-color:var(--q-fdp-l)}

/* ----- botões (Operar: firmes e planos) ----- */
.fx-btn-verde,.fx-btn-ca,.fx-btn-acao,.fx-btn-soft{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 18px;border-radius:8px;font:inherit;font-size:14px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.fx-btn-verde{background:var(--q-fundo);color:#fff;border:1px solid var(--q-fundo);font-weight:800}
.fx-btn-verde:hover{background:var(--q-tosta);border-color:var(--q-tosta)}
.fx-btn-verde:disabled,.fx-btn-ca:disabled,.fx-btn-acao:disabled{opacity:.6;cursor:not-allowed}
.fx-btn-verde[aria-busy="true"]{cursor:progress}
.fx-btn-ca{background:var(--q-card);color:var(--q-ink);border:1px solid var(--q-linha2);font-weight:650}
.fx-btn-ca:hover{background:var(--q-papel2);border-color:var(--q-forte)}
.fx-btn-acao{height:36px;padding:0 14px;background:var(--q-sopro);color:var(--q-fundo);border:1px solid var(--q-fdp-l);font-weight:750;font-size:13.5px}
.fx-btn-acao:hover{background:var(--q-creme);border-color:var(--q-fdp);color:var(--q-tosta)}
.fx-btn-soft{height:36px;padding:0 14px;background:var(--q-card);color:var(--q-ink);border:1px solid var(--q-linha2);font-weight:650;font-size:13.5px}
.fx-btn-soft:hover{background:var(--q-papel2)}
.fx-foot-bar{background:var(--q-card);border-top:1px solid var(--q-linha);padding:12px 28px calc(12px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:center;gap:10px;flex:0 0 auto}
.fx-foot-dir{display:flex;gap:10px;align-items:center;margin-left:auto}
.fx-foot-nota{font-size:13px;color:var(--q-ink2);min-width:0}
/* v71: leitura abre dizendo quando o cadastro foi mexido (fx-nota-topo) */
.fx-nota-topo{margin:0;display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--q-linha);border-radius:10px;background:var(--q-fosco);font-size:13px;line-height:1.4;color:var(--q-ink2)}
.fx-nota-topo svg{width:15px;height:15px;flex:0 0 auto;color:var(--q-ink3)}
.fx-nota-topo b{color:var(--q-ink);font-weight:750}
.fx-btn-perigo{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border:1px solid #F5C6C9;background:var(--q-card);color:var(--q-venc);font:inherit;font-size:14px;font-weight:700;border-radius:8px;cursor:pointer;white-space:nowrap;transition:background .15s} /* v65.4: perigo fantasma, só dentro da edição */
.fx-btn-perigo:hover{background:var(--q-venc-bg);color:var(--q-venc-ink)}

/* ----- formulário (Editar e Novo cliente) ----- */
.fx-edit .fx-sheet{max-width:1080px}
.fxe-card{padding:20px 24px 22px}
.fxe-hrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.fxe-card>.fxe-h,.fxe-hrow{margin-bottom:16px}
.fxe-hrow .fxe-h{margin:0}
.fxe-sub{margin:-10px 0 16px;font-size:13px;color:var(--q-ink2);line-height:1.45}
.fxe-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 20px}
.fxe-grid+.fxe-grid{margin-top:16px}
.fxe-grid .c2{grid-column:span 2}.fxe-grid .c3{grid-column:span 3}.fxe-grid .c4{grid-column:span 4}
.fxe-grid .c5{grid-column:span 5}.fxe-grid .c6{grid-column:span 6}.fxe-grid .c7{grid-column:span 7}.fxe-grid .c12{grid-column:span 12}
.fx-edit .fld{display:flex;flex-direction:column;gap:6px;margin:0;min-width:0}
.fx-edit .fld label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--q-ink2)}
.fx-edit .req{color:var(--q-venc);font-weight:800}
.fx-edit .fld input,.fx-edit .fld select,.fx-edit .fld textarea{height:42px;border:1px solid var(--q-forte);border-radius:10px;background:var(--q-card);padding:0 12px;font:inherit;font-size:14px;color:var(--q-ink);width:100%;transition:border-color .15s,box-shadow .15s}
.fx-edit .fld input::placeholder,.fx-edit .fld textarea::placeholder{color:var(--q-ink3);opacity:1}
.fx-edit .fld textarea{height:auto;min-height:96px;padding:11px 12px;resize:vertical;line-height:1.5}
.fx-edit .fld input:hover,.fx-edit .fld select:hover,.fx-edit .fld textarea:hover{border-color:var(--q-ink3)}
.fx-edit .fld input:focus,.fx-edit .fld select:focus,.fx-edit .fld textarea:focus{outline:none;border-color:var(--q-fdp);box-shadow:var(--q-anel)}
.fx-edit .fld input:disabled,.fx-edit .fld select:disabled{background:var(--q-papel2);color:var(--q-ink3);cursor:not-allowed}
.fx-edit .fld .hint{font-size:12px;color:var(--q-ink3);line-height:1.4}
.fx-edit .fld .hint.warn{color:var(--q-at-ink);font-weight:650}
.fx-edit .fld.err input,.fx-edit .fld.err select,.fx-edit .fld.err .fxe-chipbox{border-color:var(--q-venc);box-shadow:0 0 0 3px rgba(196,51,28,.12)}
.fx-edit .errmsg{color:var(--q-venc-ink);font-size:12px;font-weight:700}
.fxe-join{display:flex;align-items:stretch}
.fxe-join input{flex:1;min-width:0;border-radius:10px 0 0 10px!important}
.fxe-join input:only-child{border-radius:10px!important} /* leitura: sem o Buscar do lado */
.fxe-buscar{height:42px;padding:0 14px;background:var(--q-sopro);border:1px solid var(--q-forte);border-left:none;border-radius:0 10px 10px 0;color:var(--q-fundo);font:inherit;font-size:13.5px;font-weight:750;cursor:pointer;white-space:nowrap;transition:background .15s}
.fxe-buscar:hover{background:var(--q-creme);color:var(--q-tosta)}
.fxe-chipbox{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:42px;border:1px solid var(--q-forte);border-radius:10px;padding:5px 10px;background:var(--q-card);cursor:text;transition:border-color .15s,box-shadow .15s}
.fxe-chipbox:focus-within{border-color:var(--q-fdp);box-shadow:var(--q-anel)}
.fxe-chip{display:inline-flex;align-items:center;gap:6px;background:var(--q-papel2);border:1px solid var(--q-linha2);border-radius:999px;padding:3px 6px 3px 10px;font-size:13px;color:var(--q-ink);max-width:100%;overflow-wrap:anywhere}
.fxe-chip button{border:none;background:none;cursor:pointer;color:var(--q-ink2);padding:2px;line-height:0;border-radius:999px;display:inline-flex}
.fxe-chip button:hover{background:var(--q-linha2);color:var(--q-ink)}
.fxe-chip button svg{width:10px;height:10px}
.fxe-chipbox input{flex:1;min-width:120px;border:none!important;height:30px!important;padding:0!important;outline:none!important;box-shadow:none!important;font:inherit;font-size:14px;background:transparent}
.fxe-check{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:8px 14px 8px 12px;border:1px solid var(--q-linha2);border-radius:10px;background:var(--q-fosco);font-size:14px;font-weight:650;color:var(--q-ink);cursor:pointer;user-select:none}
.fxe-check input{width:18px;height:18px;margin:0;accent-color:var(--q-fundo);cursor:pointer}
.fxe-check:hover{border-color:var(--q-forte)}
.fxe-entrega-campos{margin-top:16px}
.fxe-entrega-campos[hidden],.fx-overlay [hidden]{display:none!important}

/* ----- formulário: formas de pagamento e tipo ----- */
.fxe-formas{border:none;margin:0 0 16px;padding:0;min-width:0}
.fxe-formas legend{padding:0;margin-bottom:8px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--q-ink2)}
.fxe-formas-l{display:flex;gap:8px;flex-wrap:wrap}
.fxe-forma{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 11px;border:1px solid var(--q-linha2);background:var(--q-card);border-radius:999px;font-size:14px;font-weight:650;color:var(--q-ink);cursor:pointer;user-select:none;transition:background .15s,border-color .15s,color .15s}
.fxe-forma:hover{border-color:var(--q-forte)}
.fxe-forma input{width:16px;height:16px;margin:0;accent-color:var(--q-fundo);cursor:pointer}
.fxe-forma:has(input:checked){background:var(--q-sopro);border-color:var(--q-fdp-l);color:var(--q-fundo)}
.fxe-forma:has(input:focus-visible){outline:2px solid var(--q-fundo);outline-offset:2px}
.fxe-check-mini{min-height:32px;padding:4px 12px 4px 10px;font-size:13px;margin-top:4px;align-self:flex-start}
.fx-edit .fld label.fxe-check{font-size:13px;font-weight:650;letter-spacing:0;text-transform:none;color:var(--q-ink)}
.fx-edit .fld .fxe-check input[type=checkbox]{width:18px;height:18px;flex:0 0 auto;padding:0;border:none;border-radius:4px;box-shadow:none;background:none}
.fxe-pag-ok{margin-top:16px}
.fx-edit .fld select:disabled{background:var(--q-papel2)}

/* ----- só leitura (portal do distribuidor e app do cliente): o mesmo formulário, sem
   mexer. O dado fica legível (tinta), o campo em papel fosco, nada de cinza de "proibido". ----- */
.fx-leitura .fld input:disabled,.fx-leitura .fld select:disabled,.fx-leitura .fld textarea:disabled{background:var(--q-fosco);color:var(--q-ink);border-color:var(--q-linha2);cursor:default;opacity:1;-webkit-text-fill-color:var(--q-ink)}
.fx-leitura .fld input:disabled:hover,.fx-leitura .fld select:disabled:hover,.fx-leitura .fld textarea:disabled:hover{border-color:var(--q-linha2)}
.fx-leitura .fld select:disabled{appearance:none;-webkit-appearance:none;background-image:none;padding-right:12px}
.fx-leitura .fxe-chipbox.leitura{cursor:default;background:var(--q-fosco);border-color:var(--q-linha2)}
.fx-leitura .fxe-chipbox.leitura input{display:none}
.fx-leitura .fxe-chipbox.leitura .fxe-chip{background:var(--q-card)}
.fx-leitura .fxe-check,.fx-leitura .fxe-forma{cursor:default}
.fx-leitura .fxe-check:hover,.fx-leitura .fxe-forma:hover{border-color:var(--q-linha2)}
.fx-leitura .fxe-check input:disabled,.fx-leitura .fxe-forma input:disabled{cursor:default;opacity:1}
.fx-leitura .fxe-forma:has(input:disabled:not(:checked)){color:var(--q-ink3);background:var(--q-fosco)}

/* ----- respiro: tablet e celular ----- */
@media(max-width:920px){
  .fxe-grid>*{grid-column:span 12!important}
  .fxe-grid>.c2,.fxe-grid>.c3{grid-column:span 6!important}
}
@media(max-width:640px){
  .fx-top{padding:14px 16px 10px}
  .fx-scroll{padding:12px 12px 24px}
  .fxe-card{padding:16px}
  .fxe-grid>.c2,.fxe-grid>.c3{grid-column:span 12!important}
  .fx-edit .fld input,.fx-edit .fld select,.fx-edit .fld textarea,.fxe-chipbox input{font-size:16px}
  .fx-foot-bar{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .fx-foot-bar .fx-btn-verde,.fx-foot-bar .fx-btn-ca{height:44px;padding:0 16px}
}
@media (prefers-reduced-motion: reduce){
  .fx-overlay{transition:none}
}
@media(max-width:640px){
  .fxe-forma{height:44px}
}
/* v66: 44 px de toque em tudo que se toca no celular (DESIGN.md). Fica no fim pra valer sobre as
   regras de cada peça (mesma força de seletor, a última ganha). */
@media screen and (max-width:640px){
  .fx-x{width:44px;height:44px}
  .fx-btn-verde,.fx-btn-ca,.fx-btn-acao,.fx-btn-soft,.fx-btn-perigo{height:44px}
  .fx-edit .fld input,.fx-edit .fld select{height:44px}
  .fxe-chipbox{min-height:44px}
  .fxe-buscar{height:44px}
  .fxe-check{min-height:44px}
  .fxe-chipbox{padding:1px 10px}
  .fxe-chipbox input{height:42px!important}
  .fxe-chip button{padding:17px;margin:-17px -12px -17px -6px}
}