/* Corretor Pro — refinement layer, 02/11/2026.
   Visual-only. Navigation hierarchy, routes, prices and data logic untouched. */
:root{
  --ux-petrol:#0b2338;
  --ux-petrol-soft:#15515d;
  --ux-jade:#0b8574;
  --ux-surface:#ffffff;
  --ux-canvas:#f5f8f8;
  --ux-border:#dbe7e9;
  --ux-muted:#677d89;
  --ux-shadow:0 10px 30px rgba(11,35,56,.08);
  --ux-radius:16px;
  --ux-focus:#46baa5;
  --navy:#0b2338;
  --navy2:#15515d;
}
*,*::before,*::after{box-sizing:border-box}
:where(.card,.kpi,.metric,.plan,.offer-option,.action-card,.commission-card,.managerial-card,.capture-card,.prospect-card,.wallet-money,.modal-card,.field){min-width:0;max-width:100%}
:where(.card,.kpi,.metric,.plan,.offer-option,.action-card,.commission-card,.managerial-card,.capture-card,.prospect-card,.wallet-money){overflow-wrap:break-word}
:where(.kpi-value,.metric-big,.metric-value,.commission-value,.wm-primary,.capture-metric .value,.price,.plan-name){max-width:100%;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
:where(.plan,.offer-option,.kpi,.metric,.managerial-card,.action-card){height:auto}
:where(button,a,input,select,textarea):focus-visible{outline:3px solid var(--ux-focus);outline-offset:2px}
:where(input,select,textarea){min-width:0;max-width:100%}
:where(button,.btn,.soft-btn,.primary-cta,.submit){max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center}
:where(.field,.form-row,.form-grid,.grid,.grid2,.filters,.toolbar,.actions,.section-head) > *{min-width:0}
:where(.field label,.label){overflow-wrap:anywhere;line-height:1.4}
:where(.field input,.field select,.field textarea){box-sizing:border-box}
:where(.card,.kpi,.action-card,.plan):focus-within{border-color:#a7d4ca}

/* Comercial: planos comparáveis, preços legíveis, botões acessíveis. */
.plans{align-items:stretch}
.plans .plan{min-width:0;display:flex;flex-direction:column}
.plans .plan-name,.plans .plan-desc{overflow-wrap:anywhere}
.plans .plan-desc{min-height:0;line-height:1.55}
.plans .plan .price{font-size:clamp(27px,3vw,37px);line-height:1.2}
.plans .plan ul{flex:1}
.plans .plan .btn{margin-top:auto;min-height:46px;white-space:normal}
.offer-choices > *{min-width:0}
.offer-option{align-content:start;overflow-wrap:anywhere}
.offer-option strong,.offer-option small{min-width:0;overflow-wrap:anywhere}
@media(max-width:1100px) and (min-width:701px){
  .plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .plans .plan-segment{grid-column:1/-1}
}
@media(max-width:700px){
  .plans{grid-template-columns:minmax(0,1fr);gap:14px}
  .plans .plan,.plans .plan.featured{padding:22px}
  .plans .plan-segment{grid-column:1}
  .hero-actions,.nav-cta{min-width:0;flex-wrap:wrap}
  .offer-choices{grid-template-columns:minmax(0,1fr)}
  .form-row{grid-template-columns:minmax(0,1fr)}
}

/* PC: shell mantém sidebar e rota ativa; alterações somente cosméticas. */
body:has(> .app > .sidebar) > .app{grid-template-columns:252px minmax(0,1fr)}
body:has(> .app > .sidebar) .sidebar{background:linear-gradient(180deg,#0b2338,#123d4c 72%,#15515d);align-self:start}
body:has(> .app > .sidebar) .main,
body:has(> .app > .sidebar) .content,
body:has(> .app > .sidebar) .view{min-width:0}
body:has(> .app > .sidebar) .nav a{min-width:0;align-items:center}
body:has(> .app > .sidebar) .nav a.active{box-shadow:inset 3px 0 0 #8edcc5;background:rgba(255,255,255,.10)!important;color:#fff!important}
body:has(> .app > .sidebar) .nav a:focus-visible{outline:2px solid #8edcc5;outline-offset:-2px}
body:has(> .app > .sidebar) .nav :is(.ico,.overview-icon){flex-shrink:0}
body:has(> .app > .sidebar) .nav :is(.flow-label,.overview-copy,.nav-tool > span:last-child){min-width:0;overflow-wrap:anywhere}
body:has(> .app > .sidebar) .view > iframe[data-module]{display:block;width:100%;max-width:100%;border:0;background:var(--ux-canvas);border-radius:var(--ux-radius)}
body:has(> .app > .sidebar) .wallet-summary-grid > .kpi{grid-template-rows:auto auto minmax(0,1fr);height:auto}
body:has(> .app > .sidebar) .wallet-summary-grid > .kpi .kpi-value{height:auto;min-height:40px;white-space:normal;line-height:1.15}
body:has(> .app > .sidebar) :where(.card,.kpi,.capture-metric,.managerial-card){border-color:var(--ux-border)}
body:has(> .app > .sidebar) .modal{max-width:calc(100vw - 24px);scroll-padding-bottom:75px}
body:has(> .app > .sidebar) .modal-backdrop{padding:12px}
@media(max-width:760px){
  body:has(> .app > .sidebar) > .app{grid-template-columns:minmax(0,1fr)}
  body:has(> .app > .sidebar) .form-grid{grid-template-columns:minmax(0,1fr)}
  body:has(> .app > .sidebar) .field.full{grid-column:1}
}
@media(max-width:520px){
  body:has(> .app > .sidebar) .wallet-summary-grid{grid-template-columns:minmax(0,1fr)}
}

/* Módulos independentes: dentro do PC, não duplicar a barra superior. */
html[data-corretor-pc-embed="true"] body > header{display:none!important}
html[data-corretor-pc-embed="true"] body > main{
  width:100%;
  max-width:none;
  margin:0;
  padding:12px 12px 28px;
}
html[data-corretor-pc-embed="true"] body{background:var(--ux-canvas)}
html[data-corretor-pc-embed="true"] main > h1:first-child{margin-top:3px}
:where(.layout,.layout > *,main,.grid,.field){min-width:0}
:where(.layout,.grid,.metrics){max-width:100%}
:where(.toolbar,.action-row,.header-right){flex-wrap:wrap}
:where(.metrics .metric,.layout .card){height:auto}
:where(.metric b,.metric strong){overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
@media(max-width:900px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .layout .side{position:static;max-height:none;overflow:visible}
}
@media(max-width:680px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .grid > .field.full,.grid > .field.two{grid-column:1}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  main{max-width:100%}
}

/* Mobile/PWA: inputs and cards share the same visual rhythm. */
body:has(.bottom) .card{border-color:var(--ux-border);box-shadow:var(--ux-shadow)}
body:has(.bottom) .card :is(h2,h3,.metric-big,.commission-value){overflow-wrap:anywhere}
body:has(.bottom) .content{min-width:0;padding-inline:clamp(10px,3.5vw,18px)}
body:has(.bottom) :where(.kpi-mini,.analysis-box,.quick,.more-item,.commission-card){min-width:0;overflow-wrap:anywhere}
body:has(.bottom) .bottom .nav-btn{min-height:44px;justify-content:center}
body:has(.bottom) .modal-bg.open{overscroll-behavior:contain}
body:has(.bottom) .modal-bg > .modal-card{
  max-height:calc(100dvh - max(8px,env(safe-area-inset-top)));
  overscroll-behavior:contain;
  scroll-padding-top:90px;
  scroll-padding-bottom:96px;
}
body:has(.bottom) .modal-bg .modal-title{min-width:0;gap:10px}
body:has(.bottom) .modal-bg .modal-title > div{min-width:0}
body:has(.bottom) .modal-bg .modal-title h3{overflow-wrap:anywhere}
body:has(.bottom) .modal-bg :where(input,select,textarea){font-size:16px}
#commissionModal #commissionForm{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
#commissionModal #commissionForm > *,#commissionModal #commissionForm .grid2 > *,#commissionModal #commissionSecondWrap > *{min-width:0;max-width:100%}
#commissionModal #commissionForm .field label{font-size:11px;line-height:1.45;margin-bottom:7px}
#commissionModal #commissionForm .field input:not([type="hidden"]),
#commissionModal #commissionForm .field select,
#commissionModal #commissionForm .field textarea{min-height:48px;max-width:100%;padding:11px 12px}
#commissionModal #commissionSecondWrap{min-width:0}
#commissionModal #commissionSecondWrap .commission-value{font-size:clamp(19px,5vw,28px);line-height:1.2}
#commissionModal #commissionForm > button[type="submit"]{
  position:sticky;
  bottom:0;
  z-index:5;
  min-height:52px;
  width:100%;
  margin:0!important;
  border:2px solid #fff;
  box-shadow:0 -9px 25px rgba(11,35,56,.12);
}
@media(max-width:430px){
  #commissionModal #commissionForm .grid2{grid-template-columns:minmax(0,1fr);gap:12px}
  #commissionModal .modal-card{padding-left:12px;padding-right:12px}
  body:has(.bottom) .kpi-mini b{font-size:clamp(16px,5vw,24px);overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){
  .sidebar .nav a,.card,.plan,.action-card{transition:none!important;animation:none!important}
}


/* Visual refinement v2 — editorial SaaS layout, without changing routes or menu */
:root{
 --ux-text:#142e3a;--ux-teal:#087e79;--ux-tint:#edf8f5;--ux-amber:#d38c19;
 --ux-elevation:0 2px 5px rgba(15,42,52,.035),0 14px 34px rgba(15,42,52,.065);
 --ux-border:#dce8e8;--ux-radius:18px;
}
body{font-synthesis:none}
:where(.card,.kpi,.plan,.metric,.action-card,.commission-card,.managerial-card,.capture-metric,.chart-card,.wallet-money,.stage,.quick,.analysis-box){
 border-radius:var(--ux-radius);
 transition:border-color .16s ease,box-shadow .16s ease;
}
:where(.card,.kpi,.plan,.metric,.action-card,.commission-card,.managerial-card,.capture-metric,.chart-card,.wallet-money){
 box-shadow:var(--ux-elevation);
}
:where(.card,.kpi,.plan,.metric,.managerial-card,.capture-metric,.wallet-money) :is(h2,h3,strong,b){letter-spacing:-.018em}
:where(.kpi,.metric,.capture-metric,.kpi-mini) :is(.kpi-value,.metric-big,.value,b){font-variant-numeric:tabular-nums;line-height:1.18}
:where(.kpi-label,.metric-eyebrow,.section-label){font-weight:800;letter-spacing:.055em}
:where(.card,.metric,.kpi,.plan,.capture-metric) :where(p,small,.subtle,.kpi-note){line-height:1.55}
:where(.btn,.primary-cta,.submit,button.primary,button.soft-btn){transition:background .16s ease,border-color .16s ease,box-shadow .16s ease}
:where(.btn,.primary-cta,.submit):focus-visible{box-shadow:0 0 0 4px rgba(11,133,116,.17)}
:where(input,select,textarea):disabled{opacity:.7;background:#f1f5f5}
:where(input,select,textarea)[aria-invalid="true"]{border-color:#c44f56!important;box-shadow:0 0 0 3px rgba(196,79,86,.1)}
:where(.field,.grid,.form-grid,.grid2,.layout,.metrics,.plan,.card) > *{min-width:0}
:where(.metric,.kpi,.capture-metric) :where(b,strong,.value,.kpi-value){overflow-wrap:anywhere}
:where(.toolbar,.actions,.hero-actions,.top-actions){row-gap:10px}
:where(.card,.plan,.metric,.kpi,.managerial-card,.commission-card) :is(img,video,canvas,svg){max-width:100%}
/* Desktop: persistent shell, full-width breathing room, refined summary cards */
body:has(> .app > .sidebar) .content{padding:clamp(18px,2vw,30px);max-width:1660px}
body:has(> .app > .sidebar) .topbar{background:rgba(255,255,255,.97);box-shadow:0 2px 10px rgba(14,43,52,.025)}
body:has(> .app > .sidebar) .title h1{font-size:clamp(19px,1.55vw,24px);font-weight:850;letter-spacing:-.04em}
body:has(> .app > .sidebar) .title p{line-height:1.5}
body:has(> .app > .sidebar) :is(.card,.managerial-card,.kpi,.capture-metric){background-color:#fff}
body:has(> .app > .sidebar) .grid-3,body:has(> .app > .sidebar) .grid-4{gap:clamp(12px,1.1vw,18px)}
body:has(> .app > .sidebar) .kpi{padding:clamp(14px,1.3vw,20px)}
body:has(> .app > .sidebar) .kpi-value{font-size:clamp(22px,2vw,32px)}
body:has(> .app > .sidebar) .nav a{transition:background-color .12s ease,color .12s ease}
body:has(> .app > .sidebar) .nav-overview,body:has(> .app > .sidebar) .nav-tool,
body:has(> .app > .sidebar) .flow-list a{min-height:42px}
body:has(> .app > .sidebar) .nav-section-label{color:#b5d7dc;letter-spacing:.12em}
body:has(> .app > .sidebar) .side-foot{color:#c2d9da}
/* Site: coherent comparison grid, cards with bottom-aligned CTA */
body:not(:has(.sidebar)):not(:has(.bottom)) .plan{box-shadow:var(--ux-elevation)}
body:not(:has(.sidebar)):not(:has(.bottom)) .plan:hover{border-color:#8abfb3;box-shadow:0 18px 38px rgba(12,55,63,.12)}
body:not(:has(.sidebar)):not(:has(.bottom)) .plan .plan-name{line-height:1.35}
body:not(:has(.sidebar)):not(:has(.bottom)) .plan .plan-desc{margin-bottom:14px}
body:not(:has(.sidebar)):not(:has(.bottom)) .plan li{line-height:1.55}
body:not(:has(.sidebar)):not(:has(.bottom)) .price{font-variant-numeric:tabular-nums}
body:not(:has(.sidebar)):not(:has(.bottom)) .hero-grid > *{min-width:0}
/* Tools: uniform grid density, no scrollbar escaping its panel */
body:has(.layout) .layout{align-items:start}
body:has(.layout) :is(.card,.metrics .metric){box-shadow:var(--ux-elevation)}
body:has(.layout) :where(input,select,textarea){min-height:44px}
body:has(.layout) :is(.toolbar,.grid,.metrics){min-width:0}
body:has(.layout) .metrics .metric b{font-size:clamp(18px,2vw,25px)}
body:has(.layout) .layout > :last-child{min-width:0}
body:has(.layout) :is(table,.table-wrap){max-width:100%}
body:has(.layout) .table-wrap{overflow-x:auto;overscroll-behavior-x:contain}
/* Mobile: larger headings, structured cards, labels and keyboard-aware sheets */
body:has(.bottom) .hero h1{font-size:clamp(22px,6.2vw,27px);letter-spacing:-.045em}
body:has(.bottom) .hero p{font-size:12px;line-height:1.55}
body:has(.bottom) .section-title{font-size:11px;letter-spacing:.07em}
body:has(.bottom) .card{padding:clamp(13px,3.5vw,17px)}
body:has(.bottom) .quick,body:has(.bottom) .kpi-mini{height:auto}
body:has(.bottom) .nav-btn{font-size:9px;line-height:1.25}
body:has(.bottom) .field label{font-size:10px;line-height:1.4}
body:has(.bottom) :is(.field input,.field select,.field textarea){min-height:48px}
body:has(.bottom) :where(.primary-cta,.soft-btn){min-height:46px}
body:has(.bottom) .modal-bg .modal-title{background:#f7f9fc}
body:has(.bottom) #commissionModal #commissionForm > button[type="submit"]{background:linear-gradient(145deg,#0b2338,#145660)}
@media(max-width:430px){
 body:has(.bottom) :is(.quick-grid,.analysis,.grid2){gap:10px}
 body:has(.bottom) .hero{align-items:flex-start;flex-wrap:wrap}
 body:has(.bottom) .modal-bg>.modal-card{max-height:calc(100dvh - env(safe-area-inset-top) - 8px)}
}
@media(min-width:761px) and (max-width:1280px){
 body:has(> .app > .sidebar) .content{padding:18px}
 body:has(> .app > .sidebar) .card{padding:15px}
}
@media(prefers-reduced-motion:reduce){
 :where(.card,.plan,.metric,.kpi,.action-card,.btn,button){transition:none!important}
}