/* ============================================================
   PROFINANCE HUB V56.02 — CLIENTES + ONBOARDING MOBILE + HOTFIX TOUCH/AVATAR
   Escopo exclusivo <= 760px. Desktop preservado.
   ============================================================ */
@media (max-width:760px){
  body[data-module="clientes"]{--pf-mobile-appbar-offset:118px}
  body[data-module="clientes"] .top{position:sticky;top:0;z-index:40}
  body[data-module="clientes"] .top>.topin{display:none!important}
  body[data-module="clientes"] .pf-mobile-appbar-v5596{display:block!important}
  body[data-module="clientes"] .pf-mobile-backdrop-v5596{top:var(--pf-mobile-appbar-offset);inset-inline:0;bottom:0}
  body[data-module="clientes"] .pf-mobile-drawer-v5596{top:var(--pf-mobile-appbar-offset);bottom:0;height:calc(100dvh - var(--pf-mobile-appbar-offset));padding-top:14px}

  /* V56.02: a regra desktop `.top img` não pode deformar os ícones/avatares da app bar mobile. */
  body[data-module="clientes"] .top .pf-mobile-appbar-mark{
    width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;max-width:44px!important;max-height:44px!important;
    flex:0 0 44px!important;object-fit:contain!important;aspect-ratio:1/1!important
  }
  body[data-module="clientes"] .top .pf-mobile-app-avatar{
    width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;max-width:44px!important;max-height:44px!important;
    flex:0 0 44px!important;display:block!important;object-fit:cover!important;object-position:center!important;aspect-ratio:1/1!important;
    border-radius:50%!important;padding:0!important;overflow:hidden!important
  }

  body[data-module="clientes"] .wrap{width:100%;max-width:none;padding:20px 14px calc(82px + env(safe-area-inset-bottom));overflow:visible}
  body[data-module="clientes"] .eyebrow{font-size:9px;letter-spacing:.14em}
  body[data-module="clientes"] h1{font-size:28px;line-height:1.08;margin:7px 0 9px}
  body[data-module="clientes"] .lead{font-size:11px;line-height:1.55;margin:0;color:var(--dim)}
  body[data-module="clientes"] .privacy-note{font-size:10px;line-height:1.5}

  body[data-module="clientes"] .onboarding{grid-template-columns:42px minmax(0,1fr);padding:13px;border-radius:17px;gap:10px}
  body[data-module="clientes"] .onboarding .btn{grid-column:1/-1;width:100%;min-height:44px}

  body[data-module="clientes"] .kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;margin:15px 0!important}
  body[data-module="clientes"] .kpi{min-height:82px!important;padding:13px 13px!important;border-radius:17px!important}
  body[data-module="clientes"] .kpi:last-child:nth-child(odd){grid-column:1/-1}
  body[data-module="clientes"] .kpi span{font-size:9px!important;line-height:1.25}
  body[data-module="clientes"] .kpi b{font-size:23px!important;margin-top:7px!important}

  body[data-module="clientes"] .toolbar{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;margin:0 0 12px!important}
  body[data-module="clientes"] .toolbar #search{grid-column:1/-1}
  body[data-module="clientes"] .toolbar #sortClients{grid-column:1/-1}
  body[data-module="clientes"] .toolbar input,
  body[data-module="clientes"] .toolbar select{min-width:0;min-height:46px!important;padding:10px 11px!important;border-radius:13px!important;font-size:16px!important}
  body[data-module="clientes"] .onboarding-root-tools{margin:0 0 12px;justify-content:stretch}
  body[data-module="clientes"] .onboarding-root-tools .btn{width:100%;min-height:44px;font-size:10px}

  body[data-module="clientes"] #clientList.client-list{gap:11px!important}
  body[data-module="clientes"] #clientList.client-list .client{
    display:grid!important;grid-template-columns:76px minmax(0,1fr)!important;gap:10px 12px!important;
    align-items:center!important;padding:13px 13px 14px 16px!important;border-radius:20px!important;
    background:linear-gradient(150deg,var(--card),var(--card2))!important;box-shadow:0 16px 38px rgba(4,3,15,.20)!important
  }
  body[data-module="clientes"] #clientList.client-list .client:before{width:4px;border-radius:20px 0 0 20px}
  body[data-module="clientes"] #clientList.client-list .client>.avatar{
    grid-column:1!important;grid-row:1!important;width:76px!important;height:76px!important;min-width:76px!important;min-height:76px!important;max-width:76px!important;max-height:76px!important;border-radius:17px!important;justify-self:start!important
  }
  body[data-module="clientes"] #clientList.client-list .client>.avatar>img{border-radius:17px!important}
  body[data-module="clientes"] #clientList.client-list .client>.brand-copy{grid-column:2!important;grid-row:1!important;align-self:center!important}
  body[data-module="clientes"] #clientList.client-list .client>.brand-copy h3{font-size:15px!important;line-height:1.25!important;margin:0 0 4px!important}
  body[data-module="clientes"] #clientList.client-list .client>.brand-copy p{font-size:9px!important;line-height:1.35!important;margin:2px 0!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  body[data-module="clientes"] #clientList.client-list .client>.brand-copy .mono{font-size:8px!important;line-height:1.3}
  body[data-module="clientes"] .customer-alert{font-size:8px;margin-top:5px}

  body[data-module="clientes"] #clientList .client-contract-meta,
  body[data-module="clientes"] #clientList .client-ops-meta{
    grid-column:1/-1!important;min-width:0!important;border:1px solid rgba(155,123,255,.13);background:rgba(255,255,255,.025);
    border-radius:14px;padding:10px 11px!important
  }
  body[data-module="clientes"] #clientList .client-contract-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 8px}
  body[data-module="clientes"] #clientList .client-contract-meta strong{font-size:10px!important;line-height:1.25}
  body[data-module="clientes"] #clientList .client-contract-meta p{grid-column:1;font-size:8.5px!important;margin:0!important}
  body[data-module="clientes"] #clientList .client-contract-meta .chip{grid-column:2;grid-row:1/3;align-self:center}
  body[data-module="clientes"] #clientList .client-ops-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
  body[data-module="clientes"] #clientList .client-drive-meta{min-width:0;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  body[data-module="clientes"] #clientList .client-drive-meta p{margin:0!important;font-size:8.5px!important}
  body[data-module="clientes"] #clientList .onboarding-status{font-size:7.5px;padding:6px 8px;white-space:nowrap}

  body[data-module="clientes"] #clientList .actions{
    grid-column:1/-1!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;min-width:0!important;width:100%!important
  }
  body[data-module="clientes"] #clientList .actions .btn{min-width:0;width:100%;min-height:44px!important;padding:9px 7px!important;border-radius:12px!important;font-size:9px!important;line-height:1.25!important}

  /* Modais: experiência de app, sem conteúdo espremido. */
  body[data-module="clientes"] .overlay{padding:0!important;align-items:stretch!important}
  body[data-module="clientes"] .overlay .modal{
    width:100%!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;border-left:0!important;border-right:0!important;
    padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)
  }
  body[data-module="clientes"] .modal-head{padding:14px 14px 12px!important;gap:10px;flex:0 0 auto}
  body[data-module="clientes"] .modal-head h2{font-size:17px!important;line-height:1.25}
  body[data-module="clientes"] .modal-head p{font-size:9px!important;line-height:1.45}
  body[data-module="clientes"] .close{width:44px!important;height:44px!important;min-width:44px;border-radius:13px!important}
  body[data-module="clientes"] .modal-body{
    padding:14px!important;min-height:0!important;flex:1 1 auto!important;overflow-x:hidden!important;overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;overscroll-behavior-y:contain!important
  }
  body[data-module="clientes"] #onboardingModal,
  body[data-module="clientes"] #onboardingModal .modal,
  body[data-module="clientes"] #onboardingModal .modal-body{touch-action:pan-y!important}
  body[data-module="clientes"] #onboardingModal .modal{overflow:hidden!important}
  body[data-module="clientes"] #onboardingModal .onboarding-list,
  body[data-module="clientes"] #onboardingModal .onboarding-task,
  body[data-module="clientes"] #onboardingModal .task-copy,
  body[data-module="clientes"] #onboardingModal .task-meta{touch-action:pan-y!important}
  body[data-module="clientes"] #onboardingModal button,
  body[data-module="clientes"] #onboardingModal select,
  body[data-module="clientes"] #onboardingModal textarea{touch-action:manipulation}
  body[data-module="clientes"] .modal-foot{
    flex:0 0 auto;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important;
    background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(14px)
  }
  body[data-module="clientes"] .modal-foot .btn{min-height:46px!important;width:100%!important;font-size:10px!important}
  body[data-module="clientes"] #onboardingModal .modal-foot #completeOnboardingButton{grid-column:1/-1}
  body[data-module="clientes"] #detailModal .client-management-spacer{display:none!important}
  body[data-module="clientes"] #detailModal .modal-foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-module="clientes"] #detailModal #saveClientDetailsButton{grid-column:1/-1}

  body[data-module="clientes"] .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  body[data-module="clientes"] .summary-box{padding:10px!important;border-radius:13px!important;min-width:0}
  body[data-module="clientes"] .summary-box b{font-size:11px!important;overflow-wrap:anywhere}
  body[data-module="clientes"] .client-quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  body[data-module="clientes"] .client-quick-actions .btn{width:100%;min-height:44px}
  body[data-module="clientes"] .admin-area{padding:12px!important;border-radius:16px!important}
  body[data-module="clientes"] .admin-title{align-items:flex-start;flex-direction:column}
  body[data-module="clientes"] .form-grid{grid-template-columns:1fr!important;gap:10px!important}
  body[data-module="clientes"] .field.full{grid-column:auto!important}
  body[data-module="clientes"] .field input,
  body[data-module="clientes"] .field select,
  body[data-module="clientes"] .field textarea,
  body[data-module="clientes"] .task-assignee select,
  body[data-module="clientes"] .onboarding-notes textarea{font-size:16px!important;min-height:46px;border-radius:12px!important}
  body[data-module="clientes"] .field textarea{min-height:110px}
  body[data-module="clientes"] .brand-upload-box{grid-template-columns:68px minmax(0,1fr)!important;padding:11px!important}
  body[data-module="clientes"] .brand-upload-box img,
  body[data-module="clientes"] .brand-upload-box .brand-placeholder{width:66px!important;height:66px!important;border-radius:15px!important}
  body[data-module="clientes"] .brand-upload-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  body[data-module="clientes"] .brand-upload-actions .btn{width:100%;min-height:44px}

  /* Onboarding: cartões verticais, responsável e observação tocáveis. */
  body[data-module="clientes"] #onboardingModal .onboarding-progress-head{align-items:flex-start;margin-bottom:10px}
  body[data-module="clientes"] #onboardingModal .onboarding-progress-head b{font-size:24px}
  body[data-module="clientes"] #onboardingModal .onboarding-progress{height:11px}
  body[data-module="clientes"] #onboardingModal .onboarding-list{gap:10px;margin-top:14px}
  body[data-module="clientes"] #onboardingModal .onboarding-task{
    display:grid!important;grid-template-columns:46px minmax(0,1fr)!important;gap:9px 10px!important;align-items:start!important;
    padding:12px!important;border-radius:16px!important
  }
  body[data-module="clientes"] #onboardingModal .task-check{width:44px!important;height:44px!important;border-radius:13px!important;font-size:19px!important}
  body[data-module="clientes"] #onboardingModal .task-copy{padding-top:2px}
  body[data-module="clientes"] #onboardingModal .task-copy b{font-size:11px!important;line-height:1.35}
  body[data-module="clientes"] #onboardingModal .task-copy small{font-size:9px!important;line-height:1.5!important;margin-top:5px!important}
  body[data-module="clientes"] #onboardingModal .task-meta{
    grid-column:1/-1!important;text-align:left!important;padding-top:10px;border-top:1px solid rgba(155,123,255,.12);min-width:0
  }
  body[data-module="clientes"] #onboardingModal .task-done-info{font-size:8.5px;line-height:1.45;margin-bottom:8px!important}
  body[data-module="clientes"] #onboardingModal .task-assignee label{font-size:9px!important;margin-bottom:6px!important}
  body[data-module="clientes"] #onboardingModal .task-assignee select{width:100%!important;min-height:46px!important;padding:9px 10px!important}
  body[data-module="clientes"] #onboardingModal .task-meta>.btn{width:100%;min-height:44px!important;margin-top:8px!important;font-size:9px!important}
  body[data-module="clientes"] #onboardingModal .onboarding-notes{margin-top:14px;padding-top:2px}
  body[data-module="clientes"] #onboardingModal .onboarding-notes textarea{min-height:120px!important}

  /* Modelo raiz também utilizável no telefone para ADM/Diretoria. */
  body[data-module="clientes"] #onboardingTemplateModal .onboarding-template-row{grid-template-columns:34px minmax(0,1fr)!important;gap:8px!important;padding:10px!important}
  body[data-module="clientes"] #onboardingTemplateModal .onboarding-template-row input{font-size:16px!important;min-height:46px!important}
  body[data-module="clientes"] #onboardingTemplateModal .onboarding-template-row input:nth-of-type(2){grid-column:2!important}
  body[data-module="clientes"] #onboardingTemplateModal .onboarding-template-actions{grid-column:2!important;display:grid;grid-template-columns:repeat(3,44px);gap:7px}
  body[data-module="clientes"] #onboardingTemplateModal .onboarding-template-actions button{width:44px!important;height:44px!important}
  body[data-module="clientes"] #onboardingTemplateModal .onboarding-template-add{width:100%;min-height:46px}
  body[data-module="clientes"] #onboardingTemplateModal .onboarding-template-replicate{padding:11px;line-height:1.45}
}

@media (max-width:355px){
  body[data-module="clientes"]{--pf-mobile-appbar-offset:108px}
  body[data-module="clientes"] .top .pf-mobile-appbar-mark,
  body[data-module="clientes"] .top .pf-mobile-app-avatar{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;max-width:42px!important;max-height:42px!important;flex-basis:42px!important}
  body[data-module="clientes"] .kpis{grid-template-columns:1fr!important}
  body[data-module="clientes"] .kpi:last-child:nth-child(odd){grid-column:auto}
  body[data-module="clientes"] .toolbar{grid-template-columns:1fr!important}
  body[data-module="clientes"] .toolbar>*{grid-column:1!important}
  body[data-module="clientes"] #clientList .actions{grid-template-columns:1fr!important}
}