Spaces:

ViniciusKhan
/

analytical_force

Sleeping

App Files Files Community

ViniciusKhan commited on Jul 14

Commit

01cf033

1 Parent(s): 373caa7

Corrige unidade do campo de reajuste (percent vs valor)

Browse files

Files changed (4) hide show

frontend-react/index.html +7 -0
frontend-react/src/style.css +146 -109
frontend-react/src/views/Dashboard.jsx +1 -3
src/delivery/email_sender.py +229 -110

frontend-react/index.html CHANGED Viewed

@@ -3,6 +3,13 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Analytical-Force</title>
   </head>
   <body>

   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#0018FF" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
     <title>Analytical-Force</title>
   </head>
   <body>

frontend-react/src/style.css CHANGED Viewed

@@ -1,166 +1,203 @@
 :root{
   /* Paleta Penso (02 - Cores.pdf): Blue #0018FF, Blue Tech #0004DD, Black Intense #060606. */
   --c1:#0018FF;--c2:#0004DD;--c3:#FFC453;
-  --bg:#f5f6fb;--surface:#ffffff;--surface2:#F7F8FA;--line:#E6EAEE;
-  --txt:#171717;--muted:#6b7280;--faint:#9aa3b2;
   --ok:#16C79A;--high:#F05454;--med:#FFC453;--low:#eab308;
-  --blue:#0018FF;--green:#16C79A;--red:#F05454;--amber:#FFC453;--violet:#0004DD;--teal:#16C79A;
   --penso-blue:#0018FF;--penso-bluetech:#0004DD;--penso-black:#171717;--penso-blackx:#060606;
-  --radius:18px;--shadow:0 10px 28px rgba(6,6,6,.08);--shadow-lg:0 26px 60px rgba(6,6,6,.22);--sb:248px;
 }
-[data-theme="dark"]{--bg:#0b0b0f;--surface:#141520;--surface2:#191b28;--line:#272c47;--txt:#e8eaf5;--muted:#9aa3c0;--faint:#6c7595;
-  --shadow:0 10px 28px rgba(0,0,0,.45);--shadow-lg:0 26px 60px rgba(0,0,0,.6)}
 *{box-sizing:border-box}
-body{margin:0;font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;color:var(--txt);
-  background:radial-gradient(1200px 500px at 100% -10%,rgba(0,24,255,.08),transparent),
-             radial-gradient(900px 400px at -10% 0%,rgba(255,196,83,.07),transparent),var(--bg);
-  min-height:100vh}
 a{color:var(--c1)}
 .app{display:flex;min-height:100vh}
