/* =============================================================================
   Corretor APP — visual idêntico ao mockup
   (bloco base extraído de corretor-app-6k-motor-campanhas-inteligente.html)
   ========================================================================== */
:root{
  --bg:#F4F7FB;
  --surface:#FFFFFF;
  --surface-soft:#F8FAFD;
  --line:#E5EBF1;
  --text:#162130;
  --muted:#6B7687;
  --green:#0E6B63;
  --green-2:#149883;
  --blue:#2D69D7;
  --blue-2:#5D8EF1;
  --success:#23A867;
  --success-soft:#EAF7EF;
  --warning:#F2A53E;
  --warning-soft:#FFF4E6;
  --danger:#EB5D67;
  --danger-soft:#FFF1F2;
  --info:#4D78E5;
  --info-soft:#EEF3FF;
  --violet:#8D66EF;
  --violet-soft:#F3EEFF;
  --shadow:0 16px 40px rgba(17, 28, 43, .07);
  --shadow-lg:0 28px 80px rgba(16, 33, 56, .18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 10%, rgba(20,152,131,.15), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(77,120,229,.16), transparent 28%),
    linear-gradient(135deg,#F7FBFA 0%,#F4F7FB 52%,#F7F8FC 100%);
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
svg{display:block}
input,select,textarea{outline:none}
a{text-decoration:none;color:inherit}
.hidden{display:none!important}

.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{
  position:sticky;top:0;height:100vh;padding:20px 14px 16px;
  color:#fff;background:linear-gradient(180deg,#0B5F58 0%, #0A514D 52%, #0E4365 100%);
  box-shadow:10px 0 36px rgba(10, 70, 88, .08);z-index:20;display:flex;flex-direction:column;
}
.brand{display:flex;align-items:center;gap:12px;padding:4px 10px 22px}
.brand-mark{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#fff;color:var(--green);
  font-weight:800;font-size:20px;letter-spacing:-.4px;box-shadow:0 10px 26px rgba(0,0,0,.13);
}
.brand strong{display:block;font-size:16px}
.brand span{display:block;font-size:10px;opacity:.7;margin-top:2px;line-height:1.3}
.wordmark{font-family:"Courier New",Courier,ui-monospace,monospace;font-weight:800;letter-spacing:-.5px}
.brand strong.wordmark,.login-brand strong.wordmark{font-size:24px;line-height:1}
.brand-icon{background:#fff!important;color:var(--green)!important}
.brand-icon svg{width:60%;height:60%}
.nav{display:grid;gap:5px}
.nav button{
  border:0;background:transparent;color:rgba(255,255,255,.84);border-radius:13px;padding:10px 12px;
  display:flex;align-items:center;gap:11px;text-align:left;font-size:14.5px;font-weight:500;transition:.16s ease;width:100%;
}
.nav button:hover,.nav button.active{background:rgba(255,255,255,.13);color:#fff}
.nav svg{width:17px;height:17px}
.side-spacer{flex:1}
.user-card{
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);border-radius:17px;padding:12px;
}
.user-row{display:flex;align-items:center;gap:10px}
.avatar{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,#DCEFE8,#D3E0FF);color:#0C655E;font-weight:700;
}
.user-row strong{font-size:14.5px}
.user-row span{display:block;font-size:13px;opacity:.72;margin-top:2px}
.user-card .logout{
  margin-top:10px;width:100%;border:1px solid rgba(255,255,255,.16);background:transparent;color:#fff;
  border-radius:10px;padding:7px;font-size:13.5px;
}
.mode{margin-top:10px;display:flex;align-items:center;gap:7px;font-size:13px;opacity:.75}
.mode-dot{width:7px;height:7px;border-radius:50%;background:#34D17A}

.main{min-width:0}
.topbar{
  position:sticky;top:0;z-index:15;height:72px;padding:0 26px;display:flex;align-items:center;gap:16px;
  background:rgba(255,255,255,.76);border-bottom:1px solid rgba(224,232,240,.95);backdrop-filter:blur(16px);
}
.icon-btn,.top-icon{
  width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:#fff;color:#546071;display:grid;place-items:center;
}
.icon-btn:hover,.top-icon:hover{background:#F7F9FC}
.topbar .mobile-menu{display:none}
.search{
  flex:1;max-width:560px;height:42px;display:flex;align-items:center;gap:10px;padding:0 13px;border-radius:13px;
  border:1px solid var(--line);background:#fff;color:var(--muted);box-shadow:0 8px 24px rgba(23,35,52,.04);
}
.search input{width:100%;border:0;background:transparent;font-size:15px;color:var(--text)}
.keycap{border:1px solid var(--line);border-radius:7px;padding:3px 6px;background:#FAFBFD;font-size:13.5px;color:#7C8797}
.top-actions{display:flex;gap:8px;margin-left:auto}

.content{padding:24px 26px 42px}
.page{display:none}
.page.active{display:block}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}
.page-head h1{margin:0 0 5px;font-size:25px;letter-spacing:-.45px}
.page-head p{margin:0;font-size:14.5px;color:var(--muted)}
.head-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{
  height:39px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--text);
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
}
.btn.primary{
  border-color:transparent;color:#fff;background:linear-gradient(135deg,var(--green-2),var(--blue));
  box-shadow:0 10px 24px rgba(26,106,170,.18);
}
.btn.soft{border-color:transparent;color:var(--green);background:linear-gradient(135deg,#EAF8F4,#EEF4FF)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.success{background:linear-gradient(135deg,#1CB56F,#35C889);border-color:transparent;color:#fff}
.btn.danger{background:var(--danger-soft);border-color:transparent;color:var(--danger)}

.hero{
  border-radius:24px;padding:22px;background:linear-gradient(125deg,#0F756C 0%, #118D7D 42%, #2D67D2 100%);
  color:#fff;position:relative;overflow:hidden;box-shadow:0 22px 60px rgba(23, 85, 120, .18);margin-bottom:16px;
}
.hero:after{content:"";position:absolute;right:-80px;top:-110px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.12)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr;gap:20px;align-items:center}
.hero h2{margin:0 0 7px;font-size:25px;letter-spacing:-.5px}
.hero p{margin:0;color:rgba(255,255,255,.84);font-size:14.5px;line-height:1.55;max-width:700px}
.hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.hero .btn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.16);color:#fff}
.hero .btn.primary{background:#fff;color:#0E6C65;box-shadow:none}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.hero-mini{
  border-radius:14px;padding:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);
}
.hero-mini small{display:block;font-size:13px;opacity:.74}
.hero-mini strong{display:block;font-size:23px;margin-top:3px}

.kpis{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));gap:11px;margin-bottom:16px}
.kpi{
  background:rgba(255,255,255,.94);border:1px solid rgba(226,233,240,.95);border-radius:16px;padding:14px;box-shadow:var(--shadow);
}
.kpi-icon{
  width:31px;height:31px;border-radius:10px;display:grid;place-items:center;margin-bottom:12px;
}
.kpi-icon.green{background:#EAF8F3;color:var(--green)}
.kpi-icon.red{background:var(--danger-soft);color:var(--danger)}
.kpi-icon.orange{background:var(--warning-soft);color:#DA8915}
.kpi-icon.blue{background:#EDF3FF;color:var(--blue)}
.kpi-icon.violet{background:var(--violet-soft);color:var(--violet)}
.kpi small{display:block;font-size:13px;color:var(--muted)}
.kpi strong{display:block;font-size:24px;margin-top:3px}
.kpi span{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.kpi .up{color:var(--success)}

.panel{
  background:rgba(255,255,255,.95);border:1px solid rgba(226,233,240,.95);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;
}
.panel-head{
  padding:15px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.panel-head strong{font-size:16.5px}
.panel-head span{display:block;font-size:13.5px;color:var(--muted);margin-top:3px}
.panel-actions{display:flex;gap:8px;flex-wrap:wrap}

.grid-2{display:grid;grid-template-columns:.95fr 1.55fr;gap:14px;margin-bottom:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

/* Dashboard: Ações rápidas | Oportunidades | Funil numa linha só */
.dash-3{display:grid;grid-template-columns:.82fr 1.16fr .92fr;gap:14px;margin-bottom:14px;align-items:stretch}
.dash-3 .panel{display:flex;flex-direction:column}
.dash-3 .op-list{padding:2px 12px 8px}
.dash-3 .op-row{grid-template-columns:1fr auto auto;gap:8px;padding:9px 0}
.dash-3 .op-client small b{color:var(--text)}
.dash-3 .funnel-wrap{padding:12px;flex:1;display:flex;flex-direction:column}
.dash-3 .funnel{grid-template-columns:1fr;gap:7px}
.dash-3 .funnel-step{padding:10px 12px}
.dash-3 .funnel-step:not(:last-child):after{display:none}
.dash-3 .funnel-step strong{font-size:19px;margin:1px 0}
.dash-3 .funnel-cta{flex-direction:column;align-items:stretch;gap:8px;text-align:center;margin-top:auto}
.dash-3 .funnel-cta .btn{justify-content:center}
@media(max-width:1280px){
  .dash-3{grid-template-columns:1fr 1fr}
  .dash-3 .panel:last-child{grid-column:1/-1}
  .dash-3 .panel:last-child .funnel{grid-template-columns:repeat(4,1fr)}
  .dash-3 .panel:last-child .funnel-step:not(:last-child):after{display:block}
  .dash-3 .panel:last-child .funnel-cta{flex-direction:row;text-align:left}
}
@media(max-width:840px){
  .dash-3,.dash-3 .panel:last-child .funnel{grid-template-columns:1fr}
  .dash-3 .panel:last-child .funnel-step:not(:last-child):after{display:none}
}
.card{
  background:#fff;border:1px solid var(--line);border-radius:17px;padding:15px;box-shadow:var(--shadow);
}
.card h3{margin:0;font-size:15px}
.card p{margin:6px 0 0;font-size:13.5px;color:var(--muted);line-height:1.55}

.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px}
.quick{
  min-height:72px;border:0;text-align:left;display:flex;align-items:center;gap:10px;border-radius:14px;padding:12px;
  background:linear-gradient(145deg,#F8FAFC,#F2F5F8);transition:.16s ease;
}
.quick:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(26,42,62,.08)}
.quick-icon{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:none;
}
.quick-icon.q1{background:linear-gradient(135deg,#12A08B,#2F6CD7)}
.quick-icon.q2{background:linear-gradient(135deg,#5B73E8,#8150E8)}
.quick-icon.q3{background:linear-gradient(135deg,#F1A83F,#E86656)}
.quick-icon.q4{background:linear-gradient(135deg,#20A66D,#3CBFA4)}
.quick strong{display:block;font-size:14px}
.quick span{display:block;font-size:13px;color:var(--muted);margin-top:3px}

.op-list{padding:0 12px 12px}
.op-row{
  display:grid;grid-template-columns:1fr auto auto;
  gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);
}
.op-row:last-child{border-bottom:0}
.mini-av{
  width:29px;height:29px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#E7F8F1,#E9F0FF);color:var(--green);font-weight:700;font-size:13.5px;flex:none;
}
.op-client{display:flex;align-items:center;gap:9px}
.op-client strong{display:block;font-size:13.5px}
.op-client small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.link-open{border:0;background:none;color:var(--green);font-size:13px;font-weight:700}

.funnel-wrap{padding:14px}
.funnel{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.funnel-step{
  position:relative;border:1px solid var(--line);border-radius:15px;background:linear-gradient(180deg,#fff,#FAFBFD);padding:13px;text-align:left;width:100%;
}
.funnel-step:not(:last-child):after{
  content:"→";position:absolute;right:-9px;top:50%;transform:translateY(-50%);color:#9DA8B7;font-weight:700;
}
.funnel-step small{display:block;font-size:13px;color:var(--muted)}
.funnel-step strong{display:block;font-size:23px;margin:3px 0}
.funnel-step span{display:block;font-size:13px;color:var(--success)}
.progress{height:6px;background:#EDF1F4;border-radius:999px;overflow:hidden;margin-top:8px}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--green-2),var(--blue));border-radius:999px}
.funnel-cta{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center;
}
.funnel-cta span{font-size:13px;color:var(--muted)}

.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:1180px}
th,td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-size:13px;color:#7B8696;background:#FBFCFD}
td{font-size:13.5px}
.client-cell{display:flex;align-items:center;gap:9px}
.client-cell strong{display:block;font-size:13.5px}
.client-cell small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.products span{
  display:inline-block;margin:2px;padding:3px 7px;border-radius:999px;background:#F2F5F7;color:#54606F;font-size:12.5px;
}
.days.urgent{color:var(--danger);font-weight:700}
.tag{
  display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;border-radius:999px;font-size:12.5px;font-weight:700;
}
.tag.p1{background:var(--danger-soft);color:var(--danger)}
.tag.p2{background:var(--warning-soft);color:#D78818}
.tag.p3{background:var(--success-soft);color:var(--success)}
.tag.p{background:#F3F6F8;color:#5B6775}
.tag.status{background:#F3F6F8;color:#5B6775}
.tag.status.info{background:var(--info-soft);color:var(--info)}
.tag.status.warn{background:var(--warning-soft);color:#D78818}
.tag.status.ok{background:var(--success-soft);color:var(--success)}
/* Tag de fase: "PRIORIDADE N" (badge colorido, fonte menor) + ação (texto preto, fundo branco) */
.tag.fase{
  display:inline-flex;flex-direction:column;align-items:stretch;gap:3px;
  background:transparent!important;padding:0;white-space:nowrap;cursor:help;line-height:1.1;
}
.tag.fase b{
  font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  padding:3px 9px;border-radius:999px;text-align:center;
}
.tag.p1.fase b{background:var(--danger-soft);color:var(--danger)}
.tag.p2.fase b{background:var(--warning-soft);color:#D78818}
.tag.p3.fase b{background:var(--success-soft);color:var(--success)}
.tag.fase i{
  font-size:8.5px;font-weight:600;font-style:normal;color:var(--text);
  padding:0 4px;text-align:center;
}
.tag.fase:focus{outline:2px solid var(--blue-2);outline-offset:1px}
[data-fase]{cursor:help}
/* chips de filtro da carteira: mesmo tratamento */
.prio-filter{height:auto;min-height:44px;line-height:1.1;flex-direction:column;gap:3px;padding:6px 12px}
.prio-filter[data-prio="all"]{justify-content:center}
.prio-filter b{
  font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  padding:3px 9px;border-radius:999px;
}
.prio-filter[data-fase="1"] b{background:var(--danger-soft);color:var(--danger)}
.prio-filter[data-fase="2"] b{background:var(--warning-soft);color:#D78818}
.prio-filter[data-fase="3"] b{background:var(--success-soft);color:var(--success)}
.prio-filter i{
  font-size:9px;font-weight:600;font-style:normal;color:var(--text);
}
.prio-filter[data-prio="all"] b{background:transparent;color:inherit;padding:0}
.segment-box span{display:block;font-size:9px;color:var(--muted);margin-top:1px}
.fase-tip{
  position:fixed;z-index:200;max-width:300px;pointer-events:none;
  background:var(--text);color:#fff;font-size:11.5px;line-height:1.5;font-weight:500;
  padding:9px 12px;border-radius:10px;box-shadow:var(--shadow-lg);
}
.tag.editable{border:0;cursor:pointer;font:inherit;font-weight:700}
.tag.editable::after{content:"▾";margin-left:5px;opacity:.55;font-size:9px}
.tag.editable:hover{filter:brightness(.97)}
.mini-menu{
  position:fixed;z-index:210;min-width:170px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;display:grid;gap:2px;
}
.mini-menu[hidden],.fase-tip[hidden]{display:none!important}
.mini-menu button{
  border:0;background:transparent;text-align:left;padding:8px 10px;border-radius:8px;
  font-size:12.5px;font-weight:600;color:var(--text);cursor:pointer;
}
.mini-menu button:hover{background:var(--surface-soft)}
.mini-menu button.cur{color:var(--green)}
.mini-menu button.cur::before{content:"✓ ";}
.actions-row{display:flex;gap:6px}
.action-btn{
  width:31px;height:31px;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:#586474;
}
.action-btn:hover{background:#F7F9FC}
.action-btn.whats{color:#14975C}
.action-btn.mail{color:#4E78E5}
.action-btn.preview{color:#5A6674}
.table-foot{
  display:flex;align-items:center;justify-content:space-between;padding:12px 16px;
}
.table-foot span{font-size:13px;color:var(--muted)}
.pagination{display:flex;gap:6px}
.page-dot{
  width:28px;height:28px;border-radius:9px;border:1px solid var(--line);background:#fff;font-size:13.5px;color:#526070;
}
.page-dot.active{background:var(--green);border-color:var(--green);color:#fff}

.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px}
.metric{border:1px solid var(--line);border-radius:13px;background:#F8FAFC;padding:10px}
.metric small{display:block;font-size:12.5px;color:var(--muted)}
.metric strong{display:block;font-size:19px;margin-top:3px}

.list-card{
  display:flex;align-items:center;gap:12px;padding:13px;border-bottom:1px solid var(--line);
}
.list-card:last-child{border-bottom:0}
.list-icon{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#EAF8F4,#EEF4FF);color:var(--green);flex:none;
}
.list-card strong{display:block;font-size:14px}
.list-card small{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.list-card .right{margin-left:auto;text-align:right}
.list-card .right span{display:block;font-size:13px;color:var(--muted);margin-top:3px}

.drawer-back{position:fixed;inset:0;background:rgba(14,23,37,.16);display:none;z-index:49}
.drawer-back.show{display:block}
.drawer{
  position:fixed;top:0;right:0;width:min(430px,92vw);height:100vh;background:#fff;box-shadow:var(--shadow-lg);
  transform:translateX(100%);transition:.2s ease;z-index:50;display:flex;flex-direction:column;
}
.drawer.open{transform:translateX(0)}
.drawer-head{
  padding:16px 16px 14px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:flex-start;
}
.drawer-head .mini-av{width:40px;height:40px;font-size:15px}
.drawer-head h2{margin:0;font-size:16.5px}
.drawer-head p{margin:4px 0 0;font-size:13px;color:var(--muted);line-height:1.45}
.drawer-head .icon-btn{margin-left:auto}
.drawer-tabs{padding:10px 14px;display:flex;gap:7px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.drawer-tab{
  height:32px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:#fff;color:#586474;font-size:13.5px;font-weight:600;
}
.drawer-tab.active{background:linear-gradient(135deg,#EAF8F4,#EEF4FF);border-color:transparent;color:var(--green)}
.drawer-body{padding:14px;overflow:auto}
.drawer-panel{display:none}
.drawer-panel.active{display:block}
.dsec{border:1px solid var(--line);border-radius:15px;padding:13px;margin-bottom:10px}
.dsec h3{margin:0 0 10px;font-size:13.5px}
.drow{display:grid;grid-template-columns:132px 1fr;gap:8px;padding:7px 0;font-size:14px}
.drow span{color:var(--muted)}
.dactions{display:grid;gap:8px;margin-bottom:10px}
.dactions .btn{width:100%;justify-content:center}
.template-box{border:1px solid var(--line);border-radius:14px;background:#FBFCFE;padding:12px}
.template-box label{display:block;font-size:13px;color:var(--muted);font-weight:600;margin-bottom:6px}
.template-box textarea{
  width:100%;min-height:130px;resize:vertical;border:1px solid var(--line);border-radius:11px;background:#fff;padding:10px;font-size:13.5px;color:var(--text);
}
.template-box select,.template-box input{
  width:100%;height:36px;border:1px solid var(--line);border-radius:11px;padding:0 10px;background:#fff;font-size:13.5px;margin-bottom:10px;
}
.history-item{display:flex;gap:9px;padding:8px 0;border-bottom:1px solid var(--line)}
.history-item:last-child{border-bottom:0}
.history-item .list-icon{width:28px;height:28px;border-radius:9px}
.history-item strong{display:block;font-size:13.5px}
.history-item small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}

.modal-back{
  position:fixed;inset:0;background:rgba(16,28,43,.34);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;
  padding:5vh 16px;z-index:70;overflow:auto;
}
.modal-back.show{display:flex}
.modal{width:min(720px,96vw);background:#fff;border-radius:21px;padding:18px;box-shadow:var(--shadow-lg)}
.modal.wide{width:min(1040px,97vw)}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.modal-head h2{margin:0;font-size:17.5px}
.modal-head p{margin:4px 0 0;font-size:13px;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field{display:flex;flex-direction:column;gap:5px}
.field.full{grid-column:1/-1}
.field label{font-size:13px;color:var(--muted);font-weight:600}
.field input,.field select,.field textarea{
  border:1px solid var(--line);border-radius:11px;background:#FBFCFD;padding:9px 10px;font-size:13.5px;
}
.field textarea{min-height:90px;resize:vertical}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;flex-wrap:wrap}

.toastbox{position:fixed;right:18px;bottom:18px;display:grid;gap:8px;z-index:100}
.toast{background:#172130;color:#fff;border-radius:12px;padding:11px 14px;font-size:13px;box-shadow:var(--shadow-lg)}

.camp-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.camp-tab{
  height:42px;padding:0 14px;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.88);display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:#586474;
}
.camp-tab.active{
  background:linear-gradient(135deg,#EAF8F4,#EEF4FF);border-color:transparent;color:var(--green);box-shadow:var(--shadow);
}
.camp-pane{display:none}
.camp-pane.active{display:block}
.camp-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.compose-card,.audience-card,.history-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
}
.compose-card .body,.audience-card .body,.history-card .body{padding:16px}
.compose-card .head,.audience-card .head,.history-card .head{
  padding:16px;border-bottom:1px solid var(--line);
}
.compose-card .head strong,.audience-card .head strong,.history-card .head strong{font-size:16.5px}
.compose-card .head span,.audience-card .head span,.history-card .head span{display:block;font-size:13.5px;color:var(--muted);margin-top:4px}
.template-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.template-tag{
  height:36px;padding:0 14px;border-radius:11px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;gap:7px;font-size:13.5px;color:#576372;
}
.template-tag.active{background:linear-gradient(135deg,#EAF8F4,#EEF4FF);border-color:#9FD8CF;color:var(--green)}
.big-text{
  width:100%;min-height:160px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px;font-size:13.5px;resize:vertical;
}
.helper{
  margin-top:10px;padding:10px 12px;border-radius:12px;background:#EDF8F2;color:#2E7D53;font-size:13px;border:1px solid #D7F0E0;
}
.helper code{font-family:inherit;font-weight:700;background:transparent}
.compose-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}
.compose-footer small{font-size:13.5px;color:var(--muted)}
.audience-actions{display:flex;justify-content:space-between;gap:8px;margin-bottom:12px}
.audience-actions button{border:0;background:none;color:var(--green);font-size:13.5px;font-weight:600}
.contact-list{display:grid;gap:0;max-height:480px;overflow:auto;padding-right:4px}
.contact-item{
  display:grid;grid-template-columns:26px 34px 1fr;gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line);
}
.contact-item:last-child{border-bottom:0}
.contact-item input{margin-top:4px}
.contact-item .mini-av{
  width:32px;height:32px;font-size:13.5px;
}
.contact-item strong{display:block;font-size:14px}
.contact-item span{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.45}
.history-list{display:grid;gap:10px}
.history-row{
  border:1px solid var(--line);border-radius:14px;padding:12px;background:#FCFDFE;
}
.history-row .top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.history-row strong{font-size:14px}
.history-row span{font-size:13px;color:var(--muted)}
.history-row p{margin:8px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
.inline-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.info-chip{
  border:1px solid var(--line);border-radius:13px;padding:12px;background:#fff;
}
.info-chip small{display:block;font-size:13px;color:var(--muted)}
.info-chip strong{display:block;font-size:20px;margin-top:3px}
.empty-state{
  border:1px dashed #D6E0EA;border-radius:15px;padding:28px;text-align:center;background:#FBFCFE;font-size:13.5px;color:var(--muted);
}


.campaign-note{
  display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:10px 12px;border-radius:12px;
  background:linear-gradient(135deg,#FFF7E8,#F2F6FF);border:1px solid #F2E4BF;color:#7A6331;font-size:13px;
}
.demo-pill{
  display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:#FFF1CE;color:#A56A09;
  font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
}
.result-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-top:14px;
}
.result-card{
  border:1px solid var(--line);border-radius:13px;padding:11px;background:linear-gradient(180deg,#fff,#FAFCFE);
}
.result-card small{display:block;font-size:12.5px;color:var(--muted)}
.result-card strong{display:block;font-size:18px;margin-top:3px}
.result-card.good strong{color:var(--success)}
.result-card.warn strong{color:#D78818}
.result-card.bad strong{color:var(--danger)}
.history-row{cursor:pointer;transition:.15s ease}
.history-row:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(24,38,56,.06);background:#fff}
.history-row .metrics{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;
}
.history-row .metric-pill{
  display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:4px 7px;background:#F2F5F8;color:#5B6674;font-size:12.5px;
}
.status-badge{
  display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap;
}
.status-sent{background:#F2F5F8;color:#586474}
.status-delivered{background:#EDF4FF;color:#3C6ED0}
.status-open{background:#F3EEFF;color:#7D59DE}
.status-read{background:#EAF8F1;color:#1F9960}
.status-click{background:#E8F8F4;color:#0C8D79}
.status-reply{background:#E9F8EE;color:#188B51}
.status-fail{background:#FFF0F2;color:#D84C59}
.status-spam{background:#FFF3E6;color:#C87816}
.status-unsub{background:#F7F0FF;color:#8055CC}
.track-summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);
  border-radius:14px;background:#FBFCFE;margin-bottom:12px;
}
.track-summary strong{font-size:14.5px}
.track-summary span{font-size:13px;color:var(--muted)}
.recipient-table{width:100%;border-collapse:collapse;min-width:720px}
.recipient-table th,.recipient-table td{padding:10px 9px;border-bottom:1px solid var(--line);text-align:left}
.recipient-table th{font-size:12.5px;color:#7B8696;background:#FAFBFD}
.recipient-table td{font-size:13px}
.recipient-table button{
  border:0;background:none;color:var(--green);font-size:12.5px;font-weight:700;padding:0;
}
.api-roadmap{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;
}
.api-box{
  border:1px solid var(--line);border-radius:14px;padding:13px;background:#fff;
}
.api-box strong{display:block;font-size:13.5px}
.api-box span{display:block;margin-top:4px;font-size:12.5px;color:var(--muted);line-height:1.5}
@media(max-width:1100px){.result-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.result-grid,.api-roadmap{grid-template-columns:1fr 1fr}}


.smart-hero{
  display:grid;grid-template-columns:1.25fr .75fr;gap:16px;align-items:center;
  border-radius:20px;padding:18px;margin-bottom:14px;color:#fff;
  background:linear-gradient(125deg,#0F756C 0%,#138E80 42%,#326BD5 100%);
  box-shadow:0 18px 44px rgba(23,85,120,.15);position:relative;overflow:hidden;
}
.smart-hero:after{
  content:"";position:absolute;width:240px;height:240px;border-radius:50%;right:-70px;top:-120px;background:rgba(255,255,255,.1)
}
.smart-hero>*{position:relative;z-index:1}
.smart-hero h3{margin:0 0 6px;font-size:18px}
.smart-hero p{margin:0;font-size:13px;line-height:1.55;color:rgba(255,255,255,.82)}
.smart-hero .smart-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.smart-hero .smart-stat{padding:10px;border-radius:13px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12)}
.smart-hero .smart-stat small{display:block;font-size:12.5px;opacity:.72}
.smart-hero .smart-stat strong{display:block;font-size:20px;margin-top:2px}

.suggestion-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.suggestion-card{
  border:1px solid var(--line);border-radius:16px;padding:14px;background:#fff;box-shadow:0 10px 28px rgba(24,38,56,.05);
  transition:.15s ease;
}
.suggestion-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(24,38,56,.08)}
.suggestion-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.suggestion-icon{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:none;
  background:linear-gradient(135deg,var(--green-2),var(--blue));
}
.suggestion-card h4{font-size:14px;margin:0}
.suggestion-card p{font-size:12.5px;color:var(--muted);line-height:1.55;margin:6px 0 0}
.suggestion-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.suggestion-chip{padding:4px 7px;border-radius:999px;background:#F2F5F8;color:#5C6877;font-size:12.5px;font-weight:600}
.suggestion-actions{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.suggestion-actions small{font-size:12.5px;color:var(--muted)}

.builder-layout{display:grid;grid-template-columns:1fr .78fr;gap:14px}
.builder-card,.audience-preview{
  background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;
}
.builder-head{padding:15px 16px;border-bottom:1px solid var(--line)}
.builder-head strong{font-size:15px}
.builder-head span{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.builder-body{padding:16px}
.builder-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.builder-grid .full{grid-column:1/-1}
.builder-field{display:flex;flex-direction:column;gap:5px}
.builder-field label{font-size:12.5px;color:var(--muted);font-weight:700}
.builder-field select,.builder-field input,.builder-field textarea{
  width:100%;border:1px solid var(--line);border-radius:11px;background:#FBFCFE;padding:9px 10px;font-size:13px;color:var(--text)
}
.builder-field select,.builder-field input{height:38px}
.builder-field textarea{min-height:90px;resize:vertical}
.builder-help{
  margin-top:10px;padding:10px 12px;border-radius:12px;background:linear-gradient(135deg,#EEF9F5,#F0F5FF);
  font-size:12.5px;color:#547064;line-height:1.5;border:1px solid #E1EFEB
}
.builder-footer{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:13px}
.builder-footer small{font-size:12.5px;color:var(--muted)}
.audience-preview-list{max-height:430px;overflow:auto}
.preview-person{
  display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid var(--line)
}
.preview-person:last-child{border-bottom:0}
.preview-person strong{display:block;font-size:13px}
.preview-person span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.preview-person .right{margin-left:auto;text-align:right}
.preview-person .right b{font-size:12.5px}
.preview-person .right span{font-size:12px}

.segment-summary{
  display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px
}
.segment-box{padding:11px;border:1px solid var(--line);border-radius:13px;background:#fff}
.segment-box small{display:block;font-size:12.5px;color:var(--muted)}
.segment-box strong{display:block;font-size:18px;margin-top:2px}
.draft-pill{display:inline-flex;padding:4px 8px;border-radius:999px;background:#F2EEFF;color:#7250D0;font-size:12.5px;font-weight:700}

@media(max-width:1000px){
  .smart-hero,.builder-layout{grid-template-columns:1fr}
  .suggestion-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .builder-grid,.segment-summary{grid-template-columns:1fr}
  .builder-grid .full{grid-column:auto}
}

@media(max-width:1180px){
  .app{grid-template-columns:84px 1fr}
  .brand > div:last-child,.nav button span,.user-card .meta,.mode{display:none}
  .brand{justify-content:center}
  .nav button{justify-content:center}
  .sidebar{padding-left:10px;padding-right:10px}
  .kpis{grid-template-columns:repeat(3,1fr)}
  .grid-2,.camp-layout{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr}
}
@media(max-width:840px){
  .app{display:block}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;transform:translateX(-100%);transition:.2s ease}
  .sidebar.open{transform:translateX(0)}
  .brand > div:last-child,.nav button span,.user-card .meta,.mode{display:block}
  .nav button{justify-content:flex-start}
  .topbar .mobile-menu{display:grid}
  .content{padding:18px}
  .topbar{padding:0 14px}
  .kpis{grid-template-columns:1fr 1fr}
  .funnel{grid-template-columns:1fr 1fr}
  .funnel-step:after{display:none}
  .grid-3,.inline-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .kpis,.metric-grid{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:1fr}
  .page-head{flex-direction:column;align-items:flex-start}
  .hero-stats{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .camp-tabs{display:grid;grid-template-columns:1fr}
  .compose-footer{flex-direction:column;align-items:flex-start}
}

/* =============================================================================
   Extras do sistema real (login, cotação) — mesmo estilo visual
   ========================================================================== */
#login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{
  width:min(400px,94vw);background:var(--surface);border:1px solid var(--line);
  border-radius:22px;box-shadow:var(--shadow-lg);padding:30px 26px;
}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.login-brand .mark{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--green-2),var(--blue));color:#fff;font-weight:800;font-size:19px;
}
.login-brand strong{font-size:19px;display:block}
.login-brand span{font-size:13.5px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.login-card h1{font-size:17.5px;margin:18px 0 4px}
.login-card .sub{font-size:14.5px;color:var(--muted);margin-bottom:18px}
.login-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.login-field label{font-size:13.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.login-field input{
  border:1px solid var(--line);border-radius:11px;background:var(--surface-soft);padding:11px 12px;font-size:15px;
}
.login-field input:focus{border-color:var(--blue-2);box-shadow:0 0 0 3px rgba(93,142,241,.15)}
.login-error{color:var(--danger);font-size:14px;margin:2px 0 10px;min-height:14px}
.login-card button[type=submit]{
  width:100%;height:44px;border:0;border-radius:12px;color:#fff;font-weight:700;font-size:15px;
  background:linear-gradient(135deg,var(--green-2),var(--blue));box-shadow:0 12px 28px rgba(26,106,170,.22);
}
.login-mode{margin-top:14px;font-size:13.5px;color:var(--muted);text-align:center}

.q-selector-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.q-tipo{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:22px 14px;text-align:center;font-size:14.5px;font-weight:700;color:var(--green);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:8px;transition:.15s}
.q-tipo .ic{font-size:36px}
.q-tipo:not(.em-breve):hover{border-color:var(--blue-2);transform:translateY(-2px)}
.q-tipo.em-breve{opacity:.5;cursor:not-allowed;color:var(--muted)}
.q-tag-breve{font-size:12.5px;background:var(--surface-soft);color:var(--muted);padding:2px 8px;border-radius:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.q-sec{background:#fff;border-radius:14px;box-shadow:var(--shadow);border:1px solid var(--line);margin-bottom:16px;overflow:hidden}
.q-sec-h{background:linear-gradient(90deg,var(--green),var(--blue));color:#fff;padding:11px 16px;font-size:14.5px;font-weight:700;letter-spacing:.3px;display:flex;align-items:center;gap:9px}
.q-sec-b{padding:16px}
.q-grid{display:grid;gap:12px}
.q-g2{grid-template-columns:1fr 1fr}
.q-g3{grid-template-columns:1fr 1fr 1fr}
.q-g4{grid-template-columns:repeat(4,1fr)}
.q-f label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.4px}
.q-f input,.q-f select{width:100%;padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;font-size:14.5px;background:#fff}
.q-f input:focus,.q-f select:focus{outline:none;border-color:var(--blue-2)}
.q-col-span{grid-column:1/-1}
.q-cmp-wrap{overflow-x:auto}
table.q-cmp{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
table.q-cmp th,table.q-cmp td{border:1px solid var(--line);padding:6px 8px}
table.q-cmp thead th{background:var(--green);color:#fff;font-size:14px;text-align:center}
table.q-cmp tbody td:first-child{background:#f6f8fa;font-weight:600;font-size:14px}
table.q-cmp input{width:100%;border:none;background:transparent;font-size:14px;padding:3px 4px;text-align:center}
table.q-cmp input:focus{outline:2px solid var(--blue-2);border-radius:4px}
table.q-cmp th input{color:#fff;font-weight:700}
tr.q-total td:first-child{background:#eef4d9}
tr.q-total input{font-weight:700;color:var(--green)}

@media(max-width:840px){ .q-selector-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .q-g2,.q-g3,.q-g4{grid-template-columns:1fr} }
@media print{
  .sidebar,.topbar,.drawer,.drawer-back,.toastbox{display:none!important}
  .app{display:block}
}