-.sidebar{width:var(--sb);background:linear-gradient(170deg,#060606 0%,#0004DD 55%,#0018FF 120%);color:#fff;position:fixed;inset:0 auto 0 0;
-  display:flex;flex-direction:column;padding:16px 12px;z-index:40;transition:transform .25s}
-.sb-brand{display:flex;align-items:center;gap:11px;padding:6px 10px 16px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.18)}
-.sb-brand .logo{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:20px}
-.sb-brand .penso-logo{background:#fff;color:#0018FF;font-weight:900;font-size:20px;font-family:Arial,sans-serif}
-.sb-brand h1{font-size:15px;margin:0;font-weight:800;letter-spacing:.2px} .sb-brand .s{font-size:11px;color:#CEE2FF}
-nav{display:flex;flex-direction:column;gap:3px;overflow:auto;margin-top:6px}
-nav a{display:flex;align-items:center;gap:12px;color:#EAF0FF;text-decoration:none;padding:10px 12px;border-radius:12px;
-  font-size:13.5px;font-weight:600;cursor:pointer;transition:.18s}
-nav a .i{width:22px;text-align:center;font-size:16px}
-nav a:hover{background:rgba(255,255,255,.14);color:#fff;transform:translateX(2px)}
-nav a.active{background:#fff;color:#0018FF;box-shadow:0 6px 16px rgba(0,0,0,.18)}
-.sb-foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:10px;border-top:1px solid rgba(255,255,255,.18)}
-.sb-foot img{width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.65)}
-.sb-foot .n{font-size:12.5px;font-weight:700} .sb-foot .r{font-size:11px;color:#CEE2FF}
 .mainwrap{margin-left:var(--sb);flex:1;min-width:0;display:flex;flex-direction:column}
-.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);
-  border-bottom:1px solid var(--line);padding:12px 22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
-[data-theme="dark"] .topbar{background:rgba(23,26,46,.82)}
-.hamb{display:none;background:var(--surface);border:1px solid var(--line);color:var(--txt);border-radius:11px;width:38px;height:38px;font-size:18px;cursor:pointer}
-.vtitle{font-size:20px;font-weight:800;margin:0;letter-spacing:-.3px;
-  background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
 .spacer{flex:1}
-.pill{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:12px;padding:7px 12px;border-radius:999px;font-weight:600}
-.dot{width:9px;height:9px;border-radius:50%;background:#9aa3b2}
 .dot.on{background:#22c55e;animation:pulse 1.8s infinite} .dot.off{background:#ef4444}
 @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
-.sel{appearance:none;background:var(--surface);border:1px solid var(--line);color:var(--txt);border-radius:11px;
-  padding:9px 30px 9px 12px;font-size:13px;font-weight:600;cursor:pointer;
-  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280'%3E%3Cpath d='M6 9 1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
 .sel:focus{outline:none;border-color:var(--c1)}
-.iconbtn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--txt);cursor:pointer;font-size:16px}
-.iconbtn:hover{border-color:var(--c1)}
-.btn{border:0;border-radius:12px;padding:10px 18px;font-size:14px;font-weight:700;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:8px}
-.btn:hover{filter:brightness(1.05)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.55;cursor:not-allowed}
-.btn-primary{background:linear-gradient(100deg,var(--c1),var(--c2));color:#fff;box-shadow:0 8px 18px rgba(124,58,237,.32)}
 .btn-ghost{background:var(--surface);color:var(--c1);border:1px solid var(--line)}
-.btn-sm{padding:8px 13px;font-size:12.5px;border-radius:10px}
-main{padding:22px;flex:1}
-.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:18px;animation:fadeUp .45s ease both}
-@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
-.sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap}
-.sh-left{display:flex;align-items:center;gap:11px}
-.sh-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:19px;color:#fff;flex:none}
-.sec-h h2{font-size:15px;margin:0;color:var(--txt);font-weight:800;letter-spacing:-.2px}
 .meta{display:flex;gap:8px;flex-wrap:wrap}
-.chip{background:var(--surface2);border:1px solid var(--line);color:var(--txt);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600}
 .chip.good{background:#dcfce7;color:#15803d;border-color:#bbf7d0} .chip.bad{background:#ffe4e6;color:#be123c;border-color:#fecdd3}
-.hero{border-radius:14px;padding:16px 18px;background:linear-gradient(120deg,rgba(0,24,255,.08),rgba(255,196,83,.08));border:1px solid rgba(0,4,221,.18);border-left:4px solid var(--c2);margin-bottom:16px}
-.hero .h{font-size:12px;font-weight:800;color:var(--c2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
-.hero p{margin:0 0 10px;font-size:14px;line-height:1.6} .hero p:last-child{margin-bottom:0}
-.hero strong{color:var(--txt)}
-.skeleton{border-radius:10px;background:linear-gradient(100deg,var(--surface2) 30%,var(--line) 50%,var(--surface2) 70%);
   background-size:200% 100%;animation:shimmer 1.4s infinite}
 @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
 @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
 .topload{height:3px;border-radius:999px;overflow:hidden;background:var(--line);margin-bottom:14px;position:relative}
 .topload::after{content:"";position:absolute;inset:0;width:34%;border-radius:999px;background:linear-gradient(90deg,var(--c1),var(--c3));animation:slide 1.1s infinite}
-.fade-view{animation:fadeUp .3s ease both}
 .errcard{display:flex;align-items:flex-start;gap:12px}
 .errcard .ic{font-size:22px;line-height:1}
 .errcard .btns{display:flex;gap:8px;margin-top:10px}
-.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
-.kpi{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--surface);transition:.18s;position:relative;overflow:hidden}
-.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
-.kpi .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:22px;margin-bottom:10px}
-.kpi .lab{font-size:12px;color:var(--muted);font-weight:600}
-.kpi .val{font-size:25px;font-weight:800;margin-top:2px;letter-spacing:-.6px;color:var(--txt)}
-.kpi.blue  .ic{background:#e0ecff;color:#2563eb}   .kpi.blue  .val{color:#2563eb}
-.kpi.green .ic{background:#dcfce7;color:#16a34a}   .kpi.green .val{color:#16a34a}
-.kpi.red   .ic{background:#ffe4e6;color:#e11d48}   .kpi.red   .val{color:#e11d48}
-.kpi.amber .ic{background:#fef3c7;color:#d97706}   .kpi.amber .val{color:#d97706}
-.kpi.violet .ic{background:#ede9fe;color:#7c3aed}  .kpi.violet .val{color:#7c3aed}
-.kpi.teal  .ic{background:#ccfbf1;color:#0d9488}   .kpi.teal  .val{color:#0d9488}
 .split{display:grid;grid-template-columns:1.4fr .6fr;gap:18px;align-items:start} @media(max-width:900px){.split{grid-template-columns:1fr}}
 .filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
-.fchip{font-size:12px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface2);color:var(--muted);cursor:pointer;font-weight:700}
-.fchip.active{background:linear-gradient(100deg,var(--c1),var(--c2));color:#fff;border-color:transparent}
-.alert{border:1px solid var(--line);border-left:5px solid #9aa3b2;background:var(--surface);padding:13px 15px;margin-bottom:11px;border-radius:0 14px 14px 0;animation:fadeUp .35s ease both}
-.alert .badge{display:inline-block;color:#fff;font-size:10px;font-weight:800;padding:3px 10px;border-radius:999px;margin-right:7px}
-.alert .t{font-weight:800;font-size:14.5px} .alert .d{color:var(--muted);font-size:13px;margin-top:5px} .alert .a{font-size:13px;margin-top:7px}
 .alert details{margin-top:9px} .alert summary{cursor:pointer;font-size:12px;color:var(--c1);font-weight:700}
 .recs{margin:9px 0 0;padding-left:18px} .recs li{font-size:12.5px;color:var(--muted);margin-bottom:4px} .recs a{color:var(--c1)}
-.plan{white-space:pre-wrap;background:var(--surface2);border:1px dashed var(--line);border-radius:10px;padding:10px 12px;font-size:12.5px;margin-top:9px}
-.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
-.dcard{border:1px solid var(--line);border-radius:15px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
-.dcard .dh{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-size:13px;font-weight:800;color:#fff}
 .dcard .dh .ct{background:rgba(255,255,255,.28);color:#fff;border-radius:999px;padding:2px 10px;font-size:11px}
-.dcard ul{margin:0;padding:10px 14px 12px 28px;max-height:280px;overflow:auto} .dcard li{font-size:12.5px;margin-bottom:5px}
-.dcard a{text-decoration:none;color:var(--c1)} .dcard a:hover{text-decoration:underline} .dcard .info{color:var(--faint)}
 .tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
-.tab{padding:8px 14px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);color:var(--muted);font-size:12.5px;font-weight:700;cursor:pointer}
-.tab.active{background:linear-gradient(100deg,var(--c1),var(--c2));color:#fff;border-color:transparent}
-.panel{display:none;border:1px solid var(--line);border-radius:14px;padding:18px 22px;background:var(--surface);max-height:600px;overflow:auto}
 .panel.active{display:block} .panel h2{font-size:16px;color:var(--c1)} .panel table{border-collapse:collapse;width:100%} .panel td,.panel th{border:1px solid var(--line);padding:6px 9px;font-size:13px}
 table.owners{width:100%;border-collapse:collapse}
-.owners th,.owners td{border-bottom:1px solid var(--line);padding:9px 10px;font-size:13px;text-align:left}
-.owners th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
-.owners tbody tr:hover{background:var(--surface2)}
-.empty{text-align:center;color:var(--faint);padding:40px 20px;font-size:14px}
-.err{background:#ffe4e6;border:1px solid #fecdd3;color:#be123c;padding:13px 15px;border-radius:13px;font-size:14px;white-space:pre-wrap}
 label.lbl{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 7px;font-weight:700}
-input[type=text],input[type=date],input[type=password],input[type=email]{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:12px;font-size:14px;background:var(--surface2);color:var(--txt)}
-input:focus{outline:none;border-color:var(--c1);box-shadow:0 0 0 3px rgba(99,102,241,.16)}
 .switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
 .switch input{display:none}.track{width:42px;height:24px;border-radius:999px;background:#cbd0e0;position:relative;transition:.2s}
 [data-theme="dark"] .track{background:#39406a}
 .track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}
-.switch input:checked + .track{background:linear-gradient(100deg,var(--c1),var(--c2))} .switch input:checked + .track::after{transform:translateX(18px)}
 .bar{height:8px;background:var(--line);border-radius:999px;overflow:hidden;position:relative;margin:10px 0}
 .bar::after{content:"";position:absolute;inset:0;width:38%;border-radius:999px;background:linear-gradient(90deg,var(--c1),var(--c3));animation:slide 1.25s infinite}
 @keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}
-.integr{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;padding:18px;border-top:1px solid var(--line);margin-top:8px}
 .integr span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:700}
-.integr img{height:20px;opacity:.6;transition:.2s} .integr img:hover{opacity:1;transform:translateY(-2px)}
-.backdrop{position:fixed;inset:0;background:rgba(20,16,40,.5);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding:60px 16px;z-index:60}
-.backdrop.open{display:flex} .modal{background:var(--surface);border:1px solid var(--line);border-radius:18px;max-width:520px;width:100%;padding:24px;box-shadow:var(--shadow-lg)}
-.modal .mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.modal h3{margin:0}
-.modal .x{background:var(--surface2);border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:15px;padding:5px 11px;color:var(--txt)}
-#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:9px;z-index:70}
-.toast{background:var(--txt);color:var(--surface);padding:12px 16px;border-radius:12px;font-size:13px;box-shadow:var(--shadow-lg);animation:fadeUp .3s ease}
 .toast.ok{background:linear-gradient(100deg,#16a34a,#22c55e);color:#fff} .toast.bad{background:linear-gradient(100deg,#e11d48,#f43f5e);color:#fff}
 .cclist{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
-.ccrow{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13px}
 .ccrow button{background:none;border:0;color:var(--red);cursor:pointer;font-size:13px;font-weight:700}
 .ccadd{display:flex;gap:8px;margin-top:14px}
-@media(max-width:860px){.sidebar{transform:translateX(-100%)} .sidebar.open{transform:none} .mainwrap{margin-left:0} .hamb{display:block} .split{grid-template-columns:1fr}}
-/* ---- Reforço visual: mais dinâmico/animado (reajuste de contrato, KPIs) ---- */
-.disclaimer{margin-top:12px;padding:10px 13px;border-radius:10px;background:var(--surface2);border:1px dashed var(--line);color:var(--muted);font-size:12px;line-height:1.5}
 .af-glow{position:relative;overflow:hidden}
 .af-glow::before{content:"";position:absolute;inset:-2px;border-radius:var(--radius);padding:2px;
-  background:linear-gradient(120deg,var(--c1),var(--c3),var(--c2));background-size:220% 220%;
   -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
-  animation:af-borderflow 5s ease infinite;opacity:.55;pointer-events:none}
 @keyframes af-borderflow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
-.kpis .kpi{animation:fadeUp .45s ease both}
 .kpis .kpi:nth-child(1){animation-delay:.02s} .kpis .kpi:nth-child(2){animation-delay:.06s}
 .kpis .kpi:nth-child(3){animation-delay:.10s} .kpis .kpi:nth-child(4){animation-delay:.14s}
 .kpis .kpi:nth-child(5){animation-delay:.18s} .kpis .kpi:nth-child(6){animation-delay:.22s}
 .kpis .kpi:nth-child(7){animation-delay:.26s} .kpis .kpi:nth-child(8){animation-delay:.30s}
 .kpis .kpi:nth-child(9){animation-delay:.34s} .kpis .kpi:nth-child(10){animation-delay:.38s}
 .kpi:hover .ic{transform:scale(1.08) rotate(-4deg);transition:.2s}
-.dcard{transition:transform .2s ease,box-shadow .2s ease;animation:fadeUp .4s ease both}
-.dcard:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 14px 30px rgba(0,4,221,.14)}
-.dgrid .dcard:nth-child(1){animation-delay:.03s} .dgrid .dcard:nth-child(2){animation-delay:.08s}
-.dgrid .dcard:nth-child(3){animation-delay:.13s} .dgrid .dcard:nth-child(4){animation-delay:.18s}

 :root{
   /* Paleta Penso (02 - Cores.pdf): Blue #0018FF, Blue Tech #0004DD, Black Intense #060606. */
   --c1:#0018FF;--c2:#0004DD;--c3:#FFC453;
+  --bg:#F6F7FB;--surface:#ffffff;--surface2:#F5F6FA;--line:#EBEDF3;
+  --txt:#12141C;--muted:#68707E;--faint:#9AA1B0;
   --ok:#16C79A;--high:#F05454;--med:#FFC453;--low:#eab308;
+  --blue:#0018FF;--green:#16C79A;--red:#F05454;--amber:#FFC453;--violet:#7C3AED;--teal:#0EA5A0;
   --penso-blue:#0018FF;--penso-bluetech:#0004DD;--penso-black:#171717;--penso-blackx:#060606;
+  --radius:20px;--radius-sm:13px;
+  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px -6px rgba(16,24,40,.10);
+  --shadow-md:0 4px 10px rgba(16,24,40,.05),0 16px 36px -8px rgba(16,24,40,.14);
+  --shadow-lg:0 20px 50px -12px rgba(6,6,20,.35);
+  --sb:260px;
+  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Arial,sans-serif;
 }
+[data-theme="dark"]{--bg:#0A0B10;--surface:#14151F;--surface2:#191b28;--line:#262a3a;--txt:#EEF0F8;--muted:#9aa3c0;--faint:#6c7595;
+  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -6px rgba(0,0,0,.45);
+  --shadow-md:0 4px 10px rgba(0,0,0,.35),0 16px 36px -8px rgba(0,0,0,.55);
+  --shadow-lg:0 26px 60px rgba(0,0,0,.6)}
 *{box-sizing:border-box}
+::selection{background:rgba(0,24,255,.18)}
+::-webkit-scrollbar{width:10px;height:10px}
+::-webkit-scrollbar-track{background:transparent}
+::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;border:2px solid var(--bg)}
+::-webkit-scrollbar-thumb:hover{background:var(--faint)}
+body{margin:0;font-family:var(--font);color:var(--txt);letter-spacing:-.1px;
+  background:var(--bg);
+  min-height:100vh;-webkit-font-smoothing:antialiased}
 a{color:var(--c1)}
 .app{display:flex;min-height:100vh}
+/* ---------------------------- Sidebar ---------------------------- */
+.sidebar{width:var(--sb);background:linear-gradient(175deg,#050608 0%,#080B1E 38%,#0006C4 82%,#0018FF 130%);color:#fff;position:fixed;inset:0 auto 0 0;
+  display:flex;flex-direction:column;padding:20px 16px;z-index:40;transition:transform .28s cubic-bezier(.4,0,.2,1)}
+.sb-brand{display:flex;align-items:center;gap:12px;padding:4px 8px 20px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.12)}
+.sb-brand .logo{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:20px}
+.sb-brand .penso-logo{background:linear-gradient(135deg,#ffffff,#eef2ff);color:#0018FF;font-weight:900;font-size:19px;font-family:var(--font);box-shadow:0 6px 16px rgba(0,0,0,.35)}
+.sb-brand h1{font-size:15.5px;margin:0;font-weight:800;letter-spacing:-.2px} .sb-brand .s{font-size:11px;color:#B9C7FF;margin-top:1px}
+nav{display:flex;flex-direction:column;gap:2px;overflow:auto;margin-top:8px;flex:1}
+nav a{display:flex;align-items:center;gap:12px;color:#C7D0F0;text-decoration:none;padding:10px 12px;border-radius:13px;
+  font-size:13.5px;font-weight:600;cursor:pointer;transition:.16s ease;position:relative}
+nav a .i{width:30px;height:30px;flex:none;text-align:center;font-size:15px;border-radius:9px;background:rgba(255,255,255,.06);
+  display:inline-flex;align-items:center;justify-content:center;transition:.16s ease}
+nav a:hover{background:rgba(255,255,255,.08);color:#fff}
+nav a:hover .i{background:rgba(255,255,255,.14)}
+nav a.active{background:linear-gradient(100deg,#ffffff,#f3f5ff);color:#0018FF;box-shadow:0 8px 20px rgba(0,0,0,.28)}
+nav a.active .i{background:rgba(0,24,255,.12)}
+.sb-foot{margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:10px;border-top:1px solid rgba(255,255,255,.12)}
+.sb-foot img{width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.5)}
+.sb-foot .n{font-size:12.5px;font-weight:700} .sb-foot .r{font-size:11px;color:#B9C7FF}
+/* ---------------------------- Layout ---------------------------- */
 .mainwrap{margin-left:var(--sb);flex:1;min-width:0;display:flex;flex-direction:column}
+.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(1.4);
+  border-bottom:1px solid var(--line);padding:14px 26px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
+[data-theme="dark"] .topbar{background:rgba(15,16,26,.72)}
+.hamb{display:none;background:var(--surface);border:1px solid var(--line);color:var(--txt);border-radius:12px;width:38px;height:38px;font-size:18px;cursor:pointer}
+.vtitle{font-size:21px;font-weight:800;margin:0;letter-spacing:-.5px;
+  background:linear-gradient(90deg,var(--c1),#5b3bff);-webkit-background-clip:text;background-clip:text;color:transparent}
 .spacer{flex:1}
+.pill{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:12px;padding:7px 13px;border-radius:999px;font-weight:600;box-shadow:var(--shadow)}
+.dot{width:8px;height:8px;border-radius:50%;background:#9aa3b2}
 .dot.on{background:#22c55e;animation:pulse 1.8s infinite} .dot.off{background:#ef4444}
 @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
+.sel{appearance:none;background:var(--surface);border:1px solid var(--line);color:var(--txt);border-radius:12px;
+  padding:9px 30px 9px 13px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:var(--shadow);
+  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2368707E'%3E%3Cpath d='M6 9 1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
 .sel:focus{outline:none;border-color:var(--c1)}
+.iconbtn{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--txt);cursor:pointer;font-size:16px;box-shadow:var(--shadow);transition:.15s}
+.iconbtn:hover{border-color:var(--c1);transform:translateY(-1px)}
+.btn{border:0;border-radius:13px;padding:10px 19px;font-size:14px;font-weight:700;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:8px}
+.btn:hover{filter:brightness(1.06);transform:translateY(-1px)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
+.btn-primary{background:linear-gradient(100deg,var(--c1),#4a3bff);color:#fff;box-shadow:0 10px 24px -6px rgba(0,24,255,.45)}
 .btn-ghost{background:var(--surface);color:var(--c1);border:1px solid var(--line)}
+.btn-ghost:hover{background:var(--surface2)}
+.btn-sm{padding:8px 14px;font-size:12.5px;border-radius:11px}
+main{padding:26px 28px 40px;flex:1;max-width:1400px;width:100%;margin:0 auto}
+/* ---------------------------- Cards ---------------------------- */
+.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-bottom:20px;animation:fadeUp .5s cubic-bezier(.16,1,.3,1) both}
+@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
+.sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px;flex-wrap:wrap}
+.sh-left{display:flex;align-items:center;gap:12px}
+.sh-ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-size:19px;color:#fff;flex:none;box-shadow:0 6px 16px -4px rgba(0,0,0,.25)}
+.sec-h h2{font-size:15.5px;margin:0;color:var(--txt);font-weight:800;letter-spacing:-.3px}
 .meta{display:flex;gap:8px;flex-wrap:wrap}
+.chip{background:var(--surface2);border:1px solid var(--line);color:var(--txt);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600}
 .chip.good{background:#dcfce7;color:#15803d;border-color:#bbf7d0} .chip.bad{background:#ffe4e6;color:#be123c;border-color:#fecdd3}
+.hero{border-radius:18px;padding:20px 22px;background:linear-gradient(135deg,rgba(0,24,255,.06),rgba(124,58,237,.05) 55%,rgba(255,196,83,.06));
+  border:1px solid rgba(0,24,255,.10);position:relative;margin-bottom:18px;overflow:hidden}
+.hero::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:999px;background:linear-gradient(180deg,var(--c1),#7C3AED)}
+.hero .h{font-size:11.5px;font-weight:800;color:var(--c1);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;display:flex;align-items:center;gap:6px}
+.hero p{margin:0 0 11px;font-size:14.5px;line-height:1.68;color:var(--txt)} .hero p:last-child{margin-bottom:0}
+.hero strong{color:var(--c1)}
+.skeleton{border-radius:12px;background:linear-gradient(100deg,var(--surface2) 30%,var(--line) 50%,var(--surface2) 70%);
   background-size:200% 100%;animation:shimmer 1.4s infinite}
 @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
 @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
 .topload{height:3px;border-radius:999px;overflow:hidden;background:var(--line);margin-bottom:14px;position:relative}
 .topload::after{content:"";position:absolute;inset:0;width:34%;border-radius:999px;background:linear-gradient(90deg,var(--c1),var(--c3));animation:slide 1.1s infinite}
+.fade-view{animation:fadeUp .35s cubic-bezier(.16,1,.3,1) both}
 .errcard{display:flex;align-items:flex-start;gap:12px}
 .errcard .ic{font-size:22px;line-height:1}
 .errcard .btns{display:flex;gap:8px;margin-top:10px}
+/* ---------------------------- KPIs ---------------------------- */
+.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px}
+.kpi{border:1px solid var(--line);border-radius:17px;padding:18px;background:var(--surface);transition:.2s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}
+.kpi::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;opacity:0;transition:.2s;pointer-events:none}
+.kpi:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
+.kpi .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:21px;margin-bottom:12px;box-shadow:0 6px 14px -4px rgba(0,0,0,.18)}
+.kpi .lab{font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
+.kpi .val{font-size:24px;font-weight:800;margin-top:3px;letter-spacing:-.6px;color:var(--txt)}
+.kpi.blue  .ic{background:linear-gradient(135deg,#3b6bff,#0018FF);color:#fff}   .kpi.blue  .val{color:#0018FF}
+.kpi.green .ic{background:linear-gradient(135deg,#34d399,#0d9488);color:#fff}   .kpi.green .val{color:#0d9488}
+.kpi.red   .ic{background:linear-gradient(135deg,#fb7185,#e11d48);color:#fff}   .kpi.red   .val{color:#e11d48}
+.kpi.amber .ic{background:linear-gradient(135deg,#fbbf24,#d97706);color:#fff}   .kpi.amber .val{color:#b45309}
+.kpi.violet .ic{background:linear-gradient(135deg,#a78bfa,#7c3aed);color:#fff}  .kpi.violet .val{color:#7c3aed}
+.kpi.teal  .ic{background:linear-gradient(135deg,#5eead4,#0d9488);color:#fff}   .kpi.teal  .val{color:#0d9488}
 .split{display:grid;grid-template-columns:1.4fr .6fr;gap:18px;align-items:start} @media(max-width:900px){.split{grid-template-columns:1fr}}
 .filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
+.fchip{font-size:12px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface2);color:var(--muted);cursor:pointer;font-weight:700;transition:.15s}
+.fchip:hover{border-color:var(--c1);color:var(--c1)}
+.fchip.active{background:linear-gradient(100deg,var(--c1),#4a3bff);color:#fff;border-color:transparent;box-shadow:0 8px 18px -6px rgba(0,24,255,.4)}
+/* ---------------------------- Alertas ---------------------------- */
+.alert{border:1px solid var(--line);background:var(--surface);padding:15px 17px;margin-bottom:12px;border-radius:16px;
+  animation:fadeUp .4s cubic-bezier(.16,1,.3,1) both;position:relative;padding-left:20px;transition:.15s}
+.alert::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:999px;background:#9aa3b2}
+.alert:hover{box-shadow:var(--shadow)}
+.alert .badge{display:inline-block;color:#fff;font-size:10px;font-weight:800;padding:3px 10px;border-radius:999px;margin-right:7px;letter-spacing:.03em}
+.alert .t{font-weight:800;font-size:14.5px;letter-spacing:-.2px} .alert .d{color:var(--muted);font-size:13px;margin-top:6px;line-height:1.5} .alert .a{font-size:13px;margin-top:8px}
 .alert details{margin-top:9px} .alert summary{cursor:pointer;font-size:12px;color:var(--c1);font-weight:700}
 .recs{margin:9px 0 0;padding-left:18px} .recs li{font-size:12.5px;color:var(--muted);margin-bottom:4px} .recs a{color:var(--c1)}
+.plan{white-space:pre-wrap;background:var(--surface2);border:1px dashed var(--line);border-radius:12px;padding:11px 13px;font-size:12.5px;margin-top:9px;line-height:1.5}
+/* ---------------------------- Grades de destaque ---------------------------- */
+.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px}
+.dcard{border:1px solid var(--line);border-radius:17px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow);
+  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s;animation:fadeUp .45s cubic-bezier(.16,1,.3,1) both}
+.dcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
+.dcard .dh{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;font-size:13px;font-weight:800;color:#fff}
 .dcard .dh .ct{background:rgba(255,255,255,.28);color:#fff;border-radius:999px;padding:2px 10px;font-size:11px}
+.dcard ul{margin:0;padding:11px 15px 13px 29px;max-height:280px;overflow:auto} .dcard li{font-size:12.5px;margin-bottom:5px;line-height:1.5}
+.dcard a{text-decoration:none;color:var(--c1);font-weight:600} .dcard a:hover{text-decoration:underline} .dcard .info{color:var(--faint)}
+.dgrid .dcard:nth-child(1){animation-delay:.03s} .dgrid .dcard:nth-child(2){animation-delay:.08s}
+.dgrid .dcard:nth-child(3){animation-delay:.13s} .dgrid .dcard:nth-child(4){animation-delay:.18s}
+/* ---------------------------- Abas / painéis ---------------------------- */
 .tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
+.tab{padding:8px 15px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);color:var(--muted);font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s}
+.tab:hover{color:var(--c1)}
+.tab.active{background:linear-gradient(100deg,var(--c1),#4a3bff);color:#fff;border-color:transparent}
+.panel{display:none;border:1px solid var(--line);border-radius:16px;padding:18px 22px;background:var(--surface);max-height:600px;overflow:auto}
 .panel.active{display:block} .panel h2{font-size:16px;color:var(--c1)} .panel table{border-collapse:collapse;width:100%} .panel td,.panel th{border:1px solid var(--line);padding:6px 9px;font-size:13px}
 table.owners{width:100%;border-collapse:collapse}
+.owners th,.owners td{border-bottom:1px solid var(--line);padding:10px 11px;font-size:13px;text-align:left}
+.owners th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
+.owners tbody tr{transition:.12s} .owners tbody tr:hover{background:var(--surface2)}
+.empty{text-align:center;color:var(--faint);padding:48px 20px;font-size:14px}
+.err{background:#ffe4e6;border:1px solid #fecdd3;color:#be123c;padding:14px 16px;border-radius:14px;font-size:14px;white-space:pre-wrap}
 label.lbl{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 7px;font-weight:700}
+input[type=text],input[type=date],input[type=password],input[type=email]{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:13px;font-size:14px;background:var(--surface2);color:var(--txt);font-family:var(--font);transition:.15s}
+input:focus{outline:none;border-color:var(--c1);box-shadow:0 0 0 4px rgba(0,24,255,.10);background:var(--surface)}
 .switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
 .switch input{display:none}.track{width:42px;height:24px;border-radius:999px;background:#cbd0e0;position:relative;transition:.2s}
 [data-theme="dark"] .track{background:#39406a}
 .track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}
+.switch input:checked + .track{background:linear-gradient(100deg,var(--c1),#4a3bff)} .switch input:checked + .track::after{transform:translateX(18px)}
 .bar{height:8px;background:var(--line);border-radius:999px;overflow:hidden;position:relative;margin:10px 0}
 .bar::after{content:"";position:absolute;inset:0;width:38%;border-radius:999px;background:linear-gradient(90deg,var(--c1),var(--c3));animation:slide 1.25s infinite}
 @keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}
+.integr{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;padding:20px;border-top:1px solid var(--line);margin-top:8px}
 .integr span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:700}
+.integr img{height:20px;opacity:.55;transition:.2s} .integr img:hover{opacity:1;transform:translateY(-2px)}
+.backdrop{position:fixed;inset:0;background:rgba(10,8,20,.55);backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;padding:60px 16px;z-index:60}
+.backdrop.open{display:flex} .modal{background:var(--surface);border:1px solid var(--line);border-radius:20px;max-width:520px;width:100%;padding:26px;box-shadow:var(--shadow-lg);animation:fadeUp .3s cubic-bezier(.16,1,.3,1) both}
+.modal .mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.modal h3{margin:0;font-size:17px;letter-spacing:-.3px}
+.modal .x{background:var(--surface2);border:1px solid var(--line);border-radius:11px;cursor:pointer;font-size:15px;padding:5px 11px;color:var(--txt)}
+#toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:9px;z-index:70}
+.toast{background:var(--txt);color:var(--surface);padding:13px 17px;border-radius:14px;font-size:13px;box-shadow:var(--shadow-lg);animation:fadeUp .3s cubic-bezier(.16,1,.3,1)}
 .toast.ok{background:linear-gradient(100deg,#16a34a,#22c55e);color:#fff} .toast.bad{background:linear-gradient(100deg,#e11d48,#f43f5e);color:#fff}
 .cclist{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
+.ccrow{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:10px 13px;font-size:13px}
 .ccrow button{background:none;border:0;color:var(--red);cursor:pointer;font-size:13px;font-weight:700}
 .ccadd{display:flex;gap:8px;margin-top:14px}
+@media(max-width:860px){.sidebar{transform:translateX(-100%)} .sidebar.open{transform:none} .mainwrap{margin-left:0} .hamb{display:block} .split{grid-template-columns:1fr} main{padding:18px 16px 32px}}
+/* ---- Reforço visual: contratos/reajuste, animações staggered ---- */
+.disclaimer{margin-top:14px;padding:11px 14px;border-radius:12px;background:var(--surface2);border:1px dashed var(--line);color:var(--muted);font-size:12px;line-height:1.55}
 .af-glow{position:relative;overflow:hidden}
 .af-glow::before{content:"";position:absolute;inset:-2px;border-radius:var(--radius);padding:2px;
+  background:linear-gradient(120deg,var(--c1),var(--c3),#7c3aed);background-size:220% 220%;
   -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
+  animation:af-borderflow 5s ease infinite;opacity:.5;pointer-events:none}
 @keyframes af-borderflow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
+.kpis .kpi{animation:fadeUp .45s cubic-bezier(.16,1,.3,1) both}
 .kpis .kpi:nth-child(1){animation-delay:.02s} .kpis .kpi:nth-child(2){animation-delay:.06s}
 .kpis .kpi:nth-child(3){animation-delay:.10s} .kpis .kpi:nth-child(4){animation-delay:.14s}
 .kpis .kpi:nth-child(5){animation-delay:.18s} .kpis .kpi:nth-child(6){animation-delay:.22s}
 .kpis .kpi:nth-child(7){animation-delay:.26s} .kpis .kpi:nth-child(8){animation-delay:.30s}
 .kpis .kpi:nth-child(9){animation-delay:.34s} .kpis .kpi:nth-child(10){animation-delay:.38s}
 .kpi:hover .ic{transform:scale(1.08) rotate(-4deg);transition:.2s}

frontend-react/src/views/Dashboard.jsx CHANGED Viewed

@@ -5,7 +5,7 @@ import DoughnutChart from "../components/DoughnutChart.jsx";
 import HighlightsCards from "../components/HighlightsCards.jsx";
 import { moeda, num, pct, pipelineVal, extrairResumo, renderResumoHtml } from "../format.js";
-const ACC = "#6366f1";
 function MetaChips({ dia }) {
   const altos = (dia.alerts || []).filter((a) => a.severity === "high").length;
@@ -34,7 +34,6 @@ function MetaChips({ dia }) {
 export default function Dashboard({ dia, onVerAlertas }) {
   const L = dia.metrics?.leads || {};
   const O = dia.metrics?.opportunities || {};
-  const T = dia.metrics?.tasks || {};
   const Sa = dia.metrics?.satisfaction || {};
   const C = dia.metrics?.cancellations || {};
   const Co = dia.metrics?.contracts || {};
@@ -48,7 +47,6 @@ export default function Dashboard({ dia, onVerAlertas }) {
     ["🏆", "Ganhas", num(O.won_opportunities), "blue"],
     ["📉", "Perdidas", num(O.lost_opportunities), "red"],
     ["🚧", "Paradas", num(O.stalled_opportunities), "amber"],
-    ["⏰", "Tarefas vencidas", num(T.tasks_overdue), "amber"],
   ];
   if (Sa.configured && Sa.responses) cards.push(["😊", "Satisfação", num(Sa.avg_score), "teal"]);
   if (C.configured && C.cancellations_count) cards.push(["❌", "Cancelamentos", num(C.cancellations_count), "red"]);

 import HighlightsCards from "../components/HighlightsCards.jsx";
 import { moeda, num, pct, pipelineVal, extrairResumo, renderResumoHtml } from "../format.js";
+const ACC = "#0018FF";
 function MetaChips({ dia }) {
   const altos = (dia.alerts || []).filter((a) => a.severity === "high").length;
 export default function Dashboard({ dia, onVerAlertas }) {
   const L = dia.metrics?.leads || {};
   const O = dia.metrics?.opportunities || {};
   const Sa = dia.metrics?.satisfaction || {};
   const C = dia.metrics?.cancellations || {};
   const Co = dia.metrics?.contracts || {};
     ["🏆", "Ganhas", num(O.won_opportunities), "blue"],
     ["📉", "Perdidas", num(O.lost_opportunities), "red"],
     ["🚧", "Paradas", num(O.stalled_opportunities), "amber"],
   ];
   if (Sa.configured && Sa.responses) cards.push(["😊", "Satisfação", num(Sa.avg_score), "teal"]);
   if (C.configured && C.cancellations_count) cards.push(["❌", "Cancelamentos", num(C.cancellations_count), "red"]);

src/delivery/email_sender.py CHANGED Viewed

@@ -24,9 +24,19 @@ logger = get_logger("delivery.email")
 # ----------------------------------------------------------------------
 # Identidade visual (Penso) — paleta oficial da marca.
 # ----------------------------------------------------------------------
-# Cores "vivas" (uso em fundos/selos) e variantes escurecidas para texto
-# sobre fundo branco (mantém contraste de leitura sem perder a identidade).
 _PENSO_BLUE = "#0018FF"
 _BLUE_TECH = "#0004DD"
 _PENSO_BLACK = "#171717"
@@ -37,8 +47,10 @@ _ERRO = "#F05454"
 _ERRO_TXT = "#c62f2f"
 _ALERTA = "#FFC453"
 _ALERTA_TXT = "#a15c00"
-_DIVISORIA = "#E6EAEE"
-_HOVER = "#F7F8FA"
 # Logo do Salesforce (fonte de dados) — mesma URL pública já usada no painel React.
 _LOGO_SALESFORCE_URL = "https://upload.wikimedia.org/wikipedia/commons/f/f9/Salesforce.com_logo.svg"
@@ -48,6 +60,20 @@ _COR_SEVERIDADE = {"high": _ERRO, "medium": _ALERTA, "low": "#94a3b8"}
 # Texto do selo: escuro sobre o Alerta (amarelo) para manter contraste; branco nos demais.
 _TEXTO_SEVERIDADE = {"high": "#ffffff", "medium": _PENSO_BLACK, "low": "#ffffff"}
 _ROTULO_SEVERIDADE = {"high": "ALTA", "medium": "MÉDIA", "low": "BAIXA"}
 # ----------------------------------------------------------------------
@@ -114,11 +140,11 @@ def _md_para_html(texto: str) -> str:
     def _flush() -> None:
         if bullets:
             itens = "".join(
-                f"<li style='margin-bottom:4px'>{b}</li>" for b in bullets
             )
             html.append(
-                f"<ul style='margin:4px 0 10px;padding-left:18px;font-size:14px;"
-                f"line-height:1.55;color:#334155'>{itens}</ul>"
             )
             bullets.clear()
@@ -133,38 +159,99 @@ def _md_para_html(texto: str) -> str:
         if linha.startswith("#"):
             _flush()
             html.append(
-                f"<div style='font-weight:700;color:#0f172a;margin:10px 0 4px;"
-                f"font-size:14px'>{_md_inline(sem_hash)}</div>"
             )
         elif linha[:2] in ("- ", "* ") or linha.startswith("•"):
             bullets.append(_md_inline(linha.lstrip("-*• ").strip()))
         else:
             _flush()
             html.append(
-                f"<p style='margin:0 0 10px;font-size:14px;line-height:1.6;"
                 f"color:#334155'>{_md_inline(linha)}</p>"
             )
     _flush()
     return "".join(html)
 # ----------------------------------------------------------------------
 # Blocos do e-mail HTML
 # ----------------------------------------------------------------------
-def _linha_kpi(rotulo: str, valor: str, destaque: str = _PENSO_BLUE) -> str:
-    """Célula de KPI (rótulo + valor) para a grade de números-chave.
-    Recebe a classe ``af-kpi-cell`` (dark mode + empilhamento em telas
-    pequenas via CSS em ``<head>``) além do estilo inline (fallback para
-    clientes que ignoram ``<style>``, ex.: Outlook desktop).
     """
     return (
-        '<td class="af-kpi-cell" style="padding:10px 14px;border:1px solid #e6e8eb;'
-        'border-radius:8px;background:#f8fafc;vertical-align:top;">'
         f'<div class="af-kpi-label" style="font-size:11px;color:#64748b;text-transform:uppercase;'
-        f'letter-spacing:.04em;">{_escape(rotulo)}</div>'
-        f'<div style="font-size:20px;font-weight:700;color:{destaque};'
-        f'margin-top:2px;">{_escape(valor)}</div></td>'
     )
@@ -173,6 +260,7 @@ def _grade_kpis(metrics: dict[str, Any]) -> str:
     Não inclui mais "Tarefas vencidas" (removido a pedido — volume alto
     demais para um KPI de topo); em seu lugar entram "Oportunidades criadas".
     """
     leads = metrics.get("leads", {}) or {}
     opp = metrics.get("opportunities", {}) or {}
@@ -181,35 +269,39 @@ def _grade_kpis(metrics: dict[str, Any]) -> str:
     contratos = metrics.get("contracts", {}) or {}
     celulas: list[str] = [
-        _linha_kpi("Leads novos", _num(leads.get("new_leads"))),
-        _linha_kpi("Conversão de leads", _pct(leads.get("conversion_rate"))),
         _linha_kpi(
             "Pipeline aberto",
             _moeda(opp.get("open_pipeline_product_value") or opp.get("open_pipeline_amount")),
         ),
-        _linha_kpi("Oportunidades criadas", _num(opp.get("new_opportunities"))),
-        _linha_kpi("Oportunidades ganhas", _num(opp.get("won_opportunities")), _SUCESSO_TXT),
-        _linha_kpi("Oportunidades perdidas", _num(opp.get("lost_opportunities")), _ERRO_TXT),
-        _linha_kpi("Oportunidades paradas", _num(opp.get("stalled_opportunities")), _ALERTA_TXT),
     ]
     if sat.get("configured") and sat.get("responses"):
-        celulas.append(_linha_kpi("Satisfação (nota média)", _num(sat.get("avg_score"))))
     if canc.get("configured") and canc.get("cancellations_count"):
         celulas.append(
-            _linha_kpi("Cancelamentos", _num(canc.get("cancellations_count")), _ERRO_TXT)
         )
     if contratos.get("configured"):
-        celulas.append(_linha_kpi("Contratos modificados hoje", _num(contratos.get("modified_today_count"))))
     # Distribui as células em linhas de 3 colunas.
     linhas_html: list[str] = []
     for i in range(0, len(celulas), 3):
         grupo = celulas[i : i + 3]
         linhas_html.append(
-            '<tr>' + "".join(grupo)
-            + ('<td></td>' * (3 - len(grupo)))
-            + '</tr>'
-            + '<tr><td colspan="3" style="height:8px;"></td></tr>'
         )
     return (
         '<table role="presentation" width="100%" cellspacing="0" cellpadding="0" '
@@ -233,27 +325,26 @@ def _bloco_contratos(metrics: dict[str, Any]) -> str:
     modificados = m.get("modified_today") or []
     if modificados:
         itens = "".join(
-            f"<li style='margin-bottom:3px'>"
             f"<strong>{_escape(c.get('name') or c.get('id') or '—')}</strong>"
             f" <span style='color:#64748b'>— modificado por "
             f"{_escape(c.get('modified_by') or 'responsável não identificado')}</span></li>"
             for c in modificados[:15]
         )
-        partes.append(
-            f"<div class='af-altcard' style='background:{_HOVER};border-radius:10px;padding:12px 14px;margin-bottom:10px;'>"
-            f"<div style='font-size:13px;font-weight:700;color:#0f172a;margin-bottom:6px;'>"
             f"📄 Contratos modificados hoje "
             f"<span style='color:#94a3b8;font-weight:400'>({m.get('modified_today_count', 0)})</span></div>"
-            f"<ul style='margin:0;padding-left:18px;font-size:13px;color:#334155'>{itens}</ul>"
-            f"</div>"
         )
     if m.get("readjustment_configured"):
         qtd = m.get("readjustment_month_count") or 0
         if qtd:
             inconsist = int(m.get("readjustment_inconsistent_count") or 0)
             reaj_itens = "".join(
-                f"<li style='margin-bottom:3px'>"
                 f"<strong>{_escape(c.get('name') or c.get('id') or '—')}</strong>: "
                 f"{_moeda(c.get('previous_value'))} → {_moeda(c.get('current_value'))} "
                 f"(<span style='color:{_SUCESSO_TXT if (c.get('delta') or 0) >= 0 else _ERRO_TXT}'>"
@@ -267,13 +358,12 @@ def _bloco_contratos(metrics: dict[str, Any]) -> str:
                 + ")</li>"
                 for c in (m.get("readjustment_contracts") or [])[:10]
             )
-            partes.append(
-                f"<div class='af-altcard' style='background:{_HOVER};border-radius:10px;padding:12px 14px;margin-bottom:10px;'>"
-                f"<div style='font-size:13px;font-weight:700;color:#0f172a;margin-bottom:6px;'>"
                 f"💹 Reajuste de contratos no mês "
                 f"<span style='color:#94a3b8;font-weight:400'>({qtd} contrato(s) · "
                 f"{_moeda(m.get('readjustment_month_total'))})</span></div>"
-                f"<ul style='margin:0 0 8px;padding-left:18px;font-size:13px;color:#334155'>{reaj_itens}</ul>"
                 + (
                     f"<div style='font-size:12px;color:{_ALERTA_TXT};margin-bottom:6px;'>"
                     f"⚠ {inconsist} contrato(s) com possível inconsistência entre o reajuste "
@@ -282,8 +372,8 @@ def _bloco_contratos(metrics: dict[str, Any]) -> str:
                     else ""
                 )
                 + f"<div style='font-size:11px;color:#94a3b8;'>⚠ {_escape(m.get('readjustment_disclaimer', ''))}</div>"
-                + "</div>"
             )
         else:
             partes.append(
                 f"<div style='font-size:12px;color:#94a3b8;margin-bottom:10px;'>"
@@ -292,11 +382,7 @@ def _bloco_contratos(metrics: dict[str, Any]) -> str:
     if not partes:
         return ""
-    return (
-        "<h3 class='af-h' style=\"font-size:14px;color:#0f172a;margin:22px 0 10px;padding-left:10px;"
-        f"border-left:3px solid {_PENSO_BLUE};\">📄 Contratos</h3>"
-        + "".join(partes)
-    )
 def _bloco_alertas(alerts: list[dict[str, Any]]) -> str:
@@ -304,9 +390,10 @@ def _bloco_alertas(alerts: list[dict[str, Any]]) -> str:
     altos = [a for a in alerts if a.get("severity") == "high"]
     selecionados = (altos or alerts)[:6]
     if not selecionados:
-        return (
-            '<p style="color:#15803d;font-size:14px;">'
-            "✅ Nenhum alerta crítico para o período.</p>"
         )
     cartoes: list[str] = []
@@ -315,24 +402,38 @@ def _bloco_alertas(alerts: list[dict[str, Any]]) -> str:
         cor = _COR_SEVERIDADE.get(sev, "#94a3b8")
         cor_texto_selo = _TEXTO_SEVERIDADE.get(sev, "#ffffff")
         rotulo = _ROTULO_SEVERIDADE.get(sev, "INFO")
         acao = a.get("recommended_action")
         acao_html = (
-            f'<div style="margin-top:6px;font-size:13px;color:#0f172a;">'
             f'<strong>Ação:</strong> {_escape(acao)}</div>'
             if acao
             else ""
         )
-        cartoes.append(
-            f'<div style="border-left:4px solid {cor};background:{_HOVER};'
-            f'padding:10px 14px;margin-bottom:10px;border-radius:0 8px 8px 0;">'
-            f'<span style="display:inline-block;background:{cor};color:{cor_texto_selo};'
-            f'font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;'
-            f'letter-spacing:.04em;">{rotulo}</span> '
-            f'<span style="font-weight:700;color:#0f172a;font-size:14px;">'
             f'{_escape(a.get("title", ""))}</span>'
-            f'<div style="margin-top:4px;font-size:13px;color:#475569;">'
             f'{_escape(a.get("description", ""))}</div>'
-            f'{acao_html}</div>'
         )
     return "".join(cartoes)
@@ -343,13 +444,11 @@ def _bloco_prioridades(alerts: list[dict[str, Any]]) -> str:
     if not acoes:
         return ""
     itens = "".join(
-        f'<li style="margin-bottom:6px;font-size:13px;color:#0f172a;">{_escape(a)}</li>'
         for a in acoes[:5]
     )
-    return (
-        '<h3 style="font-size:15px;color:#0f172a;margin:22px 0 8px;">'
-        "🎯 Prioridades para hoje</h3>"
-        f'<ol style="margin:0;padding-left:20px;">{itens}</ol>'
     )
@@ -359,8 +458,9 @@ def _estilo_cabecalho() -> str:
     Usa classes com ``!important`` para sobrepor os estilos inline em
     clientes que suportam ``<style>``/media queries (Apple Mail, Gmail
     app/web, Outlook.com/iOS). Clientes que ignoram ``<style>`` (ex.: Outlook
-    desktop clássico) continuam vendo o layout claro fixo via inline — nunca
-    quebram, apenas não ganham o tema escuro/empilhamento.
     """
     return f"""\
     <meta name="color-scheme" content="light dark">
@@ -381,9 +481,10 @@ def _estilo_cabecalho() -> str:
         .af-card {{ background:#141a2b !important; border-color:#242c42 !important; }}
         .af-body h3 {{ color:#e8ecf5 !important; }}
         .af-body p, .af-body div, .af-body li, .af-body span {{ color:#c3ccdf !important; }}
-        .af-kpi-cell {{ background:#1a2138 !important; border-color:#2a3350 !important; }}
         .af-kpi-label {{ color:#8fa0c2 !important; }}
-        .af-altcard {{ background:#171e33 !important; }}
         .af-footer {{ background:#0e1424 !important; border-color:#242c42 !important; }}
         .af-muted {{ color:#7d8aa8 !important; }}
         a.af-link {{ color:#9fb6ff !important; }}
@@ -400,50 +501,68 @@ def _montar_html(
 ) -> str:
     """Monta o e-mail executivo completo (documento HTML, pt-BR).
-    Responsivo (empilha em telas pequenas) e com suporte a tema escuro dos
-    clientes de e-mail (``prefers-color-scheme``), preservando o layout claro
-    como fallback via estilos inline.
     """
     altos = sum(1 for a in alerts if a.get("severity") == "high")
     resumo = (
         f"Foram gerados <strong>{len(alerts)} alerta(s)</strong>, "
         f"sendo <strong>{altos} de severidade alta</strong>."
     )
-    # Bloco de análise (insights) — converte o Markdown do resumo em HTML.
     bloco_ia = ""
     corpo_ia = _md_para_html(resumo_ia) if resumo_ia.strip() else ""
     if corpo_ia:
         bloco_ia = (
-            f"<div style='background:{_HOVER};border:1px solid {_DIVISORIA};border-left:4px solid {_PENSO_BLUE};"
-            "border-radius:10px;padding:14px 16px;margin:0 0 18px;' class='af-altcard'>"
-            f"<div style='font-size:12px;color:{_PENSO_BLUE};font-weight:700;text-transform:uppercase;"
-            "letter-spacing:.04em;margin-bottom:8px;'>🧠 Análise do dia</div>"
-            f"{corpo_ia}"
-            "</div>"
         )
     # Cabeçalho: identidade visual da Penso (marca-texto) + Analytical-Force.
     # TODO: quando o arquivo do logo real da Penso estiver disponível, trocar
     # este bloco por um <img> com o PNG/SVG oficial (base64 ou hospedado).
     # Por ora, usa apenas cores da marca (Penso Blue/Black) — sem inventar formas.
     cabecalho = f"""\
-      <td class="af-px af-animate" style="background:linear-gradient(120deg,{_BLACK_INTENSE},{_BLUE_TECH} 55%,{_PENSO_BLUE});padding:26px 28px;">
         <table role="presentation" cellspacing="0" cellpadding="0"><tr>
-          <td style="width:34px;height:34px;background:#ffffff;border-radius:9px;text-align:center;
-                     vertical-align:middle;font-weight:800;font-size:16px;color:{_PENSO_BLUE};">P</td>
-          <td style="padding-left:10px;color:#ffffff;font-size:13px;font-weight:700;letter-spacing:.03em;">PENSO</td>
         </tr></table>
-        <div style="color:#ffffff;font-size:22px;font-weight:800;letter-spacing:.2px;margin-top:12px;">📊 Analytical-Force</div>
-        <div style="color:#dbe4ff;font-size:13px;margin-top:4px;">Relatório diário de performance comercial</div>
-        <span style="display:inline-block;margin-top:12px;background:rgba(255,255,255,.18);color:#ffffff;
-              font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;">📅 {_escape(report_date)}</span>
       </td>"""
     rodape = f"""\
-      <td class="af-footer af-px" style="background:{_HOVER};padding:16px 28px;border-top:1px solid {_DIVISORIA};">
         <table role="presentation" cellspacing="0" cellpadding="0"><tr>
-          <td style="font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;padding-right:8px;">Fonte de dados</td>
           <td><img src="{_LOGO_SALESFORCE_URL}" alt="Salesforce" style="height:14px;vertical-align:middle;" /></td>
         </tr></table>
-        <div class="af-muted" style="font-size:12px;color:#94a3b8;margin-top:10px;">
           Relatório gerado automaticamente pelo agente <strong>Analytical-Force</strong> (Penso).
           Os números são calculados em Python a partir do Salesforce; a interpretação
           é gerada por modelo local. O relatório completo está anexado/registrado no sistema.
@@ -457,27 +576,28 @@ def _montar_html(
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 {_estilo_cabecalho()}
 </head>
-<body class="af-wrap" style="margin:0;padding:0;background:#f1f5f9;">
-<div class="af-wrap" style="background:#f1f5f9;padding:24px 0;font-family:Arial,Helvetica,sans-serif;">
   <table role="presentation" width="640" align="center" cellspacing="0" cellpadding="0" class="af-container"
          style="max-width:640px;margin:0 auto;">
-    <tr><td class="af-card" style="background:#ffffff;border-radius:12px;overflow:hidden;border:1px solid {_DIVISORIA};">
     <table role="presentation" width="100%" cellspacing="0" cellpadding="0">
     <tr>
 {cabecalho}
     </tr>
     <tr>
-      <td class="af-body af-px" style="padding:24px 28px;">
-        <h3 style="font-size:14px;color:#0f172a;margin:0 0 10px;padding-left:10px;border-left:3px solid {_PENSO_BLUE};">Resumo executivo</h3>
-        <p style="font-size:14px;color:#475569;margin:0 0 14px;line-height:1.55;">{resumo}</p>
         {bloco_ia}
-        <h3 style="font-size:14px;color:#0f172a;margin:22px 0 10px;padding-left:10px;border-left:3px solid {_PENSO_BLUE};">Números-chave</h3>
         {_grade_kpis(metrics)}
         {_bloco_contratos(metrics)}
-        <h3 style="font-size:14px;color:#0f172a;margin:22px 0 10px;padding-left:10px;border-left:3px solid {_ERRO};">Principais alertas</h3>
         {_bloco_alertas(alerts)}
         {_bloco_prioridades(alerts)}
@@ -583,23 +703,22 @@ def _bloco_destaques_html(highlights: dict[str, list[dict[str, Any]]]) -> str:
             info = f" <span style='color:#64748b'>({_escape(r['info'])})</span>" if r.get("info") else ""
             url = r.get("url")
             alvo = (
-                f"<a href='{_escape(url)}' style='color:#1f4fb2;text-decoration:none'>{nome}</a>"
                 if url
                 else nome
             )
-            linhas_li.append(f"<li style='margin-bottom:3px'>{alvo}{info}</li>")
-        secoes.append(
-            f"<div style='margin-bottom:12px'>"
-            f"<div style='font-size:13px;font-weight:700;color:#0f172a;margin-bottom:4px'>"
             f"{rotulo} <span style='color:#94a3b8;font-weight:400'>({len(itens)})</span></div>"
-            f"<ul style='margin:0;padding-left:18px;font-size:13px;color:#334155'>{''.join(linhas_li)}</ul>"
-            f"</div>"
         )
     if not secoes:
         return ""
     return (
-        "<h3 style='font-size:15px;color:#0f172a;margin:22px 0 8px;'>🔗 Registros do dia</h3>"
-        "<div style='font-size:12px;color:#94a3b8;margin-bottom:8px'>"
         "Links diretos no Salesforce (tarefas vencidas omitidas pelo volume).</div>"
         + "".join(secoes)
     )

 # ----------------------------------------------------------------------
 # Identidade visual (Penso) — paleta oficial da marca.
+#
+# Direção visual "SaaS moderno claro": fundo claro, cartões com cantos bem
+# arredondados, sombra suave e acentos em gradiente azul Penso — a mesma
+# linguagem usada no painel React (Linear/Notion/Stripe Dashboard-like).
+#
+# IMPORTANTE (compatibilidade de e-mail): clientes como Outlook desktop
+# (motor Word) e até o próprio Gmail em certos contextos IGNORAM cor de
+# fundo aplicada via ``<div style="background:...">``. A técnica segura
+# ("bulletproof") é usar tabelas com o atributo HTML ``bgcolor`` + a
+# propriedade CSS ``background-color`` explícita (nunca só o shorthand
+# ``background``) em toda célula colorida. Por isso todo bloco com fundo
+# sólido abaixo usa ``<table><tr><td bgcolor="...">`` em vez de ``<div>``.
 # ----------------------------------------------------------------------
 _PENSO_BLUE = "#0018FF"
 _BLUE_TECH = "#0004DD"
 _PENSO_BLACK = "#171717"
 _ERRO_TXT = "#c62f2f"
 _ALERTA = "#FFC453"
 _ALERTA_TXT = "#a15c00"
+_DIVISORIA = "#EBEDF3"
+_HOVER = "#F5F6FA"
+_RADIUS_CARD = "20px"
+_RADIUS_CHIP = "13px"
 # Logo do Salesforce (fonte de dados) — mesma URL pública já usada no painel React.
 _LOGO_SALESFORCE_URL = "https://upload.wikimedia.org/wikipedia/commons/f/f9/Salesforce.com_logo.svg"
 # Texto do selo: escuro sobre o Alerta (amarelo) para manter contraste; branco nos demais.
 _TEXTO_SEVERIDADE = {"high": "#ffffff", "medium": _PENSO_BLACK, "low": "#ffffff"}
 _ROTULO_SEVERIDADE = {"high": "ALTA", "medium": "MÉDIA", "low": "BAIXA"}
+# Fundo (tint) do cartão de alerta por severidade — sutil, mesma cor do selo a 8%.
+_FUNDO_SEVERIDADE = {"high": "#fff1f2", "medium": "#fffbeb", "low": "#f8fafc"}
+# Paleta de categorias dos KPIs — espelha exatamente as cores usadas no painel
+# React (StatGrid/Dashboard.jsx: blue/green/red/amber/violet/teal), para que
+# e-mail e front falem a mesma linguagem visual.
+_KPI_ESTILO: dict[str, dict[str, str]] = {
+    "blue": {"bg": "#EEF1FF", "icon": _PENSO_BLUE, "text": _PENSO_BLUE},
+    "green": {"bg": "#E7FBF4", "icon": "#0d9488", "text": "#0d9488"},
+    "red": {"bg": "#FFF1F2", "icon": "#e11d48", "text": "#e11d48"},
+    "amber": {"bg": "#FFF8E8", "icon": "#b45309", "text": "#b45309"},
+    "violet": {"bg": "#F5F0FF", "icon": "#7c3aed", "text": "#7c3aed"},
+    "teal": {"bg": "#E9FBFA", "icon": "#0d9488", "text": "#0d9488"},
+}
 # ----------------------------------------------------------------------
     def _flush() -> None:
         if bullets:
             itens = "".join(
+                f"<li style='margin-bottom:5px'>{b}</li>" for b in bullets
             )
             html.append(
+                f"<ul style='margin:6px 0 12px;padding-left:20px;font-size:14.5px;"
+                f"line-height:1.7;color:#334155'>{itens}</ul>"
             )
             bullets.clear()
         if linha.startswith("#"):
             _flush()
             html.append(
+                f"<div style='font-weight:800;color:#0f172a;margin:14px 0 5px;"
+                f"font-size:14.5px;'>{_md_inline(sem_hash)}</div>"
             )
         elif linha[:2] in ("- ", "* ") or linha.startswith("•"):
             bullets.append(_md_inline(linha.lstrip("-*• ").strip()))
         else:
             _flush()
             html.append(
+                f"<p style='margin:0 0 12px;font-size:14.5px;line-height:1.75;"
                 f"color:#334155'>{_md_inline(linha)}</p>"
             )
     _flush()
     return "".join(html)
+# ----------------------------------------------------------------------
+# Blocos "bulletproof" (tabela + bgcolor) — bloco colorido sólido que
+# renderiza de forma consistente em Gmail, Outlook (desktop/web/iOS/Android),
+# Apple Mail e Yahoo, ao contrário de ``<div style="background:...">`` puro.
+# ----------------------------------------------------------------------
+def _caixa(
+    conteudo: str,
+    cor_fundo: str,
+    *,
+    radius: str = _RADIUS_CHIP,
+    padding: str = "14px 16px",
+    classe: str = "af-altcard",
+    borda_esquerda: str | None = None,
+) -> str:
+    """Envolve ``conteudo`` em uma célula de tabela com fundo sólido.
+    Usa ``bgcolor`` (atributo HTML clássico, suportado até por clientes sem
+    CSS) + ``background-color`` inline — a combinação mais compatível para
+    pintar o fundo de um cartão em e-mail.
+    """
+    borda = f"border-left:4px solid {borda_esquerda};" if borda_esquerda else ""
+    return (
+        '<table role="presentation" width="100%" cellspacing="0" cellpadding="0" '
+        'style="margin-bottom:10px;"><tr>'
+        f'<td class="{classe}" bgcolor="{cor_fundo}" style="background-color:{cor_fundo};'
+        f'border-radius:{radius};{borda}padding:{padding};">{conteudo}</td>'
+        "</tr></table>"
+    )
+def _selo_icone(icone: str, cor: str, *, tamanho: int = 30, raio: int = 10, fonte: int = 14) -> str:
+    """Selo quadrado colorido (ícone) — tabela+bgcolor, nunca ``<div>``."""
+    return (
+        '<table role="presentation" cellspacing="0" cellpadding="0"><tr>'
+        f'<td bgcolor="{cor}" width="{tamanho}" height="{tamanho}" '
+        f'style="width:{tamanho}px;height:{tamanho}px;border-radius:{raio}px;background-color:{cor};'
+        f'text-align:center;vertical-align:middle;font-size:{fonte}px;line-height:{tamanho}px;">{icone}</td>'
+        "</tr></table>"
+    )
 # ----------------------------------------------------------------------
 # Blocos do e-mail HTML
 # ----------------------------------------------------------------------
+def _secao_titulo(icone: str, titulo: str, cor: str = _PENSO_BLUE) -> str:
+    """Cabeçalho de seção no estilo "chip de ícone" (mesma linguagem do painel).
+    Substitui o antigo título com apenas uma borda lateral por um selo
+    colorido arredondado + texto em negrito — mais próximo do design system
+    "SaaS moderno claro" usado no front (``.sh-ic`` / ``.sec-h``).
+    """
+    return (
+        '<table role="presentation" cellspacing="0" cellpadding="0" style="margin:26px 0 13px;"><tr>'
+        f'<td>{_selo_icone(icone, cor)}</td>'
+        f'<td style="padding-left:11px;font-size:15px;font-weight:800;color:#0f172a;'
+        f'letter-spacing:-.2px;">{_escape(titulo)}</td>'
+        "</tr></table>"
+    )
+def _linha_kpi(icone: str, rotulo: str, valor: str, categoria: str = "blue") -> str:
+    """Célula de KPI (ícone + rótulo + valor) com o cartão tintado por categoria.
+    Cada categoria usa a mesma paleta do painel React (azul/verde/vermelho/
+    âmbar/violeta/teal), com fundo suavemente tintado e cantos bem
+    arredondados. O quadrado do ícone e o fundo da célula usam a técnica
+    tabela+``bgcolor`` para pintar de forma confiável em qualquer cliente de
+    e-mail (inclusive Outlook desktop, que ignora fundo de ``<div>``).
     """
+    estilo = _KPI_ESTILO.get(categoria, _KPI_ESTILO["blue"])
     return (
+        f'<td class="af-kpi-cell" bgcolor="{estilo["bg"]}" style="padding:15px 14px 14px;'
+        f'border-radius:14px;background-color:{estilo["bg"]};vertical-align:top;">'
+        f'<div style="margin-bottom:9px;">{_selo_icone(icone, estilo["icon"], tamanho=26, raio=8, fonte=13)}</div>'
         f'<div class="af-kpi-label" style="font-size:11px;color:#64748b;text-transform:uppercase;'
+        f'letter-spacing:.05em;font-weight:700;">{_escape(rotulo)}</div>'
+        f'<div style="font-size:19px;font-weight:800;color:{estilo["text"]};'
+        f'margin-top:3px;letter-spacing:-.3px;">{_escape(valor)}</div></td>'
     )
     Não inclui mais "Tarefas vencidas" (removido a pedido — volume alto
     demais para um KPI de topo); em seu lugar entram "Oportunidades criadas".
+    As categorias de cor espelham exatamente as usadas no painel React.
     """
     leads = metrics.get("leads", {}) or {}
     opp = metrics.get("opportunities", {}) or {}
     contratos = metrics.get("contracts", {}) or {}
     celulas: list[str] = [
+        _linha_kpi("🌱", "Leads novos", _num(leads.get("new_leads")), "green"),
+        _linha_kpi("🎯", "Conversão de leads", _pct(leads.get("conversion_rate")), "blue"),
         _linha_kpi(
+            "💰",
             "Pipeline aberto",
             _moeda(opp.get("open_pipeline_product_value") or opp.get("open_pipeline_amount")),
+            "violet",
         ),
+        _linha_kpi("✨", "Oportunidades criadas", _num(opp.get("new_opportunities")), "blue"),
+        _linha_kpi("🏆", "Oportunidades ganhas", _num(opp.get("won_opportunities")), "blue"),
+        _linha_kpi("📉", "Oportunidades perdidas", _num(opp.get("lost_opportunities")), "red"),
+        _linha_kpi("🚧", "Oportunidades paradas", _num(opp.get("stalled_opportunities")), "amber"),
     ]
     if sat.get("configured") and sat.get("responses"):
+        celulas.append(_linha_kpi("😊", "Satisfação (nota média)", _num(sat.get("avg_score")), "teal"))
     if canc.get("configured") and canc.get("cancellations_count"):
         celulas.append(
+            _linha_kpi("❌", "Cancelamentos", _num(canc.get("cancellations_count")), "red")
         )
     if contratos.get("configured"):
+        celulas.append(
+            _linha_kpi("📄", "Contratos modificados hoje", _num(contratos.get("modified_today_count")), "violet")
+        )
     # Distribui as células em linhas de 3 colunas.
     linhas_html: list[str] = []
     for i in range(0, len(celulas), 3):
         grupo = celulas[i : i + 3]
         linhas_html.append(
+            "<tr>" + "".join(grupo)
+            + ('<td style="border-radius:14px;"></td>' * (3 - len(grupo)))
+            + "</tr>"
+            + '<tr><td colspan="3" style="height:10px;"></td></tr>'
         )
     return (
         '<table role="presentation" width="100%" cellspacing="0" cellpadding="0" '
     modificados = m.get("modified_today") or []
     if modificados:
         itens = "".join(
+            f"<li style='margin-bottom:4px'>"
             f"<strong>{_escape(c.get('name') or c.get('id') or '—')}</strong>"
             f" <span style='color:#64748b'>— modificado por "
             f"{_escape(c.get('modified_by') or 'responsável não identificado')}</span></li>"
             for c in modificados[:15]
         )
+        conteudo = (
+            f"<div style='font-size:13px;font-weight:700;color:#0f172a;margin-bottom:8px;'>"
             f"📄 Contratos modificados hoje "
             f"<span style='color:#94a3b8;font-weight:400'>({m.get('modified_today_count', 0)})</span></div>"
+            f"<ul style='margin:0;padding-left:18px;font-size:13px;color:#334155;line-height:1.6'>{itens}</ul>"
         )
+        partes.append(_caixa(conteudo, _HOVER))
     if m.get("readjustment_configured"):
         qtd = m.get("readjustment_month_count") or 0
         if qtd:
             inconsist = int(m.get("readjustment_inconsistent_count") or 0)
             reaj_itens = "".join(
+                f"<li style='margin-bottom:4px'>"
                 f"<strong>{_escape(c.get('name') or c.get('id') or '—')}</strong>: "
                 f"{_moeda(c.get('previous_value'))} → {_moeda(c.get('current_value'))} "
                 f"(<span style='color:{_SUCESSO_TXT if (c.get('delta') or 0) >= 0 else _ERRO_TXT}'>"
                 + ")</li>"
                 for c in (m.get("readjustment_contracts") or [])[:10]
             )
+            conteudo = (
+                f"<div style='font-size:13px;font-weight:700;color:#0f172a;margin-bottom:8px;'>"
                 f"💹 Reajuste de contratos no mês "
                 f"<span style='color:#94a3b8;font-weight:400'>({qtd} contrato(s) · "
                 f"{_moeda(m.get('readjustment_month_total'))})</span></div>"
+                f"<ul style='margin:0 0 8px;padding-left:18px;font-size:13px;color:#334155;line-height:1.6'>{reaj_itens}</ul>"
                 + (
                     f"<div style='font-size:12px;color:{_ALERTA_TXT};margin-bottom:6px;'>"
                     f"⚠ {inconsist} contrato(s) com possível inconsistência entre o reajuste "
                     else ""
                 )
                 + f"<div style='font-size:11px;color:#94a3b8;'>⚠ {_escape(m.get('readjustment_disclaimer', ''))}</div>"
             )
+            partes.append(_caixa(conteudo, _HOVER))
         else:
             partes.append(
                 f"<div style='font-size:12px;color:#94a3b8;margin-bottom:10px;'>"
     if not partes:
         return ""
+    return _secao_titulo("📄", "Contratos", _PENSO_BLUE) + "".join(partes)
 def _bloco_alertas(alerts: list[dict[str, Any]]) -> str:
     altos = [a for a in alerts if a.get("severity") == "high"]
     selecionados = (altos or alerts)[:6]
     if not selecionados:
+        return _caixa(
+            "<p style='color:#15803d;font-size:14px;margin:0;font-weight:600;'>"
+            "✅ Nenhum alerta crítico para o período.</p>",
+            "#ecfdf5",
         )
     cartoes: list[str] = []
         cor = _COR_SEVERIDADE.get(sev, "#94a3b8")
         cor_texto_selo = _TEXTO_SEVERIDADE.get(sev, "#ffffff")
         rotulo = _ROTULO_SEVERIDADE.get(sev, "INFO")
+        fundo = _FUNDO_SEVERIDADE.get(sev, "#f8fafc")
         acao = a.get("recommended_action")
+        selo = (
+            '<table role="presentation" cellspacing="0" cellpadding="0" style="display:inline-table;'
+            'vertical-align:middle;margin-right:7px;"><tr>'
+            f'<td bgcolor="{cor}" style="background-color:{cor};color:{cor_texto_selo};'
+            f'font-size:10px;font-weight:800;padding:3px 9px;border-radius:999px;'
+            f'letter-spacing:.05em;">{rotulo}</td></tr></table>'
+        )
         acao_html = (
+            f'<div style="margin-top:8px;font-size:13px;color:#0f172a;">'
             f'<strong>Ação:</strong> {_escape(acao)}</div>'
             if acao
             else ""
         )
+        conteudo = (
+            f'{selo}'
+            f'<span style="font-weight:800;color:#0f172a;font-size:14px;letter-spacing:-.1px;">'
             f'{_escape(a.get("title", ""))}</span>'
+            f'<div style="margin-top:6px;font-size:13px;color:#475569;line-height:1.55;">'
             f'{_escape(a.get("description", ""))}</div>'
+            f'{acao_html}'
+        )
+        cartoes.append(
+            _caixa(
+                conteudo,
+                fundo,
+                radius=f"0 {_RADIUS_CHIP} {_RADIUS_CHIP} 0",
+                padding="13px 16px",
+                classe="af-altcard",
+                borda_esquerda=cor,
+            )
         )
     return "".join(cartoes)
     if not acoes:
         return ""
     itens = "".join(
+        f'<li style="margin-bottom:8px;font-size:13.5px;color:#0f172a;line-height:1.55;">{_escape(a)}</li>'
         for a in acoes[:5]
     )
+    return _secao_titulo("🎯", "Prioridades para hoje", "#7c3aed") + _caixa(
+        f'<ol style="margin:0;padding-left:20px;">{itens}</ol>', _HOVER, padding="15px 17px 15px 24px"
     )
     Usa classes com ``!important`` para sobrepor os estilos inline em
     clientes que suportam ``<style>``/media queries (Apple Mail, Gmail
     app/web, Outlook.com/iOS). Clientes que ignoram ``<style>`` (ex.: Outlook
+    desktop clássico) continuam vendo o layout claro fixo via ``bgcolor`` +
+    estilo inline — nunca quebram, apenas não ganham o tema escuro/o
+    empilhamento em telas pequenas.
     """
     return f"""\
     <meta name="color-scheme" content="light dark">
         .af-card {{ background:#141a2b !important; border-color:#242c42 !important; }}
         .af-body h3 {{ color:#e8ecf5 !important; }}
         .af-body p, .af-body div, .af-body li, .af-body span {{ color:#c3ccdf !important; }}
+        .af-kpi-cell {{ background:#1a2138 !important; background-color:#1a2138 !important; }}
         .af-kpi-label {{ color:#8fa0c2 !important; }}
+        .af-altcard {{ background:#171e33 !important; background-color:#171e33 !important; }}
+        .af-hero {{ background:#171e33 !important; background-color:#171e33 !important; }}
         .af-footer {{ background:#0e1424 !important; border-color:#242c42 !important; }}
         .af-muted {{ color:#7d8aa8 !important; }}
         a.af-link {{ color:#9fb6ff !important; }}
 ) -> str:
     """Monta o e-mail executivo completo (documento HTML, pt-BR).
+    Visual "SaaS moderno claro": fundo cinza-claro fora do cartão, cartão
+    branco com cantos bem arredondados e sombra suave, cabeçalho em
+    gradiente azul Penso, KPIs tintados por categoria e selos de seção com
+    ícone — a mesma linguagem visual do painel React. Todo bloco com fundo
+    sólido usa tabela+``bgcolor`` (nunca ``<div>`` puro), para renderizar de
+    forma consistente em Gmail, Outlook, Apple Mail e Yahoo — inclusive
+    versões que ignoram fundo de ``<div>``. Responsivo (empilha em telas
+    pequenas) e com suporte a tema escuro (``prefers-color-scheme``),
+    preservando o layout claro como fallback via ``bgcolor``/inline.
     """
     altos = sum(1 for a in alerts if a.get("severity") == "high")
     resumo = (
         f"Foram gerados <strong>{len(alerts)} alerta(s)</strong>, "
         f"sendo <strong>{altos} de severidade alta</strong>."
     )
+    # Bloco de análise (insights/storytelling) — converte o Markdown do
+    # resumo gerado pela IA (ou template) em HTML. É o coração narrativo do
+    # e-mail: por isso ganha um cartão maior, com selo de destaque e mais
+    # respiro, em vez de só um parágrafo solto.
     bloco_ia = ""
     corpo_ia = _md_para_html(resumo_ia) if resumo_ia.strip() else ""
     if corpo_ia:
+        selo_ia = (
+            '<table role="presentation" cellspacing="0" cellpadding="0" style="margin-bottom:12px;"><tr>'
+            f'<td bgcolor="{_PENSO_BLUE}" style="background-color:{_PENSO_BLUE};color:#ffffff;'
+            'font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;'
+            'padding:5px 12px;border-radius:999px;">🧠 Análise do dia</td></tr></table>'
+        )
         bloco_ia = (
+            '<table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="margin:0 0 20px;"><tr>'
+            f'<td class="af-hero" bgcolor="#F5F6FE" style="background-color:#F5F6FE;'
+            f'background-image:linear-gradient(135deg,rgba(0,24,255,.07),rgba(124,58,237,.05) 55%,rgba(255,196,83,.06));'
+            f'border:1px solid rgba(0,24,255,.10);border-radius:16px;padding:18px 20px;">'
+            f"{selo_ia}{corpo_ia}"
+            "</td></tr></table>"
         )
     # Cabeçalho: identidade visual da Penso (marca-texto) + Analytical-Force.
     # TODO: quando o arquivo do logo real da Penso estiver disponível, trocar
     # este bloco por um <img> com o PNG/SVG oficial (base64 ou hospedado).
     # Por ora, usa apenas cores da marca (Penso Blue/Black) — sem inventar formas.
     cabecalho = f"""\
+      <td class="af-px af-animate" bgcolor="{_PENSO_BLUE}" style="background-color:{_PENSO_BLUE};
+          background-image:linear-gradient(120deg,{_BLACK_INTENSE},{_BLUE_TECH} 55%,{_PENSO_BLUE});padding:28px 30px;">
         <table role="presentation" cellspacing="0" cellpadding="0"><tr>
+          <td bgcolor="#ffffff" style="width:36px;height:36px;background-color:#ffffff;border-radius:11px;text-align:center;
+                     vertical-align:middle;font-weight:900;font-size:17px;color:{_PENSO_BLUE};">P</td>
+          <td style="padding-left:11px;color:#ffffff;font-size:13px;font-weight:700;letter-spacing:.04em;">PENSO</td>
+        </tr></table>
+        <div style="color:#ffffff;font-size:23px;font-weight:800;letter-spacing:-.3px;margin-top:14px;">📊 Analytical-Force</div>
+        <div style="color:#dbe4ff;font-size:13px;margin-top:5px;">Relatório diário de performance comercial</div>
+        <table role="presentation" cellspacing="0" cellpadding="0" style="margin-top:13px;"><tr>
+          <td bgcolor="rgba(255,255,255,.16)" style="background-color:rgba(255,255,255,.18);color:#ffffff;
+              font-size:12px;font-weight:600;padding:6px 13px;border-radius:999px;">📅 {_escape(report_date)}</td>
         </tr></table>
       </td>"""
     rodape = f"""\
+      <td class="af-footer af-px" bgcolor="{_HOVER}" style="background-color:{_HOVER};padding:18px 30px;border-top:1px solid {_DIVISORIA};">
         <table role="presentation" cellspacing="0" cellpadding="0"><tr>
+          <td style="font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;padding-right:8px;">Fonte de dados</td>
           <td><img src="{_LOGO_SALESFORCE_URL}" alt="Salesforce" style="height:14px;vertical-align:middle;" /></td>
         </tr></table>
+        <div class="af-muted" style="font-size:12px;color:#94a3b8;margin-top:11px;line-height:1.5;">
           Relatório gerado automaticamente pelo agente <strong>Analytical-Force</strong> (Penso).
           Os números são calculados em Python a partir do Salesforce; a interpretação
           é gerada por modelo local. O relatório completo está anexado/registrado no sistema.
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 {_estilo_cabecalho()}
 </head>
+<body class="af-wrap" bgcolor="#F6F7FB" style="margin:0;padding:0;background-color:#F6F7FB;font-family:-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;">
+<div class="af-wrap" style="background-color:#F6F7FB;padding:28px 0;font-family:-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;">
   <table role="presentation" width="640" align="center" cellspacing="0" cellpadding="0" class="af-container"
          style="max-width:640px;margin:0 auto;">
+    <tr><td class="af-card" bgcolor="#ffffff" style="background-color:#ffffff;border-radius:{_RADIUS_CARD};overflow:hidden;
+        border:1px solid {_DIVISORIA};box-shadow:0 20px 50px -20px rgba(6,6,20,.18);">
     <table role="presentation" width="100%" cellspacing="0" cellpadding="0">
     <tr>
 {cabecalho}
     </tr>
     <tr>
+      <td class="af-body af-px" style="padding:26px 30px;">
+        {_secao_titulo("📋", "Resumo executivo", _PENSO_BLUE)}
+        <p style="font-size:14px;color:#475569;margin:0 0 14px;line-height:1.6;">{resumo}</p>
         {bloco_ia}
+        {_secao_titulo("📊", "Números-chave", "#0d9488")}
         {_grade_kpis(metrics)}
         {_bloco_contratos(metrics)}
+        {_secao_titulo("🚨", "Principais alertas", _ERRO)}
         {_bloco_alertas(alerts)}
         {_bloco_prioridades(alerts)}
             info = f" <span style='color:#64748b'>({_escape(r['info'])})</span>" if r.get("info") else ""
             url = r.get("url")
             alvo = (
+                f"<a class='af-link' href='{_escape(url)}' style='color:{_PENSO_BLUE};text-decoration:none'>{nome}</a>"
                 if url
                 else nome
             )
+            linhas_li.append(f"<li style='margin-bottom:4px'>{alvo}{info}</li>")
+        conteudo = (
+            f"<div style='font-size:13px;font-weight:700;color:#0f172a;margin-bottom:6px'>"
             f"{rotulo} <span style='color:#94a3b8;font-weight:400'>({len(itens)})</span></div>"
+            f"<ul style='margin:0;padding-left:18px;font-size:13px;color:#334155;line-height:1.6'>{''.join(linhas_li)}</ul>"
         )
+        secoes.append(_caixa(conteudo, _HOVER))
     if not secoes:
         return ""
     return (
+        _secao_titulo("🔗", "Registros do dia", "#7c3aed")
+        + "<div style='font-size:12px;color:#94a3b8;margin-bottom:10px'>"
         "Links diretos no Salesforce (tarefas vencidas omitidas pelo volume).</div>"
         + "".join(secoes)
     